.viewer-main{padding-top:34px;padding-bottom:55px}.viewer-intro{display:flex;justify-content:space-between;align-items:center;gap:24px;margin-bottom:23px}.viewer-intro h1{font-size:clamp(26px,3vw,39px);line-height:1.2;letter-spacing:-1.2px;margin:0 0 6px}.viewer-intro p:not(.eyebrow){color:var(--muted);margin:0}.privacy-pill{white-space:nowrap;background:#e0f0ea;border-radius:99px;padding:8px 12px;color:#087b71;font-size:12px;font-weight:750}.viewer-tools{background:white;border:1px solid var(--line);border-radius:16px;padding:18px 23px;margin-bottom:18px}.file-drop{display:flex;align-items:center;justify-content:space-between;gap:15px;border:2px dashed #b5d5ce;border-radius:13px;padding:17px 20px;background:#f7fbf9}.file-drop.drag-active{background:#dbeee7;border-color:#0d8380}.file-drop strong{font-size:15px}.file-drop p{margin:5px 0 0;color:var(--muted);font-size:12px}.file-drop input{display:none}.load-actions{display:flex;flex-wrap:wrap;gap:8px}.load-actions .btn{padding:10px 13px;font-size:12px;white-space:nowrap}.btn-muted{background:#eaf2ef;color:#1d625f}.btn-muted:hover{background:#d8e9e3}.load-feedback{display:flex;justify-content:space-between;gap:12px;margin-top:12px;font-size:12px;color:var(--muted)}.load-feedback #loadStatus.error{color:#a33a32}.reset-link{background:none;border:0;padding:0;color:#267773;font-size:12px;text-decoration:underline}.workspace{display:grid;grid-template-columns:255px minmax(0,1fr);border-radius:15px;overflow:hidden;background:#0b151a;border:1px solid #2b3e41;min-height:610px}.series-sidebar{background:#14252b;color:#e4f2ef;border-right:1px solid #314146;display:flex;flex-direction:column}.section-head{display:flex;align-items:center;justify-content:space-between;padding:18px;border-bottom:1px solid #314146}.section-head span{font-size:11px;background:#294044;border-radius:9px;padding:2px 8px}.series-list{padding:10px;overflow-y:auto;max-height:590px;flex:1}.empty-list{color:#a1b8b6;font-size:12px;padding:12px}.series-item{border:1px solid transparent;background:transparent;text-align:left;color:#cfdfdb;display:block;width:100%;border-radius:9px;padding:11px 12px;margin-bottom:7px;overflow-wrap:anywhere}.series-item:hover,.series-item.active{background:#254548;border-color:#347678}.series-item strong{display:block;font-size:12px;line-height:1.4;margin-bottom:5px}.series-item small{display:block;font-size:10px;color:#afc3c0;line-height:1.5}.series-item em{display:block;color:#e2b47f;font-size:10px;margin-top:5px;font-style:normal}.sidebar-foot{padding:14px 18px;border-top:1px solid #314146;font-size:11px;line-height:1.55;color:#9ab7b3}.viewport-col{min-width:0;display:flex;flex-direction:column}.viewer-bar{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:65px;padding:12px 16px;background:#192b30;color:#dcece8;border-bottom:1px solid #344448}.viewer-bar-left{min-width:0}.viewer-bar-left>span{font-size:13px;display:block;overflow-wrap:anywhere}.viewer-bar-left small{font-size:11px;color:#adc4c0}.viewer-bar-actions{display:flex;gap:6px;flex-wrap:wrap}.tool-btn{font-size:11px;border:1px solid #46636a;background:#2c4147;color:#deefeb;padding:7px 9px;border-radius:7px}.tool-btn.active{background:#117e76}.canvas-wrap{height:465px;background:#020708;position:relative;overflow:hidden;display:flex;justify-content:center;align-items:center}.canvas-wrap canvas{display:block;width:100%;height:100%;touch-action:none;cursor:crosshair}.canvas-placeholder{pointer-events:none;position:absolute;inset:0;display:flex;flex-direction:column;gap:10px;align-items:center;justify-content:center;color:#a1b9b4}.canvas-placeholder[hidden]{display:none}.placeholder-symbol{font-size:74px;font-weight:100;color:#2f6261}.canvas-placeholder span{font-size:12px}.dicom-info,.frame-info{pointer-events:none;position:absolute;font:11px/1.55 ui-monospace,Consolas,monospace;color:#ded5b0;text-shadow:0 1px 5px black;white-space:pre-line}.dicom-info{top:13px;left:16px}.frame-info{bottom:13px;right:15px;text-align:right}.viewer-controls{background:#1c2f34;color:#d7e8e4;padding:13px 17px}.control-row,.frame-navigation,.zoom-actions{display:flex;align-items:center;gap:9px}.control-row{justify-content:space-between;gap:18px}.frame-navigation{flex:1;min-width:0}.frame-navigation input{flex:1;min-width:30px;accent-color:#40aca1}.frame-navigation span,.zoom-actions span{font-size:12px;font-variant-numeric:tabular-nums;white-space:nowrap}.frame-navigation button,.zoom-actions button{background:#2d484d;border:1px solid #537073;color:#d8f0e9;border-radius:7px;width:29px;height:29px;font-size:20px}.zoom-actions span{width:47px;text-align:center}.control-hint{font-size:10px;color:#9bb5b0;margin-top:12px}.preset-row{display:flex;gap:7px;align-items:center;flex-wrap:wrap;margin-top:12px}.preset-row span{font-size:11px;color:#b2c8c3;margin-right:3px}.preset{background:#273f44;border:1px solid #426067;color:#cce3de;border-radius:6px;padding:6px 8px;font-size:10px}.preset:hover{background:#37575a}.viewer-note{padding:21px 25px;background:white;border:1px solid var(--line);border-radius:15px;margin-top:19px;font-size:12px;color:#557273}.viewer-note strong{color:#18494b;font-size:13px}.viewer-note p{margin:5px 0 0;line-height:1.7}button:focus-visible,label.btn:focus-visible{outline:2px solid #6dcabc;outline-offset:2px} @media(max-width:950px){.workspace{grid-template-columns:210px minmax(0,1fr)}.file-drop{flex-direction:column;align-items:flex-start}.canvas-wrap{height:405px}}@media(max-width:680px){.viewer-intro{align-items:flex-start;flex-direction:column;gap:12px}.viewer-tools{padding:12px}.file-drop{padding:14px}.workspace{grid-template-columns:1fr}.series-sidebar{border-right:0;border-bottom:1px solid #344448}.series-list{display:flex;overflow-x:auto;max-height:none;gap:8px;padding:8px}.series-item{min-width:160px;max-width:225px;flex:0 0 auto;margin-bottom:0}.sidebar-foot{display:none}.section-head{padding:9px 14px}.canvas-wrap{height:355px}.viewer-bar{flex-wrap:wrap}.control-row{flex-wrap:wrap}.frame-navigation{flex-basis:100%}.control-hint{line-height:1.65}}
@media(max-width:480px){.topbar .inner{gap:4px}.topbar .brand{gap:7px}.topbar .brand strong{font-size:14px}.topbar .brand small{display:none}.topbar .logo{width:34px;height:34px}.topbar .logo svg{width:19px;height:19px}.topbar .nav a{font-size:10px;padding:7px 5px}}