:root {
  --blue: #0071e3;
  --blue-hover: #0077ed;
  --blue-light: #e8f0fe;
  --red: #ff3b30;
  --red-light: #fce8e6;
  --green: #34c759;
  --green-light: #e8f8e8;
  --orange: #ff9500;
  --orange-light: #fff0d6;
  --gray-bg: #f2f2f7;
  --gray-card: #ffffff;
  --gray-border: #e6e6ec;
  --gray-text: #86868b;
  --gray-dark: #1d1d1f;
  --radius: 14px;
  --radius-sm: 10px;
  --radius-xs: 8px;
  --radius-control: 7px;   
  --radius-2xs: 6px;       
  --radius-lg: 18px;       
  --radius-pill: 20px;     
  --shadow: 0 2px 14px rgba(0,0,0,0.06);
  --shadow-hover: 0 8px 32px rgba(0,0,0,0.10);
  --shadow-lg: 0 12px 48px rgba(0,0,0,0.15);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
  --font: -apple-system, 'Helvetica Neue', 'PingFang SC', 'Microsoft YaHei', sans-serif;
  --font-mono: 'SF Mono', 'Menlo', 'Monaco', 'Consolas', monospace;
  --color-primary: var(--blue);
  --color-primary-hover: var(--blue-hover);
  --color-primary-light: var(--blue-light);
  --color-danger: var(--red);
  --color-danger-light: var(--red-light);
  --color-success: var(--green);
  --color-success-light: var(--green-light);
  --color-warning: var(--orange);
  --color-warning-light: var(--orange-light);
  --color-surface: #ffffff;
  --color-surface-hover: #f8f8fa;
  --color-surface-active: #eaeaef;
  --color-bg: var(--gray-bg);
  --color-bg-secondary: #f8f8fa;
  --color-border: var(--gray-border);
  --color-border-light: rgba(0,0,0,0.06);
  --color-border-hover: #b0b0b8;
  --color-text-primary: var(--gray-dark);
  --color-text-secondary: var(--gray-text);
  --color-text-tertiary: #6e6e73;
  --color-text-inverse: #ffffff;
  --text-xs: 10px;
  --text-sm: 12px;
  --text-base: 13px;
  --text-md: 14px;
  --text-lg: 15px;
  --text-xl: 17px;
  --text-2xl: 20px;
  --text-3xl: 22px;
  --text-4xl: 26px;
  --text-2xs: 9px;         
  --text-tiny: 11px;       
  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;
  --leading-tight: 1.3;
  --leading-normal: 1.6;
  --leading-relaxed: 1.8;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-1_5: 6px;
  --space-2_5: 10px;
  --space-3_5: 14px;
  --space-4_5: 18px;
  --space-5_5: 22px;
  --space-7: 28px;
  --shadow-xs: 0 1px 3px rgba(0,0,0,0.04);
  --shadow-sm: 0 1px 6px rgba(0,0,0,0.05);
  --shadow-xl: 0 20px 60px rgba(0,0,0,0.18);
  --focus-ring: 0 0 0 4px rgba(0,113,227,0.12);
  --sidebar-width: 280px;
  --header-height: 58px;
  --content-max-width: 1400px;
  --dur-fast: 0.15s;
  --dur-base: 0.2s;
  --dur-enter: 0.3s;
  --ease-enter: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-exit: cubic-bezier(0.4, 0, 1, 1);
  --ease-smooth: cubic-bezier(0.4, 0, 0.2, 1);
  --stagger-step: 40ms;
  --z-drawer: 600;
  --z-modal: 1000;
  --z-toast: 9999;
  --gradient-primary: linear-gradient(135deg, var(--blue), #5ac8fa);
  --gradient-danger: linear-gradient(135deg, var(--red), #ff6b62);
  --gradient-success: linear-gradient(135deg, var(--green), #30d158);
  --gradient-text: linear-gradient(135deg, #1d1d1f, #444);
  --control-h: 34px;        
  --control-h-sm: 30px;     
  --control-h-xs: 28px;     
  --btn-icon: 40px;         
  --btn-icon-sm: 34px;      
  --control-font: 13px;     
}
[data-theme="dark"] {
  --gray-bg: #1c1c1e;
  --gray-card: #2c2c2e;
  --gray-border: #38383a;
  --gray-text: #98989d;
  --gray-dark: #f5f5f7;
  --blue: #0a84ff;
  --blue-hover: #409cff;
  --blue-light: #1a3a5c;
  --red: #ff453a;
  --red-light: #4a1e1c;
  --green: #30d158;
  --green-light: #1a3a24;
  --orange: #ff9f0a;
  --orange-light: #4a3a0a;
  --shadow: 0 2px 14px rgba(0,0,0,0.3);
  --shadow-hover: 0 8px 32px rgba(0,0,0,0.4);
  --shadow-lg: 0 12px 48px rgba(0,0,0,0.5);
  --shadow-xs: 0 1px 3px rgba(0,0,0,0.2);
  --shadow-sm: 0 1px 6px rgba(0,0,0,0.25);
  --shadow-xl: 0 20px 60px rgba(0,0,0,0.5);
  --focus-ring: 0 0 0 4px rgba(10,132,255,0.3);
  --color-primary: var(--blue);
  --color-primary-hover: var(--blue-hover);
  --color-primary-light: var(--blue-light);
  --color-danger: var(--red);
  --color-danger-light: var(--red-light);
  --color-success: var(--green);
  --color-success-light: var(--green-light);
  --color-warning: var(--orange);
  --color-warning-light: var(--orange-light);
  --color-surface: #2c2c2e;
  --color-surface-hover: #3a3a3c;
  --color-surface-active: #48484a;
  --color-bg: #1c1c1e;
  --color-bg-secondary: #2c2c2e;
  --color-border: #38383a;
  --color-border-light: rgba(255,255,255,0.08);
  --color-border-hover: #48484a;
  --color-text-primary: #f5f5f7;
  --color-text-secondary: #98989d;
  --color-text-tertiary: #8e8e93;
  --color-text-inverse: #1c1c1e;
  --gradient-primary: linear-gradient(135deg, var(--blue), #40e0ff);
  --gradient-danger: linear-gradient(135deg, var(--red), #ff6b62);
  --gradient-success: linear-gradient(135deg, var(--green), #30d158);
  --gradient-text: linear-gradient(135deg, #f5f5f7, #98989d);
}
[data-theme="dark"] .chart-overlay {
  background: rgba(44,44,46,0.9);
}
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
body {
  font-family: var(--font); font-size: var(--text-base);
  background: var(--color-bg); color: var(--color-text-primary);
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
  line-height: var(--leading-normal); min-height: 100vh;
  scroll-behavior: smooth;
  transition: background var(--dur-enter) var(--ease-out), color var(--dur-enter) var(--ease-out);
}
@media (min-width: 769px) {
  :root {
    --sidebar-width: 310px;
    --text-2xs: 10px;
    --text-xs: 11px;
    --text-tiny: 12px;
    --text-sm: 13px;
    --text-base: 14px;
    --text-md: 15px;
    --text-lg: 16px;
    --text-xl: 18px;
    --control-font: 14px;
  }
  .comp-sub-header th { font-size: 11px; }
  .comp-unit-col { font-size: 11px; }
}
.header {
  background: rgba(255,255,255,0.88);
  backdrop-filter: blur(24px) saturate(180%);
  -webkit-backdrop-filter: blur(24px) saturate(180%);
  border-bottom: 1px solid var(--color-border-light);
  position: sticky; top: 0; z-index: 100;
  transition: box-shadow var(--dur-enter) var(--ease-out), background var(--dur-enter) var(--ease-out);
}
.header.scrolled { box-shadow: 0 4px 20px rgba(0,0,0,0.08); border-bottom-color: transparent; }
.header-inner { max-width: var(--content-max-width); margin: 0 auto; padding: var(--space-3_5) var(--space-7); display: flex; align-items: center; justify-content: space-between; height: var(--header-height); }
.header h1 { font-size: var(--text-3xl); font-weight: var(--font-weight-bold); letter-spacing: -0.5px; background: var(--gradient-text); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; line-height: 1.2; }
.header h1 span { background: var(--gradient-primary); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; }
.header-brand { display: flex; flex-direction: column; }
.header .subtitle { font-size: var(--text-sm); color: var(--color-text-secondary); font-weight: var(--font-weight-regular); margin-top: 0; line-height: 1.3; }
.auto-update-badge {
  display: flex; align-items: center; gap: 5px;
  font-size: var(--text-xs); color: var(--color-text-tertiary);
  padding: var(--space-1) var(--space-2_5); border-radius: var(--radius-pill);
  background: var(--color-bg-secondary, rgba(0,0,0,0.04));
  white-space: nowrap;
  animation: pulse-badge 3s ease-in-out infinite;
}
@keyframes pulse-badge {
  0%, 100% { opacity: 0.6; }
  50% { opacity: 1; }
}
.main-layout { display: flex; gap: 0; min-height: calc(100vh - var(--header-height)); max-width: 1600px; margin: 0 auto; }
.sidebar { width: var(--sidebar-width); flex-shrink: 0; padding: var(--space-3) 10px 10px; position: sticky; top: var(--header-height); max-height: calc(100vh - var(--header-height)); overflow-y: auto; transition: width var(--dur-enter) var(--ease-out), padding var(--dur-enter) var(--ease-out); scrollbar-width: none; }
.sidebar::-webkit-scrollbar { width: 0; height: 0; }
.sidebar:hover { scrollbar-width: thin; scrollbar-color: rgba(0,0,0,.22) transparent; }
.sidebar:hover::-webkit-scrollbar { width: 4px; }
.sidebar:hover::-webkit-scrollbar-thumb { background: rgba(0,0,0,.22); border-radius: 2px; }
.sidebar:hover::-webkit-scrollbar-track { background: transparent; }
.sidebar.collapsed { width: 52px; padding: var(--space-6) var(--space-1) var(--space-2_5); }
.sidebar.collapsed .sidebar-group { padding: var(--space-1) 0; margin-bottom: 4px; }
.sidebar.collapsed .sidebar-group-title, .sidebar.collapsed .sidebar-item .sb-text, .sidebar.collapsed .sidebar-item .badge, .sidebar.collapsed .sf-row, .sidebar.collapsed .sidebar-group-title::before { display: none; }
.sidebar.collapsed .sidebar-item { justify-content: center; padding: var(--space-2) 0; margin: 1px 0; font-size: 0; }
.sidebar.collapsed .sidebar-item::after { content: ''; display: block; width: 6px; height: 6px; border-radius: 50%; background: var(--color-text-tertiary); transition: background var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out); }
.sidebar.collapsed .sidebar-item:hover::after { background: var(--color-text-primary); transform: scale(1.3); }
.sidebar.collapsed .sidebar-item.active::after { background: var(--color-primary); box-shadow: 0 0 8px rgba(0,113,227,0.4); transform: scale(1.3); }
.sidebar.collapsed .sidebar-item::before { display: none; }
.sidebar-collapse { display: flex; align-items: center; justify-content: center; width: 100%; padding: var(--space-1_5) var(--space-2_5); margin-bottom: 6px; border: none; background: transparent; color: var(--color-text-tertiary); cursor: pointer; font-size: 12px; transition: background var(--dur-base) var(--ease-out), color var(--dur-base) var(--ease-out); border-radius: var(--radius-2xs); }
.sidebar-collapse:hover { color: var(--color-text-primary); background: var(--color-surface-hover); }
.sidebar.collapsed .sidebar-collapse { padding: var(--space-1_5) 0; }
.sidebar-group { margin-bottom: var(--space-1_5); background: var(--color-surface); border-radius: var(--radius-sm); padding: var(--space-1_5) 0; border: 1px solid var(--color-border-light); box-shadow: var(--shadow-xs); transition: background var(--dur-enter) var(--ease-out), border-color var(--dur-enter) var(--ease-out); }
.sidebar-group-title { padding: var(--space-1_5) var(--space-3_5) var(--space-1); font-size: var(--text-xs); font-weight: var(--font-weight-bold); color: var(--color-text-secondary); letter-spacing: 0.6px; display: flex; align-items: center; gap: 5px; text-transform: uppercase; }
.sidebar-group-title::before { content: ''; display: inline-block; width: 5px; height: 5px; border-radius: 50%; flex-shrink: 0; }
.sidebar-group:first-child .sidebar-group-title::before { background: var(--color-primary); }
.sidebar-group:last-child .sidebar-group-title::before { background: var(--color-danger); }
.sidebar-item { padding: 6px var(--space-2_5); font-size: var(--text-sm); font-weight: var(--font-weight-medium); cursor: pointer; color: var(--color-text-secondary); transition: background var(--dur-base) var(--ease-out), color var(--dur-base) var(--ease-out); display: flex; align-items: center; gap: var(--space-1); -webkit-tap-highlight-color: transparent; user-select: none; border-radius: var(--radius-2xs); margin: 1px var(--space-1); outline: none; position: relative; }
.sidebar-item .sb-text { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: flex; align-items: center; gap: var(--space-1); flex: 1; }
.sidebar-item .icon { width: 14px; height: 14px; flex-shrink: 0; }
.sidebar-item::before { content: ''; position: absolute; left: -6px; top: 50%; transform: translateY(-50%) scaleY(0); width: 3px; height: 60%; border-radius: 0 3px 3px 0; background: var(--color-primary); transition: transform var(--dur-base) var(--ease-spring); z-index: 1; }
.sidebar-item:hover { color: var(--color-text-primary); background: var(--color-surface-hover); }
.sidebar-item.active { color: #fff; background: var(--gradient-primary); font-weight: var(--font-weight-semibold); box-shadow: 0 2px 8px rgba(0,113,227,0.25); }
.sidebar-item.active::before { transform: translateY(-50%) scaleY(1); }
.sidebar-item.active:hover { background: linear-gradient(135deg, var(--blue-hover), #5ac8fa); box-shadow: 0 4px 14px rgba(0,113,227,0.35); }
.sidebar-item .badge { display: inline-block; padding: 1px 7px; border-radius: var(--radius-xs); font-size: var(--text-2xs); font-weight: var(--font-weight-semibold); margin-left: 4px; flex-shrink: 0; }
.sidebar-item .badge.daily { background: var(--blue-light); color: var(--blue); }
.sidebar-item .badge.real { background: var(--red-light); color: var(--red); }
.sidebar-item.active .badge.daily, .sidebar-item.active .badge.real { background: rgba(255,255,255,0.2); color: #fff; }
.sidebar-item .badge.region { background: var(--color-success-light); color: var(--color-success); }
.sidebar-item.active .badge.region { background: rgba(255,255,255,0.2); color: #fff; }
.content-area { flex: 1; min-width: 0; padding: 0; }
.sf-row { font-size: var(--text-xs); color: var(--color-text-secondary); line-height: 2.2; display: flex; align-items: center; gap: var(--space-1_5); padding: 0 var(--space-3_5); }
.sf-row .sf-label { color: var(--color-text-tertiary); min-width: 28px; }
.sf-row .sf-num { font-weight: var(--font-weight-semibold); color: var(--color-text-primary); margin-left: auto; font-variant-numeric: tabular-nums; }
.sf-icon { flex-shrink: 0; color: var(--color-text-tertiary); opacity: 0.6; }
.sidebar-footer { padding: var(--space-2) 0 !important; }
.sidebar-footer .sf-row:first-child { padding-top: 4px; }
.sidebar-footer .sf-row:last-child { padding-bottom: 4px; }
.container { max-width: var(--content-max-width); padding: var(--space-6) var(--space-7); }
.stats-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(155px, 1fr)); gap: var(--space-2); margin-bottom: var(--space-3); }
.stat-card { background: var(--color-surface); border-radius: var(--radius); padding: var(--space-2_5) var(--space-3); box-shadow: var(--shadow); text-align: center; transition: background-color var(--dur-enter) var(--ease-out),color var(--dur-enter) var(--ease-out),border-color var(--dur-enter) var(--ease-out),box-shadow var(--dur-enter) var(--ease-out),transform var(--dur-enter) var(--ease-out),opacity var(--dur-enter) var(--ease-out); border: 1px solid var(--color-border-light); position: relative; overflow: hidden; }
.stat-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: linear-gradient(90deg, transparent, var(--color-primary), transparent); opacity: 0; transition: opacity var(--dur-enter) var(--ease-out); }
.stat-card:hover::before { opacity: 1; }
.stat-card:hover { box-shadow: var(--shadow-hover); transform: translateY(-4px) scale(1.02); }
.stat-card .num { font-size: var(--text-xl); font-weight: var(--font-weight-bold); color: var(--color-text-primary); letter-spacing: -0.3px; transition: color var(--dur-enter); font-variant-numeric: tabular-nums; animation: numberPop var(--dur-enter) var(--ease-spring); }
.stat-card.loading .num { animation: pulse 1.5s var(--ease-in-out) infinite; color: var(--color-border); }
.stat-card .label { font-size: var(--text-xs); color: var(--color-text-secondary); margin-top: 2px; font-weight: var(--font-weight-medium); letter-spacing: 0.3px; }
.compare-delta { font-size: var(--text-xs); margin-top: 1px; min-height: 16px; line-height: 1.3; }
.stat-card.daily { background: linear-gradient(135deg, var(--color-surface), color-mix(in srgb, var(--blue-light) 60%, var(--color-surface))); border-left: 3px solid var(--color-primary); }
.stat-card.daily .num { color: var(--color-primary); }
.stat-card.real { background: linear-gradient(135deg, var(--color-surface), color-mix(in srgb, var(--red-light) 60%, var(--color-surface))); border-left: 3px solid var(--color-danger); }
.stat-card.real .num { color: var(--color-danger); }
.ch-cards { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-2); margin-bottom: var(--space-4); }
.ch-card { background: var(--color-surface); border: 1px solid var(--color-border-light); border-radius: var(--radius); padding: var(--space-3) var(--space-3_5); box-shadow: var(--shadow); }
.ch-card .ch-card-value { font-size: var(--text-2xl); font-weight: var(--font-weight-bold); color: var(--color-text-primary); letter-spacing: -0.3px; font-variant-numeric: tabular-nums; line-height: 1.2; }
.ch-card .ch-card-value small { font-size: var(--text-sm); font-weight: var(--font-weight-medium); color: var(--color-text-secondary); margin-left: 2px; }
.ch-card .ch-card-label { font-size: var(--text-xs); color: var(--color-text-secondary); margin-top: 2px; font-weight: var(--font-weight-medium); }
.ch-card .ch-card-extra { font-size: var(--text-xs); color: var(--color-text-tertiary); margin-top: 1px; }
.query-panel { background: var(--color-surface); border-radius: var(--radius); box-shadow: var(--shadow); margin-bottom: var(--space-5); border: 1px solid var(--color-border-light); overflow: visible; transition: box-shadow var(--dur-enter) var(--ease-out); }
.query-panel:hover { box-shadow: var(--shadow-hover); }
.query-panel .panel-header { padding: var(--space-4) var(--space-6); border-bottom: 1px solid var(--color-border-light); display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: var(--space-2_5); }
.query-panel .panel-header h2 { font-size: var(--text-lg); font-weight: var(--font-weight-semibold); color: var(--color-text-primary); }
.query-panel .panel-body { padding: var(--space-4_5) var(--space-6); }
.query-row { display: flex; gap: var(--space-3); flex-wrap: wrap; align-items: center; }
.query-row .input-wrap { flex: 1; min-width: 220px; position: relative; }
.query-row .input-wrap input { width: 100%; min-height: var(--control-h); padding: 0 var(--space-2_5); border: 1px solid var(--color-border); border-radius: var(--radius-control); font-size: var(--control-font); outline: none; transition: background-color var(--dur-base) var(--ease-out),color var(--dur-base) var(--ease-out),border-color var(--dur-base) var(--ease-out),box-shadow var(--dur-base) var(--ease-out),transform var(--dur-base) var(--ease-out),opacity var(--dur-base) var(--ease-out); background: var(--color-bg); color: var(--color-text-primary); box-sizing: border-box; }
.query-row .input-wrap input:focus { border-color: var(--color-primary); box-shadow: var(--focus-ring); background: var(--color-surface); }
.query-row .input-wrap .dropdown, .compare-dropdown { position: absolute; top: calc(100% + 4px); left: 0; right: 0; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-control); max-height: 320px; overflow-y: auto; z-index: 9999; display: none; box-shadow: var(--shadow-lg); transform-origin: top; animation: slideDown var(--dur-base) var(--ease-out); }
.compare-input-container { display: flex; align-items: center; gap: var(--space-1_5); padding: var(--space-1_5) var(--space-2_5); border: 1px solid var(--color-border); border-radius: var(--radius-control); background: var(--color-bg); transition: background-color var(--dur-base) var(--ease-out),color var(--dur-base) var(--ease-out),border-color var(--dur-base) var(--ease-out),box-shadow var(--dur-base) var(--ease-out),transform var(--dur-base) var(--ease-out),opacity var(--dur-base) var(--ease-out); cursor: text; flex-wrap: wrap; }
.compare-input-container:focus-within { border-color: var(--color-primary); box-shadow: var(--focus-ring); background: var(--color-surface); }
.compare-input-container .search-icon { flex-shrink: 0; color: var(--color-text-secondary); }
.compare-input-container #compareInput { flex: 1; border: none; outline: none; background: transparent; font-size: var(--text-base); min-width: 100px; padding: 2px 0; color: var(--color-text-primary); }
.compare-input-container #compareInput::placeholder { color: var(--color-text-tertiary); }
.compare-tag { display: inline-flex; align-items: center; gap: var(--space-1); padding: 3px var(--space-2) 3px var(--space-2_5); background: var(--color-primary-light); color: var(--color-primary); border-radius: var(--radius-2xs); font-size: var(--text-sm); font-weight: var(--font-weight-medium); white-space: nowrap; animation: tagIn var(--dur-base) var(--ease-out); }
.compare-tag .tag-remove { display: inline-flex; align-items: center; justify-content: center; width: 16px; height: 16px; border: none; background: transparent; color: var(--color-primary); cursor: pointer; border-radius: 50%; font-size: var(--text-md); line-height: 1; padding: 0; transition: background-color var(--dur-base) var(--ease-out),color var(--dur-base) var(--ease-out),border-color var(--dur-base) var(--ease-out),box-shadow var(--dur-base) var(--ease-out),transform var(--dur-base) var(--ease-out),opacity var(--dur-base) var(--ease-out); }
.compare-tag .tag-remove:hover { background: var(--color-primary); color: var(--color-text-inverse); }
.compare-dropdown .item, .query-row .input-wrap .dropdown .item { padding: var(--space-2_5) var(--space-4_5); cursor: pointer; font-size: var(--text-base); border-bottom: 1px solid var(--color-border-light); transition: background var(--dur-fast) var(--ease-out); color: var(--color-text-primary); }
.compare-dropdown .item:last-child, .query-row .input-wrap .dropdown .item:last-child { border-bottom: none; }
.compare-dropdown .item:hover, .query-row .input-wrap .dropdown .item:hover { background: var(--color-primary-light); }
.query-row .input-wrap .dropdown .item.selected { background: var(--color-primary); color: #fff; }
.compare-select { min-height: var(--control-h); padding: 0 var(--space-2_5); border: 1px solid var(--color-border); border-radius: var(--radius-control); font-size: var(--control-font); font-weight: var(--font-weight-medium); background: var(--color-surface); color: var(--color-text-primary); outline: none; cursor: pointer; transition: background-color var(--dur-base) var(--ease-out),color var(--dur-base) var(--ease-out),border-color var(--dur-base) var(--ease-out),box-shadow var(--dur-base) var(--ease-out),transform var(--dur-base) var(--ease-out),opacity var(--dur-base) var(--ease-out); box-sizing: border-box; }
.compare-select:focus { border-color: var(--color-primary); box-shadow: var(--focus-ring); }
.cmp-node-label { font-size: var(--control-font); font-weight: var(--font-weight-medium); color: var(--color-text-primary); border: none; background: transparent; padding: 0; }
.btn { padding: 11px var(--space-5_5); border: none; border-radius: var(--radius-sm); font-size: var(--text-base); font-weight: var(--font-weight-medium); cursor: pointer; transition: background-color var(--dur-base) var(--ease-out),color var(--dur-base) var(--ease-out),border-color var(--dur-base) var(--ease-out),box-shadow var(--dur-base) var(--ease-out),transform var(--dur-base) var(--ease-out),opacity var(--dur-base) var(--ease-out); white-space: nowrap; display: inline-flex; align-items: center; gap: 7px; letter-spacing: 0.2px; -webkit-tap-highlight-color: transparent; user-select: none; position: relative; overflow: hidden; }
.btn::after { content: ''; position: absolute; inset: 0; background: rgba(255,255,255,0.15); opacity: 0; transition: opacity var(--dur-enter); }
.btn:active::after { opacity: 1; }
.btn:focus-visible { box-shadow: var(--focus-ring); }
.btn-primary { background: var(--color-primary); color: var(--color-text-inverse); }
.btn-primary:hover { background: var(--color-primary-hover); transform: translateY(-1px); box-shadow: 0 4px 14px rgba(0,113,227,0.3); }
.btn-primary:active { transform: translateY(0); box-shadow: 0 2px 8px rgba(0,113,227,0.2); }
.btn-secondary { background: var(--color-bg); color: var(--color-text-primary); border: 1px solid var(--color-border); }
.btn-secondary:hover { background: var(--color-surface-hover); border-color: var(--color-border-hover); }
.btn-sm { min-height: var(--control-h); padding: 0 var(--space-3); font-size: var(--text-sm); border-radius: var(--radius-control); }
.page-btn { padding: var(--space-1_5) var(--space-3_5); font-size: var(--text-sm); border-radius: var(--radius-xs); border: 1px solid var(--color-border); background: var(--color-surface); color: var(--color-text-primary); cursor: pointer; transition: background-color var(--dur-base) var(--ease-out),color var(--dur-base) var(--ease-out),border-color var(--dur-base) var(--ease-out),box-shadow var(--dur-base) var(--ease-out),transform var(--dur-base) var(--ease-out),opacity var(--dur-base) var(--ease-out); }
.page-btn:hover:not(:disabled) { background: var(--color-primary); color: #fff; border-color: var(--color-primary); }
.page-btn:disabled { opacity: 0.35; cursor: default; }
.page-info { font-size: var(--text-sm); color: var(--color-text-secondary); padding: 0 var(--space-1); font-weight: var(--font-weight-medium); letter-spacing: 0.2px; }
.result-section { background: var(--color-surface); border-radius: var(--radius); box-shadow: var(--shadow); margin-bottom: var(--space-5); overflow: hidden; border: 1px solid var(--color-border-light); animation: fadeIn var(--dur-enter) var(--ease-out); transition: background var(--dur-enter) var(--ease-out); }
.result-header { padding: var(--space-4) var(--space-6); border-bottom: 1px solid var(--color-border-light); display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: var(--space-2_5); }
.result-header h2 { font-size: var(--text-xl); font-weight: var(--font-weight-semibold); color: var(--color-text-primary); }
.result-header .info { font-size: var(--text-sm); color: var(--color-text-secondary); }
.result-body { padding: var(--space-5) var(--space-6); }
.result-section-scroll .result-body { display: grid; grid-template-columns: 220px 1fr; padding: 0; }
.result-section-scroll .node-panel { overflow: hidden; }
.result-section-scroll .np-list { max-height: none; flex: 1; min-height: 0; }
.state-loading, .state-error, .state-empty { text-align: center; padding: 40px var(--space-5); color: var(--color-text-secondary); }
.state-loading { display: flex; flex-direction: column; align-items: center; gap: var(--space-3); }
.state-loading .loading-text { font-size: var(--text-sm); color: var(--color-text-tertiary); animation: pulse 2s var(--ease-in-out) infinite; }
.state-empty { padding: 60px var(--space-5); }
.state-empty .empty-icon { font-size: 36px; margin-bottom: var(--space-3); opacity: 0.3; }
.state-empty .empty-text { font-size: var(--text-base); color: var(--color-text-tertiary); }
.spinner { width: var(--control-h-xs); height: var(--control-h-xs); border: 3px solid var(--color-border); border-top-color: var(--color-primary); border-radius: 50%; animation: spin 0.8s linear infinite; }
.state-error p { color: var(--color-danger); margin-bottom: var(--space-3); }
.chart-overlay { position: absolute; top: 0; left: 0; right: 0; bottom: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; background: rgba(255,255,255,0.85); backdrop-filter: blur(4px); z-index: 5; border-radius: var(--radius); color: var(--color-text-secondary); font-size: var(--text-base); gap: var(--space-2); }
.region-header { padding: var(--space-2_5) var(--space-3) var(--space-1); font-size: var(--text-xs); font-weight: var(--font-weight-bold); color: var(--color-text-secondary); letter-spacing: 0.5px; text-transform: uppercase; border-top: 1px solid var(--color-border-light); }
.region-header:first-child { border-top: none; }
.chart-container { position: relative; height: 380px; margin-bottom: 6px; background: var(--color-surface); border-radius: var(--radius-sm); border: 1px solid var(--color-border-light); padding: var(--space-1); min-width: 0; }
.chart-container-tall { position: relative; height: 400px; margin-bottom: var(--space-3); background: var(--color-surface); border-radius: var(--radius-sm); border: 1px solid var(--color-border-light); padding: var(--space-1); min-width: 0; }
.table-wrap { overflow-x: auto; }
.table-scroll { max-height: 500px; overflow-y: auto; overflow-x: auto; border: 1px solid var(--color-border); border-radius: var(--radius-control); }
.table-scroll thead th { position: sticky; top: 0; z-index: 2; background: var(--color-bg); }
table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: var(--text-base); }
table th { background: var(--color-bg); padding: var(--space-3) var(--space-4); text-align: left; border-bottom: 1px solid var(--color-border); font-weight: var(--font-weight-semibold); font-size: var(--text-sm); color: var(--color-text-secondary); white-space: nowrap; letter-spacing: 0.3px; }
table th.num, table th.col-price { text-align: right; }
table th.col-type { width: 80px; }
table th.col-action { width: 80px; text-align: center; }
table td { padding: var(--space-3) var(--space-4); border-bottom: 1px solid var(--color-border-light); color: var(--color-text-primary); transition: background var(--dur-base); }
table td.num, table td.col-price { text-align: right; font-variant-numeric: tabular-nums; font-weight: var(--font-weight-medium); letter-spacing: -0.2px; }
table td.col-date { white-space: nowrap; font-weight: var(--font-weight-medium); }
/* 明细表日期列冻结：横向滚动时首列固定（节点电价 .table-scroll / 负荷与出清 .ch-table-wrap 共用）；
   clearing 逐时明细已有 .ch-hourly-table 专用规则（特异性更高优先），此泛化覆盖其余明细表 */
.table-scroll table th.col-date, .table-scroll table td.col-date,
.ch-table-wrap table th.col-date, .ch-table-wrap table td.col-date {
  position: sticky; left: 0; z-index: 1; background: var(--color-bg);
  box-shadow: inset -1px 0 0 var(--color-border-light);
}
.table-scroll table thead th.col-date, .ch-table-wrap table thead th.col-date { z-index: 3; }
table td.col-action { text-align: center; }
table td.col-price.min { color: var(--color-success); }
table td.col-price.max { color: var(--color-danger); }
table tr { transition: background var(--dur-fast) var(--ease-out); }
.clearing-table td { white-space: nowrap; }
.clearing-table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: var(--text-sm); }
.clearing-table thead tr:first-child th { background: var(--color-bg); font-size: var(--text-xs); text-align: center; }
table tr:nth-child(even) td { background: rgba(0,0,0,0.015); }
table tr:hover td { background: color-mix(in srgb, var(--color-primary-light) 60%, transparent); }
table tr:last-child td { border-bottom: none; }
.disclosure-section .result-body { padding: var(--space-3) var(--space-6) var(--space-6); }
.disclosure-section .result-header { padding: var(--space-2_5) var(--space-6); }
#clearingSection .result-body { padding-top: var(--space-3); }
.disc-chart-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-3); margin-bottom: 0; }
.disc-chart-grid > div { min-width: 0; }
.disc-chart-grid .disc-chart-cell { background: var(--gray-bg); border-radius: var(--radius-sm); padding: var(--space-2_5); border: 1px solid var(--color-border-light); transition: box-shadow var(--dur-base) var(--ease-out); }
.disc-chart-grid .disc-chart-cell:hover { box-shadow: var(--shadow-hover); }
.disc-chart-grid .disc-chart-cell .disc-chart-title { font-size: var(--text-base); font-weight: var(--font-weight-semibold); color: var(--color-text-primary); display: flex; justify-content: space-between; align-items: center; margin-bottom: 2px; }
.disc-chart-grid .disc-chart-cell .disc-chart-title .dot { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 6px; flex-shrink: 0; }
.disc-chart-grid .disc-chart-cell .disc-chart-title .title-name { display: flex; align-items: center; }
.disc-chart-grid .disc-chart-cell .disc-chart-title .title-stats { font-size: var(--text-xs); font-weight: var(--font-weight-regular); color: var(--color-text-secondary); }
.disc-chart-grid .disc-chart-cell .disc-chart-subtitle { font-size: var(--text-xs); color: var(--color-text-tertiary); margin-bottom: 3px; }
.disc-chart-grid .disc-chart-cell .chart-container { height: 170px; position: relative; background: var(--color-surface); border-radius: var(--radius-xs); border: 1px solid var(--color-border-light); padding: 3px; margin-bottom: 0; }
@media (max-width: 640px) {
  .disc-chart-grid { grid-template-columns: 1fr; }
  .disc-chart-grid .disc-chart-cell .chart-container { height: 180px; }
}
.tag { display: inline-block; padding: 3px var(--space-2_5); border-radius: var(--radius-2xs); font-size: var(--text-xs); font-weight: var(--font-weight-semibold); letter-spacing: 0.2px; }
.tag-daily { background: var(--blue-light); color: var(--blue); }
.tag-real { background: var(--red-light); color: var(--red); }
.comp-table-wrap { overflow-x: auto; border: 1px solid var(--color-border); border-radius: var(--radius-control); margin-top: var(--space-4); }
.comp-table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: var(--text-sm); min-width: 920px; }
.comp-table thead th { position: sticky; top: 0; z-index: 2; }
.comp-table th, .comp-table td { padding: var(--space-2_5) var(--space-3_5); text-align: center; border-bottom: 1px solid var(--color-border-light); white-space: nowrap; }
.comp-table tbody tr:last-child td { border-bottom: none; }
.comp-table tbody tr:hover td { background: color-mix(in srgb, var(--color-primary-light) 40%, transparent); }
.comp-table tbody tr:nth-child(even) td { background: rgba(0,0,0,0.015); }
.comp-table tbody tr:nth-child(even):hover td { background: color-mix(in srgb, var(--color-primary-light) 40%, transparent); }
.cmp-grid { grid-template-columns: repeat(2, 1fr); gap: var(--space-4); }
.cmp-grid .disc-chart-cell .chart-container { height: 240px; margin-bottom: 0; }
.cmp-grid .disc-chart-subtitle { margin-bottom: var(--space-2); }
.cmp-grid .disc-chart-subtitle b { color: var(--color-text-primary); font-weight: var(--font-weight-semibold); }
.cmp-grid .disc-chart-subtitle .cmp-sub-num { color: var(--color-text-tertiary); }
.cmp-sub-up { color: #d32f2f; }
.cmp-sub-down { color: #2e7d32; }
.cmp-grid .disc-chart-cell .disc-chart-title { min-height: 24px; }
.cmp-grid .disc-chart-cell .disc-chart-title .title-stats,
.cmp-grid .disc-chart-cell .disc-chart-title .cmp-node-label { line-height: 24px; }
.cmp-grid .disc-chart-cell .disc-chart-title .compare-select {
  min-height: auto; height: 24px; padding: 0 var(--space-5) 0 8px;
}
.cmp-empty{padding:var(--space-6);text-align:center;color:var(--color-text-tertiary);font-size:var(--text-sm);}
.comp-header-group th { padding: var(--space-2_5) var(--space-3_5); font-size: var(--text-xs); font-weight: var(--font-weight-bold); letter-spacing: 0.5px; text-transform: uppercase; }
.comp-sub-header th { font-size: 10px; font-weight: var(--font-weight-semibold); color: var(--color-text-tertiary); padding: var(--space-1_5) var(--space-3_5); border-bottom: 1px solid var(--color-border); }
.comp-group-col.ours { color: var(--color-text-primary); font-weight: var(--font-weight-bold); }
.comp-group-col.theirs { color: var(--color-text-primary); font-weight: var(--font-weight-bold); }
.comp-group-col.diff { color: var(--color-text-primary); font-weight: var(--font-weight-bold); }
.comp-item-col { text-align: left !important; vertical-align: middle; font-weight: var(--font-weight-medium); width: 110px; max-width: 110px; }
.comp-val-col { text-align: center !important; vertical-align: middle; font-variant-numeric: tabular-nums; letter-spacing: -0.2px; min-width: 80px; }
.comp-unit-col { text-align: center !important; color: var(--color-text-tertiary); font-size: 10px; min-width: 40px; }
.comp-diff-col { text-align: center !important; vertical-align: middle; font-variant-numeric: tabular-nums; font-weight: var(--font-weight-semibold); min-width: 80px; }
.comp-pct-col { text-align: center !important; vertical-align: middle; color: var(--color-text-secondary); min-width: 60px; }
.comp-table th.comp-group-start,
.comp-table td.comp-group-start,
.clearing-table th.clearing-group-start,
.clearing-table td.clearing-group-start {
  position: relative;
}
.comp-table th.comp-group-start::before,
.comp-table td.comp-group-start::before,
.clearing-table th.clearing-group-start::before,
.clearing-table td.clearing-group-start::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 1px;
  background: var(--color-border);
  pointer-events: none;
}
.comp-table th.comp-pct-col,
.comp-table td.comp-pct-col,
.clearing-table th:last-child,
.clearing-table td:last-child {
  position: relative;
}
.comp-table th.comp-pct-col::after,
.comp-table td.comp-pct-col::after,
.clearing-table th:last-child::after,
.clearing-table td:last-child::after {
  content: '';
  position: absolute;
  right: 0;
  top: 0;
  bottom: 0;
  width: 1px;
  background: var(--color-border);
  pointer-events: none;
}
.comp-section-divider td { text-align: center !important; font-size: var(--text-xs); color: var(--color-text-tertiary); font-weight: var(--font-weight-semibold); letter-spacing: 1px; padding: var(--space-2) var(--space-3_5); background: var(--color-bg) !important; border-top: 1px solid var(--color-border); }
.price-up { color: var(--color-danger); font-weight: var(--font-weight-semibold); }
.price-down { color: var(--color-success); font-weight: var(--font-weight-semibold); }
.detail-btn { padding: var(--space-1) var(--space-2_5); font-size: var(--text-md); border: 1px solid var(--color-border); background: var(--color-surface); border-radius: var(--radius-2xs); cursor: pointer; transition: background-color var(--dur-base) var(--ease-out),color var(--dur-base) var(--ease-out),border-color var(--dur-base) var(--ease-out),box-shadow var(--dur-base) var(--ease-out),transform var(--dur-base) var(--ease-out),opacity var(--dur-base) var(--ease-out); line-height: 1; color: var(--color-text-primary); display: inline-flex; align-items: center; justify-content: center; }
.detail-btn:hover { background: var(--color-primary-light); border-color: var(--color-primary); color: var(--color-primary); box-shadow: 0 4px 12px rgba(0,113,227,0.2); }
.detail-btn svg { width: 14px; height: 14px; }
.detail-btn-text { display: none; }
.result-section table:not(.clearing-table):not(.comp-table) th,
.result-section table:not(.clearing-table):not(.comp-table) td { vertical-align: middle; }
.result-section table:not(.clearing-table):not(.comp-table) th:first-child,
.result-section table:not(.clearing-table):not(.comp-table) td:first-child { text-align: left; }
.result-section table:not(.clearing-table):not(.comp-table) th:not(:first-child),
.result-section table:not(.clearing-table):not(.comp-table) td:not(:first-child) { text-align: center; }
.clearing-table th,
.clearing-table td { vertical-align: middle; }
.clearing-table th.clearing-item-col,
.clearing-table td.clearing-item-col { text-align: left; }
.clearing-table th:not(.clearing-item-col),
.clearing-table td:not(.clearing-item-col) { text-align: center; }
.comp-table th,
.comp-table td { vertical-align: middle; }
.toast { position: fixed; top: var(--space-5); right: var(--space-5); padding: var(--space-3_5) var(--space-6); border-radius: var(--radius); color: #fff; font-size: var(--text-md); font-weight: var(--font-weight-medium); z-index: 9999; display: none; animation: toastIn var(--dur-enter) var(--ease-spring); box-shadow: var(--shadow-hover); backdrop-filter: blur(12px); max-width: 400px; }
.toast.success { background: rgba(52,199,89,0.94); }
.toast.error { background: rgba(255,59,48,0.94); }
.toast.warning { background: rgba(255,149,0,0.94); }
.toast.info { background: rgba(0,113,227,0.94); }
.toast.hide { animation: toastOut var(--dur-enter) var(--ease-in-out) forwards; }
.modal-overlay { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0,0,0,0); z-index: 1000; display: flex; align-items: center; justify-content: center; padding: var(--space-5); visibility: hidden; opacity: 0; transition: opacity var(--dur-enter), visibility var(--dur-enter); -webkit-tap-highlight-color: transparent; }
.modal-overlay.active { visibility: visible; opacity: 1; background: rgba(0,0,0,0.45); }
.modal { background: var(--color-surface); border-radius: 18px; width: 100%; max-width: 960px; max-height: calc(100vh - 40px); overflow-y: auto; box-shadow: var(--shadow-xl); transform: scale(0.92) translateY(20px); opacity: 0; transition: transform var(--dur-enter) var(--ease-spring), opacity var(--dur-enter) var(--ease-out); will-change: transform, opacity; }
.modal-overlay.active .modal { transform: scale(1) translateY(0); opacity: 1; }
.modal-header { padding: var(--space-4_5) var(--space-6); border-bottom: 1px solid var(--color-border-light); display: flex; align-items: center; justify-content: space-between; position: sticky; top: 0; background: var(--color-surface); z-index: 1; }
.modal-header h3 { font-size: var(--text-xl); font-weight: var(--font-weight-semibold); color: var(--color-text-primary); }
.modal-close { width: var(--control-h); height: var(--control-h); border: none; background: var(--color-bg); border-radius: 50%; cursor: pointer; font-size: var(--text-lg); display: flex; align-items: center; justify-content: center; transition: background-color var(--dur-base) var(--ease-out),color var(--dur-base) var(--ease-out),border-color var(--dur-base) var(--ease-out),box-shadow var(--dur-base) var(--ease-out),transform var(--dur-base) var(--ease-out),opacity var(--dur-base) var(--ease-out); color: var(--color-text-secondary); line-height: 1; }
.modal-close:hover { background: var(--color-border); color: var(--color-text-primary); transform: scale(1.12) rotate(90deg); }
.modal-close:active { transform: scale(0.92); }
.modal-body { padding: var(--space-5) var(--space-6); }
.modal-time-labels { display: flex; justify-content: space-between; font-size: var(--text-xs); color: var(--color-text-tertiary); padding: 0 var(--space-1); }
.price-bars { display: flex; align-items: flex-end; height: 130px; gap: 2px; padding: var(--space-3) 0; contain: layout; }
.price-bar { flex: 1; min-width: 4px; border-radius: 3px 3px 0 0; transition: transform var(--dur-base) var(--ease-out), opacity var(--dur-base) var(--ease-out); cursor: pointer; transform-origin: bottom; }
.price-bar:hover { opacity: 0.8; transform: scaleY(1.12); }
.modal-table { width: 100%; border-collapse: collapse; font-size: var(--text-sm); margin-top: var(--space-3); contain: layout; }
.modal-table th { background: var(--color-bg); padding: var(--space-1_5); text-align: center; font-weight: var(--font-weight-semibold); color: var(--color-text-secondary); font-size: var(--text-xs); white-space: nowrap; }
.modal-table td { padding: var(--space-1) var(--space-1_5); text-align: center; border-bottom: 1px solid var(--color-border-light); white-space: nowrap; font-size: var(--text-tiny); color: var(--color-text-primary); }
::-webkit-scrollbar { width: 6px; height: 8px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(0,0,0,0.12); border-radius: 3px; transition: background var(--dur-base); }
::-webkit-scrollbar-thumb:hover { background: rgba(0,0,0,0.25); }
.date-range { display: flex; align-items: center; gap: var(--space-2); }
.date-icon { flex-shrink: 0; color: var(--color-text-tertiary); }
.date-range input[type="date"] { min-height: var(--control-h); padding: 0 var(--space-2_5); width: 131px; border: 1px solid var(--color-border); border-radius: var(--radius-control); background: var(--color-bg); color: var(--color-text-primary); font-family: var(--font); font-size: var(--control-font); outline: none; box-sizing: border-box; }
.date-range input[type="date"]:focus { border-color: var(--color-primary); box-shadow: var(--focus-ring); background: var(--color-surface); }
.date-sep { color: var(--color-text-tertiary); font-size: var(--text-sm); user-select: none; flex-shrink: 0; }
input[type="date"] { min-height: var(--control-h); padding: 0 var(--space-2_5); border: 1px solid var(--color-border); border-radius: var(--radius-control); font-size: var(--control-font); outline: none; background: var(--color-bg); transition: background-color var(--dur-base) var(--ease-out),color var(--dur-base) var(--ease-out),border-color var(--dur-base) var(--ease-out),box-shadow var(--dur-base) var(--ease-out),transform var(--dur-base) var(--ease-out),opacity var(--dur-base) var(--ease-out); font-family: var(--font); color: var(--color-text-primary); box-sizing: border-box; }
input[type="date"]:focus { border-color: var(--color-primary); box-shadow: var(--focus-ring); background: var(--color-surface); }
input[type="month"] { min-height: var(--control-h); padding: 0 var(--space-2_5); border: 1px solid var(--color-border); border-radius: var(--radius-control); font-size: var(--control-font); outline: none; background: var(--color-bg); transition: background-color var(--dur-base) var(--ease-out),color var(--dur-base) var(--ease-out),border-color var(--dur-base) var(--ease-out),box-shadow var(--dur-base) var(--ease-out),transform var(--dur-base) var(--ease-out),opacity var(--dur-base) var(--ease-out); font-family: var(--font); color: var(--color-text-primary); box-sizing: border-box; }
input[type="month"]:focus { border-color: var(--color-primary); box-shadow: var(--focus-ring); background: var(--color-surface); }
input[type="month"]::-webkit-calendar-picker-indicator { cursor: pointer; opacity: 0.55; }
input[type="month"]::-webkit-calendar-picker-indicator:hover { opacity: 0.85; }
.node-panel { width: 220px; flex-shrink: 0; display: flex; flex-direction: column; border-right: 1px solid var(--color-border); }
.np-search { padding: var(--space-3) var(--space-2_5) var(--space-1_5); flex-shrink: 0; position: relative; }
.np-search input { width: 100%; min-height: var(--control-h); padding: 0 var(--space-7) 0 var(--space-3); border: 1px solid var(--color-border); border-radius: var(--radius-control); font-size: var(--text-sm); outline: none; background: var(--color-bg); transition: background-color var(--dur-base) var(--ease-out),color var(--dur-base) var(--ease-out),border-color var(--dur-base) var(--ease-out),box-shadow var(--dur-base) var(--ease-out),transform var(--dur-base) var(--ease-out),opacity var(--dur-base) var(--ease-out); box-sizing: border-box; color: var(--color-text-primary); }
.np-search input:focus { border-color: var(--color-primary); box-shadow: 0 0 0 3px rgba(0,113,227,0.1); background: var(--color-surface); }
.np-clear { position: absolute; right: 13px; top: 50%; transform: translateY(-50%); border: none; background: none; color: var(--color-text-tertiary); cursor: pointer; padding: 2px; display: none; border-radius: 50%; width: 18px; height: 18px; align-items: center; justify-content: center; transition: background-color var(--dur-fast),color var(--dur-fast),border-color var(--dur-fast),box-shadow var(--dur-fast),transform var(--dur-fast),opacity var(--dur-fast); }
.np-clear:hover { color: var(--color-text-primary); }
.np-highlight { background: rgba(0,113,227,0.12); color: var(--color-primary); font-weight: var(--font-weight-semibold); border-radius: 2px; padding: 0 1px; }
.np-list { flex: 1; overflow-y: auto; padding: var(--space-1) 0; }
.np-item { display: flex; align-items: center; gap: var(--space-1_5); padding: 7px var(--space-3_5); font-size: var(--text-tiny); cursor: pointer; color: var(--color-text-secondary); transition: background-color var(--dur-base) var(--ease-out),color var(--dur-base) var(--ease-out),border-color var(--dur-base) var(--ease-out),box-shadow var(--dur-base) var(--ease-out),transform var(--dur-base) var(--ease-out),opacity var(--dur-base) var(--ease-out); border-left: 3px solid transparent; position: relative; }
.np-item:hover { color: var(--color-text-primary); background: var(--color-surface-hover); border-left-color: var(--color-border); }
.np-item.active { color: var(--color-primary); background: var(--color-primary-light); border-left-color: var(--color-primary); font-weight: var(--font-weight-semibold); }
.np-item .np-dot { width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0; margin-right: 2px; }
.np-item .np-tooltip { display: none; position: absolute; left: 100%; top: 50%; transform: translateY(-50%); margin-left: 8px; background: var(--color-text-primary); color: var(--color-bg); font-size: var(--text-xs); padding: var(--space-1) var(--space-2); border-radius: var(--radius-2xs); white-space: nowrap; z-index: 99; pointer-events: none; box-shadow: 0 4px 12px rgba(0,0,0,0.2); }
.np-item:hover .np-tooltip { display: block; }
.np-item .star-fav { font-size: var(--text-md); cursor: pointer; color: var(--color-text-tertiary); flex-shrink: 0; line-height: 1; transition: transform var(--dur-fast), color var(--dur-fast); user-select: none; }
.np-item .star-fav:hover { transform: scale(1.3); }
.np-item .star-fav.active { color: var(--color-warning); }
.np-item:hover .star-fav { color: var(--color-text-tertiary); }
.np-item:hover .star-fav.active { color: var(--color-warning); }
.np-divider { display: none; }
.np-main { flex: 1; min-width: 0; padding: var(--space-5) var(--space-6); }
.current-node-label { display: flex; align-items: center; gap: var(--space-2); margin-bottom: var(--space-3); font-size: var(--text-sm); color: var(--color-text-secondary); }
.current-node-label .cnl-prefix { flex-shrink: 0; font-weight: var(--font-weight-medium); }
.current-node-label .cnl-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--color-text-primary); font-weight: var(--font-weight-semibold); }
.stats-bar { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-2); margin-bottom: var(--space-4); }
.stats-bar .sb-card { background: var(--color-bg-secondary); border-radius: var(--radius-sm); padding: var(--space-2_5) var(--space-2); text-align: center; border: 1px solid var(--color-border-light); transition: background var(--dur-base) var(--ease-out); }
.stats-bar .sb-card:hover { background: var(--color-surface-hover); }
.stats-bar .sb-card .sb-num { font-size: var(--text-lg); font-weight: var(--font-weight-semibold); color: var(--color-text-primary); letter-spacing: -0.2px; font-variant-numeric: tabular-nums; }
.stats-bar .sb-card .sb-num.max { color: var(--color-danger); }
.stats-bar .sb-card .sb-num.min { color: var(--color-success); }
.stats-bar .sb-card .sb-label { font-size: var(--text-xs); color: var(--color-text-secondary); margin-top: 2px; font-weight: var(--font-weight-medium); }
.quick-dates { display: flex; gap: 3px; }
.quick-dates .qd-btn { padding: 0 var(--space-2_5); min-height: var(--control-h); display: inline-flex; align-items: center; font-size: var(--text-xs); border: 1px solid var(--color-border); border-radius: var(--radius-control); background: var(--color-surface); color: var(--color-text-secondary); cursor: pointer; transition: background-color var(--dur-base) var(--ease-out),color var(--dur-base) var(--ease-out),border-color var(--dur-base) var(--ease-out),box-shadow var(--dur-base) var(--ease-out),transform var(--dur-base) var(--ease-out),opacity var(--dur-base) var(--ease-out); font-weight: var(--font-weight-medium); }
.quick-dates .qd-btn:hover { border-color: var(--color-primary); color: var(--color-primary); background: var(--color-primary-light); }
.quick-dates .qd-btn.active { border-color: var(--color-primary); background: var(--color-primary); color: #fff; box-shadow: 0 2px 6px rgba(0,113,227,0.2); }
.skeleton-table { padding: 0; }
.skeleton-table .skt-row { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-3_5) var(--space-4); border-bottom: 1px solid var(--color-border-light); }
.skeleton-table .skt-row:last-child { border-bottom: none; }
.skeleton-table .skt-cell { height: 14px; border-radius: 4px; background: linear-gradient(90deg, var(--color-bg) 25%, var(--color-surface-hover) 50%, var(--color-bg) 75%); background-size: 200% 100%; animation: shimmer 1.5s infinite; }
.skeleton-table .skt-cell.w-20 { width: 20%; }
.skeleton-table .skt-cell.w-16 { width: 16%; }
.skeleton-table .skt-cell.w-12 { width: 12%; }
.skeleton-table .skt-cell.w-10 { width: 10%; }
.skeleton-table .skt-cell.w-8 { width: 8%; }
.skeleton-chart { position: relative; height: 100%; min-height: 200px; padding: var(--space-5); display: flex; flex-direction: column; justify-content: flex-end; }
.skeleton-chart .skc-grid { position: absolute; left: var(--space-5); right: var(--space-5); top: var(--space-5); bottom: 30px; display: flex; flex-direction: column; justify-content: space-between; }
.skeleton-chart .skc-gridline { height: 1px; background: rgba(0,0,0,0.04); }
.skeleton-chart .skc-line { position: absolute; left: 30px; right: var(--space-5); bottom: 35px; height: 40%; display: flex; align-items: flex-end; gap: 3px; }
.skeleton-chart .skc-bar { flex: 1; min-width: 3px; border-radius: 2px 2px 0 0; background: linear-gradient(180deg, transparent 40%, var(--color-primary-light) 100%); animation: shimmer 2s infinite; }
.skeleton-chart .skc-bar:nth-child(odd) { height: 60%; }
.skeleton-chart .skc-bar:nth-child(even) { height: 85%; }
.skeleton-chart .skc-bar:nth-child(3n) { height: 45%; }
.skeleton-chart .skc-bar:nth-child(5n) { height: 70%; }
.skeleton-chart .skc-bar:nth-child(7n) { height: 90%; }
.skeleton-chart .skc-xlabel { position: absolute; left: 30px; right: var(--space-5); bottom: var(--space-2); display: flex; justify-content: space-between; }
.skeleton-chart .skc-xlabel span { width: 8%; height: 8px; border-radius: 3px; background: linear-gradient(90deg, var(--color-bg) 25%, var(--color-surface-hover) 50%, var(--color-bg) 75%); background-size: 200% 100%; animation: shimmer 1.5s infinite; }
.ov-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-4); margin-bottom: var(--space-6); }
.ov-card { position: relative; display: flex; flex-direction: column; gap: var(--space-1_5); padding: var(--space-4); background: var(--color-surface); border: 1px solid var(--color-border-light); border-radius: var(--radius); box-shadow: var(--shadow); cursor: pointer; overflow: hidden; transition: background-color var(--dur-enter) var(--ease-out),color var(--dur-enter) var(--ease-out),border-color var(--dur-enter) var(--ease-out),box-shadow var(--dur-enter) var(--ease-out),transform var(--dur-enter) var(--ease-out),opacity var(--dur-enter) var(--ease-out); text-align: left; -webkit-tap-highlight-color: transparent; }
.ov-card::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--color-primary); }
.ov-card[data-tone="price"]::before { background: #0071e3; }
.ov-card[data-tone="price-realtime"]::before { background: #d32f2f; }
.ov-card[data-tone="clearing"]::before { background: #ff9500; }
.ov-card[data-tone="disclosure"]::before { background: #34c759; }
.ov-card[data-tone="weather"]::before { background: #5ac8fa; }
.ov-card[data-tone="neutral"]::before { background: #6e6e73; }
.ov-card[data-tone="neutral"] { cursor: default; }
.ov-card:hover { box-shadow: var(--shadow-hover); transform: translateY(-3px); border-color: var(--color-border-hover); }
.ov-card:focus-visible { outline: none; box-shadow: var(--focus-ring), var(--shadow-hover); }
.ov-card-top { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); }
.ov-card-label { font-size: var(--text-md); font-weight: var(--font-weight-semibold); color: var(--color-text-primary); }
.ov-card-metric { font-size: var(--text-xs); color: var(--color-text-secondary); background: var(--color-bg-secondary); padding: 2px var(--space-1_5); border-radius: var(--radius-2xs); white-space: nowrap; flex-shrink: 0; }
.ov-card-value-row { display: flex; align-items: baseline; gap: var(--space-1_5); margin-top: var(--space-1); }
.ov-card-value { font-size: var(--text-3xl); font-weight: var(--font-weight-bold); color: var(--color-text-primary); font-variant-numeric: tabular-nums; letter-spacing: -0.5px; line-height: 1.1; }
.ov-card-unit { font-size: var(--text-sm); color: var(--color-text-secondary); font-weight: var(--font-weight-medium); }
.ov-card-date { font-size: var(--text-xs); color: var(--color-text-tertiary); font-variant-numeric: tabular-nums; }
.ov-card-bottom { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); margin-top: var(--space-1); }
.ov-card-delta { display: inline-flex; align-items: center; gap: 3px; font-size: var(--text-xs); font-weight: var(--font-weight-semibold); font-variant-numeric: tabular-nums; }
.ov-card-delta.up { color: var(--color-danger); }
.ov-card-delta.down { color: var(--color-success); }
.ov-card-delta.flat { color: var(--color-text-tertiary); }
.ov-card-extra { font-size: var(--text-xs); color: var(--color-text-secondary); text-align: right; }
.ov-header { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); margin-bottom: var(--space-4); border-bottom: 1px solid var(--color-border); padding-bottom: var(--space-2); }
.ov-header .section-header-label { color: var(--color-text-primary); border-bottom: none; padding-bottom: 0; margin-bottom: 0; flex: 1; text-align: center; }
.ov-columns { display: flex; flex-direction: column; align-items: stretch; gap: var(--space-5); margin-bottom: var(--space-6); }
.ov-block { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; }
.ov-block-head { display: flex; align-items: center; gap: var(--space-2); margin-bottom: var(--space-3); padding-bottom: var(--space-2); border-bottom: 1px solid var(--color-border-light); }
.ov-block-title { font-size: var(--text-lg); font-weight: var(--font-weight-bold); color: var(--color-text-primary); letter-spacing: 0.5px; }
.ov-block-dot { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; }
.ov-dot-daily { background: #0071e3; }
.ov-dot-realtime { background: #d32f2f; }
.ov-divider { width: auto; height: 1px; align-self: stretch; background: linear-gradient(to right, transparent, var(--color-border) 12%, var(--color-border) 88%, transparent); flex-shrink: 0; }
.ov-block .ov-grid { margin-bottom: 0; }
#homeSection .ov-card { color: var(--color-text-primary); }
#homeSection .ov-card-label,
#homeSection .ov-card-value,
#homeSection .ov-card-metric,
#homeSection .ov-card-unit,
#homeSection .ov-card-date,
#homeSection .ov-card-extra { color: var(--color-text-primary); }
.btn { transition: transform var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out), background-color var(--dur-base) var(--ease-out), color var(--dur-base) var(--ease-out), border-color var(--dur-base) var(--ease-out), opacity var(--dur-base) var(--ease-out); }
.stat-card { transition: transform var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out); }
.ov-card { transition: transform var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out), border-color var(--dur-base) var(--ease-out); }
.quick-dates .qd-btn { transition: color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out), background-color var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out); }
.page-btn, .detail-btn, .modal-close, .compare-tag .tag-remove { transition: background-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out); }
.query-row .input-wrap input, .compare-select, .np-search input, input[type="date"] { transition: border-color var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out), background-color var(--dur-fast) var(--ease-out); }
.compare-input-container, .date-range { transition: border-color var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out), background-color var(--dur-fast) var(--ease-out); }
.np-item { transition: color var(--dur-fast) var(--ease-out), background-color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out); }
.sidebar-item { transition: color var(--dur-fast) var(--ease-out), background-color var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out); }
.query-row .input-wrap .dropdown, .compare-dropdown { z-index: var(--z-drawer); animation: dropIn var(--dur-base) var(--ease-enter); }
#homeSection, #resultSection, #compareSection, #energySection,
#clearingSection, #weatherSection, #clearingHistorySection, #loadingHistorySection, .disclosure-section, .query-panel {
  animation: panelIn var(--dur-enter) var(--ease-enter);
}
.ov-grid > *, .stats-row > * { animation: cardIn var(--dur-enter) var(--ease-enter) backwards; }
.ov-grid > *:nth-child(2), .stats-row > *:nth-child(2) { animation-delay: var(--stagger-step); }
.ov-grid > *:nth-child(3), .stats-row > *:nth-child(3) { animation-delay: calc(var(--stagger-step) * 2); }
.ov-grid > *:nth-child(4), .stats-row > *:nth-child(4) { animation-delay: calc(var(--stagger-step) * 3); }
.ov-grid > *:nth-child(5), .stats-row > *:nth-child(5) { animation-delay: calc(var(--stagger-step) * 4); }
.ov-grid > *:nth-child(6), .stats-row > *:nth-child(6) { animation-delay: calc(var(--stagger-step) * 5); }
.ov-grid > *:nth-child(7), .stats-row > *:nth-child(7) { animation-delay: calc(var(--stagger-step) * 6); }
.ov-grid > *:nth-child(8), .stats-row > *:nth-child(8) { animation-delay: calc(var(--stagger-step) * 7); }
.ov-grid > *:nth-child(n + 9), .stats-row > *:nth-child(n + 9) { animation-delay: calc(var(--stagger-step) * 8); }
.qd-btn:active, .page-btn:active, .detail-btn:active, .modal-close:active,
.compare-tag .tag-remove:active, .np-item:active, .hm-item:active,
.sidebar-item:active:not(.active) { transform: scale(0.96); }
.ov-card:active { transform: translateY(-1px) scale(0.995); }
.qd-btn:focus-visible, .page-btn:focus-visible, .detail-btn:focus-visible,
.modal-close:focus-visible, .compare-tag .tag-remove:focus-visible,
.np-item:focus-visible, .hm-item:focus-visible, .sidebar-item:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
}
.btn:disabled, .btn.is-loading { pointer-events: none; opacity: 0.55; transform: none !important; box-shadow: none !important; cursor: not-allowed; }
.btn.is-loading::before { content: ''; width: 13px; height: 13px; flex-shrink: 0; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: spin 0.7s linear infinite; }
.toast { z-index: var(--z-toast); animation: toastIn var(--dur-enter) var(--ease-spring); }
.toast.hide { animation: toastOut var(--dur-base) var(--ease-exit) forwards; }
.modal-overlay { z-index: var(--z-modal); transition: opacity var(--dur-base) var(--ease-out), visibility var(--dur-base); }
.modal-overlay:not(.active) { transition-duration: var(--dur-fast), var(--dur-fast); }
.modal { transition: transform var(--dur-enter) var(--ease-spring), opacity var(--dur-base) var(--ease-out); }
.modal-overlay:not(.active) .modal { transition-duration: var(--dur-fast), var(--dur-fast); will-change: auto; }
.modal-table tbody tr { animation: fadeIn var(--dur-base) var(--ease-out) backwards; }
.list-empty { padding: var(--space-3); text-align: center; color: var(--color-text-tertiary); font-size: var(--text-sm); }
@keyframes fadeIn {
  from { opacity: 0; transform: translateY(12px) scale(0.98); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes fadeExit {
  from { opacity: 1; transform: translateY(0) scale(1); }
  to { opacity: 0; transform: translateY(-8px) scale(0.97); }
}
@keyframes slideDown { from { opacity: 0; transform: translateY(-10px) scale(0.96); } to { opacity: 1; transform: translateY(0) scale(1); } }
@keyframes tagIn { from { opacity: 0; transform: scale(0.8) rotate(-5deg); } to { opacity: 1; transform: scale(1) rotate(0); } }
@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.5; } }
@keyframes shimmer { 0% { background-position: -200% 0; } 100% { background-position: 200% 0; } }
@keyframes toastIn { from { transform: translateX(120%) scale(0.9); opacity: 0; } to { transform: translateX(0) scale(1); opacity: 1; } }
@keyframes toastOut { from { transform: translateX(0) scale(1); opacity: 1; } to { transform: translateX(120%) scale(0.9); opacity: 0; } }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes numberPop { 0% { transform: scale(0.85); opacity: 0.6; } 50% { transform: scale(1.08); } 100% { transform: scale(1); opacity: 1; } }
@keyframes panelIn {
  from { opacity: 0; transform: translateY(14px); }
  to { opacity: 1; transform: none; }
}
@keyframes cardIn {
  from { opacity: 0; transform: translateY(10px) scale(0.98); }
  to { opacity: 1; transform: none; }
}
@keyframes dropIn {
  from { opacity: 0; transform: translateY(-6px) scale(0.98); }
  to { opacity: 1; transform: none; }
}
.fade-exit { animation: fadeExit var(--dur-base) var(--ease-exit) forwards !important; }
.fade-in { animation: fadeIn var(--dur-enter) var(--ease-enter) forwards; }
.panel-enter { animation: panelIn var(--dur-enter) var(--ease-enter); }
.drop-in { animation: dropIn var(--dur-base) var(--ease-enter); }
.pop { animation: numberPop var(--dur-enter) var(--ease-spring); }
.stagger > * { animation: cardIn var(--dur-enter) var(--ease-enter) backwards; }
.stagger > *:nth-child(2) { animation-delay: var(--stagger-step); }
.stagger > *:nth-child(3) { animation-delay: calc(var(--stagger-step) * 2); }
.stagger > *:nth-child(4) { animation-delay: calc(var(--stagger-step) * 3); }
.stagger > *:nth-child(5) { animation-delay: calc(var(--stagger-step) * 4); }
.stagger > *:nth-child(6) { animation-delay: calc(var(--stagger-step) * 5); }
.stagger > *:nth-child(7) { animation-delay: calc(var(--stagger-step) * 6); }
.stagger > *:nth-child(8) { animation-delay: calc(var(--stagger-step) * 7); }
.stagger > *:nth-child(n + 9) { animation-delay: calc(var(--stagger-step) * 8); }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-delay: 0ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    transition-delay: 0ms !important;
  }
  html { scroll-behavior: auto !important; }
}
.scroll-top { position: fixed; bottom: var(--space-6); right: var(--space-6); width: var(--btn-icon); height: var(--btn-icon); border: none; border-radius: 50%; background: var(--color-surface); color: var(--color-text-secondary); box-shadow: var(--shadow-lg); cursor: pointer; font-size: 18px; display: flex; align-items: center; justify-content: center; z-index: 999; opacity: 0; transform: translateY(12px) scale(0.9); transition: background-color var(--dur-base) var(--ease-smooth),color var(--dur-base) var(--ease-smooth),border-color var(--dur-base) var(--ease-smooth),box-shadow var(--dur-base) var(--ease-smooth),opacity var(--dur-base) var(--ease-smooth),transform var(--dur-enter) var(--ease-spring); pointer-events: none; }
.scroll-top.visible { opacity: 1; transform: translateY(0) scale(1); pointer-events: auto; }
.scroll-top:hover { background: var(--color-primary); color: #fff; box-shadow: 0 4px 16px rgba(0,113,227,0.35); transform: translateY(-2px) scale(1.05); }
.scroll-top:active { transform: translateY(0) scale(0.95); }
.icon { flex-shrink: 0; }
.sidebar-item .icon { width: 16px; height: 16px; opacity: 0.7; transition: opacity var(--dur-base); }
.sidebar-item:hover .icon { opacity: 1; }
.sidebar-item.active .icon { opacity: 1; color: #fff; }
.home-card-icon svg { width: var(--control-h-xs); height: var(--control-h-xs); color: var(--color-primary); opacity: 0.8; }
.header-logo { width: 24px; height: 24px; color: var(--color-text-primary); stroke-width: 2; flex-shrink: 0; }
.flex { display: flex; }
.flex-col { flex-direction: column; }
.flex-center { align-items: center; }
.flex-start { align-items: flex-start; }
.flex-between { justify-content: space-between; }
.flex-stretch { align-items: stretch; }
.flex-wrap { flex-wrap: wrap; }
.flex-shrink-0 { flex-shrink: 0; }
.gap-2 { gap: var(--space-2); }
.gap-3 { gap: var(--space-3); }
.gap-4 { gap: var(--space-4); }
.gap-5 { gap: var(--space-5); }
.gap-6 { gap: var(--space-6); }
.text-xs { font-size: var(--text-xs); }
.text-sm { font-size: var(--text-sm); }
.text-base { font-size: var(--text-base); }
.text-md { font-size: var(--text-md); }
.text-lg { font-size: var(--text-lg); }
.text-xl { font-size: var(--text-xl); }
.text-2xl { font-size: var(--text-2xl); }
.text-secondary { color: var(--color-text-secondary); }
.text-tertiary { color: var(--color-text-tertiary); }
.text-center { text-align: center; }
.fw-normal { font-weight: var(--font-weight-regular); }
.font-medium { font-weight: var(--font-weight-medium); }
.font-semibold { font-weight: var(--font-weight-semibold); }
.font-bold { font-weight: var(--font-weight-bold); }
.p-0 { padding: 0; }
.p-2 { padding: var(--space-2); }
.p-3 { padding: var(--space-3); }
.p-4 { padding: var(--space-4); }
.p-5 { padding: var(--space-5); }
.p-6 { padding: var(--space-6); }
.px-4 { padding-left: var(--space-4); padding-right: var(--space-4); }
.px-6 { padding-left: var(--space-6); padding-right: var(--space-6); }
.py-2 { padding-top: var(--space-2); padding-bottom: var(--space-2); }
.py-3 { padding-top: var(--space-3); padding-bottom: var(--space-3); }
.mb-3 { margin-bottom: var(--space-3); }
.mb-4 { margin-bottom: var(--space-4); }
.mb-5 { margin-bottom: var(--space-5); }
.mt-1 { margin-top: var(--space-1); }
.mt-2 { margin-top: var(--space-2); }
.mt-3 { margin-top: var(--space-3); }
.w-full { width: 100%; }
.relative { position: relative; }
.overflow-x-auto { overflow-x: auto; }
.cursor-pointer { cursor: pointer; }
.user-select-none { user-select: none; }
.truncate { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hidden { display: none; }
.home-card-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: var(--space-3); }
.home-card { cursor: pointer; padding: var(--space-5); border-radius: 10px; border: 1px solid var(--color-border); background: var(--color-surface); transition: box-shadow var(--dur-enter) var(--ease-out), transform var(--dur-enter) var(--ease-out); box-shadow: var(--shadow-xs); }
.home-card:hover { box-shadow: var(--shadow-hover); transform: translateY(-3px); }
.home-card .home-card-icon { font-size: 28px; margin-bottom: var(--space-2); opacity: 0.7; transition: transform var(--dur-enter) var(--ease-spring); }
.home-card:hover .home-card-icon { transform: scale(1.15); }
.home-card .home-card-title { font-weight: var(--font-weight-semibold); font-size: var(--text-md); margin-bottom: var(--space-1); color: var(--color-text-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.home-card .home-card-desc { font-size: var(--text-sm); color: var(--color-text-secondary); }
.placeholder-card { padding: var(--space-4); border-radius: var(--radius-xs); border: 1px dashed var(--color-border); background: var(--color-bg); text-align: center; color: var(--color-text-secondary); }
.placeholder-card .placeholder-icon { font-size: 24px; margin-bottom: 6px; opacity: 0.4; }
.theme-toggle { background: var(--color-bg); border: 1px solid var(--color-border); border-radius: 50%; width: var(--btn-icon-sm); height: var(--btn-icon-sm); display: flex; align-items: center; justify-content: center; cursor: pointer; transition: background-color var(--dur-base) var(--ease-out),color var(--dur-base) var(--ease-out),border-color var(--dur-base) var(--ease-out),box-shadow var(--dur-base) var(--ease-out),transform var(--dur-base) var(--ease-out),opacity var(--dur-base) var(--ease-out); color: var(--color-text-secondary); font-size: 16px; flex-shrink: 0; padding: 0; }
.theme-toggle:hover { border-color: var(--color-primary); color: var(--color-primary); background: var(--color-primary-light); }
.action-row { display: inline-flex; gap: var(--space-2); align-items: center; }
.stats-panel { margin-bottom: var(--space-3); padding: var(--space-3); background: var(--color-bg-secondary); border-radius: var(--radius-sm); border: 1px solid var(--color-border-light); }
.stats-panel-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: var(--space-2); margin-bottom: var(--space-3); }
.stats-panel-grid .stat-card { background: var(--color-surface); box-shadow: none; padding: var(--space-2) var(--space-1_5); }
.stats-panel-grid .stat-card .num { font-size: var(--text-md); font-weight: var(--font-weight-semibold); }
.stats-panel-grid .stat-card .label { font-size: var(--text-2xs); }
.energy-chart-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-3); margin-bottom: 18px; }
.energy-chart-grid > div { min-width: 0; }
.home-title { font-size: var(--text-2xl); font-weight: var(--font-weight-bold); color: var(--color-text-primary); }
.home-subtitle { font-size: var(--text-base); margin-top: var(--space-1); color: var(--color-text-secondary); }
.section-header-label { font-size: var(--text-lg); font-weight: var(--font-weight-semibold); color: var(--color-text-tertiary); margin-bottom: var(--space-3); }
.skip-link { position: absolute; left: var(--space-4); top: -60px; z-index: 10000; padding: var(--space-2) var(--space-4); background: var(--color-primary); color: #fff; border-radius: var(--radius-control); font-size: var(--text-md); font-weight: var(--font-weight-medium); text-decoration: none; transition: top var(--dur-base) var(--ease-out); }
.skip-link:focus { top: var(--space-4); box-shadow: var(--focus-ring); }
.ns-icon-btn { transition: background-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out); }
.hm-item { transition: background var(--dur-base) var(--ease-out), color var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out); }
.dropdown .item { transition: background var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out); }
.qd-btn:active:not(:disabled), .page-btn:active:not(:disabled), .detail-btn:active:not(:disabled), .ns-icon-btn:active, .tag-remove:active { transform: scale(0.96); }
.hm-item:active, .np-item:active, .dropdown .item:active { background: var(--color-surface-active); }
.input-wrap .dropdown { animation: dropIn var(--dur-fast) var(--ease-enter); transform-origin: top center; }
.hamburger-btn {
  display: none;
  background: none; border: none; cursor: pointer; outline: none;
  padding: var(--space-2); margin: var(--space-2) 2px var(--space-2) var(--space-2); border-radius: 10px;
  color: var(--color-text-primary);
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  transition: background var(--dur-base) var(--ease-out);
}
.hamburger-btn:active { background: var(--color-surface-active); }
.hamburger-btn .hamburger-close { display: none; }
.hamburger-btn.open .hamburger-icon { display: none; }
.hamburger-btn.open .hamburger-close { display: block; color: var(--color-primary); }
.hamburger-overlay {
  position: fixed; top: 0; left: 0; right: 0; bottom: 0;
  background: rgba(0,0,0,0);
  z-index: 190;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity var(--dur-enter) var(--ease-out), visibility var(--dur-enter) var(--ease-out);
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}
.hamburger-overlay.open {
  background: rgba(0,0,0,0.42);
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}
.hamburger-menu {
  position: fixed; top: 0; left: 0; bottom: 0;
  width: min(320px, 84vw);
  z-index: 195;
  background: var(--color-surface);
  box-shadow: 4px 0 24px rgba(0,0,0,0.14);
  transform: translateX(-100%);
  visibility: hidden;
  pointer-events: none;
  transition: transform var(--dur-enter) cubic-bezier(0.16, 1, 0.3, 1), visibility var(--dur-enter) var(--ease-out);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  will-change: transform;
}
.hamburger-menu.open {
  transform: translateX(0);
  visibility: visible;
  pointer-events: auto;
}
.hamburger-menu-header {
  display: flex; align-items: center; gap: var(--space-2_5);
  padding: var(--space-4) var(--space-4) var(--space-3);
  border-bottom: 1px solid var(--color-border-light);
  color: var(--color-text-primary);
  position: sticky; top: 0; background: var(--color-surface); z-index: 1;
}
.hamburger-menu-body { padding: var(--space-2) 0 var(--space-6); }
.hm-group-title {
  padding: var(--space-3) var(--space-4) var(--space-1);
  font-size: var(--text-xs);
  font-weight: var(--font-weight-bold);
  color: var(--color-text-secondary);
  letter-spacing: 0.6px;
  text-transform: uppercase;
}
.hm-item {
  display: flex; align-items: center; gap: var(--space-2_5);
  padding: var(--space-3) var(--space-4);
  font-size: var(--text-base);
  font-weight: var(--font-weight-medium);
  color: var(--color-text-secondary);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  transition: background var(--dur-base) var(--ease-out), color var(--dur-base) var(--ease-out);
  border-left: 3px solid transparent;
  user-select: none;
}
.hm-item:active { background: var(--color-surface-active); }
.hm-item.active {
  color: var(--color-primary);
  background: var(--color-primary-light);
  border-left-color: var(--color-primary);
  font-weight: var(--font-weight-semibold);
}
.hm-item .hm-icon { width: 18px; height: 18px; flex-shrink: 0; }
.hm-badge {
  margin-left: auto; flex-shrink: 0;
  display: inline-block; padding: 1px 7px; border-radius: var(--radius-xs);
  font-size: var(--text-2xs); font-weight: var(--font-weight-semibold);
}
.hm-badge.daily { background: var(--blue-light); color: var(--blue); }
.hm-badge.real { background: var(--red-light); color: var(--red); }
.hm-item.active .hm-badge.daily, .hm-item.active .hm-badge.real {
  background: rgba(255,255,255,0.2); color: #fff;
}
.hm-badge.region { background: var(--color-success-light); color: var(--color-success); }
.hm-item.active .hm-badge.region {
  background: rgba(255,255,255,0.2); color: #fff;
}
.hm-stats { padding: var(--space-1) var(--space-4); }
.hm-stat-row {
  display: flex; align-items: center; gap: var(--space-2);
  padding: var(--space-1_5) 0; font-size: var(--text-xs); color: var(--color-text-secondary);
  line-height: 1.8;
}
.hm-stat-label { color: var(--color-text-tertiary); min-width: 28px; }
.hm-stat-num { font-weight: var(--font-weight-semibold); color: var(--color-text-primary); margin-left: auto; font-variant-numeric: tabular-nums; }
.comp-table tbody td.comp-item-col {
  position: sticky;
  left: 0;
  z-index: 5;
  background: var(--color-bg) !important;
  text-align: left;
  font-weight: 600;
}
.comp-table thead th.comp-item-col {
  position: sticky;
  left: 0;
  top: 0;
  z-index: 6;
  background: var(--color-bg) !important;
  text-align: left;
  font-weight: 600;
}
.clearing-table tbody td.clearing-item-col {
  position: sticky;
  left: 0;
  z-index: 5;
  background: var(--color-bg) !important;
  font-weight: 600;
}
.clearing-table thead th.clearing-item-col {
  position: sticky;
  left: 0;
  top: 0;
  z-index: 6;
  background: var(--color-bg) !important;
  font-weight: 600;
  text-align: left;
}
@media (max-width: 1500px) {
  .hamburger-btn { display: flex; align-items: center; justify-content: center; }
  .sidebar { display: none; }
  body.hm-open, html.hm-open { overflow: hidden; }
  .hamburger-menu { width: min(340px, 82vw); }
  .container { max-width: 100%; }
}
@media (max-width: 1024px) {
  
  :root { --control-h: 30px; --control-h-sm: 28px; --control-h-xs: 26px; }

  
  .main-layout { flex-direction: column; }
  .container { padding: var(--space-3) var(--space-4); max-width: 100%; }
  .content-area { padding-bottom: 0; }
  .home-card-grid { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); }
  .cmp-grid { grid-template-columns: 1fr; }
  .cmp-grid .disc-chart-cell .chart-container { height: 260px; }
  .comp-table-wrap { -webkit-overflow-scrolling: touch; }
  .comp-table { min-width: 640px; font-size: var(--text-tiny); }
  .comp-table th, .comp-table td { padding: var(--space-1_5) 7px; }
  .comp-item-col { width: 95px; max-width: 95px; }
  .comp-val-col { min-width: 62px; }
  .comp-diff-col { min-width: 64px; }
  .comp-pct-col { min-width: 50px; }
  .clearing-table { min-width: 600px; font-size: var(--text-tiny); }
  .clearing-table th, .clearing-table td { padding: 7px 9px; }
  .scroll-top { bottom: var(--space-5); right: var(--space-4); }

  
  .header-inner { padding: var(--space-2) var(--space-3); min-height: 50px; }
  .header h1 { font-size: var(--text-lg); }
  .header .subtitle { font-size: 10px; }
  .header-logo { width: 20px; height: 20px; }
  .auto-update-badge { display: none; }

  
  .result-section-scroll .result-body { display: flex; flex-direction: column; padding: 0; }
  .result-section-scroll .node-panel {
    width: 100%; max-height: 340px; border-right: none;
    border-bottom: 1px solid var(--color-border); overflow-y: auto;
  }
  .result-section-scroll .np-list { max-height: 300px; overflow-y: auto; }
  .np-divider { display: none; }
  .np-main { padding: var(--space-3); }
  .current-node-label { margin-bottom: var(--space-3); font-size: var(--text-xs); }

  
  .stats-row { grid-template-columns: repeat(2, 1fr); gap: var(--space-2); }
  .stat-card { padding: var(--space-3) var(--space-2); }
  
  .stat-card .num { font-size: clamp(11.5px, 5.67px + 1.82vw, var(--text-lg)); }
  .stat-card .label { font-size: clamp(9px, 7.33px + 0.52vw, 10px); }

  
  .chart-container { height: 260px; padding: 2px; }
  .chart-container-tall { height: 280px; padding: 2px; }

  
  .result-header {
    padding: var(--space-3); flex-direction: column; align-items: stretch;
    text-align: center; gap: var(--space-1);
  }
  .result-section-scroll .result-header { padding: var(--space-2) var(--space-3); }
  .result-header h2 { font-size: var(--text-lg); }
  
  .result-header > .flex-wrap,
  .result-header > .flex-wrap.gap-2 {
    flex-direction: column;
    width: 100%;
    align-items: center;
    gap: var(--space-1_5);
  }
  .result-header > .flex-wrap > .flex-wrap {
    width: auto !important;
    justify-content: center;
  }

  
  .date-controls {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: var(--space-1_5) !important;
    width: auto !important;
    padding: 0 !important;
  }
  .date-controls > * { flex-shrink: 0 !important; }
  .date-controls .date-range, .date-controls .date-range-m {
    flex: 0 1 auto !important; border: none !important; background: transparent !important; padding: 0 !important;
  }
  .date-controls > button { flex: 0 0 auto !important; }
  .date-range, .date-range-m {
    flex-direction: row !important; align-items: center !important; justify-content: center !important;
    padding: 0 !important; gap: var(--space-1_5) !important;
    border: none !important; background: transparent !important;
  }
  .date-range .date-icon, .date-range-m .date-icon {
    display: inline-flex !important; width: 14px !important; height: 14px !important;
    flex-shrink: 0 !important; color: var(--color-text-tertiary) !important;
  }
  .date-range .date-sep, .date-range-m .date-sep {
    flex-shrink: 0 !important; align-self: center !important;
    font-size: var(--text-tiny) !important; color: var(--color-text-tertiary) !important;
  }
  .date-range input[type="date"], .date-range-m input[type="date"] {
    flex: 0 1 auto !important; width: auto !important; min-width: 120px !important; max-width: none !important;
    height: var(--control-h-xs) !important; min-height: 26px !important;
    padding: 3px var(--space-1_5) 3px var(--space-1_5) !important;
    font-size: 14px !important; line-height: 1.2 !important;
    border: 1px solid var(--color-border) !important; border-radius: var(--radius-control) !important;
    background: var(--color-bg) !important; color: var(--color-text-primary) !important;
    box-sizing: border-box !important; text-align: center !important; position: relative !important;
  }

  .date-range-m select {
    flex: 1 1 100px !important;
    width: auto !important;
    min-width: 100px !important;
    max-width: none !important;
    min-height: 26px !important;
    height: 26px !important;
    padding: 3px var(--space-2) !important;
    font-size: 14px !important;
    margin-top: 2px !important;
    box-sizing: border-box !important;
  }
  .quick-dates { display: flex; flex-wrap: nowrap; gap: var(--space-1); width: auto !important; padding: 0; }
  .quick-dates .qd-btn { padding: var(--space-1) var(--space-2); font-size: 10px; min-height: var(--control-h); display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; }

  
  .date-controls .action-row {
    display: flex;
    flex-wrap: nowrap;
    gap: var(--space-1);
  }
  .date-controls .action-row .btn {
    flex: 0 1 auto;
    min-width: 0;
    white-space: nowrap;
    justify-content: center;
    text-align: center;
  }

  
  .energy-chart-grid { grid-template-columns: 1fr; gap: var(--space-3); }
  .energy-chart-grid .chart-container { height: 190px; }
  .energy-chart-grid > div { min-width: 0; }
  .disc-chart-grid { grid-template-columns: 1fr; gap: var(--space-3); }
  
  .disclosure-section .result-body   { padding: var(--space-3) var(--space-3) var(--space-4); }
  .disclosure-section .result-header { padding: var(--space-2) var(--space-3); }

  .disc-chart-grid .disc-chart-cell { border: none; padding: 10px; }

  
  .home-card { padding: var(--space-3); text-align: center; }
  .home-card .home-card-icon { margin-left: auto; margin-right: auto; }
  .home-card .home-card-title { font-size: var(--text-sm); }
  .home-card .home-card-desc { font-size: 10px; }

  
  .btn { padding: var(--space-1_5) var(--space-3_5); font-size: var(--text-sm); min-height: 30px; }
  .btn-sm { padding: 5px var(--space-2_5); font-size: var(--text-tiny); min-height: 28px; }

  
  .table-scroll { max-height: 400px; -webkit-overflow-scrolling: touch; }
  table th, table td { padding: var(--space-2); font-size: var(--text-tiny); }
  .table-scroll table td.col-action { width: auto; min-width: 70px; }
  .table-scroll table .detail-btn {
    width: 100%;
    min-height: 34px;
    padding: var(--space-1_5) var(--space-2_5);
    gap: var(--space-1);
    justify-content: center;
  }
  .table-scroll table .detail-btn-text { display: inline; font-size: 12px; }

  

  
  .modal { max-width: 100%; border-radius: 14px 14px 0 0; max-height: calc(100vh - 60px); }
  .modal-overlay { align-items: flex-end; }
  .modal-body { padding: var(--space-3); }
  .modal-table { font-size: 10px; }
  .modal-table th, .modal-table td { padding: var(--space-1) 3px; font-size: 10px; white-space: normal; word-break: break-word; }
  .modal-header { padding: var(--space-3); }
  .modal-header h3 { font-size: var(--text-base); line-height: 1.35; }
  .modal-close { flex: 0 0 auto; }
  #modalStats { font-size: var(--text-tiny); line-height: 1.6; }

  
  .price-bars { height: 100px; gap: 1px; width: 100%; max-width: 100%; }
  .price-bar { min-width: 1px; }

  
  .toast { left: var(--space-3); right: var(--space-3); top: auto; bottom: var(--space-5); max-width: none; border-radius: var(--radius); }

  
  #clearingSection .result-header { flex-direction: column; }
  #clearingSection .flex-between { flex-direction: column; gap: var(--space-2); }

  
  .compare-input-container { padding: var(--space-1_5) var(--space-2_5); }
  .compare-input-container #compareInput { font-size: var(--text-sm); }

  
  .stats-panel-grid { grid-template-columns: repeat(2, 1fr); }
  .stats-panel { padding: var(--space-2); }
  .stats-panel-grid .stat-card { padding: var(--space-2) var(--space-1_5); }

  
  .stat-card::before { display: none; }
}
@media (max-width: 480px) {
  .header-inner { padding: var(--space-1_5) var(--space-2); }
  .header h1 { font-size: 15px; }

  .container { padding: var(--space-2); }

  .chart-container { height: 200px; }
  .chart-container-tall { height: 220px; }

  .result-header { padding: var(--space-2); }
  .result-section-scroll .result-header { padding: var(--space-2); gap: var(--space-1); }
  .result-body { padding: var(--space-2); }

  .stats-bar { grid-template-columns: repeat(2, 1fr); gap: var(--space-1_5); }
  .stats-bar .sb-card .sb-num { font-size: var(--text-md); }
  .stats-bar .sb-card .sb-label { font-size: var(--text-2xs); }

  .result-section-scroll .node-panel { max-height: 260px; overflow-y: auto; }
  .result-section-scroll .np-list { max-height: 220px; overflow-y: auto; }
  .np-item { padding: var(--space-1_5) var(--space-2_5); font-size: var(--text-tiny); }
  .np-search input { padding: var(--space-1_5) var(--space-6) var(--space-1_5) var(--space-2_5); font-size: var(--text-tiny); }

  .home-card-grid { grid-template-columns: 1fr 1fr; gap: var(--space-1); }
  .home-card { padding: var(--space-2); }
  .home-card .home-card-icon { margin-bottom: var(--space-1); }
  .home-card .home-card-icon svg { width: 22px; height: 22px; }
  .home-title { font-size: var(--text-xl); }
  .home-subtitle { font-size: var(--text-sm); }

  
  .ov-header { flex-direction: row; align-items: center; gap: var(--space-2); margin-bottom: var(--space-4); }
  .ov-header .section-header-label { text-align: center; border-bottom: none; padding-bottom: 0; margin-bottom: 0; }
  .ov-columns { flex-direction: column; gap: var(--space-4); margin-bottom: var(--space-5); }
  .ov-divider { width: auto; height: 1px; background: linear-gradient(to right, transparent, var(--color-border) 12%, var(--color-border) 88%, transparent); }
  .ov-block-head { margin-bottom: var(--space-2); }
  .ov-grid { grid-template-columns: repeat(2, 1fr); gap: var(--space-2_5); margin-bottom: var(--space-5); }
  .ov-card { padding: var(--space-3); }
  .ov-card-value { font-size: var(--text-2xl); }

  .modal-overlay { padding: 0; }
  .modal { border-radius: 10px 10px 0 0; max-height: 100vh; width: 100%; }
  .modal-table th { font-size: var(--text-2xs); }
  .modal-table td { font-size: var(--text-2xs); padding: 2px 3px; }
  .price-bars { height: 80px; }
  .modal-time-labels { font-size: var(--text-2xs); }

  .energy-chart-grid .chart-container { height: 155px; }
  .disc-chart-grid .disc-chart-cell .chart-container { height: 140px; }
  .cmp-grid .disc-chart-cell .chart-container { height: 230px; }
  .disc-chart-grid .disc-chart-cell .disc-chart-title { font-size: var(--text-tiny); }
  .disc-chart-grid .disc-chart-cell .disc-chart-title .title-stats { font-size: 10px; }

  .toast { font-size: var(--text-sm); padding: var(--space-2_5) var(--space-4); }


  .compare-tag { font-size: 10px; padding: 2px var(--space-1_5) 2px var(--space-2); }

  .page-btn { padding: 5px var(--space-2_5); font-size: 10px; }

  
  input[type="date"], input[type="text"], input[type="number"], select {
    font-size: 14px !important;
  }

  /* 原生 month 控件内含「年 + 月」两段 + 下拉箭头，14px 下内容宽超出窄盒会把年份挤出。
     移动端降到 12px 并放宽内容盒，保证「2024年01」完整可见。 */
  input[type="month"] {
    font-size: 12px !important;
    padding-left: var(--space-2) !important;
    padding-right: var(--space-1) !important;
  }
  
  .date-range input[type="date"] { flex: 0 1 auto !important; width: auto !important; min-width: 110px !important; max-width: none !important; }

  
  .clearing-stats .stat-card .num,
  #clearingStatsRow .stat-card .num { font-size: clamp(11.5px, 5.67px + 1.82vw, var(--text-lg)); }
}
@media (max-width: 400px) {
  .chart-container { height: 180px; }
  .chart-container-tall { height: 190px; }

  .stats-row { grid-template-columns: repeat(2, 1fr); gap: var(--space-1); }
  .stat-card { padding: var(--space-2) var(--space-1_5); }
  

  .stats-bar { gap: var(--space-1); }
  .stats-bar .sb-card { padding: var(--space-2) var(--space-1_5); }
  .stats-bar .sb-card .sb-num { font-size: var(--text-sm); }

  .home-card-grid { grid-template-columns: 1fr 1fr; gap: var(--space-1); }
  .home-card { padding: var(--space-1); }
  .home-card .home-card-title { font-size: var(--text-tiny); }

  .energy-chart-grid .chart-container { height: 140px; }
  .disc-chart-grid .disc-chart-cell .chart-container { height: 130px; }
  .cmp-grid .disc-chart-cell .chart-container { height: 210px; }

  .btn { padding: 5px var(--space-2_5); font-size: var(--text-tiny); min-height: 28px; }
  .btn-sm { padding: var(--space-1) var(--space-2); font-size: 10px; min-height: 26px; }
  .date-range input[type="date"], .date-range-m input[type="date"] {
    height: 26px !important;
    min-height: 24px !important;
    padding: 2px var(--space-3_5) 2px 5px !important;
    font-size: 13px !important;
  }

  .table-scroll { max-height: 300px; }
  .table-scroll table td.col-action { min-width: 60px; }
  .table-scroll table .detail-btn { min-height: 30px; padding: 5px var(--space-2); gap: 3px; }
  .table-scroll table .detail-btn-text { font-size: var(--text-tiny); }
  table th, table td { padding: var(--space-1_5) var(--space-1); font-size: 10px; }

  
  .comp-table { min-width: 560px; font-size: 10px; }
  .comp-table th, .comp-table td { padding: 5px var(--space-1_5); }
  .comp-item-col { width: 82px; max-width: 82px; }
  .comp-val-col { min-width: 54px; }
  .comp-diff-col { min-width: 56px; }
  .comp-pct-col { min-width: 44px; }
  .clearing-table { min-width: 540px; font-size: 10px; }
  .clearing-table th, .clearing-table td { padding: var(--space-1_5) 7px; }
}
@media (max-width: 360px) {
  .chart-container { height: 160px; }
  .chart-container-tall { height: 170px; }
  .cmp-grid .disc-chart-cell .chart-container { height: 195px; }
  .home-card-grid { grid-template-columns: 1fr; }
  .quick-dates .qd-btn { padding: var(--space-1) var(--space-2); font-size: 10px; min-height: var(--control-h); display: inline-flex; align-items: center; justify-content: center; }
  .result-header h2 { font-size: var(--text-md); }
}
@media (hover: none) and (pointer: coarse) {
  .np-item { min-height: var(--control-h); display: flex; align-items: center; }
  .sidebar-item { min-height: var(--control-h); }
  .qd-btn { min-height: var(--control-h); display: inline-flex; align-items: center; }
  .btn { min-height: var(--control-h); display: inline-flex; align-items: center; }
  .page-btn { min-height: var(--control-h); display: inline-flex; align-items: center; }
  .modal-close { width: var(--btn-icon); height: var(--btn-icon); }
  .detail-btn { min-height: var(--control-h); display: inline-flex; align-items: center; }
  .hm-item { min-height: 40px; }

  
  .stat-card:hover, .home-card:hover, .btn-primary:hover, .btn-secondary:hover {
    transform: none;
    box-shadow: var(--shadow);
  }

  
  .stat-card:active { transform: scale(0.98); }
  .home-card:active { transform: scale(0.98); }
  .np-item:active { background: var(--color-surface-active); }

  
  ::-webkit-scrollbar { width: 4px; height: 4px; }
}
@media (max-width: 1024px) and (orientation: landscape) {
  .chart-container { height: 260px; }
  .chart-container-tall { height: 280px; }
  .result-section-scroll .node-panel { max-height: 200px; overflow-y: auto; }
}
@media (max-width: 900px) and (orientation: landscape) {
  .chart-container { height: 200px; }
  .chart-container-tall { height: 220px; }
  .result-section-scroll .node-panel { max-height: 160px; overflow-y: auto; }
}
@media print {
  .sidebar, .hamburger-btn, .hamburger-menu, .hamburger-overlay,
  .header, .scroll-top,
  .quick-dates, .btn, .btn-sm,
  .node-panel, .np-divider {
    display: none !important;
  }
  .content-area { padding: 0 !important; }
  .result-section { box-shadow: none; border: 1px solid #ddd; break-inside: avoid; }
  .chart-container { height: 300px; break-inside: avoid; }
  body { background: #fff; font-size: 12px; }
}
:root {
  --w-alert-blue: var(--blue);
  --w-alert-blue-bg: var(--blue-light);
  --w-alert-yellow: #f5b400;
  --w-alert-yellow-bg: #fff6dd;
  --w-alert-yellow-fg: #5a4500;
  --w-alert-orange: var(--orange);
  --w-alert-orange-bg: var(--orange-light);
  --w-alert-red: var(--red);
  --w-alert-red-bg: var(--red-light);
}
.weather-current {
  display: flex;
  align-items: center;
  gap: var(--space-6);
  padding: var(--space-6);
  background: linear-gradient(135deg, var(--color-surface), color-mix(in srgb, var(--blue-light) 35%, var(--color-surface)));
  border: 1px solid var(--color-border-light);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  position: relative;
  overflow: hidden;
}
.weather-current::after {
  content: '';
  position: absolute;
  right: -40px; top: -40px;
  width: 180px; height: 180px;
  background: radial-gradient(circle, color-mix(in srgb, var(--color-primary) 18%, transparent), transparent 70%);
  pointer-events: none;
}
.wc-left {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  flex-shrink: 0;
  z-index: 1;
}
.wc-icon { width: 72px; height: 72px; color: var(--color-primary); flex-shrink: 0; }
.wc-icon svg { width: 100%; height: 100%; }
.wc-temp {
  font-size: 52px;
  font-weight: var(--font-weight-bold);
  color: var(--color-text-primary);
  line-height: 1;
  letter-spacing: -2px;
  font-variant-numeric: tabular-nums;
}
.wc-temp .wc-deg { font-size: 26px; vertical-align: top; font-weight: var(--font-weight-medium); }
.wc-meta { z-index: 1; flex: 1; min-width: 0; }
.wc-cond { font-size: var(--text-lg); font-weight: var(--font-weight-semibold); color: var(--color-text-primary); }
.wc-phrase { font-size: var(--text-sm); color: var(--color-text-secondary); margin-top: var(--space-1); }
.wc-metrics {
  display: grid;
  grid-template-columns: repeat(4, auto);
  gap: var(--space-3) var(--space-5);
  margin-top: var(--space-3);
}
.wc-metric { display: flex; flex-direction: column; gap: 1px; }
.wc-metric .m-label { font-size: var(--text-xs); color: var(--color-text-secondary); font-weight: var(--font-weight-medium); }
.wc-metric .m-value { font-size: var(--text-md); color: var(--color-text-primary); font-weight: var(--font-weight-semibold); font-variant-numeric: tabular-nums; }
.weather-alerts { display: flex; flex-direction: column; gap: var(--space-2); margin-top: var(--space-4); }
.weather-alert {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-sm);
  border-left: 4px solid var(--w-alert-blue);
  background: var(--w-alert-blue-bg);
  font-size: var(--text-sm);
  color: var(--color-text-primary);
  animation: fadeIn var(--dur-enter) var(--ease-out);
}
.weather-alert .wa-icon { flex-shrink: 0; margin-top: 1px; }
.weather-alert .wa-body { flex: 1; min-width: 0; }
.weather-alert .wa-type {
  font-weight: var(--font-weight-bold);
  margin-right: var(--space-2);
  padding: 1px 8px;
  border-radius: var(--radius-2xs);
  font-size: var(--text-xs);
  color: #fff;
  background: var(--w-alert-blue);
}
.weather-alert.level-orange { border-left-color: var(--w-alert-orange); background: var(--w-alert-orange-bg); }
.weather-alert.level-orange .wa-type { background: var(--w-alert-orange); }
.weather-alert.level-yellow { border-left-color: var(--w-alert-yellow); background: var(--w-alert-yellow-bg); }
.weather-alert.level-yellow .wa-type { background: var(--w-alert-yellow); color: var(--w-alert-yellow-fg); }
.weather-alert.level-red { border-left-color: var(--w-alert-red); background: var(--w-alert-red-bg); }
.weather-alert.level-red .wa-type { background: var(--w-alert-red); }
.weather-alert.level-blue { border-left-color: var(--w-alert-blue); background: var(--w-alert-blue-bg); }
.weather-alert.level-blue .wa-type { background: var(--w-alert-blue); }
.weather-section-label {
  font-size: var(--text-md);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-primary);
  margin: var(--space-6) 0 var(--space-3);
}
.weather-section-label:first-child { margin-top: 0; }
.weather-forecast {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: var(--space-3);
}
.wf-item {
  background: var(--color-surface);
  border: 1px solid var(--color-border-light);
  border-radius: var(--radius-sm);
  padding: var(--space-3);
  text-align: center;
  transition: box-shadow var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out), border-color var(--dur-base) var(--ease-out);
  box-shadow: var(--shadow-xs);
}
.wf-item:hover { box-shadow: var(--shadow-hover); transform: translateY(-3px); border-color: var(--color-border-hover); }
.wf-date { font-size: var(--text-xs); color: var(--color-text-secondary); font-weight: var(--font-weight-medium); }
.wf-weekday { font-size: var(--text-sm); color: var(--color-text-primary); font-weight: var(--font-weight-semibold); margin-top: 1px; }
.wf-icon { width: 40px; height: 40px; margin: var(--space-2) auto var(--space-1); color: var(--color-primary); }
.wf-icon svg { width: 100%; height: 100%; }
.wf-cond { font-size: var(--text-xs); color: var(--color-text-secondary); min-height: 16px; line-height: 1.3; }
.wf-temp { margin-top: var(--space-1); font-size: var(--text-sm); font-variant-numeric: tabular-nums; }
.wf-temp .hi { font-weight: var(--font-weight-bold); color: var(--color-text-primary); }
.wf-temp .lo { color: var(--color-text-secondary); margin-left: 4px; }
.wf-details {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 5px 8px;
  margin-top: var(--space-2);
  padding-top: var(--space-2);
  border-top: 1px solid var(--color-border-light);
  text-align: left;
}
.wf-cell { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.wf-cell.wide { grid-column: 1 / -1; }
.wf-cell .wf-k { font-size: 10px; color: var(--color-text-tertiary); font-weight: var(--font-weight-medium); }
.wf-cell .wf-v {
  font-size: var(--text-xs);
  color: var(--color-text-primary);
  font-variant-numeric: tabular-nums;
  line-height: 1.3;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
@media (min-width: 769px) {
  .wf-date { font-size: 11px; }
  .wf-weekday { font-size: 13px; }
  .wf-cond { font-size: 11px; }
  .wf-temp { font-size: 13px; }
  .wf-cell .wf-k { font-size: 11px; }
  .wf-cell .wf-v { font-size: 11px; }
}
.weather-empty {
  text-align: center;
  color: var(--color-text-tertiary);
  font-size: var(--text-sm);
  padding: var(--space-5);
}
.weather-hourly {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  border: 1px solid var(--color-border-light);
  border-radius: var(--radius-sm);
  padding: var(--space-4);
  background: var(--color-surface);
  box-shadow: var(--shadow-xs);
}
.whc-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}
.whc-toggle {
  appearance: none;
  border: 1px solid var(--color-border-light);
  background: var(--color-surface);
  color: var(--color-text-secondary);
  border-radius: var(--radius-pill);
  padding: 5px var(--space-3);
  font-size: var(--text-xs);
  font-weight: var(--font-weight-semibold);
  cursor: pointer;
  transition: border-color var(--dur-base) var(--ease-out), color var(--dur-base) var(--ease-out);
  line-height: 1.4;
}
.whc-toggle:hover {
  border-color: var(--color-primary);
  color: var(--color-primary);
}
.whc-toggle.active {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: #fff;
}
.whc-canvas-wrap {
  position: relative;
  width: 100%;
  height: 340px;
}
.whc-legend {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-2) var(--space-5);
  margin-top: var(--space-2);
}
.whc-legend-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  appearance: none;
  border: none;
  background: transparent;
  padding: 4px 6px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  font-family: inherit;
  font-size: var(--text-sm);
  color: var(--color-text-primary);
  transition: background var(--dur-fast) var(--ease-out);
}
.whc-legend-item:hover { background: var(--color-surface); }
.whc-legend-item.inactive { opacity: 0.38; }
.whc-legend-item.inactive .whc-dot { background: var(--color-text-tertiary) !important; }
.whc-dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  flex: 0 0 auto;
  display: inline-block;
}
.whc-legend-text { white-space: nowrap; }
.whc-tooltip {
  position: fixed;
  z-index: 10000;
  background: rgba(30,30,32,0.92);
  color: #fff;
  padding: 10px 14px;
  border-radius: var(--radius-sm);
  font-family: var(--font);
  font-size: 12px;
  line-height: 1.6;
  pointer-events: none;
  box-shadow: 0 4px 16px rgba(0,0,0,0.3), 0 0 0 1px rgba(255,255,255,0.08);
  min-width: 120px;
}
.whc-tt-title {
  font-weight: 600;
  font-size: 13px;
  margin-bottom: 4px;
  opacity: 0.95;
}
.whc-tt-row {
  display: flex;
  align-items: center;
  gap: 7px;
  white-space: nowrap;
}
.whc-tt-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}
.weather-current.skeleton { display: flex; gap: var(--space-6); align-items: center; }
.wc-skel-icon { width: 72px; height: 72px; border-radius: var(--radius); background: var(--color-surface-hover); animation: pulse 1.5s var(--ease-in-out) infinite; flex-shrink: 0; }
.wc-skel-temp { width: 120px; height: 48px; border-radius: var(--radius-sm); background: var(--color-surface-hover); animation: pulse 1.5s var(--ease-in-out) infinite; }
.wc-skel-lines { flex: 1; display: flex; flex-direction: column; gap: var(--space-2); }
.wc-skel-lines .ln { height: 14px; border-radius: 4px; background: var(--color-surface-hover); animation: pulse 1.5s var(--ease-in-out) infinite; }
.wc-skel-lines .ln.w1 { width: 40%; }
.wc-skel-lines .ln.w2 { width: 70%; }
.weather-forecast.skeleton .wf-item { background: var(--color-surface-hover); border: none; animation: pulse 1.5s var(--ease-in-out) infinite; min-height: 150px; }
@media (max-width: 768px) {
  .weather-current {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-4);
    padding: var(--space-5);
  }
  .wc-left { width: 100%; justify-content: space-between; }
  .wc-temp { font-size: 44px; }
  .wc-metrics { grid-template-columns: repeat(2, 1fr); width: 100%; gap: var(--space-3); }
  .weather-forecast {
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-2);
  }
  .wf-details { grid-template-columns: 1fr; gap: 3px; }
  .whc-canvas-wrap { height: 280px; }
}
@media (max-width: 480px) {
  .wc-temp { font-size: 40px; }
  .whc-canvas-wrap { height: 260px; }
}