/* ===================== BASE ===================== */
*,*::before,*::after{box-sizing:border-box}
:root{
  --desk:#0B0B0D;
  --manila:#C9B58B;
  --manila-2:#BFA97C;
  --paper-ink:#1A1512;
  --red:#C8102E;
  --red-dk:#8E0B20;
  --gold:#C9A227;
  --gold-l:#E7CE7A;
  --green:#3E5C4B;
  --lamp:#FFE3B0;
  --line:rgba(201,162,39,.26);
  --noise:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;min-height:100dvh;background:var(--desk);color:#EDE6D8;
  font-family:'Tajawal',system-ui,-apple-system,'Segoe UI',sans-serif;
  font-size:16px;line-height:1.6;overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}
body::before{
  content:'';position:fixed;inset:0;pointer-events:none;z-index:0;
  background:
    radial-gradient(58% 42% at 86% -8%, rgba(255,227,176,.20), rgba(255,227,176,.05) 46%, transparent 72%),
    radial-gradient(120% 90% at 50% 55%, transparent 34%, rgba(0,0,0,.72) 100%);
}
body::after{
  content:'';position:fixed;inset:0;pointer-events:none;z-index:0;opacity:.05;
  background-image:var(--noise);background-size:170px;
}
button{font-family:inherit}
h1,h2,h3,h4,p,ul,ol{margin:0}
ul,ol{padding:0;list-style:none}
.hidden{display:none !important}
.num{font-family:'Tajawal',sans-serif;font-variant-numeric:tabular-nums;letter-spacing:.02em}
.mono{font-family:ui-monospace,'SFMono-Regular',Menlo,Consolas,monospace;font-variant-numeric:tabular-nums;letter-spacing:.06em}
:focus-visible{outline:2px solid var(--gold-l);outline-offset:3px;border-radius:4px}

