:root{
    /* Colors */
    --bg:#0b0d10;
    --surface:#12151a;
    --surface-2:#171c22;
    --text:#eef2f7;
    --muted:#a7b0bf;
    --border:rgba(255,255,255,.09);
    --accent:#f6d443;     /* sponge yellow */
    --accent-2:#ff3b3b;   /* PvP red */
    --danger:#ff4d4f;
    --success:#2ee59d;
    --warning:#f6d443;
    --info:#4cc9ff;

    /* Effects */
    --radius-sm:12px;
    --radius-md:14px;
    --radius-lg:16px;
    --shadow-sm:0 8px 20px rgba(0,0,0,.35);
    --shadow-md:0 14px 36px rgba(0,0,0,.45);
    --shadow-lg:0 26px 70px rgba(0,0,0,.55);

    /* Spacing */
    --space-1:.35rem;
    --space-2:.6rem;
    --space-3:.9rem;
    --space-4:1.25rem;
    --space-5:1.8rem;
    --space-6:2.6rem;

    /* Typography */
    --font-sans:ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji";
    --h1:clamp(2.1rem, 4vw, 3.4rem);
    --h2:clamp(1.5rem, 2.4vw, 2.1rem);
    --h3:clamp(1.15rem, 1.8vw, 1.35rem);
    --body:1rem;
    --small:.92rem;

    /* Components */
    --focus-ring:0 0 0 .22rem rgba(246,212,67,.22), 0 0 0 .12rem rgba(255,59,59,.16);
    --card-hover:translateY(-3px);
    --btn-glow:0 10px 28px rgba(246,212,67,.15), 0 10px 28px rgba(255,59,59,.08);
    --grid-gap:1rem;
}

html, body { height: 100%; }
body{
    font-family:var(--font-sans);
    font-size:var(--body);
    background:
            radial-gradient(1200px 600px at 15% -10%, rgba(246,212,67,.16), transparent 60%),
            radial-gradient(900px 500px at 85% 0%, rgba(255,59,59,.14), transparent 60%),
            radial-gradient(900px 700px at 80% 90%, rgba(76,201,255,.08), transparent 65%),
            linear-gradient(180deg, #090b0e 0%, var(--bg) 100%);
    color:var(--text);
    overflow-x:hidden;
}

/* subtle noise without images */
body::before{
    content:"";
    position:fixed; inset:0;
    pointer-events:none;
    background:
            repeating-linear-gradient(0deg, rgba(255,255,255,.03) 0, rgba(255,255,255,.03) 1px, transparent 1px, transparent 3px);
    opacity:.14;
    mix-blend-mode:overlay;
    z-index:-1;
}

.f-white {
    color: whitesmoke;
}

a{ color:inherit; }
a:hover{ color:var(--text); }
.text-muted{ color:var(--muted) !important; }

.container{ max-width: 1120px; }
.section{
    padding: clamp(3.2rem, 6vw, 4.8rem) 0;
    position:relative;
}
.section + .section{
    border-top:1px solid var(--border);
    background: linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,0));
}

/* Navbar */
.navbar{
    backdrop-filter:saturate(160%) blur(10px);
    background: rgba(10,12,15,.72) !important;
    border-bottom:1px solid rgba(255,255,255,.08);
}
.brand-mark{
    width:34px; height:34px;
    border-radius: 10px;
    background:
            linear-gradient(135deg, rgba(246,212,67,.35), rgba(255,59,59,.15)),
            radial-gradient(12px 12px at 30% 30%, rgba(255,255,255,.22), transparent 70%),
            linear-gradient(180deg, rgba(255,255,255,.08), transparent 50%);
    border:1px solid rgba(246,212,67,.25);
    box-shadow: var(--shadow-sm);
    display:grid;
    place-items:center;
    position:relative;
    overflow:hidden;
}
.brand-mark::after{
    content:"";
    position:absolute; inset:-20%;
    background:
            linear-gradient(90deg, transparent, rgba(246,212,67,.16), transparent);
    transform: rotate(25deg);
    animation: shimmer 5.5s linear infinite;
    opacity:.75;
}
@keyframes shimmer{
    0%{ transform:translateX(-30%) rotate(25deg); }
    100%{ transform:translateX(30%) rotate(25deg); }
}
.brand-text{
    letter-spacing:.3px;
    font-weight:800;
    color: whitesmoke;
}
.nav-link{
    color:rgba(238,242,247,.78) !important;
    font-weight:600;
    letter-spacing:.2px;
    border-radius:10px;
    padding:.5rem .75rem !important;
    transition: background .15s ease, color .15s ease;
}
.nav-link:hover, .nav-link:focus{
    background: rgba(255,255,255,.05);
    color: var(--text) !important;
}

