:root {
  --desk: #e8e5de; --ink: #1c1c1e; --ink2: #6c6c70;
  --bar: rgba(250,250,250,.78); --barline: rgba(0,0,0,.08); --btn: rgba(0,0,0,.06);
  --accent: #0a84ff; --ok: #30d158; --bad: #ff453a;
  --c0: 255,214,10; --c1: 48,209,88; --c2: 255,110,168; --c3: 100,181,255;
  --hl-a: .46; --hl-blend: multiply;
  --safe-t: env(safe-area-inset-top, 0px); --safe-b: env(safe-area-inset-bottom, 0px);
}
html.dark {
  --desk: #050505; --ink: #f2f2f7; --ink2: #98989d;
  --bar: rgba(38,38,40,.72); --barline: rgba(255,255,255,.10); --btn: rgba(255,255,255,.09);
  --hl-a: .34; --hl-blend: normal;
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; height: 100%; overflow: hidden; overscroll-behavior: none; }
body {
  background: #000; color: var(--ink);
  font: 17px/1.35 -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
  -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; -webkit-font-smoothing: antialiased;
}
[hidden] { display: none !important; }
button { font: inherit; color: inherit; border: 0; background: none; padding: 0; cursor: pointer; }

/* ================= Face scan ================= */
#scan { position: fixed; inset: 0; z-index: 30; background: #000; color: #fff; display: grid; place-items: center;
  padding: calc(var(--safe-t) + 16px) 24px calc(var(--safe-b) + 16px); transition: opacity .5s ease .25s, visibility 0s linear .75s; }
