:root {
  /* Main content area — #16161a base matching NetBird */
  --bg: #16161a;
  --bg-grad-a: #16161a;
  --bg-grad-b: #16161a;
  --surface: #1e1e23;
  --surface2: #25252b;
  --surface3: #2c2c33;
  --border: #2c2c33;
  --border2: #383840;
  --text: #e8e8e8;
  --sub: #888896;
  --muted: #66666f;
  --accent: #f6862f;
  --accent-hover: #ff9a49;
  --accent-soft: rgba(246, 134, 47, 0.16);
  --green: #3bcf81;
  --green-bg: rgba(59, 207, 129, 0.15);
  --green-bd: rgba(59, 207, 129, 0.35);
  --offline-bg: #25252b;
  --offline-bd: #35353d;
  --offline-tx: #888896;
  --row-hover: #1e1e23;
  /* Sidebar — slightly lighter than main, like NetBird */
  --sidebar-bg: #1e1e23;
  --sidebar-bd: #2c2c33;
  --sidebar-txt: #888896;
  --sidebar-icon: #77777f;
  --sidebar-act-bg: #2c2c33;
  --sidebar-hover: #25252b;
  --shadow-focus: rgba(246, 134, 47, 0.26);
  --red: #ff8a8a;
  --red-bg: rgba(255, 82, 82, 0.18);
  --red-bd: rgba(255, 82, 82, 0.45);
  --amber: #f9b55f;
  --sidebar-grad-start: #1e1e23;
  --sidebar-grad-end: #1e1e23;
  --sidebar-footer-bg: #1e1e23;
  --brand-title: #f0f0f0;
  --nav-label: #60606a;
  --nav-item-hover-text: #d4d4dc;
  --nav-item-active-text: #ffffff;
  --nav-count-bg: #2c2c33;
  --nav-count-text: #888896;
  --header-bg: rgba(22, 22, 26, 0.9);
  --stats-bg: #16161a;
  --table-bg: #16161a;
  --table-head-bg: #1e1e23;
  --table-head-text: #aaaaaa;
  --table-row-bg: #16161a;
  --dot-grey: #66666f;
  --stat-strong: #e8e8e8;
  --live-dot-off: #66666f;
  --td-ip: #888896;
  --status-online-text: #71e9a7;
  --status-offline-dot: #888896;
  --btn-ghost-bg: #25252b;
  --btn-ghost-bg-hover: #2c2c33;
  --btn-ghost-text: #c0c0c8;
  --toast-shadow: rgba(0, 0, 0, 0.5);
  --toast-success-text: #88efb8;
  --toast-error-text: #ffadad;
  --card-page-grad-a: #1e1e23;
  --card-page-grad-b: #16161a;
  --card-bg-grad-a: #1e1e23;
  --card-bg-grad-b: #191920;
  --card-border: #2c2c33;
  --card-sub: #888896;
  --sender-surface: #1e1e23;
  --sender-input-bg: #25252b;
  --sender-log-bg: #16161a;
  --sender-success: #7ce9b0;
  --sender-error: #ff9f9f;
  --group-btn-bg: #25252b;
  --group-btn-border: #35353d;
  --group-btn-text: #aaaaaa;
  --group-btn-hover-text: #ffe1cb;
  --cmd-card-label: #e8e8e8;
  --scroll-thumb: #35353d;
  --scroll-thumb-hover: #454550;
}

[data-theme="light"] {
  --bg: #edf2f8;
  --bg-grad-a: #f7f9fc;
  --bg-grad-b: #edf2f8;
  --surface: #ffffff;
  --surface2: #f1f5fb;
  --surface3: #e6edf7;
  --border: #d8e2ef;
  --border2: #c7d4e6;
  --text: #1c2939;
  --sub: #61758f;
  --muted: #7a8ea8;
  --green: #229a60;
  --green-bg: rgba(34, 154, 96, 0.14);
  --green-bd: rgba(34, 154, 96, 0.3);
  --offline-bg: #edf2f8;
  --offline-bd: #c8d4e5;
  --offline-tx: #6f829d;
  --row-hover: #edf3fb;
  --sidebar-bg: #f3f6fb;
  --sidebar-bd: #d6e0ee;
  --sidebar-txt: #4f6480;
  --sidebar-icon: #617891;
  --sidebar-act-bg: #dde7f5;
  --sidebar-hover: #eaf0f8;
  --shadow-focus: rgba(246, 134, 47, 0.2);
  --red: #b53636;
  --red-bg: rgba(221, 80, 80, 0.16);
  --red-bd: rgba(193, 74, 74, 0.35);
  --amber: #b87921;
  --sidebar-grad-start: #f3f6fb;
  --sidebar-grad-end: #ecf2f9;
  --sidebar-footer-bg: #f3f6fb;
  --brand-title: #14243a;
  --nav-label: #6b7d95;
  --nav-item-hover-text: #203249;
  --nav-item-active-text: #203249;
  --nav-count-bg: #dce6f3;
  --nav-count-text: #4c5f79;
  --header-bg: rgba(247, 250, 253, 0.94);
  --stats-bg: #f6f9fd;
  --table-bg: #f3f7fc;
  --table-head-bg: #e6edf6;
  --table-head-text: #556a83;
  --table-row-bg: #ffffff;
  --dot-grey: #8b9cb2;
  --stat-strong: #1f2b3a;
  --live-dot-off: #99a9be;
  --td-ip: #5f738e;
  --status-online-text: #17774b;
  --status-offline-dot: #8da0b5;
  --btn-ghost-bg: #f1f5fb;
  --btn-ghost-bg-hover: #e6edf8;
  --btn-ghost-text: #2d405a;
  --toast-shadow: rgba(21, 34, 51, 0.2);
  --toast-success-text: #17774b;
  --toast-error-text: #ab2c2c;
  --card-page-grad-a: #f7f9fc;
  --card-page-grad-b: #edf2f8;
  --card-bg-grad-a: #ffffff;
  --card-bg-grad-b: #f6f9fd;
  --card-border: #d7e1ef;
  --card-sub: #5f728c;
  --sender-surface: #f7faff;
  --sender-input-bg: #ffffff;
  --sender-log-bg: #f2f7fd;
  --sender-success: #17774b;
  --sender-error: #a83232;
  --group-btn-bg: #e8eef7;
  --group-btn-border: #c7d4e5;
  --group-btn-text: #4c617d;
  --group-btn-hover-text: #9a541d;
  --cmd-card-label: #1e334d;
  --scroll-thumb: #b7c6d8;
  --scroll-thumb-hover: #9db0c8;
}

