:root{color-scheme:light dark;--font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;--fs-base: 1rem;--fs-small: .875rem;--radius-card: 24px;--radius-inner: 16px;--radius-field: 14px;--radius-pill: 999px;--space-1: 4px;--space-2: 8px;--space-3: 12px;--space-4: 16px;--space-5: 24px;--space-6: 32px;--tap: 44px;--blur: 28px;--blur-strong: 40px;--saturate: 170%;--ease: cubic-bezier(.2, .8, .2, 1);--t-fast: .14s;--t-med: .26s;--text: #1a1b22;--text-muted: #474a57;--glass-bg: rgba(255, 255, 255, .66);--glass-bg-strong: rgba(255, 255, 255, .8);--glass-border: rgba(255, 255, 255, .85);--glass-edge: rgba(60, 70, 110, .14);--glass-highlight: rgba(255, 255, 255, .95);--glass-sheen: rgba(255, 255, 255, .55);--shadow: 0 10px 30px rgba(40, 50, 100, .14), 0 2px 6px rgba(40, 50, 100, .08);--shadow-lift: 0 16px 40px rgba(40, 50, 100, .2), 0 3px 8px rgba(40, 50, 100, .1);--field-bg: rgba(255, 255, 255, .88);--field-border: rgba(60, 70, 110, .28);--inset-bg: rgba(255, 255, 255, .45);--accent: #0b5fd0;--accent-hover: #0a52b3;--accent-soft: rgba(11, 95, 208, .12);--accent-text: #0a4fb0;--focus: #0a64d8;--danger: #c62828;--danger-hover: #a81f1f;--danger-text: #a6211b;--good-bg: rgba(52, 199, 89, .2);--good-text: #0b5f27;--bad-bg: rgba(255, 69, 58, .16);--bad-text: #a6211b;--neutral-bg: rgba(90, 100, 130, .16);--neutral-text: #373a47;--accent-chip-bg: rgba(11, 95, 208, .14);--switch-off: rgba(110, 118, 145, .5);--switch-on: #2fb457;--thumb: #ffffff;--orb-off: rgba(120, 128, 155, .35);--orb-on-1: #ffe9a8;--orb-on-2: #ffb340;--orb-glow: rgba(255, 179, 64, .55);--on-tint: rgba(255, 196, 90, .5);--bg-base: #dfe6f7;--bg-blob-1: rgba(167, 150, 255, .55);--bg-blob-2: rgba(255, 187, 120, .5);--bg-blob-3: rgba(120, 214, 180, .45);--bg-blob-4: rgba(130, 190, 255, .45)}@media (prefers-color-scheme: dark){:root{--text: #f5f6fa;--text-muted: #b9bdcc;--glass-bg: rgba(28, 30, 46, .64);--glass-bg-strong: rgba(24, 26, 40, .8);--glass-border: rgba(255, 255, 255, .14);--glass-edge: rgba(0, 0, 0, .35);--glass-highlight: rgba(255, 255, 255, .22);--glass-sheen: rgba(255, 255, 255, .09);--shadow: 0 12px 34px rgba(0, 0, 0, .45), 0 2px 6px rgba(0, 0, 0, .3);--shadow-lift: 0 18px 44px rgba(0, 0, 0, .55), 0 3px 8px rgba(0, 0, 0, .35);--field-bg: rgba(12, 14, 26, .6);--field-border: rgba(255, 255, 255, .28);--inset-bg: rgba(255, 255, 255, .06);--accent: #1565d8;--accent-hover: #2574ea;--accent-soft: rgba(100, 168, 255, .18);--accent-text: #8cbcff;--focus: #7db6ff;--danger: #d13a36;--danger-hover: #e0504b;--danger-text: #ff9d96;--good-bg: rgba(52, 199, 89, .22);--good-text: #7be9a0;--bad-bg: rgba(255, 69, 58, .24);--bad-text: #ffa8a1;--neutral-bg: rgba(255, 255, 255, .12);--neutral-text: #d5d8e4;--accent-chip-bg: rgba(100, 168, 255, .22);--switch-off: rgba(255, 255, 255, .28);--switch-on: #34c759;--orb-off: rgba(255, 255, 255, .16);--orb-glow: rgba(255, 179, 64, .5);--on-tint: rgba(255, 190, 90, .28);--bg-base: #0b0d1a;--bg-blob-1: rgba(100, 80, 200, .45);--bg-blob-2: rgba(230, 140, 60, .3);--bg-blob-3: rgba(40, 150, 120, .32);--bg-blob-4: rgba(50, 100, 200, .32)}}*,*:before,*:after{box-sizing:border-box}html{-webkit-text-size-adjust:100%;text-size-adjust:100%}body{margin:0;min-height:100vh;min-height:100dvh;font-family:var(--font);font-size:var(--fs-base);line-height:1.5;color:var(--text);background-color:var(--bg-base);-webkit-font-smoothing:antialiased}body:before{content:"";position:fixed;top:0;right:0;bottom:0;left:0;z-index:-1;pointer-events:none;background:radial-gradient(48vmax 42vmax at 8% 6%,var(--bg-blob-1),transparent 70%),radial-gradient(40vmax 36vmax at 96% 12%,var(--bg-blob-4),transparent 70%),radial-gradient(46vmax 40vmax at 90% 78%,var(--bg-blob-2),transparent 70%),radial-gradient(50vmax 42vmax at 10% 96%,var(--bg-blob-3),transparent 70%)}h1,h2{margin:0;line-height:1.2;letter-spacing:-.01em}h1{font-size:1.75rem;font-weight:700}h2{font-size:1.25rem;font-weight:650}p{margin:0}ul{margin:0;padding:0;list-style:none}dl,dd{margin:0}button,input,select{font:inherit;color:inherit}button{cursor:pointer;-webkit-tap-highlight-color:transparent}button:disabled{cursor:not-allowed;opacity:.55}:focus-visible{outline:3px solid var(--focus);outline-offset:2px;box-shadow:0 0 0 6px color-mix(in srgb,var(--focus) 25%,transparent)}summary:focus-visible{border-radius:var(--radius-field)}.muted{color:var(--text-muted)}.app-shell{display:block;width:100%;max-width:980px;margin:0 auto;padding:max(var(--space-4),env(safe-area-inset-top)) max(var(--space-4),env(safe-area-inset-right)) max(var(--space-6),env(safe-area-inset-bottom)) max(var(--space-4),env(safe-area-inset-left))}.app-shell.centered{display:grid;place-items:center;min-height:100vh;min-height:100dvh}.toolbar,.views,.target-card,.device-row,.target-form,.notice,.empty-state{position:relative;background-image:linear-gradient(180deg,var(--glass-sheen),transparent 45%);background-color:var(--glass-bg);border:1px solid var(--glass-border);box-shadow:inset 0 1px 0 var(--glass-highlight),inset 0 -1px 0 var(--glass-edge),var(--shadow);-webkit-backdrop-filter:blur(var(--blur)) saturate(var(--saturate));backdrop-filter:blur(var(--blur)) saturate(var(--saturate))}@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))){.toolbar,.views,.target-card,.device-row,.target-form,.notice,.empty-state{background-color:var(--glass-bg-strong)}}@media (prefers-reduced-transparency: reduce){.toolbar,.views,.target-card,.device-row,.target-form,.notice,.empty-state{background-image:none;background-color:var(--glass-bg-strong);-webkit-backdrop-filter:none;backdrop-filter:none}}.toolbar{position:sticky;top:max(var(--space-2),env(safe-area-inset-top));z-index:10;display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-2) var(--space-4);padding:var(--space-2) var(--space-3) var(--space-2) var(--space-4);border-radius:var(--radius-pill);-webkit-backdrop-filter:blur(var(--blur-strong)) saturate(var(--saturate));backdrop-filter:blur(var(--blur-strong)) saturate(var(--saturate))}.toolbar .brand{font-weight:700;letter-spacing:-.01em}.toolbar .user{flex:1 1 140px;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:var(--fs-small);color:var(--text-muted)}.views{display:flex;gap:var(--space-1);margin:var(--space-4) 0;padding:var(--space-1);border-radius:var(--radius-pill)}.views [role=tab]{flex:1 1 0;min-height:var(--tap);padding:0 var(--space-4);border:1px solid transparent;border-radius:var(--radius-pill);background:transparent;color:var(--text-muted);font-weight:600;transition:background-color var(--t-med) var(--ease),color var(--t-fast) var(--ease),box-shadow var(--t-med) var(--ease),transform var(--t-fast) var(--ease)}.views [role=tab]:hover{color:var(--text)}.views [role=tab]:active{transform:scale(.97)}.views [role=tab][aria-selected=true]{color:var(--text);background-color:var(--glass-bg-strong);border-color:var(--glass-border);box-shadow:inset 0 1px 0 var(--glass-highlight),0 2px 8px #1e285a2e}.page-header{display:grid;gap:var(--space-1);margin-bottom:var(--space-4);padding:0 var(--space-2)}.page-sub{color:var(--text-muted)}.page-header-row{display:flex;align-items:center;justify-content:space-between;gap:var(--space-2)}.btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--space-2);min-height:var(--tap);padding:0 var(--space-5);border:1px solid transparent;border-radius:var(--radius-pill);font-weight:600;line-height:1.2;text-align:center;transition:background-color var(--t-fast) var(--ease),box-shadow var(--t-med) var(--ease),transform var(--t-fast) var(--ease),border-color var(--t-fast) var(--ease)}.btn:hover:not(:disabled){transform:translateY(-1px)}.btn:active:not(:disabled){transform:scale(.97)}.btn-small{padding:0 var(--space-4)}.btn-wide{width:100%;margin-top:var(--space-4)}.btn-primary{background-color:var(--accent);color:#fff;box-shadow:inset 0 1px #ffffff59,0 6px 16px color-mix(in srgb,var(--accent) 38%,transparent)}.btn-primary:hover:not(:disabled){background-color:var(--accent-hover)}.btn-secondary{background-color:var(--glass-bg-strong);border-color:var(--glass-border);color:var(--text);box-shadow:inset 0 1px 0 var(--glass-highlight),0 2px 8px #1e285a1f}.btn-secondary:hover:not(:disabled){box-shadow:inset 0 1px 0 var(--glass-highlight),var(--shadow)}.btn-danger{background-color:var(--danger);color:#fff;box-shadow:inset 0 1px #ffffff4d}.btn-danger:hover:not(:disabled){background-color:var(--danger-hover)}.btn-quiet-danger{background-color:transparent;border-color:var(--field-border);color:var(--danger-text)}.btn-quiet-danger:hover:not(:disabled){background-color:var(--bad-bg)}.actions{display:flex;flex-wrap:wrap;gap:var(--space-3)}.device-status{display:grid;gap:var(--space-4)}.targets{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr));gap:var(--space-4)}.target-card{display:grid;gap:var(--space-4);padding:var(--space-5);border-radius:var(--radius-card);transition:box-shadow var(--t-med) var(--ease),border-color var(--t-med) var(--ease),transform var(--t-med) var(--ease)}.target-card:hover{box-shadow:inset 0 1px 0 var(--glass-highlight),inset 0 -1px 0 var(--glass-edge),var(--shadow-lift)}.target-card[data-light=ON]{border-color:color-mix(in srgb,var(--orb-on-2) 70%,var(--glass-border));background-image:radial-gradient(120% 70% at 50% 0%,var(--on-tint),transparent 70%),linear-gradient(180deg,var(--glass-sheen),transparent 45%)}.card-header{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:var(--space-2) var(--space-3)}.chips{display:flex;flex-wrap:wrap;gap:var(--space-2)}.chip{display:inline-flex;align-items:center;gap:6px;padding:4px 12px;border-radius:var(--radius-pill);font-size:var(--fs-small);font-weight:600;line-height:1.4;white-space:nowrap;background:var(--neutral-bg);color:var(--neutral-text)}.chip:before{content:"";width:8px;height:8px;border-radius:50%;background:currentColor}.chip[data-tone=good]{background:var(--good-bg);color:var(--good-text)}.chip[data-tone=bad]{background:var(--bad-bg);color:var(--bad-text)}.chip[data-tone=accent]{background:var(--accent-chip-bg);color:var(--accent-text)}.light-hero{display:flex;align-items:center;gap:var(--space-4)}.light-orb{flex:none;width:56px;height:56px;border-radius:50%;background:radial-gradient(circle at 35% 30%,rgba(255,255,255,.5),var(--orb-off) 70%);box-shadow:inset 0 1px 1px var(--glass-highlight),inset 0 -6px 12px #00000014;transition:background var(--t-med) var(--ease),box-shadow var(--t-med) var(--ease)}.target-card[data-light=ON] .light-orb{background:radial-gradient(circle at 35% 30%,var(--orb-on-1),var(--orb-on-2) 75%);box-shadow:inset 0 1px 1px #fffc,0 0 28px 6px var(--orb-glow)}.light-headline{font-size:1.5rem;font-weight:700;letter-spacing:-.015em;line-height:1.2}.toggle{display:grid;gap:var(--space-2)}.toggle-button{display:flex;align-items:center;gap:var(--space-4);width:100%;min-height:68px;padding:var(--space-3) var(--space-4);border:1px solid var(--glass-border);border-radius:var(--radius-pill);background-color:var(--glass-bg-strong);box-shadow:inset 0 1px 0 var(--glass-highlight),0 4px 14px #1e285a24;text-align:left;transition:box-shadow var(--t-med) var(--ease),transform var(--t-fast) var(--ease),background-color var(--t-med) var(--ease)}.toggle-button:hover:not(:disabled){box-shadow:inset 0 1px 0 var(--glass-highlight),var(--shadow)}.toggle-button:active:not(:disabled){transform:scale(.985)}.toggle-track{position:relative;flex:none;width:76px;height:44px;border:1px solid transparent;border-radius:var(--radius-pill);background-color:var(--switch-off);box-shadow:inset 0 2px 6px #0000002e;transition:background-color var(--t-med) var(--ease)}.toggle-thumb{position:absolute;top:3px;left:3px;width:36px;height:36px;border-radius:50%;background:var(--thumb);box-shadow:0 3px 8px #0000004d,inset 0 -1px 2px #00000014;transition:transform var(--t-med) var(--ease)}.toggle-button[data-on=true] .toggle-track{background-color:var(--switch-on)}.toggle-button[data-on=true] .toggle-thumb{transform:translate(32px)}.toggle-label{font-size:1.125rem;font-weight:650}.toggle-error{color:var(--danger-text);font-size:var(--fs-small);font-weight:600}.facts{display:grid;gap:var(--space-2);padding:var(--space-3) var(--space-4);border-radius:var(--radius-inner);background:var(--inset-bg)}.facts>div{display:flex;flex-wrap:wrap;justify-content:space-between;gap:var(--space-1) var(--space-3)}.facts dt{color:var(--text-muted)}.facts dd{font-weight:600;text-align:right}.facts dd .muted{font-weight:400}.more-info>summary{display:flex;align-items:center;gap:var(--space-2);min-height:var(--tap);color:var(--text-muted);font-size:var(--fs-small);font-weight:600;cursor:pointer;list-style:none}.more-info>summary::-webkit-details-marker{display:none}.more-info>summary:before{content:"";width:7px;height:7px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(-45deg);transition:transform var(--t-fast) var(--ease)}.more-info[open]>summary:before{transform:rotate(45deg)}.more-info>summary:hover{color:var(--text)}.more-info .facts{margin-top:var(--space-1)}.device-wide{display:grid;gap:var(--space-1);padding:var(--space-3) var(--space-4);border-radius:var(--radius-inner);background:var(--inset-bg);color:var(--text-muted);font-size:var(--fs-small)}.technical{padding:0 var(--space-2)}.hint{color:var(--text-muted);font-size:var(--fs-small);line-height:1.45}.notice{max-width:520px;padding:var(--space-4) var(--space-5);border-radius:var(--radius-inner);font-weight:600}.notice-error,.form-error{color:var(--danger-text)}.notice-error{border-color:color-mix(in srgb,var(--danger) 55%,var(--glass-border))}.form-error{padding:var(--space-3) var(--space-4);border-radius:var(--radius-field);background:var(--bad-bg);font-weight:600}.empty-state{display:grid;gap:var(--space-1);justify-items:center;padding:var(--space-6) var(--space-5);border-radius:var(--radius-card);text-align:center}.empty-title{font-size:1.25rem;font-weight:650}.device-management{display:grid;gap:var(--space-4)}.device-management>.page-header{margin-bottom:0}.device-list{display:grid;gap:var(--space-3)}.device-row{display:flex;flex-direction:column;gap:var(--space-4);padding:var(--space-4) var(--space-5);border-radius:var(--radius-card)}.device-info{display:grid;gap:var(--space-1);min-width:0}.device-title{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-2) var(--space-3);font-size:1.125rem}.device-mode{font-weight:600}.device-mode .muted{font-weight:400}.device-meta{color:var(--text-muted);font-size:var(--fs-small);overflow-wrap:anywhere}.confirm-box{display:grid;gap:var(--space-3);padding:var(--space-4);border:1px solid color-mix(in srgb,var(--danger) 45%,transparent);border-radius:var(--radius-inner);background:var(--bad-bg)}.confirm-text{font-weight:600}.target-form{display:grid;gap:var(--space-4);padding:var(--space-5);border-radius:var(--radius-card)}.static-name{padding:var(--space-3) var(--space-4);border-radius:var(--radius-field);background:var(--inset-bg)}.field{display:grid;gap:6px}.field>label{font-weight:600}.field-error{color:var(--danger-text);font-size:var(--fs-small);font-weight:600}input[type=text],input[type=number],input[type=time],select{width:100%;min-height:var(--tap);padding:0 var(--space-4);border:1px solid var(--field-border);border-radius:var(--radius-field);background-color:var(--field-bg);color:var(--text);font-size:1rem;box-shadow:inset 0 1px 2px #00000014;transition:border-color var(--t-fast) var(--ease),box-shadow var(--t-med) var(--ease)}input[aria-invalid=true]{border-color:var(--danger)}select{-moz-appearance:none;appearance:none;-webkit-appearance:none;padding-right:40px;background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9' fill='none' stroke='%23808599' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M1.5 1.5l5.5 5.5 5.5-5.5'/></svg>");background-repeat:no-repeat;background-position:right 16px center}.field-check label{display:flex;align-items:center;gap:var(--space-3);min-height:var(--tap)}input.switch{-moz-appearance:none;appearance:none;-webkit-appearance:none;position:relative;flex:none;width:56px;height:32px;margin:0;border-radius:var(--radius-pill);background-color:var(--switch-off);box-shadow:inset 0 2px 5px #0000002e;cursor:pointer;transition:background-color var(--t-med) var(--ease)}input.switch:before{content:"";position:absolute;top:3px;left:3px;width:26px;height:26px;border-radius:50%;background:var(--thumb);box-shadow:0 2px 6px #0000004d;transition:transform var(--t-med) var(--ease)}input.switch:checked{background-color:var(--switch-on)}input.switch:checked:before{transform:translate(24px)}.automation-editor{display:grid;gap:var(--space-4);margin:0;padding:var(--space-4);border:1px solid var(--glass-edge);border-radius:var(--radius-inner);background:var(--inset-bg);min-width:0}.automation-editor>legend{padding:0 var(--space-2);font-weight:700}.automation-group{display:grid;gap:var(--space-3);margin:0;padding:var(--space-3) var(--space-4);border:1px solid var(--glass-edge);border-radius:var(--radius-inner);min-width:0}.automation-group>legend{padding:0 var(--space-2);font-weight:700}.periods{display:grid;gap:var(--space-4)}.periods>h3{margin:0;font-size:1.05rem}.periods>.hint{margin:0}.automation-editor>.actions{justify-content:flex-end}.advanced{padding:0 var(--space-1)}.advanced>.field{margin-bottom:var(--space-3)}.target-form .actions{margin-top:var(--space-1)}.target-form .actions .btn{flex:1 1 140px}@media (min-width: 640px){.app-shell{padding-top:var(--space-5)}.device-row{flex-direction:row;align-items:center;justify-content:space-between}.confirm-box{max-width:380px}.target-form{padding:var(--space-6)}.target-form .actions .btn{flex:0 0 auto}.btn-wide{width:auto;margin-top:var(--space-2)}}@media (max-width: 400px){.target-card,.target-form{padding:var(--space-4)}.light-headline{font-size:1.3rem}}@media (prefers-reduced-motion: reduce){*,*:before,*:after{transition-duration:.01ms!important;animation-duration:.01ms!important;scroll-behavior:auto!important}.btn:hover:not(:disabled),.btn:active:not(:disabled),.toggle-button:active:not(:disabled),.views [role=tab]:active{transform:none}}@media (prefers-contrast: more){:root{--glass-bg: rgba(255, 255, 255, .92);--text-muted: #2f3240}.toolbar,.views,.target-card,.device-row,.target-form,.notice,.empty-state{border-color:var(--field-border)}}@media (prefers-contrast: more) and (prefers-color-scheme: dark){:root{--glass-bg: rgba(10, 12, 22, .94);--text-muted: #d5d8e4}}@media (forced-colors: active){.toggle-track,input.switch,.chip,.btn,.toggle-button{border:1px solid CanvasText}.toggle-button[data-on=true] .toggle-track{background-color:Highlight}input.switch:checked{background-color:Highlight}}