:root{
  --bg:#050807;
  --panel:rgba(0,0,0,.35);
  --panel2:rgba(0,0,0,.22);
  --line:rgba(0,255,140,.18);
  --line2:rgba(0,255,140,.10);
  --txt:#e8fff2;
  --muted:rgba(232,255,242,.70);
  --green:#00ff8c;
  --green2:#00c56e;
  --shadow:0 0 28px rgba(0,255,140,.12);
  --shadow2:0 0 38px rgba(0,255,140,.18);
  --radius:18px;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  background: radial-gradient(1200px 700px at 20% 25%, rgba(0,255,140,.14), transparent 60%),
              radial-gradient(900px 600px at 80% 75%, rgba(0,255,140,.10), transparent 55%),
              var(--bg);
  color:var(--txt);
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, "Noto Kufi Arabic", "Noto Sans Arabic", Arial, sans-serif;
  overflow-x:hidden;
}

.latin{font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; letter-spacing:.4px}

.bg-glow{
  position:fixed; inset:-40px;
  background: radial-gradient(700px 450px at 30% 60%, rgba(0,255,140,.12), transparent 65%);
  filter: blur(18px);
  pointer-events:none;
  z-index:0;
}

.topbar{
  position:sticky; top:0; z-index:10;
  display:flex; align-items:center; justify-content:space-between;
  gap:14px;
  padding:12px 14px;
  background: rgba(0,0,0,.55);
  backdrop-filter: blur(10px);
  border-bottom:1px solid var(--line2);
}

.brand{display:flex; align-items:center; gap:12px; min-width:0}
.mark{
  width:44px; height:44px; border-radius:14px;
  display:grid; place-items:center;
  border:1px solid var(--line);
  background: linear-gradient(180deg, rgba(0,255,140,.14), rgba(0,0,0,.35));
  box-shadow: var(--shadow);
  font-weight:900;
  color:var(--green);
}
.brandText{min-width:0}
.brandTitle{font-weight:900; letter-spacing:.8px; font-size:14px; text-shadow:0 0 18px rgba(0,255,140,.25)}
.brandSub{font-size:12px; opacity:.75; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}

.topActions{display:flex; gap:10px; align-items:center; flex-wrap:wrap; justify-content:flex-end}
.pill{
  white-space:nowrap;
  display:inline-flex; align-items:center; gap:8px;
  padding:10px 12px;
  border-radius:999px;
  border:1px solid var(--line);
  background: rgba(0,0,0,.25);
  color:var(--txt);
  text-decoration:none;
  cursor:pointer;
  box-shadow: 0 0 22px rgba(0,255,140,.10);
}
.pill:hover{box-shadow: var(--shadow2)}
.icon{opacity:.9}

.container{max-width:980px; margin:0 auto; padding:18px 12px 40px; position:relative; z-index:1}

.hero{
  padding:18px 14px;
  border:1px solid var(--line);
  border-radius: var(--radius);
  background: linear-gradient(180deg, rgba(0,255,140,.10), rgba(0,0,0,.25));
  box-shadow: var(--shadow);
}

.heroBadge{
  display:inline-flex;
  border:1px solid var(--line);
  background: rgba(0,255,140,.08);
  padding:6px 10px;
  border-radius:999px;
  font-size:12px;
  opacity:.92;
}
.heroTitle{
  margin:12px 0 8px;
  font-size:38px;
  line-height:1.15;
  text-shadow: 0 0 26px rgba(0,255,140,.35);
}
.heroSub{margin:0; opacity:.80; line-height:1.8}
.disclaimer{
  margin:10px 0 0;
  opacity:.75;
  font-size:12px;
  line-height:1.7;
  border-right:3px solid rgba(0,255,140,.32);
  padding:8px 10px;
  border-radius:14px;
  background: rgba(0,0,0,.18);
}

