:root{
  --void:#181c25;
  --panel:#212734;
  --panel-2:#2a3140;
  --line:#3a4254;
  --amber:#e0a458;
  --amber-dim:#8a6a3e;
  --signal:#5fd9c0;
  --signal-dim:#2f6a5e;
  --ink:#f0ece2;
  --ink-dim:#aab2c2;
  --danger:#c65a4e;
  --danger-dim:#7a3a33;
  --gold-glow: 0 0 24px rgba(224,164,88,.15);
}
*{box-sizing:border-box; margin:0; padding:0;}
html,body{height:100%;}
body{
  background:var(--void); color:var(--ink); font-family:'Cairo', sans-serif;
  min-height:100vh; overflow-x:hidden; position:relative;
}
.mono{ font-family:'JetBrains Mono', monospace; direction:ltr; display:inline-block; }

.grain{
  position:fixed; inset:0; pointer-events:none; z-index:50;
  background-image: radial-gradient(circle at 20% 30%, rgba(255,255,255,.02), transparent 40%),
                     radial-gradient(circle at 80% 70%, rgba(255,255,255,.015), transparent 40%);
  mix-blend-mode:overlay;
}
.scan{
  position:fixed; inset:0; pointer-events:none; z-index:51;
  background:repeating-linear-gradient(180deg, rgba(255,255,255,.012) 0px, rgba(255,255,255,.012) 1px, transparent 1px, transparent 3px);
  opacity:.5;
}
@media (prefers-reduced-motion: no-preference){ .flicker{ animation: flicker 6s infinite; } }
@keyframes flicker{ 0%,93%,100%{opacity:1;} 94%{opacity:.82;} 95%{opacity:1;} 96%{opacity:.7;} 97%{opacity:1;} }

.photo-tone{ filter: grayscale(.35) contrast(1.05) brightness(1.12) saturate(.95) sepia(.08); }

#app{ max-width:960px; margin:0 auto; padding:28px 20px 80px; position:relative; z-index:1; }

/* ============ BETA BANNER — نسخة تجريبية ============ */
.beta-banner{
  position:sticky; top:0; z-index:120;
  display:flex; align-items:center; justify-content:center; gap:10px; flex-wrap:wrap;
  background:linear-gradient(90deg, rgba(224,164,88,.16), rgba(224,164,88,.08));
  border-bottom:1px solid var(--amber-dim);
  padding:9px 40px 9px 16px;
  font-size:12.5px; line-height:1.5; text-align:center;
}
.beta-banner-tag{
  font-size:11px; font-weight:700; color:var(--amber); background:rgba(224,164,88,.14);
  border:1px solid var(--amber-dim); border-radius:20px; padding:2px 10px; white-space:nowrap;
}
.beta-banner-text{ color:var(--ink-dim); }
.beta-banner-close{
  position:absolute; left:12px; top:50%; transform:translateY(-50%);
  background:none; border:none; color:var(--ink-dim); font-size:20px; line-height:1;
  cursor:pointer; padding:4px 8px; transition:.15s;
}
.beta-banner-close:hover{ color:var(--ink); }
@media (max-width:600px){
  .beta-banner{ font-size:11px; padding:8px 34px 8px 12px; }
  .beta-banner-tag{ font-size:10px; }
}


.masthead{
  border-bottom:1px solid var(--line); padding-bottom:18px; margin-bottom:22px;
  display:flex; align-items:flex-end; justify-content:space-between; gap:16px; flex-wrap:wrap;
}
.masthead .case-no{ color:var(--ink-dim); font-size:12px; letter-spacing:.08em; }
.case-location{ color:var(--signal); font-size:12px; line-height:1.7; }
.masthead-location{ margin:5px 0 3px; }
.briefing-location{
  display:inline-flex; margin:2px 0 14px; padding:6px 10px;
  border:1px solid var(--signal-dim); border-radius:3px; background:rgba(95,217,192,.06);
}
.preview-location{ margin:7px 0 12px; }
.masthead h1{
  font-family:'Rakkas', serif; font-size:clamp(26px,4vw,38px); font-weight:400; color:var(--amber);
  letter-spacing:-.01em; margin-top:4px; text-shadow:var(--gold-glow);
}
.masthead .status-dot{
  width:8px; height:8px; border-radius:50%; background:var(--signal); display:inline-block;
  box-shadow:0 0 8px var(--signal); margin-left:6px;
}
.stat-line{ font-size:12px; color:var(--ink-dim); display:flex; align-items:center; gap:8px; }

.tabs{ display:flex; gap:6px; margin-bottom:24px; flex-wrap:wrap; }
.tab{
  background:var(--panel); border:1px solid var(--line); color:var(--ink-dim);
  padding:10px 18px; font-family:inherit; font-size:14px; font-weight:700; cursor:pointer;
  border-radius:3px; transition:.15s;
}
.tab:hover:not(:disabled){ border-color:var(--amber-dim); color:var(--ink); }
.tab.active{ background:var(--amber); color:#1a1305; border-color:var(--amber); }
.tab:disabled{ opacity:.35; cursor:not-allowed; }

.panel{ background:var(--panel); border:1px solid var(--line); border-radius:4px; padding:26px; }
@media (prefers-reduced-motion: no-preference){
  .panel{ animation: panelIn .38s cubic-bezier(.2,.7,.3,1); }
  .panel.slide-r{ animation: slideR .38s cubic-bezier(.2,.7,.3,1); }
  .panel.slide-l{ animation: slideL .38s cubic-bezier(.2,.7,.3,1); }
}
@keyframes panelIn{ from{opacity:0; transform:translateY(10px);} to{opacity:1; transform:translateY(0);} }
@keyframes slideR{ from{opacity:0; transform:translateX(22px);} to{opacity:1; transform:translateX(0);} }
@keyframes slideL{ from{opacity:0; transform:translateX(-22px);} to{opacity:1; transform:translateX(0);} }

.panel h2{ color:var(--amber); font-size:22px; margin-bottom:14px; font-weight:800; }
.panel h3{ color:var(--ink); font-size:16px; margin:18px 0 8px; font-weight:700; }
.panel p{ line-height:2; color:var(--ink); margin-bottom:10px; font-size:15px; }
.panel p.dim{ color:var(--ink-dim); font-size:13px; }
.divider{ height:1px; background:var(--line); margin:18px 0; }

.brief-meta{ display:grid; grid-template-columns:repeat(auto-fit,minmax(160px,1fr)); gap:14px; margin:18px 0; }
.brief-meta .item{ background:var(--panel-2); border:1px solid var(--line); border-radius:3px; padding:12px 14px; }
.brief-meta .item .label{ font-size:11px; color:var(--ink-dim); letter-spacing:.05em; margin-bottom:4px; }
.brief-meta .item .value{ font-size:14px; color:var(--amber); font-weight:700; }

.hero-banner{
  position:relative; width:min(100%,320px); aspect-ratio:4/5; margin:0 auto 22px;
  border-radius:6px; overflow:hidden; border:1px solid var(--line);
  box-shadow:0 16px 34px rgba(0,0,0,.5);
}
.hero-banner img{ width:100%; height:100%; object-fit:cover; display:block; }
.hero-banner::after{ content:''; position:absolute; inset:0; background:linear-gradient(180deg, rgba(24,28,37,0) 0%, rgba(24,28,37,.06) 65%, rgba(24,28,37,.6) 100%); }
.hero-banner .hero-caption{ position:absolute; right:14px; bottom:12px; z-index:2; font-size:11px; color:var(--ink-dim); font-family:'JetBrains Mono',monospace; letter-spacing:.05em; }

.ev-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(230px,1fr)); gap:14px; }
.ev-card{ background:var(--panel-2); border:1px solid var(--line); border-radius:4px; padding:16px; cursor:pointer; transition:.15s; position:relative; }
.ev-card:hover{ border-color:var(--amber-dim); transform:translateY(-2px); }
.ev-card .tag{ font-size:10px; color:var(--signal); font-family:'JetBrains Mono',monospace; margin-bottom:6px; letter-spacing:.05em; }
.ev-card .tag.crit{ color:var(--danger); }
.ev-card h4{ font-size:15px; color:var(--ink); margin-bottom:6px; font-weight:700; }
.ev-card .preview{ font-size:12.5px; color:var(--ink-dim); line-height:1.7; }
.ev-locked{ display:flex; align-items:center; justify-content:center; min-height:100px; border:1px dashed var(--line); border-radius:4px; color:var(--ink-dim); font-size:13px; padding:16px; text-align:center; }
.ev-thumb{ width:100%; aspect-ratio:2/1; height:auto; object-fit:contain; background:var(--panel); border-radius:3px; margin-bottom:12px; display:block; transition:transform .3s ease; }
.ev-card:hover .ev-thumb{ transform:scale(1.04); }

