:root{
    --bg:#0D0015;
    --bg-2:#140020;
    --panel: rgba(255,255,255,.05);
    --panel-2: rgba(255,255,255,.08);
    --line: rgba(255,255,255,.10);
    --text:#FFFFFF;
    --muted: rgba(255,255,255,.75);
    --muted-2: rgba(255,255,255,.55);
    --neon:#00FF88;
    --neon-2:#00DDFF;
    --purple:#A855F7;
    --hot:#FF0066;
    --shadow: 0 20px 50px rgba(0,0,0,.60);
    --glow: 0 0 30px rgba(0,255,136,.15);
    --r: 18px;
    --r-sm: 14px;
    --content: 1120px;
    --sidebar: 320px;
  }
  
  *{box-sizing:border-box}
  html,body{height:100%}
  body{
    margin:0;
    font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Noto Sans Arabic", "Noto Kufi Arabic", Arial, sans-serif;
    color:var(--text);
    background:
      radial-gradient(800px 500px at 20% 20%, rgba(168,85,247,.18), transparent 50%),
      radial-gradient(600px 400px at 80% 10%, rgba(0,255,136,.12), transparent 45%),
      radial-gradient(1000px 600px at 60% 100%, rgba(255,0,102,.10), transparent 50%),
      linear-gradient(180deg, var(--bg), var(--bg-2));
    line-height:1.8;
  }
  
  a{color:inherit; text-decoration:none}
  img{max-width:100%; height:auto}
  
  .skip{
    position:absolute; top:-60px; right:12px;
    background:var(--neon); color:#0D0015;
    padding:10px 12px; border-radius:12px;
    transition:top .2s ease;
    z-index:60;
    font-weight:700;
  }
  .skip:focus{top:12px; outline:none}
  
  .shell{
    max-width: calc(var(--content) + var(--sidebar) + 44px);
    margin: 0 auto;
    padding: 18px;
    display:grid;
    grid-template-columns: var(--sidebar) 1fr;
    gap:16px;
    align-items:start;
  }
  
  .sidebar{
    position: sticky;
    top: 18px;
    border:1px solid rgba(0,255,136,.15);
    background: rgba(20,0,32,.80);
    backdrop-filter: blur(12px);
    border-radius: var(--r);
    box-shadow: var(--shadow), var(--glow);
    overflow:hidden;
  }
  .side-top{
    padding:16px;
    background: linear-gradient(135deg, rgba(168,85,247,.15), rgba(0,255,136,.08));
    border-bottom:1px solid rgba(0,255,136,.12);
  }
  .brand{
    display:flex; align-items:center; gap:12px;
  }
  .brand-mark{
    width:44px; height:44px; border-radius:16px;
    display:grid; place-items:center;
    border:2px solid var(--neon);
    background: rgba(0,255,136,.10);
    box-shadow: 0 0 20px rgba(0,255,136,.30), inset 0 0 15px rgba(0,255,136,.15);
  }
  .brand-title{
    font-weight:900; 
    letter-spacing:.5px;
    text-transform: uppercase;
    background: linear-gradient(90deg, var(--neon), var(--neon-2));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
  }
  .brand-sub{font-size:12px; color:var(--muted-2); margin-top:2px}
  
  .side-nav{
    padding:10px 10px 14px;
  }
  .side-nav a{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:10px;
    padding:11px 12px;
    border-radius: 14px;
    color: var(--muted);
    border:1px solid transparent;
    transition: all .2s ease;
  }
  .side-nav a:hover{
    color: var(--neon);
    background: rgba(0,255,136,.06);
    border-color: rgba(0,255,136,.20);
    text-shadow: 0 0 10px rgba(0,255,136,.50);
  }
  .side-nav a[aria-current="page"]{
    color: var(--neon);
    background: rgba(0,255,136,.10);
    border-color: rgba(0,255,136,.35);
    box-shadow: 0 0 15px rgba(0,255,136,.15);
  }
  .pill{
    font-size:11px;
    padding:3px 10px;
    border-radius: 999px;
    border:1px solid var(--hot);
    color: var(--hot);
    background: rgba(255,0,102,.12);
    font-weight:700;
    text-shadow: 0 0 8px rgba(255,0,102,.50);
  }
  
  .side-box{
    padding:14px 16px;
    border-top:1px solid rgba(0,255,136,.10);
    background: rgba(0,0,0,.20);
  }
  .side-box h3{
    margin:0 0 8px; 
    font-size:13px; 
    letter-spacing:1px;
    text-transform: uppercase;
    color: var(--neon-2);
  }
  .side-box p{margin:6px 0 0; color:var(--muted); font-size:13px}
  .facts{
    display:grid;
    grid-template-columns: 1fr 1fr;
    gap:10px;
    margin-top:10px;
  }
  .fact{
    border:1px solid rgba(168,85,247,.25);
    background: linear-gradient(135deg, rgba(168,85,247,.12), rgba(0,0,0,.20));
    border-radius: 14px;
    padding:10px 10px;
  }
  .fact b{
    display:block; 
    font-size:14px; 
    color:var(--neon);
    text-shadow: 0 0 10px rgba(0,255,136,.40);
  }
  .fact span{display:block; font-size:12px; color:var(--muted-2); margin-top:2px}
  
  .page{
    border:1px solid rgba(0,255,136,.12);
    background: rgba(20,0,32,.75);
    backdrop-filter: blur(12px);
    border-radius: var(--r);
    box-shadow: var(--shadow);
    overflow:hidden;
  }
  
  .pagehead{
    padding:18px 18px 14px;
    border-bottom:1px solid rgba(0,255,136,.10);
    background: linear-gradient(180deg, rgba(168,85,247,.08), transparent);
  }
  .crumbs{font-size:12px; color:var(--muted-2)}
  .crumbs a{color:var(--purple)}
  .crumbs a:hover{color:var(--neon)}
  h1{
    margin:10px 0 0;
    font-size: clamp(26px, 3.3vw, 40px);
    line-height:1.25;
    letter-spacing:1px;
    text-transform: uppercase;
    background: linear-gradient(90deg, #FFF, var(--neon), var(--neon-2));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    text-shadow: none;
  }
  .subtitle{margin:10px 0 0; color:var(--muted); font-size:15px}
  
  .pagebody{padding:16px 18px 18px}
  
  .toolbar{
    display:flex;
    flex-wrap:wrap;
    gap:10px;
    margin: 12px 0 14px;
  }
  .btn{
    display:inline-flex; align-items:center; justify-content:center;
    gap:8px;
    padding:10px 14px;
    border-radius: 14px;
    font-weight:800;
    text-transform: uppercase;
    letter-spacing:.5px;
    font-size:13px;
    border:1px solid rgba(255,255,255,.12);
    background: rgba(255,255,255,.05);
    color:var(--text);
    transition: all .2s ease;
  }
  .btn-primary{
    border-color: var(--neon);
    background: linear-gradient(135deg, rgba(0,255,136,.20), rgba(0,221,255,.10));
    color: var(--neon);
    box-shadow: 0 0 20px rgba(0,255,136,.20);
  }
  .btn-primary:hover{
    background: linear-gradient(135deg, rgba(0,255,136,.35), rgba(0,221,255,.20));
    box-shadow: 0 0 30px rgba(0,255,136,.35);
  }
  .btn-danger{
    border-color: var(--hot);
    background: rgba(255,0,102,.15);
    color: var(--hot);
  }
  .btn:hover{transform: translateY(-2px)}
  .btn:active{transform: translateY(0px)}
  
  .block{
    border:1px solid rgba(168,85,247,.18);
    background: rgba(0,0,0,.25);
    border-radius: var(--r);
    padding:16px;
    margin-top:14px;
  }
  .block h2{
    margin:0 0 10px; 
    font-size:18px; 
    color:var(--neon-2);
    text-transform: uppercase;
    letter-spacing:.5px;
  }
  .block h3{
    margin:18px 0 8px; 
    font-size:15px; 
    color:var(--purple);
  }
  .block p{margin:10px 0; color:var(--muted)}
  .block ul{margin:10px 0 0; padding:0 18px; color:var(--muted)}
  .block li{margin:6px 0}
  .block li::marker{color:var(--neon)}
  
  .split{
    display:grid;
    grid-template-columns: 1fr 1fr;
    gap:12px;
  }
  
  .callout{
    border:1px solid rgba(255,0,102,.30);
    background: linear-gradient(135deg, rgba(255,0,102,.12), rgba(168,85,247,.08));
    border-radius: var(--r);
    padding:14px 14px;
    color: var(--muted);
  }
  .callout b{color:var(--hot); text-shadow: 0 0 10px rgba(255,0,102,.40)}
  
  .table-wrap{
    overflow:auto;
    border-radius: var(--r);
    border:1px solid rgba(0,255,136,.15);
    background: rgba(0,0,0,.30);
  }
  table{border-collapse:collapse; width:100%; min-width: 720px}
  th,td{padding:12px 12px; border-bottom:1px solid rgba(255,255,255,.08); text-align:right; vertical-align:top}
  th{
    font-size:12px; 
    color:var(--neon); 
    font-weight:800; 
    background: rgba(0,255,136,.06);
    text-transform: uppercase;
    letter-spacing:.5px;
  }
  tr:hover td{background: rgba(0,255,136,.04)}
  
  details{
    border:1px solid rgba(168,85,247,.20);
    border-radius: var(--r-sm);
    background: rgba(168,85,247,.06);
    padding:12px 14px;
  }
  details + details{margin-top:10px}
  summary{
    cursor:pointer; 
    font-weight:900; 
    color:var(--neon-2);
    text-transform: uppercase;
    letter-spacing:.3px;
  }
  summary::marker{color:var(--purple)}
  details p{margin:10px 0 0; color:var(--muted)}
  
  .footer{
    margin-top:16px;
    border-top:1px solid rgba(0,255,136,.10);
    background: rgba(0,0,0,.25);
    padding:14px 18px;
    color: var(--muted-2);
    font-size:13px;
    display:flex;
    flex-wrap:wrap;
    align-items:center;
    justify-content:space-between;
    gap:12px;
  }
  .footer a{color:var(--muted); transition: color .2s}
  .footer a:hover{color:var(--neon); text-shadow: 0 0 10px rgba(0,255,136,.40)}
  .footer-links{display:flex; flex-wrap:wrap; gap:10px}
  .footer-links a{padding:6px 10px; border-radius:999px; border:1px solid transparent}
  .footer-links a:hover{border-color:rgba(0,255,136,.25); background:rgba(0,255,136,.08)}
  
  .sr-only{
    position:absolute;
    width:1px;
    height:1px;
    padding:0;
    margin:-1px;
    overflow:hidden;
    clip:rect(0,0,0,0);
    white-space:nowrap;
    border:0;
  }
  
  @media (max-width: 980px){
    .shell{
      grid-template-columns: 1fr;
      max-width: var(--content);
    }
    .sidebar{position:relative; top:auto}
    .facts{grid-template-columns: 1fr 1fr}
  }
  @media (max-width: 720px){
    table{min-width: 560px}
    .split{grid-template-columns: 1fr}
    .facts{grid-template-columns: 1fr}
  }