:root{--bg-900: #0a0c10;--bg-800: #111418;--bg-700: #181c22;--bg-600: #1f252e;--bg-500: #272e3a;--border: #2a3040;--text-primary: #e2e8f0;--text-muted: #64748b;--accent: #38bdf8;--accent-dim: #0ea5e9;--danger: #f87171;--success: #34d399;--panel-w: 260px;--toolbar-h: 44px;--footer-h: 28px;--mobile-nav-h: 48px}*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}html,body,#root{height:100%}body{font-family:Inter,system-ui,sans-serif;font-size:13px;background:var(--bg-900);color:var(--text-primary);overflow:hidden}.app{display:grid;grid-template-columns:var(--panel-w) var(--panel-w) 1fr;height:100vh;height:100dvh;overflow:hidden}.mobile-nav{display:none}.viewport-area{display:flex;flex-direction:column;height:100vh;background:var(--bg-900);overflow:hidden}.empty-state{display:flex;flex-direction:column;align-items:center;justify-content:center;height:100%;color:var(--text-muted);gap:8px}.empty-state__icon{font-size:48px;opacity:.3}.study-list{display:flex;flex-direction:column;height:100vh;background:var(--bg-800);border-right:1px solid var(--border);overflow:hidden}.study-list__header{display:flex;align-items:center;padding:10px 12px;border-bottom:1px solid var(--border);background:var(--bg-900)}.study-list__logo{font-size:15px;font-weight:700;letter-spacing:1px;color:var(--accent)}.study-list__search{display:flex;flex-direction:column;gap:6px;padding:10px 12px;border-bottom:1px solid var(--border)}.study-list__count{padding:6px 14px;font-size:11px;color:var(--text-muted);border-bottom:1px solid var(--border)}.study-list__items{flex:1;overflow-y:auto;list-style:none}.study-card{padding:10px 14px;cursor:pointer;border-bottom:1px solid var(--border);transition:background .1s}.study-card:hover{background:var(--bg-700)}.study-card--active{background:var(--bg-600);border-left:2px solid var(--accent)}.study-card__name{font-weight:600;margin-bottom:4px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.study-card__meta{display:flex;align-items:center;gap:8px;margin-bottom:3px}.study-card__desc{font-size:11px;color:var(--text-muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.series-panel{display:flex;flex-direction:column;height:100vh;background:var(--bg-800);border-right:1px solid var(--border);overflow:hidden}.series-panel__header{padding:12px 14px;border-bottom:1px solid var(--border);background:var(--bg-900)}.series-panel__patient{font-weight:700;margin-bottom:2px}.series-panel__study{color:var(--text-muted);font-size:11px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.series-panel__date{color:var(--accent);font-size:11px;margin-top:2px}.panel-status{padding:12px 14px;color:var(--text-muted);font-size:12px}.series-list{flex:1;overflow-y:auto;list-style:none}.series-card{padding:10px 14px;cursor:pointer;border-bottom:1px solid var(--border);transition:background .1s}.series-card:hover{background:var(--bg-700)}.series-card--active{background:var(--bg-600);border-left:2px solid var(--accent)}.series-card__top{display:flex;align-items:center;gap:8px;margin-bottom:4px}.series-card__number{color:var(--text-muted);font-size:11px;margin-left:auto}.series-card__desc{font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.series-card__dims{font-size:10px;color:var(--text-muted);margin-top:2px}.toolbar{display:flex;align-items:center;gap:4px;height:var(--toolbar-h);padding:0 12px;background:var(--bg-800);border-bottom:1px solid var(--border);flex-shrink:0}.toolbar__tools{display:flex;gap:4px}.toolbar__actions{display:flex;gap:4px;margin-left:12px;padding-left:12px;border-left:1px solid var(--border)}.toolbar__info{margin-left:auto;font-size:12px;color:var(--text-muted);font-variant-numeric:tabular-nums}.tool-btn{padding:4px 10px;border:1px solid var(--border);border-radius:4px;background:var(--bg-700);color:var(--text-primary);font-size:12px;cursor:pointer;transition:all .1s}.tool-btn:hover{background:var(--bg-600);border-color:var(--accent)}.tool-btn--active{background:var(--accent-dim);border-color:var(--accent);color:#fff}.toolbar__group{position:relative;display:flex}.tool-dropdown__menu{background:var(--bg-700);border:1px solid var(--border);border-radius:6px;padding:4px;min-width:150px;display:flex;flex-direction:column;gap:2px;box-shadow:0 8px 24px #0000008c;list-style:none}.tool-dropdown__item{display:flex;align-items:center;justify-content:space-between;width:100%;text-align:left;padding:5px 10px;border-radius:4px;white-space:nowrap}.tool-dropdown__key{font-size:10px;color:var(--text-muted);margin-left:12px;font-variant-numeric:tabular-nums}.viewport-wrapper{display:flex;flex-direction:column;flex:1;overflow:hidden}.viewport-container{flex:1;position:relative;background:#000;overflow:hidden}.viewport-canvas{width:100%;height:100%;touch-action:none}.viewport-overlay{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;color:var(--text-muted);background:#000000b3;z-index:10}.viewport-overlay--error{color:var(--danger)}.viewport-footer{display:flex;justify-content:space-between;align-items:center;height:var(--footer-h);padding:0 12px;background:var(--bg-800);border-top:1px solid var(--border);font-size:11px;color:var(--text-muted);flex-shrink:0}.input{width:100%;padding:5px 8px;border:1px solid var(--border);border-radius:4px;background:var(--bg-700);color:var(--text-primary);font-size:12px;outline:none}.input:focus{border-color:var(--accent)}.input option{background:var(--bg-700)}.badge{display:inline-block;padding:1px 6px;border-radius:3px;font-size:10px;font-weight:700;background:var(--bg-500);color:var(--accent);letter-spacing:.5px}.error-text{color:var(--danger)}.spinner{width:24px;height:24px;border:2px solid var(--border);border-top-color:var(--accent);border-radius:50%;animation:spin .7s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}.upload-btn{margin-left:auto;padding:4px 10px;border:1px solid var(--accent-dim);border-radius:4px;background:transparent;color:var(--accent);font-size:11px;font-weight:600;cursor:pointer;letter-spacing:.3px;transition:all .15s}.upload-btn:hover{background:var(--accent-dim);color:#fff}.modal-backdrop{position:fixed;inset:0;background:#000000a6;display:flex;align-items:center;justify-content:center;z-index:100}.modal{background:var(--bg-800);border:1px solid var(--border);border-radius:8px;width:520px;max-width:95vw;max-height:80vh;display:flex;flex-direction:column;overflow:hidden}.modal__header{display:flex;align-items:center;justify-content:space-between;padding:14px 18px;border-bottom:1px solid var(--border);font-weight:600;font-size:14px}.modal__close{background:none;border:none;color:var(--text-muted);font-size:16px;cursor:pointer;padding:2px 6px;border-radius:4px}.modal__close:hover{background:var(--bg-600);color:var(--text-primary)}.drop-zone{margin:24px;border:2px dashed var(--border);border-radius:8px;padding:48px 24px;display:flex;flex-direction:column;align-items:center;gap:8px;cursor:pointer;transition:all .15s;color:var(--text-muted)}.drop-zone:hover,.drop-zone--active{border-color:var(--accent);background:#38bdf80d;color:var(--text-primary)}.drop-zone__icon{font-size:32px}.drop-zone__text{font-size:14px}.drop-zone__sub{font-size:12px;color:var(--text-muted)}.upload-progress{display:flex;flex-direction:column;align-items:center;gap:16px;padding:48px 24px;color:var(--text-muted)}.progress-bar{width:100%;height:4px;background:var(--border);border-radius:2px;overflow:hidden}.progress-bar__fill{height:100%;background:var(--accent);transition:width .3s ease;border-radius:2px}.upload-results{display:flex;flex-direction:column;gap:12px;padding:16px 18px;overflow-y:auto}.upload-results__section{display:flex;flex-direction:column;gap:6px}.upload-results__label{font-size:12px;font-weight:700;letter-spacing:.3px}.upload-results__label--ok{color:var(--success)}.upload-results__label--error{color:var(--danger)}.upload-results__list{list-style:none;display:flex;flex-direction:column;gap:4px}.upload-result{display:flex;align-items:center;gap:8px;padding:6px 10px;border-radius:4px;font-size:12px}.upload-result--ok{background:#34d39912}.upload-result--error{background:#f8717112}.upload-result__name{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.upload-result__size{color:var(--text-muted);flex-shrink:0}.upload-result__msg{color:var(--danger);font-size:11px;flex-shrink:0}.upload-results__actions{display:flex;justify-content:flex-end;gap:8px;padding-top:8px;border-top:1px solid var(--border)}::-webkit-scrollbar{width:5px}::-webkit-scrollbar-track{background:transparent}::-webkit-scrollbar-thumb{background:var(--border);border-radius:3px}::-webkit-scrollbar-thumb:hover{background:var(--text-muted)}@media (max-width: 1180px){:root{--panel-w: 228px}.study-list__header,.series-panel__header{padding-inline:10px}.study-card,.series-card{padding-inline:12px}.toolbar{gap:6px;overflow-x:auto;scrollbar-width:none}.toolbar::-webkit-scrollbar{display:none}.toolbar__tools,.toolbar__actions{flex-shrink:0}}@media (max-width: 820px){:root{--panel-w: 100vw;--toolbar-h: 48px;--footer-h: 24px}body{font-size:14px}.app{display:grid;grid-template-columns:1fr;grid-template-rows:var(--mobile-nav-h) minmax(0,1fr);height:100dvh}.mobile-nav{display:grid;grid-template-columns:repeat(3,1fr);align-items:stretch;height:var(--mobile-nav-h);background:var(--bg-900);border-bottom:1px solid var(--border);z-index:20}.mobile-nav__btn{border:0;border-right:1px solid var(--border);background:var(--bg-900);color:var(--text-muted);font:inherit;font-weight:700;cursor:pointer}.mobile-nav__btn:last-child{border-right:0}.mobile-nav__btn--active{color:var(--accent);background:var(--bg-800);box-shadow:inset 0 -2px 0 var(--accent)}.mobile-nav__btn:disabled{color:#3f4858;cursor:not-allowed}.study-list,.series-panel,.viewport-area{grid-column:1;grid-row:2;width:100vw;height:calc(100dvh - var(--mobile-nav-h));min-width:0;border-right:0}.app--studies .series-panel,.app--studies .viewport-area,.app--series .study-list,.app--series .viewport-area,.app--viewer .study-list,.app--viewer .series-panel{display:none}.study-list__header{min-height:56px;padding:10px 14px}.study-list__logo{font-size:17px}.study-list__search{padding:12px 14px}.input,.tool-btn,.upload-btn{min-height:40px;font-size:14px}.study-card,.series-card{padding:14px 16px}.study-card__desc,.series-card__dims,.series-panel__study,.series-panel__date{font-size:12px}.series-panel__header{padding:14px 16px}.toolbar{order:3;height:auto;min-height:54px;padding:6px 8px;border-top:1px solid var(--border);border-bottom:0;overflow-x:auto}.toolbar__tools,.toolbar__actions{gap:6px}.toolbar__actions{margin-left:8px;padding-left:8px}.tool-btn{padding-inline:12px;white-space:nowrap}.toolbar__info{position:sticky;right:0;padding:0 6px;background:var(--bg-800)}.tool-dropdown__item{min-height:44px;font-size:14px;padding:0 14px}.viewport-container{min-height:0}.viewport-footer{gap:8px;overflow:hidden}.viewport-footer span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}}@media (max-width: 520px){.viewport-footer span:last-child{display:none}.toolbar__actions{margin-left:4px;padding-left:4px}.tool-btn{padding-inline:10px}.modal{width:calc(100vw - 20px);max-height:calc(100dvh - 24px)}.drop-zone{margin:16px;padding:34px 16px}}