.quickCards{display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-top:14px}
.card{
  border:1px solid var(--line);
  border-radius: var(--radius);
  background: rgba(0,0,0,.28);
  padding:14px;
  box-shadow: 0 0 22px rgba(0,255,140,.08) inset;
}
.cardNum{font-size:34px; font-weight:900; color:var(--green); text-shadow:0 0 18px rgba(0,255,140,.35)}
.cardLbl{opacity:.8}

.tools{margin-top:14px; display:flex; flex-direction:column; gap:10px}
.toolRow{display:flex; gap:10px; flex-wrap:wrap}
.searchWrap{display:flex; gap:10px; width:100%}
.search{
  flex:1;
  padding:12px 14px;
  border-radius: 999px;
  border:1px solid var(--line);
  background: rgba(0,0,0,.25);
  color:var(--txt);
  outline:none;
}
.search::placeholder{color:rgba(232,255,242,.55)}
.btn{
  padding:12px 14px;
  border-radius: 999px;
  border:1px solid var(--line);
  background: rgba(0,255,140,.10);
  color:var(--txt);
  cursor:pointer;
  font-weight:800;
}
.btn:hover{box-shadow: var(--shadow2)}
.btn.ghost{background: rgba(0,0,0,.20)}
.select{
  padding:12px 14px;
  border-radius: 999px;
  border:1px solid var(--line);
  background: rgba(0,0,0,.25);
  color:var(--txt);
  min-width: 210px;
}
.chk{display:flex; align-items:center; gap:10px; padding:10px 12px; border:1px solid var(--line); border-radius:999px; background: rgba(0,0,0,.22)}
.chk input{accent-color: var(--green)}
.actionsRow{justify-content:space-between}

.cardWide{
  margin-top:14px;
  border:1px solid var(--line);
  border-radius: var(--radius);
  background: rgba(0,0,0,.22);
  padding:14px;
  box-shadow: 0 0 22px rgba(0,255,140,.08) inset;
}

.secTitle{margin:0 0 10px; font-size:20px}
.flow{margin:0; padding:0 18px; line-height:1.9; opacity:.9}
.flow li{margin:6px 0}

.content{margin-top:16px}
.contentHead{display:flex; justify-content:space-between; gap:10px; align-items:flex-end; flex-wrap:wrap; padding:0 2px}
.muted{opacity:.75; font-size:12px}

.catSection{margin-top:14px}
.catHeader{
  border:1px solid var(--line);
  border-radius: var(--radius);
  background: rgba(0,0,0,.18);
  padding:14px;
  box-shadow: 0 0 18px rgba(0,255,140,.08) inset;
}
.catTitle{margin:0; font-size:18px; font-weight:900}
.catDesc{margin-top:6px; opacity:.8; font-size:13px; line-height:1.8}

.accWrap{margin-top:10px; display:flex; flex-direction:column; gap:10px}
details.acc{
  border:1px solid var(--line2);
  border-radius: 16px;
  background: rgba(0,0,0,.26);
  overflow:hidden;
}
details.acc[open]{box-shadow: var(--shadow)}
summary.accSum{
  list-style:none;
  cursor:pointer;
  padding:12px;
  display:flex;
  justify-content:space-between;
  gap:10px;
  align-items:flex-start;
}
summary.accSum::-webkit-details-marker{display:none}
.accLeft{display:flex; flex-direction:column; gap:7px; min-width:0}
.accTitle{font-weight:900; font-size:14px; line-height:1.4}
.accSyntax{
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  font-size:12px;
  background: rgba(0,255,140,.07);
  border:1px solid rgba(0,255,140,.14);
  padding:8px 10px;
  border-radius:12px;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  max-width: 72vw;
}
.badges{display:flex; gap:8px; align-items:center}
.badge{
  font-size:11px;
  padding:6px 10px;
  border-radius:999px;
  border:1px solid rgba(0,255,140,.22);
  background: rgba(0,255,140,.08);
  white-space:nowrap;
}
.iconBtn{
  width:38px; height:38px;
  display:grid; place-items:center;
  border-radius:12px;
  border:1px solid rgba(0,255,140,.30);
  background: rgba(0,255,140,.14);
  color: #eafff5;
  cursor:pointer;
}
.iconBtn:hover{box-shadow:0 0 26px rgba(0,255,140,.22)}
.iconBtn:hover{box-shadow: var(--shadow2)}
.accBody{
  border-top:1px solid rgba(0,255,140,.12);
  padding:12px;
}
.p{
  margin:0;
  opacity:.9;
  line-height:1.9;
  font-size:13px;
}
.note{margin-top:10px; opacity:.82}
.ex{
  margin-top:12px;
  padding:10px;
  border-radius:14px;
  border:1px solid rgba(0,255,140,.14);
  background: rgba(0,0,0,.25);
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  font-size:12px;
  overflow:auto;
}

