/* Pocket Scan: dark camera app, mint accent, phone first */
:root {
  --bg: #0f1a17; --panel: #16241f; --panel2: #1d2e28; --line: #2a3d36; --ink: #eef5f1; --muted: #8ea89d; --accent: #21c58b; --accent-ink: #052016; --danger: #ff7b72;
  font-family: 'Inter', system-ui, -apple-system, sans-serif; color: var(--ink); color-scheme: dark;
}
* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; background: var(--bg); overflow: hidden; overscroll-behavior: none; }
body { font-size: 15px; -webkit-tap-highlight-color: transparent; -webkit-user-select: none; user-select: none; }
button, input { font: inherit; color: inherit; }
button { cursor: pointer; border: 1px solid var(--line); background: var(--panel2); border-radius: 12px; padding: 10px 14px; font-weight: 600; touch-action: manipulation; }
button:active { transform: scale(.97); }
button:disabled { opacity: .35; pointer-events: none; }
button.primary { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
button.ghost { background: transparent; border-color: transparent; }
button.small { padding: 7px 12px; font-size: 14px; }
button.danger { color: var(--danger); }
svg { width: 26px; height: 26px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
[hidden] { display: none !important; }
.muted { color: var(--muted); } .small { font-size: 12.5px; }

.screen { position: fixed; inset: 0; display: none; flex-direction: column; }
.screen.on { display: flex; }

/* ---------- document ---------- */
.top { display: flex; align-items: center; gap: 10px; padding: calc(10px + env(safe-area-inset-top, 0px)) 14px 10px; border-bottom: 1px solid var(--line); background: var(--panel); flex: none; }
.top.dark { background: #0a120f; }
.top b { flex: 1; text-align: center; }
.brand { flex: 1; display: flex; align-items: center; gap: 10px; min-width: 0; }
.logo { width: 32px; height: 32px; flex: none; }
.doc-name { flex: 1; min-width: 0; background: transparent; border: 0; font-size: 18px; font-weight: 700; padding: 6px 4px; border-radius: 8px; -webkit-user-select: text; user-select: text; }
.doc-name:focus { outline: none; background: var(--panel2); }
.empty { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 24px; overflow: auto; }
.empty h1 { font-size: 24px; margin: 22px 0 8px; }
.empty p { color: var(--muted); max-width: 340px; line-height: 1.5; margin: 0; }
.tips { list-style: none; padding: 0; margin: 18px 0 0; color: var(--ink); line-height: 2; text-align: left; }
.tips li::before { content: '✓'; color: var(--accent); font-weight: 800; margin-right: 10px; }
.private { margin-top: 18px !important; font-size: 13px; }
.empty-art { position: relative; width: 120px; height: 140px; }
.empty-art i { position: absolute; inset: 14px 22px; background: #fff; border-radius: 6px; transform: rotate(-6deg); box-shadow: 0 10px 30px rgba(0,0,0,.4); }
.empty-art i::after { content: ''; position: absolute; left: 12px; right: 12px; top: 16px; bottom: 30px; background: repeating-linear-gradient(#c5d1cc 0 3px, transparent 3px 10px); }
.empty-art b { position: absolute; inset: 0; border: 4px solid var(--accent); border-radius: 14px; clip-path: polygon(0 0, 30% 0, 30% 6%, 6% 6%, 6% 30%, 0 30%, 0 70%, 6% 70%, 6% 94%, 30% 94%, 30% 100%, 70% 100%, 70% 94%, 94% 94%, 94% 70%, 100% 70%, 100% 30%, 94% 30%, 94% 6%, 70% 6%, 70% 0, 100% 0, 100% 100%, 0 100%); animation: scanpulse 2s ease-in-out infinite; }
@keyframes scanpulse { 50% { transform: scale(1.05); } }
.grid { flex: 1; overflow-y: auto; display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 14px; padding: 16px; align-content: start; }
.grid:empty { display: none; }
.page-card { position: relative; }
.pimg { width: 100%; aspect-ratio: 3 / 4; padding: 6px; display: grid; place-items: center; background: var(--panel); border-radius: 14px; }
.pimg img { max-width: 100%; max-height: 100%; border-radius: 4px; box-shadow: 0 4px 14px rgba(0,0,0,.4); }
.pbar { display: flex; align-items: center; justify-content: space-between; margin-top: 6px; }
.pbar b { font-size: 13px; color: var(--muted); }
.mv { padding: 2px 12px; font-size: 18px; background: none; border-color: transparent; }
.warn { position: absolute; top: 10px; right: 10px; width: 26px; height: 26px; border-radius: 50%; background: #ffb547; color: #2a1a00; display: grid; place-items: center; font-size: 13px; }
.bar { flex: none; display: flex; align-items: center; justify-content: space-around; padding: 10px 16px calc(12px + env(safe-area-inset-bottom, 0px)); background: var(--panel); border-top: 1px solid var(--line); }
.bar-btn { display: flex; flex-direction: column; align-items: center; gap: 2px; background: none; border: 0; font-size: 12px; color: var(--muted); min-width: 70px; }
.bar-btn svg { color: var(--ink); }
.scan-btn { width: 74px; height: 74px; border-radius: 50%; background: var(--accent); border: 0; color: var(--accent-ink); display: grid; place-items: center; box-shadow: 0 8px 26px rgba(33,197,139,.4); margin-top: -26px; }
.scan-btn svg { width: 34px; height: 34px; stroke-width: 2.2; }

/* ---------- camera ---------- */
.cam { background: #000; }
#video, #overlay { position: absolute; inset: 0; width: 100%; height: 100%; }
#video { object-fit: cover; }
.cam-top { position: absolute; left: 0; right: 0; top: 0; display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: calc(12px + env(safe-area-inset-top, 0px)) 14px 12px; background: linear-gradient(rgba(0,0,0,.55), transparent); }
.cam-hint { background: rgba(0,0,0,.55); padding: 8px 14px; border-radius: 99px; font-size: 14px; font-weight: 600; text-align: center; }
.round { width: 44px; height: 44px; border-radius: 50%; padding: 0; display: grid; place-items: center; }
.round.dark { background: rgba(0,0,0,.5); border-color: rgba(255,255,255,.2); color: #fff; }
.round.on { background: #ffd34d; color: #000; }
.cam-bottom { position: absolute; left: 0; right: 0; bottom: 0; display: flex; align-items: center; justify-content: space-between; padding: 18px 26px calc(22px + env(safe-area-inset-bottom, 0px)); background: linear-gradient(transparent, rgba(0,0,0,.65)); }
.pill { width: 84px; border-radius: 99px; background: rgba(0,0,0,.5); border-color: rgba(255,255,255,.25); color: #fff; font-size: 14px; }
.pill.on { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.shutter { width: 78px; height: 78px; border-radius: 50%; padding: 0; background: transparent; border: 5px solid #fff; display: grid; place-items: center; }
.shutter i { width: 60px; height: 60px; border-radius: 50%; background: #fff; transition: transform .1s; }
.shutter:active i { transform: scale(.88); }
.thumb-btn { position: relative; width: 84px; height: 60px; padding: 0; background: rgba(0,0,0,.5); border-color: rgba(255,255,255,.25); overflow: visible; display: grid; place-items: center; }
.thumb-btn img { max-width: 52px; max-height: 52px; border-radius: 4px; display: none; }
.thumb-btn.has img { display: block; }
.thumb-btn b { position: absolute; top: -8px; right: -8px; min-width: 24px; height: 24px; border-radius: 12px; background: var(--accent); color: var(--accent-ink); font-size: 13px; display: grid; place-items: center; padding: 0 6px; }
.thumb-btn:not(.has) b { display: none; }
.thumb-btn:not(.has)::after { content: 'Done'; color: #fff; font-size: 14px; }
.flash { position: absolute; inset: 0; background: #fff; opacity: 0; pointer-events: none; }
.flash.go { animation: flash .35s ease-out; }
@keyframes flash { from { opacity: .85; } to { opacity: 0; } }

/* ---------- edit ---------- */
.edit { background: #0a120f; }
.crop-wrap, .result-wrap { position: relative; flex: 1; min-height: 0; touch-action: none; }
#cropCanvas { position: absolute; inset: 0; }
.loupe { position: absolute; top: 12px; width: 120px; height: 120px; border-radius: 50%; border: 3px solid #fff; box-shadow: 0 8px 24px rgba(0,0,0,.6); pointer-events: none; }
.result-wrap { display: grid; place-items: center; padding: 18px; }
.result-wrap img { max-width: 100%; max-height: 100%; box-shadow: 0 10px 30px rgba(0,0,0,.6); transition: opacity .2s; background: #fff; }
.edit-tools { flex: none; padding: 12px 14px calc(14px + env(safe-area-inset-bottom, 0px)); background: var(--panel); border-top: 1px solid var(--line); display: flex; flex-direction: column; gap: 10px; }
.seg { display: flex; background: #0c1512; border-radius: 12px; padding: 3px; gap: 3px; }
.seg button { flex: 1; border: 0; background: none; padding: 9px 6px; font-size: 14px; color: var(--muted); border-radius: 9px; }
.seg button.on { background: var(--panel2); color: var(--ink); box-shadow: 0 1px 4px rgba(0,0,0,.3); }
.tool-row { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; }
.tool-row button { flex: 1; white-space: nowrap; font-size: 14px; }
.tool-row.filters { display: flex; overflow-x: auto; -webkit-overflow-scrolling: touch; padding-bottom: 2px; }
.tool-row.filters button { flex: none; }
.tool-row.filters button { padding: 10px 12px; font-size: 13.5px; }
.filters button.on { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }

/* ---------- sheet, busy, toast ---------- */
.sheet-back { position: fixed; inset: 0; z-index: 20; background: rgba(0,0,0,.55); display: flex; align-items: flex-end; justify-content: center; }
.sheet { width: min(520px, 100%); background: var(--panel); border-radius: 22px 22px 0 0; padding: 20px 18px calc(18px + env(safe-area-inset-bottom, 0px)); border: 1px solid var(--line); border-bottom: 0; }
@media (min-width: 700px) { .sheet-back { align-items: center; } .sheet { border-radius: 22px; border-bottom: 1px solid var(--line); } }
.sheet h2 { margin: 0 0 14px; font-size: 20px; }
.field { margin: 12px 0; }
.field > span { display: block; font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); margin-bottom: 6px; }
.actions { display: flex; gap: 8px; justify-content: flex-end; margin-top: 16px; flex-wrap: wrap; }
.actions .primary { min-width: 120px; }
.busy { position: fixed; inset: 0; z-index: 30; background: rgba(0,0,0,.6); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; font-weight: 600; }
.spin { width: 40px; height: 40px; border-radius: 50%; border: 4px solid rgba(255,255,255,.2); border-top-color: var(--accent); animation: spin .8s linear infinite; }
.spin.small { width: 24px; height: 24px; border-width: 3px; }
@keyframes spin { to { transform: rotate(360deg); } }
.toast { position: fixed; left: 50%; bottom: calc(110px + env(safe-area-inset-bottom, 0px)); transform: translateX(-50%); z-index: 40; background: #fff; color: #0b1a14; padding: 10px 16px; border-radius: 12px; font-weight: 600; max-width: calc(100% - 32px); text-align: center; box-shadow: 0 10px 30px rgba(0,0,0,.4); }
@media (prefers-reduced-motion: reduce) { .empty-art b { animation: none; } }

/* ---------- preview with zoom ---------- */
.view { background: #050908; }
.viewport { position: relative; flex: 1; min-height: 0; overflow: hidden; touch-action: none; cursor: grab; }
.viewport.zoomed { cursor: move; }
.viewport img { position: absolute; left: 0; top: 0; transform-origin: 0 0; max-width: none; user-select: none; -webkit-user-drag: none; box-shadow: 0 10px 40px rgba(0,0,0,.6); background: #fff; will-change: transform; }
.viewport .spin { position: absolute; left: 50%; top: 50%; margin: -20px; }
.view-bar { flex: none; display: flex; align-items: center; justify-content: space-between; padding: 10px 16px calc(12px + env(safe-area-inset-bottom, 0px)); background: var(--panel); border-top: 1px solid var(--line); }
.zoom-lbl { color: var(--muted); font-size: 13px; font-variant-numeric: tabular-nums; }
.result-wrap.viewport { display: block; padding: 0; }
.result-wrap.viewport img { max-width: none; max-height: none; }
.apply-all { width: 100%; font-size: 13.5px; }