/* ThermaIQ */

@font-face { font-family: 'Abel'; src: url('/assets/fonts/abel.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; }

/* Tokens */
:root {
    --bg:           #0a0a0f;
    --bg-raised:    rgba(255,255,255,0.05);
    --bg-input:     rgba(255,255,255,0.06);
    --bg-hover:     rgba(255,255,255,0.08);
    --bg-glass:     rgba(10,10,15,0.85);
    --bg-nav:       rgba(10,10,15,0.92);
    --bg-onboarding:#0a0f1a;
    --border:       rgba(255,255,255,0.08);
    --border-focus: rgba(255,255,255,0.2);
    --border-subtle:rgba(255,255,255,0.04);
    --text:         #f0f0f5;
    --text-dim:     rgba(240,240,245,0.6);
    --text-muted:   rgba(240,240,245,0.35);
    --white:        #fff;
    --accent:       #c01212;
    --accent-glow:  rgba(192,18,18,0.4);
    --green:        #22c55e;
    --green-dim:    rgba(34,197,94,0.12);
    --green-border: rgba(34,197,94,0.3);
    --green-text:   #86efac;
    --red:          #ef4444;
    --red-dim:      rgba(239,68,68,0.12);
    --red-border:   rgba(239,68,68,0.3);
    --red-text:     #fca5a5;
    --yellow-dim:   rgba(245,158,11,0.12);
    --yellow-border:rgba(245,158,11,0.3);
    --yellow-text:  #fcd34d;
    --gap:          1rem;
    --r-sm:         8px;
    --r-md:         12px;
    --r-lg:         16px;
    --r-full:       9999px;
    --font:         'Abel',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
    --text-xs:      0.7rem;
    --text-sm:      0.8rem;
    --text-base:    0.95rem;
    --text-lg:      1.1rem;
    --text-xl:      1.5rem;
    --ease:         cubic-bezier(0.4,0,0.2,1);
    --header-h:     52px;
    --nav-h:        64px;
    --safe-bottom:  env(safe-area-inset-bottom,0px);
}

/* Reset */
*,*::before,*::after { box-sizing: border-box; margin: 0; padding: 0; }
body { font-family: var(--font); font-size: var(--text-base); background: var(--bg); color: var(--text); line-height: 1.5; -webkit-font-smoothing: antialiased; }
a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; border: none; background: none; color: inherit; -webkit-tap-highlight-color: transparent; }
input,select,textarea,form { font: inherit; }
input[type="checkbox"] { appearance: none; width: 20px; height: 20px; border: 1px solid var(--border); border-radius: 4px; background: var(--bg-input); vertical-align: middle; cursor: pointer; }
input[type="checkbox"]:checked { background: var(--green); border-color: var(--green); }
h1 { font-size: 1.5rem; font-weight: 600; }
h2 { font-size: 1.2rem; font-weight: 600; }
h3 { font-size: 1rem; font-weight: 600; }
h4 { font-size: 0.9rem; font-weight: 600; }
h5 { font-size: 0.8rem; font-weight: 500; }
h6 { font-size: 0.7rem; font-weight: 500; }

/* Utility */
.hidden { display: none !important; }
.text-center { text-align: center; }

/* Grid */
.grid { display: grid; grid-template-columns: repeat(6,1fr); row-gap: var(--gap); column-gap: 1rem; }
.grid > input[type="hidden"] { display: none; }
.col-2 { grid-column: span 2; }
.col-3 { grid-column: span 3; }
.col-4 { grid-column: span 4; }
.col-6 { grid-column: span 6; }

/* Input */
.input { display: block; width: 100%; padding: 0.75rem 1rem; background: var(--bg-input); border: 1px solid var(--border); border-radius: var(--r-md); color: var(--text); font-size: var(--text-base); transition: border-color 0.2s var(--ease); }
.input:focus { border-color: var(--border-focus); outline: none; }
.input::placeholder { color: var(--text-muted); }
select.input { appearance: none; 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='%23999' stroke-width='2'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 1rem center; padding-right: 2.5rem; }

/* Button */
.btn { display: flex; align-items: center; justify-content: center; width: 100%; gap: 0.5rem; padding: 0.75rem 1rem; border-radius: var(--r-md); font-size: var(--text-base); font-weight: 500; transition: filter 0.15s var(--ease), opacity 0.15s var(--ease); }
.btn:disabled { opacity: 0.35; cursor: default; }
.btn svg { flex-shrink: 0; }
.btn:not(:disabled):hover { filter: brightness(1.15); }
.btn-sm { padding: 0.5rem; font-size: var(--text-sm); }
.btn-primary { background: var(--accent); color: var(--white); }
.btn-success { background: var(--green); color: var(--white); }
.btn-danger { background: var(--red); color: var(--white); }
.btn-ghost { background: var(--bg-raised); color: var(--text-dim); border: 1px solid var(--border); }

/* Brand */
.brand { font-size: var(--text-lg); font-weight: 300; }
.brand strong { font-weight: 900; color: var(--accent); padding-left: 0.15rem; font-size: 1.15em; }
.version { font-size: var(--text-xs); color: var(--text-muted); }

/* Label */
.label { display: block; font-size: var(--text-sm); color: var(--text-dim); padding-bottom: 0.25rem; }

/* Page title */
.page-title { display: flex; align-items: center; gap: 0.5rem; }
.page-title svg { flex-shrink: 0; color: var(--text-dim); }

/* Breadcrumb */
.breadcrumb { display: flex; align-items: center; gap: 0.25rem; font-size: var(--text-sm); flex-wrap: wrap; }
.breadcrumb-link { color: var(--text-dim); padding: 0.4rem 0.5rem; border-radius: var(--r-sm); transition: background 0.15s var(--ease), color 0.15s var(--ease); }
.breadcrumb-link:hover, .breadcrumb-link:active { background: var(--bg-hover); color: var(--text); }
.breadcrumb-sep { color: var(--text-muted); display: flex; }
.breadcrumb-current { color: var(--text-muted); padding: 0.4rem 0; }

/* Hint */
.hint { display: flex; flex-direction: column; align-items: center; gap: 0.25rem; text-align: center; padding: 1rem; color: var(--text-dim); }
.hint-icon { color: var(--text-muted); }
.hint-title { font-size: var(--text-lg); font-weight: 600; }
.hint-text { font-size: var(--text-sm); color: var(--text-muted); }

/* Notice */
.notice { display: flex; align-items: flex-start; gap: 0.5rem; font-size: var(--text-sm); color: var(--text-muted); }
.notice svg { flex-shrink: 0; }

/* Alert */
.alert { display: flex; align-items: center; gap: 0.5rem; padding: 0.75rem 1rem; border-radius: var(--r-md); font-size: var(--text-sm); }
.alert svg { flex-shrink: 0; }
.alert-error { background: var(--red-dim); border: 1px solid var(--red-border); color: var(--red-text); }
.alert-success { background: var(--green-dim); border: 1px solid var(--green-border); color: var(--green-text); }
.alert-warning { background: var(--yellow-dim); border: 1px solid var(--yellow-border); color: var(--yellow-text); }

/* Tag */
.tag { display: inline-block; padding: 0.25rem 0.5rem; border-radius: var(--r-full); font-size: var(--text-xs); font-weight: 500; }
.tag-heating { background: var(--red-dim); color: var(--red-text); }
.tag-standby { background: var(--green-dim); color: var(--green-text); }
.tag-muted { background: var(--border-subtle); color: var(--text-muted); }

/* Value */
.val { font-weight: 600; }
.val-xl { font-size: var(--text-xl); font-weight: 600; line-height: 1.1; }
.val-unit { font-size: var(--text-sm); font-weight: 400; color: var(--text-dim); }
.val-sub { font-size: var(--text-xs); color: var(--text-dim); }

/* Dot */
.dot { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; background: var(--text-muted); }
.dot.on { background: var(--green); }

/* Toggle */
.toggle { position: relative; width: 42px; height: 24px; flex-shrink: 0; background: var(--bg-hover); border-radius: var(--r-full); transition: background 0.2s var(--ease); }
.toggle.on { background: var(--green); }
.toggle:disabled { opacity: 0.3; cursor: default; }
.toggle.busy { opacity: 0.5; }
.toggle-knob { position: absolute; top: 2px; left: 2px; width: 20px; height: 20px; background: var(--white); border-radius: 50%; transition: transform 0.2s var(--ease); }
.toggle.on .toggle-knob { transform: translateX(18px); }

/* Toast */
.toast { position: fixed; top: 1rem; left: 50%; transform: translateX(-50%); padding: 0.75rem 1rem; border-radius: var(--r-md); font-size: var(--text-sm); z-index: 999; max-width: 90%; text-align: center; }
.toast-ok { background: var(--green-dim); border: 1px solid var(--green-border); color: var(--green-text); }
.toast-err { background: var(--red-dim); border: 1px solid var(--red-border); color: var(--red-text); }

/* Tile */
.tile { text-align: center; padding: 1rem; background: var(--bg-raised); border: 1px solid var(--border); border-radius: var(--r-lg); }
.tile-value { display: block; font-size: var(--text-xl); font-weight: 600; line-height: 1.2; }
.tile-unit { font-size: var(--text-xs); color: var(--text-dim); }
.tile-label { display: block; font-size: var(--text-xs); color: var(--text-muted); }

/* Settings list */
.settings-list { background: var(--bg-raised); border: 1px solid var(--border); border-radius: var(--r-lg); overflow: hidden; }
.settings-item { display: flex; align-items: center; gap: 1rem; padding: 1rem; color: var(--text); width: 100%; text-align: left; transition: background 0.15s var(--ease); }
.settings-item:hover { background: var(--bg-hover); }
.settings-item + .settings-item { border-top: 1px solid var(--border-subtle); }
.settings-icon { color: var(--text-dim); flex-shrink: 0; }
.settings-icon svg { display: block; }
.settings-label { flex: 1; font-size: var(--text-base); }
.settings-badge { font-size: var(--text-xs); color: var(--text-muted); padding: 0.25rem 0.5rem; background: var(--border-subtle); border-radius: var(--r-full); }
.settings-item > svg:last-child { color: var(--text-muted); flex-shrink: 0; }

/* Card */
.card { background: var(--bg-raised); border: 1px solid var(--border); border-radius: var(--r-lg); overflow: hidden; transition: border-color 0.3s var(--ease), box-shadow 0.3s var(--ease); }
.card-heating { border-color: var(--red-border); box-shadow: 0 0 20px var(--red-dim); }
.card-standby { border-color: var(--green-border); }
.card-offline { opacity: 0.55; }
.card-top { display: flex; justify-content: space-between; align-items: center; padding: 1rem; gap: 1rem; }
.card-name { font-size: 1rem; font-weight: 600; }
.card-temp { text-align: right; flex-shrink: 0; }
.card-panels { border-top: 1px solid var(--border); padding: 0 1rem; }
.panel-row { display: flex; align-items: center; gap: 0.5rem; padding: 0.75rem 0; }
.panel-row + .panel-row { border-top: 1px solid var(--border-subtle); }
.panel-name { flex: 1; font-size: var(--text-sm); color: var(--text-dim); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.panel-watts { font-size: var(--text-sm); color: var(--text-muted); min-width: 50px; text-align: right; }

/* Thermostat */
.temp-display { text-align: center; }
.temp-current { line-height: 1; }
.temp-current .val-xl { font-size: 3.5rem; }
.temp-humid { display: inline-flex; align-items: center; gap: 0.5rem; color: var(--text-muted); font-size: var(--text-sm); }
.temp-humid svg { flex-shrink: 0; }
.thermo-control { background: var(--bg-raised); border: 1px solid var(--border); border-radius: var(--r-lg); padding: 1rem; }
.thermo-label { text-align: center; font-size: var(--text-sm); color: var(--text-muted); }
.thermo-adjust { display: flex; align-items: center; justify-content: center; gap: 1.5rem; }
.thermo-btn { width: 48px; height: 48px; display: flex; align-items: center; justify-content: center; background: var(--bg-hover); border-radius: 50%; color: var(--text); transition: background 0.15s var(--ease); }
.thermo-btn:hover { background: var(--bg-input); }
.thermo-btn:disabled { opacity: 0.3; cursor: default; }
.thermo-btn svg { flex-shrink: 0; }
.thermo-value { text-align: center; min-width: 5rem; }
.thermo-mode { display: flex; align-items: center; justify-content: space-between; padding-top: 1rem; border-top: 1px solid var(--border); }
.thermo-mode-label { font-size: var(--text-sm); color: var(--text-dim); }

/* Onboarding */
.onboarding { background: var(--bg-onboarding); }
.onboarding .nav { display: none; }
.onboarding .grid { text-align: center; }
.onboarding .settings-list { text-align: left; }
.onboarding .grid:first-child { position: relative; }
.onboarding-close { position: absolute; top: 0; right: 0; padding: 0.75rem; color: var(--text-muted); }
.step { display: none; }
.step.active { display: block; }
.step-dots { display: flex; gap: 0.5rem; justify-content: center; }
.step-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--border); }
.step-dot.active { background: var(--accent); }
.spinner { display: inline-block; width: 18px; height: 18px; border: 2px solid var(--border); border-top-color: var(--text); border-radius: 50%; animation: spin 0.6s linear infinite; flex-shrink: 0; }
@keyframes spin { to { transform: rotate(360deg); } }
.progress-bar { height: 4px; background: var(--border); border-radius: 2px; overflow: hidden; }
.progress-fill { height: 100%; width: 0; background: var(--accent); transition: width 0.5s linear; }
.status-row { display: flex; align-items: center; justify-content: space-between; font-size: var(--text-base); opacity: 0.4; }
.status-row.active { opacity: 1; }
.status-row.done { opacity: 1; }

