/* DrSchool - modern white responsive */
:root{
  --bg:#f1f3f6;
  --text:#0f172a;
  --muted:#475569;
  --card:#ffffff;
  --border:#e5e7eb;
  --soft:#ffffff;
  --shadow:0 6px 18px rgba(15,23,42,.06);
  --radius:18px;
  --fontScale:1;

  /* Accent (palette) */
  --accent:#04AA6D;          /* default = green */
  --accentSoft:rgba(4,170,109,.12);
  --accentBorder:rgba(4,170,109,.25);
  --accentBorderStrong:rgba(4,170,109,.35);
  --accentShadow:rgba(4,170,109,.20);
  --accentRing:rgba(4,170,109,.12);
  --accentFocusBorder:rgba(4,170,109,.55);
}

/* Accent palettes (user can switch) */
:root[data-accent="green"]{
  --accent:#04AA6D;
  --accentSoft:rgba(4,170,109,.12);
  --accentBorder:rgba(4,170,109,.25);
  --accentBorderStrong:rgba(4,170,109,.35);
  --accentShadow:rgba(4,170,109,.20);
  --accentRing:rgba(4,170,109,.12);
  --accentFocusBorder:rgba(4,170,109,.55);
}
:root[data-accent="blue"]{
  --accent:#2563eb;
  --accentSoft:rgba(37,99,235,.12);
  --accentBorder:rgba(37,99,235,.25);
  --accentBorderStrong:rgba(37,99,235,.35);
  --accentShadow:rgba(37,99,235,.20);
  --accentRing:rgba(37,99,235,.12);
  --accentFocusBorder:rgba(37,99,235,.55);
}
:root[data-accent="purple"]{
  --accent:#7c3aed;
  --accentSoft:rgba(124,58,237,.12);
  --accentBorder:rgba(124,58,237,.25);
  --accentBorderStrong:rgba(124,58,237,.35);
  --accentShadow:rgba(124,58,237,.20);
  --accentRing:rgba(124,58,237,.12);
  --accentFocusBorder:rgba(124,58,237,.55);
}
:root[data-accent="teal"]{
  --accent:#0d9488;
  --accentSoft:rgba(13,148,136,.12);
  --accentBorder:rgba(13,148,136,.25);
  --accentBorderStrong:rgba(13,148,136,.35);
  --accentShadow:rgba(13,148,136,.20);
  --accentRing:rgba(13,148,136,.12);
  --accentFocusBorder:rgba(13,148,136,.55);
}
:root[data-accent="orange"]{
  --accent:#ea580c;
  --accentSoft:rgba(234,88,12,.12);
  --accentBorder:rgba(234,88,12,.25);
  --accentBorderStrong:rgba(234,88,12,.35);
  --accentShadow:rgba(234,88,12,.20);
  --accentRing:rgba(234,88,12,.12);
  --accentFocusBorder:rgba(234,88,12,.55);
}
:root[data-theme="dark"]{
  --bg:#0b1220;
  --text:#e5e7eb;
  --muted:#93a4b8;
  --card:#0f172a;
  --border:#1f2a3a;
  --soft:#0c1527;
  --shadow:0 10px 24px rgba(0,0,0,.35);
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial;
  background:var(--bg);
  color:var(--text);
  font-size:calc(16px * var(--fontScale));
}
a{color:inherit;text-decoration:none}
.container{max-width:1200px;margin:0 auto;padding:0 14px}

.topbar{
  position:sticky;top:0;z-index:50;
  background:var(--card);
  border-bottom:2px solid var(--accentBorder);
}

:root[data-theme="dark"] .topbar{background:var(--card)}
.topbar-inner{
  display:flex;align-items:center;gap:12px;
  padding:12px 0;
}
.brand{display:flex;align-items:center;gap:10px;font-weight:1000}
.badge{
  font-size:12px;
  padding:4px 8px;
  border-radius:999px;
  background:var(--accentSoft);
  border:1px solid var(--accentBorder);
  color:var(--muted);
  font-weight:900;
}

