:root{--bg:#121218;--bg2:#16161e;--panel:#1c1c26;--border:#2a2a3a;--text:#d5d5e2;--text-dim:#8888a0;--accent:#7aa2f7}*{box-sizing:border-box}html,body{background:var(--bg);color:var(--text);margin:0;padding:0;font-family:system-ui,-apple-system,PingFang SC,Microsoft YaHei,sans-serif}#root{min-height:100vh}.app{flex-direction:column;height:100dvh;display:flex;overflow:hidden}.topbar{z-index:20;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);border-bottom:1px solid var(--border);background:#121218eb;flex:none;align-items:center;gap:20px;padding:10px 20px;display:flex}.brand{white-space:nowrap;font-size:16px;font-weight:700}.brand-logo{margin-right:4px}.datebar{flex:1;gap:6px;display:flex;overflow-x:auto}.date-chip{border:1px solid var(--border);background:var(--panel);min-width:58px;color:var(--text-dim);cursor:pointer;border-radius:10px;flex-direction:column;align-items:center;padding:5px 10px;transition:all .15s;display:flex}.date-chip:hover{border-color:var(--accent);color:var(--text)}.date-chip.active{background:var(--accent);border-color:var(--accent);color:#10101a}.date-num{font-size:13px;font-weight:700}.date-week{font-size:11px}.health{color:var(--text-dim);white-space:nowrap;align-items:center;gap:12px;font-size:12px;display:flex}.admin-link{color:var(--text-dim);font-size:16px;text-decoration:none;transition:color .12s,transform .12s}.admin-link:hover{color:var(--accent);transform:rotate(45deg)}.no-lanes{text-align:center;color:var(--text-dim);grid-column:1/-1;padding:60px 20px}.no-lanes a{color:var(--accent)}.health-item{align-items:center;gap:5px;display:flex}.dot{border-radius:50%;flex:none;width:8px;height:8px;display:inline-block}.banner-err{color:#f0a0a0;background:#d9534f1a;border:1px solid #d9534f66;border-radius:8px;margin:10px 20px;padding:8px 14px;font-size:13px}.timeline-wrap{flex:1;min-height:0;padding:16px 20px 40px;overflow:auto}.zoom-ctl{z-index:30;border:1px solid var(--border);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);background:#1c1c26eb;border-radius:12px;flex-direction:column;align-items:stretch;gap:4px;padding:6px;display:flex;position:fixed;bottom:20px;right:16px;box-shadow:0 8px 24px #00000073}.zoom-ctl button{background:var(--panel);border:1px solid var(--border);color:var(--text);cursor:pointer;border-radius:8px;width:40px;height:34px;font-size:18px;line-height:1;transition:all .12s}.zoom-ctl button:hover{border-color:var(--accent);color:var(--accent)}.zoom-val button{width:40px;height:26px;color:var(--text-dim);font-size:11px}.zoom-now{margin-top:4px;height:30px!important;color:var(--accent)!important;border-color:var(--accent)!important;font-size:12px!important}.zoom-now:hover{background:var(--accent)!important;color:#10101a!important}.timeline{grid-template-columns:52px repeat(var(--lanes,3), minmax(240px, 1fr));gap:14px;min-width:min-content;max-width:1280px;margin:0 auto;display:grid}.axis{z-index:12;background:var(--bg);position:sticky;left:0}.axis-head{visibility:hidden}.axis-body{position:relative}.hour{width:100%;color:var(--text-dim);text-align:right;border-top:1px solid #0000;padding-right:6px;font-size:10px;position:absolute;right:0;transform:translateY(-6px)}.lane{flex-direction:column;display:flex}.lane-head{z-index:10;background:var(--panel);border:1px solid var(--border);border-radius:12px;align-items:center;gap:10px;height:62px;margin-bottom:10px;padding:10px 12px;display:flex;position:sticky;top:0;box-shadow:0 6px 16px #00000073}.lane-avatar{object-fit:cover;border-radius:50%;flex:none;width:38px;height:38px}.lane-avatar-ph{color:#9d9dbd;background:#2e2e44;justify-content:center;align-items:center;font-size:16px;font-weight:700;display:flex}.lane-head-text{min-width:0}.lane-name{white-space:nowrap;text-overflow:ellipsis;align-items:center;gap:6px;font-size:14px;font-weight:700;display:flex;overflow:hidden}.vr-badge{color:#10101a;letter-spacing:.3px;background:linear-gradient(135deg,#7aa2f7,#b48ef7);border-radius:6px;flex:none;padding:1px 6px;font-size:10px;font-weight:700}.lane-sub{color:var(--text-dim);white-space:nowrap;align-items:center;gap:6px;font-size:12px;display:flex;overflow:hidden}.lane-body{background:var(--bg2);border:1px solid var(--border);background-image:repeating-linear-gradient(#0000 0 59px,#ffffff0a 59px 60px);border-radius:12px;position:relative}.seg{opacity:.85;border-radius:4px;width:8px;transition:width .1s,left .1s,opacity .1s;position:absolute;left:18px}.lane-body:hover .seg{cursor:pointer}.seg-active{opacity:1;width:12px;left:16px}.seg-idle{background-image:repeating-linear-gradient(-45deg,#0000 0 2px,#00000073 2px 4px)}.seg-vr{z-index:1;opacity:.95;background-image:linear-gradient(#7aa2f7,#b48ef7);border-radius:3px;width:5px;position:absolute;left:2px}.pt-dot{border:1px solid var(--bg2);z-index:4;cursor:help;background:#a4d007;border-radius:50%;width:6px;height:6px;position:absolute;left:9px;transform:translateY(-50%)}.login-wrap{justify-content:center;align-items:center;min-height:100vh;padding:20px;display:flex}.login-card{background:var(--panel);border:1px solid var(--border);border-radius:16px;flex-direction:column;gap:14px;width:100%;max-width:320px;padding:28px 24px;display:flex;box-shadow:0 12px 40px #00000080}.login-logo{align-items:center;gap:8px;font-size:18px;font-weight:700;display:flex}.login-title{color:var(--text-dim);font-size:13px}.login-input{background:var(--bg2);border:1px solid var(--border);color:var(--text);border-radius:8px;outline:none;padding:10px 12px;font-size:15px}.login-input:focus{border-color:#7aa2f7}.login-err{color:#f0a0a0;font-size:12px}.login-btn{color:#10101a;cursor:pointer;background:#7aa2f7;border:none;border-radius:8px;padding:10px;font-size:14px;font-weight:700}.login-btn:disabled{opacity:.5;cursor:not-allowed}.seg-tip{z-index:6;color:var(--text);border:1px solid var(--border);white-space:nowrap;text-overflow:ellipsis;pointer-events:none;background:#10101aee;border-radius:6px;padding:3px 8px;font-size:11px;position:absolute;left:34px;right:6px;overflow:hidden;transform:translateY(-50%);box-shadow:0 4px 12px #00000080}.seg-tip.pinned{pointer-events:auto;border-color:var(--accent)}.seg-tip b{color:var(--accent);margin-right:3px;font-weight:700}.seg-tip-dur{color:var(--text-dim)}.ev{z-index:2;align-items:center;gap:8px;display:flex;position:absolute;left:12px;right:6px;transform:translateY(-50%)}.ev-dot{border:2px solid var(--bg2);border-radius:50%;flex:none;width:12px;height:12px;margin-left:4px}.ev-label{color:var(--text);white-space:nowrap;text-overflow:ellipsis;background:#10101acc;border-radius:6px;max-width:calc(100% - 30px);padding:2px 7px;font-size:11px;overflow:hidden}.ev-label b{color:var(--text-dim);margin-right:3px;font-weight:600}.ev-click{cursor:pointer}.ev-click .ev-dot{box-shadow:0 0 0 3px #51cf6644}.ev-click:hover .ev-label{background:var(--accent);color:#10101a}.ev-snap-hint{font-size:10px}.now-line{z-index:3;border-top:1.5px dashed #ff5d5d;height:0;position:absolute;left:0;right:0}.now-line:before{content:"";background:#ff5d5d;border-radius:50%;width:7px;height:7px;position:absolute;top:-4px;left:-2px}.lane-footer{margin-top:10px}.daily-card{background:var(--panel);border:1px solid var(--border);border-radius:12px;padding:12px 14px}.daily-empty{color:var(--text-dim);text-align:center;font-size:12px}.daily-title{color:var(--text-dim);margin-bottom:8px;font-size:12px;font-weight:700}.daily-row{border-top:1px solid #ffffff08;align-items:center;gap:10px;padding:6px 0;display:flex}.daily-row img,.daily-icon-ph{background:#2e2e44;border-radius:6px;flex:none;width:28px;height:28px}.daily-info{flex:1;min-width:0}.daily-name{white-space:nowrap;text-overflow:ellipsis;font-size:13px;overflow:hidden}.daily-total{color:var(--text-dim);font-size:11px}.daily-nums{flex-direction:column;flex:none;align-items:flex-end;gap:2px;display:flex}.daily-play{color:#a4d007;white-space:nowrap;font-size:13px;font-weight:700}.daily-delta{color:#57cbde;white-space:nowrap;font-size:11px;font-weight:600}.drawer-mask{z-index:40;background:#00000080;position:fixed;inset:0}.drawer{background:var(--bg2);border-left:1px solid var(--border);z-index:50;flex-direction:column;width:440px;max-width:92vw;animation:.22s ease-out slide-in;display:flex;position:fixed;top:0;bottom:0;right:0;box-shadow:-12px 0 40px #00000080}@keyframes slide-in{0%{transform:translate(100%)}to{transform:translate(0)}}.drawer-head{border-bottom:1px solid var(--border);justify-content:space-between;align-items:flex-start;padding:16px 18px 12px;display:flex}.drawer-title{font-size:16px;font-weight:700}.drawer-sub{color:var(--text-dim);margin-top:3px;font-size:12px}.drawer-close{color:var(--text-dim);cursor:pointer;background:0 0;border:none;padding:4px 8px;font-size:16px}.drawer-close:hover{color:var(--text)}.drawer-nav{align-items:center;gap:10px;padding:10px 18px;display:flex}.drawer-nav input[type=range]{accent-color:var(--accent);flex:1}.drawer-nav button{background:var(--panel);border:1px solid var(--border);color:var(--text);cursor:pointer;border-radius:6px;padding:3px 10px}.drawer-nav button:disabled{opacity:.35;cursor:default}.drawer-time{color:var(--text-dim);min-width:38px;font-size:12px}.drawer-canvas-wrap{flex:1;padding:0 18px 18px;overflow-y:auto}.drawer-canvas-wrap canvas{border:1px solid var(--border);border-radius:12px;max-width:100%;height:auto!important}.drawer-loading,.drawer-err{color:var(--text-dim);padding:30px 18px;font-size:13px}.drawer-err{color:#f0a0a0}@media (width<=760px){.topbar{gap:8px;height:56px;padding:0 10px}.brand{font-size:13px}.datebar{scrollbar-width:none}.datebar::-webkit-scrollbar{display:none}.date-chip{border-radius:8px;min-width:46px;padding:4px 8px}.date-num{font-size:12px}.date-week{font-size:10px}.health{gap:8px;font-size:10px}.timeline-wrap{padding:10px 8px 30px}.timeline{grid-template-columns:34px repeat(var(--lanes,3), minmax(150px, 1fr));gap:6px}.hour{padding-right:3px;font-size:9px}.lane-head{border-radius:10px;gap:6px;height:46px;padding:6px 8px;top:0}.lane-avatar{width:28px;height:28px}.lane-avatar-ph,.lane-name{font-size:12px}.lane-sub{gap:4px;font-size:10px}.seg{width:5px;left:8px}.ev{gap:4px;left:4px;right:2px}.ev-dot{width:10px;height:10px;margin-left:2px}.ev-label{max-width:calc(100% - 18px);padding:1px 4px;font-size:9px}.seg-active{width:9px;left:6px}.seg-tip{padding:2px 5px;font-size:9px;left:20px}.daily-card{padding:8px}.daily-title{font-size:10px}.daily-row{gap:6px}.daily-row img,.daily-icon-ph{width:20px;height:20px}.daily-name{font-size:11px}.daily-total{font-size:9px}.daily-delta{font-size:11px}.daily-empty{font-size:10px}.drawer{width:100vw;max-width:100vw}.drawer-canvas-wrap{padding:0 12px 12px}}@media (width<=400px){.brand{font-size:0}.brand-logo{margin:0;font-size:16px}.health{display:none}}