/* Buttons */
.btn{
    border-radius: var(--radius-md);
    font-weight:800;
    letter-spacing:.25px;
    padding:.72rem 1rem;
    border:1px solid transparent;
    transition: transform .12s ease, box-shadow .12s ease, background .12s ease, border-color .12s ease;
}
.btn:focus-visible{
    outline:none;
    box-shadow: var(--focus-ring) !important;
}
.btn-primary{
    background:
            linear-gradient(135deg, rgba(246,212,67,1) 0%, rgba(255,59,59,.95) 100%);
    color:#14161a;
    box-shadow: var(--btn-glow);
    border-color: rgba(246,212,67,.35);
}
.btn-primary:hover{
    transform: translateY(-1px);
    box-shadow: var(--shadow-md), var(--btn-glow);
    filter: saturate(1.05);
}
.btn-primary:active{
    transform: translateY(0);
    box-shadow: var(--shadow-sm);
    filter: saturate(.98);
}
.btn-soft{
    background: rgba(255,255,255,.06);
    border-color: rgba(255,255,255,.10);
    color: var(--text);
}
.btn-soft:hover{
    background: rgba(255,255,255,.09);
    border-color: rgba(246,212,67,.22);
    transform: translateY(-1px);
    box-shadow: var(--shadow-sm);
}
.btn-outline-accent{
    background: transparent;
    border-color: rgba(246,212,67,.35);
    color: var(--text);
}
.btn-outline-accent:hover{
    background: rgba(246,212,67,.10);
    border-color: rgba(246,212,67,.55);
    transform: translateY(-1px);
    box-shadow: var(--shadow-sm);
}

/* Cards */
.card{
    background: linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.03));
    border:1px solid rgba(255,255,255,.10);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
}
.card-strong{
    background:
            radial-gradient(800px 300px at 20% 0%, rgba(246,212,67,.14), transparent 60%),
            radial-gradient(700px 260px at 90% 10%, rgba(255,59,59,.12), transparent 55%),
            linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.03));
    border-color: rgba(246,212,67,.20);
}
.hover-lift{
    transition: transform .14s ease, border-color .14s ease, box-shadow .14s ease;
}
.hover-lift:hover{
    transform: var(--card-hover);
    border-color: rgba(246,212,67,.25);
    box-shadow: var(--shadow-md);
}

/* Badges & chips */
.chip{
    display:inline-flex;
    align-items:center;
    gap:.45rem;
    padding:.42rem .7rem;
    border-radius: 999px;
    border:1px solid rgba(255,255,255,.10);
    background: rgba(255,255,255,.05);
    color: rgba(238,242,247,.88);
    font-weight:700;
    font-size: .9rem;
    white-space:nowrap;
}
.chip i{ opacity:.9; }
.badge-soft{
    border-radius:999px;
    padding:.42rem .65rem;
    font-weight:800;
    letter-spacing:.2px;
    border:1px solid rgba(255,255,255,.10);
    background: rgba(255,255,255,.06);
    color: rgba(238,242,247,.90);
}
.badge-online{
    background: rgba(46,229,157,.14);
    border-color: rgba(46,229,157,.35);
    color: rgba(46,229,157,1);
}
.badge-offline{
    background: rgba(255,77,79,.14);
    border-color: rgba(255,77,79,.35);
    color: rgba(255,77,79,1);
}
.mono{
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
    letter-spacing:.2px;
}

/* Inputs */
.form-control, .form-select{
    background: rgba(255,255,255,.05);
    border:1px solid rgba(255,255,255,.12);
    border-radius: var(--radius-md);
    color: var(--text);
    padding:.72rem .9rem;
}
.form-control::placeholder{ color: rgba(167,176,191,.7); }
.form-control:focus, .form-select:focus{
    background: rgba(255,255,255,.06);
    border-color: rgba(246,212,67,.35);
    box-shadow: var(--focus-ring);
    color: var(--text);
}