/* Layout */
body:not(.page-login) { padding-bottom: calc(var(--nav-h) + var(--safe-bottom)); }
.onboarding { padding-bottom: 0; }
.header { position: sticky; top: 0; z-index: 100; display: flex; align-items: center; height: var(--header-h); padding: 0 1rem; background: var(--bg-glass); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); border-bottom: 1px solid var(--border); }
.header-logo { height: 28px; margin-right: 0.5rem; }
.header .brand { flex: 1; }
.main { display: flex; flex-direction: column; row-gap: var(--gap); padding: 1rem; }
.nav { position: fixed; bottom: 0; left: 0; right: 0; z-index: 100; display: grid; grid-template-columns: repeat(6,1fr); align-items: center; height: var(--nav-h); padding-bottom: var(--safe-bottom); background: var(--bg-nav); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); border-top: 1px solid var(--border); }
.nav-item { display: flex; flex-direction: column; align-items: center; gap: 0.25rem; color: var(--text-muted); font-size: 0.6rem; }
.nav-item.active { color: var(--text); }
.nav-item svg { width: 22px; height: 22px; }
.nav-add { display: flex; align-items: center; justify-content: center; }
.nav-add-btn { background: var(--accent); width: 42px; height: 42px; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: var(--white); box-shadow: 0 4px 16px var(--accent-glow); }
.nav-add-btn svg { width: 22px; height: 22px; }

