:root {
  color-scheme: dark;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
  --background: #252726;
  --surface: #2c2e2d;
  --surface-raised: #333534;
  --text: #f2f0ea;
  --muted: #b6b4ae;
  --primary: #f09a78;
  --primary-strong: #ffb39a;
  --success: #45c39a;
  --danger: #ff747a;
  --border: #6f726f;
  --soft-border: #474a48;
}

* { box-sizing: border-box; }
body { margin: 0; min-height: 100vh; background: var(--background); color: var(--text); }
button, input, select { font: inherit; }
button { min-height: 48px; border: 1px solid var(--primary); border-radius: 10px; padding: .7rem 1rem; background: var(--primary); color: #252726; font-weight: 800; cursor: pointer; }
button:hover { filter: brightness(1.07); }
button:focus-visible, input:focus-visible, select:focus-visible { outline: 3px solid #f09a7848; outline-offset: 2px; }
button:disabled { opacity: .4; cursor: not-allowed; }
button.secondary { border-color: var(--border); background: transparent; color: var(--text); }
button.danger { border-color: var(--danger); background: transparent; color: var(--danger); }
button.text-button { min-height: auto; padding: .35rem .1rem; border: 0; background: transparent; color: var(--muted); }
button.compact { min-height: 40px; padding: .45rem .75rem; }
.button-link { display: inline-flex; align-items: center; justify-content: center; width: fit-content; min-height: 44px; border: 1px solid var(--primary); border-radius: 10px; padding: .65rem .9rem; background: var(--primary); color: var(--background); font-weight: 800; text-decoration: none; }
.button-link:hover { filter: brightness(1.07); }
.button-link:focus-visible { outline: 3px solid #f09a7848; outline-offset: 2px; }
input, select { width: 100%; min-height: 48px; border: 1px solid var(--border); border-radius: 10px; padding: .72rem .8rem; background: var(--background); color: var(--text); }
label { display: grid; gap: .4rem; color: var(--muted); font-size: .82rem; font-weight: 700; }
small { display: block; color: var(--muted); font-size: .72rem; }
h1, h2, h3, p { margin-top: 0; }
h1 { margin-bottom: .35rem; font-size: clamp(1.75rem, 4vw, 2.45rem); letter-spacing: -.045em; }
h2 { margin-bottom: .25rem; font-size: 1.2rem; }
h3 { margin-bottom: 0; }
.hidden, [hidden] { display: none !important; }
.muted { color: var(--muted); }
.eyebrow { margin-bottom: .35rem; color: var(--primary-strong); font-size: .75rem; font-weight: 800; }
.card { border: 1px solid var(--border); border-radius: 12px; background: var(--background); padding: 1rem; }
.login-view { width: min(440px, calc(100% - 2rem)); margin: 8vh auto; }
.login-brand, .brand-mark { display: grid; place-items: center; width: 52px; height: 52px; border: 1px solid var(--primary); border-radius: 10px; color: var(--primary-strong); font-weight: 900; }
.login-view > .muted { line-height: 1.55; }
.form-stack, .dialog-form { display: grid; gap: 1rem; margin-top: 1.5rem; }
.warmup-mode { display: grid; grid-template-columns: minmax(260px, 1fr) minmax(150px, .35fr); gap: .8rem; align-items: center; }
.warmup-mode > span, .warmup-confirmation { display: flex; gap: .65rem; align-items: center; }
.warmup-mode input[type="checkbox"], .warmup-confirmation input[type="checkbox"] { width: 1.15rem; min-width: 1.15rem; min-height: 1.15rem; height: 1.15rem; margin: 0; padding: 0; accent-color: var(--primary); }
.warmup-mode-disabled { color: var(--muted); }
.warmup-mode-disabled input[type="number"] { opacity: .55; }
.error { min-height: 1.1rem; margin: 0; color: var(--danger); }
.app-layout { display: grid; grid-template-columns: 240px minmax(0, 1fr); min-height: 100vh; }
.sidebar { position: sticky; top: 0; display: flex; flex-direction: column; height: 100vh; border-right: 1px solid var(--border); padding: 1rem; background: var(--background); }
.brand { display: flex; align-items: center; gap: .75rem; margin-bottom: 2rem; }
.brand-mark { width: 44px; height: 44px; }
.brand strong { display: block; }
.navigation { display: grid; gap: .35rem; }
.nav-item { display: flex; justify-content: flex-start; align-items: center; gap: .75rem; min-height: 48px; border-color: transparent; background: transparent; color: var(--muted); text-align: left; }
.nav-item span { width: 1.2rem; color: var(--muted); text-align: center; }
.nav-item.active { border-color: var(--primary); color: var(--primary-strong); }
.nav-item.active span { color: var(--primary); }
.sidebar-footer { display: flex; align-items: center; justify-content: space-between; gap: .5rem; margin-top: auto; border-top: 1px solid var(--soft-border); padding-top: 1rem; color: var(--muted); font-size: .8rem; }
.profile-link { min-height: auto; max-width: 150px; overflow: hidden; border: 1px solid transparent; border-radius: 8px; padding: .35rem .5rem; background: transparent; color: var(--muted); font-size: .8rem; text-overflow: ellipsis; white-space: nowrap; }
.profile-link:hover { border-color: var(--soft-border); color: var(--text); filter: none; }
.profile-link.active { border-color: var(--primary); color: var(--primary-strong); }
.topbar-actions { display: flex; align-items: center; gap: .6rem; }
.topbar-profile { display: none; }
.workspace { width: min(1320px, 100%); margin: 0 auto; padding: 1.5rem 2rem 4rem; }
.topbar, .section-heading, .card-heading, .form-title { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.topbar { margin-bottom: 1rem; }
.topbar h1 { font-size: 1.65rem; }
.section-heading { margin: 1.2rem 0 1rem; }
.section-heading p { margin-bottom: 0; }
.notice { position: sticky; top: .75rem; z-index: 10; margin-bottom: 1rem; border: 1px solid var(--primary); border-radius: 10px; padding: .8rem 1rem; background: #382f2b; color: var(--primary-strong); }
.notice.error-notice { border-color: var(--danger); background: #3a292a; color: #ffb9bc; }
.metric-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: .8rem; margin-bottom: .8rem; }
.metric-grid.user-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.metric { min-height: 128px; }
.metric .value { margin: .8rem 0 .15rem; font-size: 2rem; font-weight: 900; color: var(--text); }
.metric .trend { color: var(--muted); font-size: .75rem; }
.metric.good .value { color: var(--success); }
.metric.alert .value { color: var(--danger); }
.analytics-overview { margin-bottom: .8rem; }
.analytics-heading { align-items: center; }
.analytics-filter { min-width: 150px; }
.analytics-filter select { min-height: 42px; padding: .55rem .7rem; }
.analytics-state { min-height: 1.4rem; }
.analytics-state-message { margin: .25rem 0 .7rem; color: var(--muted); }
.analytics-state-message.error { color: var(--danger); }
.analytics-overview-grid, .analytics-chart-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .8rem; }
.analytics-chart-grid { margin-top: .8rem; }
.analytics-kpis { grid-template-columns: repeat(5, minmax(0, 1fr)); margin-bottom: 0; }
.chart-card { min-width: 0; }
.chart-card .card-heading h3 { font-size: .95rem; }
.chart { position: relative; min-height: 210px; margin-top: .6rem; overflow: visible; }
.chart svg { display: block; width: 100%; height: 210px; overflow: visible; }
.chart-turnover svg text, .chart-bars svg text { fill: var(--muted); font: 11px ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace; }
.chart-turnover svg .grid-line, .chart-bars svg .grid-line { stroke: var(--soft-border); stroke-width: 1; }
.chart-turnover svg .area { fill: #f09a7830; }
.chart-turnover svg .line { fill: none; stroke: var(--primary-strong); stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
.chart-turnover svg .dot { fill: var(--primary-strong); }
.chart-turnover svg .dot.is-active { r: 5; stroke: var(--text); stroke-width: 2; }
.chart-hit-band { fill: transparent; cursor: pointer; outline: none; pointer-events: all; }
.chart-hit-band:focus { stroke: var(--primary-strong); stroke-width: 1; stroke-dasharray: 3 3; }
.chart-bars svg .bar { fill: var(--primary); }
.chart-bars svg .bar.is-active { fill: var(--primary-strong); stroke: var(--text); stroke-width: 1.5; }
.chart-donut { display: grid; place-items: center; }
.chart-donut svg { width: 190px; max-width: 100%; }
.chart-donut svg .donut-track { fill: none; stroke: var(--soft-border); stroke-width: 18; }
.chart-donut svg .donut-online, .chart-donut svg .donut-offline { fill: none; stroke-width: 18; stroke-linecap: round; transform: rotate(-90deg); transform-origin: 50% 50%; cursor: pointer; pointer-events: stroke; outline: none; }
.chart-donut svg .donut-online { stroke: var(--success); }
.chart-donut svg .donut-offline { stroke: var(--primary); }
.chart-donut svg .donut-online.is-active, .chart-donut svg .donut-offline.is-active { stroke-width: 24; }
.chart-donut svg text { fill: var(--text); font: 800 18px ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace; text-anchor: middle; }
.chart-donut svg .donut-caption { fill: var(--muted); font-size: 9px; font-weight: 400; }
.chart-status { display: grid; align-content: center; }
.chart-status-list { display: grid; gap: .7rem; margin: .6rem 0; }
.chart-status-row { display: grid; grid-template-columns: 9rem minmax(0, 1fr) 4rem; align-items: center; gap: .6rem; padding: .25rem; margin: -.25rem; border-radius: 6px; font-size: .78rem; cursor: pointer; outline: none; }
.chart-status-row:hover, .chart-status-row:focus, .chart-status-row.is-active { background: var(--soft-border); }
.chart-status-row strong { text-align: right; }
.chart-status-track { height: 11px; overflow: hidden; border-radius: 999px; background: var(--soft-border); }
.chart-status-fill { display: block; height: 100%; border-radius: inherit; background: var(--primary); }
.chart-status-fill.success { background: var(--success); }
.chart-status-fill.failed { background: var(--danger); }
.chart-status-fill.stopped { background: var(--primary-strong); }
.chart-legend { min-height: 1.1rem; margin: .45rem 0 0; font-size: .72rem; }
.chart-tooltip { position: absolute; z-index: 4; width: max-content; max-width: min(260px, calc(100% - 1rem)); padding: .45rem .6rem; border: 1px solid var(--primary-strong); border-radius: 7px; background: #241e1b; color: var(--text); box-shadow: 0 4px 14px #0006; font-size: .74rem; line-height: 1.35; white-space: normal; pointer-events: none; transform: translate(-50%, -100%); }
.chart-tooltip.hidden { display: none; }
.analytics-phones { margin-top: .8rem; }
.phone-stats-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .8rem; margin-top: .8rem; }
.phone-stat-card { display: grid; gap: .85rem; border: 1px solid var(--soft-border); border-radius: 10px; padding: .9rem; background: var(--surface); }
.phone-stat-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: .8rem; }
.phone-stat-title { min-width: 0; }
.phone-stat-title h3 { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.phone-stat-title p { margin: .3rem 0 0; font-size: .74rem; }
.phone-stat-metrics { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .55rem; }
.phone-stat-metric { min-width: 0; border-left: 1px solid var(--soft-border); padding-left: .55rem; }
.phone-stat-metric span { display: block; font-size: .67rem; }
.phone-stat-metric strong { display: block; margin-top: .22rem; overflow: hidden; font-size: .86rem; text-overflow: ellipsis; white-space: nowrap; }
.two-column { display: grid; grid-template-columns: 1.15fr .85fr; gap: .8rem; }
.account-summary { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .8rem; }
.account-card { display: grid; align-content: start; gap: .7rem; min-height: 205px; }
.account-card > * { margin-bottom: 0; }
.account-card-title { display: flex; align-items: center; justify-content: space-between; gap: .8rem; }
.account-card-title strong { font-size: clamp(1.35rem, 3vw, 2rem); color: var(--text); }
.account-columns, .account-security-card { margin-top: .8rem; }
.account-form { margin-top: 1rem; }
.account-device-row > div { min-width: 0; }
.security-client { overflow: hidden; color: var(--muted); text-overflow: ellipsis; white-space: nowrap; }
.list { display: grid; margin-top: .8rem; }
.list-row { display: flex; align-items: center; justify-content: space-between; gap: 1rem; border-top: 1px solid var(--soft-border); padding: .85rem 0; }
.list-row:first-child { border-top: 0; }
.list-row p { margin: .2rem 0 0; color: var(--muted); font-size: .78rem; }
.status { display: inline-flex; align-items: center; gap: .4rem; width: fit-content; border: 1px solid var(--soft-border); border-radius: 8px; padding: .28rem .5rem; color: var(--muted); font-size: .72rem; }
.status::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--muted); }
.status.active::before, .status.online::before, .status.succeeded::before { background: var(--success); }
.status.blocked::before, .status.failed::before, .status.disabled::before { background: var(--danger); }
.status.pending::before, .status.running::before, .status.received::before, .status.applied::before { background: var(--primary); }
.status.skipped::before { background: var(--muted); }
.toolbar { display: flex; align-items: end; gap: .8rem; margin-bottom: .8rem; }
.toolbar label { min-width: 190px; }
.toolbar .search { flex: 1; }
#toggle-task-form { align-self: center; margin-left: auto; }
.entity-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .8rem; }
.entity-card { display: grid; gap: .9rem; border: 1px solid var(--border); border-radius: 12px; padding: 1rem; }
.entity-head { display: flex; align-items: flex-start; justify-content: space-between; gap: .8rem; }
.device-head-actions { display: flex; align-items: center; gap: .35rem; flex: 0 0 auto; }
.icon-button { display: inline-grid; place-items: center; width: 38px; min-width: 38px; min-height: 38px; height: 38px; padding: .45rem; }
.icon-button svg { width: 19px; height: 19px; }
.icon-button.danger:hover, .icon-button.danger:focus-visible { border-color: var(--danger); background: #3a292a; color: #ffb9bc; filter: none; }
.device-status-indicator { position: relative; display: inline-grid; place-items: center; width: 38px; min-width: 38px; min-height: 38px; height: 38px; border: 1px solid transparent; border-radius: 50%; background: transparent; color: var(--muted); cursor: default; }
.device-status-indicator::before { content: ""; width: 14px; height: 14px; border-radius: 50%; background: var(--muted); }
.device-status-indicator.online::before { background: var(--success); }
.device-status-indicator.offline::before, .device-status-indicator.disabled::before { background: var(--danger); }
.device-status-indicator:focus-visible { border-color: var(--primary); outline: 3px solid #f09a7848; outline-offset: 2px; }
.device-status-indicator .status-label { position: absolute; z-index: 2; top: calc(100% + .35rem); right: 0; width: max-content; max-width: 12rem; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 1px solid var(--border); border-radius: 6px; padding: .3rem .45rem; background: var(--surface-raised); color: var(--text); font-size: .7rem; opacity: 0; pointer-events: none; }
.device-status-indicator:hover .status-label, .device-status-indicator:focus-visible .status-label { overflow: visible; clip: auto; clip-path: none; opacity: 1; }
.entity-title { min-width: 0; }
.entity-title-control { display: block; width: fit-content; max-width: 100%; min-height: 0; overflow: hidden; border: 1px solid transparent; border-radius: 6px; padding: .15rem .3rem; background: transparent; color: var(--text); font-size: 1.05rem; font-weight: 800; text-align: left; text-overflow: ellipsis; white-space: nowrap; }
.entity-title-control:hover { border-color: var(--soft-border); background: var(--surface-raised); filter: none; }
.entity-title-control:focus-visible { border-color: var(--primary); outline: 3px solid #f09a7848; outline-offset: 2px; }
.entity-title code { color: var(--muted); font-size: .72rem; }
.entity-meta { display: grid; grid-template-columns: repeat(3, 1fr); gap: .5rem; }
.entity-meta div { border-left: 1px solid var(--soft-border); padding-left: .6rem; }
.entity-meta span { display: block; color: var(--muted); font-size: .68rem; }
.entity-meta strong { display: block; margin-top: .25rem; font-size: .9rem; }
.requisite-stat-details { margin: 0; font-size: .78rem; line-height: 1.45; }
.entity-meta .device-meta-control { display: block; width: 100%; min-width: 0; min-height: 0; border: 1px solid transparent; border-left-color: var(--soft-border); border-radius: 6px; padding: .2rem .35rem .2rem .6rem; background: transparent; color: var(--text); font-weight: inherit; text-align: left; cursor: pointer; }
.entity-meta .device-meta-control:hover { border-color: var(--soft-border); background: var(--surface-raised); filter: none; }
.entity-meta .device-meta-control:focus-visible { border-color: var(--primary); outline: 3px solid #f09a7848; outline-offset: 2px; }
.quota { width: 100%; height: 6px; border: 0; border-radius: 99px; background: var(--soft-border); overflow: hidden; appearance: none; }
.quota::-webkit-progress-bar { background: var(--soft-border); }
.quota::-webkit-progress-value { background: var(--primary); }
.quota::-moz-progress-bar { background: var(--primary); }
.entity-actions { display: flex; flex-wrap: wrap; gap: .5rem; }
.entity-actions button { min-height: 40px; flex: 1; padding: .45rem .7rem; }
.empty { padding: 3rem 1rem; color: var(--muted); text-align: center; }
.task-queue-intro { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; margin: .2rem 0 1rem; }
.task-queue-intro h2 { margin: .2rem 0 .3rem; }
.task-queue-intro p { margin: .2rem 0 0; }
.form-grid { display: grid; grid-template-columns: repeat(4, minmax(140px, 1fr)); gap: .8rem; margin-bottom: .8rem; }
.form-grid .form-title { grid-column: 1 / -1; }
.form-grid > label { align-self: start; align-content: start; }
.form-grid .form-submit { align-self: end; }
.task-list { display: grid; gap: .65rem; }
.task-card { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, .9fr) minmax(0, .9fr) 210px; align-items: center; gap: 1rem; border: 1px solid var(--border); border-radius: 12px; padding: .9rem 1rem; }
.task-card > * { min-width: 0; }
.task-card p { margin: .25rem 0 0; color: var(--muted); font-size: .74rem; }
.task-card .amount { font-size: 1rem; font-weight: 800; }
.task-card .entity-actions { width: 210px; min-width: 210px; min-height: 40px; align-items: center; justify-content: flex-end; }
.task-card .entity-actions button { flex: 0 0 auto; }
.task-card .queue-position { align-self: center; color: var(--primary-strong); font-size: .74rem; font-weight: 800; white-space: nowrap; }
.task-card .queue-move { min-width: 44px; padding-inline: .55rem; }
.task-reason { overflow: hidden; max-width: 34rem; text-overflow: ellipsis; white-space: nowrap; }
.task-timing-dialog { width: min(760px, calc(100% - 1.25rem)); }
.task-timing-content { display: grid; gap: .9rem; }
.timing-outcome { display: grid; gap: .55rem; padding: .9rem; }
.timing-outcome-line { display: flex; align-items: flex-start; gap: .7rem; }
.timing-outcome-line strong { min-width: 0; color: var(--text); font-size: .9rem; line-height: 1.45; }
.status.timing-normal::before { background: var(--success); }
.status.timing-warning::before { background: var(--primary); }
.status.timing-error::before { background: var(--danger); }
.timing-summary { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .6rem; margin-top: .65rem; }
.timing-summary-item { display: grid; gap: .25rem; min-width: 0; border: 1px solid var(--soft-border); border-radius: 9px; padding: .7rem; background: var(--surface); }
.timing-summary-item span { color: var(--muted); font-size: .7rem; }
.timing-summary-item strong { min-width: 0; overflow-wrap: anywhere; color: var(--text); font-size: .82rem; line-height: 1.35; }
.timing-events { display: grid; margin-top: .65rem; border-top: 1px solid var(--soft-border); }
.timing-event { display: grid; grid-template-columns: minmax(100px, .65fr) minmax(130px, 1fr) minmax(110px, .6fr); gap: .8rem; align-items: center; border-bottom: 1px solid var(--soft-border); padding: .7rem 0; font-size: .76rem; }
.timing-event:last-child { border-bottom: 0; }
.timing-event strong { color: var(--text); }
.timing-event .muted { font-size: .7rem; }
.timing-delta { text-align: right; white-space: nowrap; }
.timing-technical { border: 1px solid var(--soft-border); border-radius: 9px; padding: .65rem .75rem; color: var(--muted); font-size: .74rem; }
.timing-technical summary { cursor: pointer; color: var(--text); font-weight: 700; }
.timing-technical-content { display: grid; gap: .4rem; margin-top: .65rem; }
.timing-technical-row { display: grid; grid-template-columns: minmax(120px, .7fr) minmax(0, 1fr); gap: .75rem; border-top: 1px solid var(--soft-border); padding-top: .45rem; }
.timing-technical-row span:first-child { color: var(--muted); }
.timing-technical-row span:last-child { overflow-wrap: anywhere; color: var(--text); }
.pagination { display: flex; justify-content: center; align-items: center; gap: 1rem; margin-top: 1rem; }
.timeline { padding-top: .2rem; padding-bottom: .2rem; }
.timeline-row { display: grid; grid-template-columns: 165px minmax(130px, .65fr) minmax(180px, 1fr) minmax(180px, 1fr); gap: 1rem; border-top: 1px solid var(--soft-border); padding: .85rem 0; font-size: .78rem; }
.timeline-row:first-child { border-top: 0; }
.timeline-row .muted { font-size: .72rem; }
.device-history-list { max-height: min(58vh, 520px); overflow: auto; }
.device-history-list .timeline-row { grid-template-columns: 165px minmax(180px, 1fr); }
.history-block { margin-top: .8rem; }
.history-list { display: grid; margin-top: .65rem; }
.history-row { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(130px, .65fr) minmax(150px, .7fr) minmax(160px, 1fr); gap: 1rem; align-items: center; border-top: 1px solid var(--soft-border); padding: .85rem 0; font-size: .78rem; }
.history-row:first-child { border-top: 0; }
.history-row p { margin: .25rem 0 0; color: var(--muted); font-size: .72rem; }
dialog { width: min(560px, calc(100% - 1.25rem)); max-height: calc(100vh - 2rem); overflow: auto; border: 1px solid var(--border); border-radius: 12px; padding: 1.1rem; background: var(--background); color: var(--text); }
dialog::backdrop { background: #111b; }
.dialog-form { margin: 0; }
.dialog-actions { display: flex; flex-wrap: wrap; gap: .6rem; }
.dialog-actions button { flex: 1 1 180px; min-height: 42px; }
.recipient-card-dialog-form { gap: .75rem; }
.split { display: grid; grid-template-columns: 1fr 1fr; gap: .8rem; }
.update-install-button { position: relative; min-width: 190px; justify-content: center; cursor: pointer; }
.update-install-button:hover, .update-install-button:focus-visible { border-color: var(--primary); background: #382f2b; color: var(--primary-strong); filter: none; }
.update-install-button .hover-label { display: none; }
.update-install-button:hover .default-label, .update-install-button:focus-visible .default-label { display: none; }
.update-install-button:hover .hover-label, .update-install-button:focus-visible .hover-label { display: inline; }
.devices-heading { align-items: flex-start; }
.devices-heading-actions { display: flex; align-items: center; justify-content: flex-end; flex-wrap: wrap; gap: .55rem; }
.devices-source-legend { display: flex; flex-wrap: wrap; gap: .45rem; margin: -.25rem 0 .35rem; }
.devices-identity-note { margin: 0 0 .8rem; font-size: .75rem; line-height: 1.45; }
.device-badges { display: flex; flex-wrap: wrap; gap: .35rem; margin-top: .45rem; }
.source-badge, .capability-badge { display: inline-flex; align-items: center; width: fit-content; border: 1px solid var(--soft-border); border-radius: 999px; padding: .25rem .5rem; font-size: .66rem; font-weight: 700; line-height: 1.2; }
.source-badge::before { content: ""; width: .45rem; height: .45rem; margin-right: .35rem; border-radius: 50%; background: var(--muted); }
.source-badge.source-yellow { border-color: #b8795f; color: var(--primary-strong); }
.source-badge.source-yellow::before { background: var(--primary); }
.source-badge.source-atlas { border-color: #5f9fc0; color: #9ed8f2; }
.source-badge.source-atlas::before { background: #63b7df; }
.capability-badge { color: var(--muted); }
.atlas-pending-list { margin-top: .8rem; }
.atlas-pending-list .card-heading { align-items: baseline; }
.atlas-pending-list .card-heading h3 { font-size: .95rem; }
.atlas-pending-item { display: flex; align-items: center; justify-content: space-between; gap: 1rem; border-top: 1px solid var(--soft-border); padding: .75rem 0; font-size: .78rem; }
.atlas-pending-item:first-child { border-top: 0; }
.atlas-pending-details { display: grid; gap: .2rem; min-width: 0; }
.atlas-pending-details strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.atlas-pending-item > .muted { flex: 0 0 auto; font-size: .7rem; }
.atlas-auth-card { max-width: 620px; }
.atlas-auth-card .card-heading { align-items: flex-start; }
.atlas-auth-card .form-stack { max-width: 440px; }
.atlas-device-card { display: grid; gap: .85rem; }
.atlas-device-card .entity-head { align-items: flex-start; }
.atlas-device-card .entity-title h3 { margin-bottom: .25rem; }
.atlas-device-card .entity-title p { margin: 0; }
.atlas-device-card .entity-meta { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.atlas-device-card .entity-actions button { min-width: 0; }
.atlas-remote-view { display: grid; gap: 1rem; }
.atlas-remote-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; }
.atlas-remote-heading h2 { margin-top: .35rem; }
.atlas-remote-heading p { margin-bottom: 0; }
.atlas-remote-workspace { display: grid; grid-template-columns: minmax(280px, .9fr) minmax(300px, 1.1fr); gap: 1rem; align-items: start; }
.atlas-phone-stage { min-width: 0; }
.atlas-phone-shell { position: relative; width: min(100%, 540px); margin: 0 auto; overflow: hidden; border: 1px solid var(--border); border-radius: 16px; background: #080808; box-shadow: 0 12px 30px #0005; }
.atlas-phone-shell canvas { display: block; width: 100%; height: auto; max-height: 72vh; object-fit: contain; touch-action: none; }
.atlas-stream-placeholder { position: absolute; inset: 0; display: grid; align-content: center; justify-items: center; gap: .5rem; padding: 1.25rem; background: #080808cc; color: var(--muted); text-align: center; }
.atlas-stream-placeholder strong { color: var(--text); }
.atlas-stream-placeholder[hidden] { display: none; }
.atlas-stream-metrics { display: flex; justify-content: space-between; width: min(100%, 540px); margin: .5rem auto 0; color: var(--muted); font-size: .72rem; }
.atlas-remote-controls { display: grid; gap: .8rem; }
.atlas-control-section { display: grid; gap: .75rem; border: 1px solid var(--border); border-radius: 12px; padding: .9rem; background: var(--surface); }
.atlas-control-section h3 { font-size: .95rem; }
.atlas-control-section .card-heading { align-items: center; }
.atlas-control-section label { gap: .35rem; }
.atlas-control-section output { color: var(--text); }
.atlas-control-section textarea { width: 100%; resize: vertical; }
.atlas-control-section > button { width: 100%; }
.atlas-navigation-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .5rem; }
.atlas-navigation-grid button { display: grid; gap: .1rem; min-height: 58px; padding: .45rem; font-size: 1.15rem; }
.atlas-navigation-grid button span { color: var(--muted); font-size: .65rem; }
.atlas-activation-result { display: grid; justify-items: center; gap: .75rem; text-align: center; }
.atlas-activation-result h3, .atlas-activation-result p { margin-bottom: 0; }
.atlas-activation-qr { width: min(100%, 320px); min-height: 180px; border: 1px solid var(--border); border-radius: 10px; padding: .7rem; background: #fff; image-rendering: pixelated; }
.atlas-activation-result .status { justify-self: center; }
.atlas-activation-result.hidden { display: none; }
.bottom-nav { display: none; }

@media (max-width: 1000px) {
  .metric-grid { grid-template-columns: repeat(2, 1fr); }
  .account-summary { grid-template-columns: 1fr 1fr; }
  .two-column { grid-template-columns: 1fr; }
  .analytics-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .entity-grid { grid-template-columns: 1fr; }
  .form-grid { grid-template-columns: repeat(2, 1fr); }
  .task-card { grid-template-columns: 1fr 1fr; }
  .history-row { grid-template-columns: 1fr 1fr; }
  .task-card .entity-actions { width: auto; min-width: 0; }
  .atlas-remote-workspace { grid-template-columns: 1fr; }
}

@media (max-width: 720px) {
  .app-layout { display: block; }
  .sidebar { display: none; }
  .workspace { padding: .9rem .75rem 6.2rem; }
  .topbar { align-items: flex-start; }
  .topbar-actions { align-items: flex-start; }
  .topbar-profile { display: inline-flex; max-width: 110px; min-height: 40px; align-items: center; justify-content: center; }
  .topbar .eyebrow { margin-bottom: .2rem; }
  .topbar h1 { margin-bottom: 0; }
  .section-heading { align-items: flex-start; flex-direction: column; }
  .section-heading > button { width: 100%; }
  .devices-heading-actions { width: 100%; justify-content: stretch; }
  .devices-heading-actions > button { flex: 1; }
  .devices-heading-actions > .status { justify-content: center; flex: 1 1 100%; }
  .atlas-pending-item { align-items: flex-start; flex-direction: column; gap: .25rem; }
  .atlas-remote-heading { flex-direction: column; }
  .atlas-remote-heading > .status { align-self: stretch; justify-content: center; }
  .metric-grid, .form-grid, .account-summary { grid-template-columns: 1fr; }
  .analytics-overview-grid, .analytics-chart-grid { grid-template-columns: 1fr; }
  .phone-stats-grid { grid-template-columns: 1fr; }
  .analytics-heading { align-items: stretch; }
  .analytics-filter { width: 100%; }
  .chart { min-height: 190px; }
  .chart svg { height: 190px; }
  .chart-status-row { grid-template-columns: 7.5rem minmax(0, 1fr) 3.2rem; }
  .metric { min-height: 112px; }
  .toolbar { align-items: stretch; flex-direction: column; }
  .warmup-mode { grid-template-columns: 1fr; }
  .toolbar label { min-width: 0; }
  #toggle-task-form { align-self: stretch; width: 100%; margin-left: 0; }
  .entity-meta { grid-template-columns: repeat(2, 1fr); }
  .phone-stat-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .task-card { grid-template-columns: 1fr; }
  .task-card .entity-actions { justify-content: stretch; }
  .task-card .entity-actions button { flex: 1; }
  .timing-summary { grid-template-columns: 1fr; }
  .timing-event { grid-template-columns: 1fr; gap: .25rem; }
  .timing-delta { text-align: left; }
  .timing-outcome-line { flex-direction: column; }
  .timing-technical-row { grid-template-columns: 1fr; gap: .2rem; }
  .timeline-row { grid-template-columns: 1fr; gap: .25rem; }
  .security-client { white-space: normal; }
  .history-row { grid-template-columns: 1fr; gap: .35rem; }
  .bottom-nav { position: fixed; z-index: 20; left: 0; right: 0; bottom: 0; display: grid; grid-template-columns: repeat(6, 1fr); border-top: 1px solid var(--border); padding: .35rem .3rem max(.35rem, env(safe-area-inset-bottom)); background: var(--background); }
  .mobile-nav { display: grid; gap: .15rem; min-height: 58px; border-color: transparent; padding: .25rem; background: transparent; color: var(--muted); font-size: .68rem; }
  .mobile-nav span { font-size: 1rem; }
  .mobile-nav.active { border-color: var(--primary); color: var(--primary-strong); }
}

@media (max-width: 430px) {
  .split { grid-template-columns: 1fr; }
  .entity-head { align-items: stretch; flex-direction: column; }
  .device-head-actions { align-self: flex-end; }
  .entity-meta { grid-template-columns: 1fr 1fr; }
}