/* DayQuizz — content pages rendered by the server (subject pages, answers archive, 404). */
:root{
  --bg:#06060f; --panel:#10101e; --ink:#f6f6fc; --ink-2:#d0d0e2; --dim:#a0a0bb; --mute:#6f6f8c;
  --line:rgba(255,255,255,.08); --line-2:rgba(255,255,255,.14);
  --violet:#7c5cff; --teal:#00e0c6; --good:#2ee6a8; --gold:#ffc94d;
  --g-brand:linear-gradient(95deg,#7c5cff 0%,#4f7dff 45%,#00e0c6 100%);
}
*{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; }
body{ margin:0; background:var(--bg); color:var(--ink); font-family:Outfit, system-ui, -apple-system, "Segoe UI", sans-serif; font-size:17px; line-height:1.6;
  background-image:radial-gradient(900px 500px at 10% -10%, rgba(124,92,255,.22), transparent 60%), radial-gradient(700px 500px at 100% 0%, rgba(255,46,136,.08), transparent 60%); background-repeat:no-repeat; }
a{ color:#9fd8ff; }
.sx-wrap{ width:100%; max-width:860px; margin:0 auto; padding:0 16px; }
.sx-top{ position:sticky; top:0; z-index:5; background:rgba(6,6,15,.82); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px); border-bottom:1px solid var(--line); }
.sx-top .sx-wrap{ display:flex; align-items:center; justify-content:space-between; gap:12px; height:62px; }
.sx-brand{ display:flex; align-items:center; gap:9px; color:#fff; font-weight:900; font-size:1.15rem; text-decoration:none; }
.sx-btn{ display:inline-flex; align-items:center; justify-content:center; gap:8px; min-height:50px; padding:0 24px; border-radius:999px; background:var(--g-brand); color:#fff; font-weight:800; text-decoration:none; box-shadow:0 14px 34px -14px rgba(124,92,255,.8); }
.sx-btn:hover{ filter:brightness(1.08); }
.sx-btn-sm{ min-height:38px; padding:0 16px; font-size:.9rem; white-space:nowrap; }
.sx-crumbs{ margin:22px 0 0; font-size:.86rem; color:var(--mute); }
.sx-crumbs a{ color:var(--dim); text-decoration:none; }
.sx-hero{ padding:26px 0 18px; }
.sx-emoji{ display:inline-grid; place-items:center; width:62px; height:62px; border-radius:18px; background:rgba(255,255,255,.06); border:1px solid var(--line-2); font-size:2rem; }
h1{ margin:14px 0 8px; font-size:clamp(2rem, 6vw, 2.9rem); line-height:1.1; font-weight:900; letter-spacing:-.01em; }
h2{ margin:0 0 12px; font-size:1.3rem; line-height:1.25; font-weight:800; }
.sx-lead{ margin:0 0 14px; font-size:1.12rem; color:var(--ink-2); max-width:680px; }
.sx-lead b{ color:#fff; }
.sx-facts{ display:flex; flex-wrap:wrap; gap:8px; margin:0 0 20px; padding:0; }
.sx-facts span{ padding:5px 12px; border-radius:999px; background:rgba(255,255,255,.06); border:1px solid var(--line); font-size:.86rem; font-weight:700; color:var(--ink-2); }
.sx-card{ margin:16px 0; padding:22px; border-radius:22px; background:var(--panel); border:1px solid var(--line); }
.sx-card p{ margin:0 0 10px; color:var(--ink-2); }
.sx-list{ margin:0; padding-left:20px; color:var(--ink-2); }
.sx-list li{ margin:6px 0; }
.sx-list b{ color:#fff; }
.sx-note{ font-size:.9rem; color:var(--dim) !important; }
.sx-q{ margin:10px 0; border:1px solid var(--line-2); border-radius:14px; background:rgba(255,255,255,.03); }
.sx-q summary{ cursor:pointer; padding:12px 14px; font-weight:700; color:#fff; list-style:none; }
.sx-q summary::-webkit-details-marker{ display:none; }
.sx-q summary::before{ content:"＋"; color:var(--teal); margin-right:8px; font-weight:900; }
.sx-q[open] summary::before{ content:"－"; }
.sx-q summary small{ display:block; margin-top:4px; font-weight:600; color:var(--dim); font-size:.86rem; }
.sx-q p{ margin:0; padding:0 14px 12px 38px; }
mark{ background:rgba(46,230,168,.16); color:var(--good); font-weight:800; padding:0 4px; border-radius:6px; }
.sx-faq details{ border-top:1px solid var(--line); }
.sx-faq details:first-child{ border-top:0; }
.sx-faq summary{ cursor:pointer; padding:12px 0; font-weight:700; color:#fff; }
.sx-faq p{ margin:0 0 14px; }
.sx-themes{ list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(auto-fill, minmax(230px, 1fr)); gap:10px; }
.sx-themes li{ display:grid; grid-template-columns:34px 1fr; column-gap:8px; padding:10px 12px; border-radius:14px; background:rgba(255,255,255,.04); border:1px solid var(--line); }
.sx-themes span{ grid-row:span 2; font-size:1.4rem; }
.sx-themes small{ color:var(--dim); }
.sx-today{ margin:0 0 14px !important; font-size:1.05rem; }
.sx-answers{ margin:0; padding-left:24px; color:var(--ink-2); }
.sx-answers li{ margin:8px 0; }
.sx-stars{ margin-left:8px; font-size:.7rem; opacity:.8; white-space:nowrap; }
.sx-report{ margin-left:8px; padding:2px 10px; border-radius:999px; border:1px solid var(--line-2); background:transparent; color:var(--dim); font:inherit; font-size:.76rem; font-weight:700; cursor:pointer; white-space:nowrap; vertical-align:1px; }
.sx-report:hover{ color:#fff; border-color:#ff8fa3; }
.sx-report.done{ color:var(--good); border-color:transparent; cursor:default; }
.sx-dlg{ width:min(480px, calc(100% - 32px)); padding:24px; border:1px solid var(--line-2); border-radius:22px; background:var(--panel); color:var(--ink); }
.sx-dlg::backdrop{ background:rgba(4,4,10,.7); backdrop-filter:blur(4px); }
.sx-dlg h2{ margin-bottom:6px; }
.sx-dlg label{ display:block; margin-top:12px; font-size:.86rem; font-weight:700; color:var(--ink-2); }
.sx-dlg input, .sx-dlg textarea{ display:block; width:100%; margin-top:6px; padding:12px 14px; border-radius:14px; border:1px solid var(--line-2); background:rgba(255,255,255,.05); color:#fff; font:inherit; font-size:1rem; }
.sx-dlg input:focus, .sx-dlg textarea:focus{ outline:2px solid var(--violet); outline-offset:1px; }
.sx-dlg-btns{ display:flex; justify-content:flex-end; gap:10px; margin-top:16px; }
.sx-dlg .sx-btn{ min-height:46px; padding:0 20px; border:0; font:inherit; font-weight:800; cursor:pointer; }
.sx-btn-ghost{ background:rgba(255,255,255,.08) !important; box-shadow:none !important; }
.sx-status{ min-height:1.2em; margin:10px 0 0; font-size:.9rem; color:var(--dim); }
.sx-status.err{ color:#ff8fa3; }
.sx-status.ok{ color:var(--good); }
.sx-chips{ display:flex; flex-wrap:wrap; gap:8px; margin:0 0 18px; }
.sx-chip{ display:inline-flex; align-items:center; gap:6px; padding:8px 14px; border-radius:999px; background:rgba(255,255,255,.06); border:1px solid var(--line-2); color:#fff; font-weight:700; font-size:.92rem; text-decoration:none; }
.sx-chip:hover{ border-color:var(--teal); }
.sx-jump{ margin-top:4px; }
.sx-more{ margin:30px 0 10px; }
.sx-pager{ display:flex; justify-content:space-between; gap:12px; margin:22px 0; }
.sx-pager a{ color:var(--teal); font-weight:800; text-decoration:none; }
.sx-foot{ margin-top:40px; padding:26px 0 40px; border-top:1px solid var(--line); color:var(--mute); font-size:.9rem; }
.sx-foot a{ color:var(--dim); }
.sx-subjects-nav{ display:flex; flex-wrap:wrap; gap:6px 16px; margin-bottom:12px; }
@media (max-width:480px){
  body{ font-size:16px; }
  .sx-card{ padding:18px 16px; border-radius:18px; }
  .sx-btn{ width:100%; }
  .sx-dlg .sx-btn{ width:auto; }
  .sx-btn-sm{ width:auto; }
  .sx-brand{ font-size:1.05rem; }
}