.overlay{ position:fixed; inset:0; background:rgba(4,5,8,.82); z-index:100; display:flex; align-items:center; justify-content:center; padding:20px; }
.modal{ background:var(--panel); border:1px solid var(--amber-dim); border-radius:5px; max-width:520px; width:100%; padding:26px; box-shadow:0 0 40px rgba(0,0,0,.6); }
.modal .tag{ font-size:11px; color:var(--signal); font-family:'JetBrains Mono',monospace; margin-bottom:8px; }
.modal h3{ color:var(--amber); font-size:19px; margin-bottom:14px; }
.modal p{ line-height:1.9; font-size:14.5px; margin-bottom:8px; }
.modal .close-btn{ margin-top:16px; }

.sus-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(210px,1fr)); gap:14px; }
.sus-card{ background:var(--panel-2); border:1px solid var(--line); border-radius:5px; padding:18px; cursor:pointer; text-align:center; transition:.15s; }
.sus-card:hover{ border-color:var(--amber-dim); }
.sus-card h4{ font-size:15px; margin-bottom:4px; }
.sus-card .role{ font-size:12px; color:var(--ink-dim); }
.avatar-photo{ width:84px; height:84px; border-radius:50%; margin:0 auto 12px; display:block; object-fit:cover; border:2px solid var(--amber-dim); transition:.25s; }
.sus-card:hover .avatar-photo{ border-color:var(--amber); box-shadow:0 0 18px rgba(224,164,88,.25); }
.avatar-photo.small{ width:52px; height:52px; border-radius:50%; object-fit:cover; border:2px solid var(--amber-dim); flex-shrink:0; }

