/* Design "Studio" (themes.DESIGNS, everyone's: themes.DEFAULT_DESIGN), built after the design proposal of October 2026
   ("demo-test"), in the spirit of Material 3: a white menu down the left (a small label, the pages with icons, a tip
   card, settings at the foot), a bar on top with where you are, the events bell and an account button; each page
   opens with a small label and its name; the dashboard greets you, then a deep accent hero with the car and its
   battery, three key figures with tonal icon chips, prices by the hour, your month, chargers and cars as rows and
   tonight's charge. White panels with a hairline and a whisper of shadow, key/value rows with fine lines, filled and
   outlined pill buttons, tonal status chips, segmented pills, Manrope over DM Sans. On a phone a navigation bar at the
   bottom (an indicator pill behind the current icon) and the account button on top. Colours are the theme's. */

@font-face {
  font-family: "DM Sans"; font-style: normal; font-weight: 100 1000; font-display: swap;
  src: url("/static/fonts/dm-sans-latin-wght-normal.woff2") format("woff2");
}
@font-face {
  font-family: "Manrope"; font-style: normal; font-weight: 200 800; font-display: swap;
  src: url("/static/fonts/manrope-latin-wght-normal.woff2") format("woff2");
}

:root[data-design="studio"] {
  --sans: "DM Sans", system-ui, sans-serif;
  --display: "Manrope", "DM Sans", system-ui, sans-serif;
  --pale: color-mix(in srgb, var(--accent) 11%, var(--card));       /* the current page, tonal chips */
  --pale-2: color-mix(in srgb, var(--accent) 6%, var(--card));      /* hover */
  --soft: color-mix(in srgb, var(--text) 3.5%, var(--card));        /* segmented tracks, wells */
  --line: color-mix(in srgb, var(--text) 8%, var(--card));          /* hairlines inside and around panels */
  --outline: color-mix(in srgb, var(--accent) 22%, var(--line));    /* outlined buttons */
  --good: color-mix(in srgb, var(--s3) 55%, var(--text));           /* "below average", savings: 4.5:1 or more on the card */
  --lift: 0 3px 22px color-mix(in srgb, var(--text) 3%, transparent);
  --menu: 250px;
  --bar: 76px;
  --glass: var(--card); --field: var(--card); --sky: none; --blur: none; --surface-2: var(--soft);
  --radius: 22px; --radius-sm: 12px;
}
[data-design="studio"] body { background: var(--bg); font-family: var(--sans); font-size: 14px; line-height: 1.55; }
[data-design="studio"] body::before { display: none; }
[data-design="studio"] h1, [data-design="studio"] h2, [data-design="studio"] h3, [data-design="studio"] .brand,
[data-design="studio"] .tonight-head, [data-design="studio"] .tile strong, [data-design="studio"] .page-intro-title { font-family: var(--display); }
[data-design="studio"] h1 { font-size: 1.95rem; font-weight: 800; letter-spacing: -0.04em; line-height: 1.15; }
[data-design="studio"] h2 { font-size: 1.15rem; font-weight: 750; letter-spacing: -0.025em; }
[data-design="studio"] h3 { font-size: 1.05rem; font-weight: 750; letter-spacing: -0.025em; }
[data-design="studio"] .card h1 { font-size: 1.35rem; font-weight: 800; letter-spacing: -0.03em; }
[data-design="studio"] a { color: var(--accent); text-decoration-color: color-mix(in srgb, var(--accent) 30%, transparent); text-underline-offset: 3px; }
[data-design="studio"] :focus-visible { outline: 3px solid color-mix(in srgb, var(--accent) 50%, transparent); outline-offset: 3px; }
[data-design="studio"] .muted { color: var(--muted); }
[data-design="studio"] .eyebrow { margin: 0 0 8px; font-size: 0.74rem; font-weight: 750; letter-spacing: 0.09em; color: var(--muted); }
[data-design="studio"] .nav-icon { display: inline-block; width: 18px; height: 18px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

/* --- The menu: white, down the left ---------------------------------------------------------------------------- */
@media (min-width: 900px) {
  [data-design="studio"] .top {
    position: fixed; inset: 0 auto 0 0; width: var(--menu); margin: 0; padding: 30px 17px 18px; border: 0; border-right: 1px solid var(--line); border-radius: 0;
    flex-direction: column; align-items: stretch; gap: 0; background: var(--card); box-shadow: none; backdrop-filter: none; -webkit-backdrop-filter: none; z-index: 20;
    overflow-y: auto; scrollbar-width: none;
  }
  [data-design="studio"] .brand { margin: 2px 14px 36px; font-size: 1.5rem; font-weight: 800; letter-spacing: -0.06em; color: var(--text); }
  [data-design="studio"] .brand-mark { border-radius: 10px; }
  [data-design="studio"] .top nav { flex: 1; flex-direction: column; align-items: stretch; gap: 4px; margin: 0; }
  [data-design="studio"] .nav-label { display: block; margin: 0 15px 10px; font-size: 0.7rem; font-weight: 800; letter-spacing: 0.1em; color: var(--muted); }
  [data-design="studio"] .top nav a, [data-design="studio"] .top nav button.link {
    display: flex; align-items: center; gap: 12px; width: 100%; padding: 12px 15px; border-radius: var(--radius-sm);
    justify-content: flex-start; color: var(--muted); font-weight: 700; font-size: 0.86rem; text-align: left; text-decoration: none; border: 0;
  }
  [data-design="studio"] .top nav a:hover, [data-design="studio"] .top nav button.link:hover { background: var(--pale-2); color: var(--accent); }
  [data-design="studio"] .top nav a[aria-current="page"] { background: var(--pale); color: var(--accent); box-shadow: none; }
  /* the tip card above settings */
  [data-design="studio"] .side-tip { display: block; margin: auto 4px 18px; padding: 18px 15px; border-radius: 18px; background: var(--pale); }
  [data-design="studio"] .side-tip-icon { display: grid; place-items: center; width: 34px; height: 34px; margin-bottom: 12px; border-radius: 11px; background: var(--card); color: var(--accent); }
  [data-design="studio"] .side-tip .nav-icon { display: inline-block; }
  [data-design="studio"] .side-tip strong { display: block; font: 800 0.92rem var(--display); color: var(--text); }
  [data-design="studio"] .side-tip p { margin: 6px 0 12px; font-size: 0.8rem; line-height: 1.5; color: var(--muted); }
  [data-design="studio"] .top nav .side-tip a { display: inline-flex; width: auto; gap: 6px; padding: 0; background: none; color: var(--accent); font-size: 0.8rem; font-weight: 800; }
  [data-design="studio"] .side-tip a .nav-icon { width: 14px; height: 14px; }
  [data-design="studio"] .top nav form { display: block; margin: 0; padding-top: 8px; border-top: 1px solid var(--line); }
  [data-design="studio"] .top nav form button.link { margin-top: 4px; }
  [data-design="studio"] .lang-switch { margin: 12px 14px 0; }
  [data-design="studio"] .news-link { margin: -24px 14px 14px; }
  /* the bar on top: where you are on the left, the bell and the account on the right */
  [data-design="studio"] .page-head {
    display: flex; align-items: center; gap: 12px; position: fixed; top: 0; left: var(--menu); right: 0; height: var(--bar); padding: 0 43px;
    background: var(--card); border-bottom: 1px solid var(--line); font-size: 0.86rem; color: var(--muted); z-index: 15;
  }
  [data-design="studio"] .page-head .page-date { display: none; }
  [data-design="studio"] .page-head .page-title { order: 1; color: var(--text); font-weight: 700; }
  [data-design="studio"] .page-head::before { content: "WattVise"; order: -1; }
  [data-design="studio"] .page-head .page-trail { order: 0; }
  [data-design="studio"] .page-head .page-trail::before, [data-design="studio"] .page-head .page-title::before { content: "/"; margin-right: 12px; color: color-mix(in srgb, var(--muted) 50%, transparent); font-weight: 400; }
  [data-design="studio"] .top-tools { position: fixed; top: 0; right: 43px; height: var(--bar); z-index: 16; }
  [data-design="studio"] main { max-width: 1510px; margin: 0 0 80px var(--menu); padding: calc(var(--bar) + 34px) 43px 0; }
}
@media (min-width: 900px) and (max-width: 1150px) {
  :root[data-design="studio"] { --menu: 214px; }
  [data-design="studio"] .page-head { padding: 0 25px; }
  [data-design="studio"] .top-tools { right: 25px; }
  [data-design="studio"] main { padding: calc(var(--bar) + 27px) 25px 0; }
}

/* The bell and the account button with its menu */
[data-design="studio"] body:not(.signed-out) .top-tools { display: flex; align-items: center; gap: 14px; }
[data-design="studio"] .top-tools .bell { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; color: var(--muted); }
[data-design="studio"] .top-tools .bell:hover { background: var(--pale-2); color: var(--accent); }
[data-design="studio"] .top-tools .nav-icon { display: inline-block; width: 20px; height: 20px; }
[data-design="studio"] .account-menu { position: relative; margin: 0; }
[data-design="studio"] .account-menu summary { display: flex; align-items: center; gap: 6px; list-style: none; cursor: pointer; color: var(--muted); }
[data-design="studio"] .account-menu summary::-webkit-details-marker { display: none; }
[data-design="studio"] .account-menu summary .nav-icon { width: 15px; height: 15px; }
[data-design="studio"] .avatar { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: var(--pale); color: var(--accent); font: 800 0.74rem var(--display); letter-spacing: 0.02em; }
[data-design="studio"] .account-pop {
  position: absolute; right: 0; top: calc(100% + 10px); width: 240px; padding: 16px; display: grid; gap: 2px; z-index: 30;
  background: var(--card); border: 1px solid var(--line); border-radius: 16px; box-shadow: 0 14px 50px color-mix(in srgb, var(--text) 14%, transparent);
}
[data-design="studio"] .account-pop strong { display: block; padding: 0 4px 12px; margin-bottom: 6px; border-bottom: 1px solid var(--line); font-size: 0.86rem; overflow-wrap: anywhere; color: var(--text); }
[data-design="studio"] .account-pop a, [data-design="studio"] .account-pop button.link { display: block; width: 100%; padding: 9px 8px; border-radius: 8px; color: var(--text); text-decoration: none; text-align: left; font-weight: 500; font-size: 0.88rem; }
[data-design="studio"] .account-pop a:hover, [data-design="studio"] .account-pop button.link:hover { background: var(--pale-2); text-decoration: none; }
[data-design="studio"] .account-pop form { margin: 0; padding: 0; border: 0; }

/* --- Phone: a bar on top, a navigation bar at the bottom ------------------------------------------------------- */
@media (max-width: 899px) {
  [data-design="studio"] .top {
    position: sticky; top: 0; margin: 0; padding: 0 16px; height: 64px; border: 0; border-bottom: 1px solid var(--line); border-radius: 0;
    background: var(--card); backdrop-filter: none; -webkit-backdrop-filter: none; z-index: 20; flex-wrap: nowrap; gap: 10px;
  }
  [data-design="studio"] .brand { font-size: 1.2rem; font-weight: 800; letter-spacing: -0.05em; color: var(--text); margin-right: auto; }
  [data-design="studio"] .top-tools { order: 3; gap: 8px; }
  [data-design="studio"] .lang-switch { order: 2; margin: 0; }
  /* the navigation bar: an icon over a short name, the current one with a pill behind its icon */
  [data-design="studio"] .top nav {
    position: fixed; left: 0; right: 0; bottom: 0; display: flex; flex-wrap: nowrap; gap: 0; margin: 0; padding: 8px 4px calc(8px + env(safe-area-inset-bottom));
    overflow-x: auto; scrollbar-width: none; background: var(--card); border-top: 1px solid var(--line); z-index: 20;
  }
  [data-design="studio"] .top nav a, [data-design="studio"] .top nav button.link {
    display: flex; flex: 1 0 62px; flex-direction: column; align-items: center; gap: 4px; padding: 0 2px; border: 0; background: none;
    color: var(--muted); font-size: 0.68rem; font-weight: 700; line-height: 1.2; text-align: center; text-decoration: none; white-space: nowrap;
  }
  [data-design="studio"] .top nav .nav-icon { width: 56px; height: 30px; padding: 5px 0; border-radius: 999px; box-sizing: border-box; }
  [data-design="studio"] .top nav a[aria-current="page"] { color: var(--text); background: none; box-shadow: none; }
  [data-design="studio"] .top nav a[aria-current="page"] .nav-icon { background: var(--pale); color: var(--accent); }
  /* features, help, admin and logging out are in the account menu on a phone */
  [data-design="studio"] .top nav a[href="/help"], [data-design="studio"] .top nav a[href="/features"], [data-design="studio"] .top nav a[href="/admin"], [data-design="studio"] .top nav form, [data-design="studio"] .top nav .badge { display: none; }
  [data-design="studio"] main { margin-top: 0; padding: 25px 16px 104px; }
  [data-design="studio"] .account-pop { position: fixed; top: 60px; right: 12px; }
}

/* --- Page openings ------------------------------------------------------------------------------------------- */
[data-design="studio"] .page-intro { display: block; margin: 0 2px 25px; }
[data-design="studio"] .page-intro-title { margin: 0; font-size: 1.95rem; font-weight: 800; letter-spacing: -0.04em; line-height: 1.15; color: var(--text); }
[data-design="studio"] .welcome-line { display: flex; justify-content: space-between; align-items: center; gap: 16px; margin: 0 2px 25px; }
[data-design="studio"] .welcome-line h1 { margin: 0 0 5px; }
[data-design="studio"] .welcome-line .wave { margin-left: 4px; font-size: 1.3rem; color: color-mix(in srgb, var(--accent) 55%, var(--card)); }
[data-design="studio"] .subtitle { margin: 0; color: var(--muted); font-size: 0.93rem; }
@media (max-width: 640px) {
  [data-design="studio"] .welcome-line > .button { display: none; }
  [data-design="studio"] h1, [data-design="studio"] .page-intro-title { font-size: 1.65rem; }
}

/* --- Panels -------------------------------------------------------------------------------------------------- */
[data-design="studio"] .card { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 23px 24px; margin-bottom: 18px;
  box-shadow: var(--lift); backdrop-filter: none; -webkit-backdrop-filter: none; }
@media (max-width: 640px) { [data-design="studio"] .card { padding: 18px; } }
[data-design="studio"] .flash { border: 0; border-radius: 14px; backdrop-filter: none; -webkit-backdrop-filter: none; }
[data-design="studio"] .section { margin-top: 36px; }
[data-design="studio"] .section-head { margin: 0 2px 14px; }
[data-design="studio"] .section-head h2, [data-design="studio"] .section-head h1 { font-size: 1.3rem; font-weight: 800; letter-spacing: -0.03em; }
[data-design="studio"] .section-head a, [data-design="studio"] .unit-links a, [data-design="studio"] .manage-link a, [data-design="studio"] .text-link {
  font-weight: 750; text-decoration: none;
}
[data-design="studio"] .section-head a:hover, [data-design="studio"] .unit-links a:hover, [data-design="studio"] .manage-link a:hover, [data-design="studio"] .text-link:hover { text-decoration: underline; }
[data-design="studio"] .text-link { display: inline-flex; align-items: center; gap: 7px; margin-top: 12px; font-size: 0.86rem; }
[data-design="studio"] .text-link .nav-icon { width: 15px; height: 15px; }
[data-design="studio"] details > summary { font-weight: 650; }
[data-design="studio"] hr { border: 0; border-top: 1px solid var(--line); }

/* Settings and other sub-menus: a segmented track, the chosen one lifted */
[data-design="studio"] .subnav { display: flex; gap: 2px; width: fit-content; max-width: 100%; padding: 4px; border-radius: 999px; background: var(--soft); border: 1px solid var(--line); overflow-x: auto; scrollbar-width: none; flex-wrap: nowrap; }
[data-design="studio"] .subnav a { padding: 8px 15px; border: 0; border-radius: 999px; background: none; color: var(--muted); font-weight: 700; font-size: 0.84rem; white-space: nowrap; backdrop-filter: none; -webkit-backdrop-filter: none; }
[data-design="studio"] .subnav a:hover { color: var(--accent); }
[data-design="studio"] .subnav a[aria-current="page"] { background: var(--card); color: var(--accent); box-shadow: 0 1px 5px color-mix(in srgb, var(--text) 10%, transparent); }
[data-design="studio"] .subnav .help-link { margin-left: 10px; }
[data-design="studio"] .seg, [data-design="studio"] .view-switch { padding: 3px; background: var(--soft); border: 1px solid var(--line); }
[data-design="studio"] nav.seg a, [data-design="studio"] .view-switch label { padding: 6px 13px; font-weight: 700; font-size: 0.8rem; }
[data-design="studio"] nav.seg a[aria-current], [data-design="studio"] .view-switch label:has(input:checked) { color: var(--accent); box-shadow: 0 1px 5px color-mix(in srgb, var(--text) 10%, transparent); }
[data-design="studio"] .car-switch a { padding: 6px 13px; border-color: var(--line); background: var(--card); font-weight: 650; }
[data-design="studio"] .car-switch a[aria-current] { background: var(--pale); color: var(--accent); border-color: transparent; }
[data-design="studio"] .help-toc a { background: var(--pale); color: var(--accent); font-weight: 700; }

/* Facts as rows: the label on the left, the value on the right, a hairline between (the proposal's setting rows) */
[data-design="studio"] dl.facts, [data-design="studio"] dl.rows { display: block; margin: 4px 0 0; }
[data-design="studio"] dl.facts > div, [data-design="studio"] dl.rows > div {
  display: flex; justify-content: space-between; align-items: center; gap: 6px 16px; flex-wrap: wrap;
  padding: 14px 0; background: none; border-radius: 0; border-bottom: 1px solid var(--line);
}
[data-design="studio"] dl.facts dt, [data-design="studio"] dl.rows dt { margin: 0; font-size: 0.84rem; color: var(--muted); }
[data-design="studio"] dl.facts dd, [data-design="studio"] dl.rows dd { margin: 0; justify-content: flex-end; text-align: right; font-size: 0.86rem; font-weight: 700; color: var(--text); }
[data-design="studio"] dl.facts dd .muted { font-weight: 500; }
[data-design="studio"] dl.facts.compact { margin-top: 10px; }
[data-design="studio"] table.facts th { color: var(--muted); font-weight: 500; }

/* Key figures */
[data-design="studio"] .tiles { gap: 14px; }
[data-design="studio"] .tile { background: var(--card); border: 1px solid var(--line); border-radius: 18px; padding: 18px 20px; }
[data-design="studio"] .card .tile { background: var(--soft); border-color: transparent; }
[data-design="studio"] .tile strong { font-size: 1.6em; font-weight: 800; letter-spacing: -0.035em; }

/* Tables */
[data-design="studio"] th, [data-design="studio"] td { border-bottom-color: var(--line); }
[data-design="studio"] thead th { font-size: 0.78rem; font-weight: 750; letter-spacing: 0.02em; color: var(--muted); }
[data-design="studio"] tbody tr:hover > td { background: var(--pale-2); }

/* Buttons: filled for the main action, outlined for the rest, text links with an arrow */
[data-design="studio"] button, [data-design="studio"] .button {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; border-radius: 999px; padding: 10px 18px;
  font-weight: 750; font-size: 0.84rem; letter-spacing: 0.005em; white-space: nowrap; text-decoration: none; box-shadow: none;
}
[data-design="studio"] .button .nav-icon, [data-design="studio"] button .nav-icon { width: 16px; height: 16px; }
[data-design="studio"] button.small, [data-design="studio"] a.button.small { padding: 7px 13px; font-size: 0.78rem; }
[data-design="studio"] button.link { display: inline; padding: 0; border-radius: 0; font-weight: 650; white-space: normal; }
[data-design="studio"] button.secondary, [data-design="studio"] .button.secondary { background: var(--card); color: var(--accent); border: 1px solid var(--outline); }
[data-design="studio"] button.secondary:hover, [data-design="studio"] .button.secondary:hover { background: var(--pale-2); border-color: var(--outline); }
[data-design="studio"] button.toggle.off { background: var(--soft); color: var(--muted); border: 1px solid var(--line); }
/* Fields */
[data-design="studio"] input[type=email], [data-design="studio"] input[type=password], [data-design="studio"] input:not([type]), [data-design="studio"] input[type=number],
[data-design="studio"] input[type=time], [data-design="studio"] input[type=text], [data-design="studio"] input[type=search], [data-design="studio"] select, [data-design="studio"] textarea {
  border-radius: var(--radius-sm); background: var(--field); border-color: color-mix(in srgb, var(--text) 14%, var(--card)); min-height: 40px;
}
[data-design="studio"] label { font-weight: 600; }
[data-design="studio"] .check { border-color: var(--line); border-radius: 14px; }
[data-design="studio"] .check:has(input:checked) { background: var(--pale-2); border-color: var(--outline); }
/* Status chips: tonal, a dot in front */
[data-design="studio"] .status { padding: 4px 10px; border-radius: 999px; border: 0; font-size: 0.74rem; font-weight: 750; white-space: nowrap; }
[data-design="studio"] .status:not(.charging):not(.waiting):not(.offline):not(.cheap):not(.high) { background: var(--soft); }
[data-design="studio"] .status.charging { background: color-mix(in srgb, var(--s3) 14%, var(--card)); color: var(--good); }
[data-design="studio"] .status.charging::before { background: var(--s3); }
[data-design="studio"] .brand-tile { border-color: var(--line); border-radius: 18px; }
[data-design="studio"] .brand-tile:hover, [data-design="studio"] .brand-tile:focus-visible { background: var(--pale-2); border-color: var(--outline); }
[data-design="studio"] code { background: var(--soft); }

/* --- The dashboard --------------------------------------------------------------------------------------------- */
/* The hero: tonight's charging, deep accent, the text on the left, the car and its battery on the right */
[data-design="studio"] .tonight { display: block; margin: 0 0 18px; }
[data-design="studio"] .tonight-line {
  position: relative; display: block; min-height: 278px; margin-bottom: 14px; padding: 28px 32px 26px; border-radius: 24px; overflow: hidden;
  /* deep in both: the accent itself by day; at night (a light accent) mixed down into the panel colour, with light text */
  --hero-ink: light-dark(var(--accent-text), var(--text));
  --hero-deep: light-dark(color-mix(in oklab, var(--accent) 62%, #000), color-mix(in oklab, var(--accent) 16%, var(--bg)));
  color: var(--hero-ink);
  background: radial-gradient(circle at 79% 46%,
    light-dark(color-mix(in oklab, var(--accent) 66%, #fff), color-mix(in oklab, var(--accent) 50%, var(--card))) 0%,
    light-dark(var(--accent), color-mix(in oklab, var(--accent) 30%, var(--card))) 36%,
    var(--hero-deep) 100%);
}
[data-design="studio"] .tonight-line::before { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(90deg, var(--hero-deep) 0%, color-mix(in oklab, var(--hero-deep) 70%, transparent) 34%, transparent 62%); }
[data-design="studio"] .tonight-line > :not(.hero-visual) { position: relative; z-index: 3; max-width: 400px; }
[data-design="studio"] .tonight-where { display: flex; align-items: center; gap: 8px; margin: 0 0 14px; font-size: 0.72rem; font-weight: 800; letter-spacing: 0.1em; color: color-mix(in srgb, var(--hero-ink) 78%, transparent); }
[data-design="studio"] .tonight-where::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: color-mix(in srgb, var(--s3) 45%, #fff); box-shadow: 0 0 0 3px color-mix(in srgb, var(--hero-ink) 16%, transparent); }
[data-design="studio"] .tonight-head { margin: 0; font-size: clamp(1.75rem, 3vw, 2.25rem); font-weight: 800; letter-spacing: -0.045em; line-height: 1.12; text-wrap: balance; }
[data-design="studio"] .tonight-detail { margin: 10px 0 0; font-size: 0.86rem; line-height: 1.65; color: color-mix(in srgb, var(--hero-ink) 84%, transparent); }
[data-design="studio"] .tonight-battery, [data-design="studio"] .tonight-time { display: none; }
[data-design="studio"] .tonight-action { display: flex; align-items: center; flex-wrap: wrap; gap: 10px 18px; margin-top: 20px; }
[data-design="studio"] .tonight-action button { background: var(--hero-ink); color: light-dark(var(--accent), var(--bg)); border: 0; padding: 10px 16px; }
[data-design="studio"] .tonight-action button:hover { background: color-mix(in srgb, var(--hero-ink) 90%, var(--accent)); }
[data-design="studio"] .tonight-action .hero-link { display: inline-flex; align-items: center; gap: 6px; color: var(--hero-ink); font-weight: 750; font-size: 0.84rem; text-decoration: none; }
[data-design="studio"] .tonight-action .hero-link:hover { text-decoration: underline; }
[data-design="studio"] .tonight-action .hero-link .nav-icon { width: 15px; height: 15px; }
[data-design="studio"] .hero-timing { display: block; font-size: 0.74rem; white-space: nowrap; color: color-mix(in srgb, var(--hero-ink) 80%, transparent); }
[data-design="studio"] .hero-timing strong { display: block; margin-top: 2px; font-size: 0.86rem; color: var(--hero-ink); }
[data-design="studio"] .hero-visual { display: block; position: absolute; inset: 0 0 0 36%; z-index: 2; pointer-events: none; }
[data-design="studio"] .orbit { position: absolute; border: 1px solid color-mix(in srgb, var(--hero-ink) 13%, transparent); border-radius: 50%; width: 370px; height: 370px; right: 13%; top: -47px; }
[data-design="studio"] .orbit.two { width: 515px; height: 515px; right: 4%; top: -120px; }
[data-design="studio"] .orbit.three { width: 660px; height: 660px; right: -5%; top: -195px; }
[data-design="studio"] .car-art { position: absolute; right: 1%; top: 30px; width: min(78%, 620px); height: auto; filter: drop-shadow(0 14px 15px rgb(4 8 30 / 0.35)); }
[data-design="studio"] .battery-float {
  position: absolute; right: 6%; bottom: 18px; width: 190px; padding: 13px 15px; border-radius: 15px;
  background: var(--card); color: var(--text); box-shadow: 0 12px 30px rgb(4 8 30 / 0.28);
}
[data-design="studio"] .battery-top { display: flex; align-items: center; gap: 6px; font-size: 0.66rem; font-weight: 800; letter-spacing: 0.08em; color: var(--muted); }
[data-design="studio"] .battery-top .nav-icon { width: 13px; height: 13px; color: var(--accent); fill: var(--accent); }
[data-design="studio"] .battery-figure { display: flex; align-items: baseline; justify-content: space-between; margin-top: 6px; }
[data-design="studio"] .battery-figure strong { font: 800 1.6rem var(--display); letter-spacing: -0.03em; }
[data-design="studio"] .battery-figure span { font-size: 0.74rem; color: var(--muted); }
[data-design="studio"] .battery-track { height: 6px; margin-top: 8px; border-radius: 999px; overflow: hidden; background: var(--soft); }
[data-design="studio"] .battery-track span { display: block; height: 100%; border-radius: 999px; background: var(--accent); }
[data-design="studio"] .tonight-line.empty { min-height: 230px; }
[data-design="studio"] .tonight-line.empty .tonight-head { font-size: clamp(1.5rem, 2.6vw, 2rem); }
[data-design="studio"] .tonight-advice { margin: 0 4px; color: var(--muted); }
@media (max-width: 1150px) { [data-design="studio"] .hero-visual { left: 30%; } }
@media (max-width: 640px) {
  [data-design="studio"] .tonight-line { min-height: 380px; padding: 24px 22px; }
  [data-design="studio"] .tonight-line::before { background: linear-gradient(180deg, var(--hero-deep) 0%, color-mix(in oklab, var(--hero-deep) 60%, transparent) 45%, transparent 75%); }
  [data-design="studio"] .tonight-line.empty { min-height: 330px; }
  [data-design="studio"] .hero-visual { inset: auto 0 0 0; height: 200px; }
  [data-design="studio"] .car-art { width: 92%; top: 12px; right: -10%; }
  [data-design="studio"] .orbit { right: -25%; top: -60px; }
  [data-design="studio"] .battery-float { right: 13px; bottom: 13px; width: 160px; padding: 10px 12px; }
  [data-design="studio"] .battery-figure strong { font-size: 1.25rem; }
}

/* Three key figures with tonal icon chips */
[data-design="studio"] .metric-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 15px; margin: 0 0 22px; }
[data-design="studio"] .metric-card { display: flex; gap: 15px; align-items: flex-start; min-height: 117px; padding: 21px; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--lift); }
[data-design="studio"] .metric-icon { display: grid; place-items: center; flex: none; width: 40px; height: 40px; border-radius: 12px; }
[data-design="studio"] .metric-icon .nav-icon { width: 19px; height: 19px; }
[data-design="studio"] .metric-icon.one { background: var(--pale); color: var(--accent); }
[data-design="studio"] .metric-icon.two { background: color-mix(in srgb, var(--s4) 14%, var(--card)); color: color-mix(in srgb, var(--s4) 75%, var(--text)); }
[data-design="studio"] .metric-icon.three { background: color-mix(in srgb, var(--s3) 14%, var(--card)); color: var(--good); }
[data-design="studio"] .metric-card p { margin: 0 0 3px; font-size: 0.8rem; color: var(--muted); }
[data-design="studio"] .metric-card strong { display: block; font: 800 1.6rem var(--display); letter-spacing: -0.04em; }
[data-design="studio"] .metric-card strong small { font: 700 0.78rem var(--sans); letter-spacing: 0; color: var(--muted); }
[data-design="studio"] .metric-note { display: block; margin-top: 2px; font-size: 0.74rem; color: var(--muted); }
[data-design="studio"] .metric-note.good { color: var(--good); }

/* Prices by the hour and the month, then chargers and cars with tonight's charge */
[data-design="studio"] .studio-grid { display: grid; grid-template-columns: minmax(0, 1.54fr) minmax(300px, 1fr); gap: 17px; margin-bottom: 17px; }
[data-design="studio"] .studio-grid.single { grid-template-columns: minmax(0, 1fr); }
[data-design="studio"] .studio-grid.bottom { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); }
[data-design="studio"] .studio-grid > .card { margin: 0; min-width: 0; }
[data-design="studio"] .card-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
[data-design="studio"] .card-head h3 { margin: 0 0 4px; font-size: 1.08rem; }
[data-design="studio"] .card-head .eyebrow { margin-bottom: 6px; }
[data-design="studio"] .card-head .note { margin: 0; font-size: 0.78rem; color: var(--muted); }
[data-design="studio"] .head-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
[data-design="studio"] .seg-pick { display: flex; padding: 3px; border-radius: 999px; background: var(--soft); }
[data-design="studio"] .seg-pick label { margin: 0; padding: 6px 12px; border-radius: 999px; font-size: 0.78rem; font-weight: 700; color: var(--muted); cursor: pointer; }
[data-design="studio"] .area-pill { padding: 6px 12px; border: 1px solid var(--line); border-radius: 999px; font-size: 0.78rem; font-weight: 800; color: var(--text); }
[data-design="studio"] .day-pick { position: absolute; opacity: 0; pointer-events: none; }
[data-design="studio"] .chart-card { position: relative; }
[data-design="studio"] .chart-card:has(#studio-today:checked) .for-tomorrow,
[data-design="studio"] .chart-card:has(#studio-tomorrow:checked) .for-today { display: none; }
[data-design="studio"] .chart-card:has(#studio-today:checked) label[for="studio-today"],
[data-design="studio"] .chart-card:has(#studio-tomorrow:checked) label[for="studio-tomorrow"] { background: var(--card); color: var(--accent); box-shadow: 0 1px 5px color-mix(in srgb, var(--text) 10%, transparent); }
[data-design="studio"] .chart-card:has(#studio-tomorrow:disabled) label[for="studio-tomorrow"] { opacity: 0.5; cursor: default; }
[data-design="studio"] .chart-card:has(.day-pick:focus-visible) .seg-pick { outline: 3px solid color-mix(in srgb, var(--accent) 50%, transparent); outline-offset: 2px; }
[data-design="studio"] .day-chart { position: relative; margin-top: 14px; }
[data-design="studio"] .chart-call {
  position: absolute; z-index: 2; right: 3%; top: 0; min-width: 120px; padding: 9px 12px; border-radius: 11px;
  background: var(--card); border: 1px solid var(--line); box-shadow: 0 7px 25px color-mix(in srgb, var(--text) 8%, transparent);
}
[data-design="studio"] .chart-call span, [data-design="studio"] .chart-call strong, [data-design="studio"] .chart-call small { display: block; }
[data-design="studio"] .chart-call span { font-size: 0.66rem; font-weight: 800; letter-spacing: 0.06em; color: var(--muted); }
[data-design="studio"] .chart-call strong { margin: 3px 0; font-size: 0.86rem; }
[data-design="studio"] .chart-call small { font-size: 0.72rem; color: var(--good); }
[data-design="studio"] .chart-plot { position: relative; height: 200px; padding: 22px 2px 0 34px; }
[data-design="studio"] .chart-y { position: absolute; left: 0; top: 14px; bottom: -6px; display: flex; flex-direction: column; justify-content: space-between; font-size: 0.68rem; color: var(--muted); }
[data-design="studio"] .hour-bars {
  display: flex; align-items: flex-end; gap: 4px; height: 100%;
  background: repeating-linear-gradient(to top, transparent 0, transparent calc(25% - 1px), var(--line) calc(25% - 1px), var(--line) 25%);
}
[data-design="studio"] .hour-bars span { flex: 1; min-width: 3px; height: var(--h); border-radius: 5px 5px 0 0; background: color-mix(in srgb, var(--accent) 34%, var(--card)); cursor: pointer; }
[data-design="studio"] .hour-bars span.best { background: color-mix(in srgb, var(--s3) 62%, var(--card)); }
[data-design="studio"] .hour-bars span.planned { background: var(--planned); }
/* The hour under the pointer deepens in its own colour: blue, the green of the cheapest hours, the plan's */
[data-design="studio"] .hour-bars span:hover { background: var(--accent); }
[data-design="studio"] .hour-bars span.best:hover { background: color-mix(in srgb, var(--s3) 70%, var(--text)); }
[data-design="studio"] .hour-bars span.planned:hover { background: color-mix(in srgb, var(--planned) 70%, var(--text)); }
[data-design="studio"] .hour-bars span.now { box-shadow: 0 0 0 2px var(--card), 0 0 0 3.5px var(--text); }
[data-design="studio"] .chart-x { display: flex; justify-content: space-between; margin: 8px 0 0 34px; font-size: 0.68rem; color: var(--muted); }
[data-design="studio"] .chart-foot { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 15px; margin-top: 15px; padding-top: 13px; border-top: 1px solid var(--line); font-size: 0.74rem; color: var(--muted); }
[data-design="studio"] .chart-foot span { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
[data-design="studio"] .chart-foot a { margin-left: auto; font-weight: 750; text-decoration: none; }
[data-design="studio"] .dot { width: 8px; height: 8px; border-radius: 2px; }
[data-design="studio"] .dot.price { background: color-mix(in srgb, var(--accent) 34%, var(--card)); }
[data-design="studio"] .dot.best { background: color-mix(in srgb, var(--s3) 62%, var(--card)); }
[data-design="studio"] .dot.planned { background: var(--planned); }
[data-design="studio"] .next-icon { display: grid; place-items: center; flex: none; width: 36px; height: 36px; border-radius: 11px; background: var(--pale); color: var(--accent); }
[data-design="studio"] .next-icon .nav-icon { width: 17px; height: 17px; }
[data-design="studio"] .month-card dl.rows > div:last-child { border-bottom: 0; }
[data-design="studio"] .device-list { margin-top: 12px; }
[data-design="studio"] .device-row { display: flex; align-items: center; gap: 12px; padding: 12px 4px; border-top: 1px solid var(--line); color: var(--text); text-decoration: none; border-radius: 0; }
[data-design="studio"] .device-row:hover { background: var(--pale-2); }
[data-design="studio"] .device-icon { display: grid; place-items: center; flex: none; width: 38px; height: 38px; border-radius: 11px; background: var(--pale); color: var(--accent); }
[data-design="studio"] .device-name { flex: 1; min-width: 0; }
[data-design="studio"] .device-name strong, [data-design="studio"] .device-name small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
[data-design="studio"] .device-name strong { font-size: 0.88rem; }
[data-design="studio"] .device-name small { margin-top: 2px; font-size: 0.74rem; color: var(--muted); }
[data-design="studio"] .row-arrow { width: 16px; height: 16px; color: var(--muted); }
[data-design="studio"] .next-time { display: flex; align-items: baseline; justify-content: space-between; flex-wrap: wrap; gap: 8px; margin-top: 24px; }
[data-design="studio"] .next-time strong { font: 800 1.55rem var(--display); letter-spacing: -0.04em; }
[data-design="studio"] .next-time strong span { margin: 0 4px; font-size: 1.1rem; color: color-mix(in srgb, var(--accent) 45%, var(--card)); }
[data-design="studio"] .chip { padding: 5px 10px; border-radius: 999px; background: var(--pale); color: var(--accent); font-size: 0.74rem; font-weight: 800; }
[data-design="studio"] .next-detail { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 6px 12px; padding: 16px 0; border-bottom: 1px solid var(--line); font-size: 0.8rem; color: var(--muted); }
[data-design="studio"] .next-detail span:first-child { display: inline-flex; align-items: center; gap: 5px; }
[data-design="studio"] .next-detail .nav-icon { width: 14px; height: 14px; color: var(--accent); }
[data-design="studio"] .next-detail strong { color: var(--text); }
/* the chargers and cars below, in detail */
[data-design="studio"] .unit-head h3 { font-size: 1.1rem; }
[data-design="studio"] .unit-sub { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin-top: 6px; }
[data-design="studio"] .unit-grid { gap: 17px; }
@media (max-width: 1150px) {
  [data-design="studio"] .studio-grid { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 640px) {
  [data-design="studio"] .metric-row { grid-template-columns: 1fr; gap: 10px; margin-bottom: 14px; }
  [data-design="studio"] .metric-card { min-height: 0; padding: 16px; }
  [data-design="studio"] .studio-grid, [data-design="studio"] .studio-grid.bottom { grid-template-columns: minmax(0, 1fr); gap: 12px; margin-bottom: 12px; }
  [data-design="studio"] .card-head { flex-wrap: wrap; }
  [data-design="studio"] .head-actions { width: 100%; justify-content: space-between; }
  [data-design="studio"] .chart-plot { height: 180px; }
  [data-design="studio"] .hour-bars { gap: 2px; }
  [data-design="studio"] .chart-call { top: 0; right: 0; }
  [data-design="studio"] .chart-foot a { margin-left: 0; width: 100%; }
}

/* --- Charts, the same on every page (the dashboard's): soft round bars, hairline grids, small muted axes, a white
   callout for the value under the pointer (or a tap), legends as small rounded keys. Price levels as on the
   dashboard: cheap in the green of "cheapest", normal the pale accent, high the accent itself. */
[data-design="studio"] { --bar-soft: color-mix(in srgb, var(--accent) 34%, var(--card)); --bar-cheap: color-mix(in srgb, var(--s3) 62%, var(--card)); --bar-high: color-mix(in srgb, var(--accent) 78%, var(--card)); }
[data-design="studio"] .swatch.cheap, [data-design="studio"] .bar.cheap, [data-design="studio"] .tonight-bars span.cheap { background: var(--bar-cheap); }
[data-design="studio"] .swatch.normal, [data-design="studio"] .bar.normal { background: var(--bar-soft); }
[data-design="studio"] .swatch.high, [data-design="studio"] .bar.high { background: var(--bar-high); }
[data-design="studio"] .swatch { width: 8px; height: 8px; border-radius: 2px; vertical-align: 0; }
[data-design="studio"] .swatch.now { width: 8px; height: 8px; border-width: 1.5px; }
[data-design="studio"] .legend { gap: 6px 15px; font-size: 0.78rem; color: var(--muted); }
[data-design="studio"] .legend > span, [data-design="studio"] .legend li { display: inline-flex; align-items: center; gap: 2px; }
[data-design="studio"] .legend .key:not(.house):not(.ev):not(.other):not(.limit):not(.fuse), [data-design="studio"] .lane-names .key { width: 8px; height: 8px; border-radius: 2px; }
[data-design="studio"] .price-chart figcaption, [data-design="studio"] h3.small { font: 750 0.95rem var(--display); letter-spacing: -0.02em; }
[data-design="studio"] .price-chart figcaption .muted, [data-design="studio"] .price-chart figcaption small { font: 500 0.78rem var(--sans); letter-spacing: 0; }
/* the price chart (/prices) */
[data-design="studio"] .plot { height: 200px; border-bottom: 1px solid var(--line);
  background: repeating-linear-gradient(to top, transparent 0, transparent calc(25% - 1px), var(--line) calc(25% - 1px), var(--line) 25%); }
[data-design="studio"] .bars { gap: 3px; }
[data-design="studio"] .bar { border-radius: 4px 4px 0 0; }
[data-design="studio"] .plot .bar { opacity: 1; }
[data-design="studio"] .bar-slot:hover, [data-design="studio"] .bar-slot:focus-visible { background: none; }
[data-design="studio"] .bar-slot:hover .bar, [data-design="studio"] .bar-slot:focus-visible .bar { background: var(--accent); filter: none; }
[data-design="studio"] .bar-slot.is-now::before { border-left: 1.5px solid var(--text); opacity: 0.6; }
[data-design="studio"] .bar-slot.is-now::after { font-size: 0.68rem; font-weight: 750; border: 1px solid var(--line); border-radius: 999px; padding: 1px 7px; }
[data-design="studio"] .threshold { border-top: 1px dashed color-mix(in srgb, var(--muted) 55%, transparent); }
[data-design="studio"] .threshold span { font-size: 0.68rem; font-weight: 650; color: var(--muted); border-radius: 6px; }
[data-design="studio"] .x-axis, [data-design="studio"] .mlabels, [data-design="studio"] .hbar small { font-size: 0.68rem; color: var(--muted); }
[data-design="studio"] .x-axis { margin-top: 8px; }
[data-design="studio"] .lane-track { gap: 3px; height: 6px; margin-top: 5px; }
[data-design="studio"] .lane-track span { border-radius: 3px; }
[data-design="studio"] .lane-track span:not(.on) { background: var(--soft); }
@media (max-width: 600px) { [data-design="studio"] .bars, [data-design="studio"] .lane-track { gap: 1px; } [data-design="studio"] .bar { border-radius: 2px 2px 0 0; } }
/* callouts: the price chart's (#tip), the month chart's (.mtip) and the one for every other chart (.studio-tip) */
[data-design="studio"] .tip, [data-design="studio"] .mtip, [data-design="studio"] .studio-tip {
  padding: 9px 12px; border-radius: 11px; background: var(--card); color: var(--text); border: 1px solid var(--line);
  box-shadow: 0 7px 25px color-mix(in srgb, var(--text) 10%, transparent); font-size: 0.78rem; font-weight: 600;
}
[data-design="studio"] .studio-tip { position: absolute; z-index: 40; pointer-events: none; white-space: nowrap; }
[data-design="studio"] .studio-tip span { display: block; margin-bottom: 2px; font-size: 0.66rem; font-weight: 800; letter-spacing: 0.06em; color: var(--muted); }
[data-design="studio"] .mtip div { gap: 7px; padding: 2px 0; }
[data-design="studio"] .mtip div:first-child { margin-bottom: 4px; padding-bottom: 6px; border-bottom: 1px solid var(--line); }
/* the month chart (/stats): stacked columns per car or tag */
[data-design="studio"] .mplot { height: 220px; border-bottom: 1px solid var(--line); }
[data-design="studio"] .mtick { border-top-color: var(--line); }
[data-design="studio"] .mtick span { font-size: 0.68rem; }
[data-design="studio"] .mcol { border-radius: 10px 10px 0 0; }
[data-design="studio"] .mcol:hover, [data-design="studio"] .mcol:focus-visible { background: var(--pale-2); }
[data-design="studio"] .mstack { width: min(30px, 64%); gap: 2px; border-radius: 6px 6px 0 0; }
[data-design="studio"] .mstack span:first-child { border-radius: 6px 6px 0 0; }
/* plain columns: energy by hour, weekday, month (/stats, associations) */
[data-design="studio"] .hbars { gap: 4px; height: 130px; background: linear-gradient(to top, transparent 1.3em, var(--line) 1.3em, var(--line) calc(1.3em + 1px), transparent calc(1.3em + 1px)); }
[data-design="studio"] .hbars.week { height: 110px; gap: 8px; }
[data-design="studio"] .hbars.months { height: 120px; }
[data-design="studio"] .hbar { cursor: pointer; }
[data-design="studio"] .hbar span { background: var(--bar-soft); border-radius: 5px 5px 0 0; min-height: 2px; }
[data-design="studio"] .hbar:hover span, [data-design="studio"] .hbar.on span { background: var(--accent); }
/* SVG curves: a charging session's power, the load at home */
[data-design="studio"] .curve .bar { fill: var(--bar-soft); opacity: 1; cursor: pointer; rx: 3px; }
[data-design="studio"] .curve .bar:hover, [data-design="studio"] .curve .bar.on { fill: var(--accent); }
[data-design="studio"] .curve .line { stroke: var(--accent); stroke-width: 2.2; stroke-linecap: round; }
[data-design="studio"] .curve .grid { stroke: var(--line); stroke-dasharray: none; }
[data-design="studio"] .curve .base { stroke: var(--line); }
[data-design="studio"] .curve .axis { font-family: var(--sans); font-size: 10px; fill: var(--muted); }
[data-design="studio"] .curve.load .ev { stroke: var(--accent); }
[data-design="studio"] .legend .key.house, [data-design="studio"] .legend .key.ev, [data-design="studio"] .legend .key.other,
[data-design="studio"] .legend .key.limit, [data-design="studio"] .legend .key.fuse { width: 14px; height: 3px; border-radius: 2px; }
[data-design="studio"] .spark polyline { stroke: var(--accent); stroke-width: 1.8; stroke-linecap: round; }
@media (max-width: 720px) { [data-design="studio"] .curve .axis { font-size: 18px; } }

/* --- Signed out (the sign-in pages, help): no app menu, only a plain bar on top with the name, Help and the flag --- */
[data-design="studio"] body.signed-out .page-head { display: none; }
[data-design="studio"] body.signed-out .top {
  position: sticky; inset: 0 auto auto 0; top: 0; width: auto; height: auto; display: flex; flex-direction: row; align-items: center; gap: 18px;
  max-width: none; margin: 0; padding: 14px max(16px, calc((100% - 1160px) / 2)); border: 0; border-bottom: 1px solid var(--line); border-radius: 0;
  background: var(--card); box-shadow: none; flex-wrap: nowrap; overflow: visible;
}
[data-design="studio"] body.signed-out .brand { margin: 0; }
[data-design="studio"] body.signed-out .top nav {
  position: static; flex: 1; flex-direction: row; justify-content: flex-end; gap: 6px; width: auto; order: 2; margin: 0; padding: 0; border: 0; background: none; overflow: visible;
}
[data-design="studio"] body.signed-out .top nav a { display: inline-flex; flex: none; width: auto; padding: 8px 14px; border-radius: 999px; font-size: 0.9rem; }
[data-design="studio"] body.signed-out .lang-switch { order: 3; margin: 0; }
[data-design="studio"] body.signed-out main { max-width: 1160px; margin: 0 auto 80px; padding: 32px 16px 0; }
@media (max-width: 899px) { [data-design="studio"] body.signed-out main { padding: 18px 14px 0; } }
/* a phone: the mark alone, so features, help and logging in fit beside it */
@media (max-width: 520px) {
  [data-design="studio"] body.signed-out .top { gap: 8px; }
  [data-design="studio"] body.signed-out .brand-name { display: none; }
  [data-design="studio"] body.signed-out .top nav { gap: 0; }
  [data-design="studio"] body.signed-out .top nav a { padding: 8px 9px; font-size: 0.85rem; }
}

@media (prefers-reduced-motion: no-preference) {
  [data-design="studio"] .hour-bars span { transform-origin: bottom; animation: studio-grow 0.5s cubic-bezier(.2, .8, .3, 1) both; transition: background 0.15s; }
  [data-design="studio"] .top nav a, [data-design="studio"] .top nav .nav-icon, [data-design="studio"] .device-row, [data-design="studio"] button { transition: background 0.15s, color 0.15s, border-color 0.15s; }
}
@keyframes studio-grow { from { transform: scaleY(0.2); opacity: 0.4; } }
[data-design="studio"] .month-lead p { margin: 14px 0 4px; font-size: 0.88rem; line-height: 1.6; }
[data-design="studio"] .month-lead ul.per-car { margin: 6px 0 0; padding-left: 18px; color: var(--muted); }