:root{
    --ink:#0a1c30;
    --ink-soft:#102943;
    --ink-line:#1c3a5c;
    --parchment:#f1ecdf;
    --parchment-deep:#e7e0cb;
    --rule:#c7d4e3;
    --charcoal:#16283c;
    --slate:#5b7086;
    --crimson:#1d5c9e;
    --crimson-bright:#2f79c9;
    --crimson-deep:#123a63;
    --brass:#3d6ea3;
    --forest:#3f5d43;
    --shadow:rgba(8,20,36,0.4);
    --score-red:#c0392b;
    --score-orange:#d9822b;
    --score-yellow:#d4b106;
    --score-green:#2fae4e;
    --score-cyan:#12aebd;
    --font-display:Georgia,'Iowan Old Style','Palatino Linotype','Book Antiqua',serif;
    --font-body:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
    --font-mono:'IBM Plex Mono','SF Mono','Courier New',monospace;
    /* text that sits directly on the page/header background (flips per theme) */
    --chrome-text:#f1ecdf;
    --chrome-text-dim:#9fb0c4;
    /* text that sits on solid accent-colored chips/buttons (always light, constant) */
    --on-accent:#f8f6f0;
    --watermark:rgba(255,255,255,0.09);
  }
  :root[data-theme="light"]{
    --ink:#dde3ea;
    --ink-soft:#eef1f5;
    --ink-line:#c5cedb;
    --rule:#c9d2db;
    --slate:#54637a;
    --shadow:rgba(45,60,85,0.14);
    --chrome-text:#182233;
    --chrome-text-dim:#54637a;
    --watermark:rgba(24,34,51,0.08);
  }
  *{box-sizing:border-box;}
  html,body{margin:0;padding:0;}
  body{
    background:var(--ink);
    color:var(--chrome-text);
    font-family:var(--font-body);
    min-height:100vh;
    -webkit-font-smoothing:antialiased;
  }
  button{font-family:inherit;}
  button:focus-visible, input:focus-visible, summary:focus-visible{
    outline:2px solid var(--brass);
    outline-offset:2px;
  }

  /* -------- header -------- */
  /* The header bar stays a fixed dark navy in both themes (like the nav
     drawer's own header) so the white brand text, session tag, and
     account controls always stay legible — only the page body below it
     switches between dark/light. */
  header.topbar{
    padding:22px 24px 16px;
    background:var(--charcoal);
    border-bottom:1px solid rgba(255,255,255,0.12);
    display:flex;
    align-items:baseline;
    justify-content:space-between;
    flex-wrap:wrap;
    gap:8px;
    max-width:none;
    margin:0;
  }
  header.topbar{padding-left:calc((100% - 880px)/2);padding-right:calc((100% - 880px)/2);}
  @media(max-width:928px){ header.topbar{padding-left:24px;padding-right:24px;} }
  .brand{display:flex;flex-direction:row;align-items:center;gap:14px;flex-wrap:wrap;}
  .brand .mark{
    font-family:var(--font-display);font-size:28px;letter-spacing:0.5px;color:#ffffff;
    display:flex;align-items:center;line-height:1;
  }
  .mark-e-wrap{
    position:relative;top:0.12em;display:inline-flex;align-items:center;justify-content:center;
    width:1.9em;height:1.75em;margin-right:2px;flex-shrink:0;
    color:var(--crimson-bright);
  }
  .mark-e-wrap svg{width:100%;height:100%;display:block;}
  .brand .brand-desc{
    font-family:var(--font-mono);font-size:11.5px;letter-spacing:0.3px;
    color:#ffffff;max-width:300px;line-height:1.4;
    align-self:center;
    padding-left:14px;border-left:1px solid rgba(255,255,255,0.2);
    display:flex;align-items:center;align-self:stretch;
  }
  .brand .sub{font-family:var(--font-mono);font-size:11px;letter-spacing:1.5px;text-transform:uppercase;color:#9fb0c4;margin-top:4px;}
  .session-tag{
    font-family:var(--font-mono);font-size:19px;line-height:1;color:#ffffff;letter-spacing:0.5px;
    display:inline-flex;align-items:center;height:29px;
  }
  .session-tag .rt-num{color:var(--brass);font-weight:bold;}

  main{max-width:880px;margin:0 auto;padding:28px 24px 60px;position:relative;z-index:1;}

  /* -------- decorative side-margin parallax words -------- */
  .side-words{
    position:fixed;top:0;height:100vh;
    width:calc((100vw - 928px)/2);
    overflow:hidden;pointer-events:none;z-index:0;
    /* Edge fade: letters ease out to transparent as they approach the column
       boundary instead of being hard-clipped, so a wide word never appears
       to "jump" or get chopped off mid-character at the edge. */
    -webkit-mask-image:linear-gradient(to right, transparent 0%, black 22%, black 78%, transparent 100%);
    mask-image:linear-gradient(to right, transparent 0%, black 22%, black 78%, transparent 100%);
  }
  .side-words.left{left:0;}
  .side-words.right{right:0;}
  .side-words-inner{position:absolute;top:-80vh;left:0;width:100%;height:800vh;will-change:transform;}
  .side-word{
    position:absolute;left:50%;
    font-family:var(--font-mono);font-size:13px;line-height:1.5;letter-spacing:4px;text-transform:uppercase;
    color:var(--watermark);white-space:nowrap;font-weight:600;
    transform:translateX(-50%);
    transition:opacity 0.6s ease;
  }
  /* Single continuous wobble keyframe — always paired with animation-direction:
     alternate in JS so the motion reverses smoothly at each extreme instead of
     snapping back to the start position, which is what caused the visible
     "skip" every time the animation used to loop. */
  @keyframes driftWobble{
    from { transform: translateX(-50%) translateX(-32px); }
    to   { transform: translateX(-50%) translateX(32px); }
  }
  @media(max-width:1180px){ .side-words{display:none;} }

  /* -------- ballot card -------- */
  .ballot{
    background:var(--parchment);
    color:var(--charcoal);
    border-radius:3px;
    position:relative;
    overflow:hidden;
  }
  .ballot::before{
    content:"";position:absolute;top:0;right:0;
    width:0;height:0;border-style:solid;border-width:0 26px 26px 0;
    border-color:transparent var(--parchment-deep) transparent transparent;
    box-shadow:-1px 1px 3px rgba(0,0,0,0.15);
  }

  /* -------- grading rubric icon (lives on the PAPER itself, top-right
     corner of the ballot — distinct from the header icon row) -------- */
  .rubric-toggle-btn{
    position:absolute;top:14px;right:34px;z-index:3;
    background:none;border:none;cursor:pointer;
    color:var(--slate);padding:5px;border-radius:4px;
    display:flex;align-items:center;justify-content:center;
    width:27px;height:27px;box-sizing:border-box;
    transition:color .15s;
  }
  .rubric-toggle-btn:hover, .rubric-toggle-btn.active{color:var(--crimson);}
  body.previewing-example .rubric-toggle-btn{display:none;}

  .rubric-panel{width:min(640px, calc(100vw - 24px));}
  .rubric-table{width:100%;border-collapse:collapse;font-size:12.5px;table-layout:fixed;}
  .rubric-table th, .rubric-table td{
    border:1px solid var(--charcoal);padding:8px 10px;text-align:left;vertical-align:top;
  }
  .rubric-table thead th{
    background:var(--charcoal);color:var(--on-accent);
    font-family:var(--font-mono);font-size:10px;letter-spacing:1px;text-transform:uppercase;
  }
  .rubric-table th:nth-child(1), .rubric-table td:nth-child(1){width:26%;}
  .rubric-table th:nth-child(2), .rubric-table td:nth-child(2){width:9%;text-align:center;}
  .rubric-table th:nth-child(3), .rubric-table td:nth-child(3){width:65%;}
  .rubric-table td:nth-child(2){font-family:var(--font-mono);font-weight:bold;}
  .rubric-table td{line-height:1.5;color:#000000;}
  .rubric-table tbody tr:nth-child(even){background:rgba(0,0,0,0.025);}
  .rubric-table tfoot td{
    font-family:var(--font-mono);font-weight:bold;text-transform:uppercase;letter-spacing:0.5px;
    background:var(--parchment-deep);
  }
  .ballot-head{
    padding:22px 28px 16px;
    border-bottom:2px solid var(--charcoal);
    display:grid;grid-template-columns:1fr 1fr;gap:8px 24px;
  }
  .ballot-head .field{font-family:var(--font-mono);font-size:12px;}
  .ballot-head .field b{text-transform:uppercase;letter-spacing:1px;color:var(--slate);font-weight:600;margin-right:6px;}
  .ballot-title{grid-column:1/-1;font-family:var(--font-display);font-size:26px;margin:0 0 6px;}
  .ballot-body{padding:24px 28px 28px;}

  /* -------- flight history -------- */
  .flight{display:flex;gap:8px;flex-wrap:wrap;margin:0 0 18px;}
  .flight .chip{
    font-family:var(--font-mono);font-size:11px;border:1px solid var(--rule);
    border-radius:20px;padding:4px 10px;color:var(--slate);background:rgba(255,255,255,0.4);
  }
  .flight .chip b{color:var(--charcoal);}

  /* -------- auth gate / landing page -------- */
  #authGate{
    position:fixed;inset:0;z-index:900;
    background:linear-gradient(135deg, var(--ink) 0%, var(--ink) 45%, var(--ink-soft) 100%);
    background-size:220% 220%;
    animation:bgDrift 22s ease-in-out infinite;
    overflow-y:auto;overflow-x:hidden;-webkit-overflow-scrolling:touch;
    overscroll-behavior:contain;
    scroll-behavior:smooth;
  }
  @keyframes bgDrift{
    0%,100%{background-position:0% 50%;}
    50%{background-position:100% 50%;}
  }
  #authGate.hidden{display:none;}

  /* When previewing the example ballot from the landing page (not signed
     in), keep authGate in place (so the real app stays covered/inert) and
     just lift <main> above it — since every other in-app view is still
     `.hidden` at this point, only the example content actually shows. */
  body.previewing-example header.topbar{ display:none !important; }
  body.previewing-example main{ position:relative; z-index:950; max-width:none; margin:0; padding:0; min-height:100vh; }
  body.previewing-example .ballot{ border-radius:0; min-height:100vh; }
  body.previewing-example .ballot::before{ display:none; }
  body.previewing-example .ballot-body{ padding-top:64px; }

  #previewExitBtn{
    display:none;position:fixed;top:18px;right:18px;z-index:1000;
    width:38px;height:38px;border-radius:50%;border:3px solid var(--crimson-deep);cursor:pointer;
    background:#2356a8;color:#fff;align-items:center;justify-content:center;
    box-shadow:0 6px 18px rgba(0,0,0,0.35);transition:transform 0.2s ease, background 0.2s ease;
  }
  #previewExitBtn:hover{background:#1c4685;transform:scale(1.06);}
  #previewExitBtn svg{width:18px;height:18px;}
  body.previewing-example #previewExitBtn{ display:flex; }

  #wrVideoModal{
    position:fixed;inset:0;z-index:1200;display:none;align-items:center;justify-content:center;padding:24px;
  }
  #wrVideoModal.show{display:flex;}
  #wrVideoModal .wr-video-backdrop{position:absolute;inset:0;background:rgba(6,10,16,0.86);}
  #wrVideoModal .wr-video-frame{
    position:relative;width:100%;max-width:860px;background:#000;border-radius:8px;overflow:hidden;
    box-shadow:0 24px 70px rgba(0,0,0,0.6);animation:wrVideoIn 0.3s cubic-bezier(.2,.8,.3,1) both;
  }
  @keyframes wrVideoIn{ from{opacity:0;transform:scale(0.96);} to{opacity:1;transform:scale(1);} }
  #wrVideoModal .wr-video-embed{position:relative;width:100%;padding-top:56.25%;}
  #wrVideoModal .wr-video-embed iframe{position:absolute;inset:0;width:100%;height:100%;border:0;}
  #wrVideoModal .wr-video-close{
    position:absolute;top:10px;right:10px;z-index:2;width:34px;height:34px;border-radius:50%;
    background:rgba(0,0,0,0.6);color:#fff;border:none;cursor:pointer;display:flex;align-items:center;justify-content:center;
  }
  #wrVideoModal .wr-video-close svg{width:16px;height:16px;}
  #wrVideoModal .wr-video-close:hover{background:rgba(0,0,0,0.8);}

  .landing-hero{
    min-height:100vh;display:flex;flex-direction:row;align-items:center;justify-content:center;
    gap:64px;flex-wrap:wrap;
    padding:40px 24px 60px;position:relative;
    perspective:1200px;overflow:hidden;
  }
  #heroConstellation{
    position:absolute;inset:0;width:100%;height:100%;z-index:0;pointer-events:none;
  }
  .landing-hero-photo{
    position:absolute;top:12%;left:12%;right:12%;bottom:12%;width:76%;height:76%;
    margin:auto;object-fit:cover;border-radius:14px;z-index:1;opacity:0.55;
    box-shadow:0 20px 60px rgba(0,0,0,0.5);pointer-events:none;
  }
  .landing-hero-headline{
    max-width:440px;position:relative;z-index:2;
    animation:heroSlideIn 0.8s cubic-bezier(.2,.8,.3,1) both;
  }
  @keyframes heroSlideIn{
    from{opacity:0;transform:translateX(-18px);}
    to{opacity:1;transform:translateX(0);}
  }
  .landing-hero-headline h2{
    font-family:var(--font-display);font-size:clamp(28px,3.6vw,40px);margin:0 0 14px;color:var(--chrome-text);
    line-height:1.15;
  }
  .landing-hero-headline h2 .hl-word{color:#4d84cf;}
  .landing-hero-headline p{
    font-family:var(--font-body);font-size:15px;color:var(--chrome-text);line-height:1.65;margin:0;
    opacity:0;animation:heroFadeUp 0.7s ease 0.35s both;
  }
  @keyframes heroFadeUp{
    from{opacity:0;transform:translateY(10px);}
    to{opacity:1;transform:translateY(0);}
  }
  @media (max-width:860px){
    .landing-hero{flex-direction:column-reverse;gap:32px;text-align:center;}
    .landing-hero-headline{max-width:480px;text-align:center;}
  }

  .auth-card{
    width:100%;max-width:432px;background:var(--parchment);color:var(--charcoal);
    border-radius:8px;box-shadow:0 12px 40px var(--shadow);padding:38px 40px 34px;
    border:1px solid var(--ink-line);margin-top:18px;position:relative;z-index:2;
    animation:authCardIn 0.7s cubic-bezier(.2,.8,.3,1) both;
  }
  @keyframes authCardIn{
    from{opacity:0;transform:translateY(22px) scale(0.97);}
    to{opacity:1;transform:translateY(0) scale(1);}
  }
  .auth-card > *{opacity:0;animation:authFieldIn 0.5s ease both;}
  .auth-card > *:nth-child(1){animation-delay:0.25s;}
  .auth-card > *:nth-child(2){animation-delay:0.32s;}
  .auth-card > *:nth-child(3){animation-delay:0.39s;}
  .auth-card > *:nth-child(4){animation-delay:0.46s;}
  @keyframes authFieldIn{
    from{opacity:0;transform:translateY(8px);}
    to{opacity:1;transform:translateY(0);}
  }
  .auth-card-logo{
    font-family:var(--font-display);letter-spacing:0.5px;line-height:1;
    display:flex;align-items:center;justify-content:center;text-align:center;margin:0 0 18px;
    color:var(--charcoal);font-size:38px;
  }
  .auth-card-logo .mark-e-wrap{
    position:relative;top:0.12em;display:inline-flex;align-items:center;justify-content:center;
    width:1.9em;height:1.75em;margin-right:2px;flex-shrink:0;color:var(--crimson);
  }
  .auth-card-logo .mark-e-wrap svg{width:100%;height:100%;display:block;}
  .auth-card .auth-sub{
    font-family:var(--font-body);font-size:13px;color:#c0293f;margin:0 0 20px;
    letter-spacing:-0.1px;line-height:1.4;
  }
  .auth-tabs{display:flex;border-bottom:1px solid var(--rule);margin-bottom:18px;position:relative;}
  .auth-tab{
    flex:1;text-align:center;padding:8px 4px;font-family:var(--font-mono);font-size:12px;
    letter-spacing:0.5px;text-transform:uppercase;color:var(--slate);background:none;border:none;
    cursor:pointer;border-bottom:2px solid transparent;margin-bottom:-1px;
    transition:color 0.25s ease;
  }
  .auth-tab.active{color:var(--crimson);font-weight:600;}
  .auth-tab-indicator{
    position:absolute;bottom:-1px;left:0;width:50%;height:2px;background:var(--crimson);
    transition:transform 0.3s cubic-bezier(.3,.7,.3,1);
  }
  .auth-field{margin-bottom:14px;}
  .auth-field label{display:block;font-family:var(--font-mono);font-size:11px;text-transform:uppercase;letter-spacing:0.5px;color:var(--slate);margin-bottom:5px;}
  .auth-field input{
    width:100%;padding:10px 12px;border:1px solid var(--rule);border-radius:4px;
    font-family:var(--font-body);font-size:14px;background:#fff;color:var(--charcoal);
    transition:border-color 0.2s ease;
  }
  .auth-field input:hover{border-color:var(--slate);}
  .auth-field input:focus-visible{outline:2px solid var(--brass);outline-offset:1px;}
  .auth-error{
    font-family:var(--font-mono);font-size:12px;color:#a3322a;margin:-4px 0 12px;display:none;
  }
  .auth-error.visible{display:block;}
  .auth-submit{
    width:100%;padding:12px;border:none;border-radius:4px;background:var(--crimson);
    color:var(--on-accent);font-family:var(--font-mono);font-size:13px;letter-spacing:0.5px;
    text-transform:uppercase;cursor:pointer;font-weight:600;
    position:relative;overflow:hidden;transition:background 0.2s ease;
  }
  .auth-submit:hover{background:var(--crimson-deep);}

  .landing-scroll-cue{
    position:absolute;bottom:22px;left:50%;transform:translateX(-50%);
    display:flex;flex-direction:column;align-items:center;gap:6px;color:var(--chrome-text-dim);
    font-family:var(--font-mono);font-size:10.5px;letter-spacing:1px;text-transform:uppercase;
    animation:landingBounce 2.2s ease-in-out infinite;
  }
  .landing-scroll-cue svg{width:16px;height:16px;}
  @keyframes landingBounce{
    0%,100%{transform:translateX(-50%) translateY(0);}
    50%{transform:translateX(-50%) translateY(7px);}
  }

  /* ----- feature showcase section ----- */
  /* Below the constellation/hero area the page shifts from the dark ink
     theme to a lighter blue/white one, with speechbackgr22.png as the
     backdrop — full-bleed via .light-zone-bg (since the sections themselves
     are centered, max-width columns), plus local overrides of the shared
     color variables so card backgrounds, borders, and text all read
     correctly against the lighter backdrop. */
  .landing-features, .landing-example{
    --ink-soft:#ffffff;
    --ink-line:#d3e0ef;
    --chrome-text:#16283c;
    --chrome-text-dim:#48607a;
    --shadow:rgba(60,90,130,0.14);
  }
  .light-zone{
    position:relative; overflow:hidden; z-index:1;
  }
  .light-zone-bg{
    position:absolute;left:0;right:0;top:0;height:100%;z-index:-1;
    background-image:url('speechbackgr22.png');background-repeat:no-repeat;
    background-attachment:fixed;background-position:center center;
    background-color:#e7f0fb;
  }
  .landing-features{
    max-width:1080px;margin:0 auto;padding:90px 24px 70px;position:relative;z-index:1;
  }
  .feature-grid{
    display:grid;grid-template-columns:repeat(auto-fit, minmax(240px,1fr));gap:20px;
  }
  .feature-card{
    background:var(--ink-soft);border:3px solid var(--crimson-deep);border-radius:10px;padding:24px 22px;
    opacity:0;
    transition:transform 0.06s linear, opacity 0.06s linear, box-shadow 0.35s ease, border-color 0.35s ease;
    transform-style:preserve-3d;will-change:transform;
  }
  .feature-card.revealed{opacity:1;}
  .feature-card:hover{border-color:var(--brass);box-shadow:0 20px 46px rgba(0,0,0,0.28);}
  .feature-card .fc-icon{
    width:38px;height:38px;border-radius:9px;background:var(--crimson);color:var(--on-accent);
    display:flex;align-items:center;justify-content:center;margin-bottom:14px;
    transform:translateZ(24px);transition:transform 0.35s ease;
  }
  .feature-card:hover .fc-icon{transform:translateZ(34px) scale(1.06);}
  .feature-card .fc-icon svg{width:20px;height:20px;}
  .vocal-wave-icon{gap:2.5px;}
  .vocal-wave-icon .vw-bar{
    width:3px;height:8px;border-radius:2px;background:var(--on-accent);
    transform:scaleY(0.4);transform-origin:center;
    transition:transform 0.16s cubic-bezier(.3,.6,.4,1);
  }
  .demo-record-mock{
    margin-top:16px;display:flex;flex-direction:column;align-items:center;gap:10px;
  }
  .demo-record-mock .rec-pill{position:static;}
  .demo-record-btn{width:44px;height:44px;pointer-events:none;}
  .demo-record-btn .inner{width:15px;height:15px;}
  .demo-record-btn.recording .inner{width:13px;height:13px;}
  .feature-card h3{font-family:var(--font-display);font-size:17px;margin:0 0 8px;color:var(--chrome-text);transform:translateZ(14px);}
  .feature-card p{font-family:var(--font-body);font-size:13.5px;color:var(--chrome-text-dim);line-height:1.55;margin:0;transform:translateZ(10px);}
  .feature-card.wide{grid-column:1 / -1;}
  .feature-card.wide .fc-body{display:grid;grid-template-columns:minmax(220px,320px) 1fr;gap:26px;align-items:start;}
  .feature-card.wide .fc-body.stacked{display:flex;flex-direction:column;gap:16px;}
  @media (max-width:720px){ .feature-card.wide .fc-body{grid-template-columns:1fr;} }

  /* ----- interactive demo widgets embedded in feature cards ----- */
  .demo-panel{
    background:var(--parchment);color:var(--charcoal);border-radius:8px;padding:16px 16px 14px;
    margin-top:16px;position:relative;overflow:hidden;box-shadow:inset 0 0 0 1px var(--rule);
    transform:translateZ(6px);
  }
  .demo-panel .q-hint, .demo-panel .progress-phrase{color:var(--slate);}
  .demo-locked-overlay{
    position:absolute;inset:0;background:rgba(20,26,36,0.72);backdrop-filter:blur(2px);
    display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:10px;
    padding:20px;opacity:0;pointer-events:none;transition:opacity 0.35s ease;
    border:3px solid var(--crimson-deep);
  }
  .demo-locked-overlay.show{opacity:1;pointer-events:auto;}
  .demo-locked-overlay svg{width:26px;height:26px;color:var(--brass);}
  .demo-locked-overlay p{color:#fff;font-family:var(--font-body);font-size:13px;margin:0;max-width:260px;line-height:1.5;}
  .demo-locked-overlay .demo-signup-btn{
    padding:9px 20px;border-radius:24px;background:var(--crimson);color:var(--on-accent);border:3px solid var(--crimson-deep);
    font-family:var(--font-mono);font-size:11.5px;letter-spacing:0.5px;text-transform:uppercase;cursor:pointer;
    font-weight:600;transition:background 0.2s ease, transform 0.2s ease;
  }
  .demo-signup-btn:hover{background:var(--crimson-deep);transform:translateY(-1px);}

  /* mini timer demo */
  .mini-timer-display{
    font-family:var(--font-mono);font-size:40px;text-align:center;color:var(--charcoal);letter-spacing:1px;padding:6px 0 2px;
  }
  .mini-timer-display.warn{color:var(--crimson);}
  .mini-timer-btn-row{display:flex;gap:8px;justify-content:center;margin-top:6px;}

  /* AI-judged ballot demo: animated score ring + staggered row reveal */
  .demo-category-reveal .badge-wrap .demo-ring-path{
    stroke-dasharray:190;stroke-dashoffset:190;
    animation:demoRingDraw 1.3s cubic-bezier(.3,.7,.3,1) 0.15s forwards;
  }
  @keyframes demoRingDraw{ to{ stroke-dashoffset:0; } }
  .demo-category-reveal .score{
    opacity:0;animation:demoFadeUp 0.5s ease 0.9s forwards;
  }
  .demo-category-reveal .cat-name{
    opacity:0;transform:translateY(8px);animation:demoFadeUp 0.5s ease 0.5s forwards;
  }
  .demo-category-reveal .cat-row{
    opacity:0;transform:translateY(8px);animation:demoFadeUp 0.5s ease forwards;
  }
  .demo-category-reveal .cat-row.worked{animation-delay:0.65s;}
  .demo-category-reveal .cat-row.flaws{animation-delay:0.8s;}
  .demo-category-reveal .cat-row.evidence{animation-delay:0.95s;}
  @keyframes demoFadeUp{ from{opacity:0;transform:translateY(8px);} to{opacity:1;transform:translateY(0);} }

  /* watch & read-along mini preview */
  .wr-preview{display:flex;gap:14px;align-items:flex-start;}
  .wr-thumb{
    position:relative;width:150px;flex-shrink:0;border-radius:6px;overflow:hidden;box-shadow:0 4px 14px rgba(0,0,0,0.25);
    cursor:pointer;background:#000;
  }
  .wr-thumb img{width:100%;display:block;transition:transform 0.4s ease;}
  .wr-thumb:hover img{transform:scale(1.05);}
  .wr-thumb .wr-play{
    position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  }
  .wr-thumb .wr-play svg{width:34px;height:34px;color:#fff;filter:drop-shadow(0 2px 6px rgba(0,0,0,0.5));}
  .wr-snippet{font-family:var(--font-body);font-size:13px;line-height:1.7;color:var(--charcoal);}
  .wr-snippet .tw{cursor:default;}

  /* ----- example ballot CTA section ----- */
  .landing-example{
    max-width:640px;margin:0 auto 90px;padding:32px 32px 36px;text-align:center;position:relative;z-index:1;
    background:rgba(255,255,255,0.9);border-radius:16px;box-shadow:0 20px 50px rgba(30,50,80,0.18);
    opacity:0;transform:translateY(24px);transition:opacity 0.7s cubic-bezier(.2,.7,.3,1), transform 0.7s cubic-bezier(.2,.7,.3,1);
    border:3px solid var(--crimson-deep);
  }
  .landing-example.in-view{opacity:1;transform:translateY(0);}
  .landing-example h2{font-family:var(--font-display);font-size:26px;margin:0 0 10px;color:var(--chrome-text);}
  .landing-example p{font-family:var(--font-body);font-size:14px;color:var(--chrome-text-dim);margin:0 0 22px;line-height:1.6;}
  .landing-example-btn{
    display:inline-flex;align-items:center;justify-content:center;padding:11px 32px;border-radius:4px;
    background:var(--crimson);color:var(--on-accent);border:3px solid var(--crimson-deep);cursor:pointer;
    font-family:var(--font-mono);font-size:13px;letter-spacing:0.5px;text-transform:uppercase;font-weight:600;
    transition:transform 0.25s ease, background 0.25s ease;
    position:relative;overflow:hidden;
  }
  .landing-example-btn:hover{background:var(--crimson-deep);transform:translateY(-3px) scale(1.02);}

  /* -------- account chip / history -------- */
  .account-chip{
    font-family:var(--font-mono);font-size:11px;color:#ffffff;
    display:flex;align-items:center;gap:8px;padding:4px 10px 4px 4px;border:1px solid var(--ink-line);
    border-radius:20px;
  }
  .account-chip .acc-email{max-width:140px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
  .account-chip button{
    background:none;border:none;color:#ffffff;cursor:pointer;font-family:var(--font-mono);
    font-size:11px;text-decoration:underline;padding:0;
  }
  .account-chip button:hover{color:var(--crimson-bright);}

  .history-list{display:flex;flex-direction:column;gap:18px;}
  .history-empty{font-family:var(--font-mono);font-size:12.5px;color:#000;text-align:center;padding:40px 10px;}
  @keyframes htFadeIn{from{opacity:0;transform:translateY(8px);}to{opacity:1;transform:translateY(0);}}

  .history-trends{
    border:1px solid var(--rule);border-radius:12px;padding:26px 28px 28px;margin-bottom:26px;
    background:rgba(255,255,255,0.6);
    box-shadow:0 2px 8px rgba(0,0,0,0.06);
    animation:htFadeIn .45s ease both;
  }
  .history-trends h3{
    font-family:var(--font-display);font-size:19px;font-weight:700;margin:0 0 20px;color:#000;
    padding-bottom:14px;border-bottom:2px solid var(--rule);
  }
  .trend-rows{display:flex;flex-direction:column;}
  .trend-row{display:flex;align-items:center;gap:14px;padding:11px 0;font-size:13px;border-bottom:1px solid rgba(0,0,0,0.07);}
  .trend-row:last-child{border-bottom:none;}
  .trend-row .trend-name{width:170px;flex-shrink:0;font-family:var(--font-mono);font-size:12px;font-weight:500;color:#000;}
  .trend-row .trend-bar-wrap{flex:1;background:var(--rule);border-radius:5px;height:10px;overflow:hidden;}
  .trend-row .trend-bar{display:block;height:100%;border-radius:5px;min-width:2px;transition:width 0.9s cubic-bezier(.22,.9,.3,1);}
  .trend-row .trend-avg{width:48px;text-align:right;font-family:var(--font-mono);font-size:12.5px;font-weight:700;color:#000;flex-shrink:0;}

  .trend-row.trend-row-overall{border-bottom:2px solid var(--rule);margin-bottom:4px;padding-bottom:14px;}
  .trend-row.trend-row-overall .trend-name{font-weight:800;}
  .trend-row.trend-row-overall .trend-bar-wrap{height:13px;}
  .trend-row.trend-row-overall .trend-avg{width:auto;display:flex;flex-direction:column;align-items:flex-end;line-height:1.25;}
  .trend-avg-sub{font-size:9.5px;font-weight:600;opacity:0.6;}

  .trend-summary{display:flex;gap:20px;flex-wrap:wrap;margin-top:28px;}
  .trend-summary .col{
    flex:1;min-width:200px;border-radius:10px;padding:16px 18px;
    background:rgba(255,255,255,0.75);border:1px solid var(--rule);
    transition:box-shadow .15s, transform .15s;
  }
  .trend-summary .col:hover{box-shadow:0 4px 14px rgba(0,0,0,0.08);transform:translateY(-1px);}
  .trend-summary .col.strength{border-left:4px solid #22c55e;background:#fff;box-shadow:0 2px 8px rgba(0,0,0,0.06);}
  .trend-summary .col.weakness{border-left:4px solid #ef4444;background:#fff;box-shadow:0 2px 8px rgba(0,0,0,0.06);}
  .trend-summary h4{
    display:flex;align-items:center;gap:7px;font-family:var(--font-mono);font-size:11.5px;font-weight:700;
    text-transform:uppercase;letter-spacing:0.6px;margin:0 0 11px;
  }
  .trend-summary .col.strength h4{color:#16a34a;}
  .trend-summary .col.weakness h4{color:#dc2626;}
  .trend-summary ul{margin:0;padding:0;list-style:none;font-size:13.5px;font-weight:500;color:#000;display:flex;flex-direction:column;gap:8px;}
  .trend-summary li{padding-left:16px;position:relative;}
  .trend-summary .col.strength li::before{content:'';position:absolute;left:0;top:7px;width:6px;height:6px;border-radius:50%;background:#22c55e;}
  .trend-summary .col.weakness li::before{content:'';position:absolute;left:0;top:7px;width:6px;height:6px;border-radius:50%;background:#ef4444;}

  .history-card{border:1px solid var(--rule);border-radius:8px;overflow:hidden;background:rgba(255,255,255,0.5);transition:box-shadow .15s;}
  .history-card:hover{box-shadow:0 2px 10px rgba(0,0,0,0.06);}
  .history-card-head{
    display:flex;align-items:center;justify-content:space-between;gap:16px;padding:18px 20px;cursor:pointer;
  }
  .history-card-head:hover{background:rgba(255,255,255,0.35);}
  .hc-head-main{display:flex;flex-direction:column;gap:5px;min-width:0;}
  .hc-round{font-family:var(--font-display);font-size:19px;font-weight:700;color:#000;letter-spacing:0.2px;}
  .hc-meta{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px;font-family:var(--font-mono);font-size:12px;color:#000;}
  .hc-meta .hc-date{opacity:0.65;}
  .hc-meta .hc-meta-sep{opacity:0.4;}
  .hc-meta .hc-question{font-weight:500;color:#000;}
  .history-card-head .hc-score{font-family:var(--font-display);font-size:30px;font-weight:800;flex-shrink:0;line-height:1;}
  .history-card-head .hc-score .hc-score-max{font-size:15px;font-weight:600;opacity:0.55;margin-left:1px;}
  .history-card-body{padding:0 20px 22px;display:none;}
  .history-card-body.open{display:block;}
  .history-card video{width:100%;max-height:280px;border-radius:6px;background:#000;margin-bottom:14px;display:block;}
  .history-card .hc-cats{display:flex;flex-direction:column;gap:10px;margin-bottom:14px;}
  .history-card .hc-cat{font-size:13px;font-weight:500;color:#000;border-left:3px solid var(--rule);padding:5px 0 5px 12px;}
  .history-card .hc-cat b{display:inline-block;min-width:36px;font-weight:700;}
  .history-card .hc-transcript{
    border-top:1px dashed var(--rule);padding-top:18px;margin-top:8px;
  }
  .history-card .hc-full-ballot{margin-bottom:8px;}
  .history-card .hc-transcript-body{font-size:13.5px;line-height:1.7;color:#000;}
  .history-card .hc-actions{display:flex;gap:12px;margin-top:14px;}
  .history-card .hc-actions button{
    font-family:var(--font-mono);font-size:11.5px;font-weight:600;padding:7px 12px;border:1px solid var(--rule);
    background:none;border-radius:6px;cursor:pointer;color:#000;transition:border-color .15s, color .15s;
  }
  .history-card .hc-actions button:hover{color:var(--crimson);border-color:var(--crimson);}
  .flight .chip b{color:var(--charcoal);}

  /* -------- trend chart panel with dropdown selector (My History) -------- */
  .trend-chart-panel{margin-top:28px;border-top:2px solid var(--rule);padding-top:22px;}
  .tcp-head{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-bottom:14px;}
  .tcp-head label{font-family:var(--font-mono);font-size:11.5px;font-weight:600;text-transform:uppercase;letter-spacing:0.6px;color:#000;}
  .tcp-select{
    font-family:var(--font-body);font-size:13px;font-weight:600;color:#000;
    padding:9px 36px 9px 14px;border:1.5px solid var(--rule);border-radius:8px;background-color:#fff;cursor:pointer;
    appearance:none;-webkit-appearance:none;-moz-appearance:none;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000000' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
    background-repeat:no-repeat;background-position:right 12px center;background-size:14px;
    transition:border-color .15s, box-shadow .15s;
  }
  .tcp-select:hover{border-color:var(--brass);}
  .tcp-select:focus{outline:none;border-color:var(--brass);box-shadow:0 0 0 3px rgba(61,110,163,0.15);}

  .trend-chart-big{
    border:1px solid var(--rule);border-radius:10px;padding:22px 24px 16px;background:#ffffff;
    box-shadow:0 2px 8px rgba(0,0,0,0.06);
    animation:htFadeIn .35s ease both;
  }
  .trend-chart-big .tcb-head{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:8px;}
  .trend-chart-big h5{
    font-family:var(--font-mono);font-size:12px;font-weight:600;text-transform:uppercase;letter-spacing:0.6px;color:#000;margin:0;
  }
  .trend-chart-big .tcb-latest{font-family:var(--font-display);font-size:24px;font-weight:800;color:#000;}
  .trend-chart-big svg{width:100%;height:260px;display:block;}
  .trend-chart-big svg circle{opacity:0;animation:tcDot .35s ease forwards;}
  @keyframes tcDot{to{opacity:1;}}
  .trend-chart-big path.tc-line{stroke-dasharray:2000;stroke-dashoffset:2000;animation:tcDraw 1.1s cubic-bezier(.3,.6,.3,1) forwards;}
  @keyframes tcDraw{to{stroke-dashoffset:0;}}
  .trend-chart-big .axis-label{font-family:var(--font-mono);font-size:10.5px;font-weight:600;fill:#000;}
  .trend-chart-big .grid-line{stroke:var(--rule);stroke-width:1;}
  .trend-chart-big .axis-line{stroke:#000;stroke-width:1.5;}

  /* -------- overall AI coaching comment (My History) -------- */
  .history-overall{
    position:relative;overflow:hidden;
    border:1px solid var(--brass);border-radius:12px;
    padding:20px 24px 20px 26px;margin-bottom:22px;
    background:var(--brass);
    box-shadow:0 2px 8px rgba(0,0,0,0.06);
    animation:htFadeIn .45s ease both;
  }
  .history-overall .ho-head{display:flex;align-items:center;gap:9px;margin-bottom:10px;}
  .history-overall .ho-icon{width:21px;height:21px;flex-shrink:0;color:#ffffff;}
  .history-overall h3{font-family:var(--font-display);font-size:17px;font-weight:700;margin:0;color:#ffffff;}
  .history-overall p{margin:0;font-size:14px;font-weight:500;line-height:1.7;color:#ffffff;}
  .history-overall.loading{
    font-family:var(--font-mono);font-size:12px;color:#000;font-style:italic;
    padding:16px 20px 16px 26px;
    background:rgba(255,255,255,0.6);border-color:var(--rule);
  }

  /* -------- video stage -------- */
  .stage{background:var(--ink);border-radius:4px;padding:10px;border:1px solid var(--ink-line);}
  .stage .frame{position:relative;background:#000;border-radius:2px;overflow:hidden;aspect-ratio:16/10;}
  .stage video{width:100%;height:100%;object-fit:cover;display:block;}
  .rec-pill{
    position:absolute;top:10px;left:10px;
    background:rgba(0,0,0,0.55);color:#fff;font-family:var(--font-mono);font-size:12px;
    padding:4px 9px;border-radius:20px;display:flex;align-items:center;gap:6px;letter-spacing:0.5px;
  }
  .rec-pill .dot{width:8px;height:8px;border-radius:50%;background:var(--crimson);animation:pulse 1.4s ease-in-out infinite;}
  @keyframes pulse{0%,100%{opacity:1;}50%{opacity:0.25;}}
  .clock{
    position:absolute;top:10px;right:10px;
    background:rgba(0,0,0,0.55);font-family:var(--font-mono);font-size:16px;font-weight:bold;
    padding:5px 12px;border-radius:20px;color:#bfe3c2;letter-spacing:1px;
  }
  .clock.warn{color:#e8d2a0;}
  .clock.over{color:#f3b4ad;}
  .stage-note{font-family:var(--font-mono);font-size:11px;color:#7d8597;padding:8px 4px 2px;text-align:center;}

  .controls-row{display:flex;justify-content:center;align-items:center;gap:24px;margin-top:18px;}
  .rec-btn{
    width:62px;height:62px;border-radius:50%;border:3px solid #7d2520;
    background:#a3322a;cursor:pointer;display:flex;align-items:center;justify-content:center;
    transition:transform .15s ease;
  }
  .rec-btn:hover{transform:scale(1.05);}
  .rec-btn .inner{width:20px;height:20px;border-radius:50%;background:#fff0ee;}
  .rec-btn.recording .inner{border-radius:4px;background:#fff;width:18px;height:18px;}
  .rec-btn:disabled{opacity:0.4;cursor:not-allowed;transform:none;}
  .btn-label{font-family:var(--font-mono);font-size:11px;letter-spacing:1px;color:#2b3440;text-transform:uppercase;text-align:center;margin-top:6px;}

  /* --- recording active state: pulsing ring --- */
  .rec-btn.recording{
    background:#c0392b;
    border-color:#e74c3c;
    animation:recPulse 1.1s ease-out infinite;
  }
  .rec-btn.recording:hover{transform:scale(1.05);}
  @keyframes recPulse{
    0%  {outline:0px solid rgba(231,76,60,0.65);}
    70% {outline:14px solid rgba(231,76,60,0);}
    100%{outline:0px solid rgba(231,76,60,0);}
  }

  /* -------- gear button in header -------- */
  .gear-btn{
    background:none;border:none;cursor:pointer;
    color:#ffffff;padding:5px;border-radius:4px;
    display:flex;align-items:center;justify-content:center;gap:3px;
    transition:color .15s, transform .2s;flex-shrink:0;
    width:29px;height:29px;box-sizing:border-box;
  }
  .gear-btn:hover{color:var(--crimson-bright);}
  .gear-btn.active{color:var(--brass);transform:rotate(45deg);}
  #timerToggle.active{transform:none;}
  #helpToggle.active{transform:none;}
  #shortcutsToggle.active{transform:none;}
  #themeToggle.active{transform:none;}
  #briefingToggle.active{transform:none;}
  #citationToggle.active{transform:none;color:var(--score-green);}
  #timerToggle{position:relative;}
  .timer-badge{
    font-family:var(--font-mono);font-size:10px;font-weight:bold;letter-spacing:0.3px;
    color:var(--brass);margin-left:2px;
  }
  .timer-badge.running{color:var(--forest);}
  .timer-badge.warn{color:var(--crimson-bright);}

  /* --- clock hand: 4-frame stepped tick, only while the prep timer is running --- */
  #timerToggle .timer-hand{
    transform-box: view-box;
    transform-origin: 12px 14px;
  }
  #timerToggle.ticking .timer-hand{
    animation: clockHandTick 4s steps(4) infinite;
  }
  @keyframes clockHandTick{
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
  }

  .timer-display{
    font-family:var(--font-mono);font-size:38px;font-weight:bold;
    color:var(--charcoal);letter-spacing:1px;margin-bottom:14px;
  }
  .timer-display.warn{color:var(--crimson);}
  .timer-btn-row{display:flex;gap:8px;justify-content:center;flex-wrap:wrap;}
  .timer-btn-row .btn{font-size:12.5px;padding:8px 16px;}

  /* -------- question block -------- */
  .question-block{margin-bottom:20px;}
  .question-block label{
    display:block;font-family:var(--font-mono);font-size:11px;
    text-transform:uppercase;letter-spacing:1.2px;color:var(--slate);margin-bottom:7px;
  }
  .question-block textarea{
    width:100%;font-family:var(--font-body);font-size:14px;line-height:1.5;
    padding:11px 13px;border:2px solid var(--rule);border-radius:3px;
    background:#ffffff;color:var(--charcoal);resize:vertical;min-height:72px;
    transition:border-color .15s;
  }
  .question-block textarea:focus{outline:none;border-color:var(--brass);}
  .question-block textarea.error{border-color:var(--crimson);}
  .question-block input[type=text]{
    width:100%;font-family:var(--font-body);font-size:14px;
    padding:11px 13px;border:2px solid var(--rule);border-radius:3px;
    background:#ffffff;color:var(--charcoal);transition:border-color .15s;
  }
  .question-block input[type=text]:focus{outline:none;border-color:var(--brass);}
  .question-block input[type=text].error{border-color:var(--crimson);}
  .question-block .q-hint{font-size:11px;color:var(--slate);margin-top:5px;font-family:var(--font-mono);}
  .q-error{font-size:12px;color:var(--crimson);margin-top:5px;display:none;}

  /* -------- citation checker -------- */
  .cc-verdict-row{display:flex;justify-content:center;margin:6px 0 20px;}
  .cc-verdict-stamp{text-align:center;border:3px solid var(--rule);border-radius:8px;padding:14px 44px;background:#ffffff;}
  .cc-verdict-stamp .label{font-family:var(--font-mono);font-size:10.5px;letter-spacing:2px;text-transform:uppercase;color:var(--slate);}
  .cc-verdict-stamp .num{font-family:var(--font-display);font-size:30px;font-weight:bold;letter-spacing:1px;margin-top:2px;color:var(--charcoal);}
  .cc-verdict-stamp.true{border-color:var(--score-green);}
  .cc-verdict-stamp.true .num{color:var(--score-green);}
  .cc-verdict-stamp.false{border-color:var(--score-red);}
  .cc-verdict-stamp.false .num{color:var(--score-red);}
  .cc-verdict-stamp.unverified{border-color:var(--slate);}
  .cc-verdict-stamp.unverified .num{color:var(--slate);}
  .cc-claim-recap{
    font-family:var(--font-mono);font-size:12px;color:var(--slate);line-height:1.6;
    background:rgba(0,0,0,0.03);border-left:3px solid var(--rule);padding:9px 12px;margin-bottom:14px;
  }
  .cc-claim-recap b{color:var(--charcoal);}
  .cc-explanation{font-size:14px;line-height:1.6;margin-bottom:12px;color:var(--charcoal);}
  .cc-source-link{font-size:13px;margin-bottom:4px;}
  .cc-source-link a{color:var(--crimson-deep);word-break:break-all;}

  .q-mode-row{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:14px;}
  .q-mode-btn{flex:1;min-width:170px;font-size:13px;padding:10px 14px;border:1px solid transparent;}
  #qModeCustomBtn, #qModeReceiveBtn{color:#fdfaf1;}
  #qModeCustomBtn{background:var(--crimson);border-color:var(--crimson-deep);}
  #qModeCustomBtn:hover{background:#154a80;color:#fdfaf1;}
  #qModeReceiveBtn{background:var(--brass);border-color:#1f3a55;}
  #qModeReceiveBtn:hover{background:#2f5c86;color:#fdfaf1;}
  .q-mode-btn.active{outline:2px solid var(--charcoal);outline-offset:2px;}

  .av-btn-row{display:flex;gap:14px;flex-wrap:wrap;max-width:560px;margin:0 auto;}
  .av-btn-row .btn{flex:1;min-width:210px;font-size:14px;font-weight:700;padding:12px 18px;border:1px solid transparent;}
  #uploadVideoBtn, #captureYoutubeBtn{color:#ffffff;}
  #uploadVideoBtn{background:var(--crimson);border-color:var(--crimson-deep);}
  #uploadVideoBtn:hover{background:#154a80;color:#ffffff;}
  #captureYoutubeBtn{background:var(--brass);border-color:#1f3a55;}
  #captureYoutubeBtn:hover{background:#2f5c86;color:#ffffff;}

  .q-change-link{font-family:var(--font-mono);color:var(--brass);text-decoration:underline;cursor:pointer;}
  .q-change-link:hover{color:var(--charcoal);}

  .q-cat-row{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:10px;}
  .q-cat-btn{flex:1;min-width:110px;font-size:13px;padding:9px 12px;border:1px solid var(--rule);}
  .q-cat-btn.active{background:var(--brass);color:#fff;border-color:var(--brass);}

  .q-option-card{
    border:2px solid var(--rule);border-radius:3px;background:#ffffff;
    padding:12px 14px;margin-bottom:8px;cursor:pointer;transition:border-color .12s,background .12s;
    font-family:var(--font-body);font-size:14px;line-height:1.45;color:var(--charcoal);
  }
  .q-option-card:hover{border-color:var(--brass);background:#eef4fa;}

  .q-confirmed-text{
    font-family:var(--font-display);font-size:15px;font-style:italic;line-height:1.5;
    color:var(--charcoal);border:1px solid var(--rule);border-radius:3px;
    padding:12px 14px;background:#ffffff;margin-top:4px;
  }

  .q-spinner{
    width:22px;height:22px;margin:10px auto 0;border-radius:50%;
    border:3px solid var(--rule);border-top-color:var(--brass);
    animation:qSpin .8s linear infinite;
  }
  @keyframes qSpin{to{transform:rotate(360deg);}}

  /* -------- ai-thinking progress bar -------- */
  .progress-bar-wrap{
    width:100%;max-width:300px;margin:16px auto 0;
  }
  .progress-bar-track{
    height:5px;border-radius:0;
    background:var(--rule);overflow:hidden;
    border-top:1px solid rgba(0,0,0,0.12);
  }
  .progress-bar-fill{
    height:100%;width:0%;border-radius:0;
    background:var(--crimson);
    transition:width .3s ease-out;
  }
  .progress-phrase{
    font-family:var(--font-mono);font-size:11.5px;color:var(--slate);
    margin-top:10px;min-height:15px;transition:opacity .22s ease;
    letter-spacing:0.3px;text-align:center;
  }

  /* question display on results */
  .result-question{
    border:1px solid var(--rule);border-radius:3px;
    padding:14px 16px;margin-bottom:22px;
    background:#ffffff;
  }
  .result-question .rq-label{
    font-family:var(--font-mono);font-size:10px;text-transform:uppercase;
    letter-spacing:1.5px;color:var(--slate);margin-bottom:6px;
  }
  .result-question .rq-text{
    font-family:var(--font-display);font-size:16px;font-style:italic;
    color:var(--charcoal);line-height:1.4;
  }
  .example-note{
    font-family:var(--font-mono);font-size:11.5px;color:var(--slate);
    line-height:1.6;margin:-10px 0 22px;padding-bottom:18px;
    border-bottom:1px solid var(--rule);
  }
  .example-note a{color:var(--forest);}
  .example-video-wrap{
    position:relative;width:100%;padding-top:56.25%;
    margin-bottom:24px;background:#000;border-radius:4px;overflow:hidden;
    border:1px solid var(--rule);
  }
  .example-video-wrap iframe{
    position:absolute;top:0;left:0;width:100%;height:100%;border:0;
  }
  .video-thumb-link{
    position:absolute;top:0;left:0;width:100%;height:100%;
    display:block;text-decoration:none;
  }
  .video-thumb-img{
    width:100%;height:100%;object-fit:cover;display:block;
  }
  .video-thumb-play{
    position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
    width:68px;height:48px;transition:transform .15s ease;
  }
  .video-thumb-link:hover .video-thumb-play{transform:translate(-50%,-50%) scale(1.08);}
  .video-thumb-caption{
    position:absolute;bottom:10px;right:12px;
    font-family:var(--font-mono);font-size:11px;letter-spacing:0.5px;
    color:#fff;background:rgba(0,0,0,0.55);padding:4px 10px;border-radius:20px;
  }

  /* -------- settings panel -------- */
  .settings-panel{
    position:fixed;z-index:710;top:0;right:0;
    max-height:80vh;overflow-y:auto;overflow-x:hidden;
    background:var(--parchment);border:1px solid var(--charcoal);border-radius:4px;
  }
  .settings-panel .sp-head{
    background:var(--charcoal);padding:13px 16px;
    font-family:var(--font-display);font-size:15px;letter-spacing:0.3px;
    color:var(--on-accent);border-bottom:2px solid var(--crimson);
    display:flex;justify-content:space-between;align-items:center;
  }
  .settings-panel .sp-head span{color:var(--on-accent);font-size:15px;}
  .settings-panel .sp-head #signalCount, .settings-panel .sp-head #timerStateTag{
    font-family:var(--font-mono);font-size:10px;letter-spacing:1px;text-transform:uppercase;
    color:#ffffff;border:1px solid rgba(255,255,255,0.2);border-radius:20px;padding:3px 9px;
  }
  .sp-body{padding:16px 16px 14px;}
  #youtubePopover .sp-body{padding-bottom:8px;}
  .shortcut-row{display:flex;align-items:center;justify-content:space-between;padding:7px 0;font-family:var(--font-body);font-size:13px;color:var(--charcoal);border-bottom:1px solid var(--rule);}
  .shortcut-row:last-child{border-bottom:none;}
  .shortcut-row kbd{
    font-family:var(--font-mono);font-size:11px;color:var(--charcoal);
    background:var(--parchment-deep);border:1px solid var(--rule);border-bottom-width:2px;
    border-radius:4px;padding:3px 8px;
  }
  .signal-list{list-style:none;margin:0 0 14px;padding:0;display:flex;flex-direction:column;gap:8px;}
  .signal-row{
    display:flex;align-items:center;gap:8px;
    padding:8px 10px;background:#ffffff;border-radius:3px;
    border:1px solid var(--rule);
  }
  .signal-row .sig-time{
    font-family:var(--font-mono);font-size:13px;font-weight:bold;
    color:var(--charcoal);min-width:52px;
  }
  .signal-row .sig-label{flex:1;font-size:13px;color:var(--charcoal);}
  .signal-row .sig-color{width:16px;height:16px;border-radius:50%;flex-shrink:0;border:1px solid rgba(0,0,0,0.15);}
  .signal-row .sig-del{
    background:none;border:none;cursor:pointer;color:var(--crimson);
    font-size:16px;line-height:1;padding:2px 4px;border-radius:2px;
  }
  .signal-row .sig-del:hover{background:rgba(29,92,158,0.1);}
  .signal-row .sig-edit{
    background:none;border:none;cursor:pointer;color:var(--slate);
    font-size:11px;line-height:1;padding:3px 7px;border-radius:20px;
    font-family:var(--font-mono);text-transform:uppercase;letter-spacing:0.5px;
    border:1px solid var(--rule);
  }
  .signal-row .sig-edit:hover{background:rgba(0,0,0,0.06);color:var(--charcoal);border-color:#aaa;}

  .add-signal-form{
    display:grid;grid-template-columns:1fr 1fr;
    gap:10px 8px;align-items:end;
    padding-top:14px;border-top:1px solid var(--rule);
  }
  .add-signal-form > div:nth-child(1){order:1;}
  .add-signal-form > div:nth-child(3){order:2;}
  .add-signal-form > div:nth-child(2){order:3;grid-column:1 / -1;}
  .add-signal-form > .btn-add{order:4;}
  .add-signal-form > .btn.ghost{order:5;}
  .add-signal-form .btn-add, .add-signal-form .btn.ghost{width:100%;}
  .add-signal-form input[type=text], .add-signal-form input[type=number]{
    font-family:var(--font-mono);font-size:13px;padding:7px 9px;
    border:2px solid var(--rule);border-radius:3px;background:#ffffff;color:var(--charcoal);
    transition:border-color .15s;
  }
  .add-signal-form input[type=text]:focus, .add-signal-form input[type=number]:focus{
    outline:none;border-color:var(--brass);
  }
  .add-signal-form input[type=number]{width:100%;}
  .add-signal-form label.color-pick{
    display:flex;align-items:center;gap:6px;cursor:pointer;
    font-family:var(--font-mono);font-size:11px;color:var(--slate);
  }
  .add-signal-form input[type=color]{
    width:100%;height:33px;padding:2px;border:2px solid var(--rule);border-radius:3px;
    cursor:pointer;background:#ffffff;
  }
  .btn-add{
    font-family:var(--font-body);font-size:13px;font-weight:600;
    padding:9px 16px;border-radius:3px;border:1px solid var(--crimson-deep);
    background:var(--crimson);color:var(--on-accent);cursor:pointer;white-space:nowrap;
  }
  .btn-add:hover{background:#154a80;}
  .sp-note{font-size:11px;font-family:var(--font-mono);color:var(--slate);margin-top:10px;}

  /* -------- signal presets -------- */
  .preset-section{margin-bottom:16px;padding-bottom:16px;border-bottom:1px solid var(--rule);}
  .preset-label{font-family:var(--font-mono);font-size:10px;text-transform:uppercase;letter-spacing:1.2px;color:var(--slate);margin-bottom:8px;}
  .preset-row{display:flex;flex-wrap:wrap;gap:6px;}
  .btn-preset{
    font-family:var(--font-mono);font-size:11px;letter-spacing:0.5px;
    padding:6px 11px;border-radius:20px;border:1px solid var(--rule);
    background:#ffffff;color:var(--charcoal);cursor:pointer;
    white-space:nowrap;transition:background .12s, border-color .12s;
  }
  .btn-preset:hover{background:var(--parchment-deep);border-color:var(--brass);}

  /* -------- tournament briefing (in-ballot view) -------- */
  .bf-timing-row{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:12px;}
  .bf-timing-btn{flex:1;min-width:130px;font-size:13px;padding:10px 12px;border:1px solid var(--rule);background:#ffffff;color:var(--charcoal);border-radius:3px;cursor:pointer;font-family:var(--font-body);}
  .bf-timing-btn:hover{border-color:var(--brass);}
  .bf-timing-btn.active{background:var(--brass);color:#fff;border-color:var(--brass);}
  .bf-custom-row{display:none;margin-bottom:14px;}
  .bf-custom-row.show{display:block;}
  .bf-custom-row input[type=datetime-local]{
    width:100%;font-family:var(--font-mono);font-size:13px;padding:8px 10px;
    border:1px solid var(--rule);border-radius:3px;background:#ffffff;color:var(--charcoal);
  }
  .bf-result{font-family:var(--font-body);color:var(--charcoal);line-height:1.55;font-size:14px;}
  .bf-result h4{
    font-family:var(--font-display);font-size:15.5px;letter-spacing:0.2px;
    margin:20px 0 8px;padding-bottom:6px;border-bottom:1px solid var(--rule);color:var(--crimson-deep);
  }
  .bf-result h4:first-child{margin-top:0;}
  .bf-result ul{margin:0 0 4px;padding-left:20px;}
  .bf-result li{margin-bottom:7px;}
  .bf-result li strong{color:var(--crimson-deep);}
  .bf-result li a{color:var(--crimson-deep);text-decoration:none;border-bottom:1px solid var(--rule);}
  .bf-result li a:hover{border-bottom-color:var(--crimson-deep);}
  .bf-result p{margin:0 0 10px;}
  .bf-verified-badge{
    font-family:var(--font-mono);font-size:10.5px;letter-spacing:0.6px;text-transform:uppercase;
    color:var(--forest);border:1px solid var(--forest);border-radius:20px;padding:3px 10px;
    display:inline-block;margin-bottom:14px;
  }
  .bf-warning{
    background:#fff3cd;color:#7a5b00;border:1px solid #ffe08a;border-radius:8px;
    padding:10px 12px;margin-bottom:14px;font-size:0.88em;font-family:var(--font-body);
  }
  .bf-actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:18px;}

  /* -------- generic buttons -------- */
  .btn{
    font-family:var(--font-body);font-size:14px;font-weight:600;
    padding:11px 20px;border-radius:3px;border:1px solid var(--charcoal);
    background:var(--charcoal);color:var(--on-accent);cursor:pointer;
  }
  .btn:hover{background:#13263d;}
  .btn.primary{background:var(--crimson);border-color:var(--crimson-deep);}
  .btn.primary:hover{background:#154a80;}
  .btn.ghost{background:transparent;color:var(--charcoal);}
  .btn.ghost:hover{background:rgba(0,0,0,0.05);}
  .btn:disabled{opacity:0.45;cursor:not-allowed;}
  .actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:18px;}

  /* -------- form field -------- */
  .field-block{margin-top:18px;}
  .field-block label{
    display:block;font-family:var(--font-mono);font-size:11px;
    text-transform:uppercase;letter-spacing:1px;color:var(--slate);margin-bottom:6px;
  }
  .field-block input[type=password], .field-block input[type=text]{
    width:100%;font-family:var(--font-mono);font-size:13px;
    padding:10px 12px;border:1px solid var(--rule);border-radius:3px;background:#ffffff;color:var(--charcoal);
  }
  .field-hint{font-size:11px;color:var(--slate);margin-top:5px;}
  .field-error{font-size:12px;color:var(--crimson);margin-top:6px;display:none;}

  /* -------- signal overlay -------- */
  #signalOverlay{
    position:fixed;inset:0;z-index:9999;
    display:flex;flex-direction:column;align-items:center;justify-content:center;
    pointer-events:none;opacity:0;transition:opacity 0.2s ease;
  }
  #signalOverlay.visible{opacity:1;}
  .overlay-backdrop{
    position:absolute;inset:0;
    background:rgba(0,0,0,0.72);
  }
  .overlay-card{
    position:relative;z-index:1;
    background:var(--ink-soft);
    border:3px solid #fff;
    border-radius:8px;
    padding:36px 56px;
    text-align:center;
    min-width:260px;
    animation:popIn 0.25s cubic-bezier(0.34,1.56,0.64,1) both;
  }
  @keyframes popIn{from{transform:scale(0.7);}to{transform:scale(1);}}
  .overlay-card .ov-label{
    font-family:var(--font-mono);font-size:13px;letter-spacing:2px;text-transform:uppercase;
    color:rgba(255,255,255,0.6);margin-bottom:8px;
  }
  .overlay-card .ov-time{
    font-family:var(--font-display);font-size:72px;font-weight:bold;line-height:1;
  }
  .overlay-card .ov-sub{
    font-family:var(--font-mono);font-size:14px;letter-spacing:1px;
    margin-top:10px;opacity:0.8;
  }
  .overlay-card .ov-warn{
    font-family:var(--font-mono);font-size:12px;letter-spacing:1px;
    margin-top:8px;color:rgba(255,255,255,0.5);
  }
  .overlay-dismiss{
    position:absolute;top:10px;right:14px;
    background:none;border:none;color:rgba(255,255,255,0.4);
    font-size:20px;cursor:pointer;pointer-events:auto;
  }
  .overlay-dismiss:hover{color:#fff;}

  /* -------- processing -------- */
  .processing{display:flex;flex-direction:column;align-items:center;padding:50px 20px;text-align:center;gap:14px;}
  .blot{
    width:46px;height:46px;border-radius:50% 50% 50% 4px;
    background:var(--crimson);animation:breathe 1.6s ease-in-out infinite;
  }
  @keyframes breathe{0%,100%{transform:scale(1) rotate(-2deg);}50%{transform:scale(0.82) rotate(3deg);}}
  .processing .status{font-family:var(--font-mono);font-size:14px;color:var(--charcoal);}
  .processing .sub{font-size:12px;color:var(--slate);max-width:360px;}
  .processing .sub:empty{display:none;}

  .processing .progress-bar-wrap{margin-top:0;}
  .processing .progress-phrase{margin-top:0;}

  /* -------- results -------- */
  .stamp-row{
    display:flex;justify-content:center;align-items:stretch;
    gap:16px;flex-wrap:wrap;margin:8px 0 26px;
  }
  .verdict-stamp{
    border:3px double var(--crimson);color:var(--crimson);
    width:fit-content;margin:0;padding:10px 26px;
    text-align:center;border-radius:4px;
  }
  .verdict-stamp .label{font-family:var(--font-mono);font-size:10px;letter-spacing:2px;text-transform:uppercase;}
  .verdict-stamp .num{font-family:var(--font-display);font-size:34px;font-weight:bold;line-height:1.1;}
  .verdict-stamp .num small{font-size:18px;}

  .category{
    border-top:1px solid var(--rule);padding:20px 0;
    display:grid;grid-template-columns:64px 1fr;gap:16px;
  }
  .category:first-of-type{border-top:none;}
  .badge-wrap{position:relative;width:64px;height:64px;}
  .badge-wrap svg{position:absolute;top:0;left:0;width:64px;height:64px;}
  .badge-wrap .score{
    position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;
    font-family:var(--font-display);font-weight:bold;font-size:19px;line-height:1;
  }
  .badge-wrap .score small{font-family:var(--font-mono);font-weight:normal;font-size:9px;color:var(--slate);margin-top:2px;}

  .rank-stamp{
    border:3px double var(--brass);color:var(--brass);
    width:fit-content;margin:0;padding:10px 26px;
    text-align:center;border-radius:4px;
    display:flex;flex-direction:column;justify-content:center;
  }
  .rank-stamp .label{font-family:var(--font-mono);font-size:10px;letter-spacing:2px;text-transform:uppercase;}
  .rank-stamp .num{font-family:var(--font-display);font-size:34px;font-weight:bold;line-height:1.1;}
  .rank-stamp .num small{font-size:14px;}
  .rank-explanation{
    max-width:520px;margin:0 auto 26px;font-size:13px;line-height:1.6;
    color:var(--charcoal);text-align:center;font-style:italic;
  }
  .badge-wrap svg path{stroke:var(--bc, var(--score-cyan));}
  .badge-wrap .score{color:var(--bc, var(--score-cyan));}

  .cat-name{font-family:var(--font-display);font-size:17px;margin:0 0 10px;}
  .cat-row{margin-bottom:9px;font-size:13.5px;line-height:1.5;}
  .cat-row .tag{
    font-family:var(--font-mono);font-size:10px;text-transform:uppercase;
    letter-spacing:1px;color:var(--slate);display:block;margin-bottom:2px;
  }
  .cat-row.worked .tag{color:var(--forest);}
  .cat-row.flaws .tag{color:var(--score-red);}
  .cat-row.evidence{
    font-family:var(--font-mono);font-size:12.5px;
    background:rgba(0,0,0,0.04);border-left:2px solid var(--rule);padding:8px 10px;
  }
  .cat-row.evidence .tag{color:var(--score-orange);}
  .cat-row.evidence strong{color:var(--charcoal);font-weight:700;}

  .score-key{
    display:flex;align-items:center;gap:10px;margin:0 0 20px;
    font-family:var(--font-mono);font-size:10px;color:var(--slate);
  }
  .score-key .score-key-bar{
    flex:1;height:10px;border-radius:5px;
    background:linear-gradient(to right, #c0392b 0%, #d9822b 25%, #d4b106 50%, #2fae4e 75%, #12aebd 100%);
    border:1px solid rgba(0,0,0,0.12);
  }
  .score-key .score-key-label{white-space:nowrap;letter-spacing:0.5px;}

  .drill{
    margin-top:24px;border:1px dashed var(--charcoal);
    padding:16px 18px;border-radius:3px;
  }
  .drill .tag{
    font-family:var(--font-mono);font-size:10px;text-transform:uppercase;
    letter-spacing:1.5px;color:var(--crimson);display:block;margin-bottom:6px;
  }
  .drill p{margin:0;font-size:14px;line-height:1.6;}

  /* -------- inline transcript section -------- */
  .transcript-section{
    margin-top:28px;
    border-top:2px solid var(--charcoal);
    padding-top:18px;
  }
  .transcript-section .ts-head{
    font-family:var(--font-display);font-size:16px;font-weight:bold;
    margin:0 0 4px;
    display:flex;align-items:center;gap:10px;
  }
  .transcript-section .ts-meta{
    font-family:var(--font-mono);font-size:11px;color:var(--slate);
    text-transform:uppercase;letter-spacing:1px;margin-bottom:12px;
  }
  .transcript-body{
    white-space:pre-wrap;
    font-family:var(--font-mono);
    font-size:13px;
    line-height:1.75;
    background:#ffffff;
    border:1px solid var(--rule);
    padding:18px;
    border-radius:3px;
    color:var(--charcoal);
    /* ruled paper lines */
    background-image:repeating-linear-gradient(
      to bottom,
      transparent,
      transparent calc(1.75em - 1px),
      rgba(199,212,227,0.4) calc(1.75em - 1px),
      rgba(199,212,227,0.4) 1.75em
    );
    background-size:100% 1.75em;
  }

  .raw-fallback{font-size:13.5px;line-height:1.6;}
  .raw-fallback h4{font-family:var(--font-display);margin:18px 0 6px;}
  .raw-fallback strong{color:var(--crimson);}

  /* -------- transcript annotation feature (comments + section labels) -------- */
  .ann-legend{
    display:flex;flex-wrap:wrap;align-items:center;gap:14px;
    font-family:var(--font-mono);font-size:10.5px;color:var(--slate);
    margin-bottom:10px;
  }
  .ann-legend-item{display:flex;align-items:center;gap:5px;}
  .ann-swatch{
    width:11px;height:11px;border-radius:2px;display:inline-block;
    border:1px solid rgba(0,0,0,0.25);
  }
  .ann-swatch.ann-red{background:#c0392b;}
  .ann-swatch.ann-blue{background:#2356a8;}
  .ann-swatch.ann-green{background:#2f7d3c;}
  .ann-swatch.ann-yellow{background:#caa314;}
  .ann-legend-hint{font-style:italic;color:var(--slate);opacity:0.8;}

  .ts-section{margin:0 0 18px;}
  .ts-section:last-child{margin-bottom:0;}
  .ts-section-label{
    font-family:var(--font-mono);font-size:10px;font-weight:bold;
    text-transform:uppercase;letter-spacing:1.3px;color:#fff;
    background:var(--charcoal);display:inline-block;
    padding:2px 9px;border-radius:2px;margin-bottom:8px;
  }
  .ts-section-text{padding-left:22px;border-left:2px solid var(--rule);}

  .ann-comment{
    cursor:pointer;border-bottom:2px solid;border-radius:1px;
    padding-bottom:1px;transition:background-color .15s ease;
  }
  .ann-comment:hover{filter:brightness(0.97);}
  .ann-comment.ann-red{border-color:#c0392b;background:rgba(192,57,43,0.10);}
  .ann-comment.ann-blue{border-color:#2356a8;background:rgba(35,86,168,0.10);}
  .ann-comment.ann-green{border-color:#2f7d3c;background:rgba(47,125,60,0.12);}
  .ann-comment.ann-yellow{border-color:#caa314;background:rgba(202,163,20,0.16);}
  .ann-comment.ann-active{filter:brightness(0.9);}

  .comment-popover{
    position:fixed;z-index:1300;max-width:300px;
    background:#ffffff;border:1px solid var(--charcoal);
    border-radius:4px;
    padding:10px 13px;font-size:12.5px;line-height:1.5;
  }
  .comment-popover.hidden{display:none;}
  .comment-popover .cp-tag{
    font-family:var(--font-mono);font-size:9.5px;font-weight:bold;
    text-transform:uppercase;letter-spacing:1px;margin-bottom:5px;
    display:inline-block;padding:1px 7px;border-radius:2px;color:#fff;
  }
  .comment-popover .cp-tag.tag-red{background:#c0392b;}
  .comment-popover .cp-tag.tag-blue{background:#2356a8;}
  .comment-popover .cp-tag.tag-green{background:#2f7d3c;}
  .comment-popover .cp-tag.tag-yellow{background:#a98512;}
  .comment-popover .cp-text{color:var(--charcoal);}
  .comment-popover .cp-arrow{
    position:absolute;top:-6px;left:18px;width:11px;height:11px;
    background:#ffffff;border-left:1px solid var(--charcoal);
    border-top:1px solid var(--charcoal);transform:rotate(45deg);
  }
  .comment-popover.cp-flip .cp-arrow{
    top:auto;bottom:-6px;
    border-left:none;border-top:none;
    border-right:1px solid var(--charcoal);
    border-bottom:1px solid var(--charcoal);
  }

  /* -------- download format choice modal -------- */
  .dl-modal{
    position:fixed;inset:0;z-index:300;
    background:rgba(20,17,12,0.5);
    display:flex;align-items:center;justify-content:center;
    padding:20px;
  }
  .dl-modal.hidden{display:none;}
  .dl-modal-card{
    background:#ffffff;border:1px solid var(--charcoal);
    border-radius:6px;padding:24px 26px;max-width:340px;width:100%;
  }
  .dl-modal-head{font-family:var(--font-display);font-size:18px;font-weight:bold;margin:0 0 6px;}
  .dl-modal-sub{font-size:13px;color:var(--slate);margin:0 0 18px;}
  .dl-modal-btn{display:block;width:100%;margin-bottom:10px;text-align:center;}
  .dl-modal-btn:last-child{margin-bottom:0;}

  /* -------- vocal delivery analysis panel -------- */
  .delivery-section{margin-top:28px;border-top:2px solid var(--charcoal);padding-top:18px;}
  .delivery-section .ts-head{font-family:var(--font-display);font-size:16px;font-weight:bold;margin:0 0 4px;display:flex;align-items:center;gap:10px;}
  .delivery-section .ts-meta{font-family:var(--font-mono);font-size:11px;color:var(--slate);text-transform:uppercase;letter-spacing:1px;margin-bottom:12px;}
  .delivery-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(125px,1fr));gap:10px;}
  .delivery-stat{background:#ffffff;border:1px solid var(--rule);border-radius:3px;padding:10px 12px;}
  .delivery-stat .dv-label{font-family:var(--font-mono);font-size:9.5px;text-transform:uppercase;letter-spacing:1px;color:var(--slate);display:block;margin-bottom:5px;}
  .delivery-stat .dv-val{font-family:var(--font-display);font-size:19px;color:var(--bc, var(--charcoal));font-weight:bold;}
  .delivery-stat .dv-sub{font-size:10.5px;color:var(--slate);margin-top:3px;line-height:1.4;}
  .delivery-note{font-family:var(--font-mono);font-size:11px;color:var(--slate);margin-top:12px;font-style:italic;line-height:1.5;}

  /* -------- word-level transcript highlighting (synced playback) -------- */
  .tw{
    cursor:pointer;border-radius:2px;transition:background-color .1s ease, color .1s ease;
  }
  .tw:hover{background:rgba(16,24,36,0.10);}
  .tw.tw-active{
    background:var(--charcoal);color:#f8f6f0;
    box-shadow:0 0 0 1px var(--charcoal);
  }
  .transcript-highlight-demo .tw{cursor:default;}
  .transcript-highlight-demo .tw:hover{background:none;}

  /* -------- synced video playback panel -------- */
  .playback-section{margin-top:28px;border-top:2px solid var(--charcoal);padding-top:18px;}
  .playback-section .ts-head{font-family:var(--font-display);font-size:16px;font-weight:bold;margin:0 0 4px;}
  .playback-section .ts-meta{font-family:var(--font-mono);font-size:11px;color:var(--slate);text-transform:uppercase;letter-spacing:1px;margin-bottom:12px;}
  .playback-stage{background:var(--ink);border-radius:4px;padding:10px;border:1px solid var(--ink-line);}
  .playback-frame{position:relative;background:#000;border-radius:2px;overflow:hidden;aspect-ratio:16/10;}
  .playback-frame video{width:100%;height:100%;object-fit:cover;display:block;}
  .playback-frame #exampleYtPlayer,
  .playback-frame #exampleYtPlayer iframe{width:100% !important;height:100% !important;display:block;}
  .pb-play-btn{
    position:absolute;inset:0;width:100%;height:100%;
    background:rgba(8,20,36,0.28);border:none;cursor:pointer;
    display:flex;align-items:center;justify-content:center;
    color:#f8f6f0;padding:0;transition:background-color .15s ease;
  }
  .pb-play-btn:hover{background:rgba(8,20,36,0.4);}
  .pb-play-btn .pb-icon-circle{
    width:56px;height:56px;border-radius:50%;background:rgba(0,0,0,0.55);
    display:flex;align-items:center;justify-content:center;
    border:2px solid rgba(255,255,255,0.85);
  }
  .pb-play-btn.pb-playing{background:transparent;}
  .pb-play-btn.pb-playing .pb-icon-circle{opacity:0;pointer-events:none;}
  .pb-play-btn.pb-playing:hover .pb-icon-circle{opacity:1;}
  .pb-scrub-row{display:flex;align-items:center;gap:10px;margin-top:10px;padding:0 2px;}
  .pb-time{font-family:var(--font-mono);font-size:11px;color:var(--chrome-text-dim);min-width:36px;text-align:center;}
  .pb-scrub{
    flex:1;-webkit-appearance:none;appearance:none;height:4px;border-radius:2px;
    background:var(--ink-line);outline:none;cursor:pointer;
  }
  .pb-scrub::-webkit-slider-thumb{
    -webkit-appearance:none;appearance:none;width:13px;height:13px;border-radius:50%;
    background:var(--brass);cursor:pointer;border:2px solid var(--on-accent);
  }
  .pb-scrub::-moz-range-thumb{
    width:13px;height:13px;border-radius:50%;background:var(--brass);cursor:pointer;border:2px solid var(--on-accent);
  }
  .sync-fix-row{display:flex;align-items:center;gap:8px;margin-top:8px;padding:0 2px;flex-wrap:wrap;}
  .sync-fix-btn{
    font-family:var(--font-mono);font-size:11px;letter-spacing:0.3px;
    border:1px solid var(--ink-line);background:rgba(255,255,255,0.04);color:var(--chrome-text-dim);
    border-radius:20px;padding:5px 11px;cursor:pointer;display:inline-flex;align-items:center;gap:6px;
    transition:background 0.15s ease,color 0.15s ease,border-color 0.15s ease;
  }
  .sync-fix-btn:hover{color:var(--chrome-text);border-color:var(--brass);}
  .sync-fix-btn.armed{background:var(--brass);color:var(--on-accent);border-color:var(--brass);}
  .sync-fix-hint{font-family:var(--font-mono);font-size:11px;color:var(--brass);}

  .error-box{
    border:1px solid #a3322a;background:rgba(163,50,42,0.07);
    color:#7d2520;padding:14px 16px;border-radius:3px;font-size:13px;margin-top:14px;
  }
  .legal{text-align:center;font-family:var(--font-mono);font-size:11px;color:var(--chrome-text-dim);margin-top:30px;letter-spacing:0.3px;}
  .hidden{display:none !important;}

  /* -------- toast notifications -------- */
  .toast-container{
    position:fixed;bottom:20px;left:50%;transform:translateX(-50%);
    z-index:600;display:flex;flex-direction:column;gap:8px;align-items:center;
    pointer-events:none;
  }
  .toast{
    background:var(--charcoal);color:var(--on-accent);
    font-family:var(--font-body);font-size:13px;font-weight:600;
    padding:10px 18px;border-radius:20px;box-shadow:0 6px 20px var(--shadow);
    border:1px solid rgba(255,255,255,0.08);
    opacity:0;transform:translateY(8px);transition:opacity .2s ease, transform .2s ease;
    display:flex;align-items:center;gap:8px;
  }
  .toast.show{opacity:1;transform:translateY(0);}
  .toast svg{flex-shrink:0;color:var(--score-green);}

  /* -------- first-visit hint (styled like Timer/Settings panels) -------- */
  .hint-banner{
    position:fixed;top:auto;right:18px;bottom:18px;left:auto;
    width:250px;max-height:none;z-index:400;
  }
  .hint-banner .sp-body{
    font-family:var(--font-body);font-size:12.5px;color:var(--charcoal);line-height:1.5;
  }
  .hint-banner .sp-body kbd{
    font-family:var(--font-mono);font-size:11px;color:var(--charcoal);
    background:var(--parchment-deep);border:1px solid var(--rule);border-bottom-width:2px;
    border-radius:4px;padding:2px 7px;
  }
  .hint-banner-close{
    position:absolute;top:8px;right:10px;background:none;border:none;
    color:rgba(255,255,255,0.6);cursor:pointer;font-size:16px;line-height:1;padding:0;
  }
  .hint-banner-close:hover{color:#fff;}
  @media(max-width:600px){ .hint-banner{left:14px;right:14px;width:auto;bottom:14px;} }

  .print-brand{display:none;}

  /* -------- condensed export menu -------- */
  .export-menu-wrap{position:relative;display:inline-block;}
  .export-menu{
    position:fixed;top:0;left:0;right:auto;
    width:230px;max-height:none;z-index:600;
  }
  .export-menu .sp-body{padding:8px;display:flex;flex-direction:column;gap:2px;}
  .export-item{
    display:flex;align-items:center;gap:10px;width:100%;
    background:none;border:none;text-align:left;cursor:pointer;
    font-family:var(--font-body);font-size:13px;font-weight:500;color:var(--charcoal);
    padding:9px 10px;border-radius:4px;transition:background .12s;
  }
  .export-item:hover{background:var(--parchment-deep);}
  .export-item svg{flex-shrink:0;color:var(--slate);}

  /* ================= HAMBURGER NAV MENU ================= */
  /* Solid, non-transparent header bar that houses the hamburger button.
     It is now nested inside .nav-drawer (see index.html) so it is a true
     part of the menu bar and slides away together with the list below it
     instead of staying stuck in place on its own. */
  .nav-drawer-head{
    position:sticky;top:0;z-index:700;
    width:100%;
    background:var(--charcoal);
    padding:14px 16px;flex-shrink:0;
    display:flex;align-items:center;
    border-bottom:2px solid var(--crimson);
  }
  .nav-hamburger-fab{
    width:46px;height:46px;border-radius:50%;
    display:flex;align-items:center;justify-content:center;
    background:none;border:none;
    color:#ffffff;cursor:pointer;
    box-shadow:none;
    transition:opacity .15s, transform .15s;
  }
  .nav-hamburger-fab:hover{opacity:0.8;}
  .nav-hamburger-fab svg{transition:opacity .15s;}
  /* Persistent, separately fixed hamburger button. It only shows up while
     the drawer is minimized, so there is always a way to bring the menu
     back — the drawer's own header slides away with it when collapsed. */
  .nav-hamburger-persistent{
    position:fixed;top:16px;left:16px;z-index:700;
    width:46px;height:46px;border-radius:50%;
    display:flex;align-items:center;justify-content:center;
    background:var(--charcoal);border:none;
    color:#ffffff;cursor:pointer;
    box-shadow:none;
    transition:opacity .15s;
  }
  .nav-hamburger-persistent:hover{opacity:0.8;}
  /* The drawer/menu list is shown by default and only tucks itself away
     when the hamburger button is clicked to minimize it — see
     .nav-drawer-collapsed below. It uses the same solid navy-header /
     white-body pattern as the other panels on the site (e.g. the Prep
     Timer panel) — no transparency. */
  .nav-drawer{
    position:fixed;top:0;left:0;bottom:0;z-index:690;
    width:270px;max-width:82vw;
    background:var(--parchment);
    box-shadow:none;
    transform:translateX(0);pointer-events:auto;
    transition:transform .3s cubic-bezier(.2,.8,.25,1);
    display:flex;flex-direction:column;overflow-y:auto;
  }
  .nav-drawer.nav-drawer-collapsed{transform:translateX(-100%);pointer-events:none;}
  /* Still used by the goal-creation modal's close button (goalModalCloseBtn) */
  .nav-drawer-close{
    background:none;border:none;color:var(--on-accent);cursor:pointer;
    width:30px;height:30px;display:flex;align-items:center;justify-content:center;
    border-radius:50%;transition:background .12s;
  }
  .nav-drawer-close:hover{background:rgba(255,255,255,0.12);}
  .nav-menu-body{padding:12px;display:flex;flex-direction:column;gap:2px;}
  .nav-menu-item{
    display:flex;align-items:center;gap:14px;width:100%;
    background:none;border:none;text-align:left;cursor:pointer;
    font-family:var(--font-body);font-size:14.5px;font-weight:500;color:var(--charcoal);
    padding:13px 12px;border-radius:5px;transition:background .12s;
  }
  .nav-menu-item:hover{background:var(--parchment-deep);}
  .nav-menu-item svg{flex-shrink:0;color:var(--slate);}
  .nav-menu-item:hover svg{color:var(--crimson-deep);}
  .nav-menu-divider{height:1px;background:var(--rule);margin:8px 6px;}


  /* ================= PRINT STYLESHEET ================= */
  @media print{
    @page{ margin:0.6in; }
    *{ box-shadow:none !important; text-shadow:none !important; }
    html,body{background:#ffffff !important; height:auto !important; overflow:visible !important;}
    body{color:#16283c !important; display:block !important; min-height:0 !important;}

    /* Hide all interactive chrome and non-ballot UI */
    header.topbar, .side-words, .toast-container, .hint-banner,
    .settings-panel, #dlModal, .comment-popover,
    #view-record, .flight, .actions, .export-menu,
    .ann-legend-hint{
      display:none !important;
    }
    #view-results .delivery-section.hidden{ display:none !important; }

    main{
      display:block !important; max-width:none !important; width:100% !important;
      margin:0 !important; padding:0 !important; height:auto !important;
    }
    .ballot{
      display:block !important; visibility:visible !important;
      background:#ffffff !important; color:#16283c !important;
      max-width:none !important; width:100% !important; height:auto !important;
      box-shadow:none !important; border:none !important;
      border-radius:0; padding:0; overflow:visible !important;
    }
    .ballot::before{ display:none !important; }
    .ballot-body{ display:block !important; padding:0 !important; height:auto !important; }

    /* Print-only logo header */
    .print-brand{
      display:flex !important; visibility:visible !important;
      align-items:center; gap:8px;
      font-family:Georgia,'Iowan Old Style',serif; font-size:22px; font-weight:700;
      color:#123a63 !important; margin:0 0 12px 0; opacity:1 !important;
    }
    .print-brand svg{ display:inline-block !important; width:28px !important; height:26px !important; }
    .print-brand-name{ letter-spacing:0.3px; display:inline-block !important; }

    .ballot-head{
      display:flex !important; visibility:visible !important;
      border-bottom:2px solid #123a63; padding-bottom:10px; margin-bottom:16px;
      flex-wrap:wrap; gap:4px 20px; align-items:baseline;
    }
    .ballot-title{ color:#123a63 !important; }
    .field{ color:#16283c !important; }
    .field b{ color:#5b7086 !important; }

    .result-question{ border:1px solid #c7d4e3; background:#f7f5ee !important; }
    .rq-label{ color:#5b7086 !important; }
    .rq-text{ color:#16283c !important; }

    .delivery-section{ break-inside:avoid; }
    .ts-head{ color:#123a63 !important; }
    .ts-meta{ color:#5b7086 !important; }

    #resultsContent{ break-inside:auto; }
    .cat-name{ color:#123a63 !important; break-after:avoid; }
    .cat-row{ break-inside:avoid; }
    .cat-row .tag{ color:#5b7086 !important; }

    .ann-legend{ border:1px solid #c7d4e3 !important; background:#f7f5ee !important; }
    .ann-legend-item{ color:#16283c !important; }

    .transcript-section{ break-before:page; }
    .transcript-body{ color:#16283c !important; }
    .ts-section-text{ orphans:3; widows:3; }

    /* Reveal every judge annotation inline as bracketed text so no
       feedback is lost when comments can no longer be tapped/clicked. */
    .ann-comment{
      text-decoration:none !important; cursor:default;
      background:transparent !important; padding:0 !important;
    }
    .ann-comment.ann-red{ color:#8a281f !important; }
    .ann-comment.ann-blue{ color:#1a3f6e !important; }
    .ann-comment.ann-green{ color:#1f5a29 !important; }
    .ann-comment.ann-yellow{ color:#7a5f0d !important; }
    .ann-comment::after{
      content:" [" attr(data-comment) "] ";
      font-style:italic; font-size:0.85em; color:#5b7086 !important;
      font-family:var(--font-mono);
    }
  }

  @media(max-width:600px){
    .ballot-head{grid-template-columns:1fr;}
    .category{grid-template-columns:48px 1fr;}
    .badge-wrap{width:48px;height:48px;}
    .badge-wrap svg{width:48px;height:48px;}
    .badge-wrap .score{font-size:16px;}
    .add-signal-form{grid-template-columns:1fr 1fr;}
    .overlay-card{padding:28px 30px;}
    .overlay-card .ov-time{font-size:52px;}
  }
  /* ================= STREAK / CALENDAR / GOALS ================= */
  .streak-fab{
    position:fixed;top:16px;right:16px;z-index:700;
    display:flex;align-items:center;gap:6px;
    padding:8px 14px 8px 10px;border-radius:24px;border:none;cursor:pointer;
    background:rgba(0,0,0,0.28);color:#ffffff;
    transition:opacity .15s, transform .15s, background .15s;
  }
  .streak-fab:hover{opacity:0.85;}
  .streak-fab svg{color:inherit;flex-shrink:0;}
  .streak-fab-count{font-family:var(--font-display);font-size:18px;font-weight:800;line-height:1;}
  /* Turns the streak icon orange only while the user is on the Streak
     Calendar page (.active, toggled in showView()) AND currently has an
     active streak (.has-streak, toggled in renderStreakView() /
     refreshStreakFab()). Both classes must be present together. */
  .streak-fab.active.has-streak{color:#ff8a2b;}

  /* ---- streak summary card (top of Streak Calendar view) ---- */
  .streak-summary-card{
    display:flex;align-items:center;gap:22px;flex-wrap:wrap;
    border:1px solid var(--rule);border-radius:12px;padding:22px 26px;margin-bottom:22px;
    background:var(--brass);color:#fff;box-shadow:0 2px 8px rgba(0,0,0,0.06);
  }
  .ssc-flame{width:44px;height:44px;flex-shrink:0;color:#ffd27a;}
  .ssc-flame svg{width:100%;height:100%;}
  .ssc-stats{display:flex;gap:28px;}
  .ssc-stat{display:flex;flex-direction:column;align-items:center;}
  .ssc-stat .ssc-val{font-family:var(--font-display);font-size:30px;font-weight:800;line-height:1;color:#fff;}
  .ssc-stat .ssc-cap{font-family:var(--font-mono);font-size:10.5px;font-weight:600;text-transform:uppercase;letter-spacing:0.5px;opacity:0.85;margin-top:3px;}
  .ssc-note{font-family:var(--font-mono);font-size:11.5px;opacity:0.85;flex:1;min-width:220px;}

  /* ---- calendar grid ---- */
  .streak-calendar{
    border:1px solid var(--rule);border-radius:12px;padding:22px 24px 18px;margin-bottom:22px;
    background:rgba(255,255,255,0.65);box-shadow:0 2px 8px rgba(0,0,0,0.06);
  }
  .scal-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px;}
  .scal-head h3{font-family:var(--font-display);font-size:18px;font-weight:700;margin:0;color:#000;}
  .scal-nav{
    width:30px;height:30px;border-radius:50%;border:1px solid var(--rule);background:#fff;color:#000;
    display:flex;align-items:center;justify-content:center;cursor:pointer;transition:border-color .15s;
  }
  .scal-nav:hover{border-color:var(--brass);color:var(--brass);}
  .scal-dow{display:grid;grid-template-columns:repeat(7,1fr);margin-bottom:4px;}
  .scal-dow span{
    text-align:center;font-family:var(--font-mono);font-size:10.5px;font-weight:700;text-transform:uppercase;
    color:#000;opacity:0.55;padding-bottom:6px;
  }
  .scal-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:4px;}
  .scal-cell{
    position:relative;aspect-ratio:1/1;border-radius:8px;border:1px solid var(--rule);
    display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;
    cursor:pointer;background:#fff;transition:border-color .15s, background .15s;
  }
  .scal-cell:hover{border-color:var(--brass);}
  .scal-cell.empty{visibility:hidden;cursor:default;}
  .scal-cell.today{border-color:var(--crimson);border-width:2px;}
  .scal-daynum{font-family:var(--font-mono);font-size:10.5px;font-weight:600;color:#000;opacity:0.7;}
  .scal-flame{width:24px;height:24px;display:flex;align-items:center;justify-content:center;}
  .scal-flame svg{width:100%;height:100%;}
  .scal-flame.lit{color:#ff8a2b;}
  .scal-flame.unlit{color:#c7cbd1;}
  .scal-event-label{
    position:absolute;bottom:2px;left:2px;right:2px;font-family:var(--font-mono);font-size:8px;font-weight:700;
    line-height:1.2;text-align:center;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
    background:var(--brass);color:#fff;border-radius:4px;padding:1.5px 3px;cursor:pointer;
  }
  .scal-goal-ring{
    position:absolute;top:3px;right:3px;width:11px;height:11px;border-radius:50%;
    border:2.5px solid #ef4444;background:none;
  }
  .scal-event-tooltip{
    position:absolute;z-index:400;max-width:220px;padding:7px 11px;border-radius:8px;
    background:#0a1c30;color:#fff;font-family:var(--font-mono);font-size:11.5px;line-height:1.4;
    box-shadow:0 6px 18px rgba(0,0,0,0.25);pointer-events:none;
  }
  .scal-event-tooltip::after{
    content:'';position:absolute;top:100%;left:50%;transform:translateX(-50%);
    border:6px solid transparent;border-top-color:#0a1c30;
  }
  .scal-legend{
    display:flex;flex-wrap:wrap;gap:14px 20px;margin-top:16px;padding-top:14px;border-top:1px dashed var(--rule);
    font-family:var(--font-mono);font-size:11px;color:#000;opacity:0.75;
  }
  .scal-legend span{display:flex;align-items:center;gap:6px;}
  .scal-legend .scal-event-dot{background:var(--brass);}
  .scal-legend .scal-goal-ring{border-color:#ef4444;}

  /* ---- tournaments / events list ---- */
  .streak-events{
    border:1px solid var(--rule);border-radius:12px;padding:22px 24px;margin-bottom:22px;
    background:rgba(255,255,255,0.6);box-shadow:0 2px 8px rgba(0,0,0,0.06);
  }
  .streak-events h3{font-family:var(--font-display);font-size:18px;font-weight:700;margin:0 0 16px;color:#000;}
  .se-add-row{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:16px;}
  .se-add-row input[type=date]{
    font-family:var(--font-body);font-size:13px;padding:9px 10px;border:1px solid var(--rule);border-radius:6px;color:#000;background:#fff;
  }
  .se-add-row input[type=text]{
    flex:1;min-width:180px;font-family:var(--font-body);font-size:13px;padding:9px 12px;border:1px solid var(--rule);border-radius:6px;color:#000;background:#fff;
  }
  .se-add-row input:focus{outline:none;border-color:var(--brass);}
  .se-list{display:flex;flex-direction:column;gap:8px;}
  .se-item{
    display:flex;align-items:center;gap:12px;padding:10px 12px;border:1px solid var(--rule);border-radius:8px;background:#fff;
  }
  .se-item.past{opacity:0.6;}
  .se-item-date{font-family:var(--font-mono);font-size:11.5px;font-weight:700;color:var(--brass);flex-shrink:0;width:92px;}
  .se-item-title{flex:1;font-size:13.5px;font-weight:500;color:#000;}
  .se-item-del{
    background:none;border:none;color:#000;opacity:0.5;cursor:pointer;padding:4px;border-radius:4px;transition:opacity .12s, color .12s;
  }
  .se-item-del:hover{opacity:1;color:var(--crimson);}
  .se-past-toggle{
    margin-top:10px;font-family:var(--font-mono);font-size:11.5px;font-weight:600;color:var(--brass);cursor:pointer;text-decoration:underline;
  }

  /* ---- goals (shared: Streak Calendar view + My History tab) ---- */
  .streak-goals, .history-goals{
    border:1px solid var(--rule);border-radius:12px;padding:22px 24px;margin-bottom:22px;
    background:rgba(255,255,255,0.6);box-shadow:0 2px 8px rgba(0,0,0,0.06);
  }
  .hg-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:16px;}
  .hg-head h3{font-family:var(--font-display);font-size:18px;font-weight:700;margin:0;color:#000;}
  .goals-empty{
    font-family:var(--font-mono);font-size:12px;color:#000;opacity:0.6;text-align:center;padding:18px 10px;
  }
  .goals-list{display:flex;flex-direction:column;gap:10px;}
  .goal-card{
    display:flex;align-items:center;gap:10px;padding:12px 14px;border:1px solid var(--rule);border-radius:9px;background:#fff;
  }
  .goal-card.done{border-color:#22c55e;background:rgba(34,197,94,0.06);}
  .goal-card-main{flex:1;min-width:0;}
  .goal-card-label{font-size:13.5px;font-weight:600;color:#000;margin-bottom:6px;}
  .goal-card.done .goal-card-label{color:#16a34a;}
  .goal-card-bar-wrap{background:var(--rule);border-radius:5px;height:7px;overflow:hidden;}
  .goal-card-bar{height:100%;background:var(--brass);border-radius:5px;transition:width .5s ease;}
  .goal-card.done .goal-card-bar{background:#22c55e;}
  .goal-card-progress{
    font-family:var(--font-mono);font-size:10.5px;font-weight:600;color:#000;opacity:0.6;margin-top:5px;
  }
  .goal-card-del{
    flex-shrink:0;background:none;border:none;color:#000;opacity:0.4;cursor:pointer;padding:6px;border-radius:5px;transition:opacity .12s, color .12s;
  }
  .goal-card-del:hover{opacity:1;color:var(--crimson);}

  /* ---- suggested goals (My History) ---- */
  .suggested-goals{margin-top:20px;padding-top:18px;border-top:1px dashed var(--rule);}
  .suggested-goals h4{
    font-family:var(--font-mono);font-size:11.5px;font-weight:700;text-transform:uppercase;letter-spacing:0.6px;
    margin:0 0 12px;color:#000;opacity:0.7;
  }
  .suggested-goals-list{display:flex;flex-direction:column;gap:10px;}
  .suggested-goal-card{
    display:flex;align-items:center;gap:14px;padding:12px 14px;border:1px dashed var(--brass);border-radius:9px;
    background:rgba(61,110,163,0.05);
  }
  .sg-text{flex:1;min-width:0;}
  .sg-label{font-size:13.5px;font-weight:600;color:#000;}
  .sg-why{font-size:12px;color:#000;opacity:0.65;margin-top:3px;line-height:1.4;}
  .sg-add{flex-shrink:0;font-size:12px;padding:8px 14px;}

  /* ---- goal creation modal ---- */
  .goal-modal-backdrop{
    position:fixed;inset:0;background:rgba(0,0,0,0.45);z-index:780;
    opacity:0;pointer-events:none;transition:opacity .2s ease;
  }
  .goal-modal-backdrop:not(.hidden){opacity:1;pointer-events:auto;}
  .goal-modal{
    position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);z-index:790;
    width:380px;max-width:90vw;max-height:86vh;overflow-y:auto;
    background:var(--parchment);border-radius:10px;box-shadow:0 12px 40px rgba(0,0,0,0.35);
  }
  .goal-modal.hidden, .goal-modal-backdrop.hidden{display:none;}
  .goal-modal-head{
    display:flex;align-items:center;justify-content:space-between;padding:16px 18px;
    background:var(--charcoal);border-radius:10px 10px 0 0;
  }
  .goal-modal-head span{font-family:var(--font-display);font-size:16px;color:var(--on-accent);}
  .goal-modal-body{padding:18px 20px 20px;display:flex;flex-direction:column;gap:14px;}
  .gm-field{display:flex;flex-direction:column;gap:6px;}
  .gm-field label{
    font-family:var(--font-mono);font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:0.5px;color:#000;opacity:0.7;
  }
  .gm-field select, .gm-field input{
    font-family:var(--font-body);font-size:13.5px;padding:10px 12px;border:1px solid var(--rule);border-radius:6px;
    background:#fff;color:#000;
  }
  .gm-field select:focus, .gm-field input:focus{outline:none;border-color:var(--brass);}

  @media (max-width: 640px){
    .streak-fab-count{display:none;}
    .streak-fab{padding:10px;border-radius:50%;}
    .scal-daynum{font-size:9px;}
    .scal-flame{width:19px;height:19px;}
    .streak-summary-card{padding:18px 20px;}
  }