/* ── DESIGN TOKENS ── */
:root {
  --bg:       #0C0C0E;
  --bg2:      #0E0E16;
  --bg3:      #111118;
  --bg4:      #0A0A12;
  --border:   #2A2A3C;
  --border2:  #3A3A50;
  --border3:  #5A5A78;
  --dim:      #8A8AA0;
  --mid:      #B0B0C5;
  --text:     #D8D8E5;
  --hi:       #FFFFFF;
  --accent:   #C8C8DC;
  --accent2:  #FFFFFF;
  --success:  #5A8A6A;
  --danger:   #8A5A5A;
  --safe-t:   env(safe-area-inset-top, 0px);
  --safe-b:   env(safe-area-inset-bottom, 0px);
  --safe-l:   env(safe-area-inset-left, 0px);
  --safe-r:   env(safe-area-inset-right, 0px);
  --font-mono: 'JetBrains Mono', 'SF Mono', 'Menlo', monospace;
  --font-serif: 'Cormorant Garamond', Georgia, serif;
}

/* ── RESET ── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; -webkit-tap-highlight-color: transparent; }
html, body { width: 100%; height: 100%; background: var(--bg); color: var(--text); font-family: var(--font-mono); font-weight: 500; overflow: hidden; overscroll-behavior: none; -webkit-text-size-adjust: none; }
button { font-family: var(--font-mono); background: transparent; border: none; cursor: pointer; }
input { font-family: var(--font-mono); background: transparent; border: none; outline: none; color: var(--hi); }
input::placeholder { color: var(--dim); }

/* ── SCREENS ── */
.screen {
  position: absolute; inset: 0;
  display: flex; flex-direction: column;
  padding-top: var(--safe-t);
  z-index: 1;
}
.screen:not(.active) {
  opacity: 0;
  pointer-events: none;
}
.screen.active { opacity: 1; pointer-events: auto; }
.screen.hidden { display: none !important; }
.main-screen { padding-bottom: calc(60px + var(--safe-b)); }

/* ── SCANLINE ── */
.scanline {
  position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: repeating-linear-gradient(0deg, transparent, transparent 3px, rgba(0,0,0,0.06) 3px, rgba(0,0,0,0.06) 4px);
}

/* ── HEADER ── */
.hd {
  padding: 12px 18px 10px;
  display: flex; justify-content: space-between; align-items: center;
  border-bottom: 0.5px solid var(--border);
  position: relative; z-index: 2; flex-shrink: 0;
}
.hd-brand { font-size: 10px; letter-spacing: 0.28em; color: var(--dim); text-transform: uppercase; }
.hd-right { display: flex; align-items: center; gap: 10px; }

