:root{--surface-base: #f3f6fb;--surface-card: #ffffff;--surface-soft: #eef3fb;--surface-raised: #f9fbff;--surface-input: var(--surface-raised);--text-primary: #142033;--text-secondary: #5d6b82;--text-tertiary: #52627a;--text-muted-strong: #4b5a70;--border-default: #d9e3f0;--border-subtle: #ecf1f8;--accent-brand: #2563eb;--accent-brand-soft: #dbeafe;--energy-hvac: #2893ff;--energy-equipment: #7c5cff;--energy-equipment-alt: #ff9a3d;--energy-other: #25b26b;--status-normal: #22b573;--status-elevated: #f0b429;--status-critical: #ef5b56;--status-normal-text: #166534;--status-critical-text: #991b1b;--status-normal-surface: color-mix(in srgb, var(--status-normal) 10%, transparent);--status-critical-surface: color-mix(in srgb, var(--status-critical) 10%, transparent);--status-info: var(--energy-hvac);--opacity-disabled: .5;--feedback-success-text: var(--status-normal-text);--feedback-success-surface: #dcfce7;--feedback-error-text: #991b1b;--feedback-error-surface: #fee2e2;--control-height-compact: 32px;--control-height-sm: 36px;--control-height-md: 40px;--control-radius-sm: 9px;--control-radius-md: 10px;--control-radius-lg: 12px;--radius-tag: 6px;--radius-badge: 7px;--radius-panel: 16px;--radius-shell: 18px;--radius-drawer-item: 13px;--radius-pill: 999px;--space-1: 4px;--space-2: 8px;--space-3: 12px;--space-4: 16px;--space-5: 20px;--space-6: 24px;--space-7: 28px;--space-8: 32px;--space-tight: 5px;--space-field: 6px;--space-badge-inline: 7px;--space-row: 9px;--space-control-inline: 10px;--space-feedback-block: 11px;--space-panel-compact: 14px;--space-page-gap: 18px;--font-size-meta: 10px;--font-size-control: 11px;--font-size-supporting: 12px;--font-size-label: 13px;--font-size-body-compact: 14px;--font-size-section: 17px;--font-size-subtitle: 18px;--font-size-heading: 22px;--color-on-accent: #fff;--border-width: 1px;--focus-ring-width: 2px;--focus-ring-offset: 2px;--interaction-offset: 1px;--transition-control: .16s ease-out;--transition-reduced: .01ms;--table-gap: var(--space-3);--table-toolbar-gap: var(--space-4);--table-emphasis-font-weight: 800;--table-eyebrow-letter-spacing: .13em;--table-heading-size: 19px;--table-filter-min-width: 290px;--table-filter-padding: var(--space-2) 11px;--table-filter-icon-size: 15px;--table-filter-icon-stroke-width: 1.8;--table-min-width: 640px;--table-header-padding: 11px 13px;--table-header-letter-spacing: .05em;--table-cell-padding: 14px 13px;--table-sort-icon-size: 14px;--table-sort-icon-stroke-width: 1.7;--table-sort-icon-opacity: .55;--table-state-padding-block: 44px;--table-pagination-button-size: 28px;--table-disabled-opacity: .4;--table-visually-hidden-size: 1px;--table-visually-hidden-offset: -1px;--table-mobile-padding: 10px;--table-mobile-row-gap: var(--space-2) 14px;--table-mobile-surface-radius: 14px;--table-mobile-label-min-width: 56px;--table-mobile-label-track: .7fr;--table-mobile-value-track: 1.3fr;--table-mobile-label-line-height: 1.5;--table-filter-shadow: 0 1px 3px rgba(20, 32, 51, .04);--table-row-shadow: 0 4px 12px rgba(20, 32, 51, .04);--table-transition: var(--transition-control);--gateway-action-border: color-mix(in srgb, var(--accent-brand) 20%, transparent);--gateway-action-hover: color-mix(in srgb, var(--accent-brand) 88%, var(--text-primary));--gateway-action-hover-text: #1e40af;--gateway-focus-border: color-mix(in srgb, var(--accent-brand) 35%, var(--border-default));--gateway-danger-border: color-mix(in srgb, var(--status-critical) 22%, transparent);--gateway-danger-surface: color-mix(in srgb, var(--status-critical) 10%, var(--surface-card));--gateway-selection-hover: color-mix(in srgb, var(--accent-brand-soft) 60%, var(--surface-soft));--gateway-row-hover: color-mix(in srgb, var(--accent-brand-soft) 32%, transparent);--gateway-selected-shadow: 0 2px 7px color-mix(in srgb, var(--text-primary) 9%, transparent);--gateway-eyebrow-letter-spacing: .13em;--gateway-preview-letter-spacing: .12em;--gateway-section-gap: var(--space-3);--gateway-inline-gap: var(--space-2);--gateway-panel-padding: var(--space-4);--gateway-panel-radius: var(--radius-panel);--gateway-group-radius: var(--space-panel-compact);--gateway-row-padding: var(--space-row);--gateway-control-height: var(--control-height-sm);--gateway-control-padding: var(--space-2) var(--space-control-inline);--gateway-control-radius: var(--control-radius-sm);--gateway-action-padding-inline: var(--space-panel-compact);--gateway-editor-preview-min-width: 280px;--gateway-editor-preview-max-width: 360px;--gateway-rule-select-width: 130px;--gateway-rule-topic-min-width: 180px;--shell-sidebar-width: 280px;--shell-sidebar-collapsed-width: 88px;--shell-text: rgba(238, 244, 255, .92);--shell-text-muted: #9fb0c9;--shell-surface-hover: rgba(255, 255, 255, .04);--shell-border: rgba(255, 255, 255, .08);--shell-chrome-border: rgba(131, 149, 179, .14);--shell-control-surface: rgba(255, 255, 255, .8);--shell-control-border: rgba(37, 99, 235, .14);--shell-drawer-surface: #0e1c30;--shell-drawer-text: #d8e5f7;--shell-drawer-muted: #90a3bd;--shell-overlay: rgba(15, 27, 45, .44);--shell-muted-copy: color-mix(in srgb, var(--shell-text-muted) 80%, transparent);--shell-muted-detail: color-mix(in srgb, var(--shell-text-muted) 76%, transparent);--shell-scroll-track: color-mix(in srgb, var(--color-on-accent) 3.5%, transparent);--shell-scroll-thumb: color-mix(in srgb, var(--shell-text-muted) 52%, transparent);--shell-scroll-thumb-hover: color-mix(in srgb, var(--shell-text) 78%, transparent);--shell-critical-badge: color-mix(in srgb, var(--status-critical) 90%, transparent);--shell-control-hover: color-mix(in srgb, var(--accent-brand) 14%, transparent);--shell-control-active: color-mix(in srgb, var(--accent-brand) 8%, transparent);--shell-drawer-control-border: color-mix(in srgb, var(--color-on-accent) 14%, transparent);--shell-drawer-control-surface: color-mix(in srgb, var(--color-on-accent) 8%, transparent);--shell-sidebar-background: radial-gradient(circle at top left, rgba(83, 168, 255, .16), transparent 28%), linear-gradient(180deg, #0c1628, #0f1b2d 54%, #13233a);--shell-sidebar-shadow: 24px 0 48px rgba(15, 27, 45, .18);--shell-glyph-background: linear-gradient(145deg, rgba(83, 168, 255, .22), rgba(124, 92, 255, .18));--shell-active-border: rgba(104, 164, 255, .32);--shell-active-background: linear-gradient(135deg, rgba(37, 99, 235, .22), rgba(124, 92, 255, .16));--shell-canvas-background: radial-gradient(circle at top right, rgba(37, 99, 235, .08), transparent 22%), linear-gradient(180deg, #f8fbff, #f3f6fb 48%, #eef3fa);--shell-topbar-background: radial-gradient(circle at top left, rgba(83, 168, 255, .14), transparent 42%), linear-gradient(180deg, #0d1a2e, #101f35 62%, #13233a);--shell-topbar-border: rgba(255, 255, 255, .08);--shell-topbar-text: #e8effc;--shell-topbar-text-muted: #9fb0c9;--shell-topbar-control-surface: rgba(255, 255, 255, .06);--shell-topbar-control-hover: rgba(255, 255, 255, .12);--shell-topbar-control-active: rgba(255, 255, 255, .16);--shell-topbar-control-border: rgba(255, 255, 255, .12);--shell-topbar-shadow: 0 1px 0 rgba(255, 255, 255, .04), 0 10px 24px rgba(15, 27, 45, .2);--shell-mark-background: linear-gradient(180deg, #3d82f6, #2563eb);--shell-mark-secondary: #b9d2fb;--shell-mark-shadow: 0 3px 7px rgba(37, 99, 235, .2);--shell-heading-shadow: 0 1px 0 rgba(255, 255, 255, .8);--shell-profile-shadow: 0 6px 14px rgba(20, 32, 51, .04);--shell-avatar-background: linear-gradient(135deg, #183152, #2c5ca9);--shell-drawer-item-border: rgba(77, 136, 255, .35);--shell-drawer-item-background: rgba(77, 136, 255, .18);--shell-drawer-shadow: 20px 0 50px rgba(15, 27, 45, .28);--shell-control-height: 38px;--shell-topbar-height: 62px;--shell-topbar-height-compact: 56px;--shell-avatar-size: 30px;--shell-badge-size: 22px;--shell-backdrop-filter: blur(14px);--shell-overlay-filter: blur(3px);--shadow-card: 0 10px 24px rgba(20, 32, 51, .08);--font-body: "Noto Sans TC", "PingFang TC", "Microsoft JhengHei", sans-serif;--font-display: "Space Grotesk", "Noto Sans TC", sans-serif;--font-mono: "IBM Plex Mono", "JetBrains Mono", monospace}:root{color:var(--text-primary);background:var(--surface-base);font-family:var(--font-body);font-size:15px;line-height:1.55;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}*{box-sizing:border-box}html{background:var(--surface-base)}body{margin:0;min-width:320px;background:var(--surface-base)}@layer base{button,input,select,textarea{font:inherit}button{appearance:none}button:focus-visible,a:focus-visible{outline:2px solid rgba(37,99,235,.42);outline-offset:2px}}#app{min-height:100dvh}strong,th{font-variation-settings:"tnum" 1;font-feature-settings:"tnum" 1}@layer components{.page-header{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;padding:0 2px}.header-eyebrow{margin:0 0 4px;color:var(--accent-brand);font-size:10px;font-weight:800;letter-spacing:.14em;text-transform:uppercase}.page-header h1{margin:0;color:var(--text-primary);font-size:22px;font-weight:800}.panel{min-width:0;border:1px solid rgba(131,149,179,.18);border-radius:18px;background:#fffffff7;box-shadow:0 8px 20px #1420330f}.panel--card{padding:20px;border-color:var(--border-default);border-radius:16px;background:var(--surface-card);box-shadow:var(--shadow-card)}.panel--overview{min-width:0;border-color:var(--border-default);border-radius:18px;background:var(--surface-card);box-shadow:0 10px 24px #14203314}.panel--kpi{position:relative;min-width:0;padding:20px;border:1px solid var(--border-default);border-radius:16px;background:var(--surface-card);box-shadow:var(--shadow-card);overflow:hidden}.section-heading{display:flex;align-items:center;justify-content:space-between;gap:12px}.page-error{margin:0;padding:12px 16px;border-radius:12px;color:#a5302c;background:#ef5b561a;font-size:13px}.modal-backdrop{position:fixed;z-index:50;inset:0;display:grid;place-items:center;padding:24px;background:#0f1b2d6b;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}.back-button{display:inline-flex;align-items:center;gap:8px;justify-self:start;padding:9px 14px;border:1px solid rgba(37,99,235,.16);border-radius:999px;color:var(--accent-brand);background:linear-gradient(135deg,#f7fafffa,#ecf4ffeb);font:inherit;font-size:12px;font-weight:800;letter-spacing:.02em;cursor:pointer;box-shadow:0 10px 20px #2563eb14}.severity--critical{color:#be3632;background:#ef5b5621}.severity--warning{color:#9a6800;background:#f0b42924}.severity--notice{color:#5d45bc;background:#7c5cff1c}}@layer components{.query-filter-panel{display:grid;gap:20px;min-width:0;padding:22px;border:1px solid var(--border-subtle);border-radius:20px;background:#fffffff5;box-shadow:0 10px 26px #1420330e}.query-filter-panel__heading{display:flex;align-items:flex-start;justify-content:space-between;gap:18px}.query-filter-panel__eyebrow{display:block;color:var(--accent-brand);font-size:10px;font-weight:900;letter-spacing:.15em}.query-filter-panel__heading h2{margin:4px 0 0;color:var(--text-primary);font-size:18px;letter-spacing:-.02em}.query-filter-panel__action{display:inline-flex;align-items:center;justify-content:center;gap:7px;min-height:38px;border:1px solid transparent;border-radius:10px;padding:0 14px;color:#fff;background:var(--accent-brand);font:inherit;font-size:12px;font-weight:800;cursor:pointer;box-shadow:0 6px 12px #2563eb29;transition:transform .16s ease,box-shadow .16s ease,background .16s ease}.query-filter-panel__action:hover:not(:disabled){background:#1d55d0;box-shadow:0 8px 18px #2563eb38;transform:translateY(-1px)}.query-filter-panel__action:disabled{cursor:not-allowed;opacity:.52}.query-filter-panel__range{width:50%;box-sizing:border-box;padding:14px;border:1px dashed var(--border-default);border-radius:12px;background:var(--surface-raised)}.query-filter-panel .control-group{display:grid;gap:8px;min-width:0}.query-filter-panel .control-label{color:var(--text-tertiary);font-size:10px;font-weight:900;letter-spacing:.1em}.query-filter-panel .control-group select{width:100%;height:40px;min-width:0;border:1px solid var(--border-default);border-radius:9px;padding:0 10px;color:var(--text-primary);background:#fff;font:inherit;font-size:12px}.query-filter-panel .segmented-control{display:flex;flex-wrap:wrap;gap:4px;padding:4px;border:1px solid var(--border-subtle);border-radius:11px;background:var(--surface-soft)}.query-filter-panel .segmented-control button{flex:1;min-height:32px;border:0;border-radius:8px;padding:6px 10px;color:var(--text-secondary);background:transparent;font:inherit;font-size:11px;font-weight:800;cursor:pointer;white-space:nowrap;transition:color .16s ease,background-color .16s ease,box-shadow .16s ease}.query-filter-panel .segmented-control button:hover{color:var(--accent-brand)}.query-filter-panel .segmented-control button.active,.query-filter-panel .segmented-control button.is-active{color:var(--accent-brand);background:#fff;box-shadow:0 2px 6px #2563eb1a}.query-filter-panel .compare-toggle{display:flex;align-items:center;gap:9px;min-height:40px;font-size:12px;cursor:pointer}.query-filter-panel .compare-toggle input{position:absolute;opacity:0;pointer-events:none}.query-filter-panel .toggle-track{position:relative;width:36px;height:20px;border-radius:999px;background:#cbd5e1;transition:background .16s ease}.query-filter-panel .toggle-track:after{position:absolute;top:3px;left:3px;width:14px;height:14px;border-radius:50%;background:#fff;content:"";box-shadow:0 1px 3px #1420332e;transition:transform .16s ease}.query-filter-panel .compare-toggle input:checked+.toggle-track{background:var(--accent-brand)}.query-filter-panel .compare-toggle input:checked+.toggle-track:after{transform:translate(16px)}.query-filter-panel .compare-toggle span:last-child{display:grid;gap:1px}.query-filter-panel .compare-toggle strong{color:var(--text-primary);font-size:12px}.query-filter-panel .compare-toggle small{color:var(--text-tertiary);font-size:10px}.query-filter-panel .floor-selector{display:grid;gap:11px;padding-top:2px}.query-filter-panel .floor-selector__heading{display:flex;align-items:flex-start;justify-content:space-between;gap:18px}.query-filter-panel .floor-selector__heading strong{display:block;margin-top:4px;color:var(--text-primary);font-size:12px}.query-filter-panel .inline-actions{display:flex;gap:5px}.query-filter-panel .inline-actions button{border:0;border-radius:7px;padding:5px 8px;color:var(--accent-brand);background:var(--accent-brand-soft);font:inherit;font-size:11px;font-weight:800;cursor:pointer}.query-filter-panel .inline-actions button:disabled{color:var(--text-tertiary);background:var(--surface-soft);opacity:.65;cursor:not-allowed}.query-filter-panel .floor-chips{display:flex;gap:8px;overflow:auto;padding:2px 0 4px}.query-filter-panel .floor-chips button{display:grid;grid-template-columns:auto 1fr;align-items:center;column-gap:7px;min-width:140px;padding:9px 11px;border:1px solid var(--border-default);border-radius:11px;color:var(--text-secondary);background:var(--surface-raised);text-align:left;cursor:pointer}.query-filter-panel .floor-chips button i{grid-row:span 2;width:8px;height:8px;border-radius:50%;background:#bdc7d6}.query-filter-panel .floor-chips button span{overflow:hidden;color:var(--text-primary);font-size:12px;font-weight:800;text-overflow:ellipsis;white-space:nowrap}.query-filter-panel .floor-chips button small{overflow:hidden;color:var(--text-tertiary);font-size:10px;text-overflow:ellipsis;white-space:nowrap}.query-filter-panel .floor-chips button.selected{border-color:#2563eb5c;background:var(--accent-brand-soft)}.query-filter-panel .floor-chips button.selected i{background:var(--accent-brand);box-shadow:0 0 0 4px #2563eb1a}.query-filter-panel .empty-inline{padding:10px;color:var(--text-tertiary);font-size:12px}@media(max-width:720px){.query-filter-panel{padding:18px}.query-filter-panel__heading{align-items:stretch;flex-direction:column;gap:12px}.query-filter-panel__action,.query-filter-panel__range,.query-filter-panel .segmented-control{width:100%}.query-filter-panel .segmented-control button{flex:1;padding-inline:7px}.query-filter-panel .floor-selector__heading{align-items:flex-start;flex-direction:column;gap:10px}}}