/* MIZORA Admin - lacquer, vermillion, mono. Small on purpose. */
* { margin: 0; padding: 0; box-sizing: border-box; scrollbar-width: none; }
::-webkit-scrollbar { width: 0; height: 0; }
[hidden] { display: none !important; }
:root {
  --ground: #070404; --panel: #0c0807; --head: #0a0605; --input: #120b09;
  --line: #221410; --line2: #331c14;
  --ink: #ece4d8; --dim: #9d9084; --faint: #675a4f; --ghost: #3b322b;
  --red: #e0281e; --red-2: #b0170f; --green: #2fbf68; --warn: #c07f28;
  --mono: 'SF Mono', Consolas, Menlo, monospace;
  --sans: -apple-system, 'Segoe UI', sans-serif;
}
body { background: var(--ground); color: var(--ink); font-family: var(--sans); font-size: 12px; min-height: 100vh; }
.pos { color: var(--green); } .neg { color: var(--red); }
.ah { display: flex; align-items: center; gap: 22px; padding: 0 18px; height: 46px; border-bottom: 1px solid var(--line); background: var(--head); }
.ah__brand { font-size: 12px; font-weight: 800; letter-spacing: .28em; }
.ah__brand b { display: block; font-family: var(--mono); font-size: 6.5px; font-weight: 500; letter-spacing: .4em; color: var(--faint); text-transform: uppercase; }
.ah__nav { display: flex; gap: 14px; margin: 0 auto; }
.ah__nav a { color: var(--faint); text-decoration: none; font-size: 9.5px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; padding: 15px 2px; }
.ah__nav a:hover { color: var(--dim); }
.ah__nav a.on { color: var(--ink); box-shadow: inset 0 -2px 0 var(--red); }
.ah__who { font-family: var(--mono); font-size: 9px; color: var(--faint); }
.ah__out button { background: none; border: 1px solid var(--line2); color: var(--red); padding: 5px 10px; cursor: pointer; font-size: 8.5px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; }
.am { padding: 20px 18px 40px; max-width: 1280px; margin: 0 auto; }
h1 { font-size: 16px; letter-spacing: .02em; margin-bottom: 14px; }
h2 { font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--dim); margin: 22px 0 8px; }
.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 8px; margin-bottom: 10px; }
.card { background: var(--panel); border: 1px solid var(--line); padding: 12px 14px; }
.card span { display: block; font-size: 8px; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: var(--faint); }
.card b { display: block; font-family: var(--mono); font-size: 19px; font-weight: 500; margin: 4px 0 2px; }
.card i { font-style: normal; font-size: 9px; color: var(--faint); }
table { width: 100%; border-collapse: collapse; background: var(--panel); border: 1px solid var(--line); font-variant-numeric: tabular-nums; }
th { font-family: var(--mono); font-size: 8px; font-weight: 500; letter-spacing: .16em; text-transform: uppercase; color: var(--faint); text-align: left; padding: 8px 10px; border-bottom: 1px solid var(--line); background: var(--head); }
td { padding: 7px 10px; border-bottom: 1px solid rgba(34,20,16,.55); font-size: 11px; }
tr:hover td { background: var(--input); }
.findrow { display: flex; gap: 6px; margin-bottom: 12px; }
.findrow input { flex: 0 0 320px; padding: 8px 10px; background: var(--input); border: 1px solid var(--line); color: var(--ink); font-family: var(--mono); font-size: 11px; }
.findrow button, .mini { padding: 7px 12px; background: none; border: 1px solid var(--line2); color: var(--dim); cursor: pointer; font-size: 8.5px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.findrow button:hover, .mini:hover { color: var(--ink); border-color: var(--red); }
.mini.danger { color: var(--red); }
.inline { display: inline-flex; gap: 4px; align-items: center; }
.inline select { background: var(--input); border: 1px solid var(--line); color: var(--ink); font-family: var(--mono); font-size: 9px; padding: 5px; }
.chips { display: flex; gap: 4px; margin-bottom: 12px; }
.chips a { padding: 5px 10px; border: 1px solid transparent; color: var(--faint); text-decoration: none; font-size: 9px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.chips a.on { border-color: var(--red); color: var(--red); }
.tag { font-style: normal; font-family: var(--mono); font-size: 7px; letter-spacing: .16em; padding: 1px 5px; border: 1px solid; }
.tag-admin { color: var(--red); }
.tag-off { color: var(--ghost); }
.note { font-size: 10px; color: var(--faint); margin-bottom: 10px; }
.af { padding: 14px 18px; border-top: 1px solid var(--line); font-family: var(--mono); font-size: 8px; letter-spacing: .18em; text-transform: uppercase; color: var(--ghost); }
/* login */
.al-body { display: flex; align-items: center; justify-content: center; }
.al { width: 340px; background: var(--panel); border: 1px solid var(--line2); padding: 26px; display: flex; flex-direction: column; gap: 14px; }
.al label { display: flex; flex-direction: column; gap: 5px; font-size: 8.5px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--faint); }
.al input { padding: 10px; background: var(--input); border: 1px solid var(--line); color: var(--ink); font-family: var(--mono); font-size: 12px; }
.al input:focus { border-color: var(--red); outline: none; }
.al button { padding: 12px; background: var(--red); border: 1px solid var(--red); color: #fff; cursor: pointer; font-size: 10px; font-weight: 800; letter-spacing: .2em; text-transform: uppercase; }
.al button:hover { background: var(--red-2); }
.al__err { color: var(--red); font-size: 11px; }
.al__enroll { border: 1px solid var(--warn); padding: 10px; font-size: 10px; color: var(--dim); line-height: 1.6; }
.al__enroll code { display: block; font-family: var(--mono); font-size: 13px; color: var(--ink); margin: 8px 0; letter-spacing: .08em; }
.al__uri { font-family: var(--mono); font-size: 8px; color: var(--faint); word-break: break-all; }

/* stats page */
.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin: 8px 0; }
.grid2 section h2 { margin-top: 0; }
.chartbox { background: var(--panel); border: 1px solid var(--line); padding: 12px; overflow-x: auto; }
.spark { display: block; }
.spark-x { fill: var(--faint); font-family: var(--mono); font-size: 7px; }
td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; }
.dim { color: var(--faint); font-size: 10px; }
.contents { display: contents; }
@media (max-width: 800px) { .grid2 { grid-template-columns: 1fr; } }

