:root {
  color-scheme: dark;
  font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --ink: #f8f5ff;
  --muted: #aaa3ba;
  --surface: #171321;
  --surface-2: #211a2e;
  --line: #342a44;
  --violet: #8f63ef;
  --violet-2: #5e2cb8;
  --green: #53d99b;
  --red: #ff7b8c;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
body { margin: 0; min-height: 100vh; min-height: 100dvh; color: var(--ink); background: radial-gradient(circle at 18% 20%, #24163d 0, #0d0a16 34%, #08070d 75%); overscroll-behavior: none; }
button, input, select { font: inherit; }
button { color: inherit; }
.app-shell { min-height: 100vh; display: grid; grid-template-columns: minmax(280px, 440px) minmax(360px, 760px); gap: clamp(24px, 7vw, 120px); align-items: center; justify-content: center; padding: 42px; }
.brand-panel { max-width: 440px; }
.brand { display: flex; align-items: center; gap: 12px; font-weight: 850; letter-spacing: .02em; }
.brand-mark { width: 46px; height: 46px; display: grid; place-items: center; overflow: hidden; border-radius: 15px; background: #0d0a16; box-shadow: 0 12px 40px #6f42d966; }
.brand-mark img { width: 100%; height: 100%; display: block; object-fit: cover; }
.brand-panel h1 { margin: 34px 0 20px; font-size: clamp(45px, 5vw, 76px); line-height: .92; letter-spacing: -.065em; }
.brand-panel h1 em { font-style: normal; color: #a880ff; }
.brand-panel p { max-width: 380px; color: var(--muted); line-height: 1.65; font-size: 17px; }
.box-mini { margin-top: 40px; display: inline-flex; align-items: center; gap: 9px; padding: 12px 16px; border: 1px solid var(--line); border-radius: 99px; background: #161020aa; color: #d9d2e6; }
.status-dot { width: 9px; height: 9px; background: var(--red); border-radius: 50%; box-shadow: 0 0 12px currentColor; }
.status-dot.online { background: var(--green); }

.phone { position: relative; width: min(100%, 760px); height: min(900px, calc(100vh - 56px)); min-height: 650px; display: flex; flex-direction: column; overflow: hidden; background: linear-gradient(180deg, #110d19, #171020); border: 1px solid #393044; border-radius: 42px; box-shadow: 0 30px 100px #000a, inset 0 0 0 7px #1b1723; }
.topbar { display: flex; justify-content: space-between; align-items: center; padding: 34px 34px 18px; }
.eyebrow { color: var(--muted); font-size: 14px; }
.topbar h2 { margin: 4px 0 0; font-size: 28px; letter-spacing: -.035em; }
.avatar { border: 0; width: 46px; height: 46px; border-radius: 17px; font-weight: 800; background: linear-gradient(145deg, #b98cff, #6730cf); box-shadow: 0 10px 30px #6730cf55; cursor: pointer; }
.view { flex: 1; overflow-y: auto; padding: 8px 34px 110px; scrollbar-width: thin; scrollbar-color: #584370 transparent; }
.bottom-nav { position: absolute; left: 0; right: 0; bottom: 0; min-height: 82px; display: grid; grid-template-columns: repeat(5, 1fr); padding: 9px max(16px, env(safe-area-inset-right)) max(12px, env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left)); border-top: 1px solid #392f46; background: #17131ee8; backdrop-filter: blur(18px); }
.bottom-nav button { border: 0; background: none; display: grid; place-items: center; gap: 3px; color: #8f879e; font-size: 11px; cursor: pointer; }
.bottom-nav button span { font-size: 22px; }
.bottom-nav button.active { color: #a783ff; }

.hero { position: relative; overflow: hidden; padding: 27px; border-radius: 28px; background: linear-gradient(135deg, #3b205d, #7137cc 60%, #332153); box-shadow: 0 20px 50px #4c20a344; }
.hero::after { content: "⌂"; position: absolute; right: 22px; top: 18px; font-size: 35px; opacity: .8; }
.hero .eyebrow { color: #dac9ff; }
.hero h3 { max-width: 390px; margin: 5px 0 22px; padding-right: 34px; font-size: 30px; line-height: 1.05; letter-spacing: -.045em; overflow-wrap: anywhere; }
.pills { display: flex; flex-wrap: wrap; gap: 8px; }
.pill { padding: 8px 11px; border: 1px solid #ffffff1f; border-radius: 99px; background: #ffffff17; font-size: 12px; }
.section-head { display: flex; align-items: center; justify-content: space-between; margin: 28px 0 13px; }
.section-head h3 { margin: 0; font-size: 18px; }
.section-head button { border: 0; background: none; color: #aa87ff; cursor: pointer; }
.grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.card { border: 1px solid var(--line); border-radius: 23px; background: linear-gradient(145deg, #211a2d, #1a1523); padding: 18px; box-shadow: 0 12px 26px #05030a33; }
button.card { width: 100%; text-align: left; cursor: pointer; }
button.card:hover { border-color: #7458a2; transform: translateY(-1px); }
.card-icon { width: 46px; height: 46px; display: grid; place-items: center; margin-bottom: 15px; border-radius: 15px; background: linear-gradient(145deg, #644c7a, #39284e); font-size: 23px; }
.card strong { display: block; font-size: 15px; }
.card small { display: block; margin-top: 5px; color: var(--muted); line-height: 1.35; }
.device { position: relative; min-height: 145px; }
.device .toggle { position: absolute; top: 18px; right: 18px; width: 42px; height: 24px; border: 0; border-radius: 99px; background: #4b415a; cursor: pointer; }
.device .toggle::after { content: ""; position: absolute; width: 18px; height: 18px; top: 3px; left: 3px; border-radius: 50%; background: white; transition: .2s; }
.device .toggle.on { background: var(--violet); }
.device .toggle.on::after { transform: translateX(18px); }
.range-row { margin-top: 14px; }
.range-row label { display: flex; justify-content: space-between; color: var(--muted); font-size: 12px; }
input[type="range"] { width: 100%; accent-color: var(--violet); }
.color-control { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 13px; color: var(--muted); font-size: 12px; }
.color-control input[type="color"] { width: 54px; height: 36px; padding: 3px; border: 1px solid #ffffff22; border-radius: 11px; background: #130f1a; cursor: pointer; }
.light-presets { display: grid; gap: 7px; margin-top: 14px; }
.light-presets > span, .effect-control > span { color: var(--muted); font-size: 11px; }
.light-presets > div { display: flex; gap: 6px; overflow-x: auto; padding-bottom: 2px; }
.light-presets button, .effect-control button { border: 1px solid #5f4878; border-radius: 99px; padding: 7px 10px; background: #251932; color: #d9c8eb; font-size: 10px; font-weight: 700; white-space: nowrap; cursor: pointer; }
.effect-control { display: flex; align-items: center; flex-wrap: wrap; gap: 7px; margin-top: 12px; }
.effect-control > span { width: 100%; }
.effect-control button.active { border-color: #a77bf7; background: #563487; color: #fff; }
.effect-select { display: grid; gap: 6px; margin-top: 12px; color: var(--muted); font-size: 11px; }
.effect-select select { min-height: 38px; border: 1px solid #5f4878; border-radius: 11px; padding: 7px 10px; background: #251932; color: #e4d8ef; }
.energy-metrics { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-top: 14px; }
.energy-metrics span { display: grid; gap: 3px; padding: 10px; border: 1px solid #ffffff12; border-radius: 12px; background: #191321; }
.energy-metrics small { color: var(--muted); font-size: 10px; }
.energy-metrics strong { font-size: 14px; }
.device-energy { grid-column: 1 / -1; }
.device-energy .energy-metrics strong { padding-right: 0; overflow: visible; text-overflow: clip; white-space: nowrap; }
.list { display: grid; gap: 10px; }
.list-card { display: flex; align-items: center; gap: 14px; padding: 15px; }
.list-card .card-icon { margin: 0; flex: 0 0 auto; }
.list-card .grow { flex: 1; }
.list-card .arrow { color: #9d77ef; font-size: 22px; }
.scenario { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 14px; }
.run { border: 1px solid #7254a5; border-radius: 12px; background: #6240a2; padding: 9px 12px; cursor: pointer; }
.subtle { color: var(--muted); line-height: 1.5; }
.box-card { display: grid; grid-template-columns: auto 1fr; gap: 15px; align-items: center; }
.box-orb { width: 52px; height: 52px; display: grid; place-items: center; border-radius: 18px; background: #342643; font-size: 25px; }
.box-orb.online { color: #0e251b; background: var(--green); box-shadow: 0 8px 30px #53d99b44; }
.support-card { margin-top: 14px; border-color: #533c73; }
.support-form { display: grid; grid-template-columns: 1fr auto; gap: 10px; margin-top: 15px; }
.support-form input, .support-form select { min-width: 0; border: 1px solid #493a5e; border-radius: 13px; padding: 12px; color: var(--ink); background: #110e18; }
.support-form select { grid-column: 1; }
.primary { border: 0; border-radius: 13px; padding: 12px 16px; background: linear-gradient(135deg, #9e72f4, #6731c9); color: #fff; font-weight: 700; cursor: pointer; }
.secondary { min-height: 40px; border: 1px solid #76569b; border-radius: 12px; padding: 9px 13px; background: #2b1d39; color: #e3d5ef; font-weight: 700; cursor: pointer; }
.secondary:hover { border-color: #a57be4; background: #38244c; }
.danger { border: 1px solid #784253; border-radius: 12px; padding: 8px 11px; background: #321924; color: #ffadba; cursor: pointer; }
.session { margin-top: 12px; display: flex; justify-content: space-between; gap: 12px; align-items: center; padding: 13px; border-radius: 15px; background: #2a2038; }
.session code { font-size: 22px; letter-spacing: .16em; color: #d4baff; }
.audit { margin-top: 12px; display: grid; gap: 9px; }
.audit-item { display: grid; grid-template-columns: 10px 1fr auto; gap: 10px; align-items: center; color: #ddd6e8; font-size: 13px; }
.audit-item .dot { width: 7px; height: 7px; border-radius: 50%; background: #8064b3; }
.audit-item time { color: var(--muted); font-size: 11px; }
.driver-list { display: grid; gap: 9px; }
.driver-item { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 14px; }
.driver-orb { width: 38px; height: 38px; display: grid; place-items: center; border-radius: 12px; background: #3c2952; color: #c7a5ff; }
.driver-item small { display: block; margin-top: 3px; color: var(--muted); font-size: 11px; }
.driver-status { padding: 6px 8px; border: 1px solid #695080; border-radius: 99px; color: #c9b4dc; font-size: 10px; white-space: nowrap; }
.driver-status.ready { border-color: #54d6b0; color: #8df0cf; background: #173a34; }
.local-control-banner { display: grid; grid-template-columns: auto 1fr; gap: 13px; margin: 10px 0 22px; padding: 17px; border: 1px solid #7e59b2; border-radius: 18px; background: linear-gradient(145deg, #35204f, #21162f); }
.local-control-banner > span { width: 42px; height: 42px; display: grid; place-items: center; border-radius: 13px; background: #a779f2; color: #180d24; font-size: 20px; }
.local-control-banner p { margin: 5px 0 0; color: #cfc2df; font-size: 11px; line-height: 1.5; }
.integrations-hero { display: grid; grid-template-columns: auto 1fr; gap: 15px; align-items: center; margin-bottom: 14px; padding: 20px; border: 1px solid #7754a4; border-radius: 23px; background: linear-gradient(145deg, #33204b, #1b1425); }
.integrations-hero > span { width: 52px; height: 52px; display: grid; place-items: center; border-radius: 17px; background: #a97aec; color: #1a0d26; font-size: 25px; }
.integrations-hero small { color: #c9aceb; font-size: 9px; font-weight: 850; letter-spacing: .1em; }
.integrations-hero h3 { margin: 4px 0; font-size: 20px; }
.integrations-hero p { margin: 0; color: #c9bdd8; font-size: 11px; line-height: 1.45; }
.integration-catalog { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 9px; margin-bottom: 14px; }
.integration-card { min-width: 0; display: grid; justify-items: start; gap: 4px; padding: 14px; border: 1px solid #49385b; border-radius: 17px; background: #17121e; color: var(--ink); text-align: left; cursor: pointer; }
.integration-card > span { width: 35px; height: 35px; display: grid; place-items: center; margin-bottom: 5px; border-radius: 11px; background: #352545; color: #c4a0f6; font-size: 18px; }
.integration-card strong { font-size: 12px; }
.integration-card small { color: var(--muted); font-size: 9px; line-height: 1.35; }
.integration-card em { margin-top: 5px; color: #a98cbe; font-size: 8px; font-style: normal; line-height: 1.35; }
.integration-card.active { border-color: #9f73dc; background: #2b1c3b; box-shadow: 0 9px 24px #6e3ea329; }
.hub-item { display: flex; align-items: center; gap: 11px; padding: 14px; }
.hub-connection { overflow: hidden; padding: 0; }
.discovered-devices { display: grid; gap: 8px; padding: 0 14px 14px; border-top: 1px solid #ffffff0d; }
.discovered-devices > small { margin-top: 12px; color: #a999ba; font-size: 10px; text-transform: uppercase; letter-spacing: .07em; }
.discovered-devices > div { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px; border-radius: 12px; background: #ffffff08; }
.discovered-devices strong, .discovered-devices small { display: block; }
.discovered-devices small { margin-top: 2px; color: var(--muted); font-size: 10px; }
.compact-button { padding: 8px 10px; font-size: 10px; }
.privacy-note { color: #9d8fac; font-size: 10px; line-height: 1.5; }
.hub-inline-status, .hub-feedback { padding: 12px 14px; border: 1px solid #6d558a; border-radius: 13px; color: #d9cce8; background: #271b35; font-size: 12px; line-height: 1.45; }
.hub-inline-status.working { border-color: #8f68c3; }
.hub-inline-status.error, .hub-feedback.error { border-color: #a94e68; color: #ffc2ce; background: #381d28; }
.hub-feedback.success { border-color: #54d6b0; color: #baf7e3; background: #173a34; }
.hub-feedback { display: grid; gap: 3px; margin: 10px 0 14px; }
.relink-button { grid-column: 1 / -1; margin-top: 4px; border: 1px solid #725398; border-radius: 11px; padding: 9px; background: #2b1d3a; color: #c8a7f6; font-size: 11px; font-weight: 700; cursor: pointer; }
.discovery-card { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 12px; padding: 17px; }
.step-number { width: 32px; height: 32px; display: grid; place-items: center; flex: 0 0 auto; border-radius: 11px; background: #a77bf7; color: #170c23; font-weight: 850; }
.discovery-card > .grow > small, .form-step-title small { display: block; margin-top: 3px; color: var(--muted); font-size: 10px; }
.discovery-progress, .discovery-result, .discovered-bridges { grid-column: 1 / -1; }
.discovery-progress, .discovery-result { display: flex; align-items: center; gap: 11px; padding: 12px; border-radius: 13px; background: #ffffff08; }
.discovery-result { justify-content: space-between; }
.discovery-result small, .discovery-progress small { display: block; margin-top: 3px; color: var(--muted); font-size: 10px; }
.discovery-result.error { border: 1px solid #754357; }
.discovery-spinner { width: 24px; height: 24px; border: 2px solid #6a4a8d; border-top-color: #c09aff; border-radius: 50%; animation: spin .8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.discovered-bridges { display: grid; gap: 8px; }
.discovered-bridge { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 10px; width: 100%; padding: 11px; border: 1px solid #4c3b60; border-radius: 13px; background: #17111f; color: var(--ink); text-align: left; cursor: pointer; }
.discovered-bridge.selected { border-color: #54d6b0; background: #17332f; }
.discovered-bridge > span:first-child { width: 28px; height: 28px; display: grid; place-items: center; border-radius: 9px; background: #54d6b0; color: #10241f; }
.discovered-bridge small { display: block; margin-top: 2px; color: var(--muted); font-size: 10px; }
.form-step-title { display: flex; align-items: center; gap: 11px; }
.advanced-address small { color: #998ca8; font-size: 9px; font-weight: 500; }
.advanced-options { padding: 0; border: 0; color: var(--muted); }
.advanced-options summary { width: fit-content; color: #ad91d4; font-size: 10px; cursor: pointer; }
.advanced-options[open] { display: grid; gap: 10px; padding: 11px; border: 1px solid #4c3b60; border-radius: 13px; background: #15101d; }
.back-link { margin-bottom: 4px; border: 0; background: none; color: #b394f7; cursor: pointer; }
.plans-intro h3 { margin-bottom: 8px; font-size: 22px; }
.plans { display: grid; gap: 14px; }
.plan { padding: 24px; }
.plan.featured { border-color: #8f63ef; background: linear-gradient(145deg, #2b1c41, #1c1527); box-shadow: 0 18px 40px #6c35c52b; }
.plan-icon { display: inline-grid; width: 42px; height: 42px; place-items: center; border-radius: 13px; background: #38284e; color: #c8aaff; font-size: 25px; }
.plan-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.no-box-badge { padding: 6px 9px; border: 1px solid #5d4775; border-radius: 99px; background: #21172d; color: #ccb6e8; font-size: 10px; }
.plan h3 { margin: 17px 0 4px; font-size: 22px; }
.plan h4 { margin: 18px 0 4px; font-size: 12px; text-transform: uppercase; letter-spacing: .08em; color: #bba8d3; }
.plan-audience { margin: 7px 0; color: #efe8fa; font-size: 14px; font-weight: 650; line-height: 1.45; }
.plan-example { margin: 16px 0; padding: 11px; border-left: 2px solid #8f63ef; border-radius: 0 10px 10px 0; background: #ffffff08; color: #cfc5dc; font-size: 12px; line-height: 1.5; }
.box-highlight { margin: 18px 0 4px; padding: 14px; border: 1px solid #7954aa; border-radius: 16px; background: linear-gradient(145deg, #36214f, #24172f); }
.box-highlight-title { display: flex; align-items: center; gap: 9px; color: #e8dcfb; }
.box-highlight-title span { width: 29px; height: 29px; display: grid; place-items: center; border-radius: 9px; background: #a477f0; color: #160c22; }
.box-highlight ul { margin-block: 10px 6px; }
.box-highlight > small { color: #aa9ab9; font-size: 10px; }
.price { margin: 20px 0 12px; font-size: 28px; font-weight: 850; }
.price small { color: var(--muted); font-size: 11px; font-weight: 500; }
.plan ul { padding-left: 19px; color: #d8d0e5; line-height: 1.8; }
.continue-free { width: 100%; margin-top: 14px; border: 1px solid var(--line); border-radius: 14px; padding: 13px; background: transparent; color: #c5bdd1; cursor: pointer; }
.add-button { width: 100%; margin-top: 14px; border: 1px dashed #785aa4; border-radius: 17px; padding: 15px; background: #241833; color: #c8a8ff; font-weight: 700; cursor: pointer; }
.add-button:hover { background: #2e1e41; }
.creation-form { display: grid; gap: 18px; margin-top: 12px; padding: 24px; }
.creation-form h3 { margin: 0; font-size: 23px; }
.creation-form p { margin: -10px 0 0; }
.creation-form label { display: grid; gap: 8px; color: #d9d1e5; font-size: 13px; font-weight: 650; }
.creation-form input[type="text"], .creation-form input:not([type]), .creation-form select { width: 100%; min-width: 0; border: 1px solid #4b3b60; border-radius: 13px; padding: 13px; color: var(--ink); background: #110e18; }
.creation-form fieldset { margin: 0; padding: 0; border: 0; }
.creation-form legend { margin-bottom: 9px; color: #d9d1e5; font-size: 13px; font-weight: 650; }
.hub-device-setup { border-color: #9e72f455; background: linear-gradient(145deg, #21162f, #15101e); box-shadow: 0 18px 45px #09050f55; }
.form-actions { display: grid; grid-template-columns: 1fr 1.4fr; gap: 10px; }
.form-actions button { min-height: 48px; }
.icon-picker { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.icon-picker label { position: relative; }
.icon-picker input { position: absolute; opacity: 0; pointer-events: none; }
.icon-picker span { display: grid; place-items: center; min-height: 48px; border: 1px solid #443653; border-radius: 13px; background: #191321; font-size: 22px; cursor: pointer; }
.icon-picker input:checked + span { border-color: #a77bf7; background: #3b235c; box-shadow: inset 0 0 0 1px #a77bf7; }
.connection-picker { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; }
.connection-option { position: relative; grid-template-columns: auto 1fr !important; align-items: center; gap: 10px !important; min-height: 74px; padding: 11px; border: 1px solid #443653; border-radius: 15px; background: #191321; cursor: pointer; }
.connection-option input { position: absolute; opacity: 0; pointer-events: none; }
.connection-option:has(input:checked) { border-color: #a77bf7; background: #35204f; box-shadow: inset 0 0 0 1px #a77bf7; }
.connection-option.unavailable { opacity: .48; cursor: not-allowed; }
.connection-option.unavailable input { cursor: not-allowed; }
.connection-icon { width: 36px; height: 36px; display: grid; place-items: center; border-radius: 11px; background: #4a3265; color: #dcc9ff; font-size: 19px; }
.connection-option strong { display: block; font-size: 13px; }
.connection-option small { display: block; margin-top: 3px; color: var(--muted); font-size: 10px; font-weight: 500; line-height: 1.25; }
.pairing-tip { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 11px; padding: 13px; border: 1px solid #8058b947; border-radius: 15px; background: #2a193d; }
.pairing-tip > span { width: 32px; height: 32px; display: grid; place-items: center; border-radius: 10px; background: #a579ef; color: #160d21; }
.pairing-tip p { margin: 0; color: #d8cce7; font-size: 11px; line-height: 1.45; }
.form-divider { height: 1px; background: #ffffff10; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.pairing-submit { display: flex; align-items: center; justify-content: center; gap: 8px; }
.pairing-submit span { font-size: 18px; }
.steps { display: flex; gap: 8px; color: #7f758e; font-size: 11px; }
.steps strong { color: #bf9bff; }
.form-error { color: #ff9aae; }
.profile-card { padding: 22px 0 8px; text-align: center; }
.profile-avatar { width: 68px; height: 68px; display: grid; place-items: center; margin: auto; border-radius: 23px; background: linear-gradient(145deg, #b98cff, #6730cf); font-size: 26px; font-weight: 850; box-shadow: 0 14px 34px #6730cf55; }
.avatar img, .profile-avatar img { width: 100%; height: 100%; display: block; object-fit: cover; border-radius: inherit; }
.profile-card h3 { margin: 14px 0 0; font-size: 22px; }
.profile-card p { margin-top: 5px; }
.notice { margin: 0 34px 8px; padding: 10px 13px; border: 1px solid #674f8e; border-radius: 13px; background: #2b1e3d; font-size: 13px; }
.notice.error { border-color: #853e55; background: #351a25; }
.empty { padding: 30px; text-align: center; color: var(--muted); }

@media (max-width: 800px) {
  .app-shell { display: block; padding: 0; }
  .brand-panel { display: none; }
  .phone { width: 100%; height: 100vh; height: 100dvh; min-height: 600px; border: 0; border-radius: 0; box-shadow: none; }
  .topbar { padding: max(24px, calc(env(safe-area-inset-top) + 12px)) max(20px, env(safe-area-inset-right)) 15px max(20px, env(safe-area-inset-left)); }
  .view { padding: 7px 20px 105px; }
  .notice { margin-inline: 20px; }
}

@media (max-width: 430px) {
  .grid { grid-template-columns: 1fr; }
  .hero { padding: 24px 20px; }
  .hero h3 { max-width: 280px; padding-right: 24px; font-size: clamp(22px, 7vw, 26px); }
  .support-form { grid-template-columns: 1fr; }
  .connection-picker { grid-template-columns: 1fr; }
  .driver-item { grid-template-columns: auto 1fr; }
  .driver-status { grid-column: 2; justify-self: start; }
}

/* Nox Home — direction artistique 2026 */
:root {
  --ink: #fbf9ff;
  --muted: #aaa5ba;
  --surface: #15111d;
  --surface-2: #1c1727;
  --line: #ffffff12;
  --violet: #a47aff;
  --violet-2: #6b35d2;
  --green: #70e1ae;
  --red: #ff8297;
}

html { background: #09070e; }
body {
  background:
    radial-gradient(circle at 74% 10%, #50218a2e 0, transparent 32%),
    radial-gradient(circle at 5% 82%, #2e165d33 0, transparent 35%),
    #09070e;
  -webkit-font-smoothing: antialiased;
}
.ambient { position: fixed; z-index: -1; width: 420px; height: 420px; border-radius: 50%; filter: blur(90px); opacity: .22; pointer-events: none; }
.ambient-one { top: -160px; right: 8%; background: #8f4dff; }
.ambient-two { bottom: -230px; left: 4%; background: #5525b4; }
button { -webkit-tap-highlight-color: transparent; }
button, .card, .quick-action, .room-preview, .routine-card { transition: transform .2s ease, border-color .2s ease, background .2s ease, opacity .2s ease; }
button:active { transform: scale(.975); }
button:focus-visible, input:focus-visible, select:focus-visible { outline: 2px solid #b894ff; outline-offset: 3px; }

.app-shell { grid-template-columns: minmax(290px, 420px) minmax(390px, 700px); }
.brand-mark { background: #0d0a16; box-shadow: 0 18px 60px #6f42d966; }
.brand-panel h1 { letter-spacing: -.07em; }
.phone {
  background: linear-gradient(180deg, #0f0c16 0%, #120e1a 100%);
  border-color: #ffffff17;
  box-shadow: 0 40px 120px #000c, inset 0 0 0 1px #ffffff0b;
}
.topbar { padding: 34px 34px 17px; }
.topbar-title { display: grid; gap: 2px; }
.eyebrow { color: #9d96ad; font-size: 12px; font-weight: 650; letter-spacing: .02em; }
.eyebrow span { color: #b88cff; }
.topbar h2 { margin: 0; font-size: 29px; font-weight: 760; letter-spacing: -.05em; }
.avatar {
  position: relative;
  width: 48px;
  height: 48px;
  border: 1px solid #ffffff2b;
  border-radius: 17px;
  background: linear-gradient(145deg, #a977ff, #6530ce);
  box-shadow: 0 12px 34px #6832d844, inset 0 1px #ffffff50;
}
.avatar::after { content: ""; position: absolute; right: -2px; bottom: -2px; width: 11px; height: 11px; border: 3px solid #100c18; border-radius: 50%; background: var(--green); }
.avatar span { font-size: 17px; }
.view { padding: 8px 34px 118px; scroll-behavior: smooth; }

.bottom-nav {
  min-height: 88px;
  padding-top: 11px;
  border-top-color: #ffffff12;
  background: #120f19e8;
  box-shadow: 0 -18px 50px #08050eaa;
}
.bottom-nav button { gap: 5px; min-width: 0; min-height: 52px; border-radius: 15px; color: #7f798d; font-size: 10px; font-weight: 650; }
.bottom-nav button span { width: 25px; height: 25px; display: grid; place-items: center; font-size: inherit; }
.bottom-nav svg { width: 23px; height: 23px; fill: none; stroke: currentColor; stroke-width: 1.65; stroke-linecap: round; stroke-linejoin: round; }
.bottom-nav button.active { color: #b58dff; }
.bottom-nav button.active span { filter: drop-shadow(0 5px 10px #8c54f777); }

.section-head { margin: 28px 0 12px; }
.section-head h3 { font-size: 17px; letter-spacing: -.025em; }
.section-head button { min-height: 40px; padding: 8px 0 8px 12px; color: #b78fff; font-size: 13px; font-weight: 650; }
.section-head button span { font-size: 20px; vertical-align: -1px; }
.count-badge { min-width: 29px; height: 29px; display: grid; place-items: center; border: 1px solid #ffffff14; border-radius: 99px; background: #ffffff09; color: #b9b3c6; font-size: 12px; }
.page-lead { max-width: 430px; margin: 3px 0 9px; color: #928b9f; font-size: 13px; line-height: 1.55; }

.hero {
  min-height: 248px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 27px;
  border: 1px solid #c8a7ff30;
  border-radius: 29px;
  background:
    radial-gradient(circle at 85% 10%, #d0b1ff52 0, transparent 30%),
    linear-gradient(145deg, #281641 0%, #6c32c9 55%, #321951 100%);
  box-shadow: 0 24px 65px #3c176b4f, inset 0 1px #ffffff27;
  isolation: isolate;
}
.hero::after { content: "✦"; right: 24px; top: 21px; color: #f2e9ff; font-size: 28px; opacity: .9; }
.hero-glow { position: absolute; z-index: -1; top: -110px; right: -90px; width: 260px; height: 260px; border-radius: 50%; background: #c49dff2e; filter: blur(4px); }
.hero-glow { animation: hero-breathe 5s ease-in-out infinite alternate; }
@keyframes hero-breathe { to { transform: translate(-24px, 28px) scale(1.14); opacity: .72; } }
.hero-orbit { position: absolute; top: 22px; right: 22px; width: 76px; height: 76px; border: 1px solid #ffffff20; border-radius: 50%; animation: orbit-spin 13s linear infinite; }
.hero-orbit i { position: absolute; width: 6px; height: 6px; border-radius: 50%; background: #e7d6ff; box-shadow: 0 0 14px #fff; }
.hero-orbit i:nth-child(1) { left: 7px; top: 15px; }
.hero-orbit i:nth-child(2) { right: 5px; top: 32px; }
.hero-orbit i:nth-child(3) { left: 28px; bottom: -3px; background: #7df0bd; }
@keyframes orbit-spin { to { transform: rotate(360deg); } }
.hero-copy { position: relative; z-index: 1; }
.hero-status { display: inline-flex; align-items: center; gap: 7px; color: #e4d6f8; font-size: 11px; font-weight: 700; letter-spacing: .03em; text-transform: uppercase; }
.hero-status i { width: 7px; height: 7px; border-radius: 50%; background: #d8c9e9; box-shadow: 0 0 0 4px #ffffff0f; }
.hero-status i.online { background: #8ff2c6; box-shadow: 0 0 0 4px #7aefbb20, 0 0 14px #7aefbb99; }
.hero h3 { max-width: 430px; margin: 20px 0 7px; padding-right: 38px; font-size: clamp(30px, 5vw, 42px); line-height: .98; letter-spacing: -.06em; }
.hero p { margin: 0; color: #e1d4f1c9; font-size: 13px; }
.home-stats { position: relative; z-index: 1; display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; margin-top: 28px; padding: 11px 5px; border: 1px solid #ffffff1c; border-radius: 17px; background: #150b244a; backdrop-filter: blur(12px); }
.home-stats span { display: grid; gap: 2px; padding: 0 9px; color: #d3c6e2; font-size: 9px; text-align: center; }
.home-stats span + span { border-left: 1px solid #ffffff1a; }
.home-stats b { color: #fff; font-size: 15px; font-weight: 760; }
.hero-activity { position: relative; z-index: 1; display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 10px; margin-top: 9px; padding: 9px 11px; border: 1px solid #ffffff18; border-radius: 14px; background: #0e071c45; }
.hero-activity > span:nth-child(2) { min-width: 0; display: grid; gap: 1px; }
.hero-activity small { color: #c8b8dc; font-size: 7px; letter-spacing: .08em; }
.hero-activity strong { overflow: hidden; font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
.hero-activity time { color: #e7dff0; font-size: 10px; }
.activity-wave { height: 22px; display: flex; align-items: center; gap: 2px; }
.activity-wave i { width: 3px; height: 7px; border-radius: 5px; background: #8cf0c4; animation: wave 1.2s ease-in-out infinite alternate; }
.activity-wave i:nth-child(2) { height: 17px; animation-delay: -.8s; }
.activity-wave i:nth-child(3) { height: 12px; animation-delay: -.4s; }
.activity-wave i:nth-child(4) { height: 19px; animation-delay: -.2s; }
@keyframes wave { to { transform: scaleY(.4); opacity: .55; } }
.home-live { display: flex; gap: 7px; margin: 10px 1px 0; overflow-x: auto; scrollbar-width: none; }
.home-live span { display: inline-flex; align-items: center; gap: 6px; flex: 0 0 auto; padding: 7px 10px; border: 1px solid #73549b55; border-radius: 99px; background: #1e1529; color: #cfc3da; font-size: 9px; }
.home-live i { width: 6px; height: 6px; border-radius: 50%; background: #72e0af; box-shadow: 0 0 9px #72e0af; animation: live-pulse 1.7s ease-in-out infinite; }
@keyframes live-pulse { 50% { opacity: .35; transform: scale(.72); } }

.quick-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(112px, 1fr)); gap: 10px; }
.quick-action { min-width: 0; min-height: 104px; display: grid; justify-items: start; align-content: space-between; gap: 3px; padding: 14px; border: 1px solid #ffffff12; border-radius: 20px; background: linear-gradient(145deg, #1c1726, #15111d); text-align: left; box-shadow: 0 12px 26px #04020733; cursor: pointer; }
.quick-action:hover { border-color: #8e66d166; }
.quick-action > span { width: 33px; height: 33px; display: grid; place-items: center; border-radius: 11px; background: #332641; color: #c9a9ff; font-size: 18px; }
.quick-action strong { align-self: end; margin-top: 8px; overflow: hidden; font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.quick-action small { color: #8f899b; font-size: 9px; }
.quick-action.primary-action { border-color: #ae86ff33; background: linear-gradient(145deg, #442471, #2a1942); }
.quick-action.primary-action > span { background: #ad84fb; color: #1a0f27; box-shadow: 0 8px 18px #8d54ed44; }

.room-strip { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.home-room-grid { grid-template-columns: repeat(auto-fit, minmax(112px, 1fr)); }
.room-preview { min-width: 0; display: grid; justify-items: start; gap: 4px; padding: 14px; border: 1px solid #ffffff10; border-radius: 20px; background: linear-gradient(145deg, #1d1828, #16121e); text-align: left; cursor: pointer; }
.room-preview > span { width: 39px; height: 39px; display: grid; place-items: center; margin-bottom: 9px; border-radius: 14px; background: linear-gradient(145deg, #57426c, #342641); font-size: 20px; }
.room-preview strong { max-width: 100%; overflow: hidden; font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.room-preview small { color: #8c8598; font-size: 9px; }

.card { border-color: #ffffff11; background: linear-gradient(145deg, #1d1827, #15121d); box-shadow: 0 15px 34px #03020531, inset 0 1px #ffffff05; }
button.card:hover { border-color: #8f6ac45c; }
.device-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.device { min-height: 154px; padding: 16px; border-radius: 21px; }
.device .card-icon { width: 40px; height: 40px; margin-bottom: 18px; border-radius: 13px; font-size: 19px; }
.device strong { padding-right: 36px; overflow: hidden; font-size: 13px; text-overflow: ellipsis; white-space: nowrap; }
.device small { display: flex; align-items: center; gap: 6px; font-size: 9px; }
.device-dot { width: 6px; height: 6px; flex: 0 0 auto; border-radius: 50%; background: #70697a; }
.device.is-online .device-dot { background: var(--green); box-shadow: 0 0 8px #70e1ae88; }
.device .toggle { top: 16px; right: 16px; width: 38px; height: 22px; }
.device .toggle::after { width: 16px; height: 16px; }
.device .toggle.on::after { transform: translateX(16px); }
.range-row { margin-top: 16px; }
.range-row label { font-size: 9px; }
.range-row input { height: 19px; }

.empty-state { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 14px; padding: 18px; border: 1px solid #9b78d42d; border-radius: 22px; background: linear-gradient(135deg, #21162f, #17121f); }
.empty-state.compact { grid-template-columns: auto 1fr; }
.empty-orb { width: 45px; height: 45px; display: grid; place-items: center; border-radius: 15px; background: #3c2856; color: #c8a6ff; font-size: 22px; }
.empty-state strong { font-size: 13px; }
.empty-state p { margin: 4px 0 0; color: #9991a6; font-size: 10px; line-height: 1.45; }
.empty-state .primary { white-space: nowrap; }

.routine-strip { display: grid; gap: 9px; }
.routine-card { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 13px; padding: 13px 15px; border: 1px solid #ffffff10; border-radius: 18px; background: #19141f; text-align: left; cursor: pointer; }
.routine-card > span { width: 37px; height: 37px; display: grid; place-items: center; border-radius: 13px; background: #30243d; font-size: 19px; }
.routine-card strong { display: block; font-size: 12px; }
.routine-card small { display: block; margin-top: 3px; overflow: hidden; color: #8e8799; font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }
.routine-card i { color: #a87ff2; font-size: 20px; font-style: normal; }

.list { gap: 9px; }
.list-card { min-height: 76px; padding: 13px 15px; border-radius: 20px; }
.list-card .card-icon { width: 46px; height: 46px; border-radius: 15px; }
.room-list-card .card-icon { font-size: 21px; }
.list-card .arrow { color: #8b67c8; }
.filter-strip { display: flex; gap: 8px; margin: 2px -34px 4px; padding: 0 34px 7px; overflow-x: auto; scrollbar-width: none; }
.filter-strip::-webkit-scrollbar { display: none; }
.filter-chip { min-height: 38px; flex: 0 0 auto; padding: 8px 13px; border: 1px solid #ffffff12; border-radius: 99px; background: #18131f; color: #9f98aa; font-size: 11px; cursor: pointer; }
.filter-chip.active { border-color: #a37be055; background: #3b2458; color: #f2eaff; }

.scenario { min-height: 78px; padding: 13px; border-radius: 20px; }
.scenario-tile { width: 100%; grid-template-columns: auto 1fr auto; color: var(--ink); text-align: left; cursor: pointer; }
.scenario-tile .arrow { color: #a67eea; font-size: 24px; }
.routine-sheet { gap: 14px; }
.routine-sheet-head { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 12px; }
.routine-sheet-head .card-icon { margin: 0; }
.routine-sheet-head h3 { margin: 0 0 3px; }
.routine-sheet-head small { color: var(--muted); }
.routine-detail-list { display: grid; gap: 9px; }
.routine-detail-step { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 11px; padding: 12px; border: 1px solid #4c3b5d; border-radius: 15px; background: #120d18; }
.routine-detail-step > span { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 11px; background: #7044ad; color: white; font-weight: 800; }
.routine-detail-step small { display: block; margin-top: 3px; color: var(--muted); font-size: 10px; }
.routine-detail-step .secondary { min-width: 86px; background: #573487; color: #fff; }
.routine-detail-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; }
.routine-detail-actions button { min-height: 46px; }
.scenario .card-icon { width: 44px; height: 44px; margin: 0; border-radius: 15px; }
.scenario small { font-size: 10px; }
.run { min-height: 42px; display: flex; align-items: center; gap: 6px; border-color: #9c73dc4f; border-radius: 13px; background: #38234f; color: #d7c1f8; font-size: 11px; font-weight: 700; }
.run span { font-size: 8px; }

.primary { min-height: 44px; border-radius: 14px; background: linear-gradient(135deg, #ad81fb, #7138d5); box-shadow: 0 10px 22px #6731c933; }
.add-button { min-height: 54px; display: flex; align-items: center; justify-content: center; gap: 8px; margin-top: 13px; border: 1px solid #8b68bd46; border-radius: 18px; background: #21162e; color: #cfb1ff; }
.add-button span { font-size: 18px; }
.back-link { min-height: 42px; margin-left: -8px; padding: 8px; }
.creation-form { gap: 19px; padding: 21px; border-radius: 24px; }
.creation-form input[type="text"], .creation-form input:not([type]), .creation-form select { min-height: 49px; border-color: #ffffff16; border-radius: 14px; background: #0f0c15; }
.icon-picker span { min-height: 51px; border-color: #ffffff13; background: #14101a; }
.icon-picker input:checked + span { border-color: #b48afd; background: #392154; box-shadow: inset 0 0 0 1px #b48afd, 0 8px 18px #6a36bf2f; }
.connection-option { border-color: #ffffff13; background: #14101a; }
.connection-option:has(input:checked) { border-color: #a77bf7; background: #302044; }
.notice { z-index: 4; border-color: #9871d254; background: #2b1e3df2; box-shadow: 0 14px 34px #0008; backdrop-filter: blur(18px); }

.hub-primary-action { width: 100%; min-height: 52px; margin: -8px 0 20px; font-size: 14px; }
.hub-primary-action span { margin-right: 7px; }
.quick-hue-connect { display: grid; gap: 7px; margin: -8px 0 20px; padding: 15px; border: 1px solid #69d9b2; border-radius: 17px; background: #17342e; }
.quick-hue-connect p { margin: 0; color: #b8ded1; font-size: 11px; line-height: 1.45; }
.quick-hue-connect .hub-primary-action { margin: 3px 0 0; }
.capability-help { display: grid; gap: 7px; margin-top: 13px; padding: 10px; border: 1px solid #73539a55; border-radius: 12px; background: #281b36; color: #bdaaca; font-size: 10px; line-height: 1.35; }
.capability-help button { border: 0; border-radius: 9px; padding: 8px; background: #7850bd; color: white; font-size: 10px; font-weight: 750; cursor: pointer; }
.long-press-hint { margin: 5px 0 13px; color: #90879b; font-size: 10px; text-align: center; }
.selection-bar { position: sticky; z-index: 8; top: 0; display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 9px; margin: 0 0 14px; padding: 10px; border: 1px solid #9b71d5; border-radius: 15px; background: #21172df2; box-shadow: 0 12px 30px #05020888; backdrop-filter: blur(14px); }
.selection-bar strong { font-size: 11px; text-align: center; }
.selection-bar button { padding: 8px 10px; font-size: 10px; }
.device.is-selected, .room-list-card.is-selected { border-color: #b58bff; background: linear-gradient(145deg, #3b2753, #21172e); box-shadow: 0 0 0 2px #9a6be633, 0 15px 34px #03020555; }
.selection-check { width: 25px; height: 25px; display: grid; place-items: center; border: 1px solid #a984ef; border-radius: 50%; background: #241833; color: #fff; font-size: 13px; }
.device > .selection-check { position: absolute; z-index: 3; top: 15px; right: 15px; }
.room-list-card > .selection-check { flex: 0 0 auto; }
.hub-shortcuts { display: grid; gap: 9px; margin: 8px 0 18px; }
.hub-shortcuts h3 { margin: 0; font-size: 20px; }
.hub-shortcuts > p { margin: -3px 0 5px; color: var(--muted); font-size: 11px; line-height: 1.45; }
.hub-shortcuts button { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 11px; width: 100%; padding: 14px; border: 1px solid #7350a2; border-radius: 17px; background: linear-gradient(145deg, #34204c, #20152e); color: var(--ink); text-align: left; cursor: pointer; }
.hub-shortcuts button > span { grid-row: 1 / 3; width: 40px; height: 40px; display: grid; place-items: center; border-radius: 13px; background: #9a6cea; color: #1a0d28; font-size: 20px; }
.hub-shortcuts button strong { font-size: 12px; }
.hub-shortcuts button small { color: #ac9cba; font-size: 9px; }
.hub-shortcuts button i { grid-column: 3; grid-row: 1 / 3; color: #c09cff; font-size: 22px; font-style: normal; }
.device-shortcuts { display: flex; align-items: center; gap: 6px; margin-top: 13px; overflow-x: auto; padding-bottom: 2px; }
.device-shortcuts button { min-height: 31px; flex: 0 0 auto; border: 1px solid #604878; border-radius: 10px; padding: 6px 8px; background: #251a31; color: #ded0eb; font-size: 9px; font-weight: 700; cursor: pointer; }
.device-shortcuts > span { flex: 1; color: #eee5f5; font-size: 12px; text-align: center; white-space: nowrap; }
.device-shortcuts i { width: 12px; height: 12px; display: inline-block; margin-right: 4px; border: 1px solid #fff8; border-radius: 50%; vertical-align: -2px; }
.device-details { margin-top: 10px; padding-top: 2px; border-top: 1px solid #ffffff0d; }
.modal-backdrop { position: fixed; z-index: 50; inset: 0; display: flex; align-items: flex-end; justify-content: center; padding: 18px; background: #050308aa; backdrop-filter: blur(7px); }
.color-sheet { width: min(100%, 430px); display: grid; gap: 15px; padding: 18px; border: 1px solid #8062a5; border-radius: 25px; background: #21172d; box-shadow: 0 25px 80px #000c; }
.color-sheet h3, .color-sheet p { margin: 0; }
.color-sheet p { color: var(--muted); font-size: 11px; line-height: 1.45; }
.sheet-handle { width: 42px; height: 4px; justify-self: center; border-radius: 99px; background: #756982; }
.color-sheet input[type="color"] { width: 100%; height: 90px; padding: 5px; border: 1px solid #ffffff24; border-radius: 18px; background: #120d18; }
.color-favorites { display: grid; grid-template-columns: repeat(7, 1fr); gap: 8px; }
.color-favorites button { aspect-ratio: 1; border: 2px solid #fff7; border-radius: 50%; cursor: pointer; }

:root[data-theme="light"] { --bg: #f5f1fa; --panel: #fff; --ink: #251b30; --muted: #706778; --line: #ded4e8; }
:root[data-theme="light"] body { background: #eee8f4; color: var(--ink); }
:root[data-theme="light"] .phone { background: linear-gradient(180deg, #fff, #f7f2fb); border-color: #d8cce4; box-shadow: 0 30px 80px #39204b22; }
:root[data-theme="light"] .card, :root[data-theme="light"] .quick-action, :root[data-theme="light"] .room-preview { background: #fff; border-color: #e1d7e9; box-shadow: 0 12px 28px #4b2b5c12; }
:root[data-theme="light"] .bottom-nav { background: #fffef5; border-color: #ded4e8; }
:root[data-theme="light"] .device-shortcuts button, :root[data-theme="light"] .color-sheet { background: #f5ecfb; color: #352142; }
.theme-choice { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.theme-choice > div { display: flex; gap: 6px; }
.theme-choice button { border: 1px solid #695080; border-radius: 10px; padding: 8px; background: transparent; color: var(--ink); cursor: pointer; }
.theme-choice button.active { border-color: #aa80f1; background: #7048ad; color: white; }
.plans-compact .plan { display: grid; grid-template-columns: 1fr auto; gap: 8px 14px; align-items: end; padding: 18px; }
.plans-compact .plan-top, .plans-compact .plan h3, .plans-compact .plan-audience { grid-column: 1 / -1; }
.plans-compact .plan h3 { margin-top: 8px; font-size: 18px; }
.plans-compact .price { margin: 4px 0; font-size: 22px; }
.plans-compact .secondary { min-height: 40px; }
.plan-details > .primary { width: 100%; }
.checkout-step { display: inline-flex; width: fit-content; padding: 6px 9px; border-radius: 99px; background: #3a2851; color: #d3b8ff; font-size: 10px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
.checkout-summary { display: flex; align-items: center; gap: 12px; padding: 14px; border: 1px solid #674c82; border-radius: 16px; background: #271b33; }
.checkout-summary > span { width: 42px; height: 42px; display: grid; place-items: center; border-radius: 13px; background: #8e64d6; font-size: 22px; }
.checkout-summary small { display: block; margin-top: 3px; color: var(--muted); }
.payment-methods { display: grid; gap: 8px; }
.payment-methods label { display: flex; grid-template-columns: auto 1fr; align-items: center; gap: 10px; min-height: 48px; padding: 12px; border: 1px solid #57436d; border-radius: 13px; background: #17111f; cursor: pointer; }
.payment-methods input, .legal-check input { accent-color: #9a70e8; }
.promo-row { display: grid; grid-template-columns: 1fr auto; gap: 8px; }
.promo-status { margin: -9px 0 0 !important; color: var(--muted); font-size: 10px; line-height: 1.45; }
.promo-status.valid { color: #75deb8; }
.optional { color: var(--muted); font-size: 10px; font-weight: 500; }
.legal-check { display: flex !important; grid-template-columns: auto 1fr !important; align-items: start; gap: 9px !important; font-size: 11px !important; line-height: 1.4; }
.legal-check input { margin-top: 2px; }
.checkout-pay { width: 100%; }
.secure-note { text-align: center; }
.subscription-active { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 14px; }
.subscription-active > span { width: 48px; height: 48px; display: grid; place-items: center; border-radius: 16px; background: #214638; color: #7be0b8; font-size: 23px; }
.subscription-active h3, .subscription-active p { margin: 4px 0; }
.subscription-active .secondary { grid-column: 1 / -1; }
.account-mode-switch { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 0 0 14px; padding: 6px; border: 1px solid #4a355f; border-radius: 16px; background: #17111f; }
.account-mode-switch button { min-height: 42px; border: 0; border-radius: 11px; background: transparent; color: #bcaecb; font-weight: 750; }
.account-mode-switch button.active { background: #7543bd; color: #fff; }
.plan-switcher .plan.is-current { border-color: #54bd93; background: linear-gradient(145deg, #19352c, #13251f); }
.plan-choice-button { border: 1px solid #a47be7 !important; background: linear-gradient(135deg, #7c4fc6, #5e329e) !important; color: #fff !important; box-shadow: 0 9px 22px #5e329e38 !important; }
.plan-choice-button:disabled { border-color: #4d8e73 !important; background: #214636 !important; color: #9fe5c7 !important; }
.shop-shortcut { width: 100%; display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 12px; margin: 14px 0; padding: 14px; border: 1px solid #a77cf0; border-radius: 18px; background: linear-gradient(135deg, #48246e, #28173b); color: #fff; text-align: left; cursor: pointer; }
.shop-shortcut > span { width: 43px; height: 43px; display: grid; place-items: center; border-radius: 14px; background: #b58bff; color: #1c1028; font-size: 21px; }
.shop-shortcut small { display: block; margin-top: 3px; color: #cfbee5; }
.shop-shortcut i { font-size: 24px; font-style: normal; }
.logout-button { min-height: 46px; border: 1px solid #a44f65; border-radius: 14px; background: #321925; color: #ffbdc9; cursor: pointer; }
.shop-hero { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 16px; padding: 21px; border: 1px solid #a27be1; border-radius: 23px; background: linear-gradient(135deg, #512978, #261839); }
.shop-hero > span { width: 62px; height: 62px; display: grid; place-items: center; border-radius: 20px; background: #b58aff; color: #21102f; font-size: 30px; }
.shop-hero small { color: #d6baff; font-weight: 800; letter-spacing: .1em; }
.shop-hero h3 { margin: 4px 0; font-size: 24px; }
.shop-hero p { margin: 0; color: #d8cce7; font-size: 11px; line-height: 1.45; }
.shop-grid { display: grid; gap: 11px; margin-top: 14px; }
.shop-product { display: grid; grid-template-columns: auto 1fr; gap: 13px; }
.shop-product > span { width: 48px; height: 48px; display: grid; place-items: center; border-radius: 15px; background: #3e2a52; color: #c6a3ff; font-size: 23px; }
.shop-product h3 { margin: 2px 0 4px; }
.shop-product p { margin: 0 0 8px; color: var(--muted); font-size: 11px; line-height: 1.45; }
.shop-product button { grid-column: 1 / -1; }
.shop-note { color: var(--muted); font-size: 10px; line-height: 1.5; text-align: center; }
.routine-devices { display: grid; gap: 8px; }
.routine-devices label { display: grid; grid-template-columns: auto 1fr minmax(92px, auto); align-items: center; gap: 9px; padding: 10px; border: 1px solid #4b3a5d; border-radius: 13px; background: #16101e; }
.routine-devices select { min-height: 38px !important; padding: 7px !important; }
.bottom-nav:has(#plusTab[hidden]) { grid-template-columns: repeat(4, 1fr); }
.device-compact { min-height: 132px; display: grid; grid-template-columns: auto 1fr auto; grid-template-rows: auto auto; align-items: center; gap: 5px 12px; cursor: pointer; }
.device-compact .device-icon-button { grid-row: 1 / 3; width: 48px; height: 48px; display: grid; place-items: center; margin: 0; border: 1px solid #6b527d; border-radius: 16px; background: #362743; color: inherit; font-size: 23px; cursor: pointer; }
.device-compact .device-icon-button.on { border-color: #b68aff; background: linear-gradient(145deg, #a977ff, #6530ce); box-shadow: 0 9px 24px #7138d555; }
.device-compact > strong { align-self: end; padding: 0; }
.device-compact > small { align-self: start; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.device-open-arrow { grid-column: 3; grid-row: 1 / 3; color: #a77ef2; font-size: 26px; }
.device-sheet { width: min(100%, 500px); max-height: min(760px, calc(100dvh - 28px)); overflow-y: auto; display: grid; gap: 18px; padding: 18px 20px 28px; border: 1px solid #8062a5; border-radius: 28px; background: #181120; box-shadow: 0 25px 80px #000c; }
.device-sheet-head { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 13px; }
.device-sheet-head h3 { margin: 0 0 4px; font-size: 22px; }
.device-sheet-head small { color: var(--muted); }
.device-main-icon { width: 54px; height: 54px; border: 1px solid #67517c; border-radius: 18px; background: #342641; font-size: 25px; cursor: pointer; }
.device-main-icon.on { border-color: #b58aff; background: linear-gradient(145deg, #aa79fb, #6932ca); box-shadow: 0 10px 26px #7138d555; }
.sheet-close { width: 38px; height: 38px; border: 0; border-radius: 50%; background: #2b2134; color: #cabbd5; font-size: 24px; cursor: pointer; }
.device-sheet-controls { display: grid; gap: 18px; }
.detail-range { padding: 15px; border: 1px solid #483756; border-radius: 16px; background: #120d18; }
.detail-range label { margin-bottom: 9px; color: #e8dfef; font-size: 13px; }
.detail-range input { height: 30px; }
.color-wheel-button { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 2px 14px; width: 100%; padding: 13px; border: 1px solid #604778; border-radius: 17px; background: #21162b; color: var(--ink); text-align: left; cursor: pointer; }
.color-wheel-button > span, .custom-color-wheel > span { position: relative; width: 58px; height: 58px; grid-row: 1 / 3; display: block; border: 4px solid transparent; border-radius: 50%; background: conic-gradient(#f22, #ff0, #0f8, #0cf, #44f, #d0f, #f22) border-box; box-shadow: 0 8px 22px #0005; }
.color-wheel-button > span::after, .custom-color-wheel > span::after { content: ""; position: absolute; inset: 8px; border: 3px solid #fff; border-radius: 50%; background: var(--selected-color); }
.color-wheel-button strong { align-self: end; }
.color-wheel-button small { align-self: start; }
.custom-color-wheel { position: relative; display: grid; justify-items: center; gap: 10px; cursor: pointer; }
.custom-color-wheel input { position: absolute; width: 1px !important; height: 1px !important; opacity: .01; }
.custom-color-wheel > span { width: 138px; height: 138px; }
.custom-color-wheel > span::after { inset: 19px; border-width: 5px; }
.hsv-wheel { position: relative; display: block; width: min(74vw, 290px); height: auto; aspect-ratio: 1; justify-self: center; border: 5px solid #ffffff24; border-radius: 50%; background: radial-gradient(circle, #fff 0%, #ffffffee 4%, transparent 72%), conic-gradient(from 0deg, #f00, #ff0, #00ff4c, #00e5ff, #0648ff, #c000ff, #ff0062, #f00); box-shadow: 0 22px 55px #0009, inset 0 0 24px #0003; cursor: crosshair; touch-action: none; }
.hsv-wheel::after { content: ""; position: absolute; inset: 0; border-radius: inherit; background: radial-gradient(circle, transparent 58%, #00000012 100%); pointer-events: none; }
.selected-color-line { display: flex; align-items: center; justify-content: center; gap: 10px; color: #d8cee2; font-size: 12px; letter-spacing: .05em; }
.selected-color-line svg { width: 24px; height: 24px; border: 3px solid white; border-radius: 50%; box-shadow: 0 3px 10px #0008; }
.preset-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.preset-row button, .temperature-stepper button { min-height: 44px; border: 1px solid #604878; border-radius: 13px; background: #281b35; cursor: pointer; }
.temperature-stepper { display: grid; grid-template-columns: 52px 1fr 52px; align-items: center; gap: 10px; }
.temperature-stepper strong { font-size: 25px; text-align: center; }
.capability-note { margin: 0; padding: 12px; border-radius: 13px; background: #251b2d; color: var(--muted); font-size: 11px; }
.plans-compact .plan > .secondary { border: 1px solid #a277ed; background: linear-gradient(135deg, #4a2b69, #2c1b3e); color: #f0e7ff; font-weight: 750; box-shadow: 0 8px 20px #190a2c55; }
.routine-locked { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 12px; }
.routine-locked > span, .paywall-orb { width: 44px; height: 44px; display: grid; place-items: center; border-radius: 14px; background: #6e42ad; }
.routine-locked button { grid-column: 1 / -1; min-height: 42px; border: 1px solid #7c5aa5; border-radius: 12px; background: #281a36; cursor: pointer; }
.paywall-card { display: grid; justify-items: center; gap: 13px; padding: 28px; text-align: center; }
.paywall-card h3, .paywall-card p { margin: 0; }
.paywall-card p { color: var(--muted); line-height: 1.5; }
.paywall-card .primary { width: 100%; }
.legal-link { display: inline; border: 0; padding: 0; background: none; color: #b88cff; text-decoration: underline; cursor: pointer; }
.legal-document { line-height: 1.55; }
.legal-document h3 { font-size: 24px; }
.legal-document h4 { margin: 22px 0 5px; }
.legal-document p { margin: 5px 0; color: #c9c0d3; font-size: 12px; }
.legal-warning { padding: 12px; border: 1px solid #8b6742; border-radius: 13px; background: #302317; }
:root[data-theme="light"] { color-scheme: light; }
:root[data-theme="light"] .plan-audience, :root[data-theme="light"] .plan ul, :root[data-theme="light"] .creation-form label, :root[data-theme="light"] .creation-form legend { color: #382d42; }
:root[data-theme="light"] .creation-form input, :root[data-theme="light"] .creation-form select, :root[data-theme="light"] .payment-methods label, :root[data-theme="light"] .routine-devices label { background: #fff; color: #251b30; border-color: #d7c9e2; }
:root[data-theme="light"] .checkout-summary { background: #f4ebfb; }
:root[data-theme="light"] .device-sheet, :root[data-theme="light"] .detail-range, :root[data-theme="light"] .color-wheel-button { background: #fff; color: #251b30; }
:root[data-theme="light"] { color-scheme: light; --ink: #24182d; --muted: #625869; }
:root[data-theme="light"] .bottom-nav button, :root[data-theme="light"] .page-lead, :root[data-theme="light"] .quick-action small, :root[data-theme="light"] .room-preview small, :root[data-theme="light"] .empty-state p, :root[data-theme="light"] .long-press-hint { color: #625869; }
:root[data-theme="light"] .integration-card, :root[data-theme="light"] .discovered-bridge, :root[data-theme="light"] .advanced-options[open], :root[data-theme="light"] .filter-chip, :root[data-theme="light"] .camera-choice, :root[data-theme="light"] .device-category-bar button, :root[data-theme="light"] .camera-results button, :root[data-theme="light"] .camera-option-shortcuts button, :root[data-theme="light"] .camera-settings-form, :root[data-theme="light"] .camera-access-form { border-color: #d9cce4; background: #fff; color: #24182d; }
:root[data-theme="light"] .integration-card.active, :root[data-theme="light"] .filter-chip.active, :root[data-theme="light"] .camera-choice.active, :root[data-theme="light"] .device-category-bar button.active { border-color: #8a5fc4; background: #eee1f8; color: #24182d; }
:root[data-theme="light"] .local-control-banner, :root[data-theme="light"] .integrations-hero, :root[data-theme="light"] .camera-intro, :root[data-theme="light"] .shop-hero { border-color: #c9b2dc; background: linear-gradient(145deg, #f2e7fa, #fff); color: #24182d; }
:root[data-theme="light"] .local-control-banner p, :root[data-theme="light"] .integrations-hero p, :root[data-theme="light"] .integrations-hero small, :root[data-theme="light"] .camera-intro small, :root[data-theme="light"] .shop-hero p, :root[data-theme="light"] .shop-hero small { color: #604d70; }
:root[data-theme="light"] .plan-audience, :root[data-theme="light"] .plan h4, :root[data-theme="light"] .plan-example, :root[data-theme="light"] .plan ul, :root[data-theme="light"] .creation-form label, :root[data-theme="light"] .creation-form legend, :root[data-theme="light"] .audit-item, :root[data-theme="light"] .pairing-tip p { color: #34243f; }
:root[data-theme="light"] .plan.featured, :root[data-theme="light"] .hub-device-setup { border-color: #cbb5df; background: linear-gradient(145deg, #f7f0fc, #fff); color: #24182d; }
:root[data-theme="light"] .secondary, :root[data-theme="light"] .light-presets button, :root[data-theme="light"] .effect-control button, :root[data-theme="light"] .device-shortcuts button { border-color: #b89dce; background: #f0e5f7; color: #342142; }
:root[data-theme="light"] .privacy-note, :root[data-theme="light"] .advanced-address small, :root[data-theme="light"] .integration-card em, :root[data-theme="light"] .hub-shortcuts button small { color: #66556e; }
:root[data-theme="light"] .camera-viewer { border-color: #cdbed8; background: #fff; }
:root[data-theme="light"] .camera-actions { border-color: #d9cce4; background: #d9cce4; }
:root[data-theme="light"] .camera-actions button { background: #fff; color: #34243f; }
.box-required { display: grid; grid-template-columns: auto 1fr; gap: 10px; margin: 16px 0; padding: 14px; border: 1px solid #aa7fee; border-radius: 16px; background: #271a36; }
.box-required > span { width: 38px; height: 38px; display: grid; place-items: center; border-radius: 12px; background: #9b6ee8; color: #190d25; }
.box-required p { margin: 4px 0; color: var(--muted); font-size: 11px; line-height: 1.45; }
.box-required form { grid-column: 1 / -1; display: grid; grid-template-columns: 1fr auto; gap: 8px; }
.box-required input { min-width: 0; padding: 11px; border: 1px solid #665078; border-radius: 12px; background: #130d19; color: var(--ink); }
.box-required > button { grid-column: 1 / -1; }
.box-ready { margin: 15px 0; padding: 12px; border: 1px solid #4aa87f; border-radius: 13px; background: #17382d; color: #99e5c5; font-weight: 750; }
.account-required { padding: 11px; border-radius: 12px; background: #1a263b; color: #bcd3f5; font-size: 11px; }
.plan button:disabled { opacity: .55; cursor: not-allowed; }
.home-name-form { display: grid; grid-template-columns: 1fr auto; align-items: end; gap: 10px; }
.home-name-form label { min-width: 0; }
.routine-steps { display: grid; gap: 10px; }
.routine-engine { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 11px; margin-bottom: 13px; }
.routine-engine > span { width: 38px; height: 38px; display: grid; place-items: center; border-radius: 12px; font-size: 17px; font-weight: 900; }
.routine-engine strong, .routine-engine small { display: block; }
.routine-engine small { margin-top: 3px; color: var(--muted); line-height: 1.4; }
.routine-engine.ready { border-color: #3b8d6d; background: #142c24; }
.routine-engine.ready > span { background: #54c693; color: #09291c; }
.routine-engine.warning { border-color: #a87832; background: #302312; }
.routine-engine.warning > span { background: #e9aa4e; color: #30200a; }
.routine-engine button { min-height: 39px; }
.routine-sync-line { width: fit-content; display: inline-flex; align-items: center; gap: 7px; margin-bottom: 8px; padding: 6px 9px; border-radius: 99px; background: #173329; color: #9ce8c8; }
.routine-sync-line > span { width: 16px; height: 16px; display: grid; place-items: center; border-radius: 50%; background: #56c99a; color: #10281e; font-size: 9px; font-weight: 900; }
.routine-sync-line small { font-size: 9px; }
.routine-sync-line.has-error { background: #392817; color: #efc27c; }
.routine-sync-line.has-error > span { background: #dda14d; color: #352109; }
.routine-sync-line button { border: 0; padding: 0 2px; background: none; color: inherit; font-size: 9px; text-decoration: underline; cursor: pointer; }
.permission-backdrop { z-index: 80; align-items: center; }
.permission-dialog { width: min(100%, 390px); display: grid; justify-items: center; gap: 13px; padding: 27px 22px 22px; border: 1px solid #8062a5; border-radius: 25px; background: #21172d; box-shadow: 0 25px 80px #000c; text-align: center; }
.permission-icon { width: 58px; height: 58px; display: grid; place-items: center; border-radius: 19px; background: linear-gradient(145deg, #ad85fa, #7043b7); color: #1c1028; font-size: 27px; }
.permission-dialog h3, .permission-dialog p { margin: 0; }
.permission-dialog p { color: var(--muted); font-size: 12px; line-height: 1.55; }
.permission-dialog > div { width: 100%; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.permission-dialog button { min-height: 45px; }
.camera-intro { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 16px; padding: 21px; border: 1px solid #805eb1; border-radius: 24px; background: radial-gradient(circle at 0 0, #9d6ee83b, transparent 40%), linear-gradient(145deg, #241735, #14101c); }
.camera-intro > span { width: 59px; height: 59px; display: grid; place-items: center; border-radius: 19px; background: #ae83f4; color: #1b1027; font-size: 29px; }
.camera-intro small { color: #c5a8ec; font-size: 9px; font-weight: 800; letter-spacing: .1em; }
.camera-intro h3 { margin: 4px 0; font-size: 23px; }
.camera-intro p { margin: 0; color: var(--muted); font-size: 11px; line-height: 1.45; }
.camera-empty { margin-top: 13px; }
.camera-viewer { overflow: hidden; border: 1px solid #49375e; border-radius: 25px; background: #17111f; }
.camera-stage { position: relative; width: 100%; aspect-ratio: 16 / 10; display: grid; place-items: center; overflow: hidden; border: 0; padding: 0; background: radial-gradient(circle at 50% 30%, #3c2b4d, #0c0911 68%); color: var(--ink); cursor: zoom-in; }
.camera-stage img { width: 100%; height: 100%; object-fit: cover; }
.camera-live-video { width: 100%; height: 100%; background: #050308; object-fit: contain; }
.camera-stream-error { display: grid; place-items: center; width: 100%; height: 100%; padding: 24px; color: #e5d9ef; text-align: center; }
.camera-placeholder { display: grid; justify-items: center; gap: 5px; text-align: center; }
.camera-placeholder > span { font-size: 42px; color: #9d77dc; }
.camera-placeholder small { color: #9c90a8; font-size: 10px; }
.camera-live, .camera-privacy { position: absolute; top: 12px; display: inline-flex; align-items: center; gap: 5px; padding: 6px 8px; border-radius: 99px; background: #0c0912bb; color: #eee8f5; font-size: 8px; font-weight: 800; backdrop-filter: blur(8px); }
.camera-live { left: 12px; }
.camera-privacy { right: 12px; }
.camera-live i { width: 6px; height: 6px; border-radius: 50%; background: #63dca7; box-shadow: 0 0 8px #63dca7; }
.camera-enlarge { position: absolute; right: 12px; bottom: 12px; padding: 7px 9px; border: 0; border-radius: 99px; background: #0c0912c9; color: #fff; font-size: 9px; font-weight: 800; backdrop-filter: blur(8px); cursor: pointer; }
.camera-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 15px 17px; }
.camera-heading small { color: var(--muted); }
.camera-heading h3 { margin: 3px 0 0; }
.camera-actions { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; border-top: 1px solid #49375e; background: #49375e; }
.camera-actions button { min-height: 50px; display: grid; grid-template-columns: auto auto; align-content: center; justify-content: center; gap: 4px 6px; border: 0; background: #17111f; color: #ddd2e8; font-size: 10px; font-weight: 750; cursor: pointer; }
.camera-actions button span { color: #bb91f6; font-size: 15px; }
.camera-fullscreen { position: fixed; z-index: 100; inset: 0; display: grid; place-items: center; background: #050308f5; }
.camera-fullscreen > img { width: 100%; height: 100%; object-fit: contain; }
.camera-fullscreen > .camera-live-video { width: 100%; height: 100%; object-fit: contain; }
.camera-fullscreen-close { position: absolute; z-index: 2; top: max(18px, env(safe-area-inset-top)); right: 18px; width: 44px; height: 44px; border: 1px solid #ffffff33; border-radius: 50%; background: #100b17cc; color: #fff; font-size: 29px; cursor: pointer; }
.camera-fullscreen-caption { position: absolute; right: 18px; bottom: max(18px, env(safe-area-inset-bottom)); left: 18px; display: flex; align-items: center; justify-content: space-between; gap: 15px; padding: 12px 14px; border: 1px solid #ffffff24; border-radius: 17px; background: #100b17d9; color: #fff; backdrop-filter: blur(12px); }
.camera-fullscreen-caption span { display: grid; gap: 3px; }
.camera-fullscreen-caption small { color: #c6b8d2; }
.camera-fullscreen-caption button { min-height: 39px; border: 1px solid #a77bf1; border-radius: 12px; padding: 8px 12px; background: #7044ad; color: #fff; cursor: pointer; }
.camera-options-backdrop { z-index: 70; }
.camera-options-sheet { gap: 14px; }
.camera-option-shortcuts { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; }
.camera-option-shortcuts button { display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto; gap: 2px 9px; align-items: center; padding: 12px; border: 1px solid #604878; border-radius: 14px; background: #251a31; color: var(--ink); text-align: left; cursor: pointer; }
.camera-option-shortcuts span { grid-row: 1 / 3; color: #c49cfb; font-size: 20px; }
.camera-option-shortcuts small { color: var(--muted); font-size: 9px; }
.camera-settings-form, .camera-access-form { gap: 10px; padding: 14px; border: 1px solid #483756; border-radius: 17px; background: #120d18; }
.camera-access-form h4, .camera-access-form p { margin: 0; }
.camera-access-form p { color: var(--muted); font-size: 10px; line-height: 1.45; }
.camera-selector { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 9px; }
.camera-choice { min-width: 0; display: grid; grid-template-columns: auto 1fr; gap: 3px 7px; padding: 12px; border: 1px solid #423551; border-radius: 16px; background: #17121e; color: var(--ink); text-align: left; cursor: pointer; }
.camera-choice > span { grid-row: 1 / 3; color: #66dba9; }
.camera-choice strong, .camera-choice small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.camera-choice small { color: var(--muted); font-size: 9px; }
.camera-choice.active { border-color: #a77bf1; background: #2b1d3a; }
.device-category-bar { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; margin-bottom: 15px; }
.device-category-bar button { min-width: 0; display: grid; grid-template-columns: auto 1fr; gap: 2px 9px; align-items: center; padding: 12px; border: 1px solid #453653; border-radius: 17px; background: #17121e; color: var(--ink); text-align: left; cursor: pointer; }
.device-category-bar button > span { grid-row: 1 / 3; width: 35px; height: 35px; display: grid; place-items: center; border-radius: 11px; background: #332542; color: #bf9df6; }
.device-category-bar strong, .device-category-bar small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.device-category-bar strong { font-size: 11px; }
.device-category-bar small { color: var(--muted); font-size: 8px; }
.device-category-bar button.active { border-color: #9d73df; background: #2a1b39; }
.camera-search-button { margin-block: 13px; }
.camera-discovery { display: grid; gap: 12px; margin-top: 12px; }
.camera-discovery-head { display: flex; align-items: center; gap: 11px; }
.camera-discovery-head small { display: block; margin-top: 3px; color: var(--muted); font-size: 10px; }
.camera-radar { width: 29px; height: 29px; border: 2px solid #78dfb4; border-radius: 50%; background: radial-gradient(circle, #78dfb4 0 2px, transparent 3px), conic-gradient(from 0deg, transparent, #78dfb455); box-shadow: 0 0 15px #63dba644; }
.camera-results { display: grid; gap: 7px; }
.camera-results button { width: 100%; display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 10px; padding: 11px; border: 1px solid #49395a; border-radius: 14px; background: #15101c; color: var(--ink); text-align: left; cursor: pointer; }
.camera-results button > span:first-child { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 11px; background: #3d2a50; color: #c39cf9; }
.camera-results small, .discovery-empty small { display: block; margin-top: 2px; color: var(--muted); font-size: 9px; line-height: 1.4; }
.camera-results i { color: #b98cf6; font-size: 22px; font-style: normal; }
.discovery-empty { display: grid; gap: 4px; padding: 12px; border: 1px dashed #5b496a; border-radius: 13px; }
.camera-ha-hint { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 11px; margin-top: 12px; padding: 13px; border: 1px solid #443552; border-radius: 17px; background: #17121e; }
.camera-ha-hint > span { width: 38px; height: 38px; display: grid; place-items: center; border-radius: 12px; background: #332542; }
.camera-ha-hint small { display: block; margin-top: 3px; color: var(--muted); font-size: 9px; line-height: 1.35; }
.camera-setup-form { margin-top: 12px; }
.routine-moments { display: grid; gap: 15px; padding: 14px; border: 1px solid #4b3a5d; border-radius: 17px; background: #16101e; }
.routine-moments > legend { padding: 0 7px; font-weight: 800; }
.field-label { display: block; margin-bottom: 7px; color: var(--muted); font-size: 10px; font-weight: 700; }
.day-picker { display: grid; grid-template-columns: repeat(7, 1fr); gap: 5px; }
.day-picker label { position: relative; display: block; }
.day-picker input { position: absolute; opacity: 0; pointer-events: none; }
.day-picker span { min-height: 40px; display: grid; place-items: center; border: 1px solid #554269; border-radius: 11px; background: #17101f; color: #a99bb5; font-size: 10px; cursor: pointer; }
.day-picker input:checked + span { border-color: #a77bf1; background: #7245ae; color: #fff; box-shadow: 0 7px 16px #6e3ead35; }
.routine-step { display: grid; grid-template-columns: auto minmax(86px, .7fr) minmax(120px, 1.3fr) minmax(90px, .8fr); align-items: end; gap: 8px; padding: 11px; border: 1px solid #4b3a5d; border-radius: 15px; background: #16101e; }
.routine-step label { gap: 5px; font-size: 9px; }
.routine-step input, .routine-step select { min-width: 0; min-height: 40px !important; padding: 8px !important; }
.routine-time-pair { display: grid; grid-template-columns: 1fr auto 1fr; align-items: end; gap: 10px; }
.routine-time-pair > label { min-width: 0; padding: 11px; border-radius: 14px; background: #23192d; }
.routine-time-pair input { width: 100%; min-width: 0; margin-top: 9px; }
.moment-label { display: grid; gap: 2px; }
.moment-label b { font-size: 12px; }
.moment-label small { color: var(--muted); font-size: 9px; }
.routine-time-arrow { align-self: center; color: #a77bf1; font-size: 20px; font-weight: 900; }
.scenario-actions { display: flex; align-items: center; gap: 5px; }
.scenario-actions .run { min-width: 38px; padding-inline: 10px; }
.hub-already-authorized { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 12px; border-color: #4d9f7d; background: #162c25; }
.hub-already-authorized > span { width: 40px; height: 40px; display: grid; place-items: center; border-radius: 13px; background: #65d3a5; color: #0c281d; font-weight: 900; }
.hub-already-authorized p { margin: 4px 0 0; color: #b7daca; font-size: 11px; line-height: 1.45; }
:root[data-theme="light"] .subtle, :root[data-theme="light"] .page-lead, :root[data-theme="light"] .card small, :root[data-theme="light"] .plan-example, :root[data-theme="light"] .privacy-note, :root[data-theme="light"] .secure-note, :root[data-theme="light"] .promo-status { color: #62556d; }
:root[data-theme="light"] .routine-card, :root[data-theme="light"] .routine-step, :root[data-theme="light"] .routine-moments, :root[data-theme="light"] .routine-devices label, :root[data-theme="light"] .payment-methods label, :root[data-theme="light"] .detail-range, :root[data-theme="light"] .capability-note { background: #f7f1fb; color: #251b30; border-color: #d8c9e3; }
:root[data-theme="light"] .routine-time-pair > label { background: #fff; color: #251b30; }
:root[data-theme="light"] .routine-engine.ready { background: #e9f8f1; color: #173226; }
:root[data-theme="light"] .routine-engine.warning { background: #fff4df; color: #473014; }
:root[data-theme="light"] .permission-dialog, :root[data-theme="light"] .camera-viewer, :root[data-theme="light"] .camera-choice, :root[data-theme="light"] .advanced-options[open] { background: #fff; color: #251b30; border-color: #d4c4df; }
:root[data-theme="light"] .camera-actions { border-color: #d4c4df; background: #d4c4df; }
:root[data-theme="light"] .camera-actions button, :root[data-theme="light"] .camera-option-shortcuts button, :root[data-theme="light"] .camera-settings-form, :root[data-theme="light"] .camera-access-form { background: #fff; color: #251b30; border-color: #d4c4df; }
:root[data-theme="light"] .device-category-bar button, :root[data-theme="light"] .camera-results button, :root[data-theme="light"] .camera-ha-hint { background: #fff; color: #251b30; border-color: #d4c4df; }
:root[data-theme="light"] .camera-intro { background: linear-gradient(145deg, #f7effd, #fff); color: #251b30; border-color: #cdb5df; }
:root[data-theme="light"] .camera-intro small { color: #684a7f; }
:root[data-theme="light"] .camera-search-button { background: #7044ad; color: #fff; border-color: #7044ad; }
:root[data-theme="light"] .camera-search-button:hover { background: #5f3699; }
:root[data-theme="light"] .camera-results button > span:first-child, :root[data-theme="light"] .camera-ha-hint > span { background: #eee3f7; color: #5c347e; }
:root[data-theme="light"] .camera-results i { color: #7044ad; }
:root[data-theme="light"] .camera-choice.active { background: #eee3f8; color: #251b30; border-color: #8f63bd; }
:root[data-theme="light"] .discovery-empty { background: #faf7fc; color: #251b30; border-color: #bba8ca; }
:root[data-theme="light"] .day-picker span { background: #fff; color: #54475f; border-color: #d7c9e2; }
:root[data-theme="light"] .day-picker input:checked + span { background: #7044ad; color: #fff; border-color: #7044ad; }
:root[data-theme="light"] .hub-shortcuts button, :root[data-theme="light"] .plans-compact .plan > .secondary, :root[data-theme="light"] .routine-locked button { background: #eee3f8; color: #382548; border-color: #bca3d2; }
:root[data-theme="light"] .hub-shortcuts button small, :root[data-theme="light"] .detail-range label, :root[data-theme="light"] .device-shortcuts > span { color: #5f5368; }
:root[data-theme="light"] .box-required { background: #f5ecfc; color: #251b30; }
:root[data-theme="light"] .box-required input { background: #fff; color: #251b30; border-color: #cdbadd; }
:root[data-theme="light"] .hub-already-authorized { background: #e8f7f0; color: #173226; }
:root[data-theme="light"] .hub-already-authorized p { color: #426756; }
:root[data-theme="light"] .sheet-close, :root[data-theme="light"] .device-main-icon, :root[data-theme="light"] .preset-row button, :root[data-theme="light"] .temperature-stepper button { background: #eee5f4; color: #30223a; border-color: #cfbddc; }
:root[data-theme="light"] .empty-state, :root[data-theme="light"] .routine-detail-step, :root[data-theme="light"] .checkout-summary, :root[data-theme="light"] .box-highlight, :root[data-theme="light"] .hub-device-setup, :root[data-theme="light"] .pairing-tip, :root[data-theme="light"] .discovered-bridge { background: #fff; color: #251b30; border-color: #d8c9e3; }
:root[data-theme="light"] .empty-state strong, :root[data-theme="light"] .empty-state p, :root[data-theme="light"] .plan h3, :root[data-theme="light"] .plan h4, :root[data-theme="light"] .plan-audience, :root[data-theme="light"] .plan ul, :root[data-theme="light"] .box-highlight-title, :root[data-theme="light"] .legal-document p, :root[data-theme="light"] .audit-item, :root[data-theme="light"] .pairing-tip p { color: #32273b; }
:root[data-theme="light"] .plan.featured { background: linear-gradient(145deg, #fff, #f4eafb); border-color: #b28bd7; }
:root[data-theme="light"] .plan-switcher .plan.is-current { background: #e8f7ef; color: #193328; border-color: #72bb9a; }
:root[data-theme="light"] .plan-switcher .plan.is-current h3, :root[data-theme="light"] .plan-switcher .plan.is-current .plan-audience, :root[data-theme="light"] .plan-switcher .plan.is-current .price { color: #193328; }
:root[data-theme="light"] .plan-example, :root[data-theme="light"] .account-required { background: #f0e7f7; color: #4f3e5b; }
:root[data-theme="light"] .no-box-badge, :root[data-theme="light"] .checkout-step, :root[data-theme="light"] .driver-status, :root[data-theme="light"] .capability-help { background: #eee4f6; color: #4a3659; border-color: #cfbadd; }
:root[data-theme="light"] .filter-chip { background: #fff; color: #62566c; border-color: #d9cfe0; }
:root[data-theme="light"] .filter-chip.active { background: #7044ad; color: #fff; }
:root[data-theme="light"] .device-compact .device-icon-button { background: #eee5f4; color: #30223a; border-color: #cfbddc; }
:root[data-theme="light"] .shop-shortcut, :root[data-theme="light"] .shop-hero { color: #fff; }
:root[data-theme="light"] .shop-product > span { background: #eee3f7; color: #654590; }
:root[data-theme="light"] .home-live span { background: #fff; color: #4d4057; border-color: #d9cbe4; }
:root[data-theme="light"] .hero, :root[data-theme="light"] .hero h3, :root[data-theme="light"] .hero p, :root[data-theme="light"] .hero-status, :root[data-theme="light"] .home-stats span, :root[data-theme="light"] .home-stats b { color: #fff; }
:root[data-theme="light"] .secondary { background: #eee5f5; color: #3c2949; border-color: #cdb9da; }
:root[data-theme="light"] .routine-detail-step .secondary { background: #7044ad; color: #fff; border-color: #7044ad; }
:root[data-theme="light"] .notice { background: #fff; color: #2b2034; border-color: #9b72c7; box-shadow: 0 14px 34px #3d214326; }
:root[data-theme="light"] .notice.error { background: #fff0f3; color: #721f35; border-color: #c35c76; }
:root[data-theme="light"] .hub-inline-status, :root[data-theme="light"] .hub-feedback { background: #f4ecfa; color: #33253e; border-color: #bea4d3; }
:root[data-theme="light"] .hub-inline-status.error, :root[data-theme="light"] .hub-feedback.error { background: #fff0f3; color: #721f35; border-color: #c35c76; }
:root[data-theme="light"] .hub-feedback.success, :root[data-theme="light"] .box-ready { background: #e7f7ef; color: #184833; border-color: #69ad8c; }
:root[data-theme="light"] .local-control-banner { background: #f2e8fa; color: #30203c; border-color: #b28ad4; }
:root[data-theme="light"] .local-control-banner p { color: #5c4968; }
:root[data-theme="light"] .integrations-hero { background: linear-gradient(145deg, #f1e5fa, #fff); color: #251b30; border-color: #bea3d1; }
:root[data-theme="light"] .integrations-hero small { color: #6c4688; }
:root[data-theme="light"] .integrations-hero p { color: #5b4c65; }
:root[data-theme="light"] .integration-card { background: #fff; color: #251b30; border-color: #d8c9e3; }
:root[data-theme="light"] .integration-card > span { background: #eee3f7; color: #5c347e; }
:root[data-theme="light"] .integration-card small { color: #5f5368; }
:root[data-theme="light"] .integration-card em { color: #715c7f; }
:root[data-theme="light"] .integration-card.active { background: #eee3f8; border-color: #8f63bd; }
:root[data-theme="light"] .quick-hue-connect { background: #e8f7f1; color: #173d2e; border-color: #69b798; }
:root[data-theme="light"] .quick-hue-connect p { color: #3f6857; }
:root[data-theme="light"] .account-required { background: #eaf2ff; color: #29476d; }
@media (max-width: 520px) {
  .integration-catalog { grid-template-columns: 1fr; }
  .integration-card { grid-template-columns: auto 1fr; align-items: center; column-gap: 10px; }
  .integration-card > span { grid-row: 1 / 4; margin: 0; }
  .routine-step { grid-template-columns: auto 1fr; }
  .routine-step .step-number { grid-row: 1 / 4; align-self: center; }
  .routine-time-pair { grid-template-columns: 1fr; }
  .routine-time-arrow { display: none; }
  .routine-engine { grid-template-columns: auto 1fr; }
  .routine-engine button { grid-column: 1 / -1; }
  .scenario-tile { grid-template-columns: auto 1fr auto; }
  .home-name-form, .box-required form { grid-template-columns: 1fr; }
}

@media (max-width: 800px) {
  .ambient { display: none; }
  .topbar { padding: max(23px, calc(env(safe-area-inset-top) + 12px)) max(20px, env(safe-area-inset-right)) 17px max(20px, env(safe-area-inset-left)); }
  .view { padding: 6px 20px calc(110px + env(safe-area-inset-bottom)); }
  .filter-strip { margin-inline: -20px; padding-inline: 20px; }
  .bottom-nav { min-height: calc(82px + env(safe-area-inset-bottom)); }
}

@media (max-width: 430px) {
  .hero { min-height: 238px; padding: 23px 20px; }
  .hero h3 { max-width: 310px; margin-top: 18px; padding-right: 30px; font-size: clamp(30px, 9.3vw, 38px); }
  .home-stats { margin-top: 24px; }
  .quick-grid, .room-strip { gap: 8px; }
  .quick-action { min-height: 100px; padding: 12px; }
  .room-preview { padding: 12px; }
  .room-preview > span { width: 36px; height: 36px; }
  .device-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .empty-state { grid-template-columns: auto 1fr; }
  .empty-state .primary { grid-column: 1 / -1; width: 100%; }
  .form-row { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; animation-duration: .01ms !important; }
}