:root {
  --bg: #0e1016; --panel: #161a23; --panel2: #1d2230; --line: #2a3142; --text: #e8ebf2; --muted: #9aa3b5;
  --accent: #ffd400; --ok: #3fb950; --warn: #ff9f43; --bad: #f85149; --info: #58a6ff; --radius: 12px;
}
* { box-sizing: border-box; }
html, body { margin: 0; background: var(--bg); color: var(--text);
  font: 15px/1.5 Inter, system-ui, -apple-system, "Segoe UI", Roboto, "Noto Sans", "Noto Sans Devanagari", sans-serif; }
a { color: var(--info); text-decoration: none; }
a:hover { text-decoration: underline; }
h1 { font-size: 22px; margin: 0 0 16px; }
h2 { font-size: 16px; margin: 0 0 12px; color: var(--text); }
h3 { font-size: 14px; margin: 0 0 8px; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; }
small, .muted { color: var(--muted); }
code, pre { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 12.5px; }

/* layout */
.top { position: sticky; top: 0; z-index: 10; background: rgba(14,16,22,.92); backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--line); }
.top-in { max-width: 1280px; margin: 0 auto; padding: 10px 16px; display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.brand { font-weight: 800; letter-spacing: .02em; color: var(--text); }
.brand span { color: var(--accent); }
nav { display: flex; gap: 4px; flex-wrap: wrap; flex: 1; }
nav a { color: var(--muted); padding: 6px 10px; border-radius: 8px; font-weight: 600; }
nav a.on, nav a:hover { color: var(--text); background: var(--panel2); text-decoration: none; }
.state { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--muted); }
.dot { width: 9px; height: 9px; border-radius: 50%; display: inline-block; background: var(--muted); }
.dot.running { background: var(--ok); box-shadow: 0 0 0 4px rgba(63,185,80,.18); }
.dot.idle { background: var(--info); }
.dot.paused { background: var(--warn); }
.dot.down { background: var(--bad); }
main { max-width: 1280px; margin: 0 auto; padding: 20px 16px 60px; }
.grid { display: grid; gap: 16px; }
.g2 { grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); }
.g3 { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.g4 { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
.card { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 16px; min-width: 0; }
.mt { margin-top: 16px; }
.row { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.spread { justify-content: space-between; }

/* stat tiles */
.tile .v { font-size: 26px; font-weight: 800; }
.tile .l { color: var(--muted); font-size: 13px; }
meter, progress { width: 100%; height: 8px; }

/* messages */
.flash, .error { padding: 10px 14px; border-radius: 10px; margin-bottom: 16px; }
.flash { background: rgba(63,185,80,.12); border: 1px solid rgba(63,185,80,.4); }
.error { background: rgba(248,81,73,.12); border: 1px solid rgba(248,81,73,.45); }

/* tables */
.tbl { width: 100%; border-collapse: collapse; font-size: 14px; }
.tbl th { text-align: left; color: var(--muted); font-weight: 600; font-size: 12px; text-transform: uppercase;
  letter-spacing: .04em; padding: 8px; border-bottom: 1px solid var(--line); }
.tbl td { padding: 8px; border-bottom: 1px solid var(--line); vertical-align: top; }
.tbl tr:hover td { background: var(--panel2); }
.scroll { overflow-x: auto; }
.trunc { max-width: 360px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* badges */
.b { display: inline-block; padding: 1px 8px; border-radius: 999px; font-size: 12px; font-weight: 700; background: var(--panel2);
  border: 1px solid var(--line); color: var(--muted); }
.b.ok, .b.public, .b.success { color: var(--ok); border-color: rgba(63,185,80,.5); }
.b.private { color: var(--warn); border-color: rgba(255,159,67,.5); }
.b.unlisted { color: var(--info); border-color: rgba(88,166,255,.5); }
.b.failed, .b.bad { color: var(--bad); border-color: rgba(248,81,73,.5); }
.b.running { color: var(--accent); border-color: rgba(255,212,0,.5); }
.qa { font-weight: 800; }
.qa.hi { color: var(--ok); } .qa.mid { color: var(--warn); } .qa.lo { color: var(--bad); }

/* forms */
label { display: block; font-size: 13px; color: var(--muted); margin: 10px 0 4px; }
input[type=text], input[type=password], input[type=number], input[type=datetime-local], input[type=file], select, textarea {
  width: 100%; background: var(--bg); color: var(--text); border: 1px solid var(--line); border-radius: 8px;
  padding: 9px 10px; font: inherit; }
textarea { min-height: 90px; resize: vertical; }
input:focus, select:focus, textarea:focus { outline: 2px solid rgba(255,212,0,.5); border-color: transparent; }
input[type=number] { width: 72px; }
.btn { display: inline-flex; align-items: center; gap: 6px; background: var(--panel2); color: var(--text); border: 1px solid var(--line);
  border-radius: 8px; padding: 8px 14px; font: inherit; font-weight: 700; cursor: pointer; }
.btn:hover { border-color: var(--muted); text-decoration: none; }
.btn.primary { background: var(--accent); color: #111; border-color: var(--accent); }
.btn.danger { color: var(--bad); }
.btn.sm { padding: 4px 10px; font-size: 13px; }
.inline { display: inline; }
.radios { display: flex; gap: 8px; flex-wrap: wrap; }
.radios label { margin: 0; display: flex; gap: 6px; align-items: center; background: var(--bg); border: 1px solid var(--line);
  padding: 7px 12px; border-radius: 8px; color: var(--text); cursor: pointer; }
.check { display: flex; gap: 8px; align-items: center; color: var(--text); }

/* videos */
.vgrid { display: grid; gap: 14px; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); }
.vcard { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; display: flex; flex-direction: column; }
.vcard img { width: 100%; aspect-ratio: 16/9; object-fit: cover; background: #000; display: block; }
.vcard .in { padding: 10px 12px 12px; display: flex; flex-direction: column; gap: 6px; flex: 1; }
.vcard .t { font-weight: 700; line-height: 1.3; }
.vcard .meta { font-size: 12.5px; color: var(--muted); display: flex; gap: 10px; flex-wrap: wrap; }
video { width: 100%; max-height: 520px; background: #000; border-radius: 10px; }

/* comments */
.cmt { display: grid; grid-template-columns: 40px 1fr; gap: 12px; padding: 14px 0; border-bottom: 1px solid var(--line); }
.cmt img { width: 40px; height: 40px; border-radius: 50%; background: var(--panel2); }
.cmt .who { font-weight: 700; }
.cmt .txt { white-space: pre-wrap; margin: 4px 0 8px; }
.cmt .rep { border-left: 2px solid var(--line); padding-left: 10px; margin: 6px 0; color: var(--muted); font-size: 14px; }
.cmt .rep.mine { border-color: var(--accent); color: var(--text); }
.cmt textarea { min-height: 60px; }

/* logs */
.log { background: #090b10; border: 1px solid var(--line); border-radius: 10px; padding: 10px; max-height: 70vh; overflow: auto; }
.log div { white-space: pre-wrap; word-break: break-word; font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 12.5px; padding: 1px 0; }
.log .WARNING { color: var(--warn); } .log .ERROR, .log .CRITICAL { color: var(--bad); }

/* charts (pure CSS bars) */
.bars { display: flex; flex-direction: column; gap: 6px; }
.bar { display: grid; grid-template-columns: minmax(120px, 1.4fr) 3fr 70px; gap: 10px; align-items: center; font-size: 13px; }
.bar .name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bar .num { text-align: right; color: var(--muted); font-variant-numeric: tabular-nums; }

/* login */
.login { max-width: 380px; margin: 10vh auto; }
.login .card { padding: 26px; }
.hide { display: none; }

@media (max-width: 640px) {
  .top-in { gap: 8px; }
  nav a { padding: 5px 8px; font-size: 14px; }
  .tbl .opt { display: none; }
  .bar { grid-template-columns: 1fr 1.4fr 56px; }
}
.vthumb { width: 100%; border-radius: 10px; display: block; }
.row select, .row input[type=text] { width: auto; min-width: 160px; }
meter { appearance: none; -webkit-appearance: none; height: 8px; border-radius: 99px; background: var(--panel2); border: 0; }
meter::-webkit-meter-bar { background: var(--panel2); border: 0; border-radius: 99px; height: 8px; }
meter::-webkit-meter-optimum-value { background: var(--ok); border-radius: 99px; }
meter::-webkit-meter-suboptimum-value { background: var(--warn); border-radius: 99px; }
meter::-webkit-meter-even-less-good-value { background: var(--bad); border-radius: 99px; }
meter:-moz-meter-optimum::-moz-meter-bar { background: var(--ok); }
meter:-moz-meter-sub-optimum::-moz-meter-bar { background: var(--warn); }
.bar meter::-webkit-meter-optimum-value { background: var(--accent); }
.radios label:has(input:checked) { border-color: var(--accent); background: rgba(255,212,0,.08); }
.avatar { width: 40px; height: 40px; border-radius: 50%; background: var(--panel2); display: flex; align-items: center;
  justify-content: center; font-weight: 800; color: var(--accent); }
@media (max-width: 640px) {
  nav { order: 3; width: 100%; flex-wrap: nowrap; overflow-x: auto; flex: none; }
  .brand { flex: 1; }
  .row select, .row input[type=text] { min-width: 0; flex: 1; }
}
nav a { white-space: nowrap; }
.vcard, .vcard:hover { color: var(--text); text-decoration: none; }
.vcard:hover { border-color: var(--muted); }
.brand { white-space: nowrap; }
input[type=checkbox], input[type=radio] { accent-color: var(--accent); }