@font-face{font-family:'Halvar XBd';src:url('/static/fonts/halvarbreitt2xbd.woff2') format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:'Rooftop Md';src:url('/static/fonts/t2rooftopmedium.woff2') format('woff2');font-weight:400;font-display:swap}

:root{
  color-scheme:dark;
  --bg:#0F0F11;--panel:#1A1A1E;--card:#1E1E1E;--card2:#171717;
  --accent:#A7FC00;--accent2:#8AE000;--label:#F2F2F2;--muted:#96969C;--muted2:#70707A;
  --field:#232327;--danger:#FF5C76;--ok:#35E0AD;
  --f-a:'Halvar XBd','Rooftop Md',-apple-system,sans-serif;
  --f-b:'Rooftop Md',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Arial,sans-serif;
  --pad:20px;--max:1080px;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--label);font-family:var(--f-b);
  font-size:16px;line-height:1.5;-webkit-font-smoothing:antialiased;overflow-x:hidden}
a{color:inherit;text-decoration:none}
h1,h2,h3{font-family:var(--f-a);font-weight:400;letter-spacing:-.2px;margin:0}
code{font-family:ui-monospace,Menlo,monospace;font-size:13px;color:var(--accent)}

.hd{position:sticky;top:0;z-index:30;background:rgba(15,15,17,.86);
  -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);
  border-bottom:1px solid rgba(255,255,255,.07)}
.hd .wrap{display:flex;align-items:center;gap:14px;min-height:60px}
.logo{font-family:var(--f-a);font-size:20px;letter-spacing:.4px;color:#fff;flex:0 0 auto}
.logo b{color:var(--accent)}
.nav{margin-left:auto;display:flex;gap:20px;align-items:center}
.nav a{font-size:14px;color:var(--muted)}
.nav a:hover{color:var(--label)}
@media(max-width:620px){ .nav .hide-sm{display:none} }

.wrap{max-width:var(--max);margin:0 auto;padding:0 var(--pad)}
main{padding:26px 0 40px}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;
  min-height:44px;padding:0 18px;border:0;border-radius:14px;text-decoration:none;
  font-family:var(--f-b);font-size:15px;font-weight:700;cursor:pointer;
  background:linear-gradient(135deg,var(--accent),var(--accent2));color:#0b0b0b;
  box-shadow:0 10px 26px rgba(167,252,0,.2);transition:transform .12s,filter .15s}
.btn:active{transform:scale(.97)}
.btn.ghost{background:rgba(255,255,255,.07);color:var(--label);box-shadow:none;
  border:1px solid rgba(255,255,255,.12);font-weight:400}
.btn.ghost:hover{background:rgba(255,255,255,.11)}
.btn.sm{min-height:36px;padding:0 13px;font-size:13.5px;border-radius:11px}
.btn.danger{color:var(--danger);border-color:rgba(255,92,118,.3)}
.btn.danger:hover{background:rgba(255,92,118,.12)}
@media(hover:hover){ .btn:hover{filter:brightness(1.06)} }
@media(prefers-reduced-motion:reduce){ *{transition:none!important;animation:none!important} }

.hero{padding:10px 0 24px;position:relative;overflow:hidden}
.hero::before{content:"";position:absolute;right:-120px;top:-160px;width:420px;height:420px;
  border-radius:50%;background:radial-gradient(circle,rgba(167,252,0,.14),transparent 65%);
  pointer-events:none}
.hero h1{font-size:clamp(25px,5.6vw,40px);line-height:1.1;margin:0 0 8px;position:relative}
.hero h1 em{font-style:normal;color:var(--accent)}
.hero p{margin:0;color:var(--muted);font-size:15px;position:relative}

.nums{display:grid;grid-template-columns:repeat(2,1fr);gap:8px;margin-top:22px;position:relative}
@media(min-width:520px){ .nums{grid-template-columns:repeat(4,1fr)} }
.num{padding:13px 14px;border-radius:16px;background:var(--card);border:1px solid rgba(255,255,255,.07)}
.num b{display:block;font-family:var(--f-a);font-size:21px;color:var(--accent)}
.num span{display:block;font-size:12.5px;color:var(--muted);margin-top:3px;line-height:1.35}

.card{background:var(--card);border:1px solid rgba(255,255,255,.07);
  border-radius:18px;padding:18px;margin-bottom:16px}
.card h2{font-size:clamp(18px,3.6vw,22px);margin:0 0 14px}
.card h3{font-size:16px;margin:0 0 10px}

.cols2{display:grid;gap:16px;grid-template-columns:1fr}
@media(min-width:860px){ .cols2{grid-template-columns:1fr 1fr} .cols2 .card{margin-bottom:0} }

.notice{padding:13px 15px;border-radius:14px;margin-bottom:16px;font-size:14.5px;
  background:var(--card2);border:1px solid rgba(255,255,255,.08)}