.cheats{margin-top:16px}
.cheatGrid{display:grid; grid-template-columns:1fr 1fr; gap:10px}
.cheatItem{
  border:1px solid rgba(0,255,140,.16);
  background: rgba(0,0,0,.22);
  border-radius: 16px;
  padding:12px;
}
.cheatItem h3{margin:0 0 8px; font-size:14px}
.cheatItem code{
  display:block;
  padding:10px;
  border-radius:14px;
  border:1px solid rgba(0,255,140,.14);
  background: rgba(0,0,0,.26);
  overflow:auto;
}

.footer{margin-top:20px; opacity:.75; text-align:center; font-size:12px}
.footerLine{padding:14px 8px; border-top:1px solid rgba(0,255,140,.10)}

@media (max-width:760px){
  .heroTitle{font-size:30px}
  .quickCards{grid-template-columns:1fr 1fr}
  .select{min-width: 48%}
  .actionsRow{gap:10px}
  .cheatGrid{grid-template-columns:1fr}
  .accSyntax{max-width: 78vw}
  .topbar{flex-direction:column; align-items:stretch}
  .topActions{justify-content:space-between}
}

.introText{margin:0; opacity:.9; line-height:1.95; font-size:13px; white-space:pre-line}
.introPoints{margin-top:10px; display:flex; flex-wrap:wrap; gap:10px}
.point{
  border:1px solid rgba(0,255,140,.16);
  background: rgba(0,0,0,.18);
  border-radius: 999px;
  padding:10px 12px;
  font-size:12px;
  opacity:.9;
}
.footerLinks{display:flex; justify-content:center; gap:10px; flex-wrap:wrap; margin-bottom:10px}
.footerLinks a{
  display:inline-flex; align-items:center; gap:8px;
  padding:10px 12px;
  border-radius:999px;
  border:1px solid rgba(0,255,140,.18);
  background: rgba(0,0,0,.18);
  color:rgba(232,255,242,.92);
  text-decoration:none;
}
.footerLinks a:hover{box-shadow:0 0 26px rgba(0,255,140,.16)}

/* Category accordion */
details.catAcc{
  border:1px solid rgba(0,255,140,.18);
  border-radius: var(--radius);
  background: rgba(0,0,0,.18);
  overflow:hidden;
}
details.catAcc[open]{box-shadow: var(--shadow)}
summary.catSum{
  list-style:none;
  cursor:pointer;
  padding:14px;
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:10px;
}
summary.catSum::-webkit-details-marker{display:none}
.catSumLeft{display:flex; flex-direction:column; gap:6px; min-width:0}
.catSumTitle{font-weight:900; font-size:18px}
.catSumDesc{opacity:.78; font-size:13px; line-height:1.7}
.catChevron{
  width:36px; height:36px;
  border-radius:12px;
  border:1px solid rgba(0,255,140,.22);
  background: rgba(0,0,0,.22);
  display:grid; place-items:center;
  flex:0 0 auto;
}
details.catAcc[open] .catChevron{transform:rotate(180deg)}
.catInner{padding:0 14px 14px}

