:root {
  color-scheme: dark;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-synthesis: none;
  --bg: #060913;
  --panel: rgba(15, 22, 38, .92);
  --panel-solid: #0f1626;
  --panel-soft: #131d30;
  --panel-hover: #18243a;
  --line: #25334b;
  --text: #f2f6fc;
  --muted: #94a3b8;
  --muted-strong: #bdc8d8;
  --accent: #7c9cff;
  --accent-bright: #9ab3ff;
  --accent-soft: rgba(124, 156, 255, .13);
  --green: #56ddb2;
  --green-soft: rgba(86, 221, 178, .12);
  --red: #ff7589;
  --red-soft: rgba(255, 117, 137, .12);
  --amber: #f5c86b;
  --amber-soft: rgba(245, 200, 107, .12);
  --radius: 1.05rem;
  --radius-lg: 1.4rem;
  --shadow-panel: 0 22px 65px rgba(0, 0, 0, .2);
  --shadow-float: 0 28px 90px rgba(0, 0, 0, .42);
}

* { box-sizing: border-box; }
html { min-width: 320px; min-height: 100%; background: var(--bg); }
body {
  margin: 0;
  min-width: 320px;
  min-height: 100vh;
  min-height: 100dvh;
  color: var(--text);
  background:
    radial-gradient(circle at 82% -10%, rgba(66, 92, 170, .3), transparent 34rem),
    radial-gradient(circle at -10% 82%, rgba(38, 141, 133, .14), transparent 32rem),
    var(--bg);
  overflow-x: hidden;
}
body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  opacity: .18;
  background-image: linear-gradient(rgba(255,255,255,.018) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.018) 1px, transparent 1px);
  background-size: 42px 42px;
  mask-image: linear-gradient(to bottom, black, transparent 72%);
}
::selection { color: #07101e; background: var(--accent-bright); }

button, input, select { font: inherit; }
button, input, select, a { -webkit-tap-highlight-color: transparent; }
button {
  display: inline-flex;
  min-height: 2.75rem;
  align-items: center;
  justify-content: center;
  gap: .45rem;
  border: 1px solid #91a8ff;
  border-radius: .8rem;
  padding: .68rem 1rem;
  color: #08111f;
  background: linear-gradient(135deg, #9bb2ff, #6f91fa);
  box-shadow: 0 8px 24px rgba(80, 111, 218, .18);
  font-weight: 780;
  line-height: 1.1;
  cursor: pointer;
  transition: transform .16s ease, border-color .16s ease, background .16s ease, box-shadow .16s ease;
}
button:hover { transform: translateY(-1px); box-shadow: 0 12px 28px rgba(80, 111, 218, .27); }
button:active { transform: translateY(0); }
button:disabled { opacity: .4; cursor: not-allowed; transform: none; box-shadow: none; }
button.secondary { color: #e1e9f6; background: #172238; border-color: #354967; box-shadow: none; }
button.secondary:hover { border-color: #526b91; background: #1b2942; }
button.danger { color: #ffb8c2; background: #2b1722; border-color: #6f3342; box-shadow: none; }
button.danger:hover { border-color: #a94a60; background: #361b27; }
button.full { width: 100%; }
button.compact-button { min-height: 2.5rem; padding: .55rem .78rem; font-size: .78rem; }
button:focus-visible, input:focus-visible, select:focus-visible, a:focus-visible { outline: 3px solid rgba(124, 156, 255, .45); outline-offset: 3px; }

a { color: inherit; }
h1, h2, h3, p { margin-top: 0; }
h1 { margin-bottom: .3rem; font-size: clamp(1.6rem, 2.2vw, 2.45rem); line-height: 1.05; letter-spacing: -.045em; }
h2 { margin-bottom: .45rem; font-size: clamp(1.02rem, 1.2vw, 1.2rem); letter-spacing: -.018em; }
h3 { margin-bottom: .35rem; font-size: .95rem; }
.hidden { display: none !important; }
.muted { color: var(--muted); }
.micro { font-size: .75rem; line-height: 1.5; }
.eyebrow { margin-bottom: .42rem; color: var(--accent-bright); font-size: .66rem; font-weight: 850; letter-spacing: .155em; text-transform: uppercase; }
.stack { display: grid; gap: .72rem; }

.panel, .stat {
  position: relative;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: linear-gradient(145deg, rgba(18, 27, 45, .96), rgba(12, 18, 31, .96));
  box-shadow: var(--shadow-panel);
}
.panel { padding: clamp(.95rem, 1.5vw, 1.3rem); }
.panel::before { content: ""; position: absolute; inset: 0 1rem auto; height: 1px; background: linear-gradient(90deg, transparent, rgba(154, 179, 255, .26), transparent); }
.warning, .message { border: 1px solid #6f5528; border-radius: .85rem; padding: .85rem 1rem; color: #f9d998; background: linear-gradient(135deg, rgba(57, 41, 19, .96), rgba(39, 30, 18, .96)); font-size: .84rem; line-height: 1.5; }
.message { margin-bottom: 1rem; border-color: #345882; color: #c4defe; background: #10243b; }
.message.error { border-color: #74384a; color: #ffc0c9; background: #301722; }

label { color: #d2dbe8; font-size: .78rem; font-weight: 720; }
input, select { width: 100%; min-width: 0; min-height: 2.75rem; border: 1px solid #344761; border-radius: .8rem; padding: .7rem .82rem; color: var(--text); background: rgba(6, 11, 20, .82); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .025); transition: border-color .16s ease, box-shadow .16s ease, background .16s ease; }
input:hover, select:hover { border-color: #486181; }
input:focus, select:focus { border-color: var(--accent); background: #0a1220; box-shadow: 0 0 0 4px rgba(124, 156, 255, .09); }
input::placeholder { color: #66758a; }

/* Sign in */
.login-screen { display: grid; position: relative; min-height: 100vh; min-height: 100dvh; place-items: center; padding: clamp(1rem, 4vw, 3rem); }
.login-layout { display: grid; width: min(100%, 72rem); grid-template-columns: minmax(0, 1.1fr) minmax(20rem, .72fr); align-items: center; gap: clamp(2rem, 7vw, 7rem); }
.login-intro { display: grid; gap: clamp(2rem, 5vw, 3.8rem); padding: 1rem; }
.login-brand { display: flex; align-items: center; gap: .8rem; }
.login-brand strong, .login-brand span { display: block; }
.login-brand strong { font-size: .92rem; letter-spacing: -.01em; }
.login-brand span { margin-top: .12rem; color: var(--muted); font-size: .7rem; }
.brand-mark { display: grid; width: 2.65rem; height: 2.65rem; flex: 0 0 auto; border: 1px solid rgba(179, 200, 255, .45); border-radius: .85rem; place-items: center; color: #08111e; background: linear-gradient(135deg, #a6bdff, #55dbbb); box-shadow: 0 10px 30px rgba(81, 144, 201, .2); font-size: .76rem; font-weight: 950; letter-spacing: -.03em; }
.login-intro h1 { max-width: 12ch; font-size: clamp(2.5rem, 5.2vw, 4.8rem); }
.login-lead { max-width: 38rem; margin: 1.15rem 0 0; color: var(--muted-strong); font-size: clamp(.98rem, 1.5vw, 1.12rem); line-height: 1.75; }
.login-feature-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: .75rem; }
.login-feature { display: flex; gap: .7rem; border-top: 1px solid var(--line); padding-top: 1rem; }
.login-feature > span { color: var(--accent); font: 750 .66rem/1.4 ui-monospace, monospace; }
.login-feature strong, .login-feature small { display: block; }
.login-feature strong { font-size: .78rem; }
.login-feature small { margin-top: .25rem; color: var(--muted); font-size: .68rem; line-height: 1.4; }
.login-trust { display: flex; align-items: center; gap: .6rem; margin: 0; color: var(--muted); font-size: .74rem; }
.login-card { width: 100%; padding: clamp(1.35rem, 3vw, 2.2rem); border-color: #30415d; background: rgba(12, 18, 31, .94); box-shadow: var(--shadow-float); backdrop-filter: blur(20px); }
.login-card h2 { font-size: clamp(1.35rem, 2vw, 1.75rem); }
.login-card-brand { display: none; align-items: center; gap: .7rem; margin-bottom: 1.5rem; color: var(--muted-strong); font-size: .78rem; font-weight: 750; }
.login-card form { margin: 1.5rem 0 .9rem; }
.login-card form button { width: 100%; margin-top: .35rem; }
.login-privacy { margin-bottom: 0; text-align: center; }

/* Application shell */
.app-shell { display: grid; position: relative; grid-template-columns: 17rem minmax(0, 1fr); min-height: 100vh; min-height: 100dvh; }
.sidebar { display: flex; position: sticky; z-index: 20; top: 0; height: 100vh; height: 100dvh; flex-direction: column; border-right: 1px solid rgba(48, 65, 93, .72); padding: 1.35rem 1.1rem; background: rgba(7, 11, 20, .88); box-shadow: 18px 0 60px rgba(0, 0, 0, .12); backdrop-filter: blur(22px); }
.brand { display: flex; align-items: center; gap: .78rem; margin: 0 .35rem 2rem; }
.brand strong, .brand span { display: block; }
.brand strong { font-size: .88rem; letter-spacing: -.01em; }
.brand span { margin-top: .12rem; color: var(--muted); font-size: .68rem; }
nav { display: grid; gap: .3rem; }
nav a { display: flex; min-height: 2.8rem; align-items: center; gap: .75rem; border: 1px solid transparent; border-radius: .82rem; padding: .64rem .72rem; color: #8595aa; text-decoration: none; font-size: .82rem; font-weight: 730; transition: color .16s ease, border-color .16s ease, background .16s ease, transform .16s ease; }
nav a:hover { color: #e5edf8; background: rgba(22, 33, 53, .72); transform: translateX(2px); }
nav a.active { border-color: #354b70; color: #f5f8fc; background: linear-gradient(135deg, rgba(44, 63, 99, .7), rgba(24, 36, 58, .76)); box-shadow: inset 3px 0 0 var(--accent); }
.nav-icon { display: grid; width: 1.75rem; height: 1.75rem; place-items: center; border-radius: .55rem; color: #91a9d1; background: rgba(124, 156, 255, .08); font-size: 1rem; font-weight: 500; }
nav a.active .nav-icon { color: #c6d3ff; background: rgba(124, 156, 255, .17); }
.sidebar-footer { display: grid; gap: .8rem; margin-top: auto; border-top: 1px solid var(--line); padding-top: 1rem; }
.connection { display: flex; min-width: 0; align-items: center; gap: .55rem; color: var(--muted); font-size: .75rem; font-weight: 650; }
.dot { width: .55rem; height: .55rem; flex: 0 0 auto; border-radius: 50%; background: var(--red); box-shadow: 0 0 0 .25rem var(--red-soft); }
.dot.online { background: var(--green); box-shadow: 0 0 0 .25rem var(--green-soft); }
.dot.connecting { background: var(--amber); box-shadow: 0 0 0 .25rem var(--amber-soft); }
.workspace { width: min(100%, 94rem); margin: 0 auto; padding: clamp(1.1rem, 2.6vw, 2.4rem); }
.workspace-header { display: flex; min-height: 5rem; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 1.25rem; }
.workspace-header p { margin-bottom: 0; }
.page-heading { min-width: 0; }
.page-heading .muted { max-width: 52rem; font-size: .86rem; line-height: 1.45; }
.header-actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: .65rem; }
.mobile-connection, .mobile-lock { display: none; }

/* Dashboard content */
.stat-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .85rem; margin-bottom: 1rem; }
.stat { min-height: 7.4rem; padding: 1.05rem 1.15rem; overflow: hidden; }
.stat::after { content: ""; position: absolute; inset: auto -.8rem -.8rem auto; width: 4.5rem; height: 4.5rem; border-radius: 50%; background: var(--accent-soft); filter: blur(2px); }
.stat:nth-child(2)::after { background: var(--green-soft); }
.stat:nth-child(3)::after { background: rgba(89, 199, 232, .12); }
.stat:nth-child(4)::after { background: var(--amber-soft); }
.stat span { display: block; margin-bottom: 1rem; color: var(--muted); font-size: .65rem; font-weight: 800; letter-spacing: .11em; text-transform: uppercase; }
.stat strong { position: relative; z-index: 1; font-size: clamp(1.65rem, 3vw, 2.2rem); letter-spacing: -.04em; }
.page-grid { display: grid; grid-template-columns: minmax(0, 1.68fr) minmax(18rem, .82fr); align-items: start; gap: 1rem; }
.section-stack { display: grid; min-width: 0; gap: 1rem; }
.section-heading, .toolbar { display: flex; align-items: center; justify-content: space-between; gap: .8rem; }
.section-heading { min-height: 2.5rem; }
.section-heading h2, .section-heading p { margin-bottom: 0; }
.section-heading > a { color: var(--accent-bright); font-size: .76rem; font-weight: 750; text-decoration: none; }
.section-heading > a:hover { text-decoration: underline; }
.toolbar { margin-bottom: 1rem; }
.toolbar-actions { display: flex; flex-wrap: wrap; gap: .55rem; }
.toolbar-actions > input { flex: 1 1 10rem; }
.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr)); gap: .75rem; margin-top: .9rem; }
.card { border: 1px solid #263650; border-radius: .9rem; padding: .9rem; background: linear-gradient(145deg, rgba(22, 32, 51, .92), rgba(15, 23, 39, .92)); transition: border-color .16s ease, transform .16s ease, background .16s ease; }
.card:hover { border-color: #405a80; background: var(--panel-hover); }
.card p:last-child { margin-bottom: 0; }
.call-card { display: grid; position: relative; gap: .58rem; padding-right: 1.75rem; text-decoration: none; }
.call-card::after { content: "›"; position: absolute; top: 50%; right: .8rem; color: #647897; font-size: 1.3rem; transform: translateY(-50%); }
.call-card:hover { border-color: var(--accent); transform: translateY(-1px); }
.call-card-head { display: flex; min-width: 0; align-items: center; justify-content: space-between; gap: .6rem; }
.call-card-head strong { min-width: 0; overflow-wrap: anywhere; }
.meta { display: flex; flex-wrap: wrap; gap: .35rem .75rem; color: var(--muted); font-size: .72rem; }
.pill { display: inline-flex; width: fit-content; max-width: 100%; align-items: center; border: 1px solid rgba(105, 138, 181, .18); border-radius: 99px; padding: .24rem .58rem; color: #c6dcff; background: #1a2b43; font-size: .63rem; font-weight: 850; letter-spacing: .035em; white-space: nowrap; }
.pill.good { border-color: rgba(86, 221, 178, .16); color: #98f1d3; background: #12342d; }
.pill.live { border-color: rgba(89, 199, 232, .19); color: #b6e8fb; background: #15364a; box-shadow: 0 0 0 .2rem rgba(89, 199, 232, .06); }
.pill.bad { border-color: rgba(255, 117, 137, .18); color: #ffb6c1; background: #381c26; }
.pill.attention { border-color: rgba(245, 200, 107, .2); color: #f8da98; background: #382c18; }
.readiness-line { display: flex; align-items: flex-start; gap: .7rem; }
.readiness-line p { margin: .08rem 0 0; }
.readiness-note { display: grid; gap: .28rem; border: 1px solid #493b24; border-left: 3px solid var(--amber); border-radius: 0 .7rem .7rem 0; padding: .7rem .78rem; background: rgba(52, 41, 22, .72); }
.readiness-note strong { color: #f9d992; font-size: .73rem; }
.readiness-note span, .diagnostic-action { color: var(--muted-strong); font-size: .73rem; line-height: 1.48; }
.diagnostic-action { margin-bottom: 0; border-top: 1px solid #314058; padding-top: .7rem; }
.blocker-list, .timeline { display: grid; gap: .62rem; margin: .85rem 0 0; padding: 0; list-style: none; }
.blocker-list li { border-left: 3px solid var(--amber); border-radius: 0 .65rem .65rem 0; padding: .62rem .75rem; color: #f8d998; background: rgba(49, 39, 21, .76); font-size: .78rem; }
.timeline li { position: relative; min-height: 2.8rem; border-left: 2px solid #30496d; padding: 0 0 1rem 1.05rem; }
.timeline li:last-child { padding-bottom: 0; }
.timeline li::before { content: ""; position: absolute; left: -.37rem; top: .18rem; width: .62rem; height: .62rem; border: 2px solid #17253a; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 .18rem rgba(124, 156, 255, .1); }
.timeline strong, .timeline span { display: block; }
.timeline strong { font-size: .78rem; }
.timeline span { margin-top: .24rem; color: var(--muted); font-size: .7rem; line-height: 1.45; }
.table-wrap { width: 100%; overflow-x: auto; overscroll-behavior-inline: contain; }
table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: .76rem; }
th, td { border-bottom: 1px solid #202d41; padding: .78rem .6rem; text-align: left; white-space: nowrap; }
th { color: #8292a8; font-size: .62rem; font-weight: 800; letter-spacing: .105em; text-transform: uppercase; }
tbody tr { transition: background .14s ease; }
tbody tr:hover { background: rgba(124, 156, 255, .035); }
td { color: #d3dce9; }
td a { color: #afcdff; font-weight: 650; text-decoration: none; }
td a:hover { text-decoration: underline; }
.empty { border: 1px dashed #344863; border-radius: .9rem; padding: clamp(1.5rem, 5vw, 2.5rem) 1rem; color: var(--muted); background: rgba(10, 16, 27, .4); text-align: center; font-size: .82rem; }
.filter-grid { display: grid; grid-template-columns: repeat(4, minmax(8rem, 1fr)) auto; gap: .6rem; align-items: end; }
.filter-grid label { display: grid; gap: .4rem; }
.detail-list { display: grid; grid-template-columns: minmax(7rem, max-content) minmax(0, 1fr); gap: .68rem 1rem; margin: .9rem 0 0; }
.detail-list dt { color: var(--muted); font-size: .72rem; }
.detail-list dd { margin: 0; color: #d8e1ed; overflow-wrap: anywhere; font-size: .78rem; text-align: right; }
.device-layout { display: grid; grid-template-columns: minmax(15rem, .72fr) minmax(0, 1.28fr); align-items: start; gap: 1rem; }
.device-list { display: grid; gap: .55rem; }
.device-button { width: 100%; justify-content: flex-start; border-color: #2b3c57; color: inherit; text-align: left; background: #131d2e; box-shadow: none; }
.device-button:hover { border-color: #4d668c; background: #18253a; }
.device-button.selected { border-color: var(--accent); background: rgba(46, 65, 103, .68); box-shadow: inset 3px 0 0 var(--accent); }
.device-button span { display: block; margin-top: .22rem; color: var(--muted); font-size: .7rem; }
.check-row { display: flex; align-items: flex-start; gap: .65rem; line-height: 1.45; }
.check-row input { width: auto; min-height: auto; margin-top: .12rem; accent-color: var(--accent); }

/* Dialogs */
dialog { width: min(94vw, 36rem); max-height: calc(100vh - 2rem); max-height: calc(100dvh - 2rem); border: 1px solid #354863; border-radius: var(--radius-lg); padding: 0; color: inherit; background: var(--panel-solid); box-shadow: var(--shadow-float); overflow: hidden; }
dialog::backdrop { background: rgba(2, 5, 11, .78); backdrop-filter: blur(7px); }
.dialog-card { max-height: calc(100vh - 2rem); max-height: calc(100dvh - 2rem); padding: clamp(1.15rem, 3vw, 1.7rem); overflow-y: auto; }
.dialog-card h2 { font-size: 1.35rem; }
.form-grid { display: grid; gap: .55rem; margin: 1.1rem 0; }
.form-grid label:not(:first-child) { margin-top: .4rem; }
.qr-image { display: block; width: min(100%, 280px); aspect-ratio: 1; margin: 1rem auto; border-radius: .9rem; padding: .55rem; background: #fff; box-shadow: 0 16px 40px rgba(0,0,0,.28); }
.center { text-align: center; }
.code-value { display: block; margin: 1rem 0; border: 1px dashed #526b8f; border-radius: .8rem; padding: 1rem; color: #fff; background: #070c15; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; overflow-wrap: anywhere; user-select: all; }
.dialog-actions { display: flex; justify-content: flex-end; flex-wrap: wrap; gap: .55rem; border-top: 1px solid var(--line); margin-top: 1.2rem; padding-top: 1rem; }

@media (min-width: 1600px) {
  .workspace { width: min(100%, 102rem); padding: 2.7rem 3.2rem; }
  .page-grid { grid-template-columns: minmax(0, 1.8fr) minmax(21rem, .72fr); gap: 1.2rem; }
  .section-stack { gap: 1.2rem; }
  .panel { padding: 1.4rem; }
}

@media (max-width: 1180px) {
  .app-shell { grid-template-columns: 15rem minmax(0, 1fr); }
  .page-grid { grid-template-columns: minmax(0, 1.45fr) minmax(17rem, .85fr); }
  .filter-grid { grid-template-columns: repeat(2, minmax(9rem, 1fr)) auto; }
}

@media (max-width: 1080px) {
  .app-shell { grid-template-columns: 1fr; }
  .sidebar { display: grid; position: sticky; top: 0; width: 100%; height: auto; grid-template-columns: auto minmax(0, 1fr); align-items: center; border-right: 0; border-bottom: 1px solid var(--line); padding: .65rem 1rem; }
  .brand { margin: 0 1rem 0 0; }
  .brand .brand-mark { width: 2.25rem; height: 2.25rem; border-radius: .7rem; }
  nav { display: flex; justify-content: flex-end; gap: .2rem; overflow-x: auto; scrollbar-width: none; }
  nav::-webkit-scrollbar { display: none; }
  nav a { min-height: 2.45rem; flex: 0 0 auto; gap: .42rem; padding: .5rem .62rem; white-space: nowrap; }
  nav a:hover { transform: none; }
  nav a.active { box-shadow: inset 0 -2px 0 var(--accent); }
  .nav-icon { width: 1.5rem; height: 1.5rem; background: transparent; }
  .sidebar-footer { display: none; }
  .workspace { padding-top: 1.25rem; }
  .mobile-connection, .mobile-lock { display: flex; }
  .stat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .page-grid, .device-layout { grid-template-columns: 1fr; }
}

@media (max-width: 820px) {
  .login-layout { grid-template-columns: 1fr; width: min(100%, 34rem); gap: 1.5rem; }
  .login-intro { gap: 1.4rem; padding: 0 .4rem; }
  .login-intro > div:nth-child(2), .login-feature-grid, .login-trust { display: none; }
  .workspace-header { flex-direction: column; align-items: flex-start; }
  .header-actions { width: 100%; max-width: none; justify-content: flex-start; }
  .mobile-connection { margin-right: auto; }
  .section-heading, .toolbar { align-items: flex-start; }
  .filter-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .filter-grid button { align-self: end; }
}

@media (max-width: 680px) {
  body::before { display: none; }
  .login-screen { align-items: center; padding: 1rem; }
  .login-layout { gap: 1rem; }
  .login-intro { padding: 0 .25rem; }
  .login-card { padding: 1.25rem; border-radius: 1.1rem; }
  .login-card-brand { display: flex; }
  .login-brand { display: none; }
  .app-shell { display: block; }
  .sidebar { display: block; position: fixed; z-index: 50; inset: auto 0 0; width: 100%; height: auto; border: 0; border-top: 1px solid #30415c; padding: .42rem max(.5rem, env(safe-area-inset-right)) calc(.38rem + env(safe-area-inset-bottom)) max(.5rem, env(safe-area-inset-left)); background: rgba(8, 12, 21, .94); box-shadow: 0 -15px 45px rgba(0, 0, 0, .32); backdrop-filter: blur(24px); }
  .brand, .sidebar-footer { display: none; }
  nav { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: .16rem; overflow: visible; }
  nav a { display: flex; min-width: 0; min-height: 3.35rem; flex-direction: column; justify-content: center; gap: .18rem; border-radius: .7rem; padding: .3rem .12rem; font-size: .59rem; line-height: 1; }
  nav a.active { border-color: transparent; background: var(--accent-soft); box-shadow: none; }
  .nav-icon { width: 1.4rem; height: 1.4rem; font-size: .92rem; }
  .nav-label { max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
  .workspace { width: 100%; padding: 1rem .8rem calc(5.2rem + env(safe-area-inset-bottom)); }
  .workspace-header { min-height: 0; flex-direction: column; gap: .8rem; margin-bottom: 1rem; }
  .workspace-header h1 { font-size: 1.65rem; }
  .page-heading .muted { font-size: .78rem; }
  .header-actions { width: 100%; max-width: none; justify-content: flex-start; gap: .45rem; }
  .mobile-connection { margin-right: auto; }
  #last-updated { display: none; }
  button.compact-button { min-height: 2.35rem; padding: .5rem .66rem; }
  .stat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .6rem; }
  .stat { min-height: 6.5rem; padding: .85rem; }
  .stat span { min-height: 1.7rem; margin-bottom: .5rem; font-size: .58rem; }
  .stat strong { font-size: 1.6rem; }
  .section-stack, .page-grid, .device-layout { gap: .75rem; }
  .panel { border-radius: .95rem; padding: .9rem; }
  .section-heading { min-height: 2.2rem; }
  .section-heading > a { min-height: 2.2rem; display: inline-flex; align-items: center; }
  .cards { grid-template-columns: 1fr; gap: .6rem; }
  .toolbar { flex-direction: column; }
  .toolbar-actions { display: grid; width: 100%; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .toolbar-actions > * { width: 100%; min-width: 0; }
  .toolbar-actions > input { grid-column: 1 / -1; }
  .filter-grid { grid-template-columns: 1fr; }
  .filter-grid button { width: 100%; }
  .detail-list { grid-template-columns: minmax(6rem, .72fr) minmax(0, 1fr); gap: .65rem .75rem; }
  .table-wrap { overflow: visible; }
  table, tbody, tr, td { display: block; width: 100%; }
  thead { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
  tbody { display: grid; gap: .65rem; }
  tbody tr { border: 1px solid #293a54; border-radius: .82rem; padding: .3rem .72rem; background: rgba(15, 23, 38, .72); }
  tbody tr:hover { background: rgba(18, 28, 46, .82); }
  td { display: grid; grid-template-columns: minmax(6rem, .7fr) minmax(0, 1fr); align-items: start; gap: .75rem; border-bottom: 1px solid #25334a; padding: .62rem 0; white-space: normal; text-align: right; overflow-wrap: anywhere; }
  td:last-child { border-bottom: 0; }
  td::before { content: attr(data-label); color: #7f90a8; font-size: .61rem; font-weight: 820; letter-spacing: .08em; text-align: left; text-transform: uppercase; }
  td > * { justify-self: end; }
  dialog { width: 100%; max-width: none; max-height: calc(100dvh - .6rem); margin: auto 0 0; border-right: 0; border-bottom: 0; border-left: 0; border-radius: 1.25rem 1.25rem 0 0; }
  .dialog-card { max-height: calc(100dvh - .6rem); padding: 1.15rem .95rem calc(1rem + env(safe-area-inset-bottom)); }
  .dialog-actions { display: grid; grid-template-columns: 1fr; }
  .dialog-actions button { width: 100%; }
}

@media (max-width: 380px) {
  .workspace { padding-right: .65rem; padding-left: .65rem; }
  .header-actions .compact-button span:last-child { display: none; }
  .toolbar-actions { grid-template-columns: 1fr; }
  .toolbar-actions > input { grid-column: auto; }
  .detail-list { grid-template-columns: 1fr; gap: .2rem; }
  .detail-list dd { margin-bottom: .55rem; text-align: left; }
  td { grid-template-columns: minmax(5.2rem, .62fr) minmax(0, 1fr); }
}

@media (hover: none) and (pointer: coarse) {
  button, nav a, .device-button { min-height: 2.75rem; }
  button:hover, .call-card:hover, nav a:hover { transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition: none !important; animation: none !important; }
}