:root{
  --paper:#e9dfc4;
  --paper-dim:#d9cba0;
  --ink:#211c15;
  --ink-soft:#4a4436;
  --archive-bg:#141210;
  --archive-bg-2:#1c1814;
  --archive-line:#3a342a;
  --accent-red:#9b3130;
  --accent-red-dim:#6e2523;
  --phosphor:#e8a23a;
  --phosphor-dim:#8a5c1f;
  --phosphor-bg:#160f06;
  --gold:#b98b3e;
  font-family:'Spectral',serif;
}
:root:not([data-theme="light"]){ --surface:#141210; --on-surface:#e9dfc4; }
@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]){ --surface:#141210; --on-surface:#e9dfc4; } }
:root[data-theme="dark"]{ --surface:#141210; --on-surface:#e9dfc4; }
:root[data-theme="light"]{ --surface:#141210; --on-surface:#e9dfc4; }

*{box-sizing:border-box;}
html,body{margin:0;padding:0;}
body{
  background:var(--archive-bg);
  color:var(--paper);
  min-height:100vh;
  overflow-x:hidden;
}

/* film grain */
body::before{
  content:"";
  position:fixed; inset:0; pointer-events:none; z-index:999;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='120' height='120'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%25' height='100%25' filter='url(%23n)' opacity='0.05'/></svg>");
  opacity:.5;
  mix-blend-mode:overlay;
}

/* ============================================================
   SCREEN 1 — CASE BOARD
   ============================================================ */
#board{
  background:
    radial-gradient(ellipse at top left, #241f18 0%, var(--archive-bg) 60%),
    var(--archive-bg);
  padding:28px 16px 60px;
}
.board-head{
  display:flex; justify-content:space-between; align-items:flex-end;
  border-bottom:1px solid var(--archive-line);
  padding-bottom:14px; margin-bottom:22px;
  flex-wrap:wrap; gap:10px;
}
.board-head h1{
  font-family:'Spectral SC',serif;
  font-weight:600;
  font-size:22px;
  letter-spacing:.02em;
  margin:0;
  color:var(--paper);
}
.board-head .sub{
  font-family:'Courier Prime',monospace;
  font-size:11px;
  color:var(--phosphor-dim);
  margin-top:4px;
}
.badge-chip{
  font-family:'Courier Prime',monospace;
  font-size:11px;
  color:var(--phosphor);
  border:1px solid var(--phosphor-dim);
  padding:6px 10px;
  background:rgba(232,162,58,.06);
}

.folder-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(150px,1fr));
  gap:22px 16px;
}
.folder{
  position:relative;
  aspect-ratio:3/4;
  cursor:pointer;
  transform:rotate(var(--tilt,0deg));
  transition:transform .2s ease;
}
.folder:nth-child(odd){ --tilt:-1.2deg; }
.folder:nth-child(even){ --tilt:0.9deg; }
.folder:hover{ transform:rotate(0deg) translateY(-4px); }

.folder .peek{
  position:absolute; top:-4px; left:10%; right:10%; height:16px;
  background:#e6dcc0; border:1px solid #a9976a; z-index:0;
  opacity:0; transform:translateY(8px);
}
.folder.opening .peek{ animation:peekUp .45s ease forwards .12s; }
@keyframes peekUp{ to{ opacity:1; transform:translateY(-16px); } }
.folder.opening .tab{ animation:tabPeel .5s ease forwards; }
@keyframes tabPeel{ 40%{ transform:translateY(-9px) rotate(-4deg); } 100%{ transform:translateY(-9px) rotate(-4deg); } }
.folder.opening .body{ animation:folderPop .55s ease forwards; }
@keyframes folderPop{ 0%{ transform:scale(1) rotate(0); } 45%{ transform:scale(1.07) rotate(0.5deg); } 100%{ transform:scale(1.02) rotate(0); box-shadow:0 14px 28px rgba(0,0,0,.55); } }

.folder .tab{
  position:absolute; top:-11px; left:14px;
  width:52%; height:16px;
  background:#c9a961;
  border:1px solid #8f7238;
  border-bottom:none;
  clip-path:polygon(6% 0, 94% 0, 100% 100%, 0% 100%);
  font-family:'Courier Prime',monospace;
  font-size:9px; color:#3a2c10; text-align:center; line-height:16px;
  letter-spacing:.04em;
}
.folder .body{
  position:relative;
  width:100%; height:100%;
  background:
    linear-gradient(160deg, #cbab68 0%, #b8964f 55%, #a9873f 100%);
  border:1px solid #7a5f2c;
  box-shadow:0 6px 14px rgba(0,0,0,.45), inset 0 0 30px rgba(0,0,0,.12);
  padding:14px 10px 10px;
  display:flex; flex-direction:column; justify-content:space-between;
}
.folder .body::after{
  content:"";
  position:absolute; inset:0;
  background-image:repeating-linear-gradient(115deg, rgba(0,0,0,.04) 0 2px, transparent 2px 5px);
  pointer-events:none;
}
.folder .case-no{
  font-family:'Courier Prime',monospace;
  font-size:10px; color:#3a2c10; letter-spacing:.06em;
}
.folder .case-name{
  font-family:'Spectral',serif;
  font-weight:600;
  font-size:13px; color:#241a08; line-height:1.25;
  margin-top:4px;
}
.folder .stamp{
  align-self:flex-start;
  font-family:'Courier Prime',monospace;
  font-size:9.5px; letter-spacing:.06em;
  padding:3px 6px;
  border:1.5px solid currentColor;
  transform:rotate(-6deg);
  text-transform:uppercase;
}
.stamp.locked{ color:#5c4a22; opacity:.55; }
.stamp.active{ color:var(--accent-red); }
.stamp.reviewed{ color:#2f5a3a; }
.stamp.full{ color:#1b3a24; background:rgba(27,58,36,.08); }

.folder.is-locked .body{ filter:grayscale(.4) brightness(.75); }
.folder.is-locked{ cursor:not-allowed; }

/* red string overlay, decorative */
.corkboard-note{
  margin-top:30px;
  font-family:'Courier Prime',monospace;
  font-size:10.5px;
  color:var(--ink-soft);
  border-left:2px solid var(--accent-red-dim);
  padding-left:10px;
  max-width:520px;
}

/* ============================================================
   SCREEN 2 — MAINFRAME TERMINAL
   ============================================================ */
#terminal{
  background:var(--phosphor-bg);
  min-height:calc(100vh - 46px);
  padding:20px 14px 60px;
  font-family:'Courier Prime',monospace;
  color:var(--phosphor);
  position:relative;
}
#terminal::before{
  content:"";
  position:absolute; inset:0;
  background:repeating-linear-gradient(0deg, rgba(0,0,0,.18) 0px, rgba(0,0,0,.18) 1px, transparent 1px, transparent 3px);
  pointer-events:none; opacity:.35;
}
.term-frame{
  max-width:640px; margin:0 auto;
  border:1px solid var(--phosphor-dim);
  box-shadow:0 0 24px rgba(232,162,58,.12), inset 0 0 40px rgba(232,162,58,.04);
  padding:16px 16px 20px;
}
.term-title{
  display:flex; justify-content:space-between;
  font-size:10.5px; letter-spacing:.08em;
  color:var(--phosphor-dim);
  border-bottom:1px dashed var(--phosphor-dim);
  padding-bottom:8px; margin-bottom:12px;
}
.term-body{ font-size:13px; line-height:1.7; min-height:220px; }
.term-body .line{ opacity:0; animation:reveal .1s forwards; }
.term-body .dim{ color:var(--phosphor-dim); }
.term-body .warn{ color:var(--accent-red); }
@keyframes reveal{ to{opacity:1;} }

.pw-row{
  margin-top:16px; display:flex; align-items:center; gap:8px;
  border:1px solid var(--phosphor-dim); padding:8px 10px;
}
.pw-row span.prompt{ color:var(--phosphor-dim); }
.pw-row input{
  flex:1; background:none; border:none; outline:none;
  color:var(--phosphor); font-family:'Courier Prime',monospace; font-size:13px;
  letter-spacing:.06em;
}
.pw-row .caret{
  width:8px; height:15px; background:var(--phosphor);
  animation:blink 1s steps(1) infinite;
}
@keyframes blink{ 50%{opacity:0;} }

.breach-bar{
  margin-top:16px;
  height:6px; background:rgba(232,162,58,.12);
  border:1px solid var(--phosphor-dim);
}
.breach-bar > div{
  height:100%; width:0%;
  background:var(--phosphor);
  transition:width 2.2s ease;
}
.breach-label{
  font-size:10px; color:var(--phosphor-dim); margin-top:6px;
  display:flex; justify-content:space-between;
}
.term-actions{ margin-top:18px; text-align:center; }
.term-btn{
  font-family:'Courier Prime',monospace;
  background:none; border:1px solid var(--phosphor);
  color:var(--phosphor);
  padding:9px 20px;
  font-size:11px; letter-spacing:.1em;
  cursor:pointer;
}
.term-btn:hover{ background:rgba(232,162,58,.1); }

/* ============================================================
   SCREEN 3 — FIELD DISPATCH
   ============================================================ */
#dispatch{
  background:var(--archive-bg);
  min-height:calc(100vh - 46px);
  padding:22px 16px 60px;
}
.d-wrap{ max-width:520px; margin:0 auto; }
.d-head{
  font-family:'Courier Prime',monospace;
  font-size:10.5px; letter-spacing:.08em;
  color:var(--phosphor-dim);
  display:flex; justify-content:space-between;
  border-bottom:1px solid var(--archive-line);
  padding-bottom:10px; margin-bottom:18px;
}
.d-card{
  background:var(--archive-bg-2);
  border:1px solid var(--archive-line);
  padding:20px 18px;
}
.d-runner{
  font-family:'Spectral SC',serif; font-size:16px; color:var(--paper);
  margin:0 0 4px;
}
.d-loc{
  font-family:'Courier Prime',monospace; font-size:11px; color:var(--phosphor-dim);
  margin-bottom:18px;
}
.d-clock{
  font-family:'Courier Prime',monospace;
  font-size:44px; letter-spacing:.04em;
  color:var(--phosphor);
  text-align:center;
  margin:6px 0 4px;
  text-shadow:0 0 14px rgba(232,162,58,.25);
}
.d-clock-label{
  text-align:center; font-family:'Courier Prime',monospace;
  font-size:10px; color:var(--ink-soft); letter-spacing:.1em; margin-bottom:20px;
}
.d-route{
  position:relative; height:64px; margin:0 4px 22px;
}
.d-route svg{ width:100%; height:100%; display:block; }
.d-route .dot{
  fill:var(--phosphor);
  filter:drop-shadow(0 0 4px rgba(232,162,58,.6));
}
.d-status-row{
  display:flex; align-items:center; gap:8px;
  font-family:'Courier Prime',monospace; font-size:11px;
  color:var(--paper-dim);
  margin-bottom:18px;
}
.d-status-row .pulse{
  width:7px; height:7px; border-radius:50%;
  background:var(--accent-red);
  animation:pulse 1.4s ease-in-out infinite;
}
@keyframes pulse{ 0%,100%{opacity:1;} 50%{opacity:.25;} }

.d-waveform{
  display:flex; align-items:flex-end; gap:2px;
  height:34px; margin-bottom:6px; opacity:.35;
}
.d-waveform span{
  flex:1; background:var(--phosphor-dim);
  animation:wf 1.6s ease-in-out infinite;
}
@keyframes wf{ 0%,100%{transform:scaleY(.3);} 50%{transform:scaleY(1);} }
.d-note{
  font-family:'Courier Prime',monospace; font-size:10px; color:var(--ink-soft);
  text-align:center;
}
.d-footer{
  margin-top:16px; text-align:center;
  font-family:'Spectral',serif; font-style:italic; font-size:12.5px;
  color:var(--paper-dim);
}

@media (max-width:420px){
  .folder-grid{ grid-template-columns:repeat(auto-fill,minmax(130px,1fr)); }
  .d-clock{ font-size:36px; }
}

/* ============================================================
   SCREEN 4 — ACTION MENU
   ============================================================ */
#actions{ background:var(--archive-bg); min-height:calc(100vh - 46px); padding:22px 16px 60px; }
.a-wrap{ max-width:560px; margin:0 auto; }
.a-head{ border-bottom:1px solid var(--archive-line); padding-bottom:14px; margin-bottom:18px; }
.a-head .loc{ font-family:'Spectral SC',serif; font-size:19px; color:var(--paper); }
.a-head .sub{ font-family:'Courier Prime',monospace; font-size:10.5px; color:var(--phosphor-dim); margin-top:4px; }
.a-card{
  display:flex; gap:14px; align-items:flex-start;
  background:var(--archive-bg-2); border:1px solid var(--archive-line);
  padding:16px; margin-bottom:12px; cursor:pointer;
  transition:border-color .15s ease, background .15s ease;
}
.a-card:hover{ border-color:var(--phosphor-dim); background:#221c15; }
.a-card.locked{ cursor:not-allowed; opacity:.5; }
.a-card.locked:hover{ border-color:var(--archive-line); background:var(--archive-bg-2); }
.a-icon{
  font-family:'Courier Prime',monospace; font-size:10px; color:var(--phosphor);
  border:1px solid var(--phosphor-dim); width:40px; height:40px;
  display:flex; align-items:center; justify-content:center; flex-shrink:0;
  text-align:center; line-height:1.1;
}
.a-card.locked .a-icon{ color:var(--ink-soft); border-color:var(--archive-line); }
.a-body h3{ font-family:'Spectral',serif; font-weight:600; font-size:14.5px; color:var(--paper); margin:0 0 4px; }
.a-body p{ font-family:'Spectral',serif; font-size:12px; color:var(--paper-dim); margin:0 0 6px; line-height:1.45; }
.a-body .req{ font-family:'Courier Prime',monospace; font-size:10px; color:var(--accent-red); }
.a-body .yield{ font-family:'Courier Prime',monospace; font-size:10px; color:var(--phosphor-dim); }
.a-select{
  margin-top:20px; width:100%; padding:12px; text-align:center;
  font-family:'Courier Prime',monospace; font-size:11px; letter-spacing:.1em;
  background:none; border:1px solid var(--phosphor); color:var(--phosphor); cursor:pointer;
}
.a-select:hover{ background:rgba(232,162,58,.08); }

/* ============================================================
   SCREEN 5 — INTERVIEW RETURN
   ============================================================ */
#interview{ background:var(--archive-bg); min-height:calc(100vh - 46px); padding:22px 16px 60px; }
.i-wrap{ max-width:520px; margin:0 auto; }
.i-head{ font-family:'Courier Prime',monospace; font-size:10.5px; color:var(--phosphor-dim); letter-spacing:.08em; margin-bottom:16px; }
.i-card{ background:var(--archive-bg-2); border:1px solid var(--archive-line); padding:20px 18px; }
.i-tape{
  display:flex; align-items:center; gap:14px; padding:14px;
  background:#0f0d0a; border:1px solid var(--archive-line); margin-bottom:18px;
}
.i-reel{
  width:34px; height:34px; border-radius:50%;
  border:3px solid var(--phosphor-dim);
  position:relative; flex-shrink:0;
  animation:spin 3s linear infinite;
}
.i-reel::after{ content:""; position:absolute; inset:9px; border-radius:50%; background:var(--phosphor-dim); }
@keyframes spin{ to{ transform:rotate(360deg); } }
.i-meta{ flex:1; }
.i-meta .name{ font-family:'Spectral SC',serif; font-size:14px; color:var(--paper); }
.i-meta .len{ font-family:'Courier Prime',monospace; font-size:10px; color:var(--phosphor-dim); margin-top:2px; }
.i-play{
  width:34px; height:34px; border:1px solid var(--phosphor); color:var(--phosphor);
  display:flex; align-items:center; justify-content:center; cursor:pointer; flex-shrink:0;
  font-size:12px;
}
.i-wave{ display:flex; align-items:flex-end; gap:2px; height:28px; margin-bottom:18px; }
.i-wave span{ flex:1; background:var(--phosphor-dim); animation:wf 1.4s ease-in-out infinite; }
.i-transcript-toggle{
  font-family:'Courier Prime',monospace; font-size:10px; color:var(--phosphor-dim);
  cursor:pointer; text-decoration:underline; margin-bottom:10px; display:inline-block;
}
.i-transcript{
  font-family:'Spectral',serif; font-size:13px; line-height:1.6; color:var(--paper-dim);
  border-left:2px solid var(--archive-line); padding-left:12px;
  filter:blur(4px); user-select:none; transition:filter .3s ease;
}
.i-transcript.revealed{ filter:blur(0); user-select:auto; }
.i-note{
  margin-top:16px; font-family:'Courier Prime',monospace; font-size:10px; color:var(--accent-red);
}

/* ============================================================
   SCREEN 6 — PHONE CALL
   ============================================================ */
#call{ background:#0b0a08; min-height:calc(100vh - 46px); padding:22px 16px 60px; display:flex; align-items:flex-start; justify-content:center; }
.c-phone{
  max-width:380px; width:100%; background:var(--archive-bg-2);
  border:1px solid var(--archive-line); border-radius:18px; overflow:hidden;
}
.c-top{
  background:#1a1611; padding:22px 18px 16px; text-align:center;
  border-bottom:1px solid var(--archive-line);
}
.c-top .who{ font-family:'Spectral SC',serif; font-size:17px; color:var(--paper); }
.c-top .status{ font-family:'Courier Prime',monospace; font-size:10px; color:var(--phosphor); margin-top:4px; letter-spacing:.08em; }
.c-log{ padding:16px 18px; min-height:180px; }
.c-line{ margin-bottom:14px; font-family:'Spectral',serif; font-size:13px; line-height:1.5; }
.c-line.them{ color:var(--paper-dim); }
.c-line.them::before{ content:"THEM  "; font-family:'Courier Prime',monospace; font-size:9px; color:var(--phosphor-dim); display:block; margin-bottom:2px; letter-spacing:.08em; }
.c-line.you{ color:var(--phosphor); text-align:right; }
.c-line.you::before{ content:"YOU  "; font-family:'Courier Prime',monospace; font-size:9px; color:var(--accent-red); display:block; margin-bottom:2px; letter-spacing:.08em; }
.c-choices{ padding:6px 18px 20px; display:flex; flex-direction:column; gap:8px; }
.c-choice{
  text-align:left; font-family:'Spectral',serif; font-size:12.5px; color:var(--paper);
  background:none; border:1px solid var(--archive-line); padding:10px 12px; cursor:pointer;
}
.c-choice:hover{ border-color:var(--phosphor-dim); }
.c-choice .tag{ font-family:'Courier Prime',monospace; font-size:9px; color:var(--phosphor-dim); display:block; margin-bottom:3px; }

/* ============================================================
   SCREEN 7 — FAKE NEWS SITE
   ============================================================ */
#site{ background:#0b0a08; min-height:calc(100vh - 46px); padding:20px 12px 60px; }
.browser{ max-width:640px; margin:0 auto; background:#fff; color:#1a1a1a; font-family:Georgia,serif; }
.browser-chrome{
  background:#dcdcdc; padding:8px 12px; display:flex; align-items:center; gap:8px;
  font-family:'Courier Prime',monospace; font-size:10px; color:#555;
}
.browser-chrome .dots{ display:flex; gap:4px; }
.browser-chrome .dots span{ width:8px; height:8px; border-radius:50%; background:#b5b5b5; display:inline-block; }
.browser-chrome .url{ flex:1; background:#fff; border:1px solid #bbb; padding:3px 8px; border-radius:3px; }
.site-masthead{ padding:18px 20px 12px; border-bottom:3px double #1a1a1a; text-align:center; }
.site-masthead .name{ font-size:26px; font-weight:bold; letter-spacing:.02em; font-family:'Spectral SC',serif; }
.site-masthead .tag{ font-size:10px; letter-spacing:.15em; color:#666; margin-top:2px; font-family:Georgia,serif; }
.site-article{ padding:18px 20px 30px; }
.site-article h1{ font-size:22px; line-height:1.25; margin:0 0 8px; }
.site-article .byline{ font-size:11px; color:#666; margin-bottom:16px; font-family:'Courier Prime',monospace; }
.site-article p{ font-size:14.5px; line-height:1.65; margin:0 0 14px; color:#222; }
.site-article .highlight{ background:#fff3a3; }
.site-comments{ border-top:1px solid #ccc; padding-top:14px; margin-top:10px; }
.site-comments h4{ font-size:12px; letter-spacing:.06em; color:#666; margin:0 0 10px; font-family:'Courier Prime',monospace; }
.comment{ font-size:12.5px; margin-bottom:12px; padding-bottom:12px; border-bottom:1px dashed #ddd; }
.comment .cname{ font-weight:bold; font-family:'Courier Prime',monospace; font-size:11px; }
.comment .ctext{ color:#333; margin-top:3px; }
.comment.planted .ctext{ background:#fff3a3; }
.site-embed-note{
  max-width:640px; margin:0 auto 10px;
  font-family:'Courier Prime',monospace; font-size:10px; color:var(--phosphor-dim);
  letter-spacing:.05em; padding:0 2px;
}
.browser-chrome .url{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

/* ============================================================
   SCREEN 8 — EVIDENCE SPREAD (folder opened)
   ============================================================ */
#spread{ background:var(--archive-bg); min-height:calc(100vh - 46px); padding:20px 14px 60px; }
.sp-wrap{ max-width:560px; margin:0 auto; }
.sp-head{ border-bottom:1px solid var(--archive-line); padding-bottom:12px; margin-bottom:18px; display:flex; justify-content:space-between; align-items:flex-end; flex-wrap:wrap; gap:8px; }
.sp-head h1{ font-family:'Spectral SC',serif; font-size:19px; color:var(--paper); margin:0; }
.sp-head .sub{ font-family:'Courier Prime',monospace; font-size:10.5px; color:var(--phosphor-dim); margin-top:4px; }
.sp-count{ font-family:'Courier Prime',monospace; font-size:10.5px; color:var(--phosphor); }

.sp-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:18px 14px; }

.sp-item{ position:relative; cursor:pointer; }
.sp-item .new-dot{
  position:absolute; top:-5px; right:-5px; width:9px; height:9px; border-radius:50%;
  background:var(--accent-red); box-shadow:0 0 6px rgba(155,49,48,.7); z-index:2;
}

/* document card */
.sp-item.doc .face{
  background:#e6dcc0; border:1px solid #a9976a; color:#2a2314;
  padding:12px 10px 10px; min-height:150px;
  box-shadow:0 4px 10px rgba(0,0,0,.4);
  transform:rotate(-1deg);
  font-family:'Courier Prime',monospace; font-size:9.5px; line-height:1.5;
  position:relative;
}
.sp-item.doc .face::before{
  content:"📎"; position:absolute; top:-10px; left:8px; font-size:16px;
}
.sp-item.doc .face .label{ font-size:9px; color:#6b5a2e; letter-spacing:.05em; margin-bottom:6px; }
.sp-item.doc .face .excerpt{ opacity:.85; }
.sp-item.doc .face .excerpt::after{ content:" …"; }

/* photo card */
.sp-item.photo .face{
  background:#111; border:6px solid #f2f0e8; border-bottom-width:22px;
  box-shadow:0 5px 12px rgba(0,0,0,.5);
  transform:rotate(1.4deg);
  min-height:120px;
  display:flex; align-items:center; justify-content:center;
  position:relative;
}
.sp-item.photo .face::before{ content:"🧷"; position:absolute; top:-12px; right:10px; font-size:16px; transform:rotate(30deg); }
.sp-item.photo .face .placeholder{
  font-family:'Courier Prime',monospace; font-size:9px; color:#6a6a6a; text-align:center; padding:0 10px;
}
.sp-item.photo .caption{
  font-family:'Courier Prime',monospace; font-size:9px; color:var(--ink-soft); text-align:center; margin-top:4px;
}

/* tape/audio card */
.sp-item.tape .face{
  background:linear-gradient(160deg,#2a2620,#1a1712);
  border:1px solid #4a4030;
  padding:14px 12px; min-height:150px;
  box-shadow:0 4px 10px rgba(0,0,0,.45);
  display:flex; flex-direction:column; justify-content:space-between;
}
.sp-item.tape .reels{ display:flex; justify-content:space-between; padding:0 6px; }
.sp-item.tape .reel-sm{ width:26px; height:26px; border-radius:50%; border:2px solid var(--phosphor-dim); position:relative; }
.sp-item.tape .reel-sm::after{ content:""; position:absolute; inset:7px; border-radius:50%; background:var(--phosphor-dim); }
.sp-item.tape .tlabel{ font-family:'Courier Prime',monospace; font-size:9.5px; color:var(--phosphor); text-align:center; letter-spacing:.04em; }

.sp-item .status-stamp{
  margin-top:8px; font-family:'Courier Prime',monospace; font-size:8.5px; letter-spacing:.06em;
  color:var(--phosphor-dim); text-align:center;
}

.sp-empty-note{
  margin-top:24px; font-family:'Spectral',serif; font-style:italic; font-size:12.5px; color:var(--paper-dim);
  border-left:2px solid var(--accent-red-dim); padding-left:10px;
}

/* entrance stagger when arriving from a folder */
.sp-item{ opacity:1; transform:none; }
.sp-item.stagger-in{
  animation:spIn .45s cubic-bezier(.2,.7,.3,1) both;
}
@keyframes spIn{ from{ opacity:0; transform:translateY(18px) scale(.94); } to{ opacity:1; transform:none; } }

/* in-place zoom overlay */
.ev-overlay{
  position:fixed; inset:0; z-index:200;
  background:rgba(10,9,7,.88);
  display:none; align-items:center; justify-content:center;
  padding:24px 16px;
}
.ev-overlay.show{ display:flex; }
.ev-overlay-inner{
  max-width:420px; width:100%;
  transform:scale(.82); opacity:0;
  transition:transform .28s cubic-bezier(.2,.7,.3,1), opacity .22s ease;
}
.ev-overlay.show .ev-overlay-inner{ transform:scale(1); opacity:1; }

.ev-close{
  display:block; margin:0 0 10px auto;
  font-family:'Courier Prime',monospace; font-size:10px; letter-spacing:.08em;
  color:var(--phosphor-dim); background:none; border:1px solid var(--archive-line);
  padding:6px 10px; cursor:pointer;
}
.ev-close:hover{ color:var(--phosphor); border-color:var(--phosphor-dim); }

.ev-doc{
  background:#e6dcc0; border:1px solid #a9976a; color:#241d10;
  padding:24px 20px; box-shadow:0 18px 40px rgba(0,0,0,.5);
  font-family:'Spectral',serif;
}
.ev-doc .ev-label{ font-family:'Courier Prime',monospace; font-size:10px; color:#6b5a2e; letter-spacing:.06em; margin-bottom:10px; }
.ev-doc .ev-text{ font-size:15px; line-height:1.65; }
.ev-doc .ev-stamp{ margin-top:16px; display:inline-block; border:1.5px solid var(--accent-red); color:var(--accent-red); font-family:'Courier Prime',monospace; font-size:10px; padding:3px 8px; transform:rotate(-5deg); letter-spacing:.06em; }

.ev-photo{ text-align:center; }
.ev-photo .frame{
  background:#111; border:8px solid #f2f0e8; border-bottom-width:34px;
  box-shadow:0 18px 40px rgba(0,0,0,.55);
  min-height:260px; display:flex; align-items:center; justify-content:center;
}
.ev-photo .frame .ph{ font-family:'Courier Prime',monospace; font-size:11px; color:#777; }
.ev-photo .ev-caption{
  margin-top:12px; font-family:'Spectral',serif; font-style:italic; font-size:13px; color:var(--paper-dim);
}

.ev-tape{
  background:var(--archive-bg-2); border:1px solid var(--archive-line);
  padding:20px 18px; box-shadow:0 18px 40px rgba(0,0,0,.5);
}
.ev-tape .ev-title{ font-family:'Spectral SC',serif; font-size:15px; color:var(--paper); margin-bottom:4px; }
.ev-tape .ev-reels{ display:flex; justify-content:center; gap:40px; margin:14px 0; }
.ev-tape .reel-big{ width:52px; height:52px; border-radius:50%; border:3px solid var(--phosphor-dim); position:relative; }
.ev-tape .reel-big::after{ content:""; position:absolute; inset:14px; border-radius:50%; background:var(--phosphor-dim); }
.ev-tape .reel-big.spin{ animation:spin 1.1s linear infinite; }
.ev-tape .ev-wave{ display:flex; align-items:flex-end; gap:2px; height:30px; margin-bottom:12px; }
.ev-tape .ev-wave span{ flex:1; background:var(--phosphor-dim); transform:scaleY(.3); transition:transform .15s ease; }
.ev-tape .ev-wave.playing span{ animation:wf 1.1s ease-in-out infinite; }
.ev-tape .ev-progress{ height:4px; background:rgba(232,162,58,.15); margin-bottom:6px; }
.ev-tape .ev-progress > div{ height:100%; width:0%; background:var(--phosphor); transition:width .2s linear; }
.ev-tape .ev-time{ display:flex; justify-content:space-between; font-family:'Courier Prime',monospace; font-size:10px; color:var(--phosphor-dim); margin-bottom:14px; }
.ev-tape .ev-playbtn{
  width:100%; padding:10px; text-align:center; cursor:pointer;
  font-family:'Courier Prime',monospace; font-size:11px; letter-spacing:.08em;
  background:none; border:1px solid var(--phosphor); color:var(--phosphor);
}
.ev-tape .ev-playbtn:hover{ background:rgba(232,162,58,.08); }
.ev-tape .ev-transcript{
  margin-top:14px; font-family:'Spectral',serif; font-size:12.5px; line-height:1.6; color:var(--paper-dim);
  border-left:2px solid var(--archive-line); padding-left:10px;
  max-height:0; overflow:hidden; opacity:0; transition:max-height .4s ease, opacity .4s ease;
}
.ev-tape .ev-transcript.show{ max-height:200px; opacity:1; }

@media (max-width:400px){
  .sp-grid{ grid-template-columns:repeat(auto-fill,minmax(128px,1fr)); gap:14px 10px; }
  .a-card{ padding:13px; }
  .c-phone{ max-width:100%; border-radius:12px; }
  .browser{ font-size:14px; }
}

/* ============================================================
   SCREEN 9 — CIPHER GATE (cryptex)
   ============================================================ */
#cipher{ background:var(--archive-bg); min-height:calc(100vh - 46px); padding:28px 16px 60px; display:flex; flex-direction:column; align-items:center; }
.cp-head{ text-align:center; margin-bottom:26px; }
.cp-head h1{ font-family:'Spectral SC',serif; font-size:19px; color:var(--paper); margin:0; }
.cp-head .sub{ font-family:'Courier Prime',monospace; font-size:10.5px; color:var(--phosphor-dim); margin-top:6px; }
.cryptex{
  display:flex; gap:8px; background:#1c1712; border:1px solid #4a4030;
  padding:16px 14px; box-shadow:0 14px 30px rgba(0,0,0,.5), inset 0 0 20px rgba(0,0,0,.4);
}
.drum{ display:flex; flex-direction:column; align-items:center; gap:6px; }
.drum button{
  width:36px; height:26px; background:#2a2318; border:1px solid #55492e; color:var(--phosphor-dim);
  cursor:pointer; font-size:13px;
}
.drum button:hover{ color:var(--phosphor); border-color:var(--phosphor-dim); }
.drum .digit{
  width:44px; height:56px; background:linear-gradient(180deg,#e6dcc0,#c9b384);
  border:1px solid #7a5f2c; display:flex; align-items:center; justify-content:center;
  font-family:'Courier Prime',monospace; font-weight:700; font-size:26px; color:#241a08;
  box-shadow:inset 0 2px 4px rgba(0,0,0,.3);
}
.cp-open{
  margin-top:24px; padding:11px 26px; background:none; border:1px solid var(--phosphor);
  color:var(--phosphor); font-family:'Courier Prime',monospace; font-size:11px; letter-spacing:.1em; cursor:pointer;
}
.cp-open:hover{ background:rgba(232,162,58,.08); }
.cp-msg{ margin-top:16px; font-family:'Courier Prime',monospace; font-size:11px; color:var(--accent-red); min-height:16px; text-align:center; }
.cp-reveal{
  margin-top:20px; max-width:420px; text-align:center;
  background:#e6dcc0; color:#241d10; border:1px solid #a9976a; padding:20px;
  font-family:'Spectral',serif; font-size:14px; line-height:1.6;
  display:none; box-shadow:0 14px 30px rgba(0,0,0,.5);
}
.cp-reveal.show{ display:block; }

/* ============================================================
   SCREEN 10 — LOCKS & KEYS
   ============================================================ */
#locks{ background:var(--archive-bg); min-height:calc(100vh - 46px); padding:28px 16px 60px; display:flex; flex-direction:column; align-items:center; }
.lk-head{ text-align:center; margin-bottom:24px; }
.lk-head h1{ font-family:'Spectral SC',serif; font-size:19px; color:var(--paper); margin:0; }
.lk-head .sub{ font-family:'Courier Prime',monospace; font-size:10.5px; color:var(--phosphor-dim); margin-top:6px; }
.lockbox{
  background:#1c1712; border:1px solid #4a4030; padding:22px 20px; text-align:center;
  box-shadow:0 14px 30px rgba(0,0,0,.5);
}
.padlock{ width:90px; height:90px; margin:0 auto 18px; position:relative; }
.padlock .shackle{
  position:absolute; top:0; left:22px; width:46px; height:38px;
  border:7px solid #8a7a52; border-bottom:none; border-radius:24px 24px 0 0;
  transition:transform .4s ease, top .4s ease;
  transform-origin:left center;
}
.padlock.open .shackle{ transform:rotate(-55deg) translateY(-4px); }
.padlock .body{
  position:absolute; bottom:0; left:6px; width:78px; height:56px;
  background:linear-gradient(160deg,#c9a961,#a9873f);
  border:1px solid #7a5f2c; border-radius:4px;
  box-shadow:inset 0 0 12px rgba(0,0,0,.2);
}
.padlock .keyhole{ position:absolute; bottom:16px; left:34px; width:10px; height:10px; border-radius:50%; background:#241a08; }
.wheels{ display:flex; gap:8px; justify-content:center; margin-bottom:16px; }
.wheel{ display:flex; flex-direction:column; align-items:center; gap:4px; }
.wheel button{
  width:34px; height:22px; background:#2a2318; border:1px solid #55492e; color:var(--phosphor-dim);
  cursor:pointer; font-size:12px;
}
.wheel button:hover{ color:var(--phosphor); }
.wheel .val{
  width:34px; height:38px; background:#e6dcc0; color:#241a08; border:1px solid #7a5f2c;
  display:flex; align-items:center; justify-content:center;
  font-family:'Courier Prime',monospace; font-weight:700; font-size:18px;
}
.lk-hint{ font-family:'Courier Prime',monospace; font-size:10px; color:var(--ink-soft); margin-bottom:14px; }
.lk-open{
  padding:10px 24px; background:none; border:1px solid var(--phosphor); color:var(--phosphor);
  font-family:'Courier Prime',monospace; font-size:11px; letter-spacing:.08em; cursor:pointer;
}
.lk-open:hover{ background:rgba(232,162,58,.08); }
.lk-msg{ margin-top:12px; font-family:'Courier Prime',monospace; font-size:10.5px; color:var(--accent-red); min-height:14px; }

/* ============================================================
   SCREEN 11 — MORSE
   ============================================================ */
#morse{ background:var(--phosphor-bg); min-height:calc(100vh - 46px); padding:26px 16px 60px; display:flex; flex-direction:column; align-items:center; font-family:'Courier Prime',monospace; }
.mo-frame{ max-width:420px; width:100%; border:1px solid var(--phosphor-dim); padding:20px 18px; box-shadow:0 0 24px rgba(232,162,58,.1); }
.mo-title{ font-size:10.5px; color:var(--phosphor-dim); letter-spacing:.08em; border-bottom:1px dashed var(--phosphor-dim); padding-bottom:8px; margin-bottom:16px; }
.mo-lamp-row{ display:flex; align-items:center; justify-content:center; gap:16px; margin-bottom:18px; }
.mo-lamp{
  width:26px; height:26px; border-radius:50%;
  background:#3a2a10; border:2px solid var(--phosphor-dim);
  box-shadow:0 0 0 rgba(232,162,58,0);
  transition:background .08s ease, box-shadow .08s ease;
}
.mo-lamp.lit{ background:var(--phosphor); box-shadow:0 0 18px rgba(232,162,58,.8); }
.mo-playbtn{
  background:none; border:1px solid var(--phosphor); color:var(--phosphor);
  padding:8px 16px; font-family:'Courier Prime',monospace; font-size:11px; letter-spacing:.08em; cursor:pointer;
}
.mo-playbtn:hover{ background:rgba(232,162,58,.08); }
.mo-code{ text-align:center; font-size:13px; color:var(--phosphor); letter-spacing:.3em; min-height:20px; margin-bottom:14px; }
.mo-input-row{ display:flex; gap:8px; margin-bottom:10px; }
.mo-input-row input{
  flex:1; background:none; border:1px solid var(--phosphor-dim); color:var(--phosphor);
  font-family:'Courier Prime',monospace; font-size:13px; padding:8px 10px; letter-spacing:.1em; outline:none;
}
.mo-input-row button{
  background:none; border:1px solid var(--phosphor); color:var(--phosphor);
  padding:8px 14px; font-size:11px; cursor:pointer;
}
.mo-msg{ font-size:10.5px; color:var(--accent-red); min-height:14px; }
.mo-msg.ok{ color:var(--phosphor); }

/* ============================================================
   SCREEN 12 — STAKEOUT
   ============================================================ */
#stakeout{ background:#0b0a08; min-height:calc(100vh - 46px); padding:20px 14px 60px; display:flex; flex-direction:column; align-items:center; }
.sk-wrap{ max-width:420px; width:100%; }
.sk-head{ display:flex; justify-content:space-between; font-family:'Courier Prime',monospace; font-size:10.5px; color:var(--phosphor-dim); margin-bottom:10px; }
.sk-feed{
  position:relative; aspect-ratio:4/3; background:#0a0a0a; border:1px solid var(--archive-line); overflow:hidden;
}
.sk-feed::before{
  content:""; position:absolute; inset:0;
  background-image:repeating-linear-gradient(0deg, rgba(255,255,255,.03) 0px, rgba(255,255,255,.03) 1px, transparent 1px, transparent 3px);
  animation:grain 0.4s steps(2) infinite;
}
@keyframes grain{ 0%{ transform:translateY(0); } 100%{ transform:translateY(3px); } }
.sk-feed .sk-tc{
  position:absolute; top:8px; left:8px; font-family:'Courier Prime',monospace; font-size:9px; color:#8a8a8a;
}
.sk-feed .sk-rec{
  position:absolute; top:8px; right:8px; display:flex; align-items:center; gap:5px;
  font-family:'Courier Prime',monospace; font-size:9px; color:#c94b4b;
}
.sk-feed .sk-rec .dot{ width:6px; height:6px; border-radius:50%; background:#c94b4b; animation:pulse 1s ease-in-out infinite; }
.sk-feed .sk-silhouette{
  position:absolute; bottom:0; left:50%; width:60px; height:110px;
  background:#000; border-radius:30px 30px 0 0; opacity:0; transform:translateX(-50%);
  transition:opacity .3s ease;
}
.sk-feed.event .sk-silhouette{ opacity:.55; }
.sk-note{ text-align:center; font-family:'Courier Prime',monospace; font-size:10px; color:var(--ink-soft); margin-top:8px; min-height:14px; }
.sk-log-btn{
  width:100%; margin-top:14px; padding:11px; background:none; border:1px solid var(--phosphor);
  color:var(--phosphor); font-family:'Courier Prime',monospace; font-size:11px; letter-spacing:.08em; cursor:pointer;
}
.sk-log-btn:hover{ background:rgba(232,162,58,.08); }
.sk-log-btn:disabled{ opacity:.35; cursor:not-allowed; }
.sk-thumbs{ display:flex; gap:6px; margin-top:14px; flex-wrap:wrap; }
.sk-thumbs .th{
  width:52px; height:40px; background:#1a1712; border:1px solid var(--archive-line);
  font-family:'Courier Prime',monospace; font-size:8px; color:var(--phosphor-dim);
  display:flex; align-items:center; justify-content:center; text-align:center;
  animation:spIn .3s ease both;
}

/* ============================================================
   SCREEN 13 — THE BUREAU (home)
   ============================================================ */
#bureau{ background:radial-gradient(ellipse at top, #241f18 0%, var(--archive-bg) 55%), var(--archive-bg); min-height:calc(100vh - 46px); padding:24px 16px 60px; }
.bu-wrap{ max-width:640px; margin:0 auto; }
.bu-top{ display:flex; justify-content:space-between; align-items:flex-start; margin-bottom:22px; flex-wrap:wrap; gap:12px; }
.bu-greet{ font-family:'Spectral SC',serif; font-size:20px; color:var(--paper); }
.bu-greet .sub{ font-family:'Courier Prime',monospace; font-size:10.5px; color:var(--phosphor-dim); margin-top:4px; }
.bu-badge{ display:flex; align-items:center; gap:8px; font-family:'Courier Prime',monospace; font-size:10.5px; color:var(--phosphor); border:1px solid var(--phosphor-dim); padding:7px 11px; }
.bu-badge .rank-dot{ width:6px; height:6px; border-radius:50%; background:var(--phosphor); }

.bu-alert{
  display:flex; align-items:center; gap:12px;
  background:rgba(155,49,48,.1); border:1px solid var(--accent-red-dim);
  padding:13px 14px; margin-bottom:20px; cursor:pointer;
  transition:background .15s ease;
}
.bu-alert:hover{ background:rgba(155,49,48,.16); }
.bu-alert .pip{ width:9px; height:9px; border-radius:50%; background:var(--accent-red); animation:pulse 1.3s ease-in-out infinite; flex-shrink:0; }
.bu-alert .txt{ font-family:'Spectral',serif; font-size:13.5px; color:var(--paper); }
.bu-alert .txt b{ color:var(--phosphor); }
.bu-alert .go{ margin-left:auto; font-family:'Courier Prime',monospace; font-size:10px; color:var(--phosphor-dim); flex-shrink:0; }

.bu-section-label{ font-family:'Courier Prime',monospace; font-size:10.5px; color:var(--phosphor-dim); letter-spacing:.08em; margin:22px 0 10px; }
.bu-mini-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(120px,1fr)); gap:14px; }
.bu-mini{
  background:linear-gradient(160deg,#cbab68,#a9873f); border:1px solid #7a5f2c;
  padding:10px 8px; aspect-ratio:5/4; position:relative; cursor:pointer;
  box-shadow:0 4px 10px rgba(0,0,0,.4);
  display:flex; flex-direction:column; justify-content:space-between;
}
.bu-mini .no{ font-family:'Courier Prime',monospace; font-size:9px; color:#3a2c10; }
.bu-mini .nm{ font-family:'Spectral',serif; font-weight:600; font-size:11px; color:#241a08; line-height:1.2; }
.bu-mini .st{ font-family:'Courier Prime',monospace; font-size:8px; color:var(--accent-red); }

.bu-row-link{
  display:flex; justify-content:space-between; align-items:center;
  border-bottom:1px solid var(--archive-line); padding:13px 2px; cursor:pointer;
}
.bu-row-link:hover{ border-color:var(--phosphor-dim); }
.bu-row-link .l{ font-family:'Spectral',serif; font-size:13.5px; color:var(--paper); }
.bu-row-link .r{ font-family:'Courier Prime',monospace; font-size:10px; color:var(--phosphor-dim); }

/* ============================================================
   SCREEN 14 — RETURN NOTIFICATION
   ============================================================ */
#notify{ background:rgba(10,9,7,.92); min-height:calc(100vh - 46px); padding:40px 18px; display:flex; align-items:center; justify-content:center; }
.nt-card{
  max-width:400px; width:100%; text-align:center;
  background:var(--archive-bg-2); border:1px solid var(--phosphor-dim);
  padding:30px 24px; box-shadow:0 0 40px rgba(232,162,58,.12);
  animation:ntIn .5s cubic-bezier(.2,.7,.3,1) both;
}
@keyframes ntIn{ from{ opacity:0; transform:scale(.85) translateY(10px);} to{ opacity:1; transform:none; } }
.nt-stamp{
  display:inline-block; border:2px solid var(--accent-red); color:var(--accent-red);
  font-family:'Courier Prime',monospace; font-size:11px; letter-spacing:.1em;
  padding:5px 12px; transform:rotate(-4deg); margin-bottom:16px;
}
.nt-icon{ font-size:34px; margin-bottom:10px; }
.nt-title{ font-family:'Spectral SC',serif; font-size:19px; color:var(--paper); margin-bottom:6px; }
.nt-body{ font-family:'Spectral',serif; font-size:13.5px; color:var(--paper-dim); line-height:1.55; margin-bottom:20px; }
.nt-yield{ font-family:'Courier Prime',monospace; font-size:10.5px; color:var(--phosphor); margin-bottom:22px; }
.nt-btn{
  width:100%; padding:12px; background:none; border:1px solid var(--phosphor); color:var(--phosphor);
  font-family:'Courier Prime',monospace; font-size:11px; letter-spacing:.1em; cursor:pointer;
}
.nt-btn:hover{ background:rgba(232,162,58,.08); }

/* ============================================================
   SCREEN 15 — ONBOARDING / BADGE ISSUE
   ============================================================ */
#onboard{ background:var(--archive-bg); min-height:calc(100vh - 46px); padding:40px 18px 60px; display:flex; align-items:center; justify-content:center; }
.ob-wrap{ max-width:400px; width:100%; }
.ob-step{ display:none; }
.ob-step.active{ display:block; animation:spIn .35s ease both; }
.ob-head{ text-align:center; margin-bottom:22px; }
.ob-head h1{ font-family:'Spectral SC',serif; font-size:19px; color:var(--paper); margin:0 0 6px; }
.ob-head .sub{ font-family:'Courier Prime',monospace; font-size:10.5px; color:var(--phosphor-dim); }
.ob-field{ margin-bottom:14px; }
.ob-field label{ display:block; font-family:'Courier Prime',monospace; font-size:10px; color:var(--phosphor-dim); margin-bottom:5px; letter-spacing:.06em; }
.ob-field input{
  width:100%; background:var(--archive-bg-2); border:1px solid var(--archive-line); color:var(--paper);
  padding:10px 12px; font-family:'Spectral',serif; font-size:13px; outline:none;
}
.ob-field input:focus{ border-color:var(--phosphor-dim); }
.ob-note{ font-family:'Spectral',serif; font-style:italic; font-size:11.5px; color:var(--ink-soft); margin-bottom:20px; line-height:1.5; }
.captcha-box{ background:rgba(0,0,0,.15); border:1px solid var(--archive-line); padding:12px; }
.captcha-stamp{
  position:relative; height:62px; overflow:hidden;
  background:
    repeating-linear-gradient(115deg, rgba(232,162,58,.05) 0 2px, transparent 2px 7px),
    repeating-linear-gradient(25deg, rgba(155,49,48,.06) 0 1px, transparent 1px 9px);
  border:1px dashed var(--phosphor-dim);
  display:flex; align-items:center; justify-content:center; gap:2px;
}
.captcha-stamp span{
  font-family:'Courier Prime',monospace; font-weight:700; font-size:25px; color:var(--phosphor);
  display:inline-block; text-shadow:0 0 6px rgba(232,162,58,.25);
}
.captcha-refresh{ font-family:'Courier Prime',monospace; font-size:9px; color:var(--phosphor-dim); cursor:pointer; text-decoration:underline; }
.captcha-refresh:hover{ color:var(--phosphor); }
.captcha-box input{
  width:100%; background:var(--archive-bg-2); border:1px solid var(--archive-line); color:var(--paper);
  padding:9px 11px; font-family:'Courier Prime',monospace; font-size:13px; letter-spacing:.1em; outline:none;
}
.captcha-box input:focus{ border-color:var(--phosphor-dim); }
.ob-btn{
  width:100%; padding:12px; background:none; border:1px solid var(--phosphor); color:var(--phosphor);
  font-family:'Courier Prime',monospace; font-size:11px; letter-spacing:.1em; cursor:pointer;
}
.ob-btn:hover{ background:rgba(232,162,58,.08); }
.ob-issuing{ text-align:center; font-family:'Courier Prime',monospace; font-size:12px; color:var(--phosphor-dim); }
.ob-issuing .dots::after{ content:''; animation:dots 1.2s steps(4) infinite; }
@keyframes dots{ 0%{content:'';} 25%{content:'.';} 50%{content:'..';} 75%{content:'...';} }
.id-card{
  position:relative; overflow:hidden;
  background:linear-gradient(155deg,#221c15 0%,#181410 55%,#100d0a 100%);
  border:1px solid var(--phosphor-dim);
  border-radius:14px;
  padding:0;
  box-shadow:0 18px 36px rgba(0,0,0,.55), inset 0 0 0 1px rgba(232,162,58,.06);
  aspect-ratio:1.586/1;
  display:flex; flex-direction:column;
}
.id-card::before{
  /* sheen */
  content:""; position:absolute; top:-40%; left:-20%; width:60%; height:180%;
  background:linear-gradient(115deg, transparent 40%, rgba(255,255,255,.05) 50%, transparent 60%);
  transform:rotate(8deg); pointer-events:none;
}
.id-card::after{
  /* seal watermark */
  content:"⌘"; position:absolute; right:10px; bottom:8px; font-size:70px; color:rgba(232,162,58,.05);
  font-family:serif; line-height:1; pointer-events:none;
}
.id-card .hdr{
  display:flex; justify-content:space-between; align-items:center;
  font-family:'Courier Prime',monospace; font-size:8.5px; color:var(--phosphor-dim);
  letter-spacing:.09em; border-bottom:1px dashed rgba(232,162,58,.25);
  padding:10px 14px 8px; margin:0;
}
.id-card .hdr .seal{ color:var(--phosphor); font-size:10px; }
.id-card-body{ display:flex; gap:12px; padding:12px 14px 6px; flex:1; }
.id-photo{
  width:64px; height:78px; flex-shrink:0; border-radius:3px;
  background:linear-gradient(160deg,#2a251d,#181410); border:1px solid rgba(232,162,58,.3);
  display:flex; align-items:flex-end; justify-content:center; overflow:hidden; position:relative;
}
.id-photo svg{ width:52px; height:52px; opacity:.85; }
.id-photo .redact-bar{
  position:absolute; top:8px; left:6px; right:6px; height:9px;
  background:repeating-linear-gradient(90deg, rgba(232,162,58,.15) 0 3px, transparent 3px 6px);
}
.id-right{ flex:1; min-width:0; }
.id-card .num{ font-family:'Spectral SC',serif; font-size:19px; color:var(--phosphor); margin:0 0 2px; letter-spacing:.02em; }
.id-card .rank{ font-family:'Courier Prime',monospace; font-size:10px; color:var(--paper-dim); margin-bottom:8px; letter-spacing:.04em; }
.id-card .name{ font-family:'Spectral',serif; font-size:12px; color:var(--paper); }
.id-card .name .lbl{ font-family:'Courier Prime',monospace; font-size:8px; color:var(--phosphor-dim); display:block; margin-bottom:2px; letter-spacing:.06em; }
.id-issued{ font-family:'Courier Prime',monospace; font-size:8px; color:var(--ink-soft); margin-top:8px; }
.id-strip{
  height:16px; margin-top:auto;
  background:repeating-linear-gradient(90deg, #0d0a06 0 2px, #1e1810 2px 4px, #0d0a06 4px 6px, #2a2114 6px 9px, #0d0a06 9px 11px, #1e1810 11px 15px);
  border-top:1px solid rgba(232,162,58,.15);
}
.id-strip-label{
  display:flex; justify-content:space-between; padding:4px 14px 8px;
  font-family:'Courier Prime',monospace; font-size:7.5px; color:var(--ink-soft); letter-spacing:.05em;
}

/* ============================================================
   SCREEN 16 — RANK / ARC PROGRESS
   ============================================================ */
#progress{ background:var(--archive-bg); min-height:calc(100vh - 46px); padding:24px 16px 60px; }
.pr-wrap{ max-width:560px; margin:0 auto; }
.pr-head h1{ font-family:'Spectral SC',serif; font-size:19px; color:var(--paper); margin:0; }
.pr-head .sub{ font-family:'Courier Prime',monospace; font-size:10.5px; color:var(--phosphor-dim); margin-top:4px; margin-bottom:20px; }
.pr-ladder{ display:flex; justify-content:space-between; margin-bottom:6px; position:relative; }
.pr-ladder::before{ content:''; position:absolute; top:9px; left:0; right:0; height:2px; background:var(--archive-line); z-index:0; }
.pr-ladder .fill{ position:absolute; top:9px; left:0; height:2px; background:var(--phosphor); z-index:1; width:38%; }
.pr-rank{ position:relative; z-index:2; display:flex; flex-direction:column; align-items:center; gap:6px; }
.pr-rank .node{ width:18px; height:18px; border-radius:50%; background:var(--archive-bg-2); border:2px solid var(--archive-line); }
.pr-rank.reached .node{ background:var(--phosphor); border-color:var(--phosphor); }
.pr-rank .lbl{ font-family:'Courier Prime',monospace; font-size:8.5px; color:var(--ink-soft); text-align:center; max-width:56px; }
.pr-rank.reached .lbl{ color:var(--phosphor-dim); }

.pr-count{ text-align:center; font-family:'Courier Prime',monospace; font-size:11px; color:var(--phosphor); margin:22px 0 16px; }
.pr-files{ display:grid; grid-template-columns:repeat(auto-fill,minmax(38px,1fr)); gap:8px; }
.pr-file{
  aspect-ratio:1; display:flex; align-items:center; justify-content:center;
  font-family:'Courier Prime',monospace; font-size:10px; border:1px solid var(--archive-line); color:var(--ink-soft);
}
.pr-file.full{ background:var(--phosphor); color:#1a1206; border-color:var(--phosphor); font-weight:700; }
.pr-file.reviewed{ background:rgba(232,162,58,.18); color:var(--phosphor); border-color:var(--phosphor-dim); }
.pr-file.active{ border-color:var(--accent-red); color:var(--accent-red); }
.pr-file.locked{ opacity:.3; }

/* ============================================================
   SCREEN 17 — CONTACTS HUB
   ============================================================ */
#contacts{ background:var(--archive-bg); min-height:calc(100vh - 46px); padding:24px 16px 60px; }
.ct-wrap{ max-width:560px; margin:0 auto; }
.ct-head h1{ font-family:'Spectral SC',serif; font-size:19px; color:var(--paper); margin:0; }
.ct-head .sub{ font-family:'Courier Prime',monospace; font-size:10.5px; color:var(--phosphor-dim); margin-top:4px; margin-bottom:18px; }
.ct-card{
  display:flex; gap:13px; align-items:center;
  background:var(--archive-bg-2); border:1px solid var(--archive-line);
  padding:14px; margin-bottom:10px;
}
.ct-photo{
  width:48px; height:48px; flex-shrink:0; border:1px solid var(--archive-line);
  background:#1a1712; display:flex; align-items:center; justify-content:center;
  font-family:'Courier Prime',monospace; font-size:14px; color:var(--phosphor-dim);
}
.ct-photo.unknown{ filter:blur(2px); opacity:.5; }
.ct-info{ flex:1; }
.ct-info .nm{ font-family:'Spectral',serif; font-weight:600; font-size:13.5px; color:var(--paper); }
.ct-info .rl{ font-family:'Courier Prime',monospace; font-size:10px; color:var(--phosphor-dim); margin-top:2px; }
.ct-status{ font-family:'Courier Prime',monospace; font-size:9.5px; padding:4px 8px; border:1px solid currentColor; flex-shrink:0; }
.ct-status.reached{ color:var(--phosphor); }
.ct-status.tried{ color:var(--ink-soft); }
.ct-status.unknown{ color:var(--ink-soft); opacity:.5; }
.ct-pull{
  font-family:'Courier Prime',monospace; font-size:9px; color:var(--phosphor-dim);
  border:1px solid var(--phosphor-dim); padding:4px 7px; cursor:pointer; background:none; flex-shrink:0;
}
.ct-pull:hover{ color:var(--phosphor); border-color:var(--phosphor); }

/* ============================================================
   MAINFRAME — RECORDS SEARCH MODE
   ============================================================ */
.term-modes{ display:flex; gap:0; margin-bottom:14px; border-bottom:1px solid var(--phosphor-dim); }
.tm-btn{
  background:none; border:none; cursor:pointer; font-family:'Courier Prime',monospace;
  font-size:10.5px; letter-spacing:.06em; color:var(--phosphor-dim);
  padding:8px 12px 10px; border-bottom:2px solid transparent;
}
.tm-btn.active{ color:var(--phosphor); border-bottom-color:var(--phosphor); }
.term-panel{ display:none; }
.term-panel.active{ display:block; }
.rec-intro{ font-family:'Courier Prime',monospace; font-size:11px; color:var(--phosphor-dim); line-height:1.6; margin-bottom:14px; }
.rec-chips{ display:flex; gap:8px; flex-wrap:wrap; margin:12px 0 16px; }
.rec-chip{
  background:none; border:1px solid var(--phosphor-dim); color:var(--phosphor-dim);
  font-family:'Courier Prime',monospace; font-size:9.5px; padding:6px 10px; cursor:pointer; letter-spacing:.04em;
}
.rec-chip:hover{ color:var(--phosphor); border-color:var(--phosphor); }

.rap-sheet{
  margin-top:18px; border:1px solid var(--phosphor-dim); background:rgba(232,162,58,.03);
  padding:16px; animation:spIn .3s ease both;
}
.rap-top{ display:flex; gap:14px; margin-bottom:12px; }
.rap-photo{
  width:64px; height:78px; flex-shrink:0; background:#0d0a05; border:1px solid var(--phosphor-dim);
  display:flex; align-items:center; justify-content:center; text-align:center;
  font-family:'Courier Prime',monospace; font-size:8px; color:var(--phosphor-dim); padding:4px;
}
.rap-id{ flex:1; }
.rap-id .serial{ font-size:9.5px; color:var(--phosphor-dim); letter-spacing:.04em; }
.rap-id .rname{ font-size:15px; color:var(--phosphor); margin:3px 0; font-weight:700; }
.rap-id .rstatus{ font-size:9.5px; color:var(--phosphor-dim); }
.rap-table{ width:100%; border-collapse:collapse; font-size:10.5px; }
.rap-table tr{ border-top:1px dashed rgba(232,162,58,.2); }
.rap-table td{ padding:7px 4px; vertical-align:top; }
.rap-table td:first-child{ color:var(--phosphor-dim); width:34%; white-space:nowrap; }
.rap-table td:last-child{ color:var(--paper-dim); }
.rap-redacted{ display:inline-block; background:var(--phosphor-dim); color:var(--phosphor-dim); border-radius:2px; padding:0 4px; user-select:none; }
.rap-crossref{
  margin-top:10px; padding-top:10px; border-top:1px dashed rgba(232,162,58,.2);
  font-size:10px; color:var(--phosphor);
}
.rap-none{ margin-top:16px; font-family:'Courier Prime',monospace; font-size:11px; color:var(--accent-red); }
.rap-unlock{
  margin-top:12px; padding-top:10px; border-top:1px dashed rgba(232,162,58,.2);
  display:flex; align-items:center; gap:10px; flex-wrap:wrap;
}
.rap-unlock-btn{
  font-family:'Courier Prime',monospace; font-size:9.5px; letter-spacing:.04em;
  background:none; border:1px solid var(--accent-red-dim); color:var(--paper-dim);
  padding:6px 10px; cursor:pointer;
}
.rap-unlock-btn:hover{ border-color:var(--phosphor-dim); color:var(--phosphor); }
.rap-unlock-note{ font-family:'Courier Prime',monospace; font-size:9px; color:var(--ink-soft); }
.rap-just-unlocked{ animation:unlockFlash 1.2s ease; }
@keyframes unlockFlash{ 0%{ background:rgba(232,162,58,.35); } 100%{ background:transparent; } }

/* ============================================================
   SCREEN 18 — CASE NOTEBOOK
   ============================================================ */
#notebook{ background:#1b1611; min-height:calc(100vh - 46px); padding:26px 14px 60px; display:flex; justify-content:center; }
.nb-wrap{ max-width:460px; width:100%; }
.nb-cover-label{ text-align:center; font-family:'Courier Prime',monospace; font-size:10.5px; color:var(--phosphor-dim); letter-spacing:.1em; margin-bottom:14px; }
.nb-pages{
  background:#efe6c9; background-image:repeating-linear-gradient(#efe6c9 0 31px, #d8c99b 31px 32px);
  border:1px solid #8f7a48; box-shadow:0 16px 34px rgba(0,0,0,.5);
  padding:22px 20px 30px; position:relative;
}
.nb-pages::before{
  content:""; position:absolute; left:34px; top:0; bottom:0; width:1px; background:rgba(155,49,48,.4);
}
.nb-title{
  font-family:'Kalam',cursive; font-weight:700; font-size:21px; color:#2a2210;
  margin:0 0 4px 30px; transform:rotate(-1deg);
}
.nb-sub{ font-family:'Courier Prime',monospace; font-size:9px; color:#8a7a52; margin:0 0 18px 30px; }
.nb-entry{ margin:0 0 22px 30px; opacity:0; }
.nb-entry.reveal{ animation:nbIn .5s ease forwards; }
@keyframes nbIn{ from{ opacity:0; transform:translateY(6px);} to{ opacity:1; transform:none; } }
.nb-entry .nb-time{ font-family:'Courier Prime',monospace; font-size:9px; color:#8a7a52; margin-bottom:2px; }
.nb-entry .nb-text{
  font-family:'Kalam',cursive; font-size:15.5px; line-height:1.5; color:#241d10;
}
.nb-entry:nth-child(odd) .nb-text{ transform:rotate(-0.4deg); }
.nb-entry:nth-child(even) .nb-text{ transform:rotate(0.5deg); }
.nb-entry .nb-tag{
  display:inline-block; font-family:'Courier Prime',monospace; font-size:8.5px; color:#7a5f2c;
  border:1px solid #8f7a48; padding:1px 5px; margin-top:4px;
}
.nb-margin-note{
  font-family:'Kalam',cursive; font-size:11px; color:#9b3130; margin-left:34px;
  transform:rotate(-3deg); display:inline-block;
}
.nb-cursor{
  display:inline-block; width:2px; height:16px; background:#241d10; vertical-align:middle;
  animation:blink 1s steps(1) infinite;
}

/* ============================================================
   ADMIN / BACKEND SYSTEM — distinct functional skin
   ============================================================ */
.adm{
  --a-bg:#14161a; --a-panel:#1b1e24; --a-panel-2:#22262e; --a-border:#2c313a;
  --a-text:#e7e9ee; --a-dim:#8b93a1; --a-accent:#e8a23a; --a-accent-soft:rgba(232,162,58,.12);
  --a-green:#4caf7d; --a-red:#d16565;
  font-family:'Inter',system-ui,-apple-system,sans-serif;
  background:var(--a-bg); color:var(--a-text);
  min-height:calc(100vh - 46px);
}
.adm *{ box-sizing:border-box; }
.adm-shell{ display:flex; min-height:calc(100vh - 46px); }
.adm-side{
  width:200px; flex-shrink:0; background:var(--a-panel); border-right:1px solid var(--a-border);
  padding:18px 0;
}
.adm-side .brand{ font-size:11px; letter-spacing:.06em; color:var(--a-dim); padding:0 18px 16px; border-bottom:1px solid var(--a-border); margin-bottom:8px; }
.adm-side button{
  display:block; width:100%; text-align:left; background:none; border:none; cursor:pointer;
  color:var(--a-dim); font-family:'Inter',sans-serif; font-size:13px; padding:10px 18px;
  border-left:3px solid transparent;
}
.adm-side button.active{ color:var(--a-text); background:var(--a-panel-2); border-left-color:var(--a-accent); }
.adm-side button:hover{ color:var(--a-text); }
.adm-main{ flex:1; padding:22px 26px 60px; overflow-x:auto; min-width:0; }
.adm-topbar{ display:flex; justify-content:space-between; align-items:center; margin-bottom:20px; flex-wrap:wrap; gap:12px; }
.adm-topbar h1{ font-size:19px; font-weight:600; margin:0; }
.adm-btn{
  font-family:'Inter',sans-serif; font-size:12.5px; font-weight:500; cursor:pointer;
  border:1px solid var(--a-border); background:var(--a-panel-2); color:var(--a-text);
  padding:8px 14px; border-radius:5px;
}
.adm-btn:hover{ border-color:var(--a-accent); }
.adm-btn.primary{ background:var(--a-accent); color:#1a1206; border-color:var(--a-accent); font-weight:600; }
.adm-btn.primary:hover{ opacity:.9; }

.adm-table{ width:100%; border-collapse:collapse; font-size:13px; }
.adm-table th{ text-align:left; color:var(--a-dim); font-weight:500; font-size:11px; letter-spacing:.03em; padding:8px 10px; border-bottom:1px solid var(--a-border); }
.adm-table td{ padding:11px 10px; border-bottom:1px solid var(--a-border); vertical-align:middle; }
.adm-table tr:hover td{ background:var(--a-panel-2); }
.pill{ display:inline-block; font-size:10.5px; font-weight:600; padding:3px 9px; border-radius:20px; }
.pill.live{ background:rgba(76,175,125,.15); color:var(--a-green); }
.pill.draft{ background:rgba(232,162,58,.15); color:var(--a-accent); }
.adm-link-btn{ background:none; border:none; color:var(--a-dim); cursor:pointer; font-size:12px; font-family:'Inter',sans-serif; padding:4px 6px; }
.adm-link-btn:hover{ color:var(--a-accent); }

.adm-tabs{ display:flex; gap:2px; border-bottom:1px solid var(--a-border); margin-bottom:18px; flex-wrap:wrap; }
.adm-tab{
  background:none; border:none; cursor:pointer; color:var(--a-dim); font-family:'Inter',sans-serif;
  font-size:12.5px; padding:9px 13px; border-bottom:2px solid transparent;
}
.adm-tab.active{ color:var(--a-text); border-bottom-color:var(--a-accent); }
.adm-panel-view{ display:none; }
.adm-panel-view.active{ display:block; }

.ev-row{ background:var(--a-panel); border:1px solid var(--a-border); border-radius:6px; margin-bottom:10px; padding:14px 16px; }
.ev-row-head{ display:flex; justify-content:space-between; align-items:center; gap:10px; flex-wrap:wrap; }
.ev-row-head .id{ font-family:'Courier Prime',monospace; font-size:11px; color:var(--a-dim); }
.ev-row-head .ti{ font-size:13.5px; font-weight:600; }
.ev-row-body{ display:grid; grid-template-columns:1fr 1fr; gap:14px; margin-top:14px; }
@media (max-width:520px){ .ev-row-body{ grid-template-columns:1fr; } }
.ev-field label{ display:block; font-size:10.5px; color:var(--a-dim); margin-bottom:5px; }
.ev-select, .ev-input{
  width:100%; background:var(--a-panel-2); border:1px solid var(--a-border); color:var(--a-text);
  padding:7px 9px; border-radius:4px; font-family:'Inter',sans-serif; font-size:12.5px;
}
.ev-media-slot{
  border:1.5px dashed var(--a-border); border-radius:5px; padding:12px;
  display:flex; align-items:center; gap:10px; cursor:pointer; font-size:12px; color:var(--a-dim);
}
.ev-media-slot:hover{ border-color:var(--a-accent); color:var(--a-text); }
.ev-media-slot.filled{ border-style:solid; border-color:var(--a-green); color:var(--a-text); }
.ev-media-slot .ic{ font-size:16px; flex-shrink:0; }
.ev-toggle-row{ display:flex; gap:8px; margin-top:2px; }
.ev-toggle{ font-size:11px; padding:6px 10px; border-radius:4px; border:1px solid var(--a-border); background:var(--a-panel-2); color:var(--a-dim); cursor:pointer; }
.ev-toggle.on{ background:var(--a-accent-soft); border-color:var(--a-accent); color:var(--a-accent); }

.adm-dropzone{
  border:2px dashed var(--a-border); border-radius:8px; padding:34px 20px; text-align:center;
  color:var(--a-dim); font-size:13px; margin-bottom:22px; cursor:pointer;
}
.adm-dropzone:hover{ border-color:var(--a-accent); color:var(--a-text); }
.adm-filter-row{ display:flex; gap:8px; margin-bottom:16px; }
.adm-filter{ font-size:11.5px; padding:6px 12px; border-radius:20px; border:1px solid var(--a-border); background:none; color:var(--a-dim); cursor:pointer; }
.adm-filter.active{ background:var(--a-accent-soft); border-color:var(--a-accent); color:var(--a-accent); }
.media-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:12px; }
.media-card{ background:var(--a-panel); border:1px solid var(--a-border); border-radius:6px; padding:10px; }
.media-thumb{ height:70px; border-radius:4px; background:var(--a-panel-2); display:flex; align-items:center; justify-content:center; font-size:20px; margin-bottom:8px; }
.media-name{ font-size:11.5px; font-weight:500; margin-bottom:2px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.media-meta{ font-size:10px; color:var(--a-dim); }
.media-used{ margin-top:6px; font-size:9.5px; padding:2px 6px; border-radius:3px; display:inline-block; }
.media-used.yes{ background:rgba(76,175,125,.15); color:var(--a-green); }
.media-used.no{ background:rgba(209,101,101,.12); color:var(--a-red); }

.check-list{ list-style:none; padding:0; margin:0 0 20px; }
.check-list li{ display:flex; align-items:center; gap:8px; padding:6px 0; font-size:13px; border-bottom:1px solid var(--a-border); }
.check-list .ok{ color:var(--a-green); }
.check-list .bad{ color:var(--a-red); }
.adm-view{ display:none; }
.adm-view.active{ display:block; }
.prog-bar{ display:inline-block; width:60px; height:6px; background:var(--a-border); border-radius:3px; overflow:hidden; vertical-align:middle; margin-right:6px; }
.prog-bar > div{ height:100%; background:var(--a-accent); }
.adm-stat-row{ display:flex; gap:12px; margin-bottom:20px; flex-wrap:wrap; }
.adm-stat{ background:var(--a-panel); border:1px solid var(--a-border); border-radius:6px; padding:14px 18px; min-width:120px; }
.adm-stat-num{ font-size:22px; font-weight:700; color:var(--a-accent); }
.adm-stat-lbl{ font-size:10px; color:var(--a-dim); letter-spacing:.05em; margin-top:2px; }