/* SW HD Uploader — Neobrutalism v10 */
:root{
  --ink:#111;--fg:#111;--on:#111;--paper:#FFF6DA;--card:#fff;--soft:#F3EBD2;
  --yellow:#FFE14D;--pink:#FF7EB6;--green:#3DDC84;--blue:#66C7FF;--purple:#B693FF;--red:#FF5C5C;--orange:#FF9F45;
  --b:3px solid var(--ink);--sh:6px 6px 0 var(--ink);--sh-s:3px 3px 0 var(--ink);--sh-l:9px 9px 0 var(--ink);
  --font:"Space Grotesk","Trebuchet MS","Segoe UI",system-ui,sans-serif;
  --mono:ui-monospace,"SFMono-Regular",Menlo,Consolas,monospace;
  --side:250px;
}
:root[data-theme=dark]{
  --ink:#F4EFE0;--fg:#F4EFE0;--paper:#16131F;--card:#241F33;--soft:#2E2842;
  --yellow:#E9C620;--pink:#E5679F;--green:#2FB86E;--blue:#4FA9DD;--purple:#9B78EE;--red:#E64B4B;--orange:#E68933;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;background:var(--paper);color:var(--fg);font:500 16px/1.5 var(--font);
  background-image:radial-gradient(color-mix(in srgb,var(--ink) 16%,transparent) 1.4px,transparent 1.4px);background-size:22px 22px}
a{color:inherit;text-decoration-thickness:2px;text-underline-offset:3px}
h1,h2,h3{line-height:1.1;margin:0 0 .6em;font-weight:800;letter-spacing:-.02em}
h1{font-size:clamp(1.9rem,6vw,3.4rem)}h2{font-size:1.4rem}h3{font-size:1.1rem}
p{margin:.4em 0 .9em}small{font-size:.8em}
mark{background:var(--pink);color:var(--on);padding:0 .2em;border:var(--b);box-shadow:var(--sh-s);display:inline-block;transform:rotate(-2deg)}
.muted{opacity:.72;font-size:.92rem}
.nowrap{white-space:nowrap}
.wrap{max-width:1040px;margin:0 auto;padding:20px 16px 90px}
.foot{text-align:center;padding:24px;font-size:.85rem;opacity:.7}
.pagehead{margin-bottom:18px}.pagehead h1{font-size:clamp(1.6rem,5vw,2.4rem);margin-bottom:.15em}

/* ===== public nav ===== */
.nav{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;padding:12px 16px;background:var(--card);border-bottom:var(--b);position:sticky;top:0;z-index:20}
.nav nav{display:flex;align-items:center;gap:14px;font-weight:700}
.nav nav a:not(.btn){text-decoration:none}
.brand{display:flex;align-items:center;gap:10px;font-weight:800;text-decoration:none;font-size:1.1rem;line-height:1.1}
.brand small{display:block;font-size:.7rem;font-weight:600;opacity:.65}
.logo{background:var(--green);color:var(--on);border:var(--b);box-shadow:var(--sh-s);padding:2px 8px;transform:rotate(-4deg);flex:none}

/* ===== app shell ===== */
.shell{display:flex;min-height:100vh}
.side{width:var(--side);flex:none;background:var(--card);border-right:var(--b);padding:16px;display:flex;flex-direction:column;gap:18px;position:sticky;top:0;height:100vh;overflow-y:auto}
.menu{display:flex;flex-direction:column;gap:8px}
.menu a{display:flex;align-items:center;gap:10px;padding:9px 12px;border:var(--b);background:var(--card);text-decoration:none;font-weight:700;box-shadow:var(--sh-s);transition:transform .08s,box-shadow .08s}
.menu a i{font-style:normal;width:1.4em;text-align:center}
.menu a:hover{transform:translate(-2px,-2px);box-shadow:5px 5px 0 var(--ink)}
.menu a.on{background:var(--yellow);color:var(--on);transform:translate(3px,3px);box-shadow:none}
.side-foot{margin-top:auto;display:flex;flex-direction:column;gap:8px}
.main{flex:1;min-width:0}
.top{display:none}

