/* Shared visual layer, based on Maturity's current app theme. No layout/behaviour changes. */
@font-face { font-family: 'WTF Manrope'; src: url('/assets/fonts/manrope-latin.woff2') format('woff2'); font-style: normal; font-weight: 200 800; font-display: swap; }
@font-face { font-family: 'WTF Space Mono'; src: url('/assets/fonts/space-mono-latin.woff2') format('woff2'); font-style: normal; font-weight: 400; font-display: swap; }
:root {
  color-scheme: dark;
  --bg: #101414; --panel: #171e1a; --card-bg: #171e1a; --border: #354038;
  --text: #f8f8f2; --muted: #a8b3aa; --accent: #d8ff3e;
  --ok: #92dfa8; --bad: #ffb4a5; --danger: #ffb4a5;
  --radius: 4px; --shadow: 0 12px 32px #0003;
  --font-body: 'WTF Manrope', sans-serif; --font-mono: 'WTF Space Mono', monospace;
}
html body { background: radial-gradient(ellipse at 85% 0, #25342088, transparent 52%), #101414; color: var(--text); font-family: var(--font-body); }
body::before { display: none; }
body h1, body h2, body h3 { font-family: var(--font-body); letter-spacing: -.035em; color: var(--text); }
body h1 { font-weight: 650; }
body .eyebrow, body .inline-cta { color: var(--accent); }
body .device-head .label { font-family: var(--font-body); letter-spacing: -.02em; }
body :is(.tank-metric-value,.tank-flow-key,.tank-metric-flow,.tank-metric-flow-line) { color: var(--text); }
body .tank-metric-label { color: var(--muted); font-family: var(--font-mono); }
body .litres-remaining { color: #65c9ff; }
body .fence-summary span { color: var(--muted); }
body .hero > .label, body .order-summary > .label { background: #263222; color: var(--accent); border-radius: 3px; }
body .checkout-button { background: var(--accent); color: #101414; border-radius: 3px; }
body .wrap { background: var(--panel); color: var(--text); border: 1px solid var(--border); border-radius: 4px; }
body .wrap .small { color: var(--muted); }
body #auth :is(#loginBtn,#registerBtn) { background: var(--accent); color: #101414; border: 1px solid var(--accent); }
body :is(#loginView,#registerView) input { background: #101714; color: var(--text); border-color: #52604e; }
body :is(.settings-summary-chip,.usage-modal-chart,.setup-card,.install-card,.flow-step) { background: var(--panel); color: var(--text); border-color: var(--border); border-radius: 3px; }
body .settings-summary-label { color: var(--muted); }
body .settings-summary-value { color: var(--text); }
body .feature { background: var(--panel); color: var(--text); border-color: var(--border); border-radius: 3px; }
body .hero .label { background: #263222; color: var(--accent); border-radius: 3px; }
body .mini-tank { background: #25343b; border-color: #5b7786; box-shadow: none; }
body :is(.usage-modal-card,.usage-modal-tooltip,.hero-spec,.feature-grid > article,.setup-grid > article,.install-grid > article,.app-feature-grid > div,.step-list > div) { background: var(--panel); color: var(--text); border-color: var(--border); border-radius: 3px; }
body :is(.usage-modal-axis,.usage-modal-axis text) { fill: var(--muted); }
body :is(.usage-modal-close,.toggle-pass) { background: #202c20; color: var(--text); }
body a { color: var(--accent); }
body :is(.muted,.small,.hero-lead,.hero-lead p,.card-copy,.hero-feature-line,.detail-summary-label-inline,.fence-summary-imei,.fence-summary-last,.fence-summary-caption,.fence-summary-stats dt) { color: var(--muted); }
body :is(.eyebrow,.label,.summary-row > span,.detail-summary-label-inline,.fence-summary-caption,.fence-control-state span,.fence-summary span,.settings-summary-label) { font-family: var(--font-mono); letter-spacing: .05em; }
body :is(.site-header,.dashboard-header,header#top) { background: #101714; color: var(--text); border-radius: 0; border-bottom: 1px solid var(--border); box-shadow: none; }
body .logo a { color: var(--accent); background: transparent; border-radius: 0; }
body :is(.dashboard-menu-btn,.dashboard-menu-panel) { background: #18211a; color: var(--text); border: 1px solid #4f6045; border-radius: 3px; }
body .dashboard-menu-btn span { background: var(--accent); }
body .dashboard-menu-panel a { color: var(--text); border-color: var(--border); }
body :is(.dashboard-menu-link:hover,.dashboard-menu-link.is-active) { background: #263222; color: var(--accent); }
body .mobile-bottom-nav { background: #121a16; border-color: var(--border); backdrop-filter: none; }
body .mobile-nav-link { color: var(--muted); }
body .mobile-nav-link.is-active { background: #263222; color: var(--accent); }
body :is(.card,.hero,.hero-product,.auth-card,.panel,.supplier-card,.home-section,.home-hero,.home-cta,.fence-summary-shell) { background: #171e1a; color: var(--text); border: 1px solid var(--border); border-radius: 4px; box-shadow: none; }
body :is(.benefit-grid article,.how-grid article,.step-card,.feature-card,.product-card,.faq-item,.settings-card-head,.settings-card-toggle,.fence-command-form,.fence-location-card,.fence-command-row,.fence-control-state > div) { background: #1c261e; color: var(--text); border-color: var(--border); border-radius: 3px; }
body :is(.detail-summary strong,.fence-summary strong,.fence-control-state strong,.fence-location-card strong,.fence-command-form label,.fence-command-row code,.summary-row strong,.settings-card h3,.card .label,.card .desc,.card .last,.refill-list-date) { color: var(--text); }
body :is(.fence-command-row p,.fence-control-state span,.fence-location-card span,.fence-readings-table th,.settings-card p,.hero p,.benefit-grid p,.how-grid p) { color: var(--muted); }
body :is(input:not([type=checkbox]):not([type=radio]):not([type=range]),select,textarea) { background: #101714; color: var(--text); border: 1px solid #52604e; border-radius: 3px; font-family: var(--font-body); }
body input::placeholder, body textarea::placeholder { color: #98a59b; opacity: 1; }
body input[type=checkbox], body input[type=radio] { accent-color: var(--accent); }
body :is(button,.btn,.cta-primary,.cta-secondary,.settings-add-btn) { font-family: var(--font-body); border-radius: 3px; box-shadow: none; }
body :is(.btn.primary,.cta-primary,.site-header button,button[type=submit],.fence-interval-save,.fence-alert-save) { background: var(--accent); color: #101414; border: 1px solid var(--accent); }
body :is(.btn.secondary,.cta-secondary,.settings-add-btn,.settings-faq-btn,.site-header .btn:not(.primary)) { background: #202c20; color: #e7f3da; border: 1px solid #728467; }
body :is(button,.btn,.cta-primary,.cta-secondary):hover:not(:disabled) { filter: brightness(1.12); }
body :is(button,input,select,textarea):disabled { opacity: .6; cursor: not-allowed; }
body :is(a,button,input,select,textarea):focus-visible { outline: 2px solid #d8ff3e; outline-offset: 3px; }
/* Keep operational status colours distinct from decorative lime accents. */
body :is(.status.bad,.fence-command-bad,.fence-summary strong.is-open) { color: #ffb4a5; }
body :is(.status.good,.fence-command-ok,.fence-summary strong.is-closed,.refill-list-value) { color: #92dfa8; }
body :is(.status.bad,.error) { background: #34221f; border-color: #845449; }
body :is(.status.good,.success) { background: #1b3023; border-color: #426a4b; }
body :is(.fence-command-pending,.fence-control-state strong.is-pending,.fence-command-status.pending) { color: #ffd08a; }
body .fence-switch-toggle.is-open { background: #812e23; color: #fff; }
body .fence-switch-toggle.is-closed { background: #21643b; color: #fff; }
body .fence-summary { border-top-color: var(--accent); color: var(--text); }
body .fence-summary-attention { border-top-color: #e9ae60; }
body .fence-summary-reading.is-numeric { color: var(--accent); }
body .fence-summary-open { color: var(--accent); }
body .fence-map-open span { background: #18211a; color: var(--accent); }
body .fence-map-footer a { color: var(--muted); }
body :is(.fence-chart-grid,.chart-grid) { stroke: #39443d; }
body .fence-line-chart text { fill: #b9c4bc; }
body :is(th,td,.summary-row,.settings-actions,.settings-card-body) { border-color: var(--border); }
body .refill-list-bar-wrap { background: #26382c; }
body .usage-modal-panel { background: var(--panel); color: var(--text); border-color: var(--border); }
body :is(.home-hero-media,.hero-image-wrap) { background: radial-gradient(ellipse, #34432577, transparent 70%); border-radius: 3px; }
body .home-hero h1 { font-size: clamp(2.4rem,5.2vw,4.8rem); line-height: 1.06; }
body :is(.home-hero,.store-hero) { background: transparent; border: 0; }
body .home-section { margin-top: 2rem; }
body .certified-site-credit { background: #101714; border-color: var(--border); color: var(--muted); font-family: var(--font-mono); }
body .certified-site-credit a { color: var(--accent); }
@media (max-width: 600px) {
  body .site-header .inner { gap: .6rem; flex-wrap: wrap; }
  body .site-header .actions { flex-wrap: wrap; gap: .4rem; }
  body .home-hero h1 { font-size: 2.6rem; }
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }