/* Cordteh visual system: dimensional surfaces and explicit dark/light palettes. */
:root {
  --design-page:#09151e; --design-surface:#112430; --design-raised:#172e3c;
  --design-text:#f0f7fa; --design-secondary:#b7cbd7; --design-muted:#95aebb;
  --design-border:#2b4655; --design-accent:#55e4b8; --design-on-accent:#08291f;
  --design-glow:rgba(41,188,150,.09); --design-blue-glow:rgba(61,142,210,.08);
  --design-shadow:0 2px 3px rgba(0,0,0,.08),0 14px 36px -14px rgba(0,0,0,.46),inset 0 1px 0 rgba(255,255,255,.045);
  --design-shadow-hover:0 6px 10px rgba(0,0,0,.10),0 24px 48px -16px rgba(0,0,0,.55),inset 0 1px 0 rgba(255,255,255,.07);
  --design-highlight:rgba(255,255,255,.028); --design-glass:rgba(9,21,30,.91);
  --radius-card:24px; --radius-display:30px; --radius-field:12px; --radius:18px; --radius-sm:12px;
}
:root[data-theme="light"] {
  color-scheme:light;
  --design-page:#f3f7fa; --design-surface:#fff; --design-raised:#eaf1f5;
  --design-text:#173440; --design-secondary:#425f6d; --design-muted:#58717f;
  --design-border:#c7d7e1; --design-accent:#087c61; --design-on-accent:#fff;
  --design-glow:rgba(45,174,141,.09); --design-blue-glow:rgba(72,142,222,.065);
  --design-shadow:0 2px 3px rgba(27,68,83,.035),0 14px 32px -12px rgba(27,68,83,.14),inset 0 1px 0 #fff;
  --design-shadow-hover:0 5px 12px rgba(27,68,83,.055),0 24px 42px -12px rgba(27,68,83,.21),inset 0 1px 0 #fff;
  --design-highlight:rgba(255,255,255,.8); --design-glass:rgba(248,251,253,.94);
}
:root[data-ui] {
  --bg:var(--design-page); --surface:var(--design-surface); --surface-raised:var(--design-raised);
  --text:var(--design-text); --text-secondary:var(--design-secondary); --text-muted:var(--design-muted); --muted:var(--design-muted);
  --border:var(--design-border); --border-soft:var(--design-border); --divider:var(--design-border);
  --accent:var(--design-accent); --accent-bright:var(--design-accent); --on-accent:var(--design-on-accent); --eyebrow:var(--design-muted);
  --bg-page:var(--design-page); --bg-sidebar:var(--design-surface); --bg-panel:var(--design-surface); --bg-raised:var(--design-raised);
  --text-primary:var(--design-text); --shadow:var(--design-shadow);
}
html[data-theme="light"][data-ui] {
  --accent-hover:#08664f; --field-border:#7a939f; --warn:#986700; --danger:#bb344a; --solar:#997000; --battery:#087b57; --grid:#146bb6; --load:#bc4051;
  --neutral-bar:#6e8896;
}
html[data-ui] body { background:radial-gradient(ellipse 80% 450px at 15% 0,var(--design-glow),transparent 75%),radial-gradient(ellipse 60% 500px at 100% 12%,var(--design-blue-glow),transparent 70%),var(--design-page); color:var(--design-text); }
html[data-ui] :is(button,a,input,textarea,select,summary) { -webkit-tap-highlight-color:transparent; }
html[data-ui] :is(input,textarea,select):focus-visible { outline:3px solid color-mix(in srgb,var(--accent) 40%,transparent); outline-offset:2px; border-color:var(--accent); }
.theme-toggle { display:inline-flex; justify-content:center; align-items:center; gap:8px; flex-shrink:0; min-width:44px; min-height:44px; height:44px; padding:0 13px; border:1px solid var(--design-border); border-radius:999px; background:var(--design-surface); color:var(--design-text); font:inherit; font-size:13px; font-weight:500; line-height:1.2; cursor:pointer; box-shadow:0 3px 12px rgba(0,0,0,.08); text-transform:none; letter-spacing:0; text-decoration:none; }
.theme-toggle svg { width:19px; height:19px; flex:none; transition:transform .35s ease; }
.theme-toggle:hover { border-color:var(--accent); background:var(--design-raised); }
.theme-toggle:hover svg { transform:rotate(35deg); }
.theme-toggle:focus-visible { outline:3px solid var(--accent); outline-offset:3px; }
html[data-ui] :is(.card,.panel,.station,.form-card,.kpi,.inverter,.tb-card) { background:linear-gradient(145deg,var(--design-highlight),transparent 60%),var(--design-surface); border-color:var(--design-border); box-shadow:var(--design-shadow); }
html[data-ui] :is(.card,.panel,.station,.form-card) { border-radius:24px; }
html[data-ui] :is(h1,h2,h3) { text-wrap:balance; }
html[data-ui] :is(button,.btn,.helper-link) { transition:background .2s ease,border-color .2s ease,box-shadow .2s ease,translate .2s ease; }
html[data-ui] :is(.btn-primary,button.btn-primary) { background:linear-gradient(145deg,color-mix(in srgb,var(--accent) 88%,white),var(--accent)); color:var(--on-accent); box-shadow:0 5px 16px -5px color-mix(in srgb,var(--accent) 40%,transparent); border:1px solid color-mix(in srgb,var(--accent) 70%,white); }
html[data-ui] :is(.btn-primary,button.btn-primary):hover { box-shadow:0 8px 24px -6px color-mix(in srgb,var(--accent) 55%,transparent); }
html[data-ui] button:active:not(:disabled),html[data-ui] .btn:active { translate:0 1px; }
html[data-ui] button:disabled { box-shadow:none; cursor:default; }
/* Public pages: a luminous backdrop, tactile previews and calm reading rhythm. */
html[data-ui="site"] h1 { font-weight:450; letter-spacing:-.035em; }
html[data-ui="site"] h2 { font-weight:450; letter-spacing:-.028em; }
html[data-ui="site"] .eyebrow { font-weight:500; letter-spacing:.17em; }
html[data-ui="site"] .hero-bg { background:radial-gradient(ellipse 55% 80% at 87% 40%,var(--design-glow),transparent 75%),radial-gradient(ellipse 45% 65% at 15% 0,var(--design-blue-glow),transparent),var(--design-page); }
html[data-ui="site"] :is(.hero-lead,.hero-placement,.hero-points li,.compat-text,.nav a) { color:var(--design-secondary); }
html[data-ui="site"] .nav a:hover { color:var(--design-text); }
html[data-ui="site"] :is(.hero-points .ico,.hero-compat .ico) { color:var(--accent); }
html[data-ui="site"] .site-header.is-scrolled,html[data-ui="site"] body:not([data-page="home"]) .site-header { background:var(--design-glass); backdrop-filter:blur(18px); box-shadow:0 4px 24px rgba(12,35,46,.06); }
html[data-ui="site"] .header-inner { gap:20px; }
html[data-ui="site"] .header-actions { gap:10px; }
html[data-ui="site"] .card-icon { width:50px; height:50px; border-radius:16px; background:linear-gradient(145deg,var(--design-glow),var(--design-raised)); box-shadow:inset 0 1px 0 var(--design-highlight),0 5px 12px rgba(0,0,0,.08); color:var(--accent); }
html[data-ui="site"] .feature-card { border-top:2px solid color-mix(in srgb,var(--accent) 30%,var(--border)); }
html[data-ui="site"] .deploy-card { position:relative; background:radial-gradient(ellipse 100% 180px at 100% 0,var(--design-glow),transparent),var(--design-surface); }
html[data-ui="site"] .step-num { display:inline-grid; place-items:center; flex:none; width:38px; height:38px; border:1px solid var(--border); background:var(--design-surface); border-radius:13px; box-shadow:var(--design-shadow); }
html[data-ui="site"] .faq-list { border-top:0; }
html[data-ui="site"] .faq-item { margin-bottom:10px; border:1px solid var(--border); border-radius:18px; padding:0 20px; background:var(--design-surface); }
html[data-ui="site"] .faq-item[open] { box-shadow:var(--design-shadow); border-color:color-mix(in srgb,var(--accent) 35%,var(--border)); }
html[data-ui="site"] :is(.display,.screen-frame,.gallery-frame,.screenshot,.access-band) { border-radius:26px; box-shadow:var(--design-shadow); }
html[data-ui="site"] .tablet-body { box-shadow:inset 0 1px 1px rgba(255,255,255,.24),0 26px 70px -18px rgba(0,0,0,.56),0 4px 7px rgba(0,0,0,.25); }
html[data-ui="site"] .site-footer { background:color-mix(in srgb,var(--design-surface) 75%,transparent); }
/* Account: more spacing and hierarchy without adding steps to forms. */
html[data-ui="cabinet"] .top { background:var(--design-glass); backdrop-filter:blur(18px); box-shadow:0 4px 22px rgba(0,0,0,.055); }
html[data-ui="cabinet"] .intro { padding:46px 0 26px; }
html[data-ui="cabinet"] h1 { font-weight:500; letter-spacing:-.035em; }
html[data-ui="cabinet"] h2 { font-weight:550; letter-spacing:-.018em; }
html[data-ui="cabinet"] .station { padding:26px; gap:12px; }
html[data-ui="cabinet"] .station-head { margin-bottom:4px; }
html[data-ui="cabinet"] .metrics { gap:12px; }
html[data-ui="cabinet"] .metric { background:var(--design-raised); border-radius:16px; padding:16px; box-shadow:inset 0 1px 0 var(--design-highlight); }
html[data-ui="cabinet"] .metric b { font-size:28px; font-weight:500; letter-spacing:-.035em; }
html[data-ui="cabinet"] :is(input,select,textarea) { border-radius:12px; background:var(--design-page); }
html[data-ui="cabinet"] button:not(.link-btn):not(.theme-toggle) { border-radius:12px; }
html[data-ui="cabinet"] .inline-help[open] { padding:14px; border:1px solid var(--border); border-radius:16px; background:var(--design-page); }
html[data-ui="cabinet"] .phone-step-help .inline-help[open] { padding:0 14px 12px; }
html[data-ui="cabinet"] .phone-callout { border-radius:14px; background:color-mix(in srgb,var(--accent) 7%,var(--design-page)); }
html[data-ui="cabinet"] .phone-photo { background:var(--design-page); border-color:var(--border); border-radius:18px; }
html[data-theme="light"] .phone-photo-field.uncertain small { color:#8b5b00; }
html[data-theme="light"] .phone-check input { accent-color:var(--accent); }
html[data-theme="light"] .phone-step-help { border-color:var(--border); }
/* Live station: preserve Deye placement while giving each level its own surface. */
html[data-ui="dashboard"] body { font-size:13px; line-height:1.55; }
html[data-ui="dashboard"] .panel { border-radius:20px; }
html[data-ui="dashboard"] :is(.kpi,.inverter,.tb-card) { border-radius:17px; }
html[data-ui="dashboard"] .title h1 { font-weight:650; letter-spacing:-.04em; }
html[data-ui="dashboard"] .panel h2 { font-weight:600; letter-spacing:-.015em; }
html[data-ui="dashboard"] .kpi-val { font-weight:600; letter-spacing:-.03em; }
html[data-ui="dashboard"] .sidebar { box-shadow:6px 0 32px rgba(0,0,0,.07); border-right:1px solid var(--border); }
html[data-ui="dashboard"] .menu a { border-radius:13px; }
html[data-ui="dashboard"] .menu a.active { background:color-mix(in srgb,var(--accent) 12%,var(--bg-panel)); box-shadow:inset 0 1px 0 var(--design-highlight); }
html[data-ui="dashboard"] :is(input,select,textarea) { color:var(--text-primary); background:var(--bg-raised); border-color:var(--border); }
html[data-ui="dashboard"] .node { box-shadow:var(--design-shadow); border-radius:18px; }
html[data-ui="dashboard"] .topbar > .theme-toggle { order:3; }
html[data-theme="light"][data-ui="dashboard"] :is(.node,.kpi,.inverter,.tb-card,.preset,.stat-card,.chart-tip,.mini-stat) { background:var(--bg-panel); color:var(--text-primary); border-color:var(--border); }
html[data-theme="light"][data-ui="dashboard"] :is(.badge,.online,.pill,.seg button,.btn,.field select) { color:var(--text-primary); }
html[data-theme="light"][data-ui="dashboard"] :is(.online,.badge.ok) { color:var(--battery); }
html[data-theme="light"][data-ui="dashboard"] :is(.online.bad,.badge.bad) { color:var(--danger); }
html[data-theme="light"][data-ui="dashboard"] :is(.online.warn,.badge.warn) { color:var(--warn); }
html[data-theme="light"][data-ui="dashboard"] :is(.seg,.mode-switch,.day-tabs,.toolbar,.table-wrap) { background:var(--bg-raised); border-color:var(--border); }
html[data-theme="light"][data-ui="dashboard"] :is(.seg button.active,.tabs button.active,.seg button[aria-pressed="true"]) { background:var(--bg-panel); color:var(--accent); box-shadow:0 2px 6px rgba(27,68,83,.12); }
html[data-theme="light"][data-ui="dashboard"] :is(th,td) { border-color:var(--border); }
html[data-theme="light"][data-ui="dashboard"] :is(dialog,.modal,.chart-popover) { background:var(--bg-panel); color:var(--text-primary); border-color:var(--border); box-shadow:var(--design-shadow-hover); }
html[data-theme="light"][data-ui="dashboard"] :is(.legend,.kpi-foot,.hint,.form-msg) { color:var(--text-secondary); }
html[data-theme="light"][data-ui="dashboard"] :is(.bottom-nav,.mobile-tabs) { background:var(--design-glass); border-color:var(--border); }
@media(hover:hover) and (prefers-reduced-motion:no-preference) {
  html[data-ui] :is(.feature-card,.deploy-card,.station,.kpi,.inverter) { transition:box-shadow .25s ease,border-color .25s ease,translate .25s ease; }
  html[data-ui] :is(.feature-card,.deploy-card,.station,.kpi,.inverter):hover { translate:0 -3px; box-shadow:var(--design-shadow-hover); border-color:color-mix(in srgb,var(--accent) 32%,var(--border)); }
  html[data-ui="site"] .tablet-body { transition:translate .5s ease; }
  html[data-ui="site"] .tablet-body:hover { translate:0 -8px; }
}
@media(min-width:768px) {
  html[data-ui="dashboard"] .topbar { flex-wrap:wrap; }
  html[data-ui="dashboard"] .topbar .title { margin-right:auto; }
  html[data-ui="dashboard"] .topbar-right { margin-left:auto; }
}
@media(max-width:767px) {
  .theme-toggle { width:44px; padding:0; }
  .theme-toggle span { display:none; }
  html[data-ui="site"] .header-inner { gap:10px; }
  html[data-ui="site"] .header-actions { gap:7px; }
  html[data-ui="cabinet"] :is(.panel,.station) { padding:22px 18px; border-radius:21px; }
  html[data-ui="cabinet"] .intro { padding:28px 0 20px; }
  html[data-ui="cabinet"] .who .theme-toggle { width:auto; padding:0 12px; }
  html[data-ui="cabinet"] .who .theme-toggle span { display:inline; }
  html[data-ui="dashboard"] .topbar > .theme-toggle { position:absolute; right:42px; top:-3px; width:44px; height:44px; min-width:44px; padding:0; z-index:4; background:transparent; border:0; box-shadow:none; }
  html[data-ui="dashboard"] .topbar .title { padding-right:86px; }
  html[data-ui="dashboard"] .topbar.has-back > .theme-toggle { right:80px; }
  html[data-ui="dashboard"] .topbar.has-back .title { padding-right:125px; }
  html[data-ui="dashboard"] :is(.panel,.kpi,.inverter,.mobile-quick-control) { box-shadow:var(--design-shadow); }
  html[data-ui="dashboard"] body[data-page="home"] .kpi { border-radius:18px; background:var(--bg-panel); }
  html[data-ui="dashboard"] body[data-page="home"] .topbar-right > .weather { background:none; box-shadow:none; }
}
@media(prefers-reduced-motion:reduce) { html[data-ui] *,html[data-ui] *::before,html[data-ui] *::after { scroll-behavior:auto!important; transition:none!important; animation:none!important; } }
@media print { .theme-toggle { display:none!important; } html[data-ui] body,html[data-ui] :is(.panel,.card,.station,.kpi) { background:#fff!important; color:#111!important; box-shadow:none!important; } }

/* Light surfaces need their own warning and interactive contrast. */
html[data-theme="light"][data-ui="site"] .btn-outline { border-color:var(--field-border); }
html[data-theme="light"][data-ui="site"] :is(.lang,.login):hover { background:var(--surface-raised); }
html[data-theme="light"][data-ui="site"] .badge { background:var(--surface-raised); }
html[data-theme="light"][data-ui="site"] .grid-line { stroke:var(--border); }
html[data-theme="light"][data-ui="site"] .field-error::before { color:#fff; }
html[data-theme="light"][data-ui="cabinet"] :is(.chip-local,.hw) { color:var(--warn); }
html[data-theme="light"][data-ui="dashboard"] :is(.battery-profile.warning,.live-warning) { color:#825b06; border-color:#ae811f; background:#fff8e9; }
html[data-theme="light"][data-ui="dashboard"] .sys-badge { color:#fff; box-shadow:0 4px 18px rgba(8,123,87,.16); }
html[data-theme="light"][data-ui="dashboard"] .sys.warn .sys-badge,html[data-theme="light"][data-ui="dashboard"] .sys.bad .sys-badge { color:#fff; }
html[data-theme="light"][data-ui="dashboard"] .skip { color:#fff; }

html[data-theme="light"][data-ui="dashboard"] .chip { color:#08664f; }