/* ============================================================
   Lexora AI — shared shell for standalone pages
   (settings.html · tools.html · scan.html · privacy.html)
   Loads AFTER theme.css. Claude palette: black/white/orange, no gradients.
   ============================================================ */
*{box-sizing:border-box}
html,body{margin:0; padding:0}
body{background:var(--bg); color:var(--text); min-height:100vh;
  font-family:-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  font-size:15px; line-height:1.55; -webkit-font-smoothing:antialiased}
a{color:var(--accent)}
main{min-height:100vh}
.wrap{max-width:920px; margin:0 auto; padding:30px 22px 70px}
h1.pageTitle{font-family:Georgia,'Times New Roman',serif; font-weight:600; font-size:28px;
  letter-spacing:-.01em; margin:6px 0 4px}
h1.pageTitle span{color:var(--accent)}
.pageSub{color:var(--muted); font-size:14px; margin:0 0 26px}
h2.secTitle{font-family:Georgia,serif; font-weight:600; font-size:19px; margin:0 0 14px}

/* mobile top bar (sidebar is desktop-only) */
.pageTop{display:none; position:sticky; top:0; z-index:40; align-items:center; gap:12px;
  background:var(--panel); border-bottom:1px solid var(--line); padding:12px 16px}
.pageTop a.back{color:var(--muted); text-decoration:none; font-size:14px}
.pageTop a.back:hover{color:var(--accent)}
.pageTop b{font-family:Georgia,serif; font-weight:600; font-size:16px}
.pageTop b span{color:var(--accent)}
.pageTop .spacer{flex:1}
@media (max-width:900px){ .pageTop{display:flex} .wrap{padding:20px 14px 60px} }

/* cards & controls */
.card{background:var(--panel); border:1px solid var(--line); border-radius:12px;
  padding:20px; margin-bottom:16px}
.card h3{margin:0 0 6px; font-size:15.5px; font-weight:600}
.card p.hint{color:var(--muted); font-size:13px; margin:4px 0 12px}
.btn{display:inline-block; background:var(--accent); color:#fff; border:none; border-radius:9px;
  padding:10px 18px; font-size:14px; font-weight:600; cursor:pointer; text-decoration:none}
.btn:hover{filter:brightness(1.08)}
.btn.ghost{background:var(--panel); color:var(--text); border:1px solid var(--line)}
.btn.ghost:hover{border-color:var(--accent); filter:none}
.btn.danger{background:none; color:var(--warn); border:1px solid var(--line)}
.btn.danger:hover{border-color:var(--warn); filter:none}
.btn:disabled{opacity:.5; cursor:default}
input[type=text],input[type=email],select,textarea{
  width:100%; background:var(--panel2); border:1px solid var(--line); color:var(--text);
  border-radius:9px; padding:11px 12px; font-size:14px; outline:none; font-family:inherit}
input:focus,select:focus{border-color:var(--accent)}
label.f{display:block; font-size:12.5px; color:var(--muted); margin:0 0 6px 2px}
.row{display:flex; gap:12px; align-items:center; flex-wrap:wrap}
.pill{display:inline-block; background:var(--panel2); border:1px solid var(--line);
  border-radius:999px; padding:3px 11px; font-size:12px; color:var(--muted)}
.pill.on{color:var(--accent); border-color:var(--accent)}

/* data tables */
table.list{width:100%; border-collapse:collapse; font-size:13.5px}
table.list th{color:var(--muted); font-weight:500; text-align:left; padding:8px 10px;
  border-bottom:1px solid var(--line); font-size:12px; text-transform:uppercase; letter-spacing:.04em}
table.list td{padding:9px 10px; border-bottom:1px solid var(--line)}
table.list tr:last-child td{border-bottom:none}
.empty{color:var(--muted); font-size:13.5px; padding:14px 4px}

/* progress bar (wallet) */
.meter{height:8px; background:var(--panel2); border-radius:99px; overflow:hidden; margin:10px 0 6px}
.meter i{display:block; height:100%; background:var(--accent); border-radius:99px}

/* ---------- settings: left section nav ---------- */
.setGrid{display:grid; grid-template-columns:190px 1fr; gap:26px; align-items:start}
.secNav{position:sticky; top:24px; display:flex; flex-direction:column; gap:2px}
.secNav a{display:block; color:var(--muted); text-decoration:none; font-size:14px;
  padding:8px 12px; border-radius:8px}