#scan.gone { opacity: 0; visibility: hidden; pointer-events: none; }
.scanWrap { width: 100%; max-width: 360px; display: flex; flex-direction: column; align-items: center; text-align: center; }
.dial { position: relative; width: min(78vw, 300px); aspect-ratio: 1; margin-bottom: 36px; }
.ticks { position: absolute; inset: 0; width: 100%; height: 100%; }
.ticks line { stroke: rgba(255,255,255,.2); stroke-width: 3; stroke-linecap: round; transition: stroke .25s ease, opacity .25s ease; }
.ticks line.on { stroke: #fff; }
.done .ticks line { stroke: var(--ok); }
.lens { position: absolute; inset: 11%; border-radius: 50%; overflow: hidden; background: #111; transform: scale(.96); transition: transform .6s cubic-bezier(.2,.8,.2,1); }
.scanning-live .lens { transform: scale(1); }
.lens video { width: 100%; height: 100%; object-fit: cover; transform: scaleX(-1); display: block; opacity: 0; transition: opacity .5s ease; }
.scanning-live .lens video { opacity: 1; }
.veil { position: absolute; inset: 0; background: rgba(0,0,0,0); transition: background .4s ease; }
.done .veil { background: rgba(0,0,0,.62); }
.check { position: absolute; inset: 0; width: 100%; height: 100%; }
.check path { fill: none; stroke: var(--ok); stroke-width: 5; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 90; stroke-dashoffset: 90; }
.done .check path { animation: draw .45s cubic-bezier(.4,0,.2,1) .15s forwards; }
@keyframes draw { to { stroke-dashoffset: 0; } }
#scanTitle { font-size: 26px; line-height: 1.2; font-weight: 700; letter-spacing: -.3px; margin: 0 0 8px; min-height: 31px; }
#scanText { margin: 0; color: rgba(255,255,255,.62); font-size: 17px; min-height: 46px; }
#scanErr { margin: 12px 0 0; color: var(--bad); font-size: 15px; min-height: 22px; }
.cta { margin-top: 20px; min-height: 52px; padding: 0 34px; border-radius: 26px; background: #fff; color: #000; font-weight: 600; font-size: 17px; }
.cta:active { opacity: .8; transform: scale(.98); }
#scanTitle, #scanText { transition: opacity .2s ease; }
.swap { opacity: 0; }

/* ================= Reader ================= */
#reader { position: fixed; inset: 0; z-index: 10; background: var(--desk); }
#scroller { position: absolute; inset: 0; overflow: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; touch-action: pan-x pan-y; scrollbar-width: none; }
#scroller::-webkit-scrollbar { display: none; }
.tool #scroller { touch-action: none; }
#pages { width: calc(100% * var(--zoom, 1)); padding: calc(var(--safe-t) + 6px) 0 calc(var(--safe-b) + 110px); }
.pg { position: relative; width: 100%; margin: 0 0 6px; background: #fbfaf6; overflow: hidden; contain: layout paint; }
html.dark .pg { background: #141414; }
.pg img { position: absolute; inset: 0; width: 100%; height: 100%; display: block; opacity: 0; transition: opacity .25s ease; pointer-events: none; -webkit-user-drag: none; }
.pg img.in { opacity: 1; }
html.dark .pg img { filter: invert(.93) hue-rotate(180deg); }
.hl { position: absolute; border-radius: 3px; pointer-events: none; mix-blend-mode: var(--hl-blend); }
.hl.c0 { background: rgba(var(--c0), var(--hl-a)); } .hl.c1 { background: rgba(var(--c1), var(--hl-a)); }
.hl.c2 { background: rgba(var(--c2), var(--hl-a)); } .hl.c3 { background: rgba(var(--c3), var(--hl-a)); }
.hl.live { animation: none; }

#pageNo { position: fixed; top: calc(var(--safe-t) + 10px); left: 50%; transform: translate(-50%, -6px); padding: 5px 12px; border-radius: 14px;
  background: var(--bar); border: .5px solid var(--barline); -webkit-backdrop-filter: blur(20px) saturate(1.6); backdrop-filter: blur(20px) saturate(1.6);
  font-size: 13px; font-weight: 600; font-variant-numeric: tabular-nums; color: var(--ink); opacity: 0; transition: opacity .25s ease, transform .25s ease; pointer-events: none; z-index: 12; }
#pageNo.show { opacity: 1; transform: translate(-50%, 0); }

#bar { position: fixed; left: 50%; bottom: calc(var(--safe-b) + 14px); transform: translate(-50%, 0); z-index: 12; display: flex; flex-direction: column; align-items: center; gap: 10px;
  transition: transform .35s cubic-bezier(.3,.9,.3,1), opacity .25s ease; }
#bar.away { transform: translate(-50%, 90px); opacity: 0; pointer-events: none; }
.tools, .colors { display: flex; align-items: center; gap: 2px; padding: 5px; border-radius: 30px; background: var(--bar); border: .5px solid var(--barline);
  -webkit-backdrop-filter: blur(24px) saturate(1.7); backdrop-filter: blur(24px) saturate(1.7); box-shadow: 0 6px 24px rgba(0,0,0,.16); }
.tools button { width: 52px; height: 48px; border-radius: 24px; display: grid; place-items: center; color: var(--ink); transition: background .2s ease, transform .15s ease; }
.tools button:active { transform: scale(.92); }
.tools button[aria-pressed="true"] { background: var(--btn); }
.tools svg { width: 25px; height: 25px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; grid-area: 1/1; }
.sep { width: .5px; height: 24px; background: var(--barline); margin: 0 4px; }
.i-sun { display: none; } .i-moon { display: block; }
html.dark .i-sun { display: block; } html.dark .i-moon { display: none; }
#tHi[aria-pressed="true"] svg { color: rgb(var(--cur, var(--c0))); filter: drop-shadow(0 0 .5px rgba(0,0,0,.5)); }
.colors { gap: 6px; padding: 8px 10px; animation: rise .25s cubic-bezier(.3,.9,.3,1); }
@keyframes rise { from { opacity: 0; transform: translateY(8px) scale(.96); } }
.colors button { width: 32px; height: 32px; border-radius: 50%; position: relative; }
.colors button::before { content: ""; position: absolute; inset: 3px; border-radius: 50%; background: rgb(var(--sw)); }
.colors button[aria-pressed="true"]::after { content: ""; position: absolute; inset: 0; border-radius: 50%; border: 2px solid var(--ink); }
.colors button[data-c="0"] { --sw: var(--c0); } .colors button[data-c="1"] { --sw: var(--c1); }
.colors button[data-c="2"] { --sw: var(--c2); } .colors button[data-c="3"] { --sw: var(--c3); }

@media (prefers-reduced-motion: reduce) { * { animation-duration: .01ms !important; transition-duration: .01ms !important; } }
@media print { body { display: none !important; } }