/* ==========================================================================
   Solfa HQ dashboard
   --------------------------------------------------------------------------
   Self-contained: every rule starts with .dash and only reads the palette and
   motion tokens from hq.css (with fallbacks, so it stands on its own). The
   data is the only loud thing: thin marks, hairline grid, text in text tokens.
   Hierarchy, top to bottom: the four numbers that matter, then where the
   money went and came from, then the unit economics, then the raw months
   behind a disclosure. Input lives in a drawer so the screen never moves.
   ========================================================================== */

:root {
  /* Categorical order for ad spend, validated for colour vision: UGC, ads, influencers. */
  --dash-ugc: #2678EE;
  --dash-ads: #C932AA;
  --dash-inf: #E99A00;
  /* Two revenue series: MRR in brand blue, net revenue in deep teal. */
  --dash-mrr: #2678EE;
  --dash-net: #078578;
  --dash-grid: var(--fog, #E7E7EB);
  --dash-up: var(--green-700, #168C3B);
  --dash-down: var(--coral-700, #B92F32);
}

.dash { --gutter: 24px; --container: 1120px; }
.dash__container { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: var(--gutter); }

/* ---------- the sky band ------------------------------------------------- */
.dash__band { position: relative; overflow: hidden; color: var(--cloud, #FDFDFF); background: var(--sky-gradient, linear-gradient(180deg, #4AC4F6 0%, #32ABED 100%)); padding: calc(var(--nav-height, 76px) + clamp(60px, 8vw, 92px)) 0 clamp(108px, 12vw, 150px); }
.dash__band .dash__container { position: relative; z-index: 2; display: flex; align-items: flex-end; justify-content: space-between; gap: 18px 28px; flex-wrap: wrap; }
.dash__title { font-family: var(--font-display, "Bricolage Grotesque", system-ui, sans-serif); font-weight: 700; font-size: clamp(34px, 4.6vw, 52px); letter-spacing: -0.02em; line-height: 1.05; margin: 0; color: var(--cloud, #FDFDFF); }
.dash__sub { margin-top: 8px; font-size: clamp(15px, 1.4vw, 18px); font-weight: 500; color: rgba(253, 253, 255, 0.86); max-width: 46em; text-wrap: pretty; }
.dash__sub b { font-weight: 700; color: var(--cloud, #FDFDFF); }
.dash__sub a { color: var(--cloud, #FDFDFF); font-weight: 700; text-decoration: underline; text-underline-offset: 3px; text-decoration-color: rgba(253, 253, 255, 0.5); }
.dash__actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.dash__cloud { position: absolute; pointer-events: none; opacity: var(--cloud-opacity, 0.9); animation: dash-drift var(--drift-t, 90s) linear infinite; animation-delay: var(--drift-delay, 0s); will-change: transform; }
@keyframes dash-drift { from { transform: translateX(-16vw); } to { transform: translateX(112vw); } }
.dash__edge { position: absolute; left: 0; right: 0; bottom: -1px; height: clamp(44px, 7vw, 96px); color: var(--surface, #FDFDFF); pointer-events: none; }
.dash__edge svg { width: 100%; height: 100%; display: block; }

/* Range pills on the sky: glass, the chosen one solid white. */
.dash__range { display: inline-flex; gap: 2px; padding: 4px; border-radius: 999px; background: rgba(253, 253, 255, 0.16); border: 1px solid rgba(253, 253, 255, 0.3); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.dash__range button { min-height: 38px; padding: 0 14px; border-radius: 999px; font-weight: 700; font-size: 14px; color: var(--cloud, #FDFDFF); transition: background-color var(--t-transition, 0.28s), color var(--t-transition, 0.28s), transform var(--t-press, 0.33s) var(--ease-press, ease-out); }
.dash__range button:hover { background: rgba(253, 253, 255, 0.18); }
.dash__range button:active { transform: scale(0.96); }
.dash__range button[aria-pressed="true"] { background: var(--cloud, #FDFDFF); color: var(--ink, #262627); box-shadow: 0 2px 6px rgba(20, 60, 100, 0.18); }

/* ---------- the sheet ---------------------------------------------------- */
/* The white sheet under the band, like every other screen: it covers the fixed sky below the wave. */
.dash__sheet { position: relative; z-index: 1; background: var(--surface, #FDFDFF); min-height: 100vh; padding: 0 0 96px; }
.dash__hero { margin-top: clamp(-80px, -7.5vw, -52px); }
.dash__grid { display: grid; gap: 16px; }
.dash__grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.dash__grid--6 { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.dash__grid--split { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); margin-top: 16px; }
.dash__units { margin-top: 26px; }
.dash__units-head { display: flex; align-items: baseline; gap: 12px; margin-bottom: 12px; flex-wrap: wrap; }
.dash__units-head h2 { font-family: var(--font-display, system-ui, sans-serif); font-weight: 700; font-size: clamp(20px, 2.2vw, 24px); letter-spacing: -0.02em; line-height: 1.1; margin: 0; color: var(--blue-700, #2678EE); }
.dash__units-head p { margin: 0; color: var(--secondary, #5D5D61); font-weight: 500; font-size: 14px; }

/* Canvas: the website's 28px card. */
.dash__canvas { position: relative; background: var(--surface, #FDFDFF); border: 1px solid rgba(231, 231, 235, 0.9); border-radius: var(--radius-canvas, 28px); box-shadow: var(--shadow-modal, 0 10px 18px rgba(38, 38, 39, 0.10), 0 24px 40px rgba(38, 38, 39, 0.06)); padding: clamp(18px, 2.2vw, 24px); min-width: 0; }
.dash__canvas--flat { box-shadow: var(--shadow-card, 0 8px 18px rgba(38, 38, 39, 0.08)); border-radius: 22px; }
.dash__canvas-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; margin-bottom: 12px; }
.dash__canvas-head h3 { font-family: var(--font-display, system-ui, sans-serif); font-weight: 700; font-size: 18px; letter-spacing: -0.01em; margin: 0; color: var(--ink, #262627); }
.dash__canvas-head p { margin: 3px 0 0; font-size: 14px; color: var(--secondary, #5D5D61); font-weight: 500; }

/* Entrances: only when the dashboard first lands (.dash.is-live), never on a redraw. */
.dash .dash__rise { opacity: 0; transform: translateY(14px); }
.dash.is-live .dash__rise { animation: dash-rise var(--t-settle, 0.58s) var(--ease-settle, cubic-bezier(0.22, 1, 0.36, 1)) both; animation-delay: calc(var(--i, 0) * 55ms); }
.dash.is-still .dash__rise { opacity: 1; transform: none; animation: none; }
@keyframes dash-rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }

/* ---------- stat tiles --------------------------------------------------- */
.dash__tile { display: flex; flex-direction: column; gap: 6px; transition: transform var(--t-settle, 0.58s) var(--ease-settle, ease-out), box-shadow var(--t-settle, 0.58s) var(--ease-settle, ease-out); }
.dash__tile:hover { transform: translateY(-3px); }
.dash__tile--hero { min-height: 172px; }
.dash__tile--hero:hover { box-shadow: 0 14px 24px rgba(38, 38, 39, 0.12), 0 28px 48px rgba(38, 38, 39, 0.08); }
.dash__tile--unit { padding: 16px 18px 14px; min-height: 124px; gap: 4px; }
.dash__label { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: 14px; font-weight: 700; color: var(--secondary, #5D5D61); min-height: 22px; }
.dash__label-text { display: inline-flex; align-items: center; gap: 8px; min-width: 0; }
.dash__label-tools { display: inline-flex; align-items: center; gap: 4px; flex: none; }
.dash__hint { width: 18px; height: 18px; border-radius: 50%; display: inline-grid; place-items: center; font-size: 11px; font-weight: 700; color: var(--muted, #9B9B9F); border: 1.5px solid var(--fog, #E7E7EB); cursor: help; flex: none; }
.dash__pencil { width: 26px; height: 26px; border-radius: 50%; display: inline-grid; place-items: center; color: var(--muted, #9B9B9F); opacity: 0; transition: opacity var(--t-transition, 0.28s), background-color var(--t-transition, 0.28s), color var(--t-transition, 0.28s); }
.dash__pencil svg { width: 14px; height: 14px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.dash__tile:hover .dash__pencil, .dash__pencil:focus-visible { opacity: 1; }
.dash__pencil:hover { background: var(--sky-100, #D9F1FE); color: var(--blue-700, #2678EE); }
.dash__src { display: inline-flex; align-items: center; height: 18px; padding: 0 7px; border-radius: 999px; font-size: 11px; font-weight: 700; letter-spacing: 0.02em; white-space: nowrap; }
.dash__src--appstore { background: var(--sky-100, #D9F1FE); color: var(--blue-700, #2678EE); }
.dash__src--ledger { background: var(--teal-100, #CCFAF4); color: var(--teal-700, #078578); }
.dash__value { font-family: var(--font-display, system-ui, sans-serif); font-weight: 700; font-size: clamp(28px, 2.8vw, 36px); letter-spacing: -0.025em; line-height: 1; color: var(--ink, #262627); font-variant-numeric: normal; }
.dash__value--sm { font-size: clamp(22px, 2vw, 26px); }
.dash__value.is-empty { color: var(--silver, #C5C5C8); }
.dash__delta { display: inline-flex; align-items: center; gap: 5px; font-size: 13px; font-weight: 700; color: var(--secondary, #5D5D61); white-space: nowrap; min-height: 18px; }
.dash__delta svg { width: 13px; height: 13px; stroke: currentColor; fill: none; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.dash__delta--good { color: var(--dash-up); }
.dash__delta--bad { color: var(--dash-down); }
.dash__delta .dash__vs { font-weight: 500; color: var(--muted, #9B9B9F); }
.dash__spark { margin-top: auto; width: 100%; height: 40px; overflow: visible; }
.dash__tile--unit .dash__spark { height: 26px; }
.dash__spark .s-area { fill: var(--s, #2678EE); opacity: 0.1; --o: 0.1; }
.dash__spark .s-line { fill: none; stroke: var(--s, #2678EE); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.dash__spark .s-dot { fill: var(--s, #2678EE); stroke: var(--surface, #FDFDFF); stroke-width: 2; }
.dash__spark--flat .s-line { stroke: var(--fog, #E7E7EB); stroke-dasharray: 3 4; }
.dash__spark--flat .s-area { fill: var(--silver, #C5C5C8); }
.dash__spark--flat .s-dot { fill: var(--silver, #C5C5C8); }

/* The draw-in: every line in the dashboard is written on with the settle curve. */
.dash.is-live .dash__draw { stroke-dasharray: var(--len, 1000); stroke-dashoffset: var(--len, 1000); animation: dash-draw 1.1s var(--ease-out, cubic-bezier(0.22, 1, 0.36, 1)) forwards; animation-delay: calc(var(--i, 0) * 60ms + 0.2s); }
@keyframes dash-draw { to { stroke-dashoffset: 0; } }
.dash.is-live .dash__fade-in { opacity: 0; animation: dash-fade 0.6s var(--ease-out, ease-out) forwards; animation-delay: calc(var(--i, 0) * 60ms + 0.9s); }
@keyframes dash-fade { to { opacity: var(--o, 1); } }
.dash.is-live .dash__grow { transform-box: fill-box; transform-origin: bottom; transform: scaleY(0); animation: dash-grow 0.7s var(--ease-settle, cubic-bezier(0.22, 1, 0.36, 1)) forwards; animation-delay: calc(var(--i, 0) * 40ms + 0.25s); }
@keyframes dash-grow { to { transform: scaleY(1); } }

/* ---------- spend: donut, legend, the small history ---------------------- */
.dash__spend-body { display: grid; grid-template-columns: 160px minmax(0, 1fr); gap: 20px; align-items: start; }
.dash__spend-side { display: grid; gap: 10px; min-width: 0; }
.dash__donut { width: 160px; height: 160px; position: relative; }
.dash__donut svg { width: 100%; height: 100%; overflow: visible; transform: rotate(-90deg); }
.dash__donut circle { fill: none; stroke-width: 15; stroke-linecap: butt; transition: stroke-width var(--t-transition, 0.28s), opacity var(--t-transition, 0.28s); }
.dash__donut .d-track { stroke: var(--mist, #F5F5F8); }
.dash__donut.is-empty .d-track { stroke: var(--fog, #E7E7EB); stroke-dasharray: 4 6; }
.dash.is-live .dash__donut .d-seg { stroke-dashoffset: var(--circ, 400); animation: dash-donut 1s var(--ease-settle, ease-out) forwards; animation-delay: calc(var(--i, 0) * 120ms + 0.2s); }
@keyframes dash-donut { to { stroke-dashoffset: var(--off, 0); } }
.dash__donut.is-hover .d-seg { opacity: 0.35; }
.dash__donut.is-hover .d-seg.is-on { opacity: 1; stroke-width: 19; }
.dash__donut-center { position: absolute; inset: 0; display: grid; place-content: center; text-align: center; pointer-events: none; }
.dash__donut-center .dash__value { font-size: 24px; }
.dash__donut-center small { display: block; font-size: 12px; font-weight: 700; color: var(--secondary, #5D5D61); margin-top: 3px; }
.dash__legend { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.dash__legend li { display: grid; grid-template-columns: 12px minmax(0, 1fr) auto auto; align-items: center; column-gap: 10px; padding: 7px 10px; border-radius: 12px; font-size: 14px; transition: background-color var(--t-transition, 0.28s); cursor: default; }
.dash__legend li:hover, .dash__legend li.is-on { background: var(--mist, #F5F5F8); }
.dash__legend .l-key { width: 12px; height: 12px; border-radius: 4px; background: var(--s); }
.dash__legend .l-name { font-weight: 700; color: var(--ink, #262627); }
.dash__legend .l-val { font-weight: 700; color: var(--ink, #262627); font-variant-numeric: tabular-nums; }
.dash__legend .l-pct { font-weight: 500; color: var(--secondary, #5D5D61); font-variant-numeric: tabular-nums; min-width: 38px; text-align: right; }
.dash__legend li.is-zero .l-name, .dash__legend li.is-zero .l-val { color: var(--muted, #9B9B9F); }

/* ---------- charts ------------------------------------------------------- */
.dash__chart { position: relative; }
.dash__chart svg { width: 100%; height: auto; display: block; overflow: visible; }
.dash__chart--mini { margin-top: 4px; }
.dash__chart--mini svg { width: 100%; height: auto; }
.dash__chart .c-grid { stroke: var(--dash-grid); stroke-width: 1; }
.dash__chart .c-tick { font-family: var(--font-body, system-ui, sans-serif); font-size: 11.5px; font-weight: 700; fill: var(--secondary, #5D5D61); }
.dash__chart--mini .c-tick { font-size: 10.5px; fill: var(--muted, #9B9B9F); }
.dash__chart .c-tick--x { text-anchor: middle; }
.dash__chart .c-tick--y { text-anchor: end; }
.dash__chart .c-line { fill: none; stroke: var(--s); stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
.dash__chart .c-area { fill: var(--s); opacity: 0.08; --o: 0.08; }
.dash__chart .c-dot { fill: var(--s); stroke: var(--surface, #FDFDFF); stroke-width: 2; }
.dash__chart .c-end { font-family: var(--font-body, system-ui, sans-serif); font-size: 12.5px; font-weight: 700; fill: var(--ink, #262627); }
.dash__chart .c-bar { fill: var(--s); transition: opacity var(--t-transition, 0.28s); }
.dash__chart .c-bar.is-dim { opacity: 0.35; }
.dash__chart .c-hit { fill: transparent; }
.dash__chart .c-cross { stroke: var(--silver, #C5C5C8); stroke-width: 1; opacity: 0; transition: opacity var(--t-transition, 0.28s); }
.dash__chart.is-hover .c-cross { opacity: 1; }
.dash__chart .c-focus { opacity: 0; transition: opacity 0.15s; }
.dash__chart.is-hover .c-focus { opacity: 1; }
.dash__chart.is-empty .c-grid { stroke-dasharray: 4 6; }
.dash__chart-empty { position: absolute; inset: 0; display: grid; place-content: center; margin: 0; font-size: 14px; font-weight: 500; color: var(--muted, #9B9B9F); text-align: center; pointer-events: none; padding: 0 24px; }
.dash__tip { position: absolute; z-index: 5; top: 0; left: 0; min-width: 150px; padding: 10px 12px; border-radius: 14px; background: var(--ink, #262627); color: var(--cloud, #FDFDFF); font-size: 13px; box-shadow: var(--shadow-modal, 0 10px 18px rgba(38, 38, 39, 0.1)); pointer-events: none; opacity: 0; transform: translateY(4px); transition: opacity 0.15s, transform 0.15s; }
.dash__tip.is-on { opacity: 1; }
.dash__tip b { display: block; font-size: 12px; font-weight: 700; color: rgba(253, 253, 255, 0.7); margin-bottom: 6px; letter-spacing: 0.02em; }
.dash__tip-row { display: flex; align-items: center; gap: 8px; padding: 2px 0; }
.dash__tip-row i { width: 12px; height: 3px; border-radius: 2px; background: var(--s); flex: none; }
.dash__tip-row strong { margin-left: auto; font-variant-numeric: tabular-nums; }
.dash__tip-row span { color: rgba(253, 253, 255, 0.78); }
.dash__keys { display: flex; gap: 14px; flex-wrap: wrap; font-size: 13px; font-weight: 700; color: var(--secondary, #5D5D61); }
.dash__keys span { display: inline-flex; align-items: center; gap: 7px; }
.dash__keys i { width: 14px; height: 3px; border-radius: 2px; background: var(--s); }

/* ---------- every month: a disclosure ------------------------------------ */
.dash__details { margin-top: 20px; background: var(--surface, #FDFDFF); border: 1px solid rgba(231, 231, 235, 0.9); border-radius: 22px; box-shadow: var(--shadow-card, 0 8px 18px rgba(38, 38, 39, 0.08)); overflow: hidden; }
.dash__details summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 16px 20px; min-height: 60px; }
.dash__details summary::-webkit-details-marker { display: none; }
.dash__details summary > span { display: grid; gap: 2px; min-width: 0; }
.dash__details summary b { font-family: var(--font-display, system-ui, sans-serif); font-weight: 700; font-size: 17px; letter-spacing: -0.01em; }
.dash__details-sub { font-size: 14px; font-weight: 500; color: var(--secondary, #5D5D61); }
.dash__chev { flex: none; width: 28px; height: 28px; border-radius: 50%; background: var(--mist, #F5F5F8); position: relative; transition: transform var(--t-press, 0.33s) var(--ease-press, ease-out), background-color var(--t-transition, 0.28s); }
.dash__chev::after { content: ""; position: absolute; left: 10px; top: 8px; width: 6px; height: 6px; border-right: 2px solid var(--secondary, #5D5D61); border-bottom: 2px solid var(--secondary, #5D5D61); transform: rotate(45deg); }
.dash__details[open] .dash__chev { transform: rotate(180deg); background: var(--sky-100, #D9F1FE); }
.dash__details[open] .dash__chev::after { border-color: var(--blue-700, #2678EE); }
.dash__table-wrap { overflow: auto; padding: 0 12px 10px; animation: dash-open 0.32s var(--ease-out, ease-out) both; }
@keyframes dash-open { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
.dash__table { border-collapse: collapse; width: 100%; font-size: 14px; white-space: nowrap; }
.dash__table th { text-align: right; font-weight: 700; color: var(--secondary, #5D5D61); padding: 8px 10px; border-bottom: 1px solid var(--fog, #E7E7EB); font-size: 13px; }
.dash__table th:first-child, .dash__table td:first-child { text-align: left; }
.dash__table td { padding: 10px; border-bottom: 1px solid var(--fog, #E7E7EB); text-align: right; font-variant-numeric: tabular-nums; color: var(--ink, #262627); }
.dash__table tr:last-child td { border-bottom: 0; }
.dash__table td:first-child { font-weight: 700; }
.dash__table td:nth-last-child(2) { text-align: left; color: var(--secondary, #5D5D61); font-size: 13px; }
.dash__table tr:hover td { background: var(--sky-50, #EFF9FF); }
.dash__table .dash__edit { font-weight: 700; color: var(--blue-700, #2678EE); min-height: 32px; padding: 0 10px; border-radius: 999px; }
.dash__table .dash__edit:hover { background: var(--sky-100, #D9F1FE); }
.dash__table-empty { text-align: center !important; color: var(--muted, #9B9B9F) !important; padding: 18px !important; }

/* ---------- the drawer --------------------------------------------------- */
.dash__backdrop { position: fixed; inset: 0; z-index: 80; background: rgba(38, 38, 39, 0.28); backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); animation: dash-fade 0.25s var(--ease-out, ease-out) both; }
.dash__drawer { position: fixed; top: 0; right: 0; bottom: 0; z-index: 81; width: min(480px, 100%); background: var(--surface, #FDFDFF); box-shadow: -24px 0 60px rgba(38, 38, 39, 0.16); overflow-y: auto; animation: dash-slide var(--t-settle, 0.58s) var(--ease-settle, cubic-bezier(0.22, 1, 0.36, 1)) both; }
@keyframes dash-slide { from { transform: translateX(40px); opacity: 0; } to { transform: none; opacity: 1; } }
.dash__form { display: grid; gap: 16px; padding: 26px 26px 32px; }
.dash__drawer-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; }
.dash__drawer-head h3 { font-family: var(--font-display, system-ui, sans-serif); font-weight: 700; font-size: 24px; margin: 0; letter-spacing: -0.02em; }
.dash__drawer-head p { margin: 4px 0 0; color: var(--secondary, #5D5D61); font-size: 14px; font-weight: 500; }
.dash__x { width: 38px; height: 38px; border-radius: 50%; display: inline-grid; place-items: center; color: var(--secondary, #5D5D61); background: var(--mist, #F5F5F8); flex: none; transition: background-color var(--t-transition, 0.28s); }
.dash__x:hover { background: var(--fog, #E7E7EB); }
.dash__x svg { width: 16px; height: 16px; stroke: currentColor; fill: none; stroke-width: 2.2; stroke-linecap: round; }
.dash__drawer-note { display: flex; align-items: flex-start; gap: 8px; margin: 0; padding: 10px 12px; border-radius: 12px; background: var(--sky-50, #EFF9FF); color: var(--secondary, #5D5D61); font-size: 13px; line-height: 1.45; font-weight: 500; }
.dash__drawer-note .dash__src { margin-top: 1px; }
.dash__fieldset { border: 0; margin: 0; padding: 14px 16px 16px; border-radius: 18px; background: var(--mist, #F5F5F8); min-width: 0; }
.dash__fieldset legend { float: left; width: 100%; font-weight: 700; font-size: 14px; color: var(--secondary, #5D5D61); margin-bottom: 10px; }
.dash__fieldset legend small { font-weight: 500; color: var(--muted, #9B9B9F); }
.dash__fields { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 10px; clear: both; }
.dash__field { display: block; min-width: 0; }
.dash__field > span { display: flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 700; color: var(--secondary, #5D5D61); margin: 0 0 5px 2px; }
.dash__field > span small { font-weight: 500; color: var(--muted, #9B9B9F); }
.dash__field .dash__input { display: block; width: 100%; min-height: 44px; padding: 0 12px; background: var(--cloud, #FDFDFF); border: 1.5px solid var(--fog, #E7E7EB); border-radius: 13px; font-size: 16px; color: var(--ink, #262627); font-variant-numeric: tabular-nums; transition: border-color 0.2s, box-shadow 0.2s; }
.dash__field .dash__input:hover { border-color: var(--silver, #C5C5C8); }
.dash__field .dash__input:focus { outline: none; border-color: var(--solfa-blue, #32ABED); box-shadow: 0 0 0 4px var(--sky-100, #D9F1FE); }
.dash__field .dash__input:disabled { background: var(--mist, #F5F5F8); color: var(--secondary, #5D5D61); border-style: dashed; cursor: not-allowed; }
.dash__field--money { position: relative; }
.dash__field--money .dash__input { padding-left: 26px; }
.dash__field--money::after { content: "$"; position: absolute; left: 12px; bottom: 12px; font-weight: 700; font-size: 14px; color: var(--muted, #9B9B9F); pointer-events: none; }
.dash__field--month { max-width: 100%; }
.dash__textarea { min-height: 96px !important; padding: 10px 12px !important; font-family: var(--font-mono, ui-monospace, monospace); font-size: 12px !important; line-height: 1.4; resize: vertical; }
.dash__form-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
select.dash__input { appearance: none; -webkit-appearance: none; padding-right: 38px; cursor: pointer; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%235D5D61' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 12px center; }
body.dash-drawer-open { overflow: hidden; }

/* ---------- settings: the connections card ------------------------------- */
.dash__conn { display: grid; gap: 12px; }
.dash__conn-row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.dash__conn-state { display: inline-flex; align-items: center; gap: 8px; font-size: 15px; font-weight: 700; color: var(--teal-700, #078578); background: var(--teal-100, #CCFAF4); padding: 7px 14px 7px 11px; border-radius: 999px; }
.dash__conn-state i { width: 9px; height: 9px; border-radius: 50%; background: var(--teal-500, #16CDB8); animation: dash-blink 1.2s ease-in-out infinite alternate; }
.dash__conn-state.is-error { color: var(--coral-700, #B92F32); background: var(--coral-100, #FFD9D8); }
.dash__conn-state.is-error i { background: var(--coral-700, #B92F32); animation: none; }
@keyframes dash-blink { from { opacity: 0.35; } to { opacity: 1; } }
.dash__conn-meta { font-size: 14px; font-weight: 500; color: var(--secondary, #5D5D61); font-variant-numeric: tabular-nums; }
.dash__conn-note { margin: 0; font-size: 14px; line-height: 1.5; color: var(--secondary, #5D5D61); font-weight: 500; }
.dash__conn-form { display: grid; gap: 14px; }
.dash__fields--conn { grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); }
.dash__notice { padding: 11px 14px; border-radius: 14px; font-size: 14px; line-height: 1.45; font-weight: 500; }
.dash__notice--ok { background: var(--green-100, #D7FADD); color: var(--green-700, #168C3B); }
.dash__notice--error { background: var(--coral-100, #FFD9D8); color: var(--coral-700, #B92F32); }

/* ---------- buttons ----------------------------------------------------- */
.dash__btn { display: inline-flex; align-items: center; justify-content: center; gap: 9px; min-height: 48px; padding: 0 22px; border-radius: 999px; font-weight: 700; font-size: 16px; white-space: nowrap; color: var(--cloud, #FDFDFF); background: var(--ink, #262627); box-shadow: var(--shadow-shelf, 0 5px 0 rgba(0, 0, 0, 0.18)); transform: translateY(0); transition: transform var(--t-press, 0.33s) var(--ease-press, ease-out), box-shadow var(--t-press, 0.33s) var(--ease-press, ease-out), background-color 0.2s; }
.dash__btn:hover { background: #333335; }
.dash__btn:active { transform: translateY(4px); box-shadow: var(--shadow-shelf-pressed, 0 1px 0 rgba(0, 0, 0, 0.18)); }
.dash__btn[aria-busy="true"] { opacity: 0.6; pointer-events: none; }
.dash__btn--sm { min-height: 42px; padding: 0 18px; font-size: 15px; }
.dash__btn--sky { background: var(--cloud, #FDFDFF); color: var(--ink, #262627); box-shadow: 0 5px 0 rgba(20, 60, 100, 0.28); }
.dash__btn--sky:hover { background: #ffffff; }
.dash__btn--sky:active { box-shadow: 0 1px 0 rgba(20, 60, 100, 0.28); }
.dash__btn--quiet { background: var(--mist, #F5F5F8); color: var(--ink, #262627); box-shadow: none; }
.dash__btn--quiet:hover { background: var(--fog, #E7E7EB); }
.dash__btn--quiet:active { transform: scale(0.97); box-shadow: none; }
.dash__btn--ghost { background: transparent; color: var(--coral-700, #B92F32); box-shadow: none; }
.dash__btn--ghost:hover { background: var(--coral-100, #FFD9D8); }
.dash__btn--ghost:active { transform: scale(0.97); box-shadow: none; }
.dash__btn svg { width: 18px; height: 18px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* ---------- responsive --------------------------------------------------- */
@media (max-width: 1040px) {
  .dash__grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .dash__grid--6 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .dash__grid--split { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .dash__grid--4, .dash__grid--6 { grid-template-columns: 1fr 1fr; gap: 12px; }
  .dash__tile--hero { min-height: 150px; }
  .dash__value { font-size: 26px; }
  .dash__spend-body { grid-template-columns: 1fr; justify-items: center; }
  .dash__spend-side { width: 100%; }
  .dash__canvas { padding: 16px; border-radius: 22px; }
  .dash__band .dash__container { align-items: flex-start; }
  .dash__pencil { display: none; }
  .dash__label-text { flex-wrap: wrap; row-gap: 4px; }
  .dash__form { padding: 20px 18px 28px; }
}
@media (prefers-reduced-motion: reduce) {
  .dash__cloud, .dash__conn-state i { animation: none; }
  .dash.is-live .dash__rise, .dash.is-live .dash__draw, .dash.is-live .dash__fade-in, .dash.is-live .dash__grow, .dash.is-live .dash__donut .d-seg, .dash__drawer, .dash__backdrop, .dash__table-wrap { animation: none; opacity: 1; transform: none; stroke-dashoffset: var(--off, 0); }
  .dash__tile { transition: none; }
}