.crumb { font-size: 10px; color: var(--faint); margin-bottom: 10px; }
.crumb a { color: var(--dim); }
.uhead { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; margin-bottom: 6px; }
.uhead h1 { margin-bottom: 4px; }
.uacts { display: flex; gap: 6px; align-items: center; }
a.mini { text-decoration: none; display: inline-block; }

.meters { display: grid; grid-template-columns: repeat(auto-fit,minmax(240px,1fr)); gap: 10px; margin-bottom: 8px; }
.mrow { background: var(--panel); border: 1px solid var(--line); padding: 10px 12px; }
.mtop { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 6px; }
.mtop span { font-size: 8px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--faint); }
.mtop b { font-family: var(--mono); font-size: 11px; }
.mbar { height: 4px; background: var(--input); }
.mbar i { display: block; height: 100%; }
.mbar i.ok { background: var(--green); } .mbar i.warn { background: var(--warn); } .mbar i.bad { background: var(--red); }
.curve { width: 100%; height: 120px; display: block; }

.exprow { display: flex; gap: 6px; flex-wrap: wrap; }

.codein { width: 74px; padding: 6px 8px; background: var(--input); border: 1px solid var(--line); color: var(--ink); font-family: var(--mono); font-size: 11px; letter-spacing: .1em; }
.codein:focus { border-color: var(--red); outline: none; }