*, *::before, *::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: 'Manrope', sans-serif;
  background: radial-gradient(circle at 15% 5%, var(--bg-grad-a), var(--bg-grad-b) 42%);
  color: var(--text);
  min-height: 100vh;
}

button,
input,
select,
textarea {
  font: inherit;
}

.form-control {
  width: 100%;
  background-color: var(--surface2);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 8px 10px;
  font: inherit;
  line-height: 1.5;
  appearance: none;
  -webkit-appearance: none;
}

.form-control:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 2px var(--accent-soft);
}

.hidden { display: none !important; }

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.app-layout {
  display: flex;
  height: 100vh;
  overflow: hidden;
}

.sidebar {
  width: 252px;
  background: linear-gradient(180deg, var(--sidebar-grad-start) 0%, var(--sidebar-grad-end) 100%);
  border-right: 1px solid var(--sidebar-bd);
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
  height: 100%;
  min-height: 0;
}

.sidebar-brand-wrap {
  position: relative;
  border-bottom: 1px solid var(--sidebar-bd);
  margin-bottom: 10px;
}

.sidebar-brand {
  padding: 18px 16px 14px;
}

.sidebar-collapse-toggle {
  position: absolute;
  top: 10px;
  right: 8px;
  width: 26px;
  height: 26px;
  border-radius: 7px;
  border: 1px solid var(--border2);
  background: var(--surface2);
  color: var(--sub);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
}

.sidebar-collapse-toggle:hover {
  color: var(--text);
  border-color: var(--accent);
}

.sidebar-collapse-icon {
  font-size: 10px;
  line-height: 1;
  transition: transform 0.15s ease;
}

.brand-lockup {
  display: block;
}

.brand-lockup-logo {
  display: block;
  width: 210px;
  max-width: 100%;
  height: auto;
}

.brand-lockup-logo-light {
  display: none;
}

[data-theme="light"] .brand-lockup-logo-dark {
  display: none;
}

[data-theme="light"] .brand-lockup-logo-light {
  display: block;
}

.brand-lockup-auth .brand-lockup-logo {
  width: 300px;
  max-width: min(100%, 300px);
}

.brand-lockup-auth {
  display: flex;
  justify-content: center;
  margin-bottom: 34px;
}

.brand-lockup-sidebar .brand-lockup-logo {
  width: 210px;
  max-width: 210px;
}

.nav-section {
  padding: 0 10px;
  flex: 1;
  overflow-y: auto;
  min-height: 0;
  padding-bottom: 10px;
}

.nav-label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--nav-label);
  padding: 8px 10px 9px;
}

.nav-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 9px 10px;
  border-radius: 9px;
  cursor: pointer;
  font-size: 14px;
  font-weight: 600;
  color: var(--sidebar-txt);
  text-decoration: none;
}

.nav-item:hover {
  background: var(--sidebar-hover);
  color: var(--nav-item-hover-text);
}

.nav-item.active {
  background: var(--sidebar-act-bg);
  color: var(--nav-item-active-text);
}

.nav-item-main {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.nav-icon {
  color: var(--sidebar-icon);
  width: 15px;
  height: 15px;
  flex-shrink: 0;
}

.nav-item.active .nav-icon,
.nav-item:hover .nav-icon {
  color: currentColor;
}

.sidebar-jump {
  margin-top: 12px;
  border: 1px solid var(--border2);
  border-radius: 10px;
  padding: 8px;
  background: var(--surface2);
}

.sidebar-jump-label {
  display: block;
  font-size: 11px;
  color: var(--sub);
  margin-bottom: 6px;
}

.sidebar-jump-input {
  width: 100%;
  border: 1px solid var(--border2);
  border-radius: 7px;
  padding: 7px 9px;
  background: var(--sender-input-bg);
  color: var(--text);
  font-size: 13px;
}

.sidebar-jump-input:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 2px var(--accent-soft);
}

.sidebar-jump-results {
  margin-top: 7px;
  max-height: 220px;
  overflow-y: auto;
  border: 1px solid var(--border2);
  border-radius: 7px;
  background: var(--table-bg);
}

.sidebar-jump-result {
  width: 100%;
  border: none;
  background: transparent;
  color: var(--text);
  padding: 8px 9px;
  text-align: left;
  cursor: pointer;
  border-bottom: 1px solid var(--border);
}

.sidebar-jump-result:last-child {
  border-bottom: none;
}

.sidebar-jump-result:hover,
.sidebar-jump-result.active {
  background: var(--sidebar-hover);
}

.sidebar-jump-result:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: -2px;
}

.sidebar-jump-result strong {
  display: block;
  font-size: 12px;
}

.sidebar-jump-result small {
  color: var(--sub);
  font-size: 11px;
}

.sidebar-jump-empty {
  padding: 9px 10px;
  font-size: 12px;
  color: var(--sub);
}

.nav-item-button {
  width: 100%;
  border: 0;
  text-align: left;
  background: transparent;
  font-size: inherit;
  font-weight: inherit;
  line-height: inherit;
  color: inherit;
}

.nav-item-end {
  display: inline-flex;
  align-items: center;
  gap: 7px;
}

.nav-caret {
  font-size: 12px;
  line-height: 1;
  color: var(--sub);
  transition: transform 0.18s ease;
}

.nav-item-button[aria-expanded="false"] .nav-caret {
  transform: rotate(-90deg);
}

.nav-sub-wrap {
  margin: 4px 0 8px 18px;
  padding-left: 8px;
  border-left: 1px solid var(--sidebar-bd);
  overflow: hidden;
  max-height: 440px;
  opacity: 1;
  transition: max-height 0.2s ease, opacity 0.2s ease, margin 0.2s ease;
}

.nav-sub-wrap.collapsed {
  max-height: 0;
  opacity: 0;
  margin: 0 0 4px 18px;
  pointer-events: none;
}

.nav-sub-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 2px 0 4px;
}

.nav-sub-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 7px 10px;
  border-radius: 8px;
  cursor: pointer;
  font-size: 14px;
  font-weight: 600;
  color: var(--sidebar-txt);
}

.nav-sub-item:hover {
  background: var(--sidebar-hover);
  color: var(--nav-item-hover-text);
}

.nav-sub-item.active {
  background: var(--sidebar-act-bg);
  color: var(--nav-item-active-text);
}

.nav-count {
  font-size: 12px;
  background: var(--nav-count-bg);
  color: var(--nav-count-text);
  padding: 2px 9px;
  border-radius: 999px;
  font-weight: 700;
}

.nav-item.active .nav-count {
  color: var(--accent);
  background: rgba(246, 134, 47, 0.22);
}

.nav-sub-item.active .nav-count {
  color: var(--accent);
  background: rgba(246, 134, 47, 0.22);
}

.sidebar-footer {
  margin-top: auto;
  padding: 12px 10px 14px;
  border-top: 1px solid var(--sidebar-bd);
  background: var(--sidebar-footer-bg);
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex-shrink: 0;
}

.sidebar-version {
  font-size: 10px;
  color: var(--sub);
  padding: 0 0 8px 0;
  letter-spacing: 0.03em;
  font-weight: 600;
}

.sidebar-userline {
  font-size: 12px;
  color: var(--sub);
  margin-bottom: 8px;
  line-height: 1.3;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.sidebar-user-email {
  color: var(--text);
  font-weight: 600;
}

.sidebar-link {
  font-size: 14px;
  font-weight: 600;
  color: var(--sidebar-txt);
  text-decoration: none;
  padding: 8px 10px;
  border-radius: 9px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.sidebar-logout-form {
  margin: 0;
}

.sidebar-logout-form .sidebar-link {
  width: 100%;
  text-align: left;
  cursor: pointer;
  font: inherit;
}

.sidebar-link:hover {
  background: var(--sidebar-hover);
  color: var(--nav-item-hover-text);
}

.sidebar-link-logout {
  color: var(--sidebar-txt);
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: var(--surface2);
}

[data-theme="light"] .sidebar-link-logout {
  border-color: rgba(0, 0, 0, 0.08);
}

.sidebar-link-logout:hover {
  background: var(--sidebar-hover);
  color: var(--nav-item-hover-text);
}

.sidebar-link svg {
  flex-shrink: 0;
}

.sidebar-link-text {
  min-width: 0;
}

.sidebar-pref {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 8px 2px 4px;
  color: var(--sub);
  font-size: 12px;
}

.sidebar-pref input {
  accent-color: var(--accent);
  cursor: pointer;
}

.theme-toggle {
  margin-top: 2px;
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  border: 1px solid var(--border2);
  background: var(--surface2);
  color: var(--sidebar-txt);
  border-radius: 999px;
  padding: 6px 10px;
  width: 112px;
  cursor: pointer;
  user-select: none;
}

.theme-toggle:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.theme-toggle-label {
  font-size: 12px;
  font-weight: 600;
}

.app-layout.sidebar-collapsed .sidebar {
  width: 84px;
}

.app-layout.sidebar-collapsed .sidebar-collapse-icon {
  transform: rotate(180deg);
}

.app-layout.sidebar-collapsed .brand-lockup-sidebar .brand-lockup-logo {
  width: 44px;
  max-width: 44px;
}

.app-layout.sidebar-collapsed .nav-item-main {
  justify-content: center;
  width: 100%;
}

.app-layout.sidebar-collapsed .nav-item {
  justify-content: center;
}

.app-layout.sidebar-collapsed .nav-label,
.app-layout.sidebar-collapsed .nav-item-text,
.app-layout.sidebar-collapsed .sidebar-jump,
.app-layout.sidebar-collapsed .sidebar-version,
.app-layout.sidebar-collapsed .sidebar-userline,
.app-layout.sidebar-collapsed .sidebar-link-text,
.app-layout.sidebar-collapsed .sidebar-pref,
.app-layout.sidebar-collapsed .theme-toggle-label {
  display: none !important;
}

.app-layout.sidebar-collapsed .theme-toggle {
  width: 40px;
  justify-content: center;
  padding: 6px;
}

.card-theme-toggle {
  position: fixed;
  top: 18px;
  right: 18px;
  z-index: 20;
  color: var(--sub);
}

.toggle-track {
  width: 38px;
  height: 20px;
  border-radius: 999px;
  background: var(--border2);
  position: relative;
  flex-shrink: 0;
}

.toggle-knob {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #ffffff;
  position: absolute;
  left: 2px;
  top: 2px;
  transition: transform 0.18s ease;
}

[data-theme="light"] .toggle-knob {
  transform: translateX(18px);
}

.main-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
}

.page-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 24px 30px;
  border-bottom: 1px solid var(--border);
  background: var(--header-bg);
}

.page-header h1 {
  font-family: "Space Grotesk", "Manrope", sans-serif;
  font-size: clamp(1.04rem, 1.4vw, 1.34rem);
  letter-spacing: -0.02em;
  font-weight: 700;
}

.page-header p {
  margin-top: 2px;
  font-size: 0.8rem;
  color: var(--sub);
}

.search-box {
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--surface2);
  border: 1px solid var(--border2);
  border-radius: 10px;
  padding: 8px 12px;
  width: 290px;
  max-width: 42vw;
}

.search-box:focus-within {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--shadow-focus);
}

.search-box svg {
  color: var(--muted);
  flex-shrink: 0;
}

.search-box input {
  background: transparent;
  border: none;
  outline: none;
  color: var(--text);
  font-family: 'Manrope', sans-serif;
  font-size: 14px;
  width: 100%;
}

.search-box input::placeholder {
  color: var(--muted);
}

.stats-row {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 10px 30px;
  border-bottom: 1px solid var(--border);
  background: var(--stats-bg);
}

.admin-blurb {
  padding: 12px 30px;
  border-bottom: 1px solid var(--border);
  color: var(--sub);
  font-size: 14px;
  line-height: 1.5;
  background: var(--surface2);
}

.admin-feedback {
  margin: 12px 30px 0;
  padding: 10px 12px;
  border: 1px solid var(--border2);
  border-radius: 10px;
  font-size: 13px;
  color: var(--sub);
  background: var(--surface2);
}

.admin-feedback.success {
  border-color: var(--green-bd);
  background: var(--green-bg);
  color: var(--toast-success-text);
}

.admin-feedback.error {
  border-color: var(--red-bd);
  background: var(--red-bg);
  color: var(--toast-error-text);
}

.stat-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--sub);
}

.stat-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  flex-shrink: 0;
}

.stat-dot.green { background: var(--green); }
.stat-dot.grey { background: var(--dot-grey); }

.stat-pill strong {
  color: var(--stat-strong);
  font-weight: 700;
}

.status-filter {
  margin-left: auto;
  display: inline-flex;
  border: 1px solid var(--border2);
  border-radius: 10px;
  overflow: hidden;
  background: var(--surface2);
}

.status-filter-btn {
  border: none;
  background: transparent;
  color: var(--sub);
  font-family: 'Manrope', sans-serif;
  font-size: 12px;
  font-weight: 600;
  padding: 6px 12px;
  cursor: pointer;
}

.status-filter-btn + .status-filter-btn {
  border-left: 1px solid var(--border2);
}

.status-filter-btn.active {
  background: var(--accent-soft);
  color: var(--accent);
}

.stats-right {
  margin-left: 12px;
  font-size: 12px;
  color: var(--muted);
  font-family: 'JetBrains Mono', monospace;
}

.help-tip {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 1px solid var(--border2);
  color: var(--sub);
  font-size: 11px;
  font-weight: 700;
  line-height: 1;
  cursor: help;
  user-select: none;
}

.help-tip::after {
  content: attr(data-tip);
  position: absolute;
  left: 50%;
  bottom: calc(100% + 8px);
  transform: translateX(-50%) translateY(4px);
  width: 240px;
  max-width: min(240px, 80vw);
  background: var(--surface2);
  color: var(--text);
  border: 1px solid var(--border2);
  border-radius: 8px;
  padding: 8px 10px;
  font-size: 12px;
  font-weight: 500;
  line-height: 1.4;
  text-align: left;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.14s ease, transform 0.14s ease;
  z-index: 6;
}

.help-tip:hover::after,
.help-tip:focus-visible::after {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

.table-scroll {
  flex: 1;
  overflow-y: auto;
  background: var(--table-bg);
}

.device-table,
.admin-table {
  width: 100%;
  border-collapse: collapse;
}

.device-table thead tr,
.admin-table thead tr {
  background: var(--table-head-bg);
  position: sticky;
  top: 0;
  z-index: 2;
}

.device-table th,
.admin-table th {
  padding: 12px 14px;
  text-align: left;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--table-head-text);
}

.device-table th:first-child,
.admin-table th:first-child {
  padding-left: 28px;
}

.device-table th:last-child,
.admin-table th:last-child {
  padding-right: 24px;
  text-align: right;
}

.device-table tbody tr,
.admin-table tbody tr {
  border-bottom: 1px solid var(--border);
  background: var(--table-row-bg);
}

.device-table tbody tr:hover,
.admin-table tbody tr:hover {
  background: var(--row-hover);
}

.device-table td,
.admin-table td {
  padding: 16px 14px;
  vertical-align: middle;
}

.device-table td:first-child,
.admin-table td:first-child {
  padding-left: 28px;
}

.device-table td:last-child,
.admin-table td:last-child {
  padding-right: 24px;
}

.bulk-select-col,
.bulk-select-cell {
  width: 36px;
  text-align: center !important;
}

.device-table th.bulk-select-col,
.device-table td.bulk-select-cell {
  padding-left: 14px;
  padding-right: 8px;
}

.device-table.bulk-disabled .bulk-select-col,
.device-table.bulk-disabled .bulk-select-cell {
  display: none;
}

.device-table tbody tr.row-selected {
  background: var(--accent-soft);
}

.td-status {
  display: flex;
  align-items: center;
  justify-content: center;
}

.device-select {
  width: 14px;
  height: 14px;
  accent-color: var(--accent);
  cursor: pointer;
}

.device-select:disabled {
  cursor: not-allowed;
}

.live-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}

.live-dot.on {
  background: var(--green);
  box-shadow: 0 0 0 3px rgba(59, 207, 129, 0.2);
}

.live-dot.off {
  background: var(--live-dot-off);
}

.dev-name,
.peer-name {
  font-size: 16px;
  font-weight: 600;
  letter-spacing: -0.01em;
}

.dev-brand,
.peer-subdomain {
  font-size: 12px;
  color: var(--sub);
  margin-top: 4px;
}

.peer-subdomain,
.td-ip {
  font-family: 'JetBrains Mono', monospace;
}

.td-ip {
  font-size: 12px;
  color: var(--td-ip);
}

.ip-copy {
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px;
  color: var(--td-ip);
  background: transparent;
  border: 1px solid transparent;
  border-radius: 4px;
  padding: 2px 6px;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.ip-copy:hover {
  background: var(--sidebar-hover);
  border-color: var(--border);
}

.ip-copy:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
}

.ip-copy.copied {
  color: #4ade80;
}

.ip-copy-icon {
  display: inline-flex;
  color: var(--sub);
}

.device-table th.sortable {
  cursor: pointer;
  user-select: none;
}

.device-table th.sortable:hover {
  color: var(--nav-item-hover-text);
}

.device-table th.sortable:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: -2px;
}

.sort-indicator {
  margin-left: 4px;
  font-size: 10px;
  opacity: 0.7;
}

.device-table th.sorted .sort-indicator {
  opacity: 1;
}

.chip-count {
  margin-left: 4px;
  font-size: 11px;
  opacity: 0.7;
  font-weight: 500;
}

.btn-group.active .chip-count {
  opacity: 0.9;
}

.dev-os {
  font-size: 12px;
  color: var(--sub);
  line-height: 1.3;
}

.dev-os.muted {
  color: var(--muted);
}

.dev-agent {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  color: var(--muted);
}

.last-seen-online {
  color: #4ade80;
}

.last-seen-offline {
  color: var(--muted);
}

.last-seen-wrap {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.last-seen-primary {
  font-size: 12px;
  font-weight: 600;
}

.last-seen-detail {
  font-size: 11px;
  color: var(--sub);
}

@media (max-width: 1100px) {
  .hide-narrow {
    display: none !important;
  }
}

.kebab-wrap {
  position: relative;
  display: inline-block;
}

.btn-kebab {
  background: transparent;
  border: 1px solid var(--border);
  border-radius: 6px;
  color: var(--sub);
  font-size: 16px;
  line-height: 1;
  padding: 4px 8px;
  cursor: pointer;
}

.btn-kebab:hover {
  background: var(--sidebar-hover);
  color: var(--nav-item-hover-text);
}

.kebab-menu {
  position: absolute;
  right: 0;
  top: calc(100% + 4px);
  min-width: 140px;
  background: var(--card-bg-grad-b, #1c1c22);
  border: 1px solid var(--border);
  border-radius: 6px;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.35);
  padding: 4px;
  z-index: 100;
}

.kebab-item {
  display: block;
  width: 100%;
  text-align: left;
  padding: 8px 12px;
  background: transparent;
  border: none;
  color: var(--text);
  font-size: 13px;
  cursor: pointer;
  border-radius: 4px;
}

.kebab-item:hover {
  background: var(--sidebar-hover);
}

.kebab-destructive {
  color: var(--red);
}

.kebab-destructive:hover {
  background: var(--red-bg);
}

.status-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
}

.status-badge.online {
  background: var(--green-bg);
  color: var(--status-online-text);
  border: 1px solid var(--green-bd);
}

.status-badge.offline {
  background: var(--offline-bg);
  color: var(--offline-tx);
  border: 1px solid var(--offline-bd);
}

.status-badge .dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  flex-shrink: 0;
}

.status-badge.online .dot { background: var(--green); }
.status-badge.offline .dot { background: var(--status-offline-dot); }

.td-actions {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
}

.btn {
  padding: 8px 14px;
  border-radius: 8px;
  font-family: 'Manrope', sans-serif;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  border: 1px solid;
  text-decoration: none;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: all 0.15s ease;
}

.btn-web,
.btn-primary,
.btn-provision {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}

.btn-web:hover,
.btn-primary:hover,
.btn-provision:hover {
  background: var(--accent-hover);
  border-color: var(--accent-hover);
}

.btn-ssh {
  background: var(--btn-ghost-bg);
  border-color: var(--border2);
  color: var(--btn-ghost-text);
}

.btn-ssh:hover {
  border-color: var(--border2);
  background: var(--btn-ghost-bg-hover);
}

.btn-ssh-disabled,
.btn-ssh:disabled {
  opacity: 0.45;
  background: var(--surface2);
  color: var(--muted);
  border-color: var(--border);
}

.btn-danger {
  background: transparent;
  border-color: var(--red-bd);
  color: var(--red);
}

.btn-danger:hover {
  background: var(--red-bg);
}

.btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.btn-provision.done {
  background: var(--green-bg);
  border-color: var(--green-bd);
  color: #79e6ac;
  cursor: default;
}

.btn-provision.failed {
  background: var(--red-bg);
  border-color: var(--red-bd);
  color: var(--red);
}

.btn-reprovision {
    background: #7a4f00;
    color: #fff;
    border: 1px solid #a06a00;
}
.btn-reprovision:hover {
    background: #a06a00;
}
.btn-reprovision.success {
    background: #1a6e3c;
    border-color: #1a6e3c;
}
.btn-reprovision.failed {
    background: #6e1a1a;
    border-color: #6e1a1a;
}

.state-message {
  text-align: center;
  color: var(--sub);
  padding: 48px;
  font-size: 14px;
}

.admin-empty-ok {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--green2);
  font-weight: 600;
}

.admin-empty-ok .icon {
  width: 18px;
  height: 18px;
  border-radius: 999px;
  background: var(--green-bg);
  border: 1px solid var(--green-bd);
  color: var(--green2);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
}