.sourcesList{display:flex; flex-wrap:wrap; gap:10px}
.sourcesList a{
  display:inline-flex; align-items:center; gap:8px;
  padding:10px 12px;
  border-radius:999px;
  border:1px solid rgba(0,255,140,.18);
  background: rgba(0,0,0,.18);
  color:rgba(232,255,242,.92);
  text-decoration:none;
}
.sourcesList a:hover{box-shadow:0 0 26px rgba(0,255,140,.16)}

/* Playbook accordion */
details.playAcc{
  border:1px solid rgba(0,255,140,.18);
  border-radius: var(--radius);
  background: rgba(0,0,0,.18);
  overflow:hidden;
}
details.playAcc[open]{box-shadow: var(--shadow)}
summary.playSum{
  list-style:none;
  cursor:pointer;
  padding:14px;
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:10px;
}
summary.playSum::-webkit-details-marker{display:none}
.playLeft{display:flex; flex-direction:column; gap:6px; min-width:0}
.playBody{padding:0 14px 14px}
.playStep{
  margin-top:10px;
  border:1px solid rgba(0,255,140,.14);
  background: rgba(0,0,0,.22);
  border-radius:16px;
  padding:12px;
}
.playStepHead{display:flex; justify-content:space-between; gap:10px; flex-wrap:wrap}
.playStepTitle{font-weight:900}
.playStepWhy{margin-top:8px; opacity:.9; line-height:1.9; font-size:13px}
.playCmds{margin-top:10px; display:flex; flex-direction:column; gap:8px}
.playCmd{
  display:flex; justify-content:space-between; gap:10px; align-items:center;
  border:1px solid rgba(0,255,140,.12);
  background: rgba(0,0,0,.24);
  border-radius:14px;
  padding:10px;
}
.playCmd code{
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  font-size:12px;
  opacity:.95;
  overflow:auto;
}


.markImg{width:100%; height:100%; object-fit:contain; padding:6px; filter: drop-shadow(0 0 10px rgba(0,255,140,.35));}

/* Builder + Glossary */
.builderGrid{
  display:grid;
  grid-template-columns: repeat(12, 1fr);
  gap:12px;
  margin-bottom:14px;
}
.builderField{
  grid-column: span 6;
  border:1px solid rgba(0,255,140,.14);
  background: rgba(0,0,0,.22);
  border-radius:16px;
  padding:12px;
}
.builderField label{display:block; font-weight:800; margin-bottom:8px}
.builderField .hint{font-size:12px; opacity:.75; margin-top:6px; line-height:1.7}
.builderField input, .builderField select{
  width:100%;
  border-radius:12px;
  border:1px solid rgba(0,255,140,.18);
  background: rgba(0,0,0,.35);
  color: inherit;
  padding:10px 12px;
  outline:none;
}
.builderOut{
  border:1px solid rgba(0,255,140,.14);
  background: rgba(0,0,0,.22);
  border-radius:16px;
  padding:12px;
}
.builderHead{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  margin-bottom:10px;
}
.codeBlock{
  margin:0;
  border-radius:14px;
  border:1px solid rgba(0,255,140,.14);
  background: rgba(0,0,0,.35);
  padding:12px;
  overflow:auto;
}
@media (max-width: 720px){
  .builderField{grid-column: span 12;}
}

/* Glossary controls + accordion (pro) */
.glossaryControls{margin: 6px 0 12px;}
.gControls{
  display:flex;
  gap:10px;
  align-items:center;
  flex-wrap:wrap;
}
.gSearch{
  flex: 1 1 260px;
  background: rgba(0,0,0,.35);
  border: 1px solid rgba(0,255,140,.18);
  color: rgba(255,255,255,.92);
  padding: 10px 12px;
  border-radius: 12px;
  outline: none;
}
.gSearch::placeholder{color: rgba(255,255,255,.55);}
.gSelect{
  flex: 0 0 auto;
  background: rgba(0,0,0,.35);
  border: 1px solid rgba(0,255,140,.18);
  color: rgba(255,255,255,.92);
  padding: 10px 12px;
  border-radius: 12px;
  outline:none;
}
.gCount{
  font-size: 12px;
  opacity: .75;
  padding: 0 4px;
}

