:root { color-scheme: dark; --bg:#090b10; --panel:rgba(13,17,25,.86); --text:#f4f7fb; --muted:#afbac9; --accent:#76db9a; --warn:#f4c659; --danger:#ff6572; }
* { box-sizing:border-box; }
body { margin:0; min-width:320px; min-height:100dvh; color:var(--text); background:var(--bg); font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; }
button, select, textarea { font:inherit; } button { color:inherit; cursor:pointer; -webkit-tap-highlight-color:transparent; }
.app-shell,.camera-screen { min-height:100dvh; }.camera-screen { position:relative; overflow:hidden; background:#000; }
#camera,#overlay { position:absolute; inset:0; width:100%; height:100%; }.camera-screen #camera { object-fit:cover; }.camera-screen #overlay { pointer-events:none; }
.top-panel,.bottom-panel,.guide-info,.direction-panel { position:absolute; z-index:2; }.top-panel { top:0; left:0; right:0; padding:max(12px,env(safe-area-inset-top)) 14px 12px; background:linear-gradient(#07090de8,transparent); }
.mode-tabs { display:grid; grid-template-columns:repeat(3,1fr); gap:7px; }.mode-tab,.direction-button,.ghost-button,.primary-button { border:1px solid #536174; border-radius:11px; min-height:43px; background:#18202d; font-weight:700; }.mode-tab.is-active,.direction-button.is-active { color:#07110b; background:var(--accent); border-color:var(--accent); }.status-row { display:flex; justify-content:space-between; gap:8px; margin-top:8px; font-size:12px; color:var(--muted); }.status-row p { margin:0; }
.guide-info { top:max(100px,calc(env(safe-area-inset-top) + 84px)); left:50%; width:min(92%,420px); transform:translateX(-50%); display:grid; justify-items:center; gap:5px; text-align:center; }.guide-info p { margin:0; padding:6px 11px; border-radius:999px; background:rgba(5,8,13,.74); box-shadow:0 1px 5px #0008; font-weight:700; }.guide-info #statusMessage { font-size:14px; }.guide-info #matchScore { font-size:13px; color:#d9e4f2; }
.direction-panel { top:max(151px,calc(env(safe-area-inset-top) + 135px)); left:50%; transform:translateX(-50%); display:flex; gap:6px; width:max-content; max-width:94%; }.direction-panel[hidden] { display:none; }.direction-button { min-height:37px; padding:0 10px; font-size:13px; background:rgba(15,21,31,.9); }.direction-button:disabled { opacity:.35; cursor:not-allowed; }
.bottom-panel { display:grid; gap:9px; left:0; right:0; bottom:0; padding:16px 14px max(16px,env(safe-area-inset-bottom)); background:linear-gradient(transparent,#07090de8); }.secondary-actions { display:flex; gap:9px; justify-content:center; }.secondary-actions .ghost-button { flex:1; max-width:180px; }.ghost-button { padding:0 14px; background:var(--panel); }.capture-button { width:100%; min-height:60px; border-radius:30px; border:3px solid white; color:#10161e; background:#fff; font-size:19px; font-weight:800; }
.results-screen { min-height:100dvh; padding:calc(env(safe-area-inset-top) + 14px) 14px max(20px,env(safe-area-inset-bottom)); }.results-header { display:flex; align-items:center; justify-content:space-between; gap:8px; }.results-header h1 { font-size:20px; margin:0; }.results-list { display:grid; gap:24px; margin-top:24px; }.result-group h2 { margin:0 0 10px; font-size:18px; }.result-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; }.result-card { overflow:hidden; border:1px solid #293649; border-radius:12px; background:#111722; }.result-card img { display:block; width:100%; aspect-ratio:3 / 4; object-fit:cover; background:#202938; }.result-card p { margin:9px 10px; font-size:13px; }.result-actions { display:flex; gap:6px; padding:0 8px 8px; }.result-actions button { flex:1; min-height:35px; padding:3px; border:1px solid #536174; border-radius:8px; background:#202a38; font-size:12px; }
.editor-dialog { width:min(94vw,560px); max-height:94dvh; padding:0; color:var(--text); border:1px solid #526175; border-radius:16px; background:#111722; }.editor-dialog::backdrop { background:#000b; }.editor-content { padding:14px; }.editor-heading { display:flex; justify-content:space-between; align-items:center; }.editor-heading h2 { margin:0; font-size:18px; }.icon-button { border:0; color:var(--text); background:none; font-size:30px; }.image-stage { position:relative; max-height:49dvh; margin:12px 0; overflow:auto; background:#000; }.image-stage img { display:block; width:100%; }.image-stage canvas { position:absolute; inset:0; width:100%; height:100%; }.editor-content label { display:grid; gap:5px; margin:10px 0; font-size:13px; font-weight:700; }.editor-content select,.editor-content textarea { width:100%; border:1px solid #536174; border-radius:8px; padding:8px; color:var(--text); background:#0b1019; }.editor-content textarea { min-height:65px; resize:vertical; }.hint { color:var(--muted); font-size:12px; }.editor-content menu { display:flex; justify-content:flex-end; gap:8px; padding:0; margin:14px 0 0; }.primary-button { padding:0 14px; border-color:var(--accent); color:#07110b; background:var(--accent); }
@media (min-width:720px) { .camera-screen { max-width:540px; margin:auto; } .result-grid { grid-template-columns:repeat(3,minmax(0,1fr)); } }

.watermark-button { justify-self:center; min-height:38px; padding:0 14px; border:1px solid #536174; border-radius:999px; color:var(--text); background:var(--panel); }