.app-shell {
  width: 100%;
  max-width: var(--page-max);
  min-height: 100vh;
  min-height: 100dvh;
  margin: 0 auto;
  padding: calc(env(safe-area-inset-top) + var(--space-3)) var(--space-4) calc(env(safe-area-inset-bottom) + var(--space-4));
}

.app-header {
  display: flex;
  min-height: 52px;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--space-3);
}

.brand { display: flex; align-items: center; gap: var(--space-3); }
.brand-mark {
  display: grid;
  width: 36px;
  height: 36px;
  place-items: center;
  border: 1px solid rgba(118, 200, 176, 0.28);
  border-radius: 12px;
  background: rgba(118, 200, 176, 0.09);
  color: var(--color-link);
  font-size: 1.05rem;
  font-weight: 850;
  letter-spacing: -0.05em;
}
.brand-copy { display: grid; line-height: 1.2; }
.brand-copy strong { font-size: var(--text-sm); letter-spacing: 0.01em; }
.brand-copy small { margin-top: 3px; color: var(--color-muted); font-size: 0.6875rem; }

.app-main { display: grid; gap: var(--space-3); }
.intro { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); margin-bottom: var(--space-1); }
.intro h1 { font-size: clamp(1.45rem, 7vw, var(--text-xl)); line-height: 1.08; letter-spacing: -0.035em; }
.intro__action { flex: 0 0 auto; }

.state-panel {
  display: flex;
  align-items: flex-start;
  gap: var(--space-4);
  min-height: 120px;
  padding: var(--space-4);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface);
}
.state-panel > div { display: grid; gap: var(--space-2); }
.state-panel h2 { font-size: var(--text-md); }
.state-panel p { color: var(--color-muted); font-size: var(--text-sm); }
.state-panel .button { justify-self: start; margin-top: var(--space-1); }
.state-panel--error { border-color: rgba(241, 138, 138, 0.24); }
.state-icon { display: grid; width: 28px; height: 28px; flex: 0 0 auto; place-items: center; color: var(--color-muted); }
.state-panel--error .state-icon { color: var(--color-danger); }

.device-list { display: grid; gap: var(--space-2); margin: 0; padding: 0; list-style: none; }
.device-card {
  position: relative;
  overflow: hidden;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface);
}
.device-card::before {
  position: absolute;
  inset: 0 auto 0 0;
  width: 2px;
  background: var(--status-color, var(--color-muted));
  content: "";
}
.device-card[data-status="online"] { --status-color: var(--color-success); }
.device-card[data-status="offline"] { --status-color: var(--color-muted); }
.device-card[data-status="stale"] { --status-color: var(--color-warning); }
.device-card__top { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-2); padding: var(--space-3); }
.device-card__identity { display: flex; min-width: 0; align-items: center; gap: var(--space-2); }
.device-glyph {
  display: grid;
  width: 36px;
  height: 36px;
  flex: 0 0 auto;
  place-items: center;
  border-radius: 12px;
  background: var(--color-surface-soft);
  color: var(--color-link);
}
.device-card__title { min-width: 0; }
.device-card__title h2 { overflow: hidden; font-size: var(--text-md); text-overflow: ellipsis; white-space: nowrap; }
.device-card__subtitle { display: flex; align-items: center; gap: 6px; margin-top: 2px; color: var(--color-muted); font-size: var(--text-xs); }
.status-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--status-color); }
.source-label { margin-top: 2px; color: var(--color-muted); font-size: 0.6875rem; }

.device-card__route {
  display: grid;
  gap: 2px;
  margin: 0 var(--space-3) var(--space-2);
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-sm);
  background: var(--color-surface-soft);
}
.route-name { font-size: var(--text-xs); font-weight: 700; }
.route-scheme { color: var(--color-muted); font-size: 0.6875rem; line-height: 1.35; }

.device-card__metrics {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  margin: 0 var(--space-3);
  overflow: hidden;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--color-border);
}
.metric { min-width: 0; background: rgba(6, 12, 17, 0.2); padding: var(--space-2); }
.metric__label { display: block; margin-bottom: 2px; color: var(--color-muted); font-size: 0.6875rem; }
.metric__value { display: block; overflow: hidden; color: var(--color-text); font-size: var(--text-xs); font-weight: 650; text-overflow: ellipsis; white-space: nowrap; }
.metric__value--traffic { display: flex; align-items: center; gap: var(--space-2); }
.traffic-part { display: inline-flex; min-width: 0; align-items: center; gap: 3px; }
.traffic-part .icon { width: 14px; height: 14px; color: var(--color-muted); }

