:root{
  --rail:#1e1f22;--side:#2b2d31;--main:#313338;--hover:#35373c;--sel:#404249;--card:#2b2d31;--card2:#383a40;
  --ink:#dbdee1;--bright:#f2f3f5;--muted:#949ba4;--line:#3f4147;--input:#1e1f22;
  --accent:#5865f2;--accent-h:#4752c4;--green:#23a55a;--danger:#f23f43;
  --hangar:#3ba55c;--hangar-bg:rgba(59,165,92,.18);
  --d1:#5aa9f5;--d1-bg:rgba(90,169,245,.16);
  --expected:#00b5ad;--expected-bg:rgba(0,181,173,.16);
  --recycled:#80848e;--recycled-bg:rgba(128,132,142,.14);
  --out:#f0b232;--out-bg:rgba(240,178,50,.17);
  --shipped:#a78bfa;--shipped-bg:rgba(167,139,250,.18);
  --unknown:#f23f43;--unknown-bg:rgba(242,63,67,.14);
  --sb:240px;--srv:72px;--bar:52px;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;background:var(--rail)}
body{margin:0;color:var(--ink);font:16px/1.4 "gg sans","Noto Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;background:var(--main)}
a{color:#00a8fc}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
h1{font-size:24px;margin:0 0 8px;color:var(--bright)}
h2{font-size:13px;margin:0 0 12px;color:var(--muted);text-transform:uppercase;letter-spacing:.04em;font-weight:700}
.muted{color:var(--muted)}.small{font-size:13px}.center{text-align:center}
code{background:var(--input);padding:2px 5px;border-radius:4px;font-size:14px;word-break:break-word}

/* ---------- shell ---------- */
.app{display:grid;grid-template-columns:var(--srv) var(--sb) minmax(0,1fr);height:100vh;height:100dvh}
.servers{background:var(--rail);display:flex;flex-direction:column;align-items:center;gap:8px;padding:12px 0;padding-top:max(12px,env(safe-area-inset-top))}
.server{width:48px;height:48px;border-radius:16px;display:flex;align-items:center;justify-content:center;background:var(--main);color:var(--green);font-size:26px;text-decoration:none;overflow:hidden;transition:border-radius .15s}
.server img{width:48px;height:48px}
.server.on{border-radius:16px;box-shadow:-12px 0 0 -4px var(--bright)}
.server.add:hover{background:var(--green);color:#fff;border-radius:16px}
.sidebar{background:var(--side);display:flex;flex-direction:column;min-height:0;padding-top:env(safe-area-inset-top)}
.sb-head{height:var(--bar);display:flex;align-items:center;padding:0 16px;border-bottom:1px solid #1f2023;box-shadow:0 1px 0 rgba(0,0,0,.2)}
.sb-head a{color:var(--bright);font-weight:700;text-decoration:none;font-size:16px}
.sb-scroll{flex:1;overflow-y:auto;padding:8px 8px 12px}
.sb-cat{color:var(--muted);font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.03em;padding:16px 8px 6px}
.chan{display:flex;align-items:center;gap:6px;padding:9px 8px;margin:1px 0;border-radius:6px;color:var(--muted);text-decoration:none;font-size:16px;font-weight:500;min-height:42px}
.chan:hover{background:var(--hover);color:var(--ink)}
.chan.on{background:var(--sel);color:var(--bright)}
.chan .hash{font-size:20px;width:20px;text-align:center;color:#80848e;font-weight:400}
.chan .cname{flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.chan .count{min-width:24px;padding:1px 7px;border-radius:999px;background:var(--rail);color:var(--ink);font-size:12px;font-weight:700;text-align:center}
.chan .dot{width:8px;height:8px;border-radius:50%;flex:none;margin-left:-2px}
.c-hangar .dot{background:var(--hangar)}.c-d1 .dot{background:var(--d1)}.c-out .dot{background:var(--out)}.c-shipped .dot{background:var(--shipped)}
.c-expected .dot{background:var(--expected)}.chan.c-expected.on .count{background:var(--expected);color:#111}
.c-recycled .dot{background:var(--recycled)}.c-recycled .cname{color:#6d6f78}
.c-unknown .dot{background:transparent;border:1.5px dashed var(--unknown)}
.c-unknown .cname{color:#c47b7d}
.chan.c-hangar.on .count{background:var(--hangar);color:#fff}.chan.c-out.on .count{background:var(--out);color:#111}
.chan.c-recycled.on .count{background:var(--recycled);color:#111}.chan.c-shipped.on .count{background:var(--shipped);color:#111}.chan.c-d1.on .count{background:var(--d1);color:#111}.chan.c-unknown.on .count{background:var(--unknown);color:#fff}
.userpanel{background:#232428;display:flex;align-items:center;gap:8px;padding:8px;padding-bottom:max(8px,env(safe-area-inset-bottom))}
.userpanel form{margin:0}
.avatar{position:relative;width:34px;height:34px;border-radius:50%;background:var(--accent);color:#fff;display:flex;align-items:center;justify-content:center;font-weight:700;flex:none}
.avatar i{position:absolute;right:-2px;bottom:-2px;width:12px;height:12px;border-radius:50%;background:var(--green);border:3px solid #232428}
.uname{flex:1;min-width:0;display:flex;flex-direction:column;line-height:1.15}
.uname b{color:var(--bright);font-size:14px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.uname small{color:var(--muted);font-size:12px}
.iconbtn{display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:6px;border:0;background:transparent;color:var(--muted);font-size:20px;text-decoration:none;cursor:pointer;flex:none}
.iconbtn:hover{background:var(--hover);color:var(--ink)}
.main{display:flex;flex-direction:column;min-width:0;min-height:0;background:var(--main)}
.bar{height:var(--bar);flex:none;display:flex;align-items:center;gap:8px;padding:0 10px 0 14px;border-bottom:1px solid #26282c;box-shadow:0 1px 0 rgba(0,0,0,.2);box-sizing:content-box;padding-top:env(safe-area-inset-top)}
.bar .menu{display:none}
.bar-title{flex:1;min-width:0;color:var(--bright);font-weight:700;font-size:16px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bar-title .hash{color:#80848e;font-size:22px;font-weight:400;vertical-align:-2px}
.bar-back{color:var(--muted);font-size:30px;line-height:1;text-decoration:none;padding:0 6px 4px 0}
.bar-search{width:220px;margin:0;background:var(--input);border:0;border-radius:6px;color:var(--ink);font:inherit;font-size:15px;padding:8px 10px}
.addbtn{color:var(--green);font-size:24px}
.pane{flex:1;overflow-y:auto;padding:16px 20px 40px;-webkit-overflow-scrolling:touch}
.pane > *{max-width:860px}
.scrim{display:none}

/* ---------- auth ---------- */
.authpage{min-height:100vh;background:var(--accent) linear-gradient(160deg,#5865f2 0%,#404eed 45%,#1e1f22 100%);display:flex;align-items:center;justify-content:center;padding:20px}
.authwrap{width:100%;max-width:440px;display:flex;flex-direction:column;align-items:center}
.authlogo{width:72px;height:72px;border-radius:22px;margin-bottom:16px;box-shadow:0 8px 24px rgba(0,0,0,.3)}
.auth{width:100%;background:var(--main);border-radius:8px;padding:28px 24px;box-shadow:0 2px 10px rgba(0,0,0,.25)}
.auth h1{text-align:center}
.auth p.muted{text-align:center}

/* ---------- forms / buttons ---------- */
label{display:block;font-weight:700;font-size:12px;text-transform:uppercase;letter-spacing:.02em;color:var(--muted);margin:0 0 16px}
label .small{text-transform:none;font-weight:500;letter-spacing:0}
input,select,textarea{display:block;width:100%;margin-top:8px;font:inherit;font-size:17px;padding:12px;border:0;border-radius:6px;background:var(--input);color:var(--ink);text-transform:none;letter-spacing:0;font-weight:400}
input::placeholder{color:#6d6f78}
input[type=checkbox]{display:inline;width:22px;height:22px;margin:0 10px 0 0;accent-color:var(--accent)}
input[type=file]{font-size:15px;padding:10px}
label.check{font-weight:500;display:flex;align-items:center;text-transform:none;font-size:15px;color:var(--ink);letter-spacing:0}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;min-height:44px;padding:10px 16px;border-radius:6px;border:0;background:#4e5058;color:#fff;font:inherit;font-weight:600;font-size:15px;text-decoration:none;cursor:pointer}
.btn:hover{background:#6d6f78}
.btn.primary{background:var(--accent)}.btn.primary:hover{background:var(--accent-h)}
.btn.big{width:100%;min-height:50px;font-size:16px;margin-top:4px}
.btn.huge{flex:1;min-height:60px;font-size:19px;border-radius:10px}
.btn.danger{background:transparent;color:var(--danger);border:1px solid var(--danger)}
.btn.danger:hover{background:var(--danger);color:#fff}
.linkbtn{background:none;border:0;color:var(--muted);text-decoration:underline;font:inherit;font-size:14px;padding:12px;cursor:pointer}
.row-btns{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:10px}
.err{background:var(--unknown-bg);color:#ff9a9c;padding:10px 12px;border-radius:6px;font-weight:600}
.ok{background:var(--hangar-bg);color:#7ee2a0;padding:10px 12px;border-radius:6px;font-weight:700}
.warn{color:var(--out)}
.card{background:var(--card);border-radius:8px;padding:16px;margin:0 0 14px}

/* ---------- badges ---------- */
.badge{display:inline-block;padding:2px 8px;border-radius:4px;font-size:12px;font-weight:700;white-space:nowrap;vertical-align:middle}
.badge.big{font-size:17px;padding:6px 14px;border-radius:6px}
.s-hangar{background:var(--hangar-bg);color:var(--hangar)}
.s-d1{background:var(--d1-bg);color:var(--d1)}
.s-out{background:var(--out-bg);color:var(--out)}
.s-shipped{background:var(--shipped-bg);color:var(--shipped)}
.s-expected{background:var(--expected-bg);color:var(--expected)}
.s-recycled{background:var(--recycled-bg);color:var(--recycled);text-decoration:line-through;text-decoration-thickness:1px}
.s-unknown{background:transparent;color:#e08b8d;border:1px dashed #a14b4e}

/* ---------- list ---------- */
.more-filters{margin:0 0 10px}
.more-filters summary{cursor:pointer;color:var(--muted);font-size:14px;padding:4px 2px 8px;font-weight:600}
.filter-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:0 10px}
.filter-grid label{margin-bottom:10px}
.filter-grid select{font-size:15px;padding:9px}
.list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:2px}
.list a{display:flex;align-items:center;gap:12px;padding:10px 8px;border-radius:6px;text-decoration:none;color:var(--ink);min-height:64px}
.list a:hover,.list a:active{background:#2e3035}
.thumb{width:44px;height:44px;border-radius:50%;object-fit:cover;flex:none}
.thumb.ph{display:flex;align-items:center;justify-content:center;font-weight:800;font-size:18px}
.li-main{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.li-top{display:flex;align-items:center;gap:8px;min-width:0}
.li-name{font-weight:600;font-size:16.5px;color:var(--bright);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
.li-sub{color:var(--muted);font-size:14px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.li-flags{display:flex;gap:8px}
.stale,.cond{font-size:12px;color:var(--out);font-weight:600}
.li-badge{margin-left:auto;flex:none}
.noname{color:#ff9a9c;font-style:italic}
.flag{flex:none;font-size:11px;font-weight:700;color:#111;background:var(--out);border-radius:4px;padding:1px 6px;text-transform:uppercase;letter-spacing:.02em}
.group{list-style:none;color:var(--muted);font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.03em;padding:16px 8px 4px;display:flex;justify-content:space-between;border-bottom:1px solid var(--line);margin-bottom:2px}
.group:first-child{padding-top:4px}
.spots{display:flex;gap:6px;overflow-x:auto;padding:0 0 10px;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.spots::-webkit-scrollbar{display:none}
.spot{flex:none;border:0;border-radius:999px;background:var(--card2);color:var(--ink);font:inherit;font-size:14px;font-weight:600;padding:8px 12px;cursor:pointer;white-space:nowrap}
.spot b{color:var(--muted);font-weight:700;margin-left:4px}
.spot.on{background:var(--accent);color:#fff}.spot.on b{color:#dfe2ff}
.empty{text-align:center;color:var(--muted);padding:48px 16px}
.empty b{display:block;color:var(--bright);font-size:18px;margin-bottom:6px}
.empty .btn{margin:14px 4px 0}

/* ---------- detail ---------- */
.head h1{font-size:28px;word-break:break-word}
.status-row{margin:6px 0 8px}
.where{font-size:18px;margin:4px 0 6px;font-weight:600;color:var(--bright)}
.actions{display:flex;gap:10px;margin:0 0 14px}
.facts{display:grid;grid-template-columns:auto 1fr;gap:10px 18px;margin:0}
.facts dt{color:var(--muted);font-size:14px}
.facts dd{margin:0;font-weight:600;color:var(--bright);word-break:break-word}
.notes{white-space:pre-wrap;margin-top:14px;padding-top:12px;border-top:1px solid var(--line)}
.gallery{display:grid;grid-template-columns:repeat(auto-fill,minmax(100px,1fr));gap:8px;margin-bottom:12px}
.gallery figure{margin:0;position:relative}
.gallery img{width:100%;aspect-ratio:1;object-fit:cover;border-radius:8px;display:block}
.gallery form{position:absolute;top:4px;right:4px;margin:0}
.x{width:30px;height:30px;border-radius:50%;border:0;background:rgba(0,0,0,.6);color:#fff;font-size:18px;line-height:1;cursor:pointer}
.photo-form{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin:0}
.history{list-style:none;margin:0;padding:0}
.history li{padding:9px 0;border-top:1px solid var(--line);display:flex;flex-direction:column;gap:2px}
.history li:first-child{border-top:0}
.h-when{font-size:12.5px;color:var(--muted)}
.h-what{font-size:15px;word-break:break-word}
.danger-zone{margin:24px 0 10px;text-align:center}

/* ---------- move ---------- */
.now{margin:0 0 6px}
.sub{margin:18px 0 8px}
.quick{display:flex;flex-direction:column;gap:8px}
.quick form{margin:0}
.qbtn,.sbtn{width:100%;min-height:58px;border-radius:10px;border:2px solid transparent;font:inherit;font-size:18px;font-weight:700;cursor:pointer;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;padding:8px}
.qbtn span{font-size:14px;font-weight:500;opacity:.9}
.sbtn small{font-size:12px;font-weight:500;opacity:.85}
.statusbtns{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.q-hangar{background:var(--hangar-bg);color:var(--hangar)}
.q-d1{background:var(--d1-bg);color:var(--d1)}
.q-out{background:var(--out-bg);color:var(--out)}
.q-shipped{background:var(--shipped-bg);color:var(--shipped)}
.q-unknown{background:var(--unknown-bg);color:var(--unknown)}
.q-expected{background:var(--expected-bg);color:var(--expected)}
.q-recycled{background:var(--recycled-bg);color:#b5bac1}
.sbtn.current{border-color:currentColor}

/* ---------- phone: Discord-app style slide-out ---------- */
@media (max-width:820px){
  .app{grid-template-columns:minmax(0,1fr)}
  .servers,.sidebar{position:fixed;top:0;bottom:0;z-index:20;visibility:hidden;transition:transform .22s ease,visibility .22s}
  .servers{transform:translateX(-100%)}
  .sidebar{transform:translateX(calc(-100% - var(--srv) - 24px))}
  .servers{left:0;width:var(--srv)}
  .sidebar{left:var(--srv);width:min(280px,calc(100vw - var(--srv) - 40px))}
  .nav-open .servers,.nav-open .sidebar{transform:none;visibility:visible}
  .scrim{display:block;position:fixed;inset:0;background:rgba(0,0,0,.55);z-index:15;opacity:0;pointer-events:none;transition:opacity .22s}
  .nav-open .scrim{opacity:1;pointer-events:auto}
  .bar{padding-left:4px}
  .bar .menu{display:inline-flex;font-size:22px;color:var(--ink)}
  .bar-search{width:auto;flex:0 1 150px;min-width:90px}
  .pane{padding:12px 12px 40px}
  .list a{padding:10px 4px}
}

.alert-count{min-width:22px;padding:1px 6px;border-radius:999px;background:var(--danger);color:#fff;font-size:12px;font-weight:800;text-align:center}
.alert-banner{background:var(--danger);color:#fff;border-radius:8px;padding:10px 14px;margin:0 0 12px;display:flex;flex-direction:column;gap:4px}
.alert-banner a{color:#fff;font-weight:700;text-decoration:none}
.li-dates{font-size:13px;color:var(--ink)}
.overdue{color:#ff9a9c;font-weight:700}
.list li.is-overdue > a{box-shadow:inset 3px 0 0 var(--danger)}
.arrive{margin:0 0 10px}
.btn.arrived{width:100%;background:var(--green)}
.btn.arrived:hover{background:#1a8c4b}
.exp-box{margin:0 0 14px}
.exp-box summary{cursor:pointer;color:var(--muted);font-weight:600;font-size:14px;padding:4px 0 10px}
input[type=date]{min-height:48px;-webkit-appearance:none;appearance:none}
[hidden]{display:none !important}

.poles{display:flex;align-items:center;gap:6px;overflow-x:auto;padding:0 0 10px;scrollbar-width:none}
.poles::-webkit-scrollbar{display:none}
.poles-label{flex:none;color:var(--muted);font-size:12px;font-weight:700;text-transform:uppercase;margin-right:2px}
.pole{flex:none;border:1px solid var(--line);border-radius:6px;background:transparent;color:var(--ink);font:inherit;font-size:14px;font-weight:600;padding:7px 11px;cursor:pointer;white-space:nowrap}
.pole.on{background:var(--sel);border-color:var(--accent);color:var(--bright)}

.filterbar{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px;margin:0 0 10px}
.filterbar select{margin:0;font-size:14px;padding:9px 8px;border-radius:6px;min-width:0;text-overflow:ellipsis}
@media (min-width:821px){.filterbar{grid-template-columns:repeat(4,minmax(0,200px))}}
.in-channel .li-badge{display:none}
.stag{font-size:11.5px;font-weight:700;border-radius:4px;padding:1px 6px;background:var(--card2);color:var(--ink)}
.st-base{color:#7ee2a0}.st-town{color:var(--out)}.st-repair{color:#111;background:#f0b232}.st-shipped{color:var(--shipped)}.st-recycled{color:var(--recycled);text-decoration:line-through}