/* «ليل» — هوية ثانية: OLED داكن، تباين عالٍ، كثافة معلومات، نيون هادئ. */
:root{
  --bg:#05070A; --surface:#0A0F15; --surface-2:#0F1620; --surface-3:#131C27;
  --ink:#E9F2ED; --muted:#8C9EA8; --faint:#5D6F7A;
  --accent:#4ADE80; --accent-2:#A3E635; --accent-soft:rgba(74,222,128,.12);
  --line:#1B2632; --line-2:#243140;
  --warn:#FBBF24; --warn-soft:rgba(251,191,36,.12);
  --radius:14px;
  --font-body:'IBM Plex Sans Arabic',system-ui,sans-serif;
  --font-head:'Space Grotesk','IBM Plex Sans Arabic',sans-serif;
  --font-mono:'JetBrains Mono',monospace;
}
*,*::before,*::after{box-sizing:border-box}
html,body{margin:0;padding:0;background:var(--bg)}
body{
  font-family:var(--font-body); color:var(--ink); font-size:14.5px; line-height:1.6;
  -webkit-font-smoothing:antialiased;

  background:
    radial-gradient(760px 420px at 88% -8%, rgba(74,222,128,.10), transparent 65%),
    radial-gradient(620px 380px at 2% 0%, rgba(56,189,248,.06), transparent 60%),
    var(--bg);
  min-height:100vh;
}
h1,h2,h3{font-family:var(--font-head); margin:0; line-height:1.3; letter-spacing:-.015em}
h2{font-size:23px; font-weight:600} h3{font-size:14px; font-weight:600; letter-spacing:.01em}
p{margin:0}
button{font-family:inherit; font-size:inherit; color:inherit; cursor:pointer}
.mono{font-family:var(--font-mono); font-size:12px; font-variant-numeric:tabular-nums}
.ltr{direction:ltr; unicode-bidi:embed}
.ico{display:inline-block; vertical-align:-3px; stroke-width:1.75; flex:0 0 auto}

/* الشريط الجانبي يتحوّل إلى شريط علوي */
.shell{display:flex; flex-direction:column; min-height:100vh}
.rail{
  position:sticky; top:0; z-index:30; display:flex; align-items:center; gap:22px; flex-wrap:wrap;
  padding:12px 26px; background:rgba(5,7,10,.86); backdrop-filter:blur(14px);
  border-bottom:1px solid var(--line);
}
.brand{display:flex; align-items:center; gap:10px}
.mark{
  width:30px; height:30px; border-radius:9px; display:grid; place-items:center;
  color:#04120A; background:linear-gradient(150deg,var(--accent-2),var(--accent));
  box-shadow:0 0 0 1px rgba(74,222,128,.35), 0 0 24px -6px rgba(74,222,128,.55);
}
.brand-text{display:flex; align-items:baseline; gap:8px}
.brand-text b{font-family:var(--font-head); font-size:15px; letter-spacing:-.01em}
.brand-text small{color:var(--faint); font-size:11px}
.nav{display:flex; align-items:center; gap:2px; padding:3px; border-radius:11px; background:var(--surface-2); border:1px solid var(--line)}
.nav-btn{
  display:flex; align-items:center; gap:7px; padding:7px 13px; border:1px solid transparent; border-radius:8px;
  background:transparent; color:var(--muted); font-size:13px; transition:all .18s ease;
}
.nav-btn:hover{color:var(--ink); background:var(--surface-3)}
.nav-btn.is-active{background:var(--accent-soft); color:var(--accent); border-color:rgba(74,222,128,.28)}
.rail-foot{margin-inline-start:auto; display:flex; gap:8px; align-items:center}
.schema{
  font-family:var(--font-mono); font-size:10.5px; color:var(--faint); direction:ltr;
  border:1px solid var(--line); border-radius:6px; padding:2px 7px;
}
.main{flex:1; min-width:0; display:flex; flex-direction:column}
.topbar{
  display:flex; align-items:center; justify-content:space-between; gap:18px; flex-wrap:wrap;
  padding:16px 26px 0;
}
.crumb{display:flex; align-items:center; gap:6px; color:var(--faint); font-size:12px; font-family:var(--font-mono); direction:rtl}
.crumb b{color:var(--muted); font-weight:500}
.tools{display:flex; align-items:center; gap:9px}
.search{
  display:flex; align-items:center; gap:8px; height:36px; padding:0 11px; min-width:300px;
  background:var(--surface); border:1px solid var(--line); border-radius:9px; color:var(--faint);
  transition:border-color .18s ease, box-shadow .18s ease;
}
.search:focus-within{border-color:rgba(74,222,128,.5); box-shadow:0 0 0 3px rgba(74,222,128,.1)}
.search input{
  border:0; outline:0; background:transparent; color:var(--ink); width:100%;
  font-family:inherit; font-size:13px;
}
.search input::placeholder{color:var(--faint)}
.btn{
  display:inline-flex; align-items:center; gap:7px; height:36px; padding:0 13px; border-radius:9px;
  border:1px solid var(--line-2); background:var(--surface-2); color:var(--ink);
  font-size:12.5px; font-weight:500; transition:all .16s ease;
}
.btn:hover{border-color:#33465A; background:var(--surface-3); transform:translateY(-1px)}
.btn-primary{
  background:linear-gradient(150deg,var(--accent-2),var(--accent)); color:#04120A; border-color:transparent; font-weight:700;
  box-shadow:0 6px 22px -10px rgba(74,222,128,.55);
}
.btn-primary:hover{box-shadow:0 10px 28px -10px rgba(74,222,128,.7)}
.btn-ghost{background:transparent}
.btn-quiet{background:transparent; border-color:transparent; color:var(--muted)}
.btn[disabled]{opacity:.4; cursor:not-allowed; transform:none}

.views{padding:20px 26px 44px}
.view{display:none}
.view.is-active{display:block; animation:fadeUp .4s cubic-bezier(.22,.8,.3,1) both}
@keyframes fadeUp{from{opacity:0; transform:translateY(8px)}to{opacity:1; transform:none}}

.stats{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:1px; margin-bottom:16px; background:var(--line); border:1px solid var(--line); border-radius:var(--radius); overflow:hidden}
.stat{
  background:linear-gradient(180deg,var(--surface-2),var(--surface)); padding:15px 17px;
  display:flex; flex-direction:column; gap:3px; transition:background .2s ease;
}
.stat:hover{background:var(--surface-3)}
.stat-k{font-family:var(--font-mono); font-size:10.5px; color:var(--faint); text-transform:uppercase; letter-spacing:.1em}
.stat-v{font-family:var(--font-head); font-size:27px; font-weight:700; line-height:1.25; letter-spacing:-.02em}
.stat-s{font-size:11.5px; color:var(--muted)}

.split{display:grid; grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr); gap:14px; align-items:start}
.panel{background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); overflow:hidden}
.panel-head{
  display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap;
  padding:13px 16px; border-bottom:1px solid var(--line); background:var(--surface-2);
}
.panel-head h3{display:flex; align-items:center; gap:8px}
.hint{font-family:var(--font-mono); font-size:10.5px; color:var(--faint)}
.eyebrow{
  display:block; font-family:var(--font-mono); font-size:10px; letter-spacing:.14em;
  text-transform:uppercase; color:var(--accent); margin-bottom:7px;
}