.gCat{
  border: 1px solid rgba(0,255,140,.14);
  background: rgba(0,0,0,.20);
  border-radius: 16px;
  overflow: hidden;
}
/* Fix: glossary categories were rendering as many narrow columns on mobile
   because #glossaryGrid still has the legacy .glossaryGrid (CSS grid) class.
   Make each category span the full row. */
.glossaryGrid .gCat{grid-column: 1 / -1;}
.gCat + .gCat{margin-top: 10px;}
.gCatSum{
  cursor: pointer;
  list-style: none;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding: 12px 14px;
}
.gCatSum::-webkit-details-marker{display:none;}
.gCatName{font-weight: 900;}
.gCatMeta{
  font-size: 12px;
  opacity: .8;
  border: 1px solid rgba(0,255,140,.18);
  padding: 3px 8px;
  border-radius: 999px;
  background: rgba(0,255,140,.06);
}
.gCatBody{
  border-top: 1px solid rgba(0,255,140,.10);
  padding: 10px 12px 12px;
  display:flex;
  flex-direction:column;
  gap:10px;
}

.gTerm{
  border: 1px solid rgba(0,255,140,.10);
  background: rgba(0,0,0,.18);
  border-radius: 14px;
  overflow:hidden;
}
.gTermSum{
  cursor:pointer;
  list-style:none;
  padding: 10px 12px;
  font-weight: 800;
  line-height: 1.25;
  white-space: normal;
  word-break: normal;
  overflow-wrap: anywhere;
}
.gTermSum code{white-space: nowrap;}
.gTermSum::-webkit-details-marker{display:none;}
.gTermDef{
  border-top: 1px dashed rgba(0,255,140,.12);
  padding: 10px 12px 12px;
  opacity: .92;
  line-height: 1.9;
  font-size: 13px;
}

/* keep legacy grid for fallback cards */
.glossaryGrid{
  display:grid;
  grid-template-columns: repeat(12, 1fr);
  gap:12px;
}

/* New glossary layout (stacked accordions) */
.glossaryCats{
  display:flex;
  flex-direction: column;
  gap: 12px;
}
.glossItem{
  grid-column: span 6;
  border:1px solid rgba(0,255,140,.14);
  background: rgba(0,0,0,.22);
  border-radius:16px;
  padding:12px;
}
.glossTerm{font-weight:900}
.glossDef{margin-top:6px; opacity:.9; line-height:1.9; font-size:13px}
@media (max-width: 720px){
  .glossItem{grid-column: span 12;}
}

/* Bigger Command Builder */
#builder .playBody{padding:16px}
.builderField label{font-size:14px}
.builderField input, .builderField select{font-size:14px; padding:12px 14px}
.builderField{padding:14px}
.builderOut{padding:14px}
#builtExplain{font-size:13px; line-height:1.9}
.codeBlock code{font-size:13px}
.builderGrid{gap:14px}
@media (min-width: 900px){
  /* make form feel wider */
  .builderField{grid-column: span 4;}
}
@media (max-width: 899px){
  .builderField{grid-column: span 12;}
}

/* Builder upgrades */
.builderExtras{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:14px}
.pillBtn{display:inline-flex;align-items:center;gap:8px;padding:10px 12px;border-radius:999px;border:1px solid rgba(0,255,140,.22);background: rgba(0,0,0,.22);color:rgba(232,255,242,.92);cursor:pointer}
.pillBtn:hover{box-shadow:0 0 26px rgba(0,255,140,.16)}
.toggleRow{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:16px;border:1px solid rgba(0,255,140,.14);background: rgba(0,0,0,.22)}
.toggleRow input{accent-color: rgb(0,255,140)}
.explainBox{margin-top:12px;border:1px solid rgba(0,255,140,.14);background: rgba(0,0,0,.22);border-radius:16px;padding:12px;width:100%}
.explainBox .secTitle{font-size:14px}
.explainList{margin-top:8px;display:flex;flex-direction:column;gap:8px}
.explainItem{border:1px solid rgba(0,255,140,.12);background: rgba(0,0,0,.24);border-radius:14px;padding:10px;font-size:13px;line-height:1.9}
.smallWarn{opacity:.85;font-size:12px;line-height:1.8;border:1px solid rgba(0,255,140,.14);background: rgba(0,255,140,.08);border-radius:14px;padding:10px 12px;width:100%}