/* ===================== BUTTONS ===================== */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  min-height:46px;padding:11px 20px;border:0;border-radius:6px;cursor:pointer;
  font-family:'Tajawal',sans-serif;font-weight:700;font-size:15px;line-height:1;
  user-select:none;-webkit-user-select:none;transition:transform .14s ease,box-shadow .2s ease,background .2s ease,color .2s ease;
}
.btn:active{transform:translateY(1px) scale(.99)}
.btn-lg{min-height:54px;padding:14px 30px;font-size:17px;width:100%}
.btn-block{width:100%}
.btn-sm{min-height:42px;padding:9px 16px;font-size:13.5px}
.btn-gold{
  background:linear-gradient(175deg,#E3C25E,#C9A227 55%,#9C7C16);
  color:#1A1512;box-shadow:0 10px 22px -10px rgba(201,162,39,.8),inset 0 1px 0 rgba(255,255,255,.5);
}
.btn-gold:hover{background:linear-gradient(175deg,#EFD077,#D4AE2C 55%,#A9881B)}
.btn-red{
  background:linear-gradient(175deg,#D62341,#C8102E 60%,#8E0B20);
  color:#FFF2F4;box-shadow:0 10px 22px -12px rgba(200,16,46,.9),inset 0 1px 0 rgba(255,255,255,.22);
}
.btn-red:hover{background:linear-gradient(175deg,#E32C4C,#C8102E 60%,#9B0C23)}
.btn-ink{
  background:#221B14;color:#EDE6D8;border:1px solid rgba(201,162,39,.45);
  box-shadow:0 8px 18px -12px #000;
}
.btn-ink:hover{background:#2C231A;border-color:rgba(201,162,39,.75)}
.btn-ghost{
  background:transparent;color:#D9CFB8;border:1px dashed rgba(201,162,39,.42);
}
.btn-ghost:hover{background:rgba(201,162,39,.08);color:#F3E9CE}
.btn:disabled{opacity:.45;cursor:not-allowed}

/* ===================== CHIPS / HUD ===================== */
.chip{
  display:inline-flex;align-items:center;gap:6px;
  min-height:44px;padding:8px 12px;border-radius:999px;
  background:rgba(255,255,255,.055);border:1px solid var(--line);
  color:#E6DDC9;font-size:12.5px;font-weight:500;white-space:nowrap;
  user-select:none;-webkit-user-select:none;
}
.chip b{font-weight:800;color:var(--gold-l);font-variant-numeric:tabular-nums}
.chip-btn{cursor:pointer;transition:background .18s ease,border-color .18s ease}
.chip-btn:hover{background:rgba(201,162,39,.14);border-color:rgba(201,162,39,.6)}
.chip svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;flex:0 0 auto}

/* ===================== COVER ===================== */
.screen{position:relative;z-index:1}
.cover{
  min-height:100dvh;display:flex;align-items:center;justify-content:center;
  padding:22px 16px;
}
.cover-wrap{width:100%;max-width:520px}
.folder-cover{
  position:relative;padding:0 0 0 0;border-radius:4px;
  background:
    radial-gradient(ellipse at 18% 8%, rgba(255,255,255,.34), transparent 46%),
    radial-gradient(ellipse at 88% 96%, rgba(90,60,20,.22), transparent 52%),
    linear-gradient(158deg,#D6C39A,#C9B58B 52%,#B39D72);
  color:var(--paper-ink);
  box-shadow:0 34px 60px -26px rgba(0,0,0,.95), 0 2px 0 rgba(255,255,255,.32) inset, 0 0 0 1px rgba(0,0,0,.35);
  transform:rotate(-.5deg);
  overflow:hidden;
}
.cover-tab{
  position:absolute;top:0;inset-inline-start:22px;
  background:linear-gradient(180deg,#D9C79E,#BFA97C);
  color:#241a12;font-size:11.5px;font-weight:800;letter-spacing:.14em;
  padding:6px 16px 8px;border-radius:0 0 6px 6px;
  box-shadow:0 3px 8px rgba(0,0,0,.25);
}
.cover-body{position:relative;padding:52px 24px 26px;text-align:center}
.cover-brass{
  width:74px;height:74px;margin:0 auto 14px;border-radius:50%;
  display:grid;place-items:center;
  background:radial-gradient(circle at 34% 28%, #FBEAAB, #C9A227 46%, #7D620F 100%);
  box-shadow:0 8px 18px -8px rgba(0,0,0,.85), inset 0 0 0 2px rgba(255,255,255,.28), inset 0 -3px 6px rgba(0,0,0,.4);
}
.cover-brass span{
  font-family:'Tajawal',sans-serif;font-weight:800;font-size:20px;color:#3A2C05;
  letter-spacing:.1em;text-shadow:0 1px 0 rgba(255,255,255,.45);
}
.cover-org{
  font-family:'Amiri',serif;font-size:12.5px;color:#4A3B27;letter-spacing:.02em;margin-bottom:10px;
}
.cover-title{
  font-family:'Amiri',serif;font-weight:700;font-size:clamp(30px,9vw,42px);line-height:1.1;
  color:#1A1512;letter-spacing:.01em;
}
.cover-sub{
  font-family:'Amiri',serif;font-weight:700;font-size:clamp(19px,5.6vw,25px);
  color:#7B1522;margin-top:6px;
}
.cover-place{
  font-family:'Amiri',serif;font-size:14px;color:#4A3B27;margin-top:8px;
}
.cover-rule{
  height:1px;margin:18px auto 14px;max-width:280px;
  background:linear-gradient(90deg,transparent,rgba(26,21,18,.45),transparent);
}
.cover-facts{display:flex;justify-content:center;gap:8px;margin-bottom:22px}
.cover-facts li{
  flex:1;max-width:110px;padding:8px 4px;border:1px solid rgba(26,21,18,.2);border-radius:4px;
  background:rgba(255,255,255,.15);
}
.cover-facts b{display:block;font-size:21px;font-weight:800;color:#7B1522;line-height:1.1}
.cover-facts span{font-size:11.5px;color:#4A3B27;font-weight:500}
.cover-note{font-size:11.5px;color:#54452F;margin-top:14px;line-height:1.5}
.cover-stamp{position:absolute;top:14px;inset-inline-end:16px}
.coffee-ring{
  position:absolute;border-radius:50%;pointer-events:none;
  border:7px solid rgba(122,84,34,.13);
  box-shadow:inset 0 0 14px rgba(122,84,34,.10);
}
.coffee-ring.r1{width:96px;height:96px;inset-inline-end:-22px;bottom:38px;transform:rotate(14deg)}
.coffee-ring.r2{width:58px;height:58px;inset-inline-end:34px;bottom:14px;border-width:4px;transform:rotate(-8deg)}

/* ===================== STAMPS ===================== */
.stamp{
  display:inline-block;
  font-family:'Amiri',serif;font-weight:700;font-size:15px;line-height:1;
  color:var(--red);border:2.5px double currentColor;border-radius:4px;
  padding:6px 13px;transform:rotate(-7deg);opacity:.82;
  letter-spacing:.08em;text-shadow:0 0 1px rgba(200,16,46,.35);
  mix-blend-mode:multiply;white-space:nowrap;user-select:none;
}
.stamp-big{font-size:20px;padding:8px 17px;border-width:3px}
.stamp.small{font-size:10px;padding:3px 7px;border-width:1.5px;letter-spacing:.04em}
.stamp.green{color:var(--green);border-color:var(--green);mix-blend-mode:normal;opacity:.9}
.stamp.gold{color:#8E7118;border-color:#8E7118}

/* ===================== DESK SHELL ===================== */
.desk{
  position:relative;z-index:1;display:flex;flex-direction:column;
  height:100dvh;height:100vh;
}
@supports(height:100dvh){.desk{height:100dvh}}
.topbar{
  flex:0 0 auto;display:flex;align-items:center;justify-content:space-between;gap:8px;
  padding:9px 12px;border-bottom:1px solid rgba(201,162,39,.16);
  background:linear-gradient(180deg,rgba(20,17,20,.96),rgba(11,11,13,.86));
  backdrop-filter:blur(6px);
}
.brand{display:flex;align-items:center;gap:8px;min-width:0}
.badge-mini{
  flex:0 0 auto;width:32px;height:32px;border-radius:50%;display:grid;place-items:center;
  font-size:10.5px;font-weight:800;color:#3A2C05;letter-spacing:.05em;
  background:radial-gradient(circle at 34% 28%,#FBEAAB,#C9A227 48%,#7D620F 100%);
  box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.28),0 4px 10px -5px #000;
}
.brand-title{
  font-family:'Amiri',serif;font-weight:700;font-size:15px;color:#EDE3CB;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.hud{display:flex;align-items:center;gap:6px;flex:0 0 auto}
.tabs{
  flex:0 0 auto;display:grid;grid-template-columns:repeat(3,1fr);gap:4px;
  padding:8px 12px;border-bottom:1px solid rgba(201,162,39,.14);
  background:rgba(8,8,10,.6);
}
.tab{
  min-height:44px;border:1px solid transparent;border-radius:8px;cursor:pointer;
  background:transparent;color:#9E9382;font-weight:700;font-size:13.5px;
  transition:background .18s ease,color .18s ease,border-color .18s ease;
}
.tab.active{
  background:linear-gradient(180deg,rgba(201,162,39,.22),rgba(201,162,39,.08));
  border-color:rgba(201,162,39,.45);color:#F5E7C0;
}
.layout{flex:1 1 auto;min-height:0;overflow-y:auto;padding:14px 12px 40px;-webkit-overflow-scrolling:touch}
.panel{display:none;animation:fadeUp .28s ease both}
.panel.active{display:block}
@keyframes fadeUp{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.panel-head{margin-bottom:14px}
.panel-head h2{
  font-family:'Amiri',serif;font-size:21px;font-weight:700;color:#F1E5C8;line-height:1.3;
}
.panel-head p{font-size:12.5px;color:#948A79;margin-top:4px;line-height:1.65}

/* ===================== SUSPECTS ===================== */
.suspect-list{display:flex;flex-direction:column;gap:13px}
.suspect-card{
  position:relative;display:flex;align-items:center;gap:11px;width:100%;
  padding:11px 12px;border:0;border-radius:3px;cursor:pointer;text-align:start;
  background:
    radial-gradient(ellipse at 14% 10%, rgba(255,255,255,.34), transparent 46%),
    linear-gradient(158deg,#D3BF96,#C9B58B 55%,#B9A47A);
  color:var(--paper-ink);
  box-shadow:0 14px 26px -14px rgba(0,0,0,.95),inset 0 1px 0 rgba(255,255,255,.32);
  transform:rotate(-.4deg);transition:transform .18s ease,box-shadow .2s ease;
  user-select:none;-webkit-user-select:none;
}
.suspect-card:nth-child(2){transform:rotate(.45deg)}
.suspect-card:nth-child(3){transform:rotate(-.7deg)}
.suspect-card:active{transform:scale(.988) rotate(0)}
@media (hover:hover){
  .suspect-card:hover{transform:translateY(-3px) rotate(0);box-shadow:0 22px 34px -16px rgba(0,0,0,.95),inset 0 1px 0 rgba(255,255,255,.4)}
}
.id-photo{
  flex:0 0 auto;width:62px;height:76px;overflow:hidden;border-radius:2px;
  background:#6E6E6E;box-shadow:0 2px 7px rgba(0,0,0,.45),0 0 0 1px rgba(0,0,0,.35);
}
.id-photo img{width:100%;height:100%;object-fit:cover;display:block;filter:contrast(1.04)}
.id-photo.noimg{background:repeating-linear-gradient(45deg,#5c5c5c,#5c5c5c 6px,#666 6px,#666 12px)}
.suspect-info{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;gap:2px}
.suspect-info strong{font-size:15px;font-weight:800;line-height:1.25;color:#171310}
.suspect-info em{font-style:normal;font-size:11.5px;color:#4E4029;line-height:1.35}
.status{
  align-self:flex-start;margin-top:5px;font-size:10.5px;font-weight:700;
  padding:2px 8px;border-radius:999px;border:1px solid rgba(26,21,18,.28);
  color:#5A4A31;background:rgba(255,255,255,.22);
}
.status.mid{color:#7B1522;border-color:rgba(123,21,34,.4);background:rgba(200,16,46,.1)}
.status.ok{color:#2C4738;border-color:rgba(62,92,75,.55);background:rgba(62,92,75,.14)}

.wall-photo{
  margin-top:22px;display:flex;align-items:center;gap:12px;padding:10px;
  border-radius:4px;background:rgba(255,255,255,.03);border:1px solid rgba(201,162,39,.16);
}
.wall-photo-frame{
  flex:0 0 auto;width:62px;height:76px;background:#6E6E6E;overflow:hidden;
  border:3px solid #d9d2c2;box-shadow:0 8px 18px -8px #000;transform:rotate(-2deg);
}
.wall-photo-frame img{width:100%;height:100%;object-fit:cover;display:block;filter:saturate(.85)}
.wall-photo-cap{display:flex;flex-direction:column;gap:2px}
.wall-photo-cap strong{font-family:'Amiri',serif;font-size:15px;color:#E5DABE}
.wall-photo-cap span{font-size:11.5px;color:#8E8474}

/* ===================== BOARD ===================== */
.board{
  position:relative;border-radius:6px;padding:6px;
  background-color:#5f4227;
  background-image:var(--noise);
  background-blend-mode:soft-light;
  box-shadow:inset 0 0 0 6px #4a321d, inset 0 0 0 7px rgba(201,162,39,.24), inset 0 0 46px rgba(0,0,0,.65), 0 18px 34px -20px #000;
}
.strings{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:1;overflow:visible}
.evidence-grid{
  position:relative;z-index:2;display:grid;gap:11px;padding:16px 13px 18px;
  grid-template-columns:repeat(auto-fill,minmax(112px,1fr));
}
.ev-card{
  position:relative;display:flex;flex-direction:column;align-items:center;gap:5px;
  padding:16px 7px 11px;min-height:104px;border:1px solid rgba(26,21,18,.22);border-radius:2px;
  cursor:pointer;text-align:center;
  background:
    radial-gradient(ellipse at 22% 12%, rgba(255,255,255,.4), transparent 48%),
    linear-gradient(160deg,#D4C098,#C3AE84);
  color:var(--paper-ink);
  box-shadow:0 9px 16px -9px rgba(0,0,0,.95),inset 0 1px 0 rgba(255,255,255,.35);
  transform:rotate(-.6deg);transition:transform .16s ease,box-shadow .2s ease,filter .2s ease;
  user-select:none;-webkit-user-select:none;
}
.ev-card:nth-child(2n){transform:rotate(.7deg)}
.ev-card:nth-child(3n){transform:rotate(-1.1deg)}
.ev-card:active{transform:scale(.97) rotate(0)}
@media (hover:hover){.ev-card:hover{transform:translateY(-3px) rotate(0);box-shadow:0 16px 24px -12px #000,inset 0 1px 0 rgba(255,255,255,.4)}}
.ev-card.locked{
  background:linear-gradient(160deg,#4A463F,#3A3730);
  border-color:rgba(0,0,0,.5);
  color:#8E8677;
  filter:saturate(.4);
}
.ev-card.locked .ev-icon{opacity:.35}
.ev-card .pin{
  position:absolute;top:-6px;left:50%;transform:translateX(-50%);
  width:12px;height:12px;border-radius:50%;z-index:3;
  background:radial-gradient(circle at 33% 28%,#FAECB4,#C9A227 46%,#6B5310);
  box-shadow:0 2px 4px rgba(0,0,0,.75),inset 0 -1px 1px rgba(0,0,0,.4);
}
.ev-card .stamp.small{position:absolute;top:5px;inset-inline-end:5px}
.ev-icon{width:26px;height:26px;color:#4E4029}
.ev-card.locked .ev-icon{color:#7E786C}
.ev-icon svg{width:100%;height:100%;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.ev-title{font-family:'Amiri',serif;font-size:12.5px;font-weight:700;line-height:1.3}
.ev-card.locked .ev-title{color:#9A927F}
.ev-meta{font-size:9.5px;color:#6B5B3E;line-height:1.35}
.ev-card.locked .ev-meta{color:#7C7566}
.board-foot{
  margin-top:10px;font-size:11.5px;color:#8A8071;text-align:center;line-height:1.6;
}

/* ===================== NOTEBOOK ===================== */
.nb-block{
  border:1px solid rgba(201,162,39,.16);border-radius:8px;padding:13px;
  background:linear-gradient(180deg,rgba(255,255,255,.035),rgba(255,255,255,.012));
  margin-bottom:12px;
}
.nb-title{
  display:flex;align-items:center;gap:8px;
  font-family:'Amiri',serif;font-size:15.5px;font-weight:700;color:#EADFC2;margin-bottom:9px;
}
.nb-badge{
  font-family:'Tajawal',sans-serif;font-size:10.5px;font-weight:800;color:#1A1512;
  background:var(--gold);padding:1px 7px;border-radius:999px;
}
.nb-row{display:flex;align-items:center;justify-content:space-between;gap:8px;font-size:12.5px;color:#9C9281}
.nb-row-2{margin-top:8px}
.nb-val{font-weight:800;color:#E9DFC6;font-size:13px}
.nb-val.gold{color:var(--gold-l)}
.bar{height:6px;border-radius:99px;background:rgba(255,255,255,.09);overflow:hidden;margin-top:7px}
.bar i{display:block;height:100%;width:0;border-radius:99px;background:linear-gradient(90deg,#9C7C16,#C9A227,#E7CE7A);transition:width .4s ease}
.nb-hint-note{font-size:11px;color:#867D6E;margin-bottom:8px}
.hint-list{display:flex;flex-direction:column;gap:8px;margin-bottom:10px}
.hint-item{
  font-size:12.5px;line-height:1.65;color:#E2D7BE;
  padding:9px 11px;border-radius:6px;border-inline-start:3px solid var(--gold);
  background:rgba(201,162,39,.1);
  animation:fadeUp .3s ease both;
}
.auto-notes{display:flex;flex-direction:column;gap:7px}
.auto-notes li{
  font-size:12.5px;line-height:1.6;color:#C6BCA6;padding-inline-start:16px;position:relative;
}
.auto-notes li::before{
  content:'';position:absolute;inset-inline-start:0;top:8px;
  width:6px;height:6px;border-radius:50%;background:var(--red);opacity:.8;
}
.auto-notes li.empty{color:#6E675C}
.auto-notes li.empty::before{background:#4a453d}
.note-input{
  width:100%;resize:vertical;min-height:96px;padding:11px 12px;border-radius:6px;
  background:#E6DCC4;color:#1A1512;border:1px solid rgba(0,0,0,.3);
  font-family:'Amiri',serif;font-size:15px;line-height:1.9;
  background-image:repeating-linear-gradient(180deg,transparent 0 27px,rgba(26,21,18,.14) 27px 28px);
  background-position:0 10px;
  box-shadow:inset 0 2px 8px rgba(0,0,0,.2);
}
.note-input::placeholder{color:#7C6E56}
.concl-label{display:block;font-size:12px;font-weight:700;color:#A99C84;margin-bottom:6px}
.concl-group{margin-bottom:11px}
.chip-select{display:flex;flex-wrap:wrap;gap:6px}
.opt{
  min-height:40px;padding:8px 12px;border-radius:999px;cursor:pointer;
  font-size:12.5px;font-weight:600;line-height:1.2;
  background:rgba(255,255,255,.05);color:#BDB3A0;border:1px solid rgba(201,162,39,.22);
  transition:all .16s ease;user-select:none;-webkit-user-select:none;
}
.opt:hover{background:rgba(201,162,39,.12);color:#EFE4C9}
.opt.sel{
  background:linear-gradient(180deg,rgba(201,162,39,.9),rgba(201,162,39,.65));
  color:#1A1512;border-color:#E7CE7A;font-weight:800;
  box-shadow:0 6px 14px -8px rgba(201,162,39,.9);
}
.concl-msg{font-size:12.5px;line-height:1.6;color:#F0A9B4;margin-top:9px;min-height:0}
.concl-warn{font-size:10.5px;color:#776F62;margin-top:7px}
.reset-btn{width:100%;margin-top:6px}
#btn-accuse{margin-top:6px}

/* ===================== OVERLAY ===================== */
.overlay{
  position:fixed;inset:0;z-index:60;display:flex;align-items:flex-start;justify-content:center;
  padding:16px 12px 40px;overflow-y:auto;-webkit-overflow-scrolling:touch;
}
.overlay-backdrop{
  position:fixed;inset:0;background:rgba(3,3,5,.82);backdrop-filter:blur(7px);
  animation:fade .25s ease both;
}
@keyframes fade{from{opacity:0}to{opacity:1}}
.sheet-wrap{position:relative;z-index:2;width:100%;max-width:780px;margin:auto}
.sheet{animation:sheetIn .3s cubic-bezier(.22,1,.36,1) both}
@keyframes sheetIn{from{opacity:0;transform:translateY(22px) rotate(-.6deg) scale(.98)}to{opacity:1;transform:none}}

.doc{
  position:relative;border-radius:3px;padding:18px 16px 16px;
  background:
    radial-gradient(ellipse at 16% 6%, rgba(255,255,255,.34), transparent 44%),
    radial-gradient(ellipse at 92% 96%, rgba(90,60,20,.2), transparent 50%),
    linear-gradient(158deg,#D6C39A,#C9B58B 52%,#B7A177);
  color:var(--paper-ink);
  box-shadow:0 40px 70px -30px #000, inset 0 1px 0 rgba(255,255,255,.34), 0 0 0 1px rgba(0,0,0,.4);
  overflow:hidden;
}
.doc::after{
  content:'';position:absolute;inset:0;pointer-events:none;opacity:.09;
  background-image:var(--noise);background-size:150px;mix-blend-mode:multiply;
}
.doc-close{
  position:absolute;top:8px;inset-inline-start:8px;z-index:4;
  width:42px;height:42px;border-radius:50%;border:1px solid rgba(26,21,18,.28);
  background:rgba(255,255,255,.35);color:#3A2C1C;font-size:22px;line-height:1;
  cursor:pointer;display:grid;place-items:center;transition:background .16s ease;
}
.doc-close:hover{background:rgba(255,255,255,.6)}
.doc-head{
  display:flex;align-items:flex-start;gap:12px;padding-bottom:12px;margin-bottom:14px;
  border-bottom:1px solid rgba(26,21,18,.22);position:relative;z-index:2;
}
.doc-head > div:not(.stamp){flex:1 1 auto;min-width:0}
.doc-org{font-family:'Amiri',serif;font-size:11.5px;color:#5F4E33;margin-bottom:3px}
.doc-head h2{
  font-family:'Amiri',serif;font-size:21px;font-weight:700;line-height:1.25;color:#171310;
}
.doc-sub{font-size:12px;color:#56472F;margin-top:3px}
.doc-id img{
  width:56px;height:68px;object-fit:cover;display:block;background:#6E6E6E;
  border:1px solid rgba(0,0,0,.35);box-shadow:0 3px 9px rgba(0,0,0,.35);
}
.doc-body{position:relative;z-index:2}
.field{margin-bottom:13px}
.field h3{
  font-family:'Amiri',serif;font-size:13.5px;font-weight:700;color:#7B1522;
  margin-bottom:4px;letter-spacing:.01em;
}
.field p{font-family:'Amiri',serif;font-size:15px;line-height:1.85;color:#241C13}
.field.quote p{
  padding-inline-start:12px;border-inline-start:3px solid rgba(123,21,34,.4);
  font-style:italic;color:#33291C;
}
.msgs{display:flex;flex-direction:column;gap:7px}
.msg{display:flex;gap:8px;align-items:flex-start}
.msg .who{
  flex:0 0 auto;font-size:10.5px;font-weight:800;padding:2px 8px;border-radius:999px;
  background:rgba(26,21,18,.14);color:#3A2C1C;margin-top:2px;
}
.msg .txt{font-family:'Amiri',serif;font-size:14px;line-height:1.7;color:#241C13}
.field.contra{background:rgba(200,16,46,.07);border-radius:6px;padding:10px 12px;border:1px dashed rgba(200,16,46,.35)}
.field.contra.locked{background:rgba(26,21,18,.06);border-color:rgba(26,21,18,.2)}
.field.contra.locked p{color:#6D6049;font-size:13px}
.doc-actions{
  display:flex;gap:9px;flex-wrap:wrap;margin-top:16px;padding-top:14px;
  border-top:1px solid rgba(26,21,18,.18);position:relative;z-index:2;
}
.doc-actions .btn{flex:1 1 150px}

/* timeline */
.timeline{position:relative;padding-inline-start:16px;margin-top:6px}
.timeline::before{
  content:'';position:absolute;inset-inline-start:3px;top:6px;bottom:6px;width:2px;
  background:linear-gradient(180deg,rgba(201,162,39,0),rgba(201,162,39,.75),rgba(201,162,39,0));
}
.tl-item{position:relative;padding:0 0 11px 0}
.tl-item::before{
  content:'';position:absolute;inset-inline-start:-16px;top:7px;
  width:8px;height:8px;border-radius:50%;background:#C9A227;
  box-shadow:0 0 0 2px rgba(201,162,39,.25);
}
.tl-item.red::before{background:#C8102E;box-shadow:0 0 0 2px rgba(200,16,46,.25)}
.tl-time{
  font-family:ui-monospace,monospace;font-size:11.5px;font-weight:700;color:#7B1522;
  letter-spacing:.05em;
}
.tl-text{font-family:'Amiri',serif;font-size:13.5px;line-height:1.65;color:#2A2118}

/* tasks */
.tasks{display:flex;flex-direction:column;gap:6px}
.task{
  display:flex;align-items:center;gap:8px;font-size:12.5px;line-height:1.4;
  padding:6px 9px;border-radius:5px;background:rgba(26,21,18,.07);color:#5A4C36;
}
.task .box{
  flex:0 0 auto;width:15px;height:15px;border:1.5px solid rgba(26,21,18,.4);border-radius:3px;
  display:grid;place-items:center;font-size:10px;color:transparent;
}
.task.done{background:rgba(62,92,75,.16);color:#2C4738}
.task.done .box{background:var(--green);border-color:var(--green);color:#E6F0E9}
.task.done span{text-decoration:line-through;text-decoration-color:rgba(44,71,56,.4)}

/* map */
.map-box{
  background:rgba(255,255,255,.24);border:1px solid rgba(26,21,18,.25);border-radius:5px;
  padding:8px;margin-bottom:12px;
}
.map-box svg{display:block;width:100%;height:auto}
.map-cap{font-size:10.5px;color:#5A4C36;text-align:center;margin-top:4px}

/* ===================== PUZZLES ===================== */
.puzzle-lead{font-family:'Amiri',serif;font-size:15px;line-height:1.85;color:#241C13;margin-bottom:13px}
.clue-card{
  position:relative;background:rgba(255,255,255,.32);border:1px dashed rgba(26,21,18,.35);
  border-radius:5px;padding:11px 13px;margin-bottom:14px;
}
.clue-tag{
  display:inline-block;font-size:10px;font-weight:800;letter-spacing:.06em;
  color:#7B1522;margin-bottom:5px;
}
.clue-card p{font-family:'Amiri',serif;font-size:15.5px;line-height:1.8;color:#241C13}
.hand{font-style:italic;transform:rotate(-.6deg)}
.puzzle-form label{display:block;font-size:12.5px;font-weight:700;color:#4E4029;margin-bottom:8px}
.digits{
  width:100%;max-width:220px;padding:12px 14px;border-radius:6px;border:2px solid rgba(26,21,18,.3);
  background:#EFE6CE;color:#1A1512;font-family:ui-monospace,monospace;
  font-size:26px;letter-spacing:.5em;text-align:center;font-weight:700;
  box-shadow:inset 0 2px 8px rgba(0,0,0,.15);
}
.digits::placeholder{color:#A2926F;letter-spacing:.4em}
.num-in{
  width:100%;max-width:260px;padding:12px 14px;border-radius:6px;border:2px solid rgba(26,21,18,.3);
  background:#EFE6CE;color:#1A1512;font-family:ui-monospace,monospace;
  font-size:22px;text-align:center;font-weight:700;letter-spacing:.06em;
  box-shadow:inset 0 2px 8px rgba(0,0,0,.15);
}
.puzzle-actions{display:flex;gap:9px;flex-wrap:wrap;margin-top:14px}
.puzzle-msg{font-size:12.5px;line-height:1.6;margin-top:10px;color:#8E0B20;min-height:18px}
.puzzle-msg.ok{color:#2C4738;font-weight:700}
.shake{animation:shake .42s cubic-bezier(.36,.07,.19,.97) both}
@keyframes shake{
  10%,90%{transform:translateX(-2px)}20%,80%{transform:translateX(3px)}
  30%,50%,70%{transform:translateX(-5px)}40%,60%{transform:translateX(5px)}
}
.solved-block{
  background:rgba(62,92,75,.13);border:1px solid rgba(62,92,75,.4);border-radius:6px;
  padding:12px 13px;margin-top:6px;
}
.solved-block h4{
  font-family:'Amiri',serif;font-size:14px;font-weight:700;color:#2C4738;margin-bottom:5px;
}
.solved-block p{font-family:'Amiri',serif;font-size:14px;line-height:1.8;color:#2A3B31}

/* handwriting */
.hw-grid{display:grid;gap:10px;grid-template-columns:1fr}
@media(min-width:560px){.hw-grid{grid-template-columns:repeat(3,1fr)}}
.hw-card{
  position:relative;border:2px solid rgba(26,21,18,.2);border-radius:5px;padding:12px 11px;
  background:rgba(255,255,255,.4);cursor:pointer;text-align:start;
  transition:border-color .16s ease,box-shadow .16s ease,transform .16s ease;
  min-height:96px;display:flex;flex-direction:column;gap:7px;
}
.hw-card:hover{border-color:rgba(201,162,39,.8)}
.hw-card.sel{border-color:#C8102E;box-shadow:0 0 0 3px rgba(200,16,46,.18)}
.hw-card .hw-label{
  font-family:'Tajawal',sans-serif;font-size:10.5px;font-weight:800;color:#6B5B3E;letter-spacing:.05em;
}
.hw{font-size:18px;line-height:1.85;color:#241a12;white-space:normal}
.hw-a{font-family:'Amiri',serif;transform:rotate(-1.6deg) skewX(-5deg)}
.hw-b{font-family:'Tajawal',sans-serif;font-weight:700;transform:rotate(1.2deg);letter-spacing:.5px}
.hw-b span{display:inline-block}
.hw-b span:nth-child(2n){transform:translateY(2px) rotate(-3deg)}
.hw-b span:nth-child(3n){transform:translateY(-1px) rotate(2deg)}
.hw-c{font-family:'Reem Kufi',serif;font-weight:600;letter-spacing:3px;transform:rotate(-.8deg)}
.receipt-strip{
  background:rgba(255,255,255,.5);border:1px solid rgba(26,21,18,.3);border-radius:5px;
  padding:10px 12px;margin-bottom:13px;transform:rotate(.5deg);
}
.receipt-strip .rs-head{
  font-family:'Tajawal',sans-serif;font-size:10.5px;font-weight:800;color:#7B1522;letter-spacing:.05em;
  margin-bottom:3px;
}

/* audio */
.wave-wrap{margin-bottom:14px}
.wave{
  position:relative;height:104px;border-radius:6px;overflow:hidden;
  background:linear-gradient(180deg,#1b1712,#12100c);
  border:1px solid rgba(201,162,39,.35);
  box-shadow:inset 0 0 26px rgba(0,0,0,.9);
}
.wave svg{position:absolute;inset:0;width:100%;height:100%}
.wmark{
  position:absolute;bottom:0;top:0;width:34px;transform:translateX(-50%);
  background:transparent;border:0;cursor:pointer;padding:0;
}
.wmark::before{
  content:'';position:absolute;left:50%;top:0;bottom:0;width:1px;
  background:rgba(201,162,39,.35);transform:translateX(-50%);
}
.wmark .dot{
  position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  width:13px;height:13px;border-radius:50%;background:#3a3126;border:2px solid rgba(201,162,39,.55);
  transition:all .16s ease;
}
.wmark.heard .dot{background:#C9A227;border-color:#E7CE7A}
.wmark.sel .dot{background:#C8102E;border-color:#FF9FAE;transform:translate(-50%,-50%) scale(1.35);box-shadow:0 0 12px rgba(200,16,46,.9)}
.wmark:focus-visible::before{background:#E7CE7A;width:2px}
.wave-times{display:flex;justify-content:space-between;font-size:9.5px;color:#807767;margin-top:5px;font-family:ui-monospace,monospace}
.listen-out{
  min-height:48px;border-radius:6px;background:rgba(255,255,255,.3);
  border:1px dashed rgba(26,21,18,.32);padding:10px 12px;
  font-family:'Amiri',serif;font-size:14.5px;line-height:1.7;color:#241C13;
}
.listen-out .lt{font-family:ui-monospace,monospace;font-size:11px;color:#7B1522;font-weight:700;display:block;margin-bottom:2px}

/* ===================== REVEAL ===================== */
.reveal{
  position:fixed;inset:0;z-index:70;overflow-y:auto;padding:18px 12px 44px;
  background:
    radial-gradient(60% 45% at 84% -8%, rgba(255,227,176,.18), transparent 66%),
    radial-gradient(120% 90% at 50% 55%, transparent 30%, rgba(0,0,0,.8) 100%),
    #0B0B0D;
  -webkit-overflow-scrolling:touch;
}
.reveal-inner{max-width:720px;margin:0 auto}
.reveal-doc{
  position:relative;border-radius:3px;padding:20px 16px;
  background:
    radial-gradient(ellipse at 16% 6%, rgba(255,255,255,.34), transparent 44%),
    linear-gradient(158deg,#D6C39A,#C9B58B 52%,#B7A177);
  color:var(--paper-ink);
  box-shadow:0 40px 70px -30px #000,inset 0 1px 0 rgba(255,255,255,.34);
  overflow:hidden;
}
.reveal-doc::after{
  content:'';position:absolute;inset:0;pointer-events:none;opacity:.09;
  background-image:var(--noise);background-size:150px;mix-blend-mode:multiply;
}
.reveal-top{
  display:flex;align-items:flex-start;justify-content:space-between;gap:12px;
  padding-bottom:12px;border-bottom:1px solid rgba(26,21,18,.22);margin-bottom:14px;
  position:relative;z-index:2;
}
.reveal-top h2{font-family:'Amiri',serif;font-size:23px;font-weight:700;line-height:1.25;color:#171310}
.reveal-top p{font-size:12px;color:#56472F;margin-top:3px}
.closing-stamp{
  position:absolute;top:44px;inset-inline-end:14px;z-index:3;
  font-size:26px;padding:8px 20px;border-width:4px;
  animation:stampIn .5s cubic-bezier(.2,1.5,.5,1) both;
}
@keyframes stampIn{0%{opacity:0;transform:rotate(-7deg) scale(2.2)}100%{opacity:.9;transform:rotate(-7deg) scale(1)}}
.recon{position:relative;z-index:2;margin-bottom:16px}
.recon h3{
  font-family:'Amiri',serif;font-size:15px;font-weight:700;color:#7B1522;margin-bottom:8px;
}
.recon-line{
  display:flex;gap:10px;align-items:flex-start;padding:6px 0;
  border-bottom:1px dotted rgba(26,21,18,.18);
}
.recon-line .rt{
  flex:0 0 auto;font-family:ui-monospace,monospace;font-size:11.5px;font-weight:700;color:#7B1522;
  padding-top:2px;letter-spacing:.03em;
}
.recon-line .rx{font-family:'Amiri',serif;font-size:14px;line-height:1.75;color:#241C13}
.clear-list{position:relative;z-index:2;display:flex;flex-direction:column;gap:9px;margin-bottom:16px}
.clear-item{
  background:rgba(62,92,75,.12);border:1px solid rgba(62,92,75,.35);border-radius:6px;padding:10px 12px;
}
.clear-item strong{
  display:flex;align-items:center;gap:6px;font-family:'Amiri',serif;font-size:14px;color:#2C4738;margin-bottom:3px;
}
.clear-item p{font-family:'Amiri',serif;font-size:13.5px;line-height:1.7;color:#33443A}
.score-box{
  position:relative;z-index:2;display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:13px 14px;border-radius:6px;margin-bottom:14px;
  background:linear-gradient(160deg,rgba(26,21,18,.94),rgba(40,32,22,.94));color:#F2E7CD;
  box-shadow:0 12px 26px -16px #000;
}
.score-box .sb-label{font-size:11.5px;color:#B5A98F;letter-spacing:.04em}
.score-box .sb-val{
  font-family:ui-monospace,monospace;font-size:34px;font-weight:700;color:var(--gold-l);line-height:1;
}
.score-box .sb-val small{font-size:13px;color:#B5A98F;margin-inline-start:5px;font-family:'Tajawal',sans-serif}
.score-break{font-size:11px;color:#9C9179;margin-top:5px;line-height:1.5}
.reveal-actions{display:flex;gap:9px;flex-wrap:wrap;position:relative;z-index:2}
.reveal-actions .btn{flex:1 1 150px}
.lb-box{position:relative;z-index:2;margin-top:14px}
.lb-list{display:flex;flex-direction:column;gap:6px;margin-top:8px}
.lb-row{
  display:flex;align-items:center;gap:9px;font-size:12.5px;color:#3A2C1C;
  padding:7px 10px;border-radius:5px;background:rgba(255,255,255,.3);
}
.lb-row.you{background:rgba(201,162,39,.35);font-weight:800}
.lb-row .rk{font-family:ui-monospace,monospace;font-weight:700;color:#7B1522;min-width:24px}
.lb-row .hd{flex:1 1 auto;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lb-row .sc{font-family:ui-monospace,monospace;font-weight:700}
.lb-note{font-size:10.5px;color:#6B5B3E;margin-top:6px}

/* ===================== TOASTS ===================== */
.toasts{
  position:fixed;left:50%;bottom:18px;transform:translateX(-50%);
  z-index:90;display:flex;flex-direction:column;gap:8px;align-items:center;
  pointer-events:none;width:calc(100% - 24px);max-width:400px;
}
.toast{
  background:linear-gradient(180deg,rgba(38,32,24,.98),rgba(20,17,14,.98));
  border:1px solid rgba(201,162,39,.5);color:#F0E6CD;
  padding:10px 15px;border-radius:999px;font-size:12.5px;font-weight:600;line-height:1.4;
  box-shadow:0 16px 30px -14px #000;text-align:center;
  animation:toastIn .3s cubic-bezier(.2,1.3,.5,1) both;
}
.toast.ok{border-color:rgba(62,92,75,.9);color:#D8EBDD}
.toast.bad{border-color:rgba(200,16,46,.85);color:#FFD5DC}
.toast.out{animation:toastOut .32s ease forwards}
@keyframes toastIn{from{opacity:0;transform:translateY(14px) scale(.94)}to{opacity:1;transform:none}}
@keyframes toastOut{to{opacity:0;transform:translateY(10px) scale(.95)}}

/* ===================== DESKTOP ===================== */
.hide-xs{display:none}
@media(min-width:400px){.hide-xs{display:inline}}
@media(min-width:1024px){
  .hide-sm{display:inline-flex}
  .tabs{display:none}
  .layout{
    display:grid;grid-template-columns:292px minmax(0,1fr) 320px;gap:18px;
    overflow:hidden;padding:16px 18px 18px;align-items:start;
  }
  .panel{display:block !important;overflow-y:auto;max-height:100%;padding-inline-end:4px;padding-bottom:20px}
  .panel + .panel{border-inline-start:1px solid rgba(201,162,39,.12);padding-inline-start:16px}
  .cover-wrap{max-width:560px}
  .suspect-card{padding:12px}
  .id-photo{width:68px;height:84px}
  .doc{padding:24px 26px 20px}
  .reveal-doc{padding:26px 26px 22px}
}
@media(min-width:1200px){
  .layout{grid-template-columns:320px minmax(0,1fr) 350px;gap:22px}
}
@media(max-width:399px){
  .chip{padding:8px 10px;font-size:11.5px}
  .brand-title{font-size:13.5px}
  .badge-mini{width:29px;height:29px;font-size:9.5px}
}
::-webkit-scrollbar{width:8px;height:8px}
::-webkit-scrollbar-thumb{background:rgba(201,162,39,.28);border-radius:99px}
::-webkit-scrollbar-track{background:transparent}

@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{
    animation-duration:.001ms !important;animation-iteration-count:1 !important;
    transition-duration:.001ms !important;scroll-behavior:auto !important;
  }
}

/* ===================== خلفية مصوّرة للغلاف ===================== */
.cover{
  background-image:
    linear-gradient(180deg,rgba(5,7,10,.70) 0%,rgba(5,7,10,.88) 55%,rgba(5,7,10,.98) 100%),
    url('assets/scene_station.png');
  background-size:cover;
  background-position:center 32%;
  background-repeat:no-repeat;
}

/* ===================== المشهد الافتتاحي ===================== */
.intro{
  position:fixed;inset:0;z-index:80;display:flex;flex-direction:column;
  background:#07080A;color:#EDE6D8;
}
.intro-slides{
  flex:1 1 auto;min-height:0;overflow-y:auto;display:flex;flex-direction:column;
  -webkit-overflow-scrolling:touch;
}
.intro-slide{
  position:relative;flex:1 0 auto;min-height:100%;display:flex;align-items:flex-end;
  overflow:hidden;
}
.intro-media{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center;
  background-size:cover;background-position:center;
  animation:introZoom 9000ms ease-out both;
}
@keyframes introZoom{from{transform:scale(1.12)}to{transform:scale(1.01)}}
.intro-scrim{
  position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(4,6,9,.30) 0%,rgba(4,6,9,.52) 42%,rgba(4,6,9,.96) 100%);
}
.intro-slide:not(.has-img){
  background:
    radial-gradient(70% 50% at 82% 0%, rgba(201,162,39,.15), transparent 62%),
    radial-gradient(90% 70% at 10% 100%, rgba(200,16,46,.10), transparent 66%),
    linear-gradient(160deg,#101114,#07080A 72%);
}
.intro-slide:not(.has-img)::after{
  content:'';position:absolute;inset:0;opacity:.05;pointer-events:none;
  background-image:var(--noise);background-size:170px;
}
.intro-text{
  position:relative;z-index:2;width:100%;max-width:660px;margin:0 auto;
  padding:40px 20px 24px;animation:fadeUp .5s ease both;
}
.intro-tag{
  display:inline-block;font-size:11.5px;font-weight:800;letter-spacing:.03em;
  color:#0B0B0D;background:linear-gradient(180deg,#E7CE7A,#C9A227);
  padding:3px 11px;border-radius:999px;margin-bottom:11px;
}
.intro-text h2{
  font-family:'Amiri',serif;font-size:clamp(23px,6.4vw,34px);line-height:1.25;
  color:#FFF6E2;text-shadow:0 2px 20px rgba(0,0,0,.85);
}
.intro-text p{
  font-size:15px;line-height:1.85;color:#DED4C0;margin-top:10px;
  text-shadow:0 1px 12px rgba(0,0,0,.8);
}
.intro-note{
  font-size:12.5px;color:#E0C77C !important;margin-top:12px;
  border-inline-start:2px solid rgba(201,162,39,.65);padding-inline-start:11px;
  text-shadow:none;
}
.intro-faces{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-top:18px;max-width:430px}
.iface{
  position:relative;border-radius:4px;overflow:hidden;background:#12141a;
  border:1px solid rgba(201,162,39,.3);
}
.iface img{display:block;width:100%;height:78px;object-fit:cover;filter:contrast(1.05) saturate(.9)}
.iface .lbl{
  display:block;text-align:center;font-size:10.5px;font-weight:700;
  color:#D8CDB6;padding:4px 2px;background:rgba(0,0,0,.35);
}
.iface-ph{display:block;height:78px;position:relative}
.iface-ph.cctv{background:linear-gradient(180deg,#111823,#05080b)}
.intro-bar{
  flex:0 0 auto;display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:10px 16px;border-top:1px solid rgba(201,162,39,.2);
  background:rgba(8,9,11,.95);backdrop-filter:blur(8px);
}
.intro-dots{display:flex;align-items:center;gap:6px}
.intro-dots .dotx{
  width:7px;height:7px;border-radius:50%;background:rgba(201,162,39,.28);
  transition:all .22s ease;
}
.intro-dots .dotx.on{width:22px;border-radius:99px;background:var(--gold)}
.intro-ctrls{display:flex;gap:8px}
.intro-ctrls .btn{min-width:92px}

/* ===================== صورة المجهول (CCTV) ===================== */
.id-photo.cctv{
  position:relative;overflow:hidden;
  background:linear-gradient(180deg,#111823,#05080b);
  box-shadow:0 2px 7px rgba(0,0,0,.45),0 0 0 1px rgba(0,0,0,.35);
}
.cctv-fig{
  display:block;width:100%;height:100%;
  background:
    radial-gradient(circle at 50% 27%, #26303a 0 12%, transparent 13%),
    radial-gradient(ellipse 29% 37% at 50% 70%, #1d252e 0 99%, transparent 100%);
}
.iface-ph.cctv .cctv-fig{height:78px}
.id-photo.cctv::after{
  content:'';position:absolute;inset:0;pointer-events:none;
  background:repeating-linear-gradient(180deg,rgba(120,200,160,.08) 0 1px,transparent 1px 3px);
}
.cctv-ts{
  position:absolute;bottom:2px;inset-inline-start:3px;direction:ltr;
  font-family:ui-monospace,monospace;font-size:7px;letter-spacing:.02em;
  color:#79c79b;opacity:.9;
}
.doc-id .id-photo{width:56px;height:68px;display:block}
.suspect-card.unknown-card{
  background:linear-gradient(158deg,#33343A,#23242B 58%,#191A1F);
  border:1px dashed rgba(201,162,39,.42);
  box-shadow:0 14px 26px -14px rgba(0,0,0,.95),inset 0 1px 0 rgba(255,255,255,.07);
}
.suspect-card.unknown-card .suspect-info strong{color:#F1E8D3}
.suspect-card.unknown-card .suspect-info em{color:#A79E8C}
.suspect-card.unknown-card .status{
  color:#E0C77C;border-color:rgba(201,162,39,.5);background:rgba(201,162,39,.12);
}
.suspect-card.unknown-card .status.ok{
  color:#A8DCC0;border-color:rgba(62,92,75,.8);background:rgba(62,92,75,.28);
}

/* ===================== آثار المجهول ===================== */
.trace{
  border:1px solid rgba(26,21,18,.22);border-radius:6px;padding:9px 11px;margin-bottom:8px;
  background:rgba(255,255,255,.28);
}
.trace.got{border-inline-start:3px solid var(--green);background:rgba(62,92,75,.1)}
.trace-h{display:flex;align-items:center;gap:8px;margin-bottom:3px}
.trace-n{
  flex:0 0 auto;width:18px;height:18px;border-radius:50%;display:grid;place-items:center;
  font-size:10.5px;font-weight:800;background:rgba(26,21,18,.16);color:#4E4029;
}
.trace.got .trace-n{background:var(--green);color:#EAF3EC}
.trace-t{font-family:'Amiri',serif;font-size:14px;font-weight:700;color:#2A2118}
.trace p{font-family:'Amiri',serif;font-size:13.5px;line-height:1.75;color:#33291C}
.trace-muted{
  font-family:'Tajawal',sans-serif !important;font-size:12.5px !important;
  color:#6D6049 !important;line-height:1.7;
}
.trace-locked{
  border:1px dashed rgba(26,21,18,.32);border-radius:6px;padding:10px 12px;
  background:rgba(26,21,18,.05);
}
.trace-locked b{font-family:'Amiri',serif;font-size:14px;color:#7B1522}
.trace-locked p{font-size:12.5px;line-height:1.7;color:#5A4C36;margin-top:3px}
.cand-list{display:flex;flex-direction:column;gap:8px;margin:10px 0}
.cand{
  width:100%;text-align:start;border:2px solid rgba(26,21,18,.2);border-radius:6px;
  padding:10px 12px;background:rgba(255,255,255,.4);cursor:pointer;
  transition:border-color .16s ease,box-shadow .16s ease;
  user-select:none;-webkit-user-select:none;
}
.cand:hover{border-color:rgba(201,162,39,.85)}
.cand.sel{border-color:#C8102E;box-shadow:0 0 0 3px rgba(200,16,46,.16)}
.cand strong{display:block;font-family:'Amiri',serif;font-size:14.5px;color:#1A1512}
.cand em{display:block;font-style:normal;font-size:11.5px;color:#7B1522;margin-bottom:3px}
.cand p{font-size:12.5px;line-height:1.65;color:#4E4029}

/* ===================== صندوق الشاهد ===================== */
.witness-box{
  position:relative;z-index:2;margin-bottom:16px;border-radius:6px;padding:11px 13px;
  border:1px solid rgba(201,162,39,.55);background:rgba(201,162,39,.14);
}
.witness-box h3{font-family:'Amiri',serif;font-size:15px;color:#6E5510;margin-bottom:5px}
.witness-box p{font-family:'Amiri',serif;font-size:13.5px;line-height:1.8;color:#3A2C1C;margin-bottom:5px}
.witness-box p:last-child{margin-bottom:0}