:root {
  color-scheme: light;
  --bg: #eef2f7;
  --surface: #ffffff;
  --surface-soft: #f4f6fa;
  --surface-tint: #eef4ff;
  --text: #111217;
  --muted: #5f6673;
  --soft: #8a929f;
  --border: #d9dee8;
  --border-strong: #b8c0cc;
  --blue: #0a5bff;
  --blue-dark: #0646c8;
  --blue-soft: #dbe7ff;
  --magenta: #e20074;
  --magenta-soft: #fde7f3;
  --green: #098551;
  --green-soft: #dff7ec;
  --green-dark: var(--green);
  --warning: #f5a400;
  --warning-soft: #fff4d8;
  --amber: var(--warning);
  --amber-soft: var(--warning-soft);
  --danger: #d92d20;
  --danger-soft: #fde4e1;
  --red: var(--danger);
  --red-soft: var(--danger-soft);
  --orange: #f26a21;
  --shadow: 0 18px 50px rgba(17, 18, 23, 0.14);
  --shadow-soft: 0 8px 24px rgba(17, 18, 23, 0.10);
  --radius-card: 18px;
  --radius-sheet: 24px;
  --radius-control: 14px;
}

* {
  box-sizing: border-box;
}

html {
  min-width: 320px;
  background: var(--bg);
}

body {
  min-width: 320px;
  min-height: 100vh;
  margin: 0;
  color: var(--text);
  background:
    linear-gradient(135deg, rgba(10, 91, 255, 0.10), transparent 34%),
    linear-gradient(315deg, rgba(226, 0, 116, 0.08), transparent 36%),
    var(--bg);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  letter-spacing: 0;
}

button,
input,
select {
  font: inherit;
}

button {
  cursor: pointer;
}

button:disabled {
  cursor: not-allowed;
  opacity: 0.54;
}

svg {
  width: 21px;
  height: 21px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.1;
  stroke-linecap: round;
  stroke-linejoin: round;
}

h1,
h2,
h3,
p {
  margin: 0;
}

