@import "https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&display=swap";:root{--primary:#2e37a4;--primary-light:#2e37a41a;--accent:#009ce7;--banner-bg:#2e37a4;--header-height:60px;--banner-height:40px;--toolbar-height:48px;--thumbnail-width:120px;--slider-height:36px}*{box-sizing:border-box;margin:0;padding:0}body{color:#333;background:#1a1a2e;height:100vh;font-family:Poppins,sans-serif;overflow:hidden}.top-banner{background:linear-gradient(135deg, var(--primary) 0%, #1a1f6e 100%);color:#fff;height:var(--banner-height);z-index:100;letter-spacing:.2px;align-items:center;padding:0 16px;font-size:12px;display:flex}.banner-text{opacity:.9;align-items:center;gap:6px;display:flex}.banner-brand{letter-spacing:.3px;font-weight:600}.banner-sep{opacity:.5}.btn-banner{color:#fff;white-space:nowrap;letter-spacing:.2px;background:#ffffff1f;border:1px solid #ffffff40;border-radius:20px;padding:3px 14px;font-size:11px;font-weight:500;text-decoration:none;transition:all .2s}.btn-banner:hover{color:#fff;background:#ffffff38;border-color:#fff6}.btn-banner i{vertical-align:-1px;width:11px;height:11px}.app-header{height:var(--header-height);z-index:99;background:#fff;align-items:center;padding:0 16px;display:flex;position:relative;box-shadow:0 2px 8px #00000014}.header-logo{width:36px;height:36px;margin-right:12px}.header-title h1{color:var(--primary);margin:0;font-size:18px;font-weight:600;line-height:1.2}.header-subtitle{color:#888;font-size:11px}.header-info{color:#888;white-space:nowrap;gap:12px;font-size:12px;display:flex;overflow:hidden}.header-actions{flex-shrink:0;gap:8px;display:flex}.header-actions .btn{align-items:center;gap:4px;display:flex}.header-actions .btn i{width:16px;height:16px}.toolbar{min-height:var(--toolbar-height);z-index:98;background:#2a2a3e;flex-wrap:wrap;align-items:center;gap:2px;padding:4px 8px;display:flex}.toolbar-group{gap:2px;display:flex}.toolbar-divider{background:#ffffff26;width:1px;height:28px;margin:0 8px}.tool-btn{color:#ffffffb3;cursor:pointer;white-space:nowrap;background:0 0;border:none;border-radius:6px;align-items:center;gap:3px;padding:4px 8px;font-family:Poppins,sans-serif;font-size:11px;transition:all .15s;display:flex}.tool-btn i{width:16px;height:16px}.tool-btn:hover{color:#fff;background:#ffffff1a}.tool-btn.active{background:var(--primary);color:#fff}.drop-zone{top:calc(var(--banner-height) + var(--header-height));z-index:50;background:linear-gradient(135deg,#1a1a2e 0%,#16213e 50%,#0f3460 100%);justify-content:center;align-items:center;display:flex;position:fixed;bottom:0;left:0;right:0}.drop-zone-content{text-align:center;color:#fff;padding:40px}.drop-icon{margin-bottom:24px}.drop-icon i{width:80px;height:80px;color:var(--accent);opacity:.8}.drop-zone-content h2{margin-bottom:8px;font-size:24px;font-weight:600}.drop-zone-content p{color:#fff9;font-size:14px}.drop-zone-hint{color:#ffffff73!important;font-size:12px!important}.supported-formats{flex-wrap:wrap;justify-content:center;gap:6px;display:flex}.supported-formats .badge{padding:4px 8px;font-size:11px;font-weight:400}.shortcuts-info{max-width:400px;margin:0 auto}.shortcuts-info h6{color:#fff6;text-transform:uppercase;letter-spacing:1px;margin-bottom:12px;font-size:11px;font-weight:500}.shortcuts-grid{grid-template-columns:1fr 1fr;gap:6px 24px;display:grid}.shortcut-item{color:#ffffff80;align-items:center;gap:8px;font-size:12px;display:flex}.shortcut-item kbd{color:#ffffffa6;text-align:center;background:#ffffff14;border:1px solid #ffffff26;border-radius:4px;flex-shrink:0;min-width:50px;padding:2px 7px;font-family:Poppins,sans-serif;font-size:11px}.drop-zone.drag-over{background:linear-gradient(135deg,#1a2a4e 0%,#1a3a6e 50%,#1a4a8e 100%)}.drop-zone.drag-over .drop-icon i{opacity:1;animation:1s infinite pulse}@keyframes pulse{0%,to{transform:scale(1)}50%{transform:scale(1.1)}}.viewer-container{top:calc(var(--banner-height) + var(--header-height) + var(--toolbar-height));z-index:40;background:#000;display:flex;position:fixed;bottom:0;left:0;right:0}.viewer-container.has-slider{bottom:var(--slider-height)}.split-divider{z-index:5;background:#fff3;flex-shrink:0;width:2px}.cornerstone-element.viewport-active:after{content:"";border:2px solid var(--accent);pointer-events:none;z-index:10;position:absolute;inset:0}.cornerstone-element{flex:1;min-height:0;position:relative;overflow:hidden}.thumbnail-strip{width:var(--thumbnail-width);background:#1a1a2e;border-left:1px solid #ffffff1a;padding:4px;overflow-y:auto}.thumbnails{flex-direction:column;gap:4px;display:flex}.thumbnail-item{aspect-ratio:1;cursor:pointer;background:#2a2a3e;border:2px solid #0000;border-radius:4px;width:100%;position:relative;overflow:hidden}.thumbnail-item.active{border-color:var(--accent)}.thumbnail-item canvas{object-fit:contain;width:100%;height:100%}.thumbnail-index{color:#ffffffb3;background:#00000080;border-radius:2px;padding:0 4px;font-size:10px;position:absolute;bottom:2px;right:4px}.loading-overlay{z-index:200;color:#fff;background:#000000b3;flex-direction:column;justify-content:center;align-items:center;display:flex;position:fixed;inset:0}@media (width<=768px){.top-banner span,.top-banner .banner-text span:not(.banner-brand){display:none}.shortcuts-grid{grid-template-columns:1fr}.header-title h1{font-size:15px}.header-subtitle{display:none}.drop-zone-content h2{font-size:18px}.drop-icon i{width:56px;height:56px}.tool-btn span{display:none}.tool-btn{padding:6px 8px}.thumbnail-strip{display:none!important}}@media (width<=480px){:root{--banner-height:36px;--header-height:50px;--toolbar-height:42px}.drop-zone-content{padding:20px}}.viewport-overlay{color:#fffc;pointer-events:none;text-shadow:1px 1px 2px #000c;padding:8px;font-family:Poppins,monospace;font-size:12px;position:absolute}.viewport-overlay.top-left{top:0;left:0}.viewport-overlay.top-right{text-align:right;top:0;right:0}.viewport-overlay.bottom-left{bottom:0;left:0}.viewport-overlay.bottom-right{text-align:right;bottom:0;right:0}.annotation-context-menu{z-index:300;background:#2a2a3e;border:1px solid #ffffff26;border-radius:8px;min-width:140px;padding:4px;position:fixed;box-shadow:0 4px 16px #0006}.annotation-context-menu button{color:#ffffffd9;cursor:pointer;background:0 0;border:none;border-radius:6px;align-items:center;gap:8px;width:100%;padding:8px 12px;font-family:Poppins,sans-serif;font-size:13px;transition:background .15s;display:flex}.annotation-context-menu button i{width:14px;height:14px}.annotation-context-menu button:hover{color:#fff;background:#ffffff1a}.cine-group{gap:2px}.fps-display{color:#ffffffb3;text-align:center;min-width:42px;font-size:11px;line-height:var(--toolbar-height);padding:0 4px}.image-slider-bar{z-index:60;background:#2a2a3e;border-top:1px solid #ffffff1a;align-items:center;gap:12px;height:36px;padding:0 16px;display:flex;position:fixed;bottom:0;left:0;right:0}.slider-btn{color:#ffffffb3;cursor:pointer;background:0 0;border:none;border-radius:4px;justify-content:center;align-items:center;padding:4px;transition:all .15s;display:flex}.slider-btn:hover{color:#fff;background:#ffffff1a}.slider-btn i,.slider-btn svg{width:16px;height:16px}.slider-label{color:#ffffffb3;text-align:center;white-space:nowrap;min-width:50px;font-size:12px}.image-slider{appearance:none;cursor:pointer;background:#ffffff26;border-radius:2px;outline:none;flex:1;height:4px}.image-slider::-webkit-slider-thumb{appearance:none;background:var(--accent);cursor:pointer;border:2px solid #fff;border-radius:50%;width:14px;height:14px;box-shadow:0 1px 4px #0000004d}.image-slider::-moz-range-thumb{background:var(--accent);cursor:pointer;border:2px solid #fff;border-radius:50%;width:14px;height:14px;box-shadow:0 1px 4px #0000004d}.calibration-warning{color:#f0ad4e;font-size:11px}