.hlw-layer { position: fixed; inset: 0; pointer-events: none; z-index: 1010; }
.hlw-layer[hidden], .hlw-window[hidden], .hlw-taskbar[hidden], .hlw-notice[hidden] { display: none !important; }
.hlw-window { position: absolute; display: flex; flex-direction: column; min-width: 440px; min-height: 240px; max-width: calc(100vw - 40px); background: #f8fafc; color: #25344b; border: 1px solid #cdd6e2; border-radius: 14px; box-shadow: 0 12px 42px #1e334b20, 0 2px 5px #1e334b12; pointer-events: auto; }
.hlw-window.hlw-focused { border-color: #7ea1bf; box-shadow: 0 22px 70px #1e334b2a, 0 0 0 1px #91b1cb33; }
.hlw-titlebar { min-height: 46px; display: flex; align-items: center; gap: 13px; padding: 0 9px 0 17px; border-bottom: 1px solid #dce3ea; border-radius: 14px 14px 0 0; background: #f0f4f8; cursor: grab; touch-action: none; user-select: none; }
.hlw-focused .hlw-titlebar { background: #eaf1f7; }
.hlw-window-title { color: #243d54; font: 600 13px/1.4 system-ui, sans-serif; }
.hlw-live-label { color: #728196; font: 11px/1.4 system-ui, sans-serif; }
.hlw-window-controls { display: flex; gap: 2px; margin-left: auto; }
.hlw-control, .hlw-picker-close { display: grid; place-items: center; width: 31px; height: 30px; padding: 0; border: 0; border-radius: 7px; background: transparent; color: #516278; font: 20px/1 system-ui, sans-serif; cursor: pointer; }
.hlw-control:hover, .hlw-picker-close:hover { background: #dce6ef; color: #172f47; }
.hlw-control-close:hover { background: #f9e2e1; color: #a43e38; }
.hlw-window-content { flex: 1; min-height: 0; overflow: auto; padding: 18px; border-radius: 0 0 14px 14px; overscroll-behavior: contain; }
#main-system .hlw-window-content > .page-panel.hlw-mounted { display: block !important; visibility: visible !important; opacity: 1 !important; animation: none !important; transform: none !important; margin: 0 !important; min-height: 0; }
.hlw-resize { position: absolute; right: 2px; bottom: 2px; width: 20px; height: 20px; border: 0; border-radius: 0 0 12px; background: #e9eff5; color: #8599ad; font-size: 10px; cursor: nwse-resize; touch-action: none; }
.hlw-manipulating, .hlw-manipulating * { user-select: none !important; }
.hlw-manipulating .hlw-titlebar { cursor: grabbing; }
.hlw-window.hlw-maximized { left: 20px !important; top: 74px !important; width: calc(100vw - 40px) !important; height: calc(100vh - 150px) !important; }
.hlw-maximized .hlw-resize { display: none; }
.hlw-taskbar { position: fixed; bottom: 17px; left: 50%; transform: translateX(-50%); display: flex; align-items: center; gap: 5px; padding: 7px; max-width: calc(100vw - 48px); overflow-x: auto; border: 1px solid #d2dce7; border-radius: 14px; background: #f8fbfff5; box-shadow: 0 8px 35px #253e5b24; z-index: 1011; }
.hlw-task, .hlw-task-add, .hlw-task-exit { flex: 0 0 auto; border: 1px solid transparent; padding: 9px 14px; border-radius: 8px; background: transparent; color: #53677c; font: 500 12px/1.4 system-ui, sans-serif; cursor: pointer; }
.hlw-task:hover, .hlw-task-add:hover, .hlw-task-exit:hover { background: #e8eff6; color: #243f5b; }
.hlw-task-current { color: #214e75; background: #e2edf7; border-color: #c4d8e9; }
.hlw-task-minimized { opacity: .7; }
.hlw-task-add { padding: 6px 13px; font-size: 22px; }
.hlw-task-exit { border-left: 1px solid #dce3eb; border-radius: 0 8px 8px 0; }
.hlw-picker-backdrop { position: fixed; inset: 0; display: grid; place-items: center; padding: 32px; background: #24394b35; backdrop-filter: blur(5px); z-index: 1040; }
.hlw-picker { width: min(560px, 100%); padding: 27px; background: #fbfcfe; border: 1px solid #fff; border-radius: 19px; box-shadow: 0 30px 100px #20364d3b; color: #263c52; }
.hlw-picker-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.hlw-eyebrow { color: #738ba0; font: 600 10px/1.4 system-ui, sans-serif; letter-spacing: .14em; }
.hlw-picker h2 { margin: 7px 0 0; color: #263c52; font: 600 24px/1.35 system-ui, sans-serif; letter-spacing: -.025em; }
.hlw-picker-intro { margin: 13px 0 21px; color: #728093; font: 13px/1.7 system-ui, sans-serif; }
.hlw-picker-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.hlw-picker-item { display: flex; align-items: center; gap: 13px; padding: 17px 13px; text-align: left; border: 1px solid #dfe6ee; border-radius: 11px; background: #fff; color: #30465c; cursor: pointer; transition: border-color .15s, background .15s; }
.hlw-picker-item:hover { border-color: #8bacc6; background: #f0f6fb; }
.hlw-picker-icon { display: grid; place-items: center; flex: 0 0 36px; height: 36px; border-radius: 10px; background: #edf3f8; color: #587995; font: 23px/1 system-ui, sans-serif; }
.hlw-picker-label { display: flex; flex-direction: column; gap: 5px; }
.hlw-picker-label strong { font: 600 14px/1.4 system-ui, sans-serif; }
.hlw-picker-label small { color: #778797; font: 11px/1.4 system-ui, sans-serif; }
.hlw-picker-note { margin: 20px 0 0; padding-top: 16px; border-top: 1px solid #e4eaf0; color: #7a8998; font: 11px/1.8 system-ui, sans-serif; }
.hlw-notice { position: fixed; bottom: 80px; left: 50%; transform: translateX(-50%); z-index: 1060; max-width: calc(100vw - 32px); padding: 12px 18px; background: #263e55; color: #fff; border-radius: 10px; box-shadow: 0 8px 30px #142f4830; font: 13px/1.7 system-ui, sans-serif; }
.hlw-window button:focus-visible, .hlw-titlebar:focus-visible, .hlw-taskbar button:focus-visible, .hlw-picker button:focus-visible { outline: 2px solid #4f86b1; outline-offset: 2px; }
@media (max-width: 899px) { .hlw-layer, .hlw-taskbar, .hlw-picker-backdrop { display: none !important; } }
@media (prefers-reduced-motion: reduce) { .hlw-picker-item { transition: none; } }