/* TheGast base styles — minimal, fast, accessible */
:root{
  --bg:#ffffff; --fg:#111111; --muted:#555; --accent:#0f172a; --border:#e5e7eb; --card:#fafafa;
  --link:#1d4ed8; --ok:#057a55; --warn:#b45309; --error:#b91c1c;
  color-scheme: light dark;
}
@media (prefers-color-scheme: dark){
  :root{ --bg:#0a0a0a; --fg:#f5f5f5; --muted:#a1a1aa; --accent:#e5e7eb; --border:#262626; --card:#111; --link:#93c5fd; }
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;font-family:system-ui,-apple-system,Segoe UI,Roboto,Inter,Arial,sans-serif;background:var(--bg);color:var(--fg);line-height:1.6}
a{color:var(--link);text-decoration:none}
a:focus, button:focus, input:focus, select:focus, textarea:focus{outline:2px solid #2563eb;outline-offset:2px}
img{max-width:100%;display:block}
.container{max-width:1100px;margin:0 auto;padding:0 16px}
.header{position:sticky;top:0;backdrop-filter:saturate(120%) blur(6px);background:color-mix(in oklab, var(--bg) 92%, transparent);border-bottom:1px solid var(--border);z-index:20}
.header-inner{display:flex;align-items:center;justify-content:space-between;height:60px}
.nav{display:flex;gap:8px;flex-wrap:wrap}
.nav a{padding:8px 10px;border-radius:12px}
.nav a[aria-current="page"], .nav a:hover{background:var(--card);color:var(--fg)}
.skip-link{position:absolute;left:-999px;top:auto;width:1px;height:1px;overflow:hidden}
.skip-link:focus{left:16px;top:8px;width:auto;height:auto;background:#111;color:#fff;padding:8px 12px;border-radius:8px;z-index:50}
.hero{display:grid;gap:16px;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));margin:16px 0}
.card{background:var(--card);border:1px solid var(--border);border-radius:16px;overflow:hidden;display:flex;flex-direction:column}
.card .pad{padding:12px}
.badge{display:inline-flex;gap:6px;align-items:center;font-size:12px;background:#eef; padding:2px 8px;border-radius:9999px}
.badge.m{background:#efe}
.badge.w{background:#fee}
.grid{display:grid;gap:16px;grid-template-columns:repeat(auto-fill,minmax(220px,1fr))}
.meta{color:var(--muted);font-size:14px}
.footer{margin-top:40px;border-top:1px solid var(--border);background:var(--card)}
.footer-inner{display:grid;gap:16px;grid-template-columns:1fr; padding:24px}
.footer .links{display:flex;flex-wrap:wrap;gap:12px}
.article{display:grid;grid-template-columns:1fr;gap:16px;margin:18px 0}
@media (min-width:960px){ .article{grid-template-columns: minmax(0, 680px) 320px} }
.aside{position:sticky; top:78px; height:fit-content}
.kit{display:grid;gap:10px}
.table{width:100%;border-collapse:collapse;font-size:14px}
.table th,.table td{border:1px solid var(--border);padding:8px;text-align:left}
.breadcrumbs{font-size:14px;color:var(--muted);display:flex;gap:8px;flex-wrap:wrap}
.chips{display:flex;gap:8px;flex-wrap:wrap}
.btn{display:inline-flex;align-items:center;gap:8px;background:#111;color:#fff;padding:10px 14px;border-radius:12px;border:0}
.btn.secondary{background:var(--card);color:var(--fg);border:1px solid var(--border)}
.alert{padding:12px;border-radius:12px}
.alert.info{background:#eef}
.alert.warn{background:#fee}
.disclosure{padding:12px;border:1px dashed var(--border);background:var(--card);border-radius:12px}
.video{border:1px solid var(--border);border-radius:16px;overflow:hidden;background:#000}
.reading-panel{display:flex;gap:12px;align-items:center;font-size:14px;color:var(--muted)}
.filter-bar{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin:10px 0}
.badge.platform{background:#e5f3ff}
.badge.genre{background:#e5ffe9}
.pagination{display:flex;gap:8px;align-items:center;justify-content:center;margin:20px 0}
.cmp{position:fixed;inset:auto 16px 16px 16px;background:var(--bg);border:1px solid var(--border);border-radius:16px;padding:14px;box-shadow:0 10px 24px rgba(0,0,0,.2);z-index:999}
.cmp-actions{display:flex;gap:8px;margin-top:10px}
.legend{font-size:12px;color:var(--muted)}
kbd{border:1px solid var(--border);border-radius:6px;padding:2px 6px;font-size:12px;background:var(--card)}

.cmp-fab{position:fixed;right:16px;bottom:88px;z-index:10001;padding:10px 12px;border-radius:999px;background:#111827;color:#fff;border:none;box-shadow:0 6px 18px rgba(0,0,0,.2);cursor:pointer}
[data-theme="dark"] .cmp-fab{background:#374151}
.btn.danger{background:#ef4444;border-color:#ef4444;color:#fff}

.form label{display:flex;flex-direction:column;gap:6px;margin:8px 0}
.form input,.form select,.form textarea{padding:10px;border:1px solid #e5e7eb;border-radius:10px}
[data-theme="dark"] .form input,[data-theme="dark"] .form select,[data-theme="dark"] .form textarea{background:#0b1220;border-color:#1f2937;color:#e5e7eb}


/* --- AURORA UI v2: visual refresh --- */
:root{
  --radius: 16px;
  --shadow-1: 0 8px 24px rgba(0,0,0,.08);
  --shadow-2: 0 16px 40px rgba(0,0,0,.12);
  --accent: #6366f1; /* indigo-500 */
  --accent-2: #22d3ee; /* cyan-400 */
}
[data-theme="dark"]{
  --shadow-1: 0 8px 24px rgba(0,0,0,.35);
  --shadow-2: 0 16px 40px rgba(0,0,0,.45);
}

body{font-size:16px}
h1{font-size: clamp(1.8rem, 1.3rem + 2vw, 2.6rem);line-height:1.2;letter-spacing:-.01em;margin: 12px 0 8px}
h2{font-size: clamp(1.3rem, 1.1rem + 1vw, 1.7rem);margin: 20px 0 10px}
h3{font-size: 1.1rem;margin: 14px 0 8px}
p{margin: .6rem 0}

.header{backdrop-filter: saturate(1.2) blur(6px);background: color-mix(in srgb, var(--bg) 82%, transparent);}
.header-inner{padding:10px 16px}
.header.scrolled{box-shadow: var(--shadow-1)}

.nav a{padding:8px 10px;border-radius: 10px;transition: background .2s, color .2s}
.nav a:hover{background: color-mix(in srgb, var(--card) 80%, transparent)}

.btn{border-radius: 12px;padding:10px 14px;border:1px solid color-mix(in srgb, var(--b) 60%, transparent);transition: transform .08s ease, box-shadow .2s ease}
.btn:hover{transform: translateY(-1px);box-shadow: var(--shadow-1)}
.btn.secondary{border-color: color-mix(in srgb, var(--b) 30%, transparent)}
.btn.ghost{background: transparent;border-color: transparent}
.btn.danger:hover{box-shadow: 0 8px 24px rgba(239,68,68,.35)}

main .grid{gap:18px}
.card{border-radius: var(--radius); box-shadow: var(--shadow-1); transition: transform .18s ease, box-shadow .2s ease; background: linear-gradient(180deg, color-mix(in srgb, var(--card) 98%, transparent), color-mix(in srgb, var(--card) 94%, transparent));}
.card:hover{transform: translateY(-2px); box-shadow: var(--shadow-2)}
.card img{aspect-ratio: 16/9; object-fit: cover}

.badge{background: color-mix(in srgb, var(--accent) 10%, white); color: color-mix(in srgb, var(--accent) 80%, black)}
.badge.m{margin-left:8px}

.article{display:grid; grid-template-columns: 1fr; gap: 24px}
.article > div{max-width: 780px}
@media (min-width: 1024px){
  .article{grid-template-columns: minmax(0,780px) 320px}
  .aside{position: sticky; top: 88px; height: fit-content}
}

.table{border-radius: 12px; overflow: hidden}
.table tr:nth-child(odd){background: color-mix(in srgb, var(--card) 85%, transparent)}

/* Breadcrumbs & reading panel */
.breadcrumbs{font-size:.9rem;color:var(--ink2);margin:6px 0}
.reading-panel{display:flex;flex-wrap:wrap;gap:10px;color:var(--ink2);margin:8px 0 12px}
.reading-panel span{background: color-mix(in srgb, var(--card) 94%, transparent); padding:4px 8px; border-radius: 999px}

/* Hero */
.hero{display:grid; gap:16px; grid-template-columns: repeat(auto-fill,minmax(260px,1fr))}
.hero .card{overflow:hidden}

/* CMP polish */
.cmp{border-top:1px solid color-mix(in srgb, var(--b) 70%, transparent)}
.cmp .cmp-actions .btn{border-radius: 999px}
.cmp-modal-inner{border-radius: 16px}

/* Forms */
.form input,.form select,.form textarea{border-radius: 12px; transition: box-shadow .15s, border-color .15s}
.form input:focus,.form select:focus,.form textarea:focus{outline:none;border-color: var(--accent); box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 20%, transparent)}

/* Links */
a{color: color-mix(in srgb, var(--accent) 60%, #1d4ed8); text-decoration:none}
a:hover{text-decoration:underline}

/* Rating stars */
.rating{--pct: 0%; position: relative; display:inline-block; width: 100px; height: 20px; vertical-align: middle; margin-left:8px}
.rating .stars{font-size:20px; line-height:20px; letter-spacing:2px; font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial; user-select:none}
.rating .stars.base{color: #d1d5db}
.rating .stars.fill{position:absolute; top:0; left:0; width: var(--pct); color: #f59e0b; overflow:hidden; white-space:nowrap}

/* SEO text block */
section[aria-label="SEO text"]{padding:12px;border-radius:12px;background: color-mix(in srgb, var(--card) 92%, transparent)}

/* Animations */
@media (prefers-reduced-motion: no-preference){
  .fade-in{animation: fade .3s ease both}
  @keyframes fade{from{opacity:0; transform: translateY(4px)} to{opacity:1; transform:none}}
}


/* --- AURORA UI v3 --- */
:root{
  --grad-1: conic-gradient(from 180deg at 50% 50%, #6366f1, #22d3ee, #a78bfa, #6366f1);
  --glass: color-mix(in srgb, var(--bg) 75%, transparent);
  --glass-b: color-mix(in srgb, var(--b) 70%, transparent);
}
.aurora-wrap{position:relative;isolation:isolate;border-radius:20px;overflow:hidden}
.aurora-wrap::before{content:"";position:absolute;inset:-20%;background: var(--grad-1);filter: blur(60px);opacity:.35;z-index:-1;transform: translate3d(0,0,0)}
.super-hero{display:grid;grid-template-columns:1.2fr .8fr;gap:20px;align-items:center;padding:24px}
.super-hero h1{margin:0 0 8px}
.super-hero .lead{font-size:1.05rem;color:var(--ink2)}
.super-hero .cta{display:flex;gap:10px;margin-top:12px;flex-wrap:wrap}
@media (max-width: 900px){ .super-hero{grid-template-columns:1fr} }

/* Gradient buttons */
.btn.gradient{background: linear-gradient(90deg, #6366f1, #22d3ee, #a78bfa); background-size: 200% 100%; color:#fff; border: none}
.btn.gradient:hover{animation: shimmer 1.3s linear infinite}
@keyframes shimmer{0%{background-position:0% 50%}100%{background-position:200% 50%}}
@media (prefers-reduced-motion: reduce){ .btn.gradient:hover{animation:none} }

/* Gradient card border */
.gradient-border{position:relative;border:1px solid transparent;background-clip: padding-box}
.gradient-border::after{content:"";position:absolute;inset:0;padding:1px;border-radius:inherit;background:linear-gradient(180deg, #6366f1, #22d3ee);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite: xor;mask-composite: exclude;pointer-events:none;}

/* Glass cards (aside) */
.aside .card{background: var(--glass); backdrop-filter: blur(8px); border-color: var(--glass-b)}

/* Fancy link underline */
a{ text-decoration: none; background-image: linear-gradient(currentColor, currentColor); background-size: 0% 1px; background-position: 0% 100%; background-repeat: no-repeat; transition: background-size .25s ease }
a:hover{ background-size: 100% 1px }

/* Progress bar at top */
#progress-bar{position:fixed;left:0;top:0;height:3px;background:linear-gradient(90deg,#22d3ee,#6366f1);width:0%;z-index:100002;box-shadow:0 2px 8px rgba(0,0,0,.2)}

/* Back-to-top */
#back-to-top{position:fixed;right:16px;bottom:140px;padding:10px 12px;border-radius:999px;background:#111827;color:#fff;border:1px solid var(--b);box-shadow:var(--shadow-1);cursor:pointer;z-index:100002;opacity:0;transform:translateY(6px);transition:opacity .2s, transform .2s}
[data-theme="dark"] #back-to-top{background:#0b1220}
#back-to-top.show{opacity:1;transform:none}

/* TOC */
.toc-card{background: var(--glass); backdrop-filter: blur(8px); border:1px solid var(--glass-b); border-radius:16px; padding:12px; box-shadow: var(--shadow-1)}
.toc-card h3{margin:0 0 6px}
.toc-card ol{margin:0;padding-left:20px}
.toc-card a{font-size:.95rem}

/* Offline indicator */
.offline-badge{display:inline-flex;align-items:center;gap:6px;font-size:.9rem;color:var(--ink2);margin-left:8px}
.offline-badge .dot{width:8px;height:8px;border-radius:50%;background:#10b981;display:inline-block}
[data-theme="dark"] .offline-badge .dot{background:#34d399}

/* Thumbnails & hero */
.card .thumb{aspect-ratio:16/9; display:block; overflow:hidden; background:#0f172a}
.card .thumb img{width:100%; height:100%; object-fit:cover; display:block}
figure.hero{margin:0 0 16px 0; border-radius:14px; overflow:hidden}
figure.hero img{width:100%; height:auto; display:block}
.card.gradient-border{border:1px solid rgba(255,255,255,.08)}


/* thumbnails & hero & highlights */
.card .thumb{aspect-ratio:16/9; display:block; overflow:hidden; background:#0f172a}
.card .thumb img{width:100%; height:100%; object-fit:cover; display:block}
figure.hero{margin:0 0 16px 0; border-radius:14px; overflow:hidden}
figure.hero img{width:100%; height:auto; display:block}
mark.hl-title{background:#fff3cd}
mark.hl-subtitle{background:#e0f2fe}
mark.hl-excerpt{background:#e2fbe9}


/* Contact block */
.contact-block{margin:24px 0; padding:16px; border:1px solid rgba(148,163,184,.25); border-radius:14px; background:rgba(15,23,42,.04)}
.contact-block h2{margin:0 0 8px 0; font-size:1.25rem}
.contact-block ul.contacts{margin:8px 0 0 0; padding-left:18px}
.contact-block ul.contacts li{margin:6px 0}
footer .foot-contacts{margin-top:10px; font-size:.95rem; color:#334155}