:root {
  color-scheme: light;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-synthesis: none;
  --radius: 0.625rem;
  --background: oklch(1 0 0);
  --foreground: oklch(0.145 0 0);
  --card: oklch(1 0 0);
  --card-foreground: oklch(0.145 0 0);
  --popover: oklch(1 0 0);
  --popover-foreground: oklch(0.145 0 0);
  --primary: oklch(0.205 0 0);
  --primary-foreground: oklch(0.985 0 0);
  --secondary: oklch(0.97 0 0);
  --secondary-foreground: oklch(0.205 0 0);
  --muted: oklch(0.97 0 0);
  --muted-foreground: oklch(0.556 0 0);
  --accent: oklch(0.97 0 0);
  --accent-foreground: oklch(0.205 0 0);
  --destructive: oklch(0.577 0.245 27.325);
  --border: oklch(0.922 0 0);
  --input: oklch(0.922 0 0);
  --ring: oklch(0.708 0 0);
  --sidebar: oklch(0.985 0 0);
  --sidebar-foreground: oklch(0.145 0 0);
  --sidebar-accent: oklch(0.97 0 0);
  --sidebar-accent-foreground: oklch(0.205 0 0);
  --sidebar-border: oklch(0.922 0 0);
}

.dark {
  color-scheme: dark;
  --background: oklch(0.145 0 0);
  --foreground: oklch(0.985 0 0);
  --card: oklch(0.205 0 0);
  --card-foreground: oklch(0.985 0 0);
  --popover: oklch(0.205 0 0);
  --popover-foreground: oklch(0.985 0 0);
  --primary: oklch(0.922 0 0);
  --primary-foreground: oklch(0.205 0 0);
  --secondary: oklch(0.269 0 0);
  --secondary-foreground: oklch(0.985 0 0);
  --muted: oklch(0.269 0 0);
  --muted-foreground: oklch(0.708 0 0);
  --accent: oklch(0.269 0 0);
  --accent-foreground: oklch(0.985 0 0);
  --destructive: oklch(0.704 0.191 22.216);
  --border: oklch(1 0 0 / 10%);
  --input: oklch(1 0 0 / 15%);
  --ring: oklch(0.556 0 0);
  --sidebar: oklch(0.205 0 0);
  --sidebar-foreground: oklch(0.985 0 0);
  --sidebar-accent: oklch(0.269 0 0);
  --sidebar-accent-foreground: oklch(0.985 0 0);
  --sidebar-border: oklch(1 0 0 / 10%);
}

* { box-sizing: border-box; border-color: var(--border); }
[hidden] { display: none !important; }
/* The gutter is held open whether or not the page scrolls: without it a tab
   whose panel outgrows the viewport takes the scrollbar's width out of the
   layout, and every switch between two such tabs nudges the page sideways. */
html { min-width: 320px; background: var(--background); scroll-behavior: smooth; scrollbar-gutter: stable; }
body { min-width: 320px; min-height: 100vh; margin: 0; background: var(--background); color: var(--foreground); font-size: 14px; }
a { color: inherit; text-decoration: none; }
button, input, select { color: inherit; font: inherit; }
button { cursor: pointer; }