.toast {
  position: fixed;
  top: 16px;
  right: 16px;
  padding: 12px 18px;
  border-radius: 10px;
  font-size: 14px;
  z-index: 200;
  box-shadow: 0 8px 28px var(--toast-shadow);
}

.toast.success {
  background: var(--green-bg);
  border: 1px solid var(--green-bd);
  color: var(--toast-success-text);
}

.toast.error {
  background: var(--red-bg);
  border: 1px solid var(--red-bd);
  color: var(--toast-error-text);
}

.card-page {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: radial-gradient(circle at 10% 0%, var(--card-page-grad-a), var(--card-page-grad-b) 45%);
  padding: 24px;
}

.card-box {
  background: linear-gradient(180deg, var(--card-bg-grad-a), var(--card-bg-grad-b));
  border: 1px solid var(--card-border);
  border-radius: 16px;
  padding: 36px;
  width: 100%;
  max-width: 520px;
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.45);
}

.brand-lockup-auth {
  text-align: center;
}

.card {
  background: var(--card-bg, rgba(255, 255, 255, 0.02));
  border: 1px solid var(--border);
  border-radius: 10px;
  margin: 0 30px 18px 30px;
  overflow: hidden;
}

.card-header {
  padding: 14px 18px;
  border-bottom: 1px solid var(--border);
}

.card-body {
  padding: 16px 18px;
}

.card-title {
  font-size: 18px;
  font-weight: 600;
  margin: 0;
  letter-spacing: -0.01em;
}

.text-muted {
  color: var(--muted);
  font-size: 13px;
  line-height: 1.5;
}

.banner-preview {
  padding: 10px 12px;
  border: 1px dashed var(--border);
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.02);
  font-size: 13px;
  color: var(--fg);
}

.banner-preview p { margin: 0 0 6px 0; }
.banner-preview p:last-child { margin-bottom: 0; }
.banner-preview ul { margin: 4px 0 4px 18px; padding: 0; }
.banner-preview li { margin: 2px 0; }

.card-subtitle {
  font-size: 16px;
  color: var(--card-sub);
  text-align: center;
  margin: 6px 0 26px;
  line-height: 1.5;
}

.login-btn {
  width: 100%;
  justify-content: center;
  text-align: center;
}

.card-hint {
  font-size: 12px;
  color: var(--muted);
  margin-top: 14px;
  text-align: center;
}

.card-warning {
  color: var(--amber);
  font-size: 17px;
  font-weight: 700;
  margin-bottom: 8px;
  text-align: center;
}

.card-warning-icon {
  font-size: 26px;
  margin-bottom: 10px;
  text-align: center;
}

.admin-table td:last-child {
  text-align: right;
}

.sender-layout {
  flex: 1;
  display: flex;
  overflow: hidden;
}

.sender-devices {
  width: 55%;
  display: flex;
  flex-direction: column;
  border-right: 1px solid var(--border);
  min-width: 0;
}

.sender-filters-row {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 12px;
  padding: 10px 16px;
  border-bottom: 1px solid var(--border);
  background: var(--stats-bg);
  flex-shrink: 0;
}

.sender-filters-row .status-filter {
  margin-left: 0;
}

.group-filter-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}

.main-group-filter-row {
  background: var(--stats-bg);
}

.sender-group-filter-row {
  background: var(--sender-surface);
}

.group-filter-row .status-filter {
  margin-left: 0;
  flex-shrink: 0;
}

.sender-device-table th:last-child,
.sender-device-table td:last-child {
  text-align: left;
}

.sender-devices-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  border-bottom: 1px solid var(--border);
  background: var(--sender-surface);
  flex-shrink: 0;
}

.check-all-label,
.sender-check-label,
.online-toggle-label {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--sub);
  cursor: pointer;
}

.sender-add-row {
  display: flex;
  gap: 8px;
  padding: 12px 16px;
  border-top: 1px solid var(--border);
  background: var(--sender-surface);
  flex-shrink: 0;
}

.sender-input {
  flex: 1;
  background: var(--sender-input-bg);
  border: 1px solid var(--border2);
  border-radius: 8px;
  padding: 8px 10px;
  color: var(--text);
  font-family: 'Manrope', sans-serif;
  font-size: 13px;
  outline: none;
}

.sender-input:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--shadow-focus);
}

.sender-input::placeholder {
  color: var(--muted);
}

.sender-panel {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  min-width: 0;
}

.deployment-session,
.deployment-history {
  border-bottom: 1px solid var(--border);
  background: var(--sender-surface);
  padding: 12px 16px;
  flex-shrink: 0;
}

.deployment-session-head,
.deployment-history-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
}

.deployment-session-head h3,
.deployment-history-head h3 {
  margin: 0;
  font-size: 13px;
  line-height: 1.35;
}

.deployment-session-head p,
.deployment-history-head small {
  margin: 2px 0 0;
  color: var(--sub);
  font-size: 12px;
}

.deployment-session-meta {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 8px;
  color: var(--sub);
  font-size: 12px;
}

.deployment-file-list {
  margin: 10px 0 0;
  padding: 0;
  list-style: none;
  max-height: 132px;
  overflow: auto;
  border: 1px solid var(--border2);
  border-radius: 8px;
  background: var(--sender-input-bg);
}

.deployment-file-list li {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 6px 10px;
  border-bottom: 1px solid var(--border2);
  font-size: 12px;
}

.deployment-file-list li:last-child {
  border-bottom: 0;
}

.deployment-file-list code {
  color: var(--text);
  font-family: "JetBrains Mono", monospace;
  font-size: 11px;
}

.deployment-file-list small {
  color: var(--sub);
}

