:root{
  --bg:#0b0b0e; --canvas:#0c0c10; --grid:#1b1b22; --ink:#f4f4f5; --muted:#9aa0ac; --faint:#565c68;
  --glass:rgba(22,22,27,.72); --solid:#17171c; --hair:rgba(255,255,255,.10); --hair2:rgba(255,255,255,.17);
  --shadow:0 10px 34px rgba(0,0,0,.5),0 1px 2px rgba(0,0,0,.4);
  --accent:#fbbf24; --good:#4ade80; --danger:#f87171; --btn:#f4f4f5; --btnink:#0b0b0e;
  --sans:ui-sans-serif,system-ui,"Segoe UI Variable Text","Segoe UI",Roboto,sans-serif;
  --num:ui-monospace,"Cascadia Mono","Segoe UI Mono",Menlo,monospace;
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{height:100%;margin:0;overflow:hidden;background:var(--bg);color:var(--ink);font-family:var(--sans);-webkit-font-smoothing:antialiased;user-select:none}
#wall{position:fixed;inset:0;display:block;cursor:grab;touch-action:none}
#wall.drag{cursor:grabbing}
.num{font-family:var(--num);font-variant-numeric:tabular-nums}
.lbl{font-size:10.5px;letter-spacing:.13em;text-transform:uppercase;color:var(--muted);font-weight:500}
.panel{position:fixed;z-index:10;background:var(--glass);backdrop-filter:blur(18px) saturate(1.4);-webkit-backdrop-filter:blur(18px) saturate(1.4);border:1px solid var(--hair);border-radius:16px;box-shadow:var(--shadow)}

#timer{top:16px;left:50%;transform:translateX(-50%);padding:11px 28px;text-align:center;min-width:240px}
#timerVal{font-family:var(--num);font-variant-numeric:tabular-nums;font-size:38px;font-weight:650;line-height:1;letter-spacing:-.03em}
#timer.low #timerVal{color:var(--danger)}
#timerSub{margin-top:6px;padding-top:6px;border-top:1px solid var(--hair);font-size:11.5px;color:var(--muted)}
#timerSub b{color:var(--accent)}

#stats{top:16px;left:16px;padding:14px 16px;width:196px}
#stats .brand{display:flex;align-items:center;gap:9px;margin-bottom:12px}
#stats .dot{width:12px;height:12px;border-radius:3px;background:conic-gradient(from 210deg,#f43f5e,#f59e0b,#22c55e,#3b82f6,#a855f7,#f43f5e)}
#stats .brand b{font-size:14.5px;letter-spacing:.04em}
.metric{margin-bottom:10px}
.metric .v{font-family:var(--num);font-variant-numeric:tabular-nums;font-size:16px;font-weight:600;margin-top:1px}
#profRow{display:flex;flex-direction:column;gap:6px;margin-top:8px}
#profRow .who{font-size:12.5px;color:var(--muted)}#profRow .who b{color:var(--ink)}
#profRow button{border:none;background:var(--hair);color:var(--ink);border-radius:9px;padding:7px;font-size:12px;font-weight:600;cursor:pointer;font-family:var(--sans)}
#profRow button:hover{background:var(--hair2)}

#feed{top:16px;right:16px;width:236px;padding:12px 12px 8px}
#feed .head{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px;padding:0 4px}
#feed .live{display:flex;align-items:center;gap:6px;font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
#feed .live b{color:var(--ink);font-family:var(--num);font-weight:600}
#feed .live i{width:6px;height:6px;border-radius:50%;background:var(--good);animation:live 1.6s infinite}
@keyframes live{0%{box-shadow:0 0 0 0 rgba(74,222,128,.5)}70%{box-shadow:0 0 0 6px rgba(74,222,128,0)}100%{box-shadow:0 0 0 0 rgba(74,222,128,0)}}
#feedList{list-style:none;margin:0;padding:0}
#feedList li{display:flex;align-items:center;gap:9px;padding:6px 4px;border-radius:9px;animation:slide .4s}
@keyframes slide{from{opacity:0;transform:translateX(10px)}}
#feedList li .c{width:11px;height:11px;border-radius:3px;flex:none}
#feedList li .n{font-size:12.5px;font-weight:500;flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#feedList li .p{font-family:var(--num);font-size:12px;color:var(--muted)}

#top{top:250px;right:16px;width:236px;padding:12px 12px 8px}
#top .head{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px;padding:0 4px}
#topList{list-style:none;margin:0;padding:0}
#topList li{display:flex;align-items:center;gap:8px;padding:6px 4px;border-radius:9px;cursor:pointer}
#topList li:hover{background:var(--hair)}
#topList .rk{font-family:var(--num);font-weight:700;font-size:12px;color:var(--muted);width:16px}
#topList .c{width:11px;height:11px;border-radius:3px;flex:none}
#topList .q{flex:1;font-size:12.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#topList .sc{font-family:var(--num);font-weight:600;font-size:12px}
#topList .empty{color:var(--faint);font-size:12px;padding:6px 4px}

#zoom{bottom:16px;right:16px;display:flex;flex-direction:column;padding:6px;gap:2px}
#zoom button{width:38px;height:38px;border:none;background:transparent;color:var(--ink);border-radius:11px;font-size:19px;cursor:pointer;display:grid;place-items:center}
#zoom button:hover{background:var(--hair)}
#zoom .div{height:1px;background:var(--hair);margin:1px 5px}

#hint{bottom:16px;left:50%;transform:translateX(-50%);padding:9px 16px;font-size:12.5px;color:var(--muted)}

/* placement popover */
#place{position:fixed;left:0;top:0;width:250px;z-index:12;opacity:0;pointer-events:none;transform:scale(.95);transform-origin:left center;transition:opacity .15s,transform .16s;padding:14px 16px}
#place.show{opacity:1;pointer-events:auto;transform:scale(1)}
#place .lbl{margin-bottom:8px}
#place .meta{font-family:var(--num);font-size:11.5px;color:var(--muted);margin-bottom:10px}
.swatches{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:11px}
.swatch{width:24px;height:24px;border-radius:6px;cursor:pointer;border:2px solid transparent;box-shadow:inset 0 0 0 1px var(--hair2)}
.swatch.sel{border-color:var(--ink);box-shadow:0 0 0 2px var(--solid),0 0 0 3px var(--ink)}
#pColor{width:26px;height:26px;padding:0;border:1px solid var(--hair2);border-radius:6px;background:none;cursor:pointer;vertical-align:middle}
#pQuote{width:100%;border:none;background:var(--hair);color:var(--ink);border-radius:9px;padding:9px 11px;font-size:13.5px;font-family:var(--sans);outline:none;margin-bottom:11px}
.priceRow{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:11px}
.priceRow b{font-family:var(--num);font-size:19px;font-weight:650}
.btn{width:100%;border:none;background:var(--btn);color:var(--btnink);border-radius:11px;padding:11px;font-size:14px;font-weight:650;cursor:pointer;font-family:var(--sans)}
.btn:disabled{opacity:.4;cursor:not-allowed}
#pClose{position:absolute;top:10px;right:12px;border:none;background:transparent;color:var(--muted);font-size:15px;cursor:pointer}

/* modals */
.modal{position:fixed;inset:0;z-index:26;display:none;place-items:center;background:rgba(0,0,0,.55);backdrop-filter:blur(4px)}
.modal.show{display:grid;animation:fade .3s}
@keyframes fade{from{opacity:0}}
.modal .card{background:var(--solid);border:1px solid var(--hair);border-radius:20px;width:min(560px,94vw);max-height:88vh;display:flex;flex-direction:column;box-shadow:var(--shadow);overflow:hidden;position:relative}
.mhead{display:flex;align-items:center;justify-content:space-between;padding:16px 20px;border-bottom:1px solid var(--hair)}
.mhead b{font-size:16px}
.mhead button{border:none;background:transparent;color:var(--muted);font-size:16px;cursor:pointer}
.mbody{padding:18px 20px;overflow-y:auto}
.fld{width:100%;border:none;background:var(--hair);color:var(--ink);border-radius:10px;padding:11px 13px;font-size:14px;font-family:var(--sans);outline:none}
.err{color:var(--danger);font-size:12px;min-height:14px}

.cphead{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:12px}
.cpowner{display:flex;align-items:center;gap:10px;cursor:pointer}
.cpowner .sw{width:34px;height:34px;border-radius:9px;box-shadow:inset 0 0 0 1px var(--hair2)}
.cpowner b{font-size:15px}.cpowner:hover b{text-decoration:underline}
.vote{border:1px solid var(--hair2);background:transparent;color:var(--muted);border-radius:9px;padding:6px 11px;font-size:13px;cursor:pointer;font-family:var(--num);font-weight:600}
.vote.up.on{background:var(--good);color:#06210f;border-color:transparent}
.vote.down.on{background:var(--danger);color:#2a0808;border-color:transparent}
.cpquote{font-size:19px;line-height:1.4;font-weight:500;margin-bottom:8px}
.cpquote.empty{color:var(--faint);font-style:italic;font-weight:400;font-size:15px}
.cpmeta{font-family:var(--num);font-size:12px;color:var(--muted);margin-bottom:14px}
.cpcomments{border-top:1px solid var(--hair);padding-top:14px;margin-top:4px}
.cpcom{display:flex;gap:9px;padding:6px 0;font-size:13.5px;line-height:1.4}
.cpcom .cu{font-weight:600;flex:none;cursor:pointer}.cpcom .cu:hover{text-decoration:underline}
.cpcomrow{display:flex;gap:8px;margin-top:10px}
.cpcomrow input{flex:1;border:none;background:var(--hair);color:var(--ink);border-radius:10px;padding:10px 12px;font-size:13.5px;font-family:var(--sans);outline:none}
.cpcomrow button{border:none;background:var(--btn);color:var(--btnink);border-radius:10px;padding:0 16px;font-size:15px;cursor:pointer}
.cpempty{color:var(--faint);font-size:13px}
.mlist{list-style:none;margin:0;padding:0}
.mlist li{display:flex;align-items:center;gap:11px;padding:9px 6px;border-radius:10px;cursor:pointer}
.mlist li:hover{background:var(--hair)}
.mlist .rk{font-family:var(--num);font-weight:700;width:26px;color:var(--muted)}
.mlist .c{width:16px;height:16px;border-radius:4px;flex:none}
.mlist .q{flex:1;font-size:13.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mlist .sc{font-family:var(--num);font-weight:700}

#toast{position:fixed;bottom:70px;left:50%;transform:translateX(-50%) translateY(10px);z-index:30;padding:10px 15px;font-size:13px;opacity:0;pointer-events:none;transition:opacity .2s,transform .2s}
#toast.show{opacity:1;transform:translateX(-50%) translateY(0)}
.tooltip{position:fixed;z-index:15;pointer-events:none;display:none;background:var(--solid);border:1px solid var(--hair);border-radius:9px;padding:5px 9px;font-size:11.5px;box-shadow:var(--shadow);white-space:nowrap}
@media(max-width:820px){#feed,#top{display:none}}