:root{
    --bg: #F1EFFB;
    --surface: #FFFFFF;
    --surface-alt: #EDE7F8;
    --ink: #3B3A5C;
    --ink-soft: #75739B;
    --ink-faint: #AAA8C9;
    --line: #DAD5EF;
    --accent: #7C93D6;
    --accent-deep: #43549A;
    --accent-pale: #DCE6F8;
    --warm: #B49BDE;
    --warm-pale: #EAE1F6;
    --warm-deep: #6A4E9C;
    --radius: 14px;
    --radius-sm: 8px;
    font-family: 'Karla', sans-serif;
  }
  *{ box-sizing: border-box; }
  body{
    margin:0;
    background: var(--bg);
    color: var(--ink);
    padding: 32px 20px 60px;
    display:flex;
    justify-content:center;
  }
  .page{
    width: 100%;
    max-width: 900px;
    position:relative;
  }
  h1,h2,h3{ font-family:'Fraunces', serif; font-weight:600; margin:0; }
  .eyebrow{
    font-family:'Space Mono', monospace;
    font-size:11px;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: var(--ink-soft);
    margin: 0 0 8px;
  }
  /* ---- Thread nav (signature element) ---- */
  .thread-bar{
    display:flex;
    align-items:center;
    gap: 10px;
    margin-bottom: 22px;
  }
  .thread-arrow{
    width: 30px; height:30px;
    border-radius:50%;
    border: 1px solid var(--line);
    background: var(--surface);
    color: var(--ink-soft);
    cursor:pointer;
    display:flex; align-items:center; justify-content:center;
    font-size: 15px;
    flex-shrink:0;
  }
  .thread-arrow:hover{ border-color: var(--accent); color: var(--accent); }
  .thread{
    position:relative;
    flex:1;
    display:flex;
    justify-content:space-between;
    align-items:center;
    padding: 0 4px;
  }
  .thread::before{
    content:"";
    position:absolute;
    left: 14px; right:14px; top:50%;
    height:1px;
    background: var(--line);
    transform: translateY(-50%);
    z-index:0;
  }
  .thread-day{
    position:relative;
    z-index:1;
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:6px;
    cursor:pointer;
    background:none;
    border:none;
    font-family:'Space Mono', monospace;
    color: var(--ink-soft);
    padding: 4px;
  }
  .thread-day:hover span{ color: var(--accent-deep); }
  .thread-dot{
    width:11px; height:11px;
    border-radius:50%;
    background: var(--surface);
    border: 1.5px solid var(--ink-faint);
  }
  .thread-day.is-past .thread-dot{ background: var(--accent-pale); border-color: var(--accent); }
  .thread-day.is-today .thread-dot{
    width:16px; height:16px;
    background: var(--accent);
    border-color: var(--accent);
  }
  .thread-day.is-selected .thread-dot{ box-shadow: 0 0 0 3px var(--warm-pale); border-color: var(--warm); }
  .thread-day.is-selected span{ color: var(--warm-deep); font-weight:700; }
  .thread-day span{ font-size:11px; }

  /* ---- Header ---- */
  .header{
    display:flex;
    justify-content:space-between;
    align-items:flex-end;
    flex-wrap:wrap;
    gap: 16px;
    margin-bottom: 26px;
  }
  .header h1{ font-size: 30px; }
  .header .date-sub{ color:var(--ink-soft); font-size:14px; margin-top:4px; }
  .energy{
    display:flex; flex-direction:column; align-items:flex-end; gap:8px;
  }
  .energy-dots{ display:flex; gap:6px; }
  .energy-dot{
    width:26px; height:26px;
    border-radius:50%;
    border:1.5px solid var(--line);
    background: var(--surface);
    cursor:pointer;
    color: var(--ink-faint);
    font-family:'Space Mono', monospace;
    font-size:11px;
    display:flex; align-items:center; justify-content:center;
  }
  .energy-dot.is-active{ background: var(--warm); border-color: var(--warm); color: #fff; }
  .language-toggle{ position:fixed; top:18px; right:20px; z-index:110; }
  .today-button{
    appearance:none;
    border:0;
    padding:0;
    background:none;
    color:var(--ink-soft);
    cursor:pointer;
    font: inherit;
    text-align:left;
  }
  .today-button:hover{ color:var(--accent-deep); }

  /* ---- Cards ---- */
  .card{
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 20px 22px;
  }
  .row{ display:grid; gap: 18px; margin-bottom: 18px; }
  .row.top{ grid-template-columns: 1fr 1.3fr; }
  .row.hourly{ grid-template-columns: 1fr; }
  .row.foot{ grid-template-columns: 1fr 1fr; }
  @media (max-width: 720px){
    .row.top, .row.foot{ grid-template-columns: 1fr; }
  }

  .card h2{ font-size: 15px; margin-bottom: 14px; }
  .card h2 .tag{ color: var(--ink-faint); font-family:'Space Mono', monospace; font-size:11px; font-weight:400; margin-left:6px; text-transform:none; }

  .priority-row{ display:flex; align-items:center; gap:10px; margin-bottom:10px; }
  .priority-row:last-child{ margin-bottom:0; }
  .checkbox{
    width:19px; height:19px;
    border-radius:5px;
    border:1.5px solid var(--line);
    flex-shrink:0;
    cursor:pointer;
    display:flex; align-items:center; justify-content:center;
    color: transparent;
    font-size: 12px;
  }
  .checkbox.is-checked{ background: var(--accent); border-color: var(--accent); color:#fff; }
  input[type=text], textarea{
    font-family:'Karla', sans-serif;
    font-size: 14px;
    color: var(--ink);
    border: none;
    border-bottom: 1px solid var(--line);
    background: transparent;
    padding: 6px 2px;
    width: 100%;
    outline: none;
  }
  input[type=text]:focus, textarea:focus{ border-color: var(--accent); }
  .priority-row input[type=text].is-checked{ color: var(--ink-faint); text-decoration: line-through; }

  .braindump-card{ background: var(--surface-alt); }
  .braindump-card textarea{
    border: none;
    width:100%;
    min-height: 140px;
    resize: vertical;
    line-height: 1.6;
    background: repeating-linear-gradient(var(--surface-alt) 0px, var(--surface-alt) 27px, var(--line) 28px);
  }

  .block-card textarea{
    min-height: 110px;
    resize: vertical;
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    padding: 10px;
    line-height:1.55;
  }
  .block-card textarea:focus{ border-color: var(--accent); }

  .hour-grid{
    display:grid;
    grid-template-columns: 1fr 1fr;
    gap: 0 28px;
  }
  .hour-row{
    display:flex;
    align-items:center;
    gap:10px;
    padding: 5px 0;
    border-bottom: 1px solid var(--line);
  }
  .hour-label{
    font-family:'Space Mono', monospace;
    font-size:12px;
    color: var(--ink-soft);
    width:46px;
    flex-shrink:0;
  }
  .hour-row input[type=text]{
    border-bottom:none;
    font-size:13px;
    padding: 4px 2px;
  }
  @media (max-width: 560px){ .hour-grid{ grid-template-columns: 1fr; } }

  .habit-row{ display:flex; align-items:center; gap:10px; margin-bottom: 9px; }
  .habit-row input[type=text]{ font-size:13px; border-bottom:none; padding:2px; }
  .habit-add{
    font-family:'Space Mono', monospace;
    font-size: 11px;
    color: var(--accent);
    background:none;
    border:none;
    cursor:pointer;
    padding: 6px 0 0;
  }

  .wentwell-card textarea{ min-height: 110px; border:none; line-height:1.6; }

  .save-hint{
    text-align:center;
    color: var(--ink-faint);
    font-family:'Space Mono', monospace;
    font-size: 11px;
    margin-top: 22px;
  }

  /* ---- School (kept secondary to the daily page) ---- */
  .school-toggle{
    font-family:'Space Mono', monospace;
    font-size: 12px;
    color: var(--accent-deep);
    background: var(--accent-pale);
    border: 1px solid var(--accent-pale);
    border-radius: 20px;
    padding: 7px 14px;
    cursor:pointer;
    display:flex;
    align-items:center;
    gap:6px;
    white-space:nowrap;
  }
  .school-toggle:hover{ border-color: var(--accent); }
  .school-toggle .dot{
    width:6px;height:6px;border-radius:50%;background:var(--warm);
    display:inline-block;
  }
  .school-toggle .dot.is-empty{ display:none; }

  .upcoming-banner{
    display:none;
    align-items:center;
    gap:10px;
    background: var(--warm-pale);
    border: 1px solid var(--warm);
    color: var(--warm-deep);
    border-radius: var(--radius-sm);
    padding: 10px 14px;
    font-size: 13px;
    margin-bottom: 18px;
  }
  .upcoming-banner.is-visible{ display:flex; }
  .upcoming-banner b{ font-weight:700; }

  .school-panel{
    display:none;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 20px 22px;
    margin-bottom: 22px;
  }
  .school-panel.is-open{
    display:block;
    animation: panel-enter 260ms ease-out both;
  }
  @keyframes panel-enter{
    from{ opacity:0; transform:translateY(-8px); }
    to{ opacity:1; transform:translateY(0); }
  }
  .school-toggle.is-active{ background:var(--accent); border-color:var(--accent); color:#fff; }
  .loading-skeleton{
    display:none;
    position:absolute;
    inset:0;
    padding:18px 0 40px;
    left:0;
    right:0;
    z-index:4;
    pointer-events:none;
    text-align:center;
    align-content:start;
  }
  .page.is-loading::before,
  #appRoot.is-auth-loading .page::before{
    content:"";
    position:absolute;
    inset:0;
    z-index:3;
    background:var(--bg);
  }
  .page.is-loading > :not(.loading-skeleton){ opacity:0; pointer-events:none; }
  .page.is-loading .loading-skeleton{ display:grid; gap:18px; }
  #appRoot.is-auth-loading .page > :not(.loading-skeleton){ visibility:hidden; }
  #appRoot.is-auth-loading .loading-skeleton{ display:grid; gap:18px; }
  .skeleton-block{
    min-height:120px;
    border-radius:var(--radius);
    background:linear-gradient(100deg, var(--surface-alt) 30%, #fff 45%, var(--surface-alt) 60%);
    background-size:200% 100%;
    animation:skeleton-shimmer 1.2s ease-in-out infinite;
    border:1px solid var(--line);
  }
  .skeleton-block.is-wide{ min-height:180px; }
  .loading-status{
    display:inline-flex;
    align-self:start;
    justify-self:center;
    align-items:center;
    gap:10px;
    width:max-content;
    max-width:100%;
    margin:0 auto 16px;
    padding:4px 0;
    color:var(--accent-deep);
    font-family:'Space Mono', monospace;
    font-size:11px;
  }
  .loading-detail{
    display:none;
    margin:-8px auto 16px;
    color:var(--ink-soft);
    font-size:11px;
  }
  .loading-skeleton.is-slow .loading-detail{ display:block; }
  .loading-spinner{
    width:14px;
    height:14px;
    border:2px solid var(--accent-pale);
    border-top-color:var(--accent);
    border-radius:50%;
    animation:loading-spin .8s linear infinite;
  }
  @keyframes loading-spin{ to{ transform:rotate(360deg); } }
  @keyframes skeleton-shimmer{ to{ background-position:-200% 0; } }
  .skeleton-layout{ display:grid; gap:16px; }
  .skeleton-view{ display:none; }
  .loading-skeleton[data-variant="month"] [data-skeleton-view="month"],
  .loading-skeleton[data-variant="day"] [data-skeleton-view="day"],
  .loading-skeleton[data-variant="week"] [data-skeleton-view="week"],
  .loading-skeleton[data-variant="year"] [data-skeleton-view="overview"],
  .loading-skeleton[data-variant="semester"] [data-skeleton-view="overview"],
  .loading-skeleton[data-variant="goals"] [data-skeleton-view="list"],
  .loading-skeleton[data-variant="vision"] [data-skeleton-view="list"],
  .loading-skeleton[data-variant="forget"] [data-skeleton-view="list"],
  .loading-skeleton[data-variant="badday"] [data-skeleton-view="list"]{ display:grid; }
  .skeleton-day-header{ display:flex; justify-content:space-between; align-items:end; min-height:72px; }
  .skeleton-day-title{ width:230px; height:32px; border-radius:6px; }
  .skeleton-energy{ width:150px; height:24px; border-radius:999px; }
  .skeleton-daily-wide,.skeleton-large-panel{ min-height:230px; border-radius:var(--radius); }
  .skeleton-panel-heading{ width:240px; height:26px; border-radius:6px; }
  .skeleton-week-values{ display:grid; grid-template-columns:repeat(7,1fr); gap:12px; }
  .skeleton-week-values span{ height:64px; border-radius:8px; }
  .skeleton-overview-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:12px; }
  .skeleton-overview-grid span{ height:100px; border-radius:8px; }
  .skeleton-input-line{ width:55%; height:42px; border-radius:8px; }
  .skeleton-pill-row{ display:flex; flex-wrap:wrap; gap:10px; }
  .skeleton-pill{ width:62px; height:34px; border-radius:999px; }
  .skeleton-pill:nth-child(2){ width:72px; }
  .skeleton-pill:nth-child(3){ width:88px; }
  .skeleton-pill:nth-child(4){ width:60px; }
  .skeleton-pill:nth-child(5){ width:66px; }
  .skeleton-pill:nth-child(6){ width:72px; }
  .skeleton-pill:nth-child(7){ width:112px; }
  .skeleton-pill:nth-child(8){ width:92px; }
  .skeleton-month-panel,
  .skeleton-daily-card{
    border:1px solid var(--line);
    border-radius:var(--radius);
    background:var(--surface);
    padding:20px;
  }
  .skeleton-month-header{ display:flex; align-items:center; gap:14px; margin-bottom:18px; }
  .skeleton-circle{ width:30px; height:30px; border-radius:50%; flex-shrink:0; }
  .skeleton-title{ width:150px; height:22px; border-radius:6px; }
  .skeleton-stats{ display:grid; grid-template-columns:repeat(5, 1fr); gap:12px; margin-bottom:22px; }
  .skeleton-stat{ height:80px; border-radius:8px; }
  .skeleton-reflection{ height:75px; border-radius:8px; margin-bottom:16px; }
  .skeleton-reflection:last-child{ margin-bottom:0; }
  .skeleton-daily-grid{ display:grid; grid-template-columns:1fr 1.3fr; gap:16px; }
  .skeleton-daily-card{ height:210px; }
  .skeleton-daily-card.is-wide{ background:var(--surface-alt); }
  .skeleton-shape{ background:linear-gradient(100deg, var(--surface-alt) 30%, #fff 45%, var(--surface-alt) 60%); background-size:200% 100%; animation:skeleton-shimmer 1.2s ease-in-out infinite; }
  @media (max-width:720px){ .skeleton-stats{ grid-template-columns:repeat(2, 1fr); } .skeleton-daily-grid{ grid-template-columns:1fr; } }
  @media (prefers-reduced-motion: reduce){
    .school-panel.is-open{ animation:none; }
    .skeleton-block,.skeleton-shape,.loading-spinner{ animation:none; }
  }
  .school-form{
    display:grid;
    grid-template-columns: 1.4fr 1fr 0.9fr 0.9fr auto;
    gap: 10px;
    align-items:end;
    margin-bottom: 18px;
    padding-bottom:18px;
    border-bottom: 1px solid var(--line);
  }
  @media (max-width: 720px){ .school-form{ grid-template-columns: 1fr 1fr; } }
  .school-form label{
    font-size:11px; color:var(--ink-soft); display:block; margin-bottom:4px;
    font-family:'Space Mono', monospace;
  }
  .school-form select, .school-form input[type=date]{
    font-family:'Karla', sans-serif;
    font-size:13px;
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    padding: 7px 8px;
    width:100%;
    background: var(--surface);
    color: var(--ink);
  }
  .school-form input[type=text]{
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    padding: 7px 8px;
  }
  .school-add-btn{
    font-family:'Space Mono', monospace;
    font-size:12px;
    background: var(--accent);
    color:#fff;
    border:none;
    border-radius: var(--radius-sm);
    padding: 8px 14px;
    cursor:pointer;
    height: fit-content;
  }
  .school-item{
    display:flex;
    align-items:center;
    gap:12px;
    padding: 9px 0;
    border-bottom: 1px solid var(--line);
  }
  .school-item:last-child{ border-bottom:none; }
  .school-item.is-done .school-item-title{ color: var(--ink-faint); text-decoration: line-through; }
  .school-item-type{
    font-family:'Space Mono', monospace;
    font-size:10px;
    text-transform:uppercase;
    letter-spacing:0.05em;
    padding: 3px 8px;
    border-radius: 20px;
    flex-shrink:0;
  }
  .school-item-type.devoir{ background: var(--accent-pale); color: var(--accent-deep); }
  .school-item-type.examen{ background: var(--warm-pale); color: var(--warm-deep); }
  .school-item-body{ flex:1; min-width:0; }
  .school-item-title{ font-size:14px; }
  .school-item-course{ font-size:12px; color: var(--ink-soft); }
  .school-item-date{
    font-family:'Space Mono', monospace;
    font-size:12px;
    color: var(--ink-soft);
    flex-shrink:0;
  }
  .school-item-del{
    background:none; border:none; cursor:pointer;
    color: var(--ink-faint); font-size:16px; flex-shrink:0;
  }
  .school-item-del:hover{ color: var(--warm-deep); }
  .school-empty{ color: var(--ink-faint); font-size:13px; }

  .school-item-cal{
    background:none; border:none; cursor:pointer;
    color: var(--ink-faint); font-size:15px; flex-shrink:0;
    display:flex; align-items:center; justify-content:center;
    width:22px; height:22px;
  }
  .school-item-cal:hover{ color: var(--accent-deep); }

  .card-head{ display:flex; align-items:center; justify-content:space-between; gap:10px; flex-wrap:wrap; margin-bottom:14px; }
  .card-head h2{ margin-bottom:0; }
  .cal-export-btn{
    font-family:'Space Mono', monospace;
    font-size: 11px;
    color: var(--accent-deep);
    background: var(--accent-pale);
    border: 1px solid var(--accent-pale);
    border-radius: 20px;
    padding: 6px 12px;
    cursor:pointer;
    white-space:nowrap;
    display:flex; align-items:center; gap:6px;
  }
  .cal-export-btn:hover{ border-color: var(--accent); }
  .cal-hint{
    font-size:11px;
    color: var(--ink-faint);
    margin: -4px 0 14px;
  }

  .week-budget{ margin-bottom: 22px; padding-bottom: 20px; border-bottom: 1px solid var(--line); }
  .week-budget-rows{ display:flex; flex-wrap:wrap; gap: 14px 18px; margin-bottom: 12px; }
  .week-budget-row{ display:flex; flex-direction:column; gap:4px; width: 78px; }
  .week-budget-day{
    font-family:'Space Mono', monospace;
    font-size:11px;
    color: var(--ink-soft);
    text-transform:uppercase;
  }
  .week-budget-row input[type=text]{
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    padding: 6px 8px;
    font-family:'Space Mono', monospace;
    font-size:13px;
    text-align:right;
  }
  .week-budget-total{
    font-family:'Space Mono', monospace;
    font-size:13px;
    color: var(--ink);
  }
  .week-budget-total b{ font-size:16px; margin-left:6px; }

  .month-nav{ display:flex; align-items:center; gap:12px; margin-bottom:18px; }
  .month-nav h2{ font-size:18px; margin:0; min-width: 140px; }
  .month-stats{
    display:grid;
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    gap: 12px;
    margin-bottom: 22px;
  }
  .stat-card{ background: var(--surface-alt); border-radius: var(--radius-sm); padding: 12px 14px; }
  .stat-label{
    font-family:'Space Mono', monospace;
    font-size:10px;
    color: var(--ink-soft);
    text-transform:uppercase;
    letter-spacing:0.04em;
    margin-bottom:6px;
  }
  .stat-value{ font-family:'Fraunces', serif; font-size:20px; font-weight:600; }
  .reflect-block{ margin-bottom:16px; }
  .reflect-block:last-child{ margin-bottom:0; }
  .reflect-block label{ display:block; margin-bottom:6px; }
  .reflect-block textarea{
    min-height:80px;
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    padding: 10px;
    line-height: 1.55;
  }
  .reflect-block textarea:focus{ border-color: var(--accent); }

  /* ---- Year / Semester / Goals / Vision / Forget / Bad day ---- */
  .mini-month-grid{
    display:grid;
    grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
    gap: 10px;
    margin-bottom: 20px;
  }
  .mini-month-card{
    background: var(--surface-alt);
    border-radius: var(--radius-sm);
    padding: 12px 14px;
    cursor:pointer;
    border: 1px solid transparent;
  }
  .mini-month-card:hover{ border-color: var(--accent); }
  .mini-month-card.is-current{ border-color: var(--accent); background: var(--accent-pale); }
  .mini-month-name{ font-family:'Fraunces', serif; font-weight:600; font-size:14px; margin-bottom:8px; }
  .mini-month-stat{
    font-family:'Space Mono', monospace;
    font-size:10.5px;
    color: var(--ink-soft);
    display:flex;
    justify-content:space-between;
    margin-bottom:3px;
  }
  .mini-month-stat b{ color: var(--ink); font-weight:700; }

  .semester-tabs{ display:flex; flex-wrap:wrap; gap:8px; margin-bottom:18px; }
  .semester-tab{
    font-family:'Space Mono', monospace;
    font-size:12px;
    padding: 7px 14px;
    border-radius: 20px;
    border: 1px solid var(--line);
    background: var(--surface);
    color: var(--ink-soft);
    cursor:pointer;
  }
  .semester-tab.is-active{ background: var(--accent); border-color: var(--accent); color:#fff; }

  .list-row{ display:flex; align-items:center; gap:10px; margin-bottom:9px; }
  .list-row:last-child{ margin-bottom:0; }
  .list-row input[type=text]{ font-size:13px; border-bottom:none; padding:2px; }
  .list-add-form{ display:flex; gap:8px; margin-top:14px; }
  .list-add-form input[type=text]{
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    padding: 7px 8px;
    font-size:13px;
  }
  .list-add-btn{
    font-family:'Space Mono', monospace;
    font-size:12px;
    background: var(--accent);
    color:#fff;
    border:none;
    border-radius: var(--radius-sm);
    padding: 8px 14px;
    cursor:pointer;
    white-space:nowrap;
    flex-shrink:0;
  }

  .badday-panel{ background: var(--warm-pale); border-color: var(--warm); }
  .badday-panel .list-add-btn{ background: var(--warm); }
  .badday-panel textarea{
    border: 1px solid var(--warm);
    border-radius: var(--radius-sm);
    background: var(--surface);
    padding:10px;
    min-height:80px;
    line-height:1.55;
    width:100%;
    margin-bottom:18px;
  }
  .badday-panel textarea:focus{ border-color: var(--warm-deep); }
  .badday-panel h2{ color: var(--warm-deep); }

  /* ---- Connexion (multi-appareils) ---- */
  .auth-gate{
    position: fixed; inset: 0;
    background: var(--bg);
    display:flex; align-items:center; justify-content:center;
    padding: 20px;
    z-index: 100;
  }
  .auth-card{
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 32px 28px;
    width: 100%; max-width: 360px;
    text-align:center;
  }
  .auth-card input[type=email]{
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    padding: 10px 12px;
    width:100%;
    font-family:'Karla', sans-serif;
    font-size:14px;
    outline:none;
  }
  .auth-card input[type=email]:focus{ border-color: var(--accent); }
  .auth-card .list-add-btn{ display:block; }
  #appRoot{ display:none; }
  .signout-row{
    text-align:center;
    margin-top: 6px;
  }
  .signout-row button{
    font-family:'Space Mono', monospace;
    font-size: 11px;
    color: var(--ink-faint);
    background:none;
    border:none;
    cursor:pointer;
    text-decoration: underline;
  }
  .signout-row button:hover{ color: var(--warm-deep); }