.secNav a:hover{background:var(--panel2); color:var(--text)}
.secNav a.active{background:var(--panel2); color:var(--text); font-weight:600}
@media (max-width:900px){
  .setGrid{display:block}
  .secNav{position:static; flex-direction:row; overflow-x:auto; gap:6px; padding-bottom:10px; margin-bottom:14px}
  .secNav a{white-space:nowrap; border:1px solid var(--line); border-radius:999px; font-size:13px}
  .secNav a.active{border-color:var(--accent)}
}
section.setSec{scroll-margin-top:80px; margin-bottom:26px}

/* ---------- tools page ---------- */
#tools{display:block}
#toolsHead{display:flex; align-items:baseline; gap:12px; margin-bottom:6px}
.toolGrid{display:grid; grid-template-columns:repeat(auto-fill,minmax(190px,1fr)); gap:12px; margin:18px 0}
.toolCard{background:var(--panel); border:1px solid var(--line); border-radius:12px;
  padding:16px 14px; cursor:pointer; text-align:left; color:var(--text); font-family:inherit;
  display:flex; flex-direction:column; gap:5px; transition:border-color .12s}
.toolCard:hover{border-color:var(--accent)}
.toolCard .tIc{font-size:22px}
.toolCard b{font-size:14.5px; font-weight:600}
.toolCard small{color:var(--muted); font-size:12.5px; line-height:1.45}
#toolOpts{display:none; background:var(--panel); border:1px solid var(--line); border-radius:12px;
  padding:18px; margin:14px 0}
#toolOpts label{display:block; font-size:13px; color:var(--muted); margin:0 0 8px}
#toolOpts input,#toolOpts select{margin-bottom:10px}
#toolOpts .go{background:var(--accent); color:#fff; border:none; border-radius:9px;
  padding:10px 20px; font-size:14px; font-weight:600; cursor:pointer}
#toolStatus{display:none; background:var(--panel); border:1px solid var(--line); border-radius:12px;
  padding:18px; margin:14px 0}
#toolStatusTxt{font-size:14px; margin-bottom:10px}
#toolBar{height:8px; background:var(--panel2); border-radius:99px; overflow:hidden}
#toolBarFill{display:block; height:100%; width:0; background:var(--accent); transition:width .25s}
/* page-thumbnail picker (Split / Remove preview) */
.thumbPick{display:grid; grid-template-columns:repeat(auto-fill,minmax(86px,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:'✓'; 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}

/* ---------- scan page ---------- */
#camWrap{position:relative; background:#000; border-radius:14px; overflow:hidden;
  aspect-ratio:3/4; max-height:64vh; margin:0 auto 14px; max-width:560px}
#camVideo{position:absolute; inset:0; width:100%; height:100%; object-fit:contain}
#camOverlay{position:absolute; inset:0; width:100%; height:100%; pointer-events:none}
#camMsg{position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  color:#fff; background:rgba(0,0,0,.55); font-size:14.5px; text-align:center; padding:20px}
#camCtrls{display:flex; align-items:center; justify-content:center; gap:22px; margin:4px 0 18px}
#shotBtn{width:64px; height:64px; border-radius:50%; background:var(--accent); border:4px solid var(--panel2);
  cursor:pointer; font-size:24px; color:#fff}
#shotBtn:hover{filter:brightness(1.08)}
#shots{display:flex; gap:10px; overflow-x:auto; padding:4px 0 10px; min-height:10px}
#shots .shot{position:relative; flex:none; width:74px; border:1px solid var(--line); border-radius:8px; overflow:hidden}
#shots .shot img{display:block; width:100%}
#shots .shot button{position:absolute; top:2px; right:2px; background:rgba(0,0,0,.6); color:#fff;
  border:none; border-radius:50%; width:20px; height:20px; font-size:11px; cursor:pointer}
#shots .shot small{position:absolute; left:3px; bottom:3px; background:rgba(0,0,0,.55); color:#fff;
  border-radius:4px; padding:0 5px; font-size:10.5px}
.exportRow{display:flex; gap:10px; flex-wrap:wrap; margin-top:6px}

/* ---------- legal pages ---------- */
.legal h2{font-family:Georgia,serif; font-weight:600; font-size:20px; margin:28px 0 10px}
.legal h3{font-size:15.5px; margin:20px 0 8px}
.legal p, .legal li{color:var(--text); font-size:14.5px; line-height:1.7}
.legal .muted{color:var(--muted)}

/* ============================================================
   Tools page v2 — iLovePDF-style flow, Lexora palette
   ============================================================ */
