:root {
  color-scheme:light;
  --font:'Segoe UI Variable','Segoe UI',Inter,'Helvetica Neue',Arial,sans-serif;
  --ink:#163645;
  --ink-soft:#547586;
  --ink-faint:#738f9d;
  --accent:#0a8ea9;
  --accent-bright:#6dd7e6;
  --stroke:rgba(255,255,255,.75);
  --stroke-soft:rgba(25,84,108,.13);
  --glass:rgba(255,255,255,.39);
  --glass-solid:rgba(243,252,255,.84);
  --glass-shadow:0 22px 65px rgba(37,97,124,.10),inset 0 1px 0 rgba(255,255,255,.92),inset 0 -1px 0 rgba(255,255,255,.38);
  --blur:blur(26px) saturate(1.45);
  --page-gap:clamp(16px,2.55vw,38px);
  --header-h:74px;
  --radius:23px;
}
* {box-sizing:border-box;}
html {height:100%;-webkit-tap-highlight-color:transparent;scroll-behavior:smooth;}
body {min-height:100%;margin:0;font-family:var(--font);color:var(--ink);background:#d5e8ef;overflow:hidden;font-size:16px;-webkit-font-smoothing:antialiased;}
body[data-theme="midnight"] {color-scheme:dark;--ink:#e5f5fb;--ink-soft:#b1ceda;--ink-faint:#8faebd;--accent:#65d7e4;--accent-bright:#8ae9f4;--stroke:rgba(227,250,255,.14);--stroke-soft:rgba(179,236,247,.19);--glass:rgba(32,65,81,.46);--glass-solid:rgba(33,67,83,.90);--glass-shadow:0 24px 75px rgba(0,5,15,.26),inset 0 1px 0 rgba(238,253,255,.12),inset 0 -1px 0 rgba(255,255,255,.04);background:#08212f;}
button,input {font:inherit;}
button {cursor:pointer;color:inherit;touch-action:manipulation;}
button:focus {outline:none;}
button:focus-visible,[role="button"]:focus-visible,input:focus-visible {outline:2px solid #64d3e8;outline-offset:4px;}
[hidden] {display:none !important;}
.icon {width:21px;height:21px;flex:none;}
.app-background {position:fixed;inset:0;z-index:-1;overflow:hidden;background:radial-gradient(ellipse at 10% 6%,#effbff 3%,transparent 50%),radial-gradient(ellipse at 84% 78%,#a5d3df 5%,transparent 51%),linear-gradient(135deg,#d6e6ed,#c5e2ec 53%,#f3f7fb);}
body[data-theme="midnight"] .app-background {background:radial-gradient(ellipse at 17% 9%,#20536a 1%,transparent 56%),radial-gradient(ellipse at 80% 78%,#113f53 4%,transparent 48%),linear-gradient(125deg,#0e2633,#142e40 56%,#071923);}
.background-bloom {position:absolute;display:block;width:min(72vw,950px);height:min(60vw,760px);border-radius:45%;filter:blur(62px);opacity:.36;animation:ambient-drift 22s ease-in-out infinite alternate;pointer-events:none;}
.bloom-one {top:-40%;left:-10%;background:radial-gradient(ellipse,#f9ffff 16%,#82d4e6 52%,transparent 70%);}
.bloom-two {bottom:-45%;right:-10%;background:radial-gradient(ellipse,#effeff 12%,#539fbd 55%,transparent 74%);animation-direction:alternate-reverse;}
.water-grain {position:absolute;inset:0;opacity:.15;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 140 140' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.45' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.13'/%3E%3C/svg%3E");pointer-events:none;}
.shell {position:relative;z-index:1;height:100dvh;min-height:430px;display:flex;flex-direction:column;overflow:hidden;}
.app-header {height:var(--header-h);min-height:var(--header-h);display:flex;align-items:center;gap:20px;padding:0 var(--page-gap);border-bottom:1px solid rgba(255,255,255,.45);background:rgba(255,255,255,.21);backdrop-filter:blur(28px);-webkit-backdrop-filter:blur(28px);z-index:7;}
body[data-theme="midnight"] .app-header {background:rgba(11,31,44,.56);border-color:rgba(210,249,255,.12);}
.brand {display:flex;align-items:center;gap:12px;white-space:nowrap;color:var(--ink);}
.brand-mark {width:46px;height:46px;border-radius:15px;display:grid;place-items:center;color:#f2ffff;background:linear-gradient(140deg,rgba(18,79,104,.95),rgba(9,39,61,.97));box-shadow:inset 0 1px 0 rgba(244,255,255,.46),inset 0 -2px 5px rgba(2,32,59,.4),0 9px 23px rgba(9,76,102,.18);position:relative;overflow:hidden;}
.brand-mark:before {content:"";position:absolute;top:-70%;left:-20%;height:100%;width:115%;background:linear-gradient(120deg,transparent,rgba(215,255,255,.44),transparent);transform:rotate(25deg);animation:brand-gleam 9s ease-in-out infinite;}
.x-sign {display:block;width:65%;height:65%;overflow:visible;filter:drop-shadow(0 2px 7px rgba(129,247,255,.26));}
.brand-mark .x-sign {width:32px;height:32px;position:relative;z-index:1;}
.brand-text {display:flex;flex-direction:column;gap:2px;letter-spacing:.15em;line-height:1.15;}
.brand-text strong {font-size:17px;letter-spacing:.10em;font-weight:780;line-height:1;}
.brand-text span {font-size:10px;letter-spacing:.15em;color:var(--ink-soft);font-weight:640;}
.header-divider {height:26px;width:1px;background:var(--stroke-soft);margin-left:8px;}
.header-location {display:flex;align-items:center;gap:11px;font-size:14px;font-weight:650;color:var(--ink-soft);min-width:0;}
.header-location .icon {width:16px;height:16px;opacity:.65;}
.header-location strong {color:var(--ink);font-weight:650;text-overflow:ellipsis;white-space:nowrap;overflow:hidden;}
.header-spacer {flex:1;}
.header-time {font-size:15px;font-weight:650;letter-spacing:.045em;color:var(--ink-soft);font-variant-numeric:tabular-nums;}
.header-actions {display:flex;align-items:center;gap:11px;}
.icon-button {width:41px;height:41px;display:grid;place-items:center;border:1px solid var(--stroke);border-radius:14px;background:var(--glass);box-shadow:var(--glass-shadow);backdrop-filter:var(--blur);-webkit-backdrop-filter:var(--blur);transition:transform .25s,background .25s,border-color .25s;}
.icon-button:hover {transform:translateY(8px);border-color:rgba(44,162,186,.6);background:rgba(240,255,255,.65);}
body[data-theme="midnight"] .icon-button:hover {background:rgba(88,151,171,.33);}
.header-back {width:39px;height:39px;border-radius:12px;flex:none;box-shadow:none;background:rgba(231,254,255,.21);}
.header-back .icon {width:21px;height:21px;}
.header-menu-button .icon {width:23px;height:23px;}
.header-mic {position:relative;background:linear-gradient(140deg,#e4fcff,#b5e6ef);color:#12546a;}
.header-menu-button .icon {width:23px;height:23px;}
.header-mic.is-on:after {content:"";position:absolute;right:2px;top:2px;width:7px;height:7px;border-radius:50%;background:#08a982;box-shadow:0 0 0 3px #e5faf5;animation:quiet-pulse 2s ease-in-out infinite;}
.app-content {flex:1;min-height:0;overflow-y:auto;overflow-x:hidden;scrollbar-gutter:auto;scrollbar-color:rgba(91,146,165,.36) transparent;scrollbar-width:thin;overscroll-behavior:contain;}
body:not([data-page="hub"]) .app-content {overflow-y:scroll;}
body[data-page="hub"] {--content-scroll:hidden;}
body[data-page="hub"] .app-content {height:100%;}
.app-content::-webkit-scrollbar {width:7px;}
.app-content::-webkit-scrollbar-thumb {background:rgba(86,155,177,.23);border-radius:10px;}
.glass {border:1px solid var(--stroke);background:var(--glass);box-shadow:var(--glass-shadow);backdrop-filter:var(--blur);-webkit-backdrop-filter:var(--blur);border-radius:var(--radius);}
.eyebrow {font-size:12px;line-height:1.2;letter-spacing:.18em;font-weight:750;color:var(--accent);}
.eyebrow.light {color:#a8dfea;}
h1,h2,p {margin:0;}
h1 {font-size:clamp(32px,3vw,48px);line-height:1.15;letter-spacing:-.055em;font-weight:690;}
h2 {font-size:23px;line-height:1.2;letter-spacing:-.045em;font-weight:690;}
.page-heading {display:flex;flex-direction:column;gap:7px;margin:0 0 16px;}
.compact-heading {flex-direction:row;align-items:flex-end;justify-content:space-between;}
.compact-heading>div:first-child {display:flex;flex-direction:column;gap:9px;}
.page-enter {animation:none;}
.primary-button {display:flex;align-items:center;justify-content:center;gap:23px;border:1px solid rgba(14,89,107,.2);padding:15px 26px;border-radius:14px;color:#f1ffff;background:linear-gradient(125deg,#10495a,#117e98);box-shadow:0 11px 25px rgba(4,83,108,.17),inset 0 1px 0 rgba(255,255,255,.28);font-weight:650;font-size:15px;transition:transform .28s,box-shadow .28s;}
.primary-button:hover {transform:translateY(-2px);box-shadow:0 14px 30px rgba(4,83,108,.24);}
.subtle-button {border:0;background:transparent;color:var(--ink-soft);font-weight:660;padding:12px 16px;font-size:15px;}
.link-button {border:0;background:transparent;display:inline-flex;align-items:center;gap:11px;color:var(--accent);font-size:14px;font-weight:720;transition:gap .2s;}
.link-button:hover {gap:16px;}
.link-button .icon {width:17px;height:17px;}
.outline-button {border:1px solid var(--stroke);border-radius:13px;padding:11px 15px;display:flex;align-items:center;justify-content:center;gap:10px;font-size:15px;font-weight:680;background:var(--glass);min-height:46px;}
.setup-layout {height:100%;min-height:540px;display:grid;grid-template-columns:minmax(0,1.05fr) minmax(400px,.95fr);gap:var(--page-gap);padding:var(--page-gap);animation:none;}
.setup-showcase {position:relative;display:flex;flex-direction:column;justify-content:flex-end;min-height:420px;padding:clamp(24px,3.4vw,52px);border-radius:31px;overflow:hidden;color:#e7fbff;background:radial-gradient(circle at 24% 16%,rgba(255,255,255,.22),transparent 14%),radial-gradient(circle at 68% 26%,rgba(120,227,239,.26),transparent 24%),radial-gradient(circle at 46% 52%,rgba(74,191,214,.18),transparent 28%),linear-gradient(145deg,#0d4255 2%,#0e627a 30%,#0e4f67 62%,#082d40 100%);box-shadow:inset 0 1px 0 rgba(221,255,255,.26),0 25px 65px rgba(12,60,79,.15);}
.setup-showcase:before {content:"";position:absolute;inset:0;background:radial-gradient(circle at 30% 18%,rgba(255,255,255,.18),transparent 9%),radial-gradient(circle at 72% 38%,rgba(214,253,255,.09),transparent 14%),linear-gradient(110deg,transparent 15%,rgba(255,255,255,.06) 42%,transparent 65%);pointer-events:none;}
.setup-showcase:after {content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 45%,rgba(4,20,33,.82));pointer-events:none;}
.setup-pulse-field {position:absolute;inset:0;top:-7%;height:74%;display:grid;place-items:center;perspective:850px;}
.showcase-ring {display:none;}
.showcase-ring.ring-b {display:none;}
.showcase-ring.ring-c {display:none;}
.showcase-drop {position:absolute;width:min(34vw,355px);height:min(33vw,352px);max-height:95%;display:grid;place-items:center;filter:drop-shadow(0 28px 46px rgba(23,120,150,.24));animation:hover-float 6s ease-in-out infinite;}
.classic-sculpture {position:relative;width:100%;height:100%;display:grid;place-items:center;perspective:850px;transform-style:preserve-3d;}
.classic-halo {position:absolute;left:50%;top:61%;border-radius:50%;transform:translate(-50%,-50%);border:0;filter:blur(16px);background:radial-gradient(ellipse at center,rgba(131,239,247,.22) 0%,rgba(131,239,247,.10) 38%,transparent 72%);}
.classic-halo-one {width:56%;height:18%;animation:soft-halo-one 5.6s ease-in-out infinite;}
.classic-halo-two {width:74%;height:28%;top:67%;background:radial-gradient(ellipse at center,rgba(255,255,255,.18),transparent 70%);animation:soft-halo-two 7.8s ease-in-out infinite;}
.classic-shadow {width:42%;height:12%;border-radius:50%;position:absolute;left:29%;top:81%;filter:blur(18px);background:rgba(4,45,67,.28);animation:classic-shadow 5.2s ease-in-out infinite;}
.classic-shell {width:56%;height:68%;position:absolute;top:13%;left:24%;border-radius:56% 44% 53% 47% / 28% 30% 70% 72%;transform:translateZ(28px) rotate(-16deg) rotateX(10deg) rotateY(-12deg);background:radial-gradient(circle at 31% 18%,rgba(255,255,255,.95) 0%,rgba(255,255,255,.58) 8%,rgba(231,251,255,.16) 16%,transparent 27%),radial-gradient(circle at 67% 70%,rgba(10,132,170,.38) 0%,rgba(38,156,188,.18) 28%,transparent 48%),linear-gradient(165deg,rgba(255,255,255,.26) 0%,rgba(190,242,249,.28) 14%,rgba(116,214,227,.34) 36%,rgba(73,186,205,.46) 58%,rgba(23,120,152,.72) 100%);border:1px solid rgba(231,252,255,.90);box-shadow:inset 14px 14px 22px rgba(255,255,255,.34),inset -22px -25px 34px rgba(8,70,97,.36),inset 0 0 0 1px rgba(255,255,255,.18),0 24px 46px rgba(7,49,73,.20),0 0 26px rgba(112,223,235,.14);animation:classic-float 5.2s ease-in-out infinite;transform-style:preserve-3d;}
.classic-shell::before {content:"";position:absolute;inset:6% 10% 12% 8%;border-radius:56% 44% 52% 48% / 28% 30% 70% 72%;background:radial-gradient(ellipse at 28% 18%,rgba(255,255,255,.54) 0%,rgba(255,255,255,.18) 22%,transparent 38%),linear-gradient(140deg,rgba(255,255,255,.14),transparent 42%,rgba(90,205,222,.14) 73%,rgba(255,255,255,.08));box-shadow:inset 8px 8px 12px rgba(255,255,255,.15),inset -10px -12px 18px rgba(9,79,106,.18);}
.classic-shell::after {content:"";position:absolute;left:18%;top:10%;width:28%;height:16%;border-radius:50% 50% 48% 52% / 48% 46% 54% 52%;background:rgba(255,255,255,.58);filter:blur(6px);transform:rotate(-26deg);box-shadow:30px 44px 30px rgba(135,239,245,.10);}
.classic-sheen {position:absolute;width:28%;height:37%;left:30%;top:20%;border:1px solid rgba(228,255,255,.34);border-radius:58% 42% 48% 52% / 38% 35% 65% 62%;transform:translateZ(43px) rotate(18deg);box-shadow:inset 0 3px 9px rgba(255,255,255,.20),0 0 10px rgba(135,239,245,.10);animation:classic-sheen 5.2s ease-in-out infinite;}
.classic-inner {position:absolute;width:32%;height:38%;left:34%;top:31%;border-radius:58% 42% 52% 48% / 34% 36% 64% 66%;transform:translateZ(18px);background:radial-gradient(circle at 38% 25%,rgba(240,255,255,.28),rgba(117,216,229,.14) 42%,rgba(13,88,118,.10) 72%,transparent 74%);filter:blur(1px);animation:classic-inner 5.2s ease-in-out infinite;}
.classic-spark {width:18%;height:6%;border-radius:50%;background:rgba(255,255,255,.64);filter:blur(5px);top:22%;left:29%;position:absolute;transform:translateZ(52px) rotate(-23deg);animation:classic-spark 5.2s ease-in-out infinite;}
.classic-sculpture[data-state="awake"] .classic-shell,.classic-sculpture[data-state="listening"] .classic-shell {animation-duration:3.1s;}
.classic-sculpture[data-state="thinking"] .classic-shell {animation:classic-thinking 1.55s ease-in-out infinite;}
.classic-sculpture[data-state="speaking"] .classic-shell,.classic-sculpture[data-state="success"] .classic-shell {animation:classic-thinking 2.2s ease-in-out infinite;}
.classic-sculpture[data-state="success"] .classic-halo-one {border-color:#3aaea3;box-shadow:0 0 26px rgba(69,197,188,.45);}
@keyframes classic-float {0%,100%{transform:translateZ(28px) translateY(0) rotate(-16deg) rotateX(10deg) rotateY(-12deg) scale(1)}50%{transform:translateZ(38px) translateY(-5%) rotate(-12deg) rotateX(16deg) rotateY(-18deg) scale(1.04)}}
@keyframes classic-thinking {0%,100%{transform:translateZ(30px) rotate(-16deg) rotateX(10deg) rotateY(-12deg) scale(1)}50%{transform:translateZ(48px) translateY(-3%) rotate(-8deg) rotateX(20deg) rotateY(-24deg) scale(1.085);filter:brightness(1.08)}}
@keyframes classic-sheen {0%,100%{transform:translateZ(43px) rotate(18deg)}50%{transform:translateZ(51px) rotate(12deg) translateY(-8%)}}
@keyframes classic-inner {0%,100%{transform:translateZ(18px) translate(0,0) scale(1)}50%{transform:translateZ(26px) translate(4%,-5%) scale(1.06)}}
@keyframes classic-spark {0%,100%{transform:translateZ(52px) rotate(-23deg) translate(0,0);opacity:.74}50%{transform:translateZ(58px) rotate(-14deg) translate(12%,-16%);opacity:1}}
@keyframes classic-shadow {50%{transform:scale(.84);opacity:.52;}}
@keyframes soft-halo-one {0%,100%{transform:translate(-50%,-50%) scale(1);opacity:.42;}50%{transform:translate(-50%,-50%) scale(1.08);opacity:.7;}}
@keyframes soft-halo-two {0%,100%{transform:translate(-50%,-50%) scale(1);opacity:.26;}50%{transform:translate(-50%,-50%) scale(1.1);opacity:.46;}}
.showcase-orbit {display:none;}
.orbit-two {display:none;}
.setup-number,.showcase-number {position:relative;z-index:1;font-size:13px;letter-spacing:.2em;color:#90d8e6;font-weight:680;margin-bottom:19px;}
.showcase-number span {opacity:.48;}
.setup-showcase h1 {z-index:1;position:relative;font-size:clamp(37px,4.15vw,65px);letter-spacing:-.067em;font-weight:600;line-height:1.06;}
.setup-showcase h1 em {font-style:normal;color:#82deec;font-weight:550;}
.setup-summary {position:relative;z-index:1;display:flex;align-items:baseline;gap:10px;font-size:15px;color:#b0d4de;margin-top:23px;}
.setup-summary strong {font-size:24px;color:#e7fdff;}
.setup-panel {min-height:0;display:flex;flex-direction:column;padding:clamp(20px,2.35vw,38px);overflow:hidden;}
.setup-panel-head {flex:none;display:flex;align-items:flex-start;flex-direction:column;gap:7px;margin-bottom:15px;}
.setup-panel-head h2 {font-size:clamp(24px,2.15vw,35px);}
.minimal-rule {height:1px;background:var(--stroke-soft);width:100%;margin-top:10px;}
.setup-groups {min-height:0;overflow-y:auto;scrollbar-width:thin;padding-right:9px;}
.setup-group {padding:6px 0 13px;}
.setup-group-title {display:flex;align-items:center;gap:12px;color:var(--ink-soft);font-size:13px;font-weight:780;letter-spacing:.07em;margin-bottom:7px;}
.setup-group-title span {color:var(--accent);font-size:13px;}
.setup-items {display:grid;gap:0;}
.setup-item {min-height:52px;display:grid;grid-template-columns:38px 1fr 112px;align-items:center;gap:10px;border-bottom:1px solid var(--stroke-soft);}
.setup-item-symbol {width:32px;height:32px;border:1px solid var(--stroke);border-radius:11px;display:grid;place-items:center;color:var(--accent);background:rgba(219,248,252,.22);}
.setup-item-symbol .icon {width:18px;height:18px;}
.setup-item-name {font-size:15px;font-weight:610;letter-spacing:-.012em;}
.stepper {height:36px;display:flex;align-items:center;justify-content:space-between;background:rgba(245,252,253,.39);border:1px solid var(--stroke);border-radius:11px;overflow:hidden;}
body[data-theme="midnight"] .stepper {background:rgba(8,35,48,.38);}
.stepper button {width:33px;height:34px;border:0;background:transparent;font-size:21px;font-weight:450;line-height:1;color:var(--accent);transition:background .18s;}
.stepper button:hover {background:rgba(67,162,184,.18);}
.stepper output {min-width:25px;text-align:center;font-size:16px;font-weight:720;font-variant-numeric:tabular-nums;}
.setup-footer {flex:none;border-top:1px solid var(--stroke-soft);padding-top:18px;margin-top:15px;display:flex;align-items:center;justify-content:space-between;}
.hub-scene {position:relative;min-height:0;height:100%;max-height:100%;padding:0 var(--page-gap);display:flex;flex-direction:column;overflow:hidden;isolation:isolate;background:transparent;color:var(--ink);}
.hub-scene:before {content:"";position:absolute;inset:0;z-index:-1;opacity:.14;background-image:radial-gradient(circle at 48% 49%,rgba(47,119,143,.06) 1px,transparent 1px);background-size:24px 24px;mask-image:radial-gradient(ellipse at 50% 50%,#000,transparent 62%);}
body[data-theme="midnight"] .hub-scene {background:radial-gradient(ellipse at 50% 52%,rgba(69,172,198,.19),transparent 47%),linear-gradient(125deg,#143b50,#092635 58%,#0d3446);color:#e8faff;}
body[data-theme="midnight"] .hub-scene:before {opacity:.58;background-image:radial-gradient(circle at 48% 49%,rgba(157,239,247,.06) 1px,transparent 1px);}
body:not([data-theme="midnight"]) .hub-scene .eyebrow.light {color:var(--accent);}
.hub-intro {position:absolute;left:var(--page-gap);top:clamp(13px,2vw,26px);z-index:2;display:flex;gap:7px;flex-direction:column;pointer-events:none;}
.hub-intro h1 {font-size:clamp(26px,2.5vw,40px);font-weight:620;letter-spacing:-.044em;color:var(--ink);}
body[data-theme="midnight"] .hub-intro h1 {color:#e8faff;}
.hub-step {display:flex;align-items:center;gap:13px;color:#4c8294;font-size:11px;letter-spacing:.15em;font-weight:680;}
body[data-theme="midnight"] .hub-step {color:#8ebccb;}
.hub-step-line {width:65px;height:1px;background:rgba(39,111,135,.28);}
body[data-theme="midnight"] .hub-step-line {background:rgba(183,242,250,.45);}
.hub-step-index {opacity:.7;}
.hub-composition {flex:1;min-height:0;position:relative;display:grid;grid-template-columns:minmax(0,1fr);place-items:center;gap:0;}
.hub-main {height:100%;min-height:0;min-width:0;max-width:100%;width:100%;display:grid;place-items:center;}
.hub-wheel-wrap {height:auto;width:min(calc(100dvh - var(--header-h) - 6px),82vw,860px);max-width:100%;max-height:100%;min-width:0;min-height:0;aspect-ratio:1;position:relative;display:grid;place-items:center;transform:translateZ(0);isolation:isolate;}
.hub-wheel-wrap:before {content:"";position:absolute;inset:4.8%;border-radius:50%;z-index:0;background:radial-gradient(circle at 34% 22%,rgba(53,122,147,.96),rgba(16,58,76,.98) 43%,rgba(8,35,49,.99) 76%);box-shadow:0 26px 65px rgba(20,75,98,.18),inset 0 1px 0 rgba(222,252,255,.25);}
body[data-theme="midnight"] .hub-wheel-wrap:before {background:radial-gradient(circle at 34% 22%,rgba(48,111,137,.62),rgba(10,43,59,.72) 46%,rgba(5,27,39,.76) 80%);box-shadow:0 24px 70px rgba(0,8,18,.24),inset 0 1px 0 rgba(222,252,255,.12);}
.hub-wheel-aura {position:absolute;inset:10%;z-index:1;border-radius:50%;background:radial-gradient(circle,rgba(166,240,250,.22),rgba(255,255,255,.06) 36%,transparent 69%);filter:blur(17px);animation:quiet-pulse 7s ease-in-out infinite;}
.hub-hairline {pointer-events:none;position:absolute;z-index:1;inset:4%;border:1px solid rgba(180,237,248,.13);border-radius:50%;transform:rotateX(64deg) rotate(12deg);animation:orbit-tilt-x 28s linear infinite;}
.hub-hairline.line-two {inset:1%;transform:rotateY(62deg);animation-name:orbit-tilt-y;animation-duration:34s;animation-direction:reverse;}
.hub-wheel-inner {width:100%;height:100%;position:relative;z-index:2;filter:drop-shadow(0 13px 25px rgba(0,0,0,.16));transition:opacity .24s ease,transform .38s cubic-bezier(.2,.83,.2,1),filter .35s;}
.hub-wheel-inner.is-leaving {opacity:0;transform:scale(.91) rotate(-13deg);filter:blur(8px);}
.hub-wheel-inner.is-arriving {animation:wheel-arrive .55s cubic-bezier(.18,.8,.2,1) both;}
.wheel-graphic {width:100%;height:100%;overflow:visible;touch-action:manipulation;user-select:none;-webkit-user-select:none;outline:none;}
.wheel-guide {fill:none;stroke:rgba(189,247,252,.18);stroke-width:1;}
.wheel-guide-dashed {fill:none;stroke:rgba(178,239,248,.31);stroke-width:.7;stroke-dasharray:2 8;transform-origin:50% 50%;animation:orbit-drift 100s linear infinite;}
.wheel-sector {cursor:pointer;color:#d7f5fc;outline:none;user-select:none;-webkit-user-select:none;-webkit-tap-highlight-color:transparent;}
.wheel-sector-face {fill:url(#ringFill);stroke:rgba(236,255,255,.63);stroke-width:1.25;transition:fill .25s,stroke .25s,filter .27s;}
.wheel-sector-selected .wheel-sector-face {fill:rgba(164,233,243,.39);}
.wheel-sector-shine {fill:url(#segmentLight);opacity:.22;pointer-events:none;}
.wheel-sector-inner {pointer-events:none;transition:transform .27s cubic-bezier(.2,.75,.2,1);transform-origin:300px 300px;animation:sector-appear .62s backwards;animation-delay:calc(var(--entry) * 44ms);}
.wheel-sector .icon {pointer-events:none;}
.wheel-sector-text {font-family:var(--font);font-size:15.5px;letter-spacing:.8px;fill:currentColor;font-weight:720;dominant-baseline:middle;pointer-events:none;}
.wheel-sector:hover .wheel-sector-face,.wheel-sector:focus-visible .wheel-sector-face {fill:rgba(164,233,243,.44);stroke:rgba(241,255,255,1);filter:drop-shadow(0 0 13px rgba(92,229,243,.31));}
.wheel-sector:hover .wheel-sector-inner,.wheel-sector:focus-visible .wheel-sector-inner {transform:scale(1.019);}
.wheel-center-edge {fill:rgba(235,255,255,.12);stroke:rgba(205,246,253,.43);stroke-width:1;}
.wheel-center-glass {fill:rgba(11,51,70,.43);stroke:rgba(212,252,255,.49);stroke-width:1;pointer-events:none;}
.wheel-center-hairline {fill:none;stroke:rgba(165,231,242,.2);stroke-dasharray:4 8;stroke-width:1;pointer-events:none;}
.wheel-middle {color:#d9fbff;cursor:default;outline:none;user-select:none;-webkit-user-select:none;}
.wheel-middle[data-action] {cursor:pointer;}
.wheel-middle[data-action]:hover .wheel-x {fill:#fff;filter:drop-shadow(0 0 10px rgba(137,235,245,.7));}
.wheel-x-sign {fill:url(#wheelXMetal);filter:drop-shadow(0 3px 11px rgba(118,245,255,.31));pointer-events:none;}
.wheel-center-label {fill:#c5e9f1;font-family:var(--font);font-size:12.4px;font-weight:760;letter-spacing:1.8px;pointer-events:none;}
.wheel-live-clock {fill:#f4ffff;font-family:var(--font);font-size:25px;font-weight:590;letter-spacing:2.3px;font-variant-numeric:tabular-nums;pointer-events:none;filter:drop-shadow(0 0 9px rgba(130,236,246,.16));}
.wheel-live-caption {fill:rgba(183,230,239,.72);font-family:var(--font);font-size:9.5px;font-weight:720;letter-spacing:1.5px;pointer-events:none;}
.wheel-sub-guide {fill:none;stroke:rgba(189,247,252,.03);stroke-width:1;opacity:0;transition:opacity .32s ease;pointer-events:none;}
.wheel-sub-guide.visible {opacity:1;stroke:rgba(189,247,252,.27);}
.wheel-subgroup {pointer-events:auto;}
.wheel-arc-icon {filter:drop-shadow(0 0 2px rgba(175,242,249,.14));pointer-events:none;}
.wheel-sector:hover .wheel-arc-icon,.wheel-sub-sector:hover .wheel-arc-icon {filter:drop-shadow(0 0 6px rgba(184,249,255,.6));}
.wheel-sub-sector {cursor:pointer;outline:none;opacity:0;transform-origin:300px 300px;animation:radial-sub-unfurl .66s cubic-bezier(.16,.87,.17,1) forwards;animation-delay:calc(var(--entry) * 75ms);}
.wheel-sub-face {fill:url(#subGlass);stroke:rgba(224,254,255,.75);stroke-width:1.1;transition:fill .25s,filter .25s,stroke .25s;}
.wheel-sub-inner {pointer-events:none;color:#e9ffff;}
.wheel-sub-inner .icon {color:#d9f9ff;pointer-events:none;}
.wheel-sub-text {font-size:11.6px;fill:#edffff;letter-spacing:.3px;font-weight:760;font-family:var(--font);pointer-events:none;}
.wheel-sub-sector:hover .wheel-sub-face,.wheel-sub-sector:focus-visible .wheel-sub-face {fill:rgba(171,242,252,.68);stroke:white;filter:drop-shadow(0 0 5px rgba(130,240,250,.35));}
@keyframes radial-sub-unfurl {from{opacity:0;transform:translate(0,0) scale(.78) rotate(-5deg);filter:blur(4px);}to{opacity:1;transform:translate(0,0) scale(1) rotate(0);filter:blur(0);}}

.hub-readings {position:absolute;inset:0;z-index:2;pointer-events:none;display:block;max-width:none;width:100%;padding:0;align-self:stretch;border:0;background:none;box-shadow:none;border-radius:0;}
.readings-head {display:none;}
.readings-pulse,.voice-lamp {width:7px;height:7px;background:#7bdeca;border-radius:50%;box-shadow:0 0 0 4px rgba(91,224,213,.12),0 0 19px #6dedd6;}
.reading-row {position:absolute;width:188px;padding:15px 17px;background:linear-gradient(145deg,rgba(223,255,255,.15),rgba(79,149,174,.08));border:1px solid rgba(220,253,255,.30);border-radius:17px;backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);box-shadow:inset 0 1px 0 rgba(255,255,255,.17),0 14px 34px rgba(0,16,32,.07);animation:stat-bob 8s ease-in-out infinite alternate;}
.reading-row:nth-child(2) {left:3%;top:24%;}
.reading-row:nth-child(3) {right:2.5%;top:32%;animation-delay:-3s;}
.reading-row>div:first-child {display:flex;align-items:center;gap:10px;color:#9ac6d3;font-size:14px;font-weight:540;}
.reading-row .icon {width:18px;height:18px;color:#8bd9e6;}
.reading-row strong {display:block;font-size:29px;line-height:1.3;font-weight:510;letter-spacing:-.065em;margin-top:5px;font-variant-numeric:tabular-nums;}
.reading-row strong small {font-size:15px;font-weight:550;letter-spacing:0;margin-left:5px;color:#b5dbe4;}
.meter-line {width:100%;height:3px;border-radius:3px;overflow:hidden;background:rgba(211,255,255,.12);margin-top:11px;}
.meter-line span {display:block;height:100%;border-radius:3px;background:linear-gradient(90deg,#2aa5be,#b3fbff);box-shadow:0 0 10px #45d5e3;}
.compact-reading {right:5%;bottom:13%;display:flex;align-items:center;justify-content:space-between;animation-delay:-5s;}
.compact-reading strong {margin:0;font-size:24px;}
.hub-voice-entrance {position:absolute;left:2.5%;bottom:16%;width:190px;pointer-events:auto;min-height:51px;padding:0 14px;display:flex;align-items:center;gap:11px;border:1px solid rgba(191,252,255,.47);border-radius:13px;background:rgba(144,238,248,.15);color:#e9feff;font-weight:720;font-size:15px;transition:background .22s,transform .22s;}
.hub-voice-entrance:hover {transform:translateY(-2px);background:rgba(143,239,249,.27);}
.hub-voice-entrance .icon:last-child {margin-left:auto;width:19px;}
.hub-bottom-note {position:absolute;left:var(--page-gap);bottom:clamp(10px,1.9vw,24px);display:flex;align-items:center;gap:11px;color:rgba(189,225,237,.65);font-size:11px;letter-spacing:.13em;font-weight:680;pointer-events:none;}
.hub-bottom-note .icon {width:15px;height:15px;}
.bottom-line {width:27px;height:1px;background:rgba(200,246,254,.33);}
.home-layout,.standard-page {padding:14px var(--page-gap) var(--page-gap);width:min(100%,1600px);margin:0 auto;}
.home-hero {position:relative;min-height:270px;overflow:hidden;display:grid;grid-template-columns:1fr minmax(210px,.65fr);align-items:center;padding:27px 42px;border-radius:28px;color:#ecfdff;background:radial-gradient(ellipse at 73% 36%,rgba(67,182,203,.44),transparent 42%),linear-gradient(125deg,#15475b,#0b2a3b 78%);border-color:rgba(221,255,255,.26);isolation:isolate;}
.home-hero:before {content:"";position:absolute;inset:0;z-index:-1;opacity:.28;background:radial-gradient(circle at 80% 23%,rgba(255,255,255,.16),transparent 10%),radial-gradient(circle at 87% 63%,rgba(166,240,250,.12),transparent 14%),linear-gradient(90deg,transparent 32%,rgba(255,255,255,.02));}
.hero-copy {position:relative;z-index:1;min-width:0;}
.hero-index {display:flex;align-items:center;gap:12px;color:#8ecee0;font-size:11px;font-weight:710;letter-spacing:.14em;margin-bottom:23px;}
.hero-index i {height:1px;width:26px;background:#80cbd9;}
.hero-caption {display:block;font-size:15px;letter-spacing:.15em;color:#cee9f2;font-weight:620;}
.hero-temperature {line-height:1;letter-spacing:-.082em;font-size:clamp(78px,9vw,139px);font-weight:340;margin:2px 0 6px;font-variant-numeric:tabular-nums;}
.hero-temperature small {font-size:clamp(29px,3.8vw,56px);vertical-align:top;font-weight:300;margin-left:5px;letter-spacing:0;}
.hero-graph {height:64px;max-width:380px;color:#92f1f8;opacity:.95;}
.spark {width:100%;height:100%;overflow:visible;}
.chart-grid path {fill:none;stroke:currentColor;stroke-opacity:.14;stroke-width:1;}
.hero-companion {position:absolute;width:clamp(270px,37vw,460px);height:clamp(270px,37vw,460px);top:50%;right:4%;transform:translateY(-50%);display:grid;place-items:center;}
.hero-orbit {display:none;}
.hero-orbit.ring-inner {display:none;}
.hero-companion .classic-sculpture {width:72%;height:72%;filter:drop-shadow(0 18px 25px rgba(63,210,234,.20));}
.home-stats,.energy-grid {display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin-top:17px;}
.stat-card {min-width:0;min-height:162px;padding:20px 21px 13px;overflow:hidden;position:relative;}
.stat-top {display:flex;align-items:center;gap:9px;color:var(--ink-soft);font-size:12px;letter-spacing:.08em;font-weight:730;}
.stat-top .icon {color:var(--accent);width:20px;height:20px;}
.stat-value {display:block;line-height:1.2;font-size:39px;font-weight:590;letter-spacing:-.07em;margin:10px 0 4px;font-variant-numeric:tabular-nums;}
.stat-value small {font-size:15px;letter-spacing:0;margin-left:5px;font-weight:560;color:var(--ink-soft);}
.stat-detail {font-size:12px;color:var(--ink-faint);font-weight:590;}
.stat-card .spark {position:absolute;bottom:0;right:0;width:74%;height:65px;color:var(--accent);opacity:.57;}
.control-heading,.section-heading {margin:29px 0 15px;display:flex;align-items:flex-end;justify-content:space-between;gap:14px;}
.control-heading>div {display:flex;flex-direction:column;gap:6px;}
.section-heading span {color:var(--ink-faint);font-size:12px;letter-spacing:.11em;font-weight:700;}
.device-grid {display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;}
.device-card {min-width:0;min-height:86px;padding:16px;display:flex;align-items:center;gap:14px;transition:transform .26s,border-color .26s,box-shadow .26s;}
.device-card:hover {transform:translateY(-2px);border-color:rgba(53,154,178,.40);}
.device-icon {width:48px;height:48px;border-radius:16px;display:grid;place-items:center;flex:none;background:linear-gradient(145deg,rgba(226,252,255,.57),rgba(143,209,223,.22));border:1px solid var(--stroke);color:var(--accent);}
.device-icon .icon {width:24px;height:24px;}
.device-info {display:flex;flex:1;min-width:0;flex-direction:column;gap:5px;}
.device-label {font-size:15px;font-weight:680;line-height:1.25;}
.device-status {font-size:13px;color:var(--ink-faint);font-weight:550;}
.device-card.is-running .device-status {color:var(--accent);}
.device-switch {width:49px;height:28px;border:1px solid var(--stroke-soft);border-radius:16px;display:flex;align-items:center;padding:3px;background:rgba(97,134,149,.25);transition:background .25s;flex:none;}
.device-switch span {width:21px;height:21px;display:block;border-radius:50%;background:#fff;box-shadow:0 2px 5px rgba(12,51,66,.18);transition:transform .25s;}
.device-switch.on {background:linear-gradient(120deg,#168da5,#4dcbce);border-color:rgba(9,120,151,.39);}
.device-switch.on span {transform:translateX(20px);}
.pool-banner {height:168px;display:flex;justify-content:space-between;align-items:center;position:relative;overflow:hidden;padding:22px 35px;background:linear-gradient(120deg,rgba(237,255,255,.57),rgba(151,214,228,.18));} .pool-banner::after {content:"";position:absolute;right:38px;top:22px;width:20px;height:28px;border-radius:58% 42% 56% 44% / 32% 30% 68% 70%;background:linear-gradient(165deg,rgba(255,255,255,.72),rgba(169,234,242,.20) 45%,rgba(70,174,193,.26) 100%);border:1px solid rgba(255,255,255,.55);box-shadow:inset 0 2px 5px rgba(255,255,255,.32),0 10px 16px rgba(61,168,189,.10);opacity:.88;transform:rotate(12deg);}
.pool-banner>div:not(.pool-wave-illustration) {z-index:1;display:flex;flex-direction:column;gap:7px;}
.pool-banner strong {font-size:55px;line-height:1;letter-spacing:-.07em;font-weight:580;}
.pool-banner span:not(.eyebrow) {font-size:12px;letter-spacing:.13em;font-weight:710;color:var(--ink-soft);}
.pool-wave-illustration {position:absolute;inset:0 15%;opacity:.72;color:var(--accent);pointer-events:none;}
.pool-wave-illustration svg {width:100%;height:100%;filter:drop-shadow(0 0 8px rgba(87,212,229,.16));}
body[data-theme="midnight"] .pool-banner {background:linear-gradient(120deg,rgba(25,67,83,.72),rgba(25,72,89,.42));border-color:rgba(178,235,246,.16);}
body[data-theme="midnight"] .pool-banner .eyebrow {color:#a6eff8;}
body[data-theme="midnight"] .pool-banner strong {color:#f0fdff;text-shadow:0 0 18px rgba(111,228,240,.16);}
body[data-theme="midnight"] .pool-banner span:not(.eyebrow) {color:#b9dbe4;}
body[data-theme="midnight"] .pool-wave-illustration {color:#75dfed;opacity:.92;}
body[data-theme="midnight"] .pool-wave-illustration svg {filter:drop-shadow(0 0 11px rgba(111,232,244,.34));}
.pool-list {display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;}
.pool-card {position:relative;overflow:hidden;min-height:196px;padding:19px 21px;}
.pool-card-art {position:absolute;right:-17px;top:-20px;width:145px;height:140px;display:grid;place-items:center;color:var(--accent);opacity:.13;}
.pool-card-art .icon {width:80px;height:80px;}
.pool-ripple {position:absolute;inset:0;border-radius:50%;border:1px solid var(--accent);animation:quiet-pulse 5s ease-in-out infinite;}
.pool-card-top {display:flex;flex-direction:column;align-items:flex-start;gap:14px;position:relative;z-index:1;}
.pool-card-top strong {font-size:18px;font-weight:660;}
.active-pill {display:flex;align-items:center;gap:6px;padding:6px 9px;border:1px solid rgba(47,168,177,.30);border-radius:20px;font-size:11px;letter-spacing:.07em;color:var(--accent);font-weight:820;}
.active-pill .icon {width:13px;height:13px;}
.pool-card-metrics {display:flex;gap:25px;margin-top:24px;}
.pool-card-metrics>div {display:flex;flex-direction:column;gap:4px;}
.pool-card-metrics span {font-size:11px;letter-spacing:.09em;color:var(--ink-faint);font-weight:660;}
.pool-card-metrics strong {font-size:27px;font-weight:550;letter-spacing:-.05em;}
.pools-monitor-page {height:100%;min-height:0;display:flex;flex-direction:column;overflow:hidden;}
.pools-heading {margin-bottom:14px;flex:none;}
.pool-heading-note {color:var(--ink-soft);font-size:12.5px;letter-spacing:.12em;font-weight:790;white-space:nowrap;}
.pool-monitor-grid {flex:1;min-height:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:repeat(2,minmax(0,1fr));gap:14px;}
.pool-monitor-card {position:relative;min-width:0;min-height:0;padding:15px 20px 14px;overflow:hidden;display:flex;flex-direction:column;justify-content:flex-start;isolation:isolate;}
.pool-monitor-card::after {content:"";position:absolute;inset:auto -8% -38% 44%;height:80%;border-radius:50%;background:radial-gradient(circle,rgba(104,208,226,.10),transparent 68%);z-index:-1;pointer-events:none;}
.pool-zone-disabled {opacity:.46;filter:saturate(.6);}
.pool-category-art {right:8px;top:5px;width:82px;height:66px;opacity:.20;color:var(--accent);}
.pool-category-art .icon {width:56px;height:56px;stroke-width:.72;}
body[data-theme="midnight"] .pool-category-art {opacity:.42;color:#a9f1f9;filter:drop-shadow(0 0 8px rgba(109,225,239,.13));}
.pool-monitor-head {position:relative;z-index:1;display:flex;align-items:center;justify-content:space-between;gap:14px;min-height:43px;}
.pool-monitor-head>div:first-child {display:flex;align-items:center;gap:12px;min-width:0;overflow:visible;}
.pool-monitor-head h2 {font-size:27px;line-height:1.18;font-weight:790;color:var(--ink);white-space:nowrap;overflow:visible;text-overflow:clip;padding-bottom:2px;}
.pool-zone-index {color:var(--accent);font-size:15px;line-height:1;font-variant-numeric:tabular-nums;letter-spacing:.10em;font-weight:880;}
.pool-monitor-metrics {position:relative;z-index:1;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;margin:-2px 0 5px;transform:translateY(7px);}
.pool-live-metric {min-width:0;padding:8px 10px 7px;border:1px solid rgba(87,153,174,.22);border-radius:13px;background:linear-gradient(145deg,rgba(255,255,255,.38),rgba(155,214,226,.11));}
.pool-live-metric span {display:block;min-height:22px;color:var(--ink-soft);font-size:11px;line-height:1.15;letter-spacing:.04em;font-weight:850;}
.pool-live-metric strong {display:block;margin-top:2px;font-size:23px;line-height:1.02;font-weight:800;color:var(--ink);letter-spacing:-.03em;white-space:nowrap;}
.pool-live-metric small {font-size:10px;margin-left:3px;color:var(--ink-soft);font-weight:720;letter-spacing:0;}
.pool-setpoints {position:relative;z-index:1;display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:20px;}
.pool-setpoint {min-width:0;min-height:47px;padding:7px 12px;border:1px solid var(--stroke);border-radius:13px;background:linear-gradient(145deg,rgba(255,255,255,.42),rgba(158,216,228,.11));box-shadow:inset 0 1px 0 rgba(255,255,255,.48);text-align:left;transition:transform .2s,border-color .2s,background .2s;}
.pool-setpoint:hover {transform:translateY(-1px);border-color:rgba(52,166,190,.45);background:linear-gradient(145deg,rgba(255,255,255,.58),rgba(158,216,228,.16));}
.pool-setpoint span {display:block;font-size:10.5px;letter-spacing:.06em;color:var(--ink-soft);font-weight:850;}
.pool-setpoint strong {display:block;margin-top:2px;font-size:19px;font-weight:820;color:var(--ink);}
body[data-theme="midnight"] .pool-live-metric {border-color:rgba(177,232,243,.20);background:linear-gradient(145deg,rgba(113,187,202,.16),rgba(17,54,69,.24));}
body[data-theme="midnight"] .pool-setpoint {background:linear-gradient(145deg,rgba(128,203,217,.18),rgba(18,51,66,.24));border-color:rgba(181,235,245,.18);}
.pools-control-page {padding-bottom:calc(var(--page-gap) + 12px);}
.pool-control-groups {display:grid;gap:22px;}
.pool-control-groups .section-heading {margin-top:0;}
.pool-control-grid {display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:13px;}
.pool-control-card {min-height:88px;padding:14px 15px;display:flex;align-items:center;gap:13px;}
.pool-control-icon {width:47px;height:47px;border-radius:15px;display:grid;place-items:center;flex:none;color:var(--accent);background:linear-gradient(145deg,rgba(224,250,253,.52),rgba(127,201,216,.15));border:1px solid var(--stroke);}
.pool-control-icon .icon {width:25px;height:25px;}
.pool-control-copy {display:flex;flex:1;min-width:0;flex-direction:column;gap:5px;}
.pool-control-copy strong {font-size:14px;line-height:1.25;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.pool-control-copy span {font-size:12px;color:var(--ink-faint);}
.pool-control-card.is-running .pool-control-copy span {color:var(--accent);}

.voice-page {max-width:1000px;padding-bottom:calc(var(--page-gap) + 8px);}
.voice-settings-panel {display:grid;grid-template-columns:minmax(210px,.58fr) minmax(0,1.42fr);gap:22px;padding:24px;overflow:hidden;align-items:stretch;}
.voice-settings-hero {min-width:0;padding:10px 8px 10px 3px;display:flex;flex-direction:column;align-items:flex-start;justify-content:center;gap:9px;}
.voice-settings-hero h2 {font-size:29px;line-height:1.08;}
.voice-settings-hero p {max-width:300px;margin:0;color:var(--ink-soft);font-size:13px;line-height:1.55;font-weight:600;}
.voice-settings-controls {min-width:0;display:flex;flex-direction:column;gap:12px;}
.voice-simple-status {min-height:58px;padding:11px 14px;border:1px solid var(--stroke-soft);border-radius:15px;background:rgba(255,255,255,.17);display:flex;align-items:center;justify-content:space-between;gap:14px;}
.voice-simple-status>div {display:flex;flex-direction:column;gap:3px;}
.voice-simple-status span {font-size:10px;letter-spacing:.09em;text-transform:uppercase;color:var(--ink-faint);font-weight:830;}
.voice-simple-status strong {font-size:14px;font-weight:790;color:var(--ink);}
.voice-simple-status>i {width:10px;height:10px;border-radius:50%;background:#9aacb4;box-shadow:0 0 0 5px rgba(123,151,163,.10);}
.voice-simple-status>i.on {background:#1fb58d;box-shadow:0 0 0 5px rgba(31,181,141,.12),0 0 13px rgba(31,181,141,.20);}
.voice-reply-line {min-height:58px;padding:10px 13px;border:1px solid var(--stroke-soft);border-radius:15px;background:rgba(255,255,255,.17);display:flex;align-items:center;justify-content:space-between;gap:16px;cursor:pointer;}
.voice-reply-line>span {display:flex;flex-direction:column;gap:3px;min-width:0;}
.voice-reply-line strong,.voice-style-block strong {font-size:13.5px;}
.voice-reply-line small,.voice-style-block small {font-size:10.5px;color:var(--ink-soft);line-height:1.3;}
.voice-reply-line input {position:absolute;opacity:0;width:1px;height:1px;}
.voice-reply-line i {position:relative;width:46px;height:27px;border-radius:20px;background:rgba(102,148,163,.35);transition:background .24s;flex:none;}
.voice-reply-line i:after {content:"";position:absolute;top:3px;left:3px;width:21px;height:21px;background:#fff;border-radius:50%;box-shadow:0 2px 5px rgba(0,0,0,.12);transition:transform .24s;}
.voice-reply-line input:checked+i {background:#1fa0b3;}
.voice-reply-line input:checked+i:after {transform:translateX(19px);}
.voice-style-block {padding:11px 13px;border:1px solid var(--stroke-soft);border-radius:15px;background:rgba(255,255,255,.13);display:grid;grid-template-columns:minmax(130px,.8fr) minmax(240px,1.2fr);align-items:center;gap:14px;}
.voice-style-block>div:first-child {display:flex;flex-direction:column;gap:3px;min-width:0;}
.voice-style-options {display:grid;grid-template-columns:repeat(3,1fr);gap:6px;padding:4px;border-radius:12px;background:rgba(80,140,158,.08);border:1px solid var(--stroke-soft);}
.voice-style-options button {min-width:0;border:0;border-radius:9px;padding:8px 7px;background:transparent;color:var(--ink-soft);font-size:12px;font-weight:760;transition:background .18s,color .18s,transform .18s;}
.voice-style-options button.selected {background:var(--glass-solid);color:var(--ink);box-shadow:0 3px 10px rgba(38,102,129,.10);}
.voice-style-options button:active {transform:scale(.97);}
.voice-button-row {display:grid;grid-template-columns:1fr 1fr;gap:9px;}
.voice-main-button,.voice-test-button {min-height:48px;white-space:nowrap;font-size:13px;}
.voice-main-button {gap:10px;padding:11px 16px;}
.voice-main-button .icon,.voice-test-button .icon {width:18px;height:18px;}
body[data-theme="midnight"] .voice-simple-status,body[data-theme="midnight"] .voice-reply-line,body[data-theme="midnight"] .voice-style-block {background:rgba(13,43,58,.34);border-color:rgba(179,233,244,.12);}
body[data-theme="midnight"] .voice-style-options {background:rgba(6,27,39,.42);border-color:rgba(179,233,244,.10);}

.number-pad-overlay {position:fixed;inset:0;z-index:31;display:grid;place-items:center;padding:20px;background:rgba(7,31,44,.40);backdrop-filter:blur(18px) saturate(.82);-webkit-backdrop-filter:blur(18px) saturate(.82);}
.number-pad {width:min(390px,calc(100vw - 28px));padding:20px;border-radius:27px;background:linear-gradient(145deg,rgba(242,255,255,.88),rgba(199,232,240,.76));box-shadow:0 35px 90px rgba(7,36,51,.25),inset 0 1px 0 rgba(255,255,255,.88);}
body[data-theme="midnight"] .number-pad {background:linear-gradient(145deg,rgba(27,66,82,.97),rgba(9,34,48,.98));border:1px solid rgba(183,235,245,.15);color:#ecfbff;box-shadow:0 35px 90px rgba(0,10,19,.42),inset 0 1px 0 rgba(255,255,255,.08);}
.number-pad-head {display:flex;justify-content:space-between;align-items:flex-start;gap:15px;}
.number-pad-head>div {display:flex;flex-direction:column;gap:5px;}
.number-pad-head h2 {font-size:21px;}
.number-pad-display {margin:16px 0 7px;padding:15px 18px;border-radius:16px;text-align:right;font-size:35px;font-weight:580;letter-spacing:-.04em;font-variant-numeric:tabular-nums;background:rgba(255,255,255,.38);border:1px solid var(--stroke);box-shadow:inset 0 1px 0 rgba(255,255,255,.5);}
body[data-theme="midnight"] .number-pad-display {background:rgba(4,27,39,.58);border-color:rgba(173,231,242,.14);box-shadow:inset 0 1px 0 rgba(255,255,255,.05);color:#f2fdff;}
.number-pad-error {height:18px;margin:0 2px 8px;color:#c74f45;font-size:11px;font-weight:650;opacity:0;transition:opacity .2s;}
.number-pad-error.visible {opacity:1;}
body[data-theme="midnight"] .number-pad-error {color:#ff9189;}
.number-pad-grid {display:grid;grid-template-columns:repeat(3,1fr);gap:9px;}
.number-pad-grid button,.keypad-back {height:54px;border:1px solid var(--stroke);border-radius:15px;background:linear-gradient(145deg,rgba(255,255,255,.62),rgba(172,224,234,.15));box-shadow:0 6px 13px rgba(20,73,92,.07),inset 0 1px 0 rgba(255,255,255,.68);font-size:21px;font-weight:650;transition:transform .15s,background .15s;}
body[data-theme="midnight"] .number-pad-grid button,body[data-theme="midnight"] .keypad-back {background:linear-gradient(145deg,rgba(60,111,129,.34),rgba(16,51,66,.46));border-color:rgba(167,226,238,.13);box-shadow:0 6px 13px rgba(0,13,24,.16),inset 0 1px 0 rgba(255,255,255,.06);color:#e9faff;}
.number-pad-grid button:active,.keypad-back:active {transform:scale(.96);}
.number-pad-grid .keypad-soft {color:var(--accent);font-size:16px;}
.number-pad-actions {display:grid;grid-template-columns:64px 1fr;gap:10px;margin-top:10px;}
.keypad-back {font-size:21px;}
.number-pad-actions .primary-button {padding:12px 18px;}
.legend {display:flex;align-items:center;gap:8px;color:var(--ink-soft);font-size:12px;font-weight:710;letter-spacing:.07em;}
.legend i {width:28px;height:2px;background:#3faec3;box-shadow:0 0 8px rgba(37,169,193,.4);}

.pid-panel {padding:12px 14px 10px;overflow:hidden;background:linear-gradient(145deg,rgba(249,255,255,.72),rgba(218,241,248,.34) 48%,rgba(255,255,255,.58));backdrop-filter:blur(34px) saturate(1.22);-webkit-backdrop-filter:blur(34px) saturate(1.22);border:1px solid rgba(255,255,255,.88);}
.pid-head {display:flex;justify-content:space-between;gap:16px;font-size:11px;color:var(--ink-faint);letter-spacing:.11em;font-weight:740;padding:0 4px 3px;}
.pid-diagram {display:block;width:106%;height:auto;min-height:0;max-height:none;margin:-8px -3% 0;}
.pid-aqua {background:linear-gradient(150deg,rgba(245,253,255,.24),rgba(222,242,248,.10));border-radius:15px;}
body[data-theme="midnight"] .pid-panel {background:linear-gradient(145deg,rgba(12,35,48,.94),rgba(9,27,39,.92));border-color:rgba(166,226,239,.12);box-shadow:0 24px 60px rgba(0,7,14,.30),inset 0 1px 0 rgba(230,251,255,.06);}
body[data-theme="midnight"] .pid-aqua {background:linear-gradient(150deg,rgba(10,31,44,.82),rgba(7,23,34,.72));}
body[data-theme="midnight"] .pid-aqua-gridline {stroke:rgba(127,194,210,.09);}
body[data-theme="midnight"] .pid-aqua text {fill:#e0f7fb;}
body[data-theme="midnight"] .pid-aqua .pid-aqua-hint {fill:#9dbfca;}
body[data-theme="midnight"] .pid-aqua-main {stroke:rgba(83,190,212,.92);}
body[data-theme="midnight"] .pid-aqua-end rect,body[data-theme="midnight"] .pid-aqua-strainer rect,body[data-theme="midnight"] .pid-stage-art>rect:first-child,body[data-theme="midnight"] .pid-stage-art>circle:first-child,body[data-theme="midnight"] .pid-boiler-art>rect:first-child,body[data-theme="midnight"] .pid-aqua-sensor circle {fill:rgba(16,50,64,.88);stroke:rgba(101,200,220,.64);}
body[data-theme="midnight"] .pid-stage-art .pid-fill,body[data-theme="midnight"] .pid-boiler-art .pid-fill {fill:rgba(47,124,145,.42);stroke:rgba(99,190,209,.58);}
body[data-theme="midnight"] .pid-stage-art,body[data-theme="midnight"] .pid-boiler-art,body[data-theme="midnight"] .pid-aqua-strainer path {stroke:rgba(103,207,225,.82);}
body[data-theme="midnight"] .pid-aqua-sensor text {fill:#d8f5fa;}
body[data-theme="midnight"] .pid-aqua-valve path,body[data-theme="midnight"] .pid-makeup path {fill:rgba(15,53,68,.92);stroke:rgba(111,215,232,.82);}
.pid-aqua-gridline {stroke:rgba(88,151,170,.12);stroke-width:.55;}
.pid-aqua-main {fill:none;stroke:rgba(42,137,160,.97);stroke-width:4.2;stroke-linecap:round;stroke-linejoin:round;}
.pid-flow {fill:none;stroke:rgba(223,253,255,.94);stroke-width:1.6;stroke-dasharray:3 17;stroke-linecap:round;animation:pipe-flow 5s linear infinite;}
.pid-diagram[data-flow="off"] .pid-flow {animation-play-state:paused;opacity:.44;}
.pid-heat {fill:none;stroke:rgba(206,163,91,.94);stroke-width:4.4;stroke-linejoin:round;stroke-linecap:round;}
.pid-heat-inner {fill:none;stroke:rgba(255,247,216,.92);stroke-width:1.4;stroke-dasharray:3 17;animation:pipe-flow 5s linear infinite;}
.pid-heat-inner.off {animation-play-state:paused;opacity:.42;}
.pid-aqua text {font-family:var(--font);font-weight:660;fill:#17394a;}
.pid-aqua .pid-aqua-hint {fill:#617f90;font-size:10.2px;letter-spacing:.18px;font-weight:720;}
.pid-aqua .pid-aqua-heading {font-size:13.2px;letter-spacing:1.05px;font-weight:800;}
.pid-aqua .pid-aqua-label {font-size:12.8px;letter-spacing:.55px;font-weight:800;}
.pid-aqua-end rect {fill:rgba(214,239,245,.84);stroke:rgba(72,151,173,.72);stroke-width:1;}
.pid-aqua-end text {font-size:11.5px;letter-spacing:1px;font-weight:800;}
.pid-aqua-valve path,.pid-makeup path {fill:rgba(235,251,254,.9);stroke:rgba(37,119,145,.96);stroke-width:1.7;}
.pid-aqua-valve circle {fill:#2a788b;}
.pid-aqua-strainer rect {fill:rgba(245,253,255,.72);stroke:rgba(59,139,161,.86);stroke-width:1.7;}
.pid-aqua-strainer path {fill:none;stroke:rgba(67,153,171,.78);stroke-dasharray:3 4;stroke-width:1.9;}
.pid-stage-art,.pid-boiler-art {fill:none;stroke:rgba(44,126,151,.98);stroke-width:2;stroke-linejoin:round;stroke-linecap:round;filter:drop-shadow(0 4px 9px rgba(37,93,115,.06));}
.pid-stage-art>rect:first-child,.pid-stage-art>circle:first-child,.pid-boiler-art>rect:first-child {fill:rgba(238,251,254,.78);stroke:rgba(48,127,151,.96);stroke-width:1.7;}
.pid-stage-art .pid-fill,.pid-boiler-art .pid-fill {fill:rgba(150,202,216,.66);stroke:rgba(61,131,153,.8);stroke-width:1.1;}
.pid-stage-disabled {opacity:.34;}
.pid-aqua-sensor circle {fill:rgba(245,254,255,.80);stroke:rgba(49,126,153,.98);stroke-width:1.6;}
.pid-aqua-sensor text {font-size:11px;font-weight:800;fill:rgba(32,88,114,.96);}
.pid-aqua-sensor .pid-aqua-sensor-letter {font-size:12px;}
.pid-count-dots circle {fill:rgba(148,188,201,.62);stroke:rgba(250,255,255,.94);stroke-width:.8;}
.pid-count-dots circle.on {fill:#25aaa9;filter:drop-shadow(0 0 2px rgba(37,170,169,.52));}
.device-card-compact {min-height:76px;}
.plant-pid-page {height:auto;max-height:none;display:block;overflow:visible;padding-bottom:calc(var(--page-gap) + 12px);}
.plant-pid-page .page-heading {margin-bottom:8px;}
.plant-pid-page .pid-panel {height:auto;min-height:0;}
.plant-pid-page .section-heading {margin-top:22px;margin-bottom:12px;}
.plant-equipment-scroll {overflow:visible;padding-right:0;}

.pid-sketch-layout .pid-sketch-box {fill:rgba(240,252,255,.78);stroke:rgba(42,126,151,.98);stroke-width:1.8;}
.pid-sketch-layout .pid-sketch-detail {fill:none;stroke:rgba(45,131,153,.90);stroke-width:2;stroke-linecap:round;stroke-linejoin:round;}
.pid-sketch-layout .pid-sketch-fill {fill:rgba(119,191,208,.46);stroke:rgba(43,126,151,.96);stroke-width:1.7;}
.pid-sketch-layout .pid-sketch-letter {font-family:var(--font);font-size:21px;font-weight:850;fill:var(--ink);}
.pid-pool-vessel>path:first-child {fill:rgba(99,196,215,.09);stroke:rgba(42,137,160,.97);stroke-width:4.2;stroke-linecap:round;stroke-linejoin:round;}
.pid-pool-level {fill:none;stroke:rgba(77,176,197,.42);stroke-width:1.4;stroke-dasharray:5 6;}
body[data-theme="midnight"] .pid-sketch-layout .pid-sketch-box {fill:rgba(15,48,63,.94);stroke:rgba(102,209,228,.82);}
body[data-theme="midnight"] .pid-sketch-layout .pid-sketch-detail {stroke:rgba(113,216,232,.78);}
body[data-theme="midnight"] .pid-sketch-layout .pid-sketch-fill {fill:rgba(52,129,148,.44);stroke:rgba(111,214,230,.84);}
body[data-theme="midnight"] .pid-sketch-layout .pid-sketch-letter {fill:#e7faff;}
body[data-theme="midnight"] .pid-pool-vessel>path:first-child {fill:rgba(25,82,101,.18);stroke:rgba(94,204,224,.88);}
.remote-settings-block {align-items:center!important;flex-direction:row!important;gap:28px!important;min-height:132px!important;}
.remote-license-copy {display:flex;flex-direction:column;gap:6px;min-width:170px;}
.remote-license-copy h2 {font-size:20px;}
.remote-license-copy span {font-size:13px;color:var(--ink-faint);font-weight:650;}
.remote-license-entry {display:grid;grid-template-columns:42px minmax(0,1fr) 74px;align-items:center;gap:8px;width:min(620px,64%);padding:6px;border:1px solid var(--stroke-soft);border-radius:16px;background:rgba(255,255,255,.18);box-shadow:inset 0 1px 0 rgba(255,255,255,.42);}
.remote-license-icon {width:42px;height:42px;border-radius:12px;display:grid;place-items:center;color:var(--accent);background:rgba(95,181,199,.10);}
.remote-license-icon .icon {width:18px;height:18px;stroke-width:1.5;}
.remote-license-entry input {width:100%;min-width:0;height:42px;border:0;background:transparent;color:var(--ink);outline:none;font-size:14px;font-weight:620;letter-spacing:.01em;}
.remote-license-entry input::placeholder {color:var(--ink-faint);opacity:.72;}
.remote-license-entry button {height:40px;border:1px solid rgba(45,139,160,.18);border-radius:11px;color:#f3ffff;background:linear-gradient(135deg,#17576c,#0d7f99);font-size:13px;font-weight:760;box-shadow:0 7px 16px rgba(8,87,108,.12);}
body[data-theme="midnight"] .remote-license-entry {background:rgba(6,31,44,.36);border-color:rgba(177,232,243,.14);box-shadow:inset 0 1px 0 rgba(255,255,255,.04);}
body[data-theme="midnight"] .remote-license-icon {background:rgba(95,209,228,.08);}
.segmented {display:flex;gap:5px;border:1px solid var(--stroke);border-radius:14px;padding:4px;background:var(--glass);}
.segmented button {border:0;background:transparent;border-radius:10px;padding:10px 17px;color:var(--ink-soft);font-size:14px;font-weight:680;}
.segmented button.selected {background:var(--glass-solid);box-shadow:0 3px 10px rgba(38,102,129,.09);color:var(--ink);}
.boiler-overview {position:relative;min-height:186px;overflow:hidden;display:flex;align-items:center;justify-content:space-between;padding:25px 35px;}
.boiler-gauge {position:relative;z-index:1;display:flex;align-items:center;gap:17px;}
.boiler-gauge>.icon {color:var(--accent);width:43px;height:43px;}
.boiler-gauge strong {font-size:50px;font-weight:570;letter-spacing:-.06em;}
.boiler-gauge strong small {font-size:22px;font-weight:500;margin-left:5px;}
.boiler-gauge>span,.boiler-unit-count span {font-size:12px;color:var(--ink-faint);letter-spacing:.13em;font-weight:720;}
.boiler-arc {position:absolute;left:30%;top:-70%;width:40%;height:250%;border:1px solid rgba(50,164,189,.14);border-radius:50%;box-shadow:0 0 0 27px rgba(75,173,192,.025),0 0 0 54px rgba(75,173,192,.025);}
.boiler-unit-count {display:flex;flex-direction:column;align-items:flex-end;z-index:1;gap:6px;}
.boiler-unit-count strong {font-size:45px;font-weight:520;}
.treatment-grid {display:grid;grid-template-columns:1.3fr 1fr;gap:16px;}
.treatment-feature {min-height:270px;padding:27px;display:flex;align-items:flex-start;justify-content:center;flex-direction:column;overflow:hidden;position:relative;background:radial-gradient(ellipse at 73% 44%,rgba(121,220,233,.26),transparent 42%),var(--glass);}
.treatment-feature h2 {font-size:27px;margin:9px 0 10px;}
.treatment-feature strong {font-size:57px;line-height:1;font-weight:510;}
.treatment-feature>span:last-child {font-size:12px;letter-spacing:.1em;font-weight:680;color:var(--ink-faint);}
.treatment-art {position:absolute;right:13%;top:14%;width:220px;height:220px;display:grid;place-items:center;transform:perspective(600px) rotateY(-22deg);}
.treatment-core {width:130px;height:130px;display:grid;place-items:center;border-radius:50%;border:1px solid var(--stroke);background:linear-gradient(135deg,rgba(255,255,255,.42),rgba(72,173,195,.15));box-shadow:inset 3px 3px 30px rgba(255,255,255,.40),0 12px 28px rgba(20,120,142,.13);color:var(--accent);}
.treatment-core .icon {width:63px;height:63px;stroke-width:1.15px;}
.treatment-track {position:absolute;width:95%;height:95%;border:1px solid rgba(74,177,195,.18);border-radius:50%;animation:orbit-drift 16s linear infinite;}
.treatment-track.track-b {width:125%;height:125%;border-style:dashed;animation-direction:reverse;}
.treatment-summary {padding:14px 24px;display:flex;flex-direction:column;justify-content:center;}
.mini-row {display:flex;align-items:center;gap:16px;min-height:53px;border-bottom:1px solid var(--stroke-soft);}
.mini-row:last-child {border:0;}
.mini-row .icon {color:var(--accent);}
.mini-row span {flex:1;font-size:15px;font-weight:600;}
.mini-row strong {font-size:22px;font-weight:590;}
.energy-grid {margin-top:0;}
.trends-panel {margin-top:20px;padding:2px 25px 26px;}
.big-graph {height:207px;color:var(--accent);padding-top:12px;}
.big-graph .spark {height:170px;}
.trend-duo {display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px;padding-top:12px;}
.trend-track {min-width:0;padding:15px 17px;border:1px solid var(--stroke-soft);border-radius:18px;background:linear-gradient(150deg,rgba(255,255,255,.27),rgba(127,211,225,.075));}
.trend-track-top {display:flex;justify-content:space-between;align-items:center;gap:12px;color:var(--ink-soft);}
.trend-track-top strong {font-size:14px;color:var(--ink);font-weight:670;}
.trend-track-top span {font-size:10px;letter-spacing:.09em;font-weight:760;white-space:nowrap;}
.graph-axis {display:flex;justify-content:space-between;color:var(--ink-faint);font-size:12px;}
.event-list,.scheduled-list {overflow:hidden;padding:7px 23px;}
.event-row,.scheduled-row {display:flex;align-items:center;gap:15px;min-height:71px;border-bottom:1px solid var(--stroke-soft);}
.event-row:last-child,.scheduled-row:last-child {border:0;}
.event-glyph {width:36px;height:36px;border-radius:11px;flex:none;display:grid;place-items:center;color:var(--accent);background:rgba(76,164,182,.1);}
.event-glyph .icon {width:19px;height:19px;}
.event-row>div,.scheduled-row>div {display:flex;flex:1;min-width:0;flex-direction:column;gap:5px;}
.event-row strong,.scheduled-row strong {font-size:14px;font-weight:620;white-space:nowrap;text-overflow:ellipsis;overflow:hidden;}
.event-row>div span,.scheduled-row>div span {font-size:12px;color:var(--ink-faint);font-weight:620;}
.event-dot {width:6px;height:6px;border-radius:50%;background:rgba(70,168,185,.42);}
.schedule-countdown {color:var(--accent);font-size:15px;font-variant-numeric:tabular-nums;font-weight:720;}
.empty-note {display:block;text-align:center;padding:23px;color:var(--ink-faint);font-size:15px;}
.settings-page {max-width:1100px;}
.settings-panel {padding:0 28px;overflow:hidden;}
.settings-block {min-height:126px;display:flex;align-items:center;justify-content:space-between;gap:20px;border-bottom:1px solid var(--stroke-soft);}
.settings-block:last-child {border:0;}
.settings-block>div:first-child {display:flex;flex-direction:column;gap:7px;}
.settings-block h2 {font-size:20px;}
.settings-block>div:first-child span {font-size:14px;color:var(--ink-faint);}
.theme-options,.settings-actions {display:flex;align-items:center;gap:13px;}
.theme-options {display:grid;grid-template-columns:repeat(2,144px);gap:12px;width:300px;justify-content:end;flex:none;}
.voice-settings-stack {display:grid;grid-template-columns:minmax(220px,.9fr) minmax(270px,1.1fr);align-items:stretch;gap:13px;width:100%;min-width:0;}
.recognition-choice {display:none;}
.recognition-label {display:none;}
.recognition-choice p {display:none;}
.recognition-segmented {display:none;}
.recognition-segmented button {display:none;}
.recognition-segmented button small {display:none;}
.recognition-segmented button.selected {display:none;}
body[data-theme="midnight"] .recognition-segmented {display:none;}
body[data-theme="midnight"] .recognition-segmented button.selected {display:none;}
.theme-option {width:144px;min-width:144px;height:65px;border:1px solid var(--stroke);border-radius:13px;background:var(--glass);display:grid;grid-template-columns:24px 1fr 16px;align-items:center;column-gap:9px;justify-content:center;padding:0 12px;font-size:14px;font-weight:650;}
.theme-option.chosen {border-color:rgba(44,166,193,.63);box-shadow:0 0 0 2px rgba(78,188,203,.08);}
.theme-option>.icon {width:16px;height:16px;color:var(--accent);}
.theme-option-label {text-align:center;white-space:nowrap;}
.theme-option .theme-check {opacity:0;transition:opacity .18s;}
.theme-option.chosen .theme-check {opacity:1;}
.theme-swatch {width:24px;height:26px;border:1px solid rgba(255,255,255,.5);border-radius:8px;box-shadow:0 3px 8px rgba(10,48,60,.08);}
.swatch-glacier {background:linear-gradient(135deg,#f2ffff,#86c3d4);}
.swatch-midnight {background:linear-gradient(135deg,#1b546c,#061c2d);}
.inline-switch {display:flex;align-items:center;gap:12px;font-size:14px;font-weight:610;cursor:pointer;}
.inline-switch input {position:absolute;opacity:0;width:1px;height:1px;}
.inline-switch i {position:relative;width:46px;height:27px;border-radius:20px;background:rgba(102,148,163,.35);transition:background .24s;}
.inline-switch i:after {content:"";position:absolute;top:3px;left:3px;width:21px;height:21px;background:#fff;border-radius:50%;box-shadow:0 2px 5px rgba(0,0,0,.12);transition:transform .24s;}
.inline-switch input:checked+i {background:#1fa0b3;}
.inline-switch input:checked+i:after {transform:translateX(19px);}
.inline-switch input:focus-visible+i {outline:2px solid #66cfe1;outline-offset:3px;}
.voice-overlay {position:fixed;top:calc(var(--header-h) + 9px);right:var(--page-gap);z-index:20;width:min(350px,calc(100vw - 24px));padding:0;background:transparent;backdrop-filter:none;-webkit-backdrop-filter:none;pointer-events:none;animation:overlay-in .18s ease-out both;}
.voice-dialog {position:relative;isolation:isolate;width:100%;overflow:hidden;border:1px solid rgba(232,255,255,.42);border-radius:19px;display:flex;flex-direction:column;align-items:stretch;padding:14px 15px 13px;background:linear-gradient(146deg,rgba(32,80,99,.96),rgba(6,34,52,.98));box-shadow:0 18px 48px rgba(4,20,32,.24),inset 0 1px 0 rgba(255,255,255,.20);color:#eafbff;animation:dialog-in .22s cubic-bezier(.2,.8,.2,1) both;pointer-events:auto;}
.voice-card-drop {position:absolute;z-index:0;display:none;border:1px solid rgba(224,253,255,.42);background:linear-gradient(160deg,rgba(255,255,255,.48),rgba(141,226,238,.13) 46%,rgba(37,137,166,.20));box-shadow:inset 0 2px 7px rgba(255,255,255,.24),0 9px 22px rgba(64,195,215,.10);backdrop-filter:blur(6px);pointer-events:none;animation:drop-drift 6s ease-in-out infinite;}
.voice-card-drop.drop-one {width:19px;height:25px;right:64px;top:64px;border-radius:52% 48% 58% 42% / 27% 29% 73% 71%;transform:rotate(16deg);}
.voice-card-drop.drop-two {width:11px;height:15px;left:52px;top:118px;border-radius:52% 48% 58% 42% / 27% 29% 73% 71%;animation-delay:-2.1s;}
.voice-card-drop.drop-three {width:8px;height:11px;right:92px;bottom:92px;border-radius:52% 48% 58% 42% / 27% 29% 73% 71%;animation-delay:-4s;}
@keyframes drop-drift {0%,100%{translate:0 0;opacity:.68}50%{translate:0 -7px;opacity:.95}}
.voice-dismiss {position:absolute;right:9px;top:9px;width:31px;height:31px;border-radius:10px;border-color:rgba(217,253,255,.17);background:rgba(255,255,255,.09);box-shadow:none;z-index:2;}
.close-svg {width:20px;height:20px;}
.voice-topline {display:flex;align-items:center;gap:8px;padding-right:38px;letter-spacing:.16em;color:#b8e9f1;font-size:10px;font-weight:780;}
.voice-topline .x-sign {width:19px;height:19px;filter:drop-shadow(0 2px 8px rgba(163,250,255,.4));}
.voice-object-wrap {display:none;}
.voice-object-wrap:after {content:"";position:absolute;inset:24%;border-radius:50%;background:rgba(128,238,251,.20);filter:blur(29px);z-index:-1;animation:quiet-pulse 3s ease-in-out infinite;} .voice-object-wrap::before {content:"";position:absolute;right:14%;top:12%;width:16px;height:22px;border-radius:56% 44% 58% 42% / 28% 30% 70% 72%;background:linear-gradient(165deg,rgba(255,255,255,.70),rgba(169,234,242,.16) 45%,rgba(70,174,193,.24) 100%);border:1px solid rgba(255,255,255,.45);box-shadow:0 8px 16px rgba(61,168,189,.12);opacity:.82;transform:rotate(14deg);}
.voice-waveform {height:16px;display:flex;align-items:center;justify-content:flex-start;gap:4px;margin:9px 0 2px;}
.voice-waveform i {width:3px;height:7px;border-radius:7px;background:linear-gradient(#d4feff,#48c4d9);opacity:.78;animation:waveform .82s ease-in-out infinite alternate;box-shadow:0 0 8px rgba(111,233,243,.26);}
.voice-waveform i:nth-child(2),.voice-waveform i:nth-child(7) {animation-delay:.13s;}
.voice-waveform i:nth-child(3),.voice-waveform i:nth-child(6) {animation-delay:.31s;}
.voice-waveform i:nth-child(4),.voice-waveform i:nth-child(5) {animation-delay:.44s;}
.voice-dialog h2 {font-size:19px;line-height:1.15;font-weight:680;margin:3px 0 4px;color:#f6ffff;}
.voice-subtitle {text-align:left;color:#e5fbff;font-size:13px;line-height:1.35;font-weight:650;max-width:100%;white-space:normal;overflow-wrap:anywhere;min-height:18px;}
.voice-feedback {min-height:16px;margin-top:3px;text-align:left;color:#b6f3e8;font-size:12px;line-height:1.3;font-weight:680;}
.voice-understanding {position:relative;display:flex;flex-direction:column;align-items:stretch;justify-content:center;gap:3px;width:100%;min-height:58px;padding:9px 11px;margin-top:5px;border:1px solid rgba(211,250,253,.18);border-radius:12px;background:rgba(198,247,255,.07);box-shadow:inset 0 1px 0 rgba(255,255,255,.10);backdrop-filter:none;-webkit-backdrop-filter:none;}
.voice-understanding-label {color:#94d7e9;font-size:8px;letter-spacing:.15em;font-weight:800;}
.voice-feedback[data-status="error"],.voice-feedback[data-status="partial"] {color:#ffcabd;}
.voice-feedback[data-status="success"] {color:#9ff5d7;}
.voice-counter {font-size:9px;letter-spacing:.10em;color:#7fcdda;font-weight:800;margin-top:6px;min-height:11px;}
.voice-typed {display:none;margin-top:0;width:100%;max-width:400px;align-items:center;border:1px solid rgba(190,244,250,.28);background:rgba(8,37,54,.36);border-radius:13px;padding:3px;}
.voice-typed input {flex:1;min-width:0;border:0;outline:none;background:transparent;padding:10px 13px;color:#e7faff;font-size:14px;}
.voice-typed input::placeholder {color:#85b6c6;}
.voice-typed button {width:37px;height:37px;display:grid;place-items:center;background:rgba(155,234,241,.16);border:1px solid rgba(190,244,250,.26);border-radius:9px;color:#e7fbff;}
.voice-typed button svg {width:21px;height:21px;}
.mic-notice {position:fixed;left:50%;bottom:clamp(14px,3vh,26px);z-index:25;max-width:calc(100vw - 30px);transform:translateX(-50%);display:flex;align-items:center;gap:13px;padding:11px 12px 11px 18px;border:1px solid rgba(209,253,255,.76);border-radius:16px;background:rgba(12,56,76,.93);box-shadow:0 18px 62px rgba(9,42,64,.23);backdrop-filter:blur(22px);-webkit-backdrop-filter:blur(22px);color:#eaffff;font-size:13px;}
body[data-page="hub"] .mic-notice {top:calc(var(--header-h) + 16px);right:var(--page-gap);bottom:auto;left:auto;transform:none;max-width:245px;flex-wrap:wrap;gap:8px;}
.mic-notice button {background:rgba(133,231,243,.22);border:1px solid rgba(190,250,255,.38);padding:9px 11px;border-radius:10px;color:#ecffff;white-space:nowrap;font-size:13px;font-weight:700;}
.mic-notice button:last-child {background:transparent;border:0;font-size:20px;padding:5px 7px;}
.toast {position:fixed;top:calc(var(--header-h) + 12px);right:var(--page-gap);bottom:auto;left:auto;transform:translateY(-11px);padding:12px 18px;border-radius:13px;border:1px solid rgba(229,255,255,.43);background:rgba(16,62,80,.93);color:#edffff;box-shadow:0 15px 40px rgba(9,47,69,.22);font-size:14px;opacity:0;pointer-events:none;transition:opacity .23s,transform .23s;z-index:30;max-width:90%;text-align:center;}
.toast.show {opacity:1;transform:translateY(0);}
.intro {position:fixed;inset:0;z-index:40;display:grid;place-items:center;background:linear-gradient(145deg,#092734,#174b5f);color:#edffff;animation:intro-fade .7s 1.28s forwards;pointer-events:none;}
.intro-mark {position:relative;width:143px;height:143px;display:grid;place-items:center;}
.intro-mark {position:relative;width:143px;height:143px;display:grid;place-items:center;}
.intro-ring {position:absolute;inset:-10%;border-radius:50%;border:1px solid rgba(193,255,255,.52);border-top-color:transparent;animation:orbit-drift 1.5s linear infinite;box-shadow:0 0 30px rgba(94,228,241,.14);}
.intro-line {position:absolute;top:calc(50% + 91px);height:1px;background:linear-gradient(90deg,transparent,#b3f7fc,transparent);animation:intro-rule 1.4s ease-in-out both;}
.boot-error {position:fixed;z-index:45;bottom:15px;left:50%;transform:translateX(-50%);padding:15px;background:#193a4b;color:white;border-radius:14px;}


@keyframes ambient-drift {from{transform:translate(-5%,0) scale(1);}to{transform:translate(9%,7%) scale(1.19);}}
@keyframes brand-gleam {0%,74%,100%{transform:translateX(-150%) rotate(25deg);}83%{transform:translateX(170%) rotate(25deg);}}
@keyframes orbit-drift {to{transform:rotate(360deg);}}
@keyframes orbit-tilt-x {from{transform:rotateX(67deg) rotateZ(0);}to{transform:rotateX(67deg) rotateZ(360deg);}}
@keyframes orbit-tilt-y {from{transform:rotateY(62deg) rotateZ(0);}to{transform:rotateY(62deg) rotateZ(360deg);}}
@keyframes hover-float {50%{transform:translateY(-12px) rotate(3deg);}}
@keyframes stat-bob {from{transform:translateY(-5px);}to{transform:translateY(5px);}}
@keyframes quiet-pulse {50%{opacity:.56;transform:scale(1.028);}}
@keyframes sector-appear {from{opacity:0;transform:scale(.91);}to{opacity:1;transform:scale(1);}}
@keyframes wheel-arrive {from{opacity:0;transform:scale(1.075) rotate(8deg);filter:blur(7px);}to{opacity:1;transform:scale(1) rotate(0);filter:blur(0);}}
@keyframes page-reveal {from{opacity:0;transform:translateY(11px);}to{opacity:1;transform:translateY(0);}}
@keyframes pipe-flow {to{stroke-dashoffset:-40;}}
@keyframes overlay-in {from{opacity:0;}to{opacity:1;}}
@keyframes dialog-in {from{transform:translateY(18px) scale(.96);opacity:0;}to{transform:translateY(0) scale(1);opacity:1;}}
@keyframes voice-breathe {50%{transform:scale(1.065);filter:drop-shadow(0 0 43px rgba(104,232,242,.48));}}
@keyframes waveform {from{height:5px;opacity:.46;}to{height:22px;opacity:1;}}
@keyframes glass-drift {0%,100%{transform:translate3d(0,0,0) rotate(-2deg);}50%{transform:translate3d(0,-3px,0) rotate(3deg);}}
@keyframes liquid-roll {0%,100%{transform:rotate(-25deg) scale(.98);}50%{transform:rotate(155deg) scale(1.04);}}
@keyframes intro-scale {from{opacity:0;transform:scale(.65);filter:blur(15px);}to{opacity:1;transform:scale(1);filter:blur(0);}}
@keyframes intro-rule {from{width:0;opacity:0;}to{width:75px;opacity:.8;}}
@keyframes intro-fade {to{opacity:0;visibility:hidden;}}
@media (max-width:980px) {
  .voice-settings-panel {grid-template-columns:1fr;gap:15px;padding:18px;}
  .voice-settings-hero {padding:0;}
  .voice-settings-hero p {max-width:none;}
}
@media (max-width:1160px) {
  :root {--header-h:66px;--page-gap:20px;}
  .brand-mark {width:40px;height:40px;}
  .setup-layout {grid-template-columns:minmax(262px,.69fr) minmax(0,1.38fr);gap:15px;padding:16px;}
  .setup-showcase {padding:28px;}
  .setup-panel {padding:16px;}
  .reading-row {width:155px;padding:11px 13px;}
  .reading-row strong {font-size:30px;}
  .home-hero {min-height:243px;}
  .home-stats .stat-card {min-height:145px;}
  .pool-monitor-card {padding:11px 14px 10px;}
  .pool-monitor-metrics {gap:5px;margin:-3px 0 4px;transform:translateY(8px);}
  .pool-live-metric {padding:6px 6px 5px;}
  .pool-live-metric strong {font-size:19px;}
  .pool-setpoint {min-height:38px;padding:5px 9px;}
  .device-card {padding:13px;gap:10px;}
  .plant-pid-page .pid-panel {height:clamp(450px,calc(100dvh - var(--header-h) - 122px),610px);min-height:450px;}
}
@media (max-height:700px) and (min-width:800px) {
  .hub-intro {top:11px;}
  .hub-intro h1 {font-size:27px;}
  .hub-step {font-size:10px;}
  .hub-bottom-note {bottom:10px;}
  .hub-voice-entrance {bottom:9%;}
  .reading-row:nth-child(2) {top:31%;}
  .reading-row:nth-child(3) {top:31%;}

  .setup-showcase h1 {font-size:clamp(33px,3.6vw,47px);}
  .setup-panel {padding:14px 17px;}
  .setup-panel-head {gap:4px;margin-bottom:10px;}
  .setup-group {padding:0 0 6px;}
  .setup-item {min-height:43px;}
  .setup-item-symbol {width:24px;height:24px;}
  .stepper {height:32px;}
  .stepper button {height:30px;}
  .setup-footer {padding-top:9px;margin-top:8px;}
  .home-hero {min-height:225px;}
  .hero-temperature {font-size:82px;}
  .stat-card {min-height:130px;}
  .voice-object-wrap {height:200px;width:200px;}
  .voice-dialog {padding:14px 15px 13px;}
}
@media (max-width:850px) {
  .remote-form {grid-template-columns:repeat(2,minmax(0,1fr));}
  .trend-duo {grid-template-columns:1fr;}
  .hub-intro {top:12px;}
  .hub-intro h1 {font-size:27px;}
  .hub-voice-entrance {bottom:9%;}

  .setup-layout {grid-template-columns:1fr;overflow:auto;}
  .setup-groups {display:block;}
  .setup-showcase {min-height:240px;}
  .setup-pulse-field {left:55%;top:-28%;height:110%;}
  .setup-showcase h1 {font-size:43px;}
  .setup-panel {min-height:560px;}
  .setup-groups {overflow:visible;}
  .pool-list,.device-grid {grid-template-columns:repeat(2,minmax(0,1fr));}
  .pool-control-grid {grid-template-columns:repeat(2,minmax(0,1fr));}
}
@media (max-width:600px) {
  .remote-form {grid-template-columns:1fr;}
  .remote-settings-block {flex-direction:column!important;align-items:stretch!important;gap:12px!important;}
  .remote-license-entry {width:100%;}
  .voice-overlay {right:12px;top:calc(var(--header-h) + 7px);width:calc(100vw - 24px);}
  .hub-intro {top:9px;}
  .hub-intro h1 {font-size:23px;}
  .hub-step {display:none;}
  .hub-bottom-note {display:none;}
  .hub-wheel-wrap {width:min(calc(100dvh - var(--header-h) - 26px),95vw);}
  .hub-voice-entrance {left:0;bottom:0;width:151px;min-height:44px;font-size:13px;}
  .voice-dialog {padding:13px 14px 12px;}
  .voice-object-wrap {height:min(29vh,230px);width:min(29vh,230px);}

  :root {--header-h:64px;--page-gap:15px;}
  .brand-text {display:none;}
  .header-divider {display:none;}
  .header-location {font-size:13px;gap:6px;}
  .header-time {display:none;}
  .header-actions {gap:7px;}
  .icon-button {width:40px;height:40px;}
  .setup-showcase {padding:22px;}
  .setup-panel {padding:19px;}
  .setup-groups {grid-template-columns:1fr;}
  .wheel-sector-text {font-size:12.2px;}
  .home-hero {min-height:230px;padding:21px 23px;}
  .hero-companion {right:-78px;opacity:.67;}
  .hero-temperature {font-size:78px;}
    .home-stats {grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;}
  .home-stats .stat-card:last-child {grid-column:span 2;}
  .device-grid,.pool-list,.energy-grid,.treatment-grid,.pool-control-grid {grid-template-columns:1fr;}
  .pools-monitor-page {height:auto;overflow:visible;}
  .pool-monitor-grid {grid-template-columns:1fr;grid-template-rows:none;}
  .pid-panel {padding:12px 10px 10px;overflow:hidden;}
  .pid-diagram {width:104%;max-width:none;height:auto;min-height:0;margin:-5px -2% 0;}
  .plant-pid-page .pid-panel {height:clamp(380px,calc(100dvh - var(--header-h) - 128px),500px);min-height:380px;}
  .settings-block {align-items:flex-start;flex-direction:column;padding:18px 0;}
  .settings-actions {flex-wrap:wrap;}
  .theme-options {width:100%;grid-template-columns:repeat(2,minmax(120px,144px));justify-content:start;}
  .voice-status-grid {grid-template-columns:1fr;}
  .voice-button-row {grid-template-columns:1fr;}
  .recognition-choice {display:none;}
  .theme-option {width:100%;min-width:120px;}
  .compact-heading {align-items:flex-start;gap:15px;flex-direction:column;}
}
@media (prefers-reduced-motion:reduce) {
  *,*:before,*:after {animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important;scroll-behavior:auto !important;}
}

.teach-page{padding-bottom:26px}.teach-summary{display:flex;align-items:center;gap:10px;padding:9px 13px;border:1px solid var(--stroke-soft);border-radius:14px;background:rgba(255,255,255,.2)}.teach-summary strong{font-size:21px;line-height:1;color:var(--ink)}.teach-summary span{font-size:10px;font-weight:800;letter-spacing:.12em;color:var(--ink-faint)}.teach-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}.teach-card{padding:18px;display:flex;flex-direction:column;gap:13px;min-width:0}.teach-card-head{display:flex;align-items:flex-start;gap:12px}.teach-card-head h2{font-size:18px;margin:0 0 4px}.teach-card-head p{font-size:12px;line-height:1.45;color:var(--ink-faint);margin:0;max-width:420px}.teach-icon{width:40px;height:40px;display:grid;place-items:center;flex:0 0 auto;border-radius:12px;background:rgba(64,161,184,.1);color:var(--accent)}.teach-icon .icon{width:19px;height:19px}.teach-field{display:flex;flex-direction:column;gap:6px}.teach-field>span{font-size:11px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-faint)}.teach-field input{width:100%;height:43px;border:1px solid var(--stroke-soft);border-radius:12px;padding:0 13px;background:rgba(255,255,255,.24);color:var(--ink);outline:none;font:inherit;font-size:13px;font-weight:620;unicode-bidi:plaintext}.teach-field input:focus{border-color:rgba(54,151,174,.52);box-shadow:0 0 0 3px rgba(64,161,184,.08)}.teach-field input::placeholder{color:var(--ink-faint);opacity:.66}.teach-save{align-self:flex-end;min-width:142px;height:41px}.teach-library{margin-top:14px;padding:18px}.teach-library-head{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;margin-bottom:14px}.teach-library-head h2{font-size:18px;margin-top:3px}.teach-library-head>span{font-size:11px;color:var(--ink-faint);font-weight:700}.teach-library-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}.teach-list{min-width:0;padding:13px;border:1px solid var(--stroke-soft);border-radius:14px;background:rgba(255,255,255,.12)}.teach-list h3{font-size:12px;letter-spacing:.04em;margin:0 0 9px}.teach-row{display:grid;grid-template-columns:minmax(0,1fr) 30px;gap:8px;align-items:center;padding:9px 0;border-top:1px solid var(--stroke-soft)}.teach-row:first-of-type{border-top:0}.teach-row>div{min-width:0}.teach-row strong,.teach-row span{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.teach-row strong{font-size:12px}.teach-row span{font-size:11px;color:var(--ink-faint);margin-top:3px}.teach-row button{width:30px;height:30px;border:0;border-radius:9px;background:transparent;color:var(--ink-faint);display:grid;place-items:center}.teach-row button:hover{background:rgba(74,156,177,.1);color:var(--ink)}.teach-row button .icon{width:14px;height:14px}.teach-empty{font-size:11px;color:var(--ink-faint);padding:8px 0;line-height:1.5}.teach-note{display:flex;gap:8px;align-items:center;margin-top:12px;padding-top:12px;border-top:1px solid var(--stroke-soft);color:var(--ink-faint)}.teach-note .icon{width:15px;height:15px;flex:0 0 auto}.teach-note p{font-size:11px;line-height:1.45;margin:0}body[data-theme="midnight"] .teach-summary,body[data-theme="midnight"] .teach-field input,body[data-theme="midnight"] .teach-list{background:rgba(7,28,40,.34)}
@media(max-width:900px){.teach-grid{grid-template-columns:1fr}.teach-library-grid{grid-template-columns:1fr}.teach-save{align-self:stretch}.teach-library-head{align-items:flex-start;flex-direction:column;gap:5px}}

/* Teach X touch keyboard */
.touch-keyboard-overlay{position:fixed;inset:0;z-index:32;display:flex;align-items:flex-end;justify-content:center;padding:16px 18px 20px;background:rgba(6,28,40,.34);backdrop-filter:blur(14px) saturate(.86);-webkit-backdrop-filter:blur(14px) saturate(.86)}
.touch-keyboard{width:min(960px,calc(100vw - 28px));padding:15px 16px 16px;border-radius:25px;background:linear-gradient(145deg,rgba(244,255,255,.94),rgba(204,235,242,.90));box-shadow:0 28px 85px rgba(7,36,51,.28),inset 0 1px 0 rgba(255,255,255,.9);border:1px solid rgba(255,255,255,.88)}
body[data-theme="midnight"] .touch-keyboard{background:linear-gradient(145deg,rgba(29,69,85,.98),rgba(8,32,46,.99));border-color:rgba(183,235,245,.14);color:#ecfbff;box-shadow:0 32px 90px rgba(0,10,19,.48),inset 0 1px 0 rgba(255,255,255,.07)}
.touch-keyboard-head{display:grid;grid-template-columns:minmax(0,1fr) auto 42px;align-items:center;gap:12px;margin-bottom:10px}.touch-keyboard-head>div:first-child{display:flex;flex-direction:column;gap:3px}.touch-keyboard-head h2{font-size:18px;margin:0}.touch-keyboard-language{display:flex!important;flex-direction:row!important;gap:5px!important;padding:4px;border:1px solid var(--stroke-soft);border-radius:13px;background:rgba(255,255,255,.2)}
.touch-keyboard-language button{min-width:62px;height:34px;border:0;border-radius:9px;background:transparent;color:var(--ink-soft);font:inherit;font-size:12px;font-weight:800;cursor:pointer}.touch-keyboard-language button.selected{background:var(--glass-solid);color:var(--ink);box-shadow:0 3px 9px rgba(38,102,129,.11)}body[data-theme="midnight"] .touch-keyboard-language{background:rgba(4,24,36,.38);border-color:rgba(183,235,245,.10)}
.touch-keyboard-preview{min-height:44px;display:flex;align-items:center;padding:8px 13px;margin-bottom:10px;border-radius:13px;border:1px solid var(--stroke);background:rgba(255,255,255,.34);font-size:16px;font-weight:650;unicode-bidi:plaintext;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.touch-keyboard-preview:empty:before{content:'Tap the keys to type';color:var(--ink-faint);font-size:12px;font-weight:650}body[data-theme="midnight"] .touch-keyboard-preview{background:rgba(4,26,38,.58);border-color:rgba(173,231,242,.13)}
.touch-keyboard-keys{display:flex;flex-direction:column;gap:7px;direction:ltr}.touch-keyboard-row{display:flex;justify-content:center;gap:7px}.touch-keyboard-row.keyboard-row-2{padding-inline:28px}.touch-keyboard-row.keyboard-row-3{padding-inline:58px}.touch-keyboard-key{height:48px;flex:1 1 0;min-width:42px;max-width:78px;border:1px solid var(--stroke);border-radius:13px;background:linear-gradient(145deg,rgba(255,255,255,.68),rgba(171,224,234,.18));box-shadow:0 5px 11px rgba(20,73,92,.07),inset 0 1px 0 rgba(255,255,255,.72);color:var(--ink);font:inherit;font-size:18px;font-weight:690;cursor:pointer;transition:transform .12s,background .12s}.touch-keyboard[data-language="fa"] .touch-keyboard-key{font-size:20px}.touch-keyboard-key:active,.touch-keyboard-actions button:active{transform:scale(.96)}body[data-theme="midnight"] .touch-keyboard-key,body[data-theme="midnight"] .touch-keyboard-actions .keyboard-function,body[data-theme="midnight"] .touch-keyboard-actions .keyboard-space{background:linear-gradient(145deg,rgba(60,111,129,.34),rgba(16,51,66,.46));border-color:rgba(167,226,238,.13);box-shadow:0 5px 11px rgba(0,13,24,.15),inset 0 1px 0 rgba(255,255,255,.05);color:#e9faff}
.touch-keyboard-actions{display:grid;grid-template-columns:88px minmax(220px,1fr) 72px 120px;gap:8px;margin-top:9px}.touch-keyboard-actions button{height:45px;border-radius:13px;font:inherit;font-weight:760;transition:transform .12s}.touch-keyboard-actions .keyboard-function,.touch-keyboard-actions .keyboard-space{border:1px solid var(--stroke);background:linear-gradient(145deg,rgba(255,255,255,.66),rgba(171,224,234,.15));color:var(--ink)}.touch-keyboard-actions .keyboard-space{font-size:12px;letter-spacing:.02em}.touch-keyboard-actions .keyboard-backspace{font-size:20px}.touch-keyboard-actions .keyboard-done{border:0}
@media(max-width:760px){.touch-keyboard-overlay{padding:8px}.touch-keyboard{width:100%;padding:12px;border-radius:20px}.touch-keyboard-head{grid-template-columns:minmax(0,1fr) auto 38px}.touch-keyboard-preview{min-height:39px;margin-bottom:7px}.touch-keyboard-keys{gap:5px}.touch-keyboard-row{gap:5px}.touch-keyboard-row.keyboard-row-2{padding-inline:9px}.touch-keyboard-row.keyboard-row-3{padding-inline:19px}.touch-keyboard-key{height:42px;min-width:28px;border-radius:10px;font-size:15px}.touch-keyboard[data-language="fa"] .touch-keyboard-key{font-size:17px}.touch-keyboard-actions{grid-template-columns:65px minmax(120px,1fr) 58px 88px;gap:5px}.touch-keyboard-actions button{height:41px}.touch-keyboard-language button{min-width:50px;height:31px}}