:root { --bg:#f8f9fa; --text:#17191c; --muted:#56636c; --line:#dce0e5; --accent:#066b66; --danger:#b42318; --brand:#6018c8; --field:#eef0f3; }
* { box-sizing:border-box; }
html,body { min-height:100%; }
body { margin:0; font-family:"Segoe UI",system-ui,sans-serif; font-size:14px; color:var(--text); background:var(--bg); }
button,input,select,textarea { font:inherit; }
button { display:inline-flex; justify-content:center; align-items:center; gap:8px; min-height:40px; border:1px solid var(--line); border-radius:6px; background:#fff; color:var(--text); padding:8px 13px; cursor:pointer; font-weight:600; }
button:hover:not(:disabled) { background:#eeecf2; border-color:#bdb4ce; }
button:disabled { opacity:.5; cursor:not-allowed; }
button.primary { background:var(--text); border-color:var(--text); border-radius:24px; color:white; }
button.primary:hover:not(:disabled) { background:#34303e; border-color:#34303e; }
button svg { width:18px; height:18px; flex-shrink:0; }
.icon-button { width:40px; min-width:40px; padding:8px; }
:focus-visible { outline:3px solid #78b9f0; outline-offset:2px; }
[hidden] { display:none !important; }
.workflow-dialog { width:min(520px,calc(100% - 32px)); max-height:85dvh; box-sizing:border-box; overflow:auto; border:1px solid #dce0e6; border-radius:8px; padding:24px; color:#17191c; background:#fff; box-shadow:0 20px 70px #0004; }
.workflow-dialog::backdrop { background:#15121c99; }
.workflow-dialog h2 { font-size:22px; margin:0 0 16px; }
.workflow-message { white-space:pre-line; overflow-wrap:anywhere; line-height:1.55; }
.reset-api-checks { margin:16px 0; overflow-wrap:anywhere; }
.reset-api-checks dt { border-top:1px solid var(--line); padding-top:12px; font-weight:600; }
.reset-api-checks dd { margin:6px 0 14px; line-height:1.55; }
.reset-api-checks .api-check-line { display:block; margin-top:6px; font-weight:400; }
.reset-api-checks .api-check-verified { color:var(--accent); font-weight:600; }
.workflow-dialog .button-row,.settings-review .button-row { display:flex; flex-wrap:wrap; gap:10px; }
.workflow-dialog button,.settings-review button { min-height:44px; }
.settings-review { padding:12px 0 20px; margin-bottom:20px; border-bottom:1px solid #dce0e6; }
.is-dirty { border-color:#895700 !important; box-shadow:inset 3px 0 #895700; }
.service-pending { display:flex; flex-wrap:wrap; gap:8px; margin:12px 0; }
.shell { max-width:1120px; width:calc(100% - 48px); margin:auto; padding:20px 0 40px; }
.topbar { display:flex; justify-content:space-between; align-items:center; gap:16px; padding-bottom:18px; }
.brand { display:flex; align-items:center; gap:12px; min-width:0; }
.brand-mark { display:inline-grid; place-items:center; width:48px; height:48px; background:#dff2ee; color:var(--accent); border-radius:50%; flex-shrink:0; }
.brand-mark svg { width:28px; height:28px; }
.eyebrow { font-size:10px; color:var(--muted); font-weight:700; text-transform:uppercase; }
h1,h2,h3,p { margin-top:0; letter-spacing:0; }
h1 { font-size:23px; margin-bottom:0; line-height:1.3; }
h2 { font-size:19px; margin-bottom:16px; }
h3 { font-size:16px; margin-bottom:6px; }
.logout { display:flex; align-items:center; gap:12px; }
.logout span { color:var(--muted); }
.connection-strip { display:flex; align-items:center; gap:10px; padding:8px 14px; background:#fff; border:1px solid var(--line); border-radius:6px; margin-bottom:14px; min-height:48px; }
.connection-strip strong { overflow-wrap:anywhere; }
#connectionLabel { margin-left:auto; color:var(--muted); font-size:12px; }
.connection-strip .icon-button { min-height:30px; width:32px; min-width:32px; height:32px; border:0; }
.connection-dot { width:8px; height:8px; background:#9aabb8; border-radius:50%; flex-shrink:0; }
.connection-dot.ok { background:#15965b; }
.mobile-tabs { display:flex; gap:4px; border-bottom:1px solid var(--line); margin-bottom:0; background:var(--bg); }
.mobile-tabs button { border:0; border-bottom:3px solid transparent; border-radius:0; min-height:48px; background:transparent; padding:10px 18px; color:var(--muted); }
.mobile-tabs button.is-active { border-bottom-color:var(--accent); color:var(--accent); background:#e9f3f0; }
.grid { display:block; }
.activation-steps { display:flex; align-items:center; gap:12px; padding:16px 24px 12px; background:#fff; border-bottom:1px solid var(--line); }
.activation-steps strong { font-size:16px; }
#activationProgress { color:var(--muted); font-size:12px; white-space:nowrap; }
.activation-progress-track { flex:1; height:5px; background:#e2ebed; border-radius:3px; overflow:hidden; }
#activationProgressFill { display:block; height:100%; background:var(--accent); transition:width .2s ease; }
.wizard-stage:not(.is-active) { display:none; }
.wizard-actions { display:flex; justify-content:space-between; gap:10px; padding:16px 24px; background:#fff; border-top:1px solid var(--line); }
.wizard-actions button { min-width:120px; }
.wizard-actions button:only-child { margin-left:auto; }
.app-view { display:none; }
.app-view.is-active { display:block; }
.panel { padding:24px; background:#fff; min-width:0; border-bottom:1px solid var(--line); }
.panel-head { display:flex; flex-wrap:wrap; justify-content:space-between; align-items:center; gap:12px; margin-bottom:18px; }
.panel-head h2 { margin:0; }
.badge { display:inline-flex; align-items:center; border:1px solid var(--line); border-radius:20px; padding:4px 10px; font-size:12px; font-weight:600; color:var(--muted); white-space:nowrap; }
.badge.ok { background:#eaf8ef; color:#087a47; border-color:#b8dec7; }
.badge.bad { background:#fff0ef; color:var(--danger); border-color:#efc5c0; }
.muted { color:var(--muted); }
.button-row { display:flex; flex-wrap:wrap; gap:8px; margin:16px 0; }
.ble-auth-form { display:flex; align-items:end; gap:10px; flex-wrap:wrap; padding:12px 0; border-top:1px solid var(--line); }
.ble-auth-form[hidden] { display:none; }
.ble-auth-form label { font-weight:600; }
.ble-auth-form input { width:170px; }
.stack { display:grid; gap:14px; }
label { display:grid; gap:6px; font-size:13px; font-weight:600; min-width:0; }
input,select,textarea { width:100%; min-width:0; min-height:40px; border:1px solid #ccd5df; border-radius:6px; padding:9px 11px; background:#fff; color:var(--text); }
textarea { resize:vertical; }
input:disabled,select:disabled { background:#f3f5f7; color:var(--muted); }
.hex-input { font-family:Consolas,monospace; text-transform:uppercase; letter-spacing:0; font-size:14px; }
.provisioning-grid { grid-template-columns:repeat(2,minmax(0,1fr)); max-width:840px; }
.full { grid-column:1/-1; }
.generate-button { align-self:end; }
.format-note { border-bottom:1px solid var(--line); padding:0 0 12px; color:var(--muted); font-size:13px; }
summary { cursor:pointer; font-weight:600; }
.format-note p { margin:12px 0 6px; line-height:1.6; }
.format-note code { display:block; overflow-wrap:anywhere; }
.secret-input { display:flex; position:relative; }
.secret-input input { padding-right:48px; }
.secret-input button { position:absolute; right:1px; top:1px; min-height:38px; border:0; background:transparent; }
.control-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:16px; max-width:840px; }
.toggle-field { align-content:start; }
input[role=switch] { appearance:none; width:44px; height:25px; min-height:25px; border-radius:16px; background:#c5cdd4; position:relative; cursor:pointer; margin-top:6px; padding:0; }
input[role=switch]::before { content:""; position:absolute; top:3px; left:3px; width:17px; height:17px; border-radius:50%; background:#fff; }
input[role=switch]:checked { background:var(--accent); border-color:var(--accent); }
input[role=switch]:checked::before { left:23px; }
.device-overview { border-top:1px solid var(--line); padding-top:22px; margin-top:22px; }
.device-identity { display:flex; align-items:center; gap:14px; }
.device-symbol { width:48px; height:48px; display:grid; place-items:center; background:#edf5f1; color:var(--accent); border-radius:8px; flex-shrink:0; }
.device-symbol svg { width:26px; height:26px; }
.status-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:16px; margin:24px 0 12px; }
.status-grid div { border-left:2px solid var(--line); padding-left:12px; min-width:0; }
dt { color:var(--muted); font-size:12px; margin-bottom:6px; }
dd { margin:0; font-weight:600; font-size:16px; overflow-wrap:anywhere; }
.operation-status { padding:10px 0; color:var(--muted); margin:0; min-height:40px; overflow-wrap:anywhere; }
.operation-status.error,.provisioning-status.error,.workflow-message.error { color:var(--danger); }
.provisioning-status { margin:0; line-height:1.5; overflow-wrap:anywhere; }
.provisioning-status.success { color:#087a47; }
.provisioning-status:empty { display:none; }
.input-actions { display:flex; gap:8px; }
.input-actions input { min-width:0; flex:1; font-family:Consolas,monospace; }
.input-actions button { flex:0 0 44px; padding:0; display:grid; place-items:center; }
.input-actions svg { width:18px; height:18px; }
#factoryIdentityStatus { margin:0; font-size:13px; }
.factory-label { display:grid; grid-template-columns:auto minmax(0,1fr) auto; grid-template-rows:auto auto; align-items:center; column-gap:16px; width:max-content; max-width:100%; border:1px solid var(--line); padding:10px; background:#fff; }
.factory-label #factoryQr { grid-row:1/3; }
.factory-label canvas { display:block; width:138px; height:138px; image-rendering:pixelated; }
.factory-label strong { font:12px/1.45 Consolas,monospace; overflow-wrap:anywhere; }
.factory-label span { color:var(--muted); font-size:12px; }
.factory-label button { grid-column:3; grid-row:1/3; padding:8px; }
.factory-camera { width:min(100%,480px); max-height:320px; object-fit:cover; }
.meter-settings { border-top:1px solid var(--line); margin-top:22px; padding-top:20px; }
.meter-settings h3 { margin:0 0 16px; font-size:16px; }
.meter-settings output { align-self:end; padding:12px 0; font:13px Consolas,monospace; }
.meter-settings button { margin-top:16px; }
.technical-detail { border-top:1px solid var(--line); margin-top:16px; padding-top:14px; color:var(--muted); }
.console-toolbar { display:flex; justify-content:space-between; align-items:center; margin-top:10px; font-size:12px; }
.console-toolbar button { min-height:32px; height:32px; }
.console { height:220px; overflow:auto; white-space:pre-wrap; overflow-wrap:anywhere; background:#19212b; color:#d6eee6; font:12px/1.6 Consolas,monospace; padding:14px; border-radius:6px; margin-top:6px; }
.devices-layout { display:grid; grid-template-columns:minmax(0,1fr) 320px; gap:28px; }
#deviceForm { border-left:1px solid var(--line); padding-left:24px; }
.search-field { display:flex; align-items:center; position:relative; font-weight:400; }
.search-field svg { position:absolute; left:12px; width:17px; height:17px; color:var(--muted); }
.search-field input { padding-left:38px; }
.device-list { margin-top:14px; }
.device-row { display:flex; width:100%; border:0; border-bottom:1px solid var(--line); border-radius:0; padding:14px 8px; text-align:left; justify-content:space-between; gap:12px; }
.device-row strong { display:block; overflow-wrap:anywhere; }
.device-row small { display:block; margin-top:5px; color:var(--muted); font-family:Consolas,monospace; overflow-wrap:anywhere; }
.device-row svg { flex-shrink:0; }
.history-controls { display:grid; grid-template-columns:minmax(0,1fr) 160px 140px; gap:12px; margin-bottom:18px; }
.table-wrap { width:100%; overflow:auto; }
table { border-collapse:collapse; width:100%; table-layout:fixed; }
th { text-align:left; padding:12px 10px; background:#f4f6f8; color:var(--muted); font-size:12px; font-weight:600; }
td { padding:12px 10px; border-bottom:1px solid var(--line); font-size:12px; overflow-wrap:anywhere; vertical-align:top; line-height:1.5; }
td:first-child { color:var(--muted); }
.pagination { display:flex; justify-content:space-between; align-items:center; gap:10px; padding-top:16px; color:var(--muted); font-size:12px; }
.pagination>div { display:flex; align-items:center; gap:14px; }
.empty-state { padding:32px 16px; color:var(--muted); text-align:center; }
.alert { border:1px solid #edc7c1; padding:12px; margin-bottom:14px; border-radius:6px; }
.alert.error { color:var(--danger); }
.app-notice { margin:0; padding:12px 24px; border-bottom:1px solid #b9d8ca; color:#176545; background:#eef8f2; overflow-wrap:anywhere; }
.app-notice.error { color:var(--danger); border-color:#eec8c1; background:#fff4f2; }
.auth-shell { max-width:440px; margin:50px auto; background:white; border:1px solid var(--line); border-radius:8px; }
.auth-visual { padding:24px; background:#edf5f1; border-bottom:1px solid var(--line); border-radius:8px 8px 0 0; }
.visual-brand { display:flex; align-items:center; gap:12px; font-size:20px; }
.device-graphic,.visual-meta { display:none; }
.auth-panel { padding:28px; }
@media(max-width:760px) {
 .activation-steps { flex-wrap:wrap; padding:14px 18px; }
 .activation-progress-track { flex-basis:100%; }
 .wizard-actions { padding:14px 18px; }
 .shell { width:100%; padding:0 0 calc(82px + env(safe-area-inset-bottom)); }
 .topbar { padding:14px 16px; background:white; border-bottom:1px solid var(--line); }
 h1 { font-size:19px; }
 h2 { font-size:18px; }
 .brand { gap:9px; }
 .brand-mark { width:34px; height:34px; }
 .logout span { display:none; }
 .logout button { padding:7px 9px; font-size:12px; }
 .connection-strip { border:0; border-radius:0; margin:0; padding:8px 16px; border-bottom:1px solid var(--line); gap:8px; font-size:12px; }
 .mobile-tabs { position:fixed; bottom:0; left:0; right:0; z-index:20; display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:0; padding-bottom:env(safe-area-inset-bottom); border:0; border-top:1px solid var(--line); background:#fff; }
 .mobile-tabs button { flex-direction:column; gap:5px; min-width:0; min-height:66px; padding:8px 2px; font-size:11px; border:0; border-top:3px solid transparent; }
 .mobile-tabs button.is-active { border-top-color:var(--accent); }
 .mobile-tabs svg { width:21px; height:21px; }
 .panel { padding:20px 16px; }
 .button-row { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); }
 .button-row button { font-size:12px; padding:8px; }
 input,select,textarea { font-size:16px; }
 .hex-input { font-size:14px; }
 .status-grid,.control-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:20px 12px; }
 .status-grid dd { font-size:14px; }
 .provisioning-grid { grid-template-columns:1fr; }
 .factory-label { width:100%; grid-template-columns:100px minmax(0,1fr); gap:6px 10px; }
 .factory-label canvas { width:100px; height:100px; }
 .factory-label button { grid-column:2; grid-row:3; justify-self:start; }
 .devices-layout { grid-template-columns:1fr; gap:24px; }
 #deviceForm { border-left:0; border-top:1px solid var(--line); padding:20px 0 0; }
 .history-controls { grid-template-columns:repeat(2,minmax(0,1fr)); }
 .history-controls .search-field { grid-column:1/-1; }
 table { table-layout:auto; }
 thead { display:none; }
 tr { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); border-bottom:1px solid var(--line); padding:12px 0; }
 td { display:block; border:0; padding:4px 6px; }
 td::before { content:attr(data-label); display:block; font-size:10px; font-weight:600; color:var(--muted); margin-bottom:3px; }
 td:nth-child(1)::before,td:nth-child(2)::before { display:none; }
 td.empty-state { grid-column:1/-1; }
 td.empty-state::before { display:none; }
 .auth-shell { margin:24px 16px; }
 .auth-panel { padding:22px; }
}
@media(prefers-reduced-motion:reduce) { * { scroll-behavior:auto !important; } }
.service-controls { display:flex; flex-wrap:wrap; align-items:end; gap:12px; margin:16px 0; }
.service-controls label { flex:1 1 200px; }
.service-controls select { max-width:100%; }
.service-card { border-top:1px solid var(--line); margin-top:24px; padding-top:20px; }
.service-card:empty { display:none; }
.service-card details { padding:14px 0; border-bottom:1px solid var(--line); }
.service-card summary { cursor:pointer; font-weight:600; }
.service-card img { display:block; max-width:100%; max-height:480px; object-fit:contain; margin-top:12px; }
.service-card pre { white-space:pre-wrap; overflow-wrap:anywhere; }
.service-card textarea { width:100%; }
#serviceWorkspace small { display:block; overflow-wrap:anywhere; color:var(--muted); }
@media(max-width:700px) { .mobile-tabs { grid-template-columns:repeat(6,minmax(0,1fr)); } .service-controls>* { min-width:0; } }
@media print {
 body.printing-label>* { display:none !important; }
 body.printing-label>#factoryPrintHost { display:block !important; }
 #factoryPrintHost #factoryLabel { display:grid; width:max-content; max-width:100%; grid-template-columns:auto minmax(0,1fr); border:0; }
 #factoryPrintHost canvas { width:138px; height:138px; }
 #printFactoryLabel { display:none; }
}
.service-report { width:min(720px,calc(100vw - 32px)); max-height:85vh; overflow:auto; border:1px solid #cad8db; border-radius:8px; padding:24px; color:#14283a; }
.service-report::backdrop { background:rgb(0 0 0 / 40%); }
.service-report dl { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,2fr); gap:8px 16px; }
.service-report dt { font-weight:600; }
.service-report dd { margin:0; overflow-wrap:anywhere; }
.service-toolbar { display:flex; gap:8px; }
#serviceWorkspace>.service-controls { display:grid; grid-template-columns:minmax(220px,2fr) repeat(3,minmax(140px,1fr)); align-items:end; }
#serviceWorkspace button[aria-pressed="true"] { color:#6415c8; }
#serviceWorkspace button[aria-pressed="true"] svg { fill:#eee5fb; }
#serviceWorkspace>.service-controls>select { margin-bottom:0; }
@media(max-width:600px) { #serviceWorkspace>.service-controls>select { grid-column:1/-1; } }
.service-tabs { display:flex; gap:12px; border-bottom:1px solid var(--line); margin:20px 0; padding-bottom:14px; }
.service-tabs button { flex-direction:column; border:0; background:transparent; min-width:84px; color:var(--muted); }
.service-tabs svg { width:42px; height:42px; padding:9px; border-radius:50%; background:#e7edf4; color:#5a6f8b; border:2px solid transparent; }
.service-tabs button:nth-child(1) svg { background:#dff2ee; color:#087e79; }
.service-tabs button:nth-child(2) svg { background:#e5f1e8; color:#477b58; }
.service-tabs button:nth-child(3) svg { background:#fff1d9; color:#916516; }
.service-tabs button[aria-selected=true] svg { border-color:currentColor; }
.service-tabs button[aria-selected=true] { color:var(--text); font-weight:700; }
.service-card section { min-width:0; }
.service-card section>.service-controls { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr) auto; }
.service-visit-editor { margin-bottom:24px; }
.service-visit-editor textarea { margin-top:16px; }
.service-visit-editor label { margin:12px 0; }
.service-card details>button { margin:4px 8px 8px 0; }
.service-photo { width:min(980px,calc(100vw - 32px)); max-height:90vh; padding:20px; border:1px solid var(--line); border-radius:8px; }
.service-photo::backdrop { background:rgb(0 0 0 / 55%); }
.service-photo img { display:block; width:100%; max-height:72vh; object-fit:contain; }
.service-photo-choices { display:flex; flex-wrap:wrap; gap:8px; margin-top:12px; }
.service-photo-previews { display:grid; grid-template-columns:repeat(auto-fit,minmax(min(220px,100%),1fr)); gap:12px; }
.service-photo-previews figure { margin:0; min-width:0; }
.service-photo-previews img { display:block; width:100%; height:140px; object-fit:contain; background:white; }
@media(max-width:1000px) { #serviceWorkspace>.service-controls { grid-template-columns:repeat(2,minmax(0,1fr)); } #serviceWorkspace>.service-controls>label { grid-column:1/-1; } }
@media(max-width:520px) { .service-tabs { gap:0; } .service-tabs button { min-width:0; flex:1; padding:8px 2px; font-size:12px; } .service-card section>.service-controls { grid-template-columns:minmax(0,1fr); } }

/* Same brand, surfaces and compact navigation as the Android workspace. */
.shell { max-width:1200px; padding-top:0; }
.topbar { padding:0; margin:0; background:linear-gradient(105deg,#6018c8 0%,#401468 48%,#17191c 100%); color:#fff; border:0; }
.header-inner { display:flex; justify-content:space-between; align-items:center; gap:16px; width:calc(100% - 48px); max-width:1200px; margin:auto; min-height:76px; padding:10px 0; }
.brand-mark { display:block; width:44px; height:44px; border-radius:12px; background:none; }
.topbar h1 { font-size:22px; }
.topbar .eyebrow { color:#e2d8ef; font-size:11px; font-weight:500; text-transform:none; margin-top:2px; }
.logout { min-width:0; }
.logout span { color:#fff; font-weight:500; overflow-wrap:anywhere; max-width:220px; }
.logout .icon-button { border:1px solid #ffffff30; border-radius:50%; background:#17191c; color:white; width:44px; height:44px; }
.logout .icon-button:hover { background:#34303e; }
.connection-strip { background:transparent; border:0; border-bottom:1px solid var(--line); border-radius:0; padding:8px 0; margin:0 0 16px; min-height:44px; font-size:13px; }
.mobile-tabs { display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); gap:4px; padding:5px; margin-bottom:12px; border:0; border-radius:28px; background:#17191c; }
.mobile-tabs button { flex-direction:row; gap:8px; min-width:0; min-height:44px; padding:8px 12px; border:0; border-radius:23px; color:#e5e7ea; font-weight:500; background:transparent; transition:background-color .18s ease,color .18s ease; }
.mobile-tabs button svg { width:20px; height:20px; padding:0; border:0; border-radius:0; background:none; color:inherit; }
.mobile-tabs button.is-active { color:white; background:var(--brand); font-weight:700; }
.mobile-tabs button:hover:not(:disabled) { background:#34303e; color:white; }
.mobile-tabs button.is-active:hover { background:#7229dc; }
.mobile-tabs button span { overflow-wrap:anywhere; }
.panel { background:transparent; padding:24px 0; }
.panel-head h2 { font-size:23px; line-height:1.25; }
.panel-head .icon-button,.service-card>.icon-button { background:var(--field); border:0; color:var(--text); }
.activation-steps,.wizard-actions { background:transparent; padding-left:0; padding-right:0; }
.activation-steps { padding-top:12px; }
.activation-steps strong { overflow-wrap:anywhere; }
.activation-progress-track { background:#e3ddee; }
#activationProgressFill { background:var(--brand); }
.status-grid div { border-left:0; border-bottom:1px solid var(--line); padding:12px 0; }
.status-grid dt { font-size:13px; }
.status-grid dd { margin-top:8px; }
.device-symbol { border-radius:8px; color:white; background:linear-gradient(135deg,#066b66,#17191c); }
.device-row { background:#fff; border:0; border-bottom:1px solid var(--line); border-radius:0; margin:0; padding:16px 12px; }
.device-row:hover:not(:disabled) { background:#f0edf6; }
input:focus,select:focus,textarea:focus { border-color:var(--brand); }
input[role=switch]:checked { background:var(--brand); border-color:var(--brand); }
button:focus-visible,a:focus-visible { outline-color:#9760e6; }
th { background:var(--field); color:#49525c; }
tbody tr { background:white; }
td { background:transparent; }
.badge { white-space:normal; }
.service-card h4 { font-size:17px; margin:24px 0 14px; }
.service-card details { padding:16px 0; }
.service-card details[open] summary { color:var(--accent); margin-bottom:16px; }
.service-card p { line-height:1.6; overflow-wrap:anywhere; }
.service-card>.stack { max-width:840px; }
.service-tabs { padding-bottom:10px; gap:8px; }
.service-tabs button { min-width:80px; gap:5px; padding:6px 12px; }
.service-tabs svg { width:28px; height:28px; padding:4px; border:0; border-radius:7px; }
.service-tabs button[aria-selected=true] svg { color:white; background:linear-gradient(135deg,#6018c8,#17191c); }
.service-tabs button[aria-selected=true] { color:var(--text); }
.service-report,.service-photo { color:var(--text); background:var(--bg); }
.app-view.is-active { animation:view-in .18s ease-out; }
@keyframes view-in { from { opacity:0; } to { opacity:1; } }
.auth-page { color:#fff; background:linear-gradient(215deg,#782ee5 0%,#6018c8 28%,#300e5b 65%,#17191c 100%); background-attachment:fixed; }
.auth-page .topbar { background:transparent; }
.auth-page .shell { min-height:calc(100dvh - 76px); padding:48px 0 64px; }
.auth-shell { width:min(100%,420px); max-width:none; margin:0 auto; border:0; border-radius:0; background:transparent; }
.auth-visual { padding:0; border:0; border-radius:0; background:transparent; }
.visual-brand { justify-content:center; }
.auth-visual .brand-mark { width:108px; height:108px; border-radius:24px; }
.auth-panel { padding:26px 12px 0; }
.auth-panel h2 { font-size:30px; text-align:center; margin-bottom:32px; }
.auth-panel .stack { gap:12px; }
.auth-panel label { font-size:14px; font-weight:500; color:#e9e1f5; }
.auth-panel input { border:0; border-bottom:1px solid #c6b7df; border-radius:0; background:transparent; color:white; min-height:48px; font-size:18px; padding:10px 4px; caret-color:white; }
.auth-panel input:focus-visible { outline:2px solid #e3d4fa; outline-offset:4px; }
.auth-panel input:autofill { background-color:transparent; color:white; }
.auth-panel input:-webkit-autofill { transition:background-color 99999s; -webkit-text-fill-color:white; caret-color:white; }
.auth-panel .secret-input input { padding-right:52px; }
.auth-panel .secret-input button { color:white; width:44px; height:44px; border-radius:50%; }
.auth-panel .secret-input button:hover:not(:disabled) { color:white; background:#ffffff18; }
.auth-panel button[type=submit] { min-height:52px; border-radius:28px; margin-top:16px; font-size:17px; }
.auth-request-links { display:flex; flex-wrap:wrap; gap:8px; margin-top:16px; }
.auth-request-links a { display:flex; flex:1 1 150px; justify-content:center; align-items:center; min-height:44px; padding:10px 14px; border:1px solid #c6b7df; border-radius:24px; color:#f0e5ff; background:#ffffff0d; text-align:center; text-decoration:none; font-size:14px; }
.auth-request-links a:hover { background:#ffffff22; }
.auth-request-links a:focus-visible { outline:2px solid white; outline-offset:3px; }
.auth-page .alert { max-width:420px; margin:0 auto 24px; background:#42242d; color:#ffb4b4; border-color:#a76b76; }
@media(max-width:760px) {
 .header-inner { width:calc(100% - 32px); min-height:68px; padding:8px 0; }
 .topbar h1 { font-size:20px; }
 .topbar .eyebrow { font-size:10px; }
 .brand-mark { width:36px; height:36px; border-radius:10px; }
 .logout span { display:none; }
 .connection-strip { padding:6px 16px; margin:0; min-height:40px; }
 #connectionLabel { max-width:100px; }
 .panel { padding:20px 16px; }
 .panel-head h2 { font-size:21px; }
 .activation-steps,.wizard-actions { padding-left:16px; padding-right:16px; }
 .shell { padding-bottom:calc(96px + env(safe-area-inset-bottom)); }
 .mobile-tabs { position:fixed; bottom:calc(8px + env(safe-area-inset-bottom)); left:8px; right:8px; z-index:20; margin:0; gap:1px; padding:5px; box-shadow:0 4px 18px #17191c25; }
 .mobile-tabs button { flex-direction:column; min-height:60px; padding:6px 1px; gap:5px; font-size:10px; line-height:1.2; }
 .mobile-tabs button svg { width:21px; height:21px; }
 .service-report { padding:18px; }
 .service-tabs button { min-width:0; flex:1; padding:6px 2px; }
 .auth-page .shell { min-height:calc(100dvh - 68px); width:100%; padding:32px 24px 48px; }
 .auth-panel { padding:24px 0 0; }
 .auth-panel h2 { font-size:28px; }
}
@media(max-height:540px) and (max-width:760px) {
 .mobile-tabs button { flex-direction:row; min-height:40px; font-size:10px; gap:3px; }
 .mobile-tabs button svg { width:17px; height:17px; }
 .shell { padding-bottom:calc(72px + env(safe-area-inset-bottom)); }
 .auth-page .shell { padding-top:12px; }
 .auth-visual .brand-mark { width:64px; height:64px; }
}
@media(prefers-reduced-motion:reduce) { .app-view.is-active { animation:none; } .mobile-tabs button { transition:none; } }
.source-context { padding:12px 14px; border-left:3px solid var(--accent); background:#eaf3f2; overflow-wrap:anywhere; }
.source-context.context-warning { border-color:#a36a12; background:#fff4df; color:#64430f; }
#transmitterTabs { margin:16px 0; }
#transmitterTabs button { min-height:44px; }
.service-card>p { overflow-wrap:anywhere; }
/* Service detail keeps identity, data sources and actions in distinct bands. */
#serviceWorkspace .service-card { border-top:0; margin-top:8px; padding-top:0; }
.service-detail-header { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:12px 24px; padding:0 0 16px; }
.service-detail-header>button { grid-column:2; grid-row:1; justify-self:end; }
.service-detail-header>h2 { grid-column:1; grid-row:1; align-self:center; }
.service-detail-header>.service-facts { grid-column:1/-1; grid-template-columns:max-content minmax(0,1fr) max-content minmax(0,1fr); }
.service-detail-header>.muted { grid-column:1/-1; }
.service-detail-header h2,.service-detail-header p { margin:0; }
.service-detail-header h2 { font-size:24px; overflow-wrap:anywhere; }
.service-facts { display:grid; grid-template-columns:max-content minmax(0,1fr); gap:10px 24px; margin:0; }
.service-facts dt { color:var(--muted); font-weight:400; }
.service-facts dd { margin:0; overflow-wrap:anywhere; font-weight:600; }
.service-card>.source-context { margin:0 0 16px; border-radius:12px; padding:8px 14px; }
.service-card>.service-tabs { margin:0 0 20px; gap:16px; }
.service-status-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:32px; padding-bottom:28px; }
.service-status-block { min-width:0; }
.service-status-block+ .service-status-block { border-left:1px solid var(--line); padding-left:32px; }
.service-status-block h3 { margin:0 0 8px; font-size:18px; }
.service-status-block p { margin:0 0 16px; }
.service-detail-actions { display:flex; flex-wrap:wrap; gap:12px; padding-top:24px; }
.service-card section>details { margin:12px 0; padding:20px 0; }
.service-card summary { min-height:28px; line-height:1.6; }
.service-card section>button { margin:0 12px 12px 0; }
.service-card .service-visit-editor>textarea { margin-bottom:20px; }
.service-card .service-visit-editor>label { display:block; margin:16px 0; }
.service-card section>h3 { margin-top:28px; }
.service-card section>h3:first-child { margin-top:0; }
.service-card .service-records { display:grid; gap:0; min-width:0; }
.service-card .service-records>details { padding:12px 0; margin:0; }
.service-records>button { justify-self:start; margin:6px 0; }
.service-record-paging { display:flex; align-items:center; justify-content:flex-end; gap:16px; padding:16px 0; }
.service-record-paging span { min-width:80px; text-align:center; color:var(--muted); }
.service-record-paging button { width:40px; height:40px; padding:8px; }
.service-card section>h4:first-child { margin-top:0; }
.service-card .service-visit-editor { margin-top:0; padding-top:8px; }
@media(max-width:600px) {
 .service-detail-header { grid-template-columns:minmax(0,1fr); }
 .service-detail-header>button { grid-column:1; grid-row:1; justify-self:start; }
 .service-detail-header>h2 { grid-row:2; }
 .service-detail-header>.service-facts { grid-template-columns:80px minmax(0,1fr); gap:8px 12px; }
 .service-detail-header>.service-facts dd { margin:0; }
 .service-status-grid { grid-template-columns:minmax(0,1fr); gap:24px; }
 .service-status-block+ .service-status-block { border-left:0; border-top:1px solid var(--line); padding:24px 0 0; }
 .service-facts { grid-template-columns:minmax(0,1fr); gap:4px; }
 .service-facts dd:not(:last-child) { margin-bottom:12px; }
 .service-card>.service-tabs { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; }
 .service-detail-actions>button { flex:1 1 220px; }
}
[hidden] { display:none !important; }
/* Shared transient notices and their activity-local history. */
.notice-overlay,.notice-entry{--notice-accent:#d3bcff}
[data-level="success"]{--notice-accent:#8be1bb}[data-level="warning"]{--notice-accent:#ffd28a}[data-level="error"]{--notice-accent:#ffb4b4}
.notice-overlay{position:fixed;inset:auto 12px auto auto;margin:0;width:min(560px,calc(100vw - 24px));max-height:calc(100dvh - 120px);overflow:auto;display:flex;align-items:center;gap:12px;padding:12px;background:#202027;color:#fff;border:1px solid var(--notice-accent);border-radius:8px;box-shadow:0 6px 24px #0003;z-index:10000}
.notice-overlay[hidden]{display:none}.notice-overlay>svg{width:24px;height:24px;flex-shrink:0;color:var(--notice-accent)}
.notice-content{flex:1;min-width:0}.notice-overlay button,.notice-entry button{background:transparent;color:inherit;border:0;box-shadow:none;min-height:44px;border-radius:6px}
.notice-overlay .notice-message{padding:4px;text-align:left;white-space:normal;overflow-wrap:anywhere;line-height:1.5;width:100%;font:inherit}.notice-overlay .notice-action,.notice-entry .notice-action{color:var(--notice-accent);text-align:left;padding:8px 4px}
.notice-overlay .icon-button{flex-shrink:0}.notice-history{width:min(640px,calc(100vw - 24px));max-height:85dvh;padding:24px}.notice-history-list{color:white;padding:0 4px}.notice-entry{padding:16px 0;border-bottom:1px solid var(--notice-accent)}.notice-entry:last-child{border:0}.notice-entry strong{color:var(--notice-accent)}.notice-entry p{margin:8px 0;overflow-wrap:anywhere}.notice-history h2{font-size:20px}.notice-overlay button:focus-visible{outline:2px solid var(--notice-accent);outline-offset:2px}

/* Shared rounded surfaces, without changing the unframed page layout. */
.workflow-dialog,.service-report,.service-photo{border-radius:28px;border-color:#e6e2eb;background:#fafafd;box-shadow:0 16px 56px #17191c38}
dialog::backdrop{background:#17191c6b}
.notice-overlay{border-radius:20px}
.notice-history{background:#202027;color:#fff;border-color:#ffffff18}
.notice-history .panel-head{gap:16px}
.notice-history .icon-button{background:#ffffff0f;color:#fff;border:0;border-radius:50%;flex-shrink:0}
.notice-history button:focus-visible{outline:2px solid #d3bcff;outline-offset:2px}
.notice-overlay button:hover:not(:disabled),.notice-history button:hover:not(:disabled){background:#34343f;color:inherit}
.notice-overlay button:active:not(:disabled),.notice-history button:active:not(:disabled){background:#41414d;color:inherit}
.notice-overlay .notice-action:hover:not(:disabled),.notice-history .notice-action:hover:not(:disabled),.notice-overlay .notice-action:active:not(:disabled),.notice-history .notice-action:active:not(:disabled){color:var(--notice-accent)}
.app-view input:not([type=checkbox]):not([role=switch]),.app-view select,.app-view textarea,dialog input:not([type=checkbox]),dialog select,dialog textarea{border-radius:12px}
.app-view button:not(.device-row):not(.service-tab):not(.icon-button),dialog button{border-radius:22px}
.app-view .icon-button{border-radius:14px}
.console,.alert{border-radius:16px}
.device-row{border-radius:16px;margin:8px 0;border:1px solid var(--line)}
.connection-strip{flex-wrap:wrap}
#connectedDevice{min-width:0;overflow-wrap:anywhere}
.ble-window{display:inline-flex;align-items:center;gap:6px;padding:5px 10px;border-radius:20px;background:#eee7fa;color:#51239a;font-size:13px;font-weight:600;font-variant-numeric:tabular-nums;white-space:nowrap}
.ble-window[hidden]{display:none}.ble-window svg{width:16px;height:16px}
.ble-window.warning{background:#fff0d5;color:#805000}.ble-window.expired{background:#ffe5e5;color:#a02121}
@media(max-width:600px){#connectedDevice{flex:1 1 calc(100% - 28px)}.ble-window{margin-left:18px}#connectionLabel{margin-left:auto}}
/* Authenticated tools and a non-obstructing demo identity. */
.workspace-tools {display:flex;justify-content:flex-end;gap:16px;flex-wrap:wrap;padding:12px 0}
.workspace-tools a,.demo-banner a {display:inline-flex;align-items:center;gap:8px;text-decoration:none;min-height:44px;color:var(--brand);font-weight:600}
.workspace-tools a:hover,.demo-banner a:hover {text-decoration:none}
.workspace-tools a:focus-visible,.demo-banner a:focus-visible {outline:2px solid var(--brand);outline-offset:4px;border-radius:8px}
.workspace-tools svg,.demo-banner svg {width:20px;height:20px;flex-shrink:0}
.demo-banner {display:flex;align-items:center;gap:16px;padding:12px 16px;background:#ede7fb;border-radius:16px;color:#392060;margin-bottom:12px}
.demo-banner span {flex:1;min-width:0}
.demo-banner strong {letter-spacing:0}
.demo-controls {margin:0 0 12px;padding:12px 0;border-bottom:1px solid var(--line)}
.demo-controls summary {cursor:pointer;font-weight:600;overflow-wrap:anywhere}
/* Service section navigation stays outside the document flow. */
.service-section-toggle {position:fixed;right:max(12px,env(safe-area-inset-right));top:50%;transform:translateY(-50%);z-index:30;width:48px;height:48px;padding:12px;border-radius:50%;background:var(--brand);color:white;border:0;box-shadow:0 3px 16px #0002}
.service-section-toggle:hover:not(:disabled){background:#7229dc;color:white}
.service-section-toggle>svg{width:24px;height:24px;transform-origin:center}
.app-view.is-active .section-menu-hint>svg{animation:section-menu-gear 8s linear infinite}
.app-view.is-active .section-menu-hint:hover>svg,.app-view.is-active .section-menu-hint:focus-visible>svg{animation-play-state:paused}
@keyframes section-menu-gear{to{transform:rotate(360deg)}}
@media(prefers-reduced-motion:reduce){.app-view.is-active .section-menu-hint>svg{animation:none}}
.service-section-drawer {position:fixed;inset:50% 12px auto auto;transform:translateY(-50%);margin:0;width:min(280px,calc(100vw - 24px));max-height:calc(100dvh - 140px);overflow:auto;padding:16px;border:1px solid var(--line);border-radius:20px;background:var(--bg);color:var(--text);box-shadow:0 8px 32px #0003}
.service-section-drawer:popover-open{animation:service-drawer-in .18s ease-out}
.service-section-drawer .panel-head h3{margin:0;font-size:16px}
.service-section-drawer .service-tabs{display:flex;flex-direction:column;gap:8px;margin:16px 0 0;padding:0;border:0}
.service-section-drawer .service-tabs button{flex:none;flex-direction:row;justify-content:flex-start;gap:12px;min-height:44px;width:100%;padding:8px 12px;border-radius:12px;font-size:14px}
.service-section-drawer .service-tabs button[aria-selected=true]{background:#ece4fa;color:#47149a}
.service-section-heading{margin:20px 0;font-size:18px}
.service-card>section{padding-right:52px}
.app-view[data-view="runtime"]>[role="tabpanel"]{padding-right:52px}
.service-card summary,.demo-controls summary{display:flex;align-items:center;gap:12px;list-style:none;padding:12px 0;min-height:44px}
.service-card summary::-webkit-details-marker,.demo-controls summary::-webkit-details-marker{display:none}
.service-card summary::after,.demo-controls summary::after{content:'';width:8px;height:8px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(45deg);transition:transform .18s ease;flex-shrink:0;margin:0 6px 4px auto}
.service-card details[open]>summary::after,.demo-controls[open]>summary::after{transform:rotate(225deg);margin-bottom:0}
@keyframes service-drawer-in{from{opacity:0;translate:32px 0}to{opacity:1;translate:0 0}}
@media(prefers-reduced-motion:reduce){.service-section-drawer:popover-open{animation:none}.service-card summary::after,.demo-controls summary::after{transition:none}}
.demo-options {display:grid;grid-template-columns:minmax(0,1fr) minmax(0,2fr) auto;align-items:end;gap:16px;padding:16px 0 4px}
.demo-options label {min-width:0}
.demo-options select {width:100%;min-width:0}
@media(max-width:760px){.demo-options{grid-template-columns:minmax(0,1fr)}.demo-options button{width:100%}}
@media(max-width:480px){.workspace-tools{justify-content:space-between;gap:8px}.demo-banner{gap:10px;font-size:13px}}

/* Shared workspace chrome: a dark frame with a quiet, opaque work surface. */
.workspace-page{background:linear-gradient(115deg,#401468,#17191c);background-attachment:fixed}
.workspace-page .topbar{position:sticky;top:0;z-index:35;background:linear-gradient(105deg,#401468,#24172f 55%,#17191c)}
.workspace-page .shell{width:100%;max-width:none;border-radius:24px 24px 0 0;background:var(--bg);padding:16px max(24px,calc((100% - 1200px)/2)) 48px;min-height:calc(100dvh - 76px)}
.workspace-page .header-inner{transition:padding .18s ease;min-height:76px}
.workspace-page .topbar.is-compact .header-inner{min-height:60px;padding-top:4px;padding-bottom:4px}
.workspace-page .brand>div{min-width:0}
.workspace-page .brand{flex:1;min-width:0}
.workspace-page .logout{flex-shrink:0}
.workspace-page .logout>button[type=submit]{display:none}
.workspace-page .topbar h1{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.workspace-page .topbar.is-compact h1{font-size:18px}
.workspace-page .topbar .eyebrow{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.workspace-page .mobile-tabs{background:#201d27eb;backdrop-filter:blur(14px)}
.profile-trigger{border:1px solid #ffffff30;border-radius:24px;background:#ffffff12;color:white;min-height:44px}
.profile-trigger:hover:not(:disabled){background:#ffffff24;color:white}
.profile-trigger span{max-width:160px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.profile-open{overflow:hidden}
.profile-page{position:fixed;inset:0;border:0;margin:0;width:100%;max-width:none;height:100dvh;max-height:none;padding:0;background:linear-gradient(145deg,#401468 0,#24172f 240px,#17191c 540px);color:#fff;overflow:auto}
.profile-page::backdrop{background:#17191c99}
.profile-heading{position:sticky;top:0;z-index:1;display:flex;align-items:center;gap:16px;max-width:720px;margin:auto;padding:16px 24px;background:#24172ff2;backdrop-filter:blur(12px)}
.profile-heading h2{margin:0;font-size:20px;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.profile-heading button{background:#ffffff15;border-color:#ffffff30;color:white;border-radius:50%;min-height:44px;width:44px}
.profile-content{max-width:720px;margin:auto;padding:12px 24px 48px}
.profile-identity{text-align:center;padding:12px 0 28px}
.profile-identity>svg{width:64px;height:64px;padding:16px;border-radius:50%;background:#ffffff16;margin-bottom:12px}
.profile-identity h3{font-size:24px;overflow-wrap:anywhere;margin-bottom:6px}
.profile-identity p{color:#d6cfe0;margin:0}
.profile-page details{background:#ffffff0d;border-bottom:1px solid #ffffff20;padding:0 18px}
.profile-page details:first-of-type{border-radius:20px 20px 0 0}
.profile-page details:last-of-type{border-radius:0 0 20px 20px}
.profile-page summary{display:flex;align-items:center;gap:14px;list-style:none;min-height:68px;padding:16px 0}
.profile-page summary::-webkit-details-marker{display:none}
.profile-page summary>svg{width:22px;height:22px;flex-shrink:0;color:#d3b5fa}
.profile-page summary::after{content:'';width:7px;height:7px;border-right:2px solid #d6cfe0;border-bottom:2px solid #d6cfe0;transform:rotate(-45deg);margin-left:auto;flex-shrink:0}
.profile-page details[open]>summary::after{transform:rotate(45deg)}
.profile-page details>div,.profile-page details>dl,.profile-page details>label{padding:0 0 20px;margin:0}
.profile-account{display:grid;grid-template-columns:minmax(80px,1fr) minmax(0,2fr);gap:14px}
.profile-account dt{color:#d6cfe0;margin:0}.profile-account dd{font-size:14px}
.profile-links,.profile-downloads{display:grid;gap:12px}
.profile-page a{color:#f0e6ff;min-height:44px;display:flex;align-items:center;gap:10px;text-decoration:none}
.profile-page a svg{width:18px;height:18px}
.profile-page button:not(.profile-close){background:#ffffff12;color:white;border-color:#ffffff30;border-radius:24px;min-height:44px}
.profile-page button:hover:not(:disabled){background:#ffffff24;color:white}
.profile-preference{display:flex;align-items:center;justify-content:space-between;gap:16px}
.profile-signout{margin-top:24px}
.reduce-motion *,.reduce-motion *::before,.reduce-motion *::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
@media(max-width:760px){
 .workspace-page .shell{padding:12px 16px calc(104px + env(safe-area-inset-bottom));border-radius:20px 20px 0 0}
 .workspace-page .panel,.workspace-page .activation-steps,.workspace-page .wizard-actions,.workspace-page .connection-strip{padding-left:0;padding-right:0}
 .workspace-page .header-inner{min-height:72px;gap:10px}
 .workspace-page .logout{gap:6px}
 .profile-trigger{width:44px;padding:10px;flex-shrink:0}
 .profile-content{padding-left:16px;padding-right:16px}
 .profile-heading{padding:12px 16px}
}
@media(prefers-reduced-motion:reduce){.workspace-page .header-inner{transition:none}}
/* Continuous ADTronics workspace; QR images keep their printable white surface. */
html:has(.workspace-page){background:#141219}
.workspace-page{--bg:#141219;--text:#f5f2fa;--muted:#c3bbcf;--line:#4c435b;--accent:#88dfd3;--danger:#ffb4b4;--brand:#cbb0f5;--field:#302a3b;color-scheme:dark;background:linear-gradient(180deg,#351452 0,#22182f 440px,#141219 100vh) fixed;color:var(--text)}
.workspace-page .shell{background:transparent;border-radius:0}
.workspace-page{background-color:#141219}
.workspace-page .topbar{background:linear-gradient(#351452ee,#291b36e6);backdrop-filter:blur(16px);box-shadow:0 14px 22px #15111960}
.workspace-page .panel,.workspace-page .connection-strip,.workspace-page .activation-steps,.workspace-page .wizard-actions{background:transparent}
.workspace-page button,.workspace-page input,.workspace-page select,.workspace-page textarea{background:var(--field);color:var(--text);border-color:var(--line)}
.workspace-page button:hover:not(:disabled){background:#44384f;color:var(--text);border-color:#81708f}
.workspace-page button.primary{background:#e8ddfa;color:#21172d;border-color:#e8ddfa}
.workspace-page button.primary:hover:not(:disabled){background:#d7c5f2;color:#21172d}
.workspace-page input::placeholder,.workspace-page textarea::placeholder{color:var(--muted);opacity:1}
.workspace-page input:disabled,.workspace-page select:disabled{background:#25212d;color:var(--muted)}
.workspace-page input[role=switch]{background:#52485e}.workspace-page input[role=switch]:checked{background:#7c4ac4}
.workspace-page .mobile-tabs{border:1px solid #ffffff20;background:#201c28eb;box-shadow:0 -10px 24px #14121970}
.workspace-page .mobile-tabs button{background:transparent;color:var(--muted)}
.workspace-page .mobile-tabs button.is-active{background:#46404f;color:#fff;border-color:transparent}
.workspace-page .device-row,.workspace-page th,.workspace-page tbody tr,.workspace-page .demo-banner{background:#282330;color:var(--text)}
.workspace-page tbody tr:hover{background:#332b3e}
.workspace-page #serviceWorkspace button[aria-pressed="true"]{color:#e2caff;background:#392a46}
.workspace-page #serviceWorkspace button[aria-pressed="true"] svg{fill:none}
.workspace-page .service-photo-previews img{background:#201c28}
.workspace-page .badge.ok,.workspace-page .source-context{background:#193b39;color:#88dfd3;border-color:#42756e}
.workspace-page .app-notice{background:#193b39;color:#88dfd3;border-color:#42756e}
.workspace-page .app-notice.error{background:#42242d;color:#ffb4b4;border-color:#a76b76}
.workspace-page .badge.bad,.workspace-page .alert.error{background:#42242d;color:#ffb4b4;border-color:#a76b76}
.workspace-page .source-context.context-warning,.workspace-page .ble-window.warning{background:#42341e;color:#ffcf86}
.workspace-page .ble-window{background:#392a46;color:#e2caff}.workspace-page .ble-window.expired{background:#42242d;color:#ffb4b4}
.workspace-page .provisioning-status.success{color:#88dfd3}
.workspace-page .provisioning-status.warning{color:#ffcf86}
.workspace-page .factory-label{background:#fff;color:#17191c}.workspace-page .factory-label .muted,.workspace-page .factory-label span{color:#56636c}
.workspace-page dialog,.workspace-page .service-section-drawer{background:#282330;color:var(--text);border-color:var(--line)}
.workspace-page .service-section-toggle{background:#6018c8;color:#fff}
.workspace-page .service-tabs button{background:transparent;color:var(--muted)}
.workspace-page .service-tabs button[aria-selected=true]{background:#44384f;color:#fff}
.workspace-page .workflow-dialog:not(.notice-history),.workspace-page .service-report{position:fixed;inset:16px 16px 16px auto;margin:0;width:min(560px,calc(100vw - 32px));max-height:calc(100dvh - 32px);border-radius:20px}
.workspace-page dialog[open]{animation:workspace-panel-in .2s ease-out}
.workspace-page dialog::backdrop{background:#100b17a8;backdrop-filter:blur(3px);animation:workspace-dim-in .2s ease-out}
.workspace-page .service-section-drawer::backdrop{background:#100b1770;backdrop-filter:blur(2px)}
.workspace-page .notice-overlay button,.workspace-page .notice-history button{background:transparent;color:inherit;border-color:transparent}
.workspace-page .notice-overlay button:hover:not(:disabled),.workspace-page .notice-history button:hover:not(:disabled){background:#41414d;color:inherit}
@keyframes workspace-panel-in{from{opacity:0;translate:24px 0}to{opacity:1;translate:0 0}}
@keyframes workspace-dim-in{from{background:#100b1700}to{background:#100b17a8}}
@media(prefers-reduced-motion:reduce){.workspace-page dialog[open],.workspace-page dialog::backdrop{animation:none}}
@media(max-width:760px){.workspace-page .shell{border-radius:0}.workspace-page .workflow-dialog:not(.notice-history),.workspace-page .service-report{inset:auto 12px 12px;margin:0;width:calc(100vw - 24px);max-height:85dvh}}
/* Leave the short editing viewport to the form, not fixed navigation. */
@media(max-height:500px){
 .workspace-page .topbar{position:static}
 .workspace-page .mobile-tabs{position:static;margin:12px 0}
}
.visual-keyboard .workspace-page .topbar{position:static}
.visual-keyboard .workspace-page .mobile-tabs{display:none}
.visual-keyboard .workspace-page dialog[open]{top:calc(var(--visible-top) + 12px);bottom:auto;max-height:calc(var(--visible-height) - 24px);overflow:auto}
.visual-keyboard .workspace-page .profile-page{height:calc(var(--visible-height) - 24px)}
#deviceTransferDialog .stack{gap:18px}
#deviceTransferDialog .workflow-message{margin:18px 0}
#deviceTransferDialog .button-row{margin-top:20px}
/* Shared Android/web task and directory hierarchy. */
.connected-tasks{margin-bottom:28px}
.connected-tasks>h3{font-size:20px;margin:0 0 22px}
.action-group{margin:24px 0}
.action-group h4{font-size:16px;margin:0 0 12px}
.workspace-page button.action-row{display:flex;align-items:center;gap:16px;width:100%;min-height:72px;height:auto;padding:16px 18px;border:1px solid transparent;border-radius:8px;background:#282330;text-align:left;white-space:normal;letter-spacing:0}
.workspace-page .app-view button.action-row:not(.device-row):not(.service-tab):not(.icon-button){border-radius:8px}
.action-row+.action-row{margin-top:8px}
.action-row>svg{width:24px;height:24px;flex-shrink:0;color:#d5b9fa}
.action-row>svg:last-child{width:20px;height:20px;color:var(--muted)}
.action-copy{display:grid;gap:6px;min-width:0;flex:1;overflow-wrap:anywhere}
.action-copy strong{font-size:16px;line-height:1.4;font-weight:600}
.action-copy small{display:block;color:var(--muted);font-size:14px;line-height:1.5;font-weight:400}
.workspace-page .action-danger strong,.workspace-page .action-danger>svg{color:#ffb4b4}
.service-workspace>.service-controls{display:grid;grid-template-columns:minmax(0,1fr);gap:26px;margin:24px 0}
.directory-search{display:grid;grid-template-columns:minmax(0,1fr) 44px;gap:12px;align-items:end}
.directory-search h3{grid-column:1/-1}
.directory-search button{width:44px;min-height:44px;padding:10px}
.directory-filters{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.directory-filters h3{grid-column:1/-1}
.directory-search h3,.directory-filters h3,.directory-list h3{font-size:18px;margin:0 0 4px}
.directory-item{display:flex;align-items:center;gap:8px;margin:10px 0}
.directory-item>.action-row{flex:1;min-width:0}
.directory-item>button:last-child{width:44px;min-height:44px;padding:10px;flex-shrink:0;background:transparent;border:0}
.directory-item>button[aria-pressed=true]{color:#e2caff}
.directory-item>button[aria-pressed=true] svg{fill:#493457}
.directory-state.state-ok{color:#88dfd3}
.directory-state.state-errors{color:#ffb4b4}
.directory-state.state-late,.directory-state.state-activation{color:#ffcf86}
.legacy-device-editor{margin-top:32px}
.legacy-device-editor>.devices-layout{padding-top:20px}
.service-workspace small{overflow-wrap:anywhere}
.service-workspace .service-card{border-top:0;margin-top:8px;padding-top:0}
.workspace-page #reactivationDialog .error{color:#ffb4b4}
@media(max-width:600px){.directory-filters{grid-template-columns:minmax(0,1fr)}.workspace-page button.action-row{gap:12px;padding:16px 12px}.action-row>svg{width:22px;height:22px}}
.meter-illustration{display:flex;align-items:center;gap:20px;margin:16px 0;padding:16px;background:#282330;border-radius:8px;min-width:0}
.meter-image{width:144px;height:152px;object-fit:contain;flex-shrink:0;background:transparent}
.meter-illustration figcaption{display:grid;gap:10px;min-width:0;color:var(--text);overflow-wrap:anywhere}
.meter-illustration figcaption strong{font-size:16px}
.meter-illustration figcaption small{font-size:13px;color:var(--muted);line-height:1.5}
.meter-thumbnail{width:56px;height:64px;object-fit:contain;flex-shrink:0;background:transparent}
.device-overview>.connected-meter-illustration{grid-column:1/-1}
@media(max-width:380px){.meter-illustration{flex-direction:column;align-items:flex-start}.meter-image{align-self:center;width:100%;height:170px}}
.transfer-feedback{position:fixed;inset:50% auto auto 50%;transform:translate(-50%,-50%);margin:0;box-sizing:border-box;display:flex;flex-direction:column;align-items:center;gap:0;width:min(320px,calc(100vw - 48px));padding:22px 24px 24px;border:1px solid #a385d1;border-radius:28px;background:linear-gradient(145deg,#54288b,#312046 55%,#20172d);color:#faf5ff;box-shadow:0 16px 52px #12081e77,0 0 30px #a855f72a;pointer-events:none;z-index:1000;text-align:center;font-size:12px;line-height:1.4}
.transfer-feedback[hidden]{display:none}
.transfer-feedback small{font-size:10px;letter-spacing:.12em;color:#d0bbf0}
.transfer-feedback strong{font-size:21px;line-height:1.3;overflow-wrap:anywhere}
.transfer-feedback>span{padding-top:7px;color:#d5c6e8}
.transfer-feedback svg{width:132px;height:50px;margin:18px 0 16px;flex-shrink:0;stroke:#f0c7ff;stroke-width:2;fill:none;stroke-linecap:round;stroke-linejoin:round}
.transfer-feedback path:nth-of-type(2){stroke:#8de4d4}
.transfer-feedback circle{fill:#d3a7ff;stroke:none;animation:transfer-dot 1.5s ease-in-out infinite}
.transfer-feedback circle:nth-of-type(2){fill:#b3d9ff}
.transfer-feedback circle:nth-of-type(3){fill:#8de4d4}
.transfer-feedback::backdrop{background:none;pointer-events:none}
@keyframes transfer-dot{0%,100%{opacity:.3}50%{opacity:1}}
.notice-success-check{color:#8be1bb;fill:none;stroke:currentColor;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round}
.notice-success-check path{stroke-dasharray:40;stroke-dashoffset:0;animation:confirmed-check .42s ease-out}
@keyframes confirmed-check{from{stroke-dashoffset:40}to{stroke-dashoffset:0}}
[id^=transmitter-section-][role=tabpanel]:not([hidden]),[id^=service-section-][role=tabpanel]:not([hidden]){animation:view-in .18s ease-out}
@media(prefers-reduced-motion:reduce){.transfer-feedback circle,.notice-success-check path,[role=tabpanel]{animation:none!important}}
.workspace-section-tabs{display:flex;position:static;flex-wrap:wrap;gap:6px;width:100%;margin:16px 0 20px;padding:5px;border:1px solid var(--line);border-radius:14px;background:#22182f}
.workspace-section-tabs[role=tablist] button{flex:1 1 120px;min-width:0;min-height:48px;flex-direction:row;justify-content:center;gap:8px;padding:10px 12px;border:0;border-radius:10px;color:var(--muted);background:transparent}
.workspace-section-tabs[role=tablist] button[aria-selected=true]{color:#fff;background:#4a355f;box-shadow:inset 0 -2px #c9a6ff}
.workspace-section-tabs[role=tablist] button svg{width:20px;height:20px;padding:0;background:transparent;color:inherit;flex-shrink:0}
.workspace-section-tabs button:focus-visible{outline:2px solid #d5baff;outline-offset:2px}
.directory-next-step{color:#d8c5f0;line-height:1.45}
.directory-guidance{margin:12px 0;padding:14px 16px;border:1px solid #665078;border-radius:12px;background:#2c203a}
.meter-illustration.meter-compact{flex-direction:row;align-items:center;padding:10px 14px;gap:14px}
.meter-compact .meter-image{width:68px;height:76px;align-self:center;flex:0 0 68px}
.meter-compact figcaption{min-width:0}
@media(max-width:520px){.workspace-section-tabs[role=tablist] button{flex-basis:calc(50% - 6px);font-size:13px}.service-status-grid{grid-template-columns:minmax(0,1fr)}}
.workspace-section-tabs[role=tablist]{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px}
.source-context.context-neutral{background:#2c2436;color:var(--muted)}
.service-workspace>.service-controls{gap:16px;margin:16px 0}
.directory-search h3,.directory-filters h3{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip-path:inset(50%)}
.directory-filters{gap:12px}
@media(max-width:600px){.directory-filters{grid-template-columns:repeat(2,minmax(0,1fr))}.directory-filters>label:last-child{grid-column:1/-1}}
@media(max-width:520px){.workspace-section-tabs[role=tablist]{grid-template-columns:repeat(2,minmax(0,1fr))}}