/* GENERATED by sync-from-extension.mjs — do NOT edit by hand.
   = extension/sidepanel.html <style> (verbatim design tokens) + _web-additions.css. */
:root{
    /* ── §1 Design tokens ─────────────────────────────────────────────── */
    /* Surfaces (dark chrome) */
    --tg-panel:#0B1E2D; --tg-surface:#14324A; --tg-surface-2:#123049;
    --tg-hairline:#1D3850; --tg-border:#24415B;
    /* Text on dark */
    --tg-text:#E9EFF1; --tg-dim:#8DA0A9; --tg-faint:#6E7E86;
    /* Brand navy (deepest inks) */
    --tg-ink:#0E1C28; --tg-ink-2:#172A3A;
    /* Gold accent (brand) */
    --tg-gold:#C6A15B; --tg-gold-deep:#9A7B3F; --tg-gold-dark:#D8B863;
    --tg-gold-grad:linear-gradient(155deg,#F0D07E 0%,#D0A95E 46%,#9A7B3F 100%);
    /* Luxe surfaces — subtle gradients, a faint gold hairline, and a soft focus glow */
    --tg-surf-grad:linear-gradient(180deg,#17394F,#112C45);
    --tg-panel-grad:linear-gradient(180deg,#102639,#0A1926);
    --tg-gold-line:rgba(198,161,91,.16);
    --tg-gold-glow:0 0 0 3px rgba(216,184,99,.11);
    --tg-ease:cubic-bezier(.22,.61,.36,1);
    /* Champagne tints (quiet gold washes) */
    --tg-champ:#F5EFE1; --tg-champ-border:#E4D6A9; --tg-champ-text:#6E5828;
    /* Letter sheet (ALWAYS light) */
    --tg-paper:#FCFBF8; --tg-paper-border:#ECE6DA; --tg-paper-text:#1B2B36; --tg-paper-quote:#24404C;
    /* Macro tint = AI-authored text, sits ON the paper */
    --tg-macro-bg:#F6EFDC; --tg-macro-rule:rgba(154,123,63,.30);
    /* Amber = placeholders / attention ONLY */
    --tg-amber-bg:#FDF6E9; --tg-amber-border:#E9C583; --tg-amber-dot:#C98A1E; --tg-amber-text:#8A5A12; --tg-amber-chip:#FCEFD6;
    /* Feedback */
    --tg-toast-bg:#0E1C28; --tg-toast-text:#F5EFE1; --tg-toast-dot:#D8B863;
    /* Radii */
    --tg-r-xs:6px; --tg-r-sm:7px; --tg-r-md:9px; --tg-r-lg:11px;
    --tg-r-xl:12px; --tg-r-2xl:14px; --tg-r-3xl:18px; --tg-r-4xl:20px; --tg-r-pill:999px;
    /* Elevation */
    --tg-sh-sm:0 1px 3px rgba(0,0,0,.08);
    --tg-sh-md:0 10px 24px -10px rgba(0,0,0,.30);
    --tg-sh-lg:0 24px 50px -30px rgba(0,0,0,.60);
    --tg-sh-xl:0 30px 70px -30px rgba(0,0,0,.70);
    --tg-sh-paper:0 24px 50px -30px rgba(0,0,0,.55), 0 2px 6px -3px rgba(0,0,0,.20);
    --tg-sh-dock:-20px 0 44px -26px rgba(0,0,0,.35);
    /* Full-screen canvas behind everything */
    --tg-canvas:radial-gradient(1200px 700px at 20% -10%, #14324A, #08131E 62%);

    /* ── §2 Type roles ────────────────────────────────────────────────── */
    --sans:'IBM Plex Sans',-apple-system,BlinkMacSystemFont,'Segoe UI',Helvetica,Arial,sans-serif;
    --serif:'Source Serif 4','Iowan Old Style','Palatino Linotype',Palatino,Georgia,serif;
    --mono:'IBM Plex Mono','SF Mono','Consolas','Menlo',monospace;

    /* Legacy semantic aliases → dark theme (safety net for any un-restyled rule) */
    --ink:var(--tg-text); --ink2:var(--tg-text); --paper:var(--tg-surface); --canvas:var(--tg-canvas);
    --teal:var(--tg-gold-dark); --teal-dark:var(--tg-gold-dark); --teal-bright:var(--tg-gold-dark); --mint:var(--tg-surface-2);
    --rule:var(--tg-border); --rule-soft:var(--tg-hairline); --muted:var(--tg-dim);
    --warn-bg:var(--tg-amber-bg); --warn-border:var(--tg-amber-border); --warn-ink:var(--tg-amber-text);
    --red:#F0857D; --red-bg:#2A1615; --red-border:#7A3B36;

    /* Letter hierarchy: the gap between sections is 3× the gap between lines. */
    --line-gap:.5em; --sec-gap:1.5em;
  }
  *{box-sizing:border-box}
  html,body{margin:0;height:100%}
  body{font-family:var(--sans); color:var(--tg-text); background:var(--tg-canvas); background-attachment:fixed; font-size:13px; line-height:1.5;}
  .app{display:flex; flex-direction:column; min-height:100%;}
  .hidden{display:none !important;}
  /* §6.7 keyboard-visible focus everywhere */
  :focus-visible{outline:2px solid var(--tg-gold-dark); outline-offset:2px;}
  button:focus-visible{outline-offset:2px;}

  /* Whisper motion — slow, elegant transitions + a barely-there hover lift.
     Purely visual (GPU compositor); no effect on letter generation. */
  button, .minibtn, .chip, .type, .gear, .seg button, .stylechip, .copybtn, .fontbtn, .helpq,
  .rxsend, .rxpick, .toolbtn, .intakebtn, .depthopt, .deepenbtn, .phfill, .phclear, .tplsave .go,
  input[type=text], input[type=password], textarea, .card {
    transition: border-color .3s ease, box-shadow .38s var(--tg-ease),
                color .24s ease, transform .34s var(--tg-ease), filter .3s ease;
  }
  /* the quiet (secondary) controls brighten softly, lift a hair, and bloom a gentle shadow */
  .minibtn:hover, .gear:hover, .chip:hover, .type:hover, .stylechip:hover, .copybtn:hover,
  .fontbtn:hover, .helpq:hover, .rxsend:hover, .toolbtn:hover, .intakebtn:hover,
  .tplsave .go:hover, button.ghost:hover {
    transform: translateY(-1.5px);
    filter: brightness(1.1);
    box-shadow: 0 10px 24px -14px rgba(0,0,0,.6), 0 0 0 1px rgba(198,161,91,.12);
  }
  /* the gold CTAs lift gently and let their glow bloom, keeping the metallic sheen */
  button.primary:hover, .insertbtn:hover {
    transform: translateY(-1.5px); filter: brightness(1.05);
    box-shadow: 0 18px 38px -14px rgba(198,161,91,.6), inset 0 1px 0 rgba(255,255,255,.34), inset 0 -1px 0 rgba(0,0,0,.14);
  }
  /* a press settles everything back down — tactile, unhurried */
  button:active, .minibtn:active, .chip:active, .type:active, .gear:active, .stylechip:active,
  .copybtn:active, .fontbtn:active, .toolbtn:active, .insertbtn:active, button.primary:active {
    transform: translateY(0); filter:none; transition-duration:.09s;
  }
  @media (prefers-reduced-motion: reduce){
    *{transition-duration:.01ms !important; animation-duration:.01ms !important; animation-iteration-count:1 !important;}
    .minibtn:hover, .gear:hover, .chip:hover, .type:hover, .stylechip:hover, .copybtn:hover,
    .fontbtn:hover, .toolbtn:hover, button.primary:hover, .insertbtn:hover{transform:none; box-shadow:none; filter:none;}
  }

  /* Header — §4 docked-panel top bar (sticky, panel bg, hairline base) */
  header{background:var(--tg-panel); color:var(--tg-text); padding:12px 14px; position:sticky; top:0; z-index:5; border-bottom:1px solid var(--tg-hairline);}
  .brandrow{display:flex; align-items:center; gap:10px;}
  .logo{width:34px;height:34px;border-radius:var(--tg-r-lg);display:flex;align-items:center;justify-content:center;flex:0 0 auto;
    background:var(--tg-gold-grad);
    box-shadow:0 4px 12px -4px rgba(154,123,63,.6), inset 0 1px 0 rgba(255,255,255,.25);}
  .word{font-family:var(--serif); font-size:17px; font-weight:600; line-height:1; color:var(--tg-text);}
  .word .d{color:var(--tg-gold-dark);}
  .tag{color:var(--tg-dim); letter-spacing:.16em; font-size:8.5px; font-weight:600; text-transform:uppercase; margin-top:3px;}
  .statusrow{display:flex; align-items:center; justify-content:space-between; margin-top:10px; gap:8px;}
  .engine{display:flex; align-items:center; gap:7px; font-size:11.5px; color:var(--tg-dim);}
  .dot{width:8px;height:8px;border-radius:50%;background:var(--tg-faint);flex:0 0 auto;}
  .dot.ok{background:#37D0A6; box-shadow:0 0 0 3px rgba(55,208,166,.2);}
  .dot.bad{background:#E3736B; box-shadow:0 0 0 3px rgba(227,115,107,.2);}
  .dot.wait{background:var(--tg-gold-dark); box-shadow:0 0 0 3px rgba(216,184,99,.2); animation:blink 1.2s ease-in-out infinite;}
  @keyframes blink{0%,100%{opacity:1}50%{opacity:.35}}
  .gear{background:var(--tg-surf-grad); border:1px solid var(--tg-border); color:var(--tg-text); border-radius:var(--tg-r-pill);
    padding:5px 11px; font-size:11px; font-weight:500; cursor:pointer;}
  .gear:hover{border-color:var(--tg-gold-deep);}
  .gear.on{background:var(--tg-gold-dark); color:var(--tg-ink); border-color:var(--tg-gold-dark);}

  /* Testing banner = attention → amber */
  .banner{background:var(--tg-amber-bg); border-bottom:1px solid var(--tg-amber-border); color:var(--tg-amber-text); padding:8px 14px; font-size:11px; line-height:1.45;}

  main{flex:1 1 auto; padding:14px;}
  .card{background:var(--tg-panel-grad); border:1px solid var(--tg-gold-line); border-radius:var(--tg-r-xl); padding:14px; margin-bottom:12px;
    box-shadow:var(--tg-sh-lg), inset 0 1px 0 rgba(255,255,255,.045);}
  .card h2{font-size:16px; font-weight:700; letter-spacing:-.01em; margin:0 0 2px; color:var(--tg-text);}
  .card .sub{color:var(--tg-dim); font-size:11px; margin-bottom:10px;}

  label{display:block; font-size:11px; font-weight:600; margin:10px 0 4px; color:var(--tg-text);}
  .hint{color:var(--tg-dim); font-weight:400; font-size:10.5px;}
  input[type=text], input[type=password], textarea{
    width:100%; padding:8px 10px; border:1px solid var(--tg-gold-line); border-radius:var(--tg-r-md); font-size:12px; font-family:var(--sans);
    background:var(--tg-surf-grad); color:var(--tg-text); outline:none; box-shadow:inset 0 1px 2px rgba(0,0,0,.22);}
  input::placeholder, textarea::placeholder{color:var(--tg-faint);}
  input:focus, textarea:focus{border-color:rgba(216,184,99,.5); box-shadow:inset 0 1px 2px rgba(0,0,0,.22), var(--tg-gold-glow);}
  textarea{font-family:var(--mono); min-height:80px; resize:vertical; line-height:1.5;}

  /* §4 Segmented control (dark chrome) */
  .seg{display:inline-flex; background:var(--tg-surface-2); border:1px solid var(--tg-border); border-radius:var(--tg-r-md); padding:2px; margin-top:2px;}
  .seg button{border:none; background:transparent; color:var(--tg-dim); border-radius:var(--tg-r-sm); padding:5px 14px; font-size:11px; font-weight:500; cursor:pointer;}
  .seg button.on{background:var(--tg-surf-grad); color:var(--tg-gold-dark); box-shadow:0 1px 2px rgba(0,0,0,.25), inset 0 1px 0 rgba(255,255,255,.05);}

  .row{display:flex; gap:8px; margin-top:14px; flex-wrap:wrap;}
  /* §4 Primary button — gold gradient */
  button.primary{flex:1 1 auto; border:none; border-radius:var(--tg-r-pill); padding:13px; color:#fff; font-size:12.5px; font-weight:600; cursor:pointer;
    background:var(--tg-gold-grad); box-shadow:0 12px 28px -12px rgba(154,123,63,.72), inset 0 1px 0 rgba(255,255,255,.28), inset 0 -1px 0 rgba(0,0,0,.12); display:flex; align-items:center; justify-content:center; gap:7px;}
  button.primary:disabled{background:#12293C; color:var(--tg-faint); box-shadow:none; cursor:not-allowed;}
  /* The Generate button is the single loudest element — brightest gold, strongest glow */
  #genBtn{padding:15px; font-size:13.5px; letter-spacing:.01em;
    box-shadow:0 16px 34px -12px rgba(214,168,80,.85), inset 0 1px 0 rgba(255,255,255,.34), inset 0 -1px 0 rgba(0,0,0,.14);}
  #genBtn:hover{box-shadow:0 22px 44px -14px rgba(224,178,90,.95), inset 0 1px 0 rgba(255,255,255,.38), inset 0 -1px 0 rgba(0,0,0,.14);}
  #genBtn:disabled{box-shadow:none;}
  /* §4 Secondary / ghost */
  button.ghost{border:1px solid var(--tg-border); background:var(--tg-surf-grad); color:var(--tg-text); border-radius:var(--tg-r-md); padding:10px 14px; font-size:12.5px; font-weight:600; cursor:pointer;}
  button.ghost:hover{border-color:var(--tg-gold-deep);}
  button:disabled{opacity:.7; cursor:default;}

  .minibtn{border:1px solid var(--tg-border); background:var(--tg-surf-grad); color:var(--tg-dim); border-radius:var(--tg-r-pill); padding:4px 10px; font-size:10.5px; font-weight:600; cursor:pointer; display:inline-flex; align-items:center; gap:5px;}
  .minibtn:hover{border-color:var(--tg-gold-deep); color:var(--tg-gold-dark);}
  .minibtn svg{flex:0 0 auto;}
  .minibtn:disabled{opacity:.5;}
  .micbtn.rec{background:rgba(240,133,125,.14); border-color:var(--red); color:var(--red);}
  .dictnote{font-size:10px; color:var(--tg-dim); margin-top:7px; line-height:1.4; display:none;}
  .dictnote.show{display:block;}
  .helpq{border:1px solid var(--tg-border); background:var(--tg-surface); color:var(--tg-dim); border-radius:50%; width:22px; height:22px; font-size:12px; font-weight:700; cursor:pointer; padding:0; line-height:1;}
  .helpq:hover, .helpq.on{border-color:var(--tg-gold-deep); color:var(--tg-gold-dark);}
  .helpcard{background:var(--tg-surface-2); border:1px solid var(--tg-border); border-radius:var(--tg-r-lg); padding:11px 12px; margin-top:8px;}
  .helphead{display:flex; justify-content:space-between; align-items:center; font-size:12px; font-weight:700; color:var(--tg-gold-dark); margin-bottom:8px;}
  .helpintro{font-size:11px; color:var(--tg-text); line-height:1.55; margin-bottom:10px;}
  .helpintro b{color:var(--tg-gold-dark);}
  .helpx{border:none; background:transparent; font-size:17px; line-height:1; color:var(--tg-dim); cursor:pointer; padding:0 2px;}
  .helpex{font-family:var(--mono); font-size:10.5px; color:var(--tg-dim); line-height:1.5; margin-bottom:9px;}
  .helpgrammar{font-size:11px; color:var(--tg-text); line-height:1.75; margin-bottom:6px;}
  .helpgrammar b{color:var(--tg-gold-dark);}
  .helplabel{font-size:10.5px; color:var(--tg-dim); font-weight:600; margin:9px 0 5px;}
  .tplsave{display:flex; gap:6px; margin-top:2px; align-items:center;}
  .tplsave input{flex:0 1 150px;}
  .tplsave .go{border:1px solid var(--tg-gold-deep); background:none; color:var(--tg-gold-dark); border-radius:var(--tg-r-md); padding:7px 12px; font-size:11px; font-weight:600; cursor:pointer;}
  .timesaved{font-size:10.5px; color:var(--tg-gold-dark); font-weight:600; margin-top:10px; display:flex; align-items:center; gap:6px;}
  .timesaved:empty{display:none;}
  .totalbar{display:none; align-items:center; justify-content:center; gap:5px; padding:4px 14px 2px; font-size:10px; font-weight:500; color:var(--tg-dim);
    background:none; border:none; opacity:.85;}
  .totalbar.show{display:flex;}
  .totalbar svg{opacity:.45; width:11px; height:11px;}
  /* §4 Status ribbon (Checking gaps → Drafting → Ready) */
  .statusstrip{display:none; align-items:center; gap:6px; margin-top:10px; font-size:10.5px; color:var(--tg-dim); flex-wrap:wrap;}
  .statusstrip.show{display:flex;}
  .statusstrip .ststep{padding:3px 9px; border-radius:var(--tg-r-sm); background:var(--tg-surface-2); border:1px solid var(--tg-border); color:var(--tg-dim);}
  .statusstrip .ststep.done{background:var(--tg-champ); border-color:var(--tg-champ-border); color:var(--tg-champ-text);}
  .statusstrip .ststep.active{background-image:var(--tg-gold-grad); border-color:transparent; color:#fff; font-weight:600; animation:tgPulse 1.2s ease-in-out infinite;}
  .statusstrip .ststep.next{opacity:.6;}
  .statusstrip .starrow{opacity:.4;}
  /* Two-person intake: physician's second box */
  .physblock{margin-top:12px;}
  .physblock.hidden{display:none;}
  .physlabel{font-size:12px; font-weight:600; color:var(--tg-text); margin-bottom:6px;}
  .intaketools{margin-top:8px; display:flex; align-items:center; gap:9px; flex-wrap:wrap;}
  .intaketools.hidden{display:none;}
  .intakebtn{border:1px solid var(--tg-gold-deep); background:none; color:var(--tg-gold-dark); border-radius:var(--tg-r-md); padding:7px 13px; font-size:12px; font-weight:600; cursor:pointer;}
  .intakebtn:hover{background:rgba(216,184,99,.10);}
  .intakemsg{font-size:10.5px; color:var(--tg-dim);}
  /* Classic ⇄ Modern toggle chip on the finished letter — outline gold */
  .stylechip{border:1px solid var(--tg-gold-deep); background:none; color:var(--tg-gold-dark); border-radius:var(--tg-r-pill); padding:3px 10px; font-size:11px; font-weight:600; cursor:pointer;}
  .stylechip:hover{background:rgba(216,184,99,.10);}
  .stylechip.hidden{display:none;}
  .fontbtn{border:1px solid var(--tg-border); background:var(--tg-surf-grad); color:var(--tg-dim); border-radius:var(--tg-r-sm); width:24px; height:22px; font-size:11px; font-weight:700; cursor:pointer; padding:0;}
  .fontbtn:hover{border-color:var(--tg-gold-deep); color:var(--tg-gold-dark);}
  .retrybtn{margin-top:7px; border:1px solid var(--red-border); background:none; color:var(--red); border-radius:var(--tg-r-md); padding:6px 12px; font-size:11px; font-weight:600; cursor:pointer;}

  .spin{width:13px;height:13px;border-radius:50%;border:2px solid rgba(255,255,255,.4);border-top-color:#fff;animation:sp .7s linear infinite;display:inline-block;}
  @keyframes sp{to{transform:rotate(360deg)}}

  .note{font-size:11px; margin-top:10px; padding:8px 10px; border-radius:var(--tg-r-md); line-height:1.45;}
  .note.ok{background:rgba(55,208,166,.10); border:1px solid rgba(55,208,166,.35); color:#7FE0BC;}
  .note.bad{background:rgba(240,133,125,.10); border:1px solid rgba(240,133,125,.40); color:#F2A39C;}
  .note.info{background:var(--tg-surface-2); border:1px solid var(--tg-border); color:var(--tg-gold-dark);}

  /* Compose */
  .steplab{display:flex; align-items:center; gap:8px; margin:2px 0 8px;}
  .stepnum{width:20px;height:20px;border-radius:50%;background:var(--tg-surface-2);color:var(--tg-gold-dark);border:1px solid var(--tg-border);
    display:flex;align-items:center;justify-content:center;font-size:10.5px;font-weight:700;flex:0 0 auto;}
  .steplab .t{font-size:12px;font-weight:600;color:var(--tg-text);}
  .chips{display:flex; gap:6px; flex-wrap:wrap; margin-bottom:8px;}
  .chip{border:1px solid var(--tg-border); background:var(--tg-surface); color:var(--tg-dim); border-radius:var(--tg-r-pill); padding:4px 9px; font-size:10.5px; cursor:pointer;}
  .chip:hover{border-color:var(--tg-gold-deep); color:var(--tg-gold-dark); background:#173248;}
  #shorthand{min-height:120px; font-size:13px; line-height:1.6; border:1px solid var(--tg-gold-line); border-left:2px solid rgba(198,161,91,.5); border-radius:var(--tg-r-xl); background:var(--tg-surf-grad); color:var(--tg-text); box-shadow:inset 0 1px 3px rgba(0,0,0,.25);}
  #shorthand:focus{border-color:rgba(216,184,99,.42); border-left:2px solid rgba(198,161,91,.75); box-shadow:inset 0 1px 3px rgba(0,0,0,.25), 0 0 0 3px rgba(216,184,99,.10);}
  .types{display:grid; grid-template-columns:1fr 1fr 1fr; gap:8px; margin-bottom:4px;}
  /* Document-type buttons — spacious dark-navy tiles; deliberately QUIET so the gold
     "Generate" button clearly outranks them (graphic hierarchy). */
  .type{border:1px solid var(--tg-border); background:var(--tg-surf-grad); color:var(--tg-text); border-radius:var(--tg-r-xl); padding:13px 8px; font-size:13px; font-weight:500; text-align:center; cursor:pointer; line-height:1.2; box-shadow:inset 0 1px 0 rgba(255,255,255,.03);}
  /* Quiet hover: a soft steel-blue lift — NO gold (gold is reserved for the CTA & the
     selected tile), keeping the doc-type row subordinate to Generate. */
  .type:hover{border-color:#33556F; box-shadow:0 8px 18px -12px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.05);}
  /* Selected tile — light champagne fill with a gold hairline (as in the mockup). */
  .type.on, .type.on:hover{background:var(--tg-champ); color:var(--tg-champ-text); border-color:var(--tg-champ-border); font-weight:600; box-shadow:0 6px 16px -9px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.5); filter:none;}

  /* Quiz — needs attention (quiet amber emphasis) */
  .quiz{border:1px solid var(--tg-amber-border); box-shadow:var(--tg-sh-lg); animation:tgUp .22s ease-out;}
  .quiz .qhead{display:flex;align-items:center;gap:7px;font-size:12px;font-weight:600;color:var(--tg-text);margin-bottom:2px;}
  .quiz .qsub{color:var(--tg-dim);font-size:10.5px;margin-bottom:8px;}
  .quiz .q{font-size:11px;font-weight:600;color:var(--tg-gold-dark);margin:9px 0 4px;}
  /* voice: the field currently being dictated into is highlighted */
  .quiz input.voicehere{border-color:var(--tg-gold-dark)!important; box-shadow:0 0 0 3px rgba(216,184,99,.16);}
  .quiz .q.voicehere{color:var(--tg-gold-dark); }
  .quiz .q.voicehere::before{content:"🎙 "; }
  /* live voice status line under the mic */
  .voicestatus{display:none; margin-top:6px; font-size:10.5px; line-height:1.45; color:var(--tg-gold-dark); background:rgba(216,184,99,.08); border:1px solid var(--tg-gold-line); border-radius:var(--tg-r-md); padding:6px 9px;}
  .voicestatus.show{display:block;}
  .voicestatus b{color:var(--tg-text);}
  .vsbtn{margin-left:6px;border:1px solid var(--tg-gold-deep);background:none;color:var(--tg-gold-dark);border-radius:8px;padding:4px 11px;font-size:11px;font-weight:700;cursor:pointer;font-family:inherit;white-space:nowrap;}
  .vsbtn:hover{background:rgba(216,184,99,.12);}

  /* Letter */
  .lettertop{display:flex; align-items:center; justify-content:space-between; gap:8px; margin-bottom:8px; flex-wrap:wrap;}
  .wc{font-size:10.5px;color:var(--tg-dim);background:var(--tg-surface);border:1px solid var(--tg-border);border-radius:var(--tg-r-pill);padding:3px 9px;}
  .copybtn{display:flex;align-items:center;gap:6px;border:1px solid var(--tg-gold-deep);border-radius:var(--tg-r-pill);padding:6px 12px;font-size:11px;font-weight:600;cursor:pointer;background:none;color:var(--tg-gold-dark);}
  .copybtn:hover{background:rgba(216,184,99,.10);}
  .copybtn.done{background:var(--tg-champ);border-color:var(--tg-champ-border);color:var(--tg-champ-text);}
  /* §4 Letter sheet — ALWAYS paper-light, floating in the dark chrome */
  #out{background:var(--tg-paper); border:1px solid var(--tg-paper-border); border-radius:var(--tg-r-xl); padding:24px 22px; box-shadow:var(--tg-sh-paper); color:var(--tg-paper-text); max-height:460px; overflow:auto; margin-bottom:2px;}
  .letter{font-family:var(--serif); white-space:pre-wrap; line-height:1.72; color:var(--tg-paper-text); font-size:14.5px; margin:0; padding:0; text-wrap:pretty;}
  .letterbody{font-family:var(--serif); font-size:14.5px; color:var(--tg-paper-text); line-height:1.72;}
  #out > .letterbody:not(:first-child){margin-top:var(--sec-gap);}
  .lrow{white-space:pre-wrap;}
  .lrow.sec{margin-top:var(--sec-gap);}
  .lrow.ln{margin-top:var(--line-gap);}
  .lsec-lbl{font-weight:600; color:var(--tg-paper-quote);}
  /* §5 streaming caret — 2px × 1em bar in gold-deep, on the paper */
  .letter.streaming::after, .planlive.streaming::after{content:""; display:inline-block; width:2px; height:1em; margin-left:1px; vertical-align:-.14em; background:var(--tg-gold-deep); animation:tgCaret 1s step-end infinite;}
  /* Plan-depth control: section header + per-item deepen (on the paper) */
  .plansection{margin-top:var(--sec-gap);}
  .planhead{display:flex; align-items:baseline; justify-content:space-between; gap:10px; flex-wrap:wrap; margin-bottom:.3em;}
  .planheadtext{font-family:var(--serif); font-weight:600; font-size:14.5px; color:var(--tg-paper-quote); line-height:1.4; letter-spacing:.005em;}
  /* segmented control tuned for the paper sheet (not the dark-chrome variant) */
  .depthpill{display:inline-flex; border:1px solid var(--tg-paper-border); background:#F1ECE0; border-radius:var(--tg-r-pill); overflow:hidden; flex:0 0 auto; padding:2px;}
  .depthpill .depthopt{border:none; background:transparent; color:#8A7B5C; font-size:10px; font-weight:600; padding:2px 9px; cursor:pointer; line-height:1.5; border-radius:var(--tg-r-pill);}
  .depthpill .depthopt.on{background:#fff; color:var(--tg-gold-deep); box-shadow:0 1px 2px rgba(0,0,0,.10);}
  .depthpill .depthopt:not(.on):hover{color:var(--tg-gold-deep);}
  .planitems{margin-top:2px;}
  .planitem{position:relative; padding-right:26px; border-radius:var(--tg-r-xs);}
  .planitem + .planitem{margin-top:var(--line-gap);}
  /* §4 Deepened plan item — 3px gold left rule, indented, quote text */
  .planitem.deepened{border-left:3px solid var(--tg-gold); padding-left:12px; color:var(--tg-paper-quote); background:none;}
  .planitem.deepening{border-left:3px solid var(--tg-champ-border); padding-left:12px; background:none;}
  .deepenbtn{position:absolute; right:2px; top:3px; border:none; background:transparent; color:#9AA6A0; cursor:pointer; opacity:0; transition:opacity .12s, background .12s; width:22px; height:22px; display:inline-flex; align-items:center; justify-content:center; border-radius:var(--tg-r-pill);}
  .deepenbtn svg{display:block;}
  .planitem:hover .deepenbtn{opacity:.7;}
  .deepenbtn:hover{background:rgba(154,123,63,.12); color:var(--tg-gold-deep); opacity:1;}
  .deepenbtn.on{opacity:.9; color:var(--tg-gold-deep);}
  .planspin{font-size:10px; color:#8A7B5C; display:inline-flex; align-items:center; gap:6px;}
  .planlive{min-height:1.4em;}
  .empty{color:#9AA6A0; text-align:center; padding:26px 10px; font-size:12px; line-height:1.5;}
  .empty .big{color:#C7BFAF; margin-bottom:8px;}

  /* Insert-into-note bar — §4 primary (gold gradient) */
  .insertbar{display:flex; align-items:center; gap:7px; flex-wrap:wrap; margin-bottom:12px;}
  .insertbtn{border:none; border-radius:var(--tg-r-pill); padding:11px 18px; font-size:12.5px; font-weight:600; cursor:pointer; color:#fff;
    background:var(--tg-gold-grad); box-shadow:0 12px 28px -12px rgba(154,123,63,.72), inset 0 1px 0 rgba(255,255,255,.28), inset 0 -1px 0 rgba(0,0,0,.12); display:inline-flex; align-items:center; gap:6px;}
  .insertbtn:disabled{background:#12293C; color:var(--tg-faint); box-shadow:none; cursor:not-allowed;}
  .insertmsg{font-size:11px; line-height:1.4; margin-top:6px; width:100%;}
  .insertmsg.ok{color:#7FE0BC;}
  .insertmsg.warn{color:var(--tg-gold-dark);}
  .insertmsg.info{color:var(--tg-dim);}
  .insertmsg.bad{color:#F2A39C;}
  .insertmsg .btns{display:flex; gap:6px; margin-top:6px; flex-wrap:wrap;}
  .insertmsg .btns button{border-radius:var(--tg-r-md); padding:6px 11px; font-size:11px; font-weight:600; cursor:pointer;}
  .insertmsg .yes{border:none; background:var(--tg-gold-grad); color:#fff;}
  .insertmsg .no{border:1px solid var(--tg-border); background:var(--tg-surface); color:var(--tg-dim);}

  /* Prescribe in OSCAR — dark inset well */
  .rxpanel{background:var(--tg-surface-2); border:1px solid var(--tg-border); border-radius:var(--tg-r-lg); padding:11px 12px; margin-bottom:12px;
    box-shadow:var(--tg-sh-sm);}
  .rxpanel.hidden{display:none;}
  .rxnote{font-size:10.5px; color:var(--tg-dim); line-height:1.5; margin-bottom:9px;}
  .rxitem{display:flex; align-items:center; gap:8px; margin-top:7px;}
  .rxlabel{flex:1; font-size:11.5px; color:var(--tg-text); line-height:1.35;}
  .rxacts{display:flex; gap:6px; flex:0 0 auto;}
  .rxsend{border:1px solid var(--tg-gold-deep); background:none; color:var(--tg-gold-dark); border-radius:var(--tg-r-md); padding:6px 10px; font-size:11px; font-weight:600; cursor:pointer; white-space:nowrap;}
  .rxsend:hover{background:rgba(216,184,99,.10);}
  .rxsend.dose{background:none; color:var(--tg-dim); border:1px solid var(--tg-border);}
  .rxtools{margin-top:10px;}
  .rxpick{border:none; background:transparent; color:var(--tg-dim); font-size:10.5px; text-decoration:underline; cursor:pointer; padding:0;}
  .rxstatus{font-size:10.5px; margin-top:9px; line-height:1.4;}
  .rxstatus.ok{color:#7FE0BC;}
  .rxstatus.warn{color:var(--tg-gold-dark);}
  .rxstatus.info{color:var(--tg-dim);}
  .rxempty{font-size:11px; color:var(--tg-dim);}

  /* Drug-safety alert — critical attention (dark red panel) */
  #safety:empty{display:none;}
  .safetycard{border:1px solid var(--red-border); background:var(--red-bg); border-radius:var(--tg-r-lg); padding:11px 12px; margin-bottom:12px;
    box-shadow:0 10px 24px -12px rgba(0,0,0,.5);}
  .safetyhead{display:flex; align-items:center; gap:7px; font-size:12px; font-weight:800; color:var(--red); margin-bottom:6px;}
  .safetyhead svg{flex:0 0 auto;}
  .flag{background:rgba(0,0,0,.18); border:1px solid var(--red-border); border-radius:var(--tg-r-md); padding:8px 9px; margin-top:7px;}
  .flag .frow{display:flex; align-items:center; gap:6px; flex-wrap:wrap; margin-bottom:3px;}
  .sev{font-size:8px; font-weight:800; letter-spacing:.05em; padding:3px 7px; border-radius:var(--tg-r-pill); text-transform:uppercase; flex:0 0 auto;}
  .sev.contra{background:var(--red); color:#2A1615;}
  .sev.caution{background:var(--tg-amber-border); color:var(--tg-amber-text);}
  .flag .ftitle{font-size:11.5px; font-weight:700; color:var(--tg-text);}
  .flag .fdetail{font-size:11px; color:#E7C9C6; line-height:1.4; margin-top:2px;}
  .safetycaveat{font-size:9.5px; color:#C79A96; margin-top:9px; line-height:1.4;}
  .safetychecking{display:flex; align-items:center; gap:7px; font-size:11px; color:var(--tg-dim); margin-bottom:12px; padding:5px 2px;}
  .spin.muted{border-color:rgba(141,160,169,.3); border-top-color:var(--tg-dim);}
  .safetyclear{font-size:10.5px; color:var(--tg-dim); margin-bottom:12px; padding:5px 2px; line-height:1.4;}

  /* §4 Placeholder panel — amber, sits ON the paper sheet */
  #phpanel{background:var(--tg-amber-bg); border:1px solid var(--tg-amber-border); border-radius:var(--tg-r-lg); padding:11px; margin-top:16px;}
  #phpanel:empty{display:none;}
  .phhead{display:flex;align-items:center;justify-content:space-between;gap:8px;flex-wrap:wrap;font-size:11px;font-weight:700;color:var(--tg-amber-text);margin-bottom:8px;}
  .phhead::before{content:""; width:8px; height:8px; border-radius:50%; background:var(--tg-amber-dot); flex:0 0 auto; margin-right:2px;}
  .phclear{border:none;background:var(--tg-amber-text);color:#fff;border-radius:var(--tg-r-pill);padding:4px 10px;font-size:10.5px;font-weight:600;cursor:pointer;}
  .phrow{display:flex;align-items:center;gap:6px;margin-top:6px;}
  .phtoken{font-family:var(--mono);font-size:10.5px;color:var(--tg-amber-text);min-width:110px;max-width:110px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
  .phrow input{flex:1;border:1px solid var(--tg-amber-border);background:#fff;color:#3A2E12;padding:6px 8px;font-size:11px;}
  .phfill{border:none;background:var(--tg-amber-dot);color:#fff;border-radius:var(--tg-r-sm);padding:6px 11px;font-size:10.5px;font-weight:600;cursor:pointer;}
  /* One button fills every placeholder box at once */
  .phactions{margin-top:10px;}
  .phfillall{width:100%;border:none;background:var(--tg-amber-dot);color:#fff;border-radius:var(--tg-r-md);padding:9px 14px;font-size:12px;font-weight:700;cursor:pointer;box-shadow:inset 0 1px 0 rgba(255,255,255,.2);}
  .phfillall:hover{filter:brightness(1.06);}

  /* Prescribe / revise — dark inset wells */
  .tool{background:var(--tg-surface-2); border:1px solid var(--tg-border); border-radius:var(--tg-r-lg); padding:11px; margin-top:12px;}
  .toollab{display:flex;align-items:center;gap:7px;margin-bottom:7px;flex-wrap:wrap;}
  .pill{background:var(--tg-champ);color:var(--tg-champ-text);font-size:9px;font-weight:700;letter-spacing:.05em;padding:3px 7px;border-radius:var(--tg-r-pill);text-transform:uppercase;}
  .toollab .d{color:var(--tg-dim);font-size:10.5px;}
  .toolrow{display:flex;gap:6px;}
  .toolrow input{flex:1;}
  .toolbtn{border:none;border-radius:var(--tg-r-md);padding:8px 12px;font-size:11.5px;font-weight:600;cursor:pointer;}
  /* Prescribe → Add = §4 outline gold; Revise = secondary */
  .toolbtn.teal{background:none; border:1px solid var(--tg-gold-deep); color:var(--tg-gold-dark);}
  .toolbtn.teal:hover{background:rgba(216,184,99,.10);}
  .toolbtn.ink{background:var(--tg-surf-grad); border:1px solid var(--tg-border); color:var(--tg-text);}
  .toolbtn.ink:hover{border-color:var(--tg-gold-deep);}

  /* §4 Macro tint — defined for AI-authored text on the paper (applied when marked) */
  .macro{background:var(--tg-macro-bg); box-shadow:inset 0 -2px 0 var(--tg-macro-rule); border-radius:2px;}
  /* §4 Inline placeholder chip in the letter — UI overlay, never part of the serif text */
  .phchip{background:var(--tg-amber-chip); color:var(--tg-amber-text); border:1px solid var(--tg-amber-border); border-radius:4px; padding:0 6px; font-family:var(--sans); font-size:.78em; font-weight:600;}
  /* §4 Skeleton bars */
  .skel{height:7px; border-radius:5px; background:linear-gradient(90deg,#E7D8AC,#F5EFE1);}
  .skel.pending{background:linear-gradient(90deg,#12293C,#173248,#12293C); background-size:320px 100%; animation:tgShim 1.1s linear infinite;}
  /* §4 Toast */
  .toast{position:sticky; bottom:10px; background:var(--tg-toast-bg); color:var(--tg-toast-text); border:1px solid var(--tg-border); border-radius:var(--tg-r-md); padding:10px 12px; font-size:11.5px; display:flex; align-items:center; gap:8px; box-shadow:var(--tg-sh-lg); animation:tgUp .22s ease-out;}
  .toast::before{content:""; width:8px; height:8px; border-radius:50%; background:var(--tg-toast-dot); flex:0 0 auto;}

  /* Style-clone wizard (Settings) */
  .styleclone{margin-top:14px; border:1px solid var(--tg-gold-line); background:var(--tg-surface-2); border-radius:var(--tg-r-lg); padding:12px;}
  .sclabel{display:flex; align-items:center; gap:8px; font-size:12px; font-weight:700; color:var(--tg-gold-dark); margin-bottom:6px;}
  .scpill{font-size:9px; font-weight:700; letter-spacing:.04em; text-transform:uppercase; color:var(--tg-champ-text); background:var(--tg-champ); border:1px solid var(--tg-champ-border); border-radius:var(--tg-r-pill); padding:2px 8px;}
  .scpill.hidden{display:none;}
  .scnote{font-size:10.5px; color:var(--tg-dim); line-height:1.5; margin-bottom:9px;}
  /* Connected EMRs — where Insert is allowed to type */
  .emrlist{display:flex; flex-direction:column; gap:5px; margin:2px 0 8px;}
  .emrrow{display:flex; align-items:center; gap:8px; flex-wrap:wrap;}
  .emrname{font-size:12px; color:var(--tg-text); font-weight:600; letter-spacing:.01em;}
  .emrtag{font-size:9.5px; letter-spacing:.09em; text-transform:uppercase; color:var(--tg-dim); border:1px solid rgba(198,164,90,.28); border-radius:999px; padding:1px 7px;}
  .emrrm{border:none; background:none; color:var(--tg-dim); font-size:11px; cursor:pointer; text-decoration:underline; padding:0; transition:color .25s var(--tg-ease);}
  .emrrm:hover{color:var(--tg-gold-dark);}
  .scnote b{color:var(--tg-gold-dark);}
  .scsample{min-height:70px; font-family:var(--mono); font-size:11px; margin-bottom:7px;}
  .screrow{display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin-top:2px;}
  .scbtn{border:1px solid var(--tg-gold-deep); background:none; color:var(--tg-gold-dark); border-radius:var(--tg-r-md); padding:8px 14px; font-size:12px; font-weight:600; cursor:pointer; display:inline-flex; align-items:center; gap:6px;}
  .scbtn:hover{background:rgba(216,184,99,.10);}
  .scbtn:disabled{opacity:.6; cursor:default;}
  .scfile{font-size:11px; color:var(--tg-dim); cursor:pointer; text-decoration:underline; text-underline-offset:2px;}
  .scfile:hover{color:var(--tg-gold-dark);}
  .scoff{border:1px solid var(--tg-border); background:none; color:var(--tg-dim); border-radius:var(--tg-r-md); padding:8px 12px; font-size:11.5px; font-weight:600; cursor:pointer; margin-left:auto;}
  .scoff:hover{border-color:var(--tg-gold-deep); color:var(--tg-gold-dark);}
  .scoff.hidden, #styleProfileLabel.hidden, #styleProfile.hidden, #styleStatus.hidden, .screrow.hidden{display:none;}
  #styleProfile{min-height:120px; font-size:11px; margin-top:4px;}
  .styleselect{width:100%; padding:8px 10px; border:1px solid var(--tg-border); background:var(--tg-surface); color:var(--tg-text); border-radius:var(--tg-r-md); font-size:12px; margin-bottom:7px;}
  .styleselect:focus{outline:none; border-color:var(--tg-gold-deep);}
  /* list of already-trained styles */
  .stylelist{display:flex; flex-direction:column; gap:6px; margin-bottom:11px;}
  .stylerow{display:flex; align-items:flex-start; gap:8px; padding:8px 10px; border:1px solid var(--tg-gold-line); border-radius:var(--tg-r-md); background:rgba(216,184,99,.05);}
  .stylerow .st-main{flex:1; min-width:0;}
  .stylerow .st-type{font-size:11.5px; font-weight:700; color:var(--tg-gold-dark);}
  .stylerow .st-desc{font-size:10.5px; color:var(--tg-dim); line-height:1.45; margin-top:1px; word-break:break-word;}
  .stylerow .st-acts{display:flex; gap:8px; flex:0 0 auto;}
  .stylerow .st-act{border:none; background:none; color:var(--tg-dim); font-size:10.5px; cursor:pointer; text-decoration:underline; padding:0; white-space:nowrap;}
  .stylerow .st-act:hover{color:var(--tg-gold-dark);}
  .stylerow .st-act.st-remove:hover{color:#E3736B;}
  .stylelist .st-empty{font-size:10.5px; color:var(--tg-faint); font-style:italic;}

  /* Account gate (sign-in / renew) + settings account box */
  #acctGate{margin:14px 14px 0;}
  #acctGate.hidden{display:none;}
  .acctcard{background:var(--tg-panel-grad); border:1px solid var(--tg-gold-line); border-radius:var(--tg-r-xl); padding:16px; box-shadow:var(--tg-sh-lg);}
  .acctcard h3{margin:0 0 4px; font-size:16px; font-weight:700; color:var(--tg-text);}
  .acctcard p{margin:0 0 12px; font-size:12.5px; line-height:1.55; color:var(--tg-dim);}
  .acctcard .trialnote{background:var(--tg-amber-bg); border:1px solid var(--tg-amber-border); color:var(--tg-amber-text); border-radius:var(--tg-r-md); padding:9px 11px; font-size:11.5px; line-height:1.5; margin-bottom:12px;}
  .acctcard input{margin-bottom:8px;}
  .acctcard .primary{width:100%; margin-top:2px;}
  .acctrow{display:flex; gap:8px; flex-wrap:wrap; margin-top:8px;}
  .acctrow button{flex:1 1 auto;}
  .acctmsg{font-size:11.5px; line-height:1.45; margin-top:8px;}
  .acctmini{border:none; background:none; color:var(--tg-dim); font-size:11px; text-decoration:underline; cursor:pointer; padding:4px 0; margin-top:6px;}
  .planbtn{border:1px solid var(--tg-gold-deep); background:none; color:var(--tg-gold-dark); border-radius:var(--tg-r-md); padding:11px 12px; font-size:12.5px; font-weight:600; cursor:pointer; text-align:center;}
  .planbtn:hover{background:rgba(216,184,99,.10);}
  .planbtn.best{background:var(--tg-gold-grad); color:#fff; border:none; box-shadow:0 10px 24px -12px rgba(154,123,63,.7);}
  .acctbox{background:var(--tg-surface-2); border:1px solid var(--tg-border); border-radius:var(--tg-r-lg); padding:11px 12px; margin-bottom:14px; font-size:12px;}
  .acctbox.hidden{display:none;}
  .acctbox .who{display:flex; align-items:center; justify-content:space-between; gap:8px; flex-wrap:wrap;}
  .acctbox .email{color:var(--tg-text); font-weight:600;}
  .acctbox .status{font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:.04em; padding:2px 8px; border-radius:var(--tg-r-pill);}
  .acctbox .status.ok{background:var(--tg-champ); color:var(--tg-champ-text); border:1px solid var(--tg-champ-border);}
  .acctbox .status.warn{background:var(--tg-amber-bg); color:var(--tg-amber-text); border:1px solid var(--tg-amber-border);}
  .acctbox .acts{display:flex; gap:8px; margin-top:9px; flex-wrap:wrap;}
  .acctbox .acts button{border:1px solid var(--tg-border); background:var(--tg-surf-grad); color:var(--tg-text); border-radius:var(--tg-r-md); padding:6px 11px; font-size:11px; font-weight:600; cursor:pointer;}
  .acctbox .acts button:hover{border-color:var(--tg-gold-deep); color:var(--tg-gold-dark);}
  .acctbox .usage{color:var(--tg-dim); margin-top:8px; font-size:11px;}
  /* Soft monthly usage banner (never blocks) */
  #usageBanner{margin:0 14px 12px; background:var(--tg-amber-bg); border:1px solid var(--tg-amber-border); color:var(--tg-amber-text); border-radius:var(--tg-r-md); padding:9px 12px; font-size:11.5px; line-height:1.45; display:flex; align-items:center; gap:8px;}
  #usageBanner.hidden{display:none;}
  #usageBanner .x{margin-left:auto; border:none; background:none; color:var(--tg-amber-text); cursor:pointer; font-size:15px; line-height:1; padding:0 2px;}

  footer{padding:10px 14px 16px; color:var(--tg-dim); font-size:10.5px; line-height:1.45; display:flex; gap:8px; align-items:flex-start; border-top:1px solid var(--tg-hairline);}
  footer svg{flex:0 0 auto; margin-top:1px; color:var(--tg-gold-deep);}

  /* ── §5 Motion keyframes ──────────────────────────────────────────── */
  @keyframes tgCaret { 0%,49%{opacity:1} 50%,100%{opacity:0} }
  @keyframes tgUp    { from{opacity:0;transform:translateY(8px)} to{opacity:1;transform:none} }
  @keyframes tgPulse { 0%,100%{opacity:.55} 50%{opacity:1} }
  @keyframes tgShim  { 0%{background-position:-200px 0} 100%{background-position:320px 0} }

/* ═══ Phase W — web-app-only additions ═══════════════════════════════════════ */
/* Demo landing banner */
.demobanner{border:1px solid var(--tg-champ-border); background:linear-gradient(180deg,#173a51,#0f2c44);}
.demobanner h2{color:var(--tg-gold-dark);}
.demohint{margin-top:10px; font-size:11px; color:var(--tg-dim); line-height:1.5;}
.demolink{color:var(--tg-gold-dark); font-weight:600; text-decoration:underline; cursor:pointer;}
.demolink:hover{color:var(--tg-gold);}
body.is-demo #crossSell{display:none;}

/* Copy = the hero action on the web app (three-layer clipboard). */
.copyhero{width:100%; margin:2px 0 12px; padding:14px; font-size:13.5px; letter-spacing:.01em;}
.copyhero.done{background:var(--tg-champ); color:var(--tg-champ-text); box-shadow:none;}

/* Cross-sell (extension / desktop companion) */
.crosssell{position:relative; background:var(--tg-surface-2); border:1px solid var(--tg-border); border-radius:var(--tg-r-lg); padding:11px 30px 11px 12px; margin-bottom:12px;}
.crosssell.hidden{display:none;}
.crossline{font-size:11px; color:var(--tg-dim); line-height:1.5;}
.crossline + .crossline{margin-top:5px;}
.crossline b{color:var(--tg-gold-dark);}
.crossx{position:absolute; top:6px; right:8px; border:none; background:none; color:var(--tg-dim); font-size:16px; line-height:1; cursor:pointer; padding:2px 4px;}
.crossx:hover{color:var(--tg-gold-dark);}

/* Diagonal DEMO watermark over the letter sheet (demo mode only). */
#letterCard.demo-wm #out{position:relative;}
#letterCard.demo-wm #out::before{
  content:""; position:absolute; inset:0; pointer-events:none; z-index:4;
  background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22330%22%20height%3D%22150%22%3E%3Ctext%20x%3D%22165%22%20y%3D%2280%22%20font-family%3D%22IBM%20Plex%20Sans%2C%20Arial%2C%20sans-serif%22%20font-size%3D%2218%22%20font-weight%3D%22700%22%20fill%3D%22rgba(201%2C138%2C30%2C0.13)%22%20text-anchor%3D%22middle%22%20transform%3D%22rotate(-28%20165%2075)%22%3EDEMO%20-%20not%20for%20clinical%20use%3C%2Ftext%3E%3C%2Fsvg%3E"); background-repeat:repeat; background-position:center;
}

/* Plug-and-play connect box (on the demo landing) */
.connectbox{margin-top:14px; padding-top:12px; border-top:1px solid var(--tg-hairline);}
.connectlabel{font-size:12px; font-weight:600; color:var(--tg-text); margin-bottom:7px;}
.connectrow{display:flex; gap:8px; flex-wrap:wrap; align-items:center;}
.connectrow input{flex:1 1 200px; min-width:150px;}
.connectbtn{flex:0 0 auto; width:auto; margin:0; padding:12px 18px;}
.connectmsg{font-size:11px; margin-top:8px; line-height:1.4;}
.connectmsg:empty{display:none;}
.connectmsg.bad{color:#F2A39C;}
.connectmsg.ok{color:#7FE0BC;}

/* Friendly confirmation toast */
.tdtoast{position:fixed; left:50%; bottom:20px; transform:translateX(-50%) translateY(12px); z-index:50;
  background:var(--tg-toast-bg); color:var(--tg-toast-text); border:1px solid var(--tg-border);
  border-radius:var(--tg-r-md); padding:11px 16px; font-size:12.5px; font-weight:600; box-shadow:var(--tg-sh-lg);
  opacity:0; pointer-events:none; transition:opacity .25s var(--tg-ease), transform .25s var(--tg-ease); max-width:92vw; text-align:center;}
.tdtoast.show{opacity:1; transform:translateX(-50%) translateY(0);}

/* "Advanced (rarely needed)" — collapsed, unobtrusive */
details.advanced{margin-top:12px; border-top:1px dashed var(--tg-hairline); padding-top:8px;}
details.advanced > summary{cursor:pointer; font-size:11px; color:var(--tg-dim); list-style:none; user-select:none;}
details.advanced > summary:hover{color:var(--tg-gold-dark);}
details.advanced > summary::-webkit-details-marker{display:none;}
details.advanced > summary::before{content:"\25B8  "; color:var(--tg-faint);}
details.advanced[open] > summary::before{content:"\25BE  ";}