/* Shared visual system: calm surfaces, readable type and accessible controls. */
:root{font-family:Inter,system-ui,sans-serif;font-size:14px;line-height:1.55;color-scheme:light;color:#24334b;background:#f4f6fa;--panel:#fff;--line:#e3e8f0;--muted:#64748b;--accent:#4f46e5;--blue:#4f46e5}
body{margin:0;background:#f4f6fa;color:#24334b}button,input,select,textarea{font-family:inherit}button{min-height:40px;border-radius:9px;border-color:#d5ddea;color:#334155;background:#fff;font-size:13px;font-weight:500;transition:background .15s,border-color .15s}button:hover{background:#f0f3ff;border-color:#a5b4fc}button:disabled{opacity:.5;cursor:not-allowed}button:focus-visible,a:focus-visible,input:focus-visible,summary:focus-visible,textarea:focus-visible{outline:3px solid #818cf8;outline-offset:3px}input,textarea{background:#fff;color:#24334b;border-color:#cbd5e1;border-radius:8px}input[type=checkbox]{width:20px;height:20px;border:1px solid #a5b4c8;background:#fff;accent-color:#4f46e5}input[type=checkbox]:checked{background:#4f46e5;border-color:#4f46e5}a{color:#4f46e5}.muted{color:var(--muted);font-size:12px}
.topbar{height:72px;border-top:0;border-bottom:1px solid var(--line);background:#fff}.topbar-inner,main{width:calc(100% - 64px);max-width:1520px}.brand{color:#273451;font-size:22px;letter-spacing:-.8px}.account-bar{font-size:13px}.avatar{width:36px;height:36px;border-radius:12px;background:#eef2ff;color:#4f46e5}.tools-popover{background:#fff;border-color:var(--line);box-shadow:0 12px 32px #24334b18;border-radius:12px}.tools-popover button{color:#334155}.tools-menu summary{min-width:40px;text-align:center}.account-name small{font-size:11px}main{padding-top:28px;padding-bottom:20px}
.page-intro{display:flex;align-items:center;justify-content:space-between;gap:24px;margin-bottom:26px}.eyebrow{font-size:10px;letter-spacing:1.7px;font-weight:700;color:#6366f1;margin-bottom:8px}.page-intro h1{font-size:clamp(22px,2.3vw,32px);line-height:1.25;letter-spacing:-1px;margin-bottom:9px;font-weight:700}.page-intro p:not(.eyebrow){font-size:13px;color:#64748b}.local-badge{display:inline-flex;align-items:center;gap:8px;flex-shrink:0;background:#e9f7f0;border:1px solid #c7e8d8;color:#19734c;padding:8px 12px;border-radius:30px;font-size:12px}.local-badge:before{content:'';width:7px;height:7px;background:#229465;border-radius:50%}
.panel{background:#fff;border:1px solid var(--line);border-radius:16px;box-shadow:0 3px 14px #26385804}.panel-head,.devices-panel .panel-head,.workspace .panel-head{min-height:62px;padding:12px 20px;border-color:var(--line)}h1,h2,h3,.workspace .panel-head h2{font-size:14px;color:#23314a}.panel-head h2{font-weight:650}.small-button,.editor-footer .small-button{min-height:36px;font-size:12px;padding:7px 12px;color:#475569}.actions{gap:10px}#search{width:230px;height:38px;padding:8px 12px;font-size:12px;background:#f8fafc;border:1px solid #e2e8f0;border-radius:8px}#search:hover,#search:focus{border-color:#a5b4fc}.devices-scroll{height:auto;max-height:265px;min-height:112px}table{font-size:13px}th{height:40px;font-size:10px;font-weight:600;letter-spacing:.7px;background:#f8fafc;color:#718096}td{height:58px;border-color:#eef1f6}td,th{padding-left:20px;padding-right:20px}td button.device-name{font-size:13px;color:#263752;min-height:44px}td .device-more{min-width:40px;min-height:40px;color:#64748b}tbody tr:hover{background:#f8faff}tbody tr.selected{background:#eef2ff;box-shadow:inset 3px 0 #6366f1}.status,.last-state{font-size:11px;border-radius:6px;color:#64748b;background:#f1f5f9;padding:4px 8px}.status.online,.status.running{color:#16734e;background:#e8f6ee}.status.waiting{color:#995b12;background:#fff5df}.status.done{color:#6d48aa;background:#f3edff}.ownership{color:#4668b2;background:#edf3ff}.device-state{border-radius:24px}
.workspace{grid-template-columns:minmax(270px,29%) minmax(0,1fr);height:730px;min-height:570px;max-height:none;gap:20px;margin-top:20px}.workspace .panel-head .muted,.workspace .panel-head #connection{font-size:11px;color:#64748b}.tabs,.config-toolbar{height:60px;border-color:var(--line);background:#fff}.tabs{padding:10px 14px;gap:4px;align-items:center}.tabs button,.config-toolbar .tabs button{font-size:12px;min-width:64px;min-height:38px;padding:8px 13px;border-radius:8px;border:0;color:#64748b}.tabs button.active{background:#eef2ff;color:#4338ca;border:0;font-weight:600}.config-toolbar{padding-right:16px;gap:6px}.config-toolbar .tabs{padding-left:16px}.primary,.primary:hover{background:#4f46e5;border-color:#4f46e5;color:#fff;font-size:12px;padding:10px 16px;box-shadow:0 3px 8px #4f46e522}.primary:hover{background:#4338ca}.activity-row{height:auto;min-height:50px;gap:12px;padding:4px 16px;border-color:#f0f3f8}.activity-row button{font-size:13px;padding:9px 0;line-height:1.5;white-space:normal;min-height:42px;color:#334155;background:transparent}.activity-row:hover{background:#f8faff}.activity-row.selected{background:#eef2ff;box-shadow:inset 3px 0 #6366f1}.activity-row.selected button{color:#4338ca;font-weight:600}.activity-row .status{font-size:10px;min-width:66px;padding:4px 7px;background:#f1f5f9;color:#64748b}.config-content{padding:24px;background:#fff}.config-content h3{font-size:17px;letter-spacing:-.3px;margin-bottom:22px}#config-form{border:0;padding:0;min-height:0}.config-row,.option-row{gap:18px;min-height:44px;margin-bottom:16px;grid-template-columns:minmax(150px,42%) minmax(0,1fr)}.row-label,.check-label{font-size:13px;line-height:1.65}.field-control{max-width:none}.field-control input:not([type=checkbox]),.field-control textarea{height:42px;font-size:13px;padding:9px 12px}.field-control textarea{height:100px}.field-control.select:after{top:16px;right:12px;border-color:#64748b}.field-control.select input{padding-right:28px}.row-controls{gap:9px}.check-grid{gap:16px}.check-label{min-height:28px;gap:10px}.config-divider{background:#e8edf4;width:100%;margin:26px 0}.queue-slot button{width:40px;height:40px;border-color:#cbd5e1}.queue-slot button.active{background:#4f46e5;border-color:#4f46e5}.editor-footer{min-height:58px;border-color:var(--line);padding:10px 18px;flex-wrap:wrap}.editor-footer .muted,.dirty{font-size:11px}.dirty{color:#9a6515}.sync-state{padding:10px 18px;font-size:12px;background:#f8fafc;color:#64748b;border-top:1px solid #edf1f6}.sync-state.success{color:#16734e}.log-content{background:#f8fafc;color:#334155}.log-heading{background:#fff;border-color:var(--line);padding:16px;font-size:13px}.history-line{border-color:#e6ebf3;font-size:12px;overflow-wrap:anywhere}.history-line time{color:#64748b}.form-help,.field-warning{font-size:12px}.field-warning{color:#9a6515}.empty{font-size:13px;padding:40px 24px;color:#64748b}.form-help summary{min-height:36px}#notice{border-radius:12px;padding:14px 18px;color:#166848;background:#eaf7f0;border-color:#bfdfcd;font-size:13px}#notice.error{background:#fff0f1;color:#9f3345;border-color:#f4c4cb}footer{font-size:11px;color:#64748b;padding-top:20px}.device-menu{background:#fff!important;color:#334155;border-color:#dce3ee!important;box-shadow:0 12px 40px #1e293b24!important}.device-menu button{color:#334155}.config-content.is-loading{opacity:1}.config-content[aria-busy=true]::after{background:#eef2ff;color:#4338ca;border-radius:20px;padding:5px 10px;font-size:11px;top:12px;right:18px}
/* Legacy device overview and login share the same visual language. */
.container{max-width:1440px;margin:auto;padding:32px}.container header{gap:20px;flex-wrap:wrap}.container h1{font-size:26px;letter-spacing:-.7px}.container .toolbar{padding:20px 0;gap:12px;flex-wrap:wrap}.container .table-wrap{border:1px solid #e3e8f0;border-radius:14px;background:#fff;overflow:auto}.container button{min-height:40px}.login-container{background:#fff;border:1px solid #e3e8f0;border-radius:20px;padding:32px;width:calc(100% - 32px);max-width:420px;margin:12vh auto;box-shadow:0 16px 60px #1e293b09}.login-container h1{font-size:25px;letter-spacing:-.6px}.login-container label{color:#475569;font-size:13px}.login-container input{min-height:46px;box-sizing:border-box}.login-container button{background:#4f46e5;border-color:#4f46e5;color:#fff;min-height:46px}
@media(min-width:1600px){.workspace{grid-template-columns:340px minmax(0,1fr)}.config-content{padding:28px 36px}#config-form{max-width:920px}}
@media(max-width:1100px){.topbar-inner,main{width:calc(100% - 40px)}.workspace{grid-template-columns:280px minmax(0,1fr);gap:16px;height:730px;min-height:570px;max-height:none}.config-content{padding:20px}.config-row,.option-row{grid-template-columns:minmax(120px,40%) minmax(0,1fr)}.workspace .panel-head{padding:12px 16px}.workspace .panel-head h2{font-size:13px}.config-panel .panel-head{flex-wrap:wrap;gap:4px}.config-toolbar{height:auto;min-height:60px;flex-wrap:wrap;padding:8px 12px}.config-toolbar .tabs{padding:0;height:40px}.config-toolbar .tabs button{padding:8px 10px}.activity-row{min-height:50px}.activity-row button{font-size:13px}.field-control input:not([type=checkbox]){font-size:13px;height:42px}input[type=checkbox]{width:20px;height:20px}.primary{font-size:12px;padding:9px 12px}.row-label,.check-label{font-size:13px}.check-grid{grid-template-columns:1fr}}
@media(max-width:800px){.topbar{height:64px}.topbar-inner,main{width:calc(100% - 28px)}main{padding-top:22px}.page-intro{align-items:flex-start;margin-bottom:20px}.local-badge{display:none}.page-intro h1{font-size:25px}.page-intro p:not(.eyebrow){max-width:440px}.workspace{grid-template-columns:1fr;height:auto;min-height:0;max-height:none;gap:16px}.activity-panel{height:320px}.config-panel{min-height:540px}.activity-row{min-height:50px}.activity-row .status{font-size:11px;min-width:74px}.activity-list{overscroll-behavior:contain}.config-content{max-height:none;padding:22px}.config-toolbar{flex-wrap:nowrap;position:sticky;top:0;z-index:2}.config-row,.option-row{grid-template-columns:minmax(135px,40%) minmax(0,1fr)}.check-grid{grid-template-columns:1fr 1fr}.devices-scroll{max-height:260px}.devices-scroll table{min-width:700px}.devices-panel .panel-head{flex-wrap:wrap;gap:12px}.devices-panel .actions{flex:1;justify-content:flex-end}#search{width:190px}.editor-footer{flex-wrap:wrap}.account-name{display:none}.language{margin:0}.container{padding:22px 14px}.header-actions{flex-wrap:wrap;gap:12px}}
@media(max-width:480px){.brand{font-size:20px}.language{display:none}.page-intro h1{font-size:23px}.eyebrow{font-size:9px}.page-intro p:not(.eyebrow){font-size:12px;line-height:1.7}.panel{border-radius:12px}.devices-panel .panel-head{padding:14px}.devices-panel .actions{flex-basis:100%;justify-content:space-between}#search{flex:1;width:0;min-width:100px}.devices-scroll{max-height:232px}.workspace .panel-head{padding:14px;min-height:56px}.workspace .panel-head #connection{font-size:11px}.config-toolbar{padding:8px;gap:4px}.config-toolbar .tabs button{min-width:0;padding:8px;font-size:11px}.config-toolbar .primary{padding:9px;font-size:11px}.tabs button{font-size:12px}.config-content{padding:20px 16px}.config-content h3{font-size:17px}.config-row,.option-row{grid-template-columns:1fr;gap:8px;margin-bottom:22px}.config-row.standalone{display:flex}.row-controls{width:100%;flex-wrap:wrap}.field-control{max-width:none}.field-control input:not([type=checkbox]),.field-control textarea{font-size:16px;min-height:44px}.range-row .field-control{max-width:none}.row-label,.check-label{font-size:13px}.check-grid{grid-template-columns:1fr}.editor-footer{padding:12px 14px;gap:10px}.editor-footer .actions{width:100%;justify-content:flex-end;flex-wrap:wrap}.editor-footer .small-button{min-height:40px}.sync-state{padding:12px 14px;line-height:1.7}.activity-panel{height:310px}#config-form{padding:0;min-height:0}.activity-list #config-form{padding:14px!important}.activity-list #config-form .config-row{grid-template-columns:1fr}.activity-list #config-form input:not([type=checkbox]){font-size:16px;min-height:44px}.activity-list #config-form .check-label{font-size:13px;min-height:40px}.activity-row button{min-height:44px}.activity-row input{width:22px;height:22px}.tools-popover button{min-height:44px}.log-heading{padding:14px}.log-content{min-height:320px}.queue-slot button{height:44px;width:44px}.container .tools{display:flex;flex-wrap:wrap;gap:10px}.container .tools input{width:100%;min-height:44px}}
td button.device-name{background:transparent;border:0;border-radius:0;text-align:left}.device-action-menu{background:#fff;color:#334155;border:1px solid #dce3ee;border-radius:12px;box-shadow:0 12px 40px #1e293b24;padding:6px}.device-action-menu strong{color:#64748b}.device-action-menu button{color:#334155;min-height:44px;font-size:13px}.device-action-menu button:hover{background:#eef2ff;color:#4338ca}
@media(max-width:800px){.devices-scroll table{min-width:0;width:100%;table-layout:fixed}.devices-scroll th:nth-child(4),.devices-scroll td:nth-child(4),.devices-scroll th:nth-child(5),.devices-scroll td:nth-child(5),.devices-scroll th:nth-child(6),.devices-scroll td:nth-child(6){display:none}.devices-scroll th:first-child{width:42px}.devices-scroll th:last-child{width:48px}.devices-scroll th:nth-child(3){width:110px}.devices-scroll th,.devices-scroll td{padding:8px}.devices-scroll .device-name{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.devices-scroll .device-state{max-width:100%;white-space:normal}.devices-scroll .device-more{min-width:32px}.devices-scroll table .select-column{width:42px}.devices-scroll table .action-column{width:48px}}
.select-popup{background:#fff;border:1px solid #cbd5e1;border-radius:12px;box-shadow:0 12px 32px #24334b20;padding:8px}.select-popup>input{background:#f8fafc;color:#24334b;border-color:#cbd5e1;border-radius:8px;min-height:42px;font-size:14px}.select-results button{color:#334155;min-height:42px}.select-results button:hover,.select-results button:focus-visible,.select-results button[aria-selected=true]{background:#eef2ff;color:#4338ca}.select-toggle{background:#eef2ff;color:#4338ca;border-color:#dbe2f2}
#devices input[type=checkbox]:indeterminate::after{content:none}
.field-control.select input{padding-right:48px}
.field-control.select .select-expand{width:42px;min-height:0;display:grid;place-items:center;background:transparent;color:#64748b;border:0;border-radius:0 7px 7px 0;box-shadow:none}
.field-control.select .select-expand::before{content:'';width:7px;height:7px;border-right:1.7px solid currentColor;border-bottom:1.7px solid currentColor;transform:translateY(-2px) rotate(45deg)}
.field-control.select .select-expand:hover,.field-control.select .select-expand:focus-visible{background:#eef2ff;color:#4f46e5}
.field-control.select .select-expand:focus-visible{outline:2px solid #818cf8;outline-offset:-2px}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{transition:none!important;scroll-behavior:auto!important}}
.screen-content{flex:1;min-height:0;overflow:auto;scrollbar-gutter:stable;background:#f8fafc;padding:0 16px 16px}
.screen-heading{display:flex;align-items:center;gap:12px;padding:12px 0;border-bottom:1px solid var(--line);flex-wrap:wrap}
.screen-heading strong{font-size:13px;overflow-wrap:anywhere}
.screen-heading button{min-height:32px;padding:6px 12px;flex-shrink:0}
.screen-status{font-size:12px;color:var(--muted);margin:10px 0;overflow-wrap:anywhere}
.screen-status:empty{display:none}
.screen-status.error{color:#b42338}
.screen-frame{margin-top:14px;border:1px dashed #bac7d8;border-radius:5px;min-height:320px;display:flex;align-items:center;justify-content:center;overflow:hidden}
.screen-frame:has(img:not([hidden])){min-height:0;border-style:solid;background:#101827}
.screen-frame p{padding:24px;text-align:center;color:var(--muted);font-size:13px}
.screen-frame img{display:block;width:100%;height:auto;object-fit:contain}
html[data-theme="dark"] .screen-content{background:#101827}
html[data-theme="dark"] .screen-frame{border-color:#3b4a60}
html[data-theme="dark"] .screen-status.error{color:#ffadb6}
/* Embedded online editor shares the main website's device table and account header. */
.embedded-panel .topbar,.embedded-panel .devices-panel,.embedded-panel footer{display:none}
.embedded-panel main{width:100%;max-width:none;padding:0;margin:0}
.embedded-panel .workspace{margin-top:0}
body.embedded-panel{background:transparent}
/* Theme overrides follow the shared light design so both themes use the same layout. */
html[data-theme="dark"]{color-scheme:dark;background:#101722;--panel:#192433;--line:#304052;--muted:#a5b4c7}
html[data-theme="dark"] body{background:#101722;color:#e2e8f0}
html[data-theme="dark"] .panel,html[data-theme="dark"] .tabs,html[data-theme="dark"] .config-toolbar,html[data-theme="dark"] .panel-head{background:var(--panel);border-color:var(--line)}
html[data-theme="dark"] .workspace .panel-head h2,html[data-theme="dark"] .activity-row button,html[data-theme="dark"] td button.device-name{color:#e2e8f0}
html[data-theme="dark"] th{background:#202d3e;color:#aebdd0}
html[data-theme="dark"] td{border-color:var(--line)}
html[data-theme="dark"] tbody tr:hover{background:#213148}
html[data-theme="dark"] tbody tr.selected,html[data-theme="dark"] .activity-row.selected{background:#2b3555}
html[data-theme="dark"] .activity-row.selected button{color:#c7d2fe}
html[data-theme="dark"] button{background:#233246;color:#dce5f2;border-color:#415269}
html[data-theme="dark"] button:hover{background:#2d4059;border-color:#7185a1}
html[data-theme="dark"] .activity-row button,html[data-theme="dark"] td button.device-name,html[data-theme="dark"] .tabs button,html[data-theme="dark"] .select-results button{background:transparent}
html[data-theme="dark"] .tabs button.active{background:#373c68;color:#dddfff}
html[data-theme="dark"] .primary,html[data-theme="dark"] .queue-slot button.active{background:#4f46e5;color:#fff;border-color:#6366f1}
html[data-theme="dark"] .primary:hover{background:#6057ef}
html[data-theme="dark"] #search,html[data-theme="dark"] .select-popup>input{background:#111c2b;color:#e2e8f0;border-color:#415269}
html[data-theme="dark"] input::placeholder,html[data-theme="dark"] textarea::placeholder{color:#98a9bd}
html[data-theme="dark"] input[type=checkbox]{background:#111c2b;border-color:#7589a3}
html[data-theme="dark"] input[type=checkbox]:checked{background:#635bff;border-color:#817aff}
html[data-theme="dark"] .status,html[data-theme="dark"] .last-state,html[data-theme="dark"] .activity-row .status{background:#29394d;color:#c7d3e2}
html[data-theme="dark"] .status.online,html[data-theme="dark"] .status.running{background:#193d34;color:#8ae0b1}
html[data-theme="dark"] .status.waiting{background:#42361c;color:#f3d18c}
html[data-theme="dark"] .status.done{background:#393052;color:#d4baff}
html[data-theme="dark"] .ownership,html[data-theme="dark"] .avatar{background:#283853;color:#b5c9ff}
html[data-theme="dark"] .workspace .panel-head .muted,html[data-theme="dark"] .workspace .panel-head #connection,html[data-theme="dark"] .empty,html[data-theme="dark"] .language{color:#a5b4c7}
html[data-theme="dark"] .select-popup,html[data-theme="dark"] .device-menu{background:#1a2737!important;color:#e2e8f0;border-color:#415269!important}
html[data-theme="dark"] .select-results button:hover,html[data-theme="dark"] .select-results button[aria-selected=true],html[data-theme="dark"] .device-action-menu button:hover{background:#303b5d;color:#d5deff}
html[data-theme="dark"] .config-divider{background:var(--line)}
html[data-theme="dark"] .sync-state{color:#a5b4c7;border-color:var(--line)}
html[data-theme="dark"] .sync-state.success{color:#8ae0b1}
/* Compact plain-text console, matching the desktop log viewer. */
.log-content #history{white-space:normal;min-height:0;padding:8px 10px 12px;font:11px/17px Consolas,"Cascadia Mono",monospace;background:#f8fafc;color:#24334b}
.log-content #history .log-line{display:block;white-space:pre-wrap;overflow-wrap:anywhere;margin:0;padding:0;border:0;border-radius:0;background:transparent;font:inherit}
.log-content #history .log-time,.log-content #history .log-message{color:inherit}
.log-content #history .log-time{margin-right:6px;user-select:text}
.log-content .log-heading{padding:9px 12px;box-shadow:none}
html[data-theme="dark"] .log-content,html[data-theme="dark"] .log-content #history{background:#101827;color:#edf2f8}
@media(max-width:480px){.log-heading>div{flex-wrap:wrap;gap:2px 8px}.log-heading .muted{white-space:normal}}