.device-card__actions { display: flex; gap: var(--space-2); padding: var(--space-2) var(--space-3) 0; }
.device-card__actions .button { flex: 1 1 auto; }
.no-config-note { padding: var(--space-2) var(--space-3) var(--space-3); color: var(--color-muted); font-size: 0.6875rem; line-height: 1.35; }

.route-control { display: grid; gap: var(--space-1); }
.toggle-row { font-size: var(--text-sm); }
.route-control .route-scheme {
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: rgba(0, 0, 0, 0.12);
}

.advanced { overflow: hidden; border: 1px solid var(--color-border); border-radius: var(--radius-md); }
.advanced summary {
  display: flex;
  min-height: var(--target-min);
  align-items: center;
  justify-content: space-between;
  padding: 0 var(--space-3);
  cursor: pointer;
  font-size: var(--text-sm);
  font-weight: 700;
  list-style: none;
}
.advanced summary::-webkit-details-marker { display: none; }
.advanced summary::after { color: var(--color-muted); content: "+"; font-size: var(--text-lg); font-weight: 400; }
.advanced[open] summary::after { content: "−"; }
.advanced__content { display: grid; gap: var(--space-1); padding: 0 var(--space-3) var(--space-3); border-top: 1px solid var(--color-border); }
.check-row { padding-top: var(--space-1); }
.check-row__copy { display: grid; }
.check-row__copy strong { font-size: var(--text-sm); }
.check-row__copy small { color: var(--color-muted); font-size: var(--text-xs); }
.download-link {
  display: inline-flex;
  min-height: var(--target-min);
  align-items: center;
  justify-self: start;
  padding-left: calc(20px + var(--space-3));
  color: var(--color-link);
  font-size: var(--text-xs);
  text-underline-offset: 3px;
}
.download-link:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; border-radius: var(--radius-sm); }
.guest-expiry { padding-top: var(--space-2); }

.confirm-icon { display: grid; width: 52px; height: 52px; place-items: center; margin: 0 auto var(--space-4); border-radius: 16px; background: rgba(241, 138, 138, 0.1); color: var(--color-danger); }
.dialog__surface--compact > p:not(.form-error) { margin: var(--space-2) 0 var(--space-5); color: var(--color-muted); font-size: var(--text-sm); }
.dialog__surface--compact .form-error { margin: 0 0 var(--space-3); }

.qr-view { text-align: left; }
.qr-frame { width: min(100%, 264px); aspect-ratio: 1; margin: var(--space-5) auto 0; padding: var(--space-3); border-radius: var(--radius-lg); background: #ffffff; }
.qr-frame img { display: block; width: 100%; height: 100%; object-fit: contain; }
.qr-view > p { text-align: center; }

.config-delivery > p { margin: var(--space-2) 0; }
.config-filename {
  overflow: hidden;
  padding: var(--space-3);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--color-surface-soft);
  color: var(--color-text) !important;
  font-size: var(--text-sm) !important;
  font-weight: 700;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.config-actions { display: grid; gap: var(--space-2); margin-top: var(--space-4); }
.config-actions .button { width: 100%; }
.config-qr {
  display: grid;
  width: min(100%, 244px);
  margin: var(--space-4) auto 0;
  padding: var(--space-3);
  place-items: center;
  border-radius: var(--radius-lg);
  background: #ffffff;
}
.config-qr[hidden] { display: none; }
.config-qr canvas,
.config-qr img { display: block; width: 100%; height: auto; }

.app-footer { display: flex; align-items: center; justify-content: center; gap: var(--space-2); padding: var(--space-6) var(--space-3) 0; color: var(--color-muted); font-size: 0.6875rem; text-align: center; }
.footer-lock { display: inline-flex; }
.footer-lock .icon { width: 14px; height: 14px; }

.toast {
  position: fixed;
  z-index: 10;
  right: max(var(--space-4), env(safe-area-inset-right));
  bottom: calc(env(safe-area-inset-bottom) + var(--space-4));
  left: max(var(--space-4), env(safe-area-inset-left));
  max-width: 398px;
  min-height: var(--target-min);
  margin: 0 auto;
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface-raised);
  box-shadow: var(--shadow-dialog);
  color: var(--color-text);
  font-size: var(--text-sm);
  text-align: center;
}

@media (max-width: 359px) {
  .app-shell { padding-inline: var(--space-3); }
  .intro__action span { display: none; }
  .intro__action { padding-inline: var(--space-3); }
  .dialog__surface { padding: var(--space-4); }
}