/* RudeHolm — modern gaming theme */
@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@400;500;600;700;800&display=swap');

:root{
    --bg:#0c0f14;
    --bg-elevated:#131820;
    --glass:rgba(16,20,28,.72);
    --card:rgba(22,27,38,.85);
    --card-hover:rgba(28,34,48,.95);
    --accent:#22d3a6;
    --accent-dark:#0d9488;
    --accent-glow:rgba(34,211,166,.35);
    --accent2:#5eead4;
    --gold:#fbbf24;
    --gold-glow:rgba(251,191,36,.25);
    --white:#f8fafc;
    --vip:var(--gold);
    --premium:#67e8f9;
    --text:#e8edf5;
    --muted:#8b95a8;
    --border:rgba(255,255,255,.08);
    --border-strong:rgba(255,255,255,.14);
    --danger:#f87171;
    --radius:14px;
    --radius-sm:10px;
    --font:'Outfit',system-ui,sans-serif;
    --shadow:0 8px 32px rgba(0,0,0,.35);
    --shadow-lg:0 20px 50px rgba(0,0,0,.45);
}

*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{
    font-family:var(--font);
    background:var(--bg);
    color:var(--text);
    overflow-x:hidden;
    -webkit-font-smoothing:antialiased;
}

/* Ambient background */
.bg-ambient{position:fixed;inset:0;pointer-events:none;z-index:0;overflow:hidden}
.bg-ambient::before{
    content:'';position:absolute;inset:0;
    background:
        radial-gradient(ellipse 70% 50% at 15% 20%,rgba(34,211,166,.12),transparent 55%),
        radial-gradient(ellipse 50% 40% at 85% 15%,rgba(99,102,241,.1),transparent 50%),
        radial-gradient(ellipse 60% 45% at 70% 80%,rgba(251,191,36,.06),transparent 55%);
}
.bg-grid{
    position:absolute;inset:0;opacity:.04;
    background-image:
        linear-gradient(rgba(255,255,255,.5) 1px,transparent 1px),
        linear-gradient(90deg,rgba(255,255,255,.5) 1px,transparent 1px);
    background-size:48px 48px;
    mask-image:radial-gradient(ellipse 80% 70% at 50% 40%,#000 20%,transparent 75%);
}

.brand{font-weight:800;letter-spacing:-.03em}
.brand-rud{
    background:linear-gradient(135deg,var(--accent2),var(--accent));
    -webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;
}
.brand-holm{color:var(--white)}

.logo-mark{
    width:38px;height:38px;flex-shrink:0;border-radius:11px;
    display:block;object-fit:cover;
    box-shadow:0 0 24px rgba(239,83,80,.28);
}
.server-icon-img,.rh-logo-img,.shop-tab-icon{
    width:44px;height:44px;border-radius:11px;flex-shrink:0;display:block;object-fit:cover;
}
.shop-tab-icon{width:22px;height:22px;border-radius:6px;display:inline-block;vertical-align:-5px;margin-right:6px}

.tag{
    display:inline-flex;align-items:center;gap:6px;
    padding:6px 14px;border-radius:999px;
    background:rgba(34,211,166,.1);border:1px solid rgba(34,211,166,.25);
    color:var(--accent2);font-size:.75rem;font-weight:600;letter-spacing:.04em;text-transform:uppercase;
}
.tag::before{content:'';width:6px;height:6px;border-radius:50%;background:var(--accent);box-shadow:0 0 8px var(--accent)}

.btn{
    border:none;cursor:pointer;font-weight:700;border-radius:var(--radius-sm);
    font-family:var(--font);transition:transform .2s,box-shadow .2s,background .2s;
}
.btn-g{
    background:linear-gradient(135deg,var(--accent),var(--accent-dark));
    color:#042f2e;padding:10px 22px;
    box-shadow:0 4px 20px var(--accent-glow);
}
.btn-g:hover{transform:translateY(-2px);box-shadow:0 8px 28px var(--accent-glow)}
.btn-g:active{transform:translateY(0)}

.glass-panel,.card,.online-box,.modal,.case-box,.server-card,.team-card,.rule-cat,.cabinet-card,.auth-box,.update-card{
    background:var(--card);
    backdrop-filter:blur(16px);
    border:1px solid var(--border);
    border-radius:var(--radius);
    box-shadow:var(--shadow);
}