.hero{text-align:center; padding:18px 0 8px}
.hero .pageTitle{font-size:32px; margin-bottom:10px}
.hero .pageSub{max-width:640px; margin:0 auto 20px}
.hero.small{text-align:center; padding:0 0 6px}
.hero.small .pageTitle{font-size:26px}
.chipRow{display:flex; gap:8px; justify-content:center; flex-wrap:wrap; margin-bottom:8px}
.catChip{background:var(--panel); border:1px solid var(--line); color:var(--muted); border-radius:999px;
  padding:7px 16px; font-size:13px; cursor:pointer; font-family:inherit}
.catChip:hover{border-color:var(--accent); color:var(--text)}
.catChip.on{background:var(--accent); border-color:var(--accent); color:#fff; font-weight:600}
.catHead{font-family:Georgia,serif; font-weight:600; font-size:17px; margin:26px 0 12px; color:var(--muted)}
.toolGrid2{display:grid; grid-template-columns:repeat(auto-fill,minmax(215px,1fr)); gap:12px}
.toolCard2{background:var(--panel); border:1px solid var(--line); border-radius:12px; padding:16px 15px;
  cursor:pointer; text-align:left; color:var(--text); font-family:inherit; text-decoration:none;
  display:flex; flex-direction:column; gap:6px; transition:border-color .12s, transform .12s}
.toolCard2:hover{border-color:var(--accent); transform:translateY(-2px)}
.toolCard2 .tIc2{width:38px; height:38px; border-radius:9px; background:var(--panel2); border:1px solid var(--line);
  display:flex; align-items:center; justify-content:center; font-size:19px}
.toolCard2 b{font-size:14.5px; font-weight:600}
.toolCard2 small{color:var(--muted); font-size:12.5px; line-height:1.5}
.toolCard2.soon{opacity:.55; cursor:default}
.toolCard2.soon:hover{border-color:var(--line); transform:none}
.soonPill{display:inline-block; background:var(--panel2); border:1px solid var(--line); color:var(--muted);
  border-radius:999px; padding:1px 8px; font-size:10.5px; vertical-align:2px; margin-left:4px}
.backLink{background:none; border:none; color:var(--muted); font-size:14px; cursor:pointer;
  font-family:inherit; padding:6px 0; margin-bottom:4px}
.backLink:hover{color:var(--accent)}

/* dropzone */
#tvDrop{text-align:center; padding:52px 16px 40px; border:2px dashed var(--line); border-radius:16px;
  background:var(--panel); margin-top:14px}
.bigPick{background:var(--accent); color:#fff; border:none; border-radius:12px; cursor:pointer;
  font-size:20px; font-weight:700; padding:22px 46px; font-family:inherit; box-shadow:var(--shadow)}
.bigPick:hover{filter:brightness(1.08)}
.dropHint{color:var(--muted); font-size:14px; margin-top:16px}
.dropPriv{color:var(--muted); font-size:12.5px; margin-top:10px}
#dropVeil{display:none; position:fixed; inset:0; z-index:90; background:rgba(0,0,0,.55);
  align-items:center; justify-content:center; color:#fff; font-size:22px; font-family:Georgia,serif;
  border:6px dashed var(--accent)}

/* workspace: previews left, options right */
#tvWork{display:grid; grid-template-columns:1fr 290px; gap:20px; align-items:start; margin-top:14px}
#tvMain{min-height:200px}
#tvSide{position:sticky; top:18px; background:var(--panel); border:1px solid var(--line);
  border-radius:12px; padding:16px; display:flex; flex-direction:column; gap:10px}
.sTop{display:flex; align-items:center; justify-content:space-between; gap:8px}
.sFiles{color:var(--muted); font-size:12.5px}
.sHint{color:var(--muted); font-size:12.5px; line-height:1.55; margin:2px 0}
.sCheck{display:flex; align-items:center; gap:8px; font-size:13px; color:var(--text); margin:8px 0}
.sCheck input{width:auto; accent-color:var(--accent)}
#tvSideOpts label.f{margin-top:8px}
.goBig{background:var(--accent); color:#fff; border:none; border-radius:10px; cursor:pointer;
  font-size:16.5px; font-weight:700; padding:15px 12px; font-family:inherit; margin-top:6px}