/* ===== chip / pill ===== */
.chip,.pill{display:inline-flex;align-items:center;gap:7px;border:2px solid var(--ink);padding:1px 10px;font-size:.82rem;font-weight:800;background:var(--yellow);color:var(--on)}
.chip.ok,.pill.ok{background:var(--green)}.chip.bad,.pill.bad{background:var(--red)}.pill.warn{background:var(--orange)}.pill.idle{background:var(--soft);color:var(--fg)}
.dot{width:10px;height:10px;border:2px solid var(--on);background:currentColor;border-radius:50%;display:inline-block}
.chip.ok .dot,.pill.ok .dot{background:#0a7a3b;animation:pulse 1.6s infinite}
.chip.bad .dot,.pill.bad .dot{background:#8a0000}
.pill.warn .dot{background:#8a4b00;animation:pulse .8s infinite}
.pill.state{font-size:.95rem;padding:3px 12px}
@keyframes pulse{0%{box-shadow:0 0 0 0 #0a7a3b88}70%{box-shadow:0 0 0 7px transparent}100%{box-shadow:0 0 0 0 transparent}}

/* ===== card ===== */
.card{background:var(--card);border:var(--b);box-shadow:var(--sh);padding:20px;margin-bottom:22px;position:relative}
.card .card{box-shadow:var(--sh-s);margin-bottom:0}
.card.yellow,.yellow{background:var(--yellow);color:var(--on)}.card.pink,.pink{background:var(--pink);color:var(--on)}
.card.green,.green{background:var(--green);color:var(--on)}.card.blue,.blue{background:var(--blue);color:var(--on)}
.card.purple,.purple{background:var(--purple);color:var(--on)}.card.red,.red{background:var(--red);color:var(--on)}
.card.big{padding:clamp(20px,5vw,46px);box-shadow:var(--sh-l)}
.narrow{max-width:430px;margin:30px auto}
.hero{margin:8px 0 22px}
.sticker{position:absolute;top:-14px;right:14px;background:var(--pink);color:var(--on);border:var(--b);box-shadow:var(--sh-s);padding:2px 12px;font-weight:800;transform:rotate(4deg);font-size:.85rem}
.marquee{overflow:hidden;border:var(--b);background:var(--ink);color:var(--paper);margin:0 0 26px;box-shadow:var(--sh-s)}
.marquee div{white-space:nowrap;display:inline-block;padding:8px 0;font-weight:800;letter-spacing:.06em;animation:marq 32s linear infinite}
@keyframes marq{to{transform:translateX(-50%)}}
.grid3{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:20px;margin-bottom:26px}
.grid4{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:18px;margin-bottom:22px}
.grid-auto{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:16px}
.cols{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:22px;align-items:start;margin-bottom:22px}
.cols>.card,.cols>div>.card{margin-bottom:22px}
.row{display:flex;gap:12px;flex-wrap:wrap;align-items:flex-end}.row.between{justify-content:space-between;align-items:center}
.row>label{flex:1 1 140px}
.price{font-size:1.8rem;font-weight:800;margin:0}
.tile{display:flex;flex-direction:column;gap:2px;text-decoration:none;text-align:left;margin:0;transition:transform .08s,box-shadow .08s}
.tile:hover{transform:translate(-3px,-3px);box-shadow:9px 9px 0 var(--ink)}
.tile i{font-style:normal;font-size:2rem}.tile small{opacity:.7}

/* ===== stats ===== */
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:18px;margin-bottom:24px}
.stat{margin:0;display:flex;flex-direction:column;gap:2px;padding:14px 16px}
.stat span{font-weight:700;font-size:.9rem}
.stat b{font-size:2.3rem;line-height:1.05}.stat b.small{font-size:1.1rem;line-height:1.5;word-break:break-word}.stat b small{font-size:.5em;opacity:.7}
.kv{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px;margin:14px 0}
.kv>div{border:2px solid var(--ink);padding:8px 10px;background:var(--soft)}
.kv span{display:block;font-size:.78rem;font-weight:700;opacity:.7}.kv b{word-break:break-all}
.kv.one{grid-template-columns:1fr}
.conn-head{display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap;align-items:flex-start}
.conn-actions{display:flex;gap:10px;flex-wrap:wrap}
.statusline{display:flex;justify-content:space-between;gap:10px;flex-wrap:wrap;align-items:center;margin-bottom:14px}

/* ===== events ===== */
.events{list-style:none;margin:8px 0 0;padding:0;display:flex;flex-direction:column;gap:8px}
.events li{display:flex;gap:10px;align-items:flex-start;border:2px solid var(--ink);padding:7px 10px;background:var(--soft);font-size:.92rem}
.events li i{font-style:normal}
.events li small{display:block;opacity:.65}
.events li.lv-err{background:color-mix(in srgb,var(--red) 35%,var(--card))}.events li.lv-warn{background:color-mix(in srgb,var(--orange) 30%,var(--card))}
.events li.lv-ok{background:color-mix(in srgb,var(--green) 28%,var(--card))}
.events.big{max-height:520px;overflow-y:auto}
.skel{height:14px;background:linear-gradient(90deg,var(--soft),var(--card),var(--soft));background-size:200% 100%;animation:shim 1.2s infinite;margin:10px 0;border:2px solid var(--ink)}
@keyframes shim{to{background-position:-200% 0}}

/* ===== alert / toast / msg ===== */
.alert{border:var(--b);box-shadow:var(--sh-s);padding:12px 16px;margin-bottom:18px;font-weight:700;background:var(--green);color:var(--on)}
.alert.err{background:var(--red)}.alert.warn{background:var(--orange)}.alert.info{background:var(--blue)}
.msg{min-height:1.4em;font-weight:700;margin:10px 0 0}.msg.ok{color:#0a7a3b}.msg.err{color:#d00}
:root[data-theme=dark] .msg.ok{color:#5CFFA0}:root[data-theme=dark] .msg.err{color:#FF8A8A}
#toasts{position:fixed;top:14px;right:14px;z-index:100;display:flex;flex-direction:column;gap:10px;max-width:min(360px,calc(100vw - 28px))}
.toast{border:var(--b);box-shadow:var(--sh-s);padding:10px 14px;font-weight:800;background:var(--green);color:var(--on);animation:pop .25s}
.toast.err{background:var(--red)}.toast.warn{background:var(--orange)}.toast.out{opacity:0;transform:translateX(30px);transition:.3s}
@keyframes pop{from{transform:translateY(-14px) scale(.96);opacity:0}}

/* ===== button ===== */
.btn{display:inline-block;font:inherit;font-weight:800;color:var(--fg);text-decoration:none;cursor:pointer;padding:11px 18px;background:var(--card);border:var(--b);box-shadow:var(--sh-s);transition:transform .08s,box-shadow .08s;text-align:center}
.btn.yellow,.btn.pink,.btn.green,.btn.blue,.btn.red,.btn.purple{color:var(--on)}
.btn:hover{transform:translate(-2px,-2px);box-shadow:5px 5px 0 var(--ink)}
.btn:active{transform:translate(3px,3px);box-shadow:0 0 0 var(--ink)}
.btn:disabled{opacity:.45;cursor:not-allowed;transform:none;box-shadow:var(--sh-s)}
.btn.sm{padding:5px 11px;font-size:.88rem}
.btn.block{display:block;width:100%;margin-top:6px}
:focus-visible{outline:3px dashed var(--purple);outline-offset:3px}

/* ===== form ===== */
label{display:block;font-weight:700;margin-bottom:14px}
input,textarea,select{display:block;width:100%;margin-top:6px;padding:11px 12px;font:inherit;font-weight:500;background:var(--card);color:var(--fg);border:var(--b);border-radius:0;outline:none}
input:focus,textarea:focus,select:focus{box-shadow:var(--sh-s);background:color-mix(in srgb,var(--yellow) 22%,var(--card))}
input[readonly]{background:var(--soft)}
input[type=radio],input[type=file]{display:none}
input[type=datetime-local]{min-height:46px}
textarea{resize:vertical}
.switch{display:flex;align-items:center;gap:12px;cursor:pointer}
.switch input{display:none}
.switch span{width:54px;height:30px;border:var(--b);background:var(--soft);position:relative;flex:none;transition:background .15s}
.switch span::after{content:"";position:absolute;top:2px;left:2px;width:20px;height:20px;background:var(--ink);transition:transform .15s}
.switch input:checked+span{background:var(--green)}.switch input:checked+span::after{transform:translateX(24px)}
.drop{display:block;border:3px dashed var(--ink);background:var(--soft);padding:26px 14px;cursor:pointer;text-align:center;margin-bottom:14px;transition:background .15s,transform .1s}
.drop:hover,.drop.over{background:var(--yellow);color:var(--on);transform:scale(1.01)}
.drop-in{display:flex;flex-direction:column;gap:2px;align-items:center}.drop-in i{font-style:normal;font-size:2rem}.drop-in small{opacity:.7;font-weight:600}
#preview img,#preview video{max-width:100%;max-height:280px;border:var(--b);margin:0 0 14px;display:block;background:#000}
#preview audio{width:100%;margin-bottom:14px}
.swatches{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:12px}
.swatches label{margin:0}.swatches span{display:block;width:38px;height:38px;border:var(--b);cursor:pointer;box-shadow:var(--sh-s)}
.swatches input:checked+span{outline:3px solid var(--ink);outline-offset:2px;transform:translate(2px,2px);box-shadow:none}
.textprev{border:var(--b);min-height:120px;display:flex;align-items:center;justify-content:center;text-align:center;padding:20px;font-size:1.3rem;font-weight:800;margin-bottom:14px;word-break:break-word;white-space:pre-wrap}

/* ===== tabs ===== */
.tabs{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:16px}
.tabs label{margin:0;flex:1 1 80px}
.tabs label span{display:block;text-align:center;padding:9px 6px;border:var(--b);background:var(--card);cursor:pointer;font-weight:800;box-shadow:var(--sh-s)}
.tabs input:checked+span{background:var(--pink);color:var(--on);transform:translate(2px,2px);box-shadow:none}
.admin-tabs{gap:8px}
.admin-tabs a{padding:7px 12px;border:var(--b);background:var(--card);font-weight:800;text-decoration:none;box-shadow:var(--sh-s);font-size:.9rem}
.admin-tabs a.on{background:var(--yellow);color:var(--on);transform:translate(2px,2px);box-shadow:none}

/* ===== progress / steps / code ===== */
.bar{height:20px;border:var(--b);background:var(--soft);margin:10px 0}
.bar i{display:block;height:100%;width:0;background:var(--green);border-right:var(--b);transition:width .25s}
.steps{display:flex;flex-direction:column;gap:6px;margin:10px 0}
.step{display:flex;align-items:center;gap:10px;border:2px solid var(--ink);padding:6px 10px;background:var(--soft);font-weight:700;font-size:.92rem;opacity:.55}
.step i{font-style:normal;width:24px;height:24px;border:2px solid var(--ink);display:grid;place-items:center;background:var(--card);font-size:.8rem;flex:none}
.step.on{opacity:1;background:var(--yellow);color:var(--on)}.step.on i{animation:pulse2 1s infinite;color:var(--fg)}
.step.done{opacity:1;background:var(--green);color:var(--on)}
@keyframes pulse2{50%{transform:scale(1.15)}}
.code{font-size:clamp(2rem,10vw,3.2rem);font-weight:800;letter-spacing:.12em;text-align:center;background:var(--yellow);color:var(--on);border:var(--b);box-shadow:var(--sh);padding:14px 8px;margin:16px 0;font-variant-numeric:tabular-nums;font-family:var(--mono)}
.how{padding-left:20px;margin:0 0 10px}.how li{margin-bottom:8px}
.faq{border:var(--b);background:var(--card);margin-bottom:10px;padding:10px 14px;box-shadow:var(--sh-s)}
.faq summary{cursor:pointer;font-weight:800}
.pre{background:#111;color:#7CFF9E;padding:12px;border:var(--b);overflow-x:auto;font:600 .85rem/1.5 var(--mono);margin:8px 0}
code{background:var(--yellow);color:var(--on);padding:0 4px;border:2px solid var(--ink);font-size:.85em;word-break:break-all;font-family:var(--mono)}

/* ===== table ===== */
.scroll{overflow-x:auto}
table{width:100%;border-collapse:collapse;min-width:520px}
th,td{border:2px solid var(--ink);padding:8px 10px;text-align:left;vertical-align:top}
th{background:var(--yellow);color:var(--on)}
details summary{list-style:none;cursor:pointer;display:inline-block}
details summary::-webkit-details-marker{display:none}
details[open]{min-width:250px}
.inl{display:flex;gap:6px;margin-top:8px}.inl input{margin:0;padding:5px 8px}

/* ===== bottom bar (mobile) ===== */
.bottombar{display:none}
.sheet{position:fixed;inset:0;background:#0009;z-index:60;display:flex;align-items:flex-end}
.sheet[hidden]{display:none}
.sheet-in{background:var(--paper);border-top:var(--b);width:100%;padding:18px 16px calc(18px + env(safe-area-inset-bottom));max-height:85vh;overflow-y:auto}
.sheet-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-bottom:14px}
.sheet-grid a{border:var(--b);background:var(--card);box-shadow:var(--sh-s);text-decoration:none;font-weight:800;text-align:center;padding:12px 4px;font-size:.85rem}
.sheet-grid i{display:block;font-style:normal;font-size:1.6rem}

[hidden]{display:none!important}

@media (max-width:860px){
  .side{display:none}
  .top{display:flex;align-items:center;justify-content:space-between;padding:10px 14px;background:var(--card);border-bottom:var(--b);position:sticky;top:0;z-index:20}
  .wrap{padding:16px 14px 110px}
  .bottombar{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:40;background:var(--card);border-top:var(--b);padding:6px 6px calc(6px + env(safe-area-inset-bottom));justify-content:space-around;align-items:flex-end}
  .bottombar a,.bottombar button{flex:1;display:flex;flex-direction:column;align-items:center;gap:0;text-decoration:none;font:inherit;font-size:.68rem;font-weight:800;color:var(--fg);background:none;border:0;padding:4px 2px;cursor:pointer}
  .bottombar i{font-style:normal;font-size:1.3rem}
  .bottombar a.on{background:var(--yellow);color:var(--on);border:2px solid var(--ink)}
  .bottombar a.fab{flex:none;margin:-22px 6px 0;background:var(--pink);color:var(--on);border:var(--b);box-shadow:var(--sh-s);padding:8px 16px}
  #toasts{top:auto;bottom:88px;right:12px}
}
@media (max-width:520px){
  .card{padding:16px;box-shadow:4px 4px 0 var(--ink)}
  .stats{grid-template-columns:repeat(2,1fr);gap:12px}
  .cols{grid-template-columns:1fr}
}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}