/* Hero */
.hero{
    padding: clamp(3.2rem, 7vw, 5.2rem) 0 2.2rem;
    position:relative;
}
.hero::after{
    content:"";
    position:absolute; left:0; right:0; bottom:-1px; height:120px;
    background: linear-gradient(180deg, transparent, rgba(11,13,16,1));
    pointer-events:none;
}
.hero-title{
    font-size: var(--h1);
    line-height:1.06;
    letter-spacing:-.6px;
    font-weight: 900;
    margin:0;
}
.hero-title .accent{
    background: linear-gradient(135deg, rgba(246,212,67,1), rgba(255,59,59,1));
    -webkit-background-clip:text;
    background-clip:text;
    color:transparent;
}
.hero-lead{
    color: rgba(238,242,247,.84);
    font-size: clamp(1.04rem, 1.4vw, 1.18rem);
    line-height:1.55;
    margin-top: var(--space-3);
    max-width: 58ch;
}
.hero-grid{
    display:grid;
    gap: var(--grid-gap);
}
@media (min-width: 992px){
    .hero-grid{ grid-template-columns: 1.2fr .8fr; align-items: stretch; }
}

/* Blocky SVG style */
.blocky{
    border-radius: var(--radius-lg);
    border: 1px solid rgba(255,255,255,.10);
    background:
            linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.03));
    box-shadow: var(--shadow-sm);
    overflow:hidden;
    position:relative;
    min-height: 220px;
}
.blocky::before{
    content:"";
    position:absolute; inset:0;
    background:
            linear-gradient(90deg, rgba(246,212,67,.10), transparent 40%),
            linear-gradient(180deg, rgba(255,59,59,.09), transparent 55%);
    opacity:.9;
    pointer-events:none;
}

/* Status panel */
.status-panel{
    display:flex;
    flex-direction:column;
    gap: .8rem;
}
.status-row{
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap: .75rem;
}
.status-motd{
    color: rgba(238,242,247,.92);
    font-weight:800;
    letter-spacing:.2px;
    line-height:1.25;
}
.kpi{
    display:grid;
    grid-template-columns: repeat(3, minmax(0,1fr));
    gap:.65rem;
}
.kpi .k{
    border-radius: 14px;
    border:1px solid rgba(255,255,255,.10);
    background: rgba(255,255,255,.04);
    padding:.72rem .85rem;
}
.k .label{
    color: rgba(167,176,191,.88);
    font-size: .82rem;
    font-weight:700;
    letter-spacing:.2px;
}
.k .val{
    font-weight:900;
    font-size: 1.05rem;
    margin-top:.15rem;
    color: whitesmoke;
}

/* Section headings */
.eyebrow{
    color: rgba(246,212,67,.95);
    font-weight: 900;
    letter-spacing: .22em;
    text-transform: uppercase;
    font-size: .78rem;
}
.section-title{
    font-size: var(--h2);
    font-weight: 900;
    letter-spacing:-.35px;
    margin: .35rem 0 0;
}
.section-sub{
    color: rgba(167,176,191,.88);
    margin-top:.7rem;
    max-width: 70ch;
}

/* Feature icon bubble */
.icon-bubble{
    width:42px; height:42px;
    border-radius: 14px;
    display:grid;
    place-items:center;
    background:
            radial-gradient(16px 16px at 30% 30%, rgba(255,255,255,.18), transparent 70%),
            linear-gradient(135deg, rgba(246,212,67,.18), rgba(255,59,59,.10));
    border:1px solid rgba(246,212,67,.18);
    box-shadow: var(--shadow-sm);
    color: rgba(246,212,67,.98);
}
.icon-bubble.red{ color: rgba(255,59,59,.98); border-color: rgba(255,59,59,.18); background: linear-gradient(135deg, rgba(255,59,59,.14), rgba(76,201,255,.06)); }
.icon-bubble.cyan{ color: rgba(76,201,255,.98); border-color: rgba(76,201,255,.18); background: linear-gradient(135deg, rgba(76,201,255,.12), rgba(246,212,67,.06)); }

