html[data-theme="dark"]{
  color-scheme:dark;
  --bg:#0f0e1a;
  --bg-solid:#0f0e1a;
  --surface:rgba(30,30,45,.68);
  --surface-solid:#191928;
  --text:#e8e6f0;
  --text-strong:#f8f7ff;
  --text-soft:#c7c5d8;
  --text-dim:#a8a6be;
  --text-faint:#6e6c85;
  --border:rgba(255,255,255,.08);
  --border-strong:rgba(255,255,255,.14);
  --divider:rgba(255,255,255,.07);
  --accent:#3B82F6;
  --accent-hover:#60A5FA;
  --accent-light:#60A5FA;
  --accent-soft:rgba(59,130,246,.18);
  --accent-softer:rgba(59,130,246,.1);
  --accent-bg:rgba(59,130,246,.14);
  --success:#34D399;
  --shadow-xs:0 1px 2px rgba(0,0,0,.22);
  --shadow-sm:0 4px 18px rgba(0,0,0,.24),0 1px 2px rgba(0,0,0,.22);
  --shadow:0 8px 30px rgba(0,0,0,.3);
  --shadow-lg:0 18px 46px rgba(0,0,0,.38);
  --shadow-nav:0 8px 28px rgba(0,0,0,.32),0 1px 2px rgba(0,0,0,.24);
}

html[data-theme="dark"] body{
  background:var(--bg);
  color:var(--text);
}

html[data-theme="dark"] body::before{
  background:
    radial-gradient(ellipse 900px 520px at 14% -10%,rgba(167,119,255,.14),transparent 60%),
    radial-gradient(ellipse 700px 440px at 92% 6%,rgba(99,179,255,.1),transparent 60%),
    radial-gradient(ellipse 800px 520px at 50% 120%,rgba(59,130,246,.08),transparent 60%);
}

html[data-theme="dark"] :is(.brand,.back-link,.hero-eyebrow,.eyebrow,.pill,.card,.content,.panel,.view-toggle,.input,.select,.pager button,.to-top){
  background:var(--surface);
  border-color:var(--border);
  box-shadow:var(--shadow-sm);
}

html[data-theme="dark"] :is(.brand,.back-link,.pill,.card,.content,.panel,.input,.select,.pager button,.to-top):hover{
  border-color:var(--border-strong);
}

html[data-theme="dark"] :is(.brand,.back-link,.pill):hover,
html[data-theme="dark"] :is(.pager button:not(:disabled):hover){
  background:rgba(255,255,255,.08);
  color:var(--text-strong);
}

html[data-theme="dark"] :is(.input,.select){
  background:rgba(255,255,255,.06);
  color:var(--text);
}

html[data-theme="dark"] :is(.input,.select):focus{
  background:rgba(255,255,255,.08);
  border-color:rgba(96,165,250,.38);
  box-shadow:0 0 0 4px rgba(59,130,246,.16);
}

html[data-theme="dark"] .input::placeholder{
  color:var(--text-faint);
}

html[data-theme="dark"] :is(.pill.active,.view-option.active,.btn){
  background:#2563EB;
  border-color:#2563EB;
  color:#fff;
}

html[data-theme="dark"] .view-option:hover{
  background:rgba(255,255,255,.08);
  color:var(--text-strong);
}

html[data-theme="dark"] :is(.card-icon){
  background:linear-gradient(180deg,rgba(59,130,246,.18),rgba(59,130,246,.08));
  border-color:rgba(96,165,250,.22);
}

html[data-theme="dark"] :is(.disclaimer,.footer-tip,.footer-note){
  background:rgba(59,130,246,.1);
  border-color:rgba(96,165,250,.16);
  color:var(--text-soft);
}

html[data-theme="dark"] :is(.disclaimer strong,.footer-tip strong){
  color:var(--text-strong);
}

html[data-theme="dark"] :is(table,.content table){
  background:rgba(25,25,40,.74);
  border-color:var(--border);
}

html[data-theme="dark"] :is(th,.content thead th){
  background:rgba(59,130,246,.14);
  color:var(--text-soft);
  border-color:var(--border);
}

html[data-theme="dark"] :is(td,.content th,.content td){
  border-color:var(--divider);
}

html[data-theme="dark"] :is(tbody tr:hover td,.content tbody tr:hover td){
  background:rgba(255,255,255,.04);
}

html[data-theme="dark"] .group-row td{
  background:rgba(59,130,246,.12);
  color:var(--text-soft);
}

html[data-theme="dark"] .group-row:hover td{
  background:rgba(59,130,246,.12);
}

html[data-theme="dark"] .group-count{
  background:rgba(59,130,246,.18);
  color:var(--accent-hover);
}

html[data-theme="dark"] :is(.time-badge,.card-size){
  background:rgba(59,130,246,.14);
}

html[data-theme="dark"] .card-size,
html[data-theme="dark"] .crumb .sep{
  color:var(--text-dim);
}

html[data-theme="dark"] .time-badge.after{
  background:rgba(16,185,129,.14);
  color:#6EE7B7;
}

html[data-theme="dark"] .time-badge.unknown{
  background:rgba(255,255,255,.07);
  color:var(--text-dim);
}

html[data-theme="dark"] .content blockquote{
  background:rgba(59,130,246,.12);
}

html[data-theme="dark"] .content pre{
  background:rgba(15,15,28,.82);
  border-color:var(--border);
}

html[data-theme="dark"] .content code{
  background:rgba(59,130,246,.16);
}

html[data-theme="dark"] .to-top:hover{
  background:var(--accent);
  color:#fff;
  border-color:var(--accent);
}