:root{
  --bg:#07101b; --bg2:#0a1626; --panel:#0e1b2e; --panel2:#132640;
  --line:rgba(130,170,230,.15); --line2:rgba(130,170,230,.28);
  --text:#e8eef7; --mut:#8fa3bf; --dim:#5f748f;
  --accent:#f2cc4b; --accent2:#d4a02e; --gold:#f2cc4b;
  --ok:#38c98a; --warn:#f0b24a; --bad:#ef5b6b;
  --r:14px; --shadow:0 18px 50px rgba(0,0,0,.45);
  --font:'IBM Plex Sans Arabic',system-ui,-apple-system,'Segoe UI',Tahoma,sans-serif;
  --mono:'JetBrains Mono',ui-monospace,Menlo,Consolas,monospace;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  font-family:var(--font); color:var(--text); background:var(--bg); line-height:1.7; font-size:15px;
  background-image:
    radial-gradient(1000px 520px at 85% -8%, rgba(242,204,75,.14), transparent 60%),
    radial-gradient(800px 480px at 5% 10%, rgba(212,169,74,.06), transparent 60%);
  background-attachment:fixed; min-height:100vh;
}
[hidden]{display:none!important}
a{color:var(--accent);text-decoration:none}
code{font-family:var(--mono);background:rgba(255,255,255,.06);padding:2px 7px;border-radius:6px;font-size:.9em}
.mono{font-family:var(--mono)}
button{font-family:inherit}

/* ---------- عناصر عامة ---------- */
.spin{display:inline-block;width:28px;height:28px;border:3px solid var(--line2);border-top-color:var(--accent);border-radius:50%;animation:sp .8s linear infinite}
@keyframes sp{to{transform:rotate(360deg)}}
.boot{position:fixed;inset:0;display:grid;place-items:center;background:var(--bg);z-index:90}
.loading{display:grid;place-items:center;padding:60px 0}
.center-screen{min-height:100vh;display:grid;place-items:center;padding:24px}
.eyebrow{font-family:var(--mono);font-size:12px;letter-spacing:.22em;color:var(--accent);margin-bottom:14px;direction:ltr;text-align:right}
.card{background:linear-gradient(180deg,var(--panel),var(--bg2));border:1px solid var(--line);border-radius:var(--r);padding:28px;box-shadow:var(--shadow)}
.card.narrow{max-width:460px;width:100%}
.card.center{text-align:center}
.card h2{margin-bottom:10px}
.card p{color:var(--mut);margin-bottom:18px}
.seal{width:42px;height:42px;flex:none}
.seal.big{width:84px;height:84px;margin-bottom:14px}

.brand{display:flex;align-items:center;gap:12px}
.brand b{display:block;font-size:13px;letter-spacing:.08em;font-family:var(--mono);direction:ltr;text-align:right}
.brand span{display:block;font-size:12px;color:var(--mut)}

/* ---------- الأزرار ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:10px 20px;border-radius:10px;border:1px solid var(--line2);background:var(--panel2);color:var(--text);font-weight:600;font-size:14px;cursor:pointer;transition:.18s}
.btn:hover{border-color:var(--accent);transform:translateY(-1px)}
.btn:disabled{opacity:.5;cursor:not-allowed;transform:none}
.btn.primary{background:linear-gradient(135deg,var(--accent),var(--accent2));border-color:transparent;color:#1b1503;box-shadow:0 8px 24px rgba(242,204,75,.35)}
.btn.ghost{background:transparent}
.btn.danger{background:rgba(239,91,107,.12);border-color:rgba(239,91,107,.45);color:#ff9aa5}
.btn.ok{background:rgba(56,201,138,.12);border-color:rgba(56,201,138,.45);color:#7ee6b8}
.btn.sm{padding:6px 13px;font-size:13px;border-radius:8px}
.btn.block{width:100%}
.icon-btn{background:none;border:0;color:var(--mut);font-size:22px;cursor:pointer;line-height:1;padding:4px 8px;border-radius:8px}
.icon-btn:hover{color:var(--text);background:rgba(255,255,255,.06)}

/* ---------- النماذج ---------- */
.form{display:grid;gap:14px}
.field{display:grid;gap:6px}
.field label,.field>label{font-size:13px;color:var(--mut);font-weight:500}
.field label i{color:var(--bad);font-style:normal}
.field small,.note{color:var(--dim);font-size:12px}
input,select,textarea{
  width:100%;background:rgba(5,12,22,.7);border:1px solid var(--line2);color:var(--text);
  padding:11px 14px;border-radius:10px;font:inherit;font-size:14px;outline:none;transition:.15s}