/* Pills / tabs */
.pillbar{
    display:inline-flex;
    padding:.35rem;
    border-radius: 999px;
    border:1px solid rgba(255,255,255,.12);
    background: rgba(255,255,255,.04);
    gap:.35rem;
}
.pill{
    border:0;
    background: transparent;
    color: rgba(238,242,247,.80);
    border-radius: 999px;
    padding:.52rem .85rem;
    font-weight:900;
    letter-spacing:.2px;
    transition: background .12s ease, color .12s ease;
}
.pill[aria-selected="true"]{
    background: rgba(246,212,67,.14);
    color: rgba(246,212,67,1);
}
.pill:focus-visible{
    outline:none;
    box-shadow: var(--focus-ring);
}

/* Tables */
.table{
    --bs-table-bg: transparent;
    --bs-table-color: var(--text);
    --bs-table-border-color: rgba(255,255,255,.10);
}
.table thead th{
    color: rgba(167,176,191,.88);
    text-transform: uppercase;
    letter-spacing:.16em;
    font-size:.74rem;
    border-bottom:1px solid rgba(255,255,255,.10) !important;
    padding-top: .9rem;
    padding-bottom: .9rem;
}
.table tbody td{
    vertical-align:middle;
    padding-top: .95rem;
    padding-bottom: .95rem;
    border-top:1px solid rgba(255,255,255,.08) !important;
}

/* Accordions */
.accordion{
    --bs-accordion-bg: transparent;
    --bs-accordion-border-color: rgba(255,255,255,.10);
    --bs-accordion-active-bg: rgba(246,212,67,.10);
    --bs-accordion-active-color: var(--text);
    --bs-accordion-btn-focus-box-shadow: none;
    --bs-accordion-border-radius: var(--radius-lg);
}
.accordion-item{
    background: rgba(255,255,255,.03);
    border:1px solid rgba(255,255,255,.10);
    border-radius: var(--radius-lg);
    overflow:hidden;
    box-shadow: var(--shadow-sm);
    margin-bottom:.85rem;
}
.accordion-button{
    background: transparent;
    color: rgba(238,242,247,.92);
    font-weight: 900;
    letter-spacing:.1px;
    padding: 1.05rem 1.05rem;
}
.accordion-button:not(.collapsed){
    box-shadow: inset 0 -1px 0 rgba(255,255,255,.08);
}
.accordion-button:focus-visible{
    outline:none;
    box-shadow: var(--focus-ring);
    border-radius: var(--radius-lg);
}
.accordion-body{
    color: rgba(167,176,191,.92);
    line-height:1.6;
    padding: 1rem 1.05rem 1.2rem;
}

/* Footer */
footer{
    border-top:1px solid rgba(255,255,255,.10);
    background: rgba(10,12,15,.55);
}
.footer-link{
    color: rgba(167,176,191,.92);
    text-decoration:none;
    padding:.28rem .4rem;
    border-radius:10px;
    display:inline-flex;
    gap:.45rem;
    align-items:center;
}
.footer-link:hover, .footer-link:focus{
    color: var(--text);
    background: rgba(255,255,255,.05);
    outline:none;
    box-shadow: none;
}

/* Utility */
.divider-dots{
    height:1px;
    background: radial-gradient(circle, rgba(246,212,67,.28) 0 1px, transparent 2px) left/14px 1px repeat-x;
    opacity:.9;
    border:0;
    margin: 1.2rem 0;
}
.soft-border{ border:1px solid rgba(255,255,255,.10); }
.muted-border{ border-color: rgba(255,255,255,.10) !important; }
.subtle{
    color: rgba(167,176,191,.92);
    font-size: var(--small);
}

/* Toast */
.toast{
    border-radius: var(--radius-lg);
    border:1px solid rgba(255,255,255,.12);
    background: rgba(18,21,26,.92);
    backdrop-filter: blur(10px);
    box-shadow: var(--shadow-md);
    color: var(--text);
}

/* Reduce motion */
@media (prefers-reduced-motion: reduce){
    *{ scroll-behavior:auto !important; transition:none !important; animation:none !important; }
}

#statusBadge {
    padding: .55rem .85rem;
    font-weight: 800;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    gap: .4rem;
}