:root{
  --bg:#0a141a; --bg2:radial-gradient(1200px 600px at 20% -10%, #183040 0%, transparent 60%),
               radial-gradient(900px 600px at 100% 0%, #11222c 0%, transparent 60%),
               linear-gradient(180deg,#0a141a, #091117);
  --fg:#f6f7fb; --muted:#a9b8c2; --gold:#f1d08f; --accent:#ff884d; --ring:rgba(241,208,143,.28);
  --card:rgba(255,255,255,.06); --glass:rgba(255,255,255,.08);
  --shadow:0 8px 30px rgba(0,0,0,.4); --blur:12px;
  --table-bg:rgba(8,18,24,.65); --table-text:#ffffff; --ok:#3ecf8e; --warn:#ff884d;
}
[data-theme="light"]{
  --bg:#f7f7fb; --bg2:radial-gradient(1200px 600px at 10% -10%, #fff1d6 0%, transparent 55%),
                radial-gradient(900px 600px at 90% 0%, #d9f1ff 0%, transparent 55%),
                linear-gradient(180deg,#f7f7fb, #ffffff);
  --fg:#10131a; --muted:#4b5b64; --gold:#8a6a28; --accent:#c0521c; --ring:rgba(24,39,53,.18);
  --card:rgba(255,255,255,.82); --glass:rgba(255,255,255,.86);
  --shadow:0 10px 26px rgba(15,23,42,.12); --blur:8px;
  --table-bg:#ffffff; --table-text:#0d1720; --ok:#138a57; --warn:#a64719;
}
*{box-sizing:border-box}
html,body{margin:0;min-height:100%;background:var(--bg);background-image:var(--bg2);color:var(--fg);font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto;line-height:1.55;overflow-x:hidden}
a{color:var(--gold);text-decoration:none}
a:hover{text-decoration:underline}

.container{max-width:1100px;margin-inline:auto;padding:16px}
@media (min-width:720px){ .container{padding:24px} }

.header{position:relative;display:grid;grid-template-columns:auto 1fr;gap:14px;align-items:center;padding:16px;border:1px solid var(--ring);border-radius:22px;background:var(--card);backdrop-filter:saturate(130%) blur(var(--blur));box-shadow:var(--shadow)}
@media (min-width:720px){.header{gap:18px;padding:20px}}
.logo{width:80px;height:auto;display:block;border-radius:14px;box-shadow:0 6px 18px rgba(0,0,0,.35)}
@media (min-width:720px){.logo{width:92px}}
.title-wrap h1{margin:0;font-size:clamp(20px,4.8vw,38px);letter-spacing:.2px}
.title-wrap p{margin:8px 0 0;color:var(--muted);font-size:14px}
.badges{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}
.badge{padding:6px 10px;border:1px solid var(--ring);border-radius:999px;background:var(--glass);backdrop-filter:blur(calc(var(--blur) - 2px));font-size:12px}
.theme-toggle{position:absolute;right:10px;top:10px;border:1px solid var(--ring);background:var(--glass);backdrop-filter:blur(calc(var(--blur) - 2px));color:var(--fg);border-radius:999px;padding:6px 10px;font-size:12px;cursor:pointer}

.grid{display:grid;gap:16px;margin-top:16px}
@media (min-width:980px){ .grid{grid-template-columns:1.1fr .9fr;gap:20px} }

.card{border:1px solid var(--ring);background:var(--card);backdrop-filter:saturate(130%) blur(var(--blur));border-radius:20px;padding:16px;box-shadow:var(--shadow);max-width:100%;overflow-x:auto}
@media (min-width:720px){ .card{padding:20px} }
.card h2{margin:0 0 12px;font-size:18px;color:var(--gold);letter-spacing:.2px;display:flex;align-items:center;gap:10px}
.card h2::before{content:"";width:7px;height:22px;background:linear-gradient(180deg,var(--accent),transparent);border-radius:4px}
.card h3{margin:16px 0 8px;font-size:16px;color:var(--gold)}
.kvs{display:grid;grid-template-columns:1fr 2fr;gap:10px;font-size:14px;min-width:0}
.kvs div:nth-child(odd){color:var(--muted)}
.list{margin:8px 0 0;padding-left:18px}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{display:inline-block;padding:.4rem .7rem;border-radius:999px;border:1px solid var(--ring);background:var(--glass);backdrop-filter:blur(calc(var(--blur) - 2px));font-size:12px}

.table-wrap{overflow:auto;border-radius:14px;border:1px solid var(--ring);background:var(--table-bg)}
table{width:100%;border-collapse:collapse;color:var(--table-text)}
th,td{padding:11px 12px;border-bottom:1px solid color-mix(in oklab, var(--gold) 22%, transparent)}
th{color:var(--gold);font-weight:600;background:color-mix(in oklab, var(--gold) 12%, transparent)}
tbody tr:hover{background:color-mix(in oklab, var(--gold) 12%, transparent)}

.status{display:inline-flex;align-items:center;gap:8px;font-size:13px}
.dot{width:8px;height:8px;border-radius:999px;background:var(--ok)}
.dot.warn{background:var(--warn)}

.iframe-card{border:1px solid var(--ring);background:var(--card);backdrop-filter:saturate(130%) blur(var(--blur));border-radius:20px;padding:16px;margin-top:18px;box-shadow:var(--shadow)}
.iframe-card h2{margin:0 0 12px;font-size:18px;color:var(--gold);display:flex;align-items:center;gap:10px}
.iframe-card h2::before{content:"";width:7px;height:22px;background:linear-gradient(180deg,var(--accent),transparent);border-radius:4px}
.iframe-inner{display:flex;justify-content:center;align-items:center;background:#fff;border-radius:14px;padding:10px}
.iframe-inner iframe{border:none;max-width:100%}
.iframe-desktop{display:none}
.iframe-mobile{display:block}
@media(min-width:768px){.iframe-desktop{display:block}.iframe-mobile{display:none}}

.span-full{grid-column:1 / -1}

.footer{margin-top:18px;padding:12px;border:1px dashed var(--ring);border-radius:18px;text-align:center;color:var(--muted);font-size:14px;background:var(--card);backdrop-filter:blur(var(--blur))}

.brand{color:var(--gold)}
.muted{color:var(--muted)}