.spacer{flex:1}
.langs{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.langs a{
  padding:8px 10px;border-radius:14px;border:1px solid var(--border);background:var(--card);
  color:var(--muted);font-weight:900;font-size:13px;
}
.langs a.active{
  color:var(--text);
  border-color:var(--accentBorderStrong);
  box-shadow:var(--shadow);
  background:var(--accentSoft);
}
.btn{
  border:1px solid var(--accentBorder);
  background:var(--accent);
  color:#fff;
  padding:10px 12px;border-radius:14px;font-weight:1000;
  cursor:pointer;
}
.btn:hover{opacity:.92}
.btn-ghost{
  background:var(--card); color:var(--text);
}
.iconbtn{
  border:1px solid var(--border);
  background:var(--card);
  padding:10px 12px;border-radius:14px;cursor:pointer;font-weight:1000;
}
.layout{display:flex;gap:14px}
.sidebar{
  width:280px; padding:14px 0;
  position:sticky; top:66px; height:calc(100vh - 66px);
  overflow:auto;
}
.side-card{border:1px solid var(--border);border-radius:var(--radius);background:var(--card);box-shadow:var(--shadow);padding:12px}
.side-link{
  display:block;padding:10px 12px;border-radius:14px;font-weight:950;color:var(--muted);
}
.side-link:hover{background:rgba(100,116,139,.10);color:var(--text)}
.main{flex:1; padding:16px 0; min-width:0}

.hero{
  border:1px solid var(--border);
  background: radial-gradient(700px 250px at 10% 0, var(--accentSoft), transparent 60%),
              linear-gradient(180deg,var(--soft),var(--bg));
  border-radius:calc(var(--radius) + 6px); padding:20px; box-shadow:var(--shadow);
}
.hero h1{margin:0 0 10px;font-size:34px}
.hero .muted{color:var(--muted);font-weight:800}
.hero-actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:14px}

.cards{margin-top:14px}
.section-title{font-weight:1000;margin:18px 0 10px}
.grid{
  display:grid;gap:12px;
  grid-template-columns: repeat(3, minmax(0,1fr));
}
@media(max-width:1000px){ .grid{grid-template-columns:repeat(2,minmax(0,1fr))} .sidebar{display:none} }
@media(max-width:640px){ .grid{grid-template-columns:1fr} .hero h1{font-size:28px} }

