:root {
  --bg: #6672f5;
  --bg-dark: #5b63eb;
  --surface: rgba(255,255,255,0.92);
  --surface-strong: #ffffff;
  --border: rgba(21, 30, 80, 0.08);
  --text: #21305a;
  --muted: #7a829c;
  --card-shadow: 0 28px 60px rgba(35, 49, 112, 0.18);
  --accent: #6d66f5;
  --accent-2: #fe4f75;
  --accent-3: #18c29c;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { height: 100%; }
body {
  margin: 0;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: var(--text);
  background: #f3f5fa;
}

a { color: inherit; text-decoration: none; }
button, input, select { font: inherit; }

.page-bg {
  position: fixed;
  inset: 0;
  pointer-events: none;
  background: none;
}

.shell {
  width: min(1450px, calc(100vw - 32px));
  min-height: calc(100vh - 64px);
  margin: 32px auto;
  display: grid;
  grid-template-columns: 250px minmax(0, 1fr);
  gap: 0;
  background: var(--surface);
  border-radius: 40px;
  box-shadow: var(--card-shadow);
  overflow: hidden;
}

.shell.history-mode {
  grid-template-columns: 250px minmax(0, 1fr);
}
.shell.history-mode .main-panel {
  grid-column: 2 / -1;
  width: 100%;
  min-width: 0;
  min-height: 100%;
  border-right: 0;
}
.shell.history-mode .summary-column {
  display: none;
}
.shell.history-mode .history-panel {
  width: calc(100% + 68px);
  margin: -32px -34px;
  padding: 32px 34px;
  min-height: calc(100vh - 128px);
  border-radius: 0;
  box-shadow: none;
}
.shell.history-mode #statusMessage { display: none; }

.sidebar {
  position: relative;
  padding: 32px 24px;
  border-right: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  gap: 32px;
}

.brand { display: flex; align-items: center; gap: 12px; }
.brand-mark {
  width: 54px; height: 54px; border-radius: 18px;
  background: linear-gradient(135deg, #edf0ff, #ffffff);
  display: grid; place-items: center;
  font-size: 24px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.9), 0 8px 20px rgba(56, 66, 145, 0.08);
}
.brand-name { font-weight: 800; letter-spacing: -0.03em; }
.brand-subtitle { color: var(--muted); font-size: .8rem; }

.side-nav { display: grid; gap: 10px; margin-top: 16px; }
.sidebar-zone-picker { display: grid; gap: 6px; }
.sidebar-zone-picker label { color: var(--muted); font-size: .8rem; font-weight: 700; }
.sidebar-zone-picker select {
  width: 100%; min-height: 42px; padding: 8px 10px; border: 1px solid var(--border); border-radius: 12px;
  background: #fff; color: var(--text);
}
.nav-item {
  padding: 14px 16px;
  border-radius: 16px;
  color: #9ca3bb;
  font-weight: 700;
  letter-spacing: .02em;
  transition: .2s ease;
}
.nav-item.active, .nav-item:hover {
  color: var(--text);
  background: rgba(104, 113, 245, 0.08);
}

.profile-card {
  margin-top: auto;
  background: linear-gradient(180deg, #fff, #f4f4ff);
  border: 1px solid var(--border);
  border-radius: 22px;
  padding: 22px;
  box-shadow: 0 18px 30px rgba(42, 51, 103, 0.08);
}
.account-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
.account-status { width: 100%; color: var(--muted); font-size: .82rem; font-weight: 700; }
.profile-avatar {
  width: 52px; height: 52px; border-radius: 50%;
  background: linear-gradient(135deg, #31c79d, #8ce0b1);
  display: grid; place-items: center;
  color: #fff; font-weight: 800;
  margin-bottom: 16px;
}
.profile-name { font-weight: 800; margin-bottom: 8px; }
.profile-text { color: var(--muted); font-size: .92rem; line-height: 1.5; }
.upgrade-btn {
  margin-top: 16px; border: 0; width: 100%;
  padding: 12px 14px; border-radius: 999px;
  background: rgba(255, 92, 130, .12);
  color: #fe4f75; font-weight: 800; text-transform: uppercase;
}

.main-panel {
  grid-column: 2 / -1;
  min-width: 0;
  padding: 32px 34px;
  border-right: 1px solid var(--border);
  background: linear-gradient(180deg, rgba(255,255,255,.15), rgba(255,255,255,.05));
}

.topbar {
  display: flex; justify-content: space-between; align-items: flex-start;
  gap: 24px; margin-bottom: 26px;
}
.eyebrow {
  color: #6a6ef2; text-transform: uppercase; font-size: .75rem; font-weight: 800; letter-spacing: .12em;
}
.topbar h1 {
  margin: 4px 0 8px; font-size: clamp(2rem, 2.4vw, 3rem); line-height: 1;
  letter-spacing: -0.05em;
}
.topbar p { margin: 0; color: var(--muted); max-width: 56ch; }
.toolbar { display: flex; align-items: center; gap: 10px; margin-top: 8px; }
.search-pill {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 14px; border-radius: 16px;
  background: rgba(255,255,255,0.8); border: 1px solid var(--border);
}
.search-pill input {
  border: 0; outline: 0; background: transparent; width: 150px;
}
.icon-btn {
  width: 46px; height: 46px; border-radius: 16px;
  border: 1px solid var(--border); background: rgba(255,255,255,0.8);
  cursor: pointer; font-size: 1.1rem; color: var(--text);
}

.kpi-row {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-bottom: 28px;
}
.kpi-card {
  position: relative; overflow: hidden;
  padding: 20px 20px 22px;
  border-radius: 18px; color: #fff;
  min-height: 110px;
  box-shadow: 0 18px 30px rgba(69, 76, 181, 0.18);
}
.kpi-card::after {
  content: ""; position: absolute; inset: auto -20px -20px auto; width: 120px; height: 120px;
  border-radius: 50%; background: rgba(255,255,255,0.15); filter: blur(6px);
}
.gradient-a { background: linear-gradient(135deg, #5e73f7, #6d66f5); }
.gradient-b { background: linear-gradient(135deg, #6a63f4, #4e51ef); }
.gradient-c { background: linear-gradient(135deg, #5e6ff8, #7b72ff); }
.kpi-label { font-size: .83rem; text-transform: uppercase; letter-spacing: .08em; opacity: .8; font-weight: 700; }
.kpi-value { margin-top: 10px; font-size: 1.8rem; font-weight: 900; letter-spacing: -0.04em; }
.kpi-meta { margin-top: 8px; font-size: .92rem; opacity: .9; }

.content-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 16px;
}
.content-column { display: grid; gap: 16px; }
.panel,
.summary-card,
.mini-card {
  background: rgba(255,255,255,0.94);
  border: 1px solid rgba(120, 130, 190, 0.12);
  border-radius: 28px;
  box-shadow: 0 18px 28px rgba(66, 74, 146, 0.06);
}
.card-big { padding: 24px; }
.history-panel { padding: 24px; }
.history-controls { display: flex; align-items: end; gap: 8px; flex-wrap: wrap; justify-content: end; }
.history-controls label { color: var(--muted); font-size: .8rem; font-weight: 700; }
.history-controls select, .history-controls input {
  min-height: 42px; padding: 8px 10px; border: 1px solid var(--border); border-radius: 12px; background: #fff;
}
.history-load-btn { min-height: 42px; padding: 8px 14px; border: 0; border-radius: 12px; background: var(--accent); color: #fff; font-weight: 800; cursor: pointer; }
.history-stat-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin: 18px 0; }
.history-stat { display: grid; gap: 6px; padding: 14px; border-radius: 14px; background: rgba(104,113,245,.07); }
.history-stat span { color: var(--muted); font-size: .78rem; }
.history-stat strong { font-size: .92rem; }
.products-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin-top: 18px; }
.products-grid .kpi-card { min-height: 140px; }
.products-grid .kpi-value { font-size: 2.4rem; }
.kpi-diff { margin-top: 6px; font-size: .85rem; font-weight: 700; opacity: .9; }
.kpi-diff.positive { color: #ffe1e6; }
.kpi-diff.negative { color: #d8ffe9; }
.history-empty { color: var(--muted); padding: 16px 0; }
.history-chart { display: flex; align-items: end; gap: 6px; min-height: 220px; overflow-x: auto; padding: 18px 8px 28px; border-radius: 18px; background: linear-gradient(180deg, rgba(104,113,245,.03), rgba(104,113,245,.08)); }
.day-history-chart { display: grid; grid-template-columns: repeat(4, minmax(180px, 1fr)); align-items: stretch; gap: 12px; overflow: visible; }
.day-hour-card { padding: 12px; border: 1px solid var(--border); border-radius: 14px; background: rgba(255,255,255,.72); }
.day-hour-title { color: var(--muted); font-weight: 800; margin-bottom: 10px; }
.quarter-squares { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
.quarter-square { min-height: 64px; display: grid; place-items: center; padding: 4px; border-radius: 8px; background: linear-gradient(145deg, #7d87ff, #4e51ef); color: #fff; font-size: .75rem; font-weight: 800; text-align: center; }
.month-history-chart { display: grid; grid-template-columns: repeat(7, minmax(110px, 1fr)); align-items: stretch; overflow: visible; }
.month-day-card { min-height: 90px; display: grid; gap: 5px; align-content: center; padding: 12px; border: 1px solid var(--border); border-radius: 14px; background: rgba(255,255,255,.72); }
.history-day-link { width: 100%; color: inherit; font: inherit; text-align: left; cursor: pointer; transition: transform .16s ease, border-color .16s ease, box-shadow .16s ease; }
.history-day-link:hover { transform: translateY(-2px); border-color: rgba(104,113,245,.45); box-shadow: 0 10px 20px rgba(66,74,146,.1); }
.month-day-card span { font-weight: 900; }
.month-day-card small { color: var(--muted); }
.hour-cluster { flex: 1 0 30px; min-width: 30px; height: 180px; display: grid; grid-template-rows: 1fr auto; gap: 8px; align-items: end; }
.hour-bars { height: 100%; display: flex; align-items: end; gap: 2px; }
.quarter-bar { flex: 1; min-width: 3px; border-radius: 4px 4px 1px 1px; background: linear-gradient(180deg, #8f96ff, #4e51ef); }
.hour-cluster > span { color: var(--muted); font-size: .7rem; text-align: center; }
.panel-head { display: flex; justify-content: space-between; gap: 16px; align-items: end; margin-bottom: 18px; }
.panel-title { font-size: 1.35rem; font-weight: 900; letter-spacing: -0.04em; }
.panel-subtitle { margin-top: 6px; color: var(--muted); }
.chart-wrap { padding: 18px 0 0; }
.chart-bars {
  height: 270px; display: flex; gap: 3px; align-items: end; overflow-x: auto; overflow-y: hidden;
  padding: 20px 8px 0; border-radius: 20px;
  background: linear-gradient(180deg, rgba(104,113,245,.03), rgba(104,113,245,.08));
}
.bar {
  flex: 1 1 0; min-width: 4px; border-radius: 12px 12px 4px 4px;
  background: linear-gradient(180deg, rgba(102,114,245,.2), rgba(102,114,245,.95));
  position: relative; z-index: 1;
  transition: transform .2s ease, opacity .2s ease, filter .2s ease, box-shadow .2s ease;
}
.bar:hover {
  z-index: 3;
  transform: translateY(-4px) scaleX(1.12);
  filter: brightness(1.12) saturate(1.12);
  box-shadow: 0 0 0 2px rgba(78,81,239,.42), 0 8px 16px rgba(78,81,239,.24);
}
.bar.current { background: linear-gradient(180deg, #fe4f75, #ff7d9f); }
.bar.low { background: linear-gradient(180deg, #69d8bc, #19c29d); }
.bar.high { background: linear-gradient(180deg, #8f96ff, #4e51ef); opacity: .92; }
.bar-label {
  position: absolute; bottom: -24px; left: 50%; transform: translateX(-50%);
  color: var(--muted); font-size: .7rem; white-space: nowrap;
}
.chart-footer { display: flex; justify-content: space-between; align-items: center; padding-top: 32px; color: var(--muted); font-size: .92rem; }

.split-panels { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; }
.mini-card { padding: 22px; min-height: 196px; }
.mini-card-title { color: var(--muted); font-size: .82rem; text-transform: uppercase; letter-spacing: .1em; font-weight: 800; }
.mini-card-value { margin-top: 16px; font-size: 2rem; font-weight: 900; letter-spacing: -0.04em; }
.mini-card-meta { margin-top: 10px; color: var(--muted); }
.favorite-list { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; }
.favorite-chip {
  padding: 10px 14px; border-radius: 999px; border: 1px solid var(--border); background: rgba(104,113,245,0.07);
  font-weight: 700; cursor: pointer;
}
.favorite-chip.active { background: rgba(104,113,245,0.16); color: var(--text); }

.summary-column { padding: 24px; display: grid; gap: 16px; }
.summary-card { padding: 22px; }
.summary-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; }
.summary-title { font-size: 1.35rem; font-weight: 900; letter-spacing: -0.04em; }
.more-btn { border: 0; background: transparent; font-size: 1.6rem; color: var(--muted); }
.balance-card {
  position: relative; background: linear-gradient(180deg, #fff, #fbfbff);
  border-radius: 24px; padding: 20px; border: 1px solid rgba(110, 110, 247, 0.08);
}
.balance-label { color: var(--muted); }
.balance-value { margin: 10px 0 14px; font-size: 2rem; font-weight: 900; letter-spacing: -0.05em; }
.balance-delta { display: flex; gap: 14px; color: var(--muted); font-size: .92rem; }
.status-list { margin-top: 18px; display: grid; gap: 12px; }
.status-item {
  display: flex; justify-content: space-between; align-items: center;
  padding-bottom: 12px; border-bottom: 1px solid rgba(120,130,190,.14);
}
.status-item:last-child { border-bottom: 0; padding-bottom: 0; }
.status-item span { color: var(--muted); }
.status-item strong { font-size: 1rem; }
.small-link { color: #7a7ce7; font-weight: 800; font-size: .82rem; letter-spacing: .04em; }

.activity-list { display: grid; gap: 14px; }
.activity-item {
  display: flex; justify-content: space-between; align-items: center;
  gap: 16px;
}
.activity-main { display: flex; align-items: center; gap: 12px; }
.activity-icon {
  width: 48px; height: 48px; border-radius: 16px; background: #6d66f5; color: #fff;
  display: grid; place-items: center; font-weight: 900;
}
.activity-title { font-weight: 800; }
.activity-time { color: var(--muted); font-size: .9rem; }
.activity-value { font-weight: 800; }

.category-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.category-card {
  padding: 18px; border-radius: 20px; min-height: 120px;
  background: linear-gradient(180deg, rgba(106,99,244,.12), rgba(255,255,255,.85));
  border: 1px solid rgba(120,130,190,.14);
}
.category-card:nth-child(2) { background: linear-gradient(180deg, rgba(69, 207, 168, 0.16), rgba(255,255,255,.9)); }
.category-card:nth-child(3) { background: linear-gradient(180deg, rgba(255, 226, 117, 0.22), rgba(255,255,255,.9)); }
.category-card:nth-child(4) { background: linear-gradient(180deg, rgba(255, 158, 180, 0.2), rgba(255,255,255,.9)); }
.category-name { font-weight: 900; margin-top: 24px; }
.category-sub { color: var(--muted); margin-top: 6px; font-size: .9rem; }

.loading, .error {
  padding: 16px 18px; border-radius: 18px; margin-bottom: 16px; font-weight: 700;
}
.loading { background: rgba(106,99,244,.12); color: #4d53e5; }
.error { background: rgba(254,79,117,.12); color: #d8335a; }

.settings-form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.settings-group { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin: 0; padding: 18px; border: 1px solid var(--border); border-radius: 18px; }
.settings-group legend { padding: 0 6px; color: var(--text); font-size: .92rem; font-weight: 900; }
.settings-group label { display: grid; gap: 6px; color: var(--muted); font-size: .8rem; font-weight: 700; }
.settings-group input { width: 100%; min-height: 42px; padding: 8px 10px; border: 1px solid var(--border); border-radius: 12px; background: #fff; color: var(--text); }
.settings-account-group { grid-column: 1 / -1; grid-template-columns: minmax(0, 1fr) auto; align-items: end; }
.settings-account-group > .settings-status { grid-column: 1 / -1; }
.credential-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.settings-actions { grid-column: 1 / -1; display: flex; align-items: center; flex-wrap: wrap; gap: 12px; }
.settings-reset-btn { min-height: 42px; padding: 8px 14px; border: 1px solid var(--border); border-radius: 12px; background: #fff; color: var(--text); font-weight: 800; cursor: pointer; }
.settings-status { color: var(--accent-3); font-size: .88rem; font-weight: 700; }
.settings-status.error-text { color: #d8335a; }
.login-form { display: flex; align-items: end; flex-wrap: wrap; gap: 12px; margin-top: 18px; }
.login-form label { display: grid; flex: 1 1 260px; gap: 6px; color: var(--muted); font-size: .8rem; font-weight: 700; }
.login-form input { width: 100%; min-height: 42px; padding: 8px 10px; border: 1px solid var(--border); border-radius: 12px; background: #fff; color: var(--text); }
.charging-controls { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; align-items: end; }
.charging-controls label, .charging-manual-label { display: grid; gap: 6px; color: var(--muted); font-size: .8rem; font-weight: 700; }
.charging-controls select, .charging-controls input, .charging-usage { width: 100%; min-height: 42px; padding: 8px 10px; border: 1px solid var(--border); border-radius: 12px; background: #fff; color: var(--text); }
.charging-manual-label { margin-top: 18px; }
.charging-usage { display: block; margin-top: 6px; resize: vertical; line-height: 1.45; }
.charging-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 12px; margin-top: 12px; }
.charging-status { color: var(--accent-3); font-size: .88rem; font-weight: 700; }
.charging-status.error-text { color: #d8335a; }
.charging-kpi-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin: 20px 0; }
.charging-kpi { display: grid; gap: 6px; min-height: 92px; padding: 14px; border-radius: 16px; background: rgba(104,113,245,.07); }
.charging-kpi span { color: var(--muted); font-size: .78rem; font-weight: 700; }
.charging-kpi strong { font-size: 1.1rem; letter-spacing: -.02em; }
.charging-kpi.total { background: linear-gradient(135deg, var(--accent), #8f96ff); color: #fff; }
.charging-kpi.total span { color: rgba(255,255,255,.82); }
.charging-bars { height: 180px; display: flex; align-items: end; gap: 5px; overflow-x: auto; padding: 16px 8px 26px; border-radius: 18px; background: linear-gradient(180deg, rgba(104,113,245,.03), rgba(104,113,245,.08)); }
.charging-bar-cluster { height: 100%; min-width: 34px; display: grid; grid-template-rows: 1fr auto; align-items: end; gap: 6px; text-align: center; }
.charging-bar { width: 100%; border-radius: 6px 6px 2px 2px; background: #6d66f5; }
.charging-bar.low, .tariff-chip.low { background: #18c29c; }
.charging-bar.high, .tariff-chip.high { background: #6d66f5; }
.charging-bar.peak, .tariff-chip.peak { background: #fe4f75; }
.charging-bar-cluster span { color: var(--muted); font-size: .72rem; }
.charging-table-wrap { margin-top: 20px; overflow-x: auto; }
.charging-table { width: 100%; border-collapse: collapse; font-size: .86rem; white-space: nowrap; }
.charging-table th, .charging-table td { padding: 11px 10px; border-bottom: 1px solid var(--border); text-align: left; }
.charging-table th { color: var(--muted); font-size: .76rem; text-transform: uppercase; letter-spacing: .04em; }
.tariff-chip { display: inline-block; padding: 4px 9px; border-radius: 999px; color: #fff; font-size: .75rem; font-weight: 800; }

@media (max-width: 1280px) {
  .shell { grid-template-columns: 220px minmax(0, 1fr); }
  .summary-card { min-width: 0; }
}

@media (min-width: 1440px) {
  .shell { width: 95vw; }
}

@media (max-width: 980px) {
  .shell { width: calc(100vw - 24px); margin: 12px auto; grid-template-columns: 1fr; }
  .shell.history-mode { grid-template-columns: 1fr; }
  .shell.history-mode .main-panel { grid-column: 1 / -1; }
  .sidebar, .main-panel, .summary-column { border-right: 0; }
  .shell.history-mode .history-panel { width: calc(100% + 68px); margin: -32px -34px; }
  .sidebar { padding-bottom: 20px; }
  .kpi-row, .content-grid, .split-panels, .summary-column { grid-template-columns: 1fr; }
  .settings-form { grid-template-columns: 1fr; }
  .settings-account-group { grid-template-columns: 1fr; }
  .charging-controls, .charging-kpi-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 720px) {
  .history-stat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .history-controls { justify-content: start; }
  .day-history-chart, .month-history-chart { grid-template-columns: repeat(2, minmax(160px, 1fr)); overflow-x: auto; }
}

@media (max-width: 720px) {
  .topbar, .toolbar, .panel-head, .summary-head { flex-direction: column; align-items: stretch; }
  .search-pill { width: 100%; }
  .search-pill input { width: 100%; }
  .summary-column { padding: 0; }
  .settings-group { grid-template-columns: 1fr; }
  .charging-controls, .charging-kpi-grid { grid-template-columns: 1fr; }
}