:root
{
    --bg:#07111f;
    --panel:#0e1c2f;
    --line:#20344e;
    --text:#edf4ff;
    --muted:#93a8c0;
    --accent:#34d399;
    --blue:#38bdf8;
    --red:#fb7185;
    --gold:#fbbf24;
}

*
{
    box-sizing:border-box;
}

body
{
    margin:0;
    background:
        linear-gradient(
            180deg,
            #07111f,
            #091827
        );
    color:var(--text);
    font-family:
        system-ui,
        -apple-system,
        Segoe UI,
        Roboto,
        sans-serif;
    min-height:100vh;
}

.top
{
    display:flex;
    justify-content:space-between;
    align-items:center;
    padding:
        18px
        max(
            20px,
            calc(
                (100% - 1180px)/2
            )
        );
    border-bottom:
        1px solid
        var(--line);
    background:#081522dd;
    position:sticky;
    top:0;
    z-index:5;
    backdrop-filter:
        blur(10px);
}

.brand
{
    font-weight:900;
    font-size:22px;
    letter-spacing:.08em;
}

.sub
{
    font-size:11px;
    color:var(--blue);
    letter-spacing:.22em;
}

.top nav
{
    display:flex;
    gap:18px;
}

.top a
{
    color:var(--text);
    text-decoration:none;
    font-size:14px;
}

.wrap
{
    max-width:1180px;
    margin:auto;
    padding:
        28px
        18px
        70px;
}

.narrow
{
    max-width:500px;
}

.card
{
    background:
        rgba(
            14,
            28,
            47,
            .92
        );
    border:
        1px solid
        var(--line);
    border-radius:18px;
    padding:22px;
    margin-bottom:20px;
    box-shadow:
        0
        12px
        36px
        #0003;
}

.hero
{
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:24px;
}

.hero h1
{
    font-size:
        clamp(
            28px,
            5vw,
            48px
        );
    margin:
        12px
        0
        5px;
}

.counter
{
    text-align:center;
    border-left:
        1px solid
        var(--line);
    padding-left:30px;
}

.counter strong
{
    display:block;
    font-size:52px;
}

.counter span
{
    color:var(--muted);
    font-size:12px;
    letter-spacing:.15em;
}

.badge
{
    display:inline-block;
    padding:
        6px
        10px;
    border-radius:999px;
    font-size:12px;
    font-weight:900;
    letter-spacing:.14em;
}

.badge.live
{
    background:#123d31;
    color:#6ee7b7;
    border:
        1px solid
        #2f8f73;
}

.badge.off
{
    background:#35202a;
    color:#fda4af;
    border:
        1px solid
        #7f3345;
}

.muted
{
    color:var(--muted);
}

h1,
h2
{
    margin-top:0;
}

.gridform
{
    display:grid;
    grid-template-columns:
        repeat(
            2,
            1fr
        );
    gap:14px;
}

.wide
{
    grid-column:
        1 / -1;
}

label
{
    display:block;
    color:var(--muted);
    font-size:13px;
    margin:
        0
        0
        6px;
}

input,
select
{
    width:100%;
    background:#071321;
    border:
        1px solid
        #29415f;
    color:var(--text);
    padding:
        11px
        12px;
    border-radius:9px;
    font:inherit;
}

button
{
    border:
        1px solid
        #36506f;
    background:#142a43;
    color:white;
    padding:
        9px
        12px;
    border-radius:9px;
    cursor:pointer;
}

.primary
{
    background:#087c5f;
    border-color:#14a37e;
    font-weight:800;
    padding:
        11px
        18px;
}

.dangerbtn
{
    background:#5d1f2b;
    border-color:#9f384e;
}

.small
{
    padding:
        6px
        8px;
}

.actions
{
    display:flex;
    align-items:center;
    gap:14px;
}

.sectionhead
{
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:20px;
}

.tablewrap
{
    overflow:auto;
}

table
{
    width:100%;
    border-collapse:collapse;
    min-width:760px;
}

th,
td
{
    padding:
        12px
        10px;
    text-align:left;
    border-bottom:
        1px solid
        var(--line);
    font-size:14px;
}

th
{
    font-size:11px;
    letter-spacing:.08em;
    color:var(--muted);
    text-transform:uppercase;
}

.ackrow
{
    background:#0d2d28;
}

.ack
{
    font-size:12px;
    font-weight:800;
}

.ack.yes
{
    color:#6ee7b7;
}

.ack.wait
{
    color:var(--gold);
}

.danger
{
    color:var(--red);
}

.empty
{
    text-align:center!important;
    color:var(--muted);
    padding:30px!important;
}

.hidden
{
    display:none!important;
}

.error
{
    background:#4d1d29;
    border:
        1px solid
        #8f3449;
    padding:10px;
    border-radius:8px;
    margin-bottom:14px;
}


@media(
    max-width:700px
)
{

    .top
    {
        align-items:flex-start;
        gap:14px;
        flex-direction:column;
    }


    .hero
    {
        align-items:flex-start;
        flex-direction:column;
    }


    .counter
    {
        border-left:0;
        border-top:
            1px solid
            var(--line);
        padding:
            15px
            0
            0;
        width:100%;
    }


    .gridform
    {
        grid-template-columns:1fr;
    }


    .top nav
    {
        gap:12px;
        flex-wrap:wrap;
    }
}