/* Theme: Midnight — dark-first, neon accents, bento grid */
:root, [data-theme="dark"] {
  --bg: #0b0f1a; --surface: #131a2a; --surface-2: #192137; --ink: #eaf0ff; --ink-2: #c1cbe4;
  --muted: #8b97b5; --line: #232d47; --accent: #22d3ee; --accent-ink: #04141a; --accent-soft: #0e2a35;
  --accent-text: #67e8f9; --num: #2b3a60; --brand: #070a12; --radius: 20px; --radius-sm: 14px;
  --shadow: 0 14px 40px -16px rgba(34, 211, 238, .25); --font: "Cairo", "IBM Plex Sans Arabic", system-ui, sans-serif;
  --maxw: 1280px;
}
[data-theme="light"] {
  --bg: #eef2fb; --surface: #ffffff; --surface-2: #f4f6fd; --ink: #0b1020; --ink-2: #34406a;
  --muted: #667094; --line: #dbe2f5; --accent: #0891b2; --accent-ink: #fff; --accent-soft: #dff5fa;
  --accent-text: #0e7490; --num: #c9d3f0; --brand: #0b1020;
}
body.theme-midnight { background: radial-gradient(900px 500px at 85% -5%, rgba(167, 139, 250, .16), transparent 60%), radial-gradient(800px 500px at 0% 0%, rgba(34, 211, 238, .12), transparent 60%), var(--bg); background-attachment: fixed; }
.theme-midnight .site-header { background: color-mix(in srgb, var(--bg) 78%, transparent); border-bottom-color: var(--line); }
.theme-midnight .logo .mark { background: linear-gradient(135deg, #22d3ee, #a78bfa); box-shadow: 0 0 24px -4px #22d3ee; }
.theme-midnight .nav a.on { background: var(--accent); color: var(--accent-ink); }
.theme-midnight .utility { background: #070a12; }
.theme-midnight .btn.primary, .theme-midnight .chip.solid, .theme-midnight .pager .cur, .theme-midnight .ticker .tag { color: var(--accent-ink); }
.theme-midnight .ticker .tag .dot-live { background: var(--accent-ink); }
.theme-midnight .card, .theme-midnight .panel, .theme-midnight .article, .theme-midnight .svc { background: color-mix(in srgb, var(--surface) 80%, transparent); backdrop-filter: blur(8px); }
.theme-midnight .card:hover, .theme-midnight .svc:hover { box-shadow: 0 0 0 1px var(--accent), var(--shadow); }
.theme-midnight .sec-h h2::before { background: linear-gradient(180deg, #22d3ee, #a78bfa); }
.theme-midnight .cat-pill:hover, .theme-midnight .cat-pill.on { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); }
.theme-midnight .nav a.live, .theme-midnight .ranked a:hover::before, .theme-midnight .live-feed time { color: var(--accent-text); }
.theme-midnight .footer { background: #070a12; }

/* Bento grid */
.mn-bento { display: grid; gap: 14px; margin-top: 24px; }
.mn-bento .tile { min-height: 200px; }
@media (min-width: 900px) {
  .mn-bento { grid-template-columns: repeat(4, 1fr); grid-template-rows: repeat(2, minmax(210px, auto)); }
  .mn-bento .lead { grid-column: 1 / span 2; grid-row: 1 / span 2; min-height: 440px; }
  .mn-live { grid-column: 3; grid-row: 2; overflow: hidden; padding-block: 12px; }
  .mn-bento .tile:nth-of-type(4) { grid-column: 4; grid-row: 2; }
}
.mn-live .live-feed a:nth-child(n+4) { display: none; }
@media (min-width: 900px) { .mn-bento .tile:nth-of-type(2) { grid-column: 3; grid-row: 1; } .mn-bento .tile:nth-of-type(3) { grid-column: 4; grid-row: 1; } }
/* Horizontal rails */
.mn-rail { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(250px, 1fr); gap: 16px; overflow-x: auto; padding-bottom: 10px; scroll-snap-type: x mandatory; scrollbar-width: thin; }
.mn-rail > * { scroll-snap-align: start; }
.mn-top { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); }
.mn-top .panel { display: flex; flex-direction: column; gap: 8px; transition: box-shadow .2s; }
.mn-top .panel:hover { box-shadow: 0 0 0 1px var(--accent); }
.mn-num { font-size: 2.4rem; font-weight: 800; line-height: 1; background: linear-gradient(135deg, #22d3ee, #a78bfa); -webkit-background-clip: text; background-clip: text; color: transparent; }

/* ---- Category / page headers ---- */
.theme-midnight .phead { background: linear-gradient(135deg, rgba(34, 211, 238, .16), rgba(167, 139, 250, .16)), var(--surface); border: 1px solid var(--line); color: var(--ink); border-radius: 24px; box-shadow: var(--shadow); }
.theme-midnight .phead p { color: var(--muted); }
.theme-midnight .phead::after { background: radial-gradient(closest-side, rgba(167, 139, 250, .35), transparent); }
.theme-midnight .filter input[type=search], .theme-midnight .filter select { background: var(--surface); color: var(--ink); border-color: var(--line); }
.theme-midnight .crumbs a:hover { color: var(--accent-text); }

/* ---- Article ---- */
.theme-midnight .article { background: color-mix(in srgb, var(--surface) 86%, transparent); border-color: var(--line); box-shadow: 0 30px 80px -40px rgba(34, 211, 238, .25); }
.theme-midnight .article h1 { background: linear-gradient(135deg, var(--ink), var(--accent-text)); -webkit-background-clip: text; background-clip: text; color: transparent; }
[data-theme="light"] .theme-midnight .article h1 { background: none; color: var(--ink); }
.theme-midnight .article .lede { border-image: linear-gradient(180deg, #22d3ee, #a78bfa) 1; border-inline-start-width: 4px; border-inline-start-style: solid; }
.theme-midnight .toolbar { background: color-mix(in srgb, var(--surface) 80%, transparent); border-color: var(--line); }
.theme-midnight .toolbar .btn { background: transparent; }
.theme-midnight .toolbar .btn:hover { border-color: var(--accent); color: var(--accent-text); }
.theme-midnight .body a { color: var(--accent-text); }
.theme-midnight .body blockquote { background: linear-gradient(135deg, rgba(34, 211, 238, .08), rgba(167, 139, 250, .08)); border-inline-start-color: #a78bfa; }
.theme-midnight .src-box { background: var(--surface-2); border-color: var(--line); }
.theme-midnight .btn.dark { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); }
.theme-midnight .share a:hover, .theme-midnight .share button:hover { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); }
.theme-midnight .chip { background: rgba(34, 211, 238, .12); color: var(--accent-text); }
.theme-midnight .chip.solid { background: var(--accent); }
.theme-midnight .band { background: linear-gradient(135deg, #131a2a, #1a1440); border: 1px solid var(--line); }
.theme-midnight .progress { background: linear-gradient(90deg, #22d3ee, #a78bfa); box-shadow: 0 0 12px #22d3ee; }
.theme-midnight .search-box form, .theme-midnight .drawer { border: 1px solid var(--line); }
.theme-midnight .tile { box-shadow: 0 20px 50px -28px rgba(0, 0, 0, .8); }
.theme-midnight .tile:hover { box-shadow: 0 0 0 1px var(--accent), 0 20px 60px -20px rgba(34, 211, 238, .35); }
.theme-midnight .pager a:hover { border-color: var(--accent); color: var(--accent-text); }
.theme-midnight .footer { border-top: 1px solid var(--line); background: linear-gradient(180deg, #0b0f1a, #070a12); }
.theme-midnight .footer .logo .mark { box-shadow: 0 0 24px -4px #22d3ee; }
.theme-midnight .logo-img { filter: drop-shadow(0 0 10px rgba(34, 211, 238, .25)); }
@media (max-width: 899px) { .mn-bento .lead { min-height: 340px; } .mn-rail { grid-auto-columns: 78%; } }
.theme-midnight .logo-img { border-radius: 10px; }