/* ── LANG TOGGLE ── */
.lang-toggle { display: flex; border: 0.5px solid var(--border); border-radius: 4px; overflow: hidden; }
.lang-btn { padding: 4px 8px; font-size: 9px; letter-spacing: 0.1em; color: var(--dim); transition: all 0.12s; }
.lang-btn.act { background: #2A2A3C; color: var(--text); }

/* ── STEP DOTS ── */
.step-dots { display: flex; gap: 5px; align-items: center; }
.dot { width: 5px; height: 5px; border-radius: 50%; background: var(--border); }
.dot.done { background: #3A3A54; }
.dot.active { background: var(--accent); }

/* ── SCROLL BODY ── */
.scroll-body { flex: 1; overflow-y: auto; position: relative; z-index: 1; padding: 12px 14px; }
.scroll-body::-webkit-scrollbar { display: none; }

/* ── SCREEN INSTR ── */
.screen-instr { padding: 14px 18px 8px; flex-shrink: 0; position: relative; z-index: 1; }
.screen-instr-main { font-family: var(--font-serif); font-style: italic; font-weight: 300; font-size: 15px; color: var(--mid); letter-spacing: 0.1em; margin-bottom: 3px; }
.screen-instr-sub { font-size: 8px; letter-spacing: 0.22em; color: var(--dim); text-transform: uppercase; }

/* ── BUTTONS ── */
.primary-btn {
  width: 100%; padding: 15px;
  border: 0.5px solid var(--border3); border-radius: 8px;
  font-size: 11px; letter-spacing: 0.28em; color: var(--accent);
  text-transform: uppercase; transition: all 0.15s;
}
.primary-btn:active { background: var(--bg3); transform: scale(0.98); }
.primary-btn:disabled { color: var(--dim); border-color: var(--border); pointer-events: none; }
.primary-btn.sealed { color: #6A9880; border-color: var(--success); }

.action-btn {
  flex: 1; padding: 11px 8px;
  border: 0.5px solid var(--border); border-radius: 6px;
  font-size: 8px; letter-spacing: 0.16em; color: var(--dim);
  text-transform: uppercase; transition: all 0.12s;
  opacity: 0; pointer-events: none;
}
.action-btn.show { opacity: 1; pointer-events: auto; }
.action-btn:active { background: var(--bg2); color: var(--accent); }

/* ── BOTTOM BAR ── */
.bottom-bar { padding: 12px 16px 14px; border-top: 0.5px solid var(--border); position: relative; z-index: 2; flex-shrink: 0; }
.exp-row { display: flex; justify-content: center; align-items: center; gap: 8px; margin-top: 8px; }
.exp-bar { height: 1.5px; background: var(--border); border-radius: 1px; flex: 1; }
.exp-count { font-size: 8px; letter-spacing: 0.15em; color: var(--dim); white-space: nowrap; }

/* ── HOME BAR ── */
.home-bar { height: calc(22px + var(--safe-b)); background: var(--bg); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.home-pill { width: 100px; height: 4px; background: var(--border); border-radius: 2px; }

/* ── FILM CARDS ── */
.film-card {
  border: 0.5px solid var(--border); border-radius: 8px;
  padding: 14px 16px; margin-bottom: 8px; cursor: pointer;
  display: flex; align-items: center; gap: 14px; min-height: 64px;
  transition: border-color 0.12s, background 0.12s;
}
.film-card:active { background: #131320; }
.film-card.sel { border-color: #7A7A98; background: #101018; }
.film-swatch { width: 40px; height: 40px; border-radius: 4px; border: 0.5px solid var(--border2); flex-shrink: 0; }
.film-body { flex: 1; min-width: 0; }
.film-name { font-size: 11px; letter-spacing: 0.08em; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.film-card.sel .film-name { color: var(--hi); }
.film-iso { font-size: 9px; letter-spacing: 0.1em; color: var(--dim); margin-top: 2px; }
.film-card.sel .film-iso { color: var(--mid); }
.film-check { width: 18px; height: 18px; border-radius: 50%; border: 0.5px solid var(--border2); flex-shrink: 0; display: flex; align-items: center; justify-content: center; }
.film-card.sel .film-check { border-color: #7A7A98; background: #2E2E44; }
.check-dot { width: 8px; height: 8px; border-radius: 50%; background: #7A7A98; display: none; }
.film-card.sel .check-dot { display: block; }

.film-desc-box {
  margin: 4px 14px 8px; background: var(--bg2);
  border: 0.5px solid var(--border); border-radius: 6px;
  padding: 12px 14px; font-family: var(--font-serif); font-style: italic;
  font-weight: 300; font-size: 13px; color: var(--dim); line-height: 1.65;
  min-height: 52px; transition: color 0.2s; flex-shrink: 0;
  position: relative; z-index: 1;
}
.film-desc-box.vis { color: #DCDCEC; }

/* ── MODE ROW ── */
.mode-row { padding: 0 14px 8px; display: flex; gap: 8px; flex-shrink: 0; position: relative; z-index: 1; }
.mode-btn { flex: 1; padding: 12px 8px; border: 0.5px solid var(--border); border-radius: 6px; text-align: center; transition: all 0.12s; }
.mode-btn.act { border-color: #FFFFFF; background: #0E0E18; }
.mode-btn.locked { opacity: 0.3; pointer-events: none; }
.mode-num { font-size: 18px; letter-spacing: 0.05em; display: block; color: var(--dim); }
.mode-btn.act .mode-num { color: var(--accent2); }
.mode-lbl { font-size: 8px; letter-spacing: 0.2em; text-transform: uppercase; color: #E0E0EE; display: block; margin-top: 2px; }
.mode-btn.act .mode-lbl { color: var(--mid); }

/* ── SPLASH ── */
#splash { background: #000; justify-content: center; align-items: center; z-index: 100; }
#splash.active { opacity: 1; }
.splash-inner { display: flex; flex-direction: column; align-items: center; }
.splash-door { position: relative; width: 180px; height: 260px; display: flex; justify-content: center; align-items: center; }
.door-frame { position: absolute; inset: 0; border: 1px solid #2A2A3C; border-radius: 2px; }
.door-left, .door-right { position: absolute; top: 0; bottom: 0; width: 50%; background: #080810; border: 0.5px solid #1E1E2C; transform-origin: left center; transition: transform 1.2s cubic-bezier(0.4,0,0.2,1); }
.door-right { left: 50%; transform-origin: right center; }
.door-left.open { transform: perspective(400px) rotateY(75deg); }
.door-right.open { transform: perspective(400px) rotateY(-75deg); }
.door-light { position: absolute; inset: 0; background: radial-gradient(ellipse at center, rgba(255,200,100,0.12) 0%, transparent 70%); opacity: 0; transition: opacity 0.8s ease; }
.door-light.show { opacity: 1; }
.splash-logo { margin-top: 48px; text-align: center; opacity: 0; transition: opacity 1s ease; }
.splash-logo.show { opacity: 1; }
.splash-logo-main { font-family: var(--font-serif); font-style: italic; font-weight: 300; font-size: 28px; color: #D0D0E5; letter-spacing: 0.15em; display: block; margin-bottom: 6px; }
.splash-logo-sub { font-size: 8px; letter-spacing: 0.3em; color: #E0E0EE; text-transform: uppercase; }

/* ── ONBOARDING ── */
#onboarding { justify-content: flex-start; padding-top: calc(var(--safe-t) + 20px); }
.ob-body { flex: 1; display: flex; flex-direction: column; padding: 0 24px; }
.ob-step-indicator { display: flex; gap: 6px; margin-bottom: 32px; }
.ob-step-dot { width: 20px; height: 2px; background: var(--border); border-radius: 1px; transition: background 0.3s; }
.ob-step-dot.active { background: var(--accent); }
.ob-step-dot.done { background: #3A3A54; }
.ob-content { flex: 1; display: flex; flex-direction: column; justify-content: center; }
.ob-step-label { font-size: 8px; letter-spacing: 0.28em; color: var(--dim); text-transform: uppercase; margin-bottom: 16px; }
.ob-title { font-family: var(--font-serif); font-style: italic; font-weight: 300; font-size: 28px; color: var(--mid); letter-spacing: 0.1em; margin-bottom: 16px; line-height: 1.3; }
.ob-desc { font-size: 13px; color: var(--dim); line-height: 1.8; letter-spacing: 0.04em; }
.ob-bottom { padding: 24px 0 calc(16px + var(--safe-b)); }
.ob-skip { text-align: center; margin-top: 12px; font-size: 9px; letter-spacing: 0.18em; color: var(--dim); text-transform: uppercase; display: none; }

/* ── VIEWFINDER ── */
.viewfinder { flex: 1; background: #060608; position: relative; overflow: hidden; cursor: pointer; }
#cameraFeed { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: grayscale(100%) contrast(1.08) brightness(0.9); }
#captureCanvas { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.vf-grid { position: absolute; inset: 0; pointer-events: none; }
.vf-line { position: absolute; background: rgba(180,180,210,0.18); }
.vf-line.h { left: 0; right: 0; height: 0.5px; }
.vf-line.v { top: 0; bottom: 0; width: 0.5px; }
.vf-corner { position: absolute; width: 16px; height: 16px; border-color: #B8B8D0; border-style: solid; }
.vf-corner.tl { top: 14px; left: 14px; border-width: 1px 0 0 1px; }
.vf-corner.tr { top: 14px; right: 14px; border-width: 1px 1px 0 0; }
.vf-corner.bl { bottom: 14px; left: 14px; border-width: 0 0 1px 1px; }
.vf-corner.br { bottom: 14px; right: 14px; border-width: 0 1px 1px 0; }
.vf-cross-h { position: absolute; top: 50%; left: 25%; right: 25%; height: 0.5px; background: rgba(200,200,225,0.25); }
.vf-cross-v { position: absolute; left: 50%; top: 25%; bottom: 25%; width: 0.5px; background: rgba(200,200,225,0.25); }
.vf-film-label { position: absolute; top: 12px; left: 50%; transform: translateX(-50%); font-size: 8px; letter-spacing: 0.18em; color: #E8E8F2; text-transform: uppercase; white-space: nowrap; }
.vf-iso { position: absolute; bottom: 12px; right: 14px; font-size: 8px; letter-spacing: 0.12em; color: #E8E8F2; }
.vf-condition { position: absolute; bottom: 12px; left: 14px; font-size: 7px; letter-spacing: 0.14em; color: #E0E0EE; }
.flash-overlay { position: absolute; inset: 0; background: #fff; opacity: 0; pointer-events: none; }

/* ── FRAME STRIP ── */
.frame-strip { display: flex; gap: 2px; padding: 6px 14px; overflow: hidden; flex-shrink: 0; position: relative; z-index: 2; }
.frame-cell { height: 9px; flex: 1; border-radius: 1px; background: #1E1E2C; border: 0.5px solid var(--border); transition: background 0.2s; }
.frame-cell.shot { background: #28283E; }

/* ── CTRL BAR ── */
.ctrl-bar { padding: 12px 16px 10px; border-top: 0.5px solid var(--border); position: relative; z-index: 2; flex-shrink: 0; background: var(--bg); }
.ctrl-top { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; }
.film-id { font-size: 9px; letter-spacing: 0.12em; color: var(--dim); }
.film-id span { color: var(--mid); }
.counter-row { display: flex; align-items: center; gap: 6px; }
.counter-lbl { font-size: 8px; letter-spacing: 0.18em; color: #E0E0EE; text-transform: uppercase; }
.dial { display: flex; gap: 3px; }
.dial-digit { width: 20px; height: 26px; background: var(--bg4); border: 0.5px solid var(--border); border-radius: 3px; display: flex; align-items: center; justify-content: center; font-size: 13px; color: #D0D0E5; transition: color 0.2s; }
.dial-digit.urgent { color: #A07070; }
.shutter-row { display: flex; justify-content: center; align-items: center; gap: 20px; margin-bottom: 8px; }
.shutter-side { flex: 1; }
.shutter-side.right { text-align: right; }
.shutter-meta { font-size: 8px; letter-spacing: 0.14em; color: #E0E0EE; text-transform: uppercase; line-height: 1.6; }
.shutter-ring { width: 60px; height: 60px; border-radius: 50%; border: 1.5px solid #3A3A54; display: flex; align-items: center; justify-content: center; cursor: pointer; transition: border-color 0.1s; flex-shrink: 0; }
.shutter-ring:active { border-color: #7A7A98; }
.shutter-btn { width: 46px; height: 46px; border-radius: 50%; background: #141622; border: 0.5px solid #2A2A3C; display: flex; align-items: center; justify-content: center; transition: background 0.1s; }
.shutter-ring:active .shutter-btn { background: #1C1C2E; }
.shutter-dot { width: 8px; height: 8px; border-radius: 50%; background: #5A5A78; }
.wind-wrap { }
.wind-track { height: 2px; background: #0E0E18; border-radius: 1px; overflow: hidden; }
.wind-fill { height: 100%; background: #3A3A58; border-radius: 1px; width: 0%; transition: width 0.2s; }
.wind-lbl { font-size: 8px; letter-spacing: 0.16em; color: #E0E0EE; text-transform: uppercase; text-align: center; margin-top: 5px; transition: color 0.2s; }
.wind-lbl.act { color: var(--mid); }

/* ── TRAY / DEVELOP ── */
.tray-area { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 12px 16px 6px; position: relative; z-index: 1; gap: 10px; }
.condition-hint { font-family: var(--font-serif); font-style: italic; font-weight: 300; font-size: 12px; color: var(--dim); letter-spacing: 0.1em; text-align: center; min-height: 18px; opacity: 0; transition: opacity 0.6s ease; }
.condition-hint.show { opacity: 1; }
.tray { width: 100%; aspect-ratio: 3/2; background: #050508; border: 0.5px solid var(--border); border-radius: 4px; position: relative; overflow: hidden; cursor: pointer; }
#developCanvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.emerge-overlay { position: absolute; inset: 0; background: #050508; transition: opacity 1.5s ease-out; pointer-events: none; }
.vignette { position: absolute; inset: 0; background: radial-gradient(ellipse at center, transparent 40%, rgba(0,0,0,0.55) 100%); pointer-events: none; }
.tray-label { position: absolute; top: 10px; left: 12px; font-size: 7px; letter-spacing: 0.2em; color: #E8E8F2; text-transform: uppercase; }
.tray-temp { position: absolute; top: 10px; right: 12px; font-size: 7px; letter-spacing: 0.15em; color: #E8E8F2; }
.rock-hint { position: absolute; bottom: 10px; left: 50%; transform: translateX(-50%); font-size: 7px; letter-spacing: 0.18em; color: #2A2A44; text-transform: uppercase; white-space: nowrap; opacity: 0; transition: opacity 0.3s; }
.rock-hint.show { opacity: 1; }
.frame-selector { display: flex; gap: 4px; overflow-x: auto; width: 100%; }
.frame-selector::-webkit-scrollbar { display: none; }
.frame-thumb { width: 42px; height: 28px; border-radius: 3px; border: 0.5px solid var(--border); flex-shrink: 0; cursor: pointer; position: relative; overflow: hidden; transition: border-color 0.12s; }
.frame-thumb.active { border-color: var(--accent); }
.frame-thumb canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.frame-thumb-num { position: absolute; bottom: 2px; right: 3px; font-size: 6px; color: #E0E0EE; }

/* ── ZONE PANEL ── */
.zone-panel { padding: 0 16px 8px; position: relative; z-index: 2; flex-shrink: 0; }
.zone-label-row { display: flex; justify-content: space-between; align-items: center; margin-bottom: 6px; }
.zone-label { font-size: 7px; letter-spacing: 0.2em; color: #E0E0EE; text-transform: uppercase; }
.zone-val { font-family: var(--font-serif); font-style: italic; font-weight: 300; font-size: 11px; color: var(--mid); }
.zone-track { height: 28px; background: var(--bg4); border: 0.5px solid var(--border); border-radius: 4px; position: relative; overflow: hidden; cursor: ew-resize; margin-bottom: 4px; }
.zone-fill { position: absolute; left: 0; top: 0; bottom: 0; background: #3A3A55; border-radius: 4px; transition: width 0.05s; }
.zone-thumb { position: absolute; top: 50%; transform: translate(-50%,-50%); width: 3px; height: 18px; background: #6A6A88; border-radius: 2px; }
.zone-ticks { position: absolute; inset: 0; display: flex; align-items: flex-end; padding: 0 2px 3px; pointer-events: none; }
.zone-tick { flex: 1; display: flex; justify-content: center; }
.zone-tick-line { width: 0.5px; height: 5px; background: #2E2E40; }
.zone-tick-line.mid { height: 8px; background: #252538; }

/* ── DEV PROGRESS ── */
.dev-progress-wrap { padding: 0 16px 6px; position: relative; z-index: 2; flex-shrink: 0; }
.dev-track { height: 1.5px; background: #0E0E18; border-radius: 1px; overflow: hidden; }
.dev-fill { height: 100%; background: #3A3A58; width: 0%; transition: width 0.3s; }
.dev-lbl { font-size: 7px; letter-spacing: 0.16em; color: #E0E0EE; text-transform: uppercase; text-align: center; margin-top: 4px; }

/* ── PRINT / FIX ── */
.print-area { flex: 1; display: flex; align-items: center; justify-content: center; padding: 14px 18px 8px; position: relative; z-index: 1; }
.print-wrap { width: 100%; }
.print-border { background: #F2EFE8; padding: 12px 12px 0; border-radius: 2px; }
.print-img { width: 100%; aspect-ratio: 3/2; background: #1A1A1A; position: relative; overflow: hidden; border-radius: 1px; }
#fixCanvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.fix-overlay { position: absolute; inset: 0; background: #050508; pointer-events: none; transition: opacity 2s ease-out; }
.print-meta { padding: 8px 4px 10px; }
.print-caption { font-family: var(--font-serif); font-style: italic; font-weight: 300; font-size: 9px; color: #7A7060; letter-spacing: 0.12em; }
.print-date { font-size: 8px; color: #8A8070; letter-spacing: 0.1em; margin-top: 2px; }
.fix-meta-row { padding: 0 16px 6px; display: flex; justify-content: space-between; position: relative; z-index: 2; flex-shrink: 0; }
.fix-meta { text-align: center; }
.fix-meta-val { font-size: 10px; letter-spacing: 0.08em; color: var(--mid); display: block; margin-bottom: 2px; }
.fix-meta-key { font-size: 7px; letter-spacing: 0.18em; color: #E0E0EE; text-transform: uppercase; }
.fix-steps-row { display: flex; justify-content: center; gap: 8px; margin-bottom: 6px; padding: 0 16px; position: relative; z-index: 2; flex-shrink: 0; }
.fix-step-dot { width: 5px; height: 5px; border-radius: 50%; background: #1E1E2C; transition: background 0.4s; }
.fix-step-dot.done { background: #3A3A58; }
.fix-step-dot.current { background: #6A6A88; }
.fix-action-row { display: flex; gap: 8px; margin-top: 8px; }

/* ── COMPLETE ── */
#complete { justify-content: center; align-items: center; z-index: 5; }
.complete-body { padding: 32px 28px; display: flex; flex-direction: column; align-items: center; text-align: center; width: 100%; }
.complete-icon { width: 80px; height: 80px; border-radius: 50%; border: 0.5px solid var(--border2); display: flex; align-items: center; justify-content: center; margin-bottom: 24px; }
.complete-icon-inner { width: 56px; height: 56px; border-radius: 50%; background: #1E1E2E; border: 0.5px solid #2A2A3A; display: flex; align-items: center; justify-content: center; }
.complete-dot { width: 14px; height: 14px; border-radius: 50%; background: var(--accent); }
.complete-title { font-family: var(--font-serif); font-style: italic; font-weight: 300; font-size: 26px; color: var(--mid); letter-spacing: 0.1em; margin-bottom: 8px; }
.complete-sub { font-size: 9px; letter-spacing: 0.18em; color: var(--dim); text-transform: uppercase; margin-bottom: 28px; line-height: 1.9; white-space: pre-line; }
.unlock-row { display: flex; gap: 12px; margin-bottom: 24px; }
.unlock-card { padding: 16px 20px; background: var(--bg2); border: 0.5px solid var(--border2); border-radius: 6px; text-align: center; opacity: 0; transform: translateY(12px); transition: opacity 0.5s ease, transform 0.5s ease; }
.unlock-card.show { opacity: 1; transform: translateY(0); }
.unlock-num { font-size: 22px; letter-spacing: 0.05em; color: var(--accent2); display: block; margin-bottom: 4px; }
.unlock-lbl { font-size: 8px; letter-spacing: 0.2em; color: var(--dim); text-transform: uppercase; }
.rank-reveal { margin-bottom: 24px; opacity: 0; transition: opacity 0.5s ease 0.4s; width: 100%; }
.rank-reveal.show { opacity: 1; }
.rank-badge-title { font-family: var(--font-serif); font-style: italic; font-weight: 300; font-size: 20px; color: var(--mid); margin-bottom: 4px; }
.rank-badge-sub { font-size: 8px; letter-spacing: 0.2em; color: var(--dim); text-transform: uppercase; }

/* ── MAIN NAV ── */
.main-nav {
  position: fixed; bottom: 0; left: 0; right: 0; z-index: 50;
  background: var(--bg); border-top: 0.5px solid var(--border);
  display: flex; padding-bottom: var(--safe-b);
  height: calc(60px + var(--safe-b));
}
.main-nav.hidden { display: none; }
.nav-item { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; color: var(--dim); padding: 8px 0; transition: color 0.12s; }
.nav-item.active { color: var(--accent2); }
.nav-icon { width: 22px; height: 22px; position: relative; }
.nav-icon-camera::before { content: ''; position: absolute; inset: 3px; border: 1px solid currentColor; border-radius: 3px; }
.nav-icon-camera::after { content: ''; position: absolute; top: 6px; left: 50%; transform: translateX(-50%); width: 8px; height: 8px; border-radius: 50%; border: 1px solid currentColor; }
.nav-icon-archive::before { content: ''; position: absolute; top: 4px; left: 3px; right: 3px; height: 2px; background: currentColor; border-radius: 1px; box-shadow: 0 5px 0 currentColor, 0 10px 0 currentColor; }
.nav-icon-community::before { content: ''; position: absolute; top: 4px; left: 4px; width: 7px; height: 7px; border-radius: 50%; border: 1px solid currentColor; }
.nav-icon-community::after { content: ''; position: absolute; top: 4px; right: 4px; width: 7px; height: 7px; border-radius: 50%; border: 1px solid currentColor; }
.nav-icon-profile::before { content: ''; position: absolute; top: 3px; left: 50%; transform: translateX(-50%); width: 8px; height: 8px; border-radius: 50%; border: 1px solid currentColor; }
.nav-icon-profile::after { content: ''; position: absolute; bottom: 3px; left: 3px; right: 3px; height: 6px; border: 1px solid currentColor; border-radius: 3px 3px 0 0; border-bottom: none; }
.nav-icon-settings::before { content: ''; position: absolute; inset: 4px; border-radius: 50%; border: 1.5px solid currentColor; }
.nav-label { font-size: 8px; letter-spacing: 0.12em; text-transform: uppercase; }

/* ── ARCHIVE ── */
.filter-row { display: flex; gap: 6px; padding: 8px 14px; border-bottom: 0.5px solid var(--border); flex-shrink: 0; overflow-x: auto; }
.filter-row::-webkit-scrollbar { display: none; }
.filter-chip { font-size: 7px; letter-spacing: 0.14em; color: #E0E0EE; border: 0.5px solid #1E1E2C; border-radius: 3px; padding: 4px 8px; cursor: pointer; white-space: nowrap; flex-shrink: 0; transition: all 0.12s; }
.filter-chip.act { color: var(--accent); border-color: #2E2E48; background: #0E0E1A; }

.roll-group { margin-bottom: 18px; }
.roll-group-hd { display: flex; align-items: baseline; gap: 8px; margin-bottom: 6px; }
.roll-date { font-size: 8px; letter-spacing: 0.18em; color: var(--dim); text-transform: uppercase; }
.roll-film-name { font-family: var(--font-serif); font-style: italic; font-weight: 300; font-size: 12px; color: #B8B8D0; letter-spacing: 0.1em; }
.roll-card { background: var(--bg4); border: 0.5px solid #2A2A3C; border-radius: 6px; overflow: hidden; cursor: pointer; margin-bottom: 6px; transition: border-color 0.12s; }
.roll-card:active { border-color: #A8A8C0; }
.roll-contact { display: grid; gap: 2px; padding: 8px; }
.roll-contact.fr-1 { grid-template-columns: repeat(1,minmax(0,1fr)); }
.roll-contact.fr-12 { grid-template-columns: repeat(6,minmax(0,1fr)); }
.roll-contact.fr-36 { grid-template-columns: repeat(9,minmax(0,1fr)); }
.contact-cell { aspect-ratio: 2/3; background: #0E0E16; border-radius: 2px; position: relative; overflow: hidden; }
.contact-cell canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.roll-meta { padding: 0 10px 10px; display: flex; align-items: center; justify-content: space-between; }
.roll-meta-film { font-size: 8px; letter-spacing: 0.1em; color: var(--mid); }
.roll-meta-detail { font-size: 7px; letter-spacing: 0.1em; color: #E0E0EE; margin-top: 1px; }
.roll-badge { font-size: 6px; letter-spacing: 0.14em; color: #A8A8C0; padding: 2px 5px; border: 0.5px solid var(--border); border-radius: 2px; text-transform: uppercase; }
.roll-badge.practice { color: #5A4A3A; border-color: #3A2A1A; }
.roll-badge.half { color: #3A4A5A; border-color: #1A2A3A; }
.roll-badge.full { color: #3A5A3A; border-color: #1A3A1A; }

/* ── COMMUNITY ── */
.community-card { background: var(--bg4); border: 0.5px solid #2A2A3C; border-radius: 6px; overflow: hidden; margin-bottom: 10px; }
.community-img { width: 100%; aspect-ratio: 3/2; background: #0E0E14; position: relative; overflow: hidden; }
.community-img canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.community-meta { padding: 10px 14px; border-top: 0.5px solid var(--border); }
.community-recipe { font-family: var(--font-serif); font-style: italic; font-weight: 300; font-size: 13px; color: var(--mid); margin-bottom: 4px; }
.community-film { font-size: 8px; letter-spacing: 0.1em; color: var(--dim); margin-bottom: 6px; }
.community-author { display: flex; align-items: center; gap: 6px; }
.community-username { font-size: 9px; letter-spacing: 0.1em; color: #B8B8D0; }
.community-rank { font-size: 7px; letter-spacing: 0.14em; color: #E0E0EE; padding: 2px 5px; border: 0.5px solid var(--border); border-radius: 2px; text-transform: uppercase; }
.community-actions { display: flex; gap: 6px; margin-top: 8px; }
.community-btn { flex: 1; padding: 8px; background: transparent; border: 0.5px solid var(--border); border-radius: 4px; font-size: 8px; letter-spacing: 0.14em; color: var(--dim); text-transform: uppercase; cursor: pointer; transition: all 0.12s; }
.community-btn:active { background: var(--bg2); color: var(--accent); }

/* ── PROFILE ── */
.profile-hero { padding: 20px 18px 16px; border-bottom: 0.5px solid var(--border); }
.profile-avatar-row { display: flex; align-items: center; gap: 16px; margin-bottom: 16px; }
.avatar { width: 56px; height: 56px; border-radius: 50%; border: 0.5px solid var(--border2); background: var(--bg2); display: flex; align-items: center; justify-content: center; position: relative; flex-shrink: 0; }
.avatar-inner { width: 36px; height: 36px; border-radius: 50%; border: 0.5px solid var(--border); background: #1E1E2C; display: flex; align-items: center; justify-content: center; }
.avatar-dot { width: 10px; height: 10px; border-radius: 50%; background: #2E2E48; }
.level-badge { position: absolute; bottom: -4px; right: -4px; background: var(--bg); border: 0.5px solid #3A3A54; border-radius: 10px; padding: 2px 6px; font-size: 7px; letter-spacing: 0.12em; color: var(--accent); }
.profile-title-block { }
.profile-rank-title { font-family: var(--font-serif); font-style: italic; font-weight: 300; font-size: 22px; color: var(--mid); letter-spacing: 0.08em; margin-bottom: 2px; }
.profile-rank-en { font-size: 8px; letter-spacing: 0.22em; color: var(--dim); text-transform: uppercase; }
.xp-wrap { }
.xp-labels { display: flex; justify-content: space-between; margin-bottom: 5px; }
.xp-label { font-size: 7px; letter-spacing: 0.16em; color: #E0E0EE; text-transform: uppercase; }
.xp-val { font-size: 7px; letter-spacing: 0.12em; color: #A8A8C0; }
.xp-track { height: 2px; background: #0E0E18; border-radius: 1px; overflow: hidden; }
.xp-fill { height: 100%; background: #3A3A58; border-radius: 1px; transition: width 0.6s ease-out; }
.next-rank { font-size: 7px; letter-spacing: 0.14em; color: #222232; text-align: right; margin-top: 4px; }
.next-rank span { color: #A8A8C0; }
.stats-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 6px; padding: 14px 14px 0; }
.stat-card { background: var(--bg2); border: 0.5px solid #2A2A3C; border-radius: 6px; padding: 12px 10px; text-align: center; }
.stat-val { font-size: 18px; letter-spacing: 0.05em; color: #D0D0E5; display: block; margin-bottom: 3px; }
.stat-key { font-size: 7px; letter-spacing: 0.16em; color: #E0E0EE; text-transform: uppercase; }
.profile-section { padding: 14px 14px 0; }
.profile-section-title { font-size: 7px; letter-spacing: 0.28em; color: #E0E0EE; text-transform: uppercase; margin-bottom: 8px; padding-bottom: 6px; border-bottom: 0.5px solid #1E1E2C; }
.rank-list { display: flex; flex-direction: column; gap: 5px; }
.rank-row { display: flex; align-items: center; gap: 10px; padding: 10px 12px; background: var(--bg2); border: 0.5px solid #2A2A3C; border-radius: 6px; position: relative; overflow: hidden; }
.rank-row.current { border-color: #3A3A58; }
.rank-row.past { opacity: 0.45; }
.rank-pip { width: 6px; height: 6px; border-radius: 50%; background: #1E1E2C; flex-shrink: 0; }
.rank-row.current .rank-pip { background: var(--accent); }
.rank-row.past .rank-pip { background: #2E2E48; }
.rank-body { flex: 1; min-width: 0; }
.rank-title-text { font-size: 10px; letter-spacing: 0.1em; color: var(--mid); margin-bottom: 1px; }
.rank-row.current .rank-title-text { color: var(--accent2); }
.rank-en-text { font-size: 8px; letter-spacing: 0.08em; color: #E0E0EE; font-family: var(--font-serif); font-style: italic; }
.rank-row.current .rank-en-text { color: #B8B8D0; }
.rank-req { font-size: 7px; letter-spacing: 0.12em; color: #2E2E40; text-align: right; flex-shrink: 0; }
.rank-row.current .rank-req { color: #A8A8C0; }
.current-marker { position: absolute; left: 0; top: 0; bottom: 0; width: 2px; background: #4A4A68; }
.activity-list { display: flex; flex-direction: column; gap: 5px; }
.activity-row { display: flex; align-items: center; gap: 10px; padding: 9px 12px; background: var(--bg2); border: 0.5px solid #2A2A3C; border-radius: 6px; }
.activity-date { font-size: 8px; letter-spacing: 0.1em; color: var(--dim); white-space: nowrap; flex-shrink: 0; }
.activity-body { flex: 1; min-width: 0; }
.activity-film { font-size: 9px; letter-spacing: 0.08em; color: var(--mid); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.activity-detail { font-size: 7px; letter-spacing: 0.1em; color: #E0E0EE; margin-top: 1px; }
.activity-badge { font-size: 7px; letter-spacing: 0.1em; color: #A8A8C0; padding: 2px 6px; border: 0.5px solid var(--border); border-radius: 2px; flex-shrink: 0; }

/* ── SETTINGS ── */
.settings-section { padding: 14px 14px 0; }
.settings-section-title { font-size: 7px; letter-spacing: 0.28em; color: #E0E0EE; text-transform: uppercase; margin-bottom: 8px; padding-bottom: 6px; border-bottom: 0.5px solid #1E1E2C; }
.settings-row { padding: 11px 13px; background: var(--bg2); border: 0.5px solid #2A2A3C; border-radius: 6px; margin-bottom: 5px; }
.settings-row-main { display: flex; align-items: center; justify-content: space-between; min-height: 36px; }
.settings-row-left { flex: 1; min-width: 0; }
.settings-label { font-size: 10px; letter-spacing: 0.1em; color: var(--text); margin-bottom: 2px; }
.settings-desc { font-size: 8px; letter-spacing: 0.08em; color: #E8E8F2; line-height: 1.5; }
.seg { display: flex; border: 0.5px solid var(--border); border-radius: 4px; overflow: hidden; flex-shrink: 0; margin-left: 10px; }
.seg-btn { padding: 5px 9px; font-size: 8px; letter-spacing: 0.08em; color: #A8A8C0; background: transparent; border: none; cursor: pointer; transition: all 0.12s; white-space: nowrap; }
.seg-btn+.seg-btn { border-left: 0.5px solid var(--border); }
.seg-btn.act { background: #1A1A2E; color: var(--accent2); }
.toggle { width: 36px; height: 20px; background: #1E1E2C; border: 0.5px solid var(--border); border-radius: 10px; position: relative; cursor: pointer; transition: background 0.2s; flex-shrink: 0; margin-left: 10px; }
.toggle.on { background: #3A3A55; border-color: #3A3A58; }
.toggle-knob { width: 14px; height: 14px; background: #2E2E3E; border-radius: 50%; position: absolute; top: 2px; left: 2px; transition: left 0.2s, background 0.2s; }
.toggle.on .toggle-knob { left: 18px; background: var(--accent2); }
.shutter-cards { display: flex; flex-direction: column; gap: 5px; margin-top: 8px; }
.shutter-card { padding: 10px 12px; background: var(--bg4); border: 0.5px solid var(--border); border-radius: 5px; cursor: pointer; display: flex; align-items: center; gap: 10px; transition: all 0.12s; }
.shutter-card.act { border-color: #FFFFFF; background: #0E0E1E; }
.shutter-icon { width: 28px; height: 28px; border-radius: 50%; border: 0.5px solid #2A2A3A; flex-shrink: 0; display: flex; align-items: center; justify-content: center; }
.shutter-card.act .shutter-icon { border-color: #B8B8D0; }
.shutter-sound-dot { border-radius: 50%; background: #3A3A52; }
.shutter-card.act .shutter-sound-dot { background: var(--accent2); }
.shutter-sound-body { flex: 1; min-width: 0; }
.shutter-sound-name { font-size: 10px; letter-spacing: 0.08em; color: var(--mid); margin-bottom: 2px; }
.shutter-card.act .shutter-sound-name { color: var(--accent2); }
.shutter-sound-char { font-size: 8px; letter-spacing: 0.06em; color: #E0E0EE; font-family: var(--font-serif); font-style: italic; }
.shutter-card.act .shutter-sound-char { color: #B8B8D0; }
.dev-cards { display: flex; flex-direction: column; gap: 5px; margin-top: 8px; }
.dev-card { padding: 11px 12px; background: var(--bg4); border: 0.5px solid var(--border); border-radius: 5px; cursor: pointer; transition: all 0.12s; }
.dev-card.act { border-color: #FFFFFF; background: #0E0E1E; }
.dev-card-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 5px; }
.dev-card-name { font-size: 10px; letter-spacing: 0.1em; color: var(--mid); }
.dev-card.act .dev-card-name { color: var(--accent2); }
.dev-card-tag { font-size: 7px; letter-spacing: 0.14em; color: #E0E0EE; padding: 2px 6px; border: 0.5px solid var(--border); border-radius: 2px; text-transform: uppercase; }
.dev-card.act .dev-card-tag { color: #B8B8D0; border-color: #2E2E48; }
.dev-card-desc { font-size: 8px; letter-spacing: 0.06em; color: #E0E0EE; line-height: 1.6; font-family: var(--font-serif); font-style: italic; margin-bottom: 8px; }
.dev-card.act .dev-card-desc { color: #B8B8D0; }
.dev-bars { display: flex; flex-direction: column; gap: 4px; }
.dev-bar-row { display: flex; align-items: center; gap: 6px; }
.dev-bar-key { font-size: 7px; letter-spacing: 0.12em; color: #222232; text-transform: uppercase; width: 48px; flex-shrink: 0; }
.dev-card.act .dev-bar-key { color: #363656; }
.dev-bar-track { flex: 1; height: 2px; background: #0E0E18; border-radius: 1px; }
.dev-bar-fill { height: 100%; border-radius: 1px; background: #2E2E48; }
.dev-card.act .dev-bar-fill { background: #5A5A88; }

/* ── ROLL CARDS ── */
.roll-cards { display: flex; gap: 5px; margin-top: 8px; }
.roll-option { flex: 1; padding: 10px 8px; background: var(--bg4); border: 0.5px solid var(--border); border-radius: 5px; cursor: pointer; text-align: center; transition: all 0.12s; }
.roll-option.act { border-color: #FFFFFF; background: #0E0E1E; }
.roll-option-num { font-size: 16px; letter-spacing: 0.05em; display: block; color: #A8A8C0; margin-bottom: 3px; }
.roll-option.act .roll-option-num { color: var(--accent2); }
.roll-option-lbl { font-size: 7px; letter-spacing: 0.18em; color: #E0E0EE; text-transform: uppercase; }
.roll-option.act .roll-option-lbl { color: #B8B8D0; }

/* ── GUIDANCE ── */
.guidance { position: fixed; inset: 0; z-index: 80; }
.guidance.hidden { display: none; }
.guidance-backdrop { position: absolute; inset: 0; background: rgba(0,0,0,0.78); }
.guidance-bubble { position: absolute; bottom: 0; left: 0; right: 0; background: var(--bg2); border-top: 0.5px solid var(--border2); padding: 20px 20px calc(20px + var(--safe-b)); transform: translateY(0); }
.guidance-step { font-size: 8px; letter-spacing: 0.22em; color: var(--dim); text-transform: uppercase; margin-bottom: 8px; }
.guidance-text { font-family: var(--font-serif); font-style: italic; font-weight: 300; font-size: 16px; color: var(--mid); line-height: 1.7; margin-bottom: 16px; }

/* ── MODAL ── */
.modal { position: fixed; inset: 0; z-index: 90; display: flex; align-items: flex-end; }
.modal.hidden { display: none; }
.modal-backdrop { position: absolute; inset: 0; background: rgba(0,0,0,0.7); }
.modal-box { position: relative; background: var(--bg2); border-top: 0.5px solid var(--border2); border-radius: 12px 12px 0 0; padding: 24px 20px calc(24px + var(--safe-b)); width: 100%; }
.modal-title { font-family: var(--font-serif); font-style: italic; font-weight: 300; font-size: 18px; color: var(--mid); margin-bottom: 14px; }
.modal-input { width: 100%; padding: 12px 14px; background: var(--bg4); border: 0.5px solid var(--border2); border-radius: 6px; font-size: 14px; letter-spacing: 0.06em; margin-bottom: 12px; }
.modal-actions { display: flex; gap: 8px; }
.modal-actions .primary-btn { flex: 1; }
.modal-actions .action-btn { flex: 1; opacity: 1; pointer-events: auto; padding: 15px; }