/* Login */
.page-login { min-height: 100dvh; display: flex; align-items: center; justify-content: center; padding: 1rem; background: linear-gradient(135deg, var(--bg), var(--bg-onboarding), var(--bg)); }
.login-wrap { width: 100%; max-width: 380px; }
.login-card { background: var(--bg-input); backdrop-filter: blur(40px); -webkit-backdrop-filter: blur(40px); border: 1px solid var(--border); border-radius: var(--r-lg); padding: 1.5rem; }
.login-header { text-align: center; }
.login-logo { width: 100%; max-width: 260px; }
.captcha-track { position: relative; height: 44px; background: var(--bg-input); border: 1px solid var(--border); border-radius: var(--r-full); }
.captcha-target { position: absolute; top: 50%; transform: translate(-50%,-50%); width: 3px; height: 24px; background: var(--accent); border-radius: 2px; opacity: 0.6; }
.captcha-thumb { position: absolute; top: 3px; left: 3px; width: 38px; height: 38px; background: var(--bg-hover); border-radius: 50%; cursor: grab; touch-action: none; transition: background 0.2s, left 0.3s var(--ease); }
.captcha-thumb.hit { background: var(--green); }
.captcha.ok .captcha-thumb { background: var(--green); cursor: default; }
.captcha-hint { text-align: center; font-size: var(--text-xs); color: var(--text-muted); }
.captcha.ok .captcha-hint { color: var(--green); }

/* Responsive */
@media (min-width: 600px) { .main { max-width: 600px; margin: 0 auto; padding: 1.5rem; } }
@media (min-width: 1024px) { .main { max-width: 800px; } }