.top-bar-logo[data-v-4ff75790]{color:var(--accent-green)}.ptr-wrapper[data-v-196627be]{position:relative;min-height:100vh}.ptr-indicator[data-v-196627be]{position:fixed;top:0;left:0;right:0;z-index:9999;display:flex;align-items:center;justify-content:center;gap:10px;overflow:hidden;pointer-events:none}.ptr-spinner[data-v-196627be]{width:24px;height:24px;display:flex;align-items:center;justify-content:center;transition:transform .3s cubic-bezier(.16,1,.3,1)}.ptr-spinner.loading[data-v-196627be]{animation:ptr-spin-196627be .8s linear infinite}.ptr-spinner svg[data-v-196627be]{display:block}@keyframes ptr-spin-196627be{to{transform:rotate(360deg)}}.ptr-text[data-v-196627be]{font-size:13px;font-weight:500;color:var(--text-secondary);font-family:var(--font-stack)}.ptr-content[data-v-196627be]{will-change:transform}.chart-container[data-v-1db4ab83]{width:100%;height:300px}.mini-chart[data-v-1db4ab83]{width:100%;height:200px}.adding-form[data-v-9a9cea43]{background:var(--bg-page);padding:12px;border-radius:10px;margin-bottom:8px;border:.5px solid var(--border-card);flex-wrap:wrap;gap:8px}:root{--bg-page: #F2F2F7;--bg-card: rgba(255,255,255,.85);--bg-card-solid: #FFFFFF;--text-primary: #1C1C1E;--text-secondary: #8E8E93;--text-tertiary: #C7C7CC;--accent-blue: #007AFF;--accent-green: #34C759;--accent-orange: #FF9500;--accent-red: #D70015;--separator: rgba(60,60,67,.12);--radius-sm: 10px;--radius-md: 14px;--radius-card: 16px;--radius-section: 20px;--radius-device: 14px;--radius-pill: 100px;--shadow-sm: 0 1px 3px rgba(0,0,0,.04);--shadow-md: 0 4px 16px rgba(0,0,0,.06);--shadow-lg: 0 12px 48px rgba(0,0,0,.12);--space-xs: 4px;--space-sm: 8px;--space-md: 12px;--space-lg: 16px;--space-xl: 20px;--space-2xl: 24px;--space-3xl: 32px;--font-stack: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Helvetica Neue", sans-serif;--bg-topbar: rgba(242,242,247,.68);--bg-panel: rgba(255,255,255,.95);--bg-dialog: rgba(255,255,255,.98);--text-on-accent: #FFFFFF;--border-card: rgba(0,0,0,.06);--border-control: rgba(0,0,0,.12);--status-good: #34C759;--status-moderate: #FFD60A;--status-severe: #FF9500;--status-verySevere: #D70015;--chart-axis-color: #8E8E93;--chart-datazoom-bg: rgba(0,0,0,.03);--chart-datazoom-fill: rgba(0,122,255,.12);--chart-tooltip-bg: rgba(255,255,255,.97)}body{background:var(--bg-page);font-family:var(--font-stack);color:var(--text-primary);-webkit-font-smoothing:antialiased}.app-shell{display:flex;min-height:100vh}.main-area{flex:1;min-height:100vh;padding-top:68px}.top-bar{position:fixed;top:12px;left:50%;transform:translate(-50%);height:52px;z-index:50;display:flex;align-items:center;justify-content:space-between;padding:0 20px;width:calc(100% - 24px);max-width:680px;border-radius:16px;background:var(--bg-topbar);backdrop-filter:saturate(180%) blur(24px);-webkit-backdrop-filter:saturate(180%) blur(24px);border:.5px solid var(--border-card);box-shadow:0 4px 24px #0000000f,0 1px 4px #0000000a}.top-bar-left{display:flex;align-items:center;gap:8px}.top-bar-logo{flex-shrink:0}.top-bar-title{font-size:18px;font-weight:600;color:var(--text-primary)}.top-bar-center{display:flex;align-items:center}.top-bar-right{display:flex;align-items:center;gap:12px}.top-bar-device-select{padding:6px 12px;border-radius:8px;border:none;background:transparent;font-size:14px;font-family:var(--font-stack);color:var(--text-primary);cursor:pointer;outline:none;transition:background .2s}.top-bar-device-select:hover{background:#007aff0f}.top-bar-status{display:flex;align-items:center;gap:6px;font-size:13px;font-weight:500;color:var(--text-secondary)}.status-dot{width:8px;height:8px;border-radius:50%;flex-shrink:0}.status-dot.green{background:var(--accent-green)}.status-dot.gray{background:var(--text-tertiary)}.top-bar-gear-btn{width:32px;height:32px;border-radius:8px;border:none;background:transparent;color:var(--text-secondary);cursor:pointer;display:flex;align-items:center;justify-content:center;padding:0;transition:all .2s cubic-bezier(.16,1,.3,1)}.top-bar-gear-btn:hover{background:#007aff14;color:var(--accent-blue)}.summary-card{background:var(--bg-card);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border-radius:var(--radius-section);border:.5px solid rgba(0,0,0,.06);box-shadow:var(--shadow-sm);padding:var(--space-xl) var(--space-2xl);margin-bottom:var(--space-2xl);display:flex;align-items:center;gap:var(--space-lg)}.summary-icon{width:40px;height:40px;border-radius:12px;background:#007aff14;display:flex;align-items:center;justify-content:center;color:var(--accent-blue);flex-shrink:0}.summary-info{flex:1}.summary-name{font-size:16px;font-weight:600;color:var(--text-primary)}.summary-status{font-size:13px;color:var(--text-secondary);margin-top:4px;display:flex;align-items:center;gap:6px}.dot{width:8px;height:8px;border-radius:50%;flex-shrink:0}.dot.green{background:var(--accent-green)}.dot.gray{background:var(--text-tertiary)}.panel-tabs{display:flex;border-bottom:1px solid var(--separator);flex-shrink:0}.panel-tab-btn{flex:1;padding:12px 0;border:none;background:transparent;font-size:13px;font-weight:500;color:var(--text-secondary);cursor:pointer;font-family:var(--font-stack);position:relative;transition:color .2s}.panel-tab-btn:hover{color:var(--text-primary)}.panel-tab-btn.active{color:var(--accent-blue)}.panel-tab-btn.active:after{content:"";position:absolute;bottom:0;left:50%;transform:translate(-50%);width:24px;height:2px;background:var(--accent-blue);border-radius:2px}.page-container{max-width:960px;margin:0 auto;padding:var(--space-2xl) var(--space-lg) 60px}.section-card{background:var(--bg-card);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border-radius:var(--radius-section);border:.5px solid rgba(0,0,0,.06);box-shadow:var(--shadow-sm);padding:var(--space-2xl);margin-bottom:var(--space-2xl)}.section-title{font-size:18px;font-weight:600;color:var(--text-primary);margin-bottom:var(--space-lg)}.section-title-row{display:flex;align-items:center;justify-content:space-between;margin-bottom:16px;font-size:18px;font-weight:600;color:var(--text-primary)}.section-title-btn{width:28px;height:28px;border-radius:var(--radius-sm);border:none;background:transparent;color:var(--text-secondary);cursor:pointer;display:flex;align-items:center;justify-content:center;padding:0;transition:all .2s cubic-bezier(.16,1,.3,1)}.section-title-btn:hover{background:#007aff14;color:var(--accent-blue)}.metrics-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--space-md)}.metric-card{background:var(--bg-card);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border-radius:var(--radius-card);border:.5px solid var(--border-card);box-shadow:var(--shadow-sm);padding:var(--space-lg);text-align:center;cursor:pointer;transition:all .25s cubic-bezier(.16,1,.3,1);position:relative}.metric-card.hovered{z-index:100}.metric-card .status-dot{width:8px;height:8px;border-radius:50%;margin:0 auto var(--space-xs)}.metric-card .status-dot.good{background:var(--status-good)}.metric-card .status-dot.moderate{background:var(--status-moderate)}.metric-card .status-dot.severe{background:var(--status-severe)}.metric-card .status-dot.verySevere{background:var(--status-verySevere)}.metric-value{font-size:36px;font-weight:600;color:var(--text-primary);margin:8px 0 4px}.metric-unit{font-size:14px;font-weight:400;color:var(--text-secondary)}.metric-label{font-size:12px;font-weight:500;color:var(--text-secondary);text-transform:uppercase;letter-spacing:.5px}.info-btn{position:absolute;top:8px;right:8px;width:20px;height:20px;border-radius:50%;border:1px solid rgba(0,0,0,.08);background:#00000008;color:var(--text-tertiary);font-size:11px;font-weight:600;cursor:pointer;display:flex;align-items:center;justify-content:center;padding:0;line-height:1;transition:all .2s cubic-bezier(.16,1,.3,1);opacity:0}.metric-card:hover .info-btn{opacity:1}.info-btn:hover{background:var(--accent-blue);color:var(--text-on-accent);border-color:var(--accent-blue)}.info-popover{position:absolute;top:calc(100% + 4px);left:50%;transform:translate(-50%);width:260px;background:var(--chart-tooltip-bg);backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px);border-radius:var(--radius-md);border:.5px solid rgba(0,0,0,.08);box-shadow:var(--shadow-lg),0 2px 8px #0000000f;padding:var(--space-md) var(--space-lg);z-index:9999;text-align:left;pointer-events:auto}.metric-card:nth-child(4n) .info-popover{left:auto;right:-8px;transform:none}.metric-card:nth-child(4n+1) .info-popover{left:-8px;transform:none}.info-popover p{margin:0;font-size:13px;line-height:1.55;color:var(--text-primary);text-transform:none;letter-spacing:0;font-weight:400}.fade-enter-active,.fade-leave-active{transition:opacity .2s cubic-bezier(.16,1,.3,1)}.pill-btn{padding:7px 18px;border-radius:var(--radius-pill);border:.5px solid rgba(0,0,0,.1);background:#00000008;font-size:13px;font-weight:500;color:var(--text-primary);cursor:pointer;transition:all .2s cubic-bezier(.16,1,.3,1);font-family:var(--font-stack);white-space:nowrap}.pill-btn:hover{background:#0000000f;border-color:#00000026}.pill-btn.active{background:var(--accent-blue);color:var(--text-on-accent);border-color:var(--accent-blue);box-shadow:0 2px 8px #007aff40}.pill-group{margin:0 15px;display:flex;gap:var(--space-sm);flex-wrap:wrap;margin-bottom:var(--space-lg)}.chart-panel{overflow:hidden;max-height:0;transition:max-height .45s cubic-bezier(.16,1,.3,1)}.chart-panel.open{max-height:600px}.chart-inner{padding-top:var(--space-md)}.chart-stats{margin:0 15px;padding-bottom:10px;display:flex;gap:var(--space-2xl);margin-top:var(--space-md);font-size:13px;color:var(--text-secondary)}.chart-stats span strong{color:var(--text-primary);font-weight:600}.device-row{background:var(--bg-card);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border-radius:var(--radius-device);padding:var(--space-lg) var(--space-xl);box-shadow:var(--shadow-sm);display:flex;align-items:center;justify-content:space-between;margin-bottom:var(--space-md);border:.5px solid var(--border-card)}.device-info{flex:1}.device-name{font-size:16px;font-weight:600;color:var(--text-primary)}.device-meta{font-size:13px;color:var(--text-secondary);margin-top:4px}.device-status{font-size:12px;color:var(--accent-green);margin-top:2px}.device-status.offline{color:var(--text-tertiary)}.config-link{font-size:14px;color:var(--accent-blue);cursor:pointer;font-weight:500}.sheet-overlay{position:fixed;top:0;right:0;bottom:0;left:0;background:#0000004d;z-index:1000;display:flex;align-items:flex-end;justify-content:center}.sheet-content{background:var(--bg-card-solid);border-radius:20px 20px 0 0;width:100%;max-width:600px;padding:24px;transform:translateY(0);transition:transform .3s ease}.sheet-content h3{font-size:17px;font-weight:600;margin-bottom:16px}.sheet-field{margin-bottom:12px}.sheet-field label{display:block;font-size:13px;color:var(--text-secondary);margin-bottom:4px}.sheet-field input{width:100%;padding:10px 12px;border-radius:10px;border:1px solid var(--separator);font-size:15px;font-family:var(--font-stack);color:var(--text-primary);background:var(--bg-page);outline:none;transition:border-color .2s}.sheet-field input:focus{border-color:var(--accent-blue)}.sheet-actions{display:flex;gap:12px;margin-top:20px}.sheet-actions .pill-btn.save{background:var(--accent-blue);color:var(--text-on-accent);border-color:var(--accent-blue)}.timeline{position:relative;padding-left:24px}.timeline:before{content:"";position:absolute;left:5px;top:8px;bottom:8px;width:1px;background:var(--separator)}.timeline-item{position:relative;padding-bottom:20px}.timeline-item:last-child{padding-bottom:0}.timeline-dot{position:absolute;left:-19px;top:6px;width:10px;height:10px;border-radius:50%;background:var(--text-tertiary)}.timeline-dot.severe{background:var(--accent-red)}.timeline-dot.warning{background:var(--accent-orange)}.timeline-dot.normal{background:var(--text-tertiary)}.timeline-time{font-size:12px;color:var(--text-tertiary);margin-bottom:4px}.timeline-desc{font-size:14px;color:var(--text-primary);font-weight:500}.timeline-detail{font-size:13px;color:var(--text-secondary);margin-top:2px}.timeline-empty{color:var(--text-tertiary);text-align:center;padding:var(--space-xl)}.load-more-btn{width:100%;padding:10px;border:none;background:transparent;color:var(--accent-blue);font-size:14px;font-weight:500;cursor:pointer;font-family:var(--font-stack)}.settings-list{list-style:none}.settings-row{display:flex;align-items:center;justify-content:space-between;padding:14px 0;border-bottom:1px solid var(--separator);cursor:pointer;font-size:15px}.settings-row:last-child{border-bottom:none}.settings-row .arrow{font-size:14px;color:var(--text-tertiary);transition:transform .2s ease}.settings-row .arrow.open{transform:rotate(90deg)}.settings-expand{overflow:hidden;max-height:0;transition:max-height .35s cubic-bezier(.16,1,.3,1);padding:0 var(--space-xs)}.settings-expand.open{max-height:260px}.settings-expand-inner{padding:12px 0}.setting-input-group{margin-bottom:10px}.setting-input-group label{display:block;font-size:13px;color:var(--text-secondary);margin-bottom:4px}.setting-input-group input,.setting-input-group select{width:100%;padding:8px 12px;border-radius:8px;border:1px solid var(--separator);font-size:14px;font-family:var(--font-stack);color:var(--text-primary);background:var(--bg-page);outline:none}.setting-input-group input:focus,.setting-input-group select:focus{border-color:var(--accent-blue)}.version-text{font-size:14px;color:var(--text-tertiary)}.panel-backdrop{position:fixed;top:0;right:0;bottom:0;left:0;background:#0000004d;z-index:99}.panel-container{position:fixed;top:0;right:0;bottom:0;width:400px;background:var(--bg-panel);backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px);border-left:.5px solid rgba(0,0,0,.08);z-index:200;transform:translate(100%);transition:transform .35s cubic-bezier(.16,1,.3,1);display:flex;flex-direction:column}.panel-container.open{transform:translate(0)}.alert-panel{width:480px}.panel-header{display:flex;align-items:center;justify-content:space-between;padding:20px 24px 16px;border-bottom:1px solid var(--separator);flex-shrink:0}.panel-header h3{font-size:18px;font-weight:600;color:var(--text-primary)}.panel-close-btn{width:32px;height:32px;border-radius:8px;border:none;background:transparent;color:var(--text-secondary);cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .2s cubic-bezier(.16,1,.3,1)}.panel-close-btn:hover{background:#0000000d}.panel-scroll{flex:1;overflow-y:auto;padding:var(--space-lg) var(--space-2xl) var(--space-3xl)}.panel-section{margin-bottom:var(--space-2xl)}.panel-section-title{font-size:13px;font-weight:600;color:var(--text-secondary);text-transform:uppercase;letter-spacing:.5px;margin-bottom:var(--space-md)}.panel-empty{color:var(--text-tertiary);text-align:center;padding:var(--space-xl);font-size:14px}.panel-form{display:flex;flex-direction:column;gap:12px}.panel-field{display:flex;flex-direction:column;gap:4px}.panel-field label{font-size:13px;color:var(--text-secondary)}.panel-field input,.panel-field select{width:100%;padding:10px 12px;border-radius:10px;border:1px solid var(--separator);font-size:15px;font-family:var(--font-stack);color:var(--text-primary);background:var(--bg-page);outline:none;transition:border-color .2s}.panel-field input:focus,.panel-field select:focus{border-color:var(--accent-blue)}.panel-btn{padding:10px 16px;border-radius:10px;border:1px solid var(--separator);background:var(--bg-page);font-size:14px;font-weight:500;color:var(--text-primary);cursor:pointer;font-family:var(--font-stack);transition:all .2s cubic-bezier(.16,1,.3,1)}.panel-btn:hover{background:var(--separator)}.panel-btn.primary{background:var(--accent-blue);color:var(--text-on-accent);border-color:var(--accent-blue)}.panel-btn.primary:hover{opacity:.9}.panel-btn-group{display:flex;gap:8px}.panel-btn-group .panel-btn{flex:1}.settings-about-row{display:flex;align-items:center;justify-content:space-between;padding:12px 0;font-size:15px;color:var(--text-primary)}.alert-row{display:flex;align-items:center;gap:8px;flex-wrap:wrap;padding:10px 0;border-bottom:1px solid var(--separator)}.alert-row:last-child{border-bottom:none}.add-rule-btn{margin-bottom:var(--space-md)}.alert-edit-row{display:flex;align-items:center;gap:8px;padding:10px 0;border-bottom:1px solid var(--separator);flex-wrap:wrap}.alert-metric{font-size:14px;font-weight:500;color:var(--text-primary);min-width:56px}.alert-op{font-size:14px;font-weight:600;color:var(--text-secondary);width:20px;text-align:center}.alert-threshold{font-size:14px;font-weight:600;color:var(--text-primary);min-width:48px}.alert-select{padding:8px 10px;border-radius:8px;border:1px solid var(--separator);font-size:14px;font-family:var(--font-stack);color:var(--text-primary);background:var(--bg-page);outline:none}.alert-select:focus{border-color:var(--accent-blue)}.alert-select-sm{width:72px}.alert-input{width:80px;padding:8px 10px;border-radius:8px;border:1px solid var(--separator);font-size:14px;font-family:var(--font-stack);color:var(--text-primary);background:var(--bg-page);outline:none}.alert-input:focus{border-color:var(--accent-blue)}.alert-actions{display:flex;gap:6px;margin-left:auto}@media(max-width:767px){.metrics-grid{grid-template-columns:repeat(4,1fr);gap:6px;row-gap:4px}.page-container{padding:16px 12px 60px}.metric-value{font-size:16px;font-weight:600;margin:0}.metric-card{padding:4px 3px 6px;border-radius:var(--radius-sm);background:var(--bg-card);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}.metric-card:hover{transform:none;box-shadow:none}.info-btn{top:5px;right:5px;width:14px;height:14px;font-size:8px}.info-popover{width:180px;padding:8px 10px;border-radius:10px}.metric-card:nth-child(4n) .info-popover{right:-2px}.metric-card:nth-child(4n+1) .info-popover{left:-2px}.info-popover p{font-size:10px}.metric-label{font-size:9px;color:var(--text-secondary)}.metric-unit{font-size:9px}.section-card{padding:16px}.panel-container,.alert-panel{width:100vw}.top-bar{height:44px;padding:0 14px;width:calc(100% - 16px);max-width:none;top:8px;border-radius:14px}.top-bar-title{font-size:16px}.summary-card{padding:16px}.summary-name{font-size:15px}.metric-card .status-dot{margin-bottom:2px}.section-title{margin-bottom:8px;font-size:16px}.pill-btn{padding:5px 12px;font-size:12px}.pill-group{gap:6px;margin-bottom:10px}}.pw-backdrop{position:fixed;top:0;right:0;bottom:0;left:0;background:#00000040;backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);z-index:190}.pw-dialog{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);background:var(--bg-dialog);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border-radius:16px;padding:24px;width:320px;box-shadow:0 16px 48px #0000002e;z-index:10001}.pw-dialog h3{margin:0 0 16px;font-size:16px;font-weight:600;color:var(--text-primary)}.pw-dialog input{width:100%;padding:10px 14px;border-radius:10px;border:1px solid rgba(0,0,0,.12);font-size:14px;font-family:var(--font-stack);outline:none;box-sizing:border-box;transition:border-color .2s cubic-bezier(.16,1,.3,1)}.pw-dialog input:focus{border-color:var(--accent-blue)}.pw-error{color:var(--accent-red);font-size:12px;margin-top:8px}.pw-actions{display:flex;gap:10px;margin-top:16px;justify-content:flex-end}.pw-btn{padding:8px 20px;border-radius:10px;border:none;font-size:14px;font-weight:500;cursor:pointer;font-family:var(--font-stack);transition:all .2s cubic-bezier(.16,1,.3,1)}.pw-btn.cancel{background:#0000000f;color:var(--text-secondary)}.pw-btn.confirm{background:var(--accent-blue);color:var(--text-on-accent)}.pw-btn:hover{opacity:.85}@media(prefers-color-scheme:dark){:root{--bg-page: #000000;--bg-card: rgba(255,255,255,.08);--bg-card-solid: #1C1C1E;--text-primary: #FFFFFF;--text-secondary: #98989D;--text-tertiary: #48484A;--separator: rgba(84,84,88,.65);--border-card: rgba(255,255,255,.08);--border-control: rgba(255,255,255,.12);--bg-topbar: rgba(28,28,30,.68);--bg-panel: rgba(28,28,30,.95);--bg-dialog: rgba(44,44,46,.95);--text-on-accent: #FFFFFF;--chart-axis-color: #98989D;--chart-datazoom-bg: rgba(255,255,255,.06);--chart-datazoom-fill: rgba(10,132,255,.3);--chart-tooltip-bg: rgba(44,44,46,.97);--status-good: #30D158;--status-moderate: #FFD60A;--status-severe: #FF9F0A;--status-verySevere: #FF453A;--accent-blue: #0A84FF;--accent-green: #30D158;--accent-orange: #FF9F0A;--accent-red: #FF453A;--shadow-sm: 0 1px 3px rgba(0,0,0,.3);--shadow-md: 0 4px 16px rgba(0,0,0,.35);--shadow-lg: 0 12px 48px rgba(0,0,0,.45)}.sheet-field input,.setting-input-group input,.setting-input-group select,.panel-field input,.panel-field select,.alert-select,.alert-input{background:#ffffff1a}.sheet-field input,.pw-dialog input{border-color:#ffffff1f}.pw-backdrop,.panel-backdrop,.sheet-overlay{background:#00000080}.pill-btn{background:#ffffff0f;border-color:#ffffff1a}.pill-btn:hover{background:#ffffff1a;border-color:#ffffff2e}.metric-card.expanded{background:#0a84ff1a;box-shadow:0 8px 32px #0a84ff26}.metric-card,.chart-panel{background:#ffffff0a}.panel-close-btn:hover{background:#ffffff14}.top-bar{border-color:#ffffff14;box-shadow:0 4px 24px #0000004d,0 1px 4px #0003}.top-bar-device-select:hover,.top-bar-gear-btn:hover{background:#0a84ff1f}.summary-icon{background:#0a84ff26}.section-title-btn:hover{background:#0a84ff1f}.info-btn{border-color:#ffffff1a;background:#ffffff0a}.load-more-btn{color:var(--accent-blue)}.pw-btn.cancel{background:#ffffff14}}:root{--bg-page: #F2F2F7;--bg-card: rgba(255,255,255,.85);--bg-card-solid: #FFFFFF;--text-primary: #1C1C1E;--text-secondary: #8E8E93;--text-tertiary: #C7C7CC;--accent-blue: #007AFF;--accent-green: #34C759;--accent-orange: #FF9500;--accent-red: #D70015;--status-good: #34C759;--status-moderate: #FFD60A;--status-severe: #FF9500;--status-verySevere: #D70015;--separator: rgba(60,60,67,.12);--border-card: rgba(0,0,0,.06);--border-control: rgba(0,0,0,.12);--radius-sm: 10px;--radius-md: 14px;--radius-card: 16px;--radius-section: 20px;--radius-device: 14px;--radius-pill: 100px;--shadow-sm: 0 1px 3px rgba(0,0,0,.04);--shadow-md: 0 4px 16px rgba(0,0,0,.06);--shadow-lg: 0 12px 48px rgba(0,0,0,.12);--shadow-xl: 0 24px 64px rgba(0,0,0,.16);--space-xs: 4px;--space-sm: 8px;--space-md: 12px;--space-lg: 16px;--space-xl: 20px;--space-2xl: 24px;--space-3xl: 32px;--space-4xl: 40px;--space-5xl: 48px;--font-stack: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Helvetica Neue", sans-serif;--font-size-xs: 11px;--font-size-sm: 12px;--font-size-base: 14px;--font-size-md: 16px;--font-size-lg: 20px;--font-size-xl: 24px;--font-size-2xl: 32px;--font-size-3xl: 36px;--font-weight-regular: 400;--font-weight-medium: 500;--font-weight-semibold: 600;--font-weight-bold: 700;--line-height-tight: 1.2;--line-height-normal: 1.5;--line-height-relaxed: 1.75;--ease-out: cubic-bezier(.16, 1, .3, 1);--ease-in-out: cubic-bezier(.45, 0, .55, 1);--ease-spring: cubic-bezier(.34, 1.56, .64, 1);--duration-fast: .15s;--duration-normal: .25s;--duration-slow: .4s;--transition-all: all var(--duration-normal) var(--ease-out);--transition-transform: transform var(--duration-normal) var(--ease-out);--transition-opacity: opacity var(--duration-normal) var(--ease-out);--bg-topbar: rgba(242,242,247,.68);--bg-panel: rgba(255,255,255,.95);--bg-dialog: rgba(255,255,255,.98);--text-on-accent: #FFFFFF;--chart-axis-color: #8E8E93;--chart-datazoom-bg: rgba(0,0,0,.03);--chart-datazoom-fill: rgba(0,122,255,.12);--chart-tooltip-bg: rgba(255,255,255,.97)}@media(prefers-color-scheme:dark){:root{--bg-page: #000000;--bg-card: rgba(255,255,255,.08);--bg-card-solid: #1C1C1E;--text-primary: #FFFFFF;--text-secondary: #98989D;--text-tertiary: #48484A;--separator: rgba(84,84,88,.65);--border-card: rgba(255,255,255,.08);--border-control: rgba(255,255,255,.12);--bg-topbar: rgba(28,28,30,.68);--bg-panel: rgba(28,28,30,.95);--bg-dialog: rgba(44,44,46,.95);--text-on-accent: #FFFFFF;--chart-axis-color: #98989D;--chart-datazoom-bg: rgba(255,255,255,.06);--chart-datazoom-fill: rgba(10,132,255,.3);--chart-tooltip-bg: rgba(44,44,46,.97);--status-good: #30D158;--status-moderate: #FFD60A;--status-severe: #FF9F0A;--status-verySevere: #FF453A;--accent-blue: #0A84FF;--accent-green: #30D158;--accent-orange: #FF9F0A;--accent-red: #FF453A;--shadow-sm: 0 1px 3px rgba(0,0,0,.3);--shadow-md: 0 4px 16px rgba(0,0,0,.35);--shadow-lg: 0 12px 48px rgba(0,0,0,.45);--shadow-xl: 0 24px 64px rgba(0,0,0,.55)}.metric-card,.chart-panel{background:#ffffff0a}}*{box-sizing:border-box;margin:0;padding:0}body{background:var(--bg-page);font-family:var(--font-stack);color:var(--text-primary);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;line-height:var(--line-height-normal)}.glass{background:var(--bg-card);backdrop-filter:saturate(180%) blur(20px);-webkit-backdrop-filter:saturate(180%) blur(20px);border:.5px solid var(--border-card);box-shadow:var(--shadow-sm)}.glass-enhanced{background:var(--bg-card);backdrop-filter:saturate(180%) blur(24px);-webkit-backdrop-filter:saturate(180%) blur(24px);border:.5px solid var(--border-card);box-shadow:var(--shadow-md),inset 0 .5px #ffffff1a}.top-bar{position:fixed;top:12px;left:50%;transform:translate(-50%);height:52px;z-index:50;display:flex;align-items:center;justify-content:space-between;padding:0 20px;width:calc(100% - 24px);max-width:680px;border-radius:16px;background:var(--bg-topbar);backdrop-filter:saturate(180%) blur(24px);-webkit-backdrop-filter:saturate(180%) blur(24px);border:.5px solid var(--border-card);box-shadow:0 4px 24px #0000000f,0 1px 4px #0000000a,inset 0 .5px #ffffff1a;transition:var(--transition-all)}.top-bar:hover{box-shadow:0 8px 32px #00000014,0 2px 8px #0000000f,inset 0 .5px #ffffff26}.metric-card{background:var(--bg-card);backdrop-filter:saturate(180%) blur(20px);-webkit-backdrop-filter:saturate(180%) blur(20px);border-radius:var(--radius-card);border:.5px solid var(--border-card);box-shadow:var(--shadow-sm);padding:var(--space-lg);text-align:center;cursor:pointer;transition:var(--transition-all);position:relative;overflow:hidden}.metric-card:before{content:"";position:absolute;top:0;left:0;right:0;height:1px;background:linear-gradient(90deg,transparent,rgba(255,255,255,.2),transparent);opacity:.5}.metric-card:hover{border-color:var(--accent-blue);box-shadow:var(--shadow-md);transform:translateY(-2px)}.metric-card.expanded{border-color:var(--accent-blue);background:#007aff0f;box-shadow:0 8px 32px #007aff1a}.pill-btn{padding:8px 16px;border-radius:var(--radius-pill);border:1px solid var(--border-control);background:var(--bg-card);color:var(--text-primary);font-size:var(--font-size-sm);font-weight:var(--font-weight-medium);cursor:pointer;transition:var(--transition-all);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}.pill-btn:hover{background:#007aff14;border-color:var(--accent-blue);transform:scale(1.02)}.pill-btn:active{transform:scale(.98)}.pill-btn.active{background:var(--accent-blue);color:var(--text-on-accent);border-color:var(--accent-blue);box-shadow:0 2px 8px #007aff4d}input,select{padding:10px 14px;border-radius:var(--radius-sm);border:1px solid var(--border-control);background:#fffc;color:var(--text-primary);font-size:var(--font-size-base);font-family:var(--font-stack);transition:var(--transition-all);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}input:focus,select:focus{outline:none;border-color:var(--accent-blue);box-shadow:0 0 0 3px #007aff1a}.panel-container{position:fixed;top:0;right:-450px;width:450px;height:100vh;background:var(--bg-panel);backdrop-filter:saturate(180%) blur(24px);-webkit-backdrop-filter:saturate(180%) blur(24px);border-left:.5px solid var(--border-card);box-shadow:-8px 0 32px #0000001a;z-index:100;transition:right .3s var(--ease-out);overflow-y:auto}.panel-container.open{right:0}.pw-dialog{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);background:var(--bg-dialog);backdrop-filter:saturate(180%) blur(32px);-webkit-backdrop-filter:saturate(180%) blur(32px);border-radius:var(--radius-section);border:.5px solid var(--border-card);box-shadow:var(--shadow-xl);padding:var(--space-3xl);z-index:200;min-width:320px;max-width:400px}.chart-panel{background:var(--bg-card);backdrop-filter:saturate(180%) blur(20px);-webkit-backdrop-filter:saturate(180%) blur(20px);border-radius:var(--radius-section);border:.5px solid var(--border-card);box-shadow:var(--shadow-sm);margin-top:var(--space-lg);overflow:hidden;transition:var(--transition-all)}.chart-panel.open{box-shadow:var(--shadow-md)}.status-dot{width:8px;height:8px;border-radius:50%;display:inline-block;margin-right:var(--space-xs)}.status-dot.good{background:var(--status-good);box-shadow:0 0 8px #34c75966}.status-dot.moderate{background:var(--status-moderate);box-shadow:0 0 8px #ffd60a66}.status-dot.severe{background:var(--status-severe);box-shadow:0 0 8px #ff950066}.status-dot.verySevere{background:var(--status-verySevere);box-shadow:0 0 8px #d7001566}@keyframes fadeIn{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}@keyframes slideInRight{0%{transform:translate(100%)}to{transform:translate(0)}}@keyframes pulse{0%,to{opacity:1}50%{opacity:.5}}.fade-enter-active,.fade-leave-active{transition:opacity .3s var(--ease-out)}.fade-enter-from,.fade-leave-to{opacity:0}.slide-enter-active,.slide-leave-active{transition:transform .3s var(--ease-out)}.slide-enter-from,.slide-leave-to{transform:translate(100%)}@media(max-width:767px){.top-bar{width:calc(100% - 16px);top:8px;height:48px;padding:0 16px}.metric-card{padding:var(--space-md)}.metric-value{font-size:28px}.panel-container{width:100%;right:-100%}}@media(prefers-reduced-motion:reduce){*{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}:focus-visible{outline:2px solid var(--accent-blue);outline-offset:2px}@media(prefers-contrast:high){:root{--border-card: rgba(0,0,0,.3);--border-control: rgba(0,0,0,.5)}}