.card{
  border:1px solid var(--border);
  border-left:4px solid var(--accentBorderStrong);
  border-radius:var(--radius);
  background:var(--card);
  box-shadow:var(--shadow);
  padding:14px;
  display:flex; flex-direction:column; gap:8px;
  transition:transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
.card:hover{transform:translateY(-2px);box-shadow:0 18px 36px rgba(15,23,42,.10);border-color:var(--accentBorderStrong)}
.card-kicker{display:inline-flex;align-items:center;width:fit-content;font-size:12px;font-weight:1000;color:var(--muted);padding:4px 10px;border-radius:999px;background:var(--accentSoft);border:1px solid var(--accentBorder)}
.card-title{font-weight:1000;font-size:16px}
.card-desc{color:var(--muted);font-weight:800;line-height:1.45}

.article{border:1px solid var(--border);border-radius:calc(var(--radius) + 6px);background:var(--card);box-shadow:var(--shadow);padding:18px}
.article h1{margin:0 0 10px;font-size:30px}
.lead{color:var(--muted);font-weight:800;line-height:1.5}
.meta-line{display:flex;gap:10px;flex-wrap:wrap;color:var(--muted);font-weight:900;margin:10px 0}
.article-actions{display:flex;gap:10px;flex-wrap:wrap;margin:12px 0}
.toc{margin:12px 0;padding:12px;border-radius:16px;border:1px solid var(--border);background:var(--soft)}
.toc-title{font-weight:1000;margin-bottom:8px}
.toc-item{display:block;color:var(--muted);font-weight:900;padding:6px 0}
.toc-item.h3{padding-left:12px}
html[dir="rtl"] .toc-item.h3{padding-right:12px;padding-left:0}
.md{line-height:1.75}
.md pre{
  background:var(--soft);
  border:1px solid var(--border);
  border-radius:16px;
  padding:12px;
  overflow:auto;
  position:relative;
}
.md code{font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;font-size:14px}
.copybtn{
  position:absolute; top:10px; right:10px;
  border:1px solid var(--border); background:var(--card);
  padding:6px 10px; border-radius:12px; font-weight:1000; cursor:pointer; color:var(--muted)
}
html[dir="rtl"] .copybtn{left:10px; right:auto}

.np{display:flex;justify-content:space-between;gap:10px;margin:12px 0}
.np-btn{flex:1;border:1px solid var(--border);background:var(--card);padding:10px 12px;border-radius:16px;font-weight:1000;color:var(--text)}
.np-btn:hover{background:rgba(100,116,139,.10)}

.searchbar{display:flex;gap:10px;flex-wrap:wrap;margin-top:12px}
.input,.select{
  border:1px solid var(--border); background:var(--card); color:var(--text);
  padding:12px 14px; border-radius:14px; font-weight:900; min-width:200px;
}
.bar{height:10px;border-radius:999px;background:var(--soft);border:1px solid var(--border);overflow:hidden;margin-top:10px}
.bar span{display:block;height:100%;background:var(--text);width:0%}

.try-top{display:flex;justify-content:space-between;gap:10px;flex-wrap:wrap;margin:12px 0}
.try-buttons{display:flex;gap:10px;flex-wrap:wrap}
.try-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
@media(max-width:900px){ .try-grid{grid-template-columns:1fr} }

.editor,.result{
  border:1px solid var(--border);border-radius:18px;background:var(--card);box-shadow:var(--shadow);overflow:hidden
}
.tabs{display:flex;gap:6px;padding:10px;border-bottom:1px solid var(--border);background:var(--soft)}
.tab{border:1px solid var(--border);background:var(--card);border-radius:12px;padding:8px 10px;font-weight:1000;cursor:pointer}
.tab.active{background:var(--text);color:var(--bg)}
#codeArea{width:100%;min-height:420px;border:0;outline:none;padding:12px;background:transparent;color:var(--text);font-family:ui-monospace;font-size:14px}
.result-head{padding:10px 12px;border-bottom:1px solid var(--border);background:var(--soft);font-weight:1000}
#preview{width:100%;height:460px;border:0;background:#fff}
:root[data-theme="dark"] #preview{background:#fff}
#out{margin:0;padding:12px;min-height:460px;overflow:auto}

.cookie{
  position:fixed; left:0; right:0; bottom:0; z-index:999;
  border-top:1px solid var(--border); background:rgba(255,255,255,.92); backdrop-filter:blur(10px);
}
:root[data-theme="dark"] .cookie{background:rgba(11,18,32,.92)}
.cookie-inner{
  max-width:1200px; margin:0 auto; padding:12px 14px;
  display:flex; gap:10px; align-items:center; justify-content:space-between; flex-wrap:wrap;
}
.cookie-text{color:var(--muted); font-weight:900}
.cookie-actions{display:flex; gap:10px; flex-wrap:wrap}

.toast{
  position:fixed; bottom:18px; left:50%; transform:translateX(-50%);
  background:var(--text); color:var(--bg); padding:10px 14px;
  border-radius:999px; opacity:0; pointer-events:none; transition:.2s; z-index:1000;
}
.toast.show{opacity:1; bottom:26px}

.footer{
  margin:18px 0; color:var(--muted); font-weight:900; font-size:13px;
  display:flex; justify-content:space-between; gap:10px; flex-wrap:wrap
}

/* Ads: minimal & clean (no big dashed boxes) */
.ad{border:1px solid var(--border);border-radius:16px;background:var(--card);padding:8px;box-shadow:0 8px 20px rgba(15,23,42,.05)}
.ad-top{margin:12px 0}
.ad-side{position:sticky;top:90px}
.ad-in{margin:16px 0}

/* ===== Visual Upgrade Overrides (more color, less flat) ===== */
body{
  background:
    radial-gradient(900px 420px at 15% -10%, var(--accentSoft), transparent 60%),
    radial-gradient(900px 420px at 90% 0, var(--accentRing), transparent 60%),
    var(--bg);
}

.hero{
  background:
    radial-gradient(700px 250px at 10% 0, var(--accentSoft), transparent 60%),
    linear-gradient(180deg,var(--soft),var(--bg));
}

.btn{
  border:1px solid var(--accent);
  background:var(--accent);
  color:#fff;
}

.btn-ghost{
  border:1px solid var(--border);
  background:var(--card);
  color:var(--text);
}

.section-title{display:flex;align-items:center;gap:10px}
.section-title::before{
  content:"";
  width:10px;height:10px;border-radius:50%;
  background:var(--accent);
  box-shadow:0 0 0 6px var(--accentSoft);
}

.md a{color:var(--accent);font-weight:900}
.md a:hover{text-decoration:underline}

.md blockquote{
  border-left:4px solid var(--accent);
  background:var(--accentRing);
  padding:12px 14px;
  border-radius:14px;
}
html[dir="rtl"] .md blockquote{border-left:none;border-right:4px solid var(--accent)}


/* --- Encyclopedia UI additions --- */
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:14px}
@media(max-width:960px){.grid2{grid-template-columns:1fr}}
.chip{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:800;padding:5px 10px;border-radius:999px;border:1px solid var(--border);background:var(--soft)}
.chipAccent{border-color:var(--accentBorderStrong);background:var(--accentSoft);color:var(--text)}
.codebox{background:var(--soft);border:1px solid var(--border);border-radius:16px;padding:12px;overflow:auto}
.btn{display:inline-flex;align-items:center;gap:8px;padding:10px 14px;border-radius:14px;background:var(--accent);color:#fff;font-weight:900;box-shadow:0 10px 24px var(--accentShadow)}
.btn:hover{transform:translateY(-1px)}
.btnGhost{background:transparent;color:var(--text);border:1px solid var(--border);box-shadow:none}
.btnGhost:hover{background:var(--soft)}
.input{padding:10px 12px;border-radius:14px;border:1px solid var(--border);background:var(--card);outline:none}
.input:focus{border-color:var(--accentFocusBorder);box-shadow:0 0 0 4px var(--accentRing)}
.kv{display:grid;grid-template-columns:140px 1fr;gap:10px;margin-top:12px}
@media(max-width:520px){.kv{grid-template-columns:1fr}}