/* Design tokens (:root + body.light) live in theme.css — the single token
     source per the design handoff. The old blue-palette block that used to sit
     here was fully superseded and has been removed. */
  *{box-sizing:border-box; margin:0; padding:0; -webkit-tap-highlight-color:transparent}
  html,body{height:100%}
  body{background:var(--bg); color:var(--text); font-family:'Segoe UI', system-ui, -apple-system, sans-serif;
    height:100vh; height:100dvh; display:flex; flex-direction:column; overflow:hidden}
  button{font-family:inherit}

  /* ---------- Header ---------- */
  header{display:flex; align-items:center; gap:10px; padding:9px 14px; background:var(--panel);
    border-bottom:1px solid var(--line); flex-shrink:0; z-index:40}
  header .logo{width:26px; height:26px; border-radius:7px; font-size:15px; font-weight:800; color:#fff;
    display:inline-flex; align-items:center; justify-content:center;
    background:linear-gradient(135deg, var(--accent), var(--accent2))}
  header h1{font-size:16px; font-weight:650; letter-spacing:.2px}
  header h1 span{color:var(--accent)}
  #userBox{margin-left:auto; display:flex; align-items:center; gap:7px; font-size:12px; color:var(--muted)}
  #userEmail{max-width:160px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
  .icon-btn{background:var(--panel2); border:1px solid var(--line); color:var(--text); border-radius:10px;
    padding:7px 11px; cursor:pointer; font-size:13px; transition:border-color .15s}
  .icon-btn:hover{border-color:var(--accent)}
  #compToggle.on{border-color:var(--ok); color:var(--ok)}

  /* ---------- Layout ---------- */
  main{flex:1; display:flex; min-height:0; position:relative}
  #viewerWrap{flex:1.7; min-width:0; min-height:0; position:relative; display:flex; flex-direction:column}

  /* ---------- Drop zone ---------- */
  /* Workspace home (mockup 2c): heading + dashed zone + recents live inside
     #dropZone so the whole surface hides when a document opens. */
  #dropZone{flex:1; display:flex; flex-direction:column; min-height:0; overflow-y:auto;
    padding:44px 64px 28px; cursor:pointer; text-align:left}
  #dropZone .wsHead h2{font-size:clamp(28px, 3.4vw, 42px); letter-spacing:-.015em; margin-top:12px}
  #dropZone .dzZone{flex:1; min-height:260px; display:flex; flex-direction:column; align-items:center;
    justify-content:center; text-align:center; gap:0; margin-top:32px;
    border:1px dashed var(--line-strong, #3a3833); padding:28px;
    transition:border-color .2s, background .2s}
  #dropZone:hover .dzZone, #dropZone.drag .dzZone{border-color:var(--accent); background:var(--panel)}
  #dropZone .big{font-size:0; line-height:0; opacity:.9}
  #dropZone .dzTitle{font-family:var(--font-display); font-size:24px; font-weight:600; margin:20px 0 0}
  #dropZone .dzFormats{color:var(--muted); font-size:14px; margin:8px 0 0}
  #dropZone .dzActs{display:flex; gap:12px; margin-top:24px; align-items:stretch}
  #dropZone .dzScan{display:inline-flex; align-items:center; gap:9px; background:none;
    border:1px solid var(--line-strong, #3a3833); color:var(--text); cursor:pointer;
    padding:12px 22px; font-size:14px; font-weight:600; font-family:inherit}
  #dropZone .dzScan:hover{border-color:var(--accent)}
  #dropZone p{color:var(--muted); font-size:14px; line-height:1.65}
  /* recents: shared-border grid */
  .wsRecent{flex:none; margin-top:28px; text-align:left}
  .wsRecentGrid{display:grid; grid-template-columns:repeat(3,1fr); gap:1px;
    background:var(--line); border:1px solid var(--line); margin-top:12px}
  .wsRecentGrid > button{background:var(--bg); border:none; cursor:pointer; color:var(--text);
    font-family:inherit; text-align:left; padding:16px 18px; display:flex; align-items:center; gap:13px;
    transition:background .12s}
  .wsRecentGrid > button:hover{background:var(--panel)}
  .wsRecentGrid b{display:block; font-size:13.5px; font-weight:600; overflow:hidden;
    text-overflow:ellipsis; white-space:nowrap}
  .wsRecentGrid small{display:block; color:var(--muted); font-size:12px; margin-top:2px}
  @media (max-width:900px){
    #dropZone{padding:24px 18px 18px}
    .wsRecentGrid{grid-template-columns:1fr}
  }

  /* ---------- PDF viewer ---------- */
  #viewer{flex:1; min-height:0; overflow-y:auto; overflow-x:hidden; display:none; padding:18px 0 190px;
    background:var(--page-bg); scroll-behavior:smooth; -webkit-overflow-scrolling:touch; overscroll-behavior:contain}
  .pageWrap{position:relative; margin:0 auto 16px; background:#fff; border-radius:6px;
    box-shadow:0 4px 24px rgba(0,0,0,.35); overflow:hidden}
  .pageWrap canvas{position:absolute; inset:0; display:block}
  .pageNum{position:absolute; top:8px; right:10px; z-index:5; font-size:10.5px; color:#666; background:rgba(255,255,255,.75);
    border-radius:6px; padding:2px 7px; pointer-events:none}
  .pageLoading{position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
    color:#aab; font-size:13px; background:repeating-linear-gradient(45deg,#f5f6fa,#f5f6fa 12px,#eef0f6 12px,#eef0f6 24px)}

  /* text layer (selection like Adobe) */
  .textLayer{position:absolute; inset:0; overflow:hidden; line-height:1; z-index:2; text-align:initial;
    forced-color-adjust:none; transform-origin:0 0}
  .textLayer span{color:transparent; position:absolute; white-space:pre; cursor:text; transform-origin:0 0}
  .textLayer ::selection{background:var(--mark)}
  .textLayer br{user-select:none}

  /* text-document pages (DOCX, TXT, images after OCR) */
  .textWrap{position:relative; max-width:820px; margin:0 auto 16px; background:#fff; color:#1d2129;
    border-radius:6px; box-shadow:0 4px 24px rgba(0,0,0,.35); padding:42px 46px; font-size:17px; line-height:1.85}
  .textWrap p{margin-bottom:1.1em}
  .sentSpan{cursor:pointer; border-radius:3px}
  .sentSpan:hover{background:var(--mark)}
  .sentSpan.active{background:var(--mark)}
  /* Word documents rendered with their real formatting */
  .richDoc h1,.richDoc h2,.richDoc h3,.richDoc h4,.richDoc h5,.richDoc h6{margin:1.1em 0 .45em; line-height:1.25; color:#111}
  .richDoc h1{font-size:1.7em} .richDoc h2{font-size:1.45em} .richDoc h3{font-size:1.22em} .richDoc h4{font-size:1.08em}
  .richDoc ul,.richDoc ol{margin:0 0 1.1em; padding-left:1.6em}
  .richDoc li{margin-bottom:.35em}
  .richDoc img{max-width:100%; height:auto; border-radius:6px; margin:.6em 0; display:block}
  .richDoc table{border-collapse:collapse; margin:1em 0; max-width:100%}
  .richDoc td,.richDoc th{border:1px solid #d5d9e0; padding:6px 10px; vertical-align:top}
  .richDoc th{background:#f2f4f8}
  .richDoc blockquote{border-left:3px solid #c9d2ea; margin:1em 0; padding:.2em 0 .2em 1em; color:#444}
  .richDoc a{color:#3c5ccf}
  /* photo/image documents shown as the real picture */
  .imgPage{display:block; width:100%; height:100%; user-select:none; -webkit-user-drag:none}
  @media (max-width:900px){ .textWrap{padding:22px 18px; font-size:16px} }

  /* karaoke highlight */
  #marker{position:absolute; z-index:1; background:var(--mark); border-radius:4px; pointer-events:none;
    transition:top .18s ease, left .18s ease, width .18s ease, height .18s ease; mix-blend-mode:multiply; display:none}

  /* selection toolbar */
  #selBar{position:fixed; z-index:80; display:none; gap:6px; background:var(--panel); border:1px solid var(--line);
    border-radius:14px; padding:6px; box-shadow:var(--shadow)}
  #selBar button{border:none; background:var(--panel2); color:var(--text); border-radius:9px; padding:8px 12px;
    font-size:13px; cursor:pointer; font-weight:600}
  #selBar button:hover{background:var(--accent); color:#14161f}

  /* ---------- Floating play bar ---------- */
  /* Playbar — ONE ruled instrument strip (mockup 2a): transport | progress
     thread | voice | mic, divided by 1px rules, registration marks at the
     corners. The strip floats centered above the page. */
  #playbar{display:none; position:absolute; left:50%; bottom:18px; transform:translateX(-50%); z-index:30;
    background:var(--bg); border:1px solid var(--line-strong, #3a3833); border-radius:0; padding:0;
    flex-direction:row; align-items:stretch; gap:0; width:max-content;
    max-width:calc(100% - 20px)}
  #playbar::before, #playbar::after{color:var(--accent); font-size:13px; line-height:1;
    position:absolute; pointer-events:none}
  #playbar::before{content:"+"; left:-9px; top:-9px}
  #playbar::after{content:"+"; right:-9px; bottom:-9px}
  #readProg{position:absolute; bottom:-1px; left:0; right:0; height:3px; background:transparent;
    border-radius:0; overflow:hidden; pointer-events:none}
  #readProgFill{display:block; height:100%; width:0%; background:var(--accent); transition:width .3s}
  #pbMain{display:flex; align-items:stretch; gap:0; flex-wrap:nowrap}
  #playbar button{background:none; color:var(--muted); border:none; border-right:1px solid var(--line);
    border-radius:0; padding:0 15px; min-height:48px; font-size:15px; cursor:pointer; white-space:nowrap;
    display:inline-flex; align-items:center; justify-content:center}
  #playbar button:hover{color:var(--text); background:var(--panel)}
  #playBtn{background:var(--accent) !important; color:var(--on-accent, #111110) !important;
    font-weight:700; border:none !important; min-width:64px}
  #micBar{width:52px; min-width:52px; border-radius:0 !important; font-size:0;
    background:none !important; color:var(--accent) !important;
    border:none !important; border-left:1px solid var(--line) !important; margin:0}
  #micBar svg{width:19px; height:19px}
  #micBar.listening{background:var(--warn) !important; color:#fff !important; animation:pulse 1s infinite}
  .ctl{display:flex; align-items:center; gap:6px; font-size:12px; color:var(--muted); padding:0 10px}
  #playbar select{background:transparent; color:var(--text); border:1px solid var(--line); border-radius:0;
    padding:7px 6px; font-size:12.5px; max-width:150px}
  #pbExtra{display:flex; align-items:center; gap:0; flex-wrap:nowrap; border-left:1px solid var(--line)}
  #pbExtra .ctl{border-right:1px solid var(--line); align-self:stretch}
  #moreBtn{display:none}
  /* live-sentence readout (design package §05) — the calm center of the instrument */
  #pbSent{flex:1 1 auto; min-width:120px; max-width:44vw; align-self:stretch;
    display:flex; align-items:center; padding:0 18px; border-left:1px solid var(--line);
    font-size:13px; color:var(--muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
  #pbSent:empty{display:none}
  #pbSent .pbWord{color:var(--accent); font-weight:600}
  #progressText{font-size:11.5px; color:var(--muted); text-align:center; padding:0 14px;
    display:inline-flex; align-items:center; font-variant-numeric:tabular-nums}

  /* ---------- Companion panel ---------- */
  #assistCol{flex:1; display:flex; flex-direction:column; min-width:300px; max-width:440px; background:var(--panel);
    border-left:1px solid var(--line)}
  #assistHead{padding:12px 16px; border-bottom:1px solid var(--line); display:flex; align-items:center; gap:10px}
  #assistHead .face{font-size:24px}
  #assistHead b{font-size:14px}
  #assistHead small{display:block; color:var(--muted); font-size:11px}
  #sheetClose{display:none; margin-left:auto; background:none; border:none; color:var(--muted); font-size:22px; cursor:pointer}
  #chat{flex:1; overflow-y:auto; padding:14px; display:flex; flex-direction:column; gap:10px; -webkit-overflow-scrolling:touch}
  .msg{max-width:88%; padding:12px 14px; border-radius:0; font-size:13.5px; line-height:1.6; white-space:pre-wrap; word-wrap:break-word}
  .msg.bot{background:var(--panel2); align-self:flex-start}
  .msg.user{background:none; border:1px solid var(--accent); color:var(--text); align-self:flex-end; margin-left:36px}
  .msg.sys{align-self:center; color:var(--muted); font-size:12px; background:none; text-align:center}
  /* cited source chips (design package §09) — the passages an answer was drawn from */
  .msg.cites{background:none; padding:2px 0 4px; max-width:100%; align-self:flex-start; display:flex; flex-direction:column; gap:6px}
  .msg.cites .citesLbl{font-size:11px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--muted)}
  .msg.cites .citesRow{display:flex; gap:8px; flex-wrap:wrap}
  .msg.cites .citeChip{display:inline-flex; align-items:center; gap:6px; border:1px solid var(--line-strong);
    background:none; color:var(--text); font-family:inherit; font-size:12px; padding:5px 9px; cursor:pointer;
    border-radius:0; transition:border-color .12s, color .12s}
  .msg.cites .citeChip:hover{border-color:var(--accent)}
  .msg.cites .citeChip .dot{width:5px; height:5px; background:var(--accent); flex:none; display:inline-block}
  #chatBar{display:flex; gap:8px; padding:12px; border-top:1px solid var(--line)}
  #chatInput{flex:1; background:var(--panel2); border:1px solid var(--line); color:var(--text); border-radius:12px;
    padding:11px 13px; font-size:14px; outline:none; min-width:0}
  #chatInput:focus{border-color:var(--accent2)}
  #micBtn{background:var(--panel2); color:var(--text); border:1px solid var(--line); border-radius:12px; padding:0 14px; cursor:pointer; font-size:17px}
  #micBtn.listening{background:var(--warn); color:#fff; border-color:var(--warn); animation:pulse 1s infinite}
  @keyframes pulse{50%{opacity:.55}}
  #sendBtn{background:var(--accent2); color:#fff; border:none; border-radius:12px; padding:0 17px; cursor:pointer; font-size:16px}
  /* §09 send-lock — the composer is clearly inert while the companion thinks */
  #chatBar button:disabled, #chatInput:disabled{opacity:.5; cursor:progress}
  #chatInput:disabled{cursor:progress}

  /* chat FAB (mobile) */
  #chatFab{display:none; position:absolute; right:14px; bottom:96px; z-index:35; width:54px; height:54px;
    border-radius:50%; border:none; background:var(--accent2); color:#fff; font-size:24px; cursor:pointer;
    box-shadow:0 8px 24px rgba(60,90,220,.5)}
  #chatFab .dot{position:absolute; top:2px; right:2px; width:13px; height:13px; border-radius:50%;
    background:var(--warn); border:2px solid var(--panel); display:none}
  #chatFab{touch-action:none}

  /* ---------- Login (classic, production-grade) ---------- */
  #login{position:fixed; inset:0; background:var(--bg);
    display:flex; z-index:100; padding:16px; overflow-y:auto}
  #login .card{background:transparent; width:min(400px, 94vw); text-align:center; margin:auto; padding:14px 0}
  #login .logo2{width:54px; height:54px; margin:0 auto 12px; border-radius:15px; font-size:26px; font-weight:800; color:var(--on-accent,#111110);
    display:flex; align-items:center; justify-content:center; background:var(--accent)}
  #login h2{font-size:23px; font-weight:700; letter-spacing:-.3px; margin-bottom:5px}
  #login h2 span{color:var(--accent)}
  #login p{color:var(--muted); font-size:13.5px; line-height:1.55; margin-bottom:16px}
  #login .fieldLabel{display:block; text-align:left; font-size:13px; color:var(--muted); margin:0 0 5px 2px}
  #login input{width:100%; background:var(--panel); border:1px solid var(--line); color:var(--text); border-radius:10px;
    padding:11px 13px; font-size:14.5px; margin-bottom:11px; outline:none; transition:border-color .15s, box-shadow .15s}
  #login input:focus{border-color:var(--accent); box-shadow:none}
  #login .card{animation:cardIn .55s cubic-bezier(.2,.8,.25,1)}
  @keyframes cardIn{from{opacity:0; transform:translateY(14px) scale(.985)}to{opacity:1; transform:none}}
  /* primary login button: flat orange with ink-on-orange text (color/hover owned
     by theme.css — see design token file). No gradient, no lift, no shadow. */
  #loginBtn{width:100%; color:var(--on-accent,#111110); border:none; border-radius:10px;
    padding:11px; font-weight:700; font-size:15px; cursor:pointer; margin-bottom:4px}
  #loginBtn:disabled{opacity:.6; cursor:default; animation:none}
  /* OAuth buttons: flat panel with a 1px rule; hover = border→accent (owned by
     theme.css). No gradient border, no glow, no lift. */
  #googleBtn{width:100%; color:var(--text); border-radius:10px; border:1px solid var(--line);
    background:var(--panel); padding:10px; font-size:14.5px; font-weight:600; cursor:pointer;
    display:flex; align-items:center; justify-content:center; gap:10px; margin-bottom:4px}
  #googleBtn svg{width:18px; height:18px; flex:none}
  #appleBtn{width:100%; color:var(--text); border-radius:10px; border:1px solid var(--line); margin-top:6px;
    background:var(--panel); padding:10px; font-size:14.5px; font-weight:600; cursor:pointer;
    display:flex; align-items:center; justify-content:center; gap:10px; margin-bottom:4px}
  #appleBtn svg{width:16px; height:16px; flex:none}
  #login .divider{display:flex; align-items:center; gap:12px; color:var(--muted); font-size:12.5px; margin:12px 0}
  #login .divider::before, #login .divider::after{content:''; flex:1; height:1px; background:var(--line)}
  #guestBtn{width:100%; background:none; border:none; color:var(--muted); padding:10px 0 0; font-size:13.5px; cursor:pointer}
  #guestBtn:hover{color:var(--accent); text-decoration:underline}
  #loginMsg{font-size:13px; color:var(--ok); min-height:18px; margin-bottom:10px}
  #login .foot{color:var(--muted); font-size:12px; margin-top:13px; line-height:1.5}
  #login .foot a{color:var(--muted); text-decoration:underline}
  #login .foot a:hover{color:var(--accent)}
  #otpBtn{width:100%; color:var(--accent); border-radius:10px; border:1px solid var(--line);
    background:var(--panel); padding:12px; font-size:14px; font-weight:600; cursor:pointer}

  /* ---------- Wallet ---------- */
  #wallet{margin-top:5px}
  #walletLabel{font-size:10.5px; color:var(--muted); margin-bottom:3px}
  #walletBar{height:5px; background:var(--panel2); border-radius:3px; overflow:hidden}
  #walletFill{display:block; height:100%; width:0%; background:var(--accent); border-radius:3px; transition:width .4s}

  /* ---------- Plans modal ---------- */
  #plans{position:fixed; inset:0; background:rgba(0,0,0,.6); display:none; align-items:center; justify-content:center; z-index:95; padding:16px}
  #plans .box{background:var(--panel); border:1px solid var(--line); border-radius:18px; padding:24px; width:min(460px, calc(100vw - 32px)); max-height:calc(100vh - 24px); overflow-y:auto; overflow-x:hidden; box-sizing:border-box; box-shadow:var(--shadow)}
  #plans h2{font-size:18px; margin-bottom:4px}
  #plans .sub{color:var(--muted); font-size:12.5px; margin-bottom:12px}
  /* ===== Plans & wallet — TWO embedded components under a tab ===== */
  #plans .box{position:relative}
  .pwX{position:absolute; top:18px; right:18px; width:34px; height:34px; background:none;
    border:1px solid var(--line); color:var(--muted); cursor:pointer; display:inline-flex;
    align-items:center; justify-content:center; z-index:2}
  .pwX:hover{border-color:var(--accent); color:var(--text)}
  /* segmented Wallet/Plans tabs */
  /* rounded pill segmented tabs (Design ref).
     NOTE: !important beats theme.css's global `button{border-radius:0 !important}`
     via higher specificity — same trick on every rounded button below. */
  .pwTabs{display:inline-flex; gap:4px; background:var(--panel2); border:1px solid var(--line);
    border-radius:12px !important; padding:4px; width:fit-content; margin:18px 0}
  #plans .pwTab{background:none; border:none; border-radius:9px !important; color:var(--muted);
    font-family:inherit; font-size:13.5px; font-weight:600; padding:9px 26px; cursor:pointer;
    transition:background .2s, color .2s}
  #plans .pwTab.on{background:var(--accent); color:var(--on-accent, #111110)}
  .pwPane[hidden]{display:none}
  /* round every plans button over the global square-button sweep */
  #plans .wtop, #plans #wCustomBuy, #plans .walletCustom,
  #plans .fromWallet, #plans .engBtn, #plansClose{border-radius:10px !important}
  #plans .walletCard, #plans .planCard{border-radius:14px !important}
  #plans .engBadge{border-radius:20px !important}
  #plans .ic, #plans .pwRow .ic{border-radius:10px !important}
  /* WHAT YOUR WALLET PAYS FOR — divided rows */
  .payList{margin-top:22px}
  .payListHead{padding:0 2px 6px; font-size:11.5px;
    font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--muted)}
  .payRow{display:flex; align-items:center; justify-content:space-between; gap:12px;
    padding:16px 2px; border-bottom:1px solid var(--line); font-size:14px}
  .payRow:last-child{border-bottom:none}
  .payRow em{color:var(--muted); font-style:normal; font-size:13px; font-variant-numeric:tabular-nums}
  /* PLANS — 3 engine cards, shared-border grid */
  .pwPlansKick{display:block; margin-bottom:14px}
  /* rounded engine cards with gaps + panel bg (Design ref) */
  .planGrid{display:grid; grid-template-columns:repeat(3, 1fr); gap:16px;
    background:none; border:none}
  .planCard{background:var(--panel2); border:1px solid var(--line); border-radius:14px; padding:20px; margin:0;
    position:relative; cursor:pointer; transition:border-color .2s;
    display:flex; flex-direction:column; align-items:stretch; gap:0}
  .planCard:hover{border-color:var(--line-strong)}
  .planCard.engFree{cursor:default}
  .planCard.cur{border-color:var(--accent)}
  /* icon + name/provider on one row (saves vertical space) */
  .engHd{display:flex; align-items:center; gap:12px; margin-bottom:14px}
  .planCard .ic{width:40px; height:40px; border:1px solid var(--line); border-radius:10px;
    background:var(--panel); display:inline-flex; align-items:center; justify-content:center;
    color:var(--accent); flex:none}
  .engNames{min-width:0}
  .engBadge{position:absolute; top:18px; right:18px; border:1px solid var(--accent); color:var(--accent);
    font-size:10px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; padding:4px 10px; border-radius:20px}
  .planCard b{font-family:var(--font-display, Georgia, serif); font-size:19px; font-weight:600; line-height:1.1}
  .planCard .engProv{display:block; color:var(--muted); font-size:11.5px; margin-top:2px}
  .planCard .engDesc{color:var(--muted); font-size:12.5px; line-height:1.5; margin:0 0 0; flex:1}
  .planCard .price{font-family:var(--font-display, Georgia, serif); font-size:26px; font-weight:600;
    font-variant-numeric:tabular-nums; margin-top:14px; text-align:left; color:var(--accent)}
  .planCard .price small{color:var(--muted); font-size:13px; font-family:var(--font-ui, Inter, sans-serif)}
  /* card action button (Free = current; paid = .fromWallet injected by JS) */
  .engBtn{margin-top:14px; text-align:center; padding:11px; font-size:13.5px; font-weight:600;
    border:1px solid var(--line-strong); border-radius:10px; color:var(--muted)}
  .engBtn.cur{cursor:default}
  /* contextual rows below the grid */
  .pwRow{display:flex; align-items:center; gap:12px; border:1px solid var(--line);
    border-radius:12px; padding:16px 18px; margin-top:14px; cursor:pointer; transition:border-color .2s}
  .pwRow:hover{border-color:var(--accent)}
  .pwRow .ic{width:36px; height:36px; border:1px solid var(--line); border-radius:10px;
    background:var(--panel); display:inline-flex; align-items:center; justify-content:center;
    color:var(--accent); flex:none}
  .pwRow b{font-family:var(--font-ui, Inter, sans-serif); font-size:14px}
  .pwRow small{display:block; color:var(--muted); font-size:12px; margin-top:2px}
  .pwRow .price{margin-left:auto; font-family:var(--font-display, Georgia, serif); font-size:18px;
    font-variant-numeric:tabular-nums}
  .pwFoot{color:var(--muted); font-size:12.5px; line-height:1.55; margin-top:14px}
  .pwFoot a{color:var(--accent)}
  #customCard[hidden]{display:none}
  /* each paid card's action button: orange "Switch" / ghost "Buy" */
  .fromWallet{margin-top:14px; background:var(--accent); border:none; color:var(--on-accent, #111110); border-radius:10px; padding:11px; font-size:13.5px; font-weight:600; cursor:pointer; font-family:inherit; transition:filter .2s, border-color .2s, color .2s}
  .fromWallet:hover{filter:brightness(1.07)}
  .fromWallet.insuff{background:none; border:1px solid var(--line-strong); color:var(--text)}
  .fromWallet.insuff:hover{filter:none; background:none; border-color:var(--accent); color:var(--accent)}
  /* plansClose is the top-right ✕ now (mockup) — NOT a full-width button */
  #plansClose{position:absolute; top:18px; right:18px; width:36px; height:36px; margin:0;
    background:none; border:1px solid var(--line); border-radius:10px; color:var(--muted);
    cursor:pointer; display:inline-flex; align-items:center; justify-content:center; z-index:3}
  #plansClose:hover{border-color:var(--accent); color:var(--text)}

  /* ===== MOBILE plans & wallet (Design ref) — the modal is 460px wide here ===== */
  @media (max-width:899px){
    /* header: title stacks, ₹ balance becomes its own full-width bordered panel.
       align-items:flex-end (desktop, balance under close) is dropped here. */
    .pwHead{flex-direction:column; align-items:stretch !important; gap:0}
    .pwBal{width:100%; display:flex; align-items:center; justify-content:space-between; gap:12px;
      border:1px solid var(--line); border-radius:12px; padding:14px 16px; margin-top:14px; text-align:left}
    .pwBal > span{flex:0 1 auto; text-align:left; white-space:nowrap}
    .pwBal > b{flex:none; font-size:26px !important; line-height:1}
    /* compact type in the modal on phones */
    #plans .kicker{font-size:11px}
    .payRow{font-size:13px}
    .payRow em{font-size:11px}
    /* tabs span full width, two equal halves */
    .pwTabs{display:grid; grid-template-columns:1fr 1fr; width:100%; margin:14px 0}
    #plans .pwTab{padding:10px 0; text-align:center}
    /* top-up chips: 2-column grid, custom + add span full width */
    .walletTopups{display:grid; grid-template-columns:1fr 1fr; gap:12px}
    .walletCustom, #wCustomBuy{grid-column:1 / -1}
    #wCustomBuy{padding:14px}
    /* plan cards stack; price + action share the bottom row */
    .planGrid{grid-template-columns:1fr; gap:14px}
    .planCard{display:grid; grid-template-columns:1fr auto;
      grid-template-areas:"hd hd" "desc desc" "price btn"; column-gap:14px; row-gap:0; align-items:center}
    .engHd{grid-area:hd; margin-bottom:12px}
    .planCard .engDesc{grid-area:desc; margin:0 0 14px}
    .planCard .price{grid-area:price; margin-top:0; align-self:center; text-align:left; white-space:nowrap}
    .planCard .price small{display:block; margin-top:2px}   /* sub-text stacks under the number */
    .planCard .fromWallet, .planCard .engBtn{grid-area:btn; margin-top:0; align-self:center;
      white-space:nowrap; padding:11px 18px}
    .engBadge{top:16px; right:16px}
  }
  /* button label: full on desktop, short on mobile */
  .fromWallet .bS, .engBtn .bS{display:none}
  @media (max-width:899px){
    .fromWallet .bL, .engBtn .bL{display:none}
    .fromWallet .bS, .engBtn .bS{display:inline}
  }
  /* desktop plans dialog: wide enough for 3 engine cards side by side (mockup) */
  @media (min-width:900px){
    #plans .box{width:min(1120px, calc(100vw - 48px)); padding:32px 40px}
  }
  .planNote{font-size:11px; color:var(--muted); margin-top:10px; line-height:1.5}

  /* ---------- Mobile ---------- */
  @media (max-width:900px){
    header{padding:8px 10px}
    #userEmail{display:none}
    #assistCol{position:fixed; left:0; right:0; bottom:0; top:auto; height:74vh; height:74dvh; max-width:none;
      min-width:0; z-index:90; border-left:none; border-top:1px solid var(--line); border-radius:20px 20px 0 0;
      transform:translateY(105%); transition:transform .28s ease; box-shadow:0 -10px 40px rgba(0,0,0,.45)}
    #assistCol.open{transform:translateY(0)}
    #sheetClose{display:block}
    #chatFab{display:block}
    #viewer{padding-bottom:150px}
    /* mobile: the instrument stacks — transport row on top, extras expand below */
    #playbar{bottom:10px; flex-direction:column; max-width:calc(100% - 10px); width:calc(100% - 10px)}
    #playbar::before, #playbar::after{content:none}
    #pbMain{justify-content:stretch}
    #pbMain > button, #pbMain > .ctl{flex:1}
    #playbar button{padding:0 8px; min-height:48px; font-size:14px}
    #playbar select{max-width:96px; font-size:12px}
    #moreBtn{display:inline-flex}
    #pbSent{display:none}
    #pbExtra{display:none; border-left:none; border-top:1px solid var(--line)}
    #playbar.expanded #pbExtra{display:flex; flex-wrap:wrap}
  }
  /* ---------- Tools sidebar ---------- */
  #tools{position:fixed; inset:0; z-index:350; display:none; background:rgba(0,0,0,.5)}
  #toolsPane{position:absolute; left:0; top:0; bottom:0; width:min(420px, 100vw); background:var(--bg,#0f1220);
    border-right:1px solid var(--line,#262b45); display:flex; flex-direction:column; overflow-y:auto;
    animation:toolsIn .28s cubic-bezier(.2,.8,.25,1); padding:18px}
  @keyframes toolsIn{from{transform:translateX(-40px); opacity:0}to{transform:none; opacity:1}}
  #toolsHead{display:flex; align-items:flex-start; justify-content:space-between; margin-bottom:16px}
  #toolsHead b{font-size:18px}
  #toolsHead small{display:block; color:var(--muted,#9aa1b5); font-size:12px; margin-top:3px}
  #toolsClose{background:none; border:none; color:var(--muted,#9aa1b5); font-size:18px; cursor:pointer; padding:4px 8px}
  #toolsClose:hover{color:var(--text,#e8eaf2)}
  #toolGrid{display:grid; grid-template-columns:1fr 1fr; gap:10px}
  .toolCard{background:var(--panel,#181c2f); border:1px solid var(--line,#262b45); border-radius:12px;
    padding:13px 12px; cursor:pointer; text-align:left; color:var(--text,#e8eaf2); transition:border-color .15s, transform .12s}
  .toolCard:hover{border-color:var(--accent,#6c8cff); transform:translateY(-1px)}
  .toolCard .tIc{font-size:20px}
  .toolCard b{display:block; font-size:13px; margin-top:6px}
  .toolCard small{display:block; color:var(--muted,#9aa1b5); font-size:10.5px; margin-top:2px; line-height:1.45}
  #toolOpts{margin-top:14px; background:var(--panel,#181c2f); border:1px solid var(--line,#262b45); border-radius:12px; padding:14px}
  #toolOpts label{display:block; font-size:12.5px; color:var(--muted,#9aa1b5); margin-bottom:6px}
  #toolOpts input,#toolOpts select{width:100%; background:var(--panel2,#141828); border:1px solid var(--line,#262b45);
    color:var(--text,#e8eaf2); border-radius:8px; padding:9px 10px; font-size:13.5px; margin-bottom:10px}
  #toolOpts .go{width:100%; background:linear-gradient(90deg, var(--accent,#6c8cff), var(--accent2,#9a6cff)); color:#fff;
    border:none; border-radius:9px; padding:11px; font-size:14px; font-weight:700; cursor:pointer}
  #toolStatus{margin-top:14px; font-size:13px; color:var(--muted,#9aa1b5)}
  #toolBar{height:5px; background:var(--panel2,#141828); border-radius:3px; overflow:hidden; margin-top:8px}
  #toolBarFill{display:block; height:100%; width:0%; background:linear-gradient(90deg, var(--accent,#6c8cff), var(--accent2,#9a6cff)); transition:width .3s}
  /* ---------- Camera scan ---------- */
  .orScan{margin-top:12px; color:var(--muted,#9aa1b5); font-size:13px}
  /* ---------- Engine tiers + Token Saver ---------- */
  #tierBox{margin:12px 0 4px; padding:11px; background:var(--panel2,#141828); border-radius:12px}
  .tierHead{font-size:13px; font-weight:700; margin-bottom:7px}
  .tierHead small{color:var(--muted,#9aa1b5); font-weight:400}
  .tierRow{display:flex; gap:8px}
  .tierBtn{flex:1; background:var(--panel,#181c2f); border:1.5px solid var(--line,#262b45); border-radius:10px;
    padding:9px 6px; cursor:pointer; color:var(--text,#e8eaf2); text-align:center; transition:border-color .15s}
  .tierBtn small{display:block; font-size:10.5px; color:var(--muted,#9aa1b5); margin-top:2px}
  .tierBtn.on{border-color:var(--accent); box-shadow:none}
  .tierBtn[data-tier="ultra"].on{border-color:#ff9d5c; box-shadow:0 0 0 2px rgba(255,157,92,.2)}
  .saverRow{display:flex; align-items:center; gap:8px; margin-top:12px; font-size:12.5px; color:var(--muted,#9aa1b5); cursor:pointer}
  .saverRow b{color:var(--text,#e8eaf2)}
  .saverRow input{accent-color:var(--accent,#6c8cff); width:16px; height:16px}
  .customTok{font-size:12px; font-weight:600; color:var(--accent); margin:10px 0 0; min-height:15px}
  #customRow .lxsel{flex:1; min-width:0}
  #customRow .lxsel-btn{padding:7px 10px; font-size:13px; border-radius:8px}
  /* ₹ wallet card (plans modal) */
  /* wallet header: kicker + serif title left, ₹ hero right (mockup 4a) */
  .pwHead{display:flex; align-items:flex-end; gap:20px; flex-wrap:wrap; margin-bottom:0}
  .pwHeadL{flex:1; min-width:220px}
  .pwBal{text-align:right}
  .pwBal > span{display:block; font-size:11.5px; font-weight:700; letter-spacing:.08em;
    text-transform:uppercase; color:var(--muted)}
  .pwBal > b{display:block; font-family:var(--font-display, Georgia, serif); font-size:38px;
    font-weight:600; color:var(--accent); font-variant-numeric:tabular-nums; line-height:1.15}
  .walletCard{background:var(--panel2); border:1px solid var(--line); border-radius:14px; padding:22px; margin-bottom:16px}
  /* top-up strip: kicker label + ONE row of amounts + custom + accent CTA */
  .walletTop{margin-bottom:14px}
  .walletTop span{font-size:11.5px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--muted)}
  .walletTopups{display:flex; gap:12px; flex-wrap:wrap; align-items:stretch}
  .wtop{flex:1; min-width:64px; background:var(--panel); border:1px solid var(--line-strong, #3a3833); color:var(--text);
    border-radius:10px; padding:14px 6px; font-size:14.5px; font-weight:600; font-variant-numeric:tabular-nums;
    cursor:pointer; font-family:inherit; transition:border-color .2s, color .2s, background .2s}
  .wtop:hover, .wtop.on{border-color:var(--accent); color:var(--accent);
    background:color-mix(in srgb, var(--accent) 12%, transparent)}
  .walletCustom{flex:1.3; min-width:110px; display:flex; align-items:center; gap:6px;
    background:var(--panel); border:1px solid var(--line-strong, #3a3833); border-radius:10px; padding:0 0 0 14px}
  .walletCustom .rupee{color:var(--muted)}
  .walletCustom input{flex:1; min-width:0; background:none; border:none; color:var(--text);
    border-radius:0; padding:14px 12px 14px 0; font-size:14px; outline:none}
  #wCustomBuy{flex:none; background:var(--accent); color:var(--on-accent, #111110); border:none;
    border-radius:10px; padding:14px 24px; font-size:13.5px; font-weight:600; cursor:pointer; font-family:inherit;
    transition:filter .2s}
  #wCustomBuy:hover{filter:brightness(1.08)}
  .walletHint{display:block; color:var(--muted); font-size:12.5px; margin-top:16px}
  #wCustomAmt::-webkit-outer-spin-button, #wCustomAmt::-webkit-inner-spin-button{-webkit-appearance:none; margin:0}
  #wCustomAmt{-moz-appearance:textfield; appearance:textfield}
  #customRow{display:flex; align-items:center; gap:8px; margin-top:8px; flex-wrap:wrap}
  #customRow select,#customRow input{background:var(--panel,#181c2f); border:1px solid var(--line,#262b45);
    color:var(--text,#e8eaf2); border-radius:8px; padding:7px 8px; font-size:13px}
  #customRow select{flex:1; min-width:0}
  #customRow input#customAmt{flex:1; min-width:64px; width:auto}
  #customRow #customBuy{flex:none}
  #customRow .rupee{color:var(--muted,#9aa1b5)}
  /* hide the browser number-spinner on the custom amount field */
  #customAmt::-webkit-outer-spin-button,
  #customAmt::-webkit-inner-spin-button{-webkit-appearance:none; margin:0}
  #customAmt{-moz-appearance:textfield; appearance:textfield}
  #customBuy{background:linear-gradient(90deg, var(--accent,#6c8cff), var(--accent2,#9a6cff)); color:#fff;
    border:none; border-radius:8px; padding:7px 16px; font-size:13px; font-weight:700; cursor:pointer}
  #customBuy:hover{filter:brightness(1.1)}
  #scanBtn{background:none; border:none; padding:0; color:var(--muted,#9aa1b5); font-size:13px; cursor:pointer;
    text-decoration:underline; text-underline-offset:3px; text-decoration-color:var(--line-strong); transition:color .15s}
  #scanBtn:hover{color:var(--accent,#6c8cff)}
  /* ============================================================
     In-Reader "Scan a paper" — immersive Capture (Image 1) →
     Adobe-Scan-style Review & Edit workspace (Image 2). Rebuilt to the
     approved redesign. Flat, ruled, one orange action per screen.
     ============================================================ */
  #camModal{position:fixed; inset:0; z-index:400; display:none; background:var(--bg)}
  /* JS sets inline display:flex to open → rail + main sit side by side (row) */
  /* persistent rail */
  #scanRail{width:64px; flex:none; border-right:1px solid var(--line); background:var(--bg);
    display:flex; flex-direction:column; align-items:center; padding:14px 0; gap:8px}
  #scanRail .scanMark{width:28px; height:28px; background:var(--accent); display:inline-flex;
    align-items:center; justify-content:center; margin-bottom:8px}
  #scanRail .scanMark span{width:9px; height:9px; background:var(--bg)}
  #scanRail .scanRailIc{width:44px; height:44px; display:inline-flex; align-items:center; justify-content:center; color:var(--muted)}
  #scanRail .scanRailIc.on{color:var(--text); background:var(--panel2); border-left:2px solid var(--accent)}
  #scanRail .scanLock{margin-top:auto; color:var(--muted); display:inline-flex}
  #scanMain{flex:1; min-width:0; display:flex; flex-direction:column}
  #capStep, #revStep{flex:1; min-height:0; display:flex; flex-direction:column}
  #capStep[hidden], #revStep[hidden]{display:none}
  /* shared top bar */
  .scanTop{height:52px; flex:none; display:flex; align-items:center; gap:14px; padding:0 18px; border-bottom:1px solid var(--line)}
  .scanTop .scanX{width:34px; height:34px; flex:none; display:inline-flex; align-items:center; justify-content:center;
    background:none; border:1px solid var(--line-strong); color:var(--muted); cursor:pointer; border-radius:0}
  .scanTop .scanX:hover{border-color:var(--accent); color:var(--text)}
  .scanTitle{display:flex; align-items:baseline; gap:10px; min-width:0}
  .scanTitle b{font-family:var(--font-display); font-size:15px; font-weight:600; color:var(--text)}
  .scanTitle small{color:var(--muted); font-size:12.5px}
  .scanPriv{margin-left:auto; color:var(--muted); font-size:11.5px; display:inline-flex; align-items:center; gap:7px; white-space:nowrap}
  .scanPriv svg{color:var(--accent)}
  .scanAdd{margin-left:auto; display:inline-flex; align-items:center; gap:7px; background:none;
    border:1px solid var(--line-strong); color:var(--text); font-family:inherit; font-size:12.5px; font-weight:600;
    padding:7px 12px; cursor:pointer; border-radius:0}
  .scanAdd:hover{border-color:var(--accent)}

  /* ---- Capture stage ---- */
  #camStage{flex:1; min-height:0; position:relative; display:flex; align-items:center; justify-content:center; background:#161310; overflow:hidden}
  #camVideo{width:100%; height:100%; object-fit:cover; background:#161310}
  #camOverlay{position:absolute; inset:0; width:100%; height:100%; pointer-events:none}
  #capBanner{position:absolute; top:18px; left:50%; transform:translateX(-50%); text-align:center;
    color:var(--text); font-size:12.5px; background:rgba(17,17,16,.9); border:1px solid var(--line-strong);
    padding:8px 14px; pointer-events:none; display:inline-flex; align-items:center; gap:9px; white-space:nowrap}
  #capBanner span{width:7px; height:7px; background:var(--accent); flex:none}
  /* capture bottom bar */
  .scanBottom{flex:none; display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:16px; padding:16px 24px; background:var(--bg); border-top:1px solid var(--line)}
  .scanBottom .sbLeft{justify-self:start}
  .scanBottom .sbRight{justify-self:end}
  .scanBottom .sbMid{display:flex; align-items:center; gap:22px; justify-self:center}
  #camCount{color:var(--muted); font-size:13px; display:inline-flex; align-items:center; gap:8px; font-variant-numeric:tabular-nums}
  .scanRound{width:46px; height:46px; border-radius:50%!important; display:inline-flex; align-items:center; justify-content:center;
    background:none; border:1px solid var(--line-strong); color:var(--muted); cursor:pointer; transition:border-color .2s, color .2s}
  .scanRound:hover{border-color:var(--accent); color:var(--text)}
  .scanRound.on{color:var(--accent); border-color:var(--accent)}
  .scanRound:disabled{opacity:.4; cursor:default}
  #camShot{width:72px; height:72px; border-radius:50%!important; font-size:0; cursor:pointer;
    background:none; border:4px solid var(--line-strong); box-shadow:none;
    display:inline-flex; align-items:center; justify-content:center; position:relative}
  #camShot::after{content:""; width:52px; height:52px; border-radius:50%; background:var(--accent)}
  #camShot:hover{border-color:var(--accent)}
  #camDone{display:inline-flex; align-items:center; gap:8px; height:46px; padding:0 20px; font-size:14px; font-weight:600;
    font-family:inherit; background:none; border:1px solid var(--accent); color:var(--accent); cursor:pointer; border-radius:0}
  #camDone:not(:disabled):hover{background:var(--accent); color:var(--on-accent)}
  #camDone:disabled{opacity:.4; cursor:default; border-color:var(--line-strong); color:var(--muted)}

  /* ---- Review & Edit workspace ---- */
  #revBody{flex:1; min-height:0; display:flex}
  #revThumbs{width:150px; flex:none; border-right:1px solid var(--line); padding:16px 12px; overflow-y:auto; display:flex; flex-direction:column; gap:10px}
  #revThumbs .thumbsKick{font-size:11px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--muted)}
  #thumbList{display:flex; flex-direction:column; gap:10px}
  #revThumbs .thumb{position:relative; width:100%; aspect-ratio:3/4; background:var(--panel); border:1px solid var(--line-strong);
    padding:0; cursor:pointer; overflow:hidden; border-radius:0; display:block}
  #revThumbs .thumb.on{border-color:var(--accent); box-shadow:inset 0 0 0 1px var(--accent)}
  #revThumbs .thumb img{width:100%; height:100%; object-fit:cover; display:block}
  #revThumbs .thumb .thNum{position:absolute; top:0; left:0; z-index:1; min-width:18px; height:18px; padding:0 4px;
    background:var(--accent); color:var(--on-accent); font-size:11px; font-weight:700; display:inline-flex; align-items:center; justify-content:center; font-variant-numeric:tabular-nums}
  #thumbAdd{width:100%; aspect-ratio:3/4; background:none; border:1px dashed var(--line-strong); color:var(--muted);
    cursor:pointer; border-radius:0; display:inline-flex; align-items:center; justify-content:center}
  #thumbAdd:hover{border-color:var(--accent); color:var(--accent)}
  #revStage{flex:1; min-width:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:12px; padding:26px; background:#161310; position:relative}
  #revPreviewWrap{position:relative; display:inline-flex; max-width:100%; max-height:100%}
  #revPreviewWrap .reg{position:absolute; width:14px; height:14px; z-index:2}
  #revPreviewWrap .regTL{left:-7px; top:-7px; border-left:2px solid var(--accent); border-top:2px solid var(--accent)}
  #revPreviewWrap .regTR{right:-7px; top:-7px; border-right:2px solid var(--accent); border-top:2px solid var(--accent)}
  #revPreviewWrap .regBL{left:-7px; bottom:-7px; border-left:2px solid var(--accent); border-bottom:2px solid var(--accent)}
  #revPreviewWrap .regBR{right:-7px; bottom:-7px; border-right:2px solid var(--accent); border-bottom:2px solid var(--accent)}
  #revCanvas{max-width:100%; max-height:calc(100vh - 260px); display:block; background:#faf9f5; touch-action:none}
  #revCanvas.cropping{cursor:crosshair}
  #revEnhChip{position:absolute; right:10px; bottom:10px; z-index:2; background:var(--bg); border:1px solid var(--line-strong);
    color:var(--muted); font-size:11.5px; padding:5px 9px}
  #cropHint{display:inline-flex; align-items:center; gap:12px; color:var(--muted); font-size:12.5px}
  #cropHint button{background:var(--accent); color:var(--on-accent); border:none; font-family:inherit; font-weight:600; font-size:12.5px; padding:7px 14px; cursor:pointer; border-radius:0}
  /* right info panel */
  #revPanel{width:300px; flex:none; border-left:1px solid var(--line); padding:22px 20px; display:flex; flex-direction:column; gap:14px; overflow-y:auto}
  #revPanel h3{font-family:var(--font-display); font-size:19px; font-weight:600; color:var(--text)}
  #revPanel #revPanelDesc{color:var(--muted); font-size:13px; line-height:1.55}
  #revPanel .scanCard{border:1px solid var(--line); background:var(--panel); padding:13px 14px}
  #revPanel .scanCard .scKick{font-size:11px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--muted); margin-bottom:8px}
  #revPanel .scRow{display:flex; align-items:center; gap:10px; font-size:13px; color:var(--text); cursor:pointer}
  #revPanel .scRow input{position:absolute; opacity:0; pointer-events:none}
  #revPanel .scRow .scSwitch{margin-left:auto; flex:none; width:38px; height:22px; background:var(--line-strong); position:relative; transition:background .15s}
  #revPanel .scRow .scSwitch::after{content:""; position:absolute; top:3px; left:3px; width:16px; height:16px; background:var(--text); transition:transform .15s}
  #revPanel .scRow input:checked ~ .scSwitch{background:var(--accent)}
  #revPanel .scRow input:checked ~ .scSwitch::after{transform:translateX(16px); background:var(--on-accent)}
  #revPanel .scRow input:focus-visible ~ .scSwitch{outline:2px solid var(--accent); outline-offset:2px}
  #revPanel .scMuted{color:var(--muted); font-size:12px; display:flex; align-items:center; gap:8px}
  #revPanel .scMuted svg{color:var(--accent); flex:none}
  #revPanel .revActions{margin-top:auto; display:flex; flex-direction:column; gap:10px}
  #revPanel .scanPrimary{display:inline-flex; align-items:center; justify-content:center; gap:9px; width:100%; padding:13px;
    background:var(--accent); color:var(--on-accent); border:none; font-family:inherit; font-size:14.5px; font-weight:700; cursor:pointer; border-radius:0}
  #revPanel .scanPrimary:hover{filter:brightness(1.06)}
  #revPanel .revActRow{display:flex; gap:10px}
  #revPanel .scanGhost{flex:1; padding:11px; background:none; border:1px solid var(--line-strong); color:var(--text);
    font-family:inherit; font-size:13px; font-weight:600; cursor:pointer; border-radius:0}
  #revPanel .scanGhost:hover{border-color:var(--accent)}
  #revPanel .scanGhost:disabled{opacity:.5; cursor:progress}
  /* bottom editing toolbar — shared-border, one segment for the look */
  #revToolbar{flex:none; display:flex; align-items:stretch; border-top:1px solid var(--line); background:var(--bg)}
  #revToolbar .tbBtn{display:inline-flex; flex-direction:column; align-items:center; justify-content:center; gap:4px;
    min-width:88px; padding:12px 16px; background:none; border:none; border-right:1px solid var(--line);
    color:var(--muted); font-family:inherit; font-size:11.5px; cursor:pointer; transition:color .15s, background .15s}
  #revToolbar .tbBtn:hover{color:var(--text); background:var(--panel)}
  #revToolbar #tbDelete{margin-left:auto; border-right:none; border-left:1px solid var(--line)}
  #revToolbar #tbDelete:hover{color:var(--warn)}
  #revToolbar .seg{display:inline-flex; align-self:center; margin:0 16px; border:1px solid var(--line-strong)}
  #revToolbar .seg button{background:none; border:none; border-left:1px solid var(--line); color:var(--muted);
    font-family:inherit; font-size:12.5px; padding:9px 15px; cursor:pointer}
  #revToolbar .seg button:first-child{border-left:none}
  #revToolbar .seg button.on{background:var(--accent); color:var(--on-accent); font-weight:600}
  #camFlash{position:fixed; inset:0; z-index:401; background:#fff; opacity:0; pointer-events:none; transition:opacity .18s}
  /* ≤900px — stack the workspace: thumbnails become a horizontal strip, panel drops below */
  @media (max-width:900px){
    #scanRail{display:none}
    .scanPriv{display:none}
    #revBody{flex-direction:column; overflow-y:auto}
    #revThumbs{width:auto; flex-direction:row; border-right:none; border-bottom:1px solid var(--line); overflow-x:auto; padding:12px}
    #revThumbs .thumbsKick{display:none}
    #thumbList{flex-direction:row}
    #revThumbs .thumb, #thumbAdd{width:64px; aspect-ratio:3/4; flex:none}
    #revStage{min-height:44vh; padding:16px}
    #revCanvas{max-height:44vh}
    #revPanel{width:auto; border-left:none; border-top:1px solid var(--line)}
    #revToolbar{flex-wrap:wrap}
    #revToolbar .seg{margin:6px 12px}
  }
  #pdfBtn,#addPageBtn{background:transparent; border:1px solid var(--accent,#6c8cff); color:var(--accent,#6c8cff); border-radius:8px; padding:5px 10px; font-size:12.5px; cursor:pointer; white-space:nowrap}
  /* while recognising: playbar is visibly locked */
  #playbar.busy button, #playbar.busy select{opacity:.4; pointer-events:none}
  #playbar.busy{cursor:progress}
  /* ---------- Cookie / consent banner ---------- */
  #consent{position:fixed; left:0; right:0; bottom:0; z-index:300; display:none;
    background:var(--panel, #181c2f); border-top:1px solid #2a3050; padding:12px 16px;
    font-size:13.5px; line-height:1.5; box-shadow:0 -6px 24px rgba(0,0,0,.35)}
  #consent .inner{max-width:900px; margin:0 auto; display:flex; align-items:center; gap:14px; flex-wrap:wrap}
  #consent p{flex:1; min-width:220px; margin:0}
  #consent a{color:var(--accent, #6c8cff)}
  #consentOk{background:linear-gradient(90deg, var(--accent,#6c8cff), var(--accent2,#9a6cff)); color:#fff;
    border:none; border-radius:8px; padding:9px 22px; font-size:14px; font-weight:600; cursor:pointer}
  .legalLink{font-size:12px; color:var(--muted,#9aa1b5)!important; text-decoration:none}
  .legalLink:hover{text-decoration:underline}

/* ---- page-thumbnail picker (Split / Remove document preview) ---- */
.thumbPick{display:grid; grid-template-columns:repeat(auto-fill,minmax(74px,1fr)); gap:8px; margin:6px 0 12px}
.thumbPick .th{position:relative; border:2px solid var(--line); border-radius:8px; overflow:hidden; cursor:pointer; background:var(--panel2); padding:0}
.thumbPick .th canvas{display:block; width:100%; height:auto}
.thumbPick .th small{position:absolute; left:4px; bottom:4px; background:rgba(0,0,0,.55); color:#fff; border-radius:5px; padding:1px 6px; font-size:11px}
.thumbPick .th.sel{border-color:var(--accent)}
.thumbPick .th.sel::after{content:"\2713"; position:absolute; top:4px; right:4px; width:20px; height:20px; background:var(--accent); color:#fff; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:12px; font-weight:700}
.thumbHint{color:var(--muted); font-size:12.5px; margin:0 0 8px}