.device-compatibility-notice{display:grid;grid-template-columns:42px minmax(0,1fr);gap:13px;align-items:start;margin:0 0 20px;padding:17px 19px;border:1px solid #cfe3e9;border-radius:16px;background:linear-gradient(120deg,#f0f8fa,#f8fbfd);color:#506579}
.device-compatibility-icon{display:grid;place-items:center;width:38px;height:38px;border:1px solid #d3e6eb;border-radius:12px;background:#fff;color:#438ba0}
.device-compatibility-icon .ui-icon{width:18px;height:18px}
.device-compatibility-notice strong{display:block;margin:0 0 3px;color:#294b60;font-size:13px}
.device-compatibility-notice p{font-size:11px;line-height:1.9}
.device-compatibility-notice small{display:block;margin-top:6px;color:#6c8c9b;font-size:10px}
.device-registry-section{margin:0 0 20px}
.device-registry-section>.panel-heading{margin-bottom:12px}
.device-registry-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.device-registry-card{position:relative;min-width:0;padding:16px;border:1px solid #e1e8ee;border-radius:15px;background:var(--white);box-shadow:var(--shadow)}
.device-registry-card.is-disabled{background:#fafbfc}
.device-registry-card.is-primary-device{border-color:#d3e7e7;background:linear-gradient(135deg,#fff 0%,#f5fbfa 100%)}
.device-registry-card.is-archived-device{border-style:dashed;border-color:#d8c8a8;background:linear-gradient(135deg,#fffdf8 0%,#f8f5ed 100%)}
.is-archived-device .device-registry-state{color:#9b7534;background:#f6edd8}
.is-archived-device .device-registry-symbol{color:#9b7534;background:#f6edd8}
.device-registry-card-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px}
.device-registry-identity{display:flex;min-width:0;align-items:center;gap:10px}
.device-registry-identity>span:last-child{min-width:0;overflow:hidden}
.device-registry-symbol{display:grid;flex:0 0 auto;place-items:center;width:39px;height:39px;border-radius:12px;color:#168e83;background:#e8f7f4}
.device-registry-symbol.is-serial{color:#6170c3;background:#eef0fd}
.device-registry-symbol .ui-icon{width:19px;height:19px}
.device-registry-identity strong,.device-registry-identity small{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.device-registry-identity strong{color:#2c4056;font-size:12px}
.device-registry-identity small{color:#8795a5;font-size:10px}
.device-registry-state{display:inline-flex;align-items:center;gap:6px;padding:4px 8px;border-radius:999px;color:#18836e;background:#eaf7f1;font-size:9px;font-weight:800;white-space:nowrap}
.device-registry-state:before{width:6px;height:6px;border-radius:50%;background:currentColor;content:""}
.device-registry-card.is-disabled .device-registry-state{color:#8693a3;background:#eef1f4}
.device-registry-details{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin:14px 0 12px}
.device-registry-detail{min-width:0;padding:8px 9px;border:1px solid #edf0f3;border-radius:10px;background:#fbfcfd}
.device-registry-detail span,.device-registry-detail strong{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.device-registry-detail span{color:#929eac;font-size:9px}
.device-registry-detail strong{margin-top:2px;color:#43556b;font-size:10px}
.device-registry-card-foot{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:10px;padding-top:10px;border-top:1px solid #edf0f3}
.device-registry-channel-range{color:#738397;font-size:10px}
.device-registry-toggle{min-width:116px;padding:6px 9px!important;font-size:10px!important}
.device-registry-actions{display:flex;align-items:center;justify-content:flex-end;flex-wrap:wrap;gap:6px}
.device-registry-action{min-height:31px;padding:6px 9px!important;font-size:10px!important}
.device-registry-action .ui-icon{width:13px;height:13px}
.device-registry-action:disabled{opacity:.45;cursor:not-allowed}
.device-registry-detail .has-pending-messages{color:#ba7b22}
.device-registry-empty{grid-column:1/-1;padding:24px;border:1px dashed #dfe6ec;border-radius:14px;color:#8998a8;background:#fff;text-align:center;font-size:11px}
.device-add-panel{padding:19px;margin-top:4px}
.device-add-icon{display:grid;place-items:center;width:34px;height:34px;border-radius:11px;color:#168f82;background:#e7f6f2}
.device-add-icon .ui-icon{width:17px;height:17px}
.device-add-form{margin-top:14px}
.device-add-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:13px}
.device-form-field{display:grid;align-content:start;gap:6px;min-width:0;color:#607186;font-size:10px;font-weight:750}
.device-form-field input,.device-form-field select,.device-form-field textarea{width:100%;min-height:39px;padding:9px 11px;border:1px solid #e0e6ed;border-radius:10px;color:#33485e;background:#fff;font-size:11px;font-weight:400}
.device-form-field textarea{resize:vertical;line-height:1.65}
.device-form-field select[multiple]{min-height:100px;padding:7px}
.device-form-field input[readonly],.device-form-field select:disabled{color:#718096;background:#f5f7f9;cursor:not-allowed}
.device-form-field small{color:#8a98a7;font-size:9px;font-weight:400;line-height:1.7}
.device-line-toggle{display:flex;align-items:center;gap:8px;padding:7px 9px;border:1px solid #e6ebf0;border-radius:9px;color:#687a8e;background:#fbfcfd;font-size:10px;font-weight:500}
.device-line-toggle input{width:15px;height:15px;min-height:0;margin:0;accent-color:#16998b}
.device-add-footer{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-top:16px;padding-top:14px;border-top:1px solid #edf0f3}
.device-add-footer p{max-width:700px;color:#8190a0;font-size:10px;line-height:1.8}
.device-form-actions{display:flex;align-items:center;justify-content:flex-end;gap:8px;flex:0 0 auto}
.device-add-result{margin-top:12px;padding:11px 13px;border:1px solid #c9e6d9;border-radius:10px;color:#377c63;background:#eff9f4;font-size:10px}
.device-add-result.is-error{border-color:#f0d0d2;color:#ad525c;background:#fff4f4}
.channel-registration-retry.is-readonly{display:flex;align-items:center;justify-content:center;gap:8px;min-height:37px;padding:8px 10px;border:1px solid #e4e9ee;border-radius:9px;color:#7d8b9a;background:#f8fafb;font-size:10px;line-height:1.7}
.channel-registration-retry.is-readonly .ui-icon{width:14px;height:14px;flex:0 0 auto}
.device-compatibility-tag{display:inline-flex;padding:4px 8px;border-radius:8px;color:#6177a5;background:#f0f3fa;font-size:9px}
@media(max-width:900px){.device-registry-grid{grid-template-columns:1fr}}
@media(max-width:620px){.device-compatibility-notice{grid-template-columns:34px minmax(0,1fr);padding:13px}.device-compatibility-icon{width:32px;height:32px}.device-add-grid{grid-template-columns:1fr}.device-registry-details{grid-template-columns:repeat(2,minmax(0,1fr))}.device-add-footer{align-items:stretch;flex-direction:column}.device-add-footer .button{justify-content:center}.device-form-actions{align-items:stretch;flex-direction:column}.device-registry-actions{width:100%;justify-content:stretch}.device-registry-actions .button{flex:1;justify-content:center}}

/* Device registry, connection truth and forms */
#app-shell #view-devices .device-summary-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin:0 0 9px}
#app-shell #view-devices .device-summary-card{display:flex;align-items:center;gap:13px;min-width:0;min-height:98px;padding:16px;border:1px solid #e3eaf0;border-radius:16px;background:linear-gradient(145deg,#fff,#f8fbfd);box-shadow:0 8px 24px rgba(30,55,77,.045)}
#app-shell #view-devices .device-summary-icon{display:grid;flex:0 0 42px;width:42px;height:42px;place-items:center;border:1px solid #e5edf2;border-radius:14px;background:#fff;color:#536b82}
#app-shell #view-devices .device-summary-icon .ui-icon{width:20px;height:20px}
#app-shell #view-devices .device-summary-icon.is-teal{color:#168d80;background:#e8f7f3;border-color:#d4eee8}
#app-shell #view-devices .device-summary-icon.is-blue{color:#5478b4;background:#edf3ff;border-color:#dfe8fa}
#app-shell #view-devices .device-summary-icon.is-green{color:#458b66;background:#edf8f0;border-color:#dceddf}
#app-shell #view-devices .device-summary-icon.is-violet{color:#7765aa;background:#f3f0fc;border-color:#e6e0f6}
#app-shell #view-devices .device-summary-card>div{display:grid;min-width:0;gap:1px}
#app-shell #view-devices .device-summary-card small{color:#6f8295;font-size:12.5px!important;line-height:1.7}
#app-shell #view-devices .device-summary-card strong{color:#263d53;font-size:20px;line-height:1.5;font-variant-numeric:tabular-nums}
#app-shell #view-devices .device-summary-card>div>span{color:#8997a6;font-size:11.5px!important;line-height:1.7}
#app-shell #view-devices .device-summary-footnote{margin:0 0 17px;padding:8px 12px;border-inline-start:3px solid #75b9ae;border-radius:7px 11px 11px 7px;color:#718398;background:#f4f9f8;font-size:12px;line-height:1.8}
#app-shell #view-devices .device-summary-footnote.is-stale{border-color:#dda448;color:#8d682f;background:#fff9ed}
#app-shell #view-devices .device-compatibility-notice{grid-template-columns:44px minmax(0,1fr);gap:15px;padding:18px 20px;border-radius:17px}
#app-shell #view-devices .device-compatibility-notice strong{font-size:15px}
#app-shell #view-devices .device-compatibility-notice p{color:#5e7286;font-size:13px;line-height:1.9}
#app-shell #view-devices .device-compatibility-notice small{font-size:12px;line-height:1.8}
#app-shell #view-devices .device-registry-section>.panel-heading{align-items:center;margin-bottom:15px}
#app-shell #view-devices .device-registry-section>.panel-heading p{max-width:740px;color:#718398;font-size:13px;line-height:1.8}
#app-shell #view-devices .device-registry-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:15px}
#app-shell #view-devices .device-registry-card{display:flex;flex-direction:column;gap:14px;min-width:0;padding:18px;border-radius:18px;box-shadow:0 10px 28px rgba(30,55,77,.055);transition:border-color .16s ease,box-shadow .16s ease,transform .16s ease}
#app-shell #view-devices .device-registry-card:hover{border-color:#cbdce3;box-shadow:0 14px 34px rgba(30,55,77,.085);transform:translateY(-1px)}
#app-shell #view-devices .device-registry-card.is-primary-device{border-color:#cfe6e1}
#app-shell #view-devices .device-registry-card.is-disabled{background:linear-gradient(145deg,#fff,#f8fafc)}
#app-shell #view-devices .device-registry-card-head{align-items:center;gap:14px}
#app-shell #view-devices .device-registry-identity{gap:12px}
#app-shell #view-devices .device-registry-symbol{width:44px;height:44px;border:1px solid rgba(30,80,94,.06);border-radius:14px}
#app-shell #view-devices .device-registry-identity strong{color:#263e55;font-size:15px!important;line-height:1.65}
#app-shell #view-devices .device-registry-identity small{color:#718398;font-size:12px!important;line-height:1.75}
#app-shell #view-devices .device-registry-state-group{display:flex;flex:0 0 auto;flex-direction:column;align-items:flex-end;gap:6px;max-width:52%}
#app-shell #view-devices .device-registry-state{padding:5px 10px;font-size:12px!important;line-height:1.6;white-space:normal;text-align:center}
#app-shell #view-devices .device-registry-state.is-enabled{color:#15775f;background:#e8f6ef}
#app-shell #view-devices .device-registry-state.is-disabled{color:#647487;background:#edf1f5}
#app-shell #view-devices .device-registry-observation{display:inline-flex;align-items:center;gap:6px;max-width:100%;padding:4px 9px;border:1px solid #e6ebef;border-radius:999px;color:#718093;background:#f7f9fb;font-size:11.5px!important;line-height:1.6;text-align:center;white-space:normal}
#app-shell #view-devices .device-registry-observation:before{width:7px;height:7px;flex:0 0 7px;border-radius:50%;background:currentColor;content:""}
#app-shell #view-devices .device-registry-observation.is-online{border-color:#d2eadb;color:#22805b;background:#eff9f2}
#app-shell #view-devices .device-registry-observation.is-partial{border-color:#f0e0bd;color:#9a6c1d;background:#fff9ed}
#app-shell #view-devices .device-registry-observation.is-offline{border-color:#f0d4d4;color:#a84d54;background:#fff5f5}
#app-shell #view-devices .device-registry-observation.is-stale{border-color:#efdfbb;color:#956a20;background:#fff9eb}
#app-shell #view-devices .device-registry-observation.is-unknown{color:#75869a;background:#f4f6f8}
#app-shell #view-devices .device-registry-details{grid-template-columns:repeat(2,minmax(0,1fr));gap:9px;margin:0}
#app-shell #view-devices .device-registry-detail{min-height:63px;padding:10px 12px;border-color:#e9eef2;border-radius:12px;background:rgba(249,251,252,.9)}
#app-shell #view-devices .device-registry-detail span{color:#788a9c;font-size:12px!important;line-height:1.65;white-space:normal}
#app-shell #view-devices .device-registry-detail strong{margin-top:4px;color:#344c63;font-size:13px!important;line-height:1.65;white-space:normal;overflow-wrap:anywhere}
#app-shell #view-devices .device-registry-details>.device-registry-detail:last-child:nth-child(odd){grid-column:1/-1}
#app-shell #view-devices .device-web-indicator.is-online{color:#217a58}
#app-shell #view-devices .device-web-indicator.is-partial{color:#946b25}
#app-shell #view-devices .device-web-indicator.is-offline{color:#a84d54}
#app-shell #view-devices .device-web-indicator.is-stale{color:#946b25}
#app-shell #view-devices .device-web-indicator.is-unknown{color:#718093}
#app-shell #view-devices .device-registry-detail .has-pending-messages{color:#a76a14}
#app-shell #view-devices .device-registry-card-foot{align-items:flex-end;gap:13px;margin-top:auto;padding-top:13px}
#app-shell #view-devices .device-registry-foot-meta{display:grid;min-width:0;gap:4px}
#app-shell #view-devices .device-registry-channel-range{color:#65798e;font-size:12px!important;line-height:1.8;white-space:normal}
#app-shell #view-devices .device-registry-action-note{color:#9a6d25;font-size:11.5px;line-height:1.75}
#app-shell #view-devices .device-registry-actions{gap:7px}
#app-shell #view-devices .device-registry-action,#app-shell #view-devices .device-registry-toggle{min-height:40px;padding:7px 11px!important;border-radius:10px;font-size:12px!important;line-height:1.55}
#app-shell #view-devices .device-registry-action .ui-icon{width:15px;height:15px}
#app-shell #view-devices .device-registry-action:disabled{opacity:.48;filter:grayscale(.18)}
#app-shell #view-devices .device-router-setup{border-color:#b8dcd4!important;color:#186c62!important;background:linear-gradient(135deg,#effaf7,#f7fbff)!important}
#app-shell #view-devices .device-router-setup:hover:not(:disabled){border-color:#65b5a6!important;background:#e5f6f1!important}
#app-shell #view-devices .device-registry-detail strong.is-pinned{color:#18755f}
#app-shell #view-devices .device-registry-detail strong.needs-setup{color:#9a6d25}
#app-shell #view-devices .device-registry-empty{padding:32px 20px;border-radius:16px;color:#697d91;font-size:14px;line-height:1.9}
#app-shell #view-devices .device-add-panel{padding:clamp(19px,2.4vw,28px);border-color:#e0e9ee;border-radius:19px;background:linear-gradient(155deg,#fff,#fbfdfd);box-shadow:0 12px 32px rgba(26,53,76,.055)}
#app-shell #view-devices .device-add-panel>.panel-heading{padding-bottom:14px;border-bottom:1px solid #edf1f4}
#app-shell #view-devices .device-add-panel .panel-heading h2{font-size:19px}
#app-shell #view-devices .device-add-panel .panel-heading p{color:#74879a;font-size:13px;line-height:1.8}
#app-shell #view-devices .device-add-form{margin-top:19px}
#app-shell #view-devices .device-add-grid{gap:17px 19px}
#app-shell #view-devices .device-form-field{gap:8px;color:#40566d;font-size:13.5px!important;line-height:1.7}
#app-shell #view-devices .device-form-field input,#app-shell #view-devices .device-form-field select,#app-shell #view-devices .device-form-field textarea{min-height:46px;padding:10px 13px;border-color:#dce5eb;border-radius:11px;color:#2e455c;font-size:14px!important;line-height:1.7}
#app-shell #view-devices .device-form-field textarea{min-height:88px;line-height:1.85}
#app-shell #view-devices .device-form-field select[multiple]{min-height:124px;padding:8px}
#app-shell #view-devices .device-form-field small{color:#76899b;font-size:12px!important;line-height:1.85}
#app-shell #view-devices .device-line-toggle{min-height:42px;padding:9px 12px;border-radius:10px;font-size:12.5px!important;line-height:1.7}
#app-shell #view-devices .device-add-footer{align-items:center;gap:18px;margin-top:20px;padding-top:17px}
#app-shell #view-devices .device-add-footer p{color:#687d91;font-size:12.5px;line-height:1.9}
#app-shell #view-devices .device-form-actions{gap:9px}
#app-shell #view-devices .device-form-actions .button{min-height:44px;padding-inline:15px;font-size:13px}
#app-shell #view-devices .device-add-result{padding:13px 15px;border-radius:12px;font-size:13px;line-height:1.8}
#app-shell #view-devices .device-guide-card{margin:0 0 10px;border:1px solid #e2e9ef;border-radius:14px;background:#fff;box-shadow:0 4px 14px rgba(35,55,75,.035)}
#app-shell #view-devices .device-guide-card>summary{display:flex;align-items:center;gap:12px;min-height:66px;padding:12px 15px;cursor:pointer;list-style:none}
#app-shell #view-devices .device-guide-card>summary::-webkit-details-marker{display:none}
#app-shell #view-devices .device-guide-card>summary strong{display:block;color:#304b62;font-size:14px;line-height:1.7}
#app-shell #view-devices .device-guide-card>summary small{display:block;color:#788a9c;font-size:12px!important;line-height:1.7}
#app-shell #view-devices .device-guide-body{padding:0 18px 17px;color:#5d7185;font-size:13px;line-height:1.9}
#app-shell #view-devices .device-guide-body li{padding-inline-start:3px;margin-block:4px}
#app-shell #view-devices .device-guide-body p{margin-top:10px;color:#687d91;font-size:12.5px;line-height:1.9}
#app-shell #view-devices .device-guide-body pre{max-width:100%;overflow:auto;border:1px solid #e5eaee;border-radius:10px;padding:12px;background:#f7f9fb;font-size:12px;line-height:1.8}
#app-shell #view-devices .device-guide-body a{color:#147f75;text-underline-offset:3px}
#app-shell #view-devices .device-guide-card:focus-within{outline:3px solid rgba(39,151,137,.18);outline-offset:2px}
#app-shell #view-devices button:focus-visible,#app-shell #view-devices input:focus-visible,#app-shell #view-devices select:focus-visible,#app-shell #view-devices textarea:focus-visible,#app-shell #view-devices summary:focus-visible{outline:3px solid rgba(37,139,128,.28);outline-offset:2px}
@media(max-width:1100px){#app-shell #view-devices .device-summary-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:900px){#app-shell #view-devices .device-registry-grid{grid-template-columns:minmax(0,1fr)}}
@media(max-width:680px){#app-shell #view-devices .device-registry-details{grid-template-columns:repeat(2,minmax(0,1fr))}#app-shell #view-devices .device-registry-card-foot{align-items:stretch;flex-direction:column}#app-shell #view-devices .device-registry-actions{width:100%;justify-content:stretch}#app-shell #view-devices .device-registry-actions .button{flex:1;justify-content:center}#app-shell #view-devices .device-add-footer{align-items:stretch;flex-direction:column}#app-shell #view-devices .device-form-actions{align-items:stretch;flex-direction:column}}
@media(max-width:480px){#app-shell #view-devices .device-summary-grid{grid-template-columns:minmax(0,1fr)}#app-shell #view-devices .device-summary-card{min-height:82px}#app-shell #view-devices .device-registry-card-head{align-items:flex-start;flex-direction:column}#app-shell #view-devices .device-registry-state-group{width:100%;max-width:none;align-items:flex-start}#app-shell #view-devices .device-registry-details{grid-template-columns:minmax(0,1fr)}#app-shell #view-devices .device-registry-actions{flex-wrap:wrap}#app-shell #view-devices .device-registry-actions .button{flex:1 1 42%}}
@media(prefers-reduced-motion:reduce){#app-shell #view-devices .device-registry-card{transition:none}#app-shell #view-devices .device-registry-card:hover{transform:none}}
#app-shell #view-devices .device-registry-toolbar{display:grid;grid-template-columns:minmax(220px,1fr) minmax(190px,270px) auto auto;align-items:end;gap:10px;margin:0 0 13px;padding:12px;border:1px solid #e5ebef;border-radius:14px;background:linear-gradient(150deg,#fff,#f9fbfc)}
#app-shell #view-devices .device-registry-search,#app-shell #view-devices .device-registry-filter{display:grid;min-width:0;gap:5px;color:#64798d;font-size:11.5px;line-height:1.6}
#app-shell #view-devices .device-registry-search{position:relative;display:flex;align-items:center}
#app-shell #view-devices .device-registry-search>span{position:absolute;inset-inline-start:12px;display:grid;place-items:center;color:#7990a3;pointer-events:none}
#app-shell #view-devices .device-registry-search .ui-icon{width:17px;height:17px}
#app-shell #view-devices .device-registry-search input,#app-shell #view-devices .device-registry-filter select{width:100%;min-width:0;min-height:42px;padding:8px 12px;border:1px solid #dfe7ec;border-radius:10px;color:#344c63;background:#fff;font:inherit;font-size:12px!important;line-height:1.65}
#app-shell #view-devices .device-registry-search input{padding-inline-start:38px}
#app-shell #view-devices .device-registry-search input:focus,#app-shell #view-devices .device-registry-filter select:focus{border-color:#82bdb4;outline:3px solid rgba(37,139,128,.14)}
#app-shell #view-devices .device-registry-visible-count{align-self:center;padding:0 5px;color:#74879a;font-size:11.5px;white-space:nowrap}
#app-shell #view-devices .device-registry-clear{min-height:40px;padding-inline:12px;font-size:11.5px}
#app-shell #view-devices .device-registry-filter-empty{margin-top:10px}
#app-shell #view-devices .device-registry-card[hidden]{display:none!important}
@media(max-width:900px){#app-shell #view-devices .device-registry-toolbar{grid-template-columns:minmax(0,1fr) minmax(180px,.8fr)}#app-shell #view-devices .device-registry-visible-count{justify-self:start}#app-shell #view-devices .device-registry-clear{justify-self:end}}
@media(max-width:520px){#app-shell #view-devices .device-registry-toolbar{grid-template-columns:minmax(0,1fr);gap:9px;padding:10px}#app-shell #view-devices .device-registry-visible-count{padding:3px 0}#app-shell #view-devices .device-registry-clear{justify-self:stretch}}