/* الشجرة */
.tree-wrap{padding:8px 10px 14px; max-height:min(64vh,640px); overflow:auto}
.tree,.children{list-style:none; margin:0; padding:0}
.children{margin-inline-start:16px; border-inline-start:1px solid var(--line); padding-inline-start:6px}
.node-row{
  display:flex; align-items:center; gap:8px; padding:6px 8px; border-radius:7px; cursor:pointer;
  border:1px solid transparent; transition:background .14s ease, border-color .14s ease;
}
.node-row:hover{background:var(--surface-2)}
.is-selected>.node-row{background:var(--accent-soft); border-color:rgba(74,222,128,.25)}
.is-selected>.node-row .node-label{color:var(--accent)}
.twisty{
  width:20px; height:20px; display:grid; place-items:center; border:1px solid var(--line-2);
  border-radius:5px; background:var(--surface-2); color:var(--muted); transition:transform .2s ease;
}
.twisty:hover{color:var(--accent); border-color:rgba(74,222,128,.4)}
.twisty.is-open{transform:rotate(180deg)}
.dot{width:20px; height:20px; display:grid; place-items:center}
.dot::after{content:''; width:4px; height:4px; border-radius:50%; background:#37505F}
.is-selected .dot::after{background:var(--accent); box-shadow:0 0 8px rgba(74,222,128,.8)}
.num{font-family:var(--font-mono); font-size:10.5px; color:var(--faint); min-width:38px; direction:ltr}
.node-label{flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:13.5px}
.node-code{
  font-family:var(--font-mono); font-size:10px; color:#6E8794; background:var(--surface-2);
  border:1px solid var(--line); border-radius:5px; padding:0 5px; max-width:170px;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.node-count{font-family:var(--font-mono); font-size:10.5px; color:var(--accent); min-width:26px; text-align:end}

/* التفاصيل */
.detail-panel .panel-head{align-items:flex-start; flex-direction:column; gap:5px; background:linear-gradient(180deg,var(--surface-3),var(--surface-2))}
.detail-title{display:flex; align-items:center; gap:10px; flex-wrap:wrap}
.detail-note{font-size:12.5px; color:var(--muted); margin-top:5px; line-height:1.7}
.chip{
  display:inline-flex; align-items:center; gap:5px; font-family:var(--font-mono); font-size:10px;
  padding:2px 8px; border-radius:5px; border:1px solid transparent; letter-spacing:.02em;
}
.chip-ok{background:rgba(74,222,128,.12); color:var(--accent); border-color:rgba(74,222,128,.28)}
.chip-muted{background:var(--surface-2); color:var(--muted); border-color:var(--line-2)}
.chip-warn{background:var(--warn-soft); color:var(--warn); border-color:rgba(251,191,36,.3)}
.kv{margin:0; padding:6px 16px 2px}
.kv-row{display:flex; justify-content:space-between; gap:12px; padding:8px 0; border-bottom:1px solid var(--line); font-size:12.5px}
.kv-row:last-child{border-bottom:0}
.kv dt{color:var(--faint)}
.kv dd{margin:0; text-align:end; max-width:64%; overflow:hidden; text-overflow:ellipsis; color:#D6E4DC}
.kv dd .mono{color:var(--accent-2)}
.detail-actions{display:flex; flex-wrap:wrap; gap:7px; padding:13px 16px 16px}
.detail-actions .btn{height:32px; font-size:12px; padding:0 10px}
.add-row{display:flex; gap:7px; padding:0 16px 16px}
.add-row input{
  flex:1; height:34px; padding:0 10px; border:1px solid var(--line-2); border-radius:7px;
  background:var(--surface-2); color:var(--ink); font-family:inherit; font-size:12.5px; outline:0;
}
.add-row input:focus{border-color:rgba(74,222,128,.55); box-shadow:0 0 0 3px rgba(74,222,128,.1)}
.add-row .btn{height:34px; font-size:12px}
.add-row[hidden]{display:none}

/* الجداول */
.table-wrap{overflow:auto}
.matrix{width:100%; border-collapse:collapse; font-size:12.5px}
.matrix th{
  text-align:start; font-family:var(--font-mono); font-weight:500; font-size:10px; text-transform:uppercase;
  letter-spacing:.1em; color:var(--faint); padding:9px 14px; background:var(--surface-2);
  border-bottom:1px solid var(--line); white-space:nowrap;
}
.matrix td{padding:8px 14px; border-bottom:1px solid var(--line); color:#CBD9D2}
.matrix tbody tr{transition:background .14s ease}
.matrix tbody tr:hover{background:var(--surface-2)}
.matrix .num-col{width:58px; color:var(--faint)}
.leaf-name{font-weight:400; color:var(--ink)}
.zero{color:#33454F}
.matrix.compact th,.matrix.compact td{padding:7px 9px; font-size:11px}
.legend{
  display:flex; align-items:center; gap:9px; flex-wrap:wrap; padding:12px 16px;
  border-top:1px solid var(--line); background:var(--surface-2);
}
.grid-2{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; align-items:start}
.foot-note{font-size:11.5px; color:var(--muted); padding:13px 16px; border-top:1px solid var(--line); line-height:1.75}
.import-bar{display:flex; gap:8px; flex-wrap:wrap; padding:13px 16px 6px}
.import-report{
  margin:0 16px 16px; padding:13px; border-radius:9px; background:var(--surface-2);
  border:1px solid var(--line-2); animation:fadeUp .3s ease both;
}
.rep-row{display:flex; justify-content:space-between; padding:3px 0; font-size:12.5px; color:var(--muted)}
.rep-row .accent{color:var(--warn)}
.import-report p{margin:8px 0 0; font-size:11.5px; color:var(--faint); line-height:1.7}

.toast{
  position:fixed; inset-block-end:22px; inset-inline-start:50%; transform:translate(50%,16px);
  background:var(--surface-3); color:var(--ink); border:1px solid rgba(74,222,128,.3);
  padding:10px 16px; border-radius:9px; font-size:12.5px; box-shadow:0 16px 40px -18px #000;
  opacity:0; pointer-events:none; transition:all .22s ease; z-index:60; max-width:min(92vw,520px);
}
.toast.is-on{opacity:1; transform:translate(50%,0)}

@media (max-width:1120px){
  .stats{grid-template-columns:repeat(2,minmax(0,1fr))}
  .split,.grid-2{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:820px){
  .rail{gap:12px; padding:10px 14px}
  .rail-foot{display:none}
  .nav{order:3; width:100%; overflow:auto}
  .topbar{padding:14px 14px 0}
  .search{min-width:0; flex:1}
  .views{padding:16px 14px 30px}
  .node-code{display:none}
}
@media (prefers-reduced-motion:reduce){*{animation:none!important; transition:none!important}}