:root {
    --Bg: #08060e;
    --Bg2: #0c0916;
    --Card: #110d1c;
    --Card2: #171225;
    --Line: #251c3c;
    --LineSoft: #1c1530;
    --Text: #ece9f6;
    --Muted: #918aad;
    --Violet: #8b5cf6;
    --Violet2: #a78bfa;
    --VioletDim: rgba(139, 92, 246, 0.14);
    --Good: #34d399;
    --Warn: #fbbf24;
    --Bad: #f87171;
    --Radius: 14px;
}

* { box-sizing: border-box; }

html { color-scheme: dark; }

body {
    margin: 0;
    min-height: 100vh;
    background:
        radial-gradient(900px 520px at 50% -160px, rgba(139, 92, 246, 0.22), transparent 70%),
        radial-gradient(700px 400px at 100% 0%, rgba(168, 85, 247, 0.10), transparent 60%),
        var(--Bg);
    color: var(--Text);
    font: 15px/1.6 "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
    -webkit-font-smoothing: antialiased;
}

a { color: var(--Violet2); text-decoration: none; }
a:hover { color: #c4b5fd; }

.Serif { font-family: "Instrument Serif", Georgia, serif; font-style: italic; font-weight: 400; }

/* ---------- top bar ---------- */

header.Top {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 0 20px;
    height: 64px;
    background: rgba(10, 8, 18, 0.82);
    backdrop-filter: blur(14px);
    border-bottom: 1px solid var(--LineSoft);
    position: sticky;
    top: 0;
    z-index: 20;
    flex-wrap: wrap;
}

.Mark {
    width: 34px; height: 34px;
    border-radius: 10px;
    display: grid; place-items: center;
    background: linear-gradient(140deg, var(--Violet2), #6d28d9);
    box-shadow: 0 6px 20px rgba(139, 92, 246, 0.4);
    font: 800 14px/1 "Inter", system-ui, sans-serif;
    letter-spacing: -0.5px;
    color: #fff;
    flex: none;
}

.Brand { font-weight: 700; letter-spacing: -0.2px; margin-right: 6px; }
.Brand small { display: block; font-weight: 500; font-size: 11px; color: var(--Muted); letter-spacing: 0.3px; }

header.Top nav { display: flex; gap: 2px; flex: 1; flex-wrap: wrap; }
header.Top nav a {
    padding: 8px 13px;
    border-radius: 9px;
    color: var(--Muted);
    font-size: 14px;
    font-weight: 500;
    transition: background .15s, color .15s;
}
header.Top nav a:hover { background: var(--Card2); color: var(--Text); }
header.Top nav a.On { background: var(--VioletDim); color: #ddd0ff; box-shadow: inset 0 0 0 1px rgba(139,92,246,.3); }

.Who {
    display: flex; align-items: center; gap: 10px;
    font-size: 13px; color: var(--Muted);
    padding: 6px 8px 6px 12px;
    border: 1px solid var(--LineSoft);
    border-radius: 999px;
    background: var(--Card);
}
.Who b { color: var(--Text); font-weight: 600; }

main { max-width: 1200px; margin: 0 auto; padding: 30px 20px 90px; }

h1 { font-size: 26px; margin: 0 0 6px; letter-spacing: -0.6px; font-weight: 700; }
h1 .Serif { font-size: 28px; }
.Lede { color: var(--Muted); margin: 0 0 24px; }
h2 { font-size: 12px; margin: 30px 0 12px; color: var(--Muted); text-transform: uppercase; letter-spacing: 1.1px; font-weight: 700; }

/* ---------- cards ---------- */

.Card {
    background: linear-gradient(180deg, var(--Card), rgba(17, 13, 28, 0.6));
    border: 1px solid var(--Line);
    border-radius: var(--Radius);
    padding: 20px;
    margin-bottom: 16px;
}
.Card.Tight { padding: 14px 16px; }

.Grid { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); }
.Stat {
    background: linear-gradient(180deg, var(--Card), rgba(17, 13, 28, 0.4));
    border: 1px solid var(--Line);
    border-radius: var(--Radius);
    padding: 16px 18px;
}
.Stat .Num { font-size: 28px; font-weight: 700; letter-spacing: -1px; }
.Stat .Cap { color: var(--Muted); font-size: 12.5px; margin-top: 1px; }

/* ---------- tables ---------- */

table { width: 100%; border-collapse: collapse; font-size: 14px; }
th, td { text-align: left; padding: 10px 10px; border-bottom: 1px solid var(--LineSoft); vertical-align: middle; }
th { color: var(--Muted); font-weight: 600; font-size: 11.5px; text-transform: uppercase; letter-spacing: .7px; }
tr:last-child td { border-bottom: 0; }
.Scroll { overflow-x: auto; }

/* ---------- bits ---------- */

.Pill {
    display: inline-flex; align-items: center; gap: 5px;
    padding: 3px 10px; border-radius: 999px;
    font-size: 12px; font-weight: 600;
    background: var(--Card2); border: 1px solid var(--Line); color: var(--Muted);
}
.Pill.Good { color: var(--Good); border-color: rgba(52,211,153,.3); background: rgba(52,211,153,.08); }
.Pill.Bad  { color: var(--Bad);  border-color: rgba(248,113,113,.3); background: rgba(248,113,113,.08); }
.Pill.Warn { color: var(--Warn); border-color: rgba(251,191,36,.3); background: rgba(251,191,36,.08); }
.Pill.Violet { color: #c4b5fd; border-color: rgba(139,92,246,.35); background: rgba(139,92,246,.12); }

.Dot { width: 7px; height: 7px; border-radius: 50%; background: currentColor; }

label { display: block; font-size: 12.5px; font-weight: 600; margin: 14px 0 5px; color: #c8c2dd; }
input, select, textarea {
    width: 100%;
    padding: 11px 13px;
    border-radius: 10px;
    border: 1px solid var(--Line);
    background: #0b0814;
    color: var(--Text);
    font: inherit;
    transition: border-color .15s, box-shadow .15s;
}
input:focus, select:focus, textarea:focus {
    outline: 0;
    border-color: rgba(139,92,246,.6);
    box-shadow: 0 0 0 3px rgba(139,92,246,.15);
}
input[type=color] { padding: 4px; height: 42px; cursor: pointer; }
textarea { min-height: 260px; font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: 13px; line-height: 1.5; }
.Row { display: flex; gap: 12px; flex-wrap: wrap; }
.Row > * { flex: 1; min-width: 150px; }
.Row.Tight > * { min-width: 0; }

button, .Button {
    display: inline-flex; align-items: center; justify-content: center; gap: 7px;
    padding: 11px 18px;
    border: 0;
    border-radius: 10px;
    background: linear-gradient(140deg, var(--Violet2), #7c3aed);
    color: #fff;
    font: 600 14px "Inter", system-ui, sans-serif;
    cursor: pointer;
    margin-top: 14px;
    box-shadow: 0 6px 18px rgba(124, 58, 237, 0.28);
    transition: transform .12s, box-shadow .12s, filter .12s;
}
button:hover, .Button:hover { filter: brightness(1.08); box-shadow: 0 8px 24px rgba(124,58,237,.4); color: #fff; }
button:active { transform: translateY(1px); }
button.Ghost, .Button.Ghost {
    background: var(--Card2); border: 1px solid var(--Line); color: var(--Text); box-shadow: none;
}
button.Ghost:hover, .Button.Ghost:hover { background: #1e1732; }
button.Danger { background: linear-gradient(140deg, #fb7185, #dc2626); box-shadow: 0 6px 18px rgba(220,38,38,.25); }
button.Small, .Button.Small { padding: 6px 12px; font-size: 13px; margin: 0; border-radius: 8px; box-shadow: none; }

.Flash { padding: 12px 15px; border-radius: 11px; margin-bottom: 18px; font-size: 14px; border: 1px solid; }
.Flash.Ok  { background: rgba(52,211,153,.08); border-color: rgba(52,211,153,.3); color: #9df0cd; }
.Flash.Err { background: rgba(248,113,113,.08); border-color: rgba(248,113,113,.3); color: #ffb4b4; }

.Muted { color: var(--Muted); font-size: 13px; }
.Checks { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 7px; margin-top: 8px; }
.Checks label {
    display: flex; align-items: center; gap: 9px; margin: 0;
    font-weight: 500; font-size: 13.5px; color: var(--Text);
    padding: 8px 11px; border: 1px solid var(--LineSoft); border-radius: 9px;
    background: #0b0814; cursor: pointer;
}
.Checks label:hover { border-color: rgba(139,92,246,.4); }
.Checks input { width: auto; accent-color: var(--Violet); }
.Checks label.Off { opacity: .5; }

/* ---------- login ---------- */

.Login { max-width: 380px; margin: 11vh auto 0; }
.Login .Mark { width: 46px; height: 46px; border-radius: 13px; font-size: 18px; margin-bottom: 18px; }

/* ---------- search result ---------- */

.Person { display: flex; gap: 18px; align-items: flex-start; flex-wrap: wrap; }
.Avatar {
    width: 92px; height: 92px; border-radius: 18px; flex: none;
    background: linear-gradient(140deg, #1c1530, #120e20);
    border: 1px solid var(--Line);
    object-fit: cover;
    display: grid; place-items: center;
    font: 700 30px "Inter", sans-serif; color: var(--Violet2);
}
.Person .Body { flex: 1; min-width: 220px; }
.Person h1 { margin-bottom: 2px; }
.Badges { display: flex; gap: 7px; flex-wrap: wrap; margin-top: 12px; }

details.Drop {
    border: 1px solid var(--Line);
    border-radius: var(--Radius);
    background: linear-gradient(180deg, var(--Card), rgba(17,13,28,.55));
    margin-bottom: 12px;
    overflow: hidden;
}
details.Drop > summary {
    list-style: none;
    cursor: pointer;
    padding: 15px 18px;
    display: flex; align-items: center; gap: 12px;
    font-weight: 600;
    user-select: none;
}
details.Drop > summary::-webkit-details-marker { display: none; }
details.Drop > summary::after {
    content: "▾";
    margin-left: auto;
    color: var(--Muted);
    transition: transform .2s;
}
details.Drop[open] > summary::after { transform: rotate(180deg); }
details.Drop > summary:hover { background: rgba(139,92,246,.05); }
details.Drop > summary .Sub { font-weight: 400; font-size: 13px; color: var(--Muted); }
details.Drop .Inner { padding: 4px 18px 20px; border-top: 1px solid var(--LineSoft); }

.Key {
    display: inline-block; padding: 2px 7px; border-radius: 6px;
    background: #0b0814; border: 1px solid var(--Line);
    font: 500 12px ui-monospace, Menlo, monospace; color: var(--Violet2);
}

.Empty { text-align: center; padding: 40px 20px; color: var(--Muted); }

/* ---------- motion ---------- */
/* Everything here animates transform, opacity, border or background only, so it
   stays on the compositor and never triggers layout. */

@keyframes Rise {
    from { opacity: 0; transform: translate3d(0, 8px, 0); }
    to   { opacity: 1; transform: none; }
}

@keyframes Slide {
    from { opacity: 0; transform: translate3d(0, -6px, 0); }
    to   { opacity: 1; transform: none; }
}

main { animation: Rise .26s cubic-bezier(.22, .8, .3, 1) both; }

header.Top nav a { transition: background .14s ease, color .14s ease, transform .12s ease; }
header.Top nav a:hover { transform: translate3d(0, -1px, 0); }
header.Top nav a:active { transform: translate3d(0, 0, 0); }

.Card, .Stat {
    transition: border-color .16s ease, transform .16s ease;
    will-change: transform;
}
.Stat:hover { border-color: rgba(139, 92, 246, .38); transform: translate3d(0, -2px, 0); }

tbody tr, table tr { transition: background .13s ease; }
table tr:hover { background: rgba(139, 92, 246, .045); }
table tr:first-child:hover { background: none; }

button, .Button { transition: transform .11s ease, box-shadow .16s ease, filter .16s ease, background .16s ease; }
button:hover, .Button:hover { transform: translate3d(0, -1px, 0); }
button:active, .Button:active { transform: scale(.972); box-shadow: 0 2px 8px rgba(124, 58, 237, .3); }

input, select, textarea { transition: border-color .14s ease, box-shadow .14s ease, background .14s ease; }

.Pill { transition: transform .12s ease, border-color .14s ease; }
.Pill:hover { transform: translate3d(0, -1px, 0); }

.Checks label { transition: border-color .14s ease, background .14s ease, transform .12s ease; }
.Checks label:hover { transform: translate3d(0, -1px, 0); }
.Checks label:active { transform: scale(.985); }

details.Drop { transition: border-color .16s ease; }
details.Drop[open] { border-color: rgba(139, 92, 246, .34); }
details.Drop > summary { transition: background .14s ease; }
details.Drop > summary::after { transition: transform .22s cubic-bezier(.22, .8, .3, 1), color .14s ease; }
details.Drop[open] > summary::after { color: var(--Violet2); }
details.Drop[open] .Inner { animation: Slide .2s ease-out both; }

a { transition: color .13s ease; }

.Person1 { display: inline-flex; align-items: baseline; gap: 6px; color: var(--Text); }
.Person1 b { font-weight: 600; }
.Person1 .At { color: var(--Muted); font-size: 12.5px; font-weight: 500; }
.Person1:hover { color: var(--Violet2); text-decoration: none; }
.Person1:hover .At { color: var(--Violet2); opacity: .8; }

.Hidden { color: var(--Muted); opacity: .55; letter-spacing: 1px; }

@media (prefers-reduced-motion: reduce) {
    main, details.Drop[open] .Inner { animation: none; }
    *, *::before, *::after { transition-duration: .01ms !important; }
    header.Top nav a:hover, .Stat:hover, button:hover, .Button:hover, .Pill:hover, .Checks label:hover { transform: none; }
}

/* ---------- expandable stat tiles ---------- */

details.Tile {
    background: linear-gradient(180deg, var(--Card), rgba(17, 13, 28, 0.4));
    border: 1px solid var(--Line);
    border-radius: var(--Radius);
    transition: border-color .16s ease, transform .16s ease;
}
details.Tile:not([open]):hover { border-color: rgba(139, 92, 246, .38); transform: translate3d(0, -2px, 0); }
details.Tile[open] { grid-column: 1 / -1; border-color: rgba(139, 92, 246, .34); }
details.Tile > summary {
    list-style: none;
    cursor: pointer;
    position: relative;
    padding: 16px 38px 16px 18px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 3px;
}
details.Tile > summary::-webkit-details-marker { display: none; }
details.Tile > summary::after {
    content: "▾";
    position: absolute;
    right: 16px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--Muted);
    font-size: 13px;
    transition: transform .22s cubic-bezier(.22, .8, .3, 1), color .14s ease;
}
details.Tile[open] > summary::after { transform: translateY(-50%) rotate(180deg); color: var(--Violet2); }
details.Tile .Num { font-size: 26px; font-weight: 700; letter-spacing: -1px; line-height: 1; }
details.Tile .Cap { color: var(--Muted); font-size: 12.5px; }
details.Tile .Inner {
    padding: 14px 18px 18px;
    border-top: 1px solid var(--LineSoft);
    animation: Slide .2s ease-out both;
}
details.Tile.Quiet > summary { cursor: default; }
details.Tile.Quiet > summary::after { content: ""; }

.Job {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 6px;
    background: rgba(139, 92, 246, .12);
    border: 1px solid rgba(139, 92, 246, .28);
    font: 600 11.5px ui-monospace, Menlo, monospace;
    color: var(--Violet2);
    letter-spacing: .3px;
}

.ServerBox {
    border: 1px solid var(--LineSoft);
    border-radius: 11px;
    padding: 14px 16px;
    margin-bottom: 12px;
    background: rgba(11, 8, 20, .5);
}
.ServerBox:last-child { margin-bottom: 0; }
.ServerHead { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 10px; }

/* ---------- charts ---------- */

.Chart {
    background: linear-gradient(180deg, var(--Card), rgba(17, 13, 28, .4));
    border: 1px solid var(--Line);
    border-radius: var(--Radius);
    padding: 16px 18px 12px;
    margin-bottom: 16px;
}
.Chart .Head { display: flex; align-items: baseline; gap: 10px; margin-bottom: 10px; flex-wrap: wrap; }
.Chart .Head b { font-size: 14px; }
.Chart .Head .Muted { font-size: 12.5px; }
.Chart .Peak { margin-left: auto; font: 600 12px ui-monospace, Menlo, monospace; color: var(--Violet2); }

.Bars { display: flex; align-items: flex-end; gap: 5px; height: 110px; }
.Bar { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; height: 100%; }
.Bar span {
    width: 100%;
    border-radius: 4px 4px 2px 2px;
    background: linear-gradient(180deg, #a78bfa, rgba(124, 58, 237, .35));
    transition: filter .14s ease;
}
.Bar:hover span { filter: brightness(1.25); }
.Bar small { color: var(--Muted); font-size: 10px; margin-top: 6px; white-space: nowrap; }

.Mix { display: flex; height: 10px; border-radius: 999px; overflow: hidden; background: var(--Card2); border: 1px solid var(--Line); }
.Mix i { display: block; height: 100%; }
.Legend { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 10px; }
.Legend span { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--Muted); }
.Legend i { width: 9px; height: 9px; border-radius: 3px; display: inline-block; }

/* ---------- gradient previews ---------- */

.GradChip {
    display: inline-block;
    padding: 4px 13px;
    border-radius: 9px;
    background: #0b0814;
    border: 1px solid var(--Line);
    line-height: 1.35;
}
.GradChip b {
    font: 800 15px "Inter", system-ui, sans-serif;
    font-style: italic;
    letter-spacing: .4px;
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    -webkit-text-fill-color: transparent;
}

.GradBar {
    display: block;
    height: 8px;
    border-radius: 999px;
    border: 1px solid var(--Line);
}

.Picker { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 8px; margin-top: 8px; }
.Picker label {
    display: flex; flex-direction: column; gap: 7px; margin: 0;
    padding: 11px 12px;
    border: 1px solid var(--LineSoft);
    border-radius: 11px;
    background: #0b0814;
    cursor: pointer;
    transition: border-color .14s ease, transform .12s ease;
}
.Picker label:hover { border-color: rgba(139,92,246,.45); transform: translate3d(0,-1px,0); }
.Picker input { position: absolute; opacity: 0; pointer-events: none; }
.Picker label:has(input:checked) { border-color: var(--Violet); box-shadow: 0 0 0 3px rgba(139,92,246,.16); }
.Picker .Name { font-size: 12px; color: var(--Muted); font-weight: 600; }
.Picker label:has(input:checked) .Name { color: var(--Violet2); }

.GradRow { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.GradRow .Stops { display: flex; gap: 5px; }
.GradRow .Stops input[type=color] { width: 42px; height: 34px; padding: 3px; }

.Hide { display: none !important; }

.PreviewBox {
    display: flex;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
    padding: 16px 18px;
    border: 1px solid var(--Line);
    border-radius: 12px;
    background:
        repeating-linear-gradient(45deg, rgba(255,255,255,.02) 0 10px, transparent 10px 20px),
        #0b0814;
    margin-top: 14px;
}
.PreviewBox .GradChip { font-size: 17px; padding: 6px 15px; }
.PreviewBox .GradChip b { font-size: 19px; }