.goBig:hover{filter:brightness(1.08)}
@media (max-width:900px){
  /* JS sets an inline display:grid on #tvWork, so we can't switch it to flex here
     (inline wins). Instead collapse the grid to ONE column and reorder: file
     previews on top, the options + action panel as a full-width block below. */
  #tvWork{grid-template-columns:1fr; gap:16px}
  #tvMain{order:1; padding-bottom:0; min-height:0}
  /* options + action stick to the bottom of the screen so the button is always
     reachable while scrolling the previews, then settle in place at the very end */
  #tvSide{order:2; position:sticky; bottom:12px; top:auto; z-index:5;
    max-height:80vh; overflow-y:auto; border-radius:14px;
    box-shadow:0 -6px 22px rgba(0,0,0,.32)}
  .hero .pageTitle{font-size:24px}
}

/* file cards (merge / multi-file) */
#tvMain .fCard{display:inline-flex; flex-direction:column; gap:6px; width:150px; background:var(--panel);
  border:1px solid var(--line); border-radius:12px; padding:10px; margin:0 10px 10px 0; vertical-align:top}
.fCard .fTh{height:130px; display:flex; align-items:center; justify-content:center; overflow:hidden;
  background:var(--panel2); border-radius:8px; font-size:34px}
.fCard .fTh canvas{max-width:100%; max-height:130px}
.fCard b{font-size:12px; font-weight:600; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.fCard small{color:var(--muted); font-size:11px}
.fCard .fBtns{display:flex; gap:6px}
.fCard .fBtns button{flex:1; background:var(--panel2); border:1px solid var(--line); color:var(--muted);
  border-radius:7px; padding:4px 0; cursor:pointer; font-size:12px}
.fCard .fBtns button:hover{border-color:var(--accent); color:var(--accent)}

/* bigger page thumbs + reorder bar */
.thumbPick.big{grid-template-columns:repeat(auto-fill,minmax(120px,1fr)); gap:12px}
.th.ord{cursor:default}
.ordBar{position:absolute; top:4px; left:4px; right:26px; display:flex; gap:4px; opacity:0; transition:opacity .12s}
.th.ord:hover .ordBar{opacity:1}
.ordBar button{background:rgba(0,0,0,.6); color:#fff; border:none; border-radius:6px; padding:3px 7px;
  font-size:11px; cursor:pointer}
.ordBar button:hover{background:var(--accent)}
@media (hover:none){ .ordBar{opacity:1} }

/* progress / done */
.stateCard{max-width:560px; margin:60px auto; text-align:center; background:var(--panel);
  border:1px solid var(--line); border-radius:16px; padding:38px 30px}
.meter.big{height:12px; margin:20px 0 14px}

/* ---------- AI Engine section (Settings) — tiers + Token Saver ---------- */
.tierRow{display:flex; gap:8px; margin-top:8px}
.tierBtn{flex:1; background:var(--panel); border:1.5px solid var(--line); border-radius:10px;
  padding:10px 8px; cursor:pointer; color:var(--text); text-align:center; font-family:inherit; transition:border-color .15s}
.tierBtn:hover{border-color:var(--accent)}
.tierBtn b{font-size:13.5px; display:block}
.tierBtn small{display:block; font-size:10.5px; color:var(--muted); margin-top:2px}
.tierBtn.on{border-color:var(--accent); box-shadow:0 0 0 2px rgba(224,122,63,.18)}
.tierBtn[data-tier="ultra"].on{border-color:#ff9d5c; box-shadow:0
/* ---- Sign PDF: signature pad ---- */
.sigTabs{display:flex; gap:6px; margin:0 0 8px}
.sigTab{flex:1; background:var(--panel); border:1px solid var(--line); color:var(--muted);
  border-radius:8px; padding:7px; font-size:12.5px; cursor:pointer; font-family:inherit; transition:border-color .12s}
.sigTab.on{border-color:var(--accent); color:var(--text)}
#sigPad{width:100%; height:160px; background:#fff; border:1px solid var(--line); border-radius:10px;
  touch-action:none; cursor:crosshair; display:block}
.sigClear{margin-top:6px; background:var(--panel); border:1px solid var(--line); color:var(--muted);
  border-radius:8px; padding:5px 12px; font-size:12px; cursor:pointer; font-family:inherit}
.sigClear:hover{border-color:var(--accent); color:var(--text)}
.sigPreview{background:#fff; color:#111; border:1px solid var(--line); border-radius:10px; padding:14px;
  font-family:"Segoe Script","Brush Script MT","Snell Roundhand",cursive; font-style:italic; font-size:30px;
  text-align:center; margin-top:8px; min-height:58px; overflow:hidden; white-space:nowrap; text-overflow:ellipsis}