:root { color-scheme: dark; --bg:#1d1d1d; --panel:#111; --line:#777; --soft:#303030; --text:#f3f3e6; --accent:#32ff39; --warn:#d30a0a; --muted:#c9c9b8; --blue:#3a98c9; }
* { box-sizing: border-box; }
body { margin:0; background:var(--bg); color:var(--text); font:14px/1.35 Arial, Helvetica, sans-serif; }
a { color:var(--accent); text-decoration:none; font-weight:bold; }
.app-shell { min-height:100vh; display:flex; align-items:stretch; }
.sidebar { flex:0 0 clamp(180px,18vw,270px); width:clamp(180px,18vw,270px); height:100vh; overflow-y:auto; position:sticky; top:0; background:#090909; border-right:2px solid var(--blue); padding:10px 8px 18px; scrollbar-color:#666 #111; }
.side-brand { display:flex; align-items:center; gap:7px; padding:2px 4px 10px; border-bottom:1px solid #333; margin-bottom:8px; }
.side-player { background:#151515; border:1px solid #444; padding:8px; margin:0 0 10px; color:var(--muted); }
.side-section { margin:0 0 12px; }
.side-section h2 { text-align:left; font-size:12px; margin:0; padding:6px 4px; color:#fff8c7; border-bottom:1px solid #333; }
.side-menu { display:flex; flex-direction:column; }
.side-menu a { display:block; color:#eee; font-weight:normal; padding:7px 6px; border-bottom:1px solid #252525; }
.side-menu a:hover, .side-menu a.active { color:var(--accent); background:#202020; }
.content-shell { flex:1 1 auto; min-width:0; }
.topbar { display:flex; justify-content:space-between; align-items:center; background:#080808; border-bottom:2px solid var(--blue); padding:8px 10px; position:sticky; top:0; z-index:5; }
.brand { font-size:16px; }
.mark { border:1px solid #fff; padding:1px 4px; margin-right:5px; font-weight:bold; }
.topbar nav a { margin-left:12px; color:#fff; }
.wrap { width:min(980px,100%); margin:0 auto; padding:0 10px 56px; }
.flash { padding:10px; margin:10px 0; border:1px solid var(--line); background:#282828; }
.flash.success { color:var(--accent); }
.flash.error { color:#ff8a8a; }
.hero, .panel, .status-card { border-top:1px solid #444; border-bottom:1px solid #444; background:var(--panel); margin:0 0 10px; padding:10px; }
.hero { text-align:center; }
.hero h1 { font-size:28px; margin:12px 0; font-family:Georgia, serif; }
.banner { min-height:110px; background:linear-gradient(90deg,#070707,#1f2e3d); border:1px solid #333; display:flex; justify-content:space-between; align-items:flex-end; padding:12px; }
.banner h1 { margin:0; font-family:Georgia, serif; font-size:24px; }
.banner p { margin:4px 0 0; color:var(--muted); }
.stats { background:rgba(0,0,0,.65); border:1px solid #666; padding:8px; font-size:12px; min-width:210px; }
.rank-block { margin-top:10px; border:1px solid #333; background:#171717; padding:8px; }
.rank-line { display:flex; justify-content:space-between; gap:10px; margin-bottom:5px; color:#fff8c7; }
.rank-meter { height:18px; border:1px solid #777; background:#250000; overflow:hidden; }
.rank-meter span { display:block; height:100%; background:linear-gradient(90deg,#0b8f12,#32ff39); min-width:1px; }
.heat-meter { background:#102010; margin:8px 0; }
.heat-meter span { background:linear-gradient(90deg,#ff3030,#c40000); }
h2 { text-align:center; text-transform:uppercase; font-size:14px; margin:0 0 12px; color:#fff8c7; }
.form-row { margin:10px 0; display:flex; gap:10px; align-items:center; justify-content:center; flex-wrap:wrap; }
label { color:#fff; font-weight:bold; }
input, select, textarea, button { background:#2d2d2d; color:#fff; border:1px solid #aaa; padding:7px; max-width:100%; }
button, .btn { background:#3c3c3c; color:#fff; border:1px solid #aaa; padding:7px 12px; cursor:pointer; display:inline-block; }
button:hover, .btn:hover { filter:brightness(1.2); }
.menu-list { display:flex; flex-direction:column; border-top:1px solid #333; }
.menu-heading { padding:9px 4px 4px; color:#fff8c7; }
.menu-list a { display:block; padding:9px 4px; border-bottom:1px solid #333; color:#fff; font-weight:normal; }
.menu-list a:hover { color:var(--accent); background:#222; }
.news-row { display:flex; justify-content:space-between; border-bottom:1px solid #333; padding:7px 0; gap:10px; }
table { width:100%; border-collapse:collapse; margin:10px 0; }
th, td { border:1px solid #aaa; padding:8px; vertical-align:top; }
th { text-align:left; background:#2b2b2b; }
.chance { width:90px; height:18px; display:flex; border:1px solid #222; }
.chance .good { background:green; }
.chance .bad { background:#c40000; flex:1; }
.captcha-box { max-width:280px; margin:15px auto; border:1px solid #999; padding:10px; text-align:center; }
.captcha-code { display:inline-block; font-size:28px; letter-spacing:2px; background:#111; border:2px solid #ddd; padding:8px 16px; margin:8px; }
.result { border:1px solid #999; background:#161616; padding:12px; margin:12px 0; }
.success { color:var(--accent); font-weight:bold; }
.error { color:#ff8080; font-weight:bold; }
.item-card { border:1px solid #777; padding:10px; margin:10px 0; background:#191919; }
.item-title { font-weight:bold; color:#fff8c7; font-size:16px; }
.grid { display:grid; grid-template-columns: repeat(auto-fit, minmax(220px,1fr)); gap:10px; }
.mobilebar { display:none; }
.small { font-size:12px; color:var(--muted); }
.faq h3 { color:#fff8c7; margin:14px 0 5px; font-size:15px; }
.country-section h2 { text-align:left; border-bottom:1px solid #333; padding-bottom:6px; }
@media (max-width:760px) {
    body { padding-bottom:54px; }
    .app-shell { display:block; }
    .sidebar { position:static; width:100%; height:auto; max-height:45vh; overflow-y:auto; border-right:0; border-bottom:2px solid var(--blue); }
    .wrap { padding:0 0 56px; }
    .banner { flex-direction:column; align-items:stretch; gap:8px; }
    .stats { min-width:0; }
    table, tbody, tr, td, th { font-size:12px; }
    .mobilebar { position:fixed; bottom:0; left:0; right:0; display:grid; grid-template-columns:1fr 1fr 1fr; background:#333; border-top:1px solid #aaa; z-index:10; }
    .mobilebar a { text-align:center; color:#fff8c7; padding:13px 4px; border-right:1px solid #666; text-transform:uppercase; }
}