:root{--bg:#f4f5f2;--surface:#fff;--surface-soft:#f8faf8;--ink:#1e2a27;--muted:#71807b;--line:#e4eae6;--green:#277d68;--green-dark:#185b4d;--green-soft:#eaf6f1;--orange:#c7763c;--orange-soft:#fff2e8;--red:#ba5c50;--shadow:0 14px 35px #1f393012;color:var(--ink);background:var(--bg);font-synthesis:none;text-rendering:optimizelegibility;-webkit-font-smoothing:antialiased;font-family:PingFang SC,Hiragino Sans GB,Microsoft YaHei,sans-serif}*{box-sizing:border-box}html,body,#app{min-height:100%;margin:0}body{background:var(--bg);min-height:100vh}button,input,select,textarea{font:inherit}button{cursor:pointer}button:disabled{cursor:not-allowed}code{color:var(--muted);font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.78rem}.app-shell{width:min(1260px,100% - 32px);margin:0 auto;padding:22px 0 48px}.topbar{align-items:center;gap:34px;min-height:64px;display:flex}.brand{color:var(--ink);text-align:left;background:0 0;border:0;align-items:center;gap:11px;padding:0;display:inline-flex}.brand-mark{color:#fff;background:var(--green);border-radius:14px;place-items:center;width:42px;height:42px;font-weight:800;display:grid}.brand strong,.brand small{display:block}.brand strong{font-size:1.08rem}.brand small{color:var(--muted);margin-top:3px;font-size:.74rem}.main-nav{flex:1;gap:5px;display:flex}.nav-item{color:var(--muted);background:0 0;border:0;border-radius:10px;padding:10px 15px}.nav-item:hover,.nav-item.is-active{color:var(--green-dark);background:var(--green-soft)}.topbar-status,.connection-card{color:var(--muted);align-items:center;gap:8px;font-size:.86rem;display:inline-flex}.status-dot{background:#aab5b0;border-radius:50%;width:8px;height:8px;display:inline-block}.status-dot--connected{background:#3ba979;box-shadow:0 0 0 4px #3ba9791f}.status-dot--connecting{background:var(--orange)}.status-dot--error{background:var(--red)}main{padding-top:42px}.page-heading{justify-content:space-between;align-items:end;gap:24px;margin-bottom:26px;display:flex}.status-stack{flex-direction:column;align-items:flex-end;gap:8px;display:flex}.page-heading h1{letter-spacing:-.06em;max-width:650px;margin:5px 0 12px;font-size:clamp(2rem,4vw,3.35rem);line-height:1.13}.page-heading p:not(.section-kicker){max-width:650px;color:var(--muted);margin:0;line-height:1.8}.section-kicker{color:var(--green);letter-spacing:.12em;margin:0 0 8px;font-size:.76rem;font-weight:800}.panel,.subpanel,.summary-card{border:1px solid var(--line);background:var(--surface);box-shadow:var(--shadow);border-radius:18px}.panel{padding:22px}.subpanel{background:var(--surface-soft);box-shadow:none;padding:19px}.panel-heading{justify-content:space-between;align-items:flex-start;gap:16px;margin-bottom:19px;display:flex}.panel h2,.subpanel h3{letter-spacing:-.03em;margin:0;font-size:1.18rem}.panel-heading h3{font-size:1.02rem}.primary-button,.secondary-button,.danger-button{border-radius:10px;padding:10px 14px;font-weight:700;transition:transform .16s,background .16s,opacity .16s}.primary-button{border:1px solid var(--green);color:#fff;background:var(--green)}.primary-button:hover{background:var(--green-dark);transform:translateY(-1px)}.secondary-button{border:1px solid var(--line);color:var(--ink);background:var(--surface)}.secondary-button:hover{background:var(--surface-soft);border-color:#b9cec4;transform:translateY(-1px)}.danger-button{color:var(--red);background:#fff8f7;border:1px solid #e9c7c1}.danger-button:hover{background:#fff0ee}.primary-button:disabled,.secondary-button:disabled,.danger-button:disabled{opacity:.45;transform:none}.danger-button--small{padding:9px 11px}.summary-grid{grid-template-columns:repeat(4,1fr);gap:13px;margin-bottom:18px;display:grid}.summary-card{min-height:143px;padding:20px;position:relative;overflow:hidden}.summary-card--motion{background:var(--green-soft);border-color:#cce5da}.summary-card--hub{background:#f5fbf8;border-color:#cce5da}.summary-label,.summary-card small,.record-summary span{color:var(--muted);display:block}.summary-label{font-size:.83rem}.summary-card strong{letter-spacing:-.05em;margin:13px 0 7px;font-size:1.6rem;display:block}.summary-card small{max-width:80%;line-height:1.5}.summary-icon{width:34px;height:34px;color:var(--green);background:#277d681c;border-radius:11px;place-items:center;font-weight:800;display:grid;position:absolute;bottom:16px;right:18px}.overview-grid{grid-template-columns:1.1fr .9fr;gap:18px;margin-bottom:18px;display:grid}.state-pill,.tag{color:var(--muted);background:#f1f4f2;border-radius:99px;align-items:center;padding:6px 10px;font-size:.78rem;font-weight:800;display:inline-flex}.state-pill--active,.tag--ok{color:var(--green-dark);background:var(--green-soft)}.tag--warn{color:#9b5b25;background:var(--orange-soft)}.motion-visual{align-items:center;gap:24px;min-height:185px;padding:18px 8px;display:flex}.motion-visual.is-active .motion-ring{color:var(--green-dark);background:var(--green-soft);border-color:#82c4ac}.motion-ring{width:142px;height:142px;color:var(--muted);background:#fafcfa;border:12px solid #edf1ef;border-radius:50%;flex:0 0 142px;place-items:center;font-size:1.22rem;font-weight:800;display:grid}.motion-visual strong{font-size:1.3rem}.motion-visual p{color:var(--muted);margin:10px 0 8px}.motion-visual small{color:var(--muted)}.info-strip{border-top:1px solid var(--line);color:var(--muted);flex-wrap:wrap;gap:8px;padding-top:16px;font-size:.82rem;display:flex}.info-strip span{background:var(--surface-soft);border-radius:8px;padding:6px 9px}.quick-actions{gap:9px;display:grid}.hub-strip{flex-wrap:wrap;gap:8px;margin-bottom:14px;display:flex}.hub-chip{color:var(--muted);background:var(--surface-soft);border-radius:999px;align-items:center;padding:6px 10px;font-size:.78rem;font-weight:700;display:inline-flex}.hub-chip--online{color:var(--green-dark);background:var(--green-soft)}.hub-chip--offline{color:var(--red);background:#fff1ef}.quick-action,.overview-device{border:1px solid var(--line);width:100%;color:var(--ink);background:var(--surface-soft);text-align:left;border-radius:12px;align-items:center;gap:12px;padding:13px;display:flex}.quick-action:hover,.overview-device:hover{background:var(--green-soft);border-color:#afd1c1}.quick-action__icon,.device-symbol,.activity-mark{width:35px;height:35px;color:var(--green-dark);background:#dff1e9;border-radius:10px;flex:none;place-items:center;font-weight:800;display:grid}.quick-action strong,.quick-action small,.overview-device strong,.overview-device small,.device-row strong,.device-row small,.activity-row strong,.activity-row small,.record-row strong,.record-row small{display:block}.quick-action small,.overview-device small,.device-row small,.activity-row small,.record-row small{color:var(--muted);margin-top:4px;font-size:.78rem}.arrow{color:var(--green);margin-left:auto;font-size:1.1rem}.overview-device-grid{grid-template-columns:repeat(3,1fr);gap:10px;display:grid}.device-symbol{border-radius:12px;width:42px;height:42px}.device-symbol--small{border-radius:9px;width:34px;height:34px;font-size:.82rem}.activity-panel{margin-top:18px}.activity-row,.record-row{border:1px solid var(--line);background:var(--surface-soft);border-radius:12px;align-items:center;gap:12px;padding:13px;display:flex}.activity-mark{width:32px;height:32px}.empty-copy{color:var(--muted);margin:0;line-height:1.7}.empty-state{text-align:center;place-items:center;min-height:150px;padding:24px;display:grid}.empty-state strong{font-size:1.05rem}.empty-state p{color:var(--muted);margin:8px 0 16px}.empty-state--large{min-height:420px}.control-layout{grid-template-columns:305px minmax(0,1fr);align-items:start;gap:18px;display:grid}.control-sidebar{gap:18px;display:grid}.device-list{gap:8px;display:grid}.device-row{width:100%;color:var(--ink);text-align:left;background:0 0;border:1px solid #0000;border-radius:12px;align-items:center;gap:10px;padding:10px;display:flex}.device-row:hover,.device-row.is-active{background:var(--green-soft);border-color:#c7e1d6}.device-count{color:var(--muted);margin-left:auto;font-size:.8rem}.stack-form,.config-grid{gap:13px;display:grid}.config-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.field{flex-direction:column;gap:7px;display:flex}.field--wide,.form-actions{grid-column:1/-1}.field span,.mini-field span{color:var(--muted);font-size:.82rem;font-weight:700}.field input,.field select,.field textarea,.mini-field input,.mini-field select,.signal-raw textarea{border:1px solid var(--line);width:100%;min-height:43px;color:var(--ink);background:var(--surface);border-radius:9px;padding:9px 11px}.field textarea{resize:vertical;min-height:98px;line-height:1.65}.field input:focus,.field select:focus,.field textarea:focus,.mini-field input:focus,.mini-field select:focus,.signal-raw textarea:focus{border-color:#8ebca9;outline:2px solid #277d6826}.form-actions{flex-wrap:wrap;gap:9px;display:flex}.control-main{min-height:600px}.control-notice{border:1px solid var(--line);background:var(--surface-soft);border-radius:12px;justify-content:space-between;align-items:center;gap:14px;margin-top:18px;padding:14px 16px;display:flex}.control-notice strong{font-size:.9rem}.control-notice span{color:var(--muted);text-align:right;line-height:1.6}.control-notice--success{background:#f2fbf7;border-color:#cce5da}.control-notice--error{background:#fff7f5;border-color:#efd0cb}.screen-panel{background:linear-gradient(#f9fcfa 0%,#f3f8f5 100%);border:1px solid #d9e8e0;border-radius:16px;margin-top:22px;padding:18px}.screen-panel .panel-heading{margin-bottom:14px}.screen-panel__body{gap:14px;display:grid}.screen-status{background:#fffc;border:1px solid #d9e8e0;border-radius:12px;gap:5px;padding:12px 13px;display:grid}.screen-status strong{font-size:.9rem}.screen-status small{color:var(--muted);line-height:1.6}.screen-note{color:var(--muted);margin:0;font-size:.84rem;line-height:1.7}.screen-panel .primary-button.is-mode-active{background:var(--green-dark);border-color:var(--green-dark)}.screen-panel .secondary-button.is-mode-active{color:var(--green-dark);background:var(--green-soft);border-color:#afd1c1}.device-header{justify-content:space-between;align-items:flex-start;gap:18px;margin-bottom:18px;display:flex}.device-header h2{font-size:1.55rem}.device-meta{color:var(--muted);margin:8px 0 0;font-size:.84rem}.learn-banner{color:#945921;background:var(--orange-soft);border:1px solid #f1d9c4;border-radius:11px;margin-bottom:18px;padding:13px 15px;line-height:1.6}.learn-banner.is-active{color:var(--green-dark);background:var(--green-soft);border-color:#b8ddce}.subgrid{grid-template-columns:1fr 1fr;gap:14px;display:grid}.template-grid,.button-grid{gap:10px;display:grid}.template-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.template-button{border:1px solid var(--line);color:var(--ink);background:var(--surface);text-align:left;border-radius:10px;padding:11px}.template-button:hover{background:var(--green-soft);border-color:#afd1c1}.template-button small{color:var(--muted);margin-top:4px;font-size:.74rem;display:block}.template-button.is-existing{opacity:.5}.button-board{margin-top:22px}.button-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.button-card{border:1px solid var(--line);background:var(--surface-soft);border-radius:14px;padding:16px}.button-card.is-learned{background:#f2fbf7;border-color:#c4e3d5}.button-card__top{justify-content:space-between;gap:10px;display:flex}.button-card h4{margin:0;font-size:1rem}.button-card p{color:var(--muted);margin:5px 0 0;font-size:.78rem}.button-card__tuning{grid-template-columns:1fr 1fr;gap:8px;margin:15px 0 8px;display:grid}.mini-field{flex-direction:column;gap:5px;display:flex}.mini-field input,.mini-field select{min-height:37px;padding:7px 9px}.button-card__meta{line-height:1.5;margin-bottom:14px!important}.button-card__actions{flex-wrap:wrap;gap:7px;display:flex}.button-card__actions button{padding:8px 10px;font-size:.78rem}.record-summary{grid-template-columns:repeat(3,1fr);gap:12px;margin-bottom:18px;display:grid}.record-summary>div{border:1px solid var(--line);background:var(--surface);box-shadow:var(--shadow);border-radius:14px;padding:17px}.record-summary strong{margin-top:8px;font-size:1.35rem;display:block}.record-summary small{color:var(--muted);margin-top:6px;line-height:1.5;display:block}.record-source{max-width:45%;color:var(--muted);text-overflow:ellipsis;white-space:nowrap;font-size:.76rem;overflow:hidden}.record-list,.log-list{gap:8px;display:grid}.record-row code{margin-left:auto}.record-filter{border:1px solid var(--line);background:var(--surface-soft);border-radius:12px;gap:12px;margin-bottom:14px;padding:14px;display:grid}.filter-presets{flex-wrap:wrap;gap:8px;display:flex}.filter-form{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;display:grid}.secondary-button.is-filter-active{color:var(--green-dark);background:var(--green-soft);border-color:#afd1c1}.settings-grid{grid-template-columns:1.1fr .9fr;gap:18px;margin-bottom:18px;display:grid}.settings-note{color:var(--green-dark);background:var(--green-soft);border-radius:11px;margin-top:18px;padding:13px}.settings-note p{color:var(--muted);margin:7px 0 0;font-size:.83rem;line-height:1.6}.connection-help{margin-bottom:18px}.connection-map{text-align:center;grid-template-columns:1fr auto 1fr auto 1fr;align-items:center;gap:12px;display:grid}.connection-map span{border:1px solid var(--line);background:var(--surface-soft);border-radius:11px;padding:14px 8px;font-weight:700}.connection-map small{color:var(--muted);font-size:.72rem;font-weight:400}.connection-map b{color:var(--green)}.log-toolbar{align-items:center;gap:10px;display:flex}.log-size{color:var(--muted);align-items:center;gap:8px;font-size:.82rem;display:inline-flex}.log-size select{border:1px solid var(--line);background:var(--surface);border-radius:9px;min-height:36px;padding:6px 10px}.log-headline{color:var(--muted);margin-bottom:12px;font-size:.84rem}.log-pagination{justify-content:flex-end;gap:8px;margin-top:12px;display:flex}.log-item{border:1px solid var(--line);background:var(--surface-soft);border-radius:10px;grid-template-columns:80px 1fr;gap:10px;padding:11px 13px;display:grid}.log-item time{color:var(--muted);font-size:.78rem}.log-item--success{background:#f2fbf7;border-color:#cce5da}.log-item--error{background:#fff7f5;border-color:#efd0cb}@media (width<=1000px){.summary-grid{grid-template-columns:repeat(2,1fr)}.overview-grid,.control-layout,.settings-grid{grid-template-columns:1fr}}@media (width<=700px){.app-shell{width:min(100% - 20px,100%);padding-top:12px}.topbar{flex-wrap:wrap;gap:16px}.main-nav{order:3;width:100%;overflow-x:auto}.topbar-status{margin-left:auto}main{padding-top:28px}.page-heading,.device-header{display:block}.page-heading .primary-button,.page-heading .connection-card,.device-header .danger-button{margin-top:16px;display:inline-flex}.status-stack{align-items:flex-start;margin-top:16px}.summary-grid,.overview-device-grid,.record-summary,.subgrid,.button-grid{grid-template-columns:1fr}.motion-visual{flex-direction:column;align-items:flex-start}.filter-form,.config-grid{grid-template-columns:1fr}.field--wide,.form-actions{grid-column:auto}.control-notice{flex-direction:column;align-items:flex-start}.control-notice span{text-align:left}.log-toolbar{flex-wrap:wrap;justify-content:flex-end}.connection-map{grid-template-columns:1fr}.connection-map b{transform:rotate(90deg)}.record-row code{display:none}}