/* Tokens copied from mockup v2 (item 001). Fonts: Instrument Serif / Geist are not self-hosted yet, so the fallbacks show. */
:root {
  color-scheme: light dark;
  --bg: #F3EFE6; --bg-2: #EAE4D7; --panel: #FAF7F0; --ink: #16140F; --ink-2: #2E2A22; --muted: #5C5649;
  --line: #D9D1C0; --line-2: #BFB49E; --accent: #B3321A; --accent-soft: #F6DED3;
  --ok: #1F7A4C; --ok-soft: #DDEFE3; --bad: #B4231A; --bad-soft: #F7DCD8; --amber: #9A5B00; --amber-soft: #F5E6C8;
  --f-display: "Instrument Serif", Georgia, serif;
  --f-body: "Geist", system-ui, -apple-system, sans-serif;
  --f-mono: "Geist Mono", ui-monospace, monospace;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #0B0D12; --bg-2: #10131A; --panel: #141821; --ink: #EEE7D8; --ink-2: #D6CFBF; --muted: #A39C8B;
    --line: #232837; --line-2: #363D50; --accent: #FF8A5C; --accent-soft: #2A1A15;
    --ok: #5AD394; --ok-soft: #12261C; --bad: #FF7468; --bad-soft: #2B1514; --amber: #F2B54A; --amber-soft: #2A2112;
  }
}
* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; background: var(--bg); color: var(--ink); font: 16px/1.5 var(--f-body); -webkit-text-size-adjust: 100%; }
.app { min-height: 100dvh; display: flex; justify-content: center; padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left); }
.screen { width: 100%; max-width: 440px; padding: 8px 20px 32px; display: flex; flex-direction: column; }
.top { display: flex; align-items: center; justify-content: space-between; min-height: 52px; }
.brand { font: 400 24px/1 var(--f-display); }
.brand i { color: var(--accent); }
.back { font: 400 22px/1 var(--f-display); background: none; border: 0; color: var(--ink); padding: 10px 0; min-height: 44px; cursor: pointer; }
.body { display: flex; flex-direction: column; }
.title { font: 400 30px/1.1 var(--f-display); margin: 10px 0 6px; }
.title.gap { margin-top: 30px; }
.p { font-size: 15px; color: var(--ink-2); line-height: 1.45; margin: 6px 0; }
.p.mute, .mute { color: var(--muted); }
.small { font-size: 13px; }
.center { text-align: center; }
.lbl { font: 12px var(--f-mono); color: var(--muted); margin-top: 16px; }
.field { width: 100%; border: 1px solid var(--line-2); border-radius: 10px; padding: 12px; font: 16px var(--f-body); color: var(--ink); background: var(--panel); margin-top: 8px; min-height: 48px; }
.field:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.field.code { font: 500 28px var(--f-mono); letter-spacing: .5em; text-align: center; padding-left: calc(12px + .5em); }
.btns { display: flex; gap: 8px; margin-top: 14px; }
.btn { flex: 1; font: 500 16px var(--f-body); min-height: 48px; padding: 10px; border-radius: 10px; border: 1px solid var(--line-2); background: var(--panel); color: var(--ink); cursor: pointer; }
.btn.pri { background: var(--accent); border-color: var(--accent); color: var(--bg); }
.btn.danger { border-color: var(--bad, #e5484d); color: var(--bad, #e5484d); }
.btn:disabled { opacity: .45; cursor: default; }
.btn:focus-visible, .link:focus-visible, .back:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.link { background: none; border: 0; padding: 10px 4px; min-height: 44px; font: 13px var(--f-mono); color: var(--accent); cursor: pointer; }
.link:disabled { opacity: .5; }
.links { margin-top: 10px; }
.banner { margin: 12px 0 0; border-radius: 12px; padding: 10px 12px; font-size: 14px; line-height: 1.4; border: 1px solid; }
.banner b { display: block; }
.banner.bad { background: var(--bad-soft); border-color: var(--bad); }
.banner.ok { background: var(--ok-soft); border-color: var(--ok); }
.banner.off { background: var(--bg-2); border-color: var(--line-2); }
.chip { font: 500 11px var(--f-mono); padding: 2px 8px; border-radius: 99px; border: 1px solid var(--accent); color: var(--accent); }
.steps { margin: 12px 0 0; padding: 0; list-style: none; counter-reset: s; }
.steps li { counter-increment: s; position: relative; padding: 0 0 10px 30px; font-size: 14px; line-height: 1.4; color: var(--ink-2); }
.steps li::before { content: counter(s); position: absolute; left: 0; top: 0; width: 20px; height: 20px; border-radius: 50%; background: var(--accent-soft); color: var(--accent); font: 600 12px/20px var(--f-mono); text-align: center; }
.card { background: var(--panel); border: 1px solid var(--line); border-radius: 14px; padding: 12px; margin-top: 10px; }
.card .m { font: 12px/1.45 var(--f-mono); color: var(--muted); }
.card .q { font-size: 14px; margin-top: 4px; color: var(--ink-2); line-height: 1.4; }
.noscript { padding: 20px; }
/* Pairing (screens 1.7-1.11) */
code, .mono { font-family: var(--f-mono); font-size: .92em; }
.field.tall { min-height: 96px; resize: none; }
.field.mono { font-size: 12px; word-break: break-all; }
.m { font: 11px/1.45 var(--f-mono); color: var(--muted); margin-top: 2px; }
.card .t { font-weight: 600; font-size: 14px; line-height: 1.3; }
.viewfinder { margin: 8px 0; height: 210px; border-radius: 16px; background: #1b1916; position: relative; overflow: hidden; color: #eee; }
.viewfinder video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.viewfinder .frame { position: absolute; left: 50%; top: 50%; width: 130px; height: 130px; transform: translate(-50%, -50%); border-radius: 14px; box-shadow: 0 0 0 999px rgba(0, 0, 0, .35); }
.viewfinder .frame i { position: absolute; width: 24px; height: 24px; border: 3px solid #FF8A5C; }
.viewfinder .frame i:nth-child(1) { left: 0; top: 0; border-right: 0; border-bottom: 0; border-radius: 10px 0 0 0; }
.viewfinder .frame i:nth-child(2) { right: 0; top: 0; border-left: 0; border-bottom: 0; border-radius: 0 10px 0 0; }
.viewfinder .frame i:nth-child(3) { left: 0; bottom: 0; border-right: 0; border-top: 0; border-radius: 0 0 0 10px; }
.viewfinder .frame i:nth-child(4) { right: 0; bottom: 0; border-left: 0; border-top: 0; border-radius: 0 0 10px 0; }
.viewfinder .hint { position: absolute; bottom: 8px; left: 8px; right: 8px; text-align: center; font: 11px var(--f-mono); }
.viewfinder.off { display: flex; align-items: center; justify-content: center; padding: 20px; text-align: center; font-size: 14px; line-height: 1.4; }
.words { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 12px 0 6px; padding: 0; list-style: none; }
.words li { background: var(--panel); border: 1px solid var(--line-2); border-radius: 10px; padding: 10px 6px; text-align: center; font: 500 17px var(--f-mono); }
.words li i { display: block; font: 10px var(--f-mono); color: var(--muted); font-style: normal; }
.spin { display: inline-block; width: 12px; height: 12px; border: 2px solid var(--line-2); border-top-color: var(--accent); border-radius: 50%; vertical-align: -2px; animation: spin 1s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .spin { animation: none; } }
.tick { font: 400 44px var(--f-display); color: var(--ok); margin-top: 24px; }
/* Project, item and file screens (mockup v2 flow 2, slice C) */
.screen.wide { max-width: 720px; }
.top .proj { font: 12px var(--f-mono); color: var(--muted); margin-top: 2px; }
.live { font: 500 11px var(--f-mono); padding: 3px 9px; border-radius: 99px; border: 1px solid var(--ok); color: var(--ok); background: var(--ok-soft); }
.live.off { border-color: var(--line-2); color: var(--muted); background: var(--bg-2); }
.live.stale { border-color: var(--amber); color: var(--amber); background: var(--amber-soft); }
.banner.stale { background: var(--amber-soft); border-color: var(--amber); }
.sec { font: 500 11px var(--f-mono); letter-spacing: .04em; text-transform: uppercase; color: var(--muted); margin: 18px 0 0; }
.m.fresh { margin: 10px 0 0; }
button.card { display: block; width: 100%; text-align: left; font: inherit; color: inherit; cursor: pointer; }
button.card:focus-visible, .file:focus-visible, .doc a[role=link]:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.card.wait { border-color: var(--accent); }
.card .t .g { display: inline-block; width: 18px; font: 600 12px var(--f-mono); }
.card .t .g.w { color: var(--accent); } .card .t .g.p { color: var(--amber); } .card .t .g.d { color: var(--ok); }
.card .t.big { font: 400 20px var(--f-display); }
.card .m + .q, .card .q + .m { margin-top: 4px; }
progress { width: 100%; height: 8px; margin-top: 8px; accent-color: var(--accent); }
.files { list-style: none; margin: 8px 0 0; padding: 0; }
.file { display: flex; flex-direction: column; align-items: flex-start; width: 100%; text-align: left; font: inherit; color: inherit; background: var(--panel); border: 1px solid var(--line); border-radius: 12px; padding: 10px 12px; margin-top: 8px; min-height: 48px; cursor: pointer; }
.file .fl { font-weight: 600; font-size: 14px; }
.chip.remote { border-color: var(--line-2); color: var(--muted); background: var(--bg-2); }
.chip.amb { border-color: var(--amber); color: var(--amber); }
.chip.ok { border-color: var(--ok); color: var(--ok); }
.doc { font-size: 15px; line-height: 1.55; color: var(--ink-2); overflow-wrap: anywhere; }
.doc h1, .doc h2, .doc h3, .doc h4 { font-family: var(--f-display); font-weight: 400; color: var(--ink); line-height: 1.2; margin: 18px 0 6px; }
.doc h1 { font-size: 28px; } .doc h2 { font-size: 22px; } .doc h3, .doc h4 { font-size: 18px; }
.doc p { margin: 8px 0; }
.doc a[role=link] { color: var(--accent); text-decoration: underline; cursor: pointer; }
.doc pre { background: var(--bg-2); border: 1px solid var(--line); border-radius: 10px; padding: 10px; overflow-x: auto; font-size: 12px; }
.doc code { background: var(--bg-2); border-radius: 4px; padding: 0 3px; }
.doc pre code { background: none; padding: 0; }
.doc table { border-collapse: collapse; display: block; overflow-x: auto; max-width: 100%; font-size: 13px; }
.doc th, .doc td { border: 1px solid var(--line); padding: 4px 8px; text-align: left; vertical-align: top; }
.doc blockquote { margin: 8px 0; padding-left: 12px; border-left: 3px solid var(--line-2); color: var(--muted); }
.doc img { max-width: 100%; }
.reportframe { width: 100%; height: 72vh; border: 1px solid var(--line-2); border-radius: 12px; background: #fff; margin-top: 8px; }
.modal { position: fixed; inset: 0; z-index: 10; display: flex; align-items: flex-end; justify-content: center; background: rgba(0, 0, 0, .45); padding: 16px; }
.sheet { width: 100%; max-width: 440px; background: var(--panel); border: 1px solid var(--line-2); border-radius: 16px; padding: 16px; }
.url { word-break: break-all; font-size: 12px; background: var(--bg-2); border-radius: 8px; padding: 8px; }