/* =============================================================================
   UMBRELLA SWARM

   Hand-written rather than Bootstrap. A framework would be ~30 KB over the wire
   for a grid and some buttons, and it would still need overriding to stop
   looking like every other admin template. This is under 10 KB, has no CDN to
   wait on, and the theme is in the file rather than fighting it.

   The look: the biohazard palette CS 1.6 zombie servers have always used -
   near-black, toxic green, hazard amber - with the containment-label geometry
   (thin rules, uppercase labels, tight tracking) doing the theming instead of
   gore. It reads as the subject without being unpleasant to use, and it stays
   legible on a phone in daylight.
   ============================================================================= */

:root {
    --bg:        #0b0f0d;
    --bg-2:      #111714;
    --panel:     #151d19;
    --panel-2:   #1b2521;
    --line:      #24322c;
    --line-2:    #2f4038;

    --ink:       #d8e3dd;
    --ink-dim:   #8fa39a;
    --ink-faint: #5d6f67;

    --acid:      #7dd84f;   /* primary - biohazard green */
    --acid-dim:  #4e8f31;
    --amber:     #f0a830;   /* warnings, timed things */
    --rust:      #d2523f;   /* permanent, destructive */
    --steel:     #6f9bd1;   /* neutral info */

    --radius:    4px;
    --shadow:    0 2px 14px rgba(0,0,0,.5);

    --mono: ui-monospace, "SF Mono", "Cascadia Mono", Menlo, Consolas, monospace;
    --sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
    margin: 0;
    background: var(--bg);
    color: var(--ink);
    font: 15px/1.55 var(--sans);

    /* A very faint diagonal hazard weave. Two gradients, no image request. */
    background-image:
        repeating-linear-gradient(135deg,
            rgba(125,216,79,.022) 0 2px, transparent 2px 9px),
        radial-gradient(1100px 500px at 50% -10%, rgba(125,216,79,.07), transparent 70%);
    background-attachment: fixed;
    min-height: 100vh;
}