.deployment-session-actions {
  margin-top: 10px;
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.deployment-note {
  margin-top: 8px;
  color: var(--sub);
  font-size: 12px;
}

.deployment-history-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 10px;
  max-height: 190px;
  overflow: auto;
}

.deployment-history-row {
  border: 1px solid var(--border2);
  border-radius: 8px;
  background: var(--sender-input-bg);
  padding: 8px 10px;
  display: grid;
  grid-template-columns: 1fr auto auto;
  align-items: center;
  gap: 10px;
}

.deployment-history-row.selected {
  border-color: var(--accent);
  box-shadow: 0 0 0 1px var(--accent-soft);
}

.deployment-history-open {
  all: unset;
  cursor: pointer;
  display: grid;
  gap: 2px;
}

.deployment-history-open span {
  font-size: 12px;
  font-weight: 600;
  color: var(--text);
}

.deployment-history-open small {
  font-size: 11px;
  color: var(--sub);
}

.deployment-history-download {
  font-size: 11px;
  color: var(--accent);
  text-decoration: none;
  border: 1px solid var(--border2);
  border-radius: 999px;
  padding: 4px 8px;
}

.deployment-history-download.disabled {
  color: var(--muted);
  pointer-events: none;
}

.deployment-status-pill {
  display: inline-flex;
  align-items: center;
  border-radius: 999px;
  border: 1px solid var(--border2);
  padding: 3px 8px;
  font-size: 11px;
  line-height: 1.25;
  color: var(--sub);
  background: var(--sender-input-bg);
}

.deployment-status-pill.running {
  color: var(--accent);
  border-color: var(--accent);
}

.deployment-status-pill.succeeded {
  color: var(--sender-success);
  border-color: color-mix(in srgb, var(--sender-success) 40%, transparent);
}

.deployment-status-pill.failed {
  color: var(--sender-error);
  border-color: color-mix(in srgb, var(--sender-error) 45%, transparent);
}

.deployment-status-pill.expired {
  color: var(--muted);
}

.deployment-error,
.deployment-empty {
  color: var(--sub);
  font-size: 12px;
}

.sender-upload-section,
.sender-run-section {
  padding: 20px 24px;
  border-bottom: 1px solid var(--border);
  background: var(--sender-surface);
  flex-shrink: 0;
}

.sender-section-title {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--sub);
  margin-bottom: 12px;
}

.sender-file-row {
  margin-bottom: 10px;
  display: flex;
  align-items: center;
}

.sender-log-section {
  flex: 1;
  display: flex;
  flex-direction: column;
  padding: 16px 24px;
  overflow: hidden;
  background: var(--sender-log-bg);
}

.sender-log {
  flex: 1;
  overflow-y: auto;
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px;
  line-height: 1.7;
}

.log-line { padding: 1px 0; }
.log-time { color: var(--muted); margin-right: 8px; }
.log-info { color: var(--text); }
.log-success { color: var(--sender-success); }
.log-error { color: var(--sender-error); }