pre {
  margin: 0;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.hidden {
  display: none !important;
}

.developer-only {
  display: none !important;
}

.developer-mode .developer-only:not(.hidden) {
  display: block !important;
}

.developer-mode .tesla-config-grid.developer-only:not(.hidden),
.developer-mode .garage-health-grid.developer-only:not(.hidden),
.developer-mode .garage-telemetry-grid.developer-only:not(.hidden) {
  display: grid !important;
}

.developer-mode .simulator-actions.developer-only:not(.hidden) {
  display: flex !important;
}

.plug-stage {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 20px;
}

.phone-shell {
  width: min(100%, 430px);
}

.phone-frame {
  position: relative;
  width: min(100%, 430px);
  height: min(920px, calc(100vh - 40px));
  min-height: 760px;
  overflow: hidden;
  border-radius: 30px;
  background: var(--surface);
  box-shadow: var(--shadow);
}

.app-header {
  min-height: 70px;
  display: grid;
  grid-template-columns: 132px minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  padding: 20px 20px 8px;
  background: var(--surface);
}

.top-context {
  min-width: 0;
}

.screen-title-ghost {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.avatar,
.icon-button {
  min-width: 42px;
  height: 42px;
  display: inline-grid;
  place-items: center;
  border: 0;
  border-radius: 999px;
  font-weight: 900;
}

.app-avatar,
.avatar {
  background: var(--blue);
  color: #fff;
}

.icon-button {
  position: relative;
  background: var(--surface-soft);
  color: var(--text);
}

.icon-button.small {
  min-width: 34px;
  width: 34px;
  height: 34px;
}

.icon-button:hover,
.icon-button:focus-visible {
  background: var(--blue-soft);
  color: var(--blue);
}

.header-actions,
.section-actions,
.hero-top,
.section-head,
.screen-heading,
.battery-row,
.progress-labels,
.simulator-actions,
.legend-row,
.settings-row,
.setting-line,
.range-line,
.sheet-top,
.setup-top,
.tesla-auth-top,
.schedule-editor-top,
.sheet-actions,
.schedule-editor-actions,
.tesla-auth-actions,
.setup-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.header-actions {
  gap: 8px;
}

.sheet-actions.single {
  justify-content: stretch;
}

.sheet-actions.single > button {
  width: 100%;
}

.onboarding-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.brand-mark {
  width: 132px;
  height: 42px;
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: inherit;
}

.account-menu-button:hover,
.account-menu-button:focus-visible {
  background: transparent;
  color: inherit;
  box-shadow: none;
}

.brand-mark img {
  display: block;
  width: 124px;
  max-width: 100%;
  height: auto;
  object-fit: contain;
}

.notification-badge {
  position: absolute;
  top: -3px;
  right: -3px;
  min-width: 18px;
  height: 18px;
  display: inline-grid;
  place-items: center;
  border: 2px solid var(--surface);
  border-radius: 999px;
  color: #fff;
  background: var(--magenta);
  font-size: 0.66rem;
  line-height: 1;
}

.auth-strip {
  min-height: 32px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 0 20px 10px;
  background: var(--surface);
}

.auth-strip span {
  min-width: 0;
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 800;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.auth-strip span.ok {
  color: var(--green);
}

.auth-strip span.warn {
  color: #946000;
}

.auth-strip span.bad {
  color: var(--danger);
}

.auth-strip button {
  min-height: 32px;
  flex: 0 0 auto;
  border: 0;
  border-radius: 999px;
  padding: 0 14px;
  color: var(--blue);
  background: var(--blue-soft);
  font-size: 0.78rem;
  font-weight: 900;
}

.screen-stack {
  height: calc(100% - 112px - 76px);
  overflow: hidden;
}

.screen-view {
  display: none;
  height: 100%;
  overflow: auto;
  padding: 8px 20px 18px;
  background: var(--surface);
  scrollbar-width: none;
}

.screen-view::-webkit-scrollbar {
  display: none;
}

.screen-view.active {
  display: block;
}

#screen-home > .ai-card,
#screen-home > .tesla-card,
#screen-home > .quick-actions,
#screen-home > .hint-card,
#screen-home > .simulator-card,
#screen-home > .quick-grid {
  display: none;
}

.eyebrow,
.hero-label,
.setting-head {
  margin: 0 0 4px;
  color: var(--blue);
  font-size: 0.72rem;
  font-weight: 900;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.screen-heading {
  margin: 0 0 16px;
}

.screen-heading.with-action {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.screen-heading h2,
.big-stat strong,
.garage-hero-copy strong {
  font-size: 2rem;
  line-height: 1;
  letter-spacing: 0;
}

.hero-card,
.ai-card,
.tesla-card,
.charge-empty-card,
.simulator-card,
.state-center-card,
.schedule-explain-card,
.schedule-recommendation-card,
.schedule-mode-card,
.schedule-context-card,
.schedule-panel,
.ready-card,
.automation-card,
.settings-card,
.log-card,
.bar-card,
.big-stat,
.hint-card,
.raw-api-card,
.garage-hero,
.garage-metric-grid article,
.vehicle-data-card {
  margin: 0 0 14px;
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  background: var(--surface);
  box-shadow: var(--shadow-soft);
}

.hero-card {
  min-height: 168px;
  display: grid;
  align-content: space-between;
  padding: 18px;
  background: linear-gradient(135deg, #fff 0%, var(--blue-soft) 58%, var(--magenta-soft) 100%);
}

.hero-card[data-state="charging"] {
  background: linear-gradient(135deg, #fff 0%, var(--blue-soft) 58%, var(--green-soft) 100%);
}

.hero-card[data-state="blocked"] {
  background: linear-gradient(135deg, #fff 0%, var(--warning-soft) 54%, var(--danger-soft) 100%);
}

.hero-card[data-state="setup"] {
  background: linear-gradient(135deg, #fff 0%, var(--warning-soft) 52%, var(--blue-soft) 100%);
}

.hero-card[data-state="plug"] {
  background: linear-gradient(135deg, #fff 0%, var(--green-soft) 58%, var(--blue-soft) 100%);
}

.hero-card[data-state="multi"] {
  background: linear-gradient(135deg, #fff 0%, var(--blue-soft) 55%, var(--surface) 100%);
}

.hero-card h2 {
  font-size: 2.18rem;
  line-height: 0.95;
}

.simplified-home-hero {
  gap: 14px;
  align-content: start;
}

.hero-plan-copy {
  margin: 0;
  color: var(--muted);
  font-size: 0.98rem;
  font-weight: 700;
  line-height: 1.32;
}

.hero-badge,
.chip,
.badge {
  min-height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 999px;
  padding: 0 10px;
  background: var(--blue-soft);
  color: var(--blue);
  font-size: 0.76rem;
  font-weight: 900;
  white-space: nowrap;
}

.chip.ok,
.badge.success,
.state-row.ok,
.garage-health-grid .ok {
  background: var(--green-soft);
  color: var(--green);
}

.chip.warn,
.badge.warn,
.badge.warning,
.state-row.warn,
.garage-health-grid .warn {
  background: var(--warning-soft);
  color: #946000;
}

.chip.bad,
.badge.bad,
.badge.danger-badge,
.state-row.bad {
  background: var(--danger-soft);
  color: var(--danger);
}

.battery-row {
  margin-top: 22px;
}

.battery-row div {
  display: grid;
  gap: 5px;
}

.battery-row div:last-child {
  text-align: right;
}

.battery-row span,
.progress-labels,
.panel-note,
.updated,
small,
.muted {
  color: var(--muted);
}

.battery-row strong {
  font-size: 1.18rem;
}

.progress-track,
.mini-track {
  height: 9px;
  overflow: hidden;
  border-radius: 999px;
  background: var(--border);
}

.progress-track span,
.mini-track i {
  display: block;
  width: 47%;
  height: 100%;
  border-radius: inherit;
  background: var(--blue);
}

.progress-labels {
  margin-top: 8px;
  font-size: 0.78rem;
}

.rate-strip {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin: 0 0 14px;
}

.rate-strip[data-rate-count="2"] {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.rate-strip[data-rate-count="4"] {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.rate-strip[data-rate-layout="api-feeds"] {
  grid-template-columns: 1fr;
}

.rate-strip article,
.quick-grid article,
.device-facts div,
.tesla-metrics div,
.assumption-grid div,
.garage-health-grid div,
.garage-telemetry-grid div,
.tesla-config-grid div {
  display: grid;
  gap: 5px;
  border: 1.5px solid var(--border);
  border-radius: 16px;
  padding: 12px;
  background: var(--surface-soft);
}

.rate-strip article {
  min-height: 112px;
  gap: 7px;
  align-content: start;
  background: #fff;
  overflow: hidden;
  border-width: 1px;
  border-radius: 8px;
  padding: 10px;
  cursor: pointer;
}

.rate-strip[data-rate-layout="api-feeds"] > article:not(.api-rate-feed-tile) {
  display: none;
}

.rate-strip[data-rate-count="4"] article {
  min-height: 104px;
}

.rate-strip article:first-child {
  border-color: rgba(10, 91, 255, 0.25);
  background: linear-gradient(180deg, #f8fbff 0%, #fff 100%);
}

.rate-strip article[data-tone="good"] {
  border-color: rgba(25, 135, 84, 0.32);
}

.rate-strip article[data-tone="mid"] {
  border-color: rgba(240, 190, 80, 0.45);
}

.rate-strip article[data-tone="bad"] {
  border-color: rgba(223, 50, 38, 0.32);
}

.rate-strip article[data-tone="neutral"] {
  border-color: rgba(10, 91, 255, 0.22);
}

.rate-strip span,
.quick-grid span,
.device-facts span,
.tesla-metrics span,
.garage-metric-grid span,
.assumption-grid span,
.tesla-config-grid span,
.receipt-row span {
  color: var(--muted);
  font-size: 0.74rem;
  font-weight: 800;
}

.rate-strip > article > span {
  line-height: 1.05;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.rate-strip strong {
  color: var(--blue);
  font-size: 1.34rem;
  line-height: 0.98;
  font-weight: 950;
  letter-spacing: 0;
  overflow-wrap: anywhere;
}

.rate-strip small {
  min-height: 30px;
  font-size: 0.73rem;
  line-height: 1.22;
  color: var(--muted);
  display: -webkit-box;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.rate-strip em {
  width: max-content;
  max-width: 100%;
  border-radius: 999px;
  min-height: 22px;
  display: inline-flex;
  align-items: center;
  padding: 0 8px;
  color: var(--green);
  background: var(--green-soft);
  font-size: 0.68rem;
  font-style: normal;
  font-weight: 900;
}

.rate-good,
.tag-good {
  color: var(--green) !important;
}

.rate-mid,
.tag-mid {
  color: #946000 !important;
}

.rate-bad,
.tag-bad {
  color: var(--danger) !important;
}

.rate-neutral,
.tag-neutral {
  color: var(--blue) !important;
}

.rate-strip em.tag-mid {
  color: #946000;
  background: var(--warning-soft);
}

.rate-strip em.tag-bad {
  color: var(--danger);
  background: var(--danger-soft);
}

.rate-strip em.tag-neutral {
  color: var(--blue);
  background: var(--blue-soft);
}

.api-rate-feed-tile {
  min-height: 0 !important;
  gap: 12px !important;
  padding: 14px !important;
  border-radius: var(--radius-card) !important;
  background: #fff !important;
}

.api-rate-feed-head {
  display: flex;
  justify-content: space-between;
  align-items: start;
  gap: 12px;
  min-width: 0;
}

.api-rate-feed-head > div {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.api-rate-feed-head span,
.api-rate-feed-item span {
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 900;
  line-height: 1.05;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.api-rate-feed-head strong {
  color: var(--text);
  font-size: 1.08rem;
  line-height: 1.08;
  font-weight: 950;
}

.api-rate-feed-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.api-rate-feed-item {
  position: relative;
  display: grid;
  grid-template-rows: 5px minmax(40px, auto) auto;
  gap: 7px;
  min-width: 0;
  min-height: 104px;
  align-content: start;
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 11px 10px;
  background: var(--surface-soft);
  overflow: hidden;
}

.api-rate-feed-item::before {
  content: "";
  width: 28px;
  height: 5px;
  border-radius: 999px;
  background: var(--blue);
}

.api-rate-feed-item[data-feed-color="yellow"]::before {
  background: var(--warning);
}

.api-rate-feed-item[data-feed-color="green"]::before {
  background: var(--green);
}

.api-rate-feed-item strong {
  align-self: end;
  color: var(--text);
  font-size: 1.22rem;
  line-height: 0.98;
  font-weight: 950;
  white-space: nowrap;
}

.api-rate-feed-item span {
  min-height: 40px;
  display: flex;
  align-items: start;
  overflow-wrap: anywhere;
}

.api-rate-feed-item small {
  max-width: 100%;
}

.api-rate-feed-item.is-pending {
  background: #fff;
  border-style: dashed;
}

.api-rate-feed-item.is-pending strong {
  color: var(--muted);
  font-size: 1.05rem;
  font-weight: 900;
}

.rate-strip .api-rate-feed-item small,
.rate-strip .api-rate-feed-note {
  min-height: 0;
  color: var(--muted);
  font-size: 0.72rem;
  line-height: 1.24;
  display: block;
  overflow: visible;
  -webkit-line-clamp: unset;
}

.rate-strip .api-rate-feed-note {
  font-weight: 750;
  max-width: 100%;
}

.home-metric-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
  margin: 0 0 14px;
}

.home-metric-card,
.simplified-plan-card,
.charge-summary-list-card,
.setup-list {
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  background: var(--surface);
  box-shadow: var(--shadow-soft);
}

.home-metric-card {
  min-height: 88px;
  display: grid;
  align-content: center;
  gap: 6px;
  padding: 14px;
}

button.home-metric-card {
  appearance: none;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.rate-strip article:focus-visible,
button.home-metric-card:focus-visible {
  outline: 3px solid rgba(10, 91, 255, 0.25);
  outline-offset: 2px;
}

.home-metric-card span {
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 900;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.home-metric-card strong {
  color: var(--text);
  font-size: 1.08rem;
  line-height: 1.08;
  overflow-wrap: anywhere;
}

.home-savings-wide {
  grid-template-columns: minmax(0, 1fr);
  gap: 10px;
  min-height: 166px;
  align-content: start;
}

.home-savings-wide-copy {
  display: grid;
  gap: 5px;
  min-width: 0;
}

.home-savings-wide-copy small {
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 760;
  line-height: 1.28;
}

.home-savings-comparison.savings-vs-cost {
  min-height: 52px;
  gap: 7px;
  margin-top: 0;
  border-radius: 16px;
  padding: 6px 8px;
  background: var(--surface-soft);
}

.home-savings-comparison.savings-vs-cost > div:not(.empty-state) {
  min-height: 52px;
  gap: 2px;
}

.home-savings-comparison.savings-vs-cost span {
  font-size: 0.6rem;
  line-height: 1.02;
}

.home-savings-comparison.savings-vs-cost strong {
  font-size: 0.82rem;
  line-height: 1.02;
}

.home-savings-comparison.savings-vs-cost i {
  min-height: 12px;
  border-radius: 999px 999px 6px 6px;
}

.home-charge-source-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
  margin: 0 0 14px;
}

.home-charge-source-card {
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  background: var(--surface);
  box-shadow: var(--shadow-soft);
  padding: 12px;
  display: grid;
  gap: 10px;
}

.home-charge-source-card[data-source-state="on"] {
  border-color: rgba(22, 163, 74, 0.45);
  background: linear-gradient(180deg, rgba(22, 163, 74, 0.1), var(--surface) 70%);
}

.home-charge-source-head {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  align-items: start;
}

.home-charge-source-head span {
  color: var(--muted);
  font-size: 0.7rem;
  font-weight: 900;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.home-charge-source-head strong {
  display: block;
  margin-top: 3px;
  color: var(--text);
  font-size: 0.95rem;
  line-height: 1.1;
}

.home-charge-source-head em {
  border-radius: 999px;
  background: var(--surface-soft);
  color: var(--muted);
  font-size: 0.68rem;
  font-style: normal;
  font-weight: 900;
  padding: 5px 7px;
  white-space: nowrap;
}

.home-charge-source-card[data-source-state="on"] .home-charge-source-head em {
  background: rgba(22, 163, 74, 0.15);
  color: var(--green-dark);
}

.home-charge-toggle {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.home-charge-toggle .charge-state-button {
  min-height: 44px;
  padding: 0 10px;
}

.home-charge-port-actions {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
  border-top: 1px solid var(--border);
  padding-top: 10px;
}

.home-charge-port-actions span {
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 900;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

.home-charge-port-actions .secondary-action {
  min-height: 40px;
  min-width: 168px;
  padding: 0 12px;
  white-space: nowrap;
}

#screen-device > .schedule-overview-card,
#screen-device > .schedule-recommendation-card,
#screen-device > .schedule-mode-card,
#screen-device > .ready-card,
#screen-device > .automation-card,
#screen-device > .schedule-explain-card {
  display: none;
}

.simplified-plan-card {
  display: grid;
  gap: 12px;
  margin: 0 0 14px;
  padding: 16px;
}

.row-between {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.row-between strong {
  font-size: 1.08rem;
  line-height: 1.1;
}

.plan-slider-visual {
  height: 11px;
  overflow: hidden;
  border-radius: 999px;
  background: var(--border);
}

.plan-slider-visual span {
  display: block;
  width: 80%;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--blue), var(--green));
}

.simplified-plan-card p {
  margin: 0;
  color: var(--muted);
  font-size: 0.92rem;
  line-height: 1.35;
}

.setup-list {
  display: grid;
  gap: 0;
  margin: 0 0 14px;
  overflow: hidden;
}

.device-row {
  width: 100%;
  display: grid;
  grid-template-columns: minmax(110px, 0.72fr) minmax(0, 1.28fr);
  gap: 12px;
  align-items: center;
  border: 0;
  border-bottom: 1px solid var(--border);
  padding: 14px 16px;
  background: #fff;
  color: var(--text);
  text-align: left;
}

.device-row:last-child {
  border-bottom: 0;
}

.device-row strong {
  font-size: 0.92rem;
  line-height: 1.12;
}

.device-row span {
  color: var(--muted);
  font-size: 0.84rem;
  font-weight: 700;
  line-height: 1.22;
  overflow-wrap: anywhere;
}

.device-row:focus-visible,
.device-row:hover {
  background: var(--surface-soft);
}

#screen-settings > .device-grid {
  display: none;
}

.settings-setup-list {
  margin-bottom: 16px;
}

.settings-landing-list {
  border: 1px solid var(--border);
  border-radius: 20px;
  background: #fff;
  box-shadow: var(--shadow-soft);
}

.settings-route-row {
  grid-template-columns: 42px minmax(0, 1fr) auto;
  min-height: 68px;
  padding: 12px 14px;
}

.settings-route-row > span {
  display: grid;
  gap: 2px;
  min-width: 0;
  color: var(--text);
}

.settings-route-row small {
  display: block;
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 760;
  line-height: 1.28;
}

.settings-route-row em {
  color: var(--blue);
  font-size: 0.76rem;
  font-style: normal;
  font-weight: 920;
}

.settings-route-icon {
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  border-radius: 14px;
  color: var(--blue);
  background: var(--blue-soft);
  font-size: 0.7rem;
  font-style: normal;
  font-weight: 950;
}

.settings-route-icon::before {
  content: "+";
}

.settings-route-icon.source::before { content: "EV"; }
.settings-route-icon.vehicle::before { content: "V"; }
.settings-route-icon.plug::before { content: "P"; }
.settings-route-icon.utility::before { content: "$"; }
.settings-route-icon.plan::before { content: "AI"; }
.settings-route-icon.alerts::before { content: "!"; }
.settings-route-icon.account::before { content: "S"; }
.settings-route-icon.billing::before { content: "$"; }
.settings-route-icon.support::before { content: "?"; }

.settings-route-icon.plug,
.settings-route-icon.support {
  color: var(--green);
  background: var(--green-soft);
}

.settings-route-icon.utility,
.settings-route-icon.billing,
.settings-route-icon.alerts {
  color: #946000;
  background: var(--warning-soft);
}

.ai-card {
  padding: 16px;
  background: linear-gradient(135deg, #fff 0%, var(--magenta-soft) 100%);
  cursor: pointer;
  transition: padding 0.18s ease, box-shadow 0.18s ease;
}

.ai-card .section-head {
  margin: 0;
}

.ai-card .section-actions {
  gap: 6px;
}

.ai-card.collapsed {
  padding: 10px 12px;
}

.ai-card.collapsed .eyebrow,
.ai-card.collapsed .ai-insight-details {
  display: none;
}

.ai-card.collapsed h2 {
  font-size: 0.98rem;
  line-height: 1.05;
}

.ai-card.collapsed .section-head {
  gap: 8px;
}

.ai-card.collapsed .section-actions .chip {
  min-height: 34px;
  padding: 0 8px;
  font-size: 0.72rem;
}

.ai-card.collapsed .section-actions .secondary-action.compact {
  min-height: 34px;
  padding: 0 12px;
  font-size: 0.78rem;
}

.ai-card.expanded .ai-insight-details {
  display: grid;
}

.ai-insight-details {
  display: grid;
  gap: 10px;
  margin-top: 12px;
}

.ai-assistant-inline {
  justify-self: start;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.ai-assistant-inline svg {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
}

.ai-decision.wait,
.ai-decision.hold {
  background: var(--warning-soft);
  color: #946000;
}

.ai-decision.start {
  background: var(--green-soft);
  color: var(--green);
}

.ai-decision.stop {
  background: var(--danger-soft);
  color: var(--danger);
}

.ai-card p,
.schedule-explain-card p {
  color: var(--muted);
  font-size: 0.9rem;
  line-height: 1.45;
}

.tesla-card,
.charge-empty-card,
.simulator-card,
.state-center-card,
.schedule-explain-card,
.schedule-recommendation-card,
.schedule-mode-card,
.schedule-context-card,
.vehicle-data-card,
.schedule-panel,
.ready-card,
.automation-card,
.settings-card,
.log-card,
.bar-card,
.big-stat,
.raw-api-card {
  padding: 16px;
}

.section-head.tight {
  margin-bottom: 8px;
}

.tesla-vehicle,
.menu-profile-card,
.consent-mini {
  display: grid;
  grid-template-columns: 48px 1fr;
  align-items: center;
  gap: 12px;
  margin-top: 12px;
  border: 1.5px solid var(--border);
  border-radius: 16px;
  padding: 10px;
  background: #fff;
}

.menu-profile-card {
  grid-template-columns: 1fr;
  gap: 3px;
}

.menu-profile-card.expanded {
  grid-template-columns: 46px minmax(0, 1fr) auto;
  gap: 10px;
}

.menu-avatar {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border-radius: 16px;
  background: var(--blue);
  color: #fff;
  font-weight: 950;
}

.menu-profile-copy {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.menu-profile-card strong,
.menu-profile-card span,
.menu-profile-card small {
  display: block;
  min-width: 0;
  overflow-wrap: anywhere;
}

.menu-profile-card span,
.menu-profile-card small {
  color: var(--muted);
  font-size: 0.84rem;
  line-height: 1.35;
}

.menu-profile-card .chip,
.menu-profile-card .menu-avatar {
  display: grid;
  place-items: center;
  color: #fff;
}

.menu-profile-card .chip {
  justify-self: end;
  align-self: center;
  min-width: auto;
  background: var(--blue-soft);
  color: var(--blue);
}

.vehicle-avatar,
.tesla-logo-mark,
.onboarding-symbol,
.setup-hero,
.plug-led {
  display: grid;
  place-items: center;
  border-radius: 16px;
  background: var(--blue-soft);
  color: var(--blue);
}

.vehicle-avatar,
.tesla-logo-mark {
  width: 44px;
  height: 44px;
}

.tesla-vehicle strong,
.garage-hero-copy strong {
  display: block;
}

.tesla-vehicle > div,
.tesla-vehicle-option > span:first-child,
.garage-vehicle-card > span {
  min-width: 0;
}

.tesla-vehicle span,
.garage-hero-copy span,
.garage-hero-copy small {
  display: block;
  color: var(--muted);
  font-size: 0.78rem;
}

.tesla-vehicle strong,
.tesla-vehicle span,
.tesla-vehicle-option strong,
.tesla-vehicle-option small,
.garage-vehicle-card strong,
.garage-vehicle-card small {
  overflow-wrap: anywhere;
}

.tesla-vehicle-picker {
  margin-top: 12px;
}

.tesla-vehicle-options {
  display: grid;
  gap: 8px;
}

.tesla-vehicle-option {
  width: 100%;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  border: 1.5px solid var(--border);
  border-radius: 16px;
  padding: 12px;
  background: #fff;
  color: var(--text);
  text-align: left;
}

.tesla-vehicle-option.active {
  border-color: var(--blue);
  background: var(--blue-soft);
}

.tesla-vehicle-option > span:first-child {
  display: grid;
  gap: 2px;
}

.vehicle-row-copy {
  display: grid;
  min-width: 0;
  gap: 2px;
}

.tesla-vehicle-option strong {
  font-size: 0.98rem;
  line-height: 1.1;
}

.tesla-vehicle-option small {
  color: var(--muted);
  font-size: 0.76rem;
  line-height: 1.25;
}

.tesla-vehicle-status,
.garage-vehicle-card em,
.vehicle-row-bubbles {
  justify-self: end;
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 2px;
  text-align: right;
  font-style: normal;
}

.tesla-vehicle-status b,
.garage-vehicle-card em strong,
.vehicle-row-bubbles b,
.vehicle-row-bubbles em {
  display: inline-flex;
  min-height: 28px;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  padding: 0 9px;
  background: var(--surface-soft);
  color: var(--muted);
  font-style: normal;
  font-weight: 900;
  white-space: nowrap;
}

.vehicle-row-bubbles b {
  background: #fff;
  color: var(--text);
}

.tesla-vehicle-status b,
.garage-vehicle-card em strong,
.vehicle-row-bubbles b {
  font-size: 0.95rem;
  line-height: 1;
}

.tesla-vehicle-status em,
.garage-vehicle-card em span,
.vehicle-row-bubbles em {
  color: var(--muted);
  font-size: 0.74rem;
  font-style: normal;
  font-weight: 850;
  line-height: 1.15;
}

.tesla-metrics,
.device-facts,
.assumption-grid,
.price-explain-grid,
.tesla-config-grid,
.garage-health-grid,
.garage-telemetry-grid,
.garage-metric-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin-top: 12px;
}

.tesla-config-grid,
.device-facts,
.garage-health-grid,
.garage-telemetry-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

#aiAssistantInputs.assumption-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

#aiAssistantInputs.assumption-grid div {
  min-width: 0;
  overflow: hidden;
  align-content: start;
}

#aiAssistantInputs.assumption-grid div[data-assumption="target"] {
  grid-column: 1 / -1;
}

#aiAssistantInputs.assumption-grid strong {
  min-width: 0;
  max-width: 100%;
  overflow-wrap: anywhere;
  word-break: break-word;
  font-size: clamp(1rem, 4.4vw, 1.35rem);
  line-height: 1.08;
}

#aiAssistantInputs.assumption-grid span {
  line-height: 1.1;
}

.price-explain-grid {
  grid-template-columns: 1fr;
  margin-top: 12px;
}

.price-explain-grid div {
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  border: 1.5px solid var(--border);
  border-radius: 14px;
  padding: 12px 14px;
  background: var(--surface-soft);
}

.price-explain-grid span {
  flex: 0 0 auto;
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 900;
  line-height: 1.1;
  text-transform: uppercase;
}

.price-explain-grid strong {
  min-width: 0;
  color: var(--text);
  font-size: 1rem;
  font-weight: 950;
  line-height: 1.12;
  text-align: right;
  overflow-wrap: normal;
  word-break: normal;
  hyphens: none;
}

.price-feed-card {
  display: grid;
  gap: 12px;
  margin-top: 12px;
  border: 1.5px solid var(--border);
  border-radius: 16px;
  padding: 14px;
  background: #fff;
}

.price-feed-card.compact {
  margin: 8px 0 12px;
  padding: 12px;
  background: var(--surface-soft);
}

.price-feed-header,
.price-feed-row {
  display: grid;
  grid-template-columns: minmax(86px, 0.9fr) minmax(116px, 1.25fr) auto;
  gap: 10px;
  align-items: center;
}

.price-feed-header strong {
  grid-column: 1 / span 2;
  color: var(--text);
  font-size: 0.88rem;
  font-weight: 950;
}

.price-feed-header span {
  justify-self: end;
  color: var(--muted);
  font-size: 0.68rem;
  font-weight: 900;
  text-transform: uppercase;
}

.price-feed-bars {
  display: grid;
  gap: 10px;
}

.price-feed-row strong,
.price-feed-row span,
.price-feed-row em {
  min-width: 0;
}

.price-feed-label {
  display: grid;
  gap: 2px;
}

.price-feed-label strong {
  color: var(--text);
  font-size: 0.82rem;
  font-weight: 950;
  line-height: 1.08;
}

.price-feed-label span {
  color: var(--muted);
  font-size: 0.68rem;
  font-weight: 850;
  line-height: 1.1;
}

.price-feed-track {
  height: 14px;
  border-radius: 999px;
  overflow: hidden;
  background: var(--surface-soft);
}

.price-feed-track i {
  display: block;
  height: 100%;
  min-width: 8px;
  border-radius: inherit;
}

.price-feed-track .feed-blue {
  background: var(--blue);
}

.price-feed-track .feed-yellow {
  background: var(--warning);
}

.price-feed-track .feed-green {
  background: var(--green);
}

.price-feed-value {
  justify-self: end;
  color: var(--text);
  font-size: 0.84rem;
  font-weight: 950;
  white-space: nowrap;
}

.tesla-config-grid .wide {
  grid-column: 1 / -1;
}

.plug-detail-card.plug-not-configured {
  background: var(--surface-soft);
}

.plug-wifi-action {
  margin-top: 12px;
}

.plug-wifi-action small {
  display: block;
  margin-top: 2px;
  color: var(--muted);
  font-size: 0.78rem;
  line-height: 1.3;
}

.vehicle-data-card {
  display: grid;
  gap: 10px;
}

.range-meter {
  height: 14px;
  overflow: hidden;
  border-radius: 999px;
  background: var(--surface-soft);
}

.range-meter span {
  display: block;
  width: 0%;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--blue), var(--green));
}

.range-labels {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  color: var(--muted);
  font-size: 0.75rem;
  font-weight: 850;
}

.range-labels strong {
  color: var(--text);
}

.vehicle-data-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.vehicle-data-grid div {
  display: grid;
  gap: 4px;
  border-radius: 12px;
  padding: 10px;
  background: var(--surface-soft);
}

.vehicle-data-grid span {
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 850;
}

.vehicle-data-grid strong {
  font-size: 0.95rem;
}

.inline-link-button {
  width: max-content;
  min-height: 34px;
  border: 0;
  border-radius: 999px;
  padding: 0;
  background: transparent;
  color: var(--blue);
  font-size: 0.86rem;
  font-weight: 900;
}

.journey-pills,
.onboarding-steps,
.settings-list,
.compact-list {
  display: grid;
  gap: 8px;
  margin-top: 12px;
}

.menu-action-grid,
.menu-status-grid,
.device-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.menu-action-grid,
.menu-status-grid {
  margin-top: 12px;
}

.menu-action-grid button,
.menu-status-grid button,
.device-tile {
  min-width: 0;
  border: 1.5px solid var(--border);
  border-radius: 18px;
  padding: 12px;
  background: #fff;
  color: var(--text);
  text-align: left;
}

.menu-action-grid button {
  display: grid;
  gap: 4px;
  align-content: start;
  min-height: 88px;
}

.menu-status-grid button {
  display: grid;
  gap: 3px;
  min-height: 72px;
  align-content: center;
  background: var(--surface-soft);
}

.menu-action-grid strong,
.menu-status-grid strong,
.device-tile h3 {
  font-size: 0.98rem;
  line-height: 1.1;
}

.menu-action-grid span,
.menu-status-grid span,
.device-tile p {
  color: var(--muted);
  font-size: 0.78rem;
  line-height: 1.3;
}

.device-grid {
  margin-bottom: 14px;
}

.device-tile {
  display: grid;
  gap: 6px;
  min-height: 152px;
  align-content: start;
  box-shadow: var(--shadow-soft);
}

.device-tile .positive,
.device-tile p.positive {
  color: var(--green);
  font-weight: 850;
}

.device-icon {
  width: 38px;
  height: 38px;
  border-radius: 14px;
  display: block;
  background: var(--blue-soft);
  position: relative;
}

.device-icon::before,
.device-icon::after {
  content: "";
  position: absolute;
  border-radius: 999px;
}

.device-icon.plug {
  background: var(--green-soft);
}

.device-icon.plug::before {
  width: 16px;
  height: 18px;
  left: 11px;
  top: 10px;
  border: 3px solid var(--green);
  border-top-width: 6px;
  border-radius: 7px;
}

.device-icon.car {
  background: var(--blue-soft);
}

.device-icon.car::before {
  width: 24px;
  height: 11px;
  left: 7px;
  top: 15px;
  background: var(--blue);
}

.device-icon.utility {
  background: var(--warning-soft);
}

.device-icon.utility::before {
  width: 4px;
  height: 24px;
  left: 17px;
  top: 7px;
  background: var(--warning);
}

.device-icon.utility::after {
  width: 24px;
  height: 4px;
  left: 7px;
  top: 16px;
  background: var(--warning);
}

.device-icon.home {
  background: var(--magenta-soft);
}

.device-icon.home::before {
  width: 22px;
  height: 16px;
  left: 8px;
  top: 16px;
  background: var(--magenta);
  border-radius: 3px;
}

.device-icon.home::after {
  width: 18px;
  height: 18px;
  left: 10px;
  top: 8px;
  background: var(--magenta);
  transform: rotate(45deg);
  border-radius: 3px;
}

.capability-list {
  display: grid;
  gap: 8px;
  margin-top: 12px;
}

.cap-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 10px 12px;
  background: var(--surface-soft);
}

.cap-row span {
  color: var(--muted);
  font-size: 0.86rem;
}

.journey-pills {
  grid-template-columns: repeat(4, 1fr);
}

.journey-pills span {
  min-height: 30px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  background: var(--surface-soft);
  color: var(--muted);
  font-size: 0.7rem;
  font-weight: 850;
}

.journey-pills span.active,
.journey-pills span.complete {
  background: var(--blue);
  color: #fff;
}

.tesla-actions,
.utility-actions {
  display: flex;
  gap: 8px;
  margin-top: 12px;
}

.quick-actions {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 10px;
  margin: 0 0 14px;
}

.charge-button-group {
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
}

.primary-action,
.secondary-action,
.charge-state-button,
.settings-pair-shortcut,
.primary,
.secondary,
.danger {
  min-height: 52px;
  border: 0;
  border-radius: var(--radius-control);
  padding: 0 14px;
  font-weight: 900;
}

.primary-action,
.primary {
  background: var(--blue);
  color: #fff;
}

.secondary-action,
.secondary {
  background: var(--surface-soft);
  color: var(--text);
}

.danger {
  background: var(--danger);
  color: #fff;
}

.primary-action.compact,
.secondary-action.compact,
.settings-pair-shortcut,
.primary.compact,
.secondary.compact {
  min-height: 42px;
  border-radius: 999px;
  padding: 0 16px;
  font-size: 0.84rem;
}

.primary-action.full,
.secondary-action.full {
  width: 100%;
}

.charge-state-button {
  min-height: 58px;
  display: grid;
  grid-template-columns: 20px 1fr;
  align-items: center;
  justify-items: start;
  gap: 8px;
  background: var(--surface-soft);
  color: var(--text);
  text-align: left;
}

.charge-state-button.on.active,
.charge-state-button.on[aria-pressed="true"] {
  background: var(--blue);
  color: #fff;
}

.charge-state-button.off.active,
.charge-state-button.off[aria-pressed="true"] {
  background: var(--text);
  color: #fff;
}

.charge-state-button.pending {
  outline: 3px solid var(--warning-soft);
}

.hint-card {
  display: none;
  align-items: center;
  gap: 12px;
  padding: 14px;
}

.hint-card.visible {
  display: flex;
}

.simulator-body {
  display: grid;
  grid-template-columns: 128px 1fr;
  align-items: center;
  gap: 16px;
  margin-top: 12px;
}

.plug-visual {
  position: relative;
  width: 120px;
  height: 120px;
  display: grid;
  place-items: center;
  border-radius: 32px;
  background: linear-gradient(135deg, var(--surface-soft), #fff);
}

.plug-face {
  position: relative;
  width: 76px;
  height: 76px;
  border: 2px solid var(--border);
  border-radius: 24px;
  background: #fff;
}

.socket {
  position: absolute;
  width: 8px;
  height: 22px;
  top: 22px;
  border-radius: 999px;
  background: var(--border-strong);
}

.socket-left {
  left: 23px;
}

.socket-right {
  right: 23px;
}

.socket-ground {
  position: absolute;
  left: 50%;
  bottom: 16px;
  width: 12px;
  height: 8px;
  border-radius: 999px;
  background: var(--border-strong);
  transform: translateX(-50%);
}

.plug-led {
  position: absolute;
  right: 10px;
  top: 10px;
  width: 10px;
  height: 10px;
  border-radius: 999px;
  background: var(--green);
}

.energy-ring {
  position: absolute;
  inset: 8px;
  border: 2px solid var(--blue-soft);
  border-radius: 32px;
}

.plug-visual[data-state="charging"] .energy-ring {
  border-color: var(--green);
  box-shadow: 0 0 0 8px var(--green-soft);
}

.plug-visual[data-state="idle"] .plug-led {
  background: var(--soft);
}

.simulator-copy,
.battery-chip {
  display: grid;
  gap: 8px;
}

.battery-chip {
  grid-template-columns: auto 1fr auto;
  align-items: center;
}

.quick-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
}

.quick-grid article {
  min-height: 82px;
  align-content: center;
}

.legacy-plan-section {
  display: none !important;
}

.plan-rate-context-card,
.plan-global-card {
  display: grid;
  gap: 14px;
  margin: 0 0 14px;
  border: 1.5px solid var(--border);
  border-radius: var(--radius-card);
  padding: 16px;
  background: #fff;
  box-shadow: var(--shadow-soft);
}

.plan-rate-context-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
  align-items: start;
}

.plan-rate-context-head > div {
  min-width: 0;
  display: grid;
  gap: 5px;
}

.plan-rate-context-head h2,
.plan-global-card h2 {
  margin: 0;
  color: var(--text);
  font-size: clamp(1.36rem, 5vw, 1.68rem);
  line-height: 1.02;
  letter-spacing: 0;
}

.plan-rate-context-head p:not(.eyebrow),
.plan-global-card .panel-note,
.plan-rule-panel p {
  margin: 0;
  color: var(--muted);
  font-size: 0.86rem;
  line-height: 1.28;
  font-weight: 760;
}

.plan-rate-context-head .chip {
  max-width: 116px;
  text-align: center;
}

.plan-rate-visual {
  display: grid;
  gap: 8px;
  border-radius: 18px;
  padding: 10px;
  background: var(--surface-soft);
}

.plan-rate-signals {
  display: grid;
  gap: 8px;
}

.plan-rate-signals.muted .plan-signal-row {
  background: rgba(255, 255, 255, 0.74);
}

.plan-signal-row {
  display: grid;
  grid-template-columns: 12px minmax(0, 1fr) minmax(84px, auto);
  align-items: center;
  gap: 9px;
  min-width: 0;
  padding: 10px;
  border: 1.5px solid rgba(214, 220, 232, 0.88);
  border-radius: 14px;
  background: #fff;
}

.plan-signal-row.pending {
  border-style: dashed;
  color: var(--muted);
}

.plan-signal-dot {
  width: 10px;
  height: 32px;
  border-radius: 999px;
  background: #cdd5e1;
}

.plan-signal-dot.blue {
  background: var(--blue);
}

.plan-signal-dot.yellow {
  background: var(--warning);
}

.plan-signal-dot.green {
  background: var(--green);
}

.plan-signal-dot.gray {
  background: #cdd5e1;
}

.plan-signal-main,
.plan-signal-value {
  min-width: 0;
  display: grid;
  gap: 2px;
}

.plan-signal-main strong {
  color: var(--text);
  font-size: 0.9rem;
  line-height: 1.04;
  letter-spacing: 0;
}

.plan-signal-main span,
.plan-signal-value span {
  color: var(--muted);
  font-size: 0.68rem;
  line-height: 1.16;
  font-weight: 780;
}

.plan-signal-value {
  justify-items: end;
  text-align: right;
}

.plan-signal-value strong {
  color: var(--text);
  font-size: 0.98rem;
  line-height: 1.02;
  white-space: nowrap;
}

.plan-signal-row.pending .plan-signal-value strong {
  color: var(--muted);
  font-size: 0.76rem;
}

.plan-rate-insight {
  margin: 0;
  color: var(--muted);
  font-size: 0.72rem;
  line-height: 1.24;
  font-weight: 820;
}

.plan-feed-bars {
  display: grid;
  gap: 9px;
}

.plan-feed-row {
  display: grid;
  grid-template-columns: minmax(74px, 0.85fr) minmax(90px, 1.3fr) auto;
  gap: 9px;
  align-items: center;
  min-width: 0;
}

.plan-feed-row span,
.plan-feed-row strong {
  min-width: 0;
  font-size: 0.72rem;
  font-weight: 950;
}

.plan-feed-row span {
  overflow: hidden;
  color: var(--muted);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.plan-feed-row strong {
  color: var(--text);
  white-space: nowrap;
}

.plan-feed-row.pending {
  opacity: 0.68;
}

.plan-feed-row i {
  height: 13px;
  overflow: hidden;
  border-radius: 999px;
  background: #e5eaf3;
}

.plan-feed-row b {
  display: block;
  height: 100%;
  min-width: 8px;
  border-radius: inherit;
}

.plan-feed-row b.blue {
  background: var(--blue);
}

.plan-feed-row b.yellow {
  background: var(--warning);
}

.plan-feed-row b.green {
  background: var(--green);
}

.plan-hourly-bars {
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  align-items: end;
  gap: 7px;
  height: 86px;
}

.plan-hourly-bars span {
  min-height: 18px;
  border-radius: 999px 999px 7px 7px;
}

.plan-hourly-bars .low {
  background: var(--green);
}

.plan-hourly-bars .mid {
  background: var(--warning);
}

.plan-hourly-bars .peak {
  background: var(--blue);
}

.plan-tou-bars,
.plan-flat-rate-bar {
  display: flex;
  min-height: 42px;
  overflow: hidden;
  border-radius: 999px;
  background: #e5eaf3;
}

.plan-tou-bars span,
.plan-flat-rate-bar span {
  display: grid;
  place-items: center;
  min-width: 0;
  color: #fff;
  font-size: 0.72rem;
  font-weight: 950;
}

.plan-tou-bars .off,
.plan-flat-rate-bar span {
  background: var(--green);
}

.plan-tou-bars .mid {
  background: var(--warning);
}

.plan-tou-bars .peak {
  background: var(--blue);
}

.plan-flat-rate-bar.muted span {
  background: #cdd5e1;
}

.plan-rate-legend {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 8px;
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 900;
}

.plan-rate-legend strong {
  color: var(--text);
}

.plan-secondary-tag {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 10px;
  align-items: center;
  border: 1.5px solid rgba(245, 158, 11, 0.32);
  border-radius: 16px;
  padding: 10px;
  background: var(--amber-soft);
}

.plan-secondary-tag span {
  border-radius: 999px;
  padding: 8px 10px;
  background: #fff;
  color: #9a6700;
  font-size: 0.72rem;
  font-weight: 950;
  white-space: nowrap;
}

.plan-secondary-tag strong {
  min-width: 0;
  color: var(--text);
  font-size: 0.78rem;
  line-height: 1.22;
}

.plan-global-rule-list,
.plan-global-rule,
.plan-rule-panel {
  display: grid;
  gap: 10px;
}

.plan-rule-tile {
  width: 100%;
  min-height: 86px;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  border: 2px solid var(--border);
  border-radius: 18px;
  padding: 13px;
  background: #fff;
  color: var(--text);
  text-align: left;
}

.plan-global-rule.is-on .plan-rule-tile {
  border-color: rgba(25, 135, 84, 0.36);
  background: var(--green-soft);
}

.plan-global-rule.is-off .plan-rule-tile {
  border-color: rgba(220, 53, 69, 0.2);
  background: rgba(255, 241, 242, 0.72);
}

.plan-global-rule.is-open .plan-rule-tile {
  border-color: var(--blue);
  box-shadow: 0 0 0 2px rgba(10, 91, 255, 0.12);
}

.plan-global-rule.is-disabled .plan-rule-tile {
  border-color: var(--border);
  background: #f3f5f9;
  color: var(--muted);
  cursor: not-allowed;
  opacity: 0.72;
  box-shadow: none;
}

.plan-global-rule.is-disabled .plan-rule-icon {
  background: #e6ebf3;
}

.plan-global-rule.is-disabled .plan-rule-icon::before {
  border-color: #9aa3b2;
}

.plan-global-rule.is-disabled .plan-rule-icon::after {
  background: #9aa3b2;
}

.plan-rule-icon {
  width: 42px;
  height: 42px;
  border-radius: 14px;
  background: var(--blue-soft);
  position: relative;
}

.plan-rule-icon.ready::before,
.plan-rule-icon.time::before {
  position: absolute;
  inset: 12px;
  border: 3px solid var(--blue);
  border-radius: 999px;
  content: "";
}

.plan-rule-icon.ready::after {
  position: absolute;
  left: 20px;
  top: 8px;
  width: 5px;
  height: 21px;
  border-radius: 999px;
  background: var(--blue);
  transform: rotate(34deg);
  content: "";
}

.plan-rule-icon.time::after {
  position: absolute;
  left: 20px;
  top: 12px;
  width: 4px;
  height: 14px;
  border-radius: 999px;
  background: var(--blue);
  box-shadow: 8px 8px 0 -1px var(--blue);
  content: "";
}

.plan-rule-tile span:not(.plan-rule-icon) {
  min-width: 0;
  display: grid;
  gap: 4px;
}

.plan-rule-tile strong {
  color: var(--text);
  font-size: 1.02rem;
  line-height: 1.04;
  font-weight: 950;
}

.plan-rule-tile small {
  overflow-wrap: anywhere;
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 850;
  line-height: 1.18;
}

.plan-rule-tile em {
  border-radius: 999px;
  padding: 8px 11px;
  background: rgba(220, 53, 69, 0.12);
  color: var(--danger);
  font-size: 0.76rem;
  font-style: normal;
  font-weight: 950;
  white-space: nowrap;
}

.plan-global-rule.is-on .plan-rule-tile em {
  background: #fff;
  color: var(--green);
}

.plan-global-rule.is-disabled .plan-rule-tile em {
  background: #fff;
  color: var(--muted);
}

.plan-rule-panel {
  border: 2px solid rgba(10, 91, 255, 0.18);
  border-radius: 18px;
  padding: 13px;
  background: var(--surface-soft);
}

.plan-value-field {
  display: grid;
  grid-template-columns: minmax(86px, 0.75fr) minmax(0, 1fr);
  gap: 10px;
  align-items: center;
}

.plan-value-field span {
  color: var(--muted);
  font-size: 0.76rem;
  font-weight: 950;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.plan-value-field input,
.plan-value-field select {
  width: 100%;
  min-height: 48px;
  border: 1.5px solid var(--border);
  border-radius: 16px;
  padding: 0 12px;
  background: #fff;
  color: var(--text);
  font: inherit;
  font-weight: 900;
}

.schedule-context-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.schedule-target-actions {
  display: grid;
  justify-items: end;
  gap: 8px;
  flex: 0 0 auto;
}

.schedule-overview-card {
  align-items: stretch;
}

.schedule-master-toggle {
  display: grid;
  grid-template-columns: auto auto;
  align-items: center;
  gap: 8px;
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 950;
  text-transform: uppercase;
}

.schedule-master-toggle input {
  width: 48px;
  height: 28px;
  appearance: none;
  border: 0;
  border-radius: 999px;
  background: var(--surface-soft);
  box-shadow: inset 0 0 0 1.5px var(--border);
  position: relative;
  cursor: pointer;
}

.schedule-master-toggle input::before {
  content: "";
  width: 22px;
  height: 22px;
  border-radius: 999px;
  background: #fff;
  box-shadow: 0 3px 8px rgba(15, 23, 42, 0.16);
  position: absolute;
  top: 3px;
  left: 3px;
  transition: transform 140ms ease;
}

.schedule-master-toggle input:checked {
  background: var(--green);
  box-shadow: none;
}

.schedule-master-toggle input:checked::before {
  transform: translateX(20px);
}

.schedule-recommendation-card {
  display: grid;
  gap: 12px;
}

.schedule-recommendation-list,
.schedule-target-list {
  display: grid;
  gap: 10px;
}

.schedule-recommendation-item,
.schedule-target-item {
  width: 100%;
  border: 1.5px solid var(--border);
  border-radius: 18px;
  background: #fff;
  color: var(--text);
  text-align: left;
}

.schedule-recommendation-item {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 6px 12px;
  padding: 14px;
}

.schedule-recommendation-item span {
  color: var(--blue);
  font-size: 0.72rem;
  font-weight: 950;
  text-transform: uppercase;
}

.schedule-recommendation-item strong {
  grid-column: 1;
  color: var(--text);
  font-size: 0.86rem;
  line-height: 1.25;
}

.schedule-recommendation-item em {
  grid-column: 2;
  grid-row: 1 / span 2;
  align-self: center;
  border-radius: 999px;
  padding: 8px 10px;
  background: var(--blue-soft);
  color: var(--blue);
  font-size: 0.72rem;
  font-style: normal;
  font-weight: 950;
}

.schedule-target-item {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  padding: 14px;
}

.schedule-target-item.active {
  border-color: rgba(25, 135, 84, 0.28);
  background: var(--green-soft);
}

.schedule-target-item div {
  min-width: 0;
  display: grid;
  gap: 4px;
}

.schedule-target-item div:last-child {
  justify-items: end;
}

.schedule-target-item span,
.schedule-target-item small {
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 900;
}

.schedule-target-item span {
  text-transform: uppercase;
}

.schedule-target-item strong {
  color: var(--text);
  font-size: 0.96rem;
  font-weight: 950;
}

.schedule-target-item em {
  color: var(--green);
  font-size: 0.72rem;
  font-style: normal;
  font-weight: 950;
}

.schedule-target-item button {
  min-height: 34px;
  border: 0;
  border-radius: 999px;
  padding: 0 12px;
  background: var(--blue);
  color: #fff;
  font-size: 0.74rem;
  font-weight: 950;
}

.schedule-device-plan {
  display: grid;
  gap: 10px;
  border: 1.5px solid var(--border);
  border-radius: 18px;
  padding: 12px;
  background: #fff;
}

.schedule-device-plan.active {
  border-color: rgba(25, 135, 84, 0.28);
  background: linear-gradient(180deg, rgba(232, 248, 239, 0.9), #fff 62%);
}

.schedule-device-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
}

.schedule-device-head div {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.schedule-device-head span,
.schedule-device-head small {
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 900;
}

.schedule-device-head span {
  color: var(--blue);
  text-transform: uppercase;
}

.schedule-device-head strong {
  overflow: hidden;
  color: var(--text);
  font-size: 0.98rem;
  font-weight: 950;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.schedule-device-head button {
  min-height: 34px;
  border: 0;
  border-radius: 999px;
  padding: 0 12px;
  background: var(--blue-soft);
  color: var(--blue);
  font-size: 0.74rem;
  font-weight: 950;
}

.schedule-rule-list {
  display: grid;
  gap: 8px;
}

.schedule-rule-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  border: 1.5px solid var(--border);
  border-radius: 14px;
  padding: 10px;
  background: rgba(248, 249, 251, 0.9);
}

.schedule-rule-row.enabled {
  border-color: rgba(10, 91, 255, 0.24);
  background: #fff;
}

.schedule-rule-row.utility-required:not(.enabled) {
  opacity: 0.68;
}

.schedule-rule-row.unsupported:not(.enabled) {
  opacity: 0.58;
}

.schedule-rule-row > button {
  min-width: 0;
  min-height: 0;
  border: 0;
  padding: 0;
  background: transparent;
  color: inherit;
  text-align: left;
}

.schedule-rule-row span {
  display: block;
  color: var(--text);
  font-size: 0.86rem;
  font-weight: 950;
}

.schedule-rule-row em {
  display: inline-flex;
  width: fit-content;
  min-height: 22px;
  align-items: center;
  border-radius: 999px;
  margin-bottom: 5px;
  padding: 0 8px;
  background: var(--blue-soft);
  color: var(--blue);
  font-size: 0.66rem;
  font-style: normal;
  font-weight: 950;
  text-transform: uppercase;
}

.schedule-rule-row.enabled em {
  background: var(--green-soft);
  color: var(--green);
}

.schedule-rule-row strong {
  display: block;
  margin-top: 3px;
  overflow-wrap: anywhere;
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 850;
}

.schedule-rule-switch {
  position: relative;
  display: inline-grid;
  align-items: center;
}

.schedule-rule-switch input {
  position: absolute;
  inline-size: 1px;
  block-size: 1px;
  opacity: 0;
}

.schedule-rule-switch span {
  position: relative;
  width: 46px;
  height: 28px;
  border-radius: 999px;
  background: var(--surface-soft);
  box-shadow: inset 0 0 0 1.5px var(--border);
}

.schedule-rule-switch span::before {
  position: absolute;
  top: 3px;
  left: 3px;
  width: 22px;
  height: 22px;
  border-radius: 999px;
  background: #fff;
  box-shadow: 0 3px 8px rgba(15, 23, 42, 0.16);
  content: "";
  transition: transform 140ms ease;
}

.schedule-rule-switch input:checked + span {
  background: var(--green);
  box-shadow: none;
}

.schedule-rule-switch input:checked + span::before {
  transform: translateX(18px);
}

.schedule-add-tile {
  display: grid;
  gap: 6px;
  width: 100%;
  border: 2px dashed var(--border);
  border-radius: 18px;
  padding: 16px;
  background:
    repeating-linear-gradient(90deg, transparent 0 16px, rgba(107, 114, 128, 0.08) 16px 28px),
    var(--surface-soft);
  color: var(--muted);
  text-align: left;
}

.schedule-add-tile span {
  width: 100%;
  height: 2px;
  border-top: 2px dashed rgba(107, 114, 128, 0.28);
}

.schedule-add-tile strong {
  color: var(--blue);
  font-size: 0.98rem;
  font-weight: 950;
}

.schedule-add-tile small {
  color: var(--muted);
  font-size: 0.76rem;
  font-weight: 850;
  line-height: 1.3;
}

.schedule-mode-grid,
.period-tabs,
.day-tabs,
.segmented-control,
.boost-duration-grid,
.limit-option-grid,
.rate-type-control {
  display: grid;
  gap: 8px;
}

.schedule-mode-grid {
  grid-template-columns: 1fr;
}

.period-tabs,
.segmented-control,
.rate-type-control {
  grid-template-columns: repeat(3, 1fr);
  margin: 0 0 14px;
  border-radius: 999px;
  padding: 4px;
  background: var(--surface-soft);
}

.rate-type-control {
  grid-template-columns: repeat(4, 1fr);
  margin-top: 8px;
}

.day-tabs {
  grid-template-columns: repeat(7, 1fr);
  margin-bottom: 14px;
}

.schedule-mode-grid button,
.period-tabs button,
.day-tabs button,
.segmented-control button,
.boost-duration-grid button,
.limit-option-grid button,
.rate-type-control button {
  min-height: 40px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 900;
}

.schedule-mode-grid button {
  min-height: 82px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-content: center;
  align-items: center;
  gap: 4px;
  border: 1.5px solid var(--border);
  border-radius: 16px;
  background: #fff;
  text-align: left;
  padding: 12px;
}

.schedule-mode-grid button strong,
.schedule-mode-grid button span,
.schedule-mode-grid button small {
  min-width: 0;
}

.schedule-mode-grid button strong,
.schedule-mode-grid button span,
.schedule-mode-grid button small {
  grid-column: 1;
}

.schedule-mode-grid button span,
.schedule-mode-grid button small {
  color: var(--muted);
}

.schedule-mode-grid button small {
  font-size: 0.72rem;
  font-weight: 850;
}

.schedule-mode-grid button em {
  grid-column: 2;
  grid-row: 1 / span 3;
  align-self: center;
  border-radius: 999px;
  padding: 7px 10px;
  background: var(--blue-soft);
  color: var(--blue);
  font-size: 0.72rem;
  font-style: normal;
  font-weight: 950;
}

.schedule-mode-grid button.active,
.period-tabs button.active,
.day-tabs button.active,
.segmented-control button.active,
.boost-duration-grid button.active,
.limit-option-grid button.active,
.rate-type-control button.active {
  background: var(--blue);
  color: #fff;
}

.schedule-mode-grid button.active span,
.schedule-mode-grid button.active small {
  color: rgba(255, 255, 255, 0.82);
}

.schedule-mode-grid button.active em {
  background: rgba(255, 255, 255, 0.2);
  color: #fff;
}

.time-window-summary {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin: 14px 0 12px;
}

.time-window-summary article {
  display: grid;
  gap: 4px;
  min-height: 68px;
  align-content: center;
  border: 1.5px solid var(--border);
  border-radius: 16px;
  padding: 10px;
  background: #fff;
}

.time-window-summary span,
.schedule-line .block small {
  color: var(--muted);
  font-size: 0.68rem;
  font-weight: 900;
  text-transform: uppercase;
}

.time-window-summary strong {
  color: var(--text);
  font-size: 0.9rem;
  font-weight: 950;
}

.schedule-line {
  display: grid;
  gap: 5px;
  margin-top: 12px;
}

.schedule-line .block {
  display: grid;
  place-items: center;
  align-content: center;
  gap: 3px;
  min-width: 0;
  min-height: 52px;
  border: 0;
  border-radius: 14px;
  padding: 8px 6px;
  color: var(--text);
  text-align: center;
}

.schedule-line .block span {
  font-size: 0.76rem;
  font-weight: 950;
}

.schedule-line .block small {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-transform: none;
}

.schedule-line .block.peak {
  background: var(--danger-soft);
  color: var(--danger);
}

.schedule-line .block.wait {
  background: var(--warning-soft);
  color: #946000;
}

.schedule-line .block.charge {
  background: var(--blue-soft);
  color: var(--blue);
}

.schedule-line .block.done {
  background: var(--green-soft);
  color: var(--green);
}

.schedule-axis {
  display: flex;
  justify-content: space-between;
  margin-top: 8px;
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 900;
}

.time-rule-list {
  display: grid;
  gap: 8px;
  margin-top: 14px;
}

.schedule-outcome-card {
  display: grid;
  gap: 10px;
  margin-top: 14px;
  border: 1.5px solid var(--border);
  border-radius: 18px;
  padding: 14px;
  background: linear-gradient(180deg, #fff, var(--surface-soft));
}

.schedule-outcome-card .section-head {
  margin: 0;
}

.schedule-outcome-list {
  margin-top: 0;
}

.time-rule-list .rule {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 44px;
  border: 1.5px solid var(--border);
  border-radius: 14px;
  padding: 10px 12px;
  background: #fff;
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 850;
  text-align: left;
  cursor: pointer;
}

.time-rule-list .rule.outcome {
  align-items: flex-start;
  background: #fff;
}

.time-rule-list .rule.enabled {
  border-color: rgba(25, 135, 84, 0.24);
  background: var(--green-soft);
  color: var(--green);
}

.time-rule-list .rule span {
  flex: 0 0 92px;
  color: var(--blue);
  font-size: 0.68rem;
  font-weight: 950;
  line-height: 1.1;
  text-transform: uppercase;
}

.time-rule-list .rule strong {
  flex: 1 1 auto;
  color: var(--text);
  font-size: 0.78rem;
  line-height: 1.25;
  text-align: right;
}

.hour-labels,
.legend-row {
  display: flex;
  justify-content: space-between;
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 800;
}

.legend-row {
  justify-content: flex-start;
  flex-wrap: wrap;
  margin-top: 12px;
}

.legend-row i {
  width: 10px;
  height: 10px;
  display: inline-block;
  border-radius: 999px;
  margin-right: 5px;
}

.legend-cheap { background: var(--green-soft); }
.legend-mid { background: var(--warning-soft); }
.legend-peak { background: var(--danger-soft); }
.legend-active { background: var(--blue); }

.schedule-row,
.settings-row,
.field,
.split-field label {
  display: grid;
  gap: 8px;
  margin-top: 10px;
}

.schedule-row,
.settings-row {
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  border: 1.5px solid var(--border);
  border-radius: 16px;
  padding: 12px;
  background: #fff;
}

.settings-row.button-row {
  width: 100%;
  text-align: left;
}

.settings-row > span,
.setting-line > span,
.range-line > span,
.provider-candidate-list button > span {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.settings-row em,
.menu-list em,
.provider-candidate-list em {
  color: var(--blue);
  font-style: normal;
  font-weight: 900;
}

.field span,
.split-field span,
.setting-line span,
.range-line span {
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 850;
}

input,
select {
  width: 100%;
  min-height: 46px;
  border: 1.5px solid var(--border);
  border-radius: var(--radius-control);
  padding: 0 12px;
  background: #fff;
  color: var(--text);
}

input[type="range"] {
  display: block;
  width: 100%;
  min-height: auto;
  padding: 0;
}

input[type="checkbox"] {
  width: 48px;
  height: 28px;
  min-height: 28px;
  accent-color: var(--blue);
}

.range-line,
.setting-line {
  margin-top: 12px;
}

.range-line.stacked,
.setting-line.stacked {
  display: grid;
  align-items: stretch;
}

.charge-limit-number-line input[type="number"] {
  width: 100%;
  min-height: 52px;
  border: 1.5px solid var(--border);
  border-radius: var(--radius-control);
  padding: 0 16px;
  color: var(--text);
  background: var(--surface-soft);
  font: inherit;
  font-size: 1.22rem;
  font-weight: 900;
  box-sizing: border-box;
}

.charge-limit-number-line input[type="number"]:focus {
  border-color: var(--blue);
  outline: 3px solid rgba(26, 94, 255, 0.16);
}

.panel-note.compact {
  margin-top: 8px;
  font-size: 0.78rem;
  font-weight: 850;
}

.guarantee-status {
  display: grid;
  gap: 4px;
  margin-top: 12px;
  border-radius: 16px;
  padding: 12px;
  background: var(--green-soft);
  color: var(--green);
}

.garage-source-grid {
  display: grid;
  gap: 10px;
  margin-bottom: 12px;
}

.garage-target-list {
  display: grid;
  gap: 10px;
}

.garage-target-list > .garage-target-card {
  margin: 0;
}

.garage-target-card {
  width: 100%;
  min-height: 112px;
  text-align: left;
  cursor: pointer;
}

.garage-target-card.active {
  border-width: 2px;
  border-color: var(--blue);
  background: #fff;
  box-shadow: none;
}

.garage-target-card.settings-open {
  border-width: 2px;
  border-color: var(--blue);
  border-bottom-color: transparent;
  border-bottom-right-radius: 0;
  border-bottom-left-radius: 0;
  background: #fff;
  box-shadow: none;
}

.garage-target-card[data-source-state="charging"] {
  border-color: rgba(9, 133, 81, 0.48);
  background: linear-gradient(135deg, #fff 0%, var(--green-soft) 100%);
  box-shadow: 0 14px 30px rgba(9, 133, 81, 0.12);
}

.garage-target-card[data-source-state="charging"].settings-open {
  border-color: rgba(9, 133, 81, 0.48);
  border-bottom-color: rgba(9, 133, 81, 0.18);
  background: linear-gradient(135deg, #fff 0%, var(--green-soft) 100%);
}

.garage-target-card.active[data-source-state="charging"],
.garage-target-card.settings-open[data-source-state="charging"] {
  border-width: 2px;
  border-color: var(--blue);
  background: #fff;
  box-shadow: none;
}

.garage-target-card.settings-open[data-source-state="charging"] {
  border-bottom-color: transparent;
}

.garage-target-card.setup {
  border-style: dashed;
}

.garage-target-card.add-source {
  min-height: 96px;
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr);
  align-items: center;
  gap: 12px;
  border-color: var(--border-strong);
  background: #f5f7fb;
  color: var(--muted);
  box-shadow: none;
  cursor: default;
}

.garage-target-card.add-source .garage-source-icon.target {
  background: #edf1f7;
  color: var(--muted);
}

.garage-target-card.add-source .garage-hero-copy span,
.garage-target-card.add-source .garage-hero-copy small {
  color: var(--muted);
}

.garage-target-card.add-source .garage-hero-copy strong {
  color: #252b36;
}

.garage-target-card.add-source .add-source-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-column: 1 / -1;
  width: 100%;
  gap: 8px;
  flex: 0 0 auto;
  align-self: center;
  min-width: 0;
  margin-left: 0;
}

.garage-target-card.add-source .add-source-actions button {
  min-height: 42px;
  padding: 0 12px;
  white-space: nowrap;
}

.garage-target-card .garage-hero-copy {
  flex: 1 1 auto;
  min-width: 0;
  margin-top: 0;
}

.garage-target-card .garage-hero-copy strong,
.garage-target-card .garage-hero-copy small {
  display: block;
  min-width: 0;
}

.garage-target-card .garage-hero-copy strong {
  line-height: 1.05;
}

.garage-target-card .garage-hero-copy small {
  max-width: 100%;
  line-height: 1.25;
}

.garage-target-card em {
  flex: 0 0 auto;
  align-self: center;
  justify-self: end;
  margin-left: auto;
  white-space: nowrap;
  border-radius: 999px;
  padding: 8px 12px;
  background: var(--danger-soft);
  color: var(--danger);
  font-size: 0.78rem;
  font-style: normal;
  font-weight: 900;
}

.garage-target-card.settings-open em {
  background: var(--danger-soft);
  color: var(--danger);
}

.garage-target-card[data-source-state="charging"] em {
  background: var(--green-soft);
  color: var(--green);
  animation: garage-charging-pulse 1.8s ease-in-out infinite;
  box-shadow: 0 0 0 0 rgba(9, 133, 81, 0.24);
}

.garage-target-card.active[data-source-state="charging"] em,
.garage-target-card.settings-open[data-source-state="charging"] em {
  background: var(--green-soft);
  color: var(--green);
}

@keyframes garage-charging-pulse {
  0% {
    box-shadow: 0 0 0 0 rgba(9, 133, 81, 0.26);
  }
  70% {
    box-shadow: 0 0 0 8px rgba(9, 133, 81, 0);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(9, 133, 81, 0);
  }
}

@media (prefers-reduced-motion: reduce) {
  .garage-target-card[data-source-state="charging"] em {
    animation: none;
  }
}

.garage-target-list > .charge-control-card.target-expanded-panel {
  margin: -10px 0 10px;
  border: 2px solid var(--blue);
  border-top: 0;
  border-top-left-radius: 0;
  border-top-right-radius: 0;
  background: #fff;
  box-shadow: 0 18px 34px rgba(10, 91, 255, 0.10);
}

.garage-target-list > .charge-control-card.target-expanded-panel .section-head {
  margin-top: 2px;
}

.garage-hero {
  overflow: hidden;
  padding: 16px;
}

.charge-empty-card {
  display: grid;
  gap: 16px;
  padding: 18px;
  background: linear-gradient(135deg, #fff 0%, var(--blue-soft) 56%, var(--warning-soft) 100%);
}

.charge-empty-symbol {
  width: 58px;
  height: 58px;
  display: grid;
  place-items: center;
  border-radius: 20px;
  background: #fff;
  color: var(--blue);
  box-shadow: inset 0 0 0 1.5px rgba(10, 91, 255, 0.12);
}

.charge-empty-symbol svg {
  width: 28px;
  height: 28px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
}

.charge-empty-card h2,
.charge-empty-card p {
  margin: 0;
}

.charge-empty-card h2 {
  font-size: 1.65rem;
  line-height: 1;
}

.charge-empty-card p:not(.eyebrow) {
  color: var(--muted);
  font-size: 0.92rem;
  line-height: 1.4;
}

.charge-empty-actions {
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
}

.charge-empty-actions .secondary-action {
  background: rgba(255, 255, 255, 0.72);
}

.charge-empty-checklist {
  display: grid;
  gap: 8px;
}

.charge-empty-checklist div {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  border: 1.5px solid rgba(255, 255, 255, 0.72);
  border-radius: 14px;
  padding: 10px 12px;
  background: rgba(255, 255, 255, 0.62);
}

.charge-empty-checklist span {
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 850;
}

.charge-empty-checklist strong {
  color: var(--text);
  font-size: 0.8rem;
  text-align: right;
}

.charge-empty-checklist .ready strong {
  color: var(--green);
}

.charge-empty-checklist .setup strong {
  color: var(--blue);
}

.charge-empty-checklist .missing strong {
  color: var(--danger);
}

.garage-car-art {
  height: 112px;
  display: grid;
  place-items: center;
  border-radius: 18px;
  background: linear-gradient(135deg, var(--surface-soft), var(--blue-soft));
  color: var(--blue);
}

.garage-car-art svg {
  width: 180px;
  height: 108px;
}

.garage-source-card .garage-source-icon {
  width: 58px;
  height: 58px;
  flex: 0 0 58px;
  display: grid;
  place-items: center;
  border-radius: 18px;
  background: linear-gradient(135deg, var(--surface-soft), var(--blue-soft));
  color: var(--blue);
}

.garage-source-card .garage-source-icon svg {
  width: 34px;
  height: 34px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 2;
}

.garage-source-card .garage-source-icon.plug {
  background: var(--green-soft);
  color: var(--green);
}

.garage-source-card .garage-source-icon.target {
  background: var(--blue-soft);
  color: var(--blue);
}

.garage-source-card .garage-source-icon.target[data-target-mode="plug"] {
  background: var(--green-soft);
  color: var(--green);
}

.garage-source-card[data-source-state="missing"] .garage-source-icon.plug {
  background: var(--surface-soft);
  color: var(--muted);
}

.garage-source-card[data-source-state="paired"] .garage-source-icon.plug {
  background: var(--warning-soft);
  color: var(--amber);
}

.garage-source-card[data-source-state="charging"] .garage-source-icon.target {
  background: var(--green-soft);
  color: var(--green);
}

.garage-hero-copy {
  display: grid;
  gap: 4px;
  margin-top: 12px;
}

.garage-command-grid,
.garage-estimate-grid,
.utility-form-grid,
.split-field {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin-top: 12px;
}

.utility-form-grid .full-field {
  grid-column: 1 / -1;
  display: grid;
  gap: 7px;
  align-items: stretch;
  justify-content: stretch;
  justify-items: stretch;
}

.garage-command-grid label,
.garage-estimate-grid label {
  display: grid;
  gap: 6px;
}

.garage-command-actions,
.garage-port-actions {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.garage-command-button {
  min-height: 74px;
  padding: 0 14px;
  border-radius: 20px;
  font-size: 1rem;
  line-height: 1.05;
}

.garage-port-actions {
  align-items: center;
  grid-template-columns: minmax(0, 1fr) auto;
  padding: 10px;
  border: 1px solid var(--border);
  border-radius: 18px;
  background: var(--surface-soft);
}

.garage-secondary-label {
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 900;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.garage-port-actions .secondary-action {
  min-width: 190px;
  min-height: 46px;
  padding: 0 18px;
  white-space: nowrap;
  line-height: 1.1;
}

#garageLimitButton {
  grid-column: 1 / -1;
  justify-self: stretch;
  width: 100%;
  min-height: 50px;
  display: grid;
  place-items: center;
  white-space: nowrap;
  text-align: center;
}

.charge-limit-auto-status {
  grid-column: 1 / -1;
  margin: -2px 0 2px;
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 850;
  line-height: 1.25;
}

.charge-automation-tiles {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.charge-automation-tile {
  min-width: 0;
  min-height: 104px;
  display: grid;
  align-content: start;
  gap: 7px;
  border: 1.5px solid var(--border);
  border-radius: 18px;
  padding: 12px;
  color: var(--text);
  background: var(--surface-soft);
  text-align: left;
  box-shadow: none;
}

.charge-automation-tile span {
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 900;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.charge-automation-tile strong {
  font-size: 1.22rem;
  line-height: 1;
}

.charge-automation-tile small {
  color: var(--muted);
  font-size: 0.75rem;
  line-height: 1.24;
  overflow-wrap: anywhere;
}

.charge-automation-tile[data-guard-state="on"] {
  border-color: rgba(9, 133, 81, 0.34);
  background: var(--green-soft);
}

.charge-automation-tile[data-guard-state="on"] strong {
  color: var(--green);
}

.charge-automation-tile[data-guard-state="off"] {
  border-color: rgba(217, 45, 32, 0.25);
  background: var(--danger-soft);
}

.charge-automation-tile[data-guard-state="off"] strong {
  color: var(--danger);
}

.charge-automation-tile[data-guard-state="setup"],
.charge-automation-tile[data-guard-state="locked"] {
  border-color: rgba(245, 164, 0, 0.3);
  background: var(--warning-soft);
}

.charge-automation-tile[data-guard-state="setup"] strong,
.charge-automation-tile[data-guard-state="locked"] strong {
  color: #925d00;
}

.charge-level-control {
  grid-column: 1 / -1;
  width: 100%;
  box-sizing: border-box;
  justify-self: stretch;
  justify-items: stretch;
  grid-template-columns: minmax(0, 1fr);
  gap: 10px;
  padding: 12px;
  border: 1.5px solid var(--border);
  border-radius: var(--radius-control);
  background: var(--surface-soft);
}

.charge-level-control > span {
  width: 100%;
  min-width: 0;
}

.charge-level-control .charge-level-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.charge-level-control .charge-level-heading strong {
  color: var(--muted);
  font-size: 0.92rem;
  font-weight: 950;
  line-height: 1;
}

.charge-level-control .charge-level-heading .charge-limit-value-button {
  margin-left: auto;
  border: 0;
  border-radius: 999px;
  padding: 8px 12px;
  color: var(--blue);
  background: var(--blue-soft);
  font-size: 1.32rem;
  font-weight: 950;
  line-height: 1;
  text-align: right;
  white-space: nowrap;
  box-shadow: none;
}

.charge-level-control .charge-level-heading .charge-limit-value-button:focus-visible {
  outline: 3px solid rgba(26, 94, 255, 0.28);
  outline-offset: 2px;
}

.charge-level-control input[type="range"] {
  --charge-level-progress: 60%;
  position: absolute;
  inset: 0;
  inline-size: 100%;
  width: 100%;
  min-width: 0;
  max-width: none;
  height: 100%;
  border: 0;
  border-radius: 0;
  margin: 0;
  padding: 0;
  background: transparent;
  opacity: 0;
  appearance: none;
  -webkit-appearance: none;
  cursor: pointer;
  justify-self: stretch;
  z-index: 3;
}

.charge-level-control input[type="range"]::-webkit-slider-runnable-track {
  width: 100%;
  height: 9px;
  border-radius: 999px;
  background: transparent;
}

.charge-level-control input[type="range"]::-webkit-slider-thumb {
  width: 30px;
  height: 30px;
  border: 1.5px solid var(--border);
  border-radius: 999px;
  margin-top: -10.5px;
  background: #fff;
  box-shadow: 0 2px 8px rgba(17, 24, 39, 0.18);
  appearance: none;
  -webkit-appearance: none;
}

.charge-level-control input[type="range"]::-moz-range-track {
  width: 100%;
  height: 9px;
  border-radius: 999px;
  background: transparent;
}

.charge-level-control input[type="range"]::-moz-range-progress {
  height: 9px;
  border-radius: 999px;
  background: var(--blue);
}

.charge-level-control input[type="range"]::-moz-range-thumb {
  width: 30px;
  height: 30px;
  border: 1.5px solid var(--border);
  border-radius: 999px;
  background: #fff;
  box-shadow: 0 2px 8px rgba(17, 24, 39, 0.18);
}

.charge-level-slider {
  --charge-level-progress: 60%;
  position: relative;
  display: block;
  width: 100%;
  min-width: 0;
  height: 34px;
}

.charge-level-slider::before,
.charge-level-slider-fill {
  position: absolute;
  top: 50%;
  left: 0;
  height: 9px;
  border-radius: 999px;
  transform: translateY(-50%);
  content: "";
}

.charge-level-slider::before {
  width: 100%;
  background: var(--border);
}

.charge-level-slider-fill {
  width: var(--charge-level-progress);
  background: var(--blue);
}

.charge-level-slider-thumb {
  position: absolute;
  top: 50%;
  left: var(--charge-level-progress);
  width: 30px;
  height: 30px;
  border: 1.5px solid var(--border);
  border-radius: 999px;
  background: #fff;
  box-shadow: 0 2px 8px rgba(17, 24, 39, 0.18);
  transform: translate(-50%, -50%);
}

.charge-level-control .charge-level-bounds {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
}

.charge-level-control .charge-level-bounds em {
  display: block;
  color: var(--muted);
  font-size: 0.72rem;
  font-style: normal;
  font-weight: 850;
}

.settings-card.is-disabled {
  border-color: var(--border);
  background: #f8f9fb;
  color: var(--muted);
  opacity: 0.58;
}

.settings-card.is-disabled .section-head h2,
.settings-card.is-disabled .section-head .eyebrow,
.settings-card.is-disabled .panel-note,
.settings-card.is-disabled label span,
.settings-card.is-disabled .charge-level-control strong,
.settings-card.is-disabled .charge-level-control small {
  color: var(--muted);
}

.settings-card.is-disabled button,
.settings-card.is-disabled input {
  cursor: not-allowed;
}

.settings-card.is-disabled .chip,
.settings-card.is-disabled .charge-level-control {
  background: var(--surface-soft);
}

.garage-vehicle-list,
.device-management-list,
.target-option-list,
.menu-list,
.provider-candidate-list,
.receipt-list,
.notification-list,
.support-action-list,
.recovery-action-list,
.event-log {
  display: grid;
  gap: 8px;
  margin: 12px 0 0;
  padding: 0;
  list-style: none;
}

.garage-vehicle-card,
.device-management-row,
.target-option,
.menu-list button,
.provider-candidate-list button,
.receipt-row,
.notification-row,
.support-action-list button,
.recovery-action-list button,
.state-row {
  width: 100%;
  display: grid;
  gap: 4px;
  border: 1.5px solid var(--border);
  border-radius: 16px;
  padding: 12px;
  background: #fff;
  color: var(--text);
  text-align: left;
}

.garage-vehicle-card {
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  column-gap: 10px;
  min-height: 66px;
}

.garage-vehicle-card > span {
  display: grid;
  gap: 2px;
}

.garage-vehicle-card small {
  color: var(--muted);
  font-size: 0.78rem;
  line-height: 1.25;
}

.provider-candidate-list button {
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
}

.provider-candidate-list button > span {
  min-width: 0;
}

.provider-candidate-list button strong,
.provider-candidate-list button span span {
  overflow-wrap: anywhere;
  line-height: 1.25;
}

.provider-candidate-list button span span {
  color: var(--muted);
  font-size: 0.82rem;
  font-weight: 800;
}

.provider-candidate-list button em {
  display: inline-grid;
  justify-items: end;
  gap: 4px;
  color: var(--blue);
  font-size: 0.76rem;
  font-style: normal;
  font-weight: 900;
}

.menu-list button {
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  column-gap: 10px;
}

.menu-list {
  gap: 14px;
}

.menu-section {
  display: grid;
  gap: 8px;
}

.menu-section .setting-head {
  margin: 0;
}

.menu-list button > span {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.menu-list button strong,
.menu-list button small {
  min-width: 0;
}

.menu-list button small {
  display: block;
  color: var(--muted);
  font-size: 0.78rem;
  line-height: 1.32;
}

.garage-vehicle-card.active,
.target-option.active,
.provider-candidate-list button.active,
.rate-card-option.active,
.receipt-row.active {
  border-color: var(--blue);
  background: var(--blue-soft);
}

.target-picker-sheet {
  display: grid;
  gap: 14px;
}

.target-picker-sheet .sheet-top {
  align-items: flex-start;
}

.target-picker-sheet h2 {
  max-width: 250px;
}

.target-picker-sheet .target-option-list {
  gap: 10px;
  margin: 0;
  max-height: min(320px, 40vh);
  overflow: auto;
  padding: 2px 2px 4px;
  scrollbar-width: none;
}

.target-picker-sheet .target-option-list::-webkit-scrollbar {
  display: none;
}

.target-picker-sheet .target-option {
  min-height: 76px;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 4px 12px;
  border-radius: 18px;
  padding: 14px 16px;
}

.target-picker-sheet .target-option::after {
  content: "";
  width: 18px;
  height: 18px;
  grid-column: 2;
  grid-row: 1 / span 2;
  border: 2px solid var(--border-strong);
  border-radius: 999px;
  background: #fff;
}

.target-picker-sheet .target-option.active::after {
  border-color: var(--blue);
  background: var(--blue);
  box-shadow: inset 0 0 0 4px #fff;
}

.target-picker-sheet .target-option strong,
.target-picker-sheet .target-option span {
  min-width: 0;
  overflow-wrap: anywhere;
}

.target-picker-sheet .target-option strong {
  font-size: 1.02rem;
  line-height: 1.18;
}

.target-picker-sheet .target-option span {
  color: var(--muted);
  line-height: 1.25;
}

.target-picker-setup-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.target-picker-setup-actions.is-primary-path {
  grid-template-columns: 1fr;
}

.target-picker-actions {
  display: grid;
  grid-template-columns: minmax(96px, 0.72fr) minmax(150px, 1.28fr);
  gap: 10px;
  align-items: center;
  margin: 0;
}

.target-picker-actions .primary-action,
.target-picker-actions .secondary-action {
  width: 100%;
  min-height: 46px;
  padding: 0 14px;
}

.tariff-field {
  display: grid;
  gap: 8px;
}

.utility-provider-stage,
.utility-results-stage {
  display: grid;
  gap: 12px;
}

.utility-sheet[data-utility-step="questionnaire"] .utility-provider-stage,
.utility-sheet[data-utility-step="questionnaire"] .utility-results-stage,
.utility-sheet[data-utility-step="questionnaire"] > .sheet-actions {
  display: none;
}

.utility-sheet[data-utility-step="results"] .utility-provider-stage {
  display: none;
}

.utility-sheet:not([data-utility-step="results"]) .utility-results-note {
  display: none;
}

.utility-rate-hero {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(112px, 0.9fr);
  gap: 12px;
  align-items: end;
  border: 1.5px solid var(--border);
  border-radius: 18px;
  padding: 14px;
  background: linear-gradient(135deg, #ffffff 0%, #eef5ff 100%);
}

.utility-rate-hero-copy {
  display: grid;
  gap: 6px;
  min-width: 0;
}

.utility-rate-hero-copy strong {
  min-width: 0;
  color: var(--text);
  font-size: 1.08rem;
  line-height: 1.08;
  overflow-wrap: anywhere;
}

.utility-rate-hero-copy small {
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 800;
  line-height: 1.28;
}

.utility-sheet .setting-line small {
  display: none;
}

.utility-rate-tag {
  display: inline-flex;
  width: fit-content;
  max-width: 100%;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  padding: 4px 9px;
  background: var(--blue-soft);
  color: var(--blue);
  font-size: 0.72rem;
  font-weight: 950;
  line-height: 1;
  text-transform: uppercase;
  white-space: nowrap;
}

.utility-rate-tag.hourly {
  background: #dfeaff;
  color: var(--blue);
}

.utility-rate-tag.tou {
  background: #fff1c8;
  color: #a26500;
}

.utility-rate-tag.flat {
  background: #dff8e9;
  color: #0d8d4f;
}

.utility-rate-shape-chart {
  display: grid;
  grid-template-columns: repeat(4, minmax(20px, 1fr));
  align-items: end;
  gap: 7px;
  min-height: 92px;
  border-radius: 16px;
  padding: 12px 10px 8px;
  background: rgba(255, 255, 255, 0.78);
}

.utility-rate-hero[data-rate-type="flat"] .utility-rate-shape-chart {
  grid-template-columns: repeat(3, minmax(26px, 1fr));
}

.shape-bar {
  position: relative;
  display: flex;
  min-height: 18px;
  height: var(--bar-height);
  align-items: flex-end;
  justify-content: center;
  border-radius: 999px 999px 8px 8px;
  background: var(--blue);
}

.shape-bar.green {
  background: #0d8d4f;
}

.shape-bar.yellow {
  background: #f6ad0a;
}

.shape-bar.blue {
  background: var(--blue);
}

.shape-bar em {
  position: absolute;
  bottom: -20px;
  color: var(--muted);
  font-size: 0.62rem;
  font-style: normal;
  font-weight: 950;
}

.utility-questionnaire {
  display: grid;
  gap: 10px;
  border: 1.5px solid var(--border);
  border-radius: 18px;
  padding: 12px;
  background: var(--surface-soft);
}

.utility-questionnaire-head,
.utility-question {
  display: grid;
  gap: 6px;
}

.utility-questionnaire-head strong,
.utility-question strong {
  color: var(--text);
  line-height: 1.1;
}

.utility-questionnaire-head small {
  color: var(--muted);
  font-size: 0.76rem;
  font-weight: 800;
  line-height: 1.3;
}

.utility-question-options {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}

.utility-question-options button {
  min-height: 34px;
  border: 1.5px solid var(--border);
  border-radius: 999px;
  padding: 0 10px;
  background: #fff;
  color: var(--muted);
  font-size: 0.74rem;
  font-weight: 900;
}

.utility-question-options button.active {
  border-color: var(--blue);
  background: var(--blue-soft);
  color: var(--blue);
}

.utility-questionnaire-actions {
  grid-template-columns: minmax(96px, 0.7fr) minmax(150px, 1.3fr);
  margin-top: 2px;
}

.utility-rate-select {
  position: absolute;
  width: 1px;
  height: 1px;
  min-height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

.rate-card-picker {
  display: grid;
  gap: 8px;
  max-height: min(330px, 38vh);
  overflow: auto;
  padding: 2px 2px 4px;
}

.rate-card-option {
  width: 100%;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 4px 10px;
  align-items: center;
  border: 1.5px solid var(--border);
  border-radius: 14px;
  padding: 12px;
  background: #fff;
  color: var(--text);
  text-align: left;
}

.rate-card-option > span {
  display: grid;
  gap: 6px;
  min-width: 0;
}

.rate-card-option strong,
.rate-card-option small {
  min-width: 0;
  overflow-wrap: anywhere;
  line-height: 1.28;
}

.rate-card-option strong {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}

.rate-card-option small {
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 800;
}

.rate-card-option em {
  grid-column: 2;
  grid-row: 1 / span 2;
  justify-self: end;
  border-radius: 999px;
  padding: 4px 8px;
  background: var(--blue-soft);
  color: var(--blue);
  font-size: 0.76rem;
  font-style: normal;
  font-weight: 900;
}

.tariff-filter-note {
  border-radius: 14px;
  padding: 10px 12px;
  background: var(--surface-soft);
  color: var(--muted);
  font-size: 0.76rem;
  font-weight: 850;
  line-height: 1.32;
}

.tariff-full-list-button {
  width: 100%;
  min-height: 42px;
}

.device-management-row {
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px 10px;
  align-items: center;
}

.device-management-row div {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.device-management-row span {
  color: var(--muted);
  font-size: 0.82rem;
  line-height: 1.32;
}

.device-management-row em {
  justify-self: end;
  border-radius: 999px;
  padding: 4px 8px;
  background: var(--blue-soft);
  color: var(--blue);
  font-size: 0.76rem;
  font-style: normal;
  font-weight: 900;
}

.device-management-row button {
  grid-column: 1 / -1;
  min-height: 38px;
  border: 0;
  border-radius: 999px;
  background: var(--surface-soft);
  color: var(--blue);
  font-weight: 900;
}

.state-row {
  grid-template-columns: 1fr auto;
  align-items: center;
}

.state-list {
  display: grid;
  gap: 8px;
}

.status-action-list {
  display: grid;
  gap: 8px;
}

.status-action-row {
  min-height: 64px;
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 9px;
  background: #fff;
  color: var(--text);
}

.status-action-list.has-recovery .status-action-row.bad,
.status-action-row.bad {
  border-color: rgba(223, 50, 38, 0.28);
}

.status-action-row.warn {
  border-color: rgba(240, 190, 80, 0.45);
}

.status-action-row.ok {
  border-color: rgba(25, 135, 84, 0.28);
}

.status-action-icon {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border-radius: 8px;
  background: var(--blue-soft);
  color: var(--blue);
}

.status-action-icon.vehicle,
.status-action-icon.schedule,
.status-action-icon.utility {
  background: var(--green-soft);
  color: var(--green);
}

.status-action-icon.plug,
.status-action-icon.savings {
  background: var(--warning-soft);
  color: #946000;
}

.status-action-icon.command {
  background: var(--danger-soft);
  color: var(--danger);
}

.status-action-icon svg {
  width: 19px;
  height: 19px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 2.2;
}

.status-action-copy {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.status-action-copy strong {
  min-width: 0;
  font-size: 0.96rem;
  line-height: 1.08;
  overflow-wrap: anywhere;
}

.status-action-copy span {
  min-width: 0;
  color: var(--muted);
  font-size: 0.76rem;
  line-height: 1.22;
  display: -webkit-box;
  overflow: hidden;
  text-overflow: ellipsis;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.status-action-meta {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 7px;
}

.status-action-pill {
  min-height: 22px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  padding: 0 8px;
  background: var(--blue-soft);
  color: var(--blue);
  font-size: 0.67rem;
  font-weight: 900;
  white-space: nowrap;
}

.status-action-pill.good {
  background: var(--green-soft);
  color: var(--green);
}

.status-action-pill.warn {
  background: var(--warning-soft);
  color: #946000;
}

.status-action-pill.bad {
  background: var(--danger-soft);
  color: var(--danger);
}

.status-action-row button {
  min-width: 62px;
  min-height: 30px;
  border: 0;
  border-radius: 999px;
  padding: 0 11px;
  background: var(--surface-soft);
  color: var(--blue);
  font-size: 0.76rem;
  font-weight: 900;
  white-space: nowrap;
}

.state-row.state-action-row {
  grid-template-columns: 34px minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  min-height: 72px;
  border-width: 1px;
  border-radius: 8px;
  padding: 10px;
  background: var(--surface-soft);
  color: var(--text);
}

.state-row.state-action-row.ok,
.state-row.state-action-row.warn,
.state-row.state-action-row.bad {
  color: var(--text);
}

.state-row.state-action-row.warn {
  border-color: rgba(240, 190, 80, 0.45);
  background: linear-gradient(180deg, #fffaf0 0%, #fff 100%);
}

.state-row.state-action-row.bad {
  border-color: rgba(223, 50, 38, 0.28);
  background: linear-gradient(180deg, #fff3f1 0%, #fff 100%);
}

.state-row.state-action-row.ok {
  border-color: rgba(25, 135, 84, 0.28);
  background: linear-gradient(180deg, #f4fff9 0%, #fff 100%);
}

.state-row .state-copy {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.state-row .state-copy strong {
  min-width: 0;
  font-size: 0.96rem;
  line-height: 1.1;
  overflow-wrap: anywhere;
}

.state-row .state-copy span {
  min-width: 0;
  color: var(--muted);
  font-size: 0.76rem;
  line-height: 1.25;
  display: -webkit-box;
  overflow: hidden;
  text-overflow: ellipsis;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.state-action-meta {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 7px;
}

.state-status {
  min-height: 22px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  padding: 0 8px;
  background: var(--blue-soft);
  color: var(--blue);
  font-size: 0.67rem;
  font-weight: 900;
  white-space: nowrap;
}

.state-status.good {
  background: var(--green-soft);
  color: var(--green);
}

.state-status.warn {
  background: var(--warning-soft);
  color: #946000;
}

.state-status.bad {
  background: var(--danger-soft);
  color: var(--danger);
}

.state-row.empty-state-card,
.state-row.failure-card {
  grid-template-columns: 42px minmax(0, 1fr) auto;
}

.state-row.empty-state-card,
.state-row.failure-card,
.state-checklist,
.recovery-list {
  border-radius: 18px;
}

.empty-state-card {
  background: linear-gradient(135deg, #fff 0%, var(--blue-soft) 100%);
}

.empty-state-card.schedule-empty {
  background: linear-gradient(135deg, #fff 0%, var(--green-soft) 100%);
}

.empty-state-card.savings-empty {
  background: linear-gradient(135deg, #fff 0%, var(--warning-soft) 100%);
}

.failure-card.warning {
  background: linear-gradient(135deg, #fff 0%, var(--warning-soft) 100%);
}

.failure-card.severe {
  background: linear-gradient(135deg, #fff 0%, var(--danger-soft) 100%);
}

.state-symbol {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border-radius: 8px;
  background: var(--blue-soft);
  color: var(--blue);
}

.state-symbol.setup {
  background: var(--blue-soft);
  color: var(--blue);
}

.state-symbol.schedule {
  background: var(--green-soft);
  color: var(--green);
}

.state-symbol.savings {
  background: var(--warning-soft);
  color: #946000;
}

.state-symbol.plug {
  background: var(--warning-soft);
  color: #946000;
}

.state-symbol.vehicle,
.state-symbol.target,
.state-symbol.command {
  background: var(--blue-soft);
  color: var(--blue);
}

.state-symbol.utility {
  background: var(--green-soft);
  color: var(--green);
}

.state-symbol.command {
  background: var(--danger-soft);
  color: var(--danger);
}

.state-symbol svg {
  width: 19px;
  height: 19px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 2.2;
}

.account-overview-card {
  background: linear-gradient(135deg, #fff 0%, var(--blue-soft) 100%);
}

.account-page-hero {
  background: linear-gradient(135deg, #fff 0%, var(--blue-soft) 100%);
}

.account-page-profile {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
}

.account-page-avatar {
  width: 46px;
  height: 46px;
  display: grid;
  place-items: center;
  border-radius: 16px;
  background: var(--blue);
  color: #fff;
  font-weight: 950;
}

.account-page-profile h3,
.account-page-profile p {
  margin: 0;
}

.account-page-profile p {
  color: var(--muted);
  font-size: 0.84rem;
  line-height: 1.35;
}

.account-page-action-list {
  display: grid;
  gap: 8px;
}

.account-page-action-list button {
  width: 100%;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  border: 1.5px solid var(--border);
  border-radius: 16px;
  padding: 12px;
  background: #fff;
  color: var(--text);
  text-align: left;
}

.account-page-action-list button > span {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.account-page-action-list small {
  color: var(--muted);
  font-size: 0.78rem;
  line-height: 1.32;
}

.account-page-action-list em {
  color: var(--blue);
  font-style: normal;
  font-weight: 900;
}

.settings-subsection {
  display: grid;
  gap: 10px;
  margin-top: 16px;
}

.account-summary-grid,
.diagnostic-status-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.account-summary-grid div,
.diagnostic-status-grid div {
  display: grid;
  gap: 4px;
  min-width: 0;
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 10px;
  background: var(--surface-soft);
}

.account-summary-grid span,
.diagnostic-status-grid span,
.support-action-list span,
.recovery-action-list span {
  color: var(--muted);
  font-size: 0.78rem;
  line-height: 1.35;
}

.account-summary-grid strong,
.diagnostic-status-grid strong {
  overflow-wrap: anywhere;
  font-size: 0.92rem;
}

.support-action-list button,
.recovery-action-list button {
  grid-template-columns: 1fr auto;
}

.support-action-list button::after,
.recovery-action-list button::after {
  content: ">";
  align-self: center;
  color: var(--muted);
  font-weight: 900;
}

.split-actions {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.failure-recovery-sheet .assumption-grid {
  margin-top: 12px;
}

.state-row button {
  min-height: 34px;
  border: 0;
  border-radius: 999px;
  padding: 0 12px;
  background: #fff;
  color: var(--blue);
  font-weight: 900;
  white-space: nowrap;
  box-shadow: inset 0 0 0 1px rgba(10, 91, 255, 0.12);
}

.empty-state,
.garage-empty {
  border: 1.5px dashed var(--border);
  border-radius: 16px;
  padding: 14px;
  color: var(--muted);
  background: var(--surface-soft);
  font-size: 0.86rem;
  line-height: 1.4;
}

.big-stat {
  display: grid;
  gap: 6px;
}

.big-stat span {
  color: var(--muted);
  font-weight: 850;
}

.savings-hero {
  display: grid;
  gap: 6px;
  margin: 0 0 14px;
  border: 1px solid var(--border);
  border-radius: 18px;
  padding: 20px;
  background: linear-gradient(135deg, #fff 0%, #eaf8ef 100%);
  box-shadow: var(--shadow-soft);
}

.savings-hero h2 {
  font-size: 2.35rem;
  line-height: 1;
}

.savings-hero .positive,
.positive-row,
.positive-row span,
.positive-row strong {
  color: var(--green);
  font-weight: 850;
}

.savings-period-card {
  margin: 0 0 14px;
  border: 1px solid var(--border);
  border-radius: 18px;
  padding: 16px;
  background: #fff;
  box-shadow: var(--shadow-soft);
}

.period-tabs button.active {
  background: #fff;
  color: var(--blue);
  box-shadow: var(--shadow-soft);
}

.savings-vs-cost {
  min-height: 180px;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  align-items: end;
  margin-top: 18px;
  border-radius: 16px;
}

.savings-vs-cost:focus-visible {
  outline: 3px solid rgba(10, 91, 255, 0.28);
  outline-offset: 4px;
}

.savings-vs-cost > div:not(.empty-state) {
  height: 100%;
  min-height: 180px;
  display: grid;
  grid-template-rows: auto auto 1fr;
  gap: 5px;
  align-items: end;
}

.savings-vs-cost > .empty-state {
  grid-column: 1 / -1;
  min-height: 180px;
  display: grid;
  place-items: center;
  text-align: center;
  padding: 22px;
}

.savings-vs-cost span {
  color: var(--muted);
  font-size: 0.68rem;
  font-weight: 900;
}

.savings-vs-cost strong {
  font-size: 1rem;
  line-height: 1.1;
}

.savings-vs-cost i {
  display: block;
  width: 100%;
  min-height: 24px;
  border-radius: 999px 999px 8px 8px;
  background: var(--blue);
}

.savings-vs-cost i.zero {
  min-height: 22px;
  border-radius: 999px 999px 6px 6px;
  opacity: 1;
}

.savings-vs-cost i.baseline {
  background: var(--warning);
}

.savings-vs-cost i.saved {
  background: var(--green);
}

.charge-summary-list-card {
  margin: 0 0 14px;
  padding: 16px;
}

.charge-summary-list {
  display: grid;
  gap: 10px;
}

.charge-summary-row {
  display: grid;
  gap: 10px;
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 12px;
  background: var(--surface-soft);
}

.charge-summary-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.charge-summary-head div {
  min-width: 0;
}

.charge-summary-head span,
.mini-bar-row span {
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 900;
}

.charge-summary-head strong {
  display: block;
  font-size: 0.95rem;
  line-height: 1.15;
  overflow-wrap: anywhere;
}

.charge-summary-head > strong {
  color: var(--green);
  text-align: right;
  white-space: nowrap;
}

.mini-bar-grid {
  display: grid;
  gap: 7px;
}

.mini-bar-row {
  display: grid;
  grid-template-columns: 56px minmax(0, 1fr) 54px;
  gap: 8px;
  align-items: center;
}

.mini-bar-row strong {
  font-size: 0.78rem;
  line-height: 1;
  text-align: right;
}

.mini-track {
  height: 8px;
}

.mini-track.blue i {
  background: var(--blue);
}

.mini-track.gold i {
  background: var(--warning);
}

.mini-track.green i {
  background: var(--green);
}

.period-summary-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin: 0 0 14px;
}

.period-tile {
  min-height: 82px;
  display: grid;
  gap: 3px;
  border: 1.5px solid var(--border);
  border-radius: 16px;
  padding: 12px 10px;
  background: #fff;
  color: var(--text);
  text-align: left;
}

.period-tile.active {
  border-color: var(--green);
  background: var(--green-soft);
}

.period-tile span,
.period-tile small {
  color: var(--muted);
  font-size: 0.68rem;
  font-weight: 900;
}

.period-tile strong {
  font-size: 1.1rem;
}

.savings-total-card .row {
  min-height: 42px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  border-top: 1px solid var(--border);
  padding: 10px 0 0;
}

.savings-total-card .row + .row {
  margin-top: 10px;
}

.savings-total-card .row span {
  color: var(--muted);
  font-size: 0.82rem;
  font-weight: 850;
}

.bar-chart {
  min-height: 160px;
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 8px;
  align-items: end;
  margin-top: 12px;
}

.bar-chart > div:not(.empty-state) {
  display: grid;
  align-items: end;
  gap: 5px;
  min-height: 118px;
}

.bar-chart span,
.bar-chart i {
  display: block;
  border-radius: 999px 999px 4px 4px;
}

.bar-chart span {
  background: var(--blue);
}

.bar-chart i {
  background: var(--border);
}

.bar-chart small {
  text-align: center;
  font-size: 0.68rem;
}

.event-log li {
  border-radius: 12px;
  padding: 10px;
  background: var(--surface-soft);
  color: var(--muted);
  font-family: "SFMono-Regular", Consolas, "Liberation Mono", monospace;
  font-size: 0.76rem;
  overflow-wrap: anywhere;
}

.raw-api-card summary {
  cursor: pointer;
  font-weight: 900;
}

.settings-pair-shortcut {
  width: 100%;
  margin-bottom: 16px;
  background: var(--blue);
  color: #fff;
}

.pairing-box,
.partner-readiness,
.tesla-onboarding,
.savings-assumptions-card {
  margin-top: 14px;
}

.onboarding-steps {
  counter-reset: step;
  padding: 0;
  list-style: none;
}

.onboarding-steps li {
  display: grid;
  grid-template-columns: 34px 1fr;
  gap: 10px;
  align-items: start;
  border: 1.5px solid var(--border);
  border-radius: 16px;
  padding: 12px;
  background: #fff;
}

.onboarding-steps li.active,
.onboarding-steps li.complete {
  border-color: var(--blue);
  background: #f8fbff;
}

.step-index {
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  background: var(--blue);
  color: #fff;
  font-size: 0.78rem;
  font-weight: 900;
}

.bottom-tabs {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 8;
  height: 76px;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 0;
  border-top: 1px solid var(--border);
  padding: 6px 8px 8px;
  background: rgba(255, 255, 255, 0.97);
  backdrop-filter: blur(16px);
}

.bottom-tabs button {
  min-height: 60px;
  display: grid;
  place-items: center;
  gap: 4px;
  border: 0;
  border-radius: 18px;
  color: var(--muted);
  background: transparent;
  font-size: 0.7rem;
  font-weight: 900;
}

.bottom-tabs button.active {
  color: var(--blue);
  background: var(--blue-soft);
}

.bottom-tabs svg {
  width: 20px;
  height: 20px;
}

.app-sheet-overlay,
.setup-overlay,
.schedule-editor-overlay,
.tesla-auth-overlay,
.auth-gate,
.billing-gate {
  position: absolute;
  inset: 0;
  z-index: 50;
  display: grid;
  align-items: end;
  padding: 16px;
  background: rgba(244, 246, 250, 0.88);
  backdrop-filter: blur(10px);
}

.auth-gate,
.billing-gate {
  place-items: center;
  align-items: center;
  padding: 18px;
  background:
    linear-gradient(180deg, rgba(10, 91, 255, 0.14), rgba(244, 246, 250, 0.94) 38%),
    rgba(244, 246, 250, 0.92);
}

.app-sheet,
.setup-sheet,
.schedule-editor-sheet,
.tesla-auth-sheet,
.auth-gate-card,
.billing-gate-card {
  width: 100%;
  max-height: calc(100% - 20px);
  overflow: auto;
  border-radius: var(--radius-sheet);
  padding: 18px;
  background: #fff;
  box-shadow: var(--shadow);
}

.logo-status-overlay {
  align-items: stretch;
  justify-items: start;
  padding: 0;
  background: rgba(244, 246, 250, 0.74);
  backdrop-filter: blur(8px);
}

.logo-status-window {
  position: relative;
  width: min(86%, 340px);
  height: 100%;
  max-height: none;
  border-radius: 0 24px 24px 0;
  padding: 20px 16px 18px;
  box-shadow: 24px 0 50px rgba(17, 18, 23, 0.18);
}

.logo-status-window::after {
  content: "";
  position: absolute;
  top: 0;
  right: -42px;
  bottom: 0;
  width: 42px;
  background: linear-gradient(90deg, rgba(17, 18, 23, 0.12), rgba(17, 18, 23, 0));
  pointer-events: none;
}

.logo-status-window .sheet-top {
  margin-bottom: 12px;
}

.logo-status-window .sheet-top h2 {
  margin-top: 2px;
  font-size: 1.7rem;
  line-height: 1;
}

.status-decision-card {
  display: grid;
  gap: 10px;
  margin: 0 0 12px;
  border: 1px solid var(--border);
  border-radius: 18px;
  padding: 14px;
  background:
    linear-gradient(135deg, #fff 0%, rgba(219, 231, 255, 0.74) 100%);
  box-shadow: var(--shadow-soft);
}

.status-decision-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.status-decision-card h3 {
  font-size: 1.28rem;
  line-height: 1.04;
}

.status-decision-card p:not(.eyebrow) {
  color: var(--muted);
  font-size: 0.86rem;
  font-weight: 760;
  line-height: 1.34;
}

.status-decision-card .primary-action {
  min-height: 42px;
  width: 100%;
}

.status-profile-card {
  background: linear-gradient(135deg, #fff 0%, var(--blue-soft) 100%);
}

.status-profile-card .menu-avatar {
  border-radius: 999px;
  background: linear-gradient(135deg, var(--blue), var(--green));
}

.logo-status-window .menu-status-grid {
  gap: 8px;
  margin-top: 12px;
}

.logo-status-window .menu-status-grid button {
  display: grid;
  align-content: center;
  gap: 3px;
  min-height: 76px;
  border-radius: 16px;
}

.logo-status-window .menu-status-grid button small {
  display: block;
  color: var(--muted);
  font-size: 0.68rem;
  font-weight: 780;
  line-height: 1.2;
}

.status-check-list {
  margin-top: 14px;
}

.status-check-list .menu-section {
  gap: 8px;
}

.status-system-list {
  display: grid;
  gap: 8px;
}

.status-system-row {
  grid-template-columns: 34px minmax(0, 1fr) auto;
  align-items: center;
  column-gap: 10px;
  min-height: 62px;
  border-radius: 15px;
}

.status-system-row i {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border-radius: 13px;
  background: var(--surface-soft);
  color: var(--blue);
  font-size: 0.62rem;
  font-style: normal;
  font-weight: 950;
}

.status-system-row.ok i {
  background: var(--green-soft);
  color: var(--green);
}

.status-system-row.warn i {
  background: var(--warning-soft);
  color: #946000;
}

.status-system-row.bad i {
  background: var(--danger-soft);
  color: var(--danger);
}

.status-system-row em {
  align-self: center;
  border-radius: 999px;
  padding: 5px 8px;
  background: var(--surface-soft);
  color: var(--muted);
  font-size: 0.66rem;
  font-style: normal;
  font-weight: 950;
  text-transform: uppercase;
}

.status-system-row.ok em {
  background: var(--green-soft);
  color: var(--green);
}

.status-system-row.warn em {
  background: var(--warning-soft);
  color: #946000;
}

.status-system-row.bad em {
  background: var(--danger-soft);
  color: var(--danger);
}

.schedule-editor-sheet {
  --schedule-editor-pane-height: 330px;
}

.schedule-editor-target-card {
  display: grid;
  gap: 10px;
  margin: 12px 0;
  border: 1.5px solid var(--border);
  border-radius: 18px;
  padding: 12px;
  background: var(--surface-soft);
}

.schedule-editor-target-card > div:first-child {
  display: grid;
  gap: 3px;
}

.schedule-editor-target-card span,
.schedule-editor-target-card small {
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 900;
}

.schedule-editor-target-card span {
  color: var(--blue);
  text-transform: uppercase;
}

.schedule-editor-target-card strong {
  color: var(--text);
  font-size: 0.96rem;
  font-weight: 950;
}

.schedule-editor-target-list {
  display: grid;
  gap: 8px;
}

.schedule-editor-target-list button {
  min-height: 48px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 2px;
  border: 1.5px solid var(--border);
  border-radius: 14px;
  padding: 10px 12px;
  background: #fff;
  color: var(--text);
  text-align: left;
}

.schedule-editor-target-list button.active {
  border-color: var(--blue);
  background: var(--blue-soft);
}

.schedule-editor-target-list button em,
.schedule-editor-target-list button b {
  display: inline-flex;
  width: fit-content;
  min-height: 22px;
  align-items: center;
  border-radius: 999px;
  padding: 0 8px;
  background: var(--surface-soft);
  color: var(--muted);
  font-size: 0.62rem;
  font-style: normal;
  font-weight: 950;
  text-transform: uppercase;
}

.schedule-editor-target-list button b {
  background: #fff;
  color: var(--blue);
}

.schedule-editor-target-list button.active b {
  background: var(--blue);
  color: #fff;
}

.schedule-editor-target-list .schedule-editor-target-meta {
  display: grid;
  min-width: 0;
  gap: 3px;
  text-transform: none;
}

.schedule-editor-target-list .schedule-editor-target-meta small {
  overflow-wrap: anywhere;
}

.schedule-type-control {
  grid-template-columns: repeat(4, 1fr);
}

.schedule-type-control button {
  padding: 0 6px;
  font-size: 0.72rem;
}

.schedule-type-control button.locked,
.schedule-type-control button:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.schedule-editor-pane {
  min-height: var(--schedule-editor-pane-height);
}

.schedule-editor-actions {
  display: grid;
  grid-template-columns: minmax(96px, 0.72fr) minmax(158px, 1.28fr);
  gap: 10px;
  align-items: center;
  margin-top: 14px;
}

.schedule-editor-actions .primary-action,
.schedule-editor-actions .secondary-action {
  width: 100%;
  min-height: 46px;
  padding: 0 14px;
}

#utilitySettingsOverlay {
  align-items: stretch;
  padding: 0;
  background: var(--surface);
  backdrop-filter: none;
}

#utilitySettingsOverlay .utility-sheet {
  height: 100%;
  max-height: none;
  border-radius: 0;
  padding: 20px;
  box-shadow: none;
}

.auth-gate-card,
.billing-gate-card {
  max-width: 350px;
  display: grid;
  gap: 14px;
  text-align: left;
}

.auth-gate-card h2,
.billing-gate-card h2 {
  font-size: 2rem;
  line-height: 0.98;
}

.auth-brand-row {
  display: flex;
  align-items: center;
  gap: 12px;
}

.auth-brand-logo {
  display: block;
  width: 132px;
  max-width: 55%;
  height: auto;
  object-fit: contain;
}

.auth-brand-row p {
  color: var(--muted);
  font-size: 0.76rem;
  font-weight: 900;
  text-transform: uppercase;
}

.auth-brand-row strong {
  display: block;
  margin-top: 2px;
  font-size: 0.98rem;
}

.auth-brand-mark {
  width: 48px;
  height: 48px;
  display: inline-grid;
  place-items: center;
  border-radius: 17px;
  color: #fff;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.22), transparent),
    var(--blue);
  font-size: 1.25rem;
  font-weight: 950;
}

.auth-hero-copy {
  display: grid;
  gap: 8px;
}

.auth-hero-copy span,
.auth-provider-row span {
  color: var(--muted);
  font-size: 0.9rem;
  line-height: 1.35;
}

.auth-mode-tabs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
  padding: 5px;
  border: 1px solid var(--border);
  border-radius: 15px;
  background: var(--surface-soft);
}

.auth-mode-tabs button,
.auth-secondary-row button,
.auth-hosted-button,
.auth-native-button {
  min-height: 38px;
  border: 0;
  border-radius: 12px;
  color: var(--muted);
  background: transparent;
  font-size: 0.82rem;
  font-weight: 900;
}

.auth-mode-tabs button.active {
  color: var(--blue);
  background: #fff;
  box-shadow: var(--shadow-soft);
}

.auth-form {
  display: grid;
  gap: 10px;
}

.auth-form label {
  display: grid;
  gap: 6px;
}

.auth-form label span {
  color: var(--muted);
  font-size: 0.75rem;
  font-weight: 900;
  text-transform: uppercase;
}

.auth-form input {
  width: 100%;
  min-height: 48px;
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 0 14px;
  color: var(--text);
  background: var(--surface-soft);
  outline: none;
}

.auth-form input:focus {
  border-color: var(--blue);
  box-shadow: 0 0 0 3px rgba(10, 91, 255, 0.12);
}

.auth-primary-button,
.auth-gate-card button.auth-primary-button,
.billing-gate-card button.auth-primary-button {
  min-height: 50px;
  border: 0;
  border-radius: 16px;
  color: #fff;
  background: var(--blue);
  font-weight: 950;
}

.auth-primary-button:disabled,
.auth-gate-card button.auth-primary-button:disabled,
.billing-gate-card button.auth-primary-button:disabled {
  cursor: not-allowed;
  opacity: 0.52;
}

.billing-state-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.billing-state-grid div {
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 10px;
  background: var(--surface-soft);
}

.billing-state-grid span {
  display: block;
  color: var(--muted);
  font-size: 0.68rem;
  font-weight: 900;
  text-transform: uppercase;
}

.billing-state-grid strong {
  display: block;
  margin-top: 3px;
  color: var(--text);
  font-size: 0.9rem;
}

.auth-message,
.auth-error {
  border-radius: 13px;
  padding: 10px 12px;
  font-size: 0.82rem;
  font-weight: 800;
  line-height: 1.3;
}

.auth-message {
  color: var(--green);
  background: var(--green-soft);
}

.auth-error {
  color: var(--danger);
  background: var(--danger-soft);
}

.auth-secondary-row,
.auth-provider-row {
  display: grid;
  gap: 8px;
}

.auth-secondary-row {
  grid-template-columns: 1fr;
}

.auth-secondary-row button,
.auth-hosted-button,
.auth-native-button {
  color: var(--blue);
  background: var(--blue-soft);
}

.auth-provider-row {
  padding-top: 2px;
}

.auth-gate-card button.auth-primary-button,
.billing-gate-card button.auth-primary-button {
  min-height: 48px;
  border: 0;
  border-radius: 16px;
  background: var(--blue);
  color: #fff;
  font-weight: 900;
}

.onboarding-screen {
  padding-bottom: 24px;
}

.setup-progress,
.progress-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 4px;
  margin-top: 14px;
}

.setup-progress span,
.progress-row span {
  height: 6px;
  border-radius: 999px;
  background: var(--border);
}

.setup-progress span.active,
.setup-progress span.complete,
.progress-row span.active,
.progress-row span.complete {
  background: var(--blue);
}

.setup-step-card,
.complete-card {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 8px 12px;
  align-items: center;
  margin-top: 18px;
  border-radius: 20px;
  padding: 16px;
  background: linear-gradient(135deg, #fff 0%, var(--blue-soft) 100%);
  box-shadow: var(--shadow-soft);
}

.setup-step-card.home,
.setup-step-card.schedule,
.setup-step-card.alerts,
.setup-step-card.complete-card {
  background: linear-gradient(135deg, #fff 0%, var(--green-soft) 100%);
}

.setup-step-card.utility,
.setup-step-card.rate {
  background: linear-gradient(135deg, #fff 0%, var(--warning-soft) 100%);
}

.setup-step-card.vehicle,
.setup-step-card.control {
  background: linear-gradient(135deg, #fff 0%, var(--blue-soft) 100%);
}

.setup-step-card.plug {
  background: linear-gradient(135deg, #fff 0%, var(--magenta-soft) 100%);
}

.setup-hero,
.onboarding-symbol {
  width: 58px;
  height: 58px;
  background: linear-gradient(135deg, var(--blue), var(--magenta));
  color: #fff;
}

.onboarding-symbol.bolt {
  background: linear-gradient(135deg, var(--blue), var(--green));
}

.onboarding-symbol.done {
  background: var(--green);
}

.setup-copy {
  grid-column: 1 / -1;
  color: var(--muted);
  font-size: 0.88rem;
  line-height: 1.24;
  margin: 0;
}

.setup-hero-copy {
  min-width: 0;
  display: grid;
  gap: 3px;
}

.setup-hero-copy h3 {
  margin: 0;
  color: var(--text);
  font-size: 1.28rem;
  line-height: 1.04;
  font-weight: 950;
}

.setup-step-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 34px;
  border-radius: 999px;
  padding: 0 13px;
  background: var(--blue-soft);
  color: var(--blue);
  font-size: 0.78rem;
  font-weight: 950;
  white-space: nowrap;
}

.setup-optional-note {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 4px;
  margin-top: 12px;
  border: 1.5px solid rgba(245, 158, 11, 0.24);
  border-radius: 999px;
  padding: 9px 12px;
  background: linear-gradient(135deg, #fff 0%, var(--warning-soft) 100%);
}

.setup-optional-note strong {
  color: var(--text);
  font-size: 0.9rem;
  font-weight: 950;
}

.setup-optional-note span {
  color: var(--muted);
  font-size: 0.76rem;
  line-height: 1;
  font-weight: 800;
}

.setup-status-grid {
  display: none;
  grid-template-columns: 1fr;
  gap: 8px;
  margin-top: 14px;
}

.setup-status-grid .setup-status-tile {
  position: relative;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 4px;
  align-items: center;
  border-radius: 14px;
  padding: 12px 14px;
  background: var(--surface-soft);
}

.setup-status-grid .setup-status-tile span,
.setup-status-grid .setup-status-tile strong {
  grid-column: 1;
}

.setup-status-indicator {
  grid-column: 2;
  grid-row: 1 / span 2;
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  border: 2px solid var(--border);
  border-radius: 999px;
  background: #fff;
}

.setup-status-tile.ready .setup-status-indicator {
  border-color: var(--green);
  background: var(--green);
}

.setup-status-tile.ready .setup-status-indicator::after {
  content: "";
  width: 7px;
  height: 12px;
  border: solid #fff;
  border-width: 0 2px 2px 0;
  transform: translateY(-1px) rotate(45deg);
}

.setup-actions .primary-action {
  flex: 1;
}

.setup-pairing-panel,
.setup-choice-panel {
  display: grid;
  gap: 10px;
  margin-top: 14px;
  border: 1.5px solid var(--border);
  border-radius: 18px;
  padding: 14px;
}

.setup-choice-panel {
  grid-template-columns: 1fr;
  background: #fff;
  box-shadow: var(--shadow-soft);
}

.setup-choice-list {
  display: grid;
  gap: 10px;
}

.setup-choice {
  min-height: 76px;
  display: grid;
  grid-template-columns: 42px 1fr;
  gap: 6px 12px;
  align-items: center;
  text-align: left;
  border: 2px solid var(--border);
  border-radius: 16px;
  padding: 14px;
  background: #fff;
  box-shadow: none;
}

.setup-choice.active {
  border-color: var(--blue);
  background: var(--blue-soft);
  box-shadow: 0 0 0 2px rgba(10, 91, 255, 0.12);
}

.setup-choice strong {
  min-width: 0;
  color: var(--text);
  font-size: 1.02rem;
  line-height: 1.08;
}

.setup-choice .device-icon {
  grid-row: span 2;
}

.setup-choice small {
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 700;
  line-height: 1.18;
}

.pairing-card,
.setup-option-list,
.control-mode-list,
.alert-choice-list,
.onboarding-value-list {
  background: #fff;
  box-shadow: var(--shadow-soft);
}

.setup-skip,
.text-button {
  min-height: 36px;
  border: 0;
  background: transparent;
  color: var(--blue);
  font-weight: 900;
}

.tesla-auth-browser {
  overflow: hidden;
  margin-top: 12px;
  border: 1.5px solid var(--border);
  border-radius: 18px;
}

.browser-bar {
  padding: 10px 12px;
  background: var(--surface-soft);
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 850;
}

.browser-body {
  display: grid;
  gap: 10px;
  padding: 16px;
}

.tesla-lock {
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  background: var(--surface-soft);
}

.boost-options {
  margin-top: 12px;
}

.boost-options-head {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 8px;
}

.command-preview-grid,
.ai-detail-card,
.launch-summary,
.first-schedule-card {
  display: grid;
  gap: 8px;
  margin-top: 12px;
}

.command-sheet {
  display: grid;
  gap: 14px;
}

.command-sheet .sheet-top {
  align-items: flex-start;
}

.command-sheet h2 {
  line-height: 1.02;
}

.command-preview-grid {
  gap: 8px;
  margin-top: 0;
}

.command-preview-grid div,
.ai-detail-card,
.launch-summary,
.first-schedule-card {
  border-radius: 14px;
  padding: 12px;
  background: var(--surface-soft);
}

.command-preview-grid div {
  display: grid;
  grid-template-columns: minmax(78px, 0.52fr) minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  min-height: 54px;
  border: 1px solid var(--border);
  padding: 10px 12px;
}

.command-preview-grid span,
.command-preview-grid strong {
  min-width: 0;
  overflow-wrap: anywhere;
}

.command-preview-grid span {
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 900;
  text-transform: uppercase;
}

.command-preview-grid strong {
  color: var(--text);
  font-size: 0.95rem;
  line-height: 1.15;
  text-align: right;
}

.command-sheet .panel-note {
  margin: 0;
  line-height: 1.34;
}

.command-actions {
  display: grid;
  grid-template-columns: minmax(96px, 0.72fr) minmax(150px, 1.28fr);
  gap: 10px;
  align-items: center;
  margin-top: 0;
}

.command-actions .primary-action,
.command-actions .secondary-action {
  width: 100%;
  min-height: 46px;
  padding: 0 14px;
}

.command-failure {
  display: grid;
  gap: 4px;
  margin-top: 12px;
  border-radius: 14px;
  padding: 12px;
  background: var(--danger-soft);
  color: var(--danger);
}

.toast {
  position: fixed;
  top: 18px;
  left: 50%;
  z-index: 999;
  display: none;
  max-width: min(90vw, 360px);
  border-radius: 14px;
  padding: 11px 16px;
  color: #fff;
  background: var(--text);
  box-shadow: 0 12px 32px rgba(17, 18, 23, 0.25);
  font-size: 0.86rem;
  font-weight: 850;
  transform: translateX(-50%);
}

.toast.show {
  display: block;
  animation: toast-pop 2.4s forwards;
}

@keyframes toast-pop {
  0% {
    opacity: 0;
    transform: translateX(-50%) translateY(-10px);
  }

  12%,
  78% {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
  }

  100% {
    opacity: 0;
    transform: translateX(-50%) translateY(-10px);
  }
}

.icon-button:focus-visible,
.avatar:focus-visible,
.primary-action:focus-visible,
.secondary-action:focus-visible,
.charge-state-button:focus-visible,
.ai-card:focus-visible,
.bottom-tabs button:focus-visible,
.day-tabs button:focus-visible,
.schedule-line button:focus-visible,
input:focus-visible,
select:focus-visible,
.settings-row.button-row:focus-visible,
.setup-skip:focus-visible,
.rate-card-option:focus-visible {
  outline: 3px solid rgba(10, 91, 255, 0.28);
  outline-offset: 2px;
}

body.native-app,
html.native-app {
  background: var(--surface);
}

body.native-app .plug-stage,
body.native-app .phone-shell {
  display: block;
  width: 100%;
  min-height: 100vh;
  padding: 0;
}

body.native-app .phone-frame {
  width: 100%;
  max-width: none;
  height: 100vh;
  min-height: 100vh;
  border-radius: 0;
  box-shadow: none;
}

body.native-app .app-header {
  padding-top: max(20px, env(safe-area-inset-top));
}

@media (max-width: 860px) {
  .plug-stage {
    display: block;
    padding: 0;
  }

  .phone-shell,
  .phone-frame {
    width: 100%;
  }

  .phone-frame {
    height: 100vh;
    min-height: 100vh;
    border-radius: 0;
    box-shadow: none;
  }
}

@media (max-width: 460px) {
  .screen-stack {
    height: calc(100% - 112px - 76px);
  }

  .quick-actions {
    grid-template-columns: 1fr;
  }

  .home-charge-source-grid {
    grid-template-columns: 1fr;
  }

  .charge-button-group {
    grid-template-columns: 1fr 1fr;
  }

  .simulator-body,
  .garage-command-grid,
  .garage-estimate-grid,
  .utility-form-grid,
  .split-field,
  .tesla-config-grid,
  .device-facts,
  .garage-health-grid,
  .garage-telemetry-grid {
    grid-template-columns: 1fr;
  }

  .rate-strip {
    gap: 7px;
  }

  .rate-strip article {
    min-height: 112px;
    padding: 10px;
  }

  .rate-strip strong {
    font-size: 1.05rem;
  }
}

/* v1-v9 fidelity pass: keep the production wiring, but match the storyboard
   phone proportions and card/navigation language much more closely. */
@media (min-width: 431px) {
  .plug-stage {
    min-height: 100vh;
    display: grid;
    place-items: start center;
    padding: 24px;
    background: var(--bg);
  }

  .phone-shell {
    width: 390px;
  }

  .phone-frame {
    width: 390px;
    height: 844px;
    min-height: 844px;
    overflow: hidden;
    border: 10px solid #17181d;
    border-radius: 44px;
    background: var(--surface);
    box-shadow: var(--shadow);
  }
}

.app-header {
  min-height: 62px;
  padding: 18px 20px 8px;
}

.auth-strip {
  display: none;
}

.screen-stack {
  height: calc(100% - 62px - 76px);
}

.screen-view {
  padding: 18px 20px 24px;
}

.screen-heading {
  align-items: end;
  margin-bottom: 14px;
}

.screen-heading h2,
.screen-title-visible {
  font-size: 30px;
  line-height: 1;
}

.hero-card,
.ai-card,
.tesla-card,
.simulator-card,
.state-center-card,
.schedule-explain-card,
.schedule-mode-card,
.schedule-context-card,
.schedule-panel,
.ready-card,
.automation-card,
.settings-card,
.log-card,
.bar-card,
.big-stat,
.hint-card,
.raw-api-card,
.garage-hero,
.garage-metric-grid article,
.vehicle-data-card,
.devices-hub-card,
.savings-assumptions-card {
  border-radius: 18px;
  box-shadow: var(--shadow-soft);
}

.bottom-tabs {
  height: 76px;
  padding: 0;
  align-items: stretch;
  background: rgba(255, 255, 255, 0.97);
  backdrop-filter: none;
}

.bottom-tabs button {
  min-height: 76px;
  border-radius: 0;
  background: transparent;
  color: var(--muted);
  font-size: 11px;
}

.bottom-tabs button.active {
  color: var(--blue);
  background: transparent;
}

.bottom-tabs svg {
  width: 19px;
  height: 19px;
}

.bottom-tabs button:focus-visible {
  outline: 0;
  outline-offset: 0;
}

.setup-overlay {
  align-items: stretch;
  padding: 0;
  background: var(--surface);
  backdrop-filter: none;
}

.setup-sheet.onboarding-screen {
  max-height: none;
  height: 100%;
  border-radius: 0;
  padding: 20px;
  box-shadow: none;
}

.setup-top.onboarding-top {
  min-height: 44px;
  margin-top: 0;
}

.setup-step-card.onboarding-hero {
  margin-top: 18px;
  padding: 18px;
  border-radius: 20px;
}

.setup-copy {
  color: var(--muted);
  font-size: 1rem;
  line-height: 1.38;
}

.garage-hero {
  min-height: 72px;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
}

.garage-source-grid {
  gap: 10px;
}

.garage-car-art {
  width: 44px;
  height: 44px;
  flex: 0 0 44px;
  border-radius: 16px;
}

.garage-source-card .garage-source-icon {
  width: 44px;
  height: 44px;
  flex-basis: 44px;
  border-radius: 16px;
}

.garage-car-art svg {
  width: 30px;
  height: 30px;
}

.garage-source-card .garage-source-icon svg {
  width: 28px;
  height: 28px;
}

.garage-hero-copy {
  min-width: 0;
  margin-top: 0;
}

.garage-hero-copy strong {
  font-size: 18px;
  line-height: 1.1;
}

.garage-metric-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0;
  margin: 10px 0 14px;
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: 18px;
  background: var(--surface);
  box-shadow: var(--shadow-soft);
}

.garage-metric-grid article {
  min-height: 60px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 4px 14px;
  margin: 0;
  border: 0;
  border-bottom: 1px solid var(--border);
  border-radius: 0;
  padding: 12px 14px;
  background: transparent;
  box-shadow: none;
}

.garage-metric-grid article:last-child {
  border-bottom: 0;
}

.garage-metric-grid span,
.garage-metric-grid small {
  min-width: 0;
}

.garage-metric-grid span {
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 900;
  letter-spacing: 0.06em;
  line-height: 1.05;
  text-transform: uppercase;
}

.garage-metric-grid strong {
  grid-column: 2;
  grid-row: 1 / 3;
  max-width: 140px;
  overflow: hidden;
  color: var(--text);
  font-size: 1.18rem;
  font-weight: 950;
  line-height: 1;
  text-align: right;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.garage-metric-grid small {
  color: var(--muted);
  font-size: 0.94rem;
  line-height: 1.16;
  overflow-wrap: anywhere;
}

.vehicle-data-card {
  margin-top: 14px;
}

body.native-app .phone-frame,
body.native-app .plug-stage,
body.native-app .phone-shell {
  border: 0;
  border-radius: 0;
}

@media (max-width: 430px) {
  .plug-stage {
    display: block;
    padding: 0;
  }

  .phone-shell,
  .phone-frame {
    width: 100%;
  }

  .phone-frame {
    height: 100vh;
    min-height: 100vh;
    border: 0;
    border-radius: 0;
    box-shadow: none;
  }

  .screen-stack {
    height: calc(100% - 62px - 76px);
  }
}