a { color: var(--acid); text-decoration: none; }
a:hover { color: #a3ec7c; text-decoration: underline; }

h1, h2, h3, h4 {
    margin: 0 0 .6rem;
    font-weight: 700;
    letter-spacing: .04em;
    line-height: 1.2;
}

h1 { font-size: 1.5rem; text-transform: uppercase; }
h2 { font-size: 1.15rem; text-transform: uppercase; color: var(--ink); }
h3 { font-size: 1rem; }

code, .mono, .num { font-family: var(--mono); font-size: .92em; }

/* -----------------------------------------------------------------------------
   Layout
   -------------------------------------------------------------------------- */
.wrap { max-width: 1180px; margin: 0 auto; padding: 0 16px; }

.grid { display: grid; gap: 14px; }
.g2 { grid-template-columns: repeat(2, 1fr); }
.g3 { grid-template-columns: repeat(3, 1fr); }
.g4 { grid-template-columns: repeat(4, 1fr); }
.g-side { grid-template-columns: 300px 1fr; align-items: start; }

.row { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.row.tight { gap: 6px; }
.spread { display: flex; gap: 10px; align-items: center; justify-content: space-between; flex-wrap: wrap; }
.grow { flex: 1 1 auto; min-width: 0; }
.right { margin-left: auto; }

.mt { margin-top: 14px; }
.mt2 { margin-top: 26px; }
.mb { margin-bottom: 14px; }
.hide { display: none !important; }

/* -----------------------------------------------------------------------------
   Header
   -------------------------------------------------------------------------- */
header.top {
    position: sticky;
    top: 0;
    z-index: 40;
    background: rgba(11,15,13,.94);
    backdrop-filter: blur(8px);
    border-bottom: 1px solid var(--line);
}

.top .wrap { display: flex; align-items: center; gap: 14px; height: 58px; }

.brand {
    display: flex;
    align-items: center;
    gap: 10px;
    font-weight: 800;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--ink);
    white-space: nowrap;
    min-width: 0;
}
.brand:hover { text-decoration: none; color: #fff; }

.brand .mark {
    width: 26px; height: 26px;
    flex: 0 0 26px;
    border: 2px solid var(--acid);
    border-radius: 50%;
    display: grid; place-items: center;
    color: var(--acid);
    font-size: 13px;
    box-shadow: 0 0 12px rgba(125,216,79,.25);
}

/* The name and tagline must be allowed to shrink, or a long title pushes the
   nav off the side of a phone and the page scrolls sideways */
.brand .txt { min-width: 0; overflow: hidden; }
.brand .txt b { display: block; font-size: 15px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.brand small {
    display: block;
    font-size: 9px;
    letter-spacing: .2em;
    color: var(--ink-faint);
    font-weight: 600;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

nav.main { display: flex; align-items: center; gap: 2px; margin-left: auto; }

nav.main a {
    padding: 7px 13px;
    border-radius: var(--radius);
    color: var(--ink-dim);
    font-size: 13px;
    font-weight: 600;
    letter-spacing: .06em;
    text-transform: uppercase;
    white-space: nowrap;
}
nav.main a:hover { background: var(--panel); color: var(--ink); text-decoration: none; }
nav.main a.on { background: var(--panel-2); color: var(--acid); box-shadow: inset 0 -2px 0 var(--acid); }

/* -----------------------------------------------------------------------------
   Who you are signed in as.

   A chip rather than loose text in the nav: the previous version put the name
   and role straight into the menu row, where they read as two more menu items
   that happened not to be clickable.
   -------------------------------------------------------------------------- */
.whoami {
    display: flex; align-items: center; gap: 8px;
    padding: 5px 6px 5px 10px;
    border: 1px solid var(--line-2);
    border-radius: 100px;
    background: var(--panel);
    white-space: nowrap;
    margin-left: 6px;
}
.whoami .nm { font-size: 13px; font-weight: 600; color: var(--ink); }
.whoami .rl {
    font-size: 9px; letter-spacing: .14em; text-transform: uppercase; font-weight: 700;
    color: var(--bg); background: var(--acid-dim);
    padding: 2px 7px; border-radius: 100px;
}
.whoami .out {
    background: none; border: 0; cursor: pointer; color: var(--ink-faint);
    font-size: 15px; line-height: 1; padding: 3px 6px; border-radius: 100px;
}
.whoami .out:hover { color: var(--rust); background: rgba(210,82,63,.12); }

.burger {
    display: none;
    background: none; border: 1px solid var(--line-2);
    color: var(--ink); border-radius: var(--radius);
    width: 38px; height: 34px;
    margin-left: auto;
    cursor: pointer;
    position: relative;
    flex: 0 0 auto;
}

/* Three bars drawn with borders, so there is no icon font and no image request.
   They fold into an X when the menu is open. */
.burger i, .burger i:before, .burger i:after {
    position: absolute; left: 9px; right: 9px; height: 2px;
    background: var(--ink); border-radius: 2px;
    transition: transform .18s ease, opacity .18s ease;
}
.burger i { top: 50%; margin-top: -1px; }
.burger i:before, .burger i:after { content: ""; left: 0; right: 0; }
.burger i:before { top: -6px; }
.burger i:after  { top: 6px; }

.burger[aria-expanded="true"] i { background: transparent; }
.burger[aria-expanded="true"] i:before { transform: translateY(6px) rotate(45deg); }
.burger[aria-expanded="true"] i:after  { transform: translateY(-6px) rotate(-45deg); }

/* -----------------------------------------------------------------------------
   Panels
   -------------------------------------------------------------------------- */
.card {
    background: linear-gradient(180deg, var(--panel), var(--bg-2));
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 16px;
}

.card > h2:first-child, .card > h3:first-child { margin-top: 0; }

.card.flush { padding: 0; overflow: hidden; }

.card-head {
    padding: 11px 16px;
    border-bottom: 1px solid var(--line);
    background: var(--panel-2);
    display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
}
.card-head h2, .card-head h3 { margin: 0; }

/* The hero strip - the only decorative element on the site */
.hero {
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background:
        linear-gradient(180deg, rgba(125,216,79,.06), transparent 60%),
        linear-gradient(180deg, var(--panel), var(--bg-2));
    padding: 30px 24px;
    position: relative;
    overflow: hidden;
}

.hero:before {
    /* Hazard tape down the left edge */
    content: "";
    position: absolute; inset: 0 auto 0 0; width: 5px;
    background: repeating-linear-gradient(135deg,
        var(--acid) 0 8px, var(--bg-2) 8px 16px);
    opacity: .55;
}

.hero h1 { font-size: 2rem; letter-spacing: .06em; }
.hero p { color: var(--ink-dim); margin: 0; max-width: 62ch; }

.eyebrow {
    font-size: 10px; letter-spacing: .28em; text-transform: uppercase;
    color: var(--acid-dim); font-weight: 700; margin-bottom: 8px;
}

/* -----------------------------------------------------------------------------
   Stat tiles
   -------------------------------------------------------------------------- */
.stat {
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 13px 15px;
}
.stat .k { font-size: 10px; letter-spacing: .18em; text-transform: uppercase; color: var(--ink-faint); font-weight: 700; }
.stat .v { font: 700 1.6rem/1.2 var(--mono); color: var(--acid); margin-top: 2px; }
.stat.warn .v { color: var(--amber); }
.stat.bad  .v { color: var(--rust); }
.stat.info .v { color: var(--steel); }

/* -----------------------------------------------------------------------------
   Tables
   -------------------------------------------------------------------------- */
.tbl-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }

table.tbl { width: 100%; border-collapse: collapse; font-size: 14px; }

table.tbl th {
    text-align: left;
    padding: 9px 12px;
    font-size: 10px; letter-spacing: .16em; text-transform: uppercase;
    color: var(--ink-faint); font-weight: 700;
    border-bottom: 1px solid var(--line-2);
    background: var(--panel-2);
    white-space: nowrap;
    position: sticky; top: 0;
}

table.tbl td {
    padding: 9px 12px;
    border-bottom: 1px solid var(--line);
    vertical-align: middle;
}

table.tbl tbody tr:hover { background: rgba(125,216,79,.05); }
table.tbl tbody tr.click { cursor: pointer; }
table.tbl td.num, table.tbl td .num { font-family: var(--mono); }
table.tbl .dim { color: var(--ink-dim); }

.empty { padding: 34px 16px; text-align: center; color: var(--ink-faint); }

/* -----------------------------------------------------------------------------
   Badges
   -------------------------------------------------------------------------- */
.badge {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 100px;
    font-size: 10px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
    border: 1px solid currentColor;
    white-space: nowrap;
}
.b-active  { color: var(--rust); }
.b-perm    { color: var(--rust); background: rgba(210,82,63,.12); }
.b-expired { color: var(--ink-faint); }
.b-lifted  { color: var(--acid); }
.b-open    { color: var(--amber); }
.b-answered{ color: var(--steel); }
.b-accepted{ color: var(--acid); }
.b-rejected{ color: var(--ink-faint); }
.b-new     { color: var(--amber); }
.b-paid    { color: var(--steel); }
.b-delivered { color: var(--acid); }
.b-cancelled { color: var(--ink-faint); }

.dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; background: var(--ink-faint); }
.dot.up { background: var(--acid); box-shadow: 0 0 8px var(--acid); }
.dot.down { background: var(--rust); }

/* -----------------------------------------------------------------------------
   Forms
   -------------------------------------------------------------------------- */
label.f { display: block; margin-bottom: 12px; }

label.f > span {
    display: block;
    font-size: 10px; letter-spacing: .16em; text-transform: uppercase;
    color: var(--ink-faint); font-weight: 700; margin-bottom: 5px;
}

input[type=text], input[type=password], input[type=email], input[type=number],
select, textarea {
    width: 100%;
    background: var(--bg);
    border: 1px solid var(--line-2);
    border-radius: var(--radius);
    color: var(--ink);
    padding: 9px 11px;
    font: inherit;
    font-size: 14px;
}

input:focus, select:focus, textarea:focus {
    outline: none;
    border-color: var(--acid-dim);
    box-shadow: 0 0 0 3px rgba(125,216,79,.13);
}

input::placeholder, textarea::placeholder { color: var(--ink-faint); }
textarea { min-height: 110px; resize: vertical; line-height: 1.5; }
select { appearance: none; padding-right: 30px;
    background-image: linear-gradient(45deg, transparent 50%, var(--ink-dim) 50%),
                      linear-gradient(135deg, var(--ink-dim) 50%, transparent 50%);
    background-position: right 14px center, right 9px center;
    background-size: 5px 5px, 5px 5px;
    background-repeat: no-repeat; }

.hint { font-size: 12px; color: var(--ink-faint); margin-top: 4px; }

/* -----------------------------------------------------------------------------
   Buttons
   -------------------------------------------------------------------------- */
.btn {
    display: inline-flex; align-items: center; gap: 7px;
    padding: 9px 16px;
    border-radius: var(--radius);
    border: 1px solid var(--line-2);
    background: var(--panel-2);
    color: var(--ink);
    font: 600 13px/1 var(--sans);
    letter-spacing: .06em; text-transform: uppercase;
    cursor: pointer;
    white-space: nowrap;
    transition: background .12s, border-color .12s, color .12s;
}
.btn:hover { background: #22302a; border-color: var(--acid-dim); text-decoration: none; color: var(--ink); }
.btn:disabled, .btn.busy { opacity: .5; pointer-events: none; }

.btn.primary { background: var(--acid-dim); border-color: var(--acid); color: #071008; }
.btn.primary:hover { background: var(--acid); color: #071008; }
.btn.danger { border-color: var(--rust); color: var(--rust); background: rgba(210,82,63,.1); }
.btn.danger:hover { background: var(--rust); color: #fff; }
.btn.ghost { background: none; }
.btn.sm { padding: 5px 10px; font-size: 11px; }
.btn.block { width: 100%; justify-content: center; }

.tabs { display: flex; gap: 4px; flex-wrap: wrap; }
.tabs button {
    background: none; border: 1px solid transparent; border-radius: var(--radius);
    color: var(--ink-dim); padding: 6px 12px; cursor: pointer;
    font: 600 12px/1 var(--sans); letter-spacing: .08em; text-transform: uppercase;
}
.tabs button:hover { color: var(--ink); background: var(--panel-2); }
.tabs button.on { color: var(--acid); border-color: var(--line-2); background: var(--panel-2); }

/* -----------------------------------------------------------------------------
   Store
   -------------------------------------------------------------------------- */
.svc {
    display: flex; flex-direction: column;
    background: linear-gradient(180deg, var(--panel), var(--bg-2));
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 20px;
    position: relative;
}
.svc.feature { border-color: var(--acid-dim); box-shadow: 0 0 0 1px rgba(125,216,79,.12), var(--shadow); }
.svc h3 { font-size: 1.25rem; text-transform: uppercase; letter-spacing: .06em; }
.svc .price { font: 800 2rem/1 var(--mono); color: var(--acid); margin: 6px 0 2px; }
.svc .per { font-size: 12px; color: var(--ink-faint); }
.svc p { color: var(--ink-dim); font-size: 14px; flex: 1 1 auto; }

/* -----------------------------------------------------------------------------
   Server cards
   -------------------------------------------------------------------------- */
.srv {
    display: block;
    background: linear-gradient(180deg, var(--panel), var(--bg-2));
    border: 1px solid var(--line);
    border-left: 3px solid var(--ink-faint);
    border-radius: var(--radius);
    padding: 16px 18px;
    color: inherit;
}
.srv:hover { text-decoration: none; border-color: var(--line-2); background: var(--panel-2); }
.srv.up { border-left-color: var(--acid); }
.srv.down { border-left-color: var(--rust); opacity: .7; }

.srv h3 { margin: 0; font-size: 1.05rem; }
.srv .meta { display: flex; gap: 18px; flex-wrap: wrap; margin-top: 10px; }
.srv .meta > div { min-width: 68px; }
.srv .meta .k { font-size: 9px; letter-spacing: .16em; text-transform: uppercase; color: var(--ink-faint); font-weight: 700; }
.srv .meta .v { font-family: var(--mono); font-size: 14px; color: var(--ink); }

/* How full the server is, at a glance */
.bar { height: 4px; background: var(--bg); border-radius: 4px; overflow: hidden; margin-top: 12px; }
.bar > i { display: block; height: 100%; background: var(--acid-dim); }
.bar > i.hot { background: var(--amber); }
.bar > i.full { background: var(--rust); }

.copy {
    font-family: var(--mono); font-size: 13px;
    background: var(--bg); border: 1px solid var(--line-2); border-radius: var(--radius);
    padding: 4px 9px; cursor: pointer; color: var(--ink);
}
.copy:hover { border-color: var(--acid-dim); color: var(--acid); }

/* -----------------------------------------------------------------------------
   Appeal thread
   -------------------------------------------------------------------------- */
.msg {
    border: 1px solid var(--line);
    border-left: 3px solid var(--line-2);
    border-radius: var(--radius);
    padding: 11px 14px;
    margin-bottom: 10px;
    background: var(--bg-2);
}
.msg.staff { border-left-color: var(--acid); background: rgba(125,216,79,.05); }
.msg .who { font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-faint); font-weight: 700; margin-bottom: 5px; }
.msg .who b { color: var(--ink); }
.msg.staff .who b { color: var(--acid); }
.msg .body { white-space: pre-wrap; word-break: break-word; }

/* -----------------------------------------------------------------------------
   Toasts and dialogs
   -------------------------------------------------------------------------- */
#toasts { position: fixed; right: 14px; bottom: 14px; z-index: 90; display: flex; flex-direction: column; gap: 8px; max-width: 340px; }

.toast {
    background: var(--panel-2);
    border: 1px solid var(--line-2);
    border-left: 3px solid var(--acid);
    border-radius: var(--radius);
    padding: 10px 14px;
    box-shadow: var(--shadow);
    font-size: 14px;
    animation: slide .18s ease-out;
}
.toast.err { border-left-color: var(--rust); }
@keyframes slide { from { opacity: 0; transform: translateY(8px); } }

.modal-bg {
    position: fixed; inset: 0; z-index: 80;
    background: rgba(4,7,6,.78);
    display: grid; place-items: center;
    padding: 16px;
}
.modal {
    background: var(--panel); border: 1px solid var(--line-2);
    border-radius: var(--radius); box-shadow: var(--shadow);
    width: min(560px, 100%); max-height: 88vh; overflow: auto;
}
.modal .card-head { position: sticky; top: 0; }
.modal .body { padding: 16px; }
.modal .foot { padding: 12px 16px; border-top: 1px solid var(--line); display: flex; gap: 8px; justify-content: flex-end; }

/* -----------------------------------------------------------------------------
   Live indicator
   -------------------------------------------------------------------------- */
.live { display: inline-flex; align-items: center; gap: 6px; font-size: 10px;
        letter-spacing: .16em; text-transform: uppercase; color: var(--ink-faint); font-weight: 700; }
.live .dot { animation: pulse 2.4s infinite; }
@keyframes pulse { 0%,100% { opacity: 1; } 50% { opacity: .3; } }

.skel { background: linear-gradient(90deg, var(--panel) 25%, var(--panel-2) 50%, var(--panel) 75%);
        background-size: 300% 100%; animation: sweep 1.2s infinite; border-radius: var(--radius); height: 14px; }
@keyframes sweep { from { background-position: 100% 0; } to { background-position: -100% 0; } }

footer.bot {
    margin-top: 40px; padding: 22px 0 34px;
    border-top: 1px solid var(--line);
    color: var(--ink-faint); font-size: 13px;
}

/* -----------------------------------------------------------------------------
   Admin shell
   -------------------------------------------------------------------------- */
.side { position: sticky; top: 72px; }
.side a {
    display: block; padding: 8px 12px; border-radius: var(--radius);
    color: var(--ink-dim); font-size: 13px; font-weight: 600; letter-spacing: .05em;
}
.side a:hover { background: var(--panel); color: var(--ink); text-decoration: none; }
.side a.on { background: var(--panel-2); color: var(--acid); box-shadow: inset 2px 0 0 var(--acid); }
.side a .pill { float: right; background: var(--rust); color: #fff; border-radius: 100px;
                padding: 0 7px; font-size: 10px; line-height: 17px; }

/* -----------------------------------------------------------------------------
   Phones

   The tables scroll sideways rather than reflowing into cards: a ban list is
   read by scanning down one column, and stacking every row into a block breaks
   exactly that.
   -------------------------------------------------------------------------- */
@media (max-width: 900px) {
    .g4 { grid-template-columns: repeat(2, 1fr); }
    .g3 { grid-template-columns: 1fr; }
    .g-side { grid-template-columns: 1fr; }
    .side { position: static; }
}

@media (max-width: 820px) {
    body { font-size: 14px; }
    .g2 { grid-template-columns: 1fr; }
    .hero { padding: 22px 18px; }
    .hero h1 { font-size: 1.4rem; }

    .burger { display: block; }

    /* -------------------------------------------------------------------------
       The menu as a drop-down panel.

       position:absolute rather than a flex row: as a row it stayed in the
       header, made it taller than the viewport was willing to give, and the
       browser answered by zooming the whole page out.
       ---------------------------------------------------------------------- */
    nav.main {
        display: none;
        position: absolute; top: 58px; left: 0; right: 0;
        flex-direction: column; align-items: stretch; gap: 2px;
        background: var(--bg-2);
        border-bottom: 1px solid var(--line);
        box-shadow: var(--shadow);
        padding: 8px;
        max-height: calc(100vh - 58px);
        overflow-y: auto;
    }
    nav.main.open { display: flex; }
    nav.main a { padding: 12px 14px; font-size: 14px; }
    nav.main a.on { box-shadow: inset 3px 0 0 var(--acid); }

    .whoami { margin: 6px 0 2px; justify-content: space-between; border-radius: var(--radius); }

    .top .wrap { gap: 10px; }
    .brand .txt b { font-size: 14px; }

    table.tbl { font-size: 13px; }
    table.tbl th, table.tbl td { padding: 8px 10px; }
    #toasts { left: 14px; right: 14px; max-width: none; }
    .modal .foot { flex-wrap: wrap; }
    .modal .foot .btn { flex: 1 1 auto; justify-content: center; }
}

/* -----------------------------------------------------------------------------
   Nothing may push the page sideways.

   A single wide table or a long server name used to make the document wider
   than the screen; mobile browsers respond by zooming out until it fits, which
   shrinks all the text at once. Tables scroll inside their own box instead.
   -------------------------------------------------------------------------- */
html, body { max-width: 100%; overflow-x: hidden; }
.tbl-wrap { max-width: 100%; }

@media (prefers-reduced-motion: reduce) {
    * { animation: none !important; transition: none !important; }
}