input:focus,select:focus,textarea:focus{border-color:var(--accent);box-shadow:0 0 0 3px rgba(242,204,75,.18)}
textarea{resize:vertical;min-height:90px}
select option{background:#0e1b2e}
input[type=checkbox]{width:18px;height:18px;accent-color:var(--accent);padding:0}
label.check{display:flex;align-items:center;gap:10px;cursor:pointer;color:var(--text);font-size:14px}
.form-err{background:rgba(239,91,107,.12);border:1px solid rgba(239,91,107,.4);color:#ffb3bb;padding:10px 14px;border-radius:10px;font-size:13px}
.form-actions{display:flex;gap:10px;margin-top:6px}
.field.half{display:inline-grid}

/* ---------- صفحة الدخول ---------- */
.topnav{display:flex;align-items:center;justify-content:space-between;padding:16px clamp(18px,5vw,64px);border-bottom:1px solid var(--line);backdrop-filter:blur(10px);position:sticky;top:0;z-index:20;background:rgba(7,16,27,.75)}
.hero{display:grid;grid-template-columns:1.15fr .85fr;gap:clamp(24px,5vw,70px);align-items:center;padding:clamp(36px,7vw,90px) clamp(18px,5vw,64px);max-width:1280px;margin:auto}
.hero h1{font-size:clamp(34px,5.4vw,60px);line-height:1.2;font-weight:700;letter-spacing:-.01em;margin-bottom:20px}
.hero h1 em{font-style:normal;background:linear-gradient(120deg,#f5dc82,var(--accent) 45%,var(--gold));-webkit-background-clip:text;background-clip:text;color:transparent}
.lead{color:var(--mut);font-size:17px;max-width:620px;margin-bottom:28px}
.chips{display:flex;flex-wrap:wrap;gap:12px}
.chips div{border:1px solid var(--line);background:rgba(14,27,46,.6);border-radius:12px;padding:10px 16px}
.chips b{display:block;font-family:var(--mono);font-size:12px;letter-spacing:.08em;color:var(--accent);direction:ltr;text-align:right}
.chips span{font-size:13px;color:var(--mut)}

.auth-card{background:linear-gradient(180deg,var(--panel),var(--bg2));border:1px solid var(--line2);border-radius:18px;padding:26px;box-shadow:var(--shadow)}
.tabs{display:grid;grid-template-columns:1fr 1fr;gap:6px;background:rgba(5,12,22,.6);padding:5px;border-radius:12px;margin-bottom:20px}
.tab{background:none;border:0;color:var(--mut);padding:10px;border-radius:9px;cursor:pointer;font-weight:600;font-size:14px}
.tab.active{background:var(--panel2);color:var(--text);box-shadow:inset 0 0 0 1px var(--line2)}

.section{max-width:1280px;margin:auto;padding:30px clamp(18px,5vw,64px) 70px}
.section h2{font-size:clamp(26px,3.4vw,38px);margin-bottom:8px}
.sub{color:var(--mut);margin-bottom:30px}
.grid.six{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.stage{position:relative;background:linear-gradient(180deg,var(--panel),var(--bg2));border:1px solid var(--line);border-radius:var(--r);padding:24px;transition:.2s;overflow:hidden}
.stage:hover{border-color:var(--line2);transform:translateY(-3px)}
.stage i{position:absolute;left:18px;top:12px;font:600 34px var(--mono);color:rgba(242,204,75,.16);font-style:normal}
.stage h3{margin-bottom:8px;font-size:18px}
.stage p{color:var(--mut);font-size:14px}
.foot{display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;border-top:1px solid var(--line);padding:24px clamp(18px,5vw,64px);color:var(--dim)}

/* ---------- التطبيق ---------- */
.app{display:grid;grid-template-columns:260px 1fr;min-height:100vh}
.side{background:rgba(8,18,31,.92);border-left:1px solid var(--line);padding:20px 14px;display:flex;flex-direction:column;gap:18px;position:sticky;top:0;height:100vh;overflow:auto}
#nav{display:grid;gap:4px;flex:1;align-content:start}
#nav a{display:flex;align-items:center;gap:12px;padding:11px 14px;border-radius:10px;color:var(--mut);font-weight:500;transition:.15s}
#nav a svg{width:19px;height:19px;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;flex:none}
#nav a:hover{background:rgba(255,255,255,.05);color:var(--text)}
#nav a.active{background:linear-gradient(90deg,rgba(242,204,75,.2),rgba(242,204,75,.05));color:#fff;box-shadow:inset -3px 0 0 var(--accent)}
.nav-sep{font-family:var(--mono);font-size:11px;letter-spacing:.2em;color:var(--dim);padding:14px 14px 4px;direction:ltr;text-align:right}
.side-foot{display:grid;gap:8px;border-top:1px solid var(--line);padding-top:14px}
.me{font-size:13px;padding:2px 6px 8px}
.me b{display:block;font-size:14px}
.me span{color:var(--mut);font-size:12px}
.main{min-width:0}
.appbar{display:flex;align-items:center;gap:12px;padding:14px clamp(16px,3vw,36px);border-bottom:1px solid var(--line);background:rgba(7,16,27,.7);backdrop-filter:blur(8px);position:sticky;top:0;z-index:15}
.appbar .menu{display:none}
.clock{margin-right:auto;color:var(--dim);font-size:12px;direction:ltr}
#crumb{font-weight:600}
.view{padding:clamp(16px,3vw,36px);max-width:1280px}
.scrim{display:none}

.page-head{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-bottom:22px}
.page-head h1{font-size:clamp(24px,3vw,32px);line-height:1.3}
.page-head p{color:var(--mut);margin-top:2px}
.page-actions{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.toolbar{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:16px;align-items:center}
.toolbar input[type=search],.toolbar input[type=text]{max-width:340px}

.panel{background:linear-gradient(180deg,var(--panel),var(--bg2));border:1px solid var(--line);border-radius:var(--r);padding:20px;margin-bottom:18px}
.panel h3{margin-bottom:12px;font-size:17px}
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:14px;margin-bottom:22px}
.stat{background:linear-gradient(180deg,var(--panel),var(--bg2));border:1px solid var(--line);border-radius:var(--r);padding:18px}
.stat small{color:var(--mut);display:block;font-size:13px}
.stat b{font-size:30px;font-family:var(--mono);display:block;margin-top:4px}
.stat.warn b{color:var(--warn)} .stat.bad b{color:var(--bad)} .stat.ok b{color:var(--ok)}

.table-wrap{overflow-x:auto;border:1px solid var(--line);border-radius:var(--r);background:rgba(10,22,38,.6)}
table{width:100%;border-collapse:collapse;font-size:14px}
th{background:rgba(255,255,255,.04);color:var(--mut);font-weight:600;text-align:right;padding:12px 14px;white-space:nowrap;font-size:13px}
td{padding:12px 14px;border-top:1px solid var(--line);vertical-align:top}
tbody tr:hover{background:rgba(242,204,75,.05)}
.row-actions{display:flex;gap:6px;flex-wrap:wrap}
.row-actions.center{justify-content:center}
.empty{text-align:center;color:var(--dim);padding:44px 10px;border:1px dashed var(--line2);border-radius:var(--r)}

.badge{display:inline-block;padding:2px 10px;border-radius:999px;font-size:12px;font-weight:600;border:1px solid var(--line2);color:var(--mut);white-space:nowrap}
.badge.ok{color:#7ee6b8;border-color:rgba(56,201,138,.45);background:rgba(56,201,138,.1)}
.badge.warn{color:#ffd48a;border-color:rgba(240,178,74,.45);background:rgba(240,178,74,.1)}
.badge.bad{color:#ff9aa5;border-color:rgba(239,91,107,.45);background:rgba(239,91,107,.1)}
.badge.blue{color:#f5dc82;border-color:rgba(242,204,75,.45);background:rgba(242,204,75,.1)}
.pos{color:var(--ok);font-family:var(--mono);font-weight:600} .neg{color:var(--bad);font-family:var(--mono);font-weight:600}

.ann{border:1px solid var(--line);border-radius:var(--r);padding:20px;margin-bottom:14px;background:linear-gradient(180deg,var(--panel),var(--bg2))}
.ann.pinned{border-color:rgba(212,169,74,.5);box-shadow:inset 3px 0 0 var(--gold)}
.ann h3{font-size:19px;margin-bottom:4px}
.ann .meta{color:var(--dim);font-size:12.5px;margin-bottom:12px}
.ann .body{color:#cdd8e8;white-space:normal;word-break:break-word}
.ann .row-actions{margin-top:14px}

.citizen{display:grid;grid-template-columns:150px 1fr;gap:22px}
.citizen .photo{width:150px;height:180px;border-radius:12px;border:1px solid var(--line2);background:rgba(5,12,22,.7);object-fit:cover;display:grid;place-items:center;color:var(--dim);font-size:13px;text-align:center}
.kv{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:10px 24px}
.kv div small{display:block;color:var(--dim);font-size:12px}
.kv div span{font-weight:500}
.wanted-banner{background:rgba(239,91,107,.14);border:1px solid rgba(239,91,107,.5);color:#ffb3bb;padding:10px 16px;border-radius:12px;margin-bottom:16px;font-weight:600}

.subtabs{display:flex;gap:6px;margin-bottom:18px;border-bottom:1px solid var(--line);flex-wrap:wrap}
.subtabs button{background:none;border:0;color:var(--mut);padding:10px 18px;cursor:pointer;font-weight:600;border-bottom:2px solid transparent;margin-bottom:-1px}
.subtabs button.active{color:#fff;border-bottom-color:var(--accent)}

.perm-grid{width:100%;font-size:13.5px}
.perm-grid th,.perm-grid td{text-align:center;padding:8px}
.perm-grid th:first-child,.perm-grid td:first-child{text-align:right}
.perm-grid input{margin:auto;display:block}

pre.json{direction:ltr;text-align:left;background:rgba(5,12,22,.8);border:1px solid var(--line);border-radius:10px;padding:12px;overflow:auto;font:12px/1.5 var(--mono);color:#b9c7dc;max-height:260px;margin-top:6px;white-space:pre-wrap;word-break:break-all}
details summary{cursor:pointer;color:var(--accent);font-size:13px}

/* ---------- النوافذ والتنبيهات ---------- */
.overlay{position:fixed;inset:0;background:rgba(2,6,12,.72);backdrop-filter:blur(4px);display:grid;place-items:center;padding:16px;z-index:60;overflow:auto;animation:fade .15s}
@keyframes fade{from{opacity:0}}
.modal{width:100%;max-width:520px;background:linear-gradient(180deg,var(--panel),var(--bg2));border:1px solid var(--line2);border-radius:18px;box-shadow:var(--shadow);max-height:92vh;display:flex;flex-direction:column}
.modal.wide{max-width:760px}
.modal-head{display:flex;justify-content:space-between;align-items:center;padding:16px 22px;border-bottom:1px solid var(--line)}
.modal-head h3{font-size:18px}
.modal-body{padding:20px 22px 22px;overflow:auto}
.confirm-msg{margin-bottom:18px;color:var(--text)!important}
#toasts{position:fixed;bottom:20px;left:20px;display:grid;gap:8px;z-index:80}
.toast{background:var(--panel2);border:1px solid var(--line2);border-radius:12px;padding:12px 18px;box-shadow:var(--shadow);font-size:14px;animation:fade .2s;transition:.4s}
.toast.ok{border-color:rgba(56,201,138,.6)} .toast.err{border-color:rgba(239,91,107,.7)}
.toast.out{opacity:0;transform:translateY(8px)}

/* ---------- الجوال ---------- */
@media (max-width:960px){
  .hero{grid-template-columns:1fr}
  .grid.six{grid-template-columns:1fr 1fr}
  .app{grid-template-columns:1fr}
  .side{position:fixed;right:0;top:0;bottom:0;width:270px;z-index:50;transform:translateX(100%);transition:.25s;box-shadow:var(--shadow)}
  .side.open{transform:none}
  .scrim.show{display:block;position:fixed;inset:0;background:rgba(0,0,0,.55);z-index:45}
  .appbar .menu{display:block}
  .citizen{grid-template-columns:1fr}
}
@media (max-width:600px){
  .grid.six{grid-template-columns:1fr}
  th,td{padding:10px}
  .page-head{align-items:flex-start}
}

/* ============ إضافات الإصدار 2 ============ */
.seal{object-fit:contain}
.hero-logo{width:96px;height:96px;object-fit:contain;margin-bottom:18px;filter:drop-shadow(0 6px 24px rgba(242,204,75,.35))}
.stage img{width:46px;height:46px;object-fit:contain;margin-bottom:12px;display:block}
.grid.six{grid-template-columns:repeat(4,1fr)}
.view{max-width:none}
.muted{color:var(--dim)}
.sub-h{margin:16px 0 6px;font-size:14px;color:var(--accent)}
.prose{color:#cdd8e8;line-height:1.8;word-break:break-word}
.ph-main{display:flex;align-items:center;gap:16px}
.head-logo{width:64px;height:64px;object-fit:contain;filter:drop-shadow(0 4px 14px rgba(0,0,0,.5))}

/* التنقل: مجموعات وشعارات */
.nav-group{font-family:var(--mono);font-size:11px;letter-spacing:.2em;color:var(--dim);padding:16px 14px 4px;direction:ltr;text-align:right}
#nav a img{width:22px;height:22px;object-fit:contain;flex:none}
.side .brand .seal{width:38px;height:38px}

/* نماذج: اختيار متعدد وصفوف ومرفقات */
.multi{border:1px solid var(--line2);border-radius:12px;padding:10px;background:rgba(5,12,22,.55)}
.multi input[type=search]{margin-bottom:8px}
.multi-list{max-height:190px;overflow:auto;display:grid;gap:2px}
.multi-list .check{padding:6px 8px;border-radius:8px}
.multi-list .check:hover{background:rgba(242,204,75,.08)}
.rows{border:1px solid var(--line2);border-radius:12px;padding:10px;background:rgba(5,12,22,.55)}
.rows-add{display:grid;grid-template-columns:1fr 1.4fr auto;gap:8px}
.rows-list{list-style:none;margin:10px 0 0;padding:0;display:grid;gap:6px}
.rows-list li{display:flex;align-items:center;gap:8px;background:rgba(242,204,75,.08);border:1px solid var(--line);border-radius:10px;padding:8px 12px}
.rows-list li .icon-btn{margin-right:auto}
.info-box{background:rgba(242,204,75,.08);border:1px solid rgba(242,204,75,.3);border-radius:12px;padding:10px 14px;margin-bottom:16px;display:flex;gap:12px;align-items:center;flex-wrap:wrap}
.shots{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:10px;margin-bottom:14px}
.shot{width:100%;height:150px;object-fit:cover;border-radius:12px;border:1px solid var(--line2);background:#050c16;display:block}
.shot.missing{display:grid;place-items:center;color:var(--dim);font-size:12px;text-align:center;padding:8px}
video.shot{height:auto;max-height:260px}
.cipher textarea{font-family:var(--mono);direction:ltr;text-align:left}

/* المراجع */
.res-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:16px}
.res-card{position:relative;background:linear-gradient(180deg,var(--panel),var(--bg2));border:1px solid var(--line);border-radius:var(--r);padding:22px;transition:.2s}
.res-card:hover{border-color:var(--accent);transform:translateY(-3px)}
.res-card i{position:absolute;left:18px;top:12px;font:600 30px var(--mono);color:rgba(242,204,75,.16);font-style:normal}
.res-link{display:block;color:inherit}
.res-link h3{margin-bottom:6px}
.res-link p{color:var(--mut);font-size:14px;margin-bottom:14px}
.res-card .row-actions{margin-top:12px}

/* الرئيسية: عمود النشاط على اليسار */
.home-grid{display:grid;grid-template-columns:minmax(0,1fr) 360px;gap:22px;align-items:start}
.home-main{grid-column:1;grid-row:1}
.home-side{grid-column:2;grid-row:1;display:grid;gap:14px;position:sticky;top:76px}
.feed h3{display:flex;justify-content:space-between;align-items:center;font-size:15px}
.feed h3 a{font-size:12px;color:var(--accent);font-weight:500}
.feed ul{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.feed li{border-right:2px solid var(--line2);padding-right:10px}
.feed li b{display:block;font-size:14px;font-weight:600}
.feed li small{color:var(--dim);font-size:12px}
.feed.alert{border-color:rgba(240,178,74,.5)}
.feed.alert li{border-right-color:var(--warn)}
.home-side .panel{margin:0}

/* أنيميشن الدخول */
.intro{position:fixed;inset:0;z-index:200;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;background:radial-gradient(circle at 50% 42%,#0e2340 0%,#07101b 62%);cursor:pointer;overflow:hidden;transition:opacity .55s ease}
.intro[hidden]{display:none}
.intro.out{opacity:0}
.intro-rings span{position:absolute;left:50%;top:42%;width:240px;height:240px;margin:-120px 0 0 -120px;border:1px solid rgba(242,204,75,.5);border-radius:50%;opacity:0}
.intro.play .intro-rings span{animation:ring 2.8s ease-out infinite}
.intro.play .intro-rings span:nth-child(2){animation-delay:.7s}
.intro.play .intro-rings span:nth-child(3){animation-delay:1.4s}
@keyframes ring{0%{transform:scale(.5);opacity:.8}100%{transform:scale(3.2);opacity:0}}
.intro-logo{width:150px;height:150px;object-fit:contain;position:relative;opacity:0;transform:scale(.55);filter:drop-shadow(0 0 0 rgba(242,204,75,0))}
.intro.play .intro-logo{animation:logoIn 1.3s cubic-bezier(.2,.9,.25,1.2) .15s forwards,glow 2.2s ease-in-out 1.4s infinite alternate}
@keyframes logoIn{to{opacity:1;transform:scale(1)}}
@keyframes glow{to{filter:drop-shadow(0 0 26px rgba(242,204,75,.65))}}
.intro-title{font:600 16px var(--mono);color:var(--text);direction:ltr;opacity:0;letter-spacing:.6em;margin-top:14px}
.intro.play .intro-title{animation:track 1.5s ease .7s forwards}
@keyframes track{to{opacity:1;letter-spacing:.2em}}
.intro-sub{color:var(--gold);font-size:15px;opacity:0;letter-spacing:.1em}
.intro.play .intro-sub{animation:fadeUp .8s ease 1.4s forwards}
.intro-name{color:var(--mut);font-size:14px;opacity:0;min-height:20px}
.intro.play .intro-name{animation:fadeUp .8s ease 1.8s forwards}
@keyframes fadeUp{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.intro-bar{width:220px;height:3px;background:rgba(255,255,255,.1);border-radius:3px;overflow:hidden;margin-top:18px}
.intro-bar i{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--accent),var(--gold))}
.intro.play .intro-bar i{animation:bar 3.2s ease-in-out forwards}
@keyframes bar{to{width:100%}}
.intro-skip{position:absolute;bottom:22px;color:var(--dim);font-size:12px}
@media (prefers-reduced-motion:reduce){.intro{display:none!important}}

@media (max-width:1100px){
  .grid.six{grid-template-columns:1fr 1fr}
  .home-grid{grid-template-columns:1fr}
  .home-main,.home-side{grid-column:1;grid-row:auto}
  .home-side{position:static}
}
@media (max-width:600px){
  .grid.six{grid-template-columns:1fr}
  .rows-add{grid-template-columns:1fr}
  .ph-main{align-items:flex-start}
  .head-logo{width:48px;height:48px}
}

/* ============ الإصدار 3: شريط علوي مثل الموقع المرجعي ============ */
:root{--fill:rgba(5,12,22,.6);--bar:rgba(5,11,26,.88);--pop:#0e1b2e}
:root[data-theme=light]{
  --bg:#f3f6fb; --bg2:#ffffff; --panel:#ffffff; --panel2:#eef3fa;
  --line:rgba(30,60,110,.14); --line2:rgba(30,60,110,.26);
  --text:#14233a; --mut:#4b6283; --dim:#7388a6;
  --accent:#a8791a; --accent2:#8a6212; --gold:#a8791a;
  --shadow:0 14px 40px rgba(20,40,80,.16);
  --fill:#eef3fa; --bar:rgba(255,255,255,.9); --pop:#ffffff;
}
:root[data-theme=light] body{background-image:none}
:root[data-theme=dark] body{background-color:#050b1a}
.tabs,.multi,.rows,.table-wrap,.citizen .photo,pre.json,.shot{background:var(--fill)}
:root[data-theme=light] .btn.danger,:root[data-theme=light] .badge.bad{color:#b3202f}
:root[data-theme=light] .btn.ok,:root[data-theme=light] .badge.ok{color:#127a52}
:root[data-theme=light] .badge.warn{color:#8a5a00}
:root[data-theme=light] .badge.blue{color:#8a6212}
:root[data-theme=light] .ann .body,:root[data-theme=light] .prose{color:var(--text)}
:root[data-theme=light] .subtabs button.active{color:var(--text)}
:root[data-theme=light] .overlay{background:rgba(20,35,58,.45)}

.app{display:block;min-height:100vh}
.topbar{position:sticky;top:0;z-index:40;display:flex;align-items:center;gap:18px;padding:10px clamp(14px,3vw,36px);background:var(--bar);backdrop-filter:blur(12px);border-bottom:1px solid var(--line)}
.topbar .brand{flex:none;color:inherit}
.topbar .brand .seal{width:38px;height:38px}
#nav.navlinks{display:flex;align-items:center;gap:2px;flex:1;min-width:0;align-content:normal}
#nav.navlinks a{padding:9px 13px;gap:7px;font-weight:500;box-shadow:none}
#nav.navlinks a.active{background:rgba(242,204,75,.16);box-shadow:inset 0 -2px 0 var(--accent);color:var(--text)}
#nav.navlinks .dd-item{padding:9px 12px;gap:10px;color:var(--text);width:100%}
#nav.navlinks .dd-item.active{background:rgba(242,204,75,.16);box-shadow:none}
.nav-link,.navlinks>a{display:inline-flex;align-items:center;gap:7px;padding:9px 13px;border-radius:10px;color:var(--mut);font:500 14px var(--font);background:none;border:0;cursor:pointer;white-space:nowrap;transition:.15s}
.navlinks a svg,.dd-item svg,.bottombar svg{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;flex:none}
.navlinks a img,.dd-item img,.sheet-item img,.pal-list img{width:22px;height:22px;object-fit:contain;flex:none}
.nav-link:hover,.navlinks>a:hover{background:rgba(127,160,220,.12);color:var(--text)}
.navlinks>a.active,.nav-dd.has-active>.nav-link{color:var(--text);background:rgba(242,204,75,.16);box-shadow:inset 0 -2px 0 var(--accent)}
.caret{width:6px;height:6px;border:solid currentColor;border-width:0 1.6px 1.6px 0;transform:rotate(45deg) translateY(-2px);display:inline-block}
.dd{position:relative}
.dd-menu{position:absolute;top:calc(100% + 8px);inset-inline-start:0;min-width:220px;max-height:70vh;overflow:auto;background:var(--pop);border:1px solid var(--line2);border-radius:14px;box-shadow:var(--shadow);padding:6px;z-index:50;animation:fade .12s}
#dd-settings .dd-menu,#dd-user .dd-menu{inset-inline-start:auto;inset-inline-end:0}
.dd-item{display:flex;align-items:center;gap:10px;width:100%;padding:9px 12px;border-radius:9px;color:var(--text);font:500 14px var(--font);background:none;border:0;cursor:pointer;text-align:start}
.dd-item:hover,.dd-item.active{background:rgba(242,204,75,.14)}
.dd-title{font:600 11px var(--mono);letter-spacing:.14em;color:var(--dim);padding:10px 12px 4px;direction:ltr;text-align:end}
.top-actions{display:flex;align-items:center;gap:8px;margin-inline-start:auto;flex:none}
.top-actions .icon-btn{display:inline-flex;align-items:center;gap:8px;height:38px;min-width:38px;justify-content:center;border:1px solid var(--line);border-radius:10px;background:var(--panel);color:var(--mut);cursor:pointer}
.top-actions .icon-btn svg{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.top-actions .icon-btn:hover{border-color:var(--accent);color:var(--text)}
kbd{font:600 11px var(--mono);border:1px solid var(--line2);border-radius:6px;padding:1px 6px;color:var(--dim);direction:ltr}
.user-chip{height:38px;padding:0 12px;border:1px solid var(--line);border-radius:10px;background:var(--panel);color:var(--text);cursor:pointer}
#me{display:flex;flex-direction:column;line-height:1.25;text-align:start}
#me b{font-size:13px}#me span{font-size:11px;color:var(--mut)}
.seg{display:grid;grid-auto-flow:column;gap:4px;padding:4px;margin:0 6px 6px;background:var(--fill);border-radius:10px}
.seg button{border:0;background:none;color:var(--mut);padding:7px 10px;border-radius:8px;cursor:pointer;font:500 13px var(--font);white-space:nowrap}
.seg button.on{background:var(--accent);color:#1b1503}
.crumbbar{display:flex;justify-content:space-between;align-items:center;padding:10px clamp(16px,3vw,36px) 0;color:var(--dim);font-size:12px}
.view{padding:clamp(14px,2.4vw,30px) clamp(16px,3vw,36px) 90px;max-width:1500px;margin:auto}
#palette input{width:100%;margin-bottom:10px}
.pal-list{display:grid;gap:2px;max-height:50vh;overflow:auto}
.pal-list a{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:10px;color:var(--text)}
.pal-list a.sel,.pal-list a:hover{background:rgba(242,204,75,.16)}
.pal-list svg{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:1.8;flex:none}
.sheet-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:8px;margin-bottom:6px}
.sheet-item{display:flex;align-items:center;gap:8px;padding:10px 12px;border:1px solid var(--line);border-radius:12px;color:var(--text);font-size:13.5px;background:var(--panel2)}
.sheet-item svg{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:1.8;flex:none}
.bottombar{display:none}
@media (max-width:980px){
  #nav.navlinks,.top-actions kbd{display:none}
  .topbar .brand span{display:none}
  .bottombar{display:grid;grid-auto-flow:column;grid-auto-columns:1fr;position:fixed;bottom:0;inset-inline:0;z-index:40;background:var(--bar);backdrop-filter:blur(12px);border-top:1px solid var(--line);padding:6px 4px calc(6px + env(safe-area-inset-bottom))}
  .bottombar a,.bottombar button{display:flex;flex-direction:column;align-items:center;gap:3px;padding:6px 2px;color:var(--mut);font:500 11px var(--font);background:none;border:0;border-radius:10px;cursor:pointer}
  .bottombar img{width:22px;height:22px;object-fit:contain}
  .bottombar a.active{color:var(--accent)}
  .user-chip{padding:0;width:38px;display:grid;place-items:center}
  .user-chip #me{display:none}
  .user-chip::before{content:'';width:18px;height:18px;background:currentColor;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8'%3E%3Ccircle cx='12' cy='8' r='4'/%3E%3Cpath d='M4 21a8 8 0 0 1 16 0'/%3E%3C/svg%3E") center/contain no-repeat}
  .main,.view{min-width:0}
  .topbar .brand b{font-size:11px}
  body{overflow-x:hidden}
}

input,select,textarea{background:var(--fill);color:var(--text)}

/* جدول الأفراد (على طريقة Notion) */
.ptable{margin-bottom:26px}
.ptable h3{display:flex;align-items:center;gap:10px;font-size:20px;margin-bottom:10px}
.ptable h3 img{width:24px;height:24px;object-fit:contain}
.ptable h3 small{font:600 12px var(--mono);color:var(--dim);border:1px solid var(--line2);border-radius:999px;padding:1px 9px}
.ptable td,.ptable th{white-space:nowrap}
.tag{display:inline-block;padding:1px 9px;border-radius:5px;font-size:13px}
.rk-blue{background:rgba(242,204,75,.18);color:#f5dc82}.rk-red{background:rgba(239,91,107,.18);color:#ff9aa5}
.rk-green{background:rgba(56,201,138,.18);color:#7ee6b8}.rk-orange{background:rgba(240,150,74,.2);color:#ffbd85}
.rk-purple{background:rgba(160,120,240,.2);color:#c8b0ff}.rk-pink{background:rgba(240,110,170,.2);color:#ffa5cf}
.pill{display:inline-flex;align-items:center;gap:6px;padding:1px 10px;border-radius:999px;font-size:13px}
.pill i{width:7px;height:7px;border-radius:50%;background:currentColor}
.pill.on{background:rgba(56,201,138,.18);color:#7ee6b8}.pill.off{background:rgba(239,91,107,.18);color:#ff9aa5}.pill.na{background:rgba(143,163,191,.18);color:var(--mut)}
.pts{display:inline-flex;align-items:center;gap:8px;font-family:var(--mono)}
.bar{display:inline-block;width:80px;height:5px;border-radius:3px;background:rgba(143,163,191,.2);overflow:hidden}
.bar i{display:block;height:100%;background:var(--ok)}
.strikes{display:inline-flex;align-items:center;gap:6px;font-family:var(--mono)}
.ring{width:18px;height:18px;border-radius:50%;border:2px solid var(--line2);display:inline-block}
.dc{direction:ltr;text-align:left;color:var(--mut)}
:root[data-theme=light] .rk-blue{color:#8a6212}:root[data-theme=light] .rk-red{color:#b3202f}:root[data-theme=light] .rk-green,:root[data-theme=light] .pill.on{color:#127a52}:root[data-theme=light] .rk-orange{color:#a35a10}:root[data-theme=light] .rk-purple{color:#5b3fb0}:root[data-theme=light] .rk-pink{color:#b02a74}:root[data-theme=light] .pill.off{color:#b3202f}
.ptable .table-wrap{direction:ltr}.ptable td,.ptable th{text-align:left}.ptable h3{direction:ltr}

/* ============ الإصدار 4: شريط جانبي + مظهر كحلي/ذهبي (على طريقة الصورة المرجعية) ============ */
:root{
  --bg:#050b1a; --bg2:#08122a; --panel:#0b1630; --panel2:#101e3d;
  --line:rgba(120,150,210,.16); --line2:rgba(120,160,230,.3);
  --accent:#f2cc4b; --accent2:#d4a02e; --gold:#f2cc4b; --gold2:#e4b92f;
  --fill:rgba(4,10,26,.65); --bar:rgba(5,11,26,.92); --pop:#0b1630;
  --r:16px;
}
:root[data-theme=light]{
  --bg:#f3f6fb; --bg2:#fff; --panel:#fff; --panel2:#eef3fa; --gold:#b8890f; --gold2:#a8791a; --bar:#fff;
}
:root[data-theme=light] body{background-image:none}
body{
  background-color:var(--bg);
  background-image:
    linear-gradient(rgba(120,150,220,.055) 1px,transparent 1px),
    linear-gradient(90deg,rgba(120,150,220,.055) 1px,transparent 1px),
    radial-gradient(900px 520px at 85% -8%,rgba(242,204,75,.12),transparent 60%);
  background-size:38px 38px,38px 38px,auto;
  background-attachment:fixed;
}
:root[data-theme=dark] body{background-color:#050b1a}
.btn.primary{background:linear-gradient(135deg,#f2cc4b,#d4a02e);box-shadow:0 8px 22px rgba(242,204,75,.32)}
.btn.gold{background:var(--gold);border-color:transparent;color:#1a1500;box-shadow:none}
.btn.gold:hover{background:var(--gold2);border-color:transparent}
.panel,.stat,.ann,.res-card,.card,.modal{border-radius:var(--r);background:linear-gradient(180deg,var(--panel),var(--bg2))}

/* ----- التخطيط ----- */
.app{display:grid;grid-template-columns:288px minmax(0,1fr);min-height:100vh}
.topbar,.bottombar{display:none!important}
.side{
  grid-column:1;position:sticky;top:0;height:100vh;overflow:auto;z-index:40;
  display:flex;flex-direction:column;gap:14px;padding:18px 14px 16px;
  background:linear-gradient(180deg,rgba(6,13,32,.96),rgba(5,10,26,.98));
  border-left:1px solid var(--line);border-right:0;
}
:root[data-theme=light] .side{background:#fff}
.side::-webkit-scrollbar{width:6px}.side::-webkit-scrollbar-thumb{background:var(--line2);border-radius:6px}
.side-brand{display:flex;align-items:center;gap:12px;color:var(--text);padding:4px 8px 12px;border-bottom:1px solid var(--line)}
.side-brand b{font-size:17px;font-weight:700;letter-spacing:0}
.side-brand .seal{width:46px;height:46px;border-radius:50%;box-shadow:0 0 0 2px rgba(242,204,75,.35),0 6px 18px rgba(0,0,0,.5)}
.side-search{
  display:flex;align-items:center;gap:10px;width:100%;height:46px;padding:0 14px;cursor:pointer;
  background:var(--fill);border:1px solid var(--line2);border-radius:12px;color:var(--mut);font:500 13.5px var(--font);transition:.15s}
.side-search:hover{border-color:var(--accent);color:var(--text)}
.side-search svg{width:17px;height:17px;stroke:currentColor;fill:none;stroke-width:1.9;stroke-linecap:round;flex:none}
.side-search span{flex:1;text-align:start}
.side-search kbd{order:2}

/* ----- روابط التنقل ----- */
#nav.navlinks{display:flex;flex-direction:column;align-items:stretch;gap:3px;flex:1;margin-top:8px;overflow:visible}
#nav.navlinks a,.nav-link{
  display:flex;align-items:center;gap:12px;padding:10px 16px;border-radius:12px;
  color:var(--text);font:600 14.5px var(--font);border:1px solid transparent;box-shadow:none;background:none;transition:.15s}
#nav.navlinks a svg{width:18px;height:18px;color:var(--mut)}
#nav.navlinks a img{width:20px;height:20px}
#nav.navlinks a:hover{background:rgba(127,160,220,.09)}
#nav.navlinks a.active{background:rgba(242,204,75,.13);border-color:rgba(242,204,75,.55);box-shadow:none;color:#fff}
:root[data-theme=light] #nav.navlinks a.active{color:var(--text)}
#nav.navlinks a.active svg{color:var(--gold)}
.nav-sep{height:1px;background:var(--line);margin:8px 14px}

/* ----- أسفل الشريط: الإدارة والإعدادات ----- */
.side-foot{display:grid;grid-template-columns:1fr 1fr;gap:10px;padding-top:12px;position:relative}
.side-foot:has(#btn-admin[hidden]){grid-template-columns:1fr}
.foot-btn{
  display:flex;align-items:center;justify-content:center;gap:8px;width:100%;height:44px;cursor:pointer;
  background:var(--fill);border:1px solid var(--line2);border-radius:12px;color:var(--text);font:600 13.5px var(--font);transition:.15s}
.foot-btn:hover,.foot-btn.active{border-color:var(--gold);color:var(--gold)}
.foot-btn svg{width:17px;height:17px;stroke:currentColor;fill:none;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.side-foot .dd{position:static}
.dd-menu.up{top:auto;bottom:calc(100% + 8px);inset-inline:0;min-width:0;width:100%}
.me-box{padding:10px 12px 8px;border-bottom:1px solid var(--line);margin-bottom:4px}
.me-box #me b{font-size:14px}.me-box #me span{font-size:12px;color:var(--mut)}

/* ----- المحتوى ----- */
.main{grid-column:2;min-width:0}
.mobilebar{display:none}
.crumbbar{display:none}
.view{max-width:1240px;padding:clamp(20px,3vw,40px) clamp(18px,3.4vw,48px) 80px;margin:0 auto}

/* عناوين الصفحات: شريط ذهبي بجانب العنوان */
.page-head{margin-bottom:26px}
.page-head h1{font-size:clamp(28px,3.4vw,42px);font-weight:700;display:flex;align-items:center;gap:14px}
.page-head h1::after{content:'';width:5px;height:38px;border-radius:4px;background:linear-gradient(180deg,var(--gold),rgba(242,204,75,.35));flex:none}
.page-head p{color:var(--mut);margin-top:4px}
.head-logo{width:58px;height:58px}

/* جداول وتبويبات */
.table-wrap{border-radius:var(--r);background:rgba(8,16,38,.7)}
:root[data-theme=light] .table-wrap{background:#fff}
.subtabs button.active{border-bottom-color:var(--gold)}
.badge.blue{border-color:rgba(242,204,75,.5)}
.eyebrow,.chips b{color:var(--gold)}

/* ----- صفحة الأقسام: بطاقات ----- */
.dept-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:16px;margin-bottom:26px}
.dept-card{
  display:flex;align-items:center;gap:16px;padding:18px 20px;text-align:start;cursor:pointer;color:var(--text);font-family:inherit;
  background:linear-gradient(180deg,rgba(16,30,62,.9),rgba(9,18,42,.95));border:1px solid var(--line);border-radius:14px;transition:.18s}
:root[data-theme=light] .dept-card{background:#fff}
.dept-card:hover{border-color:var(--line2);transform:translateY(-2px)}
.dept-card.sel{border-color:var(--accent);box-shadow:0 0 0 1px rgba(242,204,75,.35),0 10px 30px rgba(242,204,75,.18),inset 0 -3px 0 var(--accent)}
.dept-card img{width:68px;height:68px;object-fit:contain;flex:none;border-radius:50%;filter:drop-shadow(0 4px 12px rgba(0,0,0,.5))}
.dept-card .ph{width:68px;height:68px;border-radius:50%;flex:none;display:grid;place-items:center;font:700 18px var(--mono);color:var(--gold);background:rgba(242,204,75,.1);border:1px solid rgba(242,204,75,.4)}
.dept-card h3{font-size:20px;font-weight:700;line-height:1.3}
.dept-card p{color:var(--mut);font-size:13px;margin-top:2px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.dept-hero{
  display:grid;grid-template-columns:auto 1fr;gap:34px;align-items:center;padding:clamp(22px,3vw,40px);margin-bottom:22px;
  background:radial-gradient(600px 260px at 85% 0%,rgba(242,204,75,.22),transparent 70%),linear-gradient(180deg,#0f2250,#0a1a40);
  border:1px solid rgba(242,204,75,.55);border-radius:20px;box-shadow:0 20px 60px rgba(120,90,10,.25)}
:root[data-theme=light] .dept-hero{background:linear-gradient(180deg,#eaf1ff,#fff)}
.dept-hero .big{width:170px;height:170px;object-fit:contain;border-radius:50%;padding:10px;background:rgba(255,255,255,.04);box-shadow:0 0 0 1px rgba(255,255,255,.08),0 0 60px rgba(242,204,75,.25)}
.dept-hero .big.ph{display:grid;place-items:center;font:700 40px var(--mono);color:var(--gold)}
.dept-hero .tag-pill{display:inline-block;padding:3px 16px;border:1px solid rgba(242,204,75,.6);border-radius:999px;color:#f2cc4b;font-size:13px;font-weight:600;margin-bottom:10px}
.dept-hero h2{font-size:clamp(30px,4vw,52px);line-height:1.15;margin-bottom:8px}
.dept-hero .lead{font-size:17px;margin-bottom:16px}
.dept-info{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:16px;margin-top:6px}
.dept-info .panel{margin:0}
.dept-actions{display:flex;gap:10px;flex-wrap:wrap}

/* ----- الجوال ----- */
@media (max-width:980px){
  .app{grid-template-columns:1fr}
  .main{grid-column:1}
  .side{position:fixed;top:0;bottom:0;right:0;width:292px;max-width:86vw;height:auto;transform:translateX(100%);transition:transform .25s;box-shadow:var(--shadow);border-left:1px solid var(--line2)}
  .side.open{transform:none}
  .scrim.show{display:block;position:fixed;inset:0;background:rgba(0,0,0,.6);z-index:35}
  .mobilebar{display:flex;align-items:center;gap:12px;position:sticky;top:0;z-index:30;padding:10px 16px;background:var(--bar);backdrop-filter:blur(12px);border-bottom:1px solid var(--line)}
  .mobilebar .side-brand{border:0;padding:0}
  .mobilebar .side-brand .seal{width:36px;height:36px}
  .mobilebar .icon-btn svg{width:22px;height:22px;stroke:currentColor;fill:none;stroke-width:1.9;stroke-linecap:round}
  .dept-hero{grid-template-columns:1fr;text-align:center;justify-items:center}
  .dept-hero .big{width:120px;height:120px}
  .dept-actions{justify-content:center}
}

/* إصلاحات التخطيط */
.nav-sep{padding:0!important;font-size:0;height:1px;min-height:1px;flex:none}
.side>*{flex:none}
#nav.navlinks{flex:1 1 auto;min-height:0;overflow-y:auto;overflow-x:hidden;padding-inline-end:2px}
#nav.navlinks::-webkit-scrollbar{width:5px}#nav.navlinks::-webkit-scrollbar-thumb{background:var(--line2);border-radius:5px}
#nav.navlinks a{padding:9px 16px}
.side-search{flex:none}

/* ============ صفحة متطلبات الترقية ============ */
.rk-tabs{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:16px}
.rk-tab{display:inline-flex;align-items:center;gap:10px;padding:7px 8px 7px 18px;border-radius:999px;cursor:pointer;color:var(--text);font:600 14px var(--font);
  background:rgba(16,30,62,.8);border:1px solid var(--line2);transition:.15s}
.rk-tab i{display:grid;place-items:center;width:28px;height:28px;border-radius:50%;font:700 12px var(--mono);font-style:normal;color:#2a2000;
  background:radial-gradient(circle at 35% 30%,#f6e08a,#b8962e);box-shadow:inset 0 0 0 2px rgba(0,0,0,.25)}
.rk-tab:hover{border-color:var(--gold)}
.rk-tab.on{color:var(--gold);border-color:var(--gold);box-shadow:0 0 14px rgba(242,204,75,.25)}
.pr-cur{padding:22px 26px;margin:6px 0 18px;border-radius:14px;border:1px solid var(--gold);
  background:linear-gradient(180deg,#14264d,#0b1733);box-shadow:0 0 28px rgba(242,204,75,.28)}
:root[data-theme=light] .pr-cur{background:#fff}
.pr-cur small{color:var(--mut);display:block}
.pr-cur h2{font-size:28px;margin:4px 0 10px}
.pr-next{color:var(--mut);font-size:14px}
.pr-note{color:var(--mut)}
.pr-pill{display:inline-block;padding:2px 14px;border-radius:999px;border:1px solid var(--gold);color:var(--gold);font-size:12.5px;font-weight:700;background:rgba(242,204,75,.08)}
.pr-line{color:var(--mut);margin-bottom:14px;font-size:14.5px}
.pr-line b{color:var(--text)}
.pr-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
.pr-card{padding:20px;border-radius:14px;border:1px solid var(--line2);background:linear-gradient(180deg,#14264d,#0c1938);display:flex;flex-direction:column;gap:6px;min-height:150px}
:root[data-theme=light] .pr-card{background:#fff}
.pr-card small{color:var(--mut);font-size:14px}
.pr-ico{width:40px;height:40px;border-radius:10px;display:grid;place-items:center;background:rgba(255,255,255,.1);color:var(--gold);margin-bottom:8px}
.pr-ico svg{width:20px;height:20px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.pr-num{font-size:26px;color:var(--mut);font-weight:700;margin-top:6px}
.pr-num em{font-style:normal;color:var(--gold);font-size:32px;font-family:var(--font)}
.pr-none{color:var(--gold);font-size:17px;margin-top:8px}
.pr-hint{color:var(--mut);font-size:12.5px;margin-top:6px}
.pr-chips{display:flex;flex-direction:column;align-items:flex-start;gap:8px;margin-top:10px}
.pr-chips span{padding:4px 14px;border-radius:999px;border:1px solid var(--line2);background:rgba(4,10,26,.7);font:600 12.5px var(--font)}
.pr-warn{margin-top:6px;padding:10px 14px;border-radius:12px;border:1px solid var(--gold);background:rgba(242,204,75,.07);color:var(--gold);font-weight:700;font-size:13px}
@media (max-width:1100px){.pr-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){.pr-grid{grid-template-columns:1fr}}

/* ============ صفحة الأزياء ============ */
.of-sec{margin-bottom:34px}
.of-title{font-size:clamp(20px,2.4vw,28px);direction:ltr;text-align:right;margin-bottom:12px}
.of-tag{direction:ltr;text-align:left;font:600 13px var(--mono);color:var(--accent);background:rgba(242,204,75,.1);border:1px solid rgba(242,204,75,.25);border-radius:8px;padding:5px 12px;margin-bottom:16px}
.of-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:18px}
.of-card{display:flex;flex-direction:column;gap:12px;padding:14px;border-radius:14px;border:1px solid var(--line2);background:linear-gradient(180deg,#14264d,#0c1938);transition:.18s}
:root[data-theme=light] .of-card{background:#fff}
.of-card:hover{border-color:var(--gold);transform:translateY(-2px)}
.of-card header{display:flex;justify-content:space-between;align-items:center;direction:ltr;padding:8px 12px;border-radius:10px;background:rgba(242,204,75,.12);font-size:13px}
.of-card header span{color:var(--mut);font-weight:600}
.of-card header b{color:var(--gold);font-weight:700}
.of-code{display:flex;align-items:center;gap:10px;direction:ltr;padding:6px 6px 6px 12px;border-radius:10px;background:var(--fill);border:1px solid var(--line)}
.of-code small{color:var(--dim);font-size:11px;letter-spacing:.1em;text-transform:uppercase}
.of-code code{flex:1;background:none;padding:0;font-size:14px;color:var(--text);user-select:all}
.of-img{padding:0;border:1px solid var(--line);border-radius:10px;overflow:hidden;cursor:zoom-in;background:#050c16;display:block}
.of-img img{width:100%;aspect-ratio:3/4;object-fit:cover;object-position:top;display:block;transition:.25s}
.of-img:hover img{transform:scale(1.03)}
.of-big{width:100%;max-height:78vh;object-fit:contain;border-radius:10px;display:block}


/* ============================================================
   أنماط ميزات Gang Unit و Detective الموسّعة (خريطة، أعلام، تحقيقات)
   ============================================================ */
.body-row{display:flex;align-items:flex-start}
img.seal{object-fit:contain;filter:drop-shadow(0 4px 14px rgba(0,0,0,.5))}
.boot-logo{width:84px;height:84px;object-fit:contain;animation:bootpulse 1.2s ease-in-out infinite}
@keyframes bootpulse{50%{transform:scale(1.08);filter:drop-shadow(0 0 22px rgba(242,204,75,.6))}}
.nav-logo{width:21px;height:21px;object-fit:contain;flex:none;filter:drop-shadow(0 1px 3px rgba(0,0,0,.5))}
.ph-title{display:flex;align-items:center;gap:16px}
.dept-logo{width:62px;height:62px;object-fit:contain;flex:none;filter:drop-shadow(0 6px 16px rgba(0,0,0,.55))}
.stage-logo{position:absolute;left:16px;bottom:14px;width:46px;height:46px;object-fit:contain;opacity:.9}
.intro-rays{position:absolute;inset:-40%;background:conic-gradient(from 0deg,transparent 0 8%,rgba(242,204,75,.12) 10%,transparent 14% 33%,rgba(212,169,74,.1) 35%,transparent 39% 58%,rgba(242,204,75,.12) 60%,transparent 64% 83%,rgba(212,169,74,.1) 85%,transparent 89%);
  opacity:0}
.intro-center{position:relative;width:min(260px,56vw);aspect-ratio:1;display:grid;place-items:center;margin-bottom:10px}
.intro-ring{position:absolute;inset:0;border-radius:50%;border:2px solid rgba(242,204,75,.55);opacity:0;transform:scale(.5)}
.intro-ring.r2{border-color:rgba(212,169,74,.5)}
.intro.play .intro-rays{animation:rays 3s linear forwards,fadein .8s .1s forwards}
.intro.play .intro-ring{animation:ringout 1.6s ease-out .5s forwards}
.intro.play .intro-ring.r2{animation-delay:.8s}
.intro.play .intro-bar{animation:fadein .4s 1.3s forwards}
.intro.play .intro-skip{animation:fadein .6s 2s forwards}
@keyframes rays{to{transform:rotate(60deg)}}
@keyframes fadein{to{opacity:1}}
@keyframes logoin{60%{opacity:1;transform:scale(1.07) rotate(2deg)}to{opacity:1;transform:scale(1) rotate(0)}}
@keyframes ringout{0%{opacity:.9;transform:scale(.55)}to{opacity:0;transform:scale(1.35)}}
@keyframes rise{to{opacity:1;transform:none}}
@keyframes fill{to{width:100%}}
@media (prefers-reduced-motion:reduce){
  .intro *{animation-duration:.01s!important;animation-delay:0s!important}
}
.home-grid.single{grid-template-columns:1fr}
.panel.mini{padding:16px;margin:0}
.mini-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px}
.mini-head h3{margin:0;font-size:15px}
.mini-head a{font-size:12px}
.mini-row{display:grid;gap:1px;padding:9px 0;border-top:1px solid var(--line)}
.mini-row b{font-size:14px}
.mini-row span{color:var(--mut);font-size:13px}
.mini-row small{color:var(--dim);font-size:11.5px}
.empty-sm{color:var(--dim);font-size:13px;padding:10px 4px;text-align:center}
.thumbs{display:flex;gap:6px;flex-wrap:wrap}
img.thumb{width:54px;height:54px;object-fit:cover;border-radius:8px;border:1px solid var(--line2);background:rgba(5,12,22,.7);cursor:zoom-in;transition:.15s;display:block}
img.thumb:hover{border-color:var(--accent);transform:scale(1.05)}
.citizen img.photo{width:150px;height:180px;border-radius:12px;cursor:zoom-in}
.previews{display:flex;gap:8px;flex-wrap:wrap;margin-top:2px}
.previews img.thumb{width:78px;height:78px}
input[type=file]{padding:9px 12px;cursor:pointer}
input[type=file]::file-selector-button{font:inherit;font-weight:600;margin-left:12px;padding:6px 14px;border-radius:8px;border:1px solid var(--line2);background:var(--panel2);color:var(--text);cursor:pointer}
.lightbox{position:fixed;inset:0;z-index:150;background:rgba(2,6,12,.92);display:grid;place-items:center;padding:20px;cursor:zoom-out;animation:fade .15s}
.lightbox img{max-width:100%;max-height:92vh;border-radius:12px;box-shadow:var(--shadow)}
.lightbox .icon-btn{position:absolute;top:14px;left:18px;font-size:30px;color:#fff}
.multi-filter{padding:8px 12px!important}
.multi-list label{font-size:13.5px;padding:3px 0}
.multi-list label[hidden]{display:none}
.multi-count{color:var(--accent)!important}
.notes-box{display:grid;gap:10px}
.notes-rows{display:grid;gap:10px;border:1px dashed var(--line2);border-radius:10px;padding:12px}
.note-row{display:grid;grid-template-columns:minmax(120px,.8fr) 1.6fr auto;gap:8px;align-items:center}
.chip{display:inline-block;padding:2px 10px;margin:2px 0 2px 4px;border-radius:999px;font-size:12.5px;background:rgba(242,204,75,.12);border:1px solid rgba(242,204,75,.35);color:#f5dc82}
ul.plain{list-style:none;display:grid;gap:6px}
.field[hidden]{display:none}
.detail{display:grid;gap:12px}
.d-row{display:grid;gap:3px;padding-bottom:12px;border-bottom:1px solid var(--line)}
.d-row:last-child{border-bottom:0}
.d-row small{color:var(--dim);font-size:12px}
.d-row .thumbs img.thumb{width:120px;height:120px}
.sel-sm{width:auto;min-width:150px;padding:9px 12px}
.own-note{margin:-6px 0 12px}
small.hint{color:var(--dim);font-size:11px;font-weight:400}
.link-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:16px}
.link-card{display:grid;gap:6px;padding:26px;border-radius:var(--r);border:1px solid var(--line2);background:linear-gradient(135deg,var(--panel2),var(--bg2));color:var(--text);transition:.2s;position:relative;overflow:hidden}
.link-card:hover{border-color:var(--accent);transform:translateY(-3px);box-shadow:0 14px 38px rgba(242,204,75,.25)}
.link-card b{font-size:21px}
.link-card span{color:var(--mut);font-size:14px}
.link-card i{font-style:normal;color:var(--accent);font-weight:600;margin-top:8px}
.cipher [data-out]{background:rgba(56,201,138,.05);border-color:rgba(56,201,138,.3)}
@media (max-width:600px){
  .note-row{grid-template-columns:1fr auto}
  .note-row input{grid-column:1/2}
  .ph-title{gap:12px}
}
.sb-list{display:grid;gap:14px;margin-bottom:12px}
.sb{display:grid;gap:14px;padding:16px;border:1px solid var(--line2);border-radius:12px;background:linear-gradient(180deg,rgba(19,38,64,.55),rgba(8,18,31,.55))}
.sb-head{display:flex;justify-content:space-between;align-items:center;gap:10px;padding-bottom:10px;border-bottom:1px dashed var(--line2)}
.sb-head b{color:var(--gold);font-size:14.5px}
.sb [hidden]{display:none!important}
.msel{display:grid;gap:8px}
.msel-btn{display:flex;align-items:center;justify-content:space-between;gap:10px;width:100%;padding:11px 14px;border-radius:10px;border:1px solid var(--line2);background:rgba(5,12,22,.6);color:var(--text);font:inherit;cursor:pointer;transition:.15s;text-align:right}
.msel-btn:hover,.msel-btn[aria-expanded=true]{border-color:var(--accent)}
.msel-btn i{font-style:normal;color:var(--accent)}
.msel-chips{display:flex;flex-wrap:wrap;gap:4px}
.msel-chips:empty{display:none}
.chip-x{border:0;background:none;color:inherit;font-size:15px;line-height:1;margin-right:6px;cursor:pointer;opacity:.7}
.chip-x:hover{opacity:1;color:var(--bad)}
.msel-pop{display:grid;gap:8px;padding:10px;border:1px solid var(--line2);border-radius:10px;background:rgba(5,12,22,.75);animation:fade .15s}
.msel-search{padding:9px 12px!important}
.msel-mine{font-size:13px;color:var(--mut)}
.msel-list{display:grid;gap:4px;max-height:260px;overflow:auto;padding:2px}
.msel-item{display:flex;align-items:flex-start;gap:10px;padding:8px 10px;border-radius:8px;border:1px solid transparent;cursor:pointer;transition:.12s}
.msel-item:hover{background:rgba(242,204,75,.08)}
.msel-item:has(input:checked){background:rgba(242,204,75,.14);border-color:rgba(242,204,75,.4)}
.msel-item input{margin-top:5px;flex:none}
.msel-item span{display:grid;gap:0;min-width:0}
.msel-item b{font-size:13.5px;font-weight:600}
.msel-item small{color:var(--dim);font-size:11.5px}
.msel-item[hidden]{display:none}
.msel-foot{display:flex;justify-content:space-between;align-items:center}
.msel-foot small{color:var(--accent)}
.deco{display:none}
@media (min-width:1760px){
  .deco{display:flex;flex:1 1 0;min-width:0;position:sticky;top:57px;height:calc(100vh - 57px);align-items:center;justify-content:center;overflow:hidden;pointer-events:none;user-select:none}
  .deco::before{content:"";position:absolute;width:520px;height:520px;border-radius:50%;background:radial-gradient(circle,rgba(242,204,75,.13),transparent 62%);animation:decoBreath 6s ease-in-out infinite}
  .deco-inner{position:relative;display:grid;justify-items:center;gap:14px;width:100%;padding:0 20px}
}
.deco-stage{position:relative;width:min(250px,80%);aspect-ratio:1;display:grid;place-items:center}
.deco-sweep{position:absolute;inset:-6%;border-radius:50%;background:conic-gradient(from 0deg,rgba(242,204,75,0) 0 70%,rgba(242,204,75,.32) 100%);-webkit-mask:radial-gradient(circle,transparent 56%,#000 57%,#000 70%,transparent 71%);mask:radial-gradient(circle,transparent 56%,#000 57%,#000 70%,transparent 71%);animation:decoSpin 5s linear infinite}
.deco-ring{position:absolute;border-radius:50%;border:1.5px solid rgba(242,204,75,.35)}
.deco-ring.r1{inset:0;border-style:dashed;border-color:rgba(242,204,75,.45);animation:decoSpin 28s linear infinite}
.deco-ring.r2{inset:9%;border-color:rgba(212,169,74,.4);border-top-color:transparent;border-bottom-color:transparent;animation:decoSpin 14s linear infinite reverse}
.deco-ring.r3{inset:0;border-color:rgba(242,204,75,.5);animation:decoPulse 3.4s ease-out infinite}
.deco-ring.r3.b{animation-delay:1.7s;border-color:rgba(212,169,74,.45)}
.deco-orbit{position:absolute;inset:-3%;animation:decoSpin 9s linear infinite}
.deco-orbit i{position:absolute;top:-4px;left:50%;width:8px;height:8px;margin-left:-4px;border-radius:50%;background:var(--gold);box-shadow:0 0 14px 2px var(--gold)}
.deco-orbit.o2{inset:7%;animation-duration:13s;animation-direction:reverse}
.deco-orbit.o2 i{background:var(--accent);box-shadow:0 0 14px 2px var(--accent);width:6px;height:6px;margin-left:-3px;top:-3px}
.deco-logo{position:relative;width:62%;height:62%;object-fit:contain;filter:drop-shadow(0 10px 30px rgba(0,0,0,.65));animation:decoFloat 5s ease-in-out infinite,decoGlow 3.4s ease-in-out infinite}
.deco-clock{display:flex;align-items:baseline;justify-content:center;direction:ltr;font:600 clamp(34px,2.6vw,48px)/1 var(--mono);letter-spacing:.04em;color:#eaf2ff;text-shadow:0 0 22px rgba(242,204,75,.45)}
.deco-clock b{margin:0 3px;color:var(--accent);animation:decoBlink 1s steps(2,jump-none) infinite}
.deco-clock em{font-style:normal;font-size:.5em;margin-left:8px;color:var(--gold);min-width:1.4em;text-align:left}
.deco-tz{font:500 11.5px var(--mono);letter-spacing:.28em;color:var(--dim)}
.deco-date{font-size:13px;color:var(--mut);text-align:center}
@keyframes decoSpin{to{transform:rotate(360deg)}}
@keyframes decoPulse{0%{opacity:.8;transform:scale(.78)}100%{opacity:0;transform:scale(1.25)}}
@keyframes decoFloat{0%,100%{transform:translateY(-5px)}50%{transform:translateY(5px)}}
@keyframes decoGlow{0%,100%{filter:drop-shadow(0 10px 30px rgba(0,0,0,.65)) drop-shadow(0 0 8px rgba(242,204,75,.15))}50%{filter:drop-shadow(0 10px 30px rgba(0,0,0,.65)) drop-shadow(0 0 26px rgba(242,204,75,.6))}}
@keyframes decoBlink{50%{opacity:.15}}
@keyframes decoBreath{0%,100%{transform:scale(.92);opacity:.7}50%{transform:scale(1.06);opacity:1}}
@media (prefers-reduced-motion:reduce){
  .deco *,.deco::before{animation-duration:.01s!important;animation-iteration-count:1!important}
}
.modal.xl{width:min(1100px,96vw)}
.mp{position:relative;border:1px solid var(--line2);border-radius:12px;overflow:hidden;background:#35494f;min-height:320px}
.mp-view{position:absolute;inset:0;overflow:hidden;touch-action:none;cursor:grab;direction:ltr;user-select:none;-webkit-user-select:none}
.mp-view.grab{cursor:grabbing}
.mp-world{position:absolute;left:0;top:0;transform-origin:0 0;will-change:transform}
.mp-world>img{display:block;width:100%;height:100%;pointer-events:none}
.mp-heat,.mp-pins{position:absolute;inset:0;pointer-events:none}
.mp-pin{position:absolute;transform:translate(-50%,-50%) scale(var(--inv,1));pointer-events:auto;cursor:pointer;z-index:2}
.mp-pin i{display:block;width:18px;height:18px;border-radius:50%;background:var(--c,#f2cc4b);border:2.5px solid #fff;box-shadow:0 2px 8px rgba(0,0,0,.6);transition:transform .15s}
.mp-pin:hover i,.mp-pin.sel i{transform:scale(1.35)}
.mp-pin span{display:none;position:absolute;bottom:26px;left:50%;transform:translateX(-50%);white-space:nowrap;background:rgba(7,16,27,.95);color:#fff;font:600 12px var(--font);padding:3px 9px;border-radius:7px;border:1px solid var(--line2);direction:rtl}
.mp-pin:hover span,.mp-pin.sel span{display:block}
.mp-pin:hover,.mp-pin.sel{z-index:5}
.mp-pin.st-removed,.mp-pin.st-closed{opacity:.75}
.mp-pin.st-removed i{border-color:#38c98a}
.mp-pin.st-spotted i,.mp-pin.st-reappeared i,.mp-pin.pulse i{animation:mpPulse 1.8s ease-out infinite}
.mp-pin.st-reappeared i{border-color:#ef5b6b}
@keyframes mpPulse{0%{box-shadow:0 0 0 0 rgba(239,91,107,.75),0 2px 8px rgba(0,0,0,.6)}100%{box-shadow:0 0 0 18px rgba(239,91,107,0),0 2px 8px rgba(0,0,0,.6)}}
.mp-pick{position:absolute;width:0;height:0;pointer-events:none;z-index:4}
.mp-pick::before{content:"";position:absolute;left:0;top:0;width:22px;height:22px;margin:-11px 0 0 -11px;border-radius:50%;border:3px solid var(--gold);background:rgba(212,169,74,.35);transform:scale(var(--inv,1));animation:mpPulseG 1.5s ease-out infinite}
@keyframes mpPulseG{0%{box-shadow:0 0 0 0 rgba(212,169,74,.7)}100%{box-shadow:0 0 0 20px rgba(212,169,74,0)}}
.mp-blob{position:absolute;width:9%;aspect-ratio:1;transform:translate(-50%,-50%);border-radius:50%;background:radial-gradient(circle,rgba(239,91,107,.6),rgba(239,91,107,.18) 45%,transparent 70%);mix-blend-mode:screen}
.mp.heat .mp-pin i{width:10px;height:10px;border-width:2px}
.mp-ctrl{position:absolute;top:12px;left:12px;display:grid;gap:6px;z-index:6}
.mp-ctrl button{width:36px;height:36px;border-radius:10px;border:1px solid var(--line2);background:rgba(7,16,27,.88);color:#fff;font-size:18px;cursor:pointer;transition:.15s}
.mp-ctrl button:hover{background:var(--accent2)}
.mp-hint{position:absolute;bottom:10px;right:12px;z-index:6;font-size:11.5px;color:#d8e3f2;background:rgba(7,16,27,.75);padding:3px 10px;border-radius:999px;pointer-events:none}
.mp-card{position:absolute;bottom:14px;left:14px;width:min(330px,calc(100% - 28px));z-index:7;padding:14px;border-radius:12px;border:1px solid var(--line2);background:rgba(10,22,38,.96);box-shadow:var(--shadow);animation:fade .15s}
.mp-card-x{position:absolute;top:6px;left:8px;border:0;background:none;color:var(--mut);font-size:20px;cursor:pointer}
.mp-c{display:grid;gap:8px}
.mp-c-head{display:flex;align-items:center;gap:8px;flex-wrap:wrap;padding-left:22px}
.mp-c .thumbs img.thumb{width:72px;height:72px}
.mp-pickbar{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-top:12px;flex-wrap:wrap}
.mp-pickbar .form-actions{margin:0}
.map-bar{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-bottom:12px}
.map-count{color:var(--accent);font-size:13px;font-weight:600}
.map-legend{margin-right:auto;display:flex;align-items:center;gap:6px;font-size:12px;color:var(--mut)}
.lg{display:inline-block;width:11px;height:11px;border-radius:50%;margin-right:8px;border:2px solid #fff;background:#8fa3bf}
.lg.st-spotted,.lg.st-reappeared{background:#ef5b6b}
.lg.st-removed{background:#38c98a}
.lg.s-open{background:#f2cc4b}
.lg.s-progress{background:#f0b24a}
.lg.s-closed{background:#38c98a}
.lg.s-cold{background:#8fa3bf}
.mini-map{position:relative;display:block;overflow:hidden;border-radius:10px;border:1px solid var(--line2);padding:0;cursor:pointer;background:#35494f}
.mini-map img{position:absolute;max-width:none;pointer-events:none}
.mini-map i{position:absolute;left:50%;top:50%;width:14px;height:14px;margin:-7px 0 0 -7px;border-radius:50%;background:#ef5b6b;border:2.5px solid #fff;box-shadow:0 0 0 0 rgba(239,91,107,.7);animation:mpPulse 1.8s ease-out infinite}
.mini-map em{position:absolute;bottom:0;left:0;right:0;font:600 11px var(--font);font-style:normal;color:#fff;background:rgba(7,16,27,.8);padding:3px;text-align:center}
.loc-field{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.loc-field [data-loc-mini]{flex-basis:100%}
.loc-text{color:var(--ok);font-size:13px}
.seg button.active{background:var(--accent2);color:#1b1503}
.gang-chip{border-color:var(--c);background:color-mix(in srgb,var(--c) 18%,transparent);color:#fff}
.podium{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:14px;margin-bottom:18px}
.pod{display:grid;justify-items:center;gap:2px;padding:18px 12px;border-radius:var(--r);border:1px solid var(--line2);background:linear-gradient(180deg,var(--panel2),var(--bg2))}
.pod.p1{border-color:var(--gold);box-shadow:0 0 30px rgba(212,169,74,.18)}
.pod-m{font-size:34px;line-height:1}
.pod b{font-size:16px}
.pod em{font:600 30px var(--mono);font-style:normal;color:var(--ok)}
.pod small{color:var(--mut)}
.board-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(340px,1fr));gap:18px}
.rank-row{display:grid;grid-template-columns:30px minmax(90px,150px) 1fr 44px;align-items:center;gap:10px;padding:7px 8px;border-radius:9px}
.rank-row.me{background:rgba(242,204,75,.12);border:1px solid rgba(242,204,75,.35)}
.rank-row .rk{color:var(--dim)}
.rank-row .n{text-align:left;color:var(--mut)}
.rank-row b{font-size:14px;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.gname{display:flex;align-items:center;gap:8px}
.dot{display:inline-block;width:10px;height:10px;border-radius:50%;flex:none}
.bar.two i.ok{background:var(--ok);border-radius:0}
.bar.two i.warn{background:var(--warn);border-radius:0}
.hint2{display:block;margin-top:8px;color:var(--dim)}
.wk{display:flex;align-items:flex-end;gap:12px;height:170px;padding-top:10px}
.wk-col{flex:1;display:grid;justify-items:center;align-content:end;gap:4px;min-width:0}
.wk-bar{width:100%;max-width:46px;border-radius:7px 7px 3px 3px;background:linear-gradient(180deg,var(--accent),var(--accent2))}
.wk-col span{font-size:12px;color:var(--mut)}
.wk-col small{color:var(--dim);font-size:11px}
.case-head{display:flex;flex-wrap:wrap;align-items:center;gap:12px;padding:18px 20px;margin-bottom:16px;border-radius:var(--r);border:1px solid var(--line2);background:linear-gradient(135deg,var(--panel2),var(--bg2))}
.case-head .cn{font:700 22px var(--mono);color:var(--gold)}
.case-head h2{font-size:20px;flex:1;min-width:200px}
.case-grid{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:18px;align-items:start}
.lock{color:var(--warn);font-size:13px;font-weight:600}
.vlinks{display:flex;flex-wrap:wrap;gap:8px}
.tl{list-style:none;position:relative;display:grid;gap:14px;padding-right:26px}
.tl::before{content:"";position:absolute;right:8px;top:6px;bottom:6px;width:2px;background:linear-gradient(var(--accent),var(--line2))}
.tl li{position:relative}
.tl-dot{position:absolute;right:-26px;top:16px;width:14px;height:14px;border-radius:50%;background:var(--accent);border:3px solid var(--bg)}
.tl-card{padding:14px 16px;border-radius:12px;border:1px solid var(--line2);background:linear-gradient(180deg,var(--panel),var(--bg2))}
.tl-card time{font:12px var(--mono);color:var(--gold)}
.tl-card b{display:block;font-size:16px;margin:2px 0}
.tl-card p{color:var(--mut);font-size:14px;margin-bottom:6px}
.chain{display:grid;gap:12px}
.chain-head{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.chain-head h3{margin:0;flex:1}
.steps{list-style:none;display:grid;gap:0;padding-right:22px;position:relative}
.steps::before{content:"";position:absolute;right:7px;top:8px;bottom:8px;width:2px;background:var(--line2)}
.steps li{position:relative;padding:8px 0 8px 0;font-size:14px}
.steps li::before{content:"";position:absolute;right:-22px;top:15px;width:12px;height:12px;border-radius:50%;background:var(--gold);border:2px solid var(--bg)}
.steps li.t::before{background:var(--accent)}
.steps small{display:block;color:var(--dim)}
.alert-box{display:grid;gap:4px;padding:14px 18px;margin-bottom:18px;border-radius:var(--r);border:1px solid rgba(240,178,74,.55);background:linear-gradient(135deg,rgba(240,178,74,.14),rgba(240,178,74,.04));animation:alertGlow 2.4s ease-in-out infinite}
.alert-box b{color:var(--warn)}
@keyframes alertGlow{50%{box-shadow:0 0 28px rgba(240,178,74,.22)}}
@keyframes bootpulse{50%{transform:scale(1.08);filter:drop-shadow(0 0 22px rgba(242,204,75,.6))}}
@keyframes rays{to{transform:rotate(60deg)}}
@keyframes fadein{to{opacity:1}}
@keyframes logoin{60%{opacity:1;transform:scale(1.07) rotate(2deg)}to{opacity:1;transform:scale(1) rotate(0)}}
@keyframes ringout{0%{opacity:.9;transform:scale(.55)}to{opacity:0;transform:scale(1.35)}}
@keyframes rise{to{opacity:1;transform:none}}
@keyframes fill{to{width:100%}}
@keyframes decoSpin{to{transform:rotate(360deg)}}
@keyframes decoPulse{0%{opacity:.8;transform:scale(.78)}100%{opacity:0;transform:scale(1.25)}}
@keyframes decoFloat{0%,100%{transform:translateY(-5px)}50%{transform:translateY(5px)}}
@keyframes decoGlow{0%,100%{filter:drop-shadow(0 10px 30px rgba(0,0,0,.65)) drop-shadow(0 0 8px rgba(242,204,75,.15))}50%{filter:drop-shadow(0 10px 30px rgba(0,0,0,.65)) drop-shadow(0 0 26px rgba(242,204,75,.6))}}
@keyframes decoBlink{50%{opacity:.15}}
@keyframes decoBreath{0%,100%{transform:scale(.92);opacity:.7}50%{transform:scale(1.06);opacity:1}}
@keyframes mpPulse{0%{box-shadow:0 0 0 0 rgba(239,91,107,.75),0 2px 8px rgba(0,0,0,.6)}100%{box-shadow:0 0 0 18px rgba(239,91,107,0),0 2px 8px rgba(0,0,0,.6)}}
@keyframes mpPulseG{0%{box-shadow:0 0 0 0 rgba(212,169,74,.7)}100%{box-shadow:0 0 0 20px rgba(212,169,74,0)}}
@keyframes alertGlow{50%{box-shadow:0 0 28px rgba(240,178,74,.22)}}
.sw{display:inline-block;width:14px;height:14px;border-radius:50%;border:2px solid rgba(255,255,255,.85);box-shadow:0 0 0 1px rgba(0,0,0,.4);flex:none;vertical-align:middle}
.gtag{display:inline-flex;align-items:center;gap:8px}
input[type=color].color-in{width:64px;height:40px;padding:3px;cursor:pointer;border-radius:10px}
.hint-block{color:var(--dim);font-size:12.5px;display:block;margin-bottom:6px}
.zoomer{display:inline-flex;align-items:center;gap:8px;margin-inline-start:auto}
.zoomer .mono{min-width:48px;text-align:center;color:var(--mut)}
.map-filters{display:flex;justify-content:space-between;gap:14px 24px;flex-wrap:wrap;align-items:center;margin-bottom:14px}
.legend{display:flex;flex-wrap:wrap;gap:8px}
.lg:hover{border-color:var(--accent)}
.lg.off{opacity:.38;text-decoration:line-through}
.st-filter{display:flex;gap:16px;flex-wrap:wrap}
.st-filter .check{font-size:13px;color:var(--mut)}
.mapwrap{border:1px solid var(--line2);border-radius:var(--r);background:#050c16;overflow:auto;max-height:72vh;direction:ltr}
.mapbox{position:relative;line-height:0;max-width:none;margin:0 auto}
.mapbox>img,.mapbox [data-path]{width:100%;display:block;user-select:none;-webkit-user-drag:none}
.mapbox>div[data-pins]{position:absolute;inset:0;pointer-events:none}
.pin{position:absolute;width:20px;height:20px;margin:-10px 0 0 -10px;padding:0;border-radius:50%;border:3px solid #fff;background:var(--c,#ef5b6b);box-shadow:0 2px 8px rgba(0,0,0,.7);cursor:pointer;pointer-events:auto;transition:transform .12s;z-index:2}
.pin:hover{transform:scale(1.35);z-index:5}
.pin>span{display:none}
.pin.st-removed{opacity:.5;border-color:rgba(255,255,255,.6);filter:grayscale(.6)}
.pin.st-removed>span{display:block;position:absolute;inset:0;line-height:14px;font-size:12px;font-weight:700;color:#fff;text-align:center}
.pin.st-removed>span::before{content:"✓"}
.pin.st-replaced{animation:pinpulse 1.6s ease-out infinite}
.pin.st-replaced::after{content:"";position:absolute;inset:-8px;border-radius:50%;border:2px solid var(--bad)}
@keyframes pinpulse{0%{box-shadow:0 0 0 0 rgba(239,91,107,.75)}100%{box-shadow:0 0 0 16px rgba(239,91,107,0)}}
.pin.pick{background:var(--accent);pointer-events:none}
.pinpick{display:grid;gap:8px;justify-items:start}
.pinpick .mapbox{width:100%;max-width:100%;margin:0;border:1px solid var(--line2);border-radius:10px;overflow:hidden;cursor:crosshair;direction:ltr}
.ba{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:14px}
.ba-item{display:grid;gap:6px;margin:0}
.ba-item figcaption{font-size:12px;color:var(--dim)}
.ba-item img.thumb{width:100%;height:auto;max-height:280px;object-fit:cover}
.ba-none{display:grid;place-items:center;min-height:120px;border:1px dashed var(--line2);border-radius:10px;color:var(--dim);font-size:13px}
ul.hist{list-style:none;display:grid;gap:10px}
ul.hist li{display:grid;gap:4px;padding:10px 12px;border:1px solid var(--line);border-radius:10px;background:rgba(5,12,22,.4)}
.hist-note{color:var(--mut);font-size:13.5px}
.bar span{position:relative;display:block;padding:0 10px;line-height:26px;font-weight:600}
[dir=rtl] .bar i{inset:0 0 0 auto}
.case-no{color:var(--gold);font-size:13px;letter-spacing:.08em}
.casetabs{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:18px;padding:5px;border-radius:12px;background:rgba(5,12,22,.55);border:1px solid var(--line)}
.casetabs button{flex:1 1 auto;border:0;background:none;color:var(--mut);padding:9px 16px;border-radius:9px;font:inherit;font-weight:600;cursor:pointer;transition:.15s}
.casetabs button:hover{color:var(--text)}
.casetabs button.active{background:linear-gradient(135deg,var(--accent),var(--accent2));color:#1b1503;box-shadow:0 6px 18px rgba(242,204,75,.35)}
ol.timeline{list-style:none;position:relative;display:grid;gap:14px;padding-inline-start:30px}
ol.timeline::before{content:"";position:absolute;inset-block:8px;inset-inline-start:8px;width:2px;background:linear-gradient(var(--accent),var(--line2))}
ol.timeline li{position:relative}
.tl-top{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap}
.tl-top time{color:var(--accent);font-size:12.5px}
.ev-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(340px,1fr));gap:16px;align-items:start}
.ev{display:grid;gap:12px}
.ev h3{margin:0}
.ev-top{display:flex;justify-content:space-between;align-items:flex-start;gap:10px}
.ev-meta{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:10px}
.ev-meta small{display:block;color:var(--dim);font-size:11.5px}
.ev-meta b{font-size:13.5px;font-weight:600}
.chain-box{border:1px solid var(--line);border-radius:10px;padding:8px 12px;background:rgba(5,12,22,.4)}
.chain-box summary{cursor:pointer;font-weight:600;color:var(--accent);font-size:13.5px}
ol.chain{list-style:none;display:grid;gap:0;margin-top:10px;position:relative}
ol.chain li{display:flex;gap:12px;padding-bottom:14px;position:relative}
ol.chain li:not(:last-child)::before{content:"";position:absolute;inset-inline-start:11px;top:26px;bottom:0;width:2px;background:var(--line2)}
.chain-n{flex:none;width:24px;height:24px;border-radius:50%;display:grid;place-items:center;font:600 12px var(--mono);background:rgba(242,204,75,.18);border:1px solid rgba(242,204,75,.5);color:#f5dc82}
.cpick{display:grid;gap:8px}
.cpick-res{display:grid;gap:4px;max-height:220px;overflow:auto;padding:6px;border:1px solid var(--line2);border-radius:10px;background:rgba(5,12,22,.75)}
.cpick-item{display:flex;align-items:center;gap:10px;padding:8px 12px;border-radius:8px;border:1px solid transparent;background:none;color:var(--text);font:inherit;text-align:right;cursor:pointer}
.cpick-item:hover{background:rgba(242,204,75,.12);border-color:rgba(242,204,75,.4)}
.cpick-item small{color:var(--dim);font-family:var(--mono);margin-inline-start:auto}
.pickwrap{width:100%;max-height:60vh;overflow:auto;direction:ltr;border:1px solid var(--line2);border-radius:10px;background:#050c16}
.pinpick .pickwrap .mapbox{border:0;border-radius:0;margin:0 auto;width:100%;max-width:none}
.pick-tools{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.mapview{position:relative;overflow:hidden;height:72vh;min-height:360px;border:1px solid var(--line2);border-radius:var(--r);background:#050c16;direction:ltr;touch-action:none;cursor:grab;user-select:none;-webkit-user-select:none}
.mapview.grabbing{cursor:grabbing}
.mapview.adding{cursor:crosshair;outline:2px solid var(--accent);outline-offset:-2px}
.mapview .mapbox{position:absolute;left:0;top:0;margin:0;transform-origin:0 0}
.mapview .pin{transform:scale(var(--inv,1))}
.mapview .pin:hover{transform:scale(calc(var(--inv,1) * 1.35))}
.map-hint{position:absolute;top:12px;left:50%;transform:translateX(-50%);padding:7px 16px;border-radius:999px;background:var(--accent);color:#04101f;font-size:13px;font-weight:700;pointer-events:none;z-index:10;white-space:nowrap}
.map-tip{position:absolute;bottom:8px;left:10px;font-size:11.5px;color:var(--dim);background:rgba(5,12,22,.72);padding:3px 10px;border-radius:999px;pointer-events:none;z-index:10}
.btn.active{border-color:var(--accent);background:rgba(242,204,75,.2);color:#fff}
.legend .lg{width:auto;height:auto;margin:0;background:transparent}
.legend .lg:not(.off){background:rgba(255,255,255,.03)}

/* ===== مسميات الرتب (بطاقات حسب المخاطبة) ===== */
.tgroups{display:grid;gap:12px}
.tg{display:grid;grid-template-columns:210px 1fr;border:1px solid var(--line);border-radius:14px;background:var(--panel);overflow:hidden}
.tg-h{display:grid;place-items:center;padding:18px 12px;font-size:26px;font-weight:800;text-align:center;background:linear-gradient(135deg,rgba(212,175,55,.38),rgba(16,26,48,.7));border-inline-end:2px solid var(--gold)}
.tg.plain .tg-h{font-size:15px;font-weight:600;color:var(--mut);background:transparent;border-inline-end:1px solid var(--line)}
.tg-c{display:flex;flex-wrap:wrap;gap:10px;padding:16px 18px;align-content:center}
.chip-r{padding:8px 16px;border:1px solid var(--line2);border-radius:999px;font-weight:700;font-size:13px;background:rgba(5,12,22,.55);direction:ltr;white-space:nowrap}
.tg.plain .chip-r{color:var(--mut)}
@media (max-width:640px){.tg{grid-template-columns:1fr}.tg-h{padding:12px;font-size:22px;border-inline-end:0;border-bottom:2px solid var(--gold)}.tg.plain .tg-h{border-bottom:1px solid var(--line)}}

/* تعديل مسميات الرتب مباشرة من البطاقات */
.tg-h{gap:10px;align-content:center}
.tg-h .btn.sm{font-size:11px;padding:3px 10px;opacity:.75}
.tg-h .btn.sm:hover{opacity:1}
.chip-r.editable{padding-inline-end:6px;display:inline-flex;align-items:center;gap:6px}
.chip-x{background:transparent;border:0;color:var(--mut);cursor:pointer;font-size:14px;line-height:1;padding:2px 4px;border-radius:6px}
.chip-x:hover{color:var(--gold);background:rgba(255,255,255,.06)}
.chip-x.del:hover{color:var(--bad)}
.chip-r.add{cursor:pointer;color:var(--gold);border-style:dashed;background:transparent;font-size:16px;padding:5px 14px}
.chip-r.add:hover{background:rgba(212,175,55,.12)}

/* دخول الأقسام من صفحة «الأقسام» */
.dept-card{position:relative}
.dept-card .dc-go{margin-inline-start:auto;font-size:26px;color:var(--accent);line-height:1;opacity:.85}
.dept-card .dc-lock{margin-inline-start:auto;font-size:15px;opacity:.55}
.dept-card.locked img,.dept-card.locked .ph{filter:grayscale(.6) opacity(.8)}
.dept-enter{display:inline-block;margin-top:4px}
.dept-lock{margin-top:6px;color:var(--mut);font-size:14px}

/* ===== شريط جانبي مضغوط (أيقونات خطّية، خطوط أصغر، مسافات أقل) ===== */
.app{grid-template-columns:232px minmax(0,1fr)}
.side{padding:14px 10px 12px;gap:10px}
.side-brand{gap:10px;padding:2px 6px 10px}
.side-brand b{font-size:15px}
.side-brand .seal{width:38px;height:38px}
.side-search{height:36px;padding:0 11px;border-radius:10px;font-size:13px;gap:8px}
.side-search svg{width:15px;height:15px}
.side-search kbd{font-size:10.5px;padding:1px 6px}
#nav.navlinks{gap:1px;margin-top:2px}
#nav.navlinks a,.nav-link{padding:7px 12px;gap:10px;border-radius:9px;font:500 13.5px var(--font)}
#nav.navlinks a svg{width:16px;height:16px;stroke-width:1.7}
#nav.navlinks a.active{font-weight:600}
.nav-sep{margin:5px 8px}
.side-foot{gap:8px;padding-top:10px}
.foot-btn{height:34px;border-radius:9px;font-size:12.5px;gap:6px}
.foot-btn svg{width:15px;height:15px}
@media (max-width:980px){.app{grid-template-columns:1fr}.side{width:244px}}

/* ===== الصفحة الرئيسية: البانر والوصول السريع ===== */
.hero{display:grid;grid-template-columns:1fr 270px;align-items:center;gap:30px;padding:36px 44px;margin-bottom:28px;border:1px solid var(--line2);border-radius:26px;
  background:radial-gradient(520px 300px at 100% 0,rgba(242,204,75,.10),transparent 70%),linear-gradient(135deg,#0a1a40 0%,#0b1630 55%,#14161a 100%);box-shadow:var(--shadow)}
:root[data-theme=light] .hero{background:linear-gradient(135deg,#fff7dc,#fff 60%);color:var(--text)}
.hero-tags{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin-bottom:14px}
.hero-pill{display:inline-block;padding:3px 16px;border:1px solid rgba(242,204,75,.6);border-radius:999px;color:var(--gold);font-size:13px;font-weight:600;background:rgba(242,204,75,.06)}
.hero-who{font-size:13px;color:var(--mut)}
.hero h1{font-size:clamp(32px,4.6vw,56px);line-height:1.2;font-weight:800;margin-bottom:16px}
.hero p{color:var(--mut);font-size:16px;line-height:2;max-width:720px;margin-bottom:22px}
.hero-btns{display:flex;flex-wrap:wrap;gap:12px}
.hero-btns .btn{padding:12px 24px;font-weight:700;font-size:15px;border-radius:12px}
.hero-seal{display:grid;place-items:center}
.hero-seal img{width:220px;height:220px;object-fit:contain;border-radius:50%;padding:12px;background:rgba(255,255,255,.04);box-shadow:0 0 0 1px rgba(255,255,255,.08),0 0 70px rgba(242,204,75,.18)}
.qa-h{display:flex;align-items:center;gap:12px;font-size:26px;font-weight:800;margin:6px 0 16px}
.qa-h::after{content:"";width:6px;height:28px;border-radius:4px;background:linear-gradient(180deg,#f2cc4b,#8a6212)}
.qa-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin-bottom:30px}
.qa-card{display:flex;align-items:center;gap:14px;padding:18px 20px;border:1px solid var(--line2);border-radius:14px;color:var(--text);
  background:linear-gradient(180deg,rgba(18,32,66,.92),rgba(10,20,44,.96));transition:.18s}
:root[data-theme=light] .qa-card{background:#fff}
.qa-card:hover{border-color:var(--gold);transform:translateY(-2px);box-shadow:0 10px 28px rgba(242,204,75,.12)}
.qa-card b{font-size:16px;font-weight:700}
.qa-ic{display:grid;place-items:center;width:48px;height:48px;border-radius:12px;background:rgba(255,255,255,.08);flex:none}
.qa-ic svg{width:22px;height:22px;stroke:var(--gold);fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
@media (max-width:980px){.qa-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:760px){.hero{grid-template-columns:1fr;padding:26px 22px}.hero-seal{order:-1}.hero-seal img{width:130px;height:130px}.qa-grid{grid-template-columns:1fr}}

/* ===== الأغراض الممنوعة ===== */
.pz-bar{display:flex;flex-wrap:wrap;align-items:center;gap:12px;margin-bottom:18px}
.pz-chips{display:flex;flex-wrap:wrap;gap:8px}
.pz-chip{padding:7px 18px;border-radius:999px;border:1px solid var(--line2);background:rgba(10,20,44,.6);color:var(--text);font:600 13px var(--font);cursor:pointer;transition:.15s}
.pz-chip:hover{border-color:var(--gold)}
.pz-chip.on{background:var(--gold);border-color:var(--gold);color:#1b1503}
.pz-search{margin-inline-start:auto;min-width:200px;height:38px;padding:0 14px;border-radius:10px;border:1px solid var(--line2);background:var(--fill,rgba(10,20,44,.6));color:var(--text);font:500 13.5px var(--font)}
.pz-search:focus{outline:0;border-color:var(--gold)}
.pz-gh{font-size:19px;font-weight:700;margin:20px 0 12px}
.pz-gh .g-ok{color:var(--ok)}.pz-gh .g-warn{color:#ff9d2e}.pz-gh .g-bad{color:var(--bad)}
.pz-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(270px,1fr));gap:14px}
.pz-card{position:relative;padding:16px 18px;border:1px solid var(--line2);border-radius:14px;background:linear-gradient(180deg,rgba(18,32,66,.92),rgba(10,20,44,.96))}
:root[data-theme=light] .pz-card{background:#fff}
.pz-head{display:flex;align-items:center;gap:12px;margin-bottom:10px}
.pz-head h3{font-size:16px;font-weight:700;line-height:1.4}
.pz-ic{display:grid;place-items:center;width:34px;height:34px;border-radius:9px;background:rgba(5,12,28,.8);border:1px solid var(--line2);flex:none}
.pz-ic svg{width:15px;height:15px;stroke:var(--gold);fill:none;stroke-width:1.8;stroke-linejoin:round}
.pz-badges{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:10px}
.pz-b{display:inline-block;padding:2px 12px;border-radius:999px;font-size:12px;font-weight:700;border:1px solid}
.pz-b.d1,.pz-b.semi{color:#ff9d2e;border-color:rgba(255,157,46,.6);background:rgba(255,157,46,.1)}
.pz-b.d2{color:var(--gold);border-color:rgba(242,204,75,.7);background:rgba(242,204,75,.16)}
.pz-b.d3,.pz-b.illegal{color:#ff6b78;border-color:rgba(239,91,107,.6);background:rgba(239,91,107,.1)}
.pz-b.legal{color:var(--ok);border-color:rgba(56,201,138,.6);background:rgba(56,201,138,.1)}
.pz-lbl{font-size:12px;font-weight:800;margin-top:4px}
.pz-card p{color:var(--mut);font-size:12.5px;line-height:1.8}
.pz-tools{display:flex;gap:2px;margin-top:8px;justify-content:flex-end}