:root{color-scheme:light;--bg:#eef7ff;--panel:#fff;--ink:#102033;--muted:#6b7c90;--line:#d6e8f7;--blue:#0878d8;--blue2:#40a6ff;--blueSoft:#e7f4ff;--danger:#d94141;--ok:#16824c;--shadow:0 12px 30px rgba(15,70,120,.12)}
*{box-sizing:border-box}
html,body{min-height:100%;margin:0}
body{background:var(--bg);color:var(--ink);font:15px/1.4 system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;letter-spacing:0;-webkit-tap-highlight-color:transparent}
button,input,select{font:inherit;letter-spacing:0}
button{border:0;border-radius:8px;min-height:44px;padding:0 14px;background:#f6fbff;color:var(--ink);box-shadow:inset 0 0 0 1px var(--line);cursor:pointer}
button.primary{background:var(--blue);color:#fff;box-shadow:none}
button.danger{background:#fff3f3;color:var(--danger);box-shadow:inset 0 0 0 1px #ffd0d0}
button.ghost{background:transparent;box-shadow:none;color:var(--blue)}
button.small{min-height:34px;padding:0 10px}
button:disabled{opacity:.55;cursor:wait}
input,select{width:100%;min-height:44px;border:1px solid var(--line);border-radius:8px;background:#fff;color:var(--ink);padding:10px 12px;outline:none}
input:focus,select:focus{border-color:var(--blue2);box-shadow:0 0 0 3px rgba(64,166,255,.18)}
input[type=range]{padding:0;border:0;box-shadow:none;accent-color:var(--blue);touch-action:pan-y}
input[type=color]{padding:3px}
label{display:block;color:var(--muted);font-size:12px;margin:0 0 6px}
h1,h2,h3,p{margin:0}
h1{font-size:24px;font-weight:750}
h2{font-size:18px;font-weight:720}
h3{font-size:14px;font-weight:720}
.app{min-height:100dvh;max-width:720px;margin:0 auto;padding:18px 14px calc(94px + env(safe-area-inset-bottom))}
.top{position:sticky;top:0;z-index:4;margin:-18px -14px 14px;padding:16px 14px 10px;background:rgba(238,247,255,.86);backdrop-filter:blur(16px)}
.top.infoHidden .deviceName,.top.infoHidden .topActions,.top.infoHidden #topStatus{display:none}
.topLine{display:flex;align-items:center;justify-content:space-between;gap:12px}
.topActions{display:flex;align-items:center;gap:8px;flex-wrap:wrap;justify-content:flex-end}
.deviceName{color:var(--muted);font-size:13px;margin-top:2px}
.view{display:none;gap:12px}
.view.active{display:grid}
.isHidden{display:none!important}
.panel{background:rgba(255,255,255,.96);border:1px solid var(--line);border-radius:8px;padding:14px;box-shadow:var(--shadow)}
.appVersion{color:var(--muted);font-size:11px;text-align:center;padding:2px 0 6px}
.flat{box-shadow:none}
.stack{display:grid;gap:12px}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.row{display:flex;gap:10px;align-items:end;flex-wrap:wrap}
.row>*{flex:1 1 120px}
.tight{gap:8px}
.status{display:flex;flex-wrap:wrap;gap:7px}
.pill{display:inline-flex;align-items:center;gap:4px;min-height:28px;border-radius:999px;padding:4px 9px;background:var(--blueSoft);color:#416176;font-size:12px;white-space:nowrap}
.pill b{color:var(--ink)}
.seg{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;padding:4px;border-radius:8px;background:#eaf5ff}
.seg button{min-height:38px;background:transparent;box-shadow:none;color:#5a7085}
.seg button.active{background:#fff;color:var(--blue);box-shadow:0 4px 12px rgba(8,120,216,.14)}
.valueLine{display:flex;align-items:center;justify-content:space-between;gap:10px}
.valueBig{font-size:34px;font-weight:760;color:var(--blue)}
.settingSwitchRow{display:grid;grid-template-columns:1fr auto;gap:12px;align-items:center}
.collapseHead{display:flex;align-items:center;justify-content:space-between;gap:8px}
.collapseToggle{display:flex;align-items:center;justify-content:space-between;gap:10px;min-width:0;flex:1 1 auto;min-height:34px;padding:0;background:transparent;box-shadow:none;text-align:left}
.collapseTitle{font-size:18px;font-weight:720;color:var(--ink);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.collapseMeta{font-size:20px;font-weight:760;color:var(--blue);white-space:nowrap}
.collapseIcon{font-size:18px;color:var(--muted);transition:.18s}
.collapseActions{display:flex;align-items:center;gap:6px;flex:0 0 auto}
.collapseBody{display:grid;gap:12px}
.panel.collapsed{gap:0}
.panel.collapsed .collapseBody{display:none}
.panel.collapsed .collapseIcon{transform:rotate(-90deg)}
.tabbar{position:fixed;left:50%;bottom:0;z-index:6;transform:translateX(-50%);width:min(720px,100%);padding:8px 12px calc(8px + env(safe-area-inset-bottom));background:rgba(255,255,255,.9);border-top:1px solid var(--line);backdrop-filter:blur(18px)}
.tabs{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}
.tab{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;min-height:52px;border-radius:8px;background:transparent;box-shadow:none;color:#6f8192;font-size:12px}
.tab b{font-size:18px;line-height:1;color:currentColor}
.tab.active{background:var(--blueSoft);color:var(--blue)}
pre{margin:0;min-height:120px;max-height:320px;overflow:auto;background:#0d2133;color:#dff2ff;border-radius:8px;padding:12px;font-size:12px}
.list{display:grid;gap:8px}
.listRow{display:grid;grid-template-columns:1fr auto;gap:10px;align-items:center;padding:10px;border:1px solid var(--line);border-radius:8px;background:#fff}
.listTitle{font-weight:720}
.muted{color:var(--muted);font-size:12px}
.chips{display:flex;flex-wrap:wrap;gap:5px;margin-top:5px}
.chip{display:inline-flex;align-items:center;justify-content:center;min-width:28px;height:26px;border-radius:999px;background:var(--blueSoft);color:#246791;font-size:12px}
.deviceCtl{display:grid;grid-template-columns:108px minmax(148px,1fr);grid-template-areas:"power power" "groups groups" "address address";gap:8px;align-items:center;width:300px;max-width:100%;min-width:0}
.deviceCtl>.deviceActions{grid-area:power}
.deviceCtl>.groupCtl{grid-area:groups}
.addressCtl{grid-area:address;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px;align-items:center;min-width:0}
.addressCtl select{min-width:0;width:100%}
.addressCtl button{white-space:nowrap}
.deviceCtl>.groupCtl{grid-template-columns:minmax(0,1fr) 36px 36px}
.listRow>div{min-width:0}
.deviceActions{display:grid;grid-template-columns:1fr 1fr;gap:6px}
.groupActions{display:grid;grid-template-columns:1fr 1fr;gap:6px;min-width:154px}
.groupTypeSelect{grid-column:1/-1;min-height:36px;padding:6px 8px}
.homeTools{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:4px 0 12px}
.homeTools h2{font-size:20px}
.userGroups{display:grid;gap:12px}
.homeKitCard{display:grid;gap:14px;padding:16px}
.homeKitTop{display:grid;grid-template-columns:1fr auto;gap:12px;align-items:start}
.homeKitName{font-size:18px;font-weight:760;color:var(--ink);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.homeKitState{color:var(--muted);font-size:12px;margin-top:3px}
.homeKitPercent{font-size:38px;font-weight:780;color:var(--blue);line-height:1}
.homeKitSlider{display:grid;gap:8px}
.homeKitScale{display:flex;justify-content:space-between;color:var(--muted);font-size:12px}
.rangeTouchWrap{position:relative;display:grid;align-items:center;min-height:44px}
.rangeTouchWrap input[type=range]{width:100%}
.rangeTouchLayer{display:none}
.homeKitCard.isOff{background:rgba(255,255,255,.82)}
.homeKitCard.isOff .homeKitPercent{color:#9aacbc}
.homeKitExtra{display:grid;gap:8px;padding-top:8px;border-top:1px solid var(--line)}
.quickGrid{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.quickTile{position:relative;display:flex;align-items:center;justify-content:center;aspect-ratio:1/1;min-height:0;padding:0;border-radius:8px;overflow:hidden;font-size:12px;font-weight:720;box-shadow:inset 0 0 0 1px rgba(16,32,51,.13)}
.quickTile:active{transform:scale(.98)}
.colorSwatch{color:transparent}
.customColorSwatch{background:linear-gradient(135deg,#ff3b30,#ff9500 28%,#34c759 52%,#32a4ff 75%,#af52de);color:#fff;text-shadow:0 1px 3px rgba(0,0,0,.35);cursor:pointer}
.customColorSwatch input{position:absolute;inset:0;width:100%;height:100%;padding:0;border:0;opacity:0;cursor:pointer}
.cctTile{color:#6e4d18;text-align:center;line-height:1.15}
.customCctTile{background:#fff;color:var(--blue);box-shadow:inset 0 0 0 1px var(--line)}
.homeCustomDrawer{display:none;gap:8px;padding:8px 0 0}
.homeCustomDrawer.show{display:grid}
.homeCustomDrawer input{accent-color:#f0a23a}
.homeCctScale{display:flex;justify-content:space-between;color:var(--muted);font-size:12px}
.userControls{display:grid;gap:10px}
.groupOpen{min-width:0;cursor:pointer}
.groupOpen:active{opacity:.72}
.groupCtl{display:grid;grid-template-columns:76px 36px 36px;gap:6px}
.membershipCtl{grid-column:1/-1;min-width:0}
.membershipCtl select{width:100%;min-width:0}
.groupChip{height:auto;min-height:26px;max-width:100%;padding:4px 8px;overflow-wrap:anywhere}
.groupOpen .listTitle,#groupMemberTitle{overflow-wrap:anywhere}
#groupNoteInput{margin-bottom:8px}
.sheet{position:fixed;inset:0;z-index:8;background:var(--bg);display:none;overflow:auto;padding:14px 14px calc(24px + env(safe-area-inset-bottom))}
.sheet.show{display:block}
.sheetHead{position:sticky;top:0;z-index:2;display:flex;align-items:center;justify-content:space-between;gap:10px;margin:-14px -14px 12px;padding:14px;background:rgba(238,247,255,.9);backdrop-filter:blur(16px);border-bottom:1px solid var(--line)}
.groupMemberModal{position:fixed;inset:0;z-index:18;display:none;align-items:flex-end;justify-content:center;background:rgba(238,247,255,.72);backdrop-filter:blur(8px);padding:18px 14px calc(18px + env(safe-area-inset-bottom))}
.groupMemberModal.show{display:flex}
.groupMemberCard{width:min(520px,100%);max-height:82vh;overflow:auto;border-radius:8px;background:#fff;border:1px solid var(--line);box-shadow:var(--shadow);padding:14px}
.memberRow{display:grid;grid-template-columns:1fr auto;gap:10px;align-items:center;padding:10px;border:1px solid var(--line);border-radius:8px;background:#fff}
.iosSwitch{position:relative;display:inline-block;width:52px;height:32px;flex:0 0 auto}
.iosSwitch input{opacity:0;width:0;height:0}
.iosSlider{position:absolute;cursor:pointer;inset:0;background:#d8e2ec;border-radius:999px;transition:.18s}
.iosSlider:before{content:"";position:absolute;width:28px;height:28px;left:2px;top:2px;background:#fff;border-radius:50%;box-shadow:0 2px 6px rgba(0,0,0,.2);transition:.18s}
.iosSwitch input:checked+.iosSlider{background:var(--blue)}
.iosSwitch input:checked+.iosSlider:before{transform:translateX(20px)}
.iosSwitch input:disabled+.iosSlider{opacity:.55;cursor:wait}
.busy,.confirm{position:fixed;inset:0;z-index:20;display:none;align-items:center;justify-content:center;background:rgba(238,247,255,.72);backdrop-filter:blur(8px);padding:20px}
.busy.show,.confirm.show{display:flex}
#busyText{white-space:pre-line}
#busyProgress{width:100%;height:14px;margin-top:14px;accent-color:var(--blue)}
.busyCard,.confirmCard{width:min(360px,100%);border-radius:8px;background:#fff;border:1px solid var(--line);box-shadow:var(--shadow);padding:18px;text-align:center}
.spinner{width:34px;height:34px;margin:0 auto 12px;border:3px solid #d7ecff;border-top-color:var(--blue);border-radius:50%;animation:spin .8s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
#toast{position:fixed;left:14px;right:14px;bottom:calc(82px + env(safe-area-inset-bottom));z-index:30;display:none;max-width:692px;margin:0 auto;border-radius:8px;background:#102033;color:#fff;padding:12px 14px;box-shadow:var(--shadow)}
@media(pointer:coarse){.rangeTouchLayer{display:block;position:absolute;inset:0;z-index:2;background:transparent;touch-action:pan-y}}
@media(min-width:760px){.app{padding-top:24px}.top{border-radius:0 0 8px 8px}.sheet{left:50%;transform:translateX(-50%);width:min(720px,100%);box-shadow:0 0 0 9999px rgba(16,32,51,.22)}}
@media(max-width:360px){.addressCtl{grid-template-columns:1fr}.addressCtl button{width:100%}}
@media(max-width:520px){.grid2,.grid3{grid-template-columns:1fr}.row>*{flex-basis:100%}.listRow{grid-template-columns:1fr}.deviceCtl{grid-template-columns:minmax(88px,1fr) minmax(148px,1.4fr);width:100%}.groupCtl{grid-template-columns:1fr 44px 44px}.groupActions{min-width:0}.homeTools{align-items:flex-start;flex-direction:column}.homeTools button{width:100%}.valueBig{font-size:30px}}