.notice.ok{background:rgba(53,224,173,.09);border-color:rgba(53,224,173,.28);color:#bff3e5}
.notice.warn{background:rgba(255,92,118,.09);border-color:rgba(255,92,118,.3);color:#ffc2cc}
.notice b{color:#fff}

label{display:block;font-size:13px;color:var(--muted);margin:14px 0 6px}
label:first-child{margin-top:0}
input,textarea,select{width:100%;background:var(--field);color:var(--label);
  border:1px solid rgba(255,255,255,.09);border-radius:13px;padding:12px 13px;
  font-family:var(--f-b);font-size:15px}
textarea{min-height:96px;resize:vertical;line-height:1.5}
input:focus,textarea:focus,select:focus{outline:0;border-color:var(--accent);
  box-shadow:0 0 0 3px rgba(167,252,0,.12)}
input::placeholder,textarea::placeholder{color:var(--muted2)}
input[type=file]{padding:11px;font-size:14px}
.hint{font-size:12.5px;color:var(--muted2);margin-top:9px;line-height:1.45}
.row{display:flex;gap:10px;align-items:center;flex-wrap:wrap}

.tablewrap{overflow-x:auto;margin:0 -4px}
table{width:100%;border-collapse:collapse;font-size:14px;min-width:820px}
th{text-align:left;padding:11px 10px;color:var(--muted2);font-size:12.5px;
  font-weight:400;border-bottom:1px solid rgba(255,255,255,.08);white-space:nowrap}
td{padding:11px 10px;border-bottom:1px solid rgba(255,255,255,.05);vertical-align:middle}
tr:last-child td{border-bottom:0}
tr:hover td{background:rgba(255,255,255,.025)}
td .row{gap:6px;flex-wrap:nowrap}
input[type=checkbox]{width:17px;height:17px;accent-color:var(--accent);cursor:pointer}
a.link{color:var(--accent)}
a.link:hover{text-decoration:underline}

.thumb{width:64px;height:36px;border-radius:9px;object-fit:cover;display:block;background:#0d0d0d}
.thumb-ph{width:64px;height:36px;border-radius:9px;background:#0d0d0d;display:flex;
  align-items:center;justify-content:center;font-size:10px;color:var(--muted2);
  font-family:var(--f-a);letter-spacing:.5px}
.sub{color:var(--muted2);font-size:12px;margin-top:3px}
.err{color:var(--danger);font-size:12.5px;max-width:300px;overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap}

.bar{height:5px;background:#0c0e12;border-radius:3px;overflow:hidden;width:104px}
.bar>div{height:100%;background:linear-gradient(90deg,var(--accent),var(--accent2));
  border-radius:3px;transition:width .3s}

.pill{display:inline-block;padding:4px 11px;border-radius:999px;font-size:12px;
  font-weight:700;white-space:nowrap;background:var(--field);color:var(--muted)}
.pill.s-queued{background:rgba(255,255,255,.07);color:var(--label)}
.pill.s-fetching,.pill.s-downloading{background:rgba(167,252,0,.14);color:var(--accent)}
.pill.s-normalizing{background:rgba(142,224,255,.14);color:#9be3ff}
.pill.s-uploading,.pill.s-waiting_slot{background:rgba(167,252,0,.2);color:var(--accent)}
.pill.s-published{background:rgba(53,224,173,.15);color:var(--ok)}
.pill.s-failed{background:rgba(255,92,118,.16);color:var(--danger)}
.pill.s-paused{background:rgba(255,255,255,.09);color:var(--muted)}
.pill.on{background:linear-gradient(135deg,var(--accent),var(--accent2));color:#0b0b0b}

.filters{display:flex;gap:7px;flex-wrap:wrap;margin-bottom:16px}
.filters a{cursor:pointer}
.filters a.on{background:linear-gradient(135deg,var(--accent),var(--accent2));color:#0b0b0b}
.filters a:not(.on):hover{background:rgba(255,255,255,.1);color:var(--label)}

.logs{background:#0c0e12;border:1px solid rgba(255,255,255,.07);border-radius:15px;
  padding:15px;max-height:64vh;overflow:auto;
  font:12.5px/1.7 ui-monospace,Menlo,monospace}
.logs .t{color:#4b5266;margin-right:10px}
.logs .error{color:#ff9aa8;white-space:pre-wrap}
.logs .warn{color:#ffd479;white-space:pre-wrap}
.logs .info{color:#c3cad9;white-space:pre-wrap}

.kv{display:flex;gap:10px;flex-wrap:wrap;margin:0 0 4px;font-size:14px}
.kv span{color:var(--muted)}
.divider{height:1px;background:rgba(255,255,255,.07);margin:16px 0}

.ft{padding:26px 0;border-top:1px solid rgba(255,255,255,.06);color:var(--muted2);font-size:13px}
.ft-row{display:flex;flex-wrap:wrap;gap:8px 18px;align-items:center;justify-content:space-between}
.ft a{color:var(--muted)}
@media(max-width:359px){ :root{--pad:14px} }