:root{
    --bg:#0d0f15; --panel:#161923; --panel2:#1f2330; --text:#eceef6; --muted:#98a0b5;
    --accent:#ffb347; --accent2:#6c8cff; --line:#272c3d; --ok:#4cd97b; --warn:#ff6b6b;
    --page-bg:#26293a; --mark:rgba(255,179,71,.45);
    --radius:16px; --shadow:0 10px 40px rgba(0,0,0,.5);
  }
  body.light{
    --bg:#eef0f6; --panel:#ffffff; --panel2:#f1f3f9; --text:#181b26; --muted:#5b6274;
    --accent:#e08900; --accent2:#3b5bdb; --line:#dfe3ee; --ok:#199d4c; --warn:#d43f3f;
    --page-bg:#d7dae6; --shadow:0 10px 30px rgba(30,40,80,.15);
  }
  *{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 ---------- */
  #dropZone{flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:14px;
    margin:22px; border:2px dashed var(--line); border-radius:var(--radius); cursor:pointer; text-align:center;
    padding:20px; transition:border-color .2s, background .2s}
  #dropZone:hover, #dropZone.drag{border-color:var(--accent); background:rgba(255,179,71,.04)}
  #dropZone .big{font-size:52px; filter:drop-shadow(0 6px 18px rgba(255,179,71,.35))}
  #dropZone h2{font-size:20px}
  #dropZone p{color:var(--muted); font-size:14px; max-width:420px; line-height:1.65}

  /* ---------- 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:rgba(108,140,255,.4)}
  .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:rgba(108,140,255,.12)}
  .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{display:none; position:absolute; left:50%; bottom:16px; transform:translateX(-50%); z-index:30;
    background:var(--panel); border:1px solid var(--line); border-radius:24px; padding:12px 14px 10px;
    flex-direction:column; gap:8px; width:max-content;
    max-width:calc(100% - 20px); box-shadow:var(--shadow); backdrop-filter:blur(8px)}
  #readProg{position:absolute; bottom:0; left:26px; right:26px; height:4px; background:var(--panel2); border-radius:4px 4px 0 0; overflow:hidden}
  #readProgFill{display:block; height:100%; width:0%; background:linear-gradient(90deg, var(--accent), var(--accent2)); transition:width .3s}
  #pbMain{display:flex; align-items:center; gap:8px; justify-content:center; flex-wrap:nowrap}
  #playbar button{background:var(--panel2); color:var(--text); border:1px solid var(--line); border-radius:11px;
    padding:9px 13px; font-size:15px; cursor:pointer; white-space:nowrap}
  #playbar button:hover{border-color:var(--accent)}
  #playBtn{background:var(--accent) !important; color:#14161f !important; font-weight:800; border:none !important}
  #micBar{width:54px; height:54px; min-width:54px; border-radius:50% !important; font-size:23px;
    background:linear-gradient(145deg, var(--accent), #ff9a1f) !important; color:#14161f !important;
    border:none !important; margin-top:-26px; box-shadow:0 6px 18px rgba(255,179,71,.5)}
  #micBar.listening{background:var(--warn) !important; color:#fff !important; animation:pulse 1s infinite}
  .ctl{display:flex; align-items:center; gap:5px; font-size:12px; color:var(--muted)}
  #playbar select{background:var(--panel2); color:var(--text); border:1px solid var(--line); border-radius:9px;
    padding:8px 6px; font-size:12.5px; max-width:150px}
  #pbExtra{display:flex; align-items:center; gap:10px; justify-content:center; flex-wrap:wrap}
  #moreBtn{display:none}
  #progressText{font-size:11.5px; color:var(--muted); text-align:center}

  /* ---------- 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:10px 13px; border-radius:15px; font-size:14px; line-height:1.55; white-space:pre-wrap; word-wrap:break-word}
  .msg.bot{background:var(--panel2); border-bottom-left-radius:4px; align-self:flex-start}
  .msg.user{background:var(--accent2); color:#fff; border-bottom-right-radius:4px; align-self:flex-end}
  .msg.sys{align-self:center; color:var(--muted); font-size:12px; background:none; text-align:center}
  #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}

  /* 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:
    radial-gradient(1100px 600px at 85% -5%, rgba(108,140,255,.14), transparent),
    radial-gradient(800px 500px at 0% 110%, rgba(154,108,255,.10), transparent), 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:#fff;
    display:flex; align-items:center; justify-content:center;
    background:linear-gradient(135deg, var(--accent), var(--accent2)); box-shadow:0 8px 28px rgba(108,140,255,.35)}
  #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:0 0 0 3px rgba(108,140,255,.18)}
  #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}}
  @keyframes borderFlow{to{background-position:0 0, 300% 50%}}
  @keyframes gradShift{to{background-position:150% 50%}}
  #loginBtn{width:100%; color:#fff; border:none; border-radius:10px;
    background:linear-gradient(90deg, var(--accent), var(--accent2), #ff8bd3, var(--accent));
    background-size:300% 100%; background-position:0% 50%;
    padding:11px; font-weight:700; font-size:15px; cursor:pointer; margin-bottom:4px;
    transition:box-shadow .3s, transform .15s;}
  #loginBtn:hover{animation:gradShift 1.6s linear infinite alternate;
    box-shadow:0 8px 28px rgba(108,140,255,.5), 0 2px 10px rgba(154,108,255,.4); transform:translateY(-1.5px)}
  #loginBtn:active{transform:translateY(0)}
  #loginBtn:disabled{opacity:.6; cursor:default; animation:none}
  #googleBtn{width:100%; color:var(--text); border-radius:10px; border:1px solid transparent;
    background:linear-gradient(var(--panel), var(--panel)) padding-box,
               linear-gradient(90deg, var(--line), var(--line)) border-box;
    padding:10px; font-size:14.5px; font-weight:600; cursor:pointer; display:flex; align-items:center; justify-content:center;
    gap:10px; margin-bottom:4px; transition:box-shadow .3s, transform .15s}
  #googleBtn:hover{
    background:linear-gradient(var(--panel), var(--panel)) padding-box,
               linear-gradient(90deg, var(--accent), #ff8bd3, var(--accent2), var(--accent)) border-box;
    background-size:auto, 300% 100%;
    animation:borderFlow 2.2s linear infinite;
    box-shadow:0 6px 24px rgba(108,140,255,.28); transform:translateY(-1.5px)}
  #googleBtn:active{transform:translateY(0)}
  #googleBtn svg{width:18px; height:18px; flex:none}
  #appleBtn{width:100%; color:var(--text); border-radius:10px; border:1px solid transparent; margin-top:6px;
    background:linear-gradient(var(--panel), var(--panel)) padding-box,
               linear-gradient(90deg, var(--line), var(--line)) border-box;
    padding:10px; font-size:14.5px; font-weight:600; cursor:pointer; display:flex; align-items:center; justify-content:center;
    gap:10px; margin-bottom:4px; transition:box-shadow .3s, transform .15s}
  #appleBtn:hover{
    background:linear-gradient(var(--panel), var(--panel)) padding-box,
               linear-gradient(90deg, var(--accent), #ff8bd3, var(--accent2), var(--accent)) border-box;
    background-size:auto, 300% 100%;
    animation:borderFlow 2.2s linear infinite;
    box-shadow:0 6px 24px rgba(108,140,255,.28); transform:translateY(-1.5px)}
  #appleBtn:active{transform:translateY(0)}
  #appleBtn svg{width:16px; height:16px; flex:none}
  #login .logo2{transition:box-shadow .35s, transform .35s}
  #login .card:hover .logo2{box-shadow:0 10px 40px rgba(108,140,255,.55), 0 0 60px rgba(154,108,255,.25); transform:translateY(-2px)}
  #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 transparent;
    background:linear-gradient(var(--panel), var(--panel)) padding-box,
               linear-gradient(90deg, var(--accent), var(--accent2)) border-box;
    padding:12px; font-size:14px; font-weight:600; cursor:pointer; transition:box-shadow .3s, transform .15s}
  #otpBtn:hover{background:linear-gradient(var(--panel), var(--panel)) padding-box,
               linear-gradient(90deg, var(--accent), #ff8bd3, var(--accent2), var(--accent)) border-box;
    background-size:auto, 300% 100%; animation:borderFlow 2.2s linear infinite;
    box-shadow:0 6px 22px rgba(108,140,255,.28); transform:translateY(-1.5px)}

  /* ---------- 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:linear-gradient(90deg, var(--accent), var(--accent2)); 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:20px; padding:20px; width:min(460px, calc(100vw - 32px)); max-height:calc(100vh - 32px); 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}
  .planCard{border:1px solid var(--line); border-radius:14px; padding:12px 14px; margin-bottom:8px; cursor:pointer; transition:border-color .15s; display:flex; align-items:center; gap:12px}
  .planCard:hover{border-color:var(--accent)}
  .planCard .ic{font-size:22px}
  .planCard b{font-size:14px; display:block}
  .planCard small{color:var(--muted); font-size:11.5px; line-height:1.5; display:block}
  .planCard .price{margin-left:auto; font-weight:800; color:var(--accent); white-space:nowrap}
  #plansClose{width:100%; background:var(--panel2); border:1px solid var(--line); color:var(--muted); border-radius:12px; padding:11px; cursor:pointer; margin-top:6px}
  .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}
    #playbar{bottom:10px; padding:10px 10px 8px; gap:7px; border-radius:20px; max-width:calc(100% - 10px); width:calc(100% - 10px)}
    #pbMain{gap:6px}
    #playbar button{padding:8px 10px; font-size:14px}
    #playbar select{max-width:96px; font-size:12px}
    #moreBtn{display:block}
    #pbExtra{display:none}
    #playbar.expanded #pbExtra{display:flex}
  }
  /* ---------- 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,#6c8cff); box-shadow:0 0 0 2px rgba(108,140,255,.18)}
  .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}
  #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:rgba(108,140,255,.5); transition:color .15s}
  #scanBtn:hover{color:var(--accent,#6c8cff)}
  #camModal{position:fixed; inset:0; z-index:400; display:none; flex-direction:column; background:#000}
  #camStage{flex:1; min-height:0; position:relative; display:flex; align-items:center; justify-content:center}
  #camVideo{width:100%; height:100%; object-fit:contain; background:#000}
  #camOverlay{position:absolute; inset:0; width:100%; height:100%; pointer-events:none}
  #camAuto{width:46px; height:46px; font-size:16px; opacity:.45}
  #camAuto.on{opacity:1; box-shadow:0 0 0 2px var(--accent,#6c8cff)}
  #revCanvas{max-width:100%; max-height:100%; cursor:crosshair; touch-action:none}
  #revBar{display:flex; align-items:center; justify-content:center; gap:12px; padding:12px; background:#0c0e18; flex-wrap:wrap}
  #revBar button{border:none; cursor:pointer; color:#fff; background:#2a3050; border-radius:10px; padding:10px 14px; font-size:14.5px}
  #revCancel{background:#5a2733!important}
  #revKeep{background:#2e7d4f!important; font-weight:700; padding:10px 22px!important}
  #revFilters{display:flex; gap:6px; background:#181c2f; border-radius:10px; padding:4px}
  #revFilters button{background:transparent; padding:7px 12px; font-size:13px; border-radius:8px; color:#cfd4e6}
  #revFilters button.on{background:linear-gradient(90deg, var(--accent,#6c8cff), var(--accent2,#9a6cff)); color:#fff}
  #camHint{position:absolute; top:14px; left:0; right:0; text-align:center; color:#fff; font-size:13px;
    text-shadow:0 1px 4px #000; opacity:.85; pointer-events:none}
  #camBar{display:flex; align-items:center; justify-content:center; gap:18px; padding:14px; background:#0c0e18}
  #camBar button{border:none; border-radius:50%; cursor:pointer; color:#fff; background:#2a3050}
  #camCancel,#camUndo{width:46px; height:46px; font-size:17px}
  #camShot{width:70px; height:70px; font-size:26px; background:linear-gradient(135deg,#6c8cff,#9a6cff); box-shadow:0 4px 18px rgba(108,140,255,.45)}
  #camDone{width:auto; height:46px; border-radius:23px; padding:0 20px; font-size:15px; font-weight:700; background:#2e7d4f}
  #camBar button:disabled{opacity:.35; cursor:default}
  #camCount{color:#cfd4e6; font-size:13.5px; min-width:64px; text-align:center}
  #camFlash{position:fixed; inset:0; z-index:401; background:#fff; opacity:0; pointer-events:none; transition:opacity .18s}
  #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}