.log-summary {
    margin-top: 8px;
    padding: 8px 10px;
    border-radius: 4px;
    background: var(--surface, #1e1e1e);
    border: 1px solid var(--border, #333);
    font-size: 13px;
}

.log-summary-success {
    color: var(--success, #4caf50);
    margin-bottom: 2px;
}

.log-summary-failed {
    color: var(--error, #f44336);
}

.group-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  min-width: 0;
}

.group-buttons-inline {
  flex: 1;
  padding: 0;
  border: 0;
  background: transparent;
  flex-shrink: 0;
}

.btn-group {
  font-size: 11px;
  padding: 5px 12px;
  background: var(--group-btn-bg);
  border: 1px solid var(--group-btn-border);
  color: var(--group-btn-text);
  border-radius: 999px;
  cursor: pointer;
  font-family: 'Manrope', sans-serif;
}

.btn-group:hover {
  border-color: var(--accent);
  color: var(--group-btn-hover-text);
}

.btn-group.active {
  border-color: var(--accent);
  color: var(--accent);
  background: var(--accent-soft);
}

.sender-tab-bar {
  display: flex;
  border-bottom: 1px solid var(--border);
  background: var(--sender-surface);
  flex-shrink: 0;
}

.sender-tab {
  padding: 10px 18px;
  font-size: 13px;
  font-weight: 600;
  color: var(--sub);
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  cursor: pointer;
  font-family: 'Manrope', sans-serif;
  margin-bottom: -1px;
}

.sender-tab.active {
  color: var(--accent);
  border-bottom-color: var(--accent);
}

.sender-tab-content {
  flex-shrink: 0;
}

.sender-textarea {
  width: 100%;
  box-sizing: border-box;
  resize: vertical;
  margin-top: 6px;
}

.cmd-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 12px;
}

.cmd-card {
  background: var(--sender-input-bg);
  border: 1px solid var(--border2);
  border-radius: 10px;
  padding: 12px 14px;
}

.cmd-card-label {
  font-size: 13px;
  font-weight: 700;
  color: var(--cmd-card-label);
  margin-bottom: 4px;
}

.cmd-card-body {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  color: var(--sub);
  white-space: pre-wrap;
  margin-bottom: 8px;
}

.cmd-card-actions {
  display: flex;
  gap: 8px;
}

.cmd-add-form {
  margin-top: 12px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.tutorial-wrap {
  padding: 24px 26px 36px;
}

.tutorial-intro {
  margin-bottom: 14px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--border);
}

.tutorial-intro p {
  color: var(--sub);
  font-size: 14px;
  line-height: 1.55;
}

.help-toc {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 12px;
  margin-bottom: 18px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--border);
}

.help-toc a {
  color: var(--accent);
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
}

.help-toc a:hover {
  text-decoration: underline;
}

.help-section {
  padding: 0 0 16px;
  margin: 0 0 16px;
  border-bottom: 1px solid var(--border);
  scroll-margin-top: 20px;
}

.help-section h2 {
  font-size: 19px;
  line-height: 1.2;
  letter-spacing: -0.01em;
  margin-bottom: 8px;
  color: var(--text);
}

.help-section p {
  color: var(--sub);
  line-height: 1.6;
  font-size: 14px;
  max-width: 920px;
}

.help-section strong {
  color: var(--text);
}

.help-section a {
  color: var(--accent);
  text-decoration: none;
}

.help-section a:hover {
  text-decoration: underline;
}

::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

::-webkit-scrollbar-track {
  background: transparent;
}

::-webkit-scrollbar-thumb {
  background: var(--scroll-thumb);
  border-radius: 8px;
}

::-webkit-scrollbar-thumb:hover {
  background: var(--scroll-thumb-hover);
}

@media (max-width: 1080px) {
  .sidebar {
    width: 220px;
  }

  .page-header {
    padding: 20px;
  }

  .stats-row {
    padding: 10px 20px;
  }

  .device-table th:first-child,
  .device-table td:first-child,
  .admin-table th:first-child,
  .admin-table td:first-child {
    padding-left: 20px;
  }

  .device-table th:last-child,
  .device-table td:last-child,
  .admin-table th:last-child,
  .admin-table td:last-child {
    padding-right: 16px;
  }
}

@media (max-width: 860px) {
  .app-layout {
    flex-direction: column;
    height: auto;
    min-height: 100vh;
    overflow: visible;
  }

  .sidebar {
    width: 100%;
    border-right: none;
    border-bottom: 1px solid var(--sidebar-bd);
    height: auto;
  }

  .nav-section {
    max-height: 180px;
  }

  .page-header {
    flex-direction: column;
    align-items: stretch;
  }

  .search-box {
    max-width: none;
    width: 100%;
  }

  .stats-row {
    flex-wrap: wrap;
  }

  .status-filter {
    margin-left: 0;
  }

  .stats-right {
    margin-left: auto;
  }

  .sender-layout {
    flex-direction: column;
  }

  .sender-devices {
    width: 100%;
    border-right: none;
    border-bottom: 1px solid var(--border);
  }

  .help-toc {
    flex-direction: column;
    gap: 8px;
  }
}

/* ── SSH auth modal (sender page) ── */
.auth-overlay {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(22, 22, 26, 0.82);
  z-index: 100;
}
[data-theme="light"] .auth-overlay { background: rgba(237, 242, 248, 0.82); }

.auth-card {
  width: 340px;
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 14px;
  background: linear-gradient(180deg, var(--card-bg-grad-a), var(--card-bg-grad-b));
  color: var(--text);
  box-shadow: 0 10px 22px var(--toast-shadow);
}
.auth-card h2 { font-size: 13px; margin: 0 0 10px; color: var(--text); }
.auth-field { margin-bottom: 10px; }
.auth-field label { display: block; font-size: 11px; color: var(--sub); margin-bottom: 4px; }
.auth-field input {
  width: 100%;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--sender-input-bg);
  color: var(--text);
  padding: 8px 9px;
  outline: none;
  box-sizing: border-box;
}
.auth-field input:focus { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent-soft); }
.auth-actions { display: flex; gap: 8px; justify-content: flex-end; }
.auth-btn {
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 7px 10px;
  cursor: pointer;
  font-size: 12px;
  background: var(--btn-ghost-bg);
  color: var(--btn-ghost-text);
}
.auth-btn.primary {
  border-color: var(--accent);
  background: var(--accent-soft);
  color: var(--accent);
  font-weight: 700;
}

/* ── Banner bar ─────────────────────────────────────────────────────────── */
.banner-bar {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    padding: 0.75rem 1rem;
    background: var(--amber, #d97706);
    color: #fff;
    font-size: 0.875rem;
    line-height: 1.5;
    border-radius: 0.375rem;
    margin-bottom: 1rem;
}

.banner-bar p {
    margin: 0;
    flex: 1;
}

.banner-bar-close {
    flex-shrink: 0;
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.6);
    color: #fff;
    border-radius: 0.25rem;
    padding: 0.1rem 0.5rem;
    font-size: 0.75rem;
    cursor: pointer;
    line-height: 1.4;
}

.banner-bar-close:hover {
    background: rgba(255, 255, 255, 0.15);
}
.auth-error { min-height: 16px; margin-top: 8px; font-size: 11px; color: var(--red); }

/* Device detail page */
.dev-name-link {
  display: block;
  color: inherit;
  text-decoration: none;
}
.dev-name-link:hover .dev-name {
  text-decoration: underline;
  text-underline-offset: 2px;
}
.back-link {
  font-size: 13px;
  color: var(--muted, #9aa5b8);
  text-decoration: none;
}
.back-link:hover { color: var(--text, #e8e8e8); }
.device-detail-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 16px;
}
.device-detail-grid .card-wide {
  grid-column: 1 / -1;
}
.detail-list {
  display: grid;
  grid-template-columns: 140px 1fr;
  column-gap: 12px;
  row-gap: 8px;
  margin: 0;
  font-size: 13px;
}
.detail-list dt {
  color: var(--muted, #9aa5b8);
  font-weight: 500;
}
.detail-list dd {
  margin: 0;
  word-break: break-word;
}
.detail-list code {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 12px;
}
.chip-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.group-chip {
  display: inline-flex;
  align-items: center;
  padding: 4px 10px;
  border-radius: 999px;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.10);
  font-size: 12px;
  color: var(--text, #e8e8e8);
}
html[data-theme="light"] .group-chip {
  background: rgba(0,0,0,0.05);
  border-color: rgba(0,0,0,0.10);
  color: #1c2939;
}