/* Builder issues (professional rules engine) */
.issuesBox{border:1px solid rgba(0,255,140,.14);background: rgba(0,0,0,.22);border-radius:18px;padding:12px 14px;width:100%}
.issuesList{display:flex;flex-direction:column;gap:8px;margin-top:8px}
.issue{display:flex;gap:10px;align-items:flex-start;padding:10px 12px;border-radius:14px;border:1px solid rgba(255,255,255,.08);background: rgba(0,0,0,.18);line-height:1.8}
.issue .tag{font-weight:900;font-size:12px;padding:4px 10px;border-radius:999px;border:1px solid rgba(0,255,140,.18);background: rgba(0,255,140,.10);white-space:nowrap}
.issue .msg{font-size:13px;opacity:.92}
.issue.warn .tag{border-color: rgba(255, 214, 0, .25);background: rgba(255, 214, 0, .10)}
.issue.warn{border-color: rgba(255, 214, 0, .18)}
.issue.error .tag{border-color: rgba(255, 80, 80, .28);background: rgba(255, 80, 80, .10)}
.issue.error{border-color: rgba(255, 80, 80, .22)}

/* ==========================================================
   Glossary renderer (JS v2) — ensure readable summary text
   The glossary uses <details>/<summary>. Without explicit
   styling, some browsers render summary text in dark colors,
   making items look "empty" on the dark theme.
   ========================================================== */

.gCat{border:1px solid var(--border);background:rgba(0,0,0,.28);border-radius:18px;overflow:hidden;box-shadow:0 0 0 1px rgba(0,255,120,.06) inset;}
.gCat[open]{box-shadow:0 0 0 1px rgba(0,255,120,.14) inset, 0 10px 40px rgba(0,255,120,.06);}

.gCatSum{cursor:pointer;user-select:none;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 14px;border-bottom:1px solid rgba(255,255,255,.06);}
.gCatSum::-webkit-details-marker{display:none;}
.gCatTitle{font-weight:800;color:var(--text);letter-spacing:.2px;}
.gCatCount{font-size:12px;color:var(--muted);padding:6px 10px;border:1px solid rgba(0,255,120,.18);border-radius:999px;background:rgba(0,255,120,.06);}

.gCatBody{padding:12px 12px 14px;}

.gTerm{border:1px solid rgba(255,255,255,.08);border-radius:14px;background:rgba(0,0,0,.22);overflow:hidden;}
.gTerm + .gTerm{margin-top:10px;}
.gTermSum{cursor:pointer;user-select:none;display:flex;align-items:center;justify-content:space-between;gap:10px;padding:12px 12px;}
.gTermSum::-webkit-details-marker{display:none;}
.gTermTerm{font-weight:800;color:var(--text);}
.gTermMeta{display:flex;align-items:center;gap:8px;flex-wrap:wrap;justify-content:flex-end;}
.gBadge{font-size:11px;color:var(--muted);padding:5px 9px;border:1px solid rgba(255,255,255,.10);border-radius:999px;background:rgba(255,255,255,.03);}

.gTermDef{padding:0 12px 12px;color:rgba(255,255,255,.86);font-size:13px;line-height:1.75;}
.gTermDef strong{color:var(--text);}

@media (min-width: 900px){
  .gCatBody{padding:14px 14px 16px;}
  .gCatSum{padding:16px 16px;}
}


@media (max-width: 720px){
  .badges{flex-wrap:wrap}
  .codeInline{max-width: 86vw}
}