:root{--ink:#1b1b16;--paper:#f2ecdc;--dim:#918a77;--accent:#9dbb63}
*{box-sizing:border-box}
html,body{margin:0;height:100%;background:#0d0f0b;color:var(--paper);overflow:hidden;user-select:none;
  font:13px/1.5 -apple-system,"PingFang SC","Microsoft YaHei",system-ui,sans-serif}
#c{position:fixed;inset:0;width:100%;height:100%;image-rendering:pixelated;touch-action:none;cursor:grab}
#c.drag{cursor:grabbing}
.bar{position:fixed;top:0;left:0;right:0;display:flex;align-items:center;gap:14px;padding:9px 14px;
  background:rgba(13,15,11,.86);border-bottom:1px solid rgba(242,236,220,.10);z-index:5}
.title{font-weight:700;letter-spacing:.07em;font-size:14px;white-space:nowrap}
.title .sub{margin-left:8px;font-weight:400;font-size:11px;color:var(--dim);letter-spacing:.03em}
.clock{margin-left:auto;display:flex;align-items:baseline;gap:8px;font-variant-numeric:tabular-nums}
#clock{font-size:16px;font-weight:600;letter-spacing:.04em}
#date{font-size:11px;color:var(--dim)}
.live{display:flex;align-items:center;gap:6px;font-size:11px;color:var(--dim);white-space:nowrap}
.live i{width:6px;height:6px;background:var(--accent);border-radius:50%;display:block;flex:none}
.mbtn{display:none;background:none;border:1px solid rgba(242,236,220,.2);color:var(--paper);
  border-radius:7px;font-size:11px;padding:4px 9px}
.panel{position:fixed;top:54px;right:12px;bottom:56px;width:198px;display:flex;flex-direction:column;
  background:rgba(13,15,11,.82);border:1px solid rgba(242,236,220,.12);border-radius:10px;overflow:hidden;z-index:4}
.ph{display:flex;align-items:center;gap:8px;padding:9px 11px;border-bottom:1px solid rgba(242,236,220,.1);
  font-size:12px;color:var(--dim)}
.ph b{color:var(--paper);font-size:12px}
.ph span{margin-left:auto;font-variant-numeric:tabular-nums}
.ph button{background:none;border:1px solid rgba(242,236,220,.18);color:var(--dim);border-radius:6px;
  font-size:10px;padding:2px 6px;cursor:pointer}
#list{list-style:none;margin:0;padding:4px;overflow:auto;flex:1}
#list li{display:flex;align-items:center;gap:7px;padding:5px 7px;border-radius:6px;cursor:pointer;font-size:12px}
#list li:hover{background:rgba(242,236,220,.07)}
#list li.on{background:rgba(157,187,99,.18)}
.chip{width:9px;height:9px;border-radius:2px;flex:none}
.rl{margin-left:auto;font-size:10px;color:var(--dim);white-space:nowrap}
.hint{position:fixed;left:12px;bottom:12px;font-size:11px;color:rgba(242,236,220,.55);
  background:rgba(13,15,11,.6);padding:5px 9px;border-radius:7px;z-index:4}
.ticker{position:fixed;left:50%;transform:translateX(-50%);bottom:12px;font-size:12px;color:var(--paper);
  background:rgba(20,24,16,.92);border:1px solid rgba(242,236,220,.14);padding:6px 12px;border-radius:999px;
  opacity:0;transition:opacity .5s;max-width:70vw;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;z-index:4}
.card{position:fixed;left:12px;top:58px;background:rgba(13,15,11,.94);border:1px solid rgba(242,236,220,.16);
  border-radius:10px;padding:10px 12px;font-size:12px;z-index:6;min-width:160px;max-width:60vw}
.card b{display:block;font-size:13px;margin-bottom:2px}
.card .r{color:var(--dim);font-size:11px}
.card .s{margin-top:6px;color:#d6d0bf}
.card button{margin-top:8px;background:none;border:1px solid rgba(242,236,220,.2);color:var(--paper);
  border-radius:6px;padding:3px 8px;font-size:11px;cursor:pointer}
.conn{position:fixed;left:50%;top:50%;transform:translate(-50%,-50%);background:rgba(13,15,11,.9);
  border:1px solid rgba(242,236,220,.16);padding:10px 16px;border-radius:8px;font-size:12px;color:var(--dim);z-index:9}
@media (max-width:700px){
  .panel{display:none}
  .panel.open{display:flex;left:10px;right:10px;top:auto;bottom:44px;height:46vh;width:auto}
  .mbtn{display:block;margin-left:auto}
  .clock{margin-left:0}
  .live{display:none}
  .hint{font-size:10px;bottom:10px;left:10px}
}