:root{--blue-primary: #0a5fb8;--blue-dark: #084a93;--blue-soft: #4a9fe0;--blue-track: #2f8fd6;--bg-sub: #f3f5f7;--bg-viewport: #eef1f4;--text-muted: #6b7280;--text-dark: #1f2937;--border: #d8dee6;--header-h: 48px;--sub-h: 60px;--timeline-h: auto;--footer-h: auto}*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}html,body{height:100%;overflow:hidden;font-family:Segoe UI,PingFang SC,Microsoft YaHei,sans-serif;color:var(--text-dark);background:#fff}.app{display:grid;grid-template-rows:var(--header-h) var(--sub-h) 1fr var(--timeline-h) var(--footer-h);height:100%}.top-bar{display:flex;align-items:center;justify-content:flex-start;padding:0 20px 0 36px;background:linear-gradient(180deg,#0c67c4 0%,var(--blue-primary) 100%);box-shadow:0 1px #0000001f}.brand{display:flex;align-items:center;height:100%;text-decoration:none;margin-left:8px}.brand-logo{display:block;height:32px;width:auto;max-width:min(220px,50vw);object-fit:contain}.sub-bar{display:flex;align-items:center;padding:0 24px;background:var(--bg-sub);border-bottom:1px solid var(--border)}.view-nav{display:flex;align-items:center;justify-content:space-evenly;width:100%;gap:0}.view-btn{flex:1 1 0;height:56px;border:none;border-bottom:2px solid transparent;background:transparent;color:var(--blue-soft);cursor:pointer;display:grid;place-items:center}.view-btn svg{width:40px;height:40px}.view-btn:hover{color:var(--blue-primary)}.view-btn.active{color:var(--blue-primary);border-bottom-color:var(--blue-primary)}.viewport{position:relative;background:var(--bg-viewport);overflow:hidden;min-height:0}.viewport canvas{display:block;width:100%;height:100%;outline:none}.loading{position:absolute;top:0;right:0;bottom:0;left:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;background:#eef1f4d9;color:var(--text-muted);font-size:14px;z-index:2;pointer-events:none}.error-banner{position:absolute;top:12px;left:50%;transform:translate(-50%);max-width:min(560px,calc(100% - 24px));display:flex;flex-direction:column;align-items:center;gap:8px;background:#fef2f2f5;color:#b91c1c;font-size:13px;line-height:1.5;z-index:3;padding:12px 16px;text-align:center;border-radius:8px;border:1px solid #fecaca;box-shadow:0 4px 16px #00000014;pointer-events:auto}.error-banner code{font-size:12px;background:#fee2e2;padding:1px 4px;border-radius:3px}.hidden{display:none!important}.spinner{width:36px;height:36px;border:3px solid #c5d5e8;border-top-color:var(--blue-primary);border-radius:50%;animation:spin .8s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}.hint{position:absolute;right:16px;bottom:12px;font-size:12px;color:#9aa3af;pointer-events:none;-webkit-user-select:none;user-select:none}.timeline-section{display:flex;flex-direction:column;justify-content:center;gap:10px;padding:14px 40px 8px;background:#fff;border-top:1px solid var(--border)}.timeline-track{display:grid;grid-template-columns:1fr;gap:4px}.track-bar{position:relative;height:22px;display:flex;align-items:center}.track-bar:before{content:"";position:absolute;left:0;right:0;height:6px;border-radius:3px;background:#dce6f0}.track-fill{position:absolute;left:0;height:6px;border-radius:3px;background:var(--blue-track);width:5%;pointer-events:none;z-index:1}.track-bar input[type=range]{position:relative;z-index:2;width:100%;margin:0;-webkit-appearance:none;-moz-appearance:none;appearance:none;background:transparent;height:22px;cursor:pointer}.track-bar input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:22px;height:22px;border-radius:50%;background:transparent;border:none;box-shadow:none;cursor:grab}.track-bar input[type=range]::-moz-range-thumb{width:22px;height:22px;border-radius:50%;background:transparent;border:none;box-shadow:none;cursor:grab}.thumb-label{position:absolute;top:50%;left:5%;transform:translate(-50%,-50%);width:22px;height:22px;border-radius:50%;background:var(--blue-primary);color:#fff;font-size:11px;font-weight:600;display:grid;place-items:center;pointer-events:none;z-index:3;box-shadow:0 1px 4px #0a5fb873;border:2px solid #fff}.track-scale{display:flex;justify-content:space-between;font-size:12px;color:var(--text-muted);padding:0 4px;line-height:1.2}.footer{display:flex;flex-direction:column;justify-content:center;gap:8px;min-height:72px;padding:10px 40px 18px;background:#fff;border-top:1px solid #eef0f3;overflow:visible}.playback{display:flex;align-items:center;gap:12px;flex-shrink:0}.playback button{width:36px;height:32px;border:none;background:transparent;color:#4b5563;cursor:pointer;display:grid;place-items:center;border-radius:4px}.playback button:hover{background:#f3f4f6;color:var(--blue-primary)}.playback button svg{width:22px;height:22px}.case-info{font-size:13px;line-height:1.5;color:#4b5563;letter-spacing:.01em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;padding-bottom:4px}@media(max-width:720px){.hint{display:none}.timeline-section,.footer{padding-inline:16px}.brand-logo{height:28px}}