:root { color-scheme: dark; }
body {
    font-family: system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
    margin:0; padding:0;
    background:#020617; color:#e5e7eb;
    display:flex; flex-direction:column; height:100vh;
}
header {
    padding:1rem 1.5rem;
    background:#020617;
    border-bottom:1px solid #1f2937;
    display:flex; align-items:center; justify-content:space-between; gap:0.75rem;
}
header h1 { font-size:1.1rem; margin:0; font-weight:600; }
.pill {
    font-size:0.8rem; background:#1e293b;
    border-radius:999px; padding:0.1rem 0.6rem; color:#a5b4fc;
}
main {
    flex:1; display:flex; flex-direction:column;
    padding:1rem 1.5rem 1.5rem; gap:1rem; min-height:0;
}
.controls-row {
    display:flex; flex-wrap:wrap;
    gap:0.75rem 1.5rem; align-items:center;
}
label { font-size:0.9rem; color:#9ca3af; }
input[type="text"] {
    background:#020617; border-radius:0.5rem;
    border:1px solid #1f2937; padding:0.4rem 0.6rem;
    color:#e5e7eb; min-width:220px;
}
input[type="text"]:focus {
    outline:none; border-color:#4f46e5;
    box-shadow:0 0 0 1px #4f46e5;
}
button {
    background:#4f46e5; border:none; color:white;
    padding:0.45rem 0.9rem; border-radius:999px;
    cursor:pointer; font-size:0.9rem; font-weight:500;
}
button:disabled { opacity:0.6; cursor:default; }
button.secondary { background:#111827; border:1px solid #4b5563; color:#e5e7eb; }
button.small-btn { font-size:0.75rem; padding:0.25rem 0.6rem; }
.status { font-size:0.85rem; color:#9ca3af; }
.status span { font-weight:500; }
.badge-ok { color:#22c55e; }
.badge-err { color:#f97316; }

.metrics {
    display:grid;
    grid-template-columns:repeat(3,minmax(180px,1fr));
    gap:0.75rem;
}
@media (max-width:900px){
    .metrics{grid-template-columns:repeat(auto-fit,minmax(180px,1fr));}
}
.metric-card {
    background:radial-gradient(circle at top left,rgba(79,70,229,.25),transparent 55%);
    border-radius:0.75rem; padding:0.75rem 0.9rem;
    border:1px solid #1f2937;
}
.metric-label { font-size:0.8rem; color:#9ca3af; margin-bottom:0.2rem; }
.metric-value { font-size:1.3rem; font-weight:600; }
.metric-sub { font-size:0.75rem; color:#6b7280; margin-top:0.15rem; }

.panel-row {
    display:grid;
    grid-template-columns:repeat(3,minmax(260px,1fr));
    gap:1rem;
    min-height:0;
}
@media (max-width:900px){
    .panel-row{grid-template-columns:repeat(auto-fit,minmax(260px,1fr));}
}

.panel {
    background:#020617; border-radius:0.75rem;
    border:1px solid #1f2937; padding:0.75rem;
    display:flex; flex-direction:column; min-height:0;
}
.panel-header {
    display:flex; justify-content:space-between;
    align-items:center; font-size:0.85rem;
    color:#9ca3af; margin-bottom:0.4rem;
}
.panel-title { font-weight:500; color:#e5e7eb; }
.hint { font-size:0.75rem; color:#6b7280; }

.table-wrapper {
    flex:1; overflow:auto;
    border-radius:0.5rem; border:1px solid #111827;
}
table {
    width:100%; border-collapse:collapse; font-size:0.8rem;
}
thead {
    background:#020617; position:sticky; top:0; z-index:1;
}
th,td {
    padding:0.4rem 0.35rem; text-align:left;
    border-bottom:1px solid #111827;
}
th { font-weight:500; color:#9ca3af; font-size:0.78rem; }
tbody tr:nth-child(even){ background:rgba(15,23,42,.7); }
tbody tr:nth-child(odd){ background:rgba(15,23,42,.4); }
tbody tr.highlight { background:rgba(250,204,21,.12); }
.username-cell {
    color:#a5b4fc;
    font-family:"SF Mono",ui-monospace,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace;
    font-size:0.78rem;
}
.likes-cell { font-variant-numeric:tabular-nums; }
.rank-chip {
    display:inline-flex; align-items:center; justify-content:center;
    width:1.35rem; height:1.35rem; border-radius:999px;
    font-size:0.75rem; font-weight:600; background:#111827;
}
.rank-1 { background:linear-gradient(135deg,#facc15,#f97316); color:#111827; }
.rank-2 { background:linear-gradient(135deg,#e5e7eb,#9ca3af); color:#020617; }
.rank-3 { background:linear-gradient(135deg,#f9a8d4,#ec4899); color:#020617; }

@media (max-width:640px){
    header{flex-direction:column;align-items:flex-start;}
    header > .right-header { margin-top:0.5rem; }
}