.transcript{ background:var(--void); border:1px solid var(--line); border-radius:4px; padding:16px; min-height:120px; margin-bottom:16px; max-height:340px; overflow-y:auto; }
.line{ margin-bottom:14px; line-height:1.85; font-size:14.5px; }
.line .who{ font-size:11px; font-family:'JetBrains Mono',monospace; color:var(--ink-dim); margin-bottom:3px; }
.line.q .who{ color:var(--signal); }
.line.a .who{ color:var(--amber); }
.q-grid{ display:flex; flex-direction:column; gap:8px; }
.q-btn{ background:var(--panel-2); border:1px solid var(--line); color:var(--ink); text-align:right; padding:11px 14px; border-radius:3px; font-family:inherit; font-size:14px; cursor:pointer; transition:.15s; }
.q-btn:hover:not(:disabled){ border-color:var(--signal-dim); background:#182028; }
.q-btn:disabled{ opacity:.3; cursor:not-allowed; text-decoration:line-through; }

.btn{ background:var(--amber); color:#1a1305; border:none; padding:11px 22px; border-radius:3px; font-family:inherit; font-weight:800; font-size:14px; cursor:pointer; transition:.15s; }
.btn:hover{ filter:brightness(1.08); }
.btn.ghost{ background:transparent; border:1px solid var(--line); color:var(--ink-dim); }
.btn.ghost:hover{ border-color:var(--amber-dim); color:var(--ink); }
.btn:disabled{ opacity:.35; cursor:not-allowed; }

.wave-wrap{ background:var(--void); border:1px solid var(--line); border-radius:4px; padding:20px; margin:18px 0; position:relative; }
.wave-wrap svg{ width:100%; height:auto; cursor:crosshair; }
.wave-hint{ font-size:12px; color:var(--ink-dim); margin-top:10px; text-align:center; }
.wave-feedback{ text-align:center; margin-top:10px; font-size:14px; font-weight:700; min-height:20px; }
.wave-feedback.ok{ color:var(--signal); }
.wave-feedback.bad{ color:var(--danger); }
.wave-beam{ position:absolute; top:20px; bottom:44px; width:1px; background:linear-gradient(180deg, transparent, var(--signal), transparent); opacity:.5; pointer-events:none; left:20px; }
@media (prefers-reduced-motion: no-preference){ .wave-beam{ animation: sweep 3.2s ease-in-out infinite; } }
@keyframes sweep{ 0%{left:20px;} 50%{left:calc(100% - 20px);} 100%{left:20px;} }
.wave-match{ opacity:0; }
.wave-match.show{ opacity:1; }
@media (prefers-reduced-motion: no-preference){ .wave-match.show{ animation: matchPulse 1s ease-in-out 2; } }
@keyframes matchPulse{ 0%,100%{stroke-opacity:.4;} 50%{stroke-opacity:1;} }

/* camera timeline puzzle */
.cam-wrap{ background:var(--void); border:1px solid var(--line); border-radius:4px; padding:24px 20px 20px; margin:18px 0; }
.cam-track{
  position:relative; height:12px; background:var(--panel-2); border-radius:6px; cursor:pointer;
  background-image: repeating-linear-gradient(90deg, var(--line) 0, var(--line) 1px, transparent 1px, transparent 10%);
}
.cam-marker{
  position:absolute; top:50%; width:4px; height:28px; background:var(--danger); border-radius:2px;
  transform:translate(-50%,-50%); opacity:0; transition:opacity .2s, left .05s linear;
  box-shadow:0 0 8px rgba(198,90,78,.6);
}
.cam-marker.show{ opacity:1; }
.cam-labels{ display:flex; justify-content:space-between; margin-top:14px; font-size:12px; color:var(--ink-dim); }
.cam-labels #camReadout{ color:var(--amber); font-weight:700; }

/* لوحة التحقيق — ربط الأدلة بالمشتبه بهم بخيوط */
.board-wrap{ position:relative; display:flex; gap:32px; margin:18px 0 8px; }
.board-col{ flex:1; display:flex; flex-direction:column; gap:10px; position:relative; z-index:2; }
.board-col h4{ font-size:11px; color:var(--ink-dim); letter-spacing:.08em; margin-bottom:4px; }
.board-chip{
  border:1px solid var(--line); background:var(--panel-2); color:var(--ink-dim);
  padding:11px 14px; border-radius:4px; cursor:pointer; font-size:13px; text-align:right; transition:.15s;
}
.board-chip:hover{ border-color:var(--amber-dim); color:var(--ink); }
.board-chip.selected{ border-color:var(--amber); color:var(--amber); background:#241d0f; }
.board-chip.connected{ border-color:var(--danger); color:var(--danger); }
.board-svg{ position:absolute; inset:0; z-index:1; pointer-events:none; width:100%; height:100%; }
.board-thread{ stroke:var(--danger); stroke-width:2; fill:none; opacity:.85; filter:drop-shadow(0 0 3px rgba(198,90,78,.5)); }
.board-warning{ color:var(--danger); font-size:12.5px; margin-top:14px; line-height:1.8; }
.confront-btn{ text-align:right; }

.ending-badge{ font-size:12px; font-family:'Cairo',sans-serif; font-weight:700; margin-bottom:10px; }
.ending-badge.good{ color:var(--signal); }
.ending-badge.partial{ color:var(--amber); }
.ending-badge.bad{ color:var(--danger); }
.ending-title{ font-size:26px; font-weight:900; margin-bottom:16px; }
.ending-title.good{ color:var(--signal); }
.ending-title.partial{ color:var(--amber); }
.ending-title.bad{ color:var(--danger); }

.score-final{ margin-top:16px; font-size:14px; color:var(--ink); background:var(--panel-2); border:1px solid var(--line); border-radius:4px; padding:10px 14px; display:inline-block; }
.score-final strong{ color:var(--signal); font-size:16px; }
.lb-box{ margin-top:18px; background:var(--panel-2); border:1px solid var(--line); border-radius:6px; padding:14px 16px; }

/* ============ SOCIAL FOLLOW — تيليجرام / إنستجرام ============ */
.social-follow{
  display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:10px;
  background:var(--panel-2); border:1px solid var(--line); border-radius:6px;
  padding:10px 14px; margin-bottom:14px;
}
.social-follow-label{ font-size:12px; color:var(--ink-dim); }
.social-follow-btns{ display:flex; gap:8px; flex-wrap:wrap; }
.social-btn{ font-size:12px; white-space:nowrap; text-decoration:none; display:inline-flex; align-items:center; gap:6px; }
.social-btn.whatsapp:hover{ border-color:#25D366; color:#25D366; }
.social-btn.telegram:hover{ border-color:#2AABEE; color:#2AABEE; }
.social-follow.ending{ margin-top:14px; margin-bottom:0; }
.telegram-intel-card{
  flex:1 1 100%; display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:14px;
  margin-top:2px; padding:15px 16px; border:1px solid rgba(42,171,238,.42); border-radius:6px;
  background:linear-gradient(135deg,rgba(42,171,238,.13),rgba(95,217,192,.05));
}
.telegram-intel-icon{ font-size:28px; filter:drop-shadow(0 0 10px rgba(42,171,238,.35)); }
.telegram-intel-copy{ display:flex; flex-direction:column; gap:2px; min-width:0; }
.telegram-intel-eyebrow{ color:#2AABEE; font-size:10px; letter-spacing:.08em; }
.telegram-intel-copy strong{ color:var(--ink); font-size:15px; }
.telegram-intel-copy span{ color:var(--ink-dim); font-size:11.5px; line-height:1.7; }
.telegram-intel-btn{ text-decoration:none; white-space:nowrap; background:#229ED9; border-color:#229ED9; color:#fff; }
.telegram-intel-btn:hover{ background:#2AABEE; border-color:#2AABEE; filter:brightness(1.06); }

.telegram-invite-overlay{ z-index:620; }
.telegram-invite-modal{
  position:relative; max-width:470px; text-align:center; overflow:hidden;
  border-color:rgba(42,171,238,.55); box-shadow:0 24px 80px rgba(0,0,0,.65),0 0 40px rgba(42,171,238,.1);
}
.telegram-invite-modal::before{
  content:''; position:absolute; inset:0 0 auto; height:4px;
  background:linear-gradient(90deg,#2AABEE,var(--signal));
}
.telegram-invite-close{
  position:absolute; top:10px; left:12px; width:34px; height:34px; border-radius:50%; cursor:pointer;
  border:1px solid var(--line); background:var(--panel-2); color:var(--ink-dim); font-size:21px;
}
.telegram-invite-seal{ font-size:42px; margin:4px 0 8px; }
.telegram-invite-modal h3{ margin:8px 0 7px; font-size:24px; }
.telegram-invite-modal p{ color:var(--ink-dim); line-height:1.9; margin-bottom:18px; }
.telegram-invite-primary{ display:flex; justify-content:center; width:100%; text-decoration:none; background:#229ED9; border-color:#229ED9; color:#fff; }
.telegram-invite-primary:hover{ background:#2AABEE; border-color:#2AABEE; }
.telegram-invite-later{ width:100%; margin-top:8px; }
@media (max-width:600px){
  .social-follow{ flex-direction:column; align-items:flex-start; }
  .telegram-intel-card{ grid-template-columns:auto 1fr; }
  .telegram-intel-btn{ grid-column:1/-1; width:100%; justify-content:center; }
}
.lb-row{ display:flex; align-items:center; gap:10px; padding:6px 0; border-bottom:1px solid var(--line); font-size:13px; }
.lb-row:last-child{ border-bottom:none; }
.lb-row.me{ color:var(--amber); font-weight:700; }
.lb-rank{ width:32px; color:var(--ink-dim); flex-shrink:0; }
.lb-row.lb-top .lb-rank{ width:auto; color:var(--amber); font-size:11px; }
.lb-name{ flex:1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.lb-score{ color:var(--signal); }

.stamp{ display:inline-block; border:3px solid; padding:8px 22px; font-weight:900; font-size:22px; border-radius:5px; transform:rotate(-5deg); margin-bottom:16px; }
.stamp.good{ color:var(--signal); border-color:var(--signal); }
.stamp.partial{ color:var(--amber); border-color:var(--amber); }
.stamp.bad{ color:var(--danger); border-color:var(--danger); }
@media (prefers-reduced-motion: no-preference){ .stamp{ animation: stampIn .5s cubic-bezier(.2,1.4,.4,1); } }
@keyframes stampIn{ 0%{opacity:0; transform:rotate(-5deg) scale(2.4);} 70%{opacity:1;} 100%{opacity:1; transform:rotate(-5deg) scale(1);} }

.flash{ position:fixed; inset:0; z-index:190; pointer-events:none; opacity:0; }
.flash.go{ animation:flashPulse .8s ease forwards; }
.flash.good{ background:radial-gradient(circle, rgba(95,217,192,.28), transparent 70%); }
.flash.partial{ background:radial-gradient(circle, rgba(224,164,88,.25), transparent 70%); }
.flash.bad{ background:radial-gradient(circle, rgba(198,90,78,.32), transparent 70%); }
@keyframes flashPulse{ 0%{opacity:1;} 100%{opacity:0;} }

.verdict-loading{ text-align:center; padding:70px 20px; }
.verdict-scan{ width:220px; height:2px; margin:0 auto 26px; background:var(--line); position:relative; overflow:hidden; border-radius:2px; }
.verdict-scan::after{ content:''; position:absolute; top:0; right:-40%; width:40%; height:100%; background:var(--signal); box-shadow:0 0 12px var(--signal); }
@media (prefers-reduced-motion: no-preference){ .verdict-scan::after{ animation:scanMove 1s ease-in-out infinite; } }
@keyframes scanMove{ 0%{right:-40%;} 100%{right:100%;} }

.toast-wrap{ position:fixed; top:18px; left:50%; transform:translateX(-50%); z-index:180; display:flex; flex-direction:column; gap:8px; align-items:center; pointer-events:none; }
.toast{ background:var(--panel); border:1px solid var(--amber-dim); border-radius:3px; padding:10px 20px; font-size:13px; color:var(--amber); box-shadow:0 6px 24px rgba(0,0,0,.5); white-space:nowrap; font-family:'JetBrains Mono',monospace; }
.toast.danger{ border-color:var(--danger-dim); color:var(--danger); }
.toast.rumor{ border-color:var(--signal-dim); color:var(--ink-dim); font-style:italic; }
@media (prefers-reduced-motion: no-preference){ .toast{ animation: toastIn .35s cubic-bezier(.2,.8,.3,1), toastOut .4s ease 2.6s forwards; } }
@keyframes toastIn{ from{opacity:0; transform:translateY(-14px) scale(.94);} to{opacity:1; transform:translateY(0) scale(1);} }
@keyframes toastOut{ to{opacity:0; transform:translateY(-10px) scale(.96);} }

.type-cursor{ display:inline-block; width:2px; height:1em; background:var(--amber); vertical-align:-2px; margin-right:2px; }
@media (prefers-reduced-motion: no-preference){ .type-cursor{ animation:blink .8s step-end infinite; } }
@keyframes blink{ 50%{opacity:0;} }

/* ============ SPLASH / PROLOGUE (shared, driven by whichever case is active) ============ */
.splash{
  position:fixed; inset:0; z-index:300; background:var(--void); display:flex; flex-direction:column;
  align-items:center; justify-content:center; cursor:pointer; text-align:center; padding:20px; transition:opacity .5s ease;
}
.splash.hide{ opacity:0; pointer-events:none; }
.splash-caseno{ color:var(--ink-dim); font-size:12px; letter-spacing:.15em; margin-bottom:10px; }
.splash-location{ color:var(--signal); font-size:12px; line-height:1.7; margin-bottom:10px; }
.splash-title{ font-family:'Rakkas', serif; font-size:clamp(34px,8vw,58px); font-weight:400; color:var(--amber); text-shadow:var(--gold-glow); margin-bottom:10px; letter-spacing:-.01em; }
.splash-sub{ color:var(--ink-dim); font-size:13px; letter-spacing:.08em; margin-bottom:46px; }
.splash-prompt{ color:var(--signal); font-size:13px; letter-spacing:.1em; border:1px solid var(--signal-dim); padding:10px 24px; border-radius:2px; }
@media (prefers-reduced-motion: no-preference){ .splash-prompt{ animation:promptPulse 1.8s ease-in-out infinite; } }
@keyframes promptPulse{ 0%,100%{opacity:.6;} 50%{opacity:1;} }

.prologue{ position:fixed; inset:0; z-index:250; background:var(--void); overflow:hidden; display:flex; align-items:flex-end; justify-content:center; }
.prologue-bg{
  position:absolute; inset:0; background-size:cover; background-position:center;
  filter: grayscale(.25) contrast(1.03) brightness(1.02) saturate(.95) sepia(.06) blur(0px);
  transform: scale(1);
  transition: opacity .45s ease, transform .7s ease, filter .55s ease;
}
.prologue-bg.fading{
  opacity:0;
  transform: scale(1.1);
  filter: grayscale(.25) contrast(1.03) brightness(.72) saturate(.95) sepia(.06) blur(10px);
}
.prologue::before{ content:''; position:absolute; inset:0; z-index:1; background:linear-gradient(180deg, rgba(24,28,37,.05) 0%, rgba(24,28,37,.38) 58%, rgba(24,28,37,.8) 100%); }
.prologue-content{
  position:relative; z-index:2; max-width:620px; padding:40px 26px 30px; text-align:center; cursor:pointer;
  transition: opacity .4s ease, transform .4s ease;
  transform: translateY(0);
}
.prologue-content.fading{ opacity:0; transform: translateY(18px); }
.prologue-scene{ color:var(--signal); font-size:11px; letter-spacing:.14em; margin-bottom:16px; }
.prologue-text{ font-size:19px; line-height:2.1; color:var(--ink); min-height:132px; }
.prologue-next{ margin-top:24px; opacity:0; transition:opacity .4s ease; pointer-events:none; }
.prologue-next.show{ opacity:1; pointer-events:auto; }
.prologue-progress{ position:absolute; bottom:20px; left:50%; transform:translateX(-50%); display:flex; gap:6px; z-index:2; }
.prologue-progress .dot{ width:6px; height:6px; border-radius:50%; background:var(--line); transition:.3s; }
.prologue-progress .dot.active{ background:var(--amber); width:20px; border-radius:3px; }
.prologue.hide{ opacity:0; transition:opacity .5s ease; }

/* ============ AUTH ============ */
.auth-wrap{ max-width:380px; margin:14vh auto 0; }
.auth-tabs{ display:flex; gap:8px; margin-bottom:20px; }
.auth-tab{ flex:1; background:var(--panel-2); border:1px solid var(--line); color:var(--ink-dim); padding:10px; border-radius:3px; cursor:pointer; font-family:inherit; font-weight:700; }
.auth-tab.active{ background:var(--amber); color:#1a1305; border-color:var(--amber); }
.auth-field{ margin-bottom:12px; }
.auth-field label{ display:block; font-size:12px; color:var(--ink-dim); margin-bottom:6px; }
.auth-field input{
  width:100%; background:var(--panel-2); border:1px solid var(--line); color:var(--ink); padding:11px 14px;
  border-radius:3px; font-family:inherit; font-size:14px;
}
.auth-field input:focus{ outline:none; border-color:var(--amber-dim); }
.auth-error{ color:var(--danger); font-size:13px; margin-bottom:12px; }
.auth-msg{ color:var(--signal); font-size:13px; margin-bottom:12px; }

/* ============ LIBRARY ============ */
.lib-filters{ display:flex; flex-wrap:wrap; gap:8px; margin-bottom:20px; }
.lib-filter{
  border:1px solid var(--line); background:var(--panel-2); color:var(--ink-dim);
  padding:8px 16px; border-radius:20px; cursor:pointer; font-size:13px; transition:.15s;
  font-family:'Cairo', sans-serif;
}
.lib-filter:hover{ border-color:var(--amber-dim); color:var(--ink); }
.lib-filter.active{ border-color:var(--amber); color:var(--amber); background:#241d0f; }
.lib-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(260px,1fr)); gap:18px; }
.lib-card{ background:var(--panel-2); border:1px solid var(--line); border-radius:6px; overflow:hidden; cursor:pointer; transition:.2s; position:relative; }

.lib-card.coming-soon{ cursor:default; }
.lib-card.coming-soon:hover{ transform:none; border-color:var(--line); }
.lib-card.coming-soon .cover img{ filter:grayscale(75%) brightness(.55); }
.lib-card.coming-soon .body{ opacity:.5; }
.lib-lock-overlay.coming-soon-overlay{ background:rgba(10,12,18,.5); }
.lib-lock-overlay.coming-soon-overlay div{ letter-spacing:.05em; font-family:'JetBrains Mono',monospace; color:var(--ink-dim); }
.lib-card:hover{ border-color:var(--amber-dim); transform:translateY(-3px); }
.lib-preview-btn{
  position:absolute; top:8px; right:8px; z-index:3;
  width:26px; height:26px; border-radius:50%; border:1px solid var(--line);
  background:rgba(18,22,31,.7); color:var(--ink); font-size:13px; cursor:pointer;
  display:flex; align-items:center; justify-content:center; backdrop-filter:blur(3px);
}
.lib-preview-btn:hover{ border-color:var(--amber-dim); color:var(--amber); }
.lib-card .cover{ aspect-ratio:4/5; position:relative; overflow:hidden; }
.lib-card .cover img{ width:100%; height:100%; object-fit:cover; }
.lib-card .cover::after{ content:''; position:absolute; inset:0; background:linear-gradient(180deg, transparent 60%, rgba(24,28,37,.72) 100%); }
.lib-card .body{ padding:14px 16px 16px; }
.lib-card h4{ font-size:16px; margin-bottom:4px; color:var(--ink); }
.lib-card .meta{ font-size:11px; color:var(--ink-dim); font-family:'JetBrains Mono',monospace; }
.lib-location{
  margin-top:6px; color:var(--signal); font-size:10.5px; line-height:1.55;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}
.lib-badge{ position:absolute; top:10px; left:10px; font-size:10px; font-family:'JetBrains Mono',monospace; padding:3px 9px; border-radius:12px; z-index:2; }
.lib-badge.premium{ background:var(--amber); color:#1a1305; }
.lib-badge.adult{ background:var(--danger); color:#fff; }
.lib-badge.discount{ background:var(--danger); color:#fff; top:38px; }
.lib-price{ margin-top:8px; font-size:14px; }
.lib-price .old{ color:var(--ink-dim); text-decoration:line-through; font-size:12px; margin-left:6px; }
.lib-badge.series{ background:var(--signal); color:#04231d; }
.lib-badge.locked{ background:var(--panel); color:var(--ink-dim); border:1px solid var(--line); }
.lib-badge.done{ background:transparent; color:var(--signal); border:1px solid var(--signal-dim); }
.lib-teaser{ margin-top:6px; font-size:12px; line-height:1.6; color:var(--ink-dim); display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.lib-progress-badge{ margin-top:9px; font-size:10.5px; padding:5px 9px; border-radius:4px; display:inline-block; letter-spacing:.02em; }
.lib-progress-badge.inprogress{ background:rgba(224,164,88,.12); color:var(--amber); border:1px solid var(--amber-dim); }
.lib-progress-badge.good{ background:rgba(95,217,192,.12); color:var(--signal); border:1px solid var(--signal-dim); }
.lib-progress-badge.partial{ background:rgba(224,164,88,.12); color:var(--amber); border:1px solid var(--amber-dim); }
.lib-progress-badge.bad{ background:rgba(198,90,78,.12); color:var(--danger); border:1px solid var(--danger-dim); }
.lib-continue-btn, .lib-replay-btn, .lib-restart-btn{ padding:8px 10px; }
.lib-lock-overlay{
  position:absolute; inset:0; z-index:3; background:rgba(10,12,18,.72); display:flex; align-items:center;
  justify-content:center; flex-direction:column; gap:6px; font-size:12px; color:var(--ink-dim); text-align:center; padding:16px;
}
.lib-header{ display:flex; justify-content:space-between; align-items:center; margin-bottom:22px; flex-wrap:wrap; gap:10px; }
.lib-header .user-email{ font-size:12px; color:var(--ink-dim); font-family:'JetBrains Mono',monospace; }

/* ============ LIBRARY BRAND HERO — طرف الخيط ============ */
.lib-hero{
  position:relative; text-align:center; overflow:hidden; margin-bottom:28px;
  padding:46px 20px 34px; border-radius:6px; border:1px solid var(--line);
  background: linear-gradient(160deg, #3a2712 0%, #221708 55%, #120c07 100%);
}
.lib-fingerprint{
  position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
  width:min(60vw,300px); height:min(60vw,300px); opacity:.14; pointer-events:none;
}
.lib-fingerprint path{ fill:none; stroke:#d3ab61; stroke-width:2.2; }
.lib-hero-eyebrow{
  position:relative; z-index:2; font-size:11px; color:#c7bb9c; letter-spacing:.2em; margin-bottom:14px;
}
.lib-hero-title{
  position:relative; z-index:2; font-family:'Rakkas', serif; font-size:clamp(38px,7vw,60px); font-weight:400; color:#ece3cc;
  letter-spacing:-.02em; line-height:1;
  text-shadow: 0 1px 0 #6b5738, 0 2px 0 #574627, 0 3px 6px rgba(0,0,0,.6);
}
.lib-hero-title .accent{ color:#d3ab61; }
.lib-free-start-cta{
  position:relative; z-index:2;
  width:min(100%,320px); margin:22px auto 7px; padding:15px 28px;
  display:flex; align-items:center; justify-content:center; gap:12px;
  border:1px solid #f4c869; border-radius:5px;
  background:linear-gradient(135deg,#f4c869 0%,#e0a458 55%,#bd7f2c 100%);
  color:#1a1305; font-family:'Cairo',sans-serif; font-size:17px; font-weight:900;
  cursor:pointer; box-shadow:0 10px 30px rgba(224,164,88,.3),0 0 0 4px rgba(244,200,105,.07);
  transition:transform .18s ease,filter .18s ease,box-shadow .18s ease;
}
.lib-free-start-cta:hover{
  transform:translateY(-2px); filter:brightness(1.08);
  box-shadow:0 14px 36px rgba(224,164,88,.4),0 0 0 5px rgba(244,200,105,.1);
}
.lib-free-start-cta:focus-visible{ outline:3px solid #fff1c7; outline-offset:4px; }
.lib-free-start-arrow{ font-size:21px; line-height:1; transition:transform .18s ease; }
.lib-free-start-cta:hover .lib-free-start-arrow{ transform:translateY(4px); }
.lib-free-start-note{
  position:relative; z-index:2; color:#d9cfb6; font-size:11.5px; font-weight:600;
}
.lib-hero-thread{ position:relative; z-index:2; width:200px; height:20px; margin:6px auto 14px; display:block; }
.lib-hero-thread path{ fill:none; stroke:#a8382f; stroke-width:3; stroke-linecap:round; filter:drop-shadow(0 0 3px rgba(168,56,47,.4)); }
.lib-hero-sub{ position:relative; z-index:2; font-size:13px; color:#c7bb9c; }

@media (max-width:600px){
  .lib-hero{ padding:38px 16px 30px; }
  .lib-free-start-cta{ width:100%; max-width:300px; padding:14px 20px; font-size:16px; }
}

/* ============================================================
   INVESTIGATION NOTEBOOK — دفتر التحقيق + لوحة تصنيف المشتبهين
   ============================================================ */

.notebook-fab{
  position:fixed; left:20px; bottom:20px; z-index:60;
  width:52px; height:52px; border-radius:50%;
  background:var(--panel); border:1px solid var(--amber-dim);
  color:var(--amber); font-size:22px; cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 4px 18px rgba(0,0,0,.5), var(--gold-glow);
  transition:.15s;
}
.notebook-fab:hover{ border-color:var(--amber); transform:translateY(-2px); }

.notebook-modal{ max-width:560px; max-height:80vh; display:flex; flex-direction:column; }
.notebook-head{ display:flex; align-items:center; justify-content:space-between; margin-bottom:14px; }
.notebook-tabs{ display:flex; gap:6px; margin-bottom:16px; flex-shrink:0; }
.notebook-tab{
  flex:1; background:var(--panel-2); border:1px solid var(--line); color:var(--ink-dim);
  padding:9px; border-radius:3px; cursor:pointer; font-family:inherit; font-size:13px; font-weight:700;
}
.notebook-tab.active{ background:var(--amber); color:#1a1305; border-color:var(--amber); }
.notebook-body{ overflow-y:auto; padding-left:4px; }

.notebook-suspect{
  display:flex; align-items:center; gap:12px; background:var(--panel-2);
  border:1px solid var(--line); border-radius:4px; padding:12px; margin-bottom:10px;
  flex-wrap:wrap;
}
.notebook-suspect.classified-strong{ border-color:var(--danger-dim); }
.notebook-suspect.classified-cleared{ border-color:var(--signal-dim); }
.notebook-suspect-info{ flex:1; min-width:120px; }
.notebook-suspect-info h4{ font-size:14px; margin-bottom:2px; }
.notebook-suspect-info .role{ font-size:11.5px; color:var(--ink-dim); }
.classify-row{ display:flex; gap:6px; flex-wrap:wrap; width:100%; }

.classify-btn{
  flex:1; min-width:80px; background:var(--panel); border:1px solid var(--line); color:var(--ink-dim);
  padding:7px 8px; border-radius:3px; font-family:inherit; font-size:11.5px; cursor:pointer; transition:.15s;
}
.classify-btn:hover{ border-color:var(--amber-dim); color:var(--ink); }
.classify-btn.strong.active{ background:var(--danger-dim); border-color:var(--danger); color:var(--ink); }
.classify-btn.weak.active{ background:#4a3d1f; border-color:var(--amber); color:var(--amber); }
.classify-btn.cleared.active{ background:var(--signal-dim); border-color:var(--signal); color:var(--ink); }

.notebook-ev-row{
  display:flex; align-items:center; gap:10px; background:var(--panel-2); border:1px solid var(--line);
  border-radius:3px; padding:10px 12px; margin-bottom:8px; cursor:pointer; font-size:13.5px; transition:.15s;
}
.notebook-ev-row:hover{ border-color:var(--amber-dim); }
.notebook-ev-row .tag{ font-size:10px; color:var(--signal); font-family:'JetBrains Mono',monospace; letter-spacing:.05em; white-space:nowrap; }
.notebook-ev-row .tag.crit{ color:var(--danger); }

/* Extended evidence: partial/combinable evidence tag + combo toast tone */
.tag.partial{ color:var(--signal); font-size:10px; font-family:'JetBrains Mono',monospace; margin-top:2px; letter-spacing:.03em; }
.toast.combo{ border-color:var(--signal); color:var(--signal); }
.toast.score-up{ border-color:var(--signal); color:var(--signal); }
.toast.score-down{ border-color:var(--danger-dim); color:var(--danger); }

/* Phase 2: manual evidence linking selection state */
.ev-card.link-selected{ border-color:var(--signal); box-shadow:0 0 0 1px var(--signal); }

/* Phase 2: evidence zoom */
.ev-zoom-wrap{ overflow:hidden; border-radius:3px; margin-bottom:14px; background:var(--panel); display:flex; align-items:center; justify-content:center; max-height:420px; }
.ev-zoom-img{ transition:transform .3s ease; cursor:zoom-in; display:block; width:100%; max-height:420px; object-fit:contain; aspect-ratio:auto; }
.ev-zoom-img.zoomed{ transform:scale(2.2); cursor:zoom-out; }

/* Phase 4: interactive timeline puzzle */
.timeline-item{
  display:flex; align-items:center; gap:12px; background:var(--panel-2); border:1px solid var(--line);
  border-radius:4px; padding:12px 14px; margin-bottom:8px;
}
.timeline-pos{ color:var(--amber); font-size:13px; flex-shrink:0; width:20px; text-align:center; }
.timeline-text{ flex:1; font-size:14px; line-height:1.7; }
.timeline-arrows{ display:flex; flex-direction:column; gap:2px; flex-shrink:0; }
.tl-btn{
  background:var(--panel); border:1px solid var(--line); color:var(--ink-dim); width:26px; height:22px;
  border-radius:2px; cursor:pointer; font-size:11px; line-height:1;
}
.tl-btn:hover:not(:disabled){ border-color:var(--amber-dim); color:var(--ink); }
.tl-btn:disabled{ opacity:.3; cursor:not-allowed; }

/* === الألغاز الجديدة: مختبر/جدول حجج/تدقيق/كشف كذب/مخطط/شهادات/خط يد === */
.seq-row{ display:flex; flex-wrap:wrap; gap:6px; }
.seq-chip{
  display:inline-flex; align-items:center; justify-content:center;
  min-width:28px; height:28px; padding:0 6px;
  border:1px solid var(--line); border-radius:3px;
  background:var(--panel-2); color:var(--ink); font-size:13px; font-weight:700;
}

.alibi-grid{ width:100%; border-collapse:collapse; font-size:13px; }
.alibi-grid th, .alibi-grid td{ border:1px solid var(--line); padding:8px 10px; text-align:center; white-space:nowrap; }
.alibi-grid th{ color:var(--ink-dim); font-weight:700; }
.alibi-grid td.alibi-name{ text-align:right; font-weight:700; white-space:nowrap; background:var(--panel-2); }
.alibi-grid td[data-alibi-suspect]{ cursor:pointer; transition:.15s; }
.alibi-grid td[data-alibi-suspect]:hover{ background:var(--panel-2); color:var(--amber); }

.poly-bar{ height:8px; border-radius:4px; background:var(--panel-2); overflow:hidden; }
.poly-fill{ height:100%; border-radius:4px; transition:width .4s; }

/* Prologue mute/unmute button */
.prologue-sfx-btn{
  position:absolute; top:18px; left:18px; z-index:5;
  background:rgba(18,22,31,.65); border:1px solid var(--line); color:var(--ink);
  width:38px; height:38px; border-radius:50%; font-size:16px; cursor:pointer;
  display:flex; align-items:center; justify-content:center; backdrop-filter:blur(4px);
}
.prologue-sfx-btn:hover{ border-color:var(--amber-dim); }

.prologue-skip-btn{
  position:absolute; top:18px; left:50%; transform:translateX(-50%); z-index:5;
  background:rgba(18,22,31,.72); border:1px solid var(--signal-dim); color:var(--signal);
  padding:8px 14px; border-radius:20px; font-size:12px; cursor:pointer;
  backdrop-filter:blur(4px); transition:border-color .15s, color .15s, background .15s;
}
.prologue-skip-btn:hover{ border-color:var(--signal); color:var(--ink); background:rgba(18,22,31,.9); }

/* Back-to-archive button — shown on splash + prologue intro screens */
.prologue-back-btn{
  position:absolute; top:18px; right:18px; z-index:5;
  background:rgba(18,22,31,.65); border:1px solid var(--line); color:var(--ink-dim);
  padding:8px 14px; border-radius:20px; font-size:12px; cursor:pointer;
  backdrop-filter:blur(4px); transition:border-color .15s, color .15s;
}
.prologue-back-btn:hover{ border-color:var(--amber-dim); color:var(--ink); }
#splash .prologue-back-btn{ top:18px; right:18px; }

/* Settings modal */
.settings-row{
  display:flex; align-items:center; justify-content:space-between;
  padding:12px 0; border-bottom:1px solid var(--line); gap:12px;
}
.settings-row:first-of-type{ padding-top:0; }
.font-size-btn.active{ background:var(--amber); color:#1a1305; border-color:var(--amber); }

/* Font size preference — applied to #app as a whole via zoom */
#app.text-small{ zoom:0.9; }
#app.text-large{ zoom:1.15; }

/* ============================================================
   MOBILE — تحسينات خاصة بالشاشات الضيقة (موبايل)
   ============================================================ */
@media (max-width: 560px){
  #app{ padding:18px 14px 90px; }

  .masthead{ gap:10px; padding-bottom:14px; margin-bottom:16px; }
  .masthead h1{ font-size:clamp(22px,7vw,30px); }

  .stat-line{ flex-wrap:wrap; gap:6px 10px; width:100%; }
  .stat-line .btn.ghost{ flex:1 1 auto; min-height:40px; padding:9px 10px; font-size:12.5px; text-align:center; }

  .tabs{ gap:5px; margin-bottom:18px; }
  .tab{ padding:9px 13px; font-size:12.5px; flex:1 1 auto; text-align:center; }

  .ev-grid, .sus-grid{ grid-template-columns:1fr; }

  .modal{ padding:18px; max-width:94vw; max-height:88vh; overflow-y:auto; }
  .prologue-skip-btn{ top:66px; }
  .notebook-modal{ max-width:94vw; }

  .q-btn{ padding:13px 14px; font-size:14px; min-height:44px; }

  .classify-row{ flex-direction:column; }
  .classify-btn{ min-height:40px; font-size:13px; }

  .timeline-item{ padding:10px 12px; gap:8px; }
  .timeline-text{ font-size:13px; }
  .tl-btn{ width:36px; height:36px; font-size:14px; }

  .notebook-fab{ width:48px; height:48px; font-size:20px; left:14px; bottom:14px; }

  /* المكتبة/الأرشيف على الموبايل: عمودين بدل عمود واحد ياخد الشاشة لوحده */
  .lib-grid{ grid-template-columns:1fr 1fr; gap:10px; }
  .lib-card .body{ padding:9px 10px 11px; }
  .lib-card h4{ font-size:13px; line-height:1.35; margin-bottom:3px; }
  .lib-card .meta{ font-size:9.5px; }
  .lib-location{ font-size:9.5px; margin-top:4px; -webkit-line-clamp:2; }
  .lib-teaser{ font-size:10.5px; line-height:1.5; margin-top:4px; -webkit-line-clamp:2; }
  .lib-progress-badge{ font-size:9px; padding:4px 7px; margin-top:6px; }
  .lib-price{ font-size:12px; margin-top:5px; }
  .lib-continue-btn, .lib-replay-btn, .lib-restart-btn{ padding:7px 6px; font-size:10.5px !important; margin-top:5px !important; }
  .lib-badge{ font-size:8.5px; padding:2px 7px; top:6px; left:6px; }
  .lib-badge.discount{ top:26px; }
  .lib-preview-btn{ width:22px; height:22px; font-size:11px; top:6px; right:6px; }
  .lib-hero-title{ font-size:clamp(30px,11vw,44px); }
  .lib-hero-sub{ font-size:12px; }
  .lib-filters{ gap:6px; }
  .lib-filter{ font-size:11.5px; padding:6px 12px; }


  .settings-row{ flex-direction:column; align-items:flex-start; gap:10px; }
  .settings-row > div{ width:100%; }
  .font-size-btn{ min-height:40px; }

  .toast-wrap{ left:4vw; right:4vw; width:92vw; transform:none; }
  .toast{ white-space:normal; width:100%; box-sizing:border-box; text-align:center; }
}


/* ============================================================
   تحسين ظهور القضايا البريميوم — إضافة لـ style.css
   ألصق الكود ده في آخر ملف style.css بتاعك (بعد كل حاجة موجودة)
   ============================================================ */

:root{
  /* لون ذهبي مميز للبريميوم، مختلف عن --amber العادي المستخدم
     في باقي عناصر الواجهة، عشان يبان فرق واضح للعين */
  --premium-gold: #f4c869;
  --premium-gold-deep: #b8860b;
  --premium-glow: 0 0 0 1px rgba(244,200,105,.35), 0 0 28px rgba(244,200,105,.22);
}

/* ============ الكارت البريميوم — بورد وglow حوالين الكارت كله ============ */
.lib-card.premium{
  border: 1px solid rgba(244,200,105,.4);
  box-shadow: var(--premium-glow);
  background: linear-gradient(160deg, #2a2415 0%, var(--panel-2) 45%);
}
.lib-card.premium:hover{
  border-color: var(--premium-gold);
  box-shadow: 0 0 0 1px rgba(244,200,105,.55), 0 0 36px rgba(244,200,105,.32);
  transform: translateY(-4px);
}

/* إطار ذهبي رفيع بيلف حوالين صورة الغلاف بس للبريميوم */
.lib-card.premium .cover{
  box-shadow: inset 0 0 0 1px rgba(244,200,105,.25);
}

/* لمعة خفيفة بتعدي على الكارت — تلفت النظر من غير ما تبقى مزعجة */
.lib-card.premium::before{
  content:'';
  position:absolute; inset:0; z-index:1; pointer-events:none;
  background: linear-gradient(120deg, transparent 30%, rgba(244,200,105,.16) 50%, transparent 70%);
  background-size: 250% 250%;
  background-position: 200% 0;
  opacity: 0;
}
@media (prefers-reduced-motion: no-preference){
  .lib-card.premium::before{
    animation: premiumShimmer 5s ease-in-out infinite;
  }
  @keyframes premiumShimmer{
    0%   { background-position: 200% 0; opacity: 0; }
    45%  { opacity: .8; }
    60%  { background-position: -50% 0; opacity: 0; }
    100% { background-position: -50% 0; opacity: 0; }
  }
}

/* ============ شارة PREMIUM — شكل "ريبون" بدل البيل العادي ============ */
.lib-badge.premium{
  background: linear-gradient(135deg, var(--premium-gold) 0%, var(--premium-gold-deep) 100%);
  color: #241a02;
  font-weight: 800;
  letter-spacing: .04em;
  box-shadow: 0 2px 10px rgba(184,134,11,.45);
  display: flex; align-items: center; gap: 4px;
}
.lib-badge.premium::before{
  content: '◆';
  font-size: 8px;
}

/* ============ السعر — أوضح وأبرز للقضايا البريميوم ============ */
.lib-card.premium .lib-price{
  font-family:'JetBrains Mono', monospace;
  font-size: 17px;
  font-weight: 800;
  background: linear-gradient(135deg, var(--premium-gold) 0%, #e8b84a 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.lib-card.premium .lib-price .old{
  -webkit-text-fill-color: var(--ink-dim);
  color: var(--ink-dim);
}

/* ============ overlay القفل — لمسة ذهبية للقضايا البريميوم المقفولة ============ */
.lib-card.premium .lib-lock-overlay{
  background: linear-gradient(180deg, rgba(10,12,18,.55) 0%, rgba(24,18,4,.82) 100%);
}
.lib-card.premium .lib-lock-overlay div span.mono{
  color: var(--premium-gold) !important;
}

/* ============================================================
   تعديل 3 من 3 — إضافة لـ style.css
   ألصق الكود ده في آخر ملف style.css (تحت تحسينات البريميوم
   لو ضفتها قبل كده)
   ============================================================ */

/* ============ شريط البحث والترتيب ============ */
.lib-toolbar{
  display:flex; gap:10px; margin-bottom:14px; flex-wrap:wrap;
}
#cases-list-start{ scroll-margin-top:70px; }
.lib-search-wrap{
  position:relative; flex:1; min-width:200px;
}
.lib-search-icon{
  position:absolute; top:50%; right:14px; transform:translateY(-50%);
  color:var(--ink-dim); font-size:15px; pointer-events:none;
}
.lib-search-input{
  width:100%; background:var(--panel-2); border:1px solid var(--line);
  color:var(--ink); border-radius:20px; padding:10px 40px 10px 16px;
  font-family:'Cairo', sans-serif; font-size:14px; transition:.15s;
}
.lib-search-input::placeholder{ color:var(--ink-dim); }
.lib-search-input:focus{
  outline:none; border-color:var(--amber-dim); background:var(--panel);
}
.lib-sort-select{
  background:var(--panel-2); border:1px solid var(--line); color:var(--ink);
  border-radius:20px; padding:10px 16px; font-size:13px; cursor:pointer;
  min-width:130px;
}
.lib-sort-select:focus{ outline:none; border-color:var(--amber-dim); }

/* ============ الفلاتر — قابلة للتمرير أفقي لو عددها كبير ============ */
.lib-filters-scroll{
  overflow-x:auto; margin-bottom:20px;
  scrollbar-width:thin; scrollbar-color:var(--amber-dim) transparent;
  -webkit-overflow-scrolling:touch;
}
.lib-filters-scroll .lib-filters{
  display:flex; flex-wrap:nowrap; gap:8px; margin-bottom:0; width:max-content;
}
.lib-filters-scroll::-webkit-scrollbar{ height:4px; }
.lib-filters-scroll::-webkit-scrollbar-thumb{ background:var(--amber-dim); border-radius:2px; }

/* ============ عداد النتائج ============ */
.lib-results-count{
  font-size:12px; color:var(--ink-dim); margin-bottom:14px;
}

/* ============ زرار تحميل المزيد ============ */
#lib-load-more{
  padding:12px 28px; font-size:13px;
}

@media (max-width:520px){
  .lib-toolbar{ flex-direction:column; }
  .lib-sort-select{ width:100%; }
}

/* ============ تقييم القضية (شاشة النهاية) ============ */
.review-box{
  margin-top:18px; background:var(--panel-2); border:1px solid var(--line);
  border-radius:6px; padding:16px 18px;
}
.star-rating{ display:flex; gap:6px; direction:ltr; }
.star-btn{
  background:none; border:none; font-size:26px; line-height:1; cursor:pointer;
  color:var(--ink-dim); padding:2px; transition:.15s;
}
.star-btn.active, .star-btn:hover{ color:var(--amber); }
.review-comment{
  width:100%; margin-top:12px; padding:10px 12px; background:var(--panel);
  border:1px solid var(--line); border-radius:6px; color:var(--ink);
  font-family:inherit; font-size:13px; resize:vertical;
}
.review-stars-display{ font-size:20px; color:var(--amber); letter-spacing:2px; }

/* ============ جاهز لقضية تانية؟ (شاشة النهاية) ============ */
.ending-recs-section{ margin-top:22px; }
.ending-recs{ display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.ending-rec-card{ cursor:pointer; }
.ending-rec-card .cover{ aspect-ratio:16/10; }
@media (max-width:480px){
  .ending-recs{ grid-template-columns:1fr; }
}

/* ============================================================
   PREMIUM SPOTLIGHT — "ملفات مقيدة الوصول"
   شريط قصص مصورة أفقي فوق المكتبة مباشرة، بيعرض القضايا البريميوم
   كملفات مختومة بشمع أحمر (زي أرشيف سري) بدل بادچ دهب عادي —
   هوية بصرية مختلفة عن كروت الشبكة العادية، مبنية على نفس عالم
   "الأرشيف/البصمة/الخيط الأحمر" اللي أصلاً في الهيرو.
   ============================================================ */
.premium-spotlight{
  position:relative; margin-bottom:26px; padding:22px 0 26px;
  border-radius:6px; overflow:hidden;
  background: linear-gradient(160deg, #241d10 0%, #15100a 60%, #0d0a06 100%);
  border:1px solid rgba(244,200,105,.18);
}
.premium-spotlight::before{
  /* نسيج خشبي/درج خفيف في الخلفية عشان يحس إنه "درج ملفات" مش مجرد كارت */
  content:''; position:absolute; inset:0; pointer-events:none; opacity:.5;
  background-image: repeating-linear-gradient(90deg, rgba(0,0,0,.18) 0px, transparent 1px, transparent 34px, rgba(0,0,0,.18) 35px);
}
.premium-spotlight-head{
  position:relative; z-index:1; padding:0 22px; margin-bottom:16px;
  display:flex; align-items:baseline; justify-content:space-between; gap:12px; flex-wrap:wrap;
}
.premium-spotlight-eyebrow{
  font-size:10.5px; letter-spacing:.16em; color:var(--premium-gold);
  display:flex; align-items:center; gap:8px;
}
.premium-spotlight-eyebrow::before{
  content:''; width:16px; height:1px; background:var(--premium-gold-deep); display:inline-block;
}
.premium-spotlight-title{
  font-family:'Rakkas', serif; font-size:clamp(19px,2.6vw,25px); font-weight:400;
  color:var(--ink); margin-top:4px;
}
.premium-spotlight-title .accent{ color:var(--premium-gold); }
.premium-spotlight-count{ font-size:11px; color:var(--ink-dim); font-family:'JetBrains Mono',monospace; align-self:flex-end; }

.dossier-track{
  position:relative; z-index:1; display:flex; gap:16px; overflow-x:auto;
  padding:6px 22px 10px; scroll-snap-type:x proximity;
}
.dossier-track::-webkit-scrollbar{ height:5px; }
.dossier-track::-webkit-scrollbar-thumb{ background:rgba(244,200,105,.3); border-radius:3px; }

.dossier-card{
  flex:0 0 auto; width:168px; scroll-snap-align:start; cursor:pointer;
  background:linear-gradient(165deg, #3a2f1a 0%, #241d10 100%);
  border:1px solid rgba(244,200,105,.22); border-radius:4px 4px 3px 3px;
  padding:9px 9px 12px; position:relative;
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
  transform: rotate(var(--tilt, -1.2deg));
}
.dossier-track .dossier-card:nth-child(3n){ --tilt: 1.3deg; }
.dossier-track .dossier-card:nth-child(3n+1){ --tilt: -1.6deg; }
.dossier-track .dossier-card:nth-child(3n+2){ --tilt: .8deg; }
.dossier-card:hover{
  transform: rotate(0deg) translateY(-5px);
  border-color:var(--premium-gold);
  box-shadow: 0 10px 24px rgba(0,0,0,.4), 0 0 0 1px rgba(244,200,105,.35);
  z-index:2;
}
.dossier-cover{ aspect-ratio:3/4; border-radius:2px; overflow:hidden; position:relative; background:#000; }
.dossier-cover img{ width:100%; height:100%; object-fit:cover; filter:saturate(.85) contrast(1.05); }
.dossier-cover::after{ content:''; position:absolute; inset:0; background:linear-gradient(180deg, transparent 55%, rgba(13,10,6,.85) 100%); }

/* الختم الشمعي — العنصر المميز الوحيد في القسم ده */
.wax-seal{
  position:absolute; top:-10px; right:-8px; z-index:3;
  width:40px; height:40px; border-radius:50%;
  background: radial-gradient(circle at 32% 28%, #d9695a 0%, var(--danger) 45%, #8f3b30 100%);
  box-shadow: 0 3px 6px rgba(0,0,0,.5), inset 0 1px 2px rgba(255,255,255,.25);
  display:flex; align-items:center; justify-content:center;
  transform: rotate(-9deg);
  border:1px solid rgba(0,0,0,.25);
}

.dossier-title{ font-size:12.5px; color:var(--ink); margin-top:9px; line-height:1.35; min-height:32px; }
.dossier-meta{ font-size:9.5px; color:var(--ink-dim); font-family:'JetBrains Mono',monospace; margin-top:4px; }
.dossier-price{
  margin-top:7px; font-size:13px; font-weight:800; font-family:'JetBrains Mono',monospace;
  color:var(--premium-gold);
}

@media (max-width:520px){
  .dossier-card{ width:138px; }
}

/* ============ شريط "شوف كل الباقات" — ثابت تحت شريط الملفات، جوه نفس البانر ============ */
.bundle-strip{
  position:relative; z-index:1; margin:2px 22px 0; padding:13px 16px;
  border-radius:5px; border:1px dashed rgba(244,200,105,.4);
  background:linear-gradient(90deg, #241d10 0%, #1a1610 100%);
  display:flex; align-items:center; gap:12px; cursor:pointer;
  transition:.2s;
}
.bundle-strip:hover{
  border-color:var(--premium-gold); background:linear-gradient(90deg, #2c2412 0%, #1e1912 100%);
}
.bundle-strip-icon{ flex:0 0 auto; display:flex; }
.bundle-strip-text{ flex:1 1 auto; }
.bundle-strip-title{ font-size:13.5px; font-weight:800; color:var(--premium-gold); }
.bundle-strip-sub{ font-size:11px; color:var(--ink-dim); margin-top:2px; font-family:'JetBrains Mono',monospace; }
.bundle-strip-arrow{ flex:0 0 auto; color:var(--premium-gold); font-size:16px; }

@media (max-width:520px){
  .bundle-strip{ margin:2px 14px 0; }
}

/* ============================================================
   بانر تشويقي للقضايا الجديدة "قريبًا" — أول شاشة المكتبة
   ============================================================ */
.new-cases-teaser{
  margin:18px 0 24px;
  padding:14px 0 4px;
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
}
.new-cases-teaser-head{
  display:flex; align-items:center; gap:10px; margin-bottom:12px;
}
.new-cases-teaser-eyebrow{
  font-size:11px; font-weight:700; color:var(--amber); background:rgba(224,164,88,.14);
  border:1px solid var(--amber-dim); border-radius:20px; padding:2px 10px; white-space:nowrap;
}
.new-cases-teaser-head h3{
  font-size:15px; color:var(--ink); margin:0; font-weight:700;
}
.new-cases-teaser-scroll{
  display:flex; flex-wrap:nowrap; gap:12px; overflow-x:auto; width:100%;
  scrollbar-width:thin; scrollbar-color:var(--amber-dim) transparent;
  -webkit-overflow-scrolling:touch; padding-bottom:6px;
}
.new-cases-teaser-scroll::-webkit-scrollbar{ height:4px; }
.new-cases-teaser-scroll::-webkit-scrollbar-thumb{ background:var(--amber-dim); border-radius:2px; }

.teaser-mini-card{
  flex:0 0 auto; width:132px; cursor:pointer;
  transition:transform .15s ease;
}
.teaser-mini-card:active{ transform:scale(.96); }
.teaser-mini-cover{
  position:relative; width:132px; height:88px; border-radius:10px; overflow:hidden;
  border:1px solid var(--line); background:var(--panel);
}
.teaser-mini-cover img{ width:100%; height:100%; object-fit:cover; opacity:.75; }
.teaser-mini-badge{
  position:absolute; bottom:4px; left:4px; right:4px;
  font-size:10px; font-weight:700; color:var(--amber);
  background:rgba(10,12,18,.82); border:1px solid var(--amber-dim);
  border-radius:6px; padding:2px 6px; text-align:center;
}
.teaser-mini-title{
  font-size:12px; font-weight:700; color:var(--ink); margin-top:6px;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.teaser-mini-meta{
  font-size:10px; color:var(--ink-dim); margin-top:2px;
}

/* ============================================================
   بانر "قضايا جديدة" — نسخة مميزة (أخضر) عن بانر "قريبًا" (كهرماني)
   ============================================================ */
.new-release-banner{
  border-top-color: rgba(88,199,120,.35);
  border-bottom-color: rgba(88,199,120,.35);
}
.new-release-eyebrow{
  color:#58c778; background:rgba(88,199,120,.14); border-color:rgba(88,199,120,.4);
}
.new-release-badge{
  color:#58c778; border-color:rgba(88,199,120,.5);
}
.new-release-card{ cursor:pointer; }
.new-release-card .teaser-mini-cover img{ opacity:1; }

/* ============================================================
   علامة تحميل بديلة لأي غلاف قضية لسه مش موجود (بدل الصورة المكسورة)
   ============================================================ */
.teaser-mini-cover.cover-pending,
.lib-card .cover.cover-pending{
  display:flex; align-items:center; justify-content:center;
  background:linear-gradient(135deg, var(--panel) 0%, rgba(224,164,88,.08) 100%);
}
.teaser-mini-cover.cover-pending::before,
.lib-card .cover.cover-pending::before{
  content:'⏳';
  font-size:28px;
  opacity:.5;
  animation:coverPendingPulse 1.6s ease-in-out infinite;
}
@keyframes coverPendingPulse{
  0%,100%{ opacity:.35; transform:scale(1); }
  50%{ opacity:.65; transform:scale(1.08); }
}