.app-shell { display: flex; min-height: 100vh; width: 100%; }
.sidebar {
  position: sticky;
  top: 0;
  z-index: 30;
  display: flex;
  width: 16rem;
  height: 100vh;
  flex: 0 0 16rem;
  flex-direction: column;
  border-right: 1px solid var(--sidebar-border);
  background: var(--sidebar);
  color: var(--sidebar-foreground);
  transition: width 180ms ease, flex-basis 180ms ease;
}
.sidebar-header { padding: 0.5rem; }
.sidebar-header > div, .sidebar-header { min-width: 0; }
.brand { display: flex; min-width: 0; flex: 1; align-items: center; gap: 0.5rem; border-radius: 0.375rem; padding: 0.5rem; }
.brand:hover { background: var(--sidebar-accent); }
.brand-mark {
  display: grid;
  width: 2rem;
  height: 2rem;
  flex: 0 0 2rem;
  place-items: center;
}
.brand-mark img { width: 100%; height: 100%; }
.brand-copy, .user-copy { display: grid; min-width: 0; flex: 1; line-height: 1.25; }
.brand-copy strong, .user-copy strong { overflow: hidden; font-size: 0.875rem; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
.brand-copy small, .user-copy small { overflow: hidden; color: var(--muted-foreground); font-size: 0.75rem; text-overflow: ellipsis; white-space: nowrap; }
.sidebar-collapse { position: absolute; top: 1rem; right: 0.7rem; display: grid; width: 2rem; height: 2rem; place-items: center; border: 0; border-radius: 0.375rem; background: transparent; }
.sidebar-collapse:hover, .user-menu:hover { background: var(--sidebar-accent); }
.nav { min-height: 0; flex: 1; overflow-y: auto; padding: 0 0.5rem 0.5rem; }
.nav-group { padding: 0.5rem 0; }
.nav-label { height: 2rem; padding: 0.5rem; color: var(--muted-foreground); font-size: 0.75rem; font-weight: 500; }
.nav-item { display: flex; width: 100%; height: 2rem; align-items: center; gap: 0.5rem; overflow: hidden; border-radius: 0.375rem; padding: 0 0.5rem; color: var(--sidebar-foreground); font-size: 0.875rem; font-weight: 500; white-space: nowrap; }
.nav-item:hover, .nav-item.active { background: var(--sidebar-accent); color: var(--sidebar-accent-foreground); }
.nav-item.disabled { cursor: default; opacity: 0.48; }
.nav-icon { width: 1rem; height: 1rem; flex: 0 0 1rem; }
.sidebar-bottom { position: relative; margin-top: auto; padding: 0.5rem; }
.sidebar-account { position: relative; min-width: 0; }
.user-menu { display: flex; width: 100%; min-width: 0; align-items: center; gap: 0.5rem; border: 0; border-radius: 0.5rem; background: transparent; padding: 0.5rem; color: inherit; text-align: left; }
.user-menu:hover { background: var(--sidebar-accent); }
.avatar { display: grid; width: 2rem; height: 2rem; flex: 0 0 2rem; place-items: center; border-radius: 0.5rem; background: var(--accent); font-size: 0.75rem; font-weight: 600; text-transform: uppercase; }
.avatar-image { object-fit: cover; background: var(--surface-2, var(--accent)); }
.user-action { display: grid; width: 1.75rem; height: 1.75rem; place-items: center; border: 0; border-radius: 0.375rem; background: transparent; color: var(--muted-foreground); }
.user-action .nav-icon { width: 0.9rem; height: 0.9rem; }
.account-popover { position: absolute; z-index: 60; bottom: calc(100% + .5rem); left: 0; display: grid; width: 15rem; overflow: hidden; border: 1px solid var(--border); border-radius: .625rem; background: var(--popover); color: var(--popover-foreground); padding: .375rem; box-shadow: 0 16px 40px rgb(0 0 0 / .24); }
.account-popover[hidden] { display: none; }
.account-popover-header { display: flex; min-width: 0; align-items: center; gap: .625rem; padding: .5rem; }
.account-popover-header > span:last-child { display: grid; min-width: 0; line-height: 1.25; }
.account-popover-header strong, .account-popover-header small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.account-popover-header strong { font-size: .8125rem; }
.account-popover-header small { color: var(--muted-foreground); font-size: .6875rem; }
.account-menu-item { display: flex; width: 100%; height: 2.25rem; align-items: center; gap: .625rem; border: 0; border-radius: .375rem; background: transparent; padding: 0 .625rem; color: inherit; font-size: .8125rem; text-align: left; }
.account-menu-item:hover { background: var(--accent); }
.account-menu-item .nav-icon, .account-theme-label .nav-icon { width: 1rem; height: 1rem; color: var(--muted-foreground); }
.account-menu-separator { height: 1px; margin: .375rem -.375rem; background: var(--border); }
.account-theme { display: grid; gap: .4rem; padding: .375rem .5rem .5rem; }
.account-theme-label { display: flex; align-items: center; gap: .625rem; color: var(--muted-foreground); font-size: .75rem; font-weight: 500; }
.account-theme-options { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .2rem; border-radius: .4rem; background: var(--muted); padding: .2rem; }
.account-theme-options button { height: 1.75rem; border: 0; border-radius: .3rem; background: transparent; color: var(--muted-foreground); font-size: .6875rem; font-weight: 600; }
.account-theme-options button:hover { color: var(--foreground); }
.account-theme-options button.active { background: var(--background); color: var(--foreground); box-shadow: 0 1px 3px rgb(0 0 0 / .14); }
.account-sign-out { color: var(--destructive); }
.sidebar-scrim { display: none; }
.sidebar-rail { position: absolute; top: 0; right: -.25rem; z-index: 40; width: .5rem; height: 100%; border: 0; background: transparent; cursor: w-resize; }
.sidebar-rail::after { position: absolute; top: 0; bottom: 0; left: .2rem; width: 1px; background: transparent; content: ""; transition: background 120ms ease; }
.sidebar-rail:hover::after, .sidebar-rail:focus-visible::after { background: var(--sidebar-border); }

.sidebar-collapsed .sidebar { width: 3rem; flex-basis: 3rem; }
.sidebar-collapsed .brand {
  width: 2.5rem;
  height: 2.5rem;
  flex: 0 0 2.5rem;
  justify-content: center;
  padding: 0;
  margin-inline: auto;
  border-radius: 50%;
}
.sidebar-collapsed .brand-copy,
.sidebar-collapsed .nav-label,
.sidebar-collapsed .nav-item > span,
.sidebar-collapsed .user-copy,
.sidebar-collapsed .user-action,
.sidebar-collapsed .sidebar-collapse { display: none; }
.sidebar-collapsed .sidebar-rail { cursor: e-resize; }
.sidebar-collapsed .nav-item { justify-content: center; padding: 0; }
.sidebar-collapsed .sidebar-header { padding-inline: 0.25rem; }
.sidebar-collapsed .brand-mark, .sidebar-collapsed .avatar { width: 2rem; height: 2rem; }
.sidebar-collapsed .user-menu { justify-content: center; padding-inline: 0; }
.sidebar-tooltip { position: fixed; z-index: 80; max-width: 14rem; border: 1px solid var(--border); border-radius: .375rem; background: var(--popover); padding: .3rem .55rem; color: var(--popover-foreground); font-size: .75rem; font-weight: 500; line-height: 1.4; white-space: nowrap; pointer-events: none; box-shadow: 0 .5rem 1.5rem rgb(0 0 0 / .22); }
.sidebar-tooltip::after { position: absolute; top: 50%; left: -.25rem; width: .375rem; height: .375rem; border-bottom: 1px solid var(--border); border-left: 1px solid var(--border); background: var(--popover); content: ""; transform: translateY(-50%) rotate(45deg); }

.main { min-width: 0; flex: 1; background: var(--background); }
.mobile-header { display: none; }
.content { width: 100%; padding: 1.5rem; }
.dashboard-page { display: grid; gap: 1rem; }
.stats-grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 0.75rem; }
.stat-card { display: flex; min-width: 0; min-height: 6rem; flex-direction: column; border-radius: var(--radius); padding: 0.75rem 1rem; color: white; text-align: left; }
.stat-card strong { overflow: hidden; font-size: 1.5rem; font-weight: 700; letter-spacing: -0.025em; line-height: 1.4; text-overflow: ellipsis; white-space: nowrap; }
.stat-card > span { height: 1rem; margin-top: 0.125rem; font-size: 0.6875rem; opacity: 0.75; }
.stat-card > div { margin-top: 0.375rem; font-size: 0.75rem; font-weight: 600; opacity: 0.9; }
.stat-card.blue { background: #3b82f6; }
.stat-card.green { background: #22c55e; }
.stat-card.red { background: #f87171; }
.stat-card.slate { background: #6b7280; }
.stat-card.orange { background: #f97316; }
.stat-card.cyan { background: #06b6d4; }
.stat-card.emerald { background: #4ade80; }
.stat-card.yellow { background: #eab308; }
.stat-card.rose { background: #ef4444; }
.stat-card.pink { background: #df4778; }
.stat-card.purple { background: #a855f7; }
.stat-card.sky { background: #60a5fa; }
.stat-card.teal { background: #14b8a6; }
.stat-card.amber { background: #eab308; }

.card { overflow: hidden; border: 1px solid var(--border); border-radius: var(--radius); background: var(--card); color: var(--card-foreground); }
.card-header, .panel-header { display: flex; min-height: 4.25rem; align-items: center; justify-content: space-between; gap: 1rem; padding: 1.25rem 1.5rem; }
.card h2, .panel-header h2 { margin: 0; font-size: 1rem; font-weight: 600; }
.panel-header p { margin: 0.25rem 0 0; color: var(--muted-foreground); font-size: 0.75rem; }
.chart-card { position: relative; min-height: 30rem; }
.chart-header { padding-bottom: 0.75rem; }
.range-tabs { display: flex; align-items: center; gap: 0.125rem; border-radius: 0.5rem; background: var(--muted); padding: 0.25rem; }
.range-tabs button { height: 1.75rem; border: 0; border-radius: 0.375rem; padding: 0 0.75rem; background: transparent; color: var(--muted-foreground); font-size: 0.75rem; }
.range-tabs button.active, .range-tabs button.picker-open { background: var(--background); color: var(--foreground); box-shadow: 0 1px 3px rgb(0 0 0 / 0.16); }
.range-tabs button:focus-visible { outline: 2px solid var(--ring); outline-offset: -2px; }
.range-select { display: none; }
.range-select select { width: 7rem; }
.range-custom-mobile { display: none; height: 2rem; border: 1px solid var(--border); border-radius: .375rem; background: var(--background); padding: 0 .65rem; color: var(--foreground); font-size: .75rem; }
.chart-wrap { position: relative; height: 22rem; padding: 0 1.5rem 1rem; }
.chart-plot { position: relative; height: 100%; }
.chart-plot svg { display: block; width: 100%; height: 100%; overflow: visible; }
.chart-lines line { stroke: var(--border); stroke-width: 1; stroke-dasharray: 3 4; }
.chart-series { fill: none; stroke-width: 2.25; vector-effect: non-scaling-stroke; }
.chart-series.total { stroke: #559bd4; }
.chart-series.success { stroke: #69ad45; }
.chart-series.blocked { stroke: #ff9f40; }
.chart-series.cache { stroke: #ffc000; }
.chart-series.server-failure { stroke: #ff6384; }
.chart-series.nx-domain { stroke: #a5a5a5; }
.chart-series.refused { stroke: #4bc0c0; }
.chart-series.recursive { stroke: #70ad47; stroke-width: 1.35; stroke-dasharray: 6 5; }
.chart-empty { position: absolute; inset: 0; display: grid; place-items: center; color: var(--muted-foreground); font-size: 0.875rem; pointer-events: none; }
.chart-axis { position: absolute; right: 1.5rem; bottom: 0; left: 1.5rem; display: flex; justify-content: space-between; color: var(--muted-foreground); font-size: 0.6875rem; pointer-events: none; }
/* Y labels live in HTML, not the SVG: the plot stretches with
   preserveAspectRatio="none", which would warp any text drawn inside it.
   Percentages map the 1200x320 viewBox onto the plot box exactly. */
.chart-y-labels { position: absolute; inset: 0; pointer-events: none; }
.chart-y-labels span { position: absolute; right: 96.1667%; transform: translateY(-50%); color: var(--muted-foreground); font-size: 0.6875rem; font-variant-numeric: tabular-nums; line-height: 1; white-space: nowrap; }
.chart-y-labels span:nth-child(1) { top: 7.5%; }
.chart-y-labels span:nth-child(2) { top: 28.75%; }
.chart-y-labels span:nth-child(3) { top: 50%; }
.chart-y-labels span:nth-child(4) { top: 71.25%; }
.chart-y-labels span:nth-child(5) { top: 92.5%; }
.chart-hover { position: absolute; inset: 0; pointer-events: none; }
.chart-crosshair { position: absolute; top: 7.5%; height: 85%; width: 1px; background: var(--muted-foreground); opacity: .35; }
.chart-marker { position: absolute; width: .5rem; height: .5rem; margin: -.25rem 0 0 -.25rem; border: 2px solid var(--card); border-radius: 50%; box-shadow: 0 1px 3px rgb(0 0 0 / .3); }
.chart-tooltip { position: absolute; z-index: 8; min-width: 10rem; border: 1px solid var(--border); border-radius: .5rem; background: var(--popover); padding: .5rem .625rem; color: var(--popover-foreground); font-size: .75rem; pointer-events: none; box-shadow: 0 .5rem 1.5rem rgb(0 0 0 / .22); }
.chart-tooltip-time { margin-bottom: .35rem; color: var(--muted-foreground); font-size: .6875rem; font-weight: 500; }
.chart-tooltip-row { display: flex; align-items: center; gap: .4rem; line-height: 1.6; }
.chart-tooltip-row i { width: .5rem; height: .5rem; flex: none; border-radius: 50%; }
.chart-tooltip-row b { margin-left: auto; font-variant-numeric: tabular-nums; font-weight: 600; }
.chart-live { display: flex; margin-left: auto; align-items: center; gap: .4rem; color: var(--muted-foreground); font-size: .75rem; font-weight: 500; }
.chart-live > span { position: relative; width: .5rem; height: .5rem; border-radius: 50%; background: #10b981; box-shadow: 0 0 0 .22rem rgb(16 185 129 / .12); }
/* The ring only pulses while queries are still arriving, so a still dot means
   an idle resolver rather than a stalled panel. */
.chart-live.active > span { animation: chart-live-pulse 2s ease-out infinite; }
@keyframes chart-live-pulse {
  0% { box-shadow: 0 0 0 .1rem rgb(16 185 129 / .32); }
  70% { box-shadow: 0 0 0 .5rem rgb(16 185 129 / 0); }
  100% { box-shadow: 0 0 0 .1rem rgb(16 185 129 / 0); }
}
.chart-card:has(.range-popover:not([hidden])) .chart-live { color: color-mix(in oklch, var(--muted-foreground) 55%, transparent); }
.chart-card:has(.range-popover:not([hidden])) .chart-live > span { animation: none; background: var(--muted-foreground); box-shadow: none; opacity: .4; }
.range-popover { position: absolute; z-index: 12; width: min(18rem, calc(100vw - 2rem)); border: 1px solid var(--border); border-radius: var(--radius); background: var(--background); padding: .75rem; color: var(--foreground); box-shadow: 0 12px 30px rgb(0 0 0 / .22); }
.chart-range-popover { top: 3.85rem; right: 1.5rem; }
.range-picker-body { display: grid; gap: .75rem; }
.calendar-caption { display: grid; grid-template-columns: 2rem 1fr 2rem; align-items: center; gap: .375rem; }
.calendar-caption > button { display: grid; width: 2rem; height: 2rem; place-items: center; border: 0; border-radius: .375rem; background: transparent; padding: 0; }
.calendar-caption > button:hover:not(:disabled) { background: var(--accent); }
.calendar-caption > button:disabled { cursor: default; opacity: .35; }
.calendar-caption .nav-icon { width: 1rem; height: 1rem; }
.calendar-dropdowns { display: flex; align-items: center; justify-content: center; gap: .375rem; }
.calendar-dropdowns label:first-child { width: 4.4rem; }
.calendar-dropdowns label:last-child { width: 5.25rem; }
.calendar-dropdowns select { height: 2rem; padding: 0 .5rem; background-color: var(--background); font-size: .8rem; font-weight: 600; }
.calendar-weekdays, .calendar-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); }
.calendar-weekdays span { display: grid; height: 2rem; place-items: center; color: var(--muted-foreground); font-size: .7rem; font-weight: 400; }
.calendar-day { position: relative; display: grid; height: 2rem; place-items: center; }
.calendar-day.in-range { background: var(--accent); }
.calendar-day.range-start { border-radius: .375rem 0 0 .375rem; }
.calendar-day.range-end { border-radius: 0 .375rem .375rem 0; }
.calendar-day.range-start.range-end { border-radius: .375rem; }
.calendar-day button { display: grid; width: 2rem; height: 2rem; place-items: center; border: 0; border-radius: .375rem; background: transparent; padding: 0; font-size: .75rem; font-variant-numeric: tabular-nums; }
.calendar-day button:hover:not(:disabled) { position: relative; z-index: 1; background: var(--accent); }
.calendar-day.range-start button, .calendar-day.range-end button { position: relative; z-index: 1; background: var(--primary); color: var(--primary-foreground); }
.calendar-day.today:not(.range-start, .range-end) button { background: var(--accent); color: var(--accent-foreground); }
.calendar-day.outside-month button { color: var(--muted-foreground); }
.calendar-day button:disabled { cursor: default; opacity: .35; }
.range-times { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .5rem; }
.range-times label { display: grid; gap: .375rem; color: var(--muted-foreground); font-size: .7rem; font-weight: 500; }
.range-times input { height: 2rem; padding: 0 .55rem; font-size: .75rem; font-variant-numeric: tabular-nums; }
.time-field::-webkit-calendar-picker-indicator { display: none; }
.range-error { margin: -.2rem 0 0; color: var(--destructive); font-size: .7rem; line-height: 1.35; }
.range-apply { width: 100%; height: 2rem; min-height: 2rem; }
.chart-legend { display: flex; flex-wrap: wrap; justify-content: center; gap: 1rem; padding: 0.75rem 1.5rem 1.25rem; color: var(--muted-foreground); font-size: 0.75rem; }
.chart-legend span::before { display: inline-block; width: 0.5rem; height: 0.5rem; margin-right: 0.35rem; border-radius: 50%; content: ""; }
.chart-legend .blue::before { background: #559bd4; }
.chart-legend .green::before { background: #69ad45; }
.chart-legend .orange::before { background: #ff9f40; }
.chart-legend .purple::before { background: #9966ff; }
.chart-legend .pink::before { background: #ff6384; }
.chart-legend .gray::before { background: #a5a5a5; }
.chart-legend .teal::before { background: #4bc0c0; }
.chart-legend .lime::before { background: #70ad47; }
.chart-legend .yellow::before { background: #ffc000; }

.isotope-dashboard { gap: 1rem; }
.dashboard-insights { display: grid; gap: 1rem; }
.dashboard-rankings, .dashboard-distributions { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; }
.ranking-card, .distribution-card { display: flex; min-width: 0; flex-direction: column; }
.ranking-card > header, .distribution-card > header { display: flex; min-height: 4.25rem; align-items: center; justify-content: space-between; gap: 1rem; padding: 1.25rem 1.5rem .75rem; }
.ranking-card h2, .distribution-card h2 { margin: 0; font-size: 1rem; font-weight: 600; }
.ranking-heading { display: grid; min-width: 0; gap: .15rem; }
.ranking-heading small { color: var(--muted-foreground); font-size: .75rem; }
.ranking-view-all { display: inline-flex; height: 1.75rem; margin-block: -.25rem; flex: 0 0 auto; align-items: center; gap: .125rem; border: 0; border-radius: .375rem; background: transparent; padding: 0 .5rem; color: var(--muted-foreground); font-size: .75rem; font-weight: 500; white-space: nowrap; }
.ranking-view-all:hover { background: var(--muted); color: var(--foreground); }
.ranking-view-all:focus-visible { outline: 2px solid var(--ring); outline-offset: 1px; }
.ranking-view-all .nav-icon { width: .75rem; height: .75rem; flex: 0 0 .75rem; }
.ranking-list { display: flex; min-height: 17.5rem; flex: 1; flex-direction: column; }
.ranking-row { display: flex; height: 3.5rem; align-items: center; gap: 1rem; border-top: 1px solid var(--border); padding: .625rem 1.5rem; }
.ranking-row:hover { background: color-mix(in oklch, var(--muted) 45%, transparent); }
.ranking-row > div { display: grid; min-width: 0; flex: 1; gap: .1rem; }
.ranking-row strong { overflow: hidden; font: 500 .875rem ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace; text-overflow: ellipsis; white-space: nowrap; }
.ranking-row small { overflow: hidden; color: var(--muted-foreground); font-size: .75rem; text-overflow: ellipsis; white-space: nowrap; }
.ranking-row > span { color: var(--muted-foreground); font-size: .875rem; font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
.dashboard-empty { display: grid; min-height: 17.5rem; flex: 1; place-items: center; color: var(--muted-foreground); font-size: .8rem; }
.dashboard-empty.compact { min-height: 5rem; }
.distribution-card { min-height: 20rem; container-type: inline-size; }
.distribution-content { position: relative; display: flex; flex: 1; align-items: center; gap: 1.25rem; padding: .5rem 1.5rem 1.5rem; }
.donut-wrap { position: relative; display: grid; width: 11rem; max-width: 100%; aspect-ratio: 1; flex: 0 1 11rem; place-items: center; }
.donut-wrap svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.donut-track, .donut-segment { fill: none; stroke-width: 18; }
.donut-track { stroke: var(--muted); }
.donut-segment { transition: stroke-width 150ms ease, opacity 150ms ease; }
.distribution-content.is-donut-active .donut-segment { opacity: .3; }
.distribution-content.is-donut-active .donut-segment.is-active { stroke-width: 22; opacity: 1; }
.donut-tooltip { max-width: calc(100% - 3rem); }
.donut-tooltip .chart-tooltip-share { margin-top: .35rem; color: var(--muted-foreground); font-size: .6875rem; font-weight: 500; }
.donut-wrap > span { position: absolute; color: var(--muted-foreground); font-size: .75rem; }
.donut-color-0 { stroke: #5b9bd5; background: #5b9bd5; }
.donut-color-1 { stroke: #70ad47; background: #70ad47; }
.donut-color-2 { stroke: #ffc000; background: #ffc000; }
.donut-color-3 { stroke: #ff9f40; background: #ff9f40; }
.donut-color-4 { stroke: #ff6384; background: #ff6384; }
.donut-color-5 { stroke: #9966ff; background: #9966ff; }
.donut-color-6 { stroke: #4bc0c0; background: #4bc0c0; }
.distribution-legend { display: grid; min-width: 0; flex: 1; gap: .45rem; }
.distribution-legend > div:not(.dashboard-empty) { display: flex; min-width: 0; align-items: center; gap: .5rem; font-size: .8rem; }
.distribution-legend i { width: .7rem; height: .7rem; flex: 0 0 .7rem; border-radius: .2rem; }
.distribution-legend span { overflow: hidden; flex: 1; text-overflow: ellipsis; white-space: nowrap; }
.distribution-legend strong { color: var(--muted-foreground); font-weight: 600; font-variant-numeric: tabular-nums; }
.distribution-legend > div[data-donut-legend] { transition: opacity 150ms ease; }
.distribution-content.is-donut-active .distribution-legend > div[data-donut-legend] { opacity: .5; }
.distribution-content.is-donut-active .distribution-legend > div[data-donut-legend].is-active { opacity: 1; }
.distribution-legend > div[data-donut-legend].is-active strong { color: var(--foreground); }
@container (max-width: 22rem) {
  .distribution-content { align-items: center; flex-direction: column; gap: 1rem; }
  .donut-wrap { flex: none; }
  .distribution-legend { width: 100%; flex: none; }
}

.blocking-page { width: 100%; }
.blocking-summary { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .75rem; }
.blocking-summary-card { display: flex; min-height: 6rem; align-items: center; gap: .9rem; border: 1px solid var(--border); border-radius: var(--radius); background: var(--card); padding: 1rem; }
.blocking-summary-card > span { display: grid; width: 2.5rem; height: 2.5rem; flex: 0 0 2.5rem; place-items: center; border-radius: .6rem; background: var(--muted); color: var(--muted-foreground); }
.blocking-summary-card > span .nav-icon { width: 1.25rem; height: 1.25rem; }
.blocking-summary-card > div { display: grid; min-width: 0; gap: .15rem; }
.blocking-summary-card strong { overflow: hidden; font-size: 1.35rem; line-height: 1.15; text-overflow: ellipsis; white-space: nowrap; }
.blocking-summary-card small { color: var(--muted-foreground); font-size: .75rem; }
.blocking-summary-card.enabled > span { background: rgb(34 197 94 / .14); color: #22c55e; }
.blocking-summary-card.disabled > span { background: rgb(239 68 68 / .14); color: #ef4444; }
.blocking-layout { display: grid; grid-template-columns: minmax(0, 2fr) minmax(17rem, .8fr); align-items: start; gap: 1rem; }
.blocking-manager { min-height: 34rem; }
.blocking-tabs { display: grid; grid-template-columns: repeat(3, 1fr); gap: .25rem; border-bottom: 1px solid var(--border); padding: .75rem; }
.blocking-tabs button { display: flex; height: 2.25rem; align-items: center; justify-content: center; gap: .5rem; border: 0; border-radius: .45rem; background: transparent; color: var(--muted-foreground); font-size: .8rem; font-weight: 500; }
.blocking-tabs button:hover { background: var(--muted); color: var(--foreground); }
.blocking-tabs button.active { background: var(--muted); color: var(--foreground); box-shadow: inset 0 0 0 1px var(--border); }
.blocking-tabs .nav-icon { width: 1rem; height: 1rem; }
.blocking-panel { padding: 1.25rem; }
.blocking-panel > header { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; margin-bottom: 1rem; }
.blocking-panel > header h2 { margin: 0; font-size: 1.05rem; }
.blocking-panel > header p { margin: .25rem 0 0; color: var(--muted-foreground); font-size: .78rem; }
.blocking-panel > header .button, .blocking-panel-actions { flex: 0 0 auto; }
.blocking-panel-actions { display: flex; gap: .5rem; }
.blocking-panel .button .nav-icon { width: 1rem; height: 1rem; }
.blocking-source-list, .blocked-domain-list { overflow: hidden; border: 1px solid var(--border); border-radius: var(--radius); }
.blocking-source-row { display: grid; min-height: 4.75rem; grid-template-columns: 2.25rem minmax(0, 1fr) auto 2rem; align-items: center; gap: .75rem; border-top: 1px solid var(--border); padding: .75rem 1rem; }
.blocking-source-row:first-child { border-top: 0; }
.blocking-source-row:hover, .blocked-domain-row:hover { background: color-mix(in oklch, var(--muted) 45%, transparent); }
.blocking-source-icon { display: grid; width: 2.25rem; height: 2.25rem; place-items: center; border-radius: .5rem; background: var(--muted); color: var(--muted-foreground); }
.blocking-source-icon .nav-icon { width: 1.1rem; height: 1.1rem; }
.blocking-source-row > div { display: grid; min-width: 0; gap: .15rem; }
.blocking-source-row strong { font-size: .875rem; }
.blocking-source-row code { overflow: hidden; color: var(--muted-foreground); font-size: .72rem; text-overflow: ellipsis; white-space: nowrap; }
.blocking-source-row small { color: var(--muted-foreground); font-size: .7rem; text-transform: capitalize; }
.blocking-source-row small.blocklist-health-warning { display: flex; align-items: center; gap: .3rem; color: var(--destructive); text-transform: none; }
.blocking-source-row small.blocklist-health-warning svg { width: .85rem; height: .85rem; flex: 0 0 auto; }
.source-status { border-radius: 999px; background: rgb(34 197 94 / .13); padding: .2rem .5rem; color: #22c55e; font-size: .68rem; font-weight: 600; }
.icon-button.danger { color: var(--muted-foreground); }
.icon-button.danger:hover { background: rgb(239 68 68 / .12); color: #ef4444; }
.domain-list-toolbar { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: 1rem; }
.domain-list-toolbar .button { display: inline-flex; min-height: 2.5rem; align-items: center; justify-content: center; gap: .45rem; }
.domain-list-toolbar .button .nav-icon { width: 1rem; height: 1rem; flex: 0 0 1rem; }
.domain-import-form { display: inline-flex; }
.domain-import-form label { cursor: pointer; }
.domain-import-form.htmx-request label { cursor: wait; opacity: .65; pointer-events: none; }
.button.disabled { cursor: not-allowed; opacity: .48; pointer-events: none; }
.blocking-search { position: relative; display: block; margin-bottom: 1rem; }
.blocking-search .nav-icon { position: absolute; top: .65rem; left: .7rem; width: 1rem; height: 1rem; color: var(--muted-foreground); pointer-events: none; }
.blocking-search input { padding-left: 2.25rem; }
.blocked-domain-row { display: grid; min-height: 3.65rem; grid-template-columns: 1.5rem minmax(0, 1fr) auto 2rem; align-items: center; gap: .75rem; border-top: 1px solid var(--border); padding: .55rem 1rem; }
.blocked-domain-row:first-child { border-top: 0; }
.blocked-domain-row > span { color: #ef4444; }
.blocked-domain-row > span .nav-icon { width: 1rem; height: 1rem; }
.blocked-domain-row strong { overflow: hidden; font: 500 .82rem ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace; text-overflow: ellipsis; white-space: nowrap; }
.blocked-domain-row .domain-policy-badge { border-radius: 999px; padding: .2rem .6rem; color: white; font-size: .68rem; font-weight: 600; line-height: 1.25; }
.blocked-domain-row .domain-policy-badge.blocked { background: var(--destructive); }
.blocked-domain-row .domain-policy-badge.allowed { background: var(--primary); color: var(--primary-foreground); }
.blocked-domain-row .icon-button { opacity: 0; transition: opacity 140ms; }
.blocked-domain-row:hover .icon-button, .blocked-domain-row .icon-button:focus-visible { opacity: 1; }
.domain-list-empty { min-height: 17rem; }
.domain-list-empty p { max-width: none; font-size: .875rem; }
.domain-list-count { margin: 1rem 0 0; color: var(--muted-foreground); font-size: .78rem; }
.domain-list-count [data-domain-shown] { margin-left: .2rem; }
.blocking-empty { display: grid; min-height: 17rem; place-items: center; align-content: center; gap: .4rem; padding: 2rem; color: var(--muted-foreground); text-align: center; }
.blocking-empty > .nav-icon { width: 1.75rem; height: 1.75rem; margin-bottom: .35rem; }
.blocking-empty h3 { margin: 0; color: var(--foreground); font-size: .9rem; }
.blocking-empty p { max-width: 27rem; margin: 0; font-size: .75rem; line-height: 1.5; }
.blocking-filter-empty { padding: 2rem; color: var(--muted-foreground); font-size: .8rem; text-align: center; }
.blocking-settings-form, .blocking-reload { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 1rem; border: 1px solid var(--border); border-radius: var(--radius); padding: 1rem; }
.blocking-settings-form > div, .blocking-reload > div:first-child { display: grid; gap: .25rem; }
.blocking-settings-form p, .blocking-reload p { margin: 0; color: var(--muted-foreground); font-size: .75rem; line-height: 1.45; }
.blocking-settings-form > button { grid-column: 1 / -1; justify-self: end; }
.blocking-reload { margin-top: .75rem; }
.blocking-reload #blocking-reload-result { grid-column: 1 / -1; }
.switch input { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; opacity: 0; pointer-events: none; }
.switch span { position: relative; display: block; width: 2.5rem; height: 1.4rem; border-radius: 999px; background: var(--muted); box-shadow: inset 0 0 0 1px var(--border); transition: background 150ms; }
.switch span::after { position: absolute; top: .2rem; left: .2rem; width: 1rem; height: 1rem; border-radius: 50%; background: var(--background); box-shadow: 0 1px 3px rgb(0 0 0 / .28); content: ""; transition: transform 150ms; }
.switch input:checked + span { background: #22c55e; }
.switch input:checked + span::after { transform: translateX(1.1rem); }
.blocking-aside { display: grid; gap: 1rem; }
.blocking-guidance, .blocking-formats { padding: 1.25rem; }
.blocking-guidance h2, .blocking-formats h2 { margin: 0 0 1rem; font-size: 1rem; }
.blocking-guidance > div { display: flex; gap: .75rem; margin-top: .9rem; }
.blocking-guidance i { width: .5rem; height: .5rem; margin-top: .3rem; flex: 0 0 .5rem; border-radius: 50%; }
.blocking-guidance i.red { background: #ef4444; }
.blocking-guidance i.green { background: #22c55e; }
.blocking-guidance p { display: grid; gap: .2rem; margin: 0; }
.blocking-guidance strong { font-size: .8rem; }
.blocking-guidance span { color: var(--muted-foreground); font-size: .75rem; line-height: 1.45; }
.blocking-formats > div { display: grid; grid-template-columns: 4.5rem 1fr; align-items: center; gap: .5rem; margin-top: .6rem; }
.blocking-formats code { border-radius: .35rem; background: var(--muted); padding: .25rem .4rem; font-size: .7rem; text-align: center; }
.blocking-formats span { color: var(--muted-foreground); font-size: .75rem; }
.blocking-dialog-form { display: grid; gap: .85rem; }
.blocking-dialog-form label { display: grid; gap: .35rem; font-size: .8rem; font-weight: 500; }
.blocking-dialog-form .dialog-footer { margin-top: .25rem; }
.isotope-blocking-layout { grid-template-columns: minmax(0, 2.1fr) minmax(16rem, .85fr); gap: 1.5rem; }
.blocking-main-column { display: grid; min-width: 0; align-content: start; gap: 1.5rem; }
.blocking-status-card { position: relative; z-index: 2; overflow: visible; padding: 1.5rem; }
.blocking-status-card > header { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; }
.blocking-status-card > header h2 { display: flex; align-items: center; gap: .65rem; margin: 0; font-size: 1.4rem; }
.blocking-status-card > header h2 .nav-icon { width: 1.5rem; height: 1.5rem; color: #10b981; }
.blocking-status-card > header p { margin: .3rem 0 0; color: var(--muted-foreground); font-size: .82rem; }
.blocking-status-card > header .button { display: inline-flex; align-items: center; gap: .5rem; }
.blocking-status-card > header .nav-icon { width: 1rem; height: 1rem; }
.blocking-status-actions { display: flex; flex: 0 0 auto; align-items: center; gap: .5rem; }
.blocking-status-stats { grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: 2rem; }
.blocking-quick-actions { position: relative; display: flex; flex-wrap: wrap; align-items: center; gap: .65rem; margin-top: 1.5rem; border-top: 1px solid var(--border); padding-top: 1rem; }
.blocking-quick-actions > .button, .pause-menu > summary { display: inline-flex; align-items: center; gap: .45rem; }
.blocking-quick-actions .nav-icon { width: 1rem; height: 1rem; }
.blocking-quick-actions > small { margin-left: auto; color: var(--muted-foreground); font-size: .7rem; }
.pause-menu { position: relative; }
.pause-menu > summary { list-style: none; cursor: pointer; }
.pause-menu > summary::-webkit-details-marker { display: none; }
.pause-menu > div { position: absolute; top: calc(100% + .35rem); left: 0; z-index: 50; display: grid; width: calc(100% - .5rem); min-width: 9rem; overflow: hidden; border: 1px solid var(--border); border-radius: .5rem; background: var(--popover, var(--card)); color: var(--popover-foreground, var(--foreground)); padding: .3rem; box-shadow: 0 1rem 2.5rem rgb(0 0 0 / .48), 0 .2rem .5rem rgb(0 0 0 / .28); }
.pause-menu > div button { min-height: 2rem; border: 0; border-radius: .35rem; background: transparent; padding: 0 .65rem; color: inherit; font-size: .76rem; text-align: left; white-space: nowrap; }
.pause-menu > div button:hover { background: var(--muted); }
.blocking-workspace { position: relative; z-index: 1; min-width: 0; }
.blocking-workspace > .blocking-tabs { grid-template-columns: repeat(3, 1fr); border: 0; border-radius: .65rem; background: var(--muted); padding: .25rem; }
.blocking-workspace > .blocking-tabs button.active { background: var(--card); }
.blocking-workspace > .blocking-panel { padding: 1.5rem 0 0; }
.blocking-list-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 1rem; }
.blocking-list-toolbar .button { display: inline-flex; align-items: center; gap: .45rem; }
.blocking-list-toolbar .nav-icon { width: 1rem; height: 1rem; }
.blocking-list-toolbar form label { display: flex; align-items: center; gap: .55rem; font-size: .78rem; font-weight: 500; }
.blocking-list-toolbar input { width: 4.25rem; }
.isotope-source-list { border-radius: .7rem; }
.isotope-source-row { grid-template-columns: 1.5rem minmax(0, 1fr) 2rem 2rem; min-height: 4.5rem; background: var(--card); }
.isotope-source-row .blocking-source-icon { width: 1.5rem; height: 1.5rem; background: transparent; }
.isotope-source-row .blocking-source-icon .nav-icon { width: 1rem; height: 1rem; }
.isotope-source-row code { color: var(--foreground); font-size: .79rem; }
.isotope-source-row small { text-transform: none; }
.blocked-domain-row.allowed > span { color: #22c55e; }
.isotope-blocking-aside { gap: 1.5rem; }
.isotope-blocking-aside .blocking-guidance { padding: 1.5rem; }
.popular-lists .green { background: transparent; box-shadow: inset 0 0 0 2px #22c55e; }
.isotope-settings-form { display: grid; gap: 1.5rem; }
.blocking-radio-list { display: grid; gap: .8rem; margin-top: 1.3rem; }
.blocking-radio-list label, .blocking-check { display: flex; align-items: flex-start; gap: .65rem; cursor: pointer; }
.blocking-radio-list input { width: 1rem; height: 1rem; margin-top: .15rem; accent-color: var(--foreground); }
.blocking-radio-list span, .blocking-check span { display: grid; gap: .15rem; }
.blocking-radio-list strong, .blocking-check strong { font-size: .8rem; font-weight: 500; }
.blocking-radio-list small, .blocking-check small, .blocking-textarea small, .blocking-number small { color: var(--muted-foreground); font-size: .72rem; line-height: 1.45; }
.blocking-textarea, .blocking-number { display: grid; gap: .4rem; margin-top: 1.25rem; font-size: .78rem; font-weight: 500; }
textarea { width: 100%; resize: vertical; border: 1px solid var(--input); border-radius: calc(var(--radius) - 2px); outline: 0; background: transparent; padding: .65rem .75rem; color: var(--foreground); font: .8rem/1.5 ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace; }
textarea:focus { border-color: var(--ring); box-shadow: 0 0 0 3px color-mix(in oklch, var(--ring) 28%, transparent); }
.blocking-number input { width: 8rem; }
.blocking-check { margin-top: 1.25rem; }
.blocking-check input { width: 1rem; height: 1rem; margin-top: .15rem; accent-color: var(--foreground); }
.isotope-settings-form > footer { display: flex; justify-content: flex-end; }
.catalog-dialog { width: min(44rem, calc(100vw - 2rem)); max-width: 44rem; }
.catalog-tabs { display: grid; grid-template-columns: repeat(6, 1fr); gap: .2rem; border-radius: .6rem; background: var(--muted); padding: .25rem; }
.catalog-tabs button { height: 2.2rem; border: 0; border-radius: .45rem; background: transparent; color: var(--muted-foreground); font-size: .78rem; font-weight: 500; }
.catalog-tabs button.active { background: var(--card); color: var(--foreground); box-shadow: inset 0 0 0 1px var(--border); }
.catalog-scroll { max-height: min(32rem, 62vh); margin-top: 1rem; overflow-y: auto; }
.catalog-scroll [data-catalog-panel] { display: grid; gap: .65rem; }
.catalog-scroll [data-catalog-panel][hidden] { display: none; }
.catalog-row { display: grid; grid-template-columns: minmax(0, 1fr) 2rem auto; align-items: center; gap: .55rem; border: 1px solid var(--border); border-radius: .6rem; background: var(--card); padding: .75rem 1rem; }
.catalog-row > div { display: grid; min-width: 0; grid-template-columns: auto 1fr; gap: .15rem .5rem; }
.catalog-row strong { font-size: .83rem; }
.catalog-row > div > span { display: inline-flex; width: fit-content; align-items: center; gap: .25rem; border-radius: 999px; background: var(--muted); padding: .12rem .4rem; font-size: .65rem; }
.catalog-row > div > span .nav-icon { width: .7rem; height: .7rem; }
.catalog-row p { grid-column: 1 / -1; overflow: hidden; margin: 0; color: var(--muted-foreground); font-size: .72rem; text-overflow: ellipsis; white-space: nowrap; }
.catalog-row .button { display: inline-flex; align-items: center; gap: .3rem; }
.catalog-row .nav-icon { width: .9rem; height: .9rem; }
.catalog-custom { display: grid; gap: 1rem !important; }
.catalog-custom form label { display: grid; gap: .45rem; font-size: .8rem; font-weight: 500; }
.catalog-custom form label > div { display: grid; grid-template-columns: 1fr auto; gap: .6rem; }
.catalog-custom > div { border-radius: .6rem; background: var(--muted); padding: .9rem 1rem; color: var(--muted-foreground); font-size: .72rem; }
.catalog-custom ul { margin: .45rem 0 0; padding-left: 1.1rem; line-height: 1.55; }
.dashboard-footer { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem; padding: .25rem .25rem 0; color: var(--muted-foreground); font-size: .7rem; }
.dashboard-footer span { display: inline-flex; align-items: center; gap: .35rem; }
.dashboard-footer span:first-child { margin-right: auto; color: var(--foreground); }
.dashboard-footer i { width: .45rem; height: .45rem; border-radius: 50%; background: #10b981; }

.summary-grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 0.75rem; }
.summary-card { display: flex; min-height: 6rem; flex-direction: column; justify-content: space-between; border-radius: var(--radius); background: #4c607d; padding: 0.8rem 1rem; color: #fff; }
.summary-card strong { font-size: 1.5rem; font-weight: 700; }
.summary-card span { font-size: 0.75rem; font-weight: 600; opacity: 0.85; }
.dashboard-columns { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(18rem, 0.7fr); gap: 1rem; }

.live-badge { display: flex; align-items: center; gap: 0.4rem; color: var(--muted-foreground); font-size: 0.75rem; }
.live-badge > span { width: 0.45rem; height: 0.45rem; border-radius: 50%; background: #22c55e; animation: pulse 2s ease-in-out infinite; }
.query-log-empty { display: grid; min-height: 13rem; place-items: center; color: var(--muted-foreground); font-size: 0.875rem; }
.table-scroll { overflow-x: auto; }
.query-log-table { width: 100%; border-collapse: collapse; font-size: 0.8125rem; }
.query-log-table th { height: 2.5rem; padding: 0 1rem; color: var(--muted-foreground); font-size: 0.6875rem; font-weight: 500; text-align: left; text-transform: uppercase; letter-spacing: 0.04em; }
.query-log-table td { height: 3.5rem; padding: 0 1rem; border-top: 1px solid var(--border); color: var(--muted-foreground); white-space: nowrap; }
.query-log-table tr:hover td { background: color-mix(in oklch, var(--muted) 50%, transparent); }
.query-log-table .query-name { max-width: 18rem; overflow: hidden; color: var(--foreground); font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace; text-overflow: ellipsis; }
.source-pill, .pill { display: inline-flex; min-height: 1.4rem; align-items: center; border: 1px solid var(--border); border-radius: 999px; padding: 0 0.45rem; color: var(--muted-foreground); font-size: 0.6875rem; }
.pill.success { color: #16a34a; }

.runtime-list { margin: 0; padding: 0 1.5rem; }
.runtime-list > div { display: flex; min-height: 3.25rem; align-items: center; justify-content: space-between; gap: 1rem; border-top: 1px solid var(--border); }
.runtime-list dt { color: var(--muted-foreground); font-size: 0.8125rem; }
.runtime-list dd { max-width: 65%; margin: 0; overflow-wrap: anywhere; font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace; font-size: 0.75rem; text-align: right; }
.status-inline { display: inline-flex; align-items: center; gap: 0.4rem; font-family: Inter, ui-sans-serif, system-ui, sans-serif; }
.status-inline i { width: 0.45rem; height: 0.45rem; border-radius: 50%; background: #22c55e; }
.runtime-actions { display: flex; flex-wrap: wrap; gap: 0.5rem; padding: 1.25rem 1.5rem 0.5rem; border-top: 1px solid var(--border); }
.runtime-action-result { min-height: 2.25rem; padding: 0.5rem 1.5rem; }
.action-message { color: #16a34a; font-size: 0.75rem; }
.action-message.failed { color: var(--destructive); }

.query-panel, .token-panel { margin-top: 0; }
.query-form { display: grid; grid-template-columns: minmax(12rem, 1fr) 7rem minmax(12rem, 1fr) 7rem auto; gap: 0.75rem; align-items: end; padding: 0 1.5rem 1.5rem; }
.token-form { display: grid; grid-template-columns: minmax(12rem, 1fr) 12rem auto; gap: 0.75rem; align-items: end; padding: 0 1.5rem 1.5rem; }
.query-form label, .token-form label, .auth-form label { display: grid; gap: 0.5rem; font-size: 0.875rem; font-weight: 500; }
input, select { width: 100%; height: 2.25rem; border: 1px solid var(--input); border-radius: calc(var(--radius) - 2px); outline: 0; background: transparent; padding: 0 0.75rem; font-size: 0.875rem; }
input:focus, select:focus { border-color: var(--ring); box-shadow: 0 0 0 3px color-mix(in oklch, var(--ring) 28%, transparent); }
.button, .query-form button, .token-form button, .auth-form button { height: 2.25rem; border: 1px solid var(--primary); border-radius: calc(var(--radius) - 2px); background: var(--primary); padding: 0 1rem; color: var(--primary-foreground); font-size: 0.875rem; font-weight: 500; }
.button:hover, .query-form button:hover, .token-form button:hover, .auth-form button:hover { opacity: 0.9; }
.button.outline { border-color: var(--border); background: var(--background); color: var(--foreground); }
.query-result, .token-result { min-height: 6rem; border-top: 1px solid var(--border); padding: 1.25rem 1.5rem; }
.query-result.empty, .token-result.empty { display: grid; place-items: center; color: var(--muted-foreground); }
.query-result-header { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 0.75rem; }
.query-result-header div { display: grid; gap: 0.2rem; }
.query-result-header span:not(.pill) { color: var(--muted-foreground); font-size: 0.75rem; }
pre { max-height: 24rem; margin: 0; overflow: auto; border: 1px solid var(--border); border-radius: calc(var(--radius) - 2px); background: var(--muted); padding: 1rem; font: 0.75rem/1.65 ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace; }
.query-error { display: grid; gap: 0.35rem; color: var(--destructive); }
.query-error span { font-size: 0.8125rem; }
.token-created { display: grid; gap: 0.5rem; }
.token-created strong { color: #16a34a; }
.token-created code { overflow-wrap: anywhere; border: 1px solid var(--border); border-radius: calc(var(--radius) - 2px); background: var(--muted); padding: 0.75rem; font-size: 0.75rem; }
.token-created span { color: var(--muted-foreground); font-size: 0.75rem; }
.page-footer { padding: 0.75rem 0 1.5rem; color: var(--muted-foreground); font-size: 0.75rem; text-align: center; }

.page-stack { display: grid; gap: 1.5rem; }
.page-heading h1 { margin: 0; font-size: 1.875rem; font-weight: 700; letter-spacing: -0.025em; line-height: 1.2; }
.page-heading p { margin: 0.25rem 0 0; color: var(--muted-foreground); font-size: 0.875rem; }
.page-columns { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.5rem; }
.page-main { display: grid; grid-column: span 2; align-content: start; gap: 1.5rem; min-width: 0; }
.page-aside { display: grid; align-content: start; gap: 1.5rem; min-width: 0; }
.emphasized { border-width: 2px; }
.query-composer { overflow: visible; padding: 1.5rem; }
.query-composer form { display: grid; gap: 0.75rem; }
.query-primary-row { display: flex; gap: 0.75rem; }
.query-primary-row .search-field { position: relative; min-width: 12rem; flex: 1; }
.search-field > .nav-icon { position: absolute; top: 50%; left: 0.75rem; z-index: 1; width: 1rem; height: 1rem; transform: translateY(-50%); color: var(--muted-foreground); }
.search-field input { padding-right: 2.25rem; padding-left: 2.25rem; }
/* One clear control, ours: the browser's own search cancel button would sit on
   top of it wherever the engine draws one. */
.search-field input::-webkit-search-cancel-button { display: none; }
.search-clear { position: absolute; top: 50%; right: .5rem; display: grid; width: 1.35rem; height: 1.35rem; place-items: center; border: 0; border-radius: 999px; background: transparent; padding: 0; color: var(--muted-foreground); translate: 0 -50%; }
.search-clear:hover { background: var(--accent); color: var(--foreground); }
.search-clear .nav-icon { width: .8rem; height: .8rem; }
.search-clear[hidden] { display: none; }
.query-clear { position: absolute; top: 50%; right: 0.5rem; display: grid; width: 1.75rem; height: 1.75rem; place-items: center; transform: translateY(-50%); border: 0; border-radius: calc(var(--radius) - 4px); background: transparent; color: var(--muted-foreground); }
.query-clear:hover { background: var(--accent); color: var(--accent-foreground); }
.query-clear .nav-icon { width: 1rem; height: 1rem; }
.record-type-select { width: 7rem; flex: 0 0 7rem; }
.resolve-button { display: inline-flex; flex: 0 0 auto; align-items: center; gap: 0.5rem; }
.resolve-button .nav-icon { width: 1rem; height: 1rem; }
.query-options-row { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem; }
.resolver-combobox { position: relative; width: 11rem; }
.resolver-trigger {
  display: flex;
  width: 100%;
  height: 2.25rem;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  border: 1px solid var(--input);
  border-radius: calc(var(--radius) - 2px);
  background: var(--background);
  padding: 0 0.75rem;
  font-size: 0.875rem;
  font-weight: 400;
  box-shadow: 0 1px 2px rgb(0 0 0 / 0.03);
}
.resolver-trigger:focus-visible { border-color: var(--ring); outline: 0; box-shadow: 0 0 0 3px color-mix(in oklch, var(--ring) 28%, transparent); }
.resolver-trigger > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.resolver-trigger .nav-icon { width: 1rem; height: 1rem; flex: 0 0 1rem; opacity: 0.5; }
.resolver-popover {
  position: absolute;
  top: calc(100% + 0.25rem);
  left: 0;
  z-index: 50;
  width: max(100%, 18rem);
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: calc(var(--radius) - 2px);
  background: var(--card);
  color: var(--card-foreground);
  box-shadow: 0 10px 24px rgb(0 0 0 / 0.12), 0 2px 6px rgb(0 0 0 / 0.08);
  transform-origin: top left;
  animation: resolver-popover-in 120ms ease-out;
}
@keyframes resolver-popover-in { from { opacity: 0; transform: scale(0.97) translateY(-0.25rem); } to { opacity: 1; transform: scale(1) translateY(0); } }
.resolver-search { display: flex; height: 2.25rem; align-items: center; gap: 0.5rem; border-bottom: 1px solid var(--border); padding: 0 0.75rem; }
.resolver-search .nav-icon { width: 1rem; height: 1rem; flex: 0 0 1rem; opacity: 0.5; }
.resolver-search input { height: 2.25rem; border: 0; border-radius: 0; padding: 0; box-shadow: none; }
.resolver-search input:focus { border: 0; box-shadow: none; }
.resolver-search input::-webkit-search-cancel-button { display: none; }
.resolver-command-list { max-height: 18.75rem; overflow-x: hidden; overflow-y: auto; scroll-padding-block: 0.25rem; }
.resolver-empty { padding: 1.5rem; font-size: 0.875rem; text-align: center; }
.resolver-group { overflow: hidden; padding: 0.25rem; }
.resolver-group-heading { padding: 0.375rem 0.5rem; color: var(--muted-foreground); font-size: 0.75rem; font-weight: 500; }
.resolver-option { display: flex; width: 100%; min-height: 2rem; align-items: center; gap: 0.5rem; border: 0; border-radius: calc(var(--radius) - 4px); background: transparent; padding: 0.375rem 0.5rem; font-size: 0.875rem; text-align: left; }
.resolver-option:hover, .resolver-option:focus-visible { background: var(--accent); color: var(--accent-foreground); outline: 0; }
.resolver-option-label { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.resolver-option-copy { display: flex; min-width: 0; flex: 1; flex-direction: column; line-height: 1.2; }
.resolver-option-copy small { overflow: hidden; color: var(--muted-foreground); font-size: 0.75rem; font-weight: 400; text-overflow: ellipsis; white-space: nowrap; }
.resolver-check { display: block; width: 1rem; height: 1rem; flex: 0 0 1rem; opacity: 0; }
.resolver-check .nav-icon { width: 1rem; height: 1rem; color: var(--muted-foreground); }
.resolver-option[aria-selected="true"] .resolver-check { opacity: 1; }
.resolver-custom-edit { padding-left: 2rem; }
.resolver-separator { height: 1px; margin: 0 -0.25rem; background: var(--border); }
.custom-server-dialog {
  position: fixed;
  /* Centered with auto margins rather than a transform: browsers anchor native
     select and datalist popups to the untransformed box, so a translated dialog
     drops its dropdowns somewhere else on screen entirely. */
  inset: 0;
  width: min(calc(100% - 2rem), 28rem);
  height: fit-content;
  margin: auto;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--background);
  color: var(--foreground);
  padding: 1.5rem;
  box-shadow: 0 20px 50px rgb(0 0 0 / 0.24);
}
.custom-server-dialog[open] { display: grid; gap: 1rem; animation: dialog-in 150ms ease-out; }
.custom-server-dialog::backdrop { background: rgb(0 0 0 / 0.5); animation: backdrop-in 150ms ease-out; }
@keyframes dialog-in { from { opacity: 0; scale: .95; } to { opacity: 1; scale: 1; } }
@keyframes backdrop-in { from { opacity: 0; } to { opacity: 1; } }
.dialog-header { display: grid; gap: 0.5rem; text-align: left; }
.dialog-header h2 { margin: 0; font-size: 1.125rem; font-weight: 600; line-height: 1; }
.dialog-header p { margin: 0; color: var(--muted-foreground); font-size: 0.875rem; line-height: 1.45; }
.dialog-close { position: absolute; top: 1rem; right: 1rem; display: grid; width: 2rem; height: 2rem; place-items: center; border: 0; border-radius: calc(var(--radius) - 4px); background: transparent; opacity: 0.7; }
.dialog-close:hover { background: var(--accent); opacity: 1; }
.dialog-close .nav-icon { width: 1rem; height: 1rem; }
.custom-server-fields { display: grid; gap: 1rem; padding-block: 0.5rem; }
.custom-server-fields label { display: grid; gap: 0.375rem; font-size: 0.875rem; font-weight: 500; }
.custom-server-fields label small { color: var(--muted-foreground); font-size: inherit; font-weight: 400; }
.custom-server-preview { display: grid; gap: 0.2rem; border-radius: calc(var(--radius) - 2px); background: var(--muted); padding: 0.5rem 0.75rem; }
.custom-server-preview span { color: color-mix(in oklch, var(--muted-foreground) 60%, transparent); font-size: 0.625rem; letter-spacing: 0.04em; text-transform: uppercase; }
.custom-server-preview code { overflow-wrap: anywhere; font-size: 0.875rem; }
.dialog-footer { display: flex; justify-content: flex-end; gap: 0.5rem; }
.dialog-footer .button:disabled { cursor: default; opacity: 0.5; }
.confirmation-dialog { width: min(calc(100% - 2rem), 26rem); }
.confirmation-dialog .dialog-header p { max-width: 34rem; }
/* The rankings dialog borrows the shared dialog chrome but lays its own rows
   out edge to edge, so it has to land after the base rules to keep them. */
.top-stats-dialog { width: min(54rem, calc(100vw - 2rem)); max-width: 54rem; max-height: 85vh; padding: 0; overflow: hidden; }
.top-stats-dialog[open] { display: flex; flex-direction: column; gap: 0; }
.top-stats-header { position: relative; display: flex; min-height: 3.5rem; align-items: center; border-bottom: 1px solid var(--border); padding: .85rem 3rem .85rem 1.25rem; }
.top-stats-header h2 { margin: 0; font-size: 1.125rem; font-weight: 600; }
.top-stats-range { margin-left: .625rem; color: var(--muted-foreground); font-size: .8125rem; }
.top-stats-toolbar { display: flex; gap: .75rem; border-bottom: 1px solid var(--border); padding: .65rem 1.25rem; }
.top-stats-search { position: relative; min-width: 10rem; flex: 1; }
.top-stats-search .nav-icon { position: absolute; top: 50%; left: .625rem; width: 1rem; height: 1rem; translate: 0 -50%; color: var(--muted-foreground); pointer-events: none; }
.top-stats-search input { width: 100%; height: 2rem; padding-left: 2rem; }
.top-stats-limit select { width: 6.875rem; height: 2rem; }
.top-stats-list { min-height: 8rem; max-height: calc(85vh - 9rem); overflow-y: auto; }
.top-stats-row { display: flex; min-height: 2.75rem; align-items: center; gap: .75rem; border-bottom: 1px solid var(--border); padding: .4rem 1.25rem; transition: background-color .15s ease; }
.top-stats-row:hover { background: color-mix(in oklch, var(--muted) 50%, transparent); }
.top-stats-rank { width: 2rem; flex: 0 0 2rem; color: var(--muted-foreground); font-size: .75rem; text-align: right; font-variant-numeric: tabular-nums; }
.top-stats-row > div { display: grid; min-width: 0; flex: 1; gap: .1rem; }
.top-stats-row strong { overflow: hidden; font: 500 .875rem ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace; text-overflow: ellipsis; white-space: nowrap; }
.top-stats-row small { overflow: hidden; color: var(--muted-foreground); font-size: .75rem; text-overflow: ellipsis; white-space: nowrap; }
.top-stats-hits { flex: 0 0 auto; color: var(--muted-foreground); font-size: .875rem; font-weight: 500; font-variant-numeric: tabular-nums; }
.top-stats-empty { padding: 3rem 1.25rem; color: var(--muted-foreground); font-size: .875rem; text-align: center; }
.top-stats-footer { display: flex; justify-content: space-between; border-top: 1px solid var(--border); padding: .55rem 1.25rem; color: var(--muted-foreground); font-size: .75rem; font-variant-numeric: tabular-nums; }
.query-options-row .transport-picker { width: 6rem; }
.query-options-row .edns-subnet { width: 9rem; }
.checkbox-field { display: inline-flex; align-items: center; gap: 0.5rem; font-size: 0.875rem; white-space: nowrap; }
.checkbox-field input { width: 1rem; height: 1rem; margin: 0; accent-color: var(--primary); }
.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; }

.guidance-header { padding: 1.5rem 1.5rem 0.75rem; }
.guidance-header h2 { margin: 0; font-size: 1.125rem; font-weight: 600; }
.guidance-header p { margin: 0.25rem 0 0; color: var(--muted-foreground); font-size: 0.75rem; }
.quick-query-list { display: grid; gap: 0.5rem; padding: 0 1.5rem 1.5rem; }
.quick-query { display: flex; width: 100%; height: 2.25rem; align-items: center; gap: 0.5rem; border: 1px solid var(--border); border-radius: calc(var(--radius) - 2px); background: var(--background); padding: 0 0.75rem; font-size: 0.875rem; text-align: left; }
.quick-query:hover { background: var(--accent); }
.quick-query > .nav-icon { width: 1rem; height: 1rem; color: var(--muted-foreground); }
.quick-query > span { flex: 1; }
.quick-query code { border-radius: 0.375rem; background: var(--secondary); padding: 0.15rem 0.45rem; color: var(--secondary-foreground); font-size: 0.75rem; }
.guidance-list { display: grid; gap: 0.75rem; padding: 0 1.5rem 1.5rem; }
.guidance-item { display: flex; gap: 0.75rem; }
.guidance-item > i { width: 0.5rem; height: 0.5rem; margin-top: 0.35rem; flex: 0 0 0.5rem; border-radius: 50%; }
.guidance-item > i.green { background: #22c55e; }
.guidance-item > i.blue { background: #3b82f6; }
.guidance-item > i.purple { background: #a855f7; }
.guidance-item strong { display: block; font-size: 0.875rem; font-weight: 500; }
.guidance-item p { margin: 0.15rem 0 0; color: var(--muted-foreground); font-size: 0.875rem; line-height: 1.45; }
.tip-box { border: 1px solid #bfdbfe; border-radius: var(--radius); background: #eff6ff; padding: 1rem; color: #1e3a8a; font-size: 0.875rem; line-height: 1.5; }
.tip-box code { font-size: 0.75rem; }
.dark .tip-box { border-color: #1e40af; background: rgb(23 37 84 / 0.2); color: #dbeafe; }

.cache-page { width: 100%; }
.page-heading h1 { margin: 0; font-size: 1.875rem; line-height: 1.2; letter-spacing: -0.025em; }
.page-heading p { margin: 0.5rem 0 0; color: var(--muted-foreground); font-size: 1rem; }
.cache-layout { display: grid; grid-template-columns: minmax(0, 2.1fr) minmax(18rem, 1fr); gap: 1.5rem; align-items: start; }
.cache-status-card { border-width: 1px; }
.cache-card-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; padding: 1.5rem 1.5rem 0.75rem; }
.cache-title { display: flex; min-width: 0; gap: 0.5rem; align-items: flex-start; }
.cache-title > .nav-icon { width: 1.5rem; height: 1.5rem; flex: 0 0 1.5rem; color: var(--foreground); }
.cache-title h2 { margin: 0; font-size: 1.5rem; line-height: 1; letter-spacing: -0.02em; }
.cache-title p { margin: 0.35rem 0 0; color: var(--muted-foreground); font-size: 0.875rem; }
.cache-header-actions { display: flex; flex: 0 0 auto; align-items: center; gap: 0.5rem; }
.icon-button { display: grid; width: 2.25rem; height: 2.25rem; flex: 0 0 2.25rem; place-items: center; overflow: visible; border: 1px solid var(--border); border-radius: calc(var(--radius) - 2px); background: var(--background); }
.icon-button:hover { background: var(--accent); }
.icon-button .nav-icon { width: 1rem; height: 1rem; overflow: visible; }
.cache-card-body { display: grid; gap: 1.5rem; padding: 0.75rem 1.5rem 1.5rem; }
.operational-metric-grid { display: grid; gap: .85rem; }
.cache-stat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.operational-metric { min-width: 0; min-height: 8.5rem; border: 2px solid; border-radius: var(--radius); padding: 1.15rem; }
.operational-metric-label { display: flex; min-width: 0; align-items: center; gap: .65rem; }
.operational-metric-label > span { display: grid; width: 2.15rem; height: 2.15rem; flex: 0 0 2.15rem; place-items: center; border-radius: .55rem; background: color-mix(in oklch, currentColor 13%, transparent); }
.operational-metric-label .nav-icon { width: 1.1rem; height: 1.1rem; }
.operational-metric-label strong { min-width: 0; font-size: .82rem; line-height: 1.25; }
.operational-metric > b { display: block; overflow: hidden; margin-top: .65rem; font-size: 1.85rem; line-height: 1; letter-spacing: -.03em; font-variant-numeric: tabular-nums; text-overflow: ellipsis; white-space: nowrap; }
.operational-metric > p { margin: .5rem 0 0; font-size: .76rem; font-weight: 500; line-height: 1.35; opacity: .8; }
.operational-metric.blue { border-color: #2563eb; background: linear-gradient(135deg, #eff6ff, #dbeafe); color: #1e3a8a; }
.operational-metric.amber { border-color: #d97706; background: linear-gradient(135deg, #fffbeb, #fef3c7); color: #78350f; }
.operational-metric.red { border-color: #dc2626; background: linear-gradient(135deg, #fef2f2, #fee2e2); color: #7f1d1d; }
.operational-metric.purple { border-color: #9333ea; background: linear-gradient(135deg, #faf5ff, #f3e8ff); color: #581c87; }
.operational-metric.green { border-color: #16a34a; background: linear-gradient(135deg, #f0fdf4, #dcfce7); color: #14532d; }
.operational-metric.cyan { border-color: #0891b2; background: linear-gradient(135deg, #ecfeff, #cffafe); color: #164e63; }
.dark .operational-metric.blue { background: linear-gradient(135deg, rgb(23 37 84 / .7), rgb(30 58 138 / .35)); color: #dbeafe; }
.dark .operational-metric.amber { background: linear-gradient(135deg, rgb(69 26 3 / .75), rgb(120 53 15 / .35)); color: #fef3c7; }
.dark .operational-metric.red { background: linear-gradient(135deg, rgb(127 29 29 / .48), rgb(69 10 10 / .6)); color: #fecaca; }
.dark .operational-metric.purple { background: linear-gradient(135deg, rgb(88 28 135 / .58), rgb(59 7 100 / .48)); color: #f3e8ff; }
.dark .operational-metric.green { background: linear-gradient(135deg, rgb(20 83 45 / .58), rgb(5 46 22 / .48)); color: #dcfce7; }
.dark .operational-metric.cyan { background: linear-gradient(135deg, rgb(22 78 99 / .58), rgb(8 51 68 / .48)); color: #cffafe; }
.cache-explainer { border: 1px solid var(--border); border-radius: var(--radius); background: color-mix(in oklch, var(--muted) 45%, transparent); padding: 1.25rem; }
.cache-explainer h3 { display: flex; align-items: center; gap: 0.6rem; margin: 0; font-size: 1rem; }
.cache-explainer h3 .nav-icon { width: 1.1rem; height: 1.1rem; }
.cache-explainer p { margin: 0.75rem 0 0; color: var(--muted-foreground); font-size: 0.9rem; line-height: 1.6; }
.cache-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.5rem; border-top: 1px solid var(--border); padding-top: 1rem; }
.cache-actions h3 { margin: 0; font-size: 1rem; }
.cache-actions p { min-height: 2.5rem; margin: 0.45rem 0 0.75rem; color: var(--muted-foreground); font-size: 0.875rem; line-height: 1.45; }
.cache-action-button { display: flex; width: 100%; align-items: center; justify-content: center; gap: 0.5rem; }
.cache-action-button .nav-icon { width: 1rem; height: 1rem; }
.button.destructive { border-color: var(--destructive); background: var(--destructive); color: white; }
.cache-aside { display: grid; gap: 1.5rem; }
.cache-guidance { padding: 1.5rem; }
.cache-guidance h2 { margin: 0; font-size: 1.125rem; line-height: 1.35; }
.cache-guidance ul { display: grid; gap: 1rem; margin: 1.5rem 0 0; padding: 0; list-style: none; }
.cache-guidance li { position: relative; padding-left: 1.25rem; }
.cache-guidance li::before { position: absolute; top: .45rem; left: 0; width: .45rem; height: .45rem; border-radius: 50%; background: var(--foreground); content: ""; }
.cache-guidance strong { font-size: .9rem; }
.cache-guidance p { margin: .3rem 0 0; color: var(--muted-foreground); font-size: .9rem; line-height: 1.45; }
.cache-warning { border: 1px solid #d97706; border-radius: var(--radius); background: #fffbeb; padding: 1.25rem; color: #78350f; font-size: .9rem; line-height: 1.55; }
.dark .cache-warning { background: rgb(69 26 3 / .28); color: #fef3c7; }
.cache-dialog { position: fixed; inset: 0; width: min(calc(100% - 2rem), 56rem); height: fit-content; max-height: min(85vh, 48rem); margin: auto; overflow: hidden; border: 1px solid var(--border); border-radius: var(--radius); background: var(--background); color: var(--foreground); padding: 0; box-shadow: 0 24px 64px rgb(0 0 0 / .3); }
.cache-dialog[open] { display: flex; flex-direction: column; animation: dialog-in 150ms ease-out; }
.cache-dialog::backdrop { background: rgb(0 0 0 / .62); animation: backdrop-in 150ms ease-out; }
.cache-dialog-header { position: relative; display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; border-bottom: 1px solid var(--border); padding: 1.5rem; }
.cache-dialog-header h2 { display: flex; align-items: center; gap: .5rem; margin: 0; font-size: 1.125rem; }
.cache-dialog-header h2 .nav-icon { width: 1.25rem; height: 1.25rem; }
.cache-dialog-header p { margin: .45rem 0 0; color: var(--muted-foreground); font-size: .875rem; }
.cache-browser-body { min-height: 0; overflow-y: auto; padding: 1.5rem; }
.cache-browser-search { position: relative; display: block; }
.cache-browser-search > .nav-icon { position: absolute; top: 50%; left: .75rem; width: 1rem; height: 1rem; transform: translateY(-50%); color: var(--muted-foreground); }
.cache-browser-search input { height: 2.5rem; padding-left: 2.25rem; }
.cache-domain-list { margin-top: 1rem; overflow: hidden; border: 1px solid var(--border); border-radius: var(--radius); }
.cache-domain-list-header { display: flex; min-height: 3.5rem; align-items: center; justify-content: space-between; padding: 0 1rem; background: color-mix(in oklch, var(--muted) 50%, transparent); }
.cache-domain-list-header > span, .cache-domain-row > span { border-radius: 999px; background: var(--muted); padding: .2rem .65rem; font-size: .75rem; }
.cache-domain-entry { border-top: 1px solid var(--border); }
.cache-domain-entry::details-content { overflow: hidden; }
.cache-domain-row { display: flex; min-height: 4.5rem; align-items: center; gap: .85rem; padding: .75rem 1rem; list-style: none; cursor: pointer; }
.cache-domain-row::-webkit-details-marker { display: none; }
.cache-domain-row:hover { background: color-mix(in oklch, var(--muted) 45%, transparent); }
.cache-domain-row > .nav-icon { width: 1.1rem; height: 1.1rem; color: var(--muted-foreground); }
.cache-domain-row > div { display: grid; min-width: 0; flex: 1; gap: .25rem; }
.cache-domain-row strong { overflow: hidden; font: 600 .9rem ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace; text-overflow: ellipsis; white-space: nowrap; }
.cache-domain-row small { color: var(--muted-foreground); font-size: .75rem; }
.cache-domain-entry[open] > .cache-domain-row { background: color-mix(in oklch, var(--muted) 55%, transparent); }
.cache-domain-detail { display: grid; gap: .75rem; border-top: 1px solid var(--border); background: color-mix(in oklch, var(--background) 90%, var(--muted)); padding: 1rem; }
.cache-response-block { overflow: hidden; border: 1px solid var(--border); border-radius: calc(var(--radius) - 2px); }
.cache-response-heading { display: flex; align-items: center; justify-content: space-between; gap: 1rem; background: color-mix(in oklch, var(--muted) 55%, transparent); padding: .5rem .75rem; }
.cache-response-heading code { font-size: .75rem; font-weight: 600; }
.cache-response-heading span, .cache-response-block > p { color: var(--muted-foreground); font-size: .7rem; }
.cache-response-block > p { margin: 0; padding: .75rem; }
.cache-record-row { display: grid; grid-template-columns: 4.5rem minmax(0, 1fr) auto 1.75rem; align-items: center; gap: .5rem; border-top: 1px solid var(--border); padding: .65rem .75rem; }
.cache-record-row > span, .cache-record-row > small { color: var(--muted-foreground); font-size: .68rem; }
.cache-record-row > code { min-width: 0; overflow-wrap: anywhere; font-size: .72rem; line-height: 1.45; }
.cache-record-row > button { display: grid; width: 1.75rem; height: 1.75rem; place-items: center; border: 0; border-radius: calc(var(--radius) - 4px); background: transparent; color: var(--muted-foreground); }
.cache-record-row > button:hover { background: var(--accent); color: var(--foreground); }
.cache-record-row > button .nav-icon { width: .85rem; height: .85rem; }
.cache-domain-empty { padding: 3rem 1.25rem; border-top: 1px solid var(--border); color: var(--muted-foreground); text-align: center; }
.cache-dialog-footer { display: flex; border-top: 1px solid var(--border); padding: 1rem 1.5rem; }
.cache-dialog-footer .button { width: 100%; }
.cache-flush-dialog { width: min(calc(100% - 2rem), 36rem); padding: 1.5rem; }
.cache-flush-content h2 { margin: 0; font-size: 1.25rem; }
.cache-flush-content > p { margin: 1rem 0; color: var(--muted-foreground); }
.cache-flush-content > div { color: var(--muted-foreground); }
.cache-flush-content > div p { margin: 0 0 .5rem; }
.cache-flush-content ul { margin: 0 0 1.25rem; padding-left: 1.25rem; line-height: 1.65; }
.cache-flush-dialog > .dialog-footer { margin-top: 1.5rem; }

.dns-query-empty { display: grid; min-height: 14rem; place-items: center; align-content: center; padding: 3rem 1.5rem; text-align: center; }
.dns-query-empty > .nav-icon, .no-records > .nav-icon { width: 3rem; height: 3rem; margin-bottom: 1rem; color: color-mix(in oklch, var(--muted-foreground) 30%, transparent); }
.dns-query-empty h2 { margin: 0; font-size: 1.125rem; }
.dns-query-empty p { max-width: 28rem; margin: 0.5rem auto 0; color: var(--muted-foreground); font-size: 0.875rem; line-height: 1.5; }
.query-failure { padding: 1.5rem; }
.dns-result-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; padding: 1.5rem 1.5rem 0.75rem; }
.dns-result-header h2 { margin: 0.375rem 0 0; font: 600 1rem/1.5 ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace; overflow-wrap: anywhere; }
.result-status { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; color: var(--muted-foreground); font-size: 0.75rem; }
.rcode-icon { display: inline-grid; width: 1.5rem; height: 1.5rem; place-items: center; }
.rcode-icon .nav-icon { width: 1.5rem; height: 1.5rem; }
.rcode-icon.success { color: #16a34a; }
.rcode-icon.warning { color: #d97706; }
.rcode-icon.error { color: var(--destructive); }
.rcode { display: inline-flex; min-height: 1.5rem; align-items: center; border-radius: 999px; padding: 0 0.55rem; font-size: 0.6875rem; font-weight: 600; }
.rcode.success { background: #dcfce7; color: #166534; }
.rcode.warning { background: #fef3c7; color: #92400e; }
.rcode.error { background: #fee2e2; color: #991b1b; }
.dark .rcode.success { background: #14532d; color: #bbf7d0; }
.dark .rcode.warning { background: #78350f; color: #fde68a; }
.dark .rcode.error { background: #7f1d1d; color: #fecaca; }
.copy-response { display: inline-flex; flex: 0 0 auto; align-items: center; gap: 0.5rem; }
.copy-response .nav-icon { width: 1rem; height: 1rem; }
.copy-icon-success { display: none; }
.is-copied .copy-icon-default { display: none; }
.is-copied .copy-icon-success { display: inline-flex; }
.result-content { display: grid; gap: 1.5rem; padding: 0.75rem 1.5rem 1.5rem; }
.result-metadata { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem; }
.metadata-card { min-height: 5rem; border: 1px solid; border-radius: var(--radius); padding: 1rem; }
.metadata-label { display: flex; align-items: center; gap: 0.5rem; margin-bottom: 0.25rem; font-size: 0.75rem; font-weight: 500; }
.metadata-label .nav-icon { width: 1rem; height: 1rem; }
.metadata-card > strong { font: 700 1.125rem/1.4 ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace; overflow-wrap: anywhere; }
.metadata-card.blue { border-color: #bfdbfe; background: linear-gradient(135deg, #eff6ff, #dbeafe); color: #1e3a8a; }
.metadata-card.purple { border-color: #e9d5ff; background: linear-gradient(135deg, #faf5ff, #f3e8ff); color: #581c87; }
.metadata-card.green { border-color: #bbf7d0; background: linear-gradient(135deg, #f0fdf4, #dcfce7); color: #14532d; }
.metadata-card.amber { border-color: #fde68a; background: linear-gradient(135deg, #fffbeb, #fef3c7); color: #78350f; }
.dark .metadata-card.blue { border-color: #1e40af; background: linear-gradient(135deg, rgb(23 37 84 / .5), rgb(30 58 138 / .3)); color: #dbeafe; }
.dark .metadata-card.purple { border-color: #6b21a8; background: linear-gradient(135deg, rgb(59 7 100 / .5), rgb(88 28 135 / .3)); color: #f3e8ff; }
.dark .metadata-card.green { border-color: #166534; background: linear-gradient(135deg, rgb(5 46 22 / .5), rgb(20 83 45 / .3)); color: #dcfce7; }
.dark .metadata-card.amber { border-color: #92400e; background: linear-gradient(135deg, rgb(69 26 3 / .5), rgb(120 53 15 / .3)); color: #fef3c7; }
.flag-list { display: flex; flex-wrap: wrap; gap: 0.25rem; }
.flag-list code { border: 1px solid currentColor; border-radius: 0.3rem; padding: 0.1rem 0.35rem; font-size: 0.6875rem; }
.flag-list small { color: var(--muted-foreground); }
.record-section > h3 { display: flex; align-items: center; gap: 0.5rem; margin: 0 0 0.75rem; font-size: 1rem; font-weight: 600; }
.record-section > h3 > .nav-icon { width: 1rem; height: 1rem; }
.record-section > h3 > span { border-radius: 999px; background: var(--secondary); padding: 0.1rem 0.45rem; font: 500 0.75rem ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace; }
.record-list { overflow: hidden; border: 1px solid var(--border); border-radius: var(--radius); }
.record-row { display: flex; align-items: flex-start; gap: 0.75rem; padding: 0.875rem 1rem; }
.record-row + .record-row { border-top: 1px solid var(--border); }
.record-row:hover { background: color-mix(in oklch, var(--muted) 50%, transparent); }
.record-type { display: inline-grid; width: 3.5rem; height: 1.5rem; flex: 0 0 3.5rem; place-items: center; border: 1px solid var(--border); border-radius: 999px; font-size: 0.6875rem; }
.record-value { display: grid; min-width: 0; flex: 1; gap: 0.35rem; }
.copyable-text { display: inline-flex; width: fit-content; max-width: 100%; align-items: center; gap: 0.25rem; }
.copyable-text > span { min-width: 0; overflow-wrap: anywhere; }
.copyable-text.record-name > span { font: 500 0.875rem ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace; }
.copyable-text.record-data > span { color: var(--muted-foreground); font: 0.875rem ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace; }
.copyable-text button { display: grid; width: 1.25rem; height: 1.25rem; flex: 0 0 1.25rem; place-items: center; border: 0; border-radius: calc(var(--radius) - 4px); background: transparent; color: var(--muted-foreground); }
.copyable-text button:hover { background: var(--muted); color: var(--foreground); }
.copyable-text button .nav-icon { width: 0.8rem; height: 0.8rem; }
.record-ttl { display: grid; min-width: 5rem; flex: 0 0 5rem; justify-items: end; gap: 0.15rem; }
.record-ttl span { color: color-mix(in oklch, var(--muted-foreground) 60%, transparent); font-size: 0.625rem; letter-spacing: 0.05em; }
.record-ttl strong { font-size: 0.875rem; font-variant-numeric: tabular-nums; }
.no-records { display: grid; place-items: center; padding: 2rem; text-align: center; }
.no-records h3 { margin: 0; }
.no-records p { margin: 0.35rem 0 0; color: var(--muted-foreground); font-size: 0.875rem; }
.raw-response { border-top: 1px solid var(--border); padding-top: 1rem; }
.raw-response summary { cursor: pointer; color: var(--muted-foreground); font-size: 0.8125rem; }
.raw-response pre { margin-top: 0.75rem; }
.htmx-request .resolve-button, .quick-query.htmx-request, .range-tabs .htmx-request, .range-select.htmx-request { opacity: 0.65; pointer-events: none; }

.toast-region {
  position: fixed;
  right: 1rem;
  bottom: 1rem;
  z-index: 100;
  display: grid;
  width: min(24rem, calc(100vw - 2rem));
  gap: .65rem;
  pointer-events: none;
}
.toast {
  --toast-accent: #16a34a;
  position: relative;
  display: grid;
  grid-template-columns: 1.1rem minmax(0, 1fr) 1.75rem;
  align-items: start;
  gap: .7rem;
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--popover);
  padding: .85rem .8rem .85rem .9rem;
  color: var(--popover-foreground);
  box-shadow: 0 12px 32px rgb(0 0 0 / .22), 0 2px 8px rgb(0 0 0 / .14);
  pointer-events: auto;
  animation: toast-in 180ms cubic-bezier(.2, .8, .2, 1);
}
.toast-error { --toast-accent: var(--destructive); }
.toast-icon { display: grid; color: var(--toast-accent); padding-top: .1rem; }
.toast-icon .nav-icon { width: 1.05rem; height: 1.05rem; }
.toast-content { min-width: 0; }
.toast-content strong { display: block; font-size: .8rem; font-weight: 600; line-height: 1.25; }
.toast-content p { margin: .18rem 0 0; color: var(--muted-foreground); font-size: .76rem; line-height: 1.4; overflow-wrap: anywhere; }
.toast-actions { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: .5rem; }
.toast-actions .button { display: inline-flex; align-items: center; gap: .35rem; }
.toast-actions .button .nav-icon { width: .85rem; height: .85rem; flex: 0 0 .85rem; }
.toast-dismiss { display: grid; width: 1.75rem; height: 1.75rem; place-items: center; border: 0; border-radius: calc(var(--radius) - 3px); background: transparent; color: var(--muted-foreground); }
.toast-dismiss:hover { background: var(--accent); color: var(--accent-foreground); }
.toast-dismiss:focus-visible { outline: 2px solid var(--ring); outline-offset: 1px; }
.toast-dismiss .nav-icon { width: .9rem; height: .9rem; }
.toast-timer { position: absolute; right: 0; bottom: 0; left: 0; height: 2px; background: var(--toast-accent); transform-origin: left; animation: toast-countdown var(--toast-duration, 4500ms) linear forwards; }
.toast.is-paused .toast-timer { animation-play-state: paused; }
.toast.is-leaving { animation: toast-out 160ms ease forwards; }

@keyframes toast-in { from { opacity: 0; transform: translate3d(0, .75rem, 0) scale(.98); } }
@keyframes toast-out { to { opacity: 0; transform: translate3d(.75rem, 0, 0) scale(.98); } }
@keyframes toast-countdown { to { transform: scaleX(0); } }

.blocking-update-button { min-width: 10.75rem; }
.blocking-update-button.htmx-request,
.blocking-update-button.is-updating { cursor: wait; opacity: 0.72; pointer-events: none; }
.blocking-update-button.htmx-request .icon-refresh,
.blocking-update-button.is-updating .icon-refresh { animation: blocking-refresh-spin 0.8s linear infinite; }
.blocking-update-button.htmx-request .update-label { font-size: 0; }
.blocking-update-button.htmx-request .update-label::after { content: "Updating\2026"; font-size: 0.875rem; }

@keyframes blocking-refresh-spin { to { transform: rotate(360deg); } }

.zones-page { width: 100%; }
.isotope-zone-stack { display: grid; gap: 1rem; }
.isotope-zone-heading { display: flex; min-height: 3.5rem; align-items: center; justify-content: space-between; gap: 1rem; }
.isotope-zone-heading h1 { margin: 0; font-size: 1.875rem; font-weight: 700; letter-spacing: -.03em; line-height: 1.1; }
.isotope-zone-heading p { margin: .3rem 0 0; color: var(--muted-foreground); font-size: .875rem; }
.zone-heading-actions { display: flex; align-items: center; gap: .5rem; }
.zone-primary-action { display: inline-flex; align-items: center; justify-content: center; gap: .45rem; white-space: nowrap; }
.zone-primary-action .nav-icon { width: 1rem; height: 1rem; }
.zone-filter-bar { display: flex; align-items: center; gap: .75rem; }
.zone-search { position: relative; display: block; min-width: 0; flex: 1; }
.zone-search > span { position: absolute; top: 50%; left: .75rem; display: grid; color: var(--muted-foreground); transform: translateY(-50%); pointer-events: none; }
.zone-search .nav-icon { width: 1rem; height: 1rem; }
.zone-search input { padding-left: 2.25rem; }
.zone-filter-selects { display: flex; align-items: center; gap: .5rem; }
.zone-filter-selects label, .zone-record-type-filter { width: 8.75rem; }
.isotope-zone-list, .isotope-record-list { overflow: visible; }
.isotope-zone-row { position: relative; display: flex; min-height: 3.55rem; align-items: center; border-top: 1px solid var(--border); padding: 0 .75rem 0 1rem; transition: background 120ms; }
.isotope-zone-row:first-of-type { border-top: 0; }
.isotope-zone-row:hover { background: color-mix(in oklch, var(--muted) 50%, transparent); }
.isotope-zone-row-link { display: flex; min-width: 0; flex: 1; align-items: center; gap: 1rem; align-self: stretch; }
.isotope-zone-name { min-width: 0; flex: 1; }
.isotope-zone-name strong { display: block; overflow: hidden; font: 500 .875rem ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace; text-overflow: ellipsis; white-space: nowrap; }
.zone-desktop-badges, .zone-mobile-badges { display: flex; align-items: center; gap: .5rem; }
.zone-mobile-badges { display: none; margin-top: .3rem; }
.zone-type-badge, .zone-status-badge, .zone-dnssec-badge { display: inline-flex; min-height: 1.35rem; flex: 0 0 auto; align-items: center; border-radius: 999px; padding: .12rem .5rem; font-size: .67rem; font-weight: 600; line-height: 1.1; white-space: nowrap; }
.zone-type-badge.primary { background: #dbeafe; color: #1e40af; }
.zone-type-badge.secondary { background: #dcfce7; color: #166534; }
.zone-type-badge.stub { background: #e5e7eb; color: #374151; }
.zone-type-badge.forwarder { background: #ffedd5; color: #9a3412; }
.zone-type-badge.alias { background: #ede9fe; color: #5b21b6; }
.zone-type-badge.catalog { background: #cffafe; color: #155e75; }
.zone-status-badge.active { background: #dcfce7; color: #166534; }
.zone-status-badge.disabled { background: var(--muted); color: var(--muted-foreground); }
.zone-dnssec-badge.unsigned { background: #e5e7eb; color: #374151; }
.zone-dnssec-badge.signed { background: #fef3c7; color: #92400e; }
.dark .zone-type-badge.primary { background: #1e3a8a; color: #bfdbfe; }
.dark .zone-type-badge.secondary { background: #14532d; color: #bbf7d0; }
.dark .zone-type-badge.stub { background: #374151; color: #e5e7eb; }
.dark .zone-type-badge.forwarder { background: #7c2d12; color: #fed7aa; }
.dark .zone-type-badge.alias { background: #4c1d95; color: #ddd6fe; }
.dark .zone-type-badge.catalog { background: #164e63; color: #a5f3fc; }
.dark .zone-status-badge.active { background: #14532d; color: #bbf7d0; }
.dark .zone-dnssec-badge.unsigned { background: #374151; color: #e5e7eb; }
.dark .zone-dnssec-badge.signed { background: #78350f; color: #fde68a; }
.isotope-zone-row.disabled .isotope-zone-row-link { opacity: .62; }
.zone-row-chevron { display: grid; width: 2rem; height: 2rem; place-items: center; color: var(--muted-foreground); }
.zone-row-chevron .nav-icon { width: 1rem; height: 1rem; }
.zone-action-menu { position: relative; z-index: 4; }
.zone-action-menu > summary { list-style: none; }
.zone-action-menu > summary::-webkit-details-marker { display: none; }
.zone-more-button { opacity: 0; border-color: transparent; background: transparent; transition: opacity 120ms; }
.isotope-zone-row:hover .zone-more-button, .zone-action-menu[open] .zone-more-button, .zone-more-button:focus-visible { opacity: 1; }
.zone-menu-content { position: absolute; top: calc(100% + .3rem); right: 0; z-index: 20; display: grid; width: 14rem; overflow: hidden; border: 1px solid var(--border); border-radius: calc(var(--radius) - 1px); background: var(--popover); padding: .3rem; color: var(--popover-foreground); box-shadow: 0 12px 28px rgb(0 0 0 / .22); }
.zone-menu-content a, .zone-menu-content button { display: flex; width: 100%; height: 2rem; align-items: center; gap: .55rem; border: 0; border-radius: .35rem; background: transparent; padding: 0 .55rem; text-align: left; font-size: .78rem; }
.zone-menu-content a:hover, .zone-menu-content button:hover { background: var(--accent); }
.zone-menu-content button:disabled { color: var(--muted-foreground); cursor: not-allowed; opacity: .55; }
.zone-menu-content button:disabled:hover { background: transparent; }
.zone-menu-content form { margin: 0; }
.zone-menu-content .nav-icon { width: .95rem; height: .95rem; }
.zone-menu-content hr { width: 100%; margin: .3rem 0; border: 0; border-top: 1px solid var(--border); }
.zone-menu-content .danger { color: var(--destructive); }
.isotope-zone-empty { display: grid; min-height: 9rem; place-items: center; padding: 2rem; color: var(--muted-foreground); text-align: center; }
.isotope-zone-empty p { margin: 0; font-size: .875rem; }

.zone-records-heading { display: flex; align-items: flex-start; gap: .5rem; }
.zone-back-button { margin-top: .25rem; border-color: transparent; background: transparent; }
.zone-records-title { min-width: 0; flex: 1; }
.zone-records-title h1 { overflow: hidden; margin: 0; font: 700 1.5rem/1.25 ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace; text-overflow: ellipsis; white-space: nowrap; }
.zone-records-title > div { display: flex; align-items: center; gap: .4rem; margin-top: .3rem; }
.zone-records-title p { margin: .3rem 0 0; color: var(--muted-foreground); font-size: .75rem; }
.zone-alias-source::before { content: "\00b7"; margin: 0 .35rem; }
.zone-alias-source a { color: inherit; text-decoration: none; }
.zone-alias-source a:hover code { text-decoration: underline; }
.zone-records-actions { display: flex; flex: 0 0 auto; align-items: center; gap: .5rem; }
.detail-menu .zone-menu-content { top: calc(100% + .25rem); }
.zone-record-filter-bar .zone-search { flex: 1; }
.isotope-record-row { display: grid; min-height: 3.6rem; grid-template-columns: 3.5rem minmax(8rem, 3fr) minmax(8rem, 2fr) 4rem 1.25rem; align-items: center; gap: 1rem; border-top: 1px solid var(--border); padding: .65rem 1rem; transition: background 120ms; }
.isotope-record-row:first-of-type { border-top: 0; }
.isotope-record-row:hover { background: color-mix(in oklch, var(--muted) 50%, transparent); }
.isotope-record-row.disabled { opacity: .55; }
.record-type-badge { display: inline-flex; width: 3.25rem; min-height: 1.5rem; align-items: center; justify-content: center; border: 1px solid var(--border); border-radius: 999px; padding: .1rem .35rem; font: 600 .66rem ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace; }
.zone-copyable { display: flex; min-width: 0; align-items: center; gap: .3rem; }
.zone-copyable code { overflow: hidden; min-width: 0; font: .8rem/1.4 ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace; text-overflow: ellipsis; white-space: nowrap; }
.record-value-copy code { color: var(--muted-foreground); }
.zone-copyable button { display: grid; width: 1.5rem; height: 1.5rem; flex: 0 0 1.5rem; place-items: center; border: 0; border-radius: .3rem; background: transparent; color: var(--muted-foreground); opacity: 0; transition: opacity 120ms, background 120ms; }
.isotope-record-row:hover .zone-copyable button, .zone-copyable button:focus-visible { opacity: 1; }
.zone-copyable button:hover { background: var(--accent); color: var(--foreground); }
.zone-copyable .nav-icon { width: .85rem; height: .85rem; }
.zone-copyable .copy-icon-success { display: none; }
.zone-copyable button.is-copied .copy-icon-default { display: none; }
.zone-copyable button.is-copied .copy-icon-success { display: inline-grid; color: #22c55e; }
.record-ttl { color: var(--muted-foreground); font-size: .72rem; text-align: right; font-variant-numeric: tabular-nums; }
.record-open-button { display: grid; width: 1.5rem; height: 1.5rem; place-items: center; border: 0; border-radius: .3rem; background: transparent; color: var(--muted-foreground); }
.record-open-button:hover { background: var(--accent); color: var(--foreground); }
.record-open-button .nav-icon { width: 1rem; height: 1rem; }
.record-open-placeholder { width: 1.5rem; }
.isotope-zone-dialog { width: min(32rem, calc(100vw - 2rem)); }
.zone-settings-dialog { max-height: min(90vh, 48rem); overflow: hidden; }
.zone-settings-dialog[open] { grid-template-rows: auto auto minmax(0, 1fr); }
.zone-settings-tabs { margin: 0; }
.zone-settings-form { width: 100%; min-height: 0; height: 100%; max-height: none; grid-template-rows: minmax(0, 1fr) auto; overflow: hidden; }
.zone-settings-panel { min-height: 0; align-content: start; gap: .85rem; overflow-x: hidden; overflow-y: auto; padding: .15rem; }
.zone-settings-form > .dialog-footer { position: relative; z-index: 2; flex: 0 0 auto; border-top: 1px solid var(--border); background: var(--background); padding-top: .85rem; }
.zone-settings-section { display: grid; gap: .8rem; border-top: 1px solid var(--border); padding-top: 1rem; }
.zone-settings-section.first { border-top: 0; padding-top: 0; }
.zone-settings-section > div { display: flex; align-items: flex-start; gap: .65rem; }
.zone-settings-section > div > span:last-child { display: grid; gap: .18rem; }
.zone-settings-section strong { font-size: .82rem; }
.zone-settings-section small { color: var(--muted-foreground); font-size: .7rem; font-weight: 400; line-height: 1.4; }
.zone-settings-section-icon { display: grid; width: 1.75rem; height: 1.75rem; flex: 0 0 1.75rem; place-items: center; border-radius: .4rem; background: var(--muted); color: var(--muted-foreground); }
.zone-settings-section-icon .nav-icon { width: .95rem; height: .95rem; }
.zone-settings-section textarea { min-height: 4.5rem; resize: vertical; }
.zone-dnssec-form { max-height: min(72vh, 44rem); grid-auto-rows: max-content; overflow-x: hidden; overflow-y: auto; }
.zone-dnssec-form > .dialog-footer { position: sticky; z-index: 2; bottom: 0; margin: 0 -.1rem -.1rem; border-top: 1px solid var(--border); background: var(--background); padding: .8rem .1rem .1rem; }
.zone-dnssec-status { display: grid; overflow: hidden; gap: 0; border: 1px solid var(--border); border-radius: .6rem; background: var(--card); }
.zone-dnssec-nsec3 { display: grid; grid-template-columns: minmax(0, .7fr) minmax(0, 1.3fr); gap: .75rem; border: 1px solid var(--border); border-radius: .55rem; background: color-mix(in oklch, var(--muted) 35%, transparent); padding: .75rem; }
.zone-dnssec-nsec3[hidden] { display: none; }
.zone-dnssec-status > header { display: flex; align-items: center; gap: .65rem; border-bottom: 1px solid var(--border); padding: .8rem; }
.zone-dnssec-status > header > span:last-child { display: grid; min-width: 0; gap: .15rem; }
.zone-dnssec-status > header strong { font-size: .82rem; }
.zone-dnssec-status > header small { color: var(--muted-foreground); font-size: .7rem; font-weight: 400; }
.zone-dnssec-policy { align-items: start; }
.zone-dnssec-key-list { display: grid; gap: .6rem; padding: .7rem .8rem; }
.zone-dnssec-key { display: grid; min-width: 0; gap: .45rem; border: 1px solid var(--border); border-radius: .5rem; background: color-mix(in oklch, var(--muted) 28%, transparent); padding: .65rem; }
.zone-dnssec-key > header { display: flex; align-items: center; justify-content: space-between; gap: .75rem; }
.zone-dnssec-key > header > span:first-child { display: flex; align-items: baseline; gap: .5rem; }
.zone-dnssec-key > header small, .zone-dnssec-key > small { color: var(--muted-foreground); font-size: .68rem; }
.zone-dnssec-key-state { border-radius: 999px; background: var(--muted); padding: .15rem .45rem; color: var(--muted-foreground); font-size: .62rem; font-weight: 700; text-transform: capitalize; }
.zone-dnssec-key-state.active { background: color-mix(in oklch, #22c55e 14%, transparent); color: #22c55e; }
.zone-dnssec-key-state.published, .zone-dnssec-key-state.ready { background: color-mix(in oklch, #3b82f6 14%, transparent); color: #60a5fa; }
.zone-dnssec-key-state.retiring { background: color-mix(in oklch, #f59e0b 14%, transparent); color: #f59e0b; }
.zone-dnssec-key .zone-dnssec-copy { border: 0; padding: .35rem 0 0; }
.zone-dnssec-key .zone-dnssec-actions { display: flex; flex-wrap: wrap; gap: .45rem; padding: .25rem 0 0; }
.zone-settings-section-icon.signed { background: color-mix(in oklch, #22c55e 12%, transparent); color: #22c55e; }
.zone-dnssec-copy { display: grid; min-width: 0; gap: .35rem; border-bottom: 1px solid var(--border); padding: .75rem .8rem; }
.zone-dnssec-copy > span:first-child { color: var(--muted-foreground); font-size: .68rem; font-weight: 600; }
.zone-dnssec-copy .zone-copyable { width: 100%; }
.zone-dnssec-copy .zone-copyable code { flex: 1; font-size: .7rem; }
.zone-dnssec-copy .zone-copyable button { opacity: 1; }
.zone-dnssec-actions { display: flex; flex-wrap: wrap; gap: .5rem; padding: .7rem .8rem; }
.zone-dnssec-actions .button { display: inline-flex; width: auto; align-items: center; gap: .45rem; }
.zone-dnssec-actions .nav-icon { width: .9rem; height: .9rem; }
.zone-dnssec-warning, .zone-dnssec-note { border: 1px solid color-mix(in oklch, #f59e0b 55%, var(--border)); border-radius: .55rem; padding: .75rem; background: color-mix(in oklch, #f59e0b 7%, transparent); color: var(--muted-foreground); font-size: .72rem; line-height: 1.5; }
.zone-dnssec-warning { display: grid; gap: .2rem; }
.zone-dnssec-warning strong { color: var(--foreground); font-size: .75rem; }
.zone-dynamic-toggle { display: flex !important; align-items: center; grid-template-columns: 1fr auto !important; gap: 1rem !important; border: 1px solid var(--border); border-radius: .55rem; padding: .75rem; background: var(--card); cursor: pointer; }
.zone-dynamic-toggle > span:first-child { display: grid; gap: .2rem; }
.zone-dynamic-toggle > .switch { flex: 0 0 auto; }
.zone-create-options { display: grid; gap: .8rem; border-top: 1px solid var(--border); padding-top: .9rem; }
.zone-create-options[hidden] { display: none; }
.zone-create-options small { color: var(--muted-foreground); font-size: .7rem; font-weight: 400; line-height: 1.4; }
.zone-create-options textarea { min-height: 4.25rem; resize: vertical; }
.isotope-record-dialog { width: min(46rem, calc(100vw - 2rem)); max-width: calc(100vw - 2rem); max-height: min(90vh, 52rem); overflow: hidden; padding: 0; }
.isotope-record-dialog[open] { grid-template-rows: auto minmax(0, 1fr); gap: 0; }
.isotope-record-dialog > *, .isotope-record-form > * { min-width: 0; }
.isotope-zone-import-dialog { width: min(36rem, calc(100vw - 2rem)); max-width: calc(100vw - 2rem); max-height: min(90vh, 48rem); overflow-x: hidden; overflow-y: auto; }
.isotope-zone-import-dialog > *, .zone-import-form > * { min-width: 0; }
.isotope-zone-import-dialog .dialog-header code { color: var(--foreground); font-size: .8rem; }
.zone-import-form { gap: 1rem; }
.zone-import-form label > span small { color: var(--muted-foreground); font-size: .7rem; font-weight: 400; }
.zone-import-help { margin: 0; color: var(--muted-foreground); font-size: .7rem; line-height: 1.45; }
.zone-import-help code { color: var(--foreground); font-size: inherit; }
.zone-import-source textarea { min-height: 10.5rem; max-height: 20rem; white-space: pre; }
.zone-file-picker, .file-picker { display: flex; min-width: 0; align-items: center; gap: .7rem; }
.zone-file-picker > .button, .file-picker > .button { display: inline-flex; width: auto; flex: 0 0 auto; align-items: center; gap: .45rem; cursor: pointer; }
.zone-file-picker > .button .nav-icon, .file-picker > .button .nav-icon { width: 1rem; height: 1rem; }
.zone-file-picker > span, .file-picker > span { overflow: hidden; min-width: 0; color: var(--muted-foreground); font-size: .72rem; text-overflow: ellipsis; white-space: nowrap; }
.zone-import-options { display: grid; overflow: hidden; border: 1px solid var(--border); border-radius: calc(var(--radius) - 2px); }
.blocking-dialog-form .zone-import-option { display: grid; grid-template-columns: 1rem minmax(0, 1fr); align-items: start; gap: .75rem; border-top: 1px solid var(--border); padding: .75rem; cursor: pointer; }
.blocking-dialog-form .zone-import-option:first-child { border-top: 0; }
.blocking-dialog-form .zone-import-option:hover { background: color-mix(in oklch, var(--muted) 45%, transparent); }
.zone-import-option > input { width: 1rem; height: 1rem; margin: .1rem 0 0; padding: 0; accent-color: var(--primary); }
.zone-import-option > span { display: grid; min-width: 0; gap: .18rem; }
.zone-import-option strong { font-size: .78rem; font-weight: 500; }
.zone-import-option small { color: var(--muted-foreground); font-size: .7rem; font-weight: 400; line-height: 1.4; }
.zone-import-option.danger strong { color: var(--destructive); }
.isotope-record-dialog-header { position: relative; border-bottom: 1px solid var(--border); padding: 1.5rem 3.5rem 1rem 1.5rem; }
.isotope-record-form { display: grid; min-height: 0; grid-template-rows: minmax(0, 1fr) auto; overflow: hidden; }
.isotope-record-form > input[type="hidden"] { position: absolute; }
.isotope-record-dialog-body { display: grid; min-height: 0; align-content: start; gap: 1.5rem; overflow-x: hidden; overflow-y: auto; padding: 1.5rem; }
.isotope-record-form > .dialog-footer { flex: 0 0 auto; border-top: 1px solid var(--border); padding: 1rem 1.5rem; }
.record-type-fieldset { display: grid; gap: .65rem; margin: 0; border: 0; padding: 0; }
.record-type-fieldset legend { margin-bottom: .65rem; font-size: .75rem; font-weight: 600; }
.record-type-fieldset > p { margin: 0; color: var(--muted-foreground); font-size: .7rem; }
.record-type-grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: .5rem; }
.record-type-choice { display: flex; width: 100%; height: 2.25rem; align-items: center; justify-content: center; border: 1px solid var(--border); border-radius: calc(var(--radius) - 2px); background: var(--background); font-size: .75rem; font-weight: 500; cursor: pointer; }
.record-type-choice:hover { background: var(--accent); }
.record-type-choice.active { border-color: var(--primary); background: var(--primary); color: var(--primary-foreground); }
.record-more-types { display: block; width: 12.5rem; }
.record-specific-fields { display: grid; min-width: 0; gap: 1rem; }
.record-field { display: grid; min-width: 0; gap: .5rem; font-size: .8rem; font-weight: 500; }
.record-field.secondary > span, .record-field-grid .record-field.secondary > span { color: var(--muted-foreground); font-size: .72rem; }
.record-field small { color: var(--muted-foreground); font-size: .7rem; font-weight: 400; line-height: 1.45; }
.record-text-value { min-height: 6.25rem; }
.record-text-value.short { min-height: 5rem; }
.record-field-grid { display: grid; min-width: 0; gap: 1rem; }
.record-field-grid.two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.record-field-grid.three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.record-field-grid.four { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.record-field-grid.mx { grid-template-columns: minmax(0, 3fr) minmax(6rem, 1fr); }
.record-field-grid.caa { grid-template-columns: minmax(0, 3fr) minmax(7rem, 2fr) minmax(4.5rem, 1fr); }
.mono-input { font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace; }
.edit-record-type { display: flex; align-items: center; gap: .65rem; padding-bottom: .25rem; }
.edit-record-type .record-type-badge { width: auto; min-width: 2.75rem; min-height: 1.8rem; border: 0; background: var(--secondary); padding-inline: .75rem; color: var(--secondary-foreground); font-size: .75rem; }
.edit-record-type small { overflow: hidden; min-width: 0; color: var(--muted-foreground); font-size: .78rem; text-overflow: ellipsis; white-space: nowrap; }
.record-enabled { display: flex !important; margin-left: auto; align-items: center; grid-template-columns: auto auto !important; gap: .5rem !important; cursor: pointer; }
.record-enabled b { font-size: .75rem; font-weight: 400; }
.record-enabled .switch input:checked + span { background: var(--primary); }
.record-advanced { min-width: 0; }
.record-advanced > summary { display: inline-flex; height: 2.25rem; align-items: center; gap: .5rem; border-radius: calc(var(--radius) - 2px); padding: 0 .75rem; color: var(--muted-foreground); font-size: .8rem; font-weight: 500; list-style: none; cursor: pointer; }
.record-advanced > summary::-webkit-details-marker { display: none; }
.record-advanced > summary:hover { background: var(--accent); color: var(--foreground); }
.record-advanced > summary .nav-icon { width: 1rem; height: 1rem; }
.record-advanced-chevron { display: block; flex: 0 0 auto; width: .5rem; height: .5rem; border-right: 1.75px solid currentColor; border-bottom: 1.75px solid currentColor; transform: translateY(-.125rem) rotate(45deg); transition: transform 150ms ease; }
.record-advanced[open] > summary .record-advanced-chevron { transform: translateY(.125rem) rotate(225deg); }
.record-advanced-content { display: grid; min-width: 0; gap: 1rem; padding-top: 1rem; }
.record-advanced-grid { display: grid; min-width: 0; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
.edit-record-footer { align-items: center; }
.edit-record-delete { display: inline-flex; align-items: center; gap: .45rem; margin-right: auto; }
.edit-record-delete .nav-icon { width: 1rem; height: 1rem; }

@media (prefers-reduced-motion: reduce) {
  .blocking-update-button.htmx-request .icon-refresh,
  .blocking-update-button.is-updating .icon-refresh { animation-duration: 1.6s; }
  .mobile-header, .replica-read-only-banner { transition: none; }
}

.auth-body { display: grid; min-height: 100vh; place-items: center; padding: 1.5rem; }
.auth-card { width: min(28rem, 100%); border: 1px solid var(--border); border-radius: var(--radius); background: var(--card); padding: 1.5rem; color: var(--card-foreground); }
.auth-logo { display: grid; width: 4rem; height: 4rem; margin: 0 auto 0.5rem; place-items: center; }
.auth-logo img { width: 100%; height: 100%; }
.auth-card h1 { margin: 0; font-size: 1.5rem; font-weight: 700; text-align: center; }
.auth-card > p { margin: 0.35rem 0 1.5rem; color: var(--muted-foreground); text-align: center; }
.auth-form { display: grid; gap: 1rem; }
.auth-form button { width: 100%; margin-top: 0.25rem; }
.integration-facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr)); gap: 0.75rem; }
.integration-facts > div { display: grid; gap: 0.15rem; border-radius: calc(var(--radius) - 2px); background: var(--muted); padding: 0.6rem 0.75rem; }
.integration-fact-label { color: var(--muted-foreground); font-size: 0.75rem; }
.integration-fact-value { overflow: hidden; font-size: 0.9375rem; font-weight: 500; text-overflow: ellipsis; white-space: nowrap; }
.sso-review-note { margin: 0; font-size: 0.8125rem; line-height: 1.5; }
.sso-badge { margin-left: 0.35rem; }
.signin-methods { display: grid; gap: 0.5rem; }
.signin-method-row { display: flex; align-items: center; justify-content: space-between; gap: 1rem; border: 1px solid var(--border); border-radius: calc(var(--radius) - 2px); padding: 0.65rem 0.85rem; }
.signin-method-row > div { display: grid; gap: 0.1rem; min-width: 0; }
.signin-method-row strong { font-size: 0.8125rem; }
.signin-method-row span { color: var(--muted-foreground); font-size: 0.75rem; line-height: 1.45; }
/* The subject is an opaque identifier and is usually a UUID. It is clipped to
   one line rather than allowed to set the row's height. */
.signin-method-subject { overflow: hidden; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 0.6875rem; text-overflow: ellipsis; white-space: nowrap; }
.signin-method-row form { flex-shrink: 0; }
.signin-method-row .button { white-space: nowrap; }
/* The wizard inherits the UniFi wizard's grid, which bounds the dialog and
   zeroes the grid minimums so only the step panel scrolls. Without that the
   panel grows past the viewport and drags the footer off screen. */
.sso-wizard-dialog { width: min(44rem, calc(100% - 3rem)); }
/* The dialog body styles every label as a bold grid, which leaves helper text
   inheriting the label's weight and colour. These re-quiet it inside the
   wizard rather than changing the shared rule every other dialog relies on. */
.sso-wizard-dialog .isotope-dialog-body { gap: 0.8rem; }
.sso-wizard-dialog .isotope-dialog-body label small { color: var(--muted-foreground); font-size: 0.75rem; font-weight: 400; line-height: 1.4; }
/* A checkbox is a row, not a stack: the shared label rule would put the box on
   its own line with its text underneath. */
.sso-wizard-dialog label.checkbox { display: flex; align-items: center; gap: 0.5rem; font-weight: 400; }
.sso-wizard-dialog label.checkbox input { width: auto; margin: 0; }
.sso-field-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); gap: 0.8rem; }
/* The shared label rule uses a child combinator, so a label nested one level
   down inside a field row matches nothing and renders unstyled. */
.sso-wizard-dialog .sso-field-row label { display: grid; gap: 0.5rem; font-size: 0.8125rem; font-weight: 500; }
.sso-presets { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; font-size: 0.8125rem; color: var(--muted-foreground); }
.sso-presets .button { height: 1.85rem; padding: 0 0.65rem; font-size: 0.8125rem; }
.sso-toggles, .sso-mappings { display: grid; gap: 0.6rem; border: 1px solid var(--border); border-radius: calc(var(--radius) - 2px); padding: 0.85rem 1rem; }
.sso-toggles legend, .sso-mappings legend { padding: 0 0.35rem; font-size: 0.8125rem; font-weight: 500; }
.sso-toggles label.checkbox { display: flex; align-items: flex-start; gap: 0.5rem; font-weight: 400; }
.sso-mappings small { color: var(--muted-foreground); font-size: 0.75rem; }
.sso-mapping-row { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 0.6rem; }
.sso-mapping-row .nav-icon { width: 1rem; height: 1rem; color: var(--muted-foreground); }
.auth-sso { margin-bottom: 1rem; }
/* Scoped through .auth-sso so it outranks `.auth-form button`, which paints
   every button in the card as the primary action. Two primary buttons stacked
   would give the password form and the provider equal weight. */
.auth-sso .auth-sso-button { display: flex; align-items: center; justify-content: center; gap: 0.5rem; margin-top: 0; border: 1px solid var(--border); background: var(--card); color: var(--card-foreground); }
.auth-sso .auth-sso-button:hover { background: var(--accent); opacity: 1; }
.auth-sso .auth-sso-button svg { width: 1rem; height: 1rem; }
.auth-divider { display: flex; align-items: center; gap: 0.75rem; margin-bottom: 1rem; color: var(--muted-foreground); font-size: 0.8125rem; }
.auth-divider::before, .auth-divider::after { flex: 1; height: 1px; background: var(--border); content: ""; }
.auth-error { margin-bottom: 1rem; border-radius: calc(var(--radius) - 2px); background: color-mix(in oklch, var(--destructive) 10%, transparent); padding: 0.75rem; color: var(--destructive); font-size: 0.875rem; }

@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.35; } }

@media (max-width: 1279px) {
  .summary-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 1023px) {
  .content { padding: 1rem; }
  .dashboard-columns { grid-template-columns: 1fr; }
  .query-form { grid-template-columns: 1fr 7rem; }
  .query-form button { grid-column: span 2; }
  .token-form { grid-template-columns: 1fr 10rem; }
  .token-form button { grid-column: span 2; }
	.page-columns { grid-template-columns: 1fr; }
	.page-main { grid-column: auto; }
	.cache-layout { grid-template-columns: 1fr; }
	.cache-aside { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.blocking-layout { grid-template-columns: 1fr; }
	.blocking-aside { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.blocking-aside .tip-box { grid-column: 1 / -1; }
	.blocking-summary { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.primary-stats { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	.dashboard-rankings, .dashboard-distributions { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 767px) {
  .sidebar { position: fixed; left: 0; width: 16rem; flex-basis: 16rem; transform: translateX(-100%); transition: transform 180ms ease; }
	.sidebar-rail, .sidebar-collapsed .sidebar-rail { display: none; }
  .sidebar-collapsed .sidebar { width: 16rem; flex-basis: 16rem; }
  .sidebar-collapsed .brand-copy, .sidebar-collapsed .nav-label, .sidebar-collapsed .nav-item > span, .sidebar-collapsed .user-copy, .sidebar-collapsed .user-action { display: grid; }
  .sidebar-collapsed .nav-item { justify-content: flex-start; padding: 0 0.5rem; }
  .sidebar-collapsed .sidebar-header { padding-inline: 0.5rem; }
  .sidebar-collapsed .brand { width: auto; height: auto; flex: 1; justify-content: flex-start; padding: 0.5rem; margin-inline: 0; border-radius: 0.375rem; }
  .sidebar-collapsed .sidebar-collapse { display: grid; }
  .sidebar-mobile-open .sidebar { transform: translateX(0); }
  .sidebar-scrim { position: fixed; inset: 0; z-index: 20; background: rgb(0 0 0 / 0.55); }
  .sidebar-mobile-open .sidebar-scrim { display: block; }
  /* The header sticks so navigation stays one tap away, but slides out of the
     way while reading down a long page and comes back on the first scroll up. */
  .mobile-header { position: sticky; top: 0; z-index: 15; display: flex; height: 3.5rem; align-items: center; justify-content: center; border-bottom: 1px solid var(--border); background: var(--background); transition: transform 180ms ease; }
  .mobile-header button { position: absolute; left: 1rem; display: grid; width: 2rem; height: 2rem; place-items: center; border: 0; border-radius: 0.375rem; background: transparent; }
  .mobile-header-brand { display: inline-flex; height: 2.75rem; align-items: center; border-radius: 0.375rem; padding-inline: 0.75rem; font-weight: 700; }
  .mobile-header-hidden .mobile-header { transform: translateY(-100%); }
  /* The banner parks below the header and slides up with it, so the two never
     stack on top of each other at the same sticky offset. */
  .replica-read-only-banner { top: 3.5rem; transition: top 180ms ease; }
  .mobile-header-hidden .replica-read-only-banner { top: 0; }
  .content { padding: 1rem; }
  .chart-card { min-height: 23rem; }
  .chart-wrap { height: 15rem; padding-inline: 1rem; }
  .range-tabs button { padding-inline: 0.5rem; }
	.dashboard-rankings, .dashboard-distributions { grid-template-columns: 1fr; }
	.zone-dnssec-nsec3 { grid-template-columns: 1fr; }
}

@media (max-width: 639px) {
	.toast-region { right: .75rem; bottom: .75rem; width: calc(100vw - 1.5rem); }
  .stats-grid, .summary-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.5rem; }
  .stat-card, .summary-card { min-height: 5.5rem; padding: 0.7rem 0.75rem; }
  .stat-card strong, .summary-card strong { font-size: 1.25rem; }
  .card-header, .panel-header { padding-inline: 1rem; }
	.chart-header { align-items: center; flex-direction: row; }
	.range-tabs { display: none; }
	.range-select { display: block; }
	.range-custom-mobile { display: inline-flex; align-items: center; }
  .query-form, .token-form { grid-template-columns: 1fr; padding-inline: 1rem; }
  .query-form button, .token-form button { grid-column: auto; }
  .runtime-list, .runtime-actions { padding-inline: 1rem; }
	.query-composer { padding: 1rem; }
	.query-primary-row { display: grid; grid-template-columns: 1fr 1fr; }
	.query-primary-row .search-field { grid-column: span 2; min-width: 0; }
	.record-type-select { width: 100%; }
	.resolve-button { justify-content: center; }
	.query-options-row { display: grid; grid-template-columns: 1fr 1fr; }
	.resolver-combobox, .query-options-row .transport-picker, .query-options-row .edns-subnet { width: auto; }
	.resolver-combobox { grid-column: span 2; }
	.resolver-popover { width: 100%; }
	.dialog-footer { flex-direction: column-reverse; }
	.dialog-footer .button { width: 100%; }
	.chart-range-popover { top: 4.1rem; right: 1rem; }
	.result-metadata { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.75rem; }
	.dns-result-header { align-items: stretch; flex-direction: column; padding-inline: 1rem; }
	.copy-response { width: 100%; }
	.result-content { padding-inline: 1rem; }
	.record-row { gap: 0.5rem; padding-inline: 0.75rem; }
	.record-ttl { min-width: 3.5rem; flex-basis: 3.5rem; }
	.cache-card-header { padding: 1.25rem; }
	.cache-title h2 { font-size: 1.35rem; }
	.cache-card-body { padding: 1rem; }
	.cache-stat-grid, .cache-actions, .cache-aside { grid-template-columns: 1fr; }
	.operational-metric { min-height: 7.5rem; padding: .95rem; }
	.operational-metric > b { font-size: 1.7rem; }
	.cache-actions p { min-height: 0; }
	.cache-dialog-header, .cache-browser-body, .cache-dialog-footer { padding: 1rem; }
	.cache-record-row { grid-template-columns: 1fr auto; }
	.cache-record-row > span { grid-column: 1; }
	.cache-record-row > code { grid-column: 1 / -1; grid-row: 2; }
	.chart-live { margin-left: 0; }
	.distribution-content { flex-direction: column; }
	.blocking-summary { gap: .5rem; }
	.blocking-summary-card { min-height: 5rem; padding: .75rem; }
	.blocking-summary-card > span { width: 2rem; height: 2rem; flex-basis: 2rem; }
	.blocking-summary-card strong { font-size: 1.05rem; }
	.blocking-aside { grid-template-columns: 1fr; }
	.blocking-aside .tip-box { grid-column: auto; }
	.blocking-panel { padding: 1rem; }
	.blocking-panel > header { align-items: stretch; flex-direction: column; }
	.blocking-panel-actions { width: 100%; }
	.blocking-panel-actions .button { flex: 1; }
	.blocking-source-row { grid-template-columns: 2rem minmax(0, 1fr) 2rem; padding-inline: .75rem; }
	.blocking-source-row .source-status { display: none; }
	.blocking-settings-form, .blocking-reload { grid-template-columns: 1fr auto; }
	.blocking-status-card { padding: 1rem; }
	.blocking-status-card > header h2 { font-size: 1.15rem; }
	.blocking-status-stats { grid-template-columns: 1fr; margin-top: 1.25rem; }
	.blocking-quick-actions > small { width: 100%; margin-left: 0; }
	.blocking-workspace > .blocking-tabs span { display: none; }
	.blocking-list-toolbar { align-items: stretch; flex-direction: column; }
	.blocking-list-toolbar form label { justify-content: flex-end; }
	.isotope-source-row { grid-template-columns: 1.5rem minmax(0, 1fr) 2rem 2rem; }
	.catalog-tabs { grid-template-columns: repeat(3, 1fr); }
	.catalog-dialog { width: calc(100vw - 1rem); }
	.catalog-row { grid-template-columns: minmax(0, 1fr) 2rem auto; padding-inline: .75rem; }
	.isotope-zone-heading h1 { font-size: 1.5rem; }
	.isotope-zone-heading p { font-size: .78rem; }
	.isotope-zone-heading .zone-primary-action span { display: none; }
	.isotope-zone-heading .zone-primary-action { width: 2.25rem; padding: 0; }
	.zone-filter-bar { align-items: stretch; flex-direction: column; }
	.zone-filter-selects { width: 100%; }
	.zone-filter-selects label { flex: 1; width: auto; }
	.zone-desktop-badges { display: none; }
	.zone-mobile-badges { display: flex; }
	.isotope-zone-row { min-height: 4.2rem; padding-left: .75rem; }
	.zone-more-button { opacity: 1; }
	.zone-records-heading { gap: .25rem; }
	.zone-records-title h1 { font-size: 1.1rem; }
	.zone-records-actions { gap: .3rem; }
	.zone-records-actions .zone-primary-action { width: 2.25rem; padding: 0; }
	.zone-records-actions .zone-primary-action span { display: none; }
	.zone-record-filter-bar { flex-direction: row; }
	.zone-record-type-filter { width: 7.5rem; }
	.isotope-record-row { grid-template-columns: 3.25rem minmax(0, 1fr) 3.5rem 1.25rem; gap: .5rem; padding-inline: .75rem; }
	.record-value-copy { display: none; }
	.zone-copyable button { opacity: 1; }
	.record-type-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	.record-more-types { width: 100%; }
	.record-field-grid.two, .record-field-grid.three, .record-field-grid.four, .record-field-grid.mx, .record-field-grid.caa { grid-template-columns: 1fr; }
	.record-advanced-grid { grid-template-columns: 1fr; }
	.edit-record-footer { display: flex; }
	.edit-record-delete { margin-right: 0; }
	}

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

/* Settings and administration control plane */
.settings-heading, .administration-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; }
.revision-badge, .scope-badge, .built-in-badge, .current-badge, .status-badge { display: inline-flex; width: fit-content; align-items: center; border-radius: 999px; background: var(--muted); padding: .2rem .6rem; color: var(--muted-foreground); font-size: .68rem; font-weight: 600; line-height: 1.4; }
.settings-layout, .administration-grid { display: grid; grid-template-columns: minmax(0, 2.15fr) minmax(17rem, .85fr); align-items: start; gap: 1.5rem; }
.settings-main, .administration-main, .settings-aside, .administration-aside { display: grid; min-width: 0; align-content: start; gap: 1.25rem; }
.settings-card > header, .administration-card > header { display: flex; min-height: 5rem; align-items: flex-start; justify-content: space-between; gap: 1rem; border-bottom: 1px solid var(--border); padding: 1.25rem 1.5rem; }
.settings-card > header h2, .administration-card > header h2, .settings-summary-card header h2 { display: flex; align-items: center; gap: .55rem; margin: 0; font-size: 1rem; }
.settings-card > header h2 .nav-icon, .administration-card > header h2 .nav-icon, .settings-summary-card header h2 .nav-icon { width: 1.1rem; height: 1.1rem; }
.settings-card > header p, .administration-card > header p, .settings-summary-card header p { margin: .35rem 0 0; color: var(--muted-foreground); font-size: .78rem; line-height: 1.45; }
.settings-fields, .dialog-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem 1.25rem; padding: 1.25rem 1.5rem 1.5rem; }
.settings-fields > label:not(.settings-check), .dialog-fields > label { display: grid; align-content: start; gap: .45rem; color: var(--foreground); font-size: .8rem; font-weight: 600; }
.settings-fields textarea, .dialog-fields textarea { width: 100%; resize: vertical; border: 1px solid var(--input); border-radius: calc(var(--radius) - 2px); outline: 0; background: transparent; padding: .7rem .75rem; color: inherit; font: .8rem/1.55 ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace; }
.settings-fields textarea:focus, .dialog-fields textarea:focus { border-color: var(--ring); box-shadow: 0 0 0 3px color-mix(in oklch, var(--ring) 28%, transparent); }
.settings-fields small, .dialog-fields small { color: var(--muted-foreground); font-size: .7rem; font-weight: 400; line-height: 1.45; }
.field-full { grid-column: 1 / -1; }
.settings-check { display: flex; align-items: flex-start; gap: .7rem; border: 1px solid var(--border); border-radius: calc(var(--radius) - 2px); padding: .8rem; cursor: pointer; }
.settings-check input, .role-checks input, .permission-checks input { width: 1rem; height: 1rem; flex: 0 0 1rem; margin: .1rem 0 0; }
.settings-check > span { display: grid; gap: .2rem; }
.settings-check strong { font-size: .8rem; }
.read-only-field { display: grid; gap: .3rem; border: 1px dashed var(--border); border-radius: calc(var(--radius) - 2px); background: color-mix(in oklch, var(--muted) 40%, transparent); padding: .8rem; }
.read-only-field > span { color: var(--muted-foreground); font-size: .7rem; }
.settings-summary-card { padding: 1.25rem; }
.settings-summary-card header { border-bottom: 1px solid var(--border); padding-bottom: 1rem; }
.settings-summary-card dl { display: grid; margin: 0; }
.settings-summary-card dl > div { display: grid; gap: .25rem; border-top: 1px solid var(--border); padding: .85rem 0; }
.settings-summary-card dl > div:first-child { border-top: 0; }
.settings-summary-card dt { color: var(--muted-foreground); font-size: .7rem; }
.settings-summary-card dd { min-width: 0; margin: 0; font-size: .8rem; font-weight: 600; overflow-wrap: anywhere; }
.settings-savebar { position: sticky; bottom: .75rem; z-index: 5; display: flex; align-items: center; justify-content: space-between; gap: 1rem; border: 1px solid var(--border); border-radius: var(--radius); background: color-mix(in oklch, var(--background) 92%, transparent); padding: .75rem 1rem; box-shadow: 0 8px 32px rgb(0 0 0 / .1); backdrop-filter: blur(12px); }
.settings-savebar > div { display: flex; align-items: center; gap: .5rem; color: var(--muted-foreground); font-size: .75rem; }
.settings-savebar .nav-icon { width: 1rem; height: 1rem; }

.administration-metrics { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .75rem; }
.admin-metric { display: grid; min-height: 6rem; grid-template-columns: auto 1fr; align-content: center; gap: .25rem .6rem; border: 1px solid var(--border); border-radius: var(--radius); background: var(--card); padding: 1rem; }
.admin-metric .nav-icon { width: 1.1rem; height: 1.1rem; grid-row: span 2; align-self: center; }
.admin-metric span { color: var(--muted-foreground); font-size: .7rem; }
.admin-metric strong { font-size: 1.25rem; }
.admin-metric.blue .nav-icon { color: #3b82f6; } .admin-metric.purple .nav-icon { color: #a855f7; } .admin-metric.green .nav-icon { color: #22c55e; } .admin-metric.orange .nav-icon { color: #f97316; }
.administration-card > header .button { display: inline-flex; flex: 0 0 auto; align-items: center; gap: .45rem; }
.administration-card > header .button .nav-icon { width: 1rem; height: 1rem; }
.admin-list { overflow: visible; }
.admin-row { position: relative; display: flex; min-height: 4.25rem; align-items: center; gap: .8rem; border-top: 1px solid var(--border); padding: .75rem 1rem; }
.admin-row:first-child { border-top: 0; }
.admin-row:hover { background: color-mix(in oklch, var(--muted) 40%, transparent); }
.admin-row-icon { display: grid; width: 2rem; height: 2rem; flex: 0 0 2rem; place-items: center; border-radius: .5rem; background: var(--muted); color: var(--muted-foreground); }
.admin-row-icon .nav-icon { width: 1rem; height: 1rem; }
.admin-row-copy { display: grid; min-width: 0; flex: 1; gap: .2rem; }
.admin-row-copy > strong { display: flex; align-items: center; gap: .45rem; font-size: .82rem; }
.admin-row-copy > span { overflow: hidden; color: var(--muted-foreground); font-size: .72rem; text-overflow: ellipsis; white-space: nowrap; }
.status-badge.active { background: rgb(34 197 94 / .13); color: #16a34a; }
.status-badge.disabled { background: rgb(239 68 68 / .13); color: #ef4444; }
.current-badge { background: rgb(59 130 246 / .13); color: #3b82f6; }
.built-in-badge { margin-left: .2rem; }
.user-count { flex: 0 0 auto; color: var(--muted-foreground); font-size: .72rem; }
.permission-pills { display: flex; flex-wrap: wrap; gap: .25rem; margin-top: .25rem; }
.permission-pills code { border-radius: 999px; background: var(--muted); padding: .15rem .45rem; color: var(--muted-foreground); font-size: .62rem; }
.admin-actions { position: relative; }
.admin-actions > summary { list-style: none; }
.admin-actions > summary::-webkit-details-marker { display: none; }
.admin-action-menu { position: absolute; top: 2.6rem; right: 0; z-index: 15; width: min(21rem, calc(100vw - 3rem)); border: 1px solid var(--border); border-radius: var(--radius); background: var(--popover); padding: .75rem; box-shadow: 0 16px 40px rgb(0 0 0 / .25); }
.admin-action-menu form { display: grid; gap: .65rem; }
.admin-action-menu form + form { margin-top: .75rem; border-top: 1px solid var(--border); padding-top: .75rem; }
.admin-action-menu form > label { display: grid; gap: .4rem; font-size: .72rem; font-weight: 600; }
.role-checks, .permission-checks { display: grid; gap: .4rem; }
.role-checks label, .permission-checks label { display: flex; align-items: flex-start; gap: .55rem; border-radius: .4rem; padding: .45rem; cursor: pointer; }
.role-checks label:hover, .permission-checks label:hover { background: var(--muted); }
.role-checks label > span { display: grid; gap: .1rem; }
.role-checks strong { font-size: .75rem; }
.role-checks small { color: var(--muted-foreground); font-size: .65rem; }
.token-creation-fields { display: grid; gap: 1rem; }
.token-creation-fields > label { display: grid; gap: .5rem; font-size: .8125rem; font-weight: 500; }
.admin-empty { display: grid; min-height: 6rem; place-items: center; padding: 1rem; color: var(--muted-foreground); font-size: .8rem; }
.audit-table { min-width: 0; overflow-x: auto; }
.audit-head, .audit-row { display: grid; min-width: 48rem; grid-template-columns: 10rem 7rem 10rem 8rem minmax(12rem, 1fr); align-items: center; gap: .75rem; border-top: 1px solid var(--border); padding: .65rem 1rem; font-size: .7rem; }
.audit-head { border-top: 0; background: color-mix(in oklch, var(--muted) 50%, transparent); color: var(--muted-foreground); font-weight: 600; }
.audit-row time, .audit-row > span { overflow: hidden; color: var(--muted-foreground); text-overflow: ellipsis; white-space: nowrap; }
.audit-row code { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.admin-guidance { padding: 1.25rem; }
.admin-guidance h2 { margin: 0 0 1.25rem; font-size: 1rem; }
.admin-guidance > div { display: flex; align-items: flex-start; gap: .75rem; margin-top: 1rem; }
.admin-guidance i { width: .5rem; height: .5rem; flex: 0 0 .5rem; margin-top: .35rem; border-radius: 50%; background: var(--muted-foreground); }
.admin-guidance i.blue { background: #3b82f6; } .admin-guidance i.purple { background: #a855f7; } .admin-guidance i.green { background: #22c55e; }
.admin-guidance p { display: grid; gap: .2rem; margin: 0; }
.admin-guidance strong { font-size: .8rem; } .admin-guidance span { color: var(--muted-foreground); font-size: .75rem; line-height: 1.45; }
.administration-dialog { width: min(calc(100% - 2rem), 42rem); }
.administration-dialog form { overflow-y: auto; }
.dialog-fields fieldset { min-width: 0; margin: 0; border: 1px solid var(--border); border-radius: calc(var(--radius) - 2px); padding: .75rem; }
.dialog-fields legend { padding: 0 .35rem; font-size: .75rem; font-weight: 600; }

@media (max-width: 1100px) {
  .settings-layout, .administration-grid { grid-template-columns: 1fr; }
  .settings-aside, .administration-aside { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .settings-aside .tip-box, .administration-aside .tip-box { grid-column: 1 / -1; }
}
@media (max-width: 700px) {
  .settings-heading, .administration-heading { align-items: stretch; flex-direction: column; }
  .settings-fields, .dialog-fields { grid-template-columns: 1fr; padding-inline: 1rem; }
  .field-full { grid-column: auto; }
  .settings-aside, .administration-aside { grid-template-columns: 1fr; }
  .administration-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .settings-savebar { align-items: stretch; flex-direction: column; }
  .settings-savebar .button { width: 100%; }
  .admin-row { align-items: flex-start; }
  .role-row { flex-wrap: wrap; }
  .user-count { margin-left: 2.8rem; }
}

/* Isotope control-plane pages. These mirror the React/shadcn source layout. */
.cluster-layout { display: grid; grid-template-columns: minmax(0, 2.1fr) minmax(17rem, .9fr); align-items: start; gap: 1.5rem; }
.cluster-main-column, .cluster-aside { display: grid; min-width: 0; align-content: start; gap: 1.25rem; }
.cluster-live-status { display: grid; min-width: 0; gap: 1.25rem; }
.cluster-status-card { overflow: hidden; }
.cluster-status-card > header { display: flex; min-height: 5rem; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 1rem; border-bottom: 1px solid var(--border); padding: 1.25rem 1.5rem; }
.cluster-status-card > header > div:first-child { min-width: 0; flex: 1 1 16rem; }
.cluster-status-card > header h2 { display: flex; min-width: 0; align-items: center; gap: .6rem; margin: 0; font-size: 1.25rem; }
.cluster-status-card > header h2 > span { min-width: 0; }
.cluster-status-card > header h2 .nav-icon { width: 1.35rem; height: 1.35rem; color: #3b82f6; }
.cluster-status-card > header p { margin: .35rem 0 0; color: var(--muted-foreground); font-size: .8rem; }
.cluster-empty-state { display: grid; min-height: 18rem; place-items: center; align-content: center; gap: .55rem; padding: 2rem; text-align: center; }
.cluster-empty-icon { display: grid; width: 3.5rem; height: 3.5rem; place-items: center; border-radius: 999px; background: var(--muted); color: var(--muted-foreground); }
.cluster-empty-icon .nav-icon { width: 1.65rem; height: 1.65rem; }
.cluster-empty-state h3 { margin: .4rem 0 0; font-size: 1.05rem; }
.cluster-empty-state p { max-width: 28rem; margin: 0; color: var(--muted-foreground); font-size: .8rem; line-height: 1.5; }
.cluster-restart-notice { display: flex; max-width: 30rem; align-items: center; gap: .5rem; border: 1px solid #d97706; border-radius: .5rem; background: rgb(217 119 6 / .08); padding: .65rem .8rem; color: color-mix(in oklch, #d97706 72%, var(--foreground)); font-size: .72rem; line-height: 1.4; text-align: left; }
.cluster-restart-notice .nav-icon { width: .95rem; height: .95rem; flex: 0 0 .95rem; }
.cluster-empty-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: .6rem; margin-top: .75rem; }
.cluster-empty-actions .button { display: inline-flex; align-items: center; gap: .45rem; }
.cluster-live-indicator { display: inline-flex; align-items: center; gap: .4rem; color: var(--muted-foreground); font-size: .72rem; font-weight: 600; }
.cluster-live-indicator i { width: .5rem; height: .5rem; border-radius: 50%; background: #10b981; box-shadow: 0 0 0 .2rem rgb(16 185 129 / .12); }
.cluster-header-actions { display: flex; flex: 0 0 auto; align-items: center; gap: .75rem; }
.cluster-header-actions .button { display: inline-flex; flex: 0 0 auto; align-items: center; gap: .35rem; white-space: nowrap; }
.cluster-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); padding: 1.5rem; }
.cluster-identity { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; border-top: 1px solid var(--border); padding: 1rem 1.5rem; }
.cluster-identity > div { display: grid; min-width: 0; gap: .2rem; }
.cluster-identity span { color: var(--muted-foreground); font-size: .68rem; }
.cluster-identity strong, .cluster-identity code { overflow: hidden; font-size: .75rem; text-overflow: ellipsis; white-space: nowrap; }
.cluster-nodes-card { overflow: hidden; }
.cluster-nodes-card > header { display: flex; min-height: 4.5rem; align-items: center; justify-content: space-between; gap: 1rem; padding: 1rem 1.25rem; }
.cluster-nodes-card > header h2 { margin: 0; font-size: 1rem; }
.cluster-nodes-card > header p { margin: .25rem 0 0; color: var(--muted-foreground); font-size: .72rem; }
.cluster-observed { display: flex; align-items: center; gap: .65rem; }
.cluster-observed small { color: var(--muted-foreground); font-size: .68rem; white-space: nowrap; }
.cluster-node-row { display: grid; min-height: 5rem; gap: .85rem; border-top: 1px solid var(--border); padding: 1rem 1.25rem; }
.cluster-node-heading { display: flex; min-width: 0; align-items: center; gap: .8rem; }
.cluster-node-icon { display: grid; width: 2.25rem; height: 2.25rem; flex: 0 0 2.25rem; place-items: center; border-radius: .5rem; background: var(--muted); color: var(--muted-foreground); }
.cluster-node-icon .nav-icon { width: 1.1rem; height: 1.1rem; }
.cluster-node-copy { display: grid; min-width: 0; flex: 1; gap: .18rem; }
.cluster-node-copy > div { display: flex; min-width: 0; align-items: center; flex-wrap: wrap; gap: .35rem; }
.cluster-node-copy strong { font-size: .82rem; }
.cluster-node-copy code, .cluster-node-copy small { overflow: hidden; color: var(--muted-foreground); font-size: .68rem; text-overflow: ellipsis; white-space: nowrap; }
.cluster-node-meta { display: grid; flex: 0 0 auto; justify-items: end; gap: .15rem; font-size: .68rem; }
.cluster-node-meta span, .cluster-node-meta small { color: var(--muted-foreground); text-transform: capitalize; }
.cluster-node-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: .5rem; }
.cluster-node-actions form { margin: 0; }
.cluster-remove-node { border-color: rgb(239 68 68 / .45); color: #ef4444; }
.cluster-remove-node:hover { border-color: #ef4444; background: rgb(239 68 68 / .12); color: #ef4444; }
.cluster-remove-node .nav-icon { width: .9rem; height: .9rem; }
.cluster-sync-badge { display: inline-flex; width: fit-content; align-items: center; border-radius: 999px; background: var(--muted); padding: .2rem .6rem; color: var(--muted-foreground); font-size: .68rem; font-weight: 600; line-height: 1.4; }
.cluster-sync-badge.current { background: rgb(6 182 212 / .13); color: #0891b2; }
.cluster-sync-badge.unverified { background: rgb(245 158 11 / .13); color: #d97706; }
.cluster-sync-badge.catching-up { background: rgb(245 158 11 / .13); color: #d97706; }
.cluster-sync-badge.behind { background: rgb(239 68 68 / .13); color: #ef4444; }
.cluster-sync-progress { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: .75rem; }
.cluster-sync-progress progress { width: 100%; height: .35rem; overflow: hidden; border: 0; border-radius: 999px; background: var(--muted); appearance: none; }
.cluster-sync-progress progress::-webkit-progress-bar { border-radius: 999px; background: var(--muted); }
.cluster-sync-progress progress::-webkit-progress-value { border-radius: 999px; background: #06b6d4; }
.cluster-sync-progress progress::-moz-progress-bar { border-radius: 999px; background: #06b6d4; }
.cluster-sync-indeterminate { position: relative; width: 100%; height: .35rem; overflow: hidden; border-radius: 999px; background: var(--muted); }
.cluster-sync-indeterminate::after { position: absolute; inset: 0; background: repeating-linear-gradient(-45deg, #06b6d4 0, #06b6d4 7px, #0891b2 7px, #0891b2 14px); background-size: 20px 20px; content: ""; animation: cluster-sync-stripes .7s linear infinite; }
@keyframes cluster-sync-stripes { to { background-position: 20px 0; } }
.cluster-sync-progress span { color: var(--muted-foreground); font-size: .67rem; white-space: nowrap; }
@media (prefers-reduced-motion: reduce) { .cluster-sync-indeterminate::after { animation: none; } }
.cluster-sync-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .75rem; }
.cluster-sync-grid > div { display: grid; min-width: 0; gap: .2rem; border-left: 1px solid var(--border); padding-left: .75rem; }
.cluster-sync-grid > div:first-child { border-left: 0; padding-left: 0; }
.cluster-sync-grid span { color: var(--muted-foreground); font-size: .65rem; }
.cluster-sync-grid strong { overflow: hidden; font-size: .72rem; text-overflow: ellipsis; white-space: nowrap; }
.cluster-danger-card { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1.25rem; }
.cluster-danger-card h2 { margin: 0; font-size: 1rem; }
.cluster-danger-card p { margin: .3rem 0 0; color: var(--muted-foreground); font-size: .75rem; }
.cluster-danger-card small { display: block; margin-top: .35rem; color: var(--muted-foreground); font-size: .7rem; }
.cluster-danger-card form, .cluster-danger-card .button { flex: 0 0 auto; }
.cluster-danger-card .button { display: inline-flex; align-items: center; gap: .45rem; }
.cluster-guidance, .cluster-details { padding: 1.25rem; }
.cluster-details header { display: flex; align-items: center; justify-content: space-between; gap: .75rem; margin: 0 0 1.2rem; }
.cluster-details header h2 { margin: 0; }
.cluster-details .status-badge { width: fit-content; }
.cluster-details .button { display: inline-flex; width: 100%; align-items: center; justify-content: center; gap: .45rem; margin-top: 1.1rem; }
.status-badge.warning { background: rgb(245 158 11 / .13); color: #d97706; }
.cluster-guidance h2, .cluster-details h2 { margin: 0 0 1.2rem; font-size: 1rem; }
.cluster-guidance > div { display: flex; align-items: flex-start; gap: .75rem; margin-top: 1rem; }
.cluster-guidance i { width: .5rem; height: .5rem; flex: 0 0 .5rem; margin-top: .35rem; border-radius: 50%; }
.cluster-guidance i.blue { background: #3b82f6; } .cluster-guidance i.green { background: #22c55e; } .cluster-guidance i.purple { background: #a855f7; }
.cluster-guidance p { display: grid; gap: .2rem; margin: 0; }
.cluster-guidance strong { font-size: .8rem; } .cluster-guidance span { color: var(--muted-foreground); font-size: .75rem; line-height: 1.45; }
.warning-box { border: 1px solid #d97706; border-radius: var(--radius); background: rgb(217 119 6 / .08); padding: 1rem; color: color-mix(in oklch, #d97706 70%, var(--foreground)); font-size: .75rem; line-height: 1.5; }
.cluster-details dl { display: grid; margin: 0; }
.cluster-details dl > div { display: grid; gap: .25rem; border-top: 1px solid var(--border); padding: .75rem 0; }
.cluster-details dl > div:first-child { border-top: 0; padding-top: 0; }
.cluster-details dt { color: var(--muted-foreground); font-size: .68rem; }
.cluster-details dd { min-width: 0; margin: 0; font-size: .75rem; font-weight: 600; overflow-wrap: anywhere; }
.cluster-dialog { width: min(calc(100% - 2rem), 34rem); padding: 0; }
.cluster-dialog > .dialog-header { padding: 1.5rem 1.5rem .5rem; }
.cluster-dialog > .dialog-footer, .cluster-dialog form > .dialog-footer { border-top: 1px solid var(--border); padding: 1rem 1.5rem; }
.cluster-dialog textarea { width: 100%; resize: vertical; border: 1px solid var(--input); border-radius: calc(var(--radius) - 2px); outline: 0; background: transparent; padding: .65rem .75rem; color: inherit; font: .8rem/1.5 ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace; }
.cluster-dialog textarea:focus { border-color: var(--ring); box-shadow: 0 0 0 3px color-mix(in oklch, var(--ring) 28%, transparent); }
.cluster-dialog label small { color: var(--muted-foreground); font-size: .7rem; font-weight: 400; line-height: 1.45; }
.cluster-onboarding-dialog { width: min(calc(100% - 2rem), 38rem); max-height: min(90vh, 42rem); overflow: hidden; }
.cluster-onboarding-dialog[open] { grid-template-rows: auto minmax(0, 1fr); gap: 0; }
.cluster-onboarding-dialog > form { display: grid; min-height: 0; grid-template-rows: minmax(0, 1fr) auto; overflow: hidden; }
.cluster-onboarding-dialog > form > .isotope-dialog-body, .cluster-onboarding-dialog > .isotope-dialog-body { overflow-y: auto; }
.cluster-onboarding-dialog .dialog-header { padding: 1.25rem 1.5rem .75rem; }
.cluster-onboarding-dialog .isotope-dialog-body { gap: .75rem; padding: 1rem 1.5rem 1.2rem; }
.wizard-progress,
.cluster-wizard-progress { display: grid; grid-template-columns: auto minmax(2rem, 1fr) auto minmax(2rem, 1fr) auto; align-items: start; padding: 0 .5rem .4rem; }
.wizard-progress > div,
.cluster-wizard-progress > div { display: grid; justify-items: center; gap: .3rem; color: var(--muted-foreground); }
.wizard-progress > div > span,
.cluster-wizard-progress > div > span { display: grid; width: 1.7rem; height: 1.7rem; place-items: center; border: 1px solid var(--border); border-radius: 50%; background: var(--background); font-size: .66rem; font-weight: 700; }
.wizard-progress > div > span .nav-icon,
.cluster-wizard-progress > div > span .nav-icon { width: .78rem; height: .78rem; }
.wizard-progress > div > small,
.cluster-wizard-progress > div > small { font-size: .64rem; font-weight: 600; }
.wizard-progress > div.current,
.cluster-wizard-progress > div.current { color: #3b82f6; }
.wizard-progress > div.current > span,
.cluster-wizard-progress > div.current > span { border-color: #3b82f6; background: rgb(59 130 246 / .12); }
.wizard-progress > div.complete,
.cluster-wizard-progress > div.complete { color: #22c55e; }
.wizard-progress > div.complete > span,
.cluster-wizard-progress > div.complete > span { border-color: #22c55e; background: rgb(34 197 94 / .12); }
.wizard-progress > i,
.cluster-wizard-progress > i { height: 1px; margin-top: .85rem; background: var(--border); }
.wizard-progress > div.complete + i,
.cluster-wizard-progress > div.complete + i { background: #22c55e; }
.wizard-panel,
.cluster-wizard-panel { display: grid; gap: .8rem; }
.wizard-panel[hidden],
.cluster-wizard-panel[hidden] { display: none; }
.cluster-wizard-panel > label,
.cluster-certificate-panel > label,
.cluster-certificate-panel .field-grid > label { display: grid; min-width: 0; align-content: start; gap: .5rem; font-size: .8125rem; font-weight: 500; line-height: 1.35; }
.wizard-heading,
.cluster-wizard-heading { display: flex; align-items: center; gap: .7rem; border-top: 1px solid var(--border); padding-top: .8rem; }
.wizard-heading > span,
.cluster-wizard-heading > span { display: grid; width: 2rem; height: 2rem; flex: 0 0 2rem; place-items: center; border-radius: .5rem; background: rgb(59 130 246 / .12); color: #3b82f6; }
.wizard-heading > span .nav-icon,
.cluster-wizard-heading > span .nav-icon { width: 1.1rem; height: 1.1rem; }
.wizard-heading > div,
.cluster-wizard-heading > div { display: grid; gap: .15rem; }
.wizard-heading strong,
.cluster-wizard-heading strong { font-size: .9rem; }
.wizard-heading small,
.cluster-wizard-heading small { color: var(--muted-foreground); font-size: .72rem; }
.cluster-wizard-advanced { border-top: 1px solid var(--border); padding-top: .85rem; }
.cluster-wizard-advanced > summary { width: fit-content; cursor: pointer; color: var(--muted-foreground); font-size: .72rem; font-weight: 600; }
.cluster-wizard-advanced[open] > summary { margin-bottom: .85rem; }
.cluster-wizard-advanced > label { display: grid; gap: .45rem; font-size: .78rem; font-weight: 500; }
.cluster-certificate-section { display: grid; gap: .65rem; }
.cluster-certificate-choices { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .5rem; }
.cluster-certificate-choices > label { position: relative; min-width: 0; cursor: pointer; }
.cluster-certificate-choices > label > input { position: absolute; opacity: 0; pointer-events: none; }
.cluster-certificate-choices > label > span { display: grid; min-height: 3.7rem; justify-items: center; align-content: center; gap: .12rem; border: 1px solid var(--border); border-radius: .5rem; padding: .4rem .55rem; color: var(--muted-foreground); text-align: center; }
.cluster-certificate-choices > label.active > span { border-color: #3b82f6; background: rgb(59 130 246 / .08); color: var(--foreground); box-shadow: 0 0 0 1px #3b82f6; }
.cluster-certificate-choices .nav-icon { width: .9rem; height: .9rem; margin-bottom: .08rem; }
.cluster-certificate-choices strong { max-width: 100%; overflow: hidden; font-size: .72rem; text-overflow: ellipsis; white-space: nowrap; }
.cluster-certificate-choices small { font-size: .62rem; font-weight: 400; white-space: nowrap; }
.cluster-certificate-panel { display: grid; gap: .65rem; }
.cluster-certificate-panel[hidden], .cluster-acme-credentials [hidden] { display: none; }
.cluster-dialog-note.compact { padding: .65rem .7rem; }
.cluster-certificate-advanced { border-top: 1px solid var(--border); padding-top: .65rem; }
.cluster-certificate-advanced > summary { display: flex; width: 100%; align-items: center; gap: .45rem; cursor: pointer; list-style: none; color: var(--muted-foreground); font-size: .72rem; font-weight: 600; }
.cluster-certificate-advanced > summary::-webkit-details-marker { display: none; }
.cluster-certificate-advanced > summary .nav-icon { width: .85rem; height: .85rem; flex: 0 0 .85rem; }
.cluster-certificate-advanced > summary .icon-chevron-down { margin-left: auto; transition: transform .16s ease; }
.cluster-certificate-advanced[open] > summary .icon-chevron-down { transform: rotate(180deg); }
.cluster-certificate-advanced-content { display: grid; grid-template-columns: minmax(7rem, .35fr) minmax(0, 1fr); align-items: start; gap: .75rem; padding-top: .75rem; }
.cluster-certificate-advanced-content > label { display: grid; min-width: 0; gap: .45rem; font-size: .78rem; font-weight: 500; }
.cluster-acme-credentials { display: grid; gap: .85rem; }
.cluster-restart-step { display: grid; justify-items: center; gap: .55rem; border-top: 1px solid var(--border); padding: 2rem 1rem 1rem; text-align: center; }
.cluster-restart-step > span { display: grid; width: 3rem; height: 3rem; place-items: center; border-radius: 50%; background: rgb(59 130 246 / .12); color: #3b82f6; }
.cluster-restart-step > span .nav-icon { width: 1.35rem; height: 1.35rem; }
.cluster-restart-step h3 { margin: .25rem 0 0; font-size: 1rem; }
.cluster-restart-step p { max-width: 27rem; margin: 0; color: var(--muted-foreground); font-size: .75rem; line-height: 1.5; }
.cluster-onboarding-dialog > [data-sable-restart] { display: grid; min-height: 0; grid-template-rows: minmax(0, 1fr) auto; overflow: hidden; }
[data-sable-restart] > .isotope-dialog-body { overflow-y: auto; }
[data-sable-restart] > .dialog-footer { align-items: center; border-top: 1px solid var(--border); padding: 1rem 1.5rem; }
[data-sable-restart] > .dialog-footer [data-sable-restart-button] { display: inline-flex; align-items: center; gap: .45rem; }
[data-sable-restart] > .dialog-footer [data-sable-restart-button] .nav-icon { width: 1rem; height: 1rem; }
[data-sable-restart].is-restarting .cluster-restart-step > span .nav-icon,
[data-sable-restart].is-restarting [data-sable-restart-button] .nav-icon { animation: blocking-refresh-spin .8s linear infinite; }
[data-sable-restart].is-restarting [data-restart-exit] { pointer-events: none; opacity: .5; }
.cluster-onboarding-dialog .dialog-footer [hidden] { display: none; }
.cluster-settings-dialog { width: min(calc(100% - 2rem), 46rem); max-height: min(90vh, 42rem); overflow: hidden; padding: 0; }
.cluster-settings-dialog[open] { grid-template-rows: auto auto minmax(0, 1fr); gap: 0; }
.cluster-settings-dialog > .dialog-header { padding: 1.5rem 1.5rem 1.1rem; }
.cluster-settings-dialog > form { display: grid; min-height: 0; grid-template-rows: minmax(0, 1fr) auto; overflow: hidden; }
.cluster-settings-panel { align-content: start; overflow-y: auto; }
.cluster-settings-panel > label, .cluster-settings-grid > label { display: grid; min-width: 0; gap: .5rem; font-size: .8125rem; font-weight: 500; }
.cluster-settings-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; gap: .85rem; }
.cluster-settings-field-full { grid-column: 1 / -1; }
.cluster-trust-hint { display: flex; align-items: center; gap: .5rem; margin: 0; color: var(--muted-foreground); font-size: .7rem; line-height: 1.45; }
.cluster-trust-hint .nav-icon { width: .9rem; height: .9rem; flex: 0 0 .9rem; color: #3b82f6; }
.cluster-tls-accordion { display: grid; gap: .65rem; }
.cluster-tls-option { overflow: hidden; border: 1px solid var(--border); border-radius: var(--radius); background: var(--background); }
.cluster-tls-option[open] { border-color: color-mix(in oklch, var(--ring) 55%, var(--border)); }
.cluster-tls-option > summary { display: grid; grid-template-columns: 2rem minmax(0, 1fr) auto; align-items: center; gap: .75rem; padding: .8rem; cursor: pointer; list-style: none; }
.cluster-tls-option > summary::-webkit-details-marker { display: none; }
.cluster-tls-option > summary > span:nth-child(2) { display: grid; min-width: 0; gap: .2rem; }
.cluster-tls-option > summary > span:nth-child(2) > span { display: flex; align-items: center; flex-wrap: wrap; gap: .5rem; }
.cluster-tls-option > summary strong { font-size: .78rem; }
.cluster-tls-option > summary em { overflow: hidden; color: var(--muted-foreground); font-size: .68rem; font-style: normal; text-overflow: ellipsis; white-space: nowrap; }
.cluster-tls-option > summary > .icon-chevron-down { width: .9rem; height: .9rem; color: var(--muted-foreground); transition: transform 150ms ease; }
.cluster-tls-option[open] > summary > .icon-chevron-down { transform: rotate(180deg); }
.cluster-tls-option-icon { display: grid; width: 2rem; height: 2rem; place-items: center; border-radius: .45rem; background: var(--muted); color: var(--muted-foreground); }
.cluster-tls-option-icon.recommended { background: rgb(34 197 94 / .13); color: #22c55e; }
.cluster-tls-option-icon .nav-icon { width: 1rem; height: 1rem; }
.cluster-tls-option-content { display: grid; gap: 1rem; border-top: 1px solid var(--border); padding: 1rem; }
.cluster-security-actions { display: inline-flex; align-items: center; }
.cluster-settings-dialog .dialog-footer [hidden] { display: none; }
.isotope-dialog-body.cluster-initialize-readiness { gap: 0; }
.cluster-setup-step { position: relative; display: grid; grid-template-columns: 2rem minmax(0, 1fr); align-items: start; gap: .75rem; padding-bottom: 1.25rem; }
.cluster-setup-step:last-child { padding-bottom: 0; }
.cluster-setup-step::after { position: absolute; top: 2rem; bottom: 0; left: .975rem; width: 1px; background: var(--border); content: ""; }
.cluster-setup-step:last-child::after { display: none; }
.cluster-setup-step > span { z-index: 1; display: grid; width: 2rem; height: 2rem; place-items: center; border: 1px solid var(--border); border-radius: 50%; background: var(--background); color: var(--muted-foreground); font-size: .72rem; font-weight: 700; }
.cluster-setup-step > span .nav-icon { width: .9rem; height: .9rem; }
.cluster-setup-step > div { display: grid; gap: .2rem; padding-top: .15rem; }
.cluster-setup-step strong { font-size: .8rem; }
.cluster-setup-step small { color: var(--muted-foreground); font-size: .7rem; line-height: 1.45; }
.cluster-setup-step.current > span { border-color: #3b82f6; background: rgb(59 130 246 / .13); color: #3b82f6; }
.cluster-setup-step.complete > span { border-color: #22c55e; background: rgb(34 197 94 / .13); color: #22c55e; }
.cluster-dialog-note.success { border-color: color-mix(in oklch, #22c55e 45%, var(--border)); background: rgb(34 197 94 / .08); }
.cluster-dialog-note.success > .nav-icon { color: #22c55e; }
.cluster-dialog-note { display: flex; gap: .7rem; border: 1px solid var(--border); border-radius: .5rem; background: var(--muted); padding: .8rem; }
.cluster-dialog-note > .nav-icon { width: 1rem; height: 1rem; flex: 0 0 1rem; margin-top: .1rem; color: #3b82f6; }
.cluster-dialog-note p { display: grid; gap: .2rem; margin: 0; }
.cluster-dialog-note strong { font-size: .75rem; } .cluster-dialog-note span { color: var(--muted-foreground); font-size: .7rem; line-height: 1.4; }
.cluster-token-value { display: grid; min-width: 0; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: .75rem; border: 1px solid var(--input); border-radius: calc(var(--radius) - 2px); padding: .4rem .4rem .4rem .75rem; }
.cluster-token-value code { display: block; min-width: 0; overflow: hidden; color: var(--muted-foreground); font-size: .75rem; text-overflow: ellipsis; white-space: nowrap; }
.cluster-copy-token { display: inline-flex; flex: 0 0 auto; align-items: center; justify-content: center; gap: .4rem; white-space: nowrap; }
.cluster-copy-token .copy-icon-default,
.cluster-copy-token .copy-icon-success { align-items: center; justify-content: center; line-height: 0; }
.cluster-copy-token .copy-icon-default { display: inline-flex; }
.cluster-copy-token .nav-icon { display: block; width: .9rem; height: .9rem; }
.cluster-copy-token.is-copied .copy-icon-default { display: none; }
.cluster-copy-token.is-copied .copy-icon-success { display: inline-flex; }
.cluster-join-error { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: start; gap: .7rem; border: 1px solid color-mix(in oklch, var(--destructive) 55%, var(--border)); border-radius: .5rem; background: color-mix(in oklch, var(--destructive) 9%, transparent); padding: .8rem; color: var(--destructive); }
.cluster-join-error > .nav-icon { width: 1rem; height: 1rem; margin-top: .1rem; }
.cluster-join-error > div { display: grid; min-width: 0; gap: .2rem; }
.cluster-join-error strong { font-size: .75rem; }
.cluster-join-error span { color: var(--foreground); font-size: .7rem; line-height: 1.45; overflow-wrap: anywhere; }
.cluster-join-submit > span { align-items: center; justify-content: center; gap: .45rem; }
.cluster-join-submit-idle { display: inline-flex; }
.cluster-join-submit-pending { display: none; }
[data-cluster-join-form].htmx-request .cluster-join-submit-idle { display: none; }
[data-cluster-join-form].htmx-request .cluster-join-submit-pending { display: inline-flex; }
[data-cluster-join-form].htmx-request .cluster-join-submit-pending > .nav-icon { animation: blocking-refresh-spin .8s linear infinite; }

@media (max-width: 1050px) { .cluster-layout { grid-template-columns: 1fr; } .cluster-aside { grid-template-columns: repeat(2, minmax(0, 1fr)); } .cluster-aside .warning-box { grid-column: 1 / -1; } }
@media (max-width: 800px) { .cluster-identity, .cluster-sync-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .cluster-sync-grid > div:nth-child(3) { border-left: 0; padding-left: 0; } }
@media (max-width: 639px) { .cluster-metrics { grid-template-columns: 1fr; padding: 1rem; } }
@media (max-width: 700px) { .cluster-identity, .cluster-sync-grid, .cluster-aside { grid-template-columns: 1fr; } .cluster-sync-grid > div { border-top: 1px solid var(--border); border-left: 0; padding: .55rem 0 0; } .cluster-sync-grid > div:first-child { border-top: 0; padding-top: 0; } .cluster-aside .warning-box { grid-column: auto; } .cluster-danger-card { align-items: stretch; flex-direction: column; } .cluster-danger-card .button { width: 100%; justify-content: center; } .cluster-node-meta { display: none; } .cluster-node-actions .button { width: 100%; justify-content: center; } .cluster-node-actions, .cluster-node-actions form { width: 100%; } .cluster-observed small { display: none; } }
@media (max-width: 700px) { .cluster-settings-grid { grid-template-columns: 1fr; } .cluster-settings-field-full { grid-column: auto; } .cluster-certificate-choices { grid-template-columns: 1fr; } .cluster-certificate-choices > label > span { min-height: 3.25rem; grid-template-columns: auto 1fr; justify-items: start; text-align: left; } .cluster-certificate-choices small { display: none; } .cluster-certificate-advanced-content { grid-template-columns: 1fr; } }

.isotope-control-page { gap: 1.5rem; }
.isotope-control-page > .page-heading { display: block; }
.isotope-tab-list { display: flex; width: fit-content; max-width: 100%; align-items: center; gap: .125rem; border-radius: .5rem; background: var(--muted); padding: .25rem; }
.isotope-tab { display: inline-flex; min-width: 0; height: 1.75rem; align-items: center; justify-content: center; gap: .35rem; border: 0; border-radius: .375rem; background: transparent; padding: 0 .75rem; color: var(--muted-foreground); font-size: .75rem; font-weight: 500; white-space: nowrap; }
.isotope-tab:hover:not(:disabled) { color: var(--foreground); }
.isotope-tab.active { background: var(--background); color: var(--foreground); box-shadow: 0 1px 3px rgb(0 0 0 / .16); }
.isotope-tab:disabled { cursor: not-allowed; opacity: .38; }
.isotope-tab:focus-visible { outline: 2px solid var(--ring); outline-offset: -2px; }
.tab-count { display: inline-flex; min-width: 1.25rem; height: 1.15rem; align-items: center; justify-content: center; border-radius: 999px; background: var(--secondary); padding: 0 .375rem; color: var(--secondary-foreground); font-size: .625rem; line-height: 1; }
.isotope-tab.active .tab-count { background: var(--muted); }
.isotope-tab-panel, .settings-tab-panel { margin-top: 0; }

.isotope-data-card { overflow: hidden; }
.isotope-data-header { display: flex; min-height: 4rem; align-items: center; justify-content: space-between; gap: 1rem; border-bottom: 1px solid var(--border); padding: 1rem; }
.isotope-data-header > div { display: flex; min-width: 0; align-items: center; gap: .5rem; }
.isotope-data-header h2 { margin: 0; font-size: 1.125rem; font-weight: 600; }
.isotope-data-header > div > span { color: var(--muted-foreground); font-size: .875rem; }
.button.compact { display: inline-flex; height: 2rem; align-items: center; gap: .45rem; padding-inline: .75rem; font-size: .75rem; }
.button.compact .nav-icon { width: 1rem; height: 1rem; }
[data-replica-primary-only="true"] { cursor: not-allowed !important; opacity: .45 !important; }
.switch:has(input[data-replica-primary-only="true"]) { cursor: not-allowed; opacity: .45; }
.replica-read-only-banner { position: sticky; top: 0; z-index: 15; display: flex; min-height: 2.75rem; align-items: center; justify-content: space-between; gap: 1rem; border-bottom: 1px solid color-mix(in oklch, #3b82f6 60%, var(--border)); background-color: color-mix(in oklch, #3b82f6 10%, var(--background)); background-image: repeating-linear-gradient(135deg, transparent 0 14px, color-mix(in oklch, #3b82f6 7%, transparent) 14px 22px); padding: .5rem 1.5rem; box-shadow: 0 2px 10px rgb(0 0 0 / .08); backdrop-filter: blur(12px); }
.replica-read-only-copy { display: flex; min-width: 0; align-items: center; gap: .55rem; }
.replica-read-only-copy > .nav-icon { box-sizing: border-box; width: 1.5rem; height: 1.5rem; flex: 0 0 1.5rem; border-radius: .375rem; background: color-mix(in oklch, #3b82f6 16%, transparent); padding: .25rem; color: #3b82f6; }
.replica-read-only-copy > span { overflow: hidden; color: var(--muted-foreground); font-size: .75rem; text-overflow: ellipsis; white-space: nowrap; }
.replica-read-only-copy strong { margin-right: .45rem; color: var(--foreground); font-weight: 600; }
.replica-primary-link { display: inline-flex; flex: 0 0 auto; align-items: center; gap: .35rem; color: #3b82f6; font-size: .75rem; font-weight: 600; white-space: nowrap; }
.replica-primary-link:hover { text-decoration: underline; }
.replica-primary-link .nav-icon { width: .875rem; height: .875rem; }
@media (max-width: 639px) { .replica-read-only-banner { padding-inline: 1rem; } .replica-read-only-copy > span > span { display: none; } }
.profile-page { display: grid; width: min(68rem, 100%); gap: 1.25rem; margin-inline: auto; }
.profile-tabs { width: fit-content; }
.profile-tabs .isotope-tab { min-width: 8rem; gap: .45rem; }
.profile-tabs .nav-icon { width: 1rem; height: 1rem; }
.profile-account-stack { display: grid; width: min(52rem, 100%); gap: 1rem; }
.profile-settings-card { overflow: hidden; }
.profile-settings-card .isotope-data-header > div { display: grid; align-items: initial; gap: .2rem; }
.profile-settings-card .isotope-data-header > div > span { font-size: .75rem; }
.profile-settings-form { display: grid; }
.profile-settings-body { display: grid; gap: 1rem; padding: 1.25rem; }
.profile-field-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
.profile-username { display: grid; gap: .2rem; border-radius: .5rem; background: color-mix(in oklch, var(--muted) 55%, transparent); padding: .75rem 1rem; }
.profile-username > span { color: var(--muted-foreground); font-size: .6875rem; font-weight: 600; text-transform: uppercase; }
.profile-username > strong { font: 500 .85rem ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace; }
.profile-username > small, .profile-settings-body .field-control small { color: var(--muted-foreground); font-size: .7rem; }
.profile-security-note { display: flex; align-items: center; gap: .55rem; color: var(--muted-foreground); font-size: .72rem; }
.profile-security-note .nav-icon { width: 1rem; height: 1rem; flex: 0 0 1rem; }
.profile-card-footer { display: flex; justify-content: flex-end; border-top: 1px solid var(--border); padding: .75rem 1.25rem; }
.profile-token-page { min-width: 0; }
.profile-token-list { overflow: hidden; }
.profile-token-list .isotope-data-header > div { display: flex; }
.profile-token-table th:first-child, .profile-token-table td:first-child { padding-left: 1.25rem; }
.profile-token-table td:first-child strong { font: 600 .8rem ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace; }
.profile-token-table .muted-cell { white-space: nowrap; }
.profile-token-empty { min-height: 15rem; gap: .35rem; }
.profile-token-empty > div { display: grid; width: 2.5rem; height: 2.5rem; margin-bottom: .35rem; place-items: center; border-radius: .6rem; background: color-mix(in oklch, #3b82f6 13%, transparent); color: #3b82f6; }
.profile-token-empty > div .nav-icon { width: 1.15rem; height: 1.15rem; }
.profile-token-empty strong { color: var(--foreground); font-size: .875rem; }
.profile-token-empty span { max-width: 24rem; color: var(--muted-foreground); font-size: .75rem; text-align: center; }
.profile-token-dialog { width: min(38rem, calc(100vw - 2rem)); }
.profile-token-mobile-row { display: grid; gap: .7rem; border-top: 1px solid var(--border); padding: 1rem; }
.profile-token-mobile-row:first-child { border-top: 0; }
.profile-token-mobile-heading { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.profile-token-mobile-heading strong { font: 600 .82rem ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace; }
.profile-token-mobile-row dl { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .75rem; margin: 0; }
.profile-token-mobile-row dl > div { display: grid; gap: .15rem; }
.profile-token-mobile-row dt { color: var(--muted-foreground); font-size: .65rem; text-transform: uppercase; }
.profile-token-mobile-row dd { overflow: hidden; margin: 0; font-size: .72rem; text-overflow: ellipsis; white-space: nowrap; }
@media (max-width: 639px) { .profile-field-grid { grid-template-columns: 1fr; } .profile-tabs { width: 100%; } .profile-tabs .isotope-tab { min-width: 0; flex: 1; } .profile-token-mobile-row dl { grid-template-columns: 1fr; } }
.admin-desktop-table { width: 100%; overflow-x: auto; }
.isotope-table { width: 100%; border-collapse: collapse; font-size: .8125rem; text-align: left; }
.isotope-table th { height: 2.75rem; padding: 0 1rem; color: var(--muted-foreground); font-size: .75rem; font-weight: 500; white-space: nowrap; }
.isotope-table td { height: 3.75rem; border-top: 1px solid var(--border); padding: .625rem 1rem; vertical-align: middle; }
.isotope-table tbody tr[data-dialog-open] { cursor: pointer; }
.isotope-table tbody tr:hover { background: color-mix(in oklch, var(--muted) 50%, transparent); }
.isotope-table td:last-child { width: 3rem; }
.isotope-table td:last-child > .nav-icon { width: 1rem; height: 1rem; color: var(--muted-foreground); }
.isotope-table code { font-size: .75rem; }
.muted-cell { color: var(--muted-foreground); }
.right-cell { text-align: right; }
.right-cell form { display: inline-flex; }
.table-badges { display: flex; max-width: 22rem; flex-wrap: wrap; gap: .25rem; }
.table-badges > span, .count-badge, .token-type-badge { display: inline-flex; width: fit-content; min-height: 1.3rem; align-items: center; border: 1px solid var(--border); border-radius: 999px; padding: .1rem .45rem; font-size: .625rem; line-height: 1.1; }
.token-type-badge { border-color: var(--primary); background: var(--primary); color: var(--primary-foreground); }
.permission-access, .current-text { color: #16a34a; font-size: .6875rem; font-weight: 500; }
.current-text { margin-left: .3rem; }
.admin-mobile-list { display: none; }
.admin-mobile-row { width: 100%; min-height: 4.5rem; align-items: center; justify-content: space-between; gap: .75rem; border: 0; border-top: 1px solid var(--border); background: transparent; padding: 1rem; text-align: left; }
.admin-mobile-row:first-child { border-top: 0; }
.admin-mobile-row > div { display: grid; min-width: 0; flex: 1; grid-template-columns: auto 1fr; gap: .2rem .5rem; }
.admin-mobile-row strong { font: 500 .8125rem ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace; }
.admin-mobile-row small, .mobile-role-list { grid-column: 1 / -1; overflow: hidden; color: var(--muted-foreground); font-size: .72rem; text-overflow: ellipsis; white-space: nowrap; }
.admin-mobile-row > .nav-icon { width: 1rem; height: 1rem; color: var(--muted-foreground); }
.admin-mobile-row.static { display: flex; }
.session-mobile-row { display: grid; gap: .35rem; border-top: 1px solid var(--border); padding: 1rem; }
.session-mobile-row:first-child { border-top: 0; }
.session-mobile-row > div { display: flex; align-items: center; gap: .4rem; }
.session-mobile-row > div > form { display: inline-flex; margin-left: auto; }
.session-mobile-row .icon-button { width: 2rem; height: 2rem; flex-basis: 2rem; }
.session-mobile-row code, .session-mobile-row small { color: var(--muted-foreground); font-size: .7rem; }

.api-token-result { min-height: 4.5rem; border: 1px solid var(--border); border-radius: calc(var(--radius) - 2px); background: color-mix(in oklch, var(--muted) 35%, transparent); padding: .75rem; color: var(--muted-foreground); font-size: .75rem; }
.api-token-result .query-error, .api-token-result .token-created { color: var(--foreground); }
.field-help { margin: -.25rem 0 0; color: var(--muted-foreground); font-size: .7rem; line-height: 1.45; }
.token-secret { display: flex; width: 100%; border: 1px solid var(--border); border-radius: calc(var(--radius) - 2px); background: var(--muted); padding: .75rem; }
.token-secret > span { flex: 1; color: var(--foreground); font: .75rem/1.5 ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace; }
.token-secret button { opacity: 1; }

.isotope-form-dialog { width: min(calc(100% - 2rem), 32rem); }
.isotope-dialog-body { display: grid; gap: 1rem; overflow-y: auto; padding: 1.5rem; }
.isotope-dialog-body > label, .embedded-admin-form > label { display: grid; gap: .5rem; font-size: .8125rem; font-weight: 500; }
.isotope-dialog-body fieldset { min-width: 0; margin: 0; border: 1px solid var(--border); border-radius: calc(var(--radius) - 2px); padding: .75rem; }
.isotope-dialog-body legend { padding: 0 .35rem; font-size: .75rem; font-weight: 600; }
.group-edit-dialog { width: min(calc(100% - 2rem), 52rem); max-height: min(92vh, 52rem); overflow: hidden; padding: 0; }
.group-edit-dialog[open] { grid-template-rows: auto minmax(0, 1fr); gap: 0; }
.group-edit-dialog > .dialog-header { padding: 1.5rem 1.5rem 1rem; }
.group-edit-dialog > form { display: grid; min-height: 0; grid-template-rows: minmax(0, 1fr) auto; overflow: hidden; }
.group-edit-dialog .isotope-dialog-body { min-height: 0; }
.group-edit-dialog > form > .dialog-footer { align-items: center; border-top: 1px solid var(--border); padding: 1rem 1.5rem; }
.permission-surface-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
.permission-surface { display: grid; min-width: 0; align-content: start; gap: .85rem; border: 1px solid var(--border); border-radius: .5rem; padding: 1rem; }
.permission-surface > header { display: flex; align-items: flex-start; justify-content: space-between; gap: .75rem; }
.permission-surface > header > div:first-child { display: grid; min-width: 0; gap: .2rem; }
.permission-surface h3 { margin: 0; font-size: .9rem; }
.permission-surface header p { margin: 0; color: var(--muted-foreground); font-size: .7rem; }
.permission-bulk-actions { display: inline-flex; flex: 0 0 auto; align-items: center; gap: .2rem; }
.permission-bulk-actions button { border: 0; border-radius: .3rem; background: transparent; color: var(--muted-foreground); padding: .25rem .35rem; font: inherit; font-size: .65rem; cursor: pointer; }
.permission-bulk-actions button:hover, .permission-bulk-actions button:focus-visible { background: var(--muted); color: var(--foreground); }
.permission-surface .permission-checks { max-height: 15rem; overflow-y: auto; border-block: 1px solid var(--border); padding-block: .5rem; }
.permission-surface .permission-checks span { min-width: 0; overflow-wrap: anywhere; font: .68rem/1.35 ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace; }
.zone-scope { display: grid; gap: .35rem; }
.zone-scope > label, .zone-grant-list label { display: flex; align-items: center; gap: .5rem; border-radius: .35rem; padding: .35rem; font-size: .72rem; cursor: pointer; }
.zone-scope input { width: 1rem; height: 1rem; flex: 0 0 1rem; margin: 0; }
.zone-grant-list { display: grid; max-height: 8rem; gap: .15rem; overflow-y: auto; border-top: 1px solid var(--border); padding-top: .4rem; }
.zone-scope:has(> label input[value="all"]:checked) .zone-grant-list { opacity: .45; }
.row-actions { display: inline-flex; align-items: center; justify-content: flex-end; gap: .35rem; }
.row-actions form { display: inline-flex; }
.embedded-admin-form { display: grid; gap: .75rem; border-top: 1px solid var(--border); padding-top: 1rem; }
.embedded-admin-form .button, .embedded-admin-actions .button { justify-self: end; }
.embedded-admin-actions { display: flex; justify-content: flex-end; }
.dialog-footer.split { justify-content: space-between; }
.dialog-footer .button { display: inline-flex; align-items: center; gap: .45rem; }

.user-edit-dialog { width: min(calc(100% - 2rem), 40rem); max-height: min(90vh, 44rem); overflow: hidden; padding: 0; }
.user-edit-dialog[open] { grid-template-rows: auto auto minmax(0, 1fr) auto; gap: 0; }
.user-edit-dialog > .dialog-header { padding: 1.5rem 1.5rem 1.1rem; }
.dialog-tab-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); margin: 0 1.5rem; border-radius: .5rem; background: var(--muted); padding: .25rem; }
.dialog-tab-list.three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.dialog-tab-list.four { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.dialog-tab-list.four .dialog-tab { gap: .3rem; padding: 0 .25rem; }
.dialog-tab { display: inline-flex; height: 2rem; align-items: center; justify-content: center; border: 0; border-radius: .375rem; background: transparent; color: var(--muted-foreground); font-size: .75rem; font-weight: 600; }
.dialog-tab:hover { color: var(--foreground); }
.dialog-tab.active { background: var(--background); color: var(--foreground); box-shadow: 0 1px 3px rgb(0 0 0 / .16); }
.dialog-tab:focus-visible { outline: 2px solid var(--ring); outline-offset: -2px; }
.user-dialog-content { min-height: 0; overflow-y: auto; }
.user-edit-dialog > form.user-dialog-content { display: grid; grid-template-rows: minmax(0, 1fr) auto; overflow: hidden; }
.user-edit-dialog > form.user-dialog-content > .dialog-tab-panel { overflow-y: auto; }
.dialog-tab-panel { display: grid; gap: 1.25rem; padding: 1.25rem 1.5rem 1.5rem; }
.dialog-tab-panel[hidden] { display: none; }
.user-profile-form, .password-update-form, .group-membership-form { display: grid; gap: 1rem; }
.password-update-form { border-top: 1px solid var(--border); padding-top: 1.25rem; }
.form-section-heading { display: grid; gap: .25rem; }
.form-section-heading h3 { margin: 0; font-size: .875rem; font-weight: 600; }
.form-section-heading p { margin: 0; color: var(--muted-foreground); font-size: .72rem; line-height: 1.45; }
.group-membership-form fieldset { min-width: 0; margin: 0; border: 1px solid var(--border); border-radius: calc(var(--radius) - 2px); padding: .5rem; }
.user-panel-action { display: flex; justify-content: flex-end; }
.user-dialog-footer { align-items: center; justify-content: space-between; border-top: 1px solid var(--border); padding: 1rem 1.5rem; }
.user-token-panel { align-content: start; }
.user-token-warning { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: start; gap: .65rem; border: 1px solid color-mix(in oklch, #f59e0b 55%, var(--border)); border-radius: calc(var(--radius) - 2px); background: color-mix(in oklch, #f59e0b 8%, transparent); padding: .75rem; }
.user-token-warning > .nav-icon { width: 1rem; height: 1rem; margin-top: .1rem; color: #f59e0b; }
.user-token-warning > div { display: grid; gap: .2rem; }
.user-token-warning strong { font-size: .75rem; }
.user-token-warning span { color: var(--muted-foreground); font-size: .7rem; line-height: 1.45; }
.user-token-list { overflow: hidden; border: 1px solid var(--border); border-radius: calc(var(--radius) - 2px); }
.user-token-row { display: grid; gap: .75rem; border-top: 1px solid var(--border); padding: 1rem; }
.user-token-row:first-child { border-top: 0; }
.user-token-heading, .user-token-heading > div { display: flex; min-width: 0; align-items: center; gap: .5rem; }
.user-token-heading { justify-content: space-between; }
.user-token-heading strong { overflow: hidden; font-size: .8125rem; text-overflow: ellipsis; white-space: nowrap; }
.user-token-heading form { display: inline-flex; }
.user-token-heading .icon-button { width: 2rem; height: 2rem; flex: 0 0 2rem; }
.user-token-meta { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .75rem; color: var(--muted-foreground); font-size: .7rem; }
.user-token-meta > span { display: grid; gap: .15rem; }
.user-token-meta small { color: var(--foreground); font-size: .625rem; font-weight: 600; text-transform: uppercase; }
.user-token-empty { border: 1px solid var(--border); border-radius: calc(var(--radius) - 2px); }
.user-danger-actions { display: flex; align-items: center; gap: .5rem; }
.user-danger-actions form { display: inline-flex; }
.user-footer-actions { display: flex; align-items: center; gap: .5rem; }

.settings-source-card > header h2 { display: flex; align-items: center; gap: .5rem; margin: 0; }
.settings-source-card > header p { margin: .3rem 0 0; color: var(--muted-foreground); font-size: .8125rem; }
/* The strip shares each row out between whatever tabs land on it, so adding
   or dropping a section never leaves a hole at the end of a row. */
.settings-tab-list { display: flex; width: 100%; flex-wrap: wrap; gap: .25rem; }
.settings-tab-list > .settings-tab { flex: 1 1 calc((100% - 8 * .25rem) / 9); }
/* The basis names how many tabs share a row, and flex-grow fills whatever row
   they land on: nine across while there is room, then five, then three. A
   plain fixed basis wraps wherever it happens to run out and leaves the last
   row holding one tab stretched across the whole strip. */
@media (max-width: 960px) { .settings-tab-list > .settings-tab { flex-basis: calc((100% - 4 * .25rem) / 5); } }
@media (max-width: 560px) { .settings-tab-list > .settings-tab { flex-basis: calc((100% - 2 * .25rem) / 3); } }
.settings-tab { height: 3.25rem; flex-direction: column; gap: .25rem; padding: .45rem .25rem; }
.settings-tab .nav-icon { width: 1rem; height: 1rem; }
.settings-tab span { font-size: .6875rem; line-height: 1; }
.isotope-settings-form, .settings-panel-stack { display: grid; gap: 1.5rem; }
.settings-source-card { overflow: hidden; }
.settings-source-card > header { border-bottom: 0; padding: 1.5rem 1.5rem .75rem; }
.settings-source-card > header h2 { font-size: 1rem; }
.settings-source-card > header h2 .nav-icon { width: 1.25rem; height: 1.25rem; }
.isotope-card-content { display: grid; gap: 1rem; padding: 1rem 1.5rem 1.5rem; }
.field-grid { display: grid; align-items: start; gap: 1rem; }
.field-grid.two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.field-grid.three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.field-grid.four { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.cache-ttl-grid { margin-top: .5rem; }
.field-control { display: grid; min-width: 0; align-content: start; gap: .5rem; font-size: .8125rem; font-weight: 500; }
.field-control > small, .field-help { color: var(--muted-foreground); font-size: .68rem; font-weight: 400; line-height: 1.45; }
.field-error { margin: 0; color: var(--destructive); font-size: .7rem; font-weight: 500; line-height: 1.4; }
.field-grid-message { grid-column: 1 / -1; }
.field-control input[aria-invalid="true"], .group-membership-fieldset.invalid { border-color: var(--destructive); box-shadow: 0 0 0 1px color-mix(in srgb, var(--destructive) 45%, transparent); }
.group-membership-fieldset { min-width: 0; margin: 0; border: 1px solid var(--border); border-radius: calc(var(--radius) - 2px); padding: .5rem; }
.group-access-status { display: grid; gap: .2rem; border: 1px solid var(--border); border-radius: .5rem; background: var(--muted); padding: .75rem; }
.group-access-status strong { font-size: .75rem; }
.group-access-status span { color: var(--muted-foreground); font-size: .68rem; line-height: 1.45; }
.group-access-status.api-only { border-color: rgb(59 130 246 / .45); background: rgb(59 130 246 / .08); }
.group-access-status.web-enabled { border-color: rgb(34 197 94 / .45); background: rgb(34 197 94 / .08); }
.field-control textarea, .protocol-setting textarea { width: 100%; resize: vertical; border: 1px solid var(--input); border-radius: calc(var(--radius) - 2px); outline: none; background: transparent; padding: .625rem .75rem; color: inherit; font: .8125rem/1.5 ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace; }
.field-control textarea:focus, .protocol-setting textarea:focus { border-color: var(--ring); box-shadow: 0 0 0 3px color-mix(in oklch, var(--ring) 28%, transparent); }
.field-control small, .protocol-setting small, .read-only-field small { color: var(--muted-foreground); font-size: .7rem; font-weight: 400; line-height: 1.45; }
.narrow-control { max-width: 20rem; }
.switch-row { display: flex; align-items: center; justify-content: space-between; gap: 1rem; border: 1px solid var(--border); border-radius: calc(var(--radius) - 2px); padding: 1rem; }
.switch-row > span { display: grid; gap: .2rem; }
.switch-row input[type=checkbox] { width: 2.25rem; height: 1.25rem; flex: 0 0 2.25rem; accent-color: var(--primary); }
.protocol-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
.protocol-grid.three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.protocol-setting { display: grid; gap: .75rem; border: 1px solid var(--border); border-radius: .5rem; padding: 1rem; }
.protocol-setting > div { display: grid; gap: .2rem; }
.certificate-settings, .acme-settings, .manual-certificate-settings { display: grid; gap: 1rem; }
.certificate-manual-actions { display: flex; flex-wrap: wrap; gap: .65rem; }
.certificate-manual-actions .button { display: inline-flex; align-items: center; justify-content: center; gap: .45rem; }
.certificate-manual-actions .button .nav-icon { width: 1rem; height: 1rem; flex: 0 0 1rem; }
.certificate-manual-note { display: flex; align-items: flex-start; gap: .55rem; color: var(--muted-foreground); font-size: .76rem; line-height: 1.45; }
.certificate-manual-note svg { width: 1rem; height: 1rem; flex: 0 0 auto; margin-top: .08rem; }
.certificate-dialog { width: min(46rem, calc(100vw - 2rem)); }
.cluster-pki-generate { justify-self: start; }
.certificate-mode-control { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .25rem; border-radius: .5rem; background: var(--muted); padding: .25rem; }
.certificate-mode-control label { display: flex; min-height: 2.5rem; cursor: pointer; align-items: center; justify-content: center; border: 1px solid transparent; border-radius: calc(var(--radius) - 3px); color: var(--muted-foreground); font-size: .75rem; font-weight: 600; }
.certificate-mode-control label.active { border-color: var(--border); background: var(--background); color: var(--foreground); box-shadow: 0 1px 2px rgb(0 0 0 / .2); }
.certificate-mode-control input { position: absolute; opacity: 0; pointer-events: none; }
/* Each provider carries its own accent so the card changes colour with the
   selection. In a long column of identical grey fields that tint is the only
   thing saying which service is about to receive credentials. */
.acme-provider-card { --provider-accent: var(--muted-foreground); }
.acme-provider-card[data-acme-provider-selected="cloudflare"] { --provider-accent: #f6821f; }
.acme-provider-card[data-acme-provider-selected="porkbun"] { --provider-accent: #ef6461; }
.acme-provider-card[data-acme-provider-selected="namecheap"] { --provider-accent: #ff5000; }
.acme-provider-card[data-acme-provider-selected="godaddy"] { --provider-accent: #00a4a6; }
.acme-provider-card[data-acme-provider-selected="digitalocean"] { --provider-accent: #0080ff; }
.acme-provider-card[data-acme-provider-selected="hetzner"] { --provider-accent: #d50c2d; }
.acme-provider-card[data-acme-provider-selected="route53"] { --provider-accent: #ff9900; }
.acme-provider-card[data-acme-provider-selected="ovh"] { --provider-accent: #4d7bd4; }
.acme-provider-card[data-acme-provider-selected="rfc2136"] { --provider-accent: #a78bfa; }
.acme-provider-card > header { position: relative; display: flex; align-items: center; gap: .9rem; margin: -1rem -1rem 0; border-bottom: 1px solid color-mix(in srgb, var(--provider-accent) 35%, var(--border)); background: linear-gradient(90deg, color-mix(in srgb, var(--provider-accent) 12%, transparent), transparent 70%); padding: 1rem; }
.acme-provider-card > header > div { display: grid; min-width: 0; flex: 1 1 auto; gap: .2rem; }
.acme-provider-card header strong { font-size: .875rem; }
.acme-provider-card header small { color: var(--muted-foreground); font-size: .7rem; line-height: 1.45; }
.acme-provider-icon { display: grid; width: 2.5rem; height: 2.5rem; flex: 0 0 2.5rem; place-items: center; border-radius: .6rem; background: color-mix(in srgb, var(--provider-accent) 18%, transparent); color: var(--provider-accent); }
.acme-provider-icon .nav-icon { width: 1.25rem; height: 1.25rem; }
.certificate-status { display: flex; flex-wrap: wrap; align-items: center; gap: .9rem; border: 1px solid var(--border); border-radius: .5rem; background: var(--muted); padding: 1rem; }
.certificate-status-icon { display: grid; width: 2.5rem; height: 2.5rem; flex: 0 0 2.5rem; place-items: center; border-radius: .6rem; background: var(--background); color: var(--muted-foreground); }
.certificate-status-icon .nav-icon { width: 1.25rem; height: 1.25rem; }
.certificate-status.active .certificate-status-icon { background: rgb(34 197 94 / .14); color: #22c55e; }
.certificate-status.attention .certificate-status-icon { background: color-mix(in srgb, var(--destructive) 14%, transparent); color: var(--destructive); }
/* The detail column keeps a floor of 16rem so the button drops to its own row
   when the card is narrow, rather than squeezing the status text into a column. */
.certificate-status-detail { display: grid; min-width: 0; flex: 1 1 16rem; gap: .25rem; }
.certificate-status-heading { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; }
.certificate-status-heading strong { font-size: .875rem; }
.certificate-status-detail > span { overflow: hidden; color: var(--muted-foreground); font-size: .72rem; line-height: 1.45; text-overflow: ellipsis; }
.certificate-status-separator { margin-inline: .35rem; }
.certificate-status .badge { display: inline-flex; min-height: 1.35rem; flex: 0 0 auto; align-items: center; border-radius: 999px; background: var(--background); padding: .12rem .5rem; color: var(--muted-foreground); font-size: .67rem; font-weight: 600; line-height: 1.1; white-space: nowrap; }
.certificate-status .badge.success { background: rgb(34 197 94 / .16); color: #22c55e; }
.certificate-status .badge.danger { background: color-mix(in srgb, var(--destructive) 16%, transparent); color: var(--destructive); }
.acme-provider-card .badge { display: inline-flex; min-height: 1.35rem; flex: 0 0 auto; align-items: center; border-radius: 999px; background: var(--muted); padding: .12rem .5rem; color: var(--muted-foreground); font-size: .67rem; font-weight: 600; line-height: 1.1; white-space: nowrap; }
.acme-provider-card .badge.success { background: rgb(34 197 94 / .16); color: #22c55e; }
.certificate-details-link { border: 0; background: none; padding: 0; color: var(--foreground); font: inherit; text-decoration: underline; text-decoration-style: dotted; text-underline-offset: .2em; cursor: pointer; }
.certificate-details-link:hover { text-decoration-style: solid; }
.certificate-details-body { display: grid; gap: 1.25rem; }
.certificate-detail-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .75rem 1rem; }
.certificate-detail { display: grid; min-width: 0; gap: .2rem; }
.certificate-detail > span { color: var(--muted-foreground); font-size: .7rem; font-weight: 600; letter-spacing: .03em; text-transform: uppercase; }
.certificate-detail > strong { font-size: .82rem; font-weight: 600; overflow-wrap: anywhere; }
.certificate-detail-value { display: flex; width: 100%; align-items: flex-start; gap: .35rem; border-radius: .35rem; background: var(--muted); padding: .3rem .45rem; }
.certificate-detail-value > code { min-width: 0; flex: 1 1 auto; font-size: .7rem; line-height: 1.5; overflow-wrap: anywhere; }
.certificate-detail-value > button { margin-top: .1rem; }
.certificate-detail-section { display: grid; gap: .5rem; border-top: 1px solid var(--border); padding-top: 1rem; }
.certificate-detail-section h3 { margin: 0; font-size: .82rem; }
.certificate-detail-section > p { margin: 0; color: var(--muted-foreground); font-size: .72rem; line-height: 1.45; }
.certificate-detail-empty { color: var(--muted-foreground); font-size: .75rem; }
.certificate-name-list { display: grid; margin: .25rem 0 0; gap: .35rem; padding: 0; list-style: none; }
.certificate-name-list li { display: flex; align-items: center; gap: .5rem; border: 1px solid var(--border); border-radius: .4rem; padding: .4rem .6rem; font-size: .78rem; overflow-wrap: anywhere; }
.certificate-name-list .nav-icon { width: .95rem; height: .95rem; flex: 0 0 .95rem; color: #22c55e; }
.certificate-name-list.pending li { border-color: color-mix(in srgb, var(--destructive) 40%, transparent); }
.certificate-name-list.pending .nav-icon { color: var(--destructive); }
.certificate-shared-settings { display: grid; gap: .75rem; border-top: 1px solid var(--border); padding-top: 1rem; }
.certificate-shared-label { color: var(--muted-foreground); font-size: .7rem; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; }
.certificate-error { display: flex; align-items: flex-start; gap: .5rem; border: 1px solid color-mix(in srgb, var(--destructive) 50%, transparent); border-radius: .5rem; background: color-mix(in srgb, var(--destructive) 8%, transparent); padding: .75rem; color: var(--destructive); font-size: .72rem; line-height: 1.45; }
.certificate-error .nav-icon { width: 1rem; height: 1rem; flex: 0 0 1rem; }
.acme-provider-card { display: grid; gap: 1rem; border: 1px solid var(--border); border-radius: .5rem; padding: 1rem; }
.certificate-renew-button { display: inline-flex; flex: 0 0 auto; align-items: center; justify-content: center; gap: .45rem; justify-self: start; white-space: nowrap; }
.certificate-renew-button .nav-icon { width: 1rem; height: 1rem; flex: 0 0 1rem; }
.certificate-renew-button.htmx-request .nav-icon { animation: blocking-refresh-spin .8s linear infinite; }
.panel-copy { margin: 0; color: var(--muted-foreground); font-size: .8125rem; line-height: 1.5; }
.about-page { width: 100%; max-width: 56rem; margin-inline: auto; }
.about-hero { display: grid; justify-items: center; padding: 2rem 1rem; text-align: center; }
.about-mascot { width: 11rem; height: auto; margin-bottom: 1rem; }
.about-hero h1 { margin: 0 0 .5rem; font-size: 2.25rem; font-weight: 700; letter-spacing: -.035em; line-height: 1; }
.about-hero > p { margin: 0; color: var(--muted-foreground); font-size: .875rem; }
.about-runtime-meta { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 1rem; margin-top: .75rem; color: var(--muted-foreground); font-size: .6875rem; }
.about-meta-divider { color: var(--border); }
.about-card > header { min-height: auto; padding: 1.25rem 1.5rem .5rem; }
.about-card > header h2 { margin: 0; font-size: 1rem; font-weight: 600; }
.about-card-content { display: grid; gap: 1rem; padding: .75rem 1.5rem 1.5rem; }
.about-card-content > p { margin: 0; color: var(--muted-foreground); font-size: .8125rem; line-height: 1.55; }
.about-card-content code { font: .75rem ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace; }
.about-links { display: flex; flex-wrap: wrap; column-gap: 1.5rem; row-gap: .5rem; font-size: .8125rem; }
.about-links a, .inline-link { color: var(--primary); }
.about-links a { display: inline-flex; align-items: center; gap: .35rem; white-space: nowrap; }
.about-links a:hover, .inline-link:hover, .about-footer a:hover { text-decoration: underline; }
.about-links .nav-icon { width: .75rem; height: .75rem; }
.about-version-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem; border-top: 1px solid var(--border); padding-top: 1rem; }
.about-version-copy { display: grid; min-width: 0; gap: .35rem; }
.about-version-copy > div { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; font-size: .8125rem; }
.about-version-copy > div > span:first-child, .about-version-copy > small { color: var(--muted-foreground); }
.about-version-copy > small { font-size: .6875rem; overflow-wrap: anywhere; }
.about-version-status { display: inline-flex; align-items: center; gap: .25rem; color: var(--muted-foreground); font-size: .6875rem; }
.about-version-status .nav-icon { width: .875rem; height: .875rem; }
.about-card-title { display: inline-flex; align-items: center; gap: .5rem; }
.about-card-title .nav-icon { width: 1.25rem; height: 1.25rem; }
.about-code-block { position: relative; min-width: 0; }
.about-code-block pre { max-height: none; padding-right: 2.75rem; background: color-mix(in oklch, var(--muted) 40%, transparent); font-size: .6875rem; }
.about-copy-button { position: absolute; top: .25rem; right: .25rem; display: grid; width: 1.75rem; height: 1.75rem; place-items: center; border: 0; border-radius: .375rem; background: transparent; color: var(--muted-foreground); }
.about-copy-button:hover { background: var(--accent); color: var(--foreground); }
.about-copy-button .nav-icon { width: .875rem; height: .875rem; }
.about-metrics-preview { display: grid; justify-items: start; gap: .75rem; }
.about-metrics-preview pre { width: 100%; max-height: 14rem; font-size: .6875rem; }
.about-metrics-preview pre:not(:empty) { display: block !important; }
.about-update { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem; border: 1px solid var(--border); border-radius: var(--radius); padding: 1rem; }
.about-update-summary { display: flex; min-width: 0; flex: 1 1 20rem; align-items: center; gap: .75rem; }
.about-update-icon { display: grid; width: 2.15rem; height: 2.15rem; flex: 0 0 2.15rem; place-items: center; border-radius: .55rem; background: color-mix(in oklch, currentColor 13%, transparent); color: var(--muted-foreground); }
.about-update-icon .nav-icon { width: 1.1rem; height: 1.1rem; }
.about-update-copy { display: grid; min-width: 0; gap: .2rem; }
.about-update-copy strong { font-size: .8125rem; }
.about-update-copy small { overflow-wrap: anywhere; color: var(--muted-foreground); font-size: .6875rem; line-height: 1.5; }
.about-update-notes { display: inline-flex; align-items: center; gap: .3rem; margin-left: .75rem; white-space: nowrap; }
.about-update-notes .nav-icon { width: .75rem; height: .75rem; }
.about-update-actions { display: flex; flex-shrink: 0; flex-wrap: wrap; align-items: center; gap: .9rem; margin: 0; }
/* Split control: the check runs on the left half, the release channel lives
   behind the caret so the row keeps one visible action. */
.about-update-split { position: relative; display: inline-flex; }
.about-update-split > .button { border-top-right-radius: 0; border-bottom-right-radius: 0; }
/* summary.button, not summary: .button.compact carries its own inline padding
   and icon size, and would otherwise win and squeeze the caret. */
.about-update-menu > summary.button { display: inline-flex; width: 2rem; flex: 0 0 2rem; align-items: center; justify-content: center; margin-left: -1px; border-top-left-radius: 0; border-bottom-left-radius: 0; padding-inline: 0; list-style: none; cursor: pointer; }
.about-update-menu > summary.button::-webkit-details-marker { display: none; }
.about-update-menu > summary.button .nav-icon { width: .875rem; height: .875rem; flex: none; transition: transform 120ms ease; }
.about-update-menu[open] > summary.button { background: var(--accent); }
.about-update-menu[open] > summary.button .nav-icon { transform: rotate(180deg); }
/* .card clips to its rounded corners, which cuts the menu off at the card
   edge. Lift the clip only while the menu is open. */
.about-card:has(.about-update-menu[open]) { overflow: visible; }
.about-update-menu > div { position: absolute; top: calc(100% + .35rem); right: 0; z-index: 50; display: grid; width: max-content; max-width: 15rem; gap: .3rem; border: 1px solid var(--border); border-radius: .5rem; background: var(--popover, var(--card)); color: var(--popover-foreground, var(--foreground)); padding: .6rem .7rem; box-shadow: 0 1rem 2.5rem rgb(0 0 0 / .28), 0 .2rem .5rem rgb(0 0 0 / .18); }
.about-update-menu > div small { color: var(--muted-foreground); font-size: .625rem; line-height: 1.4; }
.about-update-channel { display: flex; align-items: center; gap: .45rem; font-size: .75rem; white-space: nowrap; cursor: pointer; }
.about-update-channel input { width: .9rem; height: .9rem; accent-color: var(--primary); }
.about-update-available { border-color: color-mix(in oklch, #2563eb 45%, var(--border)); }
.about-update-available .about-update-icon { color: #2563eb; }
.about-update-current .about-update-icon { color: #22c55e; }
.about-update-installed { border-color: color-mix(in oklch, #22c55e 45%, var(--border)); }
.about-update-installed .about-update-icon { color: #22c55e; }
.about-update-failed { border-color: color-mix(in oklch, var(--destructive) 45%, var(--border)); }
.about-update-failed .about-update-icon { color: var(--destructive); }
.about-update-installed .about-update-icon .icon-refresh { display: none; }
.about-update.is-restarting .about-update-icon .icon-power { display: none; }
.about-update.is-restarting .about-update-icon .icon-refresh { display: block; }
.about-update-busy .about-update-icon .nav-icon, .about-update.is-restarting .about-update-icon .icon-refresh { animation: about-update-spin 1.4s linear infinite; }
@keyframes about-update-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  .about-update-busy .about-update-icon .nav-icon, .about-update.is-restarting .about-update-icon .icon-refresh { animation: none; }
}
.about-footer { padding: .25rem 0 1rem; color: var(--muted-foreground); font-size: .75rem; text-align: center; }
@media (max-width: 640px) {
  .about-hero { padding: 1rem .5rem; }
  .about-mascot { width: 8.5rem; margin-bottom: .75rem; }
  .about-runtime-meta { gap: .45rem .75rem; }
  .about-meta-divider { display: none; }
  .about-card > header { padding-inline: 1rem; }
  .about-card-content { padding-inline: 1rem; }
  .about-version-row { align-items: stretch; }
  .about-version-row .button { width: 100%; justify-content: center; }
  .about-update { align-items: stretch; }
  .about-update-actions { width: 100%; }
  .about-update-actions > .button, .about-update-split { flex: 1 1 100%; }
  .about-update-actions > .button { justify-content: center; }
  .about-update-split > .button { flex: 1; justify-content: center; }
}
.settings-link-button { display: inline-flex; width: fit-content; align-items: center; gap: .5rem; }
.settings-link-button .nav-icon { width: 1rem; height: 1rem; }
.settings-panel-save { display: flex; justify-content: flex-end; }
.settings-blocking-radio-list { margin-top: 0; }
.settings-blocking-actions { display: flex; align-items: center; justify-content: space-between; gap: .75rem; }
.settings-blocking-actions .button { display: inline-flex; align-items: center; gap: .45rem; }
.settings-blocking-actions .nav-icon { width: 1rem; height: 1rem; }
.settings-advanced { border-top: 1px solid var(--border); padding-top: .85rem; }
.settings-advanced > summary { display: flex; width: 100%; align-items: center; gap: .45rem; cursor: pointer; list-style: none; color: var(--muted-foreground); font-size: .72rem; font-weight: 600; }
.settings-advanced > summary::-webkit-details-marker { display: none; }
.settings-advanced > summary .nav-icon { width: .9rem; height: .9rem; flex: 0 0 .9rem; }
.settings-advanced > summary .icon-chevron-down { margin-left: auto; transition: transform .16s ease; }
.settings-advanced[open] > summary { margin-bottom: .85rem; }
.settings-advanced[open] > summary .icon-chevron-down { transform: rotate(180deg); }

.logs-page { width: 100%; }
.logs-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; }
.logs-tab-list { display: grid; width: fit-content; grid-template-columns: repeat(2, minmax(8rem, 1fr)); }
.logs-tab-panel { min-width: 0; }
.logs-card { overflow: hidden; }
.logs-toolbar { display: flex; min-height: 4.5rem; align-items: center; justify-content: space-between; gap: 1rem; border-bottom: 1px solid var(--border); padding: 1rem 1.25rem; }
.logs-toolbar > div, .logs-toolbar h2, .logs-toolbar-actions, .logs-pagination, .logs-pagination > div, .logs-pagination nav { display: flex; align-items: center; }
/* The count belongs beside the heading at every width: only the filter
   tokens after it are allowed to wrap onto a line of their own. */
.log-title { display: flex; min-width: 0; align-items: baseline; gap: .6rem; }
.logs-toolbar > div:first-child { min-width: 0; gap: .75rem; }
/* The heading shares its text baseline with the count beside it, so the icon
   centres itself on the line instead of setting the heading's baseline. */
.logs-toolbar h2 { align-items: baseline; gap: .5rem; margin: 0; font-size: 1rem; }
.logs-toolbar h2 .nav-icon { width: 1.1rem; height: 1.1rem; align-self: center; }
.logs-toolbar-actions { gap: .5rem; }
.logs-toolbar-actions .button { display: inline-flex; align-items: center; justify-content: center; gap: .4rem; white-space: nowrap; }
.logs-toolbar-actions .nav-icon { width: .9rem; height: .9rem; }
.logs-toolbar-actions .live.active { border-color: rgb(16 185 129 / .55); color: #10b981; }
.runtime-level-field { display: block; width: 9rem; }
.runtime-log-viewer { height: min(38rem, calc(100vh - 22rem)); min-height: 20rem; overflow: auto; background: color-mix(in oklch, var(--background) 90%, #000); padding: .75rem 0; font: .72rem/1.55 ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace; }
.runtime-log-line { display: grid; grid-template-columns: 11.75rem 3.5rem minmax(12rem, auto) minmax(0, 1fr); gap: .75rem; padding: .18rem 1.25rem; }
.runtime-log-line:hover { background: color-mix(in oklch, var(--muted) 55%, transparent); }
.runtime-log-line time, .runtime-log-attributes { color: var(--muted-foreground); }
.runtime-log-level { font-weight: 700; }
.level-info .runtime-log-level { color: #3b82f6; }
.level-warn .runtime-log-level { color: #f59e0b; }
.level-error .runtime-log-level { color: #ef4444; }
.level-debug .runtime-log-level { color: #a855f7; }
.runtime-log-message { color: var(--foreground); }
.runtime-log-attributes { overflow-wrap: anywhere; }
.logs-empty { display: grid; min-height: 20rem; place-items: center; color: var(--muted-foreground); font-size: .8rem; }
.logs-empty.error { color: var(--destructive); }
.log-total { color: var(--muted-foreground); font-size: .78rem; white-space: nowrap; }
.logs-toolbar-actions .button.active { background: var(--accent); color: var(--accent-foreground); }
/* Applied filters read as tokens beside the count while the filter bar is
   collapsed, so a panel narrowed by a dashboard link never looks unfiltered. */
.query-filter-tokens { display: flex; min-width: 0; flex-wrap: wrap; align-items: center; gap: .35rem; }
/* The open filter bar already spells the filters out, so the tokens stand in
   for it only while it is closed. */
.logs-card:has(.query-log-filters:not([hidden])) .query-filter-tokens { display: none; }
.query-logs-toolbar > div:first-child { flex-wrap: wrap; }
.query-logs-toolbar h2, .logs-toolbar .log-total { white-space: nowrap; }
.query-filter-token { display: inline-flex; max-width: 22rem; align-items: center; gap: .3rem; border: 1px solid var(--border); border-radius: 999px; background: color-mix(in oklch, var(--muted) 60%, transparent); padding: .12rem .3rem .12rem .55rem; font-size: .72rem; line-height: 1.6; }
.query-filter-token b { color: var(--muted-foreground); font-weight: 500; }
.query-filter-token > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-variant-numeric: tabular-nums; }
.query-filter-token a, .query-filter-clear { display: grid; width: 1.05rem; height: 1.05rem; flex: none; place-items: center; border-radius: 999px; color: var(--muted-foreground); }
.query-filter-token a:hover, .query-filter-clear:hover { background: var(--accent); color: var(--foreground); }
.query-filter-token .nav-icon, .query-filter-clear .nav-icon { width: .7rem; height: .7rem; }
.query-filter-clear { width: 1.25rem; height: 1.25rem; }
.query-filter-clear .nav-icon { width: .8rem; height: .8rem; }
/* The caret is a segment of the Filters button: it points at the state the
   click leads to, the way the collapsed bar itself does. */
.filters-toggle { gap: .4rem; }
.filters-toggle .filter-count { display: grid; min-width: 1.1rem; height: 1.1rem; place-items: center; border-radius: 999px; background: var(--primary); padding: 0 .3rem; color: var(--primary-foreground); font-size: .65rem; font-weight: 600; }
.filters-toggle .button-caret { display: inline-flex; align-items: center; margin-left: .1rem; border-left: 1px solid var(--border); padding-left: .45rem; }
.filters-toggle[aria-expanded="true"] .button-caret .nav-icon { rotate: 180deg; }
.filters-toggle .button-caret .nav-icon { transition: rotate .15s ease; }
.live-icon { display: inline-flex; }
.button.live .live-icon.pause, .button.live[aria-pressed="true"] .live-icon.play { display: none; }
.button.live[aria-pressed="true"] .live-icon.pause { display: inline-flex; }
.query-log-filters { border-bottom: 1px solid var(--border); background: color-mix(in oklch, var(--muted) 60%, transparent); }
.query-log-filters > summary { display: flex; min-height: 2.75rem; align-items: center; gap: .45rem; cursor: pointer; padding: 0 1.25rem; color: var(--muted-foreground); font-size: .78rem; font-weight: 600; list-style: none; }
.query-log-filters > summary::-webkit-details-marker { display: none; }
.query-log-filters > summary:hover { color: var(--foreground); }
.query-log-filters > summary .nav-icon { width: .9rem; height: .9rem; }
.filter-count { display: grid; min-width: 1.25rem; height: 1.25rem; place-items: center; border-radius: 999px; background: var(--primary); color: var(--primary-foreground); font-size: .65rem; }
.query-log-filters form { display: grid; gap: 1rem; border-top: 1px solid var(--border); padding: 1rem 1.25rem; }
.isotope-query-filters form { border-top: 0; padding: 1.1rem 1.25rem; }
.query-filter-grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: .75rem; }
.query-filter-grid label { display: grid; min-width: 0; gap: .4rem; color: var(--muted-foreground); font-size: .7rem; font-weight: 600; }
/* A date input reports an intrinsic width wider than its column, so it has
   to be told to shrink like the text fields beside it. */
.query-filter-grid input, .query-filter-grid select { min-width: 0; width: 100%; }
/* A date reads as one value, so its field is given room for the whole thing. */
.query-filter-wide { grid-column: span 2; }
/* The window filter opens the same calendar the dashboard's custom range uses,
   rather than two bare datetime-local inputs. */
.query-filter-range { position: relative; display: grid; min-width: 0; gap: .4rem; color: var(--muted-foreground); font-size: .7rem; font-weight: 600; }
.range-trigger { display: flex; height: 2.25rem; min-width: 0; align-items: center; gap: .45rem; border: 1px solid var(--input, var(--border)); border-radius: var(--radius); background: var(--background); padding: 0 .65rem; color: var(--foreground); font-size: .8rem; font-weight: 400; text-align: left; }
.range-trigger:hover { border-color: color-mix(in oklch, var(--primary) 40%, var(--border)); }
.range-trigger .nav-icon { width: .9rem; height: .9rem; flex: none; color: var(--muted-foreground); }
.range-trigger > span { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-variant-numeric: tabular-nums; }
.range-trigger.picker-open { border-color: var(--primary); }
.query-range-popover { top: calc(100% + .35rem); left: 0; }
.range-picker-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .5rem; }
.range-picker-actions .button { width: 100%; height: 2rem; min-height: 2rem; }

.query-filter-actions { display: flex; justify-content: flex-end; gap: .5rem; }
.query-filter-actions .button { display: inline-flex; align-items: center; justify-content: center; gap: .4rem; }
.query-filter-actions .nav-icon { width: .9rem; height: .9rem; }
.log-search-bar { display: flex; align-items: center; gap: .75rem; border-bottom: 1px solid var(--border); padding: .65rem 1.25rem; }
.log-search-bar .search-field { position: relative; min-width: 12rem; flex: 1; }
.log-search-bar input { height: 2rem; }
.log-result-actions { display: flex; gap: .4rem; }
.log-result-actions .icon-button { width: 2rem; height: 2rem; flex-basis: 2rem; }
.log-result-actions .nav-icon { width: .9rem; height: .9rem; }
/* The query table stops growing where the runtime viewer stops, so the two
   tabs stand the same height instead of one of them scrolling the page. */
.query-log-table-scroll { max-height: min(38rem, calc(100vh - 22rem)); min-height: 18rem; overflow: auto; }
.isotope-query-log-table thead { position: sticky; top: 0; z-index: 2; background: color-mix(in oklch, var(--muted) 82%, transparent); backdrop-filter: blur(8px); }
.isotope-query-log-table th { text-transform: none; letter-spacing: 0; }
.isotope-query-log-table td { height: auto; min-height: 3.5rem; padding-block: .65rem; }
.isotope-query-log-table time, .isotope-query-log-table code, .isotope-query-log-table .query-name, .query-protocol { font: .72rem ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace; }
.isotope-query-log-table .query-name { max-width: 15rem; }
.query-type-pill { border: 0; border-radius: .3rem; background: var(--muted); color: var(--foreground); font-weight: 600; }
.isotope-query-log-table .source-pill, .isotope-query-log-table .rcode { border: 0; border-radius: .3rem; padding: .22rem .5rem; font-size: .68rem; font-weight: 600; }
.isotope-query-log-table .source-cache { background: rgb(59 130 246 / .12); color: #3b82f6; }
.isotope-query-log-table .source-upstream { background: rgb(34 197 94 / .12); color: #22c55e; }
.isotope-query-log-table .source-authoritative { background: rgb(168 85 247 / .12); color: #a855f7; }
.isotope-query-log-table .source-blocked, .isotope-query-log-table .source-error { background: rgb(239 68 68 / .12); color: #ef4444; }
.query-answers { min-width: 12rem; max-width: 30rem; }
.query-answers > div { display: flex; flex-wrap: wrap; gap: .25rem; }
.query-answers > div > span { display: inline-block; max-width: 20rem; overflow: hidden; border-radius: .3rem; background: color-mix(in oklch, var(--muted) 60%, transparent); padding: .18rem .4rem; font: .68rem ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace; text-overflow: ellipsis; white-space: nowrap; }
/* Folded copies of the columns the narrow layout drops: hidden while the full
   table fits, so only one copy is ever in the page. */
.query-fold, .query-fold-tight { display: none; }
.query-name-text { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.query-row-actions { width: 4rem; }
.query-row-actions form { display: inline-flex; }
.query-policy-action { display: inline-grid; width: 1.75rem; height: 1.75rem; place-items: center; border: 0; border-radius: .35rem; background: transparent; color: var(--muted-foreground); }
.query-policy-action { opacity: 0; transition: opacity 140ms, color 140ms, background 140ms; }
.isotope-query-log-table tr:hover .query-policy-action, .query-row-actions:focus-within .query-policy-action { opacity: 1; }
.query-policy-action:hover { background: var(--accent); }
.query-policy-action.block:hover { color: #ef4444; }
.query-policy-action.allow:hover { color: #10b981; }
.query-policy-action .nav-icon { width: .85rem; height: .85rem; }
.query-log-table.full th, .query-log-table.full td { padding-inline: 1.25rem; }
.query-log-table.full td { height: 3.25rem; }
.query-log-table.full code { font-size: .75rem; }
.query-log-table .source-cache { color: #f59e0b; }
.query-log-table .source-upstream { color: #70ad47; }
.query-log-table .source-authoritative { color: #559bd4; }
.query-log-table .source-blocked, .query-log-table .source-error { color: #ef4444; }
.duration-cell { font-variant-numeric: tabular-nums; }
.logs-pagination { min-height: 3.75rem; justify-content: flex-end; gap: 1rem; border-top: 1px solid var(--border); padding: .6rem 1.25rem; color: var(--muted-foreground); font-size: .72rem; }
.logs-pagination > div { gap: .5rem; }
.logs-pagination select { width: 4.5rem; height: 2rem; }
.logs-pagination nav { gap: .3rem; }
.logs-pagination .icon-button { width: 2rem; height: 2rem; flex-basis: 2rem; }
.logs-pagination .icon-button:disabled { cursor: not-allowed; opacity: .35; }

@media (max-width: 980px) {
	.field-grid.four { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.query-filter-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	.runtime-log-line { grid-template-columns: 11.75rem 3.5rem minmax(0, 1fr); }
	.runtime-log-attributes { grid-column: 3; }
}

/* The full nine columns need about 1220px of table, which only a very wide
   window can give once the sidebar takes its share. Below that the client, the
   protocol and the answers fold into the cells they belong to rather than
   pushing the table into a sideways scroll. */
@media (max-width: 1560px) {
	.query-col-client, .query-col-protocol, .query-col-answer { display: none; }
	.query-fold-meta { display: flex; flex-wrap: wrap; align-items: center; gap: .3rem .5rem; margin-top: .15rem; color: var(--muted-foreground); font: .66rem ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace; }
	.query-fold-meta code { color: inherit; font: inherit; }
	.query-fold-answers { display: block; min-width: 0; max-width: none; margin-top: .3rem; }
	/* A row with no answer says so in the Answer column; folded under the
	   domain the same dash would just repeat itself down the table. */
	.query-fold-answers .muted-cell { display: none; }
	.query-log-table.full th, .query-log-table.full td { padding-inline: .85rem; }
	.isotope-query-log-table .query-name { max-width: 16rem; overflow: visible; white-space: normal; }
	.query-time { white-space: nowrap; }
}

/* Narrower still: the domain gives up width before the table gives up a column. */
@media (max-width: 1150px) {
	.query-log-table.full th, .query-log-table.full td { padding-inline: .6rem; }
	.isotope-query-log-table .query-name { max-width: 11rem; }
}

/* Tablet width leaves room for the domain, the status and little else, so the
   type and the response join the client and the protocol under the timestamp. */
@media (max-width: 960px) {
	.query-col-type, .query-col-source { display: none; }
	.query-fold-tight { display: inline; }
	.isotope-query-log-table .query-name { max-width: 9rem; }
	/* The heading and its controls stop sharing a line here rather than at the
	   phone breakpoint: on one line this narrow the buttons sit on top of the
	   entry count. */
	.logs-toolbar { align-items: stretch; flex-direction: column; }
	.query-logs-toolbar > div:first-child { align-items: stretch; flex-direction: column; }
	/* The runtime line drops to two columns at the same width, so the attribute
	   text stops being squeezed into a hand's width of column. */
	.runtime-log-line { grid-template-columns: 1fr 3.5rem; gap: .25rem .75rem; padding-block: .4rem; }
	.runtime-log-message, .runtime-log-attributes { grid-column: 1 / -1; }
}

/* On a phone the row actions are already out of reach: they only appear on
   hover, and the width they hold is the last thing keeping the table from
   fitting. */
@media (max-width: 640px) {
	.query-col-actions, .query-row-actions { display: none; }
	.isotope-query-log-table .query-name { max-width: 7rem; }
}

@media (max-width: 700px) {
  .admin-tab-list { display: grid; width: 100%; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .25rem; }
  .admin-tab-list .isotope-tab { width: 100%; }
  .desktop-only, .admin-desktop-table { display: none; }
  .admin-mobile-list { display: block; }
  .isotope-data-header { min-height: 3.75rem; }
	.field-grid.two, .field-grid.three, .field-grid.four, .protocol-grid, .protocol-grid.three, .certificate-mode-control { grid-template-columns: 1fr; }
	.certificate-renew-button { width: 100%; }
	.certificate-detail-grid { grid-template-columns: 1fr; }
  .settings-source-card > header, .isotope-card-content { padding-inline: 1rem; }
	.isotope-form-dialog { width: calc(100% - 1rem); }
	.group-edit-dialog { width: calc(100% - 1rem); max-height: calc(100vh - 1rem); }
	.permission-surface-grid { grid-template-columns: 1fr; }
	.user-edit-dialog { width: calc(100% - 1rem); max-height: calc(100vh - 1rem); }
	.user-edit-dialog > .dialog-header { padding-inline: 1rem; }
	.dialog-tab-list { margin-inline: 1rem; }
	.dialog-tab-panel { padding-inline: 1rem; }
	.user-edit-dialog .field-grid.two { grid-template-columns: 1fr; }
	.user-dialog-footer { align-items: stretch; flex-direction: column; padding-inline: 1rem; }
	.user-danger-actions { width: 100%; }
	.user-danger-actions form, .user-danger-actions .button { flex: 1; }
	.user-footer-actions { width: 100%; }
	.user-footer-actions .button { flex: 1; }
	.settings-blocking-actions { align-items: stretch; flex-direction: column-reverse; }
	.settings-blocking-actions .button { justify-content: center; }
	.logs-toolbar { align-items: stretch; flex-direction: column; }
	.logs-toolbar-actions { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
	.runtime-level-field { width: 100%; }
	.query-filter-grid { grid-template-columns: 1fr; }
	.query-filter-wide { grid-column: auto; }
	.query-logs-toolbar > div:first-child { align-items: stretch; flex-direction: column; }
	.query-log-table-scroll { max-height: none; }
	.logs-pagination { align-items: flex-end; flex-wrap: wrap; justify-content: space-between; }
}

/* Apps */
.wizard-progress { grid-template-columns: auto minmax(1rem, 1fr) auto minmax(1rem, 1fr) auto minmax(1rem, 1fr) auto; }
.status-badge.success { background: rgb(34 197 94 / .13); color: #22c55e; }
.status-badge.danger { background: color-mix(in srgb, var(--destructive) 14%, transparent); color: var(--destructive); }
.integration-card > header { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; border-bottom: 1px solid var(--border); padding: 1.25rem 1.5rem; }
.integration-card-identity { display: flex; align-items: flex-start; gap: .85rem; }
.integration-card-identity p { margin: .2rem 0 0; color: var(--muted-foreground); font-size: .75rem; }
.integration-card-glyph { display: grid; width: 2.5rem; height: 2.5rem; flex: 0 0 2.5rem; place-items: center; border-radius: .6rem; background: rgb(59 130 246 / .12); color: #3b82f6; }
.integration-card-glyph .nav-icon { width: 1.2rem; height: 1.2rem; }
.integration-card-body { display: grid; gap: 1.25rem; padding: 1.25rem 1.5rem; }
.integration-card-empty { justify-items: start; }
.integration-card-empty p { max-width: 46rem; margin: 0; color: var(--muted-foreground); font-size: .8125rem; line-height: 1.55; }
.integration-card-actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .5rem; }
.integration-card-actions-primary { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; }
/* Outline destructive: present but not shouting next to the primary action. */
.button.outline.destructive { border-color: color-mix(in srgb, var(--destructive) 55%, var(--border)); background: var(--background); color: var(--destructive); }
.button.outline.destructive:hover { background: color-mix(in srgb, var(--destructive) 12%, transparent); opacity: 1; }
.integration-card-actions .button, .integration-card-actions-primary .button, .integration-card-empty .button { display: inline-flex; align-items: center; gap: .45rem; }
/* The global input rule stretches every control to the full field width, which
   turns a checkbox or radio into a large square. Restore natural sizing. */
.integrations-page input[type="checkbox"], .integrations-page input[type="radio"],
.unifi-wizard-dialog input[type="checkbox"], .unifi-wizard-dialog input[type="radio"] {
	width: 1rem; height: 1rem; flex: 0 0 1rem; padding: 0; accent-color: #3b82f6;
}
.integration-card-actions .button .nav-icon, .integration-card-actions-primary .button .nav-icon, .integration-card-empty .button .nav-icon { width: 1rem; height: 1rem; }
#unifi-status { display: grid; gap: .6rem; }
.unifi-status-line { display: flex; flex-wrap: wrap; align-items: center; gap: .3rem; margin: 0; color: var(--muted-foreground); font-size: .72rem; }
.button.is-syncing .icon-refresh, .unifi-status-line .icon-refresh { animation: blocking-refresh-spin .8s linear infinite; }
.button.is-syncing { cursor: progress; }
.integration-card-actions .button:disabled { cursor: not-allowed; opacity: .55; }
.unifi-progress { height: .3rem; }
.unifi-status-line .nav-icon { width: .85rem; height: .85rem; }
.unifi-status { display: flex; gap: .7rem; border: 1px solid var(--border); border-radius: .5rem; background: var(--muted); padding: .8rem; }
.unifi-status.error { border-color: color-mix(in srgb, var(--destructive) 45%, var(--border)); background: color-mix(in srgb, var(--destructive) 8%, transparent); }
.unifi-status.error > .nav-icon { color: var(--destructive); }
.unifi-status > .nav-icon { width: 1rem; height: 1rem; flex: 0 0 1rem; margin-top: .1rem; }
.unifi-status > div { display: grid; gap: .2rem; }
.unifi-status strong { font-size: .75rem; }
.unifi-status span { color: var(--muted-foreground); font-size: .7rem; line-height: 1.45; }
.unifi-connection dl { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0 1rem; }
.unifi-connection dl > div { border-top: 0; padding-top: 0; }
.unifi-auth-modes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .75rem; }
.choice-tile { display: flex; align-items: center; gap: .6rem; border: 1px solid var(--border); border-radius: .55rem; padding: .6rem .8rem; cursor: pointer; }
.choice-tile.active { border-color: #3b82f6; background: rgb(59 130 246 / .08); }
.choice-tile > span { display: grid; gap: .2rem; }
.choice-tile strong { font-size: .8rem; }
.choice-tile small { color: var(--muted-foreground); font-size: .68rem; line-height: 1.4; }
.field-control.checkbox { align-content: start; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: .5rem .6rem; }
.field-control.checkbox > input { grid-row: 1; }
.field-control.checkbox > span { grid-column: 2; font-size: .8125rem; }
.field-control.checkbox > small { grid-column: 1 / -1; }
.unifi-zone-rows { display: grid; gap: .75rem; }
.unifi-zone-row { display: grid; gap: .75rem; overflow: hidden; border: 1px solid var(--border); border-radius: .55rem; }
.unifi-zone-row > header {
	display: flex; align-items: baseline; justify-content: space-between; gap: .75rem;
	border-bottom: 1px solid var(--border); background: color-mix(in oklch, var(--muted) 55%, transparent);
	padding: .55rem .9rem;
}
.unifi-zone-row > header strong { font-size: .82rem; }
.unifi-zone-row > header code { font-size: .7rem; }
.unifi-zone-fields { display: grid; align-items: start; gap: .75rem 1rem; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr) 5.5rem; padding: 0 .9rem; }
.unifi-zone-row > .field-control.checkbox { padding: 0 .9rem .85rem; }
.unifi-zone-preview { min-height: 1rem; color: var(--muted-foreground); font-size: .7rem; }
.unifi-zone-preview code { color: var(--foreground); font-size: .7rem; }
.unifi-network-table td:first-child, .unifi-network-table th:first-child { width: 3.5rem; }
.unifi-network-table td { height: 3rem; }
.unifi-network-table label { cursor: pointer; font-weight: 600; }
.unifi-plan-records > summary, .unifi-skipped > summary { cursor: pointer; font-size: .78rem; font-weight: 600; }
.unifi-plan-records .admin-desktop-table { max-height: 18rem; overflow-y: auto; margin-top: .6rem; }
.unifi-skipped ul { margin: .5rem 0 0; padding-left: 1.1rem; color: var(--muted-foreground); font-size: .72rem; line-height: 1.6; }
.unifi-wizard-dialog { width: min(56rem, calc(100% - 3rem)); }
/* Only the step panel scrolls. Without bounding the form the dialog itself
   grows past its max-height and drags the footer off screen. */
.unifi-wizard-dialog[open] { grid-template-rows: auto minmax(0, 1fr); }
.unifi-wizard-dialog > form { display: grid; min-height: 0; grid-template-rows: minmax(0, 1fr) auto; }
.unifi-wizard-dialog .isotope-dialog-body { min-height: 0; }
.unifi-wizard-dialog .wizard-footer {
	margin: 0 -1.5rem -1.5rem; border-top: 1px solid var(--border);
	background: var(--background); padding: .9rem 1.5rem;
}
/* The step indicator stays put while the panel scrolls, so the operator can see
   where they are and jump back without scrolling up first. */
/* A negative top margin would leave an uncovered band that content scrolls
   through, so the bar supplies the panel's top padding instead. */
.unifi-wizard-dialog .isotope-dialog-body { padding-top: 0; }
.unifi-wizard-dialog .wizard-progress {
	position: sticky; top: 0; z-index: 3;
	margin-inline: -1.5rem; border-bottom: 1px solid var(--border);
	background: var(--background); padding: 1.15rem 1.5rem .7rem;
}
.wizard-progress > button {
	display: grid; width: auto; height: auto; justify-items: center; gap: .3rem;
	border: 0; border-radius: .35rem; background: none; padding: 0;
	color: var(--muted-foreground); cursor: pointer; font: inherit;
}
.wizard-progress > button > span {
	display: grid; width: 1.7rem; height: 1.7rem; place-items: center;
	border: 1px solid var(--border); border-radius: 50%; background: var(--background);
	font-size: .66rem; font-weight: 700;
}
.wizard-progress > button > small { font-size: .64rem; font-weight: 600; }
.wizard-progress > button.complete { color: #22c55e; }
.wizard-progress > button.complete > span { border-color: #22c55e; background: rgb(34 197 94 / .12); }
.wizard-progress > button.complete + i { background: #22c55e; }
.wizard-progress > button:hover > small { text-decoration: underline; }
.wizard-progress > button:focus-visible { outline: 2px solid var(--ring); outline-offset: 3px; }
/* The connection step has three sections; full-size headings push the last one
   below the fold, so it uses a single-line variant. */
.wizard-panel.compact { gap: .45rem; }
/* Headings carry a divider to separate sections, but the first one already has
   the sticky step bar's border above it. */
.wizard-panel > .wizard-heading:first-child { border-top: 0; padding-top: 0; }
.wizard-heading.compact { align-items: center; gap: .55rem; padding-top: .55rem; }
.wizard-heading.compact > span { width: 1.5rem; height: 1.5rem; flex-basis: 1.5rem; border-radius: .4rem; }
.wizard-heading.compact > span .nav-icon { width: .85rem; height: .85rem; }
.wizard-heading.compact > div { display: flex; align-items: baseline; flex-wrap: wrap; gap: .5rem; }
.wizard-heading.compact strong { font-size: .82rem; }
.wizard-heading.compact small { font-size: .68rem; }
.wizard-footer { align-items: center; justify-content: space-between; }
.wizard-footer-advance { display: flex; align-items: center; gap: .5rem; }
.wizard-footer .button { display: inline-flex; align-items: center; gap: .45rem; }
.wizard-footer .button .nav-icon { width: 1rem; height: 1rem; }
/* display:contents keeps the form's grid rows (body, footer) intact now that the
   body is wrapped, while the disabled attribute still reaches every control. */
.isotope-record-fieldset { display: contents; margin: 0; border: 0; padding: 0; }
.isotope-record-fieldset > * { min-width: 0; }
.isotope-record-fieldset:disabled input, .isotope-record-fieldset:disabled select, .isotope-record-fieldset:disabled textarea { cursor: default; opacity: .85; }
.isotope-record-fieldset:disabled .switch { opacity: .6; }
.record-readonly-footer { align-items: center; justify-content: space-between; gap: 1rem; }
.record-readonly-note { display: flex; align-items: center; gap: .45rem; color: var(--muted-foreground); font-size: .7rem; line-height: 1.4; }
.record-readonly-note .nav-icon { width: .9rem; height: .9rem; flex: 0 0 .9rem; color: #3b82f6; }
.record-owner-cell { display: flex; min-width: 0; align-items: center; gap: .5rem; }
.record-owner-cell > .zone-copyable { min-width: 0; }
.record-source-badge { display: inline-flex; flex: 0 0 auto; align-items: center; border-radius: 999px; background: rgb(59 130 246 / .13); padding: .1rem .45rem; color: #3b82f6; font-size: .6rem; font-weight: 600; line-height: 1.3; }
.record-source-badge.alias { background: #ede9fe; color: #5b21b6; }
.dark .record-source-badge.alias { background: #4c1d95; color: #ddd6fe; }

@media (max-width: 700px) {
	.unifi-connection dl { grid-template-columns: 1fr; }
	.unifi-connection dl > div { border-top: 1px solid var(--border); padding: .6rem 0; }
	.unifi-connection dl > div:first-child { border-top: 0; padding-top: 0; }
	.unifi-auth-modes { grid-template-columns: 1fr; }
	.unifi-zone-fields { grid-template-columns: 1fr; }
	.unifi-wizard-dialog { width: calc(100% - 1rem); }
	.unifi-wizard-dialog .wizard-progress { margin-inline: -1rem; padding-inline: 1rem; }
	.unifi-wizard-dialog .wizard-footer { margin: 0 -1rem -1rem; padding-inline: 1rem; }
	.wizard-footer { align-items: stretch; flex-direction: column-reverse; }
	.wizard-footer-advance { flex-direction: column-reverse; }
	.wizard-footer .button { justify-content: center; }
	.integration-card-actions { align-items: stretch; flex-direction: column-reverse; }
	.integration-card-actions-primary { flex-direction: column; }
	.integration-card-actions .button, .integration-card-actions form { width: 100%; justify-content: center; }
	.wizard-progress { grid-template-columns: auto 1fr auto 1fr auto 1fr auto; }
}

/* Backup and restore */
.backup-form { display: grid; gap: 1rem; }
.backup-actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: .65rem; }
.backup-actions .button { display: inline-flex; align-items: center; justify-content: center; gap: .45rem; }
.backup-actions .button .nav-icon { width: 1rem; height: 1rem; flex: 0 0 1rem; }
.backup-download { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem; border: 1px solid var(--border); border-radius: .5rem; background: var(--muted); padding: .75rem 1rem; }
.backup-download-file { display: flex; min-width: 0; align-items: center; gap: .7rem; }
.backup-download-file > .nav-icon { width: 1.1rem; height: 1.1rem; flex: 0 0 1.1rem; color: var(--muted-foreground); }
.backup-download-file > div { display: grid; min-width: 0; gap: .15rem; }
.backup-download-file strong { overflow: hidden; font-size: .8125rem; text-overflow: ellipsis; white-space: nowrap; }
.backup-download-file span { color: var(--muted-foreground); font-size: .72rem; }
.backup-download .button { display: inline-flex; flex: 0 0 auto; align-items: center; gap: .45rem; }
.backup-download .button .nav-icon { width: 1rem; height: 1rem; flex: 0 0 1rem; }
.backup-progress { display: grid; gap: .5rem; border: 1px solid var(--border); border-radius: .5rem; background: var(--muted); padding: .9rem 1rem; }
.backup-progress-heading { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; }
.backup-progress-heading strong { font-size: .8125rem; }
.backup-progress-heading span { color: var(--muted-foreground); font-size: .75rem; font-variant-numeric: tabular-nums; }
.backup-progress-track { overflow: hidden; height: .375rem; border-radius: 999px; background: color-mix(in srgb, var(--foreground) 12%, transparent); }
.backup-progress-fill { width: 0; height: 100%; border-radius: 999px; background: var(--primary); transition: width 220ms ease; }
.backup-progress-meta { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; color: var(--muted-foreground); font-size: .72rem; }
.backup-progress-meta span:last-child { flex: 0 0 auto; font-variant-numeric: tabular-nums; }
.backup-upload[hidden] { display: none; }
@media (max-width: 640px) {
  .backup-actions { justify-content: stretch; }
  .backup-actions .button { flex: 1 1 auto; }
  .backup-download .button { width: 100%; }
}

/* Restore is not a routine action, so its card says so before it is used. */
.settings-danger-card { border-color: color-mix(in srgb, var(--destructive) 32%, var(--border)); }
.settings-danger-card > header > h2 .nav-icon { color: var(--destructive); }
.backup-inventory { display: grid; gap: .3rem; margin: 0 0 .6rem; padding-left: 1.1rem; color: var(--muted-foreground); font-size: .72rem; line-height: 1.45; }
.backup-panel .settings-advanced > small { display: block; color: var(--muted-foreground); font-size: .7rem; line-height: 1.45; }
.field-note { color: var(--destructive); font-size: .7rem; }
.field-note[hidden] { display: none; }
.field-control input[aria-invalid="true"] { border-color: var(--destructive); }
.backup-archive-preview { display: flex; align-items: center; gap: .7rem; border: 1px solid var(--border); border-radius: .5rem; background: var(--muted); padding: .7rem .9rem; }
.backup-archive-preview[hidden] { display: none; }
.backup-archive-preview > div { display: grid; min-width: 0; gap: .15rem; }
.backup-archive-preview strong { font-size: .78rem; }
.backup-archive-preview span { color: var(--muted-foreground); font-size: .72rem; }
.backup-archive-icon .nav-icon { width: 1.05rem; height: 1.05rem; color: var(--muted-foreground); }
.backup-archive-preview.is-invalid { border-color: color-mix(in srgb, var(--destructive) 45%, var(--border)); }
.backup-archive-preview.is-invalid .backup-archive-icon .nav-icon, .backup-archive-preview.is-invalid strong { color: var(--destructive); }

/* TSIG keys. A row states the algorithm, whether the vault holds a secret, and
   which zones depend on the key, because removing one breaks every transfer
   and update it guards. */
.tsig-key-list { overflow: hidden; border: 1px solid var(--border); border-radius: var(--radius); }
.tsig-key-row { display: grid; grid-template-columns: 1.5rem minmax(0, 1fr) auto 2rem; align-items: center; gap: .75rem; border-top: 1px solid var(--border); padding: .75rem 1rem; }
.tsig-key-row:first-child { border-top: 0; }
.tsig-key-row:hover { background: color-mix(in oklch, var(--muted) 45%, transparent); }
.tsig-key-icon { display: grid; place-items: center; color: var(--muted-foreground); }
.tsig-key-icon .nav-icon { width: 1rem; height: 1rem; }
.tsig-key-row > div { display: grid; min-width: 0; gap: .15rem; }
.tsig-key-row strong { font: 500 .875rem ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace; overflow-wrap: anywhere; }
.tsig-key-row small { color: var(--muted-foreground); font-size: .7rem; overflow-wrap: anywhere; }
.tsig-key-warning { display: flex; align-items: center; gap: .3rem; color: var(--destructive); }
.tsig-key-warning .nav-icon { width: .85rem; height: .85rem; flex: 0 0 auto; }
.tsig-empty { display: grid; place-items: center; align-content: center; gap: .35rem; padding: 2.5rem 1rem; color: var(--muted-foreground); text-align: center; }
.tsig-empty > .nav-icon { width: 1.6rem; height: 1.6rem; margin-bottom: .3rem; }
.tsig-empty h3 { margin: 0; color: var(--foreground); font-size: .9rem; }
.tsig-empty p { margin: 0; max-width: 26rem; font-size: .78rem; }
.settings-action-card > header { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; }
.settings-action-card > header > div { min-width: 0; }
.settings-action-card > header > .button { flex: 0 0 auto; }
@media (max-width: 640px) {
  .tsig-key-row { grid-template-columns: 1.5rem minmax(0, 1fr) 2rem; padding-inline: .75rem; }
  .tsig-key-row .button.compact { grid-column: 2 / -1; justify-self: start; }
}

/* htmx injects these two rules as an inline <style> element on load, which the
   console's strict style-src CSP blocks. Injection is turned off via the
   htmx-config meta tag, so the rules are carried here instead. */
.htmx-indicator { opacity: 0; visibility: hidden; }
.htmx-request .htmx-indicator, .htmx-request.htmx-indicator { opacity: 1; visibility: visible; transition: opacity 200ms ease-in; }