:root {
  color-scheme:dark;
  --canvas:#090e17;
  --panel:#111925;
  --line:#253143;
  --muted:#91a0b5;
  --accent:#72efc5;
  --bs-body-bg:var(--canvas);
  --bs-body-color:#e9eff8;
  --bs-secondary-color:var(--muted);
  --bs-border-color:var(--line);
  --bs-primary:#72efc5;
  --bs-link-color:#72efc5;
  --bs-link-hover-color:#abffdf;
}
[v-cloak] {
  display:none;
}
body {
  margin:0;
  background:radial-gradient(ellipse at 80% 0%,#13303545,transparent 45%),var(--canvas);
  font-family:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  font-size:14px;
  min-height:100vh;
}
button,a,input,select {
  touch-action:manipulation;
}
a {
  text-decoration:none;
}
button:focus-visible,a:focus-visible {
  outline:2px solid var(--accent);
  outline-offset:4px;
}
.sidebar {
  width:224px;
  position:fixed;
  inset:0 auto 0 0;
  background:#0c121d;
  border-right:1px solid var(--line);
  padding:32px 20px;
  display:flex;
  flex-direction:column;
}
.brand {
  display:flex;
  align-items:center;
  gap:12px;
  color:#edf5ff;
  font-size:17px;
  font-weight:750;
  letter-spacing:2px;
}
.brand-mark {
  display:grid;
  place-items:center;
  width:40px;
  height:44px;
  border:1px solid #72efc566;
  border-radius:11px;
  background:#72efc50c;
  color:var(--accent);
  font-size:36px;
}
.brand-mark svg {
  width:26px;
  height:26px;
}
.nav-icon {
  width:18px;
  height:18px;
  flex:0 0 18px;
}
.brand-sub {
  display:block;
  font:9px ui-monospace,SFMono-Regular,monospace;
  letter-spacing:1.7px;
  color:var(--muted);
  margin-top:5px;
}
.nav-caption,.eyebrow {
  font:10px ui-monospace,SFMono-Regular,monospace;
  font-weight:600;
  letter-spacing:1.6px;
  color:var(--muted);
}
.nav-caption {
  margin:52px 12px 16px;
}
.console-nav {
  display:grid;
  gap:7px;
}
.console-nav a {
  display:flex;
  align-items:center;
  gap:12px;
  padding:13px 12px;
  border:1px solid transparent;
  border-radius:7px;
  color:#a7b5c9;
  font-weight:600;
}
.console-nav a:hover {
  background:#162130;
  color:white;
}
.console-nav a.router-link-active {
  background:#72efc50e;
  color:var(--accent);
  border-color:#72efc528;
}
.nav-index {
  margin-left:auto;
  font:10px ui-monospace,monospace;
  opacity:.6;
}
.sidebar-bottom {
  margin-top:auto;
  padding:24px 12px 0;
  border-top:1px solid var(--line);
}
.sidebar-bottom .eyebrow {
  font-size:8px;
  letter-spacing:1px;
}
.sidebar-bottom p {
  font-size:23px;
  line-height:1.35;
  letter-spacing:-.7px;
  margin:15px 0 24px;
  color:#c2d0e1;
}
.console-tag {
  font:10px ui-monospace,monospace;
  letter-spacing:1px;
  color:var(--muted);
}
.workspace {
  margin-left:224px;
  min-height:100vh;
  display:flex;
  flex-direction:column;
}
.topbar {
  min-height:80px;
  border-bottom:1px solid var(--line);
  padding:18px 36px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  font-size:12px;
  background:#0b111bb3;
}
.topbar-label {
  color:var(--muted);
}
.breadcrumb-divider {
  color:#4b5b72;
  margin:0 16px;
}
.account {
  display:flex;
  align-items:center;
  gap:12px;
}
.avatar {
  display:grid;
  place-items:center;
  width:28px;
  height:28px;
  border-radius:8px;
  background:#233344;
  color:#a4bcd9;
  font-size:11px;
}
.main-content {
  padding:42px 36px;
  max-width:1800px;
  width:100%;
  margin:0 auto;
  flex:1;
}
h1 {
  font-size:32px;
  letter-spacing:-1.2px;
  font-weight:650;
  margin-bottom:9px;
}
h3 {
  letter-spacing:-.8px;
  font-weight:650;
}
h5 {
  font-size:16px;
  font-weight:600;
  letter-spacing:-.25px;
}
.accent,.healthy {
  color:var(--accent);
}
.main-content>div> .d-flex:first-child {
  margin-bottom:30px!important;
  gap:20px;
}
.stats-grid {
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:16px;
  margin:0 0 28px;
}
.stat-card {
  background:linear-gradient(130deg,#14212d,#111925);
  border:1px solid var(--line);
  border-radius:10px;
  padding:22px;
  position:relative;
  overflow:hidden;
}
.stat-card:after {
  content:"";
  position:absolute;
  right:0;
  top:0;
  width:38px;
  height:38px;
  border-top:1px solid #72efc540;
  border-right:1px solid #72efc540;
  border-radius:0 10px 0 0;
}
.stat-card>span {
  font-size:12px;
  color:#b4c2d3;
  display:flex;
  gap:8px;
  align-items:center;
}
.stat-card strong {
  display:block;
  font-size:38px;
  font-weight:550;
  letter-spacing:-1.5px;
  margin:12px 0 4px;
  font-variant-numeric:tabular-nums;
}
.stat-card strong.sync-time {
  font-size:26px;
  letter-spacing:-1px;
  line-height:57px;
  margin:4px 0;
}
.stat-card small {
  font-size:10px;
  color:var(--muted);
}
.status-dot {
  height:6px;
  width:6px;
  border-radius:50%;
  display:inline-block;
}
.online {
  background:var(--accent);
  box-shadow:0 0 9px #72efc54d;
}
.warning {
  background:#f1ba67;
}
.card {
  background:var(--panel);
  border:1px solid var(--line);
  border-radius:10px;
  box-shadow:none!important;
}
.card-body {
  padding:24px;
}
.fleet-layout {
  --bs-gutter-x:24px;
}
.node-create {
  width:29%;
  order:2;
}
.node-inventory {
  width:71%;
  order:1;
}
.inventory-heading {
  display:flex;
  justify-content:space-between;
  gap:20px;
  align-items:center;
  margin-bottom:24px;
}
.count-label {
  color:var(--muted);
  font:11px ui-monospace,monospace;
  border:1px solid var(--line);
  padding:3px 7px;
  border-radius:4px;
  margin-left:6px;
}
.node-search {
  max-width:210px;
}
.form-control,.form-select {
  background-color:#0b121d;
  border-color:#2b394c;
  color:#dfe9f5;
  border-radius:6px;
  font-size:13px;
  padding:10px 12px;
}
/* Keep the select arrow clear of the final letters in the label. */
.form-select { padding-right:36px; }
.form-control::placeholder {
  color:#6e7e95;
}
.form-control:focus,.form-select:focus {
  background-color:#0b121d;
  border-color:var(--accent);
  box-shadow:0 0 0 3px #72efc512;
  color:#fff;
}
.form-label {
  font-size:12px;
  color:#b4c2d3;
  margin-bottom:8px;
}
.form-text {
  font-size:11px;
  line-height:1.6;
}
.btn {
  font-size:12px;
  font-weight:600;
  border-radius:6px;
  padding:9px 14px;
}
.btn-sm {
  padding:7px 11px;
  font-size:11px;
}
.btn-primary {
  --bs-btn-bg:#72efc5;
  --bs-btn-border-color:#72efc5;
  --bs-btn-color:#09261d;
  --bs-btn-hover-bg:#9bf9d8;
  --bs-btn-hover-border-color:#9bf9d8;
  --bs-btn-hover-color:#09261d;
  --bs-btn-disabled-bg:#72efc5;
  --bs-btn-disabled-border-color:#72efc5;
  --bs-btn-disabled-color:#09261d;
  --bs-btn-active-bg:#51d8ac;
  --bs-btn-active-color:#09261d;
}
.btn-outline-secondary,.btn-outline-light {
  --bs-btn-color:#b5c5d8;
  --bs-btn-border-color:#324155;
  --bs-btn-hover-bg:#233044;
  --bs-btn-hover-border-color:#53647b;
  --bs-btn-hover-color:#fff;
}
.btn-outline-primary {
  --bs-btn-color:#72efc5;
  --bs-btn-border-color:#72efc555;
  --bs-btn-hover-bg:#72efc5;
  --bs-btn-hover-color:#09261d;
  --bs-btn-hover-border-color:#72efc5;
}
.btn-outline-danger {
  --bs-btn-color:#f296a3;
  --bs-btn-border-color:#ef7f932a;
}
.table {
  --bs-table-bg:transparent;
  --bs-table-color:#bac8d9;
  --bs-table-border-color:#233043;
  font-size:12px;
}
.table th {
  color:#8395ad;
  text-transform:uppercase;
  font:9px ui-monospace,monospace;
  letter-spacing:.8px;
  padding:13px 10px;
  background:#0c141f;
}
.table td {
  padding:17px 10px;
  max-width:280px;
  overflow-wrap:anywhere;
}
.table tbody tr:hover {
  background:#1a293a60;
}
.node-name {
  border:0;
  background:none;
  padding:0;
  color:#edf4fc;
  font-size:12px;
  font-weight:600;
  text-align:left;
}
.node-name:hover {
  color:var(--accent);
}
.badge {
  border-radius:4px;
  padding:5px 7px;
  font:9px ui-monospace,monospace;
  text-transform:uppercase;
  letter-spacing:.5px;
  border:1px solid transparent;
}
.badge.bg-success {
  background:#72efc511!important;
  color:#72efc5;
  border-color:#72efc52b;
}
.badge.bg-danger {
  background:#ff7b9211!important;
  color:#ff98aa;
  border-color:#ff7b922b;
}
.badge.bg-warning {
  background:#f1ba6711!important;
  color:#f1ba67!important;
  border-color:#f1ba672b;
}
.badge.bg-secondary {
  background:#93a7c312!important;
  color:#a2b4cd;
  border-color:#93a7c32b;
}
.alert {
  font-size:12px;
  overflow-wrap:anywhere;
}
.empty-state {
  padding:32px 12px;
  text-align:center;
  color:var(--muted);
}
.modal-content {
  background:#111925;
  border:1px solid #34445a;
  border-radius:12px;
}
.modal-header,.modal-footer {
  border-color:var(--line);
}
.console-footer {
  display:flex;
  justify-content:space-between;
  gap:16px;
  padding:20px 36px;
  border-top:1px solid #1c2737;
  color:#76879e;
  font:9px ui-monospace,monospace;
  letter-spacing:1px;
}
.auth-symbol {
  margin:8px auto 24px;
  display:grid;
  place-items:center;
  width:64px;
  height:64px;
  border:1px solid #72efc544;
  border-radius:16px;
  color:var(--accent);
  font-size:44px;
  background:#72efc508;
}
.main-content>.row.justify-content-center {
  padding-top:4vh;
}
.main-content>.row.justify-content-center .card-body {
  padding:36px;
}
.border-0 {
  border:1px solid var(--line)!important;
}
hr {
  border-color:var(--line);
  opacity:1;
}
@media(min-width:1600px) {
  .node-create {
    width:25%;
  }
  .node-inventory {
    width:75%;
  }
}
@media(max-width:1200px) {
  .sidebar {
    width:196px;
    padding:28px 14px;
  }
  .workspace {
    margin-left:196px;
  }
  .main-content {
    padding:30px 24px;
  }
  .node-create,.node-inventory {
    width:100%;
  }
  .node-create {
    margin-top:24px;
  }
  .stat-card {
    padding:16px;
  }
  .stats-grid {
    gap:12px;
  }
  .stat-card small {
    font-size:9px;
  }
}
@media(max-width:760px) {
  .sidebar {
    position:relative;
    width:100%;
    padding:18px 20px;
    gap:20px;
    border-right:0;
    border-bottom:1px solid var(--line);
  }
  .brand {
    font-size:15px;
  }
  .brand-mark {
    width:32px;
    height:34px;
  }
  .nav-caption,.sidebar-bottom,.nav-index {
    display:none;
  }
  .console-nav {
    display:flex;
    gap:10px;
  }
  .console-nav a {
    padding:8px 14px;
  }
  .workspace {
    margin-left:0;
  }
  .topbar {
    min-height:64px;
    padding:14px 20px;
  }
  .account {
    gap:8px;
  }
  .account>.avatar {
    display:none;
  }
  .main-content {
    padding:28px 18px;
  }
  .stats-grid {
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:10px;
  }
  .stat-card strong {
    font-size:32px;
  }
  .stat-card strong.sync-time {
    font-size:23px;
    line-height:48px;
  }
  h1 {
    font-size:27px;
  }
  .card-body {
    padding:18px;
  }
  .inventory-heading {
    align-items:flex-start;
    flex-direction:column;
    gap:15px;
  }
  .node-search {
    max-width:100%;
  }
  .console-footer {
    padding:18px;
    font-size:8px;
    line-height:1.5;
  }
  .console-footer span:last-child {
    text-align:right;
  }
  .main-content>.row.justify-content-center {
    padding-top:0;
  }
  .main-content>.row.justify-content-center .card-body {
    padding:26px;
  }
  .topbar>.console-tag {
    display:none;
  }
}
@media(prefers-reduced-motion:reduce) {
  *,*::before,*::after {
    transition:none!important;
    animation:none!important;
  }
}
.table .btn,.node-name {
  white-space:nowrap;
}
.node-inventory .table {
  min-width:640px;
}
.table-responsive {
  scrollbar-color:#34485f #0c141f;
  scrollbar-width:thin;
}

.uptime-column { width: 26%; min-width: 290px; }
.uptime-chart { width: 100%; max-width: 420px; }
.uptime-bars { display: grid; grid-template-columns: repeat(96, minmax(0, 1fr)); gap: 1px; height: 24px; }
.uptime-bar { padding: 0; border: 0; min-width: 0; cursor: pointer; display: block; border-radius: 4px; background: #293748; }
.uptime-bar.up { background: #53d990; }
.uptime-bar.down { background: #ff6b73; }
.uptime-bar.mixed { background: #efb956; }
.uptime-bar:hover, .uptime-bar:focus-visible { outline: 2px solid #e4f4ff; outline-offset: 2px; }
.uptime-caption { display: flex; align-items: center; gap: 6px; margin-top: 6px; color: #91a4bc; font-size: 10px; white-space: nowrap; }
.uptime-caption i { flex: 1; height: 1px; background: #2b3c50; }

.demo-accordion > summary { padding: 20px 24px; cursor: pointer; font-weight: 600; }
.demo-accordion[open] > summary { border-bottom: 1px solid #293748; }
.demo-code-block pre { padding: 18px; border: 1px solid #293748; border-radius: 10px; background: #090f19; color: #c9e4df; font-size: 12px; line-height: 1.65; max-height: 380px; overflow: auto; }
.demo-code-block pre:focus-visible, .demo-accordion > summary:focus-visible { outline: 2px solid #72edcf; outline-offset: 3px; }

/* Bug reports share the console's cards and forms. Keep reporter text bounded. */
.bug-title { font-size:inherit; overflow-wrap:anywhere; min-width:160px; }
.bug-site-cell { max-width:260px; overflow-wrap:anywhere; }
.bug-selected { --bs-table-bg:#72efc50c; }
.bug-detail { overflow-wrap:anywhere; }
.bug-text { white-space:pre-wrap; overflow-wrap:anywhere; }
.bug-console { white-space:pre-wrap; overflow-wrap:anywhere; max-height:320px; overflow:auto; }
.bug-note { padding:16px 0; border-bottom:1px solid var(--line); }
.widget-preview { color:#192d25; background:#fff; border:1px solid #dce5df; border-radius:16px; overflow:hidden; max-width:560px; }
.widget-preview button { color:white; border:0; border-radius:10px; padding:11px 16px; font-weight:650; overflow-wrap:anywhere; max-width:100%; }
.widget-preview-page { position:relative; height:160px; padding:16px; background:#eef3f0; color:#596a62; }
.widget-preview-page button { position:absolute; display:grid; place-items:center; width:44px; height:44px; padding:0; box-shadow:0 3px 12px #12251c24; }
.widget-preview-page.bottom-right button { bottom:20px; right:20px; }
.widget-preview-page.bottom-left button { bottom:20px; left:20px; }
.widget-preview-page.top-right button { top:20px; right:20px; }
.widget-preview-page.top-left button { top:20px; left:20px; }
.widget-preview-form { padding:24px; overflow-wrap:anywhere; font:14px/1.5 system-ui,sans-serif; }
.widget-preview-form h4 { color:#192d25; margin:0; font-size:24px; letter-spacing:-.6px; }
.widget-preview-intro { color:#596a62; margin:6px 0 20px; }
.widget-preview-form label { display:block; margin:16px 0 6px; font-weight:600; }
.widget-preview-form label span,.widget-preview-disclosure span { color:#596a62; font-size:12px; font-weight:400; }
.widget-preview-input { border:1px solid #cbd7d0; border-radius:8px; padding:10px 12px; color:#596a62; min-width:0; }
.widget-preview-textarea { min-height:88px; }
.widget-preview-contact { display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,210px),1fr)); gap:0 16px; }
.widget-preview-form small { display:block; color:#596a62; font-size:12px; line-height:1.5; }
.widget-preview-consent { margin-top:8px; }
.widget-preview-upload { margin-top:20px; padding:14px; border:1px dashed #b8c8bf; background:#f7faf8; border-radius:10px; }
.widget-preview-upload label { margin:0 0 10px; }
.widget-preview-file { display:flex; align-items:center; flex-wrap:wrap; gap:12px; margin-bottom:10px; }
.widget-preview-file > span { padding:7px 12px; border:1px solid #cbd7d0; border-radius:6px; background:#fff; font-weight:600; }
.widget-preview-disclosure { margin-top:12px; border:1px solid #dce5df; border-radius:8px; padding:12px; font-weight:600; }
.widget-preview-disclosure small { margin-top:4px; font-weight:400; }
.widget-preview-footer { margin-top:20px; padding-top:16px; border-top:1px solid #e5ece7; display:flex; justify-content:flex-end; }
.widget-preview-success { margin-top:16px; padding-top:12px; border-top:1px solid #e5ece7; }

/* Responsive console shell: navigation expands in flow, never over the page. */
.mobile-menu-toggle { display:none; }
.workspace,.main-content,.card,.card-body,fieldset { min-width:0; }
.main-content { overflow-wrap:anywhere; }
.table-responsive { max-width:100%; overscroll-behavior-x:contain; }
.table-responsive:focus-visible { outline:2px solid var(--accent); outline-offset:3px; }
pre { max-width:100%; }
.account > span:not(.avatar) { overflow-wrap:anywhere; }

@media (max-width: 991px) {
  .sidebar { position:relative; width:100%; padding:16px 20px; gap:0; border-right:0; border-bottom:1px solid var(--line); }
  .brand { min-height:44px; padding-right:112px; font-size:15px; }
  .brand-mark { flex-shrink:0; width:32px; height:34px; }
  .mobile-menu-toggle { display:block; position:absolute; top:16px; right:20px; min-height:44px; }
  .nav-caption,.sidebar-bottom,.nav-index { display:none; }
  .console-nav { display:none; }
  .nav-open .console-nav { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; margin-top:16px; }
  .console-nav a { min-height:48px; padding:12px; gap:8px; }
  .workspace { margin-left:0; }
  .topbar { padding:12px 20px; min-height:64px; flex-wrap:wrap; gap:10px; }
  .topbar > div:first-child { min-width:0; }
  .account { margin-left:auto; max-width:100%; }
  .account .btn { flex-shrink:0; }
  .stats-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .main-content { padding:24px 20px; }
  .main-content .d-flex { flex-wrap:wrap; }
  .main-content .d-flex > * { min-width:0; }
  .main-content .input-group { flex-wrap:wrap; }
  .console-footer { flex-wrap:wrap; padding:18px 20px; }
}

@media (max-width: 767px) {
  /* A 16px input font avoids Safari zooming in while entering data. */
  .form-control,.form-select { font-size:16px; min-height:44px; max-width:100%; }
  .btn,.btn-sm,.btn-group-sm > .btn,.node-name { min-height:44px; }
  .form-check { min-height:44px; display:flex; align-items:center; gap:10px; }
  .form-check-input { flex-shrink:0; }
  .form-check-label { padding:10px 0; }
  .main-content { padding:20px 12px; }
  .card-body { padding:16px; }
  .main-content > .row.justify-content-center .card-body { padding:20px; }
  .main-content > div > .d-flex:first-child { align-items:flex-start!important; gap:12px; }
  .btn-group { flex-wrap:wrap; gap:6px; }
  .btn-group > .btn { border-radius:6px!important; margin-left:0!important; }
  .modal-dialog { margin:10px; }
  .modal-body { padding:16px; }
  .modal-header { align-items:flex-start; }
  .modal-header .btn-close { flex-shrink:0; min-width:24px; min-height:24px; }
  .modal-footer { gap:8px; }
  .widget-preview-form { padding:16px; }
  .demo-accordion > summary { padding:16px; }
  .demo-code-block pre { padding:12px; }
  .bug-title { min-width:140px; }
  .table-responsive > .table:not(.mobile-site-table) { min-width:560px; }

  /* Keep site actions and uptime visible without horizontal scrolling. */
  .mobile-site-table,.mobile-site-table > tbody { display:block; width:100%; }
  .mobile-site-table > thead { position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); }
  .mobile-site-table > tbody > .site-summary-row { display:block; border:1px solid var(--line); border-radius:8px; padding:12px; margin-bottom:14px; }
  .mobile-site-table > tbody > .site-summary-row:last-child { margin-bottom:0; }
  .mobile-site-table > tbody > .site-summary-row > td { display:block; width:100%; max-width:none; min-width:0; border:0; padding:8px 0; text-align:left!important; }
  .mobile-site-table > tbody > .site-summary-row > td::before { content:attr(data-label); display:block; color:var(--muted); font-size:11px; font-weight:600; margin-bottom:5px; }
  .mobile-site-table > tbody > .site-summary-row > td:first-child { font-size:16px; font-weight:600; }
  .mobile-site-table > tbody > .site-summary-row > td:first-child .small { font-size:12px; font-weight:400; }
  .mobile-site-table > tbody > .site-summary-row .uptime-chart { max-width:none; }
  .mobile-site-table > tbody > .site-summary-row .uptime-bars { height:44px; }
  .mobile-site-table > tbody > .site-summary-row .uptime-caption { font-size:9px; gap:3px; }
  .mobile-site-table > tbody > .site-summary-row .btn-group { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); width:100%; }
  .mobile-site-table > tbody > .site-summary-row .btn-group > .btn { white-space:normal; display:flex; justify-content:center; align-items:center; }
}

@media (max-width: 380px) {
  .sidebar { padding-left:12px; padding-right:12px; }
  .mobile-menu-toggle { right:12px; }
  .brand { font-size:13px; letter-spacing:1px; gap:8px; }
  .brand-sub { font-size:8px; letter-spacing:.6px; }
  .topbar { padding:12px; }
  .topbar-label,.breadcrumb-divider { display:none; }
  .stat-card { padding:12px; }
  .stat-card strong.sync-time { font-size:20px; }
  .console-nav a { padding:10px 8px; font-size:12px; }
}

/* Dense mobile site inventory; expand one site for metrics and actions. */
.mobile-site-toggle,.compact-site-uptime { display:none; }
@media (max-width:767px) {
  .mobile-site-table > tbody > .site-summary-row { display:grid; grid-template-columns:minmax(0,1fr) auto; column-gap:10px; padding:8px 10px; margin-bottom:8px; }
  .mobile-site-table > tbody > .site-summary-row > td { padding:0; }
  .mobile-site-table > tbody > .site-summary-row > td::before { display:none; }
  .mobile-site-table > tbody > .site-summary-row .desktop-site-name { display:none; }
  .mobile-site-toggle { display:flex; align-items:center; justify-content:space-between; gap:8px; width:100%; min-height:44px; padding:0; border:0; background:none; color:#edf4fc; text-align:left; font-size:14px; font-weight:600; }
  .mobile-site-toggle > span:first-child { min-width:0; overflow-wrap:anywhere; }
  .mobile-site-toggle > span:last-child { flex-shrink:0; color:var(--accent); }
  .mobile-site-table > tbody > .site-summary-row > td:nth-child(2) { align-self:center; text-align:right!important; }
  .mobile-site-table > tbody > .site-summary-row > td:nth-child(2) .small { display:block; margin-left:0!important; margin-top:3px; font-size:10px; }
  .mobile-site-table > tbody > .site-summary-row > td:nth-child(n+3) { grid-column:1 / -1; }
  .mobile-site-table > tbody > .site-summary-row .compact-site-uptime { display:grid; grid-template-columns:repeat(96,minmax(0,1fr)); gap:1px; height:10px; margin:4px 0; }
  .compact-site-uptime .uptime-bar { cursor:default; border-radius:2px; }
  .mobile-site-table > tbody > .site-summary-row:not(.site-expanded) .site-check-interval,
  .mobile-site-table > tbody > .site-summary-row:not(.site-expanded) .uptime-chart,
  .mobile-site-table > tbody > .site-summary-row:not(.site-expanded) td:nth-child(n+4) { display:none; }
  .mobile-site-table > tbody > .site-summary-row.site-expanded .compact-site-uptime { display:none; }
  .mobile-site-table > tbody > .site-summary-row.site-expanded td:nth-child(n+3) { padding-top:10px; }
  .mobile-site-table > tbody > .site-summary-row.site-expanded td:nth-child(n+3)::before { display:block; }
  .mobile-site-table > tbody > .site-summary-row.site-expanded .site-check-interval { margin-bottom:6px; }
}

/* One action disclosure reserves more room for monitoring and bug health. */
.site-actions { display:inline-block; min-width:88px; text-align:left; }
.site-actions > summary { list-style:none; cursor:pointer; }
.site-actions > summary::-webkit-details-marker { display:none; }
.site-actions > summary::after { content:'▾'; margin-left:8px; }
.site-actions[open] > summary::after { content:'▴'; }
.site-actions-menu { display:grid; margin-top:6px; padding:4px; border:1px solid var(--line); border-radius:6px; background:#0c141f; min-width:116px; }
.site-actions-menu a,.site-actions-menu button { display:block; border:0; background:none; text-align:left; padding:10px; min-height:40px; color:#dfe9f5; font-size:12px; white-space:nowrap; }
.site-actions-menu a:hover,.site-actions-menu button:hover { background:#233044; border-radius:4px; }
.site-actions-menu button:disabled { opacity:.5; }
.site-bug-summary { display:flex; flex-wrap:wrap; align-items:center; gap:6px; min-height:36px; font-size:11px; }
.site-bug-open { display:inline-flex; align-items:center; gap:6px; padding:5px 8px; border:1px solid #d99b32; border-radius:6px; background:#493415; color:#ffd184; font-size:12px; font-weight:700; white-space:nowrap; }
.site-bug-open svg { width:15px; height:15px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; flex-shrink:0; }
.site-bug-summary:hover .site-bug-open { background:#60431b; border-color:#ffd184; }
.mobile-site-table > tbody > .site-summary-row .uptime-column { min-width:220px; width:26%; }
@media (max-width:767px) {
  .mobile-site-table > tbody > .site-summary-row:not(.site-expanded) td.site-bug-cell { display:block; }
  .mobile-site-table > tbody > .site-summary-row .site-bug-cell { padding-top:2px; }
  .mobile-site-table > tbody > .site-summary-row .site-bug-summary { min-height:32px; }
  .mobile-site-table > tbody > .site-summary-row .site-bug-summary::before { content:'Bugs'; color:var(--muted); margin-right:2px; }
  .mobile-site-table > tbody > .site-summary-row.site-expanded .site-bug-summary::before { display:none; }
  .mobile-site-table > tbody > .site-summary-row .uptime-column { min-width:0; width:100%; }
  .site-actions { width:100%; }
  .site-actions > summary { display:inline-flex; align-items:center; }
  .site-actions-menu a,.site-actions-menu button { min-height:44px; }
}

.analytics-headlines { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px; margin-bottom:24px; }
.analytics-headlines .stat-card strong { font-size:30px; }
.analytics-chart-scroll { overflow-x:auto; }
.analytics-chart { display:block; height:175px; max-width:none; margin:0 auto; color:var(--accent); }
.analytics-chart-grid { stroke:currentColor; opacity:.12; }
.analytics-chart-date { fill:var(--bs-secondary-color); font-size:10px; }
.analytics-chart-point { cursor:pointer; }
.analytics-chart-point:focus { outline:none; }
.analytics-chart-point:focus circle:last-child { stroke:var(--bs-body-color); stroke-width:3; }
.analytics-prose { white-space:pre-wrap; overflow-wrap:anywhere; }
.analytics-report { min-width:0; }
@media(max-width:767px) { .analytics-headlines { grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; } .analytics-headlines .stat-card strong { font-size:24px; } }

/* Helpdesk */
.helpdesk-layout { display: grid; grid-template-columns: minmax(260px, 0.8fr) minmax(0, 1.5fr); gap: 1rem; align-items: start; }
.helpdesk-inbox { overflow: hidden; }
.helpdesk-message { display: flex; flex-direction: column; gap: .35rem; text-align: left; background: transparent; border: 0; border-bottom: 1px solid var(--line); padding: 1rem; width: 100%; color: inherit; overflow-wrap: anywhere; }
.helpdesk-message:hover, .helpdesk-message.active { background: #72efc514; }
.helpdesk-message:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.helpdesk-message small { font-size: .75rem; }
.helpdesk-unread { width: 7px; height: 7px; border-radius: 50%; background: var(--accent); flex-shrink: 0; }
.helpdesk-reader { min-height: 360px; overflow-wrap: anywhere; }
.helpdesk-body { white-space: normal; line-height: 1.65; font-size: .95rem; }
@media (max-width: 900px) { .helpdesk-layout { grid-template-columns: 1fr; } .helpdesk-inbox { max-height: 550px; overflow-y: auto; } }

.helpdesk-loading { min-height: 280px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1rem; color: var(--muted); }
.helpdesk-loading .spinner-border { color: var(--accent); }
.helpdesk-body pre { padding: 1rem; background: var(--canvas); border: 1px solid var(--line); border-radius: .5rem; overflow-x: auto; white-space: pre; }
.helpdesk-body blockquote { padding-left: 1rem; border-left: 3px solid var(--accent); color: var(--muted); }
.helpdesk-body table { display: block; max-width: 100%; overflow-x: auto; border-collapse: collapse; margin-bottom: 1rem; }
.helpdesk-body th, .helpdesk-body td { border: 1px solid var(--line); padding: .5rem .75rem; }
.helpdesk-body a { text-decoration: underline; overflow-wrap: anywhere; }
.helpdesk-body h1, .helpdesk-body h2 { font-size: 1.4rem; }
.helpdesk-body h3, .helpdesk-body h4 { font-size: 1.15rem; }

/* Plausible visitor trend remains compact within the site's name cell. */
.site-visitors { display:flex; flex-direction:column; gap:2px; width:180px; max-width:100%; margin-top:7px; color:var(--accent, #198d79); text-decoration:none; }
.site-visitors:hover { color:var(--accent, #198d79); }
.site-visitors:focus-visible { outline:2px solid currentColor; outline-offset:3px; border-radius:4px; }
.site-visitors-caption { font-size:10px; font-weight:600; line-height:1.3; color:var(--muted); }
.site-visitors-caption span { font-weight:400; }
.site-visitors-graph { display:block; width:100%; height:36px; overflow:visible; }
.site-visitors-baseline { stroke:currentColor; opacity:.15; }
@media (max-width:767px) { .site-visitors { width:150px; } }

.mobile-site-table > tbody > .site-group-row > th { padding:0; background:var(--panel); border-bottom:1px solid var(--line); color:var(--bs-body-color); font-family:inherit; letter-spacing:normal; text-transform:none; }
.site-group-toggle { display:flex; align-items:center; flex-wrap:wrap; gap:10px; width:100%; min-height:56px; padding:14px 12px; border:0; background:transparent; color:inherit; text-align:left; }
.site-group-toggle:hover { background:#72efc508; }
.site-group-toggle:focus-visible { outline-offset:-3px; }
.site-group-chevron { color:var(--accent); width:12px; flex-shrink:0; font-size:18px; line-height:1; }
.site-group-name { font-size:14px; font-weight:600; overflow-wrap:anywhere; }
.site-group-count,.site-group-summary,.site-group-action { color:var(--muted); font-size:12px; font-weight:400; }
.site-group-action { margin-left:auto; }
.site-group-empty > td { padding:16px 12px; }
@media (max-width:767px) {
  .mobile-site-table > tbody > .site-group-row,.mobile-site-table > tbody > .site-group-row > th,
  .mobile-site-table > tbody > .site-group-empty,.mobile-site-table > tbody > .site-group-empty > td { display:block; width:100%; max-width:none; }
  .mobile-site-table > tbody > .site-group-row { margin:14px 0 10px; }
  .site-group-toggle { gap:8px; }
  .site-group-name { flex:1; min-width:0; }
  .site-group-summary { flex-basis:100%; padding-left:20px; }
  .site-group-action { display:none; }
}

/* One quiet outline encloses the header and every monitor in a group. */
.mobile-site-table > tbody.site-group { outline:1px solid var(--line); outline-offset:-1px; }
.mobile-site-table > tbody.site-group-spacer > tr > td { height:16px; padding:0; border:0; background:transparent; }
.mobile-site-table > tbody.site-group > .site-group-row > th { padding:8px 12px 0; }
@media (min-width:768px) {
  .mobile-site-table > tbody.site-group > tr > td:first-child { padding-left:24px; }
  .mobile-site-table > tbody.site-group > tr > td:last-child { padding-right:24px; }
  .mobile-site-table > tbody.site-group > tr:last-child > td { padding-bottom:26px; border-bottom:0; }
}
@media (max-width:767px) {
  .mobile-site-table > tbody.site-group { padding:8px 12px 12px; border-radius:8px; }
  .mobile-site-table > tbody.site-group > .site-group-row { margin:0 0 10px; }
  .mobile-site-table > tbody.site-group > .site-group-row > th { padding:0; }
  .mobile-site-table > tbody.site-group-spacer > tr,.mobile-site-table > tbody.site-group-spacer > tr > td { display:block; }
}

/* A single compact toolbar puts site health near the top of the page. */
.main-content:has(> .sites-view) { padding-top:20px; }
.sites-view > .card > .card-body { padding:16px 24px; }
.site-list-toolbar { display:flex; align-items:center; flex-wrap:wrap; gap:12px 20px; margin-bottom:14px; }
.site-list-title { margin:0; font-size:22px; letter-spacing:-.6px; }
.site-list-filters { display:flex; flex-wrap:wrap; gap:12px; }
.site-list-filters > div { display:flex; align-items:center; gap:8px; min-width:0; }
.site-list-filters .form-label { margin:0; font-size:12px; color:var(--muted); }
.site-list-filters .form-select { width:auto; min-width:150px; max-width:240px; min-height:36px; padding-top:6px; padding-bottom:6px; font-size:12px; }
.site-list-actions { display:flex; align-items:center; flex-wrap:wrap; gap:8px; margin-left:auto; }
.site-list-actions .btn { min-height:36px; white-space:nowrap; }
.site-organization-saved { font-size:11px; margin:0; }
.organize-mobile-label { display:none; }
@media (max-width:767px) {
  .main-content:has(> .sites-view) { padding-top:12px; }
  .sites-view > .card > .card-body { padding:12px; }
  .site-list-toolbar { gap:10px 8px; margin-bottom:10px; }
  .site-list-title { font-size:20px; }
  .site-list-actions { gap:6px; }
  .site-list-actions .btn { padding:6px 8px; font-size:12px; }
  .site-organization-saved { flex-basis:100%; text-align:right; order:1; }
  .organize-desktop-label { display:none; }
  .organize-mobile-label { display:inline; }
  .site-list-filters { order:2; display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.3fr); width:100%; gap:8px; }
  .site-list-filters > div { display:block; }
  .site-list-filters .form-label { display:block; font-size:11px; margin-bottom:3px; }
  .site-list-filters .form-select { width:100%; min-width:0; max-width:none; padding:6px 28px 6px 9px; background-position:right 8px center; }
  .mobile-site-table > tbody > .site-summary-row { padding:6px 9px; margin-bottom:6px; column-gap:8px; }
  .mobile-site-table > tbody > .site-summary-row > td:nth-child(2) { align-self:start; padding-top:8px; }
  .mobile-site-table > tbody > .site-summary-row .site-reorder-controls .btn { min-height:36px; padding:6px 10px; font-size:12px; }
  .mobile-site-table > tbody > .site-summary-row .site-bug-summary { min-height:22px; font-size:10px; }
  .mobile-site-table > tbody > .site-summary-row .compact-site-uptime { height:8px; margin:3px 0; }
  .mobile-site-table > tbody > .site-summary-row .site-visitors { flex-direction:row; align-items:center; gap:6px; width:100%; margin:0 0 3px; min-height:24px; }
  .mobile-site-table > tbody > .site-summary-row .site-visitors-caption { flex-shrink:0; font-size:9px; }
  .mobile-site-table > tbody > .site-summary-row .site-visitors-caption span { display:none; }
  .mobile-site-table > tbody > .site-summary-row .site-visitors-graph { width:90px; max-width:100%; min-width:0; height:22px; }
}

/* Thumb-friendly mobile navigation, with room for the iPhone home indicator. */
.mobile-bottom-tabs,.mobile-more-panel,.mobile-more-backdrop { display:none; }
@media (max-width:767px) {
  .sidebar.mobile-tabs-active { display:none; }
  .workspace.mobile-tabs-active { padding-bottom:calc(72px + env(safe-area-inset-bottom, 0px)); }
  .mobile-bottom-tabs { position:fixed; bottom:0; left:0; right:0; z-index:1030; display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); padding:5px max(8px, env(safe-area-inset-right, 0px)) calc(5px + env(safe-area-inset-bottom, 0px)) max(8px, env(safe-area-inset-left, 0px)); border-top:1px solid var(--line); background:#0c141f; box-shadow:0 -4px 20px #0003; }
  .mobile-bottom-tabs > a,.mobile-bottom-tabs > button { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:4px; min-height:52px; padding:5px 4px; border:0; border-radius:8px; background:transparent; color:var(--muted); text-decoration:none; font-size:11px; font-weight:600; line-height:1.2; }
  .mobile-bottom-tabs svg { width:21px; height:21px; fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; }
  .mobile-bottom-tabs .router-link-active,.mobile-bottom-tabs .tab-selected { color:var(--accent); background:#6fe7c810; }
  .mobile-bottom-tabs > :focus-visible,.mobile-more-panel > :focus-visible { outline:2px solid var(--accent); outline-offset:-2px; }
  .mobile-more-backdrop { display:block; position:fixed; inset:0; z-index:1028; border:0; background:#0008; }
  .mobile-more-panel { display:grid; position:fixed; bottom:calc(72px + env(safe-area-inset-bottom, 0px)); left:12px; right:12px; z-index:1029; max-height:calc(100dvh - 100px - env(safe-area-inset-bottom, 0px)); overflow-y:auto; padding:12px; border:1px solid var(--line); border-radius:14px; background:#101a27; box-shadow:0 -8px 32px #0005; }
  .mobile-more-heading { display:flex; align-items:center; justify-content:space-between; padding:0 4px 8px; }
  .mobile-more-heading .btn { min-height:40px; }
  .mobile-more-panel > a,.mobile-more-signout { display:block; padding:12px; min-height:44px; text-align:left; border:0; border-radius:6px; background:none; color:#edf4fc; text-decoration:none; font-size:14px; }
  .mobile-more-panel > a.router-link-active { color:var(--accent); background:#6fe7c810; }
  .mobile-more-signout { border-top:1px solid var(--line); border-radius:0; margin-top:4px; color:var(--muted); }
}

.mobile-site-domain { display:none; }
.site-domain-link { color:var(--accent); text-decoration:underline; text-underline-offset:3px; }
@media (max-width:767px) {
  .mobile-site-domain { display:flex; align-items:center; gap:8px; min-height:44px; font-size:14px; font-weight:600; }
  .mobile-site-domain > a,.mobile-site-domain > span { flex:1; min-width:0; overflow-wrap:anywhere; }
  .site-collapse-button { flex-shrink:0; width:36px; min-height:44px; padding:0; border:0; background:none; color:var(--accent); font-size:18px; }
}

.domain-registration-details { width:240px; max-width:70vw; white-space:normal; overflow-wrap:anywhere; line-height:1.5; }
.domain-registration-details .form-check-input { flex-shrink:0; }

.site-detail-tabs { display:flex; gap:4px; overflow-x:auto; border-bottom:1px solid var(--line); margin-bottom:20px; }
.site-detail-tabs button { flex-shrink:0; padding:12px 18px; border:0; border-bottom:2px solid transparent; background:transparent; color:var(--muted); font:inherit; cursor:pointer; }
.site-detail-tabs button.active { color:#74efce; border-bottom-color:#74efce; }
.site-detail-tabs button:hover { background:#192534; color:#e0e9f3; }
.site-detail-tabs button:focus-visible { outline:2px solid #74efce; outline-offset:-3px; }
.site-settings-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:28px; }
.site-domain-settings { overflow-wrap:anywhere; line-height:1.7; }
.site-domain-settings .form-check-input { flex-shrink:0; }
.site-detail-panel [role=tabpanel] { min-width:0; }
.site-detail-panel h1 { font-size:1.35rem; }

/* Reserve the list layout while its first response is loading. */
.site-skeleton-row td { padding-top:24px; padding-bottom:24px; }
.site-skeleton { display:block; border-radius:4px; background:#233244; animation:site-skeleton-pulse 1.6s ease-in-out infinite; }
.skeleton-domain { width:clamp(100px,12vw,190px); height:14px; }
.skeleton-caption { width:90px; height:9px; margin-top:10px; }
.skeleton-status { width:90px; height:22px; }
.skeleton-chart { width:100%; min-width:180px; height:26px; }
.skeleton-number { width:42px; height:13px; }
.skeleton-button { width:66px; height:32px; margin-left:auto; }
@keyframes site-skeleton-pulse { 50% { opacity:.45; } }
@media (prefers-reduced-motion:reduce) { .site-skeleton { animation:none; } }

.uptime-skeleton .site-skeleton { height:100%; min-width:0; border-radius:2px; }
.skeleton-uptime-label { width:64px; height:10px; }
.skeleton-uptime-now { width:22px; height:10px; }

/* Details belong to the selected row; nested tables retain their own layout. */
.mobile-site-table > tbody > .site-detail-row > td { padding:16px; white-space:normal; background:#0c1420; }
@media (max-width:767px) {
  .mobile-site-table > tbody > .site-detail-row { display:block; margin:-2px 0 10px; }
  .mobile-site-table > tbody > .site-detail-row > td { display:block; width:100%; padding:12px; border:1px solid var(--line); border-radius:8px; }
}

.monitor-metric-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,280px),1fr)); gap:16px; }
.monitor-metric-card { min-width:0; padding:18px; border:1px solid var(--line); border-radius:8px; background:#111a26; overflow-wrap:anywhere; }
.monitor-metric-name { line-height:1.4; }
.monitor-metric-value { font-size:1.8rem; font-weight:600; line-height:1.25; color:var(--text,#e4ebf5); font-variant-numeric:tabular-nums; }
.monitor-metric-value > span { font-size:1rem; font-weight:400; color:var(--muted); }
.monitor-metric-history { margin-top:20px; }
.monitor-metric-history svg { display:block; width:100%; height:90px; color:var(--accent); }
.monitor-metric-baseline { stroke:var(--line); }
.monitor-metric-range { display:flex; flex-wrap:wrap; justify-content:space-between; gap:4px 12px; }

.monitor-metric-plot { position:relative; }
.monitor-metric-plot svg { cursor:crosshair; }
.monitor-metric-plot svg:focus-visible { outline:2px solid var(--accent); outline-offset:3px; border-radius:3px; }
.monitor-metric-tooltip { position:absolute; bottom:calc(100% + 4px); z-index:2; width:220px; max-width:100%; padding:8px 10px; border:1px solid var(--line); border-radius:6px; background:#09111e; color:#e4ebf5; font-size:12px; line-height:1.5; box-shadow:0 4px 14px #0006; pointer-events:none; }
.monitor-metric-tooltip strong { display:block; color:var(--accent); }
.monitor-metric-crosshair { stroke:currentColor; stroke-width:1; stroke-dasharray:3 3; opacity:.5; }

/* Metrics-only monitors show their trends directly in the inventory row. */
.monitor-metric-mini-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(125px,1fr)); gap:8px; }
.monitor-metric-mini { min-width:0; padding:8px 10px; border:1px solid var(--line); border-radius:6px; background:#111a26; }
.monitor-metric-mini-name { color:var(--muted); font-size:11px; line-height:1.3; overflow-wrap:anywhere; }
.monitor-metric-mini-value { margin-top:3px; font-size:16px; font-weight:600; font-variant-numeric:tabular-nums; overflow-wrap:anywhere; }
.monitor-metric-mini-value > span { font-size:11px; font-weight:400; color:var(--muted); }
.monitor-metric-mini svg { display:block; width:100%; height:34px; margin-top:5px; color:var(--accent); }
.monitor-metric-mini-caption { display:block; margin-top:3px; color:var(--muted); font-size:10px; }
.monitor-metric-mini.metric-mini-warning { border-color:#80612e; }
.monitor-metric-mini.metric-mini-warning svg { color:#ffd184; }
@media (max-width:767px) {
  .mobile-site-table > tbody > .site-summary-row > .site-metric-preview-cell { display:block; min-width:0; padding-top:8px; }
  .monitor-metric-mini-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
}

/* Mobile monitor inventory and details. Desktop keeps its table layout. */
.mobile-uptime-picker { display:none; }
/* The form is the modal's flex container; only the fields should scroll. */
.sites-view #siteModal .modal-content { min-height:0; }
.sites-view #siteModal .modal-body { min-height:0; overflow-y:auto; }
.sites-view #siteModal .modal-header,.sites-view #siteModal .modal-footer { flex-shrink:0; }
@media (max-width:767px) {
  .sites-view > .card { background:transparent; border:0; box-shadow:none!important; }
  .sites-view > .card > .card-body { padding:0; }
  .sites-view .site-list-toolbar { display:grid; grid-template-columns:minmax(0,1fr); gap:14px; margin-bottom:18px; }
  .sites-view .site-list-title { font-size:24px; }
  .sites-view .site-list-actions { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; width:100%; margin:0; }
  .sites-view .site-list-actions .btn { min-height:44px; padding:8px 6px; font-size:13px; white-space:normal; }
  .sites-view .site-organization-saved { grid-column:1 / -1; font-size:12px; }
  .sites-view .site-list-filters { gap:10px; grid-template-columns:repeat(2,minmax(0,1fr)); }
  .sites-view .site-list-filters .form-label { font-size:12px; margin-bottom:6px; }
  .sites-view .site-list-filters .form-select { font-size:16px; min-height:44px; }
  .sites-view .mobile-site-table > tbody.site-group { padding:8px; }
  .sites-view .site-group-toggle { padding:8px 4px; }
  .sites-view .site-group-name { flex-basis:calc(100% - 28px); font-size:15px; }
  .sites-view .site-group-count { margin-left:20px; }
  .sites-view .site-group-summary { line-height:1.5; }
  .sites-view .mobile-site-table > tbody > .site-summary-row { grid-template-columns:repeat(2,minmax(0,1fr)); padding:10px 12px; margin-bottom:10px; background:var(--panel); border-radius:12px; }
  .sites-view .mobile-site-table > tbody > .site-summary-row > td:first-child { grid-column:1 / -1; }
  .sites-view .mobile-site-toggle,.sites-view .mobile-site-domain { font-size:15px; line-height:1.5; }
  .sites-view .mobile-site-toggle > span:last-child,.sites-view .site-collapse-button { display:grid; place-items:center; width:44px; min-width:44px; min-height:44px; font-size:22px; }
  .sites-view .mobile-site-table > tbody > .site-summary-row .site-check-interval { display:block; line-height:1.6; margin:0 0 6px; }
  .sites-view .site-check-interval .badge { white-space:normal; }
  .sites-view .mobile-site-table > tbody > .site-summary-row > td:nth-child(2) { grid-column:1 / -1; display:flex; flex-wrap:wrap; align-items:center; gap:6px 10px; padding:6px 0; text-align:left!important; }
  .sites-view .mobile-site-table > tbody > .site-summary-row > td:nth-child(2) .small { display:inline; margin:0!important; font-size:12px; }
  .sites-view .mobile-site-table > tbody > .site-summary-row .compact-site-uptime { height:12px; margin:6px 0; }
  .sites-view .mobile-site-table > tbody > .site-summary-row .site-visitors-caption { font-size:11px; }
  .sites-view .mobile-site-table > tbody > .site-summary-row .site-bug-summary { min-height:44px; font-size:12px; flex-wrap:wrap; gap:8px; }
  .sites-view .mobile-site-table > tbody > .site-summary-row .site-reorder-controls .btn { min-width:44px; min-height:44px; font-size:14px; }
  .sites-view .mobile-site-table > tbody > .site-summary-row.site-expanded { border-color:#72efc566; border-bottom-left-radius:0; border-bottom-right-radius:0; margin-bottom:0; }
  /* The detail panel already includes certificates and averages. */
  .sites-view .mobile-site-table > tbody > .site-summary-row.site-expanded > td[data-label="Certificate"],
  .sites-view .mobile-site-table > tbody > .site-summary-row.site-expanded > td[data-label="Avg latency (ms)"],
  .sites-view .mobile-site-table > tbody > .site-summary-row.site-expanded > td[data-label="Avg response (s)"],
  .sites-view .mobile-site-table > tbody > .site-summary-row > td.site-details-action { display:none; }
  .sites-view .mobile-uptime-picker { display:block; margin-top:12px; }
  .sites-view .mobile-site-table > tbody > .site-detail-row { margin:0 0 12px; }
  .sites-view .mobile-site-table > tbody > .site-detail-row > td { max-width:none; padding:12px; border-radius:0 0 12px 12px; border-top:0; overflow-wrap:anywhere; }
  .sites-view .site-detail-heading { gap:8px!important; }
  .sites-view .site-detail-heading h5 { flex:1; min-width:0; font-size:15px; line-height:1.5; }
  .sites-view .site-detail-heading .btn { flex-shrink:0; }
  .sites-view .site-detail-tabs { gap:0; margin:0 -4px 16px; scrollbar-width:thin; }
  .sites-view .site-detail-tabs button { flex:1 0 auto; min-height:44px; padding:10px 8px; font-size:13px; }
  .sites-view .site-detail-panel .card-body { padding:12px 0; }
  .sites-view .site-detail-panel #site-panel-settings { padding:12px!important; }
  .sites-view .site-settings-grid { grid-template-columns:minmax(0,1fr); gap:24px; }
  .sites-view .site-node-heading { gap:8px; }
  .sites-view .site-node-heading .btn { white-space:normal; }
  .sites-view .site-detail-panel .row > .col-md-4 { width:50%; font-size:13px; }
  .sites-view .site-detail-panel .monitor-metric-card { padding:12px; }
  .sites-view .monitor-metric-mini { padding:10px; }
  .sites-view .monitor-metric-mini-name,.sites-view .monitor-metric-mini-caption { font-size:12px; }
  .sites-view .monitor-metric-mini-value { font-size:18px; }
  .sites-view .table-responsive > .site-node-table,
  .sites-view .table-responsive > .site-event-table { display:block; width:100%; min-width:0; }
  .sites-view :is(.site-node-table,.site-event-table) > thead { position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); }
  .sites-view :is(.site-node-table,.site-event-table) > tbody { display:block; }
  .sites-view :is(.site-node-table,.site-event-table) > tbody > tr { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; padding:12px; margin-top:10px; border:1px solid var(--line); border-radius:8px; }
  .sites-view :is(.site-node-table,.site-event-table) td { display:block; min-width:0; padding:0; border:0; white-space:normal; overflow-wrap:anywhere; font-size:13px; }
  .sites-view :is(.site-node-table,.site-event-table) td::before { content:attr(data-label); display:block; color:var(--muted); font-size:11px; margin-bottom:4px; }
  .sites-view :is(.site-node-table,.site-event-table) td:first-child { grid-column:1 / -1; }
  .sites-view .site-node-table td:nth-child(2) { grid-column:1 / -1; grid-row:1; font-size:15px; font-weight:600; }
  .sites-view .site-organization-editor .card-body { padding:12px; }
  .sites-view .site-organization-editor label:has(input[type="checkbox"]) { display:flex; align-items:center; gap:10px; width:100%; min-height:44px; overflow-wrap:anywhere; }
  .sites-view .site-organization-editor input[type="checkbox"] { flex-shrink:0; width:20px; height:20px; }
  .sites-view .site-organization-editor input.form-control { flex:1 1 100%; }
  .sites-view #siteModal .modal-dialog { margin:0; max-width:none; height:100%; height:100dvh; }
  .sites-view #siteModal .modal-content { height:100%; max-height:100%; border-radius:0; }
  .sites-view #siteModal .modal-header,.sites-view #siteModal .modal-footer { flex-shrink:0; }
  .sites-view #siteModal .modal-header { align-items:center; padding-top:max(12px,env(safe-area-inset-top)); }
  .sites-view #siteModal .modal-header .btn-close { min-width:44px; min-height:44px; padding:0; margin:0; }
  .sites-view #siteModal .modal-body { flex:1 1 auto; min-height:0; overflow-y:auto; overscroll-behavior:contain; }
  .sites-view #siteModal .modal-footer { display:grid; grid-template-columns:1fr 1fr; padding-bottom:max(12px,env(safe-area-inset-bottom)); }
  .sites-view #siteModal .modal-footer .btn { margin:0; white-space:normal; }
}