:root{
  --bg:#06131e;--bg2:#091b29;--panel:#102634;--panel2:#153447;--line:#254455;
  --text:#f4f8fa;--muted:#9eb1be;--cyan:#55f5ff;--lime:#b8ff4a;--red:#ff7d80;--amber:#ffd166;
  --radius:18px;
}
*{box-sizing:border-box}
.console-connection{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:20px}
.console-connection input,.live-panels input,#live-faq-form input,#live-faq-form textarea{background:var(--bg);color:var(--text);border:1px solid var(--line);border-radius:8px;padding:10px;max-width:100%}
.console-connection [role=status]{color:var(--amber);flex-basis:100%;overflow-wrap:anywhere}
.live-panels{display:grid;gap:18px}.live-panels pre{white-space:pre-wrap;overflow-wrap:anywhere;max-width:60vw;max-height:320px;overflow:auto;font-size:12px}
#live-faq-form{margin-bottom:18px;display:grid;gap:10px}#live-faq-form label{display:grid;gap:4px}
button:disabled{opacity:.45;cursor:wait}
.catalog-form{display:grid;gap:12px;margin-bottom:18px}.catalog-form p{color:var(--muted)}.catalog-form label{display:grid;gap:6px}.catalog-form input,.catalog-form textarea,.catalog-form select{background:var(--bg);color:var(--text);padding:10px;border-radius:9px;border:1px solid var(--line);max-width:100%;min-width:0}
body{margin:0;background:radial-gradient(circle at 80% 0,#102c3e 0,#06131e 46%);color:var(--text);font:14px/1.5 Inter,ui-sans-serif,system-ui,-apple-system,"PingFang SC",sans-serif}
.app-shell{display:flex;min-height:100vh}
.sidebar{width:256px;padding:28px 16px 20px;background:rgba(6,19,30,.82);border-right:1px solid rgba(130,214,234,.12);display:flex;flex-direction:column}
.brand{display:flex;align-items:center;gap:11px;padding:0 10px 24px}
.brand img{width:42px;height:42px;border-radius:11px;object-fit:cover}
.brand strong{display:block;font-size:20px;letter-spacing:.12em}
.brand small{display:block;color:var(--muted);font-size:11px;margin-top:2px}
.sidebar nav{display:grid;gap:5px;overflow:auto}
.nav-item{border:0;border-radius:12px;background:transparent;color:var(--muted);font:inherit;text-align:left;padding:10px 13px;display:flex;align-items:center;gap:12px;cursor:pointer;min-height:40px}
.nav-item:hover,.nav-item.selected{background:linear-gradient(90deg,rgba(85,245,255,.16),rgba(85,245,255,.04));color:var(--text)}
.nav-item.selected{box-shadow:inset 3px 0 var(--cyan)}
.nav-icon{width:22px;text-align:center;color:var(--cyan);font-size:17px}
.sidebar-note{margin-top:auto;border:1px solid var(--line);background:rgba(16,38,52,.62);padding:12px;border-radius:13px;color:var(--muted);font-size:12px}
.sidebar-note small{display:block;line-height:1.4;margin-top:5px;color:#75909e}
.status-dot{display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--lime);box-shadow:0 0 10px var(--lime);margin-right:5px}
.main{flex:1;max-width:1500px;padding:38px clamp(24px,4vw,64px) 64px}
.topbar{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:38px}
.eyebrow{font-size:11px;letter-spacing:.15em;text-transform:uppercase;color:var(--cyan)}
h1{font-size:14px;font-weight:500;color:var(--muted);margin:8px 0 0}
h2{font-size:35px;line-height:1.1;letter-spacing:-.03em;margin:10px 0}
h3{font-size:17px;margin:0 0 3px}
.top-actions{display:flex;gap:11px;align-items:center}
.lang-toggle,.ghost,.row-action{background:transparent;color:var(--muted);border:1px solid var(--line);border-radius:10px;padding:9px 14px;cursor:pointer;font:inherit;min-height:40px}
.lang-toggle:hover,.ghost:hover,.row-action:hover{color:var(--cyan);border-color:var(--cyan)}
.row-action.danger:hover{color:var(--red);border-color:var(--red)}
.avatar{width:38px;height:38px;border-radius:50%;background:var(--panel2);display:grid;place-items:center;color:var(--cyan);font-size:12px}
:focus-visible{outline:2px solid var(--cyan);outline-offset:2px;border-radius:6px}
.hero{display:flex;align-items:end;justify-content:space-between;border:1px solid rgba(85,245,255,.18);border-radius:var(--radius);padding:28px 30px;background:linear-gradient(135deg,rgba(16,56,72,.84),rgba(10,26,38,.84));margin-bottom:18px}
.hero p,.page-title p,.panel-head p{color:var(--muted);margin:0}
.primary{border:0;border-radius:11px;background:var(--cyan);color:#06131e;padding:12px 17px;font-weight:700;cursor:pointer;min-height:40px}
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin:18px 0}
.stat{border:1px solid var(--line);background:rgba(16,38,52,.72);border-radius:14px;padding:16px 18px;min-height:100px}
.stat span,.stat small{display:block;color:var(--muted);font-size:12px}
.stat strong{font-size:28px;display:block;margin:5px 0;color:var(--text)}
.stat small{color:var(--lime)}
.grid-2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}
.panel{border:1px solid var(--line);background:rgba(16,38,52,.7);border-radius:var(--radius);padding:20px}
.panel-head{display:flex;justify-content:space-between;align-items:start;margin-bottom:15px}
.list-row{min-height:62px;border-top:1px solid rgba(158,177,190,.12);display:flex;align-items:center;gap:11px}
.device-mark,.signal{width:34px;height:34px;border-radius:10px;background:#071820;display:grid;place-items:center;color:var(--cyan);font-size:12px;font-weight:700}
.signal{font-size:23px}
.row-main{min-width:0;flex:1}
.row-main strong,.row-main span{display:block}
.row-main span{color:var(--muted);font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.value{font-size:13px;color:var(--cyan)}
.pill{display:inline-flex;align-items:center;gap:6px;font-size:11px;white-space:nowrap;color:var(--muted)}
.pill i{display:block;width:7px;height:7px;border-radius:50%;background:var(--muted)}
.pill.connected i,.pill.completed i,.pill.live i,.pill.active i,.pill.paid i,.pill.enabled i,.pill.healthy i,.pill.resolved i{background:var(--lime);box-shadow:0 0 7px var(--lime)}
.pill.processing i,.pill.pending i,.pill.current i,.pill.downloading i,.pill.installing i,.pill.importing i,.pill.in_progress i{background:var(--cyan);box-shadow:0 0 7px var(--cyan)}
.pill.failed i,.pill.suspended i,.pill.past_due i,.pill.rejected i,.pill.down i{background:var(--red)}
.pill.canceled i,.pill.refunded i,.pill.offline i,.pill.disabled i,.pill.recovered i{background:var(--muted)}
.pill.paused i,.pill.idle i,.pill.degraded i,.pill.new i{background:var(--amber);box-shadow:0 0 7px var(--amber)}
.page-title{margin-bottom:25px}
.toolbar{display:flex;gap:10px;justify-content:space-between;margin-bottom:15px;flex-wrap:wrap}
.toolbar input{flex:1;max-width:430px;min-height:40px;background:var(--panel);border:1px solid var(--line);border-radius:10px;padding:11px 14px;color:var(--text);font:inherit;outline:none}
.toolbar input:focus{border-color:var(--cyan)}
.segmented{display:flex;border:1px solid var(--line);border-radius:10px;padding:3px;flex-wrap:wrap}
.segmented button{border:0;background:transparent;color:var(--muted);padding:7px 12px;border-radius:7px;cursor:pointer;min-height:34px;font:inherit}
.segmented button.active{background:var(--panel2);color:var(--text)}
.table-panel{padding:4px 10px;overflow:auto}
table{width:100%;border-collapse:collapse;min-width:720px}
th,td{text-align:left;padding:16px 10px;border-bottom:1px solid rgba(158,177,190,.12);white-space:nowrap}
th{font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);font-weight:500}
td{color:#dbe5e9}
td small.table-sub{display:block;color:var(--muted);font-size:11px;margin-top:2px}
td.wrap-cell{white-space:normal;max-width:260px}
.battery{display:inline-block;width:45px;height:7px;border:1px solid var(--line);border-radius:7px;overflow:hidden;margin-right:8px;vertical-align:middle}
.battery span{display:block;height:100%;background:var(--lime)}
.battery.low span{background:var(--red)}
.progress{display:inline-block;width:110px;height:8px;border:1px solid var(--line);border-radius:8px;overflow:hidden;vertical-align:middle;background:#071820}
.progress span{display:block;height:100%;background:linear-gradient(90deg,var(--cyan),var(--lime))}
.language-list{display:grid;gap:7px}
.language-option{display:flex;justify-content:space-between;align-items:center;background:rgba(7,24,32,.7);color:var(--text);border:1px solid transparent;border-radius:11px;padding:12px 14px;font:inherit;cursor:pointer;text-align:left;min-height:44px}
.language-option:hover,.language-option.selected{border-color:var(--cyan);background:rgba(85,245,255,.1)}
.language-option.selected span:last-child{color:var(--lime);font-size:18px}
.health-score{color:var(--lime);font-weight:700}
.health-row{display:flex;justify-content:space-between;align-items:center;border-top:1px solid rgba(158,177,190,.12);padding:16px 0;color:var(--muted);gap:10px;flex-wrap:wrap}
.email-config-panel{margin-top:18px}
.email-meta-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:22px}
.email-meta-grid .health-row{min-width:0}
.email-meta-grid code{color:var(--cyan);font-size:12px;overflow-wrap:anywhere;text-align:right}
.panel-note{color:var(--muted);font-size:12px;margin:8px 0 0}
select.lang-toggle{appearance:none;-webkit-appearance:none;padding-right:26px;background-image:linear-gradient(45deg,transparent 50%,var(--muted) 50%),linear-gradient(135deg,var(--muted) 50%,transparent 50%);background-position:calc(100% - 16px) 55%,calc(100% - 11px) 55%;background-size:5px 5px;background-repeat:no-repeat}
select.lang-toggle option{background:var(--panel);color:var(--text)}
.empty-cell{text-align:center;color:var(--muted);padding:30px 10px!important;white-space:normal}
.empty-panel{padding:44px;text-align:center;color:var(--muted)}
.plan-tag{display:inline-block;border:1px solid rgba(85,245,255,.3);border-radius:8px;padding:2px 9px;font-size:11px;color:var(--cyan)}
.filter-group{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.ent-cell{white-space:normal;min-width:200px}
.ent-chip{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--line);border-radius:8px;padding:3px 8px;margin:2px 5px 2px 0;font-size:11px;color:var(--muted)}
.ent-chip.on{border-color:rgba(184,255,74,.45);color:var(--text)}
.chip-btn{border:0;background:transparent;color:var(--cyan);cursor:pointer;font:inherit;font-size:11px;padding:4px 0 4px 6px;border-left:1px solid var(--line);margin-left:2px;min-height:24px}
.chip-btn:hover{text-decoration:underline}
.locale-chip{display:inline-block;border:1px solid var(--line);border-radius:7px;padding:2px 7px;margin:2px 4px 2px 0;font-size:11px;color:var(--cyan)}
.consent-panel{margin-top:18px}
.cap-yes{color:var(--lime);font-weight:700}
.cap-no{color:var(--muted)}
.faq-form .form-row{display:flex;gap:10px;flex-wrap:wrap}
.faq-form input{flex:1;min-width:220px;min-height:40px;background:var(--panel);border:1px solid var(--line);border-radius:10px;padding:11px 14px;color:var(--text);font:inherit;outline:none}
.faq-form input:focus{border-color:var(--cyan)}
.api-banner{display:flex;justify-content:space-between;align-items:center;gap:16px;border:1px solid var(--line);border-radius:14px;padding:13px 16px;margin:0 0 16px;background:rgba(16,38,52,.72)}
.api-banner strong,.api-banner span{display:block}.api-banner span{font-size:12px;color:var(--muted);margin-top:2px}.api-banner code{font-size:11px;color:var(--muted);white-space:nowrap}.api-banner input{min-width:190px;min-height:36px;background:#071820;border:1px solid var(--line);border-radius:8px;color:var(--text);padding:7px 10px;font:inherit}.api-banner input:focus{border-color:var(--cyan);outline:0}.mock-api{border-color:rgba(255,209,102,.35)}.mock-api strong{color:var(--amber)}.connected-api{border-color:rgba(184,255,74,.4)}.connected-api strong{color:var(--lime)}
.provider-editor{margin-bottom:16px;border-color:rgba(85,245,255,.42);background:linear-gradient(135deg,rgba(17,56,72,.9),rgba(16,38,52,.78))}.provider-form-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.provider-form-grid label{display:grid;gap:6px;color:var(--muted);font-size:12px}.provider-form-grid label.wide{grid-column:1/-1}.provider-form-grid input,.provider-form-grid select{width:100%;min-height:40px;border:1px solid var(--line);border-radius:9px;background:#071820;color:var(--text);font:inherit;padding:9px 11px}.provider-form-grid input:focus,.provider-form-grid select:focus{border-color:var(--cyan);outline:0}.provider-form-grid small{font-size:11px;color:#75909e}.switch-line{display:flex!important;align-items:center;grid-template-columns:none!important;gap:8px!important;padding-top:26px}.switch-line input{width:17px!important;min-height:17px!important;accent-color:var(--cyan)}.form-actions{display:flex;gap:9px;border-top:1px solid rgba(158,177,190,.12);margin-top:16px;padding-top:14px}.model-kind,.route-badge{display:inline-block;padding:4px 8px;border-radius:7px;font-size:11px;background:rgba(85,245,255,.1);border:1px solid rgba(85,245,255,.3);color:var(--cyan)}.route-badge{color:var(--lime);border-color:rgba(184,255,74,.4);background:rgba(184,255,74,.08)}.endpoint-cell{max-width:200px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.provider-table code{font-size:11px;color:#bdd3dc}.inline-actions{display:flex;gap:5px;margin-top:6px}.inline-actions .row-action{padding:4px 7px;font-size:11px;min-height:28px}
@media(max-width:900px){
  .sidebar{width:200px}
  .grid-2{grid-template-columns:1fr}
  .main{padding:25px 20px}
  .stats{grid-template-columns:repeat(2,1fr)}
  .filter-group{width:100%}
  .provider-form-grid{grid-template-columns:1fr}.provider-form-grid label.wide{grid-column:auto}.switch-line{padding-top:5px}.api-banner{align-items:flex-start;flex-direction:column;gap:5px}
}
@media(max-width:640px){
  .app-shell{display:block}
  .sidebar{width:100%;padding:15px;position:sticky;top:0;z-index:2;backdrop-filter:blur(12px)}
  .brand{padding:0 4px 12px}
  .sidebar nav{display:flex;overflow:auto}
  .nav-item{padding:9px 12px;white-space:nowrap}
  .sidebar-note{display:none}
  .main{padding:20px 14px}
  .topbar{margin-bottom:24px}
  .topbar h1{display:none}
  .top-actions{gap:6px}
  .hero{display:block;padding:20px}
  .hero .primary{margin-top:14px}
  .stats{gap:8px}
  .stat{padding:12px;min-height:84px}
  .stat strong{font-size:22px}
  .grid-2{gap:12px}
  .email-meta-grid{grid-template-columns:1fr}
}

/* Compact native checkboxes inside a full-size, clickable keyboard label. */
.catalog-form fieldset{border:0;padding:0;margin:0;min-width:0}
.catalog-form fieldset:disabled{opacity:.65}
.catalog-form .checkbox-line{display:flex;align-items:center;gap:10px;min-height:44px;cursor:pointer;padding:8px 0}
.catalog-form input[type=checkbox],.provider-form-grid input[type=checkbox]{width:18px!important;height:18px!important;min-height:18px!important;padding:0;flex:0 0 18px;accent-color:var(--cyan)}
.catalog-form input:not([type=checkbox]),.catalog-form textarea,.catalog-form select{width:100%;font:inherit}
.catalog-form textarea{resize:vertical}
.catalog-actions{display:flex;gap:8px;flex-wrap:wrap;min-width:150px}
.catalog-actions button{min-height:44px}
.hardware-notice{display:block;color:var(--amber);white-space:normal;max-width:260px;margin-top:6px}
.main{min-width:0;width:calc(100% - 256px)}
.panel,.live-panels,.stats,.stat,.console-connection{min-width:0}
.live-panels pre{max-width:min(60vw,640px)}
.live-panels td details summary{white-space:normal;overflow-wrap:anywhere;max-width:360px;cursor:pointer;min-height:44px;display:flex;align-items:center}
.form-actions{flex-wrap:wrap}
@media(max-width:900px){.main{width:calc(100% - 200px)}}
@media(max-width:640px){.main{width:100%}.topbar{gap:8px}.console-connection input{width:100%;min-width:0}.api-banner input{min-width:0;max-width:100%}.api-banner code{white-space:normal;overflow-wrap:anywhere}.live-panels pre{max-width:65vw}}

.request-note{display:inline-block;white-space:normal;max-width:260px;color:var(--muted)}
.request-warning{margin:0 0 18px;color:var(--amber)}
button[data-live-op="complete-data-request"]{min-height:44px;color:var(--amber);border-color:var(--amber)}
button[data-live-op="revoke-sessions"],button[data-live-op="delete-media"]{min-height:44px;color:var(--amber);border-color:var(--amber)}
[data-admin-download],[data-device-edit],button[data-live-op="poll-job"]{min-height:44px}
#device-name-form{margin-bottom:18px}
#device-name-form button,#device-name-form input{min-height:44px}

/* The business console uses its own dark theme rather than Tabler. */
#mfa-auth{border:1px solid var(--line);background:linear-gradient(135deg,rgba(16,56,72,.84),rgba(16,38,52,.7));border-radius:var(--radius);padding:24px;margin-bottom:16px}
#mfa-auth h2{font-size:20px;line-height:1.3;margin:0 0 20px;letter-spacing:0}
#mfa-auth .row{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin-bottom:18px}
#mfa-auth label{display:grid;align-content:start;gap:8px;color:var(--muted);font-size:12px;min-width:0}
#mfa-auth input{width:100%;min-width:0;min-height:44px;padding:11px 12px;border:1px solid var(--line);border-radius:10px;background:var(--bg);color:var(--text);font:inherit;font-size:14px}
#mfa-auth input:focus{border-color:var(--cyan)}
#mfa-auth button{border:0;border-radius:11px;background:var(--cyan);color:var(--bg);padding:12px 22px;font:inherit;font-weight:700;cursor:pointer;min-height:44px}
#mfa-auth .text-success{color:var(--lime);margin:0 0 16px}
.security-links{display:flex;align-items:center;flex-wrap:wrap;gap:12px;color:var(--muted);margin:0 0 18px}
.security-links a{display:inline-flex;align-items:center;min-height:36px;color:var(--cyan);text-decoration:none}
.security-links a:hover{text-decoration:underline}
.console-connection [role=status]:empty{display:none}
@media(max-width:900px){#mfa-auth .row{grid-template-columns:1fr}#mfa-auth{padding:20px}}