:root{
    --purple-900:#211732; --purple-700:#382368; --purple-600:#4F35A3; --purple-500:#6A4CC4;
    --coral-500:#F4826F; --coral-600:#DD6650;
    --bg:#FBF9FF; --surface:#FFFFFF; --tint-purple:#F8F7FB; --tint-pink:#FBF8F7;
    --ink:#241B3A; --neutral-600:#6E6480; --neutral-400:#9A90AE; --line:#E3DCF2;
    --good:#3E8A5C; --good-bg:#E7F5EC; --warn:#B4791A; --warn-bg:#FBF0DD; --bad:#C24545; --bad-bg:#FBE9E9;
    --shadow: 0 18px 40px -22px rgba(38,20,74,0.35);
    --font-display:"Century Gothic","Avenir Next","Poppins","Segoe UI",ui-sans-serif,system-ui,sans-serif;
    --font-body:-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif;
    color-scheme: light;
  }
  @media (prefers-color-scheme: dark){
    :root:not([data-theme="light"]){
      --purple-900:#F3EEFF; --purple-700:#D9CBFF; --purple-600:#B6A0F2; --purple-500:#8C79E0;
      --coral-500:#FF9A85; --coral-600:#FFB09E;
      --bg:#150E22; --surface:#1E1530; --tint-purple:#211A3A; --tint-pink:#2A1B2A;
      --ink:#F3EEFF; --neutral-600:#BEB2D9; --neutral-400:#8E80AC; --line:#382A55;
      --good:#7BD79B; --good-bg:#173023; --warn:#F0C168; --warn-bg:#332507; --bad:#F29B9B; --bad-bg:#3A1A1A;
      --shadow: 0 18px 40px -22px rgba(0,0,0,0.6);
      color-scheme: dark;
    }
  }
  :root[data-theme="dark"]{
    --purple-900:#F3EEFF; --purple-700:#D9CBFF; --purple-600:#B6A0F2; --purple-500:#8C79E0;
    --coral-500:#FF9A85; --coral-600:#FFB09E;
    --bg:#150E22; --surface:#1E1530; --tint-purple:#211A3A; --tint-pink:#2A1B2A;
    --ink:#F3EEFF; --neutral-600:#BEB2D9; --neutral-400:#8E80AC; --line:#382A55;
    --good:#7BD79B; --good-bg:#173023; --warn:#F0C168; --warn-bg:#332507; --bad:#F29B9B; --bad-bg:#3A1A1A;
    --shadow: 0 18px 40px -22px rgba(0,0,0,0.6);
    color-scheme: dark;
  }
  *{ box-sizing:border-box; }
  body{ background:var(--bg); color:var(--ink); font-family:var(--font-body); padding-inline:16px; }
  .wrap{ max-width:1080px; margin-inline:auto; }
  h1,h2,h3,h4{ font-family:var(--font-display); font-weight:700; margin:0; color:var(--ink); }
  p{ margin:0; }
  a{ color:var(--purple-600); }
  .badge{
    display:inline-block; font-family:var(--font-display); font-size:.68rem; font-weight:700;
    letter-spacing:.08em; text-transform:uppercase; padding:.3rem .7rem; border-radius:999px;
  }
  .badge.preview{ background:var(--coral-500); color:#2b1208; }
  .badge.pending{ background:var(--warn-bg); color:var(--warn); }
  .badge.approved, .badge.active{ background:var(--good-bg); color:var(--good); }
  .badge.rejected{ background:var(--bad-bg); color:var(--bad); }

  /* ---- topbar ---- */
  .topbar{
    display:flex; align-items:center; justify-content:space-between; gap:1rem;
    padding-block:1.1rem; border-bottom:1px solid var(--line); margin-bottom:1.6rem; flex-wrap:wrap;
  }
  .brand{ display:flex; align-items:center; gap:.6rem; }
  .brand-badge{
    width:34px; height:34px; border-radius:9px; background:linear-gradient(145deg,var(--coral-500),var(--purple-600));
    display:flex; align-items:center; justify-content:center; color:#fff; font-family:var(--font-display); font-weight:700;
  }
  .brand-name{ font-family:var(--font-display); font-weight:700; font-size:1rem; }
  .brand-name span{ color:var(--coral-600); }
  .persona-pill{
    display:flex; align-items:center; gap:.6rem; background:var(--surface); border:1px solid var(--line);
    border-radius:999px; padding:.35rem .5rem .35rem 1rem; font-size:.82rem; box-shadow:var(--shadow);
  }
  .persona-pill button{
    font-family:var(--font-body); font-size:.76rem; font-weight:700; border:none; cursor:pointer;
    background:var(--tint-purple); color:var(--purple-600); border-radius:999px; padding:.4rem .8rem;
  }

  /* ---- layout bits ---- */
  .card{ background:var(--surface); border:1px solid var(--line); border-radius:16px; padding:1.4rem; box-shadow:var(--shadow); }
  .grid-3{ display:grid; grid-template-columns:repeat(3,1fr); gap:1.2rem; }
  .grid-2{ display:grid; grid-template-columns:1fr 1fr; gap:1.2rem; }
  @media (max-width:760px){ .grid-3, .grid-2{ grid-template-columns:1fr !important; } .grid-3 .btn, .grid-2 .btn{ justify-content:center; } }

  .landing-hero{ text-align:center; padding-block:2.4rem 1rem; }
  .landing-hero h1{ font-size:clamp(1.7rem,1.2rem + 2vw,2.4rem); margin-bottom:.6rem; }
  .landing-hero p{ color:var(--neutral-600); max-width:56ch; margin-inline:auto; }

  .option-card{ cursor:pointer; transition:transform .2s ease, box-shadow .2s ease; text-align:left; }
  .option-card:hover{ transform:translateY(-3px); }
  .option-card .icon{
    width:42px; height:42px; border-radius:11px; display:flex; align-items:center; justify-content:center;
    font-size:1.3rem; margin-bottom:.9rem; background:var(--tint-purple);
  }
  .option-card h3{ font-size:1.05rem; margin-bottom:.4rem; }
  .option-card p{ font-size:.85rem; color:var(--neutral-600); }

  .btn{
    font-family:var(--font-display); font-weight:700; font-size:.85rem; border-radius:10px; border:none;
    padding:.7rem 1.2rem; cursor:pointer; display:inline-flex; align-items:center; gap:.4rem;
  }
  .btn-primary{ background:var(--coral-500); color:#2b1208; }
  .btn-outline{ background:transparent; border:1.5px solid var(--purple-600); color:var(--purple-600); }
  .btn-ghost{ background:var(--tint-purple); color:var(--purple-600); }
  .btn-sm{ font-size:.76rem; padding:.5rem .9rem; }
  .btn[disabled]{ opacity:.5; cursor:not-allowed; }

  .tabs{ display:flex; gap:.5rem; flex-wrap:wrap; margin-bottom:1.4rem; }
  .tab{
    font-family:var(--font-display); font-weight:700; font-size:.8rem; padding:.55rem 1rem; border-radius:999px;
    border:1px solid var(--line); background:var(--surface); color:var(--neutral-600); cursor:pointer;
  }
  .tab.active{ background:var(--purple-600); border-color:var(--purple-600); color:#fff; }

  .stat-tile{ background:var(--surface); border:1px solid var(--line); border-radius:14px; padding:1.1rem 1.2rem; }
  .stat-tile .num{ font-family:var(--font-display); font-size:1.8rem; font-weight:700; color:var(--purple-600); }
  .stat-tile .label{ font-size:.78rem; color:var(--neutral-600); }

  .list-row{
    display:flex; align-items:center; justify-content:space-between; gap:1rem; padding:1rem 1.1rem;
    border:1px solid var(--line); border-radius:12px; background:var(--surface); margin-bottom:.7rem; flex-wrap:wrap;
  }
  .list-row .main{ flex:1; min-width:200px; }
  .list-row .main strong{ display:block; font-size:.92rem; }
  .list-row .main > span{ display:block; font-size:.78rem; color:var(--neutral-600); }
  .list-row .actions{ display:flex; gap:.5rem; flex-wrap:wrap; }

  .field{ margin-bottom:.9rem; }
  .field label{ display:block; font-size:.78rem; font-weight:700; color:var(--neutral-600); margin-bottom:.35rem; }
  .field input, .field select, .field textarea{
    width:100%; padding:.6rem .75rem; border-radius:9px; border:1px solid var(--line);
    background:var(--bg); color:var(--ink); font-family:var(--font-body); font-size:.88rem;
  }
  .field textarea{ min-height:80px; resize:vertical; }
  .checkrow{ display:flex; gap:1rem; flex-wrap:wrap; }
  .checkrow label{ display:flex; align-items:center; gap:.4rem; font-size:.84rem; font-weight:400; color:var(--ink); }

  .hp-field{ position:absolute; left:-5000px; width:1px; height:1px; overflow:hidden; }
  .form-error{ color:var(--bad); font-size:.84rem; font-weight:700; margin-bottom:.9rem; }
  .edit-actions{ display:flex; gap:.6rem; flex-wrap:wrap; }

  .empty-note{ text-align:center; color:var(--neutral-600); font-size:.85rem; padding:1.6rem; border:1px dashed var(--line); border-radius:12px; }

  /* ---- visual persona picker ---- */
  .persona-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:1rem; }
  .persona-card{
    background:var(--surface); border:1px solid var(--line); border-radius:16px; padding:1.3rem 1rem;
    text-align:center; cursor:pointer; box-shadow:var(--shadow);
    transition:transform .2s ease, border-color .2s ease;
  }
  .persona-card:hover{ transform:translateY(-3px); border-color:var(--purple-500); }
  .avatar{
    width:62px; height:62px; border-radius:50%; margin:0 auto .8rem; display:flex; align-items:center; justify-content:center;
    font-family:var(--font-display); font-weight:700; font-size:1.3rem; color:#fff;
  }
  .persona-card .p-name{ font-family:var(--font-display); font-weight:700; font-size:.92rem; display:block; }
  .persona-card .p-meta{ font-size:.74rem; color:var(--neutral-600); display:block; margin-top:.2rem; }
  .persona-card .p-tag{
    display:inline-block; margin-top:.6rem; font-size:.66rem; font-weight:700; letter-spacing:.06em;
    text-transform:uppercase; padding:.22rem .6rem; border-radius:999px; background:var(--tint-purple); color:var(--purple-600);
  }

  /* ---- lesson log ---- */
  .trend{ display:flex; align-items:flex-end; gap:6px; height:74px; padding:0 .1rem; margin-bottom:.5rem; overflow-x:auto; }
  .trend-bar{ width:20px; flex:none; border-radius:5px 5px 2px 2px; min-height:8px; position:relative; }
  .trend-bar.r-great{ background:#3E8A5C; }
  .trend-bar.r-good{ background:#4F8DC4; }
  .trend-bar.r-okay{ background:#D4972A; }
  .trend-bar.r-tough{ background:#C24545; }
  .trend-axis{ display:flex; justify-content:space-between; font-size:.7rem; color:var(--neutral-600); border-top:1px solid var(--line); padding-top:.35rem; }
  .trend-legend{ display:flex; gap:.9rem; flex-wrap:wrap; margin-top:.7rem; font-size:.7rem; color:var(--neutral-600); }
  .trend-legend span{ display:flex; align-items:center; gap:.3rem; }
  .legend-swatch{ width:10px; height:10px; border-radius:3px; display:inline-block; }

  .rating-dot{
    width:26px; height:26px; border-radius:50%; display:flex; align-items:center; justify-content:center;
    font-size:.8rem; cursor:default; flex:none;
  }
  .rating-dot.r-great{ background:var(--good-bg); }
  .rating-dot.r-good{ background:#E4F0FB; }
  .rating-dot.r-okay{ background:var(--warn-bg); }
  .rating-dot.r-tough{ background:var(--bad-bg); }
  @media (prefers-color-scheme: dark){ :root:not([data-theme="light"]) .rating-dot.r-good{ background:#15263A; } }
  :root[data-theme="dark"] .rating-dot.r-good{ background:#15263A; }

  .lesson-entry{
    border-left:3px solid var(--purple-500); padding:.7rem 0 .7rem 1rem; margin-bottom:.9rem;
  }
  .lesson-entry .l-top{ display:flex; align-items:center; gap:.5rem; flex-wrap:wrap; margin-bottom:.25rem; }
  .lesson-entry .l-date{ font-family:var(--font-display); font-weight:700; font-size:.82rem; }
  .lesson-entry .l-topic{ font-size:.85rem; margin-bottom:.2rem; }
  .lesson-entry .l-meta{ font-size:.76rem; color:var(--neutral-600); white-space:pre-wrap; }

  .sheet{ border:1px solid var(--line); border-radius:14px; overflow:hidden; }
  .sheet-head{ background:var(--purple-600); color:#fff; padding:1.1rem 1.3rem; }
  .sheet-head h3{ color:#fff; font-size:1.1rem; }
  .sheet-head p{ color:#E4DBFF; font-size:.8rem; margin-top:.2rem; }
  .sheet-body{ padding:1.2rem 1.3rem; display:grid; gap:1rem; }
  .sheet-row{ display:grid; grid-template-columns:160px 1fr; gap:1rem; align-items:start; }
  @media (max-width:600px){ .sheet-row{ grid-template-columns:1fr; } }
  .sheet-row .k{ font-size:.76rem; font-weight:700; text-transform:uppercase; letter-spacing:.05em; color:var(--purple-600); }
  .sheet-row .v{ font-size:.88rem; line-height:1.55; white-space:pre-wrap; }
  .grade-pair{ display:flex; gap:1.5rem; }
  .grade-pair div{ background:var(--tint-purple); border-radius:10px; padding:.6rem 1rem; text-align:center; }
  .grade-pair .num{ font-family:var(--font-display); font-weight:700; font-size:1.3rem; color:var(--purple-600); }
  .grade-pair .lab{ font-size:.7rem; color:var(--neutral-600); text-transform:uppercase; letter-spacing:.05em; }

  .file-row{ display:flex; align-items:center; justify-content:space-between; gap:.8rem; padding:.7rem .9rem; background:var(--tint-purple); border-radius:10px; margin-bottom:.5rem; font-size:.84rem; }

  .back-link{ font-size:.82rem; font-weight:700; color:var(--purple-600); cursor:pointer; display:inline-flex; align-items:center; gap:.3rem; margin-bottom:1rem; }

  .section-title{ font-size:.72rem; text-transform:uppercase; letter-spacing:.08em; color:var(--purple-600); font-weight:700; margin-bottom:.8rem; }

  .toast{
    position:fixed; bottom:20px; left:50%; transform:translateX(-50%); background:var(--purple-900); color:#fff;
    padding:.7rem 1.2rem; border-radius:999px; font-size:.82rem; z-index:50; box-shadow:var(--shadow); opacity:0;
    pointer-events:none; transition:opacity .25s ease;
  }
  .toast.show{ opacity:1; }

  /* ---- v2: accounts, tabs, messages, bottom nav ---- */
  .auth-card{ max-width:420px; margin:2rem auto; }
  .auth-card h2{ font-size:1.3rem; margin-bottom:.4rem; }
  .auth-card p{ color:var(--neutral-600); font-size:.88rem; margin-bottom:1.2rem; }
  .link-btn{ background:none; border:0; padding:0; color:var(--purple-600); font-weight:700; cursor:pointer; font-family:var(--font-body); font-size:.84rem; }
  .form-note{ background:var(--tint-purple); border-radius:10px; padding:.7rem .9rem; font-size:.82rem; color:var(--neutral-600); margin-bottom:.9rem; }
  .notice{ border-radius:10px; padding:.7rem .9rem; font-size:.86rem; margin-bottom:1rem; }
  .notice.ok{ background:var(--good-bg); color:var(--good); }
  .notice.warn{ background:var(--warn-bg); color:var(--warn); }
  .attention{ display:grid; gap:.6rem; }
  .attention .list-row{ margin-bottom:0; border-left:3px solid var(--coral-500); }
  .attention .list-row.calm{ border-left-color:var(--good); }
  .chip{ display:inline-block; font-size:.7rem; font-weight:700; padding:.2rem .55rem; border-radius:999px; background:var(--tint-purple); color:var(--purple-600); margin-left:.3rem; vertical-align:middle; }
  .chip.bad{ background:var(--bad-bg); color:var(--bad); } .chip.warn{ background:var(--warn-bg); color:var(--warn); } .chip.good{ background:var(--good-bg); color:var(--good); }
  .match-head{ display:flex; gap:1rem; flex-wrap:wrap; align-items:flex-start; justify-content:space-between; margin-bottom:1.2rem; }
  .match-facts{ display:flex; gap:.6rem; flex-wrap:wrap; }
  .fact{ background:var(--surface); border:1px solid var(--line); border-radius:12px; padding:.55rem .85rem; font-size:.8rem; color:var(--neutral-600); }
  .fact strong{ display:block; font-family:var(--font-display); font-size:.95rem; color:var(--ink); }
  .subtabs{ display:flex; gap:.4rem; flex-wrap:wrap; margin-bottom:1.2rem; }
  .thread{ display:grid; gap:.6rem; margin-bottom:1rem; max-height:52vh; overflow-y:auto; padding-right:.2rem; }
  .msg{ max-width:82%; padding:.65rem .9rem; border-radius:14px; font-size:.9rem; line-height:1.5; background:var(--tint-purple); }
  .msg.mine{ margin-left:auto; background:var(--purple-600); color:#fff; }
  .msg .who{ display:block; font-size:.7rem; opacity:.75; margin-bottom:.15rem; }
  .msg-form{ display:flex; gap:.5rem; }
  .msg-form textarea{ flex:1; min-height:44px; padding:.6rem .75rem; border-radius:9px; border:1px solid var(--line); background:var(--bg); color:var(--ink); font-family:var(--font-body); font-size:.9rem; resize:vertical; }
  .history-item{ border-top:1px solid var(--line); padding:.7rem 0; font-size:.84rem; color:var(--neutral-600); }
  .history-item summary{ cursor:pointer; font-weight:700; color:var(--purple-600); }
  .lesson-entry .l-actions{ margin-top:.4rem; display:flex; gap:.4rem; }
  .filter-row{ display:flex; gap:.5rem; flex-wrap:wrap; margin-bottom:1rem; }
  .bottom-nav{ display:none; }
  @media (max-width:640px){
    .subtabs{ display:none; }
    .bottom-nav{ position:fixed; left:0; right:0; bottom:0; z-index:40; display:grid; grid-template-columns:repeat(5,1fr); background:var(--surface); border-top:1px solid var(--line); padding:.35rem .5rem calc(.35rem + env(safe-area-inset-bottom, 0px)); }
    .bottom-nav button{ background:none; border:0; font-family:var(--font-display); font-weight:700; font-size:.72rem; color:var(--neutral-600); padding:.5rem .2rem; border-radius:10px; cursor:pointer; }
    .bottom-nav button.active{ color:var(--purple-600); background:var(--tint-purple); }
    body.has-bottom-nav{ padding-bottom:78px; }
    .grid-3[style], .grid-2[style]{ grid-template-columns:1fr !important; }
  }
  @media print{ .topbar, .subtabs, .bottom-nav, .back-link, .btn, form{ display:none !important; } body{ background:#fff; } }

  /* ---- RAG sheets ---- */
  .rag-summary{ display:flex; gap:.4rem; flex-wrap:wrap; margin-bottom:.6rem; }
  .rag-bar{ display:flex; height:10px; border-radius:999px; overflow:hidden; background:var(--tint-purple); }
  .rag-bar i{ display:block; height:100%; }
  .rag-area{ background:var(--surface); border:1px solid var(--line); border-radius:14px; padding:.9rem 1rem; margin-bottom:.8rem; }
  .rag-area h4{ font-size:.8rem; text-transform:uppercase; letter-spacing:.06em; color:var(--purple-600); margin-bottom:.5rem; }
  .rag-row{ display:flex; align-items:center; gap:.8rem; padding:.55rem 0; border-top:1px solid var(--line); flex-wrap:wrap; }
  .rag-topic{ flex:1; min-width:180px; font-size:.88rem; }
  .rag-topic strong{ display:block; }
  .rag-topic span{ display:block; font-size:.78rem; color:var(--neutral-600); }
  .rag-topic small{ display:block; font-size:.7rem; color:var(--neutral-400); }
  .rag-note{ width:100%; margin-top:.3rem; padding:.35rem .5rem; border-radius:7px; border:1px solid var(--line); background:var(--bg); color:var(--ink); font-size:.8rem; font-family:var(--font-body); }
  .rag-pills{ display:flex; gap:.3rem; }
  .rag{ display:inline-block; font-family:var(--font-display); font-weight:700; font-size:.72rem; padding:.3rem .65rem; border-radius:999px; border:1.5px solid var(--line); background:transparent; color:var(--neutral-600); cursor:default; font-family:var(--font-display); }
  button.rag{ cursor:pointer; }
  .rag.rag-red.is-on{ background:#C24545; border-color:#C24545; color:#fff; }
  .rag.rag-amber.is-on{ background:#D4972A; border-color:#D4972A; color:#1f1500; }
  .rag.rag-green.is-on{ background:#3E8A5C; border-color:#3E8A5C; color:#fff; }
  button.rag.rag-red:not(.is-on):hover{ border-color:#C24545; color:#C24545; }
  button.rag.rag-amber:not(.is-on):hover{ border-color:#D4972A; color:#B4791A; }
  button.rag.rag-green:not(.is-on):hover{ border-color:#3E8A5C; color:#3E8A5C; }
  .rag-remove{ font-size:.72rem; color:var(--neutral-400); }
  @media print{ .rag-remove, .rag-note, button.rag:not(.is-on){ display:none !important; } }

  /* ---- help panel ---- */
  .topbar-right{ display:flex; align-items:center; gap:.6rem; flex-wrap:wrap; }
  .help-btn{
    display:inline-flex; align-items:center; gap:.4rem; font-family:var(--font-body); font-size:.78rem; font-weight:700;
    background:var(--surface); color:var(--purple-600); border:1px solid var(--line); border-radius:999px;
    padding:.5rem .9rem; cursor:pointer; box-shadow:var(--shadow);
  }
  .help-btn::before{
    content:"?"; display:inline-flex; align-items:center; justify-content:center; width:16px; height:16px;
    border-radius:50%; background:var(--purple-600); color:#fff; font-size:.68rem; font-family:var(--font-display);
  }
  .help-btn:hover{ border-color:var(--purple-500); }
  .help-panel[hidden], .help-backdrop[hidden]{ display:none; }
  .help-backdrop{ position:fixed; inset:0; background:rgba(33,23,50,.45); z-index:60; }
  .help-panel{
    position:fixed; top:0; right:0; bottom:0; width:min(420px,100%); z-index:61; background:var(--surface);
    border-left:1px solid var(--line); display:flex; flex-direction:column; box-shadow:var(--shadow);
    padding-top:env(safe-area-inset-top,0px); padding-bottom:env(safe-area-inset-bottom,0px);
  }
  .help-head{ display:flex; align-items:center; justify-content:space-between; gap:1rem; padding:1rem 1.2rem; border-bottom:1px solid var(--line); }
  .help-head strong{ font-family:var(--font-display); font-size:1.05rem; }
  .help-close{
    font-family:var(--font-body); font-size:.76rem; font-weight:700; border:0; cursor:pointer;
    background:var(--tint-purple); color:var(--purple-600); border-radius:999px; padding:.4rem .9rem;
  }
  .help-body{ flex:1; overflow-y:auto; padding:1rem 1.2rem 2rem; }
  .help-search{
    width:100%; padding:.6rem .8rem; border:1px solid var(--line); border-radius:10px;
    background:var(--bg); color:var(--ink); font-family:var(--font-body); font-size:.88rem;
  }
  .help-label{ font-size:.7rem; text-transform:uppercase; letter-spacing:.08em; font-weight:700; color:var(--purple-600); margin:1.1rem 0 .5rem; }
  .help-topic{ border:1px solid var(--line); border-radius:12px; margin-bottom:.5rem; background:var(--bg); }
  .help-topic summary{ cursor:pointer; padding:.7rem .9rem; font-family:var(--font-display); font-weight:700; font-size:.9rem; }
  .help-topic[open] summary{ border-bottom:1px solid var(--line); }
  .help-topic-body{ padding:.8rem .9rem; font-size:.86rem; line-height:1.6; color:var(--neutral-600); }
  .help-topic-body p{ margin:0 0 .6rem; }
  .help-topic-body p:last-child{ margin-bottom:0; }
  .help-topic-body ol{ margin:0 0 .6rem; padding-left:1.2rem; }
  .help-topic-body li{ margin-bottom:.45rem; }
  .help-note{ background:var(--tint-purple); border-radius:9px; padding:.55rem .7rem; color:var(--ink); }
  .help-empty{ font-size:.86rem; color:var(--neutral-600); }
  .help-foot{ margin-top:1.4rem; font-size:.8rem; color:var(--neutral-600); }
  body.help-open{ overflow:hidden; }
  @media (max-width:640px){ .help-panel{ width:100%; } }
  @media print{ .help-btn, .help-panel, .help-backdrop{ display:none !important; } }