.app-bar { border-bottom: 1px solid rgba(0, 0, 0, 0.06); }
.hero-title { font-weight: 700; line-height: 1.15; }
.big-number { font-weight: 700; font-variant-numeric: tabular-nums; }
.num { font-variant-numeric: tabular-nums; white-space: nowrap; }
.text-center { text-align: center; }
.wordmark { font-weight: 700; font-size: 1.25rem; letter-spacing: -0.01em; color: var(--mud-palette-primary); white-space: nowrap; margin-left: 4px; }
.brand-mark { display: block; flex-shrink: 0; }
.mud-typography-h3.hero-title { font-size: clamp(2rem, 7vw, 3rem); }
.lang-switch { min-width: 0; }
@media (max-width: 599px) {
    .wordmark { font-size: 1.1rem; }
    .app-bar .mud-toolbar { padding-left: 12px; padding-right: 8px; }
}
.code-form { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.code-input {
    font: 600 1.5rem/1 "Inter", system-ui, sans-serif; letter-spacing: 0.3em; text-align: center;
    width: 10ch; padding: 10px 12px; border-radius: 6px;
    border: 1px solid var(--mud-palette-lines-inputs); background: var(--mud-palette-surface); color: var(--mud-palette-text-primary);
}
.code-input:focus { outline: 2px solid var(--mud-palette-primary); border-color: transparent; }
/* "or by e-mail" between the Google / Facebook buttons and the e-mail form: a line on each side. */
.or-divider { display: flex; align-items: center; gap: 8px; white-space: nowrap; }
.or-divider::before, .or-divider::after { content: ""; flex: 1; border-top: 1px solid var(--mud-palette-divider); }
/* Page headings get focus after navigation for screen readers; no box around them. */
h1:focus { outline: none; }
/* Small caps labels: MudBlazor's tall line height leaves a gap when one wraps to a second line. */
.mud-typography-overline { line-height: 1.6; }
/* Sign-in buttons read as a sentence ("Belépés Google-fiókkal"), which also keeps them on one line on phones. */
.sign-in-button { text-transform: none; font-size: 1rem; }
/* Tables that fold into cards on phones: long values go under their label, so they wrap inside the card. */
@media (max-width: 959.98px) {
    .phone-stack.mud-sm-table .mud-table-cell.stack { flex-direction: column; align-items: flex-start; gap: 2px; }
}
/* Wiring diagrams stay readable on phones: they keep a minimum width and scroll sideways inside their card. */
.diagram { overflow-x: auto; }
.diagram svg { min-width: 520px; }

/* ---- Dashboard ---- */
.dash { --flow-sun: #F2A900; --flow-sell: #2F9E44; --flow-buy: #C2410C; --flow-heater: #E8590C; --flow-car: #1C7ED6; }
.dash-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.live-dot { display: inline-flex; align-items: center; gap: 6px; font-size: .8rem; color: var(--mud-palette-text-secondary); }
.live-dot::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: #adb5bd; }
.live-dot.on { color: var(--flow-sell); font-weight: 600; }
.live-dot.on::before { background: var(--flow-sell); animation: live-pulse 1.8s infinite; }
@keyframes live-pulse {
    0% { box-shadow: 0 0 0 0 rgba(47, 158, 68, .55); }
    70% { box-shadow: 0 0 0 8px rgba(47, 158, 68, 0); }
    100% { box-shadow: 0 0 0 0 rgba(47, 158, 68, 0); }
}

/* The hero: today's kept sunshine, with a ring that fills up towards the record. */
.dash-hero {
    display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 20px; border-radius: 20px; color: #fff;
    background: radial-gradient(120% 140% at 100% 0%, rgba(242, 169, 0, .85) 0%, rgba(242, 169, 0, 0) 48%), linear-gradient(135deg, #1F6F50 0%, #12452F 100%);
    box-shadow: 0 10px 30px rgba(31, 111, 80, .25);
}
.hero-over { font-size: .72rem; letter-spacing: .09em; text-transform: uppercase; opacity: .9; }
.hero-number { font-size: clamp(2.4rem, 11vw, 3.4rem); font-weight: 800; line-height: 1.05; font-variant-numeric: tabular-nums; letter-spacing: -.02em; white-space: nowrap; }
.hero-sub { font-size: .95rem; margin-top: 4px; }
.hero-sub.dim { opacity: .75; font-size: .85rem; margin-top: 2px; }
@property --p { syntax: "<number>"; inherits: true; initial-value: 0; }
.hero-ring {
    --p: 0; position: relative; flex: 0 0 auto; width: 96px; height: 96px; border-radius: 50%;
    display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center;
    background: rgba(255, 255, 255, .08); animation: ring-fill 1.4s ease-out; transition: --p 1s ease;
}
.hero-ring::before {
    content: ""; position: absolute; inset: 0; border-radius: 50%;
    background: conic-gradient(#FFD43B calc(var(--p) * 1%), rgba(255, 255, 255, .2) 0);
    -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 9px), #000 calc(100% - 8px));
    mask: radial-gradient(farthest-side, transparent calc(100% - 9px), #000 calc(100% - 8px));
}
@keyframes ring-fill { from { --p: 0; } }
.ring-big { font-size: 1.35rem; font-weight: 800; line-height: 1; }
.ring-small { font-size: .62rem; opacity: .85; max-width: 66px; margin-top: 3px; line-height: 1.2; }

.dash-status { display: flex; align-items: center; gap: 8px; margin: 14px 4px; font-weight: 600; }
.dash-card { background: var(--mud-palette-surface); border: 1px solid var(--mud-palette-lines-default); border-radius: 16px; padding: 14px; margin-bottom: 14px; }
.card-title { font-size: 1rem; font-weight: 700; margin: 0 0 2px; }
.card-hint { font-size: .8rem; color: var(--mud-palette-text-secondary); margin-bottom: 6px; }

/* Energy flow: dots run along a line while power flows on it. */
.energy-flow { width: 100%; height: auto; display: block; max-width: 420px; margin: 0 auto; }
.flow-track { stroke: var(--mud-palette-lines-default); stroke-width: 4; stroke-linecap: round; fill: none; }
.flow-dash { fill: none; stroke-width: 5; stroke-linecap: round; stroke-dasharray: .1 12; animation: flow-move 1.2s linear infinite; }
.flow-dash.rev { animation-direction: reverse; }
@keyframes flow-move { to { stroke-dashoffset: -12.1; } }
.flow-node circle { fill: var(--mud-palette-surface); stroke-width: 2.5; opacity: .4; transition: opacity .4s; }
.flow-node svg { opacity: .45; transition: opacity .4s; }
.flow-node.on circle, .flow-node.on svg { opacity: 1; }
.flow-label { font-size: 11px; fill: var(--mud-palette-text-secondary); }
.flow-value { font-size: 12.5px; font-weight: 700; fill: var(--mud-palette-text-primary); }

.dash-tiles { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 14px; }
.tile { border-radius: 14px; padding: 12px; background: var(--mud-palette-surface); border: 1px solid var(--mud-palette-lines-default); border-left-width: 4px; }
.tile:nth-child(1) { border-left-color: var(--flow-sell); }
.tile:nth-child(2) { border-left-color: var(--flow-buy); }
.tile.heater { border-left-color: var(--flow-heater); }
.tile.car { border-left-color: var(--flow-car); }
.tile.sun { border-left-color: var(--flow-sun); }
.tile-label { font-size: .75rem; color: var(--mud-palette-text-secondary); }
.tile-value { font-size: 1.35rem; font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
.tile-sub { font-size: .75rem; color: var(--mud-palette-text-secondary); }
.dash-nudge { font-size: .9rem; background: #FFF4E6; border-radius: 12px; padding: 10px 12px; color: #8a4b00; margin: 0 0 14px; }

.day-chart, .days-chart { width: 100%; height: auto; display: block; }
.grid-line { stroke: var(--mud-palette-lines-default); stroke-width: 1; }
.zero-line { stroke: var(--mud-palette-text-secondary); stroke-width: 1; opacity: .5; }
.now-line { stroke: var(--mud-palette-primary); stroke-width: 1; stroke-dasharray: 3 3; }
.axis-label { font-size: 10px; fill: var(--mud-palette-text-secondary); }
.axis-label.strong { font-weight: 700; fill: var(--mud-palette-primary); }
.area-pv { fill: rgba(242, 169, 0, .2); stroke: #F2A900; stroke-width: 1.2; }
.area-buy { fill: rgba(194, 65, 12, .3); }
.area-sell { fill: rgba(47, 158, 68, .42); }
.area-heater { fill: rgba(232, 89, 12, .35); stroke: #E8590C; stroke-width: 1.5; stroke-linejoin: round; }
.area-car { fill: rgba(28, 126, 214, .3); stroke: #1C7ED6; stroke-width: 1.5; stroke-linejoin: round; }
.chart-legend { display: flex; flex-wrap: wrap; gap: 4px 12px; font-size: .75rem; color: var(--mud-palette-text-secondary); margin-top: 6px; }
.chart-legend i { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 4px; vertical-align: -1px; }
.sw-pv { background: #F2A900; }
.sw-buy { background: rgba(194, 65, 12, .6); }
.sw-sell { background: rgba(47, 158, 68, .75); }
.sw-heater { background: #E8590C; }
.sw-car { background: #1C7ED6; }
.bar { fill: rgba(31, 111, 80, .25); }
.bar.record { fill: rgba(242, 169, 0, .8); }
.bar.today { fill: #1F6F50; }
.bar-value { font-size: 10px; font-weight: 700; fill: var(--mud-palette-text-primary); }

.dash-badges { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; }
.dash-badge {
    display: inline-flex; align-items: center; gap: 4px; padding: 6px 11px; border-radius: 999px; white-space: nowrap;
    background: var(--mud-palette-surface); border: 1px solid var(--mud-palette-lines-default); font-size: .82rem; font-weight: 600;
}
.dash-badge.fire { background: #FFF4E6; border-color: #FFD8A8; color: #a14b00; }
.dash-card.install { display: flex; gap: 12px; align-items: flex-start; border-color: rgba(31, 111, 80, .35); background: rgba(31, 111, 80, .05); }
.dash-tip { font-size: .88rem; padding: 12px; border-radius: 12px; background: rgba(242, 169, 0, .12); margin-bottom: 14px; }
.dash-foot { display: flex; justify-content: space-between; align-items: center; font-size: .75rem; color: var(--mud-palette-text-secondary); }
@media (prefers-reduced-motion: reduce) {
    .flow-dash, .live-dot.on::before, .hero-ring { animation: none; }
}

/* ---- Demo and the home page showcase ---- */
.demo-copy { display: flex; flex-direction: column; }
@media (min-width: 960px) { .demo-copy { position: sticky; top: 96px; align-self: flex-start; padding-top: 40px; } }
.demo-points { list-style: none; padding: 0; margin: 20px 0 24px; display: grid; gap: 10px; font-size: 1.05rem; }
.demo-note { font-size: .78rem; color: var(--mud-palette-text-secondary); text-align: center; margin: 8px 0 0; }
/* A phone around the dashboard on wide screens; on a phone it is the phone. */
.phone-frame {
    max-width: 410px; margin: 0 auto; padding: 18px 14px; border-radius: 42px; border: 10px solid #1b1d1c;
    background: var(--mud-palette-background); box-shadow: 0 30px 60px rgba(0, 0, 0, .18), 0 0 0 2px #3a3d3b inset;
}
@media (max-width: 599.98px) {
    .phone-frame { border: 0; border-radius: 0; padding: 0; box-shadow: none; background: transparent; }
}
.showcase { display: grid; grid-template-columns: 1fr; gap: 24px; align-items: center; }
@media (min-width: 900px) { .showcase { grid-template-columns: 1fr 1fr; } }
.showcase .phone-frame { max-width: 360px; }
a.showcase-phone { display: block; text-decoration: none; color: inherit; }
/* The five-slide story on the home page: 4:5 like on Instagram, white arrows on the green slides. */
.slides-wrap { max-width: 480px; margin: 0 auto; }
.slides { width: 100%; aspect-ratio: 4 / 5; height: auto !important; border-radius: 20px; overflow: hidden; color: #fff; box-shadow: 0 16px 40px rgba(31, 111, 80, .25); }
.slides img { display: block; width: 100%; height: 100%; object-fit: cover; }
/* Until the first move the shown slide stands still: MudBlazor slides it in on every render, which hid it until the page went live. */
.slides-still .mud-carousel-item { animation: none !important; }
/* On a phone the slides are swiped; the arrows would sit on the text. */
@media (max-width: 599.98px) { .slides .slide-nav { display: none; } }
/* The first screen: words left and the ads' pictures right on wide screens; on phones title, pictures, then buttons. */
.hero { display: grid; gap: 20px; grid-template-areas: "copy" "visual" "cta"; }
.hero-copy { grid-area: copy; }
.hero-visual { grid-area: visual; }
.hero-cta { grid-area: cta; }
@media (min-width: 960px) {
    .hero { grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); grid-template-rows: 1fr 1fr; grid-template-areas: "copy visual" "cta visual"; column-gap: 56px; row-gap: 28px; }
    .hero-copy { align-self: end; }
    .hero-cta { align-self: start; }
    .hero .mud-typography-h3.hero-title { font-size: clamp(2.6rem, 3.6vw, 3.6rem); }
    .hero .slides-wrap { max-width: 440px; margin: 0 0 0 auto; }
}
/* The sticky header must not cover the calculator when a button scrolls to it. */
#calculator { scroll-margin-top: 72px; }
/* Hero buttons read as a sentence; on a phone each takes the full width. */
.hero-cta .mud-button-root { text-transform: none; font-size: 1rem; }
@media (max-width: 599.98px) { .hero-cta .mud-button-root { width: 100%; } }
/* Green behind the slides, so no white flashes between them while one slides in. */
.slides { background: #12452F; }

/* Water heater control card */
.heater-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
.heater-head .mud-input-control { margin: 0; flex: 0 0 auto; width: auto; }
.heater-state { display: flex; align-items: center; gap: 8px; font-weight: 600; margin: 4px 0 8px; }
.heater-actions { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 8px; }

/* Reconnecting to the server: a quiet note at the top after a moment, no buttons (Layout/ReconnectModal) */
#components-reconnect-modal { position: fixed; inset: 0; z-index: 2000; display: flex; justify-content: center; align-items: flex-start;
    padding-top: calc(env(safe-area-inset-top, 0px) + 16px); background: rgba(250, 250, 247, .45); backdrop-filter: blur(1px);
    opacity: 0; visibility: hidden; transition: opacity .3s ease, visibility .3s; }
#components-reconnect-modal.on { opacity: 1; visibility: visible; }
.reconnect-pill { display: inline-flex; align-items: center; gap: 10px; padding: 9px 16px; border-radius: 999px;
    background: var(--mud-palette-surface, #fff); color: var(--mud-palette-text-primary, #1d2b25); font-size: .9rem; font-weight: 600;
    box-shadow: 0 6px 24px rgba(0, 0, 0, .12); border: 1px solid rgba(31, 111, 80, .2);
    transform: translateY(-8px); transition: transform .3s ease; }
#components-reconnect-modal.on .reconnect-pill { transform: none; }
.reconnect-spinner { width: 16px; height: 16px; border-radius: 50%; border: 2px solid rgba(31, 111, 80, .25); border-top-color: #1F6F50;
    animation: reconnect-spin .8s linear infinite; }
@keyframes reconnect-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .reconnect-spinner { animation-duration: 2s; } }

/* Without a production meter: what the mains meter sees, and a note below the flow */
.flow-key text { font-size: 10.5px; font-weight: 600; }
.flow-key .flow-key-title { fill: var(--mud-palette-text-secondary); font-weight: 400; }
.flow-note { display: flex; gap: 8px; align-items: flex-start; font-size: .8rem; line-height: 1.4; color: var(--mud-palette-text-secondary);
    border-top: 1px dashed var(--mud-palette-lines-default); margin-top: 8px; padding-top: 10px; }
.flow-note .mud-icon-root { flex: 0 0 auto; margin-top: 1px; }

/* The page fills at least the screen, so the footer starts below it: pages that grow once their data is in
   (account, dashboard) no longer push a visible footer down (layout shift). */
.mud-main-content > main { display: block; min-height: 100vh; }