@charset "UTF-8";
:root {
  --font-sans:
    Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-mono: "JetBrains Mono", "SFMono-Regular", Consolas, "Liberation Mono", monospace;
  /* Fluid type scale. Keep rem bounds so browser/OS text scaling remains effective. */
  --text-2xs: clamp(0.6875rem, calc(0.66rem + 0.08vw), 0.75rem);
  --text-xs: clamp(0.75rem, calc(0.72rem + 0.12vw), 0.8125rem);
  --text-sm: clamp(0.8125rem, calc(0.78rem + 0.16vw), 0.9375rem);
  --text-base: clamp(0.9375rem, calc(0.9rem + 0.18vw), 1.0625rem);
  --text-lg: clamp(1.0625rem, calc(1rem + 0.3vw), 1.25rem);
  --text-xl: clamp(1.25rem, calc(1.12rem + 0.55vw), 1.625rem);
  --text-2xl: clamp(1.5rem, calc(1.28rem + 0.9vw), 2.125rem);
  --text-3xl: clamp(2rem, calc(1.55rem + 1.6vw), 3rem);
  --text-4xl: clamp(2.25rem, calc(1.7rem + 2vw), 3.5rem);
  --text-display: clamp(2.5rem, calc(1.8rem + 2.6vw), 4.5rem);
  --leading-tight: 1.08;
  --leading-snug: 1.3;
  --leading-normal: 1.5;
  --leading-relaxed: 1.65;
  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --weight-bold: 700;
  --weight-extrabold: 800;
  --tracking-tight: -0.025em;
  --tracking-normal: 0;
  --tracking-wide: 0.08em;
  /* Primitive palettes. Screens/components should prefer semantic aliases below. */
  --color-teal-50: #f0fdfa;
  --color-teal-100: #ccfbf1;
  --color-teal-200: #99f6e4;
  --color-teal-300: #5eead4;
  --color-teal-400: #2dd4bf;
  --color-teal-500: #14b8a6;
  --color-teal-600: #0d9488;
  --color-teal-700: #0f766e;
  --color-teal-800: #115e59;
  --color-teal-900: #134e4a;
  --color-teal-950: #042f2e;
  --color-neutral-0: #ffffff;
  --color-neutral-50: #fafafa;
  --color-neutral-100: #f4f4f5;
  --color-neutral-200: #e4e4e7;
  --color-neutral-300: #d4d4d8;
  --color-neutral-400: #a1a1aa;
  --color-neutral-500: #71717a;
  --color-neutral-600: #52525b;
  --color-neutral-700: #3f3f46;
  --color-neutral-800: #27272a;
  --color-neutral-900: #18181b;
  --color-neutral-950: #09090b;
  --color-neutral-1000: #000000;
  --color-navy-50: #f8fafc;
  --color-navy-100: #f1f5f9;
  --color-navy-200: #e2e8f0;
  --color-navy-300: #cbd5e1;
  --color-navy-400: #94a3b8;
  --color-navy-500: #64748b;
  --color-navy-600: #475569;
  --color-navy-700: #334155;
  --color-navy-800: #1e293b;
  --color-navy-900: #0f172a;
  --color-navy-950: #020617;
  --color-blue-50: #eff6ff;
  --color-blue-100: #dbeafe;
  --color-blue-200: #bfdbfe;
  --color-blue-300: #93c5fd;
  --color-blue-400: #60a5fa;
  --color-blue-500: #3b82f6;
  --color-blue-600: #2563eb;
  --color-blue-700: #1d4ed8;
  --color-blue-800: #1e40af;
  --color-blue-900: #1e3a8a;
  --color-blue-950: #172554;
  --color-green-50: #f0fdf4;
  --color-green-100: #dcfce7;
  --color-green-200: #bbf7d0;
  --color-green-300: #86efac;
  --color-green-400: #4ade80;
  --color-green-500: #22c55e;
  --color-green-600: #16a34a;
  --color-green-700: #15803d;
  --color-green-800: #166534;
  --color-green-900: #14532d;
  --color-green-950: #052e16;
  --color-amber-50: #fffbeb;
  --color-amber-100: #fef3c7;
  --color-amber-200: #fde68a;
  --color-amber-300: #fcd34d;
  --color-amber-400: #fbbf24;
  --color-amber-500: #f59e0b;
  --color-amber-600: #d97706;
  --color-amber-700: #b45309;
  --color-amber-800: #92400e;
  --color-amber-900: #78350f;
  --color-amber-950: #451a03;
  --color-red-50: #fef2f2;
  --color-red-100: #fee2e2;
  --color-red-200: #fecaca;
  --color-red-300: #fca5a5;
  --color-red-400: #f87171;
  --color-red-500: #ef4444;
  --color-red-600: #dc2626;
  --color-red-700: #b91c1c;
  --color-red-800: #991b1b;
  --color-red-900: #7f1d1d;
  --color-red-950: #450a0a;
  /* Brand and action semantics. Keep existing aliases stable while the UI migrates. */
  --color-primary: var(--color-teal-600);
  --color-primary-hover: var(--color-teal-700);
  --color-primary-active: var(--color-teal-800);
  --color-primary-soft-subtle: rgba(13, 148, 136, 0.07);
  --color-primary-subtle: rgba(13, 148, 136, 0.08);
  --color-primary-soft-medium: rgba(13, 148, 136, 0.1);
  --color-primary-soft: rgba(13, 148, 136, 0.12);
  --color-primary-soft-strong: rgba(13, 148, 136, 0.14);
  --color-primary-soft-hover: rgba(13, 148, 136, 0.18);
  --color-primary-wash: rgba(240, 253, 250, 0.58);
  --color-primary-tint: rgba(240, 253, 250, 0.95);
  --color-primary-tint-strong: rgba(240, 253, 250, 0.98);
  --color-primary-border-soft: rgba(13, 148, 136, 0.18);
  --color-primary-border: rgba(13, 148, 136, 0.24);
  --color-primary-border-medium: rgba(13, 148, 136, 0.28);
  --color-primary-border-hover: rgba(13, 148, 136, 0.35);
  --color-primary-border-strong: rgba(13, 148, 136, 0.4);
  --color-primary-border-emphasis: rgba(13, 148, 136, 0.55);
  --color-primary-on: var(--color-neutral-0);
  --color-secondary: var(--color-navy-700);
  --color-secondary-hover: var(--color-navy-800);
  --color-secondary-active: var(--color-navy-900);
  --color-secondary-soft: var(--color-navy-100);
  --color-secondary-border: var(--color-navy-200);
  --color-secondary-on: var(--color-neutral-0);
  --color-tertiary: var(--color-blue-600);
  --color-tertiary-hover: var(--color-blue-700);
  --color-tertiary-active: var(--color-blue-800);
  --color-tertiary-soft: var(--color-blue-50);
  --color-tertiary-border: var(--color-blue-200);
  --color-tertiary-on: var(--color-neutral-0);
  /* Surface hierarchy. */
  --color-bg: #f8f9fa;
  --color-surface: var(--color-neutral-0);
  --color-surface-subtle: var(--color-neutral-50);
  --color-surface-muted: var(--color-neutral-100);
  --color-surface-raised: var(--color-neutral-0);
  --color-surface-overlay: var(--color-neutral-0);
  --color-surface-brand-soft: #e6f5f3;
  --color-surface-page: #f9fcfd;
  --color-surface-primary-muted: #eef8f7;
  --color-surface-glass-soft: rgba(255, 255, 255, 0.86);
  --color-surface-glass: rgba(255, 255, 255, 0.92);
  --color-surface-glass-card: rgba(255, 255, 255, 0.95);
  --color-surface-glass-strong: rgba(255, 255, 255, 0.96);
  --color-surface-glass-max: rgba(255, 255, 255, 0.98);
  --color-surface-glass-border: rgba(255, 255, 255, 0.9);
  --color-hero-overlay-strong: rgba(248, 252, 252, 0.98);
  --color-hero-overlay-medium: rgba(248, 252, 252, 0.91);
  --color-hero-overlay-soft: rgba(248, 252, 252, 0.5);
  --color-hero-overlay-clear: rgba(248, 252, 252, 0.04);
  --color-image-wash-soft: rgba(248, 252, 252, 0.3);
  --color-image-wash-faint: rgba(255, 255, 255, 0.08);
  --color-image-wash-clear: rgba(255, 255, 255, 0.02);
  --color-page-overlay-strong: rgba(249, 252, 253, 0.98);
  --color-page-overlay-medium: rgba(249, 252, 253, 0.9);
  --color-page-overlay-soft: rgba(249, 252, 253, 0.34);
  --color-page-overlay-clear: rgba(249, 252, 253, 0.08);
  --color-surface-glass-light: rgba(255, 255, 255, 0.62);
  --color-surface-glass-medium: rgba(255, 255, 255, 0.82);
  --color-surface-glass-heavy: rgba(255, 255, 255, 0.9);
  --color-border-glass: rgba(203, 213, 225, 0.78);
  --color-border-glass-strong: rgba(203, 213, 225, 0.92);
  --color-divider-muted: rgba(148, 163, 184, 0.45);
  --color-overlay-shade-soft: rgba(15, 23, 42, 0.02);
  --color-overlay-shade-medium: rgba(15, 23, 42, 0.12);
  --color-surface-chrome: rgba(255, 255, 255, 0.94);
  --color-surface-header: rgba(255, 255, 255, 0.82);
  --color-surface-hover: var(--color-neutral-100);
  --color-surface-active: var(--color-neutral-200);
  --color-surface-disabled: var(--color-neutral-100);
  --color-surface-inverse: var(--color-neutral-900);
  /* Text hierarchy. Compatibility aliases map onto the semantic levels. */
  --color-text-primary: var(--color-neutral-900);
  --color-text-secondary: var(--color-neutral-600);
  --color-text-tertiary: var(--color-neutral-500);
  --color-text-placeholder: var(--color-neutral-400);
  --color-text-disabled: var(--color-neutral-400);
  --color-text-inverse: var(--color-neutral-0);
  --color-text-link: var(--color-teal-700);
  --color-text-link-hover: var(--color-teal-800);
  --color-text: var(--color-text-primary);
  --color-label: var(--color-text-secondary);
  --color-muted: var(--color-text-tertiary);
  --color-ghost: var(--color-neutral-400);
  --color-faint: var(--color-neutral-300);
  /* Border hierarchy. */
  --color-border-soft: var(--color-neutral-100);
  --color-border: var(--color-neutral-200);
  --color-border-strong: var(--color-neutral-300);
  --color-border-cool: #dce4ed;
  --color-border-cool-soft: #dbe4ea;
  --color-border-focus: var(--color-teal-500);
  --color-border-disabled: var(--color-neutral-200);
  --color-border-inverse: var(--color-neutral-700);
  /* Shared control and overlay semantics. */
  --color-control-text: var(--color-navy-700);
  --color-control-icon: var(--color-navy-500);
  --color-control-bg: var(--color-neutral-0);
  --color-control-bg-subtle: var(--color-neutral-50);
  --color-control-bg-hover: var(--color-neutral-100);
  --color-control-border: var(--color-navy-300);
  --color-control-border-hover: rgba(13, 148, 136, 0.45);
  --color-control-border-focus: var(--color-primary);
  --color-backdrop: rgba(15, 23, 42, 0.34);
  --color-backdrop-soft: rgba(15, 23, 42, 0.28);
  --color-shadow-faint: rgba(15, 23, 42, 0.02);
  --color-shadow-subtle: rgba(15, 23, 42, 0.04);
  --color-shadow-soft: rgba(15, 23, 42, 0.05);
  --color-shadow-medium: rgba(15, 23, 42, 0.08);
  --color-shadow-deep: rgba(15, 23, 42, 0.1);
  --color-shadow-strong: rgba(15, 23, 42, 0.12);
  --color-shadow-dialog: rgba(15, 23, 42, 0.22);
  --color-teal-soft: rgba(20, 184, 166, 0.1);
  --color-teal-soft-strong: rgba(20, 184, 166, 0.12);
  --color-teal-wash-soft: rgba(240, 253, 250, 0.46);
  --color-teal-wash-strong: rgba(204, 251, 241, 0.72);
  --color-teal-glass: rgba(240, 253, 250, 0.95);
  /* External provider brand colors. Keep these named instead of embedding raw values in screens. */
  --color-provider-tuya: #ff5a17;
  /* Feedback/status semantics. Legacy base values stay unchanged for compatibility. */
  --color-success: #2e7d32;
  --color-success-hover: var(--color-green-800);
  --color-success-soft: var(--color-green-50);
  --color-success-border: var(--color-green-200);
  --color-success-on: var(--color-neutral-0);
  --color-warning: #f57c00;
  --color-warning-hover: var(--color-amber-700);
  --color-warning-soft: var(--color-amber-50);
  --color-warning-border: var(--color-amber-200);
  --color-warning-on: var(--color-neutral-950);
  --color-error: #c62828;
  --color-error-text: var(--color-red-700);
  --color-error-hover: var(--color-red-800);
  --color-error-soft: var(--color-red-50);
  --color-error-border: var(--color-red-200);
  --color-error-on: var(--color-neutral-0);
  --color-info: #0288d1;
  --color-info-hover: var(--color-blue-700);
  --color-info-soft: var(--color-blue-50);
  --color-info-border: var(--color-blue-200);
  --color-info-on: var(--color-neutral-0);
  /* Interaction states shared across components. */
  --color-focus-ring: rgba(13, 148, 136, 0.18);
  --color-hover-overlay: rgba(15, 23, 42, 0.04);
  --color-active-overlay: rgba(15, 23, 42, 0.08);
  --color-disabled-overlay: rgba(161, 161, 170, 0.18);
  --opacity-disabled: 0.55;
  --color-selection-bg: rgba(13, 148, 136, 0.28);
  --color-selection-text: var(--color-navy-900);
  --radius-sm: 0.5rem;
  --radius-md: 0.75rem;
  --radius-lg: 1.5rem;
  --radius-pill: 999px;
  --focus-ring-width: 0.25rem;
  --shadow-card: 0 1px 2px rgba(24, 24, 27, 0.04);
  --shadow-float: 0 18px 40px rgba(24, 24, 27, 0.08);
  --shadow-primary-control: 0 6px 18px rgba(13, 148, 136, 0.16);
  --shadow-control: 0 0.25rem 0.75rem rgba(15, 23, 42, 0.04);
  --shadow-popover: 0 18px 45px rgba(15, 23, 42, 0.14), 0 4px 12px rgba(15, 23, 42, 0.06);
  --shadow-dialog: 0 24px 70px rgba(15, 23, 42, 0.2);
  --shadow-panel:
    0 1.875rem 4.375rem rgba(24, 24, 27, 0.12), 0 0.5rem 1.5rem rgba(24, 24, 27, 0.06);
  --shadow-page: 0 1.75rem 4rem rgba(15, 23, 42, 0.1), 0 0.5rem 1.5rem rgba(15, 23, 42, 0.05);
  --shadow-subtle: 0 0.35rem 1rem rgba(15, 23, 42, 0.05);
  --shadow-control-raised: 0 0.35rem 0.9rem rgba(15, 23, 42, 0.09);
  --shadow-card-hover: 0 10px 32px rgba(24, 24, 27, 0.05);
  --shadow-status-ring: 0 0 0 4px rgba(13, 148, 136, 0.1);
  --nav-width: 4.5rem;
  --header-height: 4rem;
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --content-max: 90rem;
  --content-gutter: clamp(1rem, 2.5vw, 2rem);
}

@font-face {
  font-family: Inter;
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("/static/fonts/inter-latin-ext-wght-normal.woff2") format("woff2-variations");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: Inter;
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("/static/fonts/inter-latin-wght-normal.woff2") format("woff2-variations");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "JetBrains Mono";
  font-style: normal;
  font-weight: 100 800;
  font-display: swap;
  src: url("/static/fonts/jetbrains-mono-latin-wght-normal.woff2") format("woff2-variations");
}
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  font-family: var(--font-sans);
  font-size: 100%;
  color: var(--color-text);
  background: var(--color-bg);
  line-height: var(--leading-normal);
  -webkit-text-size-adjust: 100%;
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
  text-rendering: optimizeLegibility;
}

body {
  margin: 0;
  min-width: 0;
  min-height: 100vh;
  font-family: var(--font-sans);
  font-size: var(--text-base);
}

img,
svg,
video,
canvas {
  max-width: 100%;
}

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

button,
input,
select,
textarea,
a {
  min-width: 0;
}

.ui-icon {
  display: block;
  flex: 0 0 auto;
  stroke: currentColor;
}

a {
  color: inherit;
  text-decoration: none;
}

a,
button,
[role=button],
[role=tab],
[role=menuitem],
[role=option],
summary {
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  -webkit-user-select: none;
  user-select: none;
}

input,
textarea,
[contenteditable=true] {
  -webkit-user-select: text;
  user-select: text;
}

::selection {
  color: var(--color-selection-text);
  background: var(--color-selection-bg);
}

::-moz-selection {
  color: var(--color-selection-text);
  background: var(--color-selection-bg);
}

:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

.app-shell {
  min-height: 100vh;
}

.nav-rail {
  position: fixed;
  inset: 0 auto 0 0;
  z-index: 50;
  width: var(--nav-width);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background: var(--color-surface-chrome);
  border-right: 1px solid var(--color-border);
}
.nav-rail .nav-brand {
  height: 72px;
  display: grid;
  place-items: center;
  border-bottom: 1px solid var(--color-border-soft);
}
.nav-rail .nav-brand img {
  width: 30px;
  height: auto;
}
.nav-rail .nav-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 14px 12px;
}
.nav-rail .nav-item {
  width: 48px;
  min-height: 48px;
  display: flex;
  align-items: center;
  gap: 12px;
  overflow: hidden;
  border-radius: var(--radius-pill);
  color: var(--color-muted);
  transition: width 180ms ease, background-color 180ms ease, color 180ms ease;
}
.nav-rail .nav-item:hover {
  width: 176px;
  color: var(--color-primary);
  background: var(--color-primary-soft);
  box-shadow: var(--shadow-float);
}
.nav-rail .nav-icon {
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  flex: 0 0 48px;
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  font-weight: var(--weight-extrabold);
}
.nav-rail .nav-label {
  padding-right: 18px;
  white-space: nowrap;
  font-size: var(--text-xs);
  font-weight: var(--weight-extrabold);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
}
.nav-rail .nav-footer {
  margin-top: auto;
  min-height: 56px;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 24px;
  border-top: 1px solid var(--color-border-soft);
  overflow: hidden;
}

.nav-status-dot,
.status-chip__dot {
  width: 7px;
  height: 7px;
  flex: 0 0 7px;
  border-radius: 50%;
  background: var(--color-primary);
  box-shadow: var(--shadow-status-ring);
}

.nav-status-label {
  color: var(--color-muted);
  font-family: var(--font-mono);
  font-size: var(--text-2xs);
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  white-space: nowrap;
}

.app-surface {
  min-height: 100vh;
  padding-left: var(--nav-width);
}

.app-header {
  position: sticky;
  top: 0;
  z-index: 40;
  min-height: var(--header-height);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding: 10px 24px;
  background: var(--color-surface-header);
  border-bottom: 1px solid var(--color-border);
}
.app-header__title {
  display: grid;
  gap: 2px;
}
.app-header__title strong {
  font-size: var(--text-lg);
  font-weight: var(--weight-extrabold);
  letter-spacing: var(--tracking-tight);
}
.app-header__status {
  display: flex;
  align-items: center;
  gap: 10px;
}

.status-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 34px;
  padding: 0 12px;
  color: var(--color-primary);
  background: var(--color-primary-soft-subtle);
  border: 1px solid var(--color-primary-border);
  border-radius: var(--radius-md);
  font-size: var(--text-xs);
  font-weight: var(--weight-extrabold);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
}

.status-meta {
  color: var(--color-muted);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
}

.app-main {
  position: relative;
  z-index: 1;
  max-width: 1180px;
  margin: 0 auto;
  padding: 32px 28px 48px;
}

.mobile-nav {
  display: none;
  align-items: center;
  gap: 6px;
}
.mobile-nav a {
  padding: 7px 10px;
  color: var(--color-muted);
  background: var(--color-surface-subtle);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  font-size: var(--text-2xs);
  font-weight: var(--weight-extrabold);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
}

.ui-text {
  margin: 0;
}
.ui-text--title {
  color: var(--color-text);
  font-size: var(--text-3xl);
  font-weight: var(--weight-extrabold);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
}
.ui-text--heading {
  color: var(--color-text);
  font-size: var(--text-lg);
  font-weight: var(--weight-extrabold);
  line-height: var(--leading-snug);
  letter-spacing: var(--tracking-tight);
}
.ui-text--body {
  color: var(--color-label);
  font-size: var(--text-base);
  line-height: var(--leading-normal);
}
.ui-text--muted {
  color: var(--color-muted);
  font-size: var(--text-sm);
  line-height: var(--leading-normal);
}

/*
 * Reusable type-size family.
 * Use these when a component needs an explicit size without inventing local px/rem values.
 */
.ui-type-2xs {
  font-size: var(--text-2xs);
  line-height: var(--leading-snug);
}

.ui-type-xs {
  font-size: var(--text-xs);
  line-height: var(--leading-normal);
}

.ui-type-sm {
  font-size: var(--text-sm);
  line-height: var(--leading-normal);
}

.ui-type-base {
  font-size: var(--text-base);
  line-height: var(--leading-normal);
}

.ui-type-lg {
  font-size: var(--text-lg);
  line-height: var(--leading-snug);
}

.ui-type-xl {
  font-size: var(--text-xl);
  line-height: var(--leading-tight);
}

.ui-type-2xl {
  font-size: var(--text-2xl);
  line-height: var(--leading-tight);
}

.ui-type-3xl {
  font-size: var(--text-3xl);
  line-height: var(--leading-tight);
}

.ui-type-4xl {
  font-size: var(--text-4xl);
  line-height: var(--leading-tight);
}

.ui-type-display {
  font-size: var(--text-display);
  line-height: var(--leading-tight);
}

.ui-control {
  cursor: pointer;
  transition: transform 140ms ease, background-color 140ms ease, border-color 140ms ease, box-shadow 140ms ease, color 140ms ease, opacity 140ms ease;
}

.ui-control:hover:not(:disabled) {
  transform: translateY(-1px);
}

.ui-control:active:not(:disabled) {
  transform: translateY(0) scale(0.985);
}

.ui-control:focus-visible {
  outline: 0;
  box-shadow: 0 0 0 var(--focus-ring-width) var(--color-focus-ring);
}

.ui-control:disabled {
  opacity: var(--opacity-disabled);
  cursor: not-allowed;
}

.ui-control--primary {
  color: var(--color-primary-on) !important;
  background: var(--color-primary) !important;
  border-color: var(--color-primary) !important;
}

.ui-control--primary:hover:not(:disabled) {
  color: var(--color-primary-on) !important;
  background: var(--color-primary-hover) !important;
  border-color: var(--color-primary-hover) !important;
}

.ui-control--secondary {
  color: var(--color-navy-700) !important;
  background: var(--color-surface) !important;
  border-color: var(--color-border) !important;
}

.ui-control--secondary:hover:not(:disabled) {
  color: var(--color-navy-900) !important;
  background: var(--color-surface-hover) !important;
  border-color: var(--color-border-strong) !important;
  box-shadow: 0 2px 4px var(--color-shadow-soft);
}

.ui-control--ghost {
  color: var(--color-control-icon) !important;
  background: transparent !important;
  border-color: transparent !important;
}

.ui-control--ghost:hover:not(:disabled) {
  color: var(--color-primary-hover) !important;
  background: var(--color-primary-soft) !important;
  border-color: transparent !important;
}

.ui-control--danger {
  color: var(--color-error-text) !important;
  background: var(--color-error-soft) !important;
  border-color: var(--color-error-border) !important;
}

.ui-control--danger:hover:not(:disabled) {
  color: var(--color-error-hover) !important;
  background: var(--color-error-soft) !important;
  border-color: var(--color-error-text) !important;
}

.ui-control--danger-solid:hover:not(:disabled) {
  color: var(--color-error-on) !important;
  background: var(--color-error-hover) !important;
  border-color: var(--color-error-hover) !important;
}

.ui-icon-button {
  width: 2rem;
  height: 2rem;
  display: inline-grid;
  place-items: center;
  padding: 0;
  color: var(--color-control-icon);
  background: var(--color-control-bg);
  border: 1px solid var(--color-control-border);
  border-radius: var(--radius-sm);
  transition: background-color 140ms ease, border-color 140ms ease, color 140ms ease, box-shadow 140ms ease, transform 140ms ease;
}
.ui-icon-button:hover:not(:disabled) {
  color: var(--color-navy-900);
  background: var(--color-surface-hover);
  border-color: var(--color-border-strong);
}
.ui-icon-button:active:not(:disabled) {
  background: var(--color-surface-active);
}

.ui-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  min-height: 40px;
  padding: 10px 16px;
  border: 1px solid transparent;
  border-radius: var(--radius-md);
  font-size: var(--text-sm);
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-normal);
  text-transform: none;
  cursor: pointer;
  transition: transform 140ms ease, background-color 140ms ease, border-color 140ms ease, color 140ms ease, filter 140ms ease;
}
.ui-button:hover:not(:disabled) {
  text-decoration: none;
  transform: translateY(-1px);
}
.ui-button:active:not(:disabled) {
  transform: scale(0.97);
}
.ui-button:focus-visible {
  outline: 0;
  box-shadow: 0 0 0 var(--focus-ring-width) var(--color-focus-ring);
}
.ui-button:disabled {
  opacity: var(--opacity-disabled);
  cursor: not-allowed;
}
.ui-button--primary {
  color: var(--color-primary-on);
  background: var(--color-primary);
  border-color: var(--color-primary);
  box-shadow: var(--shadow-primary-control);
}
.ui-button--primary:hover:not(:disabled) {
  color: var(--color-primary-on);
  background: var(--color-primary-hover);
  border-color: var(--color-primary-hover);
  filter: brightness(1.04);
}
.ui-button--secondary {
  color: var(--color-navy-700);
  background: var(--color-surface);
  border-color: var(--color-border);
  box-shadow: 0 1px 2px var(--color-shadow-subtle);
}
.ui-button--secondary:hover:not(:disabled) {
  color: var(--color-navy-900);
  background: var(--color-surface-hover);
  border-color: var(--color-border-strong);
  box-shadow: 0 2px 5px var(--color-shadow-medium);
  transform: translateY(-1px);
}
.ui-button--secondary:active:not(:disabled) {
  background: var(--color-surface-active);
  box-shadow: none;
  transform: translateY(0) scale(0.985);
}
.ui-button--ghost {
  color: var(--color-muted);
  background: transparent;
}
.ui-button--ghost:hover:not(:disabled) {
  color: var(--color-text);
  background: var(--color-hover-overlay);
}
.ui-button--compact {
  min-height: 2.5rem;
  padding: 0.55rem var(--space-3);
  border-radius: var(--radius-sm);
  font-size: var(--text-sm);
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-normal);
  text-transform: none;
}
.ui-button--control {
  min-height: 2.875rem;
  padding: 0.625rem var(--space-4);
  border-radius: var(--radius-md);
  font-size: var(--text-sm);
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-normal);
  text-transform: none;
}
.ui-button--large {
  min-height: 3.5rem;
  padding: 0.8rem var(--space-5);
  border-radius: var(--radius-md);
  font-size: var(--text-sm);
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-normal);
  text-transform: none;
}
.ui-button--danger {
  color: var(--color-error-text);
  background: var(--color-error-soft);
  border-color: var(--color-error-border);
}
.ui-button--danger:hover:not(:disabled) {
  color: var(--color-error-hover);
  background: var(--color-error-soft);
  border-color: var(--color-error-text);
}
.ui-button--danger-solid {
  color: var(--color-error-on);
  background: var(--color-error-text);
  border-color: var(--color-error-text);
}
.ui-button--danger-solid:hover:not(:disabled) {
  color: var(--color-error-on);
  background: var(--color-error-hover);
  border-color: var(--color-error-hover);
}

.ui-icon-button--round {
  border-radius: var(--radius-pill);
}

.ui-icon-button--comfortable {
  width: 2.375rem;
  height: 2.375rem;
}

.ui-choice {
  min-height: 2.25rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: 0.45rem 0.65rem;
  color: var(--color-control-text);
  background: var(--color-control-bg);
  border: 1px solid var(--color-control-border);
  border-radius: var(--radius-sm);
  font: inherit;
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  cursor: pointer;
  transition: background-color 140ms ease, border-color 140ms ease, color 140ms ease, box-shadow 140ms ease;
}

.ui-choice:hover:not(:disabled) {
  color: var(--color-primary-hover);
  background: var(--color-primary-soft);
  border-color: var(--color-primary-border);
}

.ui-choice.is-active,
.ui-choice[aria-pressed=true] {
  color: var(--color-primary-on);
  background: var(--color-primary);
  border-color: var(--color-primary);
  box-shadow: var(--shadow-primary-control);
}

.ui-choice.is-active:hover:not(:disabled),
.ui-choice[aria-pressed=true]:hover:not(:disabled) {
  color: var(--color-primary-on);
  background: var(--color-primary-hover);
  border-color: var(--color-primary-hover);
}

.ui-choice:focus-visible {
  outline: 0;
  box-shadow: 0 0 0 var(--focus-ring-width) var(--color-focus-ring);
}

.ui-choice:disabled {
  opacity: var(--opacity-disabled);
  cursor: not-allowed;
}

.ui-icon-button--large {
  width: 2.75rem;
  height: 2.75rem;
}

.ui-button--caps {
  font-size: var(--text-xs);
  font-weight: var(--weight-extrabold);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
}

.ui-card {
  position: relative;
  margin-bottom: 20px;
  padding: 24px;
  overflow: visible;
  background: var(--color-surface-glass);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  transition: border-color 180ms ease, box-shadow 180ms ease, transform 180ms ease;
}
.ui-card--flush {
  margin-bottom: 0;
}
.ui-card--compact {
  padding: var(--space-4);
}
.ui-card--clip {
  overflow: hidden;
}
.ui-card--plain::before {
  display: none;
}
.ui-card--interactive {
  cursor: pointer;
}
.ui-card--interactive:hover {
  transform: translateY(-1px);
}
.ui-card--subtle {
  background: var(--color-surface);
  border-color: var(--color-border-soft);
  box-shadow: var(--shadow-subtle);
}
.ui-card::before {
  content: "";
  position: absolute;
  inset: 0 auto auto 0;
  width: 48px;
  height: 1px;
  background: var(--color-primary);
  opacity: 0.5;
}
.ui-card:hover {
  border-color: var(--color-border-strong);
  box-shadow: var(--shadow-card-hover);
}

.ui-action-card {
  min-width: 0;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-4);
  color: var(--color-text-secondary);
  background: var(--color-surface);
  border: 1px solid var(--color-border-soft);
  border-radius: var(--radius-md);
  text-align: left;
  font: inherit;
  cursor: pointer;
  transition: transform 150ms ease, background-color 150ms ease, border-color 150ms ease, box-shadow 150ms ease;
}

.ui-action-card:hover:not(:disabled) {
  color: var(--color-text);
  background: var(--color-primary-soft-subtle);
  border-color: var(--color-primary-border-hover);
  box-shadow: var(--shadow-card-hover);
  transform: translateY(-1px);
}

.ui-action-card:focus-visible,
.ui-choice-card:focus-visible {
  outline: 0;
  box-shadow: 0 0 0 var(--focus-ring-width) var(--color-focus-ring);
}

.ui-action-card:disabled {
  opacity: var(--opacity-disabled);
  cursor: not-allowed;
}

.ui-choice-card {
  color: var(--color-text-secondary);
  background: var(--color-surface);
  border: 1px solid var(--color-border-soft);
  border-radius: var(--radius-md);
  font: inherit;
  cursor: pointer;
  transition: transform 150ms ease, background-color 150ms ease, border-color 150ms ease, box-shadow 150ms ease, color 150ms ease;
}

.ui-choice-card:hover:not(:disabled) {
  color: var(--color-text);
  border-color: var(--color-control-border-hover);
  transform: translateY(-1px);
}

.ui-choice-card.is-active,
.ui-choice-card[aria-pressed=true] {
  color: var(--color-primary-hover);
  background: var(--color-primary-soft-subtle);
  border-color: var(--color-primary-border-hover);
  box-shadow: var(--shadow-card-hover);
}

.ui-choice-card:disabled {
  opacity: var(--opacity-disabled);
  cursor: not-allowed;
}

.ui-card-action {
  width: 100%;
  min-width: 0;
  color: inherit;
  background: transparent;
  border: 0;
  text-align: inherit;
  font: inherit;
  cursor: pointer;
}

.ui-card-action:focus-visible {
  outline: 2px solid var(--color-control-border-focus);
  outline-offset: -2px;
  border-radius: inherit;
}

.ui-choice-card--stacked {
  min-width: 0;
  display: grid;
  justify-items: start;
  gap: var(--space-2);
  padding: var(--space-3);
  text-align: left;
}

.ui-badge {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding: 0 9px;
  color: var(--color-primary-hover);
  background: var(--color-primary-soft);
  border: 1px solid var(--color-primary-border);
  border-radius: var(--radius-pill);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-normal);
  text-transform: none;
}

.ui-badge--count {
  min-width: 1.25rem;
  min-height: 1.25rem;
  justify-content: center;
  padding: 0 0.35rem;
  color: var(--color-text-tertiary);
  background: var(--color-surface-muted);
  border-color: transparent;
  font-size: var(--text-2xs);
  font-weight: var(--weight-bold);
  line-height: 1;
}

.ui-badge--label {
  min-height: 1.75rem;
  gap: var(--space-1);
  padding: 0.25rem 0.6rem;
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-normal);
  text-transform: none;
}

.ui-badge--neutral {
  color: var(--color-text-secondary);
  background: var(--color-surface-subtle);
  border-color: var(--color-border-soft);
}

.ui-badge--success {
  color: var(--color-primary-hover);
  background: var(--color-success-soft);
  border-color: var(--color-success-border);
}

.ui-badge--warning {
  color: var(--color-warning);
  background: var(--color-warning-soft);
  border-color: var(--color-warning-border);
}

.ui-badge--error {
  color: var(--color-error-text);
  background: var(--color-error-soft);
  border-color: var(--color-error-border);
}

.ui-badge--caps {
  font-size: var(--text-2xs);
  font-weight: var(--weight-extrabold);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
}

.ui-alert {
  margin: 0;
  padding: var(--space-3);
  border: 1px solid var(--color-border-soft);
  border-radius: var(--radius-sm);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  line-height: var(--leading-normal);
}

.ui-alert[hidden] {
  display: none;
}

.ui-alert--error {
  color: var(--color-error-text);
  background: var(--color-error-soft);
  border-color: var(--color-error-border);
}

.ui-alert--success {
  color: var(--color-success);
  background: var(--color-success-soft);
  border-color: var(--color-success-border);
}

.ui-alert--warning {
  color: var(--color-warning);
  background: var(--color-warning-soft);
  border-color: var(--color-warning-border);
}

.ui-alert--info {
  color: var(--color-primary-hover);
  background: var(--color-primary-soft-subtle);
  border-color: var(--color-primary-border-soft);
}

.ui-toast-viewport {
  position: fixed;
  top: max(var(--space-4), env(safe-area-inset-top));
  right: max(var(--space-4), env(safe-area-inset-right));
  z-index: 1200;
  width: min(24rem, 100vw - 2rem);
  display: grid;
  gap: var(--space-2);
  pointer-events: none;
}

.ui-toast {
  min-width: 0;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: start;
  gap: var(--space-3);
  padding: var(--space-3);
  color: var(--color-text);
  background: var(--color-surface-overlay);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-float);
  backdrop-filter: blur(0.75rem);
  pointer-events: auto;
  animation: ui-toast-enter 180ms ease-out;
}

.ui-toast.is-leaving {
  opacity: 0;
  transform: translateY(-0.35rem);
  transition: opacity 180ms ease, transform 180ms ease;
}

.ui-toast__icon {
  width: 2rem;
  height: 2rem;
  display: grid;
  place-items: center;
  border-radius: var(--radius-pill);
}

.ui-toast--success .ui-toast__icon {
  color: var(--color-success);
  background: var(--color-success-soft);
}

.ui-toast--error .ui-toast__icon {
  color: var(--color-error-text);
  background: var(--color-error-soft);
}

.ui-toast--warning .ui-toast__icon {
  color: var(--color-warning);
  background: var(--color-warning-soft);
}

.ui-toast--info .ui-toast__icon {
  color: var(--color-primary-hover);
  background: var(--color-primary-soft);
}

.ui-toast__copy {
  min-width: 0;
  display: grid;
  gap: 0.15rem;
  padding-top: 0.1rem;
}

.ui-toast__copy strong {
  color: var(--color-text);
  font-size: var(--text-sm);
  font-weight: var(--weight-bold);
  line-height: var(--leading-snug);
}

.ui-toast__copy span {
  color: var(--color-text-secondary);
  font-size: var(--text-xs);
  line-height: var(--leading-normal);
  overflow-wrap: anywhere;
}

.ui-toast__close {
  width: 1.75rem;
  height: 1.75rem;
  display: grid;
  place-items: center;
  padding: 0;
  color: var(--color-text-tertiary);
  background: transparent;
  border: 0;
  border-radius: var(--radius-sm);
  cursor: pointer;
}

.ui-toast__close:hover {
  color: var(--color-text);
  background: var(--color-surface-subtle);
}

.ui-toast__close:focus-visible {
  outline: 0;
  box-shadow: 0 0 0 var(--focus-ring-width) var(--color-focus-ring);
}

@keyframes ui-toast-enter {
  from {
    opacity: 0;
    transform: translateY(-0.5rem) scale(0.98);
  }
}
@media (max-width: 32.5rem) {
  .ui-toast-viewport {
    top: max(0.75rem, env(safe-area-inset-top));
    right: 0.75rem;
    left: 0.75rem;
    width: auto;
  }
}
.ui-icon-tile {
  width: 2.75rem;
  height: 2.75rem;
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  color: var(--color-primary);
  background: var(--color-primary-soft);
  border: 1px solid transparent;
  border-radius: var(--radius-md);
}

.ui-icon-tile--small {
  width: 2rem;
  height: 2rem;
  border-radius: var(--radius-sm);
}

.ui-icon-tile--large {
  width: 3rem;
  height: 3rem;
}

.ui-icon-tile--muted {
  color: var(--color-text-secondary);
  background: var(--color-surface-subtle);
}

.ui-icon-tile--danger {
  color: var(--color-error-text);
  background: var(--color-error-soft);
}

.ui-icon-tile--round {
  border-radius: var(--radius-pill);
}

.ui-form {
  max-width: 680px;
}

.ui-field {
  display: grid;
  gap: 8px;
  margin-bottom: 20px;
}
.ui-field--flush {
  margin-bottom: 0;
}
.ui-field__label {
  color: var(--color-label);
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-normal);
  text-transform: none;
}
.ui-field__help {
  color: var(--color-text-tertiary);
  font-size: var(--text-xs);
  line-height: var(--leading-normal);
}
.ui-field__optional {
  margin-left: 0.35rem;
  color: var(--color-text-tertiary);
  font-size: var(--text-2xs);
  font-style: normal;
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-normal);
  text-transform: none;
}

.ui-input,
.ui-select {
  width: 100%;
  min-height: 2.875rem;
  padding: 0.625rem 0.875rem;
  color: var(--color-control-text);
  background: var(--color-control-bg);
  border: 1px solid var(--color-control-border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-control);
  outline: none;
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  transition: background-color 140ms ease, border-color 140ms ease, box-shadow 140ms ease;
}
.ui-input:hover:not(:disabled):not([readonly]),
.ui-select:hover:not(:disabled):not([readonly]) {
  background: var(--color-control-bg-hover);
  border-color: var(--color-control-border-hover);
}
.ui-input:focus,
.ui-select:focus {
  background: var(--color-control-bg);
  border-color: var(--color-control-border-focus);
  box-shadow: 0 0 0 var(--focus-ring-width) var(--color-focus-ring);
}

.ui-input--readonly,
.ui-input:disabled,
.ui-select:disabled {
  color: var(--color-text-secondary);
  background: var(--color-surface-subtle);
  border-color: var(--color-border-soft);
  box-shadow: none;
  cursor: default;
  opacity: 1;
}

.ui-input--large {
  min-height: 3.375rem;
  padding: 0.8rem var(--space-4);
  font-weight: var(--weight-medium);
}

.ui-search-control {
  min-width: 0;
  min-height: 2.875rem;
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: 0 var(--space-4);
  color: var(--color-control-text);
  background: var(--color-control-bg);
  border: 1px solid var(--color-control-border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-control);
  transition: background-color 140ms ease, border-color 140ms ease, box-shadow 140ms ease;
}

.ui-search-control:focus-within {
  border-color: var(--color-control-border-focus);
  box-shadow: 0 0 0 var(--focus-ring-width) var(--color-focus-ring);
}

.ui-search-control > svg {
  flex: 0 0 auto;
  color: var(--color-control-icon);
}

.ui-search-control .ui-search-control__input {
  min-width: 0;
  width: 100%;
  padding: 0;
  color: var(--color-control-text);
  background: transparent;
  border: 0;
  outline: 0;
  font: inherit;
  font-size: var(--text-sm);
}

.ui-search-control .ui-search-control__input::placeholder {
  color: var(--color-text-tertiary);
}

.ui-mono {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
}

.ui-inline-form {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 160px auto;
  align-items: center;
  gap: 12px;
}

.ui-input-group {
  position: relative;
  min-width: 0;
  display: flex;
  align-items: center;
}

.ui-input-group > .ui-input {
  min-width: 0;
  width: 100%;
}

.ui-input-group--password > .ui-input {
  padding-right: 3.5rem;
}

.ui-input-group__action {
  position: absolute;
  top: 50%;
  right: 0.5rem;
  z-index: 1;
  transform: translateY(-50%);
}

.ui-input-group__action:hover:not(:disabled),
.ui-input-group__action:active:not(:disabled) {
  transform: translateY(-50%);
}

.ui-input-group__action:focus-visible {
  box-shadow: 0 0 0 var(--focus-ring-width) var(--color-focus-ring);
}

.ui-field__error {
  color: var(--color-error-text);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  line-height: var(--leading-normal);
}

.ui-input[aria-invalid=true],
.ui-select[aria-invalid=true] {
  border-color: var(--color-error-border);
}

.ui-input[aria-invalid=true]:focus,
.ui-select[aria-invalid=true]:focus {
  border-color: var(--color-error-text);
  box-shadow: 0 0 0 0.25rem var(--color-error-soft);
}

.ui-checkbox {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  min-width: 0;
  color: var(--color-text-secondary);
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  line-height: var(--leading-tight);
  cursor: pointer;
  user-select: none;
}

.ui-checkbox__input {
  position: absolute;
  inline-size: 1px;
  block-size: 1px;
  opacity: 0;
  pointer-events: none;
}

.ui-checkbox__control {
  inline-size: 1.125rem;
  block-size: 1.125rem;
  flex: 0 0 auto;
  position: relative;
  display: inline-grid;
  place-items: center;
  background: var(--color-control-bg);
  border: 1px solid var(--color-control-border);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-control);
  transition: background-color 140ms ease, border-color 140ms ease, box-shadow 140ms ease;
}

.ui-checkbox__control::after {
  content: "";
  inline-size: 0.5rem;
  block-size: 0.28rem;
  border-left: 0.12rem solid var(--color-surface);
  border-bottom: 0.12rem solid var(--color-surface);
  opacity: 0;
  transform: translateY(-0.08rem) rotate(-45deg) scale(0.7);
  transition: opacity 120ms ease, transform 120ms ease;
}

.ui-checkbox:hover .ui-checkbox__control {
  background: var(--color-control-bg-hover);
  border-color: var(--color-control-border-hover);
}

.ui-checkbox__input:checked + .ui-checkbox__control {
  background: var(--color-primary);
  border-color: var(--color-primary);
}

.ui-checkbox:hover .ui-checkbox__input:checked + .ui-checkbox__control,
.ui-checkbox__input:checked:hover + .ui-checkbox__control {
  background: var(--color-primary-hover);
  border-color: var(--color-primary-hover);
}

.ui-checkbox__input:checked + .ui-checkbox__control::after {
  opacity: 1;
  transform: translateY(-0.08rem) rotate(-45deg) scale(1);
}

.ui-checkbox__input:focus-visible + .ui-checkbox__control {
  border-color: var(--color-control-border-focus);
  box-shadow: 0 0 0 var(--focus-ring-width) var(--color-focus-ring);
}

.ui-checkbox:has(.ui-checkbox__input:disabled) {
  cursor: not-allowed;
  opacity: var(--opacity-disabled);
}

.ui-date-picker {
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.2fr) minmax(0, 1fr);
  gap: var(--space-2);
}

.ui-date-picker > .ui-select {
  min-width: 0;
}

@media (max-width: 30rem) {
  .ui-date-picker {
    grid-template-columns: 1fr;
  }
}
.ui-file-picker {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

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

.ui-file-picker__button {
  flex: 0 0 auto;
  cursor: pointer;
}

.ui-file-picker__input:focus-visible + .ui-file-picker__button {
  box-shadow: 0 0 0 var(--focus-ring-width) var(--color-focus-ring);
}

.ui-file-picker__name {
  min-width: 0;
  color: var(--color-text-secondary);
  font-size: var(--text-sm);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

@media (max-width: 30rem) {
  .ui-file-picker {
    align-items: stretch;
    flex-direction: column;
  }
  .ui-file-picker__button {
    width: 100%;
  }
  .ui-file-picker__name {
    white-space: normal;
    overflow-wrap: anywhere;
  }
}
.ui-select[data-ui-select-root] {
  position: relative;
  min-width: 0;
  width: 100%;
  margin: 0;
  padding: 0;
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}

.auth-field > .ui-select[data-ui-select-root] {
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}

.ui-select[data-ui-select-root][data-open] {
  z-index: 1;
}

/* Lift the host card above sibling stacking contexts while a shared select
 * is open. Card clipping is opt-in via .ui-card--clip, so popovers are not
 * coupled to a page-specific parent overflow rule. */
.ui-card:has(.ui-select[data-ui-select-root][data-open]) {
  z-index: 60;
}

.ui-select__native {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  margin: -1px !important;
  padding: 0 !important;
  overflow: hidden !important;
  clip: rect(0 0 0 0) !important;
  clip-path: inset(50%) !important;
  border: 0 !important;
  white-space: nowrap !important;
}

.ui-select__trigger {
  width: 100%;
  min-height: 2.875rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding: 0.625rem 0.875rem;
  color: var(--color-control-text);
  background: var(--color-control-bg);
  border: 1px solid var(--color-control-border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-control);
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  text-align: left;
  cursor: pointer;
  transition: background-color 140ms ease, border-color 140ms ease, box-shadow 140ms ease, color 140ms ease;
}

.ui-select__trigger:hover {
  background: var(--color-control-bg-hover);
  border-color: var(--color-control-border-hover);
}

.ui-select__trigger:focus-visible,
.ui-select[data-open] .ui-select__trigger {
  outline: 0;
  border-color: var(--color-control-border-focus);
  box-shadow: 0 0 0 var(--focus-ring-width) var(--color-focus-ring);
}

.ui-select__trigger:disabled {
  opacity: var(--opacity-disabled);
  cursor: not-allowed;
}

.ui-select__value {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ui-select__chevron {
  flex: 0 0 auto;
  color: var(--color-control-icon);
  transition: transform 140ms ease;
}

.ui-select[data-open] .ui-select__chevron {
  transform: rotate(180deg);
}

.ui-select__menu {
  position: absolute;
  top: calc(100% + 0.45rem);
  left: 0;
  z-index: 40;
  width: 100%;
  min-width: max-content;
  max-width: min(20rem, 100vw - 2rem);
  max-height: min(24rem, var(--ui-select-menu-max-height, calc(100dvh - 5rem)));
  display: grid;
  gap: var(--space-1);
  padding: 0.375rem;
  background: var(--color-surface-raised);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-popover);
}

.ui-select[data-ui-select-placement=up] .ui-select__menu {
  top: auto;
  bottom: calc(100% + 0.45rem);
}

.ui-select__menu[hidden] {
  display: none;
}

.ui-select__option {
  width: 100%;
  min-height: 2.625rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding: 0.55rem var(--space-3);
  color: var(--color-control-text);
  background: transparent;
  border: 0;
  border-radius: var(--radius-sm);
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  text-align: left;
  cursor: pointer;
}

.ui-select__option:hover,
.ui-select__option:focus-visible,
.ui-select__option[data-highlighted=true] {
  outline: 0;
  color: var(--color-primary-hover);
  background: var(--color-primary-soft);
}

.ui-select__option[aria-selected=true] {
  color: var(--color-primary-hover);
  background: var(--color-primary-soft);
}

.ui-select__option[aria-selected=true]:hover,
.ui-select__option[aria-selected=true]:focus-visible {
  background: var(--color-primary-soft-hover);
}

.ui-select__option--disabled,
.ui-select__option:disabled {
  color: var(--color-text-muted);
  background: var(--color-surface-muted);
  opacity: var(--opacity-disabled);
  cursor: not-allowed;
}

.ui-select__option--disabled:hover,
.ui-select__option--disabled:focus-visible,
.ui-select__option:disabled:hover,
.ui-select__option:disabled:focus-visible {
  color: var(--color-text-muted);
  background: var(--color-surface-muted);
  outline: 0;
}

.ui-select__option--disabled > svg,
.ui-select__option:disabled > svg {
  opacity: 0;
}

.ui-select__option > span {
  min-width: 0;
}

.ui-select__option > svg {
  flex: 0 0 auto;
  opacity: 0;
  color: var(--color-primary);
}

.ui-select__option[aria-selected=true] > svg {
  opacity: 1;
}

.ui-select[data-empty] .ui-select__trigger {
  color: var(--color-text-tertiary);
  background: var(--color-surface-subtle);
  border-color: var(--color-border-soft);
  box-shadow: none;
  cursor: default;
}

.ui-select[data-empty] .ui-select__chevron {
  opacity: 0.45;
}

.ui-time-picker {
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  gap: var(--space-2);
}

.ui-time-picker__separator {
  color: var(--color-text-tertiary);
  font-size: var(--text-base);
  font-weight: var(--weight-extrabold);
  line-height: 1;
}

.ui-time-picker > .ui-select {
  min-width: 0;
}

.ui-time-picker .ui-select__menu {
  min-width: 100%;
}

.ui-switch-row {
  position: relative;
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding: 0.7rem 0;
  cursor: pointer;
}

.ui-switch-row + .ui-switch-row {
  border-top: 1px solid var(--color-border-soft);
}

.ui-switch-row__copy {
  min-width: 0;
  display: grid;
  gap: 0.2rem;
}

.ui-switch-row__label {
  color: var(--color-text-secondary);
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
}

.ui-switch-row__help {
  color: var(--color-text-tertiary);
  font-size: var(--text-xs);
}

.ui-switch-row__input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.ui-switch {
  width: 2.6rem;
  height: 1.45rem;
  flex: 0 0 auto;
  position: relative;
  background: var(--color-control-border);
  border-radius: var(--radius-pill);
  transition: background-color 150ms ease, box-shadow 150ms ease;
}

.ui-switch::after {
  content: "";
  position: absolute;
  top: 0.2rem;
  left: 0.2rem;
  width: 1.05rem;
  height: 1.05rem;
  background: var(--color-surface);
  border-radius: var(--radius-pill);
  box-shadow: var(--shadow-control);
  transition: transform 150ms ease;
}

.ui-switch-row__input:checked + .ui-switch {
  background: var(--color-primary);
}

.ui-switch-row__input:checked + .ui-switch::after {
  transform: translateX(1.15rem);
}

.ui-switch-row__input:focus-visible + .ui-switch {
  box-shadow: 0 0 0 var(--focus-ring-width) var(--color-focus-ring);
}

.ui-switch-row__input:disabled + .ui-switch {
  opacity: var(--opacity-disabled);
}

.ui-switch-row:has(.ui-switch-row__input:disabled) {
  cursor: not-allowed;
}

.ui-status-dot {
  width: 0.5rem;
  height: 0.5rem;
  flex: 0 0 auto;
  border-radius: var(--radius-pill);
  background: var(--color-control-border);
}

.ui-status-dot--success {
  background: var(--color-success);
}

.ui-status-dot--warning {
  background: var(--color-warning);
}

.ui-status-dot--error {
  background: var(--color-error);
}

.ui-status-dot--muted {
  background: var(--color-navy-400);
}

.ui-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
}
.ui-table th,
.ui-table td {
  padding: 14px 12px;
  text-align: left;
  vertical-align: middle;
  border-bottom: 1px solid var(--color-border-soft);
}
.ui-table th {
  color: var(--color-ghost);
  font-size: var(--text-2xs);
  font-weight: var(--weight-extrabold);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
}
.ui-table td {
  color: var(--color-label);
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
}
.ui-table tbody tr:hover {
  background: var(--color-primary-soft-subtle);
}
.ui-table tr:last-child td {
  border-bottom: 0;
}
.ui-table a {
  color: var(--color-primary-hover);
  font-weight: var(--weight-extrabold);
}
.ui-table small {
  display: block;
  margin-top: 3px;
  color: var(--color-ghost);
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
}

.ui-empty-state {
  margin: 0;
  padding: 26px 6px;
  color: var(--color-muted);
  font-size: var(--text-sm);
  text-align: center;
}

.annotation-root {
  position: fixed;
  inset: auto 16px 16px auto;
  z-index: 2147483647;
  width: max-content;
  height: max-content;
  margin: 0;
  padding: 0;
  overflow: visible;
  background: transparent;
  border: 0;
  font-family: var(--font-sans);
}

.annotation-toolbar {
  display: flex;
  align-items: center;
  gap: 8px;
}

.annotation-tool,
.annotation-icon-button {
  border: 1px solid var(--color-neutral-300);
  color: var(--color-neutral-800);
  background: rgba(255, 255, 255, 0.96);
  box-shadow: 0 10px 30px rgba(24, 24, 27, 0.12);
  cursor: pointer;
}

.annotation-tool {
  min-height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 0 12px;
  border-radius: var(--radius-md);
  font-size: var(--text-2xs);
  font-weight: var(--weight-extrabold);
}
.annotation-tool--primary, .annotation-tool.is-active {
  color: var(--color-neutral-0);
  background: var(--color-teal-600);
  border-color: var(--color-teal-600);
}
.annotation-tool--wide {
  flex: 1;
}

.annotation-icon-button {
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  padding: 0;
  border-radius: var(--radius-md);
}
.annotation-icon-button--danger {
  color: var(--color-red-700);
}

.annotation-count {
  min-width: 18px;
  height: 18px;
  display: grid;
  place-items: center;
  padding: 0 5px;
  border-radius: var(--radius-pill);
  color: var(--color-neutral-500);
  background: var(--color-neutral-100);
  font-size: var(--text-2xs);
  font-weight: var(--weight-extrabold);
}

.annotation-tool.has-items .annotation-count {
  color: var(--color-neutral-0);
  background: var(--color-teal-600);
}

.annotation-panel,
.annotation-editor {
  position: absolute;
  right: 0;
  bottom: 52px;
  width: min(360px, 100vw - 32px);
  color: var(--color-neutral-900);
  background: rgba(255, 255, 255, 0.98);
  border: 1px solid var(--color-neutral-300);
  border-radius: var(--radius-lg);
  box-shadow: 0 24px 70px rgba(24, 24, 27, 0.18);
}

.annotation-panel {
  max-height: min(560px, 100vh - 100px);
  overflow: hidden;
}
.annotation-panel__header, .annotation-panel__actions {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px;
}
.annotation-panel__header {
  justify-content: space-between;
  border-bottom: 1px solid var(--color-neutral-200);
}
.annotation-panel__header > div {
  min-width: 0;
  display: grid;
  gap: 2px;
}
.annotation-panel__header strong {
  font-size: var(--text-xs);
  font-weight: var(--weight-extrabold);
}
.annotation-panel__header span {
  overflow: hidden;
  color: var(--color-neutral-500);
  font-family: var(--font-mono);
  font-size: var(--text-2xs);
  text-overflow: ellipsis;
  white-space: nowrap;
}
.annotation-panel__list {
  max-height: 380px;
  overflow: auto;
  padding: 8px;
}
.annotation-panel__actions {
  border-top: 1px solid var(--color-neutral-200);
}

.annotation-item {
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr) 28px;
  gap: 8px;
  padding: 10px;
  border-radius: var(--radius-md);
}
.annotation-item:hover {
  background: var(--color-neutral-100);
}
.annotation-item__number {
  width: 22px;
  height: 22px;
  display: grid;
  place-items: center;
  border-radius: var(--radius-pill);
  color: var(--color-neutral-0);
  background: var(--color-teal-600);
  font-size: var(--text-2xs);
  font-weight: var(--weight-extrabold);
}
.annotation-item__content {
  min-width: 0;
}
.annotation-item__content strong {
  display: block;
  overflow: hidden;
  font-size: var(--text-2xs);
  font-weight: var(--weight-extrabold);
  text-overflow: ellipsis;
  white-space: nowrap;
}
.annotation-item__content p {
  margin: 4px 0 0;
  color: var(--color-neutral-600);
  font-size: var(--text-2xs);
  line-height: var(--leading-normal);
}
.annotation-item__remove {
  align-self: start;
  width: 26px;
  height: 26px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 0;
  border-radius: var(--radius-sm);
  color: var(--color-red-700);
  background: var(--color-red-50);
  font-size: var(--text-lg);
  cursor: pointer;
}
.annotation-item__remove:hover {
  color: var(--color-red-700);
  background: var(--color-red-50);
}

.annotation-empty {
  margin: 0;
  padding: 28px 16px;
  color: var(--color-neutral-500);
  font-size: var(--text-2xs);
  text-align: center;
}

.annotation-editor {
  padding: 14px;
}
.annotation-editor__header, .annotation-editor__actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.annotation-editor__header strong {
  font-size: var(--text-xs);
  font-weight: var(--weight-extrabold);
}
.annotation-editor > p {
  margin: 10px 0 8px;
  overflow: hidden;
  color: var(--color-neutral-500);
  font-family: var(--font-mono);
  font-size: var(--text-2xs);
  text-overflow: ellipsis;
  white-space: nowrap;
}
.annotation-editor textarea {
  width: 100%;
  resize: vertical;
  padding: 10px 12px;
  color: var(--color-neutral-900);
  background: var(--color-neutral-50);
  border: 1px solid var(--color-neutral-200);
  border-radius: var(--radius-md);
  outline: none;
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  line-height: var(--leading-normal);
}
.annotation-editor textarea:focus {
  border-color: rgba(13, 148, 136, 0.5);
  box-shadow: 0 0 0 3px rgba(13, 148, 136, 0.08);
}
.annotation-editor__actions {
  justify-content: flex-end;
  margin-top: 10px;
}

.annotation-selecting {
  cursor: crosshair !important;
}
.annotation-selecting * {
  cursor: crosshair !important;
}
.annotation-selecting [data-annotation-root],
.annotation-selecting [data-annotation-root] * {
  cursor: default !important;
}

.annotation-hover {
  outline: 2px solid var(--color-teal-600) !important;
  outline-offset: 3px !important;
}

.annotation-marker {
  position: fixed;
  z-index: 2147483646;
  width: 22px;
  height: 22px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 2px solid var(--color-neutral-0);
  border-radius: var(--radius-pill);
  color: var(--color-neutral-0);
  background: var(--color-teal-600);
  box-shadow: 0 4px 14px rgba(13, 148, 136, 0.32);
  font-family: var(--font-sans);
  font-size: var(--text-2xs);
  font-weight: var(--weight-extrabold);
  line-height: 1;
  cursor: pointer;
}

[hidden] {
  display: none !important;
}

@media (max-width: 640px) {
  .annotation-root {
    right: 12px;
    bottom: 12px;
  }
  .annotation-panel,
  .annotation-editor {
    width: calc(100vw - 24px);
  }
}
.ui-language {
  position: relative;
}

.ui-language__trigger {
  min-height: 2.5rem;
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: 0 var(--space-3);
  color: var(--color-control-text);
  background: var(--color-surface-glass-strong);
  border: 1px solid var(--color-control-border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-card);
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  cursor: pointer;
  transition: border-color 140ms ease, box-shadow 140ms ease, background-color 140ms ease;
}

.ui-language__trigger:hover {
  background: var(--color-control-bg-hover);
  border-color: var(--color-control-border-hover);
}

.ui-language__trigger:focus-visible {
  outline: 0;
  border-color: var(--color-control-border-focus);
  box-shadow: 0 0 0 var(--focus-ring-width) var(--color-focus-ring);
}

.ui-language__trigger > svg:first-child {
  color: var(--color-primary);
}

.ui-language__trigger > svg:last-child {
  color: var(--color-control-icon);
  transition: transform 140ms ease;
}

.ui-language[data-open=true] .ui-language__trigger > svg:last-child {
  transform: rotate(180deg);
}

.ui-language__menu {
  position: absolute;
  top: calc(100% + 0.5rem);
  right: 0;
  z-index: 20;
  width: max-content;
  min-width: 13.125rem;
  max-width: min(17rem, 100vw - 2rem);
  max-height: calc(100dvh - 5rem);
  overflow-y: auto;
  display: grid;
  gap: var(--space-1);
  padding: 0.375rem;
  background: var(--color-surface-overlay);
  border: 1px solid var(--color-control-border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-popover);
}

.ui-language__menu[hidden] {
  display: none;
}

.ui-language__option {
  width: 100%;
  min-height: 3rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding: 0.625rem var(--space-3);
  color: var(--color-control-text);
  background: transparent;
  border: 0;
  border-radius: var(--radius-sm);
  text-align: left;
  cursor: pointer;
}

.ui-language__option:hover,
.ui-language__option:focus-visible {
  outline: 0;
  background: var(--color-primary-soft-subtle);
}

.ui-language__option[aria-selected=true] {
  color: var(--color-primary-hover);
  background: var(--color-primary-soft);
}

.ui-language__option > span {
  min-width: 0;
  overflow: hidden;
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ui-language__option > svg {
  opacity: 0;
  color: var(--color-primary);
}

.ui-language__option[aria-selected=true] > svg {
  opacity: 1;
}

@media (max-width: 26.5625rem) {
  .ui-language__trigger {
    min-height: 2.375rem;
    padding-inline: 0.625rem;
  }
  .ui-language__menu {
    min-width: min(12.5rem, 100vw - 2rem);
    max-width: calc(100vw - 2rem);
  }
  .ui-language__option {
    min-height: 2.75rem;
  }
}
.ui-dialog {
  width: min(27.5rem, 100vw - 2rem);
  max-height: calc(100dvh - 2rem);
  padding: 0;
  background: transparent;
  border: 0;
}

.ui-dialog::backdrop {
  background: var(--color-backdrop);
  backdrop-filter: blur(4px);
}

.ui-dialog-layout {
  min-height: 0;
  max-height: inherit;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.ui-dialog-layout__header,
.ui-dialog-layout__footer {
  flex: 0 0 auto;
}

.ui-dialog-layout__body {
  min-height: 0;
  flex: 1 1 auto;
  overflow-y: auto;
  overscroll-behavior-y: contain;
}

.ui-dialog__panel {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 1rem;
  max-height: inherit;
  overflow-y: auto;
  padding: 1.5rem;
  background: var(--color-surface-overlay);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-dialog);
}

.ui-dialog__panel.ui-dialog-layout {
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.ui-dialog__panel--form {
  grid-template-columns: 1fr;
  gap: var(--space-5);
}

.ui-dialog__icon {
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  color: var(--color-primary);
  background: var(--color-primary-soft);
  border-radius: var(--radius-md);
}

.ui-dialog__content h3 {
  margin: 2px 36px 8px 0;
  color: var(--color-text-primary);
  font-size: var(--text-lg);
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-tight);
}

.ui-dialog__content > p {
  margin: 0;
  color: var(--color-text-tertiary);
  font-size: var(--text-sm);
  line-height: var(--leading-relaxed);
}

.ui-dialog__close {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  color: var(--color-text-tertiary);
  background: transparent;
  border: 0;
  border-radius: var(--radius-sm);
  cursor: pointer;
}

.ui-dialog__close:hover {
  color: var(--color-text-primary);
  background: var(--color-surface-subtle);
}

.ui-dialog__close:focus-visible {
  outline: 2px solid var(--color-border-focus);
  outline-offset: 2px;
}

.ui-dialog__actions {
  display: flex;
  gap: 8px;
  margin-top: 20px;
}

.ui-dialog__actions .ui-button {
  min-height: 38px;
  padding: 9px 12px;
  gap: 7px;
  border-radius: var(--radius-md);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-normal);
  text-transform: none;
}

.ui-dialog__feedback {
  min-height: 18px;
  margin-top: 10px !important;
  color: var(--color-primary-hover) !important;
  font-size: var(--text-xs) !important;
  font-weight: var(--weight-semibold);
}

@media (max-width: 32.5rem) {
  .ui-dialog {
    width: calc(100vw - 1rem);
    max-height: calc(100dvh - 1rem);
  }
  .ui-dialog__panel {
    grid-template-columns: 1fr;
    gap: 0.75rem;
    padding: 1.125rem;
    border-radius: var(--radius-md);
  }
  .ui-dialog__icon {
    width: 2.5rem;
    height: 2.5rem;
  }
  .ui-dialog__content h3 {
    margin-right: 2.5rem;
    font-size: var(--text-lg);
  }
  .ui-dialog__actions {
    flex-direction: column;
  }
}
/* Shared form-dialog chrome.
 * Feature dialogs own only width and feature-specific body layout.
 */
.ui-dialog :is(.site-create-dialog__heading, .site-edit-dialog__heading, .device-setup-dialog__heading) {
  min-width: 0;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: start;
  gap: var(--space-3);
  padding-right: var(--space-10);
}

.ui-dialog :is(.site-create-dialog__icon, .site-edit-dialog__icon, .device-setup-dialog__icon) {
  width: 2.75rem;
  height: 2.75rem;
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  color: var(--color-primary);
  background: var(--color-primary-soft);
  border-radius: var(--radius-md);
}

.ui-dialog :is(.site-create-dialog__heading,
.site-edit-dialog__heading,
.device-setup-dialog__heading,
.device-manage-dialog__header) h2 {
  margin: 0;
  color: var(--color-navy-900);
  font-size: var(--text-xl);
  font-weight: var(--weight-extrabold);
  line-height: var(--leading-snug);
  letter-spacing: var(--tracking-tight);
}

.ui-dialog :is(.site-create-dialog__heading,
.site-edit-dialog__heading,
.device-setup-dialog__heading,
.device-manage-dialog__header) p:last-child {
  margin: var(--space-1) 0 0;
  color: var(--color-muted);
  font-size: var(--text-sm);
  line-height: var(--leading-normal);
}

.ui-dialog :is(.site-create-dialog__actions, .device-setup-dialog__actions) {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--space-2);
}

.ui-dialog :is(.site-edit-dialog__actions, .device-manage-dialog__actions) {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
}

@media (max-width: 48rem) {
  .ui-dialog :is(.site-create-dialog__heading, .site-edit-dialog__heading, .device-setup-dialog__heading) {
    gap: var(--space-2);
    padding-right: 2.5rem;
  }
  .ui-dialog :is(.site-create-dialog__icon, .site-edit-dialog__icon, .device-setup-dialog__icon) {
    width: 2.35rem;
    height: 2.35rem;
  }
  .ui-dialog :is(.site-create-dialog__heading,
  .site-edit-dialog__heading,
  .device-setup-dialog__heading,
  .device-manage-dialog__header) h2 {
    font-size: var(--text-lg);
  }
  .ui-dialog :is(.site-create-dialog__heading,
  .site-edit-dialog__heading,
  .device-setup-dialog__heading,
  .device-manage-dialog__header) p:last-child {
    font-size: var(--text-xs);
    line-height: var(--leading-normal);
  }
}
@media (max-width: 26.5625rem) {
  .ui-dialog .site-create-dialog__actions {
    align-items: stretch;
    flex-direction: column-reverse;
  }
  .ui-dialog .site-create-dialog__actions > .ui-button {
    width: 100%;
    justify-content: center;
  }
}
.ui-nav-item {
  color: var(--color-navy-600);
  background: transparent;
  transition: color 160ms ease, background-color 160ms ease;
}

.ui-nav-item:hover,
.ui-nav-item.is-active,
.ui-nav-item[aria-current=page] {
  color: var(--color-primary-hover);
  background: var(--color-primary-soft-subtle);
}

.ui-nav-item:focus-visible,
.ui-tab:focus-visible,
.ui-segmented__item:focus-visible {
  outline: 0;
  box-shadow: inset 0 0 0 2px var(--color-control-border-focus);
}

.ui-tabs {
  display: flex;
  gap: var(--space-5);
  overflow-x: auto;
  overflow-y: hidden;
  border-bottom: 1px solid var(--color-border-soft);
  scrollbar-width: none;
}

.ui-tabs::-webkit-scrollbar {
  display: none;
}

.ui-tab {
  position: relative;
  min-height: 2.8rem;
  padding: 0 var(--space-2);
  color: var(--color-text-secondary);
  background: transparent;
  border: 0;
  font: inherit;
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  white-space: nowrap;
  cursor: pointer;
}

.ui-tab::after {
  content: "";
  position: absolute;
  inset: auto 0 -1px;
  height: 2px;
  background: transparent;
}

.ui-tab:hover,
.ui-tab.is-active,
.ui-tab[aria-selected=true] {
  color: var(--color-primary-hover);
}

.ui-tab.is-active::after,
.ui-tab[aria-selected=true]::after {
  background: var(--color-primary);
}

.ui-segmented {
  display: inline-flex;
  overflow: hidden;
  background: var(--color-control-bg);
  border: 1px solid var(--color-control-border);
  border-radius: var(--radius-md);
}

.ui-segmented__item {
  min-width: 5rem;
  min-height: 2.75rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: 0.55rem var(--space-3);
  color: var(--color-control-text);
  background: transparent;
  border: 0;
  font: inherit;
  font-size: var(--text-sm);
  cursor: pointer;
  transition: background-color 140ms ease, color 140ms ease;
}

.ui-segmented__item:hover:not(:disabled) {
  color: var(--color-navy-900);
  background: var(--color-surface-hover);
}

.ui-segmented__item:disabled {
  opacity: var(--opacity-disabled);
  cursor: not-allowed;
}

.ui-segmented__item.is-active,
.ui-segmented__item[aria-pressed=true] {
  color: var(--color-primary-on);
  background: var(--color-primary);
}

.ui-segmented__item.is-active:hover:not(:disabled),
.ui-segmented__item[aria-pressed=true]:hover:not(:disabled) {
  color: var(--color-primary-on);
  background: var(--color-primary-hover);
}

.ui-menu {
  min-width: 8.5rem;
  display: grid;
  gap: var(--space-1);
  padding: 0.35rem;
  background: var(--color-surface);
  border: 1px solid var(--color-border-soft);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-float);
}

.ui-menu[hidden] {
  display: none;
}

.ui-menu-item {
  width: 100%;
  min-height: 2.5rem;
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: 0.55rem 0.65rem;
  color: var(--color-text-secondary);
  background: transparent;
  border: 0;
  border-radius: var(--radius-sm);
  text-align: left;
  font: inherit;
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  cursor: pointer;
}

.ui-menu-item:hover,
.ui-menu-item:focus-visible,
.ui-menu-item.is-selected {
  outline: 0;
  color: var(--color-primary-hover);
  background: var(--color-primary-soft-subtle);
}

.ui-menu-item--danger {
  color: var(--color-error-text);
}

.ui-menu-item--danger:hover,
.ui-menu-item--danger:focus-visible {
  color: var(--color-error-hover);
  background: var(--color-error-soft);
}

.ui-scrollbar {
  --ui-scrollbar-size: 0.3125rem;
  --ui-scrollbar-inset: 0.625rem;
  --ui-scrollbar-thumb: var(--color-primary-border-emphasis);
  --ui-scrollbar-thumb-hover: var(--color-primary);
  scrollbar-width: thin;
  scrollbar-color: var(--ui-scrollbar-thumb) transparent;
}

.ui-scrollbar--y {
  overflow-y: auto;
  overscroll-behavior-y: contain;
}

.ui-scrollbar--x {
  overflow-x: auto;
  overscroll-behavior-x: contain;
}

.ui-scrollbar::-webkit-scrollbar {
  width: var(--ui-scrollbar-size);
  height: var(--ui-scrollbar-size);
}

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

.ui-scrollbar--y::-webkit-scrollbar-track {
  margin-block: var(--ui-scrollbar-inset);
}

.ui-scrollbar--x::-webkit-scrollbar-track {
  margin-inline: var(--ui-scrollbar-inset);
}

.ui-scrollbar::-webkit-scrollbar-thumb {
  min-width: 2rem;
  min-height: 2rem;
  background: var(--ui-scrollbar-thumb);
  border-radius: var(--radius-pill);
}

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

.ui-scrollbar::-webkit-scrollbar-corner {
  background: transparent;
}

.ui-scrollbar::-webkit-scrollbar-button,
.ui-scrollbar::-webkit-scrollbar-button:single-button,
.ui-scrollbar::-webkit-scrollbar-button:vertical,
.ui-scrollbar::-webkit-scrollbar-button:horizontal,
.ui-scrollbar::-webkit-scrollbar-button:start,
.ui-scrollbar::-webkit-scrollbar-button:end {
  width: 0;
  height: 0;
  display: none;
  background: transparent;
}

.page-header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 24px;
}
.page-header__copy {
  display: grid;
  gap: 8px;
}
.page-header__copy::before {
  content: "Workspace";
  color: var(--color-primary);
  font-family: var(--font-mono);
  font-size: var(--text-2xs);
  font-weight: var(--weight-extrabold);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
}

.form-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  padding-top: 4px;
}

.section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 16px;
}

.auth-body {
  min-height: 100vh;
  color: var(--color-text-primary);
  background: var(--color-surface-muted);
  transition: background-color 700ms ease, color 700ms ease;
}

.auth-shell {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
}

[data-auth-guarded] {
  visibility: hidden;
}

[data-auth-guarded][data-auth-ready=true] {
  visibility: visible;
}

.auth-error {
  margin-bottom: var(--space-4);
}

.auth-form {
  display: grid;
  gap: 20px;
}

/* Login */
.auth-login-page {
  width: min(var(--content-max), 100%);
  min-height: min(53.75rem, 100dvh - 2rem);
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(26rem, 0.92fr);
  overflow: hidden;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-panel);
}

.auth-login-hero {
  position: relative;
  min-height: 720px;
  overflow: hidden;
  background: var(--color-surface-brand-soft);
}

.auth-login-hero__image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.auth-login-hero__overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: flex-start;
  padding: clamp(48px, 6vw, 88px);
  background: linear-gradient(100deg, var(--color-hero-overlay-strong) 0%, var(--color-hero-overlay-medium) 40%, var(--color-hero-overlay-soft) 62%, var(--color-hero-overlay-clear) 100%);
}

.auth-login-hero__copy {
  width: min(35rem, 100%);
}

.auth-login-hero h1 {
  margin: 0;
  color: var(--color-navy-900);
  font-size: var(--text-display);
  font-weight: var(--weight-extrabold);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
}

.auth-login-hero__title-line {
  display: block;
}

.auth-login-hero__title-accent {
  color: var(--color-primary);
}

.auth-login-content {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(44px, 5vw, 80px);
  background: var(--color-surface);
}

.auth-language {
  position: absolute;
  top: 28px;
  right: 30px;
  z-index: 2;
}

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

.auth-login-form-wrap {
  width: min(100%, 30rem);
  min-width: 0;
}

.auth-login-brand {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 64px;
}

.auth-login-brand > img {
  width: 48px;
  height: 54px;
}

.auth-login-brand > div {
  display: grid;
  gap: 6px;
}

.auth-login-brand strong {
  color: var(--color-navy-900);
  font-size: var(--text-2xl);
  font-weight: var(--weight-extrabold);
  line-height: 1;
  letter-spacing: var(--tracking-tight);
}

.auth-login-brand strong span {
  color: var(--color-navy-600);
  font-weight: var(--weight-regular);
}

.auth-login-brand small {
  color: var(--color-navy-500);
  font-size: var(--text-2xs);
  font-weight: var(--weight-extrabold);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
}

.auth-login-heading {
  margin-bottom: 34px;
}

.auth-login-heading h2 {
  margin: 0;
  color: var(--color-navy-900);
  font-size: var(--text-2xl);
  font-weight: var(--weight-extrabold);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
}

.auth-login-heading p {
  margin: 0.5rem 0 0;
  color: var(--color-navy-500);
  font-size: var(--text-base);
  line-height: var(--leading-normal);
}

.auth-form--login {
  gap: 22px;
}

.auth-login-access {
  margin-top: 28px;
  padding-top: 26px;
  color: var(--color-navy-500);
  text-align: center;
  border-top: 1px solid var(--color-navy-200);
}

.auth-login-access p {
  margin: 0;
  font-size: var(--text-xs);
}

.auth-contact-link svg {
  flex: 0 0 auto;
}

.auth-login-backend {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  margin-top: var(--space-4);
  color: var(--color-text-tertiary);
  font-size: var(--text-sm);
}

.auth-login-backend strong {
  overflow-wrap: anywhere;
}

@media (max-width: 74rem) {
  .auth-shell {
    padding: 0.75rem;
  }
  .auth-login-page {
    min-height: min(46rem, 100dvh - 1.5rem);
    grid-template-columns: minmax(0, 0.9fr) minmax(23rem, 1fr);
    border-radius: var(--radius-lg);
  }
  .auth-login-hero {
    min-height: 42rem;
  }
  .auth-login-hero__overlay {
    padding: 2.5rem;
  }
  .auth-login-hero h1 {
    font-size: var(--text-4xl);
  }
  .auth-login-content {
    padding: 2.5rem;
  }
  .auth-language {
    top: 1.25rem;
    right: 1.25rem;
  }
  .auth-login-form-wrap {
    width: min(100%, 27rem);
  }
  .auth-login-brand {
    gap: 0.875rem;
    margin-bottom: 2.75rem;
  }
  .auth-login-brand > img {
    width: 2.625rem;
    height: auto;
  }
  .auth-login-brand strong {
    font-size: var(--text-xl);
  }
  .auth-login-heading {
    margin-bottom: 1.75rem;
  }
  .auth-form--login {
    gap: 1.125rem;
  }
  .auth-form--login .auth-field input {
    min-height: 3.125rem;
    padding-block: 0.7rem;
    padding-left: 0.875rem;
  }
  .auth-form--login .auth-primary-button {
    min-height: 3.25rem;
  }
  .auth-login-access {
    margin-top: 1.5rem;
    padding-top: 1.375rem;
  }
}
@media (max-width: 51.25rem) {
  .auth-body {
    background: var(--color-surface);
  }
  .auth-shell {
    min-height: 100dvh;
    display: block;
    padding: 0;
  }
  .auth-login-page {
    width: 100%;
    min-height: 100dvh;
    display: block;
    overflow: visible;
    background: transparent;
    border: 0;
    border-radius: 0;
    box-shadow: none;
  }
  .auth-login-hero {
    display: none;
  }
  .auth-login-content {
    min-height: 100dvh;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    align-content: start;
    padding: 4.75rem clamp(1.25rem, 6vw, 2.25rem) 2.25rem;
    background: transparent;
  }
  .auth-language {
    position: absolute;
    top: 1rem;
    right: clamp(1.25rem, 6vw, 2.25rem);
    z-index: 10;
    margin: 0;
  }
  .auth-login-form-wrap {
    width: 100%;
  }
  .auth-login-brand {
    margin-bottom: clamp(2rem, 8vw, 2.75rem);
  }
  .auth-login-heading h2 {
    font-size: var(--text-xl);
  }
  .auth-login-heading p {
    font-size: var(--text-sm);
  }
}
@media (max-width: 26.5625rem) {
  .auth-login-content {
    padding: 4.5rem 1.125rem 2rem;
  }
  .auth-language {
    top: 0.875rem;
    right: 1.125rem;
  }
  .auth-login-brand {
    gap: 0.75rem;
  }
  .auth-login-brand > img {
    width: 2.625rem;
    height: auto;
  }
  .auth-login-brand strong {
    font-size: var(--text-xl);
  }
  .auth-login-brand small {
    font-size: var(--text-xs);
    letter-spacing: var(--tracking-wide);
  }
  .auth-login-heading {
    margin-bottom: 1.5rem;
  }
  .auth-login-heading h2 {
    font-size: var(--text-xl);
  }
  .auth-form--login {
    gap: 1rem;
  }
  .auth-form--login .auth-field > span {
    font-size: var(--text-xs);
  }
  .auth-form--login .auth-field input {
    min-height: 3.125rem;
    font-size: var(--text-sm);
  }
  .auth-form--login .auth-primary-button {
    min-height: 3.125rem;
    font-size: var(--text-sm);
  }
  .auth-login-access {
    margin-top: 1.5rem;
    padding-top: 1.25rem;
  }
}
@media (max-width: 22.4375rem) {
  .auth-login-content {
    padding: 4.25rem 1rem 1.75rem;
  }
  .auth-language {
    top: 0.75rem;
    right: 1rem;
  }
  .auth-login-brand {
    gap: 0.65rem;
    margin-bottom: 1.75rem;
  }
  .auth-login-brand > img {
    width: 2.375rem;
  }
  .auth-login-brand small {
    max-width: 11rem;
    line-height: var(--leading-snug);
  }
  .auth-login-heading {
    margin-bottom: 1.25rem;
  }
  .auth-login-heading h2 {
    font-size: var(--text-xl);
  }
  .auth-login-heading p,
  .auth-login-access p {
    font-size: var(--text-sm);
  }
  .auth-form--login .auth-field input {
    min-height: 3rem;
    padding-left: 0.75rem;
  }
  .auth-form--login .ui-input-group__action {
    width: 2.25rem;
    height: 2.25rem;
  }
  .auth-form--login .auth-primary-button {
    min-height: 3rem;
  }
}
.site-picker-page {
  width: min(var(--content-max), 100%);
  min-height: min(52rem, 100dvh - 2rem);
  display: grid;
  grid-template-rows: auto 1fr auto;
  overflow: hidden;
  background: linear-gradient(180deg, var(--color-image-wash-soft), var(--color-surface-glass-max) 36rem), var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: 0 1.75rem 4rem var(--color-shadow-deep), 0 0.5rem 1.5rem var(--color-shadow-soft);
}

.site-picker-header {
  position: relative;
  z-index: 4;
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding: var(--space-5) var(--content-gutter);
}

.site-picker-brand {
  min-width: 0;
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
}

.site-picker-brand > img {
  width: 2rem;
  height: auto;
}

.site-picker-brand__wordmark {
  color: var(--color-navy-900);
  font-size: var(--text-lg);
  font-weight: var(--weight-extrabold);
  line-height: 1;
  letter-spacing: var(--tracking-tight);
  white-space: nowrap;
}

.site-picker-brand__wordmark em {
  color: var(--color-navy-600);
  font-style: normal;
  font-weight: var(--weight-regular);
}

.site-picker-account__divider {
  width: 1px;
  align-self: stretch;
  min-height: 2rem;
  background: var(--color-navy-300);
}

.site-picker-account {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: 0.25rem 0.35rem 0.25rem 0.45rem;
  background: var(--color-surface-glass-light);
  border: 1px solid var(--color-border-glass);
  border-radius: var(--radius-pill);
  box-shadow: 0 0.35rem 1rem var(--color-shadow-soft);
}

.site-picker-language .ui-language__trigger {
  min-height: 2.25rem;
  gap: 0.4rem;
  padding: 0 0.6rem;
  color: var(--color-navy-600);
  background: transparent;
  border-color: transparent;
  border-radius: var(--radius-pill);
  box-shadow: none;
  font-size: var(--text-sm);
}

.site-picker-language .ui-language__trigger:hover {
  color: var(--color-primary-hover);
  background: var(--color-primary-subtle);
  border-color: transparent;
}

.site-picker-language .ui-language__trigger > svg:first-child {
  color: var(--color-navy-500);
}

.site-picker-language .ui-language__trigger:hover > svg:first-child {
  color: var(--color-primary);
}

.site-picker-user {
  min-width: 0;
  display: inline-flex;
  align-items: center;
  gap: 0.625rem;
}

.site-picker-avatar {
  width: 2.125rem;
  height: 2.125rem;
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  color: var(--color-primary-hover);
  background: var(--color-primary-soft-medium);
  border: 1px solid var(--color-primary-soft-hover);
  border-radius: var(--radius-pill);
  font-size: var(--text-sm);
  font-weight: var(--weight-bold);
}

.site-picker-user__name {
  max-width: 12rem;
  overflow: hidden;
  color: var(--color-navy-700);
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.site-picker-account__divider {
  align-self: center;
  min-height: 1.5rem;
  background: var(--color-divider-muted);
}

.site-picker-main {
  position: relative;
  min-width: 0;
  padding: 0 var(--content-gutter) var(--space-8);
}

.site-picker-main::before {
  content: "";
  position: absolute;
  inset: -5rem 0 auto 38%;
  z-index: 0;
  height: 20rem;
  background: linear-gradient(90deg, var(--color-surface) 0%, var(--color-surface-glass-medium) 23%, var(--color-image-wash-faint) 62%), linear-gradient(180deg, var(--color-image-wash-clear), var(--color-surface) 94%), url("/static/images/sites/site-selection-hero.webp") center/cover no-repeat;
  opacity: 0.88;
  pointer-events: none;
}

.site-picker-hero,
.site-picker-toolbar,
.site-picker-error,
.site-picker-grid,
.site-picker-continue {
  position: relative;
  z-index: 1;
}

/* Toolbar menus must sit above the Site grid so every option remains pointer-interactive. */
.site-picker-toolbar {
  z-index: 3;
}

.site-picker-hero {
  min-height: 10rem;
  display: flex;
  align-items: center;
}

.site-picker-hero__copy {
  width: min(38rem, 100%);
}

.site-picker-hero h1 {
  margin: 0;
  color: var(--color-navy-900);
  font-size: var(--text-3xl);
  font-weight: var(--weight-bold);
  line-height: 1;
  letter-spacing: var(--tracking-tight);
}

.site-picker-hero p {
  max-width: 38rem;
  margin: var(--space-2) 0 0;
  color: var(--color-text-secondary);
  font-size: var(--text-base);
  line-height: var(--leading-normal);
}

.site-picker-toolbar {
  display: grid;
  grid-template-columns: minmax(14rem, 1fr) minmax(10rem, 12rem) auto auto;
  gap: var(--space-3);
  align-items: center;
  margin-bottom: var(--space-4);
}

.site-picker-search,
.site-picker-filter {
  position: relative;
  min-width: 0;
}

.site-picker-count {
  min-height: 2.25rem;
  display: inline-flex;
  align-items: center;
  justify-self: end;
  padding-inline: var(--space-2);
  color: var(--color-muted);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  line-height: 1;
  white-space: nowrap;
}

.site-picker-error {
  margin: 0 0 1rem;
}

.site-picker-grid {
  min-width: 0;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space-3);
}

.site-picker-card {
  min-width: 0;
  display: grid;
  grid-template-rows: 6rem 1fr;
  padding: var(--space-2);
  color: var(--color-text);
  text-align: left;
}

.site-picker-card[data-selected=true] {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 1px var(--color-primary), 0 0.75rem 2rem var(--color-primary-soft);
}

.site-picker-card:focus-visible {
  outline: 0;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 0.25rem var(--color-primary-soft-strong);
}

.site-picker-card__media {
  position: relative;
  min-width: 0;
  overflow: hidden;
  display: block;
  border-radius: var(--radius-sm);
  background: var(--color-surface-brand-soft);
}

.site-picker-card__media > img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

.site-picker-card__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, var(--color-shadow-faint), var(--color-shadow-strong));
  pointer-events: none;
}

.site-picker-card__selected {
  position: absolute;
  top: 0.55rem;
  right: 0.55rem;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  min-height: 1.75rem;
  padding: 0.3rem 0.65rem;
  color: var(--color-primary-hover);
  background: var(--color-primary-tint);
  border: 1px solid var(--color-primary-soft-hover);
  border-radius: var(--radius-pill);
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
}

.site-picker-card__body {
  min-width: 0;
  display: grid;
  gap: 0.3rem;
  padding: 0.75rem 0.25rem 0.15rem;
}

.site-picker-card__body > strong {
  overflow: hidden;
  font-size: var(--text-base);
  font-weight: var(--weight-bold);
  line-height: var(--leading-snug);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.site-picker-card__footer {
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  margin-top: 0.5rem;
  padding-top: 0.65rem;
  border-top: 1px solid var(--color-navy-200);
}

.site-picker-card__detail {
  min-width: 0;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  color: var(--color-text-secondary);
  font-size: var(--text-sm);
}

.site-picker-card__action {
  width: 2rem;
  height: 2rem;
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  color: var(--color-primary);
  background: var(--color-teal-50);
  border-radius: var(--radius-pill);
}

.site-picker-loading,
.site-picker-empty {
  grid-column: 1/-1;
  min-height: 10rem;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 0.65rem;
  color: var(--color-navy-500);
  text-align: center;
}

.site-picker-loading {
  grid-template-columns: 1fr;
  min-height: 12rem;
  gap: var(--space-2);
}

.site-picker-loading__dot {
  width: 0.5rem;
  height: 0.5rem;
  background: var(--color-primary);
  border-radius: var(--radius-pill);
  box-shadow: 0 0 0 0.3rem var(--color-primary-soft-medium);
}

.site-picker-empty__icon {
  width: 3rem;
  height: 3rem;
  display: grid;
  place-items: center;
  color: var(--color-primary);
  background: var(--color-teal-50);
  border-radius: var(--radius-md);
}

.site-picker-empty strong {
  color: var(--color-navy-700);
  font-size: var(--text-base);
}

.site-picker-empty > span:last-child {
  max-width: 24rem;
  font-size: var(--text-sm);
}

.site-picker-continue {
  display: grid;
  justify-items: center;
  gap: 0.6rem;
  margin-top: var(--space-4);
}

.site-picker-continue__button {
  min-width: min(15rem, 100%);
  min-height: 2.5rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.65rem;
  padding: 0.625rem var(--space-5);
  color: var(--color-surface);
  background: var(--color-primary);
  border: 0;
  border-radius: var(--radius-sm);
  box-shadow: 0 0.5rem 1.25rem var(--color-primary-soft-hover);
  font-size: var(--text-sm);
  font-weight: var(--weight-bold);
  cursor: pointer;
}

.site-picker-continue__button:disabled {
  color: var(--color-navy-400);
  background: var(--color-navy-200);
  box-shadow: none;
  cursor: not-allowed;
}

.site-picker-continue > span {
  color: var(--color-text-tertiary);
  font-size: var(--text-xs);
  text-align: center;
}

.site-picker-footer {
  display: flex;
  justify-content: space-between;
  padding: var(--space-4) var(--content-gutter) var(--space-5);
  color: var(--color-text-tertiary);
  font-size: var(--text-xs);
}

@media (max-width: 64rem) {
  .site-picker-page {
    --text-xs: clamp(0.7rem, calc(0.68rem + 0.1vw), 0.76rem);
    --text-sm: clamp(0.78rem, calc(0.75rem + 0.14vw), 0.875rem);
    --text-base: clamp(0.875rem, calc(0.84rem + 0.18vw), 0.975rem);
    --text-lg: clamp(1rem, calc(0.95rem + 0.24vw), 1.125rem);
    --text-xl: clamp(1.125rem, calc(1.04rem + 0.4vw), 1.375rem);
    --text-2xl: clamp(1.375rem, calc(1.2rem + 0.7vw), 1.75rem);
    --text-3xl: clamp(1.75rem, calc(1.42rem + 1.15vw), 2.35rem);
    --content-gutter: clamp(1rem, 2vw, 1.5rem);
  }
  .site-picker-header {
    padding-block: var(--space-4);
  }
  .site-picker-hero {
    min-height: 8.75rem;
  }
  .site-picker-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .site-picker-card__open {
    grid-template-rows: 5.5rem 1fr;
  }
  .site-picker-main::before {
    inset-inline-start: 30%;
    height: 18rem;
  }
  .site-create-dialog__panel,
  .site-edit-dialog__panel {
    gap: var(--space-4);
    padding: var(--space-5);
  }
}
@media (max-width: 51.25rem) {
  .site-picker-page {
    --text-xs: 0.7rem;
    --text-sm: clamp(0.75rem, calc(0.72rem + 0.16vw), 0.825rem);
    --text-base: clamp(0.84rem, calc(0.8rem + 0.2vw), 0.925rem);
    --text-lg: clamp(0.96rem, calc(0.9rem + 0.3vw), 1.05rem);
    --text-xl: clamp(1.08rem, calc(1rem + 0.45vw), 1.25rem);
    --text-2xl: clamp(1.25rem, calc(1.12rem + 0.7vw), 1.55rem);
    --text-3xl: clamp(1.6rem, calc(1.35rem + 1.2vw), 2rem);
    min-height: 100dvh;
    border: 0;
    border-radius: 0;
    box-shadow: none;
  }
  .site-picker-main::before {
    inset: -4rem -8rem auto 16%;
    height: 22rem;
  }
  .site-picker-header {
    gap: var(--space-3);
    padding: 0.9rem 1.25rem;
  }
  .site-picker-brand {
    gap: 0.6rem;
  }
  .site-picker-brand > img {
    width: 1.75rem;
  }
  .site-picker-account {
    gap: 0.35rem;
    padding: 0.2rem 0.3rem;
  }
  .site-picker-avatar {
    width: 1.95rem;
    height: 1.95rem;
  }
  .site-picker-user__name,
  .site-picker-account__divider {
    display: none;
  }
  .site-picker-main {
    padding-inline: 1.25rem;
  }
  .site-picker-hero {
    min-height: 7.75rem;
  }
  .site-picker-hero p {
    margin-top: 0.4rem;
  }
  .site-picker-toolbar {
    grid-template-columns: minmax(0, 1fr) minmax(11rem, 13rem) auto;
  }
  .site-picker-count {
    grid-column: 1/-1;
    justify-self: end;
  }
}
@media (max-width: 40rem) {
  .site-picker-page {
    --text-sm: 0.75rem;
    --text-base: clamp(0.82rem, calc(0.78rem + 0.22vw), 0.9rem);
    --text-xl: clamp(1.04rem, calc(0.98rem + 0.4vw), 1.18rem);
    --text-3xl: clamp(1.5rem, calc(1.3rem + 1vw), 1.85rem);
  }
  .site-picker-grid {
    grid-template-columns: 1fr;
    gap: var(--space-2);
  }
  .site-picker-card {
    grid-template-rows: 5.75rem 1fr;
  }
  .site-picker-card__open {
    grid-template-rows: 5.75rem 1fr;
  }
  .site-picker-card__body {
    padding-top: 0.6rem;
  }
  .site-picker-card__footer {
    margin-top: 0.35rem;
    padding-top: 0.5rem;
  }
  .site-picker-toolbar {
    grid-template-columns: 1fr;
    gap: var(--space-2);
    margin-bottom: var(--space-3);
  }
  .site-picker-search input,
  .ui-select__trigger,
  .site-picker-add {
    min-height: 2.75rem;
  }
  .site-picker-count {
    grid-column: auto;
    justify-self: start;
  }
  .site-picker-account {
    gap: 0.45rem;
  }
  .site-picker-language .ui-language__trigger {
    min-width: 0;
  }
  .site-picker-signout span {
    display: none;
  }
}
@media (max-width: 26.5625rem) {
  .site-picker-page {
    --text-xs: 0.6875rem;
    --text-sm: 0.75rem;
    --text-base: 0.8125rem;
    --text-xl: 1.025rem;
    --text-3xl: clamp(1.4rem, calc(1.25rem + 0.9vw), 1.7rem);
    --content-gutter: 1rem;
  }
  .site-picker-header {
    padding: 0.75rem 1rem;
  }
  .site-picker-brand > img {
    width: 1.625rem;
  }
  .site-picker-brand__wordmark {
    font-size: var(--text-base);
  }
  .site-picker-avatar {
    width: 1.875rem;
    height: 1.875rem;
  }
  .site-picker-main {
    padding-inline: 1rem;
  }
  .site-picker-main::before {
    inset-inline-start: 0;
    opacity: 0.5;
  }
  .site-picker-hero {
    min-height: 7rem;
  }
  .site-picker-hero p {
    font-size: var(--text-base);
    line-height: var(--leading-normal);
  }
  .site-picker-card {
    grid-template-rows: 5.25rem 1fr;
  }
  .site-picker-card__open {
    grid-template-rows: 5.25rem 1fr;
    padding: 0.4rem;
  }
  .site-picker-card__edit {
    top: 0.65rem;
    right: 0.65rem;
    width: 1.875rem;
    height: 1.875rem;
  }
  .site-picker-main {
    padding-bottom: var(--space-5);
  }
  .site-picker-footer {
    padding: var(--space-3) 1rem var(--space-4);
  }
  .site-create-dialog__panel,
  .site-edit-dialog__panel {
    gap: var(--space-3);
    padding: var(--space-4);
  }
}
.site-create-dialog {
  width: min(34rem, 100vw - 2rem);
  max-height: min(44rem, 100dvh - 2rem);
}

.site-create-dialog__fields {
  display: grid;
  gap: var(--space-4);
}

.site-create-image {
  display: grid;
  gap: var(--space-2);
}

.site-create-image__label {
  color: var(--color-label);
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
}

.site-create-image__preview {
  position: relative;
  overflow: hidden;
  aspect-ratio: 16/7;
  background: var(--color-surface-brand-soft);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
}

.site-create-image__preview img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

.site-create-image__controls {
  position: absolute;
  right: var(--space-3);
  bottom: var(--space-3);
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--space-2);
  flex-wrap: wrap;
}

.site-create-image__upload input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

.site-create-image small {
  color: var(--color-muted);
  font-size: var(--text-xs);
  line-height: var(--leading-normal);
}

.site-create-dialog__error {
  margin: 0;
}

.site-create-dialog__submit:disabled {
  opacity: 0.6;
  cursor: wait;
}

@media (max-width: 40rem) {
  .site-picker-add {
    width: 100%;
  }
}
@media (max-width: 26.5625rem) {
  .site-create-dialog {
    width: calc(100vw - 1rem);
    max-height: calc(100dvh - 1rem);
  }
  .site-create-dialog__cancel,
  .site-create-dialog__submit {
    width: 100%;
  }
}
.site-delete-dialog {
  width: min(30rem, 100vw - 2rem);
}

.site-delete-dialog__icon {
  width: 2.75rem;
  height: 2.75rem;
  display: grid;
  place-items: center;
  color: var(--color-error-text);
  background: var(--color-error-soft);
  border-radius: var(--radius-md);
}

.site-delete-dialog__content {
  min-width: 0;
}

.site-delete-dialog__content h2 {
  margin: 0;
  color: var(--color-navy-900);
  font-size: var(--text-lg);
  font-weight: var(--weight-extrabold);
  line-height: var(--leading-snug);
}

.site-delete-dialog__content > p {
  margin: var(--space-2) 0 0;
  color: var(--color-muted);
  font-size: var(--text-sm);
  line-height: var(--leading-relaxed);
}

.site-delete-dialog__retention {
  padding: var(--space-3);
  background: var(--color-navy-50);
  border: 1px solid var(--color-border-soft);
  border-radius: var(--radius-sm);
  font-size: var(--text-xs) !important;
}

.site-delete-dialog__error {
  margin-top: var(--space-3) !important;
}

.site-delete-dialog__actions {
  display: flex;
  justify-content: flex-end;
  gap: var(--space-2);
  margin-top: var(--space-5);
}

.site-delete-dialog__confirm:hover {
  background: var(--color-error-hover);
}

.site-delete-dialog__confirm:disabled {
  opacity: 0.6;
  cursor: wait;
}

@media (max-width: 26.5625rem) {
  .site-delete-dialog {
    width: calc(100vw - 1rem);
  }
  .site-delete-dialog__panel {
    grid-template-columns: 1fr;
    padding: var(--space-5);
  }
  .site-delete-dialog__actions {
    flex-direction: column-reverse;
  }
  .site-delete-dialog__cancel,
  .site-delete-dialog__confirm {
    width: 100%;
  }
}
/* Site card navigation + management */
.site-picker-card {
  position: relative;
  display: block;
  padding: 0;
}

.site-picker-card__open {
  width: 100%;
  min-width: 0;
  display: grid;
  grid-template-rows: 6rem 1fr;
  padding: var(--space-2);
  color: inherit;
  text-align: left;
  background: transparent;
  border: 0;
  cursor: pointer;
}

.site-picker-card__open:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: -2px;
  border-radius: var(--radius-md);
}

.site-picker-card__edit {
  position: absolute;
  top: var(--space-3);
  right: var(--space-3);
  z-index: 3;
}

/* Pagination only appears when the filtered result exceeds one page. */
.site-picker-pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-3);
  margin-top: var(--space-5);
}

.site-picker-pagination span {
  color: var(--color-muted);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
}

/* Edit Site modal owns editing and deletion. */
.site-edit-dialog {
  width: min(34rem, 100vw - 2rem);
  max-height: min(46rem, 100dvh - 2rem);
}

.site-edit-dialog__fields {
  display: grid;
  gap: var(--space-4);
}

.site-edit-dialog__error {
  margin: 0;
}

.site-edit-dialog__actions-main {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

@media (max-width: 26.5625rem) {
  .site-picker-card__open {
    grid-template-rows: 5.25rem 1fr;
  }
  .site-edit-dialog {
    width: calc(100vw - 1rem);
  }
  .site-edit-dialog__actions {
    align-items: stretch;
    flex-direction: column;
  }
  .site-edit-dialog__actions-main {
    display: grid;
  }
  .site-edit-dialog__delete-link,
  .site-edit-dialog__cancel,
  .site-edit-dialog__submit {
    width: 100%;
    justify-content: center;
  }
}
@media (max-width: 22.4375rem) {
  .site-picker-page {
    --text-base: 0.8rem;
    --text-3xl: 1.35rem;
  }
  .site-picker-brand__wordmark {
    display: none;
  }
  .site-picker-header {
    gap: 0.5rem;
  }
  .site-picker-account {
    margin-left: auto;
  }
  .site-picker-language .ui-language__trigger {
    padding-inline: 0.55rem;
  }
  .site-picker-main {
    padding-inline: 0.875rem;
  }
  .site-picker-hero {
    min-height: 6.5rem;
  }
  .site-picker-toolbar {
    gap: 0.45rem;
  }
  .site-picker-card__open {
    grid-template-rows: 4.9rem 1fr;
  }
  .site-picker-footer {
    padding-inline: 0.875rem;
  }
  .site-picker-card__body > strong,
  .site-picker-card__meta {
    white-space: normal;
    overflow-wrap: anywhere;
  }
}
.room-picker-page {
  position: relative;
  width: min(var(--content-max), 100%);
  min-height: min(54rem, 100dvh - 2rem);
  display: grid;
  grid-template-rows: auto 1fr auto;
  overflow: hidden;
  background: linear-gradient(180deg, var(--color-surface-page) 0%, var(--color-surface) 52%);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-page);
}

.room-picker-page::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  z-index: 0;
  height: 31rem;
  background: linear-gradient(90deg, var(--color-page-overlay-strong) 0%, var(--color-page-overlay-medium) 24%, var(--color-page-overlay-soft) 52%, var(--color-page-overlay-clear) 78%), linear-gradient(180deg, var(--color-image-wash-clear) 0%, var(--color-image-wash-faint) 58%, var(--color-surface) 100%), url("/static/images/sites/site-selection-hero.webp") center top/cover no-repeat;
  opacity: 0.9;
  pointer-events: none;
}

.room-picker-header,
.room-picker-main,
.room-picker-footer {
  position: relative;
  z-index: 1;
}

.room-picker-main {
  position: relative;
  min-width: 0;
  padding: 0 var(--content-gutter) var(--space-8);
}

.room-picker-hero,
.room-picker-site-card,
.room-picker-toolbar,
.room-picker-error,
.room-picker-results-head,
.room-picker-grid,
.room-picker-pagination {
  position: relative;
  z-index: 1;
}

.room-picker-hero {
  min-height: 11rem;
  display: grid;
  align-content: center;
  gap: var(--space-4);
}

.room-picker-back {
  width: fit-content;
}

.room-picker-hero__copy {
  width: min(42rem, 100%);
}

.room-picker-hero h1 {
  margin: 0;
  color: var(--color-navy-900);
  font-size: var(--text-3xl);
  font-weight: var(--weight-bold);
  line-height: 1;
  letter-spacing: var(--tracking-tight);
}

.room-picker-hero p {
  max-width: 44rem;
  margin: var(--space-2) 0 0;
  color: var(--color-text-secondary);
  font-size: var(--text-base);
  line-height: var(--leading-normal);
}

.room-picker-site-card {
  min-width: 0;
  display: grid;
  grid-template-columns: 9rem minmax(0, 1fr) minmax(12rem, 16rem);
  align-items: center;
  gap: var(--space-5);
  margin-bottom: var(--space-5);
}

.room-picker-site-card > img {
  width: 9rem;
  height: 5.75rem;
  object-fit: cover;
  border-radius: var(--radius-md);
}

.room-picker-site-card__copy {
  min-width: 0;
  display: grid;
  gap: var(--space-2);
}

.room-picker-site-card__title-row {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: var(--space-3);
  flex-wrap: wrap;
}

.room-picker-site-card__title-row strong {
  min-width: 0;
  overflow: hidden;
  color: var(--color-navy-900);
  font-size: var(--text-lg);
  font-weight: var(--weight-extrabold);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.room-picker-site-card__meta {
  color: var(--color-navy-500);
  font-size: var(--text-sm);
}

.room-picker-site-card__message {
  min-width: 0;
  display: grid;
  gap: var(--space-3);
  padding-left: var(--space-6);
  color: var(--color-navy-500);
  border-left: 1px solid var(--color-border-cool-soft);
  font-size: var(--text-base);
  line-height: var(--leading-normal);
}

.room-picker-site-card__message i {
  width: 2rem;
  height: 2px;
  background: var(--color-primary);
}

.room-picker-toolbar {
  z-index: 4;
  display: grid;
  grid-template-columns: minmax(14rem, 1fr) minmax(10rem, 12rem) auto;
  gap: var(--space-3);
  align-items: center;
  margin-bottom: var(--space-4);
}

.room-picker-search,
.room-picker-sort {
  position: relative;
  min-width: 0;
}

.room-picker-results-head {
  min-height: 2rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--space-3);
  color: var(--color-navy-600);
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
}

.room-picker-grid {
  min-width: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-3);
}

.room-picker-card {
  min-width: 0;
  min-height: 9rem;
}

.room-picker-card__open {
  width: 100%;
  min-height: 9rem;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-4);
  color: inherit;
  text-align: left;
  background: transparent;
  border: 0;
  cursor: pointer;
}

.room-picker-card__icon {
  width: 3.25rem;
  height: 3.25rem;
  display: grid;
  place-items: center;
  color: var(--color-primary-hover);
  background: var(--color-surface-primary-muted);
  border-radius: var(--radius-sm);
}

.room-picker-card__copy {
  min-width: 0;
  display: grid;
  gap: 0.3rem;
}

.room-picker-card__copy strong {
  overflow: hidden;
  color: var(--color-navy-900);
  font-size: var(--text-base);
  font-weight: var(--weight-bold);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.room-picker-card__copy span {
  overflow: hidden;
  color: var(--color-navy-500);
  font-size: var(--text-sm);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.room-picker-card__copy .room-picker-card__device-summary {
  min-width: 0;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.3rem 0.55rem;
  overflow: visible;
  color: var(--color-navy-500);
  font-size: var(--text-xs);
  line-height: var(--leading-snug);
  white-space: normal;
}

.room-picker-card__device-summary--muted {
  color: var(--color-navy-500);
}

.room-picker-card__device-summary--error {
  color: var(--color-error-text);
}

.room-picker-device-count {
  min-width: 0;
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  white-space: nowrap;
}

.room-picker-device-count__dot {
  width: 0.4rem;
  height: 0.4rem;
  flex: 0 0 auto;
  background: var(--color-navy-400);
  border-radius: 50%;
}

.room-picker-device-count--online {
  color: var(--color-success);
}

.room-picker-device-count--online .room-picker-device-count__dot {
  background: var(--color-success);
}

.room-picker-device-count--offline {
  color: var(--color-error-text);
}

.room-picker-device-count--offline .room-picker-device-count__dot {
  background: var(--color-error-text);
}

.room-picker-device-count--waiting {
  color: var(--color-navy-500);
}

.room-picker-device-count--waiting .room-picker-device-count__dot {
  background: var(--color-warning);
}

.room-picker-card__arrow {
  width: 2rem;
  height: 2rem;
  display: grid;
  place-items: center;
  color: var(--color-primary);
  background: var(--color-primary-soft);
  border-radius: var(--radius-pill);
}

.room-picker-card__edit {
  position: absolute;
  top: 0.75rem;
  right: 0.75rem;
  z-index: 2;
}

.room-picker-loading,
.room-picker-empty {
  grid-column: 1/-1;
  min-height: 12rem;
  display: grid;
  place-items: center;
  align-content: center;
  gap: var(--space-2);
  color: var(--color-navy-500);
  text-align: center;
}

.room-picker-empty__icon {
  width: 3rem;
  height: 3rem;
  display: grid;
  place-items: center;
  color: var(--color-primary);
  background: var(--color-primary-soft);
  border-radius: var(--radius-md);
}

.room-picker-empty strong {
  color: var(--color-navy-700);
  font-size: var(--text-base);
}

.room-picker-empty span:last-child {
  max-width: 24rem;
  font-size: var(--text-sm);
}

.room-picker-pagination {
  margin-top: var(--space-5);
}

.room-picker-footer {
  margin-top: auto;
}

.room-dialog {
  max-height: min(40rem, 100dvh - 2rem);
}

@media (max-width: 64rem) {
  .room-picker-page {
    --text-xs: clamp(0.7rem, calc(0.68rem + 0.1vw), 0.76rem);
    --text-sm: clamp(0.78rem, calc(0.75rem + 0.14vw), 0.875rem);
    --text-base: clamp(0.875rem, calc(0.84rem + 0.18vw), 0.975rem);
    --text-lg: clamp(1rem, calc(0.95rem + 0.24vw), 1.125rem);
    --text-xl: clamp(1.125rem, calc(1.04rem + 0.4vw), 1.375rem);
    --text-3xl: clamp(1.75rem, calc(1.42rem + 1.15vw), 2.35rem);
    --content-gutter: clamp(1rem, 2vw, 1.5rem);
  }
  .room-picker-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .room-picker-site-card {
    grid-template-columns: 7.5rem minmax(0, 1fr) minmax(10rem, 13rem);
  }
  .room-picker-site-card > img {
    width: 7.5rem;
    height: 5rem;
  }
}
@media (max-width: 51.25rem) {
  .room-picker-page {
    min-height: 100dvh;
    border: 0;
    border-radius: 0;
    box-shadow: none;
  }
  .room-picker-main {
    padding-inline: 1.25rem;
  }
  .room-picker-page::before {
    height: 28rem;
    opacity: 0.72;
  }
  .room-picker-hero {
    min-height: 9rem;
  }
  .room-picker-site-card {
    grid-template-columns: 6rem minmax(0, 1fr);
    gap: var(--space-3);
  }
  .room-picker-site-card > img {
    width: 6rem;
    height: 4.25rem;
  }
  .room-picker-site-card__message {
    display: none;
  }
  .room-picker-toolbar {
    grid-template-columns: minmax(0, 1fr) minmax(10rem, 12rem) auto;
  }
}
@media (max-width: 40rem) {
  .room-picker-page {
    --text-xs: 0.6875rem;
    --text-sm: 0.75rem;
    --text-base: clamp(0.82rem, calc(0.78rem + 0.22vw), 0.9rem);
    --text-lg: 1rem;
    --text-3xl: clamp(1.5rem, calc(1.3rem + 1vw), 1.85rem);
  }
  .room-picker-grid {
    grid-template-columns: 1fr;
    gap: var(--space-2);
  }
  .room-picker-toolbar {
    grid-template-columns: 1fr;
    gap: var(--space-2);
  }
  .room-picker-create {
    width: 100%;
  }
  .room-picker-site-card {
    margin-bottom: var(--space-4);
    padding: var(--space-3) 0;
    background: transparent;
    border: 0;
    border-radius: 0;
    box-shadow: none;
  }
  .room-picker-grid {
    gap: 0;
    border-top: 1px solid var(--color-border-soft);
    border-bottom: 1px solid var(--color-border-soft);
  }
  .room-picker-card {
    min-height: 0;
    background: transparent;
    border: 0;
    border-bottom: 1px solid var(--color-border-soft);
    border-radius: 0;
    box-shadow: none;
  }
  .room-picker-card:last-child {
    border-bottom: 0;
  }
  .room-picker-card:hover {
    background: var(--color-primary-wash);
    border-color: var(--color-border-soft);
    box-shadow: none;
    transform: none;
  }
  .room-picker-card__open {
    min-height: 5.75rem;
    padding: var(--space-3) 0;
  }
  .room-picker-card__icon {
    width: 2.875rem;
    height: 2.875rem;
    border-radius: var(--radius-md);
  }
}
@media (max-width: 26.5625rem) {
  .room-picker-page {
    --text-xs: 0.6875rem;
    --text-sm: 0.75rem;
    --text-base: 0.8125rem;
    --text-lg: 0.95rem;
    --text-3xl: clamp(1.4rem, calc(1.25rem + 0.9vw), 1.7rem);
    --content-gutter: 1rem;
  }
  .room-picker-main {
    padding-inline: 1rem;
    padding-bottom: var(--space-5);
  }
  .room-picker-page::before {
    height: 25rem;
    opacity: 0.52;
  }
  .room-picker-hero {
    min-height: 8rem;
    gap: var(--space-3);
  }
  .room-picker-site-card {
    grid-template-columns: 4.75rem minmax(0, 1fr);
  }
  .room-picker-site-card > img {
    width: 4.75rem;
    height: 3.75rem;
  }
  .room-picker-site-card__title-row strong {
    white-space: normal;
    overflow-wrap: anywhere;
  }
  .room-picker-card__open {
    grid-template-columns: auto minmax(0, 1fr);
    gap: var(--space-2);
    padding: var(--space-3) 3.5rem var(--space-3) var(--space-3);
  }
  .room-picker-card__icon {
    width: 2.75rem;
    height: 2.75rem;
  }
  .room-picker-card__arrow {
    display: none;
  }
  .room-picker-card__edit {
    top: 50%;
    right: 0.75rem;
    width: 2.25rem;
    height: 2.25rem;
    transform: translateY(-50%);
  }
}
.dashboard-shell {
  min-height: 100dvh;
  color: var(--color-navy-900);
  background: var(--color-surface-page);
}

.dashboard-topbar {
  position: sticky;
  top: 0;
  z-index: 80;
  min-height: 4.875rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding: 0.8rem clamp(1rem, 3vw, 3.25rem);
  background: var(--color-surface-chrome);
  border-bottom: 1px solid var(--color-navy-200);
}

.dashboard-brand {
  min-width: 0;
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  color: var(--color-navy-900);
}

.dashboard-brand img {
  width: 2.35rem;
}

.dashboard-brand__wordmark {
  font-size: var(--text-xl);
  font-weight: var(--weight-extrabold);
  letter-spacing: var(--tracking-tight);
  white-space: nowrap;
}

.dashboard-brand__wordmark em {
  font-style: normal;
  font-weight: var(--weight-regular);
}

.dashboard-account__divider {
  width: 1px;
  align-self: stretch;
  min-height: 2rem;
  background: var(--color-navy-200);
}

.dashboard-account,
.dashboard-profile {
  display: flex;
  align-items: center;
}

.dashboard-account {
  gap: 0.6rem;
}

.dashboard-voice-trigger.is-preparing,
.dashboard-mobile-nav__voice.is-preparing {
  color: var(--color-warning-on);
  background: var(--color-warning);
  border-color: var(--color-warning);
}

.dashboard-voice-trigger.is-preparing:hover,
.dashboard-mobile-nav__voice.is-preparing:hover {
  color: var(--color-warning-on);
  background: var(--color-warning-hover);
  border-color: var(--color-warning-hover);
}

.dashboard-voice-trigger.is-active {
  color: var(--color-error-on);
  background: var(--color-error);
  border-color: var(--color-error);
}

.dashboard-voice-trigger.is-active:hover {
  color: var(--color-error-on);
  background: var(--color-error-hover);
  border-color: var(--color-error-hover);
}

.dashboard-mobile-nav__voice.is-preparing > span {
  color: var(--color-warning-hover);
}

.dashboard-context {
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.65rem;
  margin-left: auto;
}

.dashboard-context__control span {
  min-width: 0;
  max-width: 12rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.dashboard-language .ui-language__trigger,
.dashboard-profile {
  min-height: 2.55rem;
  gap: 0.55rem;
  padding: 0 0.7rem;
  color: var(--color-navy-700);
  background: transparent;
  border: 0;
  border-radius: var(--radius-md);
  box-shadow: none;
  font: inherit;
  cursor: pointer;
}

.dashboard-language .ui-language__trigger:hover,
.dashboard-profile:hover {
  background: var(--color-primary-soft-subtle);
}

.dashboard-language .ui-language__trigger > svg:first-child {
  color: var(--color-navy-700);
}

.dashboard-profile-wrap,
.dashboard-dropdown {
  position: relative;
}

.dashboard-profile__avatar {
  width: 2.15rem;
  height: 2.15rem;
  display: grid;
  place-items: center;
  color: var(--color-navy-900);
  background: var(--color-navy-100);
  border: 1px solid var(--color-navy-200);
  border-radius: var(--radius-pill);
  font-weight: var(--weight-extrabold);
}

.dashboard-dropdown__menu,
.dashboard-profile-menu {
  position: absolute;
  top: calc(100% + 0.55rem);
  right: 0;
  z-index: 120;
  min-width: 15rem;
  max-width: min(20rem, 100vw - 2rem);
  max-height: min(24rem, 100dvh - 6rem);
  overflow-y: auto;
}

.dashboard-dropdown__menu[hidden],
.dashboard-profile-menu[hidden] {
  display: none;
}

.dashboard-dropdown__option span:first-child {
  min-width: 0;
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.dashboard-dropdown__check {
  color: var(--color-primary);
  font-weight: var(--weight-extrabold);
}

.dashboard-dropdown__empty {
  display: block;
  padding: 0.8rem;
  color: var(--color-navy-500);
  font-size: var(--text-sm);
}

.dashboard-profile-language {
  display: none;
}

.dashboard-profile-menu__wake {
  padding: 0.55rem 0.7rem;
  border-top: 1px solid var(--color-border-soft);
}

.dashboard-profile-menu__wake[hidden] {
  display: none;
}

.dashboard-profile-menu__identity {
  display: grid;
  gap: 0.15rem;
  margin-bottom: 0.35rem;
  padding: 0.65rem 0.7rem 0.75rem;
  border-bottom: 1px solid var(--color-navy-200);
}

.dashboard-profile-menu__identity strong {
  color: var(--color-navy-800);
  font-size: var(--text-sm);
}

.dashboard-profile-menu__identity span {
  min-width: 0;
  overflow: hidden;
  color: var(--color-navy-500);
  font-size: var(--text-xs);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.dashboard-sidebar {
  position: fixed;
  inset: 4.875rem auto 0 0;
  z-index: 50;
  width: 13.4rem;
  display: flex;
  flex-direction: column;
  padding: 2rem 0.85rem 1.5rem;
  background: var(--color-surface-glass);
  border-right: 1px solid var(--color-navy-200);
}

.dashboard-sidebar__nav {
  display: grid;
  gap: 0.45rem;
}

.dashboard-sidebar__item {
  min-height: 3.15rem;
  display: flex;
  align-items: center;
  gap: 0.9rem;
  padding: 0 1rem;
  color: var(--color-navy-600);
  border-left: 0.2rem solid transparent;
  border-radius: var(--radius-md);
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  transition: 160ms ease;
}

.dashboard-sidebar__item svg {
  flex: 0 0 auto;
}

.dashboard-sidebar__footer {
  margin-top: auto;
  padding: 1.25rem 0.85rem 0;
  color: var(--color-navy-500);
  font-size: var(--text-xs);
  line-height: var(--leading-normal);
}

.dashboard-sidebar__footer > span {
  width: 2.4rem;
  height: 2px;
  display: block;
  margin-bottom: 0.8rem;
  background: var(--color-teal-500);
}

.dashboard-surface {
  min-height: calc(100dvh - 4.875rem);
  margin-left: 13.4rem;
}

.dashboard-main {
  width: 100%;
  margin: 0;
  padding: 1.4rem clamp(1rem, 1.5vw, 1.5rem) 3.5rem;
}

.dashboard-mobile-nav {
  display: none;
}

.change-password-dialog .ui-dialog__content {
  min-width: 0;
  display: grid;
  gap: var(--space-4);
}

.change-password-dialog .ui-dialog__content p {
  margin: 0;
}

.change-password-dialog .ui-dialog__content {
  min-width: 0;
  display: grid;
  gap: var(--space-4);
}

.change-password-dialog .ui-dialog__content p {
  margin: 0;
}

.password-meter {
  min-width: 0;
  display: grid;
  gap: var(--space-2);
}

.password-meter__head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-1) var(--space-3);
}

.password-meter__bars {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space-1);
}

.password-meter__bars span {
  height: 0.375rem;
  border-radius: var(--radius-pill);
  background: var(--color-surface-muted);
}

.password-meter[data-score="0"] .password-meter__bars span.is-on,
.password-meter[data-score="1"] .password-meter__bars span.is-on {
  background: var(--color-error);
}

.password-meter[data-score="2"] .password-meter__bars span.is-on {
  background: var(--color-warning);
}

.password-meter[data-score="3"] .password-meter__bars span.is-on,
.password-meter[data-score="4"] .password-meter__bars span.is-on {
  background: var(--color-success);
}

.password-meter[data-score="0"] strong,
.password-meter[data-score="1"] strong {
  color: var(--color-error-text);
}

.password-rules {
  min-width: 0;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--space-1);
  list-style: none;
  color: var(--color-text-tertiary);
  font-size: var(--text-xs);
}

.password-rules li {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  min-width: 0;
}

.password-rules__icon {
  flex: 0 0 auto;
  display: inline-grid;
}

.password-rules__icon svg:last-child,
.password-rules li.is-met .password-rules__icon svg:first-child {
  display: none;
}

.password-rules li.is-met .password-rules__icon svg:last-child {
  display: inline;
}

.password-rules li.is-met {
  color: var(--color-success);
}

/* Hands-free wake flow: greeting (yellow) -> listening (red) -> processing. */
.dashboard-voice-trigger.is-wake-greeting,
.dashboard-mobile-nav__voice.is-wake-greeting {
  color: var(--color-neutral-950);
  background: var(--color-amber-400);
  border-color: var(--color-amber-500);
}

.dashboard-voice-trigger.is-wake-listening,
.dashboard-mobile-nav__voice.is-wake-listening {
  color: var(--color-error-on);
  background: var(--color-error);
  border-color: var(--color-error);
  animation: wake-listening-pulse 1.2s ease-in-out infinite;
}

.dashboard-voice-trigger.is-wake-processing,
.dashboard-mobile-nav__voice.is-wake-processing {
  color: var(--color-text-secondary);
  background: var(--color-surface-muted);
  animation: wake-processing-pulse 1s ease-in-out infinite;
}

@keyframes wake-listening-pulse {
  0%, 100% {
    box-shadow: 0 0 0 0 color-mix(in srgb, var(--color-error) 45%, transparent);
  }
  50% {
    box-shadow: 0 0 0 0.5rem color-mix(in srgb, var(--color-error) 0%, transparent);
  }
}
@keyframes wake-processing-pulse {
  0%, 100% {
    opacity: 1;
  }
  50% {
    opacity: 0.55;
  }
}
@media (prefers-reduced-motion: reduce) {
  .dashboard-voice-trigger.is-wake-listening,
  .dashboard-mobile-nav__voice.is-wake-listening,
  .dashboard-voice-trigger.is-wake-processing,
  .dashboard-mobile-nav__voice.is-wake-processing {
    animation: none;
  }
}
.devices-page {
  min-width: 0;
}

.devices-header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1.5rem;
  margin-bottom: 1.75rem;
}

.devices-header h1 {
  margin: 0;
  color: var(--color-navy-900);
  font-size: var(--text-3xl);
  line-height: 1;
  letter-spacing: var(--tracking-tight);
}

.device-onboarding {
  padding: var(--space-5);
}

.device-onboarding__heading {
  margin-bottom: 1rem;
}

.device-onboarding__heading h2 {
  margin: 0;
  color: var(--color-navy-800);
  font-size: var(--text-base);
}

.device-onboarding__heading p {
  margin-top: 0.2rem;
  color: var(--color-navy-500);
  font-size: var(--text-sm);
}

.device-onboarding__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
  gap: 0.9rem;
}

.device-method__icon {
  width: 2.85rem;
  height: 2.85rem;
  display: grid;
  place-items: center;
  color: var(--color-primary);
  background: var(--color-teal-50);
  border-radius: var(--radius-md);
}

.device-method__icon--tuya {
  color: var(--color-surface);
  background: var(--color-provider-tuya);
  font-weight: var(--weight-extrabold);
}

.device-method > span:nth-child(2) {
  min-width: 0;
  display: grid;
  gap: 0.15rem;
}

.device-method strong,
.device-method small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.device-method strong {
  font-size: var(--text-sm);
}

.device-method small {
  color: var(--color-navy-500);
  font-size: var(--text-xs);
}

.devices-toolbar {
  display: grid;
  grid-template-columns: minmax(15rem, 2fr) minmax(10rem, 0.9fr) minmax(10rem, 0.9fr) auto;
  gap: 0.9rem;
  margin: 1.35rem 0 1.1rem;
}

.devices-filter-wrap {
  position: relative;
  min-width: 0;
}

.devices-filter-wrap .devices-filter-menu {
  position: absolute;
  top: calc(100% + 0.4rem);
  left: 0;
  right: 0;
  z-index: 70;
  min-width: 100%;
}

.devices-filter-menu[hidden] {
  display: none;
}

.devices-filter {
  width: 100%;
  justify-content: space-between;
}
.devices-filter[aria-expanded=true] {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 var(--focus-ring-width) var(--color-focus-ring);
}

.devices-filter > span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.devices-filter > svg {
  flex: 0 0 auto;
}

.device-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.15rem;
}

.device-grid.is-list {
  grid-template-columns: 1fr;
}

.devices-empty {
  grid-column: 1/-1;
  min-height: 13rem;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-4);
  padding: var(--space-6);
  color: var(--color-text-secondary);
  text-align: left;
}

.devices-empty[hidden] {
  display: none;
}

.devices-empty h3 {
  margin: 0;
  color: var(--color-navy-900);
  font-size: var(--text-base);
  font-weight: var(--weight-extrabold);
}

.devices-empty p {
  margin: 0.25rem 0 0;
  color: var(--color-navy-500);
  font-size: var(--text-sm);
}

.device-grid.is-list .device-card {
  grid-template-columns: auto minmax(0, 1fr) minmax(14rem, auto);
  grid-template-rows: auto;
  align-items: center;
  min-height: 0;
  padding-block: 1rem;
}
.device-grid.is-list .device-card:hover {
  background: var(--color-surface-hover);
  border-color: var(--color-primary-border);
}

.device-grid.is-list .device-card__top {
  grid-column: 1;
  grid-template-columns: max-content minmax(0, 1fr) max-content;
  justify-content: start;
}

.device-grid.is-list .device-card__copy {
  grid-column: 2;
}

.device-grid.is-list .device-card__control {
  grid-column: 3;
  min-width: 14rem;
  margin: 0;
}

.dashboard-overview {
  min-width: 0;
}

.dashboard-overview__header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--space-5);
  margin-bottom: var(--space-5);
}

.dashboard-overview__header h1 {
  margin: 0;
  color: var(--color-navy-900);
  font-size: var(--text-3xl);
  line-height: 1;
  letter-spacing: var(--tracking-tight);
}

.dashboard-overview__metrics {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space-4);
  margin-bottom: var(--space-5);
}

.dashboard-metric {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-4);
}

.dashboard-metric > div {
  min-width: 0;
  display: grid;
  gap: 0.15rem;
}

.dashboard-metric span:not(.ui-icon-tile) {
  color: var(--color-navy-500);
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
}

.dashboard-metric strong {
  color: var(--color-navy-900);
  font-size: var(--text-2xl);
  line-height: 1;
}

.dashboard-overview__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-5);
}

.dashboard-overview__panel {
  min-width: 0;
  padding: 0;
  overflow: hidden;
}

.dashboard-overview__panel-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding: var(--space-4);
  border-bottom: 1px solid var(--color-navy-200);
}

.dashboard-overview__panel-heading h2 {
  margin: 0;
  color: var(--color-navy-900);
  font-size: var(--text-lg);
}

.dashboard-overview__panel-heading p {
  margin: 0.2rem 0 0;
  color: var(--color-navy-500);
  font-size: var(--text-sm);
}

.dashboard-room-list,
.dashboard-device-list {
  display: grid;
}

.dashboard-room-row,
.dashboard-device-row {
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding: 0.95rem var(--space-4);
  color: inherit;
  border-bottom: 1px solid var(--color-navy-100);
}

.dashboard-room-row:last-child,
.dashboard-device-row:last-child {
  border-bottom: 0;
}

.dashboard-room-row:hover,
.dashboard-device-row:hover {
  background: var(--color-primary-soft-subtle);
}

.dashboard-room-row__copy,
.dashboard-device-row__copy {
  min-width: 0;
  display: grid;
  gap: 0.15rem;
}

.dashboard-room-row__copy strong,
.dashboard-device-row__copy strong {
  overflow: hidden;
  color: var(--color-navy-800);
  font-size: var(--text-sm);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.dashboard-room-row__copy small,
.dashboard-device-row__copy small {
  overflow: hidden;
  color: var(--color-navy-500);
  font-size: var(--text-xs);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.dashboard-overview__empty {
  min-height: 11rem;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-4);
  padding: var(--space-5);
  color: var(--color-navy-500);
}

.dashboard-overview__empty[hidden] {
  display: none;
}

.dashboard-overview__empty strong {
  color: var(--color-navy-800);
}

.dashboard-overview__empty p {
  margin: 0.2rem 0 0;
  font-size: var(--text-sm);
}

.dashboard-overview__quick {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-4);
  margin-top: var(--space-5);
}

.dashboard-overview__quick .ui-action-card > span:nth-child(2) {
  min-width: 0;
  display: grid;
  gap: 0.15rem;
}

.dashboard-overview__quick strong {
  color: var(--color-navy-800);
  font-size: var(--text-sm);
}

.dashboard-overview__quick small {
  color: var(--color-navy-500);
  font-size: var(--text-xs);
}

@media (max-width: 64rem) {
  .dashboard-overview__metrics {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .dashboard-overview__grid {
    grid-template-columns: 1fr;
  }
}
@media (max-width: 48rem) {
  .dashboard-overview__header {
    align-items: stretch;
    flex-direction: column;
  }
  .dashboard-overview__quick {
    grid-template-columns: 1fr;
  }
}
@media (max-width: 26.5625rem) {
  .dashboard-overview__metrics {
    grid-template-columns: 1fr;
  }
  .dashboard-overview__panel-heading {
    align-items: flex-start;
    flex-direction: column;
  }
}
.dashboard-overview__more {
  margin: 0;
  padding: var(--space-3) var(--space-4) 0;
}

.dashboard-overview__more[hidden] {
  display: none;
}

.user-dashboard-tabs {
  margin-bottom: var(--space-5);
}

.dashboard-profile-sites {
  display: grid;
  gap: 0.15rem;
  padding: 0.35rem 0 0.45rem;
  border-bottom: 1px solid var(--color-navy-200);
}

.dashboard-profile-sites__label {
  padding: 0.25rem 0.7rem;
  color: var(--color-navy-500);
  font-size: var(--text-2xs);
  font-weight: var(--weight-extrabold);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
}

.dashboard-profile-sites__list {
  max-height: 12rem;
  overflow-y: auto;
}

.is-user-dashboard .dashboard-sidebar {
  display: none;
}
.is-user-dashboard .dashboard-surface {
  margin-left: 0;
}
.is-user-dashboard [data-room-summary],
.is-user-dashboard .automation-page__intro p,
.is-user-dashboard .automation-workspace__hint,
.is-user-dashboard .automation-panel__header p,
.is-user-dashboard .automation-empty p,
.is-user-dashboard .assistant-floating__header > div > span {
  display: none;
}

@media (max-width: 48rem) {
  .is-user-dashboard .user-dashboard-tabs {
    display: none;
  }
  .is-user-dashboard .dashboard-mobile-nav {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .is-user-dashboard .dashboard-mobile-nav__item:not([data-user-mobile-tab]):not(.dashboard-mobile-nav__voice) {
    display: none;
  }
  .is-user-dashboard .dashboard-mobile-nav__voice {
    grid-column: 2;
    grid-row: 1;
    justify-self: center;
  }
  .is-user-dashboard [data-user-mobile-tab=devices] {
    grid-column: 1;
    grid-row: 1;
  }
  .is-user-dashboard [data-user-mobile-tab=automation] {
    grid-column: 3;
    grid-row: 1;
  }
  .is-user-dashboard .dashboard-mobile-nav__voice > span {
    display: none;
  }
}
.device-card {
  min-width: 0;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  align-content: stretch;
  gap: 1rem;
  padding: 1.2rem;
}

.device-card:focus-visible {
  outline: 3px solid var(--color-focus-ring);
  outline-offset: 2px;
  border-color: var(--color-primary-border-emphasis);
}

.device-card__top {
  min-width: 0;
  display: grid;
  grid-template-columns: max-content minmax(0, 1fr) max-content;
  align-items: center;
  gap: 0.55rem;
}

.device-card__icon {
  width: 2.85rem;
  height: 2.85rem;
  display: grid;
  place-items: center;
  color: var(--color-navy-800);
  background: var(--color-navy-100);
  border-radius: var(--radius-md);
}

.device-card__badges {
  min-width: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
}

.device-card__status-badge {
  min-height: 1.5rem;
  padding: 0.125rem 0.45rem;
}

.device-badge {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.device-badge::before {
  content: "";
  display: none;
  width: 0.45rem;
  height: 0.45rem;
  margin-right: 0.35rem;
  border-radius: var(--radius-pill);
  background: currentColor;
}

.device-badge--online {
  display: inline-flex;
  align-items: center;
}

.device-badge--online::before {
  display: block;
}

.device-card__menu-wrap {
  position: relative;
}

.device-card__menu-popover {
  position: absolute;
  z-index: 20;
  top: calc(100% + 0.35rem);
  right: 0;
}

.device-card__menu-popover[hidden] {
  display: none;
}

.device-card__copy {
  min-width: 0;
  display: grid;
  align-content: start;
  gap: 0.4rem;
}

.device-card__copy h3 {
  overflow: hidden;
  margin: 0;
  color: var(--color-navy-900);
  font-size: var(--text-base);
  font-weight: var(--weight-extrabold);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.device-card__copy p {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 0.35rem;
  overflow: hidden;
  margin: 0;
  color: var(--color-navy-500);
  font-size: var(--text-sm);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.device-card__copy p svg {
  flex: 0 0 auto;
}

.device-card__control {
  min-width: 0;
  min-height: 3rem;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.6rem;
  padding: 0.45rem 0.65rem;
  color: var(--color-navy-600);
  background: var(--color-navy-100);
  border-radius: var(--radius-sm);
  font-size: var(--text-sm);
}

.device-card__control strong {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.device-card__control--split {
  grid-template-columns: minmax(0, 1fr) auto auto;
}

.device-card__control--split > span:first-child {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 0.4rem;
}

.device-card__control--split > span:nth-child(2) {
  color: var(--color-navy-500);
  white-space: nowrap;
}

.device-card__control--status {
  grid-template-columns: minmax(0, 1fr) auto auto;
  padding-inline: 0.75rem;
}

.device-card-status__power {
  min-width: 0;
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  color: var(--color-primary-hover);
}

.device-card-status__power strong {
  font-size: var(--text-sm);
}

.device-card-status__temperature {
  color: var(--color-navy-800);
  font-weight: var(--weight-extrabold);
  white-space: nowrap;
}

.device-card-status__motion {
  min-width: 0;
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.device-card-status__occupied {
  color: var(--color-success);
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-weight: var(--weight-extrabold);
}

.device-card-status__clear {
  color: var(--color-navy-700);
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
}

.device-card__control--gangs {
  grid-template-columns: repeat(3, minmax(0, 1fr)) auto;
  gap: 0.45rem;
  padding: 0.45rem 0.55rem;
}

.device-card__control--gangs[data-device-gang-count="1"] {
  grid-template-columns: repeat(1, minmax(0, 1fr)) auto;
}

.device-card__control--gangs[data-device-gang-count="2"] {
  grid-template-columns: repeat(2, minmax(0, 1fr)) auto;
}

.device-card__control--gangs > span {
  min-width: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
  padding: 0.38rem 0.45rem;
  color: var(--color-primary-hover);
  background: var(--color-teal-glass);
  border: 1px solid var(--color-primary-border-soft);
  border-radius: var(--radius-sm);
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
  white-space: nowrap;
}

.device-card__control--gangs > span.is-off,
.device-card__control--gangs > span.is-waiting {
  color: var(--color-navy-500);
  background: var(--color-navy-100);
  border-color: var(--color-navy-200);
}

.device-card__control--gangs i {
  width: 0.5rem;
  height: 0.5rem;
  flex: 0 0 auto;
  border-radius: 50%;
  background: var(--color-teal-500);
  box-shadow: 0 0 0 0.2rem var(--color-teal-soft);
}

.device-card__control--gangs i.is-off {
  background: var(--color-navy-400);
  box-shadow: none;
}

.device-detail-dialog {
  width: min(34rem, 100vw - 2rem);
  max-height: calc(100dvh - 2rem);
  padding: 0;
  background: transparent;
  border: 0;
}

.device-detail-dialog::backdrop {
  background: var(--color-backdrop-soft);
  backdrop-filter: blur(6px);
}

.device-detail-dialog__panel {
  max-height: calc(100dvh - 2rem);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  padding: 0;
}

.device-detail-dialog__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1rem 1.1rem;
  background: var(--color-surface-subtle);
  border-bottom: 1px solid var(--color-navy-100);
}

.device-detail-dialog__identity {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 0.8rem;
}

.device-detail-dialog__icon {
  width: 2.7rem;
  height: 2.7rem;
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  color: var(--color-primary-hover);
  background: var(--color-teal-50);
  border: 1px solid var(--color-primary-border-soft);
  border-radius: var(--radius-md);
}

.device-detail-dialog__title-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.device-detail-dialog__identity h2 {
  margin: 0;
  color: var(--color-navy-900);
  font-size: var(--text-lg);
  letter-spacing: var(--tracking-tight);
}

.device-detail-dialog__identity p {
  margin: 0.15rem 0 0;
  color: var(--color-navy-500);
  font-size: var(--text-xs);
}

.device-detail-dialog__identity small {
  display: block;
  margin-top: 0.2rem;
  color: var(--color-navy-400);
  font-family: var(--font-mono);
  font-size: var(--text-2xs);
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-wide);
}

.device-detail-dialog__body {
  overflow-y: auto;
  padding: 1rem;
}

.device-detail-dialog__body > section,
.device-detail-dialog__control {
  display: grid;
  gap: 1rem;
}

.device-detail-dialog__body [hidden] {
  display: none;
}

.device-detail-dialog__footer i {
  width: 0.45rem;
  height: 0.45rem;
  border-radius: 50%;
  background: var(--color-teal-500);
  box-shadow: 0 0 0 0.18rem var(--color-teal-soft-strong);
}

.device-modal-ac {
  display: grid;
  gap: 0.75rem;
}

.device-modal-power {
  min-height: 2.7rem;
  color: var(--color-navy-500);
  background: var(--color-navy-50);
  border: 1px solid var(--color-navy-200);
  border-radius: var(--radius-md);
  font: inherit;
  font-size: var(--text-sm);
  font-weight: var(--weight-extrabold);
  cursor: pointer;
}

.device-modal-power.is-on {
  color: var(--color-primary-hover);
  background: var(--color-teal-50);
  border-color: var(--color-primary-border-strong);
}

.device-modal-temperature {
  display: grid;
  grid-template-columns: 3rem minmax(0, 1fr) 3rem;
  align-items: center;
  gap: 0.65rem;
}

.device-modal-temperature > div {
  display: grid;
  justify-items: center;
  gap: 0.15rem;
}

.device-modal-temperature span,
.device-modal-readings span {
  color: var(--color-navy-500);
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
}

.device-modal-temperature strong,
.device-modal-readings strong {
  color: var(--color-navy-900);
  font-size: var(--text-xl);
}

.device-modal-readings {
  display: grid;
  gap: 0.65rem;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.device-modal-lights {
  display: flex;
  align-items: stretch;
  justify-content: space-between;
  gap: 0.7rem;
}

.device-modal-light {
  min-width: 0;
  flex: 1;
  min-height: 7rem;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 0.35rem;
  padding: 0.8rem 0.55rem;
}

.device-modal-light__bulb {
  width: 2.9rem;
  height: 2.9rem;
  display: grid;
  place-items: center;
  color: var(--color-navy-500);
  background: var(--color-navy-100);
  border-radius: 50%;
  transition: color 160ms ease, background 160ms ease, box-shadow 160ms ease;
}

.device-modal-light strong {
  color: inherit;
  font-size: var(--text-sm);
  font-weight: var(--weight-bold);
}

.device-modal-light small {
  color: var(--color-navy-500);
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
}

.device-modal-light.is-on .device-modal-light__bulb {
  color: var(--color-surface);
  background: var(--color-primary);
  box-shadow: 0 0.45rem 1rem var(--color-primary-border-medium);
}

.device-modal-light.is-on:hover:not(:disabled) .device-modal-light__bulb {
  color: var(--color-surface);
  background: var(--color-primary-hover);
}

.device-modal-light.is-on small {
  color: var(--color-primary);
}

.device-modal-light.is-on:hover:not(:disabled) small {
  color: var(--color-primary-hover);
}

.device-modal-readings > div {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  column-gap: 0.7rem;
  row-gap: 0.2rem;
  padding: 1rem;
  background: var(--color-navy-50);
  border: 1px solid var(--color-navy-200);
  border-radius: var(--radius-md);
}

.device-modal-reading__icon {
  grid-row: 1/span 2;
  width: 2.25rem;
  height: 2.25rem;
  display: grid;
  place-items: center;
  color: var(--color-primary);
  background: var(--color-teal-50);
  border: 1px solid var(--color-primary-border);
  border-radius: var(--radius-md);
}

.device-detail-dialog__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.8rem 1rem;
  color: var(--color-navy-500);
  background: var(--color-navy-50);
  border-top: 1px solid var(--color-navy-100);
  font-size: var(--text-xs);
  font-weight: var(--weight-extrabold);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
}

.device-detail-dialog__footer > span:first-child {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}

.device-detail-dialog {
  width: min(33rem, 100vw - 2rem);
  max-height: calc(100dvh - 3rem);
}

.device-detail-dialog__panel {
  max-height: calc(100dvh - 3rem);
  border-radius: var(--radius-md);
  border-color: var(--color-navy-200);
  box-shadow: 0 1.25rem 3rem var(--color-shadow-dialog);
}

.device-detail-dialog__header {
  padding: 1.05rem 1.2rem;
  background: var(--color-surface);
  border-bottom: 0;
}

.device-detail-dialog__identity {
  gap: 0.9rem;
}

.device-detail-dialog__icon {
  width: 3rem;
  height: 3rem;
  color: var(--color-primary);
  background: var(--color-teal-50);
  border: 0;
  border-radius: var(--radius-md);
}

.device-detail-dialog__title-row {
  flex-wrap: wrap;
  gap: 0.45rem;
}

.device-detail-dialog__identity h2 {
  font-size: var(--text-lg);
  font-weight: var(--weight-extrabold);
  letter-spacing: var(--tracking-tight);
}

.device-detail-dialog__identity p {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  margin-top: 0.15rem;
  color: var(--color-navy-600);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
}

.device-detail-dialog__status-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
}

.device-detail-dialog__status-pill i {
  width: 0.4rem;
  height: 0.4rem;
  border-radius: 50%;
  background: var(--color-green-500);
}

.device-detail-dialog__body {
  padding: 0 1.2rem 1rem;
}

.device-detail-dialog__control {
  gap: 0;
}

.device-modal-ac,
.device-modal-simple {
  display: grid;
  gap: 1rem;
  padding-top: 1rem;
  border-top: 1px solid var(--color-navy-200);
}

.device-modal-ac h3,
.device-modal-simple h3,
.device-modal-summary h3 {
  margin: 0;
  color: var(--color-navy-900);
  font-size: var(--text-sm);
  font-weight: var(--weight-extrabold);
}

.device-modal-power-wrap {
  display: grid;
  place-items: center;
  padding: 0.15rem 0 0.3rem;
}

.device-modal-power {
  display: grid;
  justify-items: center;
  gap: 0.3rem;
  padding: 0.15rem;
  color: var(--color-navy-500);
  background: transparent;
  border: 0;
  font: inherit;
  font-size: var(--text-xs);
  font-weight: var(--weight-extrabold);
  cursor: pointer;
}

.device-modal-power__circle {
  width: 3.25rem;
  height: 3.25rem;
  display: grid;
  place-items: center;
  color: var(--color-navy-500);
  background: var(--color-navy-100);
  border: 1px solid var(--color-navy-200);
  border-radius: 50%;
  box-shadow: 0 0.25rem 0.7rem var(--color-shadow-soft);
  transition: color 160ms ease, background 160ms ease, border-color 160ms ease, box-shadow 160ms ease, transform 160ms ease;
}

.device-modal-power:hover .device-modal-power__circle {
  transform: translateY(-1px);
  border-color: var(--color-primary-border-hover);
}

.device-modal-power.is-on {
  color: var(--color-primary-hover);
  background: transparent;
  border-color: transparent;
}

.device-modal-power.is-on .device-modal-power__circle {
  color: var(--color-surface);
  background: var(--color-primary);
  border-color: var(--color-primary);
  box-shadow: 0 0.4rem 1rem var(--color-focus-ring);
}

.device-modal-power.is-on:hover .device-modal-power__circle {
  color: var(--color-surface);
  background: var(--color-primary-hover);
  border-color: var(--color-primary-hover);
}

.device-modal-temperature {
  grid-template-columns: 1fr;
  justify-items: center;
  gap: 0.55rem;
  padding: 0.1rem 0 0.3rem;
}

.device-modal-temperature > span {
  color: var(--color-navy-600);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
}

.device-modal-temperature > div {
  width: min(100%, 16rem);
  display: grid;
  grid-template-columns: 2.75rem 1fr 2.75rem;
  align-items: center;
  gap: 0.65rem;
}

.device-modal-temperature strong {
  font-size: var(--text-2xl);
  font-weight: var(--weight-extrabold);
  letter-spacing: var(--tracking-tight);
}

.device-modal-ac__row {
  display: grid;
  grid-template-columns: 6rem minmax(0, 1fr);
  align-items: center;
  gap: 0.8rem;
}

.device-modal-ac__row + .device-modal-ac__row {
  margin-top: 0.55rem;
}

.device-modal-ac__row-label {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  color: var(--color-navy-700);
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
  white-space: nowrap;
}

.device-modal-options {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.35rem;
}

.device-modal-options--speed {
  width: 100%;
}

.device-modal-summary {
  display: grid;
  gap: 0.75rem;
  margin-top: 0.15rem;
  padding-top: 1rem;
  border-top: 1px solid var(--color-navy-200);
}

.device-modal-summary__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.65rem;
}

.device-modal-summary__grid > div {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.75rem;
  color: var(--color-navy-600);
  background: var(--color-surface-subtle);
  border: 1px solid var(--color-navy-200);
  border-radius: var(--radius-sm);
}

.device-modal-summary__grid > div > svg {
  flex: 0 0 auto;
  color: var(--color-navy-600);
}

.device-modal-summary__grid span {
  min-width: 0;
  display: grid;
  gap: 0.1rem;
  color: var(--color-navy-500);
  font-size: var(--text-xs);
}

.device-modal-summary__grid strong {
  overflow: hidden;
  color: var(--color-navy-900);
  font-size: var(--text-xs);
  font-weight: var(--weight-extrabold);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.device-detail-dialog__footer {
  padding: 0.8rem 1.2rem;
  color: var(--color-navy-500);
  background: var(--color-surface);
  border-top-color: var(--color-navy-200);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-normal);
  text-transform: none;
}

.device-detail-dialog__footer > span:first-child {
  color: var(--color-primary);
}

.device-detail-dialog__footer > span:last-child {
  font-weight: var(--weight-medium);
}

.device-badge--waiting {
  display: inline-flex;
  align-items: center;
  color: var(--color-navy-600);
  background: var(--color-navy-100);
}

.device-badge--waiting::before {
  display: block;
}

.device-detail-dialog__status-pill.is-waiting {
  color: var(--color-navy-600);
  background: var(--color-navy-100);
}

.device-detail-dialog__status-pill.is-waiting i {
  background: var(--color-navy-400);
}

.device-modal-power:disabled:hover .device-modal-power__circle {
  transform: none;
  border-color: var(--color-navy-200);
}

.device-setup-dialog {
  width: min(43rem, 100vw - 2rem);
  max-height: calc(100dvh - 2rem);
}

.device-setup-dialog__panel {
  max-height: calc(100dvh - 2rem);
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
}

.device-setup-dialog__fields {
  min-width: 0;
  grid-template-columns: minmax(0, 1fr);
  display: grid;
  gap: var(--space-4);
}

.device-setup-dialog__fields > *,
.device-setup-dialog .device-setup-field > *,
.device-setup-dialog .device-setup-dialog__heading > div {
  min-width: 0;
  overflow-wrap: anywhere;
}

.device-setup-dialog .device-setup-dialog__actions button {
  min-width: 0;
  white-space: normal;
  overflow-wrap: anywhere;
}

.device-setup-types {
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}

.device-setup-types > legend {
  margin-bottom: var(--space-2);
}

.device-setup-types__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(6.5rem, 1fr));
  gap: var(--space-2);
}

.mqtt-choice-dialog {
  width: min(46rem, 100vw - 2rem);
}

.mqtt-choice-dialog__panel {
  gap: var(--space-6);
}

.mqtt-choice-dialog__options {
  gap: 0;
}

.mqtt-choice-dialog__grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-3);
}

.mqtt-choice-dialog__option {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  grid-template-rows: auto;
  align-items: start;
  gap: var(--space-4);
  padding: var(--space-4);
}

.mqtt-choice-dialog__option:hover:not(:disabled) {
  background: var(--color-primary-soft-subtle);
  border-color: var(--color-primary-border-hover);
  box-shadow: var(--shadow-card-hover);
}

.mqtt-choice-dialog__option-icon {
  margin-top: 0.15rem;
}

.mqtt-choice-dialog__option-copy {
  min-width: 0;
  display: grid;
  gap: var(--space-1);
  text-align: left;
}

.mqtt-choice-dialog__option-copy strong,
.mqtt-choice-dialog__option-copy small {
  overflow-wrap: break-word;
}

.mqtt-choice-dialog__option-copy small {
  line-height: var(--leading-normal);
}

.mqtt-choice-dialog__actions {
  padding-top: var(--space-1);
  border-top: 1px solid var(--color-border-soft);
}

.device-setup-mapping {
  min-width: 0;
  grid-template-columns: minmax(0, 1fr);
  display: grid;
  gap: var(--space-3);
}

.device-setup-mapping__heading {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-3);
}

.device-setup-mapping__rows {
  display: grid;
  gap: var(--space-2);
}

.device-setup-mapping__row {
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(12rem, 1fr) minmax(0, 1.4fr);
  align-items: center;
  gap: var(--space-3);
}

.device-setup-mapping__row > .ui-select {
  min-width: 0;
}

.device-setup-mapping__canonical {
  min-width: 0;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  justify-items: start;
  gap: var(--space-2);
  text-align: left;
}

.device-setup-mapping__canonical > span:last-child {
  min-width: 0;
  display: grid;
  gap: var(--space-1);
}

.device-setup-mapping__canonical small {
  overflow-wrap: anywhere;
  font-family: var(--font-mono);
}

.device-setup-dialog__error {
  margin: 0;
}

.device-setup-dialog__error[hidden],
.device-setup-field[hidden],
.device-setup-dialog__fields[hidden],
.device-setup-dialog__actions[hidden],
.device-setup-result[hidden] {
  display: none;
}

.device-setup-result {
  display: grid;
  gap: var(--space-4);
}

.device-setup-result__notice {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  padding: var(--space-4);
  color: var(--color-primary-hover);
  background: var(--color-teal-50);
  border: 1px solid var(--color-primary-border-soft);
  border-radius: var(--radius-md);
}

.device-setup-result__notice > svg {
  flex: 0 0 auto;
  margin-top: 0.1rem;
}

.device-setup-result__notice strong {
  display: block;
  color: var(--color-navy-900);
  font-size: var(--text-sm);
}

.device-setup-result__notice p {
  margin: 0.2rem 0 0;
  color: var(--color-navy-600);
  font-size: var(--text-xs);
  line-height: var(--leading-normal);
}

.device-setup-result__field {
  min-width: 0;
  display: grid;
  gap: var(--space-2);
}

.device-setup-result__field > span,
.device-setup-result__curl > div > span {
  color: var(--color-label);
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
}

.device-setup-result__field code {
  min-width: 0;
  overflow-wrap: anywhere;
  padding: 0.7rem 0.8rem;
  color: var(--color-navy-800);
  background: var(--color-navy-50);
  border: 1px solid var(--color-navy-200);
  border-radius: var(--radius-sm);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  line-height: var(--leading-normal);
}

.device-setup-result__curl {
  min-width: 0;
  display: grid;
  gap: var(--space-2);
}

.device-setup-result__curl > div {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
}

.device-setup-result__curl pre {
  max-width: 100%;
  overflow-x: auto;
  margin: 0;
  padding: var(--space-4);
  color: var(--color-navy-800);
  background: var(--color-navy-50);
  border: 1px solid var(--color-border-soft);
  border-radius: var(--radius-sm);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  line-height: var(--leading-normal);
  white-space: pre;
}

.device-setup-result__verification {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
}

.device-setup-result__verification > svg {
  flex: 0 0 auto;
  margin-top: 0.1rem;
  animation: device-setup-spin 1.2s linear infinite;
}

.device-setup-result__verification.is-success > svg {
  animation: none;
}

@keyframes device-setup-spin {
  to {
    transform: rotate(360deg);
  }
}
.device-setup-result__hint {
  margin: 0;
  color: var(--color-navy-500);
  font-size: var(--text-xs);
  line-height: var(--leading-normal);
}

@media (max-width: 48rem) {
  .mqtt-choice-dialog__panel {
    gap: var(--space-5);
  }
  .mqtt-choice-dialog__grid {
    grid-template-columns: minmax(0, 1fr);
  }
  .device-setup-mapping {
    gap: var(--space-3);
  }
  .device-setup-mapping__heading {
    gap: var(--space-2);
  }
  .device-setup-mapping__rows {
    gap: var(--space-2);
  }
  .device-setup-mapping__row {
    grid-template-columns: minmax(6.75rem, 0.8fr) minmax(0, 1.2fr);
    align-items: center;
    gap: var(--space-2);
  }
  .device-setup-mapping__canonical {
    gap: var(--space-1);
  }
}
@media (max-width: 26.5625rem) {
  .mqtt-choice-dialog__option {
    grid-template-columns: minmax(0, 1fr);
    align-items: start;
    gap: var(--space-2);
  }
  .mqtt-choice-dialog__actions {
    align-items: stretch;
  }
  .mqtt-choice-dialog__actions > .ui-button {
    width: 100%;
    justify-content: center;
  }
  .device-setup-mapping__row {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-2);
  }
}
@media (max-width: 30rem) {
  .ui-dialog .device-setup-dialog__heading {
    grid-template-columns: minmax(0, 1fr);
    padding-right: 0;
  }
  .device-setup-dialog .device-setup-mapping__row {
    grid-template-columns: minmax(0, 1fr);
  }
}
.device-manage-dialog {
  width: min(44rem, 100vw - 2rem);
  max-height: calc(100dvh - 2rem);
}

.device-manage-dialog::backdrop {
  background: var(--color-backdrop-soft);
  backdrop-filter: blur(6px);
}

.device-manage-dialog__panel {
  max-height: calc(100dvh - 2rem);
}

.device-manage-dialog__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-4);
  margin-bottom: var(--space-5);
}

.device-manage-detail,
.device-manage-edit {
  display: grid;
  gap: var(--space-4);
}

.device-manage-detail[hidden],
.device-manage-edit[hidden],
.device-manage-edit__readonly[hidden] {
  display: none;
}

.device-manage-detail__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-3);
}

.device-manage-detail__grid > div,
.device-manage-edit__readonly {
  min-width: 0;
  display: grid;
  gap: 0.25rem;
  padding: var(--space-3);
  background: var(--color-navy-50);
  border: 1px solid var(--color-navy-200);
  border-radius: var(--radius-sm);
}

.device-manage-detail__grid span,
.device-manage-detail__section > span,
.device-manage-edit__readonly > span {
  color: var(--color-navy-500);
  font-size: var(--text-2xs);
  font-weight: var(--weight-bold);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
}

.device-manage-detail__grid strong,
.device-manage-edit__readonly strong {
  min-width: 0;
  overflow: hidden;
  color: var(--color-navy-900);
  font-size: var(--text-sm);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.device-manage-edit__readonly small {
  color: var(--color-navy-500);
  font-size: var(--text-xs);
}

.device-manage-detail__section {
  min-width: 0;
  display: grid;
  gap: var(--space-2);
}

.device-manage-detail__section > code {
  overflow-wrap: anywhere;
  padding: 0.7rem 0.8rem;
  color: var(--color-navy-800);
  background: var(--color-navy-50);
  border: 1px solid var(--color-navy-200);
  border-radius: var(--radius-sm);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
}

.device-manage-detail__section-heading {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-3);
}

.device-manage-detail__section-heading > span {
  color: var(--color-navy-500);
  font-size: var(--text-2xs);
  font-weight: var(--weight-bold);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
}

.device-manage-detail__section-heading small {
  color: var(--color-navy-400);
  font-size: var(--text-2xs);
  text-align: right;
}

.device-manage-detail__section pre {
  max-width: 100%;
  overflow-x: auto;
  margin: 0;
  padding: var(--space-4);
  color: var(--color-navy-100);
  background: var(--color-navy-900);
  border-radius: var(--radius-md);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  line-height: var(--leading-normal);
}

.device-manage-mappings {
  display: grid;
  gap: var(--space-2);
}

.device-manage-mappings > div {
  display: grid;
  grid-template-columns: minmax(8rem, 0.8fr) minmax(0, 1.2fr);
  align-items: center;
  gap: var(--space-3);
  padding: 0.55rem 0.65rem;
  background: var(--color-navy-50);
  border: 1px solid var(--color-navy-200);
  border-radius: var(--radius-sm);
}

.device-manage-mappings span {
  color: var(--color-navy-700);
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
}

.device-manage-mappings code {
  min-width: 0;
  overflow: hidden;
  color: var(--color-navy-600);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.device-manage-test {
  display: grid;
  gap: var(--space-3);
  padding: var(--space-4);
  background: var(--color-navy-50);
  border: 1px solid var(--color-navy-200);
  border-radius: var(--radius-md);
}

.device-manage-test__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
}

.device-manage-test__row > p {
  margin: 0;
  color: var(--color-navy-600);
  font-size: var(--text-xs);
  line-height: var(--leading-normal);
}

.device-manage-test__row > button {
  flex: 0 0 auto;
}

.device-manage-test__result {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  padding: var(--space-3);
  color: var(--color-warning);
  background: var(--color-warning-soft);
  border: 1px solid var(--color-warning-border);
  border-radius: var(--radius-sm);
}

.device-manage-test__result[hidden] {
  display: none;
}

.device-manage-test__result > svg {
  flex: 0 0 auto;
  margin-top: 0.1rem;
  animation: device-setup-spin 1.2s linear infinite;
}

.device-manage-test__result strong {
  display: block;
  color: var(--color-navy-900);
  font-size: var(--text-xs);
}

.device-manage-test__result p {
  margin: 0.15rem 0 0;
  color: var(--color-navy-600);
  font-size: var(--text-xs);
  line-height: var(--leading-normal);
}

.device-manage-test__result.is-success {
  color: var(--color-success);
  background: var(--color-success-soft);
  border-color: var(--color-success-border);
}

.device-manage-test__result.is-error {
  color: var(--color-error-text);
  background: var(--color-error-soft);
  border-color: var(--color-error-border);
}

.device-manage-test__result.is-success > svg,
.device-manage-test__result.is-error > svg {
  animation: none;
}

.device-manage-dialog__actions[hidden] {
  display: none;
}

.device-manage-dialog__actions > div {
  display: flex;
  gap: var(--space-2);
}

.device-manage-dialog__actions--end {
  justify-content: flex-end;
}

.device-manage-dialog__panel {
  padding: 0;
  overflow: hidden;
}

.device-manage-dialog__body {
  --ui-scrollbar-inset: 1rem;
}

.device-manage-curl pre,
.device-setup-result__curl pre {
  --ui-scrollbar-inset: 0.35rem;
  --ui-scrollbar-thumb: var(--color-primary-border-medium);
}

.device-manage-dialog__header {
  margin: 0;
  padding: var(--space-5) var(--space-6);
  background: var(--color-surface);
  border-bottom: 1px solid var(--color-border-soft);
}

.device-manage-dialog__footer {
  padding: var(--space-4) var(--space-6);
  background: var(--color-surface);
  border-top: 1px solid var(--color-border-soft);
}

.device-manage-detail,
.device-manage-edit {
  padding: 0 var(--space-6) var(--space-5);
}

.device-manage-detail {
  gap: 0;
}

.device-manage-edit {
  gap: var(--space-4);
}

.device-manage-dialog__body > :first-child {
  padding-top: 0;
}

.device-manage-dialog__body > :last-child {
  padding-bottom: var(--space-5);
}

.device-manage-summary {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin: 0;
  padding: var(--space-4) 0;
  border-bottom: 1px solid var(--color-border-soft);
}

.device-manage-summary > div {
  min-width: 0;
  display: grid;
  grid-template-columns: 7.5rem minmax(0, 1fr);
  align-items: baseline;
  gap: var(--space-3);
  padding: 0.45rem 0;
}

.device-manage-summary dt {
  color: var(--color-muted);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
}

.device-manage-summary dd {
  min-width: 0;
  overflow: visible;
  margin: 0;
  color: var(--color-navy-900);
  font-size: var(--text-sm);
  font-weight: var(--weight-bold);
  overflow-wrap: anywhere;
  white-space: normal;
}

.device-manage-connection,
.device-manage-section,
.device-manage-test {
  display: grid;
  gap: var(--space-3);
  padding: var(--space-4) 0;
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--color-border-soft);
  border-radius: 0;
}

.device-manage-section-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
}

.device-manage-section-heading > div {
  min-width: 0;
  display: grid;
  gap: 0.15rem;
}

.device-manage-section-heading span {
  color: var(--color-navy-900);
  font-size: var(--text-sm);
  font-weight: var(--weight-extrabold);
}

.device-manage-section-heading small {
  color: var(--color-muted);
  font-size: var(--text-xs);
  line-height: var(--leading-normal);
}

.device-manage-field-row {
  min-width: 0;
  display: grid;
  grid-template-columns: 7.5rem minmax(0, 1fr);
  align-items: center;
  gap: var(--space-3);
  min-height: 2.5rem;
}

.device-manage-field-row > span {
  color: var(--color-muted);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
}

.device-manage-field-row > code,
.device-manage-field-row--token > div {
  min-width: 0;
}

.device-manage-field-row > code,
.device-manage-field-row--token code {
  overflow-wrap: anywhere;
  color: var(--color-navy-700);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
}

.device-manage-field-row--token > div {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.device-manage-field-row--token code {
  flex: 1;
  padding: 0.55rem 0.7rem;
  background: var(--color-navy-50);
  border: 1px solid var(--color-border-soft);
  border-radius: var(--radius-sm);
}

.device-manage-field-row--token button {
  flex: 0 0 auto;
}

.device-manage-reauth {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  gap: var(--space-2);
  padding-left: calc(7.5rem + var(--space-3));
}

.device-manage-reauth[hidden] {
  display: none;
}

.device-manage-reauth > p {
  grid-column: 1/-1;
  margin: 0;
  color: var(--color-error-text);
  font-size: var(--text-xs);
}

.device-manage-curl {
  min-width: 0;
  display: grid;
  gap: var(--space-2);
  padding-top: var(--space-2);
}

.device-manage-curl__copy {
  flex: 0 0 auto;
}

.device-manage-curl__copy:disabled {
  opacity: var(--opacity-disabled);
  cursor: not-allowed;
}

.device-manage-curl pre {
  max-width: 100%;
  overflow-x: auto;
  margin: 0;
  padding: var(--space-3);
  color: var(--color-navy-800);
  background: var(--color-navy-50);
  border: 1px solid var(--color-border-soft);
  border-radius: var(--radius-sm);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  line-height: var(--leading-normal);
}

.device-manage-mappings {
  gap: 0;
  border-top: 1px solid var(--color-border-soft);
}

.device-manage-mappings > div {
  grid-template-columns: minmax(9rem, 0.8fr) minmax(0, 1.2fr);
  gap: var(--space-4);
  padding: 0.65rem 0;
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--color-border-soft);
  border-radius: 0;
}

.device-manage-test__result {
  padding: var(--space-3);
}

.device-manage-dialog__actions {
  padding-top: var(--space-4);
}

.device-manage-edit {
  padding-top: var(--space-5);
}

.device-manage-edit__readonly {
  background: transparent;
  border-color: var(--color-border-soft);
}

.device-manage-dialog [hidden] {
  display: none !important;
}

.device-manage-disclosure {
  display: block;
  min-width: 0;
}

.device-manage-disclosure > summary {
  padding: var(--space-2) 0;
  color: var(--color-navy-800);
  font-size: var(--text-sm);
  font-weight: var(--weight-bold);
  cursor: pointer;
  list-style-position: inside;
}

.device-manage-disclosure > summary:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 3px;
  border-radius: var(--radius-sm);
}

.device-manage-disclosure[open] > summary {
  margin-bottom: var(--space-2);
}

.device-manage-disclosure.device-manage-section,
.device-manage-curl {
  display: block;
}

.device-manage-mqtt-more {
  padding-top: var(--space-2);
  border-top: 1px solid var(--color-border-soft);
}

.device-manage-curl {
  padding-top: 0;
}

.device-manage-status-hint {
  margin: 0;
  padding: var(--space-2) 0;
  color: var(--color-muted);
  font-size: var(--text-xs);
}

.device-manage-summary > div {
  padding-block: 0.35rem;
}

.device-manage-copy-field,
.device-manage-command-box {
  position: relative;
  min-width: 0;
  width: 100%;
}

.device-manage-field-row > .device-manage-copy-field > code {
  display: block;
  min-width: 0;
  min-height: 2.45rem;
  padding: 0.62rem 2.65rem 0.62rem var(--space-3);
  overflow-wrap: anywhere;
  white-space: pre-wrap;
  color: var(--color-navy-700);
  background: var(--color-navy-50);
  border: 1px solid var(--color-border-soft);
  border-radius: var(--radius-sm);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  line-height: var(--leading-normal);
}

.device-manage-copy-field__button {
  position: absolute;
  top: 0.32rem;
  right: 0.32rem;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.8rem;
  height: 1.8rem;
  padding: 0;
  color: var(--color-muted);
  background: var(--color-surface);
  border: 1px solid var(--color-border-soft);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: color 160ms ease, background 160ms ease, border-color 160ms ease;
}

.device-manage-copy-field__button:hover,
.device-manage-copy-field__button:focus-visible {
  color: var(--color-navy-900);
  border-color: var(--color-primary-border-medium);
  outline-offset: 2px;
}

.device-manage-copy-field__button:disabled {
  opacity: var(--opacity-disabled);
  cursor: not-allowed;
}

.device-manage-copy-field__button.is-copied {
  color: var(--color-success);
  background: var(--color-success-soft);
  border-color: var(--color-success-border);
  animation: device-manage-copy-confirm 250ms ease-out;
}

.device-manage-copy-field__button.is-copied::after {
  position: absolute;
  right: calc(100% + 0.35rem);
  padding: 0.2rem 0.4rem;
  color: var(--color-success);
  background: var(--color-surface);
  border: 1px solid var(--color-success-border);
  border-radius: var(--radius-sm);
  content: attr(data-copy-message);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  white-space: nowrap;
  pointer-events: none;
}

.device-manage-copy-field__button.is-copy-error {
  color: var(--color-error-text);
  border-color: var(--color-error-border);
}

.device-manage-curl .device-manage-command-box pre {
  padding-right: 3rem;
}

.device-manage-dialog .device-manage-field-row {
  gap: var(--space-2);
}

.device-manage-dialog .device-manage-connection,
.device-manage-dialog .device-manage-section,
.device-manage-dialog .device-manage-test {
  gap: var(--space-3);
  padding-block: var(--space-3);
}

.device-manage-dialog .device-manage-mqtt-more {
  padding-block: var(--space-2) 0;
}

.device-manage-dialog .device-manage-curl,
.device-manage-dialog .device-manage-section[data-device-manage-mapping-details] {
  padding-block: 0;
}

.device-manage-dialog .device-manage-disclosure > summary {
  min-height: 2.5rem;
  padding-block: 0.55rem;
  line-height: 1.4rem;
}

.device-manage-dialog .device-manage-disclosure[open] > summary {
  margin-bottom: var(--space-2);
}

.device-manage-dialog .device-manage-connection {
  row-gap: var(--space-2);
}

@keyframes device-manage-copy-confirm {
  0% {
    transform: scale(0.86);
  }
  55% {
    transform: scale(1.13);
  }
  100% {
    transform: scale(1);
  }
}
@media (prefers-reduced-motion: reduce) {
  .device-manage-copy-field__button {
    transition: none;
  }
  .device-manage-copy-field__button.is-copied {
    animation: none;
  }
}
.zigbee-mqtt-settings-note {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
}

.zigbee-mqtt-settings-note > span {
  min-width: 0;
  line-height: var(--leading-normal);
}

.zigbee-mqtt-settings-note .ui-button {
  flex: 0 0 auto;
}

.zigbee-device-preview {
  min-width: 0;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: var(--space-4);
}

.zigbee-device-preview.is-empty {
  display: block;
}

.zigbee-device-preview__media {
  position: relative;
  overflow: hidden;
}

.zigbee-device-preview__media > img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.zigbee-device-preview__copy {
  min-width: 0;
  display: grid;
  gap: var(--space-1);
}

.zigbee-device-preview__heading {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex-wrap: wrap;
}

.zigbee-device-preview__copy code {
  min-width: 0;
  overflow-wrap: anywhere;
  font-family: var(--font-mono);
}

@media (max-width: 30rem) {
  .zigbee-mqtt-settings-note {
    align-items: stretch;
    flex-direction: column;
  }
  .zigbee-mqtt-settings-note .ui-button {
    align-self: flex-start;
  }
  .zigbee-device-preview {
    gap: var(--space-3);
  }
}
.ir-card__count {
  min-width: 0;
  color: var(--color-text-secondary);
  white-space: nowrap;
}

.ir-remote {
  display: grid;
  gap: var(--space-4);
  min-width: 0;
}

.ir-remote__meta,
.ir-remote__notes {
  margin: 0;
  overflow-wrap: anywhere;
}

.ir-remote__grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 8rem), 1fr));
  gap: var(--space-2);
}

.ir-remote__item {
  position: relative;
  min-width: 0;
  display: flex;
  align-items: stretch;
  gap: var(--space-1);
}

.ir-remote__button {
  flex: 1 1 auto;
  min-width: 0;
  justify-content: center;
  text-align: center;
  white-space: normal;
  overflow-wrap: anywhere;
}

.ir-remote__delete {
  flex: 0 0 auto;
}

.ir-remote__delete.is-confirming {
  color: var(--color-error);
  outline: 2px solid currentColor;
  outline-offset: 1px;
}

.ir-remote__group {
  display: grid;
  gap: var(--space-2);
  min-width: 0;
}

.ir-remote__group-title {
  margin: 0;
  color: var(--color-text-secondary);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
}

.ir-remote__slots {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  min-width: 0;
}

.ir-slot {
  min-width: 0;
  white-space: normal;
}

.ir-slot.is-missing,
.ui-choice.is-missing,
.ui-segmented__item.is-missing,
.ui-icon-button.is-missing {
  opacity: 0.45;
  border-style: dashed !important;
  cursor: not-allowed;
}

.ir-remote__heading {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  min-width: 0;
}

.ir-remote__learn-hint {
  margin: 0;
}

.device-modal-power-wrap--learn {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-4);
}

.ir-remote__heading-main {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
  min-width: 0;
}

.ir-blaster-card__remotes {
  min-width: 0;
  display: grid;
  gap: var(--space-2);
}

.ir-blaster-card__remote {
  width: 100%;
  min-width: 0;
  max-width: 100%;
  border: 1px solid transparent;
  font-family: inherit;
  text-align: left;
  cursor: pointer;
}

.ir-blaster-card__remote--other {
  min-height: 3rem;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  color: var(--color-navy-800);
  background: var(--color-navy-100);
  border-radius: var(--radius-sm);
}

.ir-blaster-card__remote-name {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ir-blaster-card__remote:focus-visible,
.ir-remote-picker__tab:focus-visible {
  outline: 3px solid var(--color-focus-ring);
  outline-offset: 2px;
}

.ir-remote-detail {
  min-width: 0;
  display: grid;
  gap: var(--space-4);
}

.ir-remote-picker {
  min-width: 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.ir-remote-picker__tab {
  min-width: 0;
  max-width: 100%;
  display: flex;
  flex: 1 1 9rem;
  align-items: center;
  justify-content: center;
  padding: var(--space-2) var(--space-3);
  color: var(--color-text-secondary);
  background: var(--color-surface-subtle);
  border: 1px solid var(--color-border-soft);
  border-radius: var(--radius-md);
  text-align: center;
  cursor: pointer;
}

.ir-remote-picker__tab span {
  display: block;
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ir-remote-picker__tab.is-active {
  color: var(--color-primary-hover);
  background: var(--color-primary-soft-subtle);
  border-color: var(--color-primary-border);
}

.ir-remote-detail__content {
  min-width: 0;
}

@media (max-width: 80rem) {
  .device-onboarding__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .device-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .devices-toolbar {
    grid-template-columns: minmax(14rem, 1.5fr) minmax(9rem, 1fr) minmax(9rem, 1fr);
  }
  .devices-view-toggle {
    grid-column: 1/-1;
    width: max-content;
    justify-self: end;
  }
}
@media (max-width: 64rem) {
  .dashboard-sidebar {
    width: 11.75rem;
  }
  .dashboard-surface {
    margin-left: 11.75rem;
  }
  .dashboard-profile__name {
    display: none;
  }
  .dashboard-context {
    flex: 1 1 auto;
    margin-left: auto;
    justify-content: flex-end;
  }
  .dashboard-context__control {
    max-width: min(15rem, 32vw);
  }
  .device-grid {
    grid-template-columns: 1fr;
  }
  .devices-header {
    align-items: flex-start;
  }
}
@media (max-width: 48rem) {
  .dashboard-topbar {
    min-height: 0;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 0.45rem 0.6rem;
    padding: 0.55rem 0.8rem 0.65rem;
  }
  .dashboard-brand {
    gap: 0.5rem;
  }
  .dashboard-brand img {
    width: 1.8rem;
  }
  .dashboard-brand__wordmark {
    font-size: var(--text-lg);
  }
  .dashboard-account__divider {
    display: none;
  }
  .dashboard-language,
  .dashboard-voice-trigger {
    display: none;
  }
  .is-settings-page .dashboard-language {
    display: block;
  }
  .is-settings-page .dashboard-profile-language {
    display: none;
  }
  .dashboard-profile {
    padding-inline: 0.45rem;
  }
  .dashboard-profile-language {
    display: block;
    padding: 0.35rem 0.4rem 0.45rem;
    border-top: 1px solid var(--color-border-soft);
    border-bottom: 1px solid var(--color-border-soft);
  }
  .dashboard-profile-language__switcher {
    width: 100%;
  }
  .dashboard-profile-language__switcher .ui-language__trigger {
    width: 100%;
    justify-content: space-between;
    min-height: 2.35rem;
    padding-inline: 0.6rem;
    background: transparent;
    border: 0;
    border-radius: var(--radius-sm);
    box-shadow: none;
    font-size: var(--text-xs);
  }
  .dashboard-profile-language__switcher .ui-language__menu {
    position: static;
    width: 100%;
    min-width: 0;
    max-width: none;
    max-height: none;
    margin-top: 0.25rem;
    box-shadow: none;
  }
  .dashboard-context {
    grid-column: auto;
    width: 5.25rem;
    min-width: 5.25rem;
    max-width: 5.25rem;
    gap: 0.5rem;
    margin-left: auto;
    justify-self: end;
  }
  .dashboard-context .dashboard-dropdown {
    width: 100%;
  }
  .dashboard-context .dashboard-dropdown__menu {
    right: auto;
    left: 50%;
    width: min(12.5rem, 100vw - 1.25rem);
    min-width: min(12.5rem, 100vw - 1.25rem);
    max-width: min(12.5rem, 100vw - 1.25rem);
    transform: translateX(-50%);
  }
  .dashboard-context .dashboard-dropdown__option {
    min-width: 0;
    width: 100%;
    justify-content: space-between;
  }
  .dashboard-context__control {
    width: 100%;
    min-width: 5.25rem;
    max-width: 5.25rem;
    min-height: 2.35rem;
    align-items: center;
    justify-content: space-between;
    padding: 0.5rem 0.65rem;
    font-size: var(--text-2xs);
  }
  .dashboard-context__control span {
    max-width: 4rem;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }
  .device-detail-dialog {
    width: calc(100vw - 1rem);
    max-height: calc(100dvh - 1rem);
  }
  .device-detail-dialog__header,
  .device-detail-dialog__body {
    padding-inline: 0.875rem;
  }
  .device-detail-dialog__header {
    align-items: flex-start;
  }
  .device-detail-dialog__icon {
    width: 2.75rem;
    height: 2.75rem;
  }
  .device-modal-ac__row {
    grid-template-columns: 1fr;
    gap: 0.55rem;
  }
  .device-modal-options {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .device-modal-options--speed {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
  .device-modal-options--speed button {
    padding-inline: 0.35rem;
    font-size: var(--text-xs);
  }
  .device-modal-summary__grid {
    grid-template-columns: 1fr;
  }
  .device-detail-dialog__footer {
    align-items: flex-start;
    flex-direction: column;
    gap: 0.35rem;
    padding-inline: 1rem;
  }
  .device-manage-summary {
    grid-template-columns: 1fr;
    gap: 0;
  }
  .device-manage-summary > div {
    grid-template-columns: 6.5rem minmax(0, 1fr);
    gap: var(--space-2);
    align-items: center;
    padding: 0.4rem 0;
  }
  .device-manage-summary dd {
    overflow: visible;
    text-overflow: clip;
    white-space: normal;
    overflow-wrap: anywhere;
  }
  .device-manage-connection .device-manage-section-heading {
    align-items: flex-start;
  }
  .device-manage-test .device-manage-section-heading {
    align-items: stretch;
    flex-direction: column;
    gap: var(--space-2);
  }
  .device-manage-field-row {
    grid-template-columns: 1fr;
    align-items: stretch;
    gap: 0.4rem;
  }
  .device-manage-field-row--token > div {
    align-items: stretch;
    flex-direction: column;
  }
  .device-manage-field-row--token button {
    width: max-content;
  }
  .device-manage-reauth {
    grid-template-columns: 1fr;
    padding-left: 0;
  }
  .device-manage-edit > .device-setup-field,
  .device-manage-edit > .device-manage-edit__readonly,
  .device-manage-edit > .device-setup-mapping {
    margin-block: var(--space-2);
  }
  .device-manage-edit > .device-setup-field:first-child {
    margin-top: 0;
  }
  .device-manage-edit > .device-setup-mapping:last-of-type {
    margin-bottom: 0;
  }
  .device-manage-test .device-manage-dialog__secondary {
    flex: 0 0 auto;
    align-self: flex-start;
    min-width: 0;
    padding-inline: 0.7rem;
    white-space: nowrap;
  }
  .device-modal-readings {
    grid-template-columns: 1fr;
  }
  .device-modal-light {
    min-height: 6.25rem;
    padding-inline: 0.35rem;
  }
  .device-modal-light__bulb {
    width: 2.6rem;
    height: 2.6rem;
  }
  .dashboard-sidebar {
    display: none;
  }
  .dashboard-surface {
    margin-left: 0;
    padding-bottom: 5.25rem;
  }
  .dashboard-main {
    padding: 0.75rem 0.8rem 1.5rem;
  }
  .dashboard-mobile-nav {
    position: fixed;
    inset: auto 0 0 0;
    z-index: 90;
    min-height: 4.6rem;
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    align-items: center;
    padding: 0.48rem 0.35rem calc(0.42rem + env(safe-area-inset-bottom));
    background: var(--color-surface-glass-strong);
    border-top: 1px solid var(--color-navy-200);
  }
  .dashboard-mobile-nav__item {
    min-width: 0;
    min-height: 3.35rem;
    display: grid;
    place-items: center;
    gap: 0.14rem;
    padding: 0.28rem;
    color: var(--color-navy-500);
    background: transparent;
    border: 0;
    border-radius: var(--radius-md);
    font: inherit;
    font-size: var(--text-2xs);
    font-weight: var(--weight-bold);
    cursor: pointer;
  }
  .dashboard-mobile-nav__item.is-active {
    color: var(--color-primary-hover);
    background: var(--color-teal-50);
  }
  .dashboard-mobile-nav__item:focus-visible {
    outline: 2px solid var(--color-border-focus);
    outline-offset: -2px;
  }
  .dashboard-mobile-nav__item:disabled {
    cursor: wait;
    opacity: 0.65;
  }
  .dashboard-mobile-nav__voice {
    position: relative;
    width: 3.75rem;
    min-width: 3.75rem;
    height: 3.75rem;
    min-height: 3.75rem;
    align-self: start;
    justify-self: center;
    margin-top: -1.72rem;
    padding: 0;
    overflow: visible;
    color: var(--color-primary-on);
    background: var(--color-primary);
    border-radius: var(--radius-pill);
    box-shadow: 0 0 0 0.34rem var(--color-surface-glass-strong), var(--shadow-primary-control);
    transition: transform 160ms ease, background-color 160ms ease, box-shadow 160ms ease;
  }
  .dashboard-mobile-nav__voice:hover {
    color: var(--color-primary-on);
    background: var(--color-primary-hover);
  }
  .dashboard-mobile-nav__voice:active {
    transform: scale(0.94);
  }
  .dashboard-mobile-nav__voice > span {
    position: absolute;
    top: calc(100% + 0.2rem);
    left: 50%;
    color: var(--color-primary-hover);
    font-size: var(--text-2xs);
    font-weight: var(--weight-extrabold);
    line-height: 1;
    transform: translateX(-50%);
    white-space: nowrap;
  }
  .dashboard-mobile-nav__voice.is-active {
    color: var(--color-error-on);
    background: var(--color-error);
    box-shadow: 0 0 0 0.34rem var(--color-surface-glass-strong), var(--shadow-control-raised);
  }
  .dashboard-mobile-nav__voice.is-active:hover {
    background: var(--color-error-hover);
  }
  .dashboard-mobile-nav__voice.is-active > span {
    color: var(--color-error-text);
  }
  .dashboard-mobile-nav__voice:focus-visible {
    outline: 3px solid var(--color-primary-border-emphasis);
    outline-offset: 0.34rem;
  }
  .dashboard-mobile-nav__voice.is-active:focus-visible {
    outline-color: var(--color-error-border);
  }
  .devices-header {
    flex-direction: column;
    align-items: stretch;
    gap: 0.6rem;
    margin-bottom: 1rem;
  }
  .devices-header h1 {
    font-size: var(--text-2xl);
    line-height: var(--leading-tight);
    letter-spacing: var(--tracking-tight);
  }
  .device-onboarding {
    margin-top: 0;
    padding: 0;
    background: transparent;
    border: 0;
    box-shadow: none;
  }
  .device-onboarding__heading {
    margin-bottom: 0.7rem;
  }
  .device-onboarding__heading h2 {
    font-size: var(--text-sm);
    line-height: var(--leading-snug);
  }
  .device-onboarding__heading p {
    margin-top: 0.15rem;
    font-size: var(--text-xs);
    line-height: var(--leading-normal);
  }
  .device-onboarding__grid,
  .device-grid {
    grid-template-columns: 1fr;
  }
  .device-card__control--gangs {
    grid-template-columns: repeat(var(--device-gang-count, 3), minmax(0, 1fr)) auto;
  }
  .device-method {
    min-height: 4.65rem;
    gap: 0.65rem;
    padding: 0.65rem 0.7rem;
  }
  .device-method__icon {
    width: 2.45rem;
    height: 2.45rem;
    border-radius: var(--radius-sm);
  }
  .device-method strong {
    font-size: var(--text-xs);
  }
  .device-method small {
    font-size: var(--text-2xs);
    line-height: var(--leading-snug);
    white-space: normal;
  }
  .devices-toolbar {
    grid-template-columns: 1fr;
  }
  .devices-view-toggle {
    display: none;
  }
  .device-setup-dialog {
    width: calc(100vw - 1.5rem);
    max-height: calc(100dvh - 1.5rem);
  }
  .device-setup-dialog__panel {
    max-height: calc(100dvh - 1.5rem);
    padding: var(--space-5);
  }
  .device-setup-types__grid {
    grid-template-columns: 1fr;
  }
  .device-setup-mapping__row {
    grid-template-columns: 1fr;
    gap: var(--space-2);
  }
  .device-card {
    padding: 0.78rem 0;
    border-width: 0 0 1px;
    border-radius: 0;
    box-shadow: none;
    background: transparent;
  }
  .device-card__copy h3 {
    overflow: visible;
    white-space: normal;
    text-overflow: clip;
    overflow-wrap: anywhere;
    line-height: var(--leading-snug);
  }
  .device-card__copy p {
    flex-wrap: wrap;
    overflow: visible;
    white-space: normal;
    text-overflow: clip;
    overflow-wrap: anywhere;
  }
  .device-card:hover {
    transform: none;
    box-shadow: none;
  }
  .device-grid.is-list .device-card {
    grid-template-columns: 1fr;
  }
  .device-grid.is-list .device-card__top,
  .device-grid.is-list .device-card__copy,
  .device-grid.is-list .device-card__control {
    grid-column: 1;
  }
  .device-grid.is-list .device-card__control {
    min-width: 0;
  }
}
@media (max-width: 26.5625rem) {
  .dashboard-topbar {
    padding-inline: 0.65rem;
  }
  .dashboard-main {
    padding-inline: 0.65rem;
  }
  .dashboard-brand img {
    width: 1.65rem;
  }
  .dashboard-brand__wordmark {
    font-size: var(--text-base);
  }
  .dashboard-account {
    gap: 0.15rem;
  }
  .dashboard-profile__avatar {
    width: 2rem;
    height: 2rem;
  }
  .devices-header h1 {
    font-size: var(--text-xl);
  }
  .device-method small {
    white-space: normal;
  }
  .device-manage-summary > div {
    padding-block: 0.4rem;
  }
  .device-setup-dialog__panel {
    padding: var(--space-4);
  }
  .device-setup-dialog__actions {
    flex-direction: column-reverse;
  }
  .device-setup-dialog__cancel,
  .device-setup-dialog__submit {
    width: 100%;
  }
}
.automation-page {
  display: grid;
  gap: var(--space-6);
  width: min(100%, var(--content-max));
  margin: 0 auto;
}

.automation-page__header,
.automation-page__controls,
.automation-workspace__bar,
.automation-panel__header,
.automation-item,
.automation-item__title,
.automation-item__actions,
.automation-form__section-heading,
.automation-tabs,
.automation-empty__flow,
.automation-item__flow,
.automation-item__meta {
  display: flex;
  align-items: center;
}

.automation-page__header {
  justify-content: space-between;
  gap: var(--space-6);
  padding-bottom: var(--space-2);
}

.automation-page__intro {
  min-width: 0;
}

.automation-page__intro h1 {
  margin: 0;
}

.automation-page__intro p {
  max-width: 42rem;
  margin: var(--space-2) 0 0;
}

.automation-page__controls {
  justify-content: flex-end;
  gap: var(--space-3);
  flex-wrap: wrap;
}

.automation-workspace {
  min-height: 30rem;
  overflow: hidden;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
  box-shadow: var(--shadow-card);
}

.automation-workspace__bar {
  justify-content: space-between;
  gap: var(--space-4);
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--color-border-soft);
  background: var(--color-surface-subtle);
}

.automation-tabs {
  gap: var(--space-1);
}

.automation-tab {
  border-radius: var(--radius-md);
}

.automation-tab.is-active {
  color: var(--color-primary-hover);
  background: var(--color-primary-soft);
}

.automation-workspace__hint {
  margin: 0;
  color: var(--color-text-tertiary);
  font-size: var(--text-sm);
  text-align: right;
}

.automation-panel {
  display: grid;
  align-content: start;
  gap: var(--space-4);
  padding: var(--space-6);
}

.automation-panel__header {
  justify-content: space-between;
  align-items: flex-start;
  gap: var(--space-4);
}

.automation-panel__header h2,
.automation-item h3,
.automation-empty h3 {
  margin: 0;
}

.automation-panel__header p,
.automation-item p,
.automation-empty p {
  margin: var(--space-1) 0 0;
  color: var(--color-text-secondary);
}

.automation-list {
  display: grid;
  gap: var(--space-3);
}

.automation-item {
  justify-content: space-between;
  gap: var(--space-5);
  min-width: 0;
  padding: var(--space-4);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  transition: border-color 140ms ease, box-shadow 140ms ease, transform 140ms ease;
}

.automation-item:hover {
  border-color: var(--color-primary-border-medium);
  box-shadow: var(--shadow-card-hover);
}

.automation-item__main {
  display: grid;
  gap: var(--space-3);
  min-width: 0;
}

.automation-item__title {
  gap: var(--space-2);
  flex-wrap: wrap;
}

.automation-item__flow {
  min-width: 0;
  gap: var(--space-2);
  flex-wrap: wrap;
}

.automation-flow-step {
  display: inline-flex;
  align-items: center;
  min-width: 0;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--color-border-soft);
  border-radius: var(--radius-sm);
  background: var(--color-surface-subtle);
  color: var(--color-text-secondary);
  font-size: var(--text-sm);
}

.automation-flow-step strong {
  color: var(--color-primary-hover);
  font-size: var(--text-2xs);
  letter-spacing: var(--tracking-wide);
}

.automation-flow-step span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.automation-flow-arrow {
  flex: 0 0 auto;
  color: var(--color-text-tertiary);
  font-size: var(--text-lg);
}

.automation-item__meta {
  gap: var(--space-2);
  color: var(--color-text-tertiary);
  font-size: var(--text-xs);
}

.automation-item__actions {
  justify-content: flex-end;
  gap: var(--space-2);
  flex: 0 0 auto;
  flex-wrap: wrap;
}

.automation-empty {
  display: grid;
  justify-items: center;
  gap: var(--space-3);
  max-width: 44rem;
  margin: var(--space-8) auto;
  padding: var(--space-8);
  text-align: center;
}

.automation-empty__flow {
  justify-content: center;
  gap: var(--space-2);
  flex-wrap: wrap;
  margin-bottom: var(--space-2);
}

.automation-empty > p {
  max-width: 34rem;
}

.automation-dialog {
  width: min(50rem, 100vw - 2rem);
}

.automation-dialog__panel,
.automation-dialog .ui-dialog__content,
.automation-form {
  min-width: 0;
}

.automation-dialog__title {
  margin: 0;
  padding-right: var(--space-10);
  color: var(--color-text-primary);
  font-size: var(--text-xl);
  font-weight: var(--weight-extrabold);
  line-height: var(--leading-snug);
  letter-spacing: var(--tracking-tight);
}

.automation-form,
.automation-form__section,
.automation-actions {
  display: grid;
  gap: var(--space-4);
}

.automation-form {
  position: relative;
}

.automation-form__section {
  position: relative;
  padding: var(--space-5);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface-subtle);
}

.automation-form__section + .automation-form__section::before {
  position: absolute;
  top: calc(var(--space-4) * -1);
  left: 2rem;
  width: 1px;
  height: var(--space-4);
  background: var(--color-primary-border-medium);
  content: "";
}

.automation-form__section-heading {
  gap: var(--space-2);
  margin-bottom: var(--space-1);
}

.automation-form__section-heading strong {
  font-size: var(--text-base);
}

.automation-trigger-block__grid,
.automation-monitoring__grid,
.automation-action-row__device {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-3);
}

.automation-action-row {
  min-width: 0;
  display: grid;
  gap: var(--space-3);
}

.automation-action-row + .automation-action-row {
  padding-top: var(--space-4);
  border-top: 1px solid var(--color-border-soft);
}

.automation-action-row > [data-remove-action] {
  justify-self: end;
}

.automation-trigger-list,
.automation-trigger-entry,
.automation-trigger-block__state,
.automation-monitoring {
  display: grid;
  gap: var(--space-4);
}

.automation-trigger-controls {
  display: flex;
  justify-content: flex-start;
}

.automation-trigger-connector {
  display: flex;
  justify-content: center;
  padding: 0 var(--space-5);
}

.automation-trigger-connector__select {
  width: 7rem;
  font-weight: var(--weight-extrabold);
  text-align: center;
}

.automation-trigger-block > [data-remove-trigger] {
  justify-self: end;
}

.automation-monitoring {
  padding-top: var(--space-5);
}

[data-trigger-value],
[data-action-value] {
  min-width: 0;
}

.automation-trigger-block__time {
  display: grid;
  gap: var(--space-4);
}

.automation-schedule-days {
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}

.automation-schedule-days__options {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-4);
  margin-top: var(--space-2);
}

@media (max-width: 64rem) {
  .automation-workspace__bar {
    align-items: flex-start;
    flex-direction: column;
  }
  .automation-workspace__hint {
    text-align: left;
  }
  .automation-item {
    align-items: stretch;
    flex-direction: column;
  }
  .automation-item__actions {
    justify-content: flex-start;
  }
}
@media (max-width: 52rem) {
  .automation-page__header {
    align-items: stretch;
    flex-direction: column;
  }
  .automation-page__controls {
    justify-content: flex-start;
  }
  .automation-panel {
    padding: var(--space-4);
  }
  .automation-empty {
    margin: var(--space-4) auto;
    padding: var(--space-6) var(--space-3);
  }
  .automation-flow-step {
    max-width: 100%;
  }
}
@media (max-width: 34rem) {
  .automation-page {
    gap: var(--space-4);
  }
  .automation-page__controls {
    display: grid;
    grid-template-columns: 1fr;
    width: 100%;
  }
  .automation-page__controls .ui-button {
    width: 100%;
  }
  .automation-tabs {
    width: 100%;
  }
  .automation-tab {
    flex: 1 1 0;
  }
  .automation-workspace__bar {
    padding: var(--space-2);
  }
  .automation-panel__header p,
  .automation-workspace__hint {
    font-size: var(--text-xs);
  }
  .automation-item__flow,
  .automation-empty__flow {
    display: grid;
    grid-template-columns: 1fr;
    width: 100%;
  }
  .automation-flow-step {
    width: 100%;
  }
  .automation-flow-arrow {
    transform: rotate(90deg);
    justify-self: center;
    line-height: 1;
  }
  .automation-item__actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .automation-item__actions .ui-button {
    width: 100%;
  }
  .automation-trigger-block__grid,
  .automation-monitoring__grid,
  .automation-action-row__device {
    grid-template-columns: 1fr;
  }
  .automation-form__section {
    padding: var(--space-4);
  }
  .automation-trigger-connector {
    padding: 0;
  }
  .automation-trigger-connector__select {
    width: 100%;
  }
}
.assistant-floating {
  position: fixed;
  right: var(--space-5);
  bottom: var(--space-5);
  z-index: 60;
  display: grid;
  justify-items: end;
  gap: var(--space-3);
  pointer-events: none;
}

.assistant-floating.is-open {
  z-index: 200;
}

.assistant-floating__trigger,
.assistant-floating__panel {
  pointer-events: auto;
}

.assistant-floating__trigger {
  display: grid;
  width: 3.25rem;
  height: 3.25rem;
  place-items: center;
  border: 0;
  border-radius: 50%;
  background: var(--color-primary);
  color: var(--color-primary-on);
  box-shadow: var(--shadow-card);
  cursor: pointer;
}

.assistant-floating__trigger:hover {
  background: var(--color-primary-hover);
  color: var(--color-primary-on);
}

.assistant-floating__trigger:focus-visible {
  outline: 3px solid var(--color-focus-ring);
  outline-offset: 2px;
}

.assistant-floating__panel {
  display: flex;
  width: min(24rem, 100vw - 2rem);
  height: min(32rem, 100dvh - 8rem);
  flex-direction: column;
  overflow: hidden;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
  box-shadow: var(--shadow-card);
}

.assistant-floating__panel[hidden] {
  display: none;
}

.assistant-floating__header {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  flex: 0 0 auto;
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--color-border-soft);
  background: var(--color-surface);
}

.assistant-floating__header > div {
  display: grid;
  gap: 0.1rem;
}

.assistant-floating__header span {
  color: var(--color-text-tertiary);
  font-size: var(--text-xs);
}

.assistant-floating__body {
  min-height: 0;
  flex: 1 1 auto;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: var(--space-4);
}

.assistant-floating__empty {
  display: grid;
  gap: var(--space-3);
  padding-top: var(--space-2);
}

.assistant-floating__empty[hidden] {
  display: none;
}

.assistant-floating__empty p {
  margin: 0;
  color: var(--color-text-secondary);
  font-size: var(--text-sm);
}

.assistant-floating__suggestions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.assistant-floating__suggestions button {
  padding: 0.45rem 0.7rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-pill);
  background: var(--color-surface);
  color: var(--color-text-secondary);
  font: inherit;
  font-size: var(--text-xs);
  cursor: pointer;
}

.assistant-floating__suggestions button:hover {
  border-color: var(--color-primary-border-hover);
  color: var(--color-text-primary);
}

.assistant-floating__thread {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.assistant-floating__message {
  display: flex;
}

.assistant-floating__message--assistant {
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-2);
}

.assistant-floating__message--user {
  justify-content: flex-end;
}

.assistant-floating__bubble {
  max-width: 88%;
  padding: 0.65rem 0.8rem;
  border-radius: var(--radius-md);
  font-size: var(--text-sm);
  line-height: var(--leading-relaxed);
  white-space: pre-wrap;
}

.assistant-floating__bubble--markdown {
  white-space: normal;
}

.assistant-floating__bubble--markdown > :first-child {
  margin-top: 0;
}

.assistant-floating__bubble--markdown > :last-child {
  margin-bottom: 0;
}

.assistant-floating__bubble--markdown p {
  margin: 0 0 0.55rem;
}

.assistant-floating__bubble--markdown h4,
.assistant-floating__bubble--markdown h5 {
  margin: 0 0 0.45rem;
  color: inherit;
  font-size: inherit;
  font-weight: var(--weight-bold);
  line-height: var(--leading-snug);
}

.assistant-floating__bubble--markdown ul,
.assistant-floating__bubble--markdown ol {
  margin: 0.35rem 0 0.55rem;
  padding-left: 1.15rem;
}

.assistant-floating__bubble--markdown li + li {
  margin-top: 0.2rem;
}

.assistant-floating__bubble--markdown strong {
  font-weight: var(--weight-bold);
}

.assistant-floating__bubble--markdown code {
  padding: 0.08rem 0.28rem;
  border: 1px solid var(--color-border-soft);
  border-radius: var(--radius-sm);
  background: var(--color-surface);
  font-size: 0.9em;
  overflow-wrap: anywhere;
}

.assistant-floating__message--user .assistant-floating__bubble {
  background: var(--color-primary);
  color: var(--color-primary-on);
}

.assistant-floating__message--assistant .assistant-floating__bubble,
.assistant-floating__message--thinking .assistant-floating__bubble {
  border: 1px solid var(--color-border-soft);
  background: var(--color-surface-page);
  color: var(--color-text-primary);
}

.assistant-floating__choices {
  display: flex;
  max-width: 92%;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.assistant-floating__choice {
  padding: 0.48rem 0.72rem;
  border: 1px solid var(--color-control-border);
  border-radius: var(--radius-pill);
  background: var(--color-surface);
  color: var(--color-text-primary);
  font: inherit;
  font-size: var(--text-xs);
  cursor: pointer;
  transition: border-color 150ms ease, background 150ms ease;
}

.assistant-floating__choice:hover:not(:disabled) {
  border-color: var(--color-primary-border-hover);
  background: var(--color-surface-page);
}

.assistant-floating__choice:focus-visible {
  outline: 3px solid var(--color-focus-ring);
  outline-offset: 2px;
}

.assistant-floating__choice:disabled {
  cursor: default;
  opacity: 0.55;
}

.assistant-floating__choice--primary {
  border-color: var(--color-primary);
  background: var(--color-primary);
  color: var(--color-primary-on);
}

.assistant-floating__choice--primary:hover:not(:disabled) {
  background: var(--color-primary);
}

.assistant-floating__choice-form {
  display: flex;
  min-width: 0;
  max-width: 92%;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-2);
  margin: 0;
  padding: 0;
  border: 0;
}

.assistant-floating__option {
  display: flex;
  width: 100%;
  min-width: 0;
  align-items: flex-start;
  gap: var(--space-2);
  padding: 0.48rem 0.72rem;
  border: 1px solid var(--color-control-border);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  color: var(--color-text-primary);
  font-size: var(--text-xs);
  overflow-wrap: anywhere;
  cursor: pointer;
}

.assistant-floating__option:has(input:checked) {
  border-color: var(--color-primary-border-hover);
  background: var(--color-surface-page);
}

.assistant-floating__option:has(input:focus-visible) {
  outline: 3px solid var(--color-focus-ring);
  outline-offset: 2px;
}

.assistant-floating__option input {
  flex: none;
  margin-top: 0.15rem;
  accent-color: var(--color-primary);
}

.assistant-floating__choice-form.is-disabled .assistant-floating__option {
  cursor: default;
  opacity: 0.55;
}

.assistant-floating__sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.assistant-floating__message--thinking .assistant-floating__bubble {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  min-height: 1.5rem;
}

.assistant-floating__message--thinking span {
  width: 0.38rem;
  height: 0.38rem;
  border-radius: 50%;
  background: var(--color-text-tertiary);
  animation: assistant-thinking 1s ease-in-out infinite;
}

.assistant-floating__message--thinking span:nth-child(2) {
  animation-delay: 0.14s;
}

.assistant-floating__message--thinking span:nth-child(3) {
  animation-delay: 0.28s;
}

@keyframes assistant-thinking {
  0%, 60%, 100% {
    opacity: 0.35;
    transform: translateY(0);
  }
  30% {
    opacity: 1;
    transform: translateY(-0.2rem);
  }
}
.assistant-floating__composer {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: flex-end;
  gap: var(--space-2);
  flex: 0 0 auto;
  padding: var(--space-3);
  border-top: 1px solid var(--color-border-soft);
  background: var(--color-surface);
}

.assistant-floating__composer textarea {
  width: 100%;
  min-width: 0;
  min-height: 2.5rem;
  max-height: 6rem;
  resize: none;
  padding: 0.65rem 0.75rem;
  border: 1px solid var(--color-control-border);
  border-radius: var(--radius-md);
  background: var(--color-control-bg);
  color: var(--color-text-primary);
  font: inherit;
  font-size: var(--text-sm);
}

.assistant-floating__composer textarea:focus {
  border-color: var(--color-control-border-focus);
  outline: 3px solid var(--color-focus-ring);
}

.assistant-floating__composer .ui-button {
  flex: 0 0 auto;
  width: 2.5rem;
  min-width: 2.5rem;
  height: 2.5rem;
  padding: 0;
}

.assistant-floating__composer[data-assistant-busy] .ui-button {
  opacity: 0.55;
  pointer-events: none;
}

@media (max-width: 768px) {
  html.is-assistant-mobile-open,
  html.is-assistant-mobile-open body {
    overflow: hidden;
  }
  .assistant-floating {
    right: var(--space-3);
    bottom: calc(5.5rem + env(safe-area-inset-bottom));
  }
  .assistant-floating.is-open {
    inset: 0;
    display: block;
    z-index: 200;
  }
  .assistant-floating__trigger {
    width: 3rem;
    height: 3rem;
  }
  .assistant-floating.is-open .assistant-floating__trigger {
    display: none;
  }
  .assistant-floating__panel {
    position: fixed;
    inset: 0;
    z-index: 201;
    width: 100vw;
    height: 100dvh;
    max-width: none;
    max-height: none;
    border: 0;
    border-radius: 0;
    box-shadow: none;
  }
  .assistant-floating__header {
    min-height: calc(3.5rem + env(safe-area-inset-top));
    padding: calc(var(--space-3) + env(safe-area-inset-top)) var(--space-4) var(--space-3);
  }
  .assistant-floating__body {
    padding: var(--space-4);
  }
  .assistant-floating__choices,
  .assistant-floating__choice-form {
    max-width: 100%;
  }
  .assistant-floating__composer {
    position: sticky;
    bottom: 0;
    padding: var(--space-3) var(--space-4) calc(var(--space-3) + env(safe-area-inset-bottom));
  }
}
@media (prefers-reduced-motion: reduce) {
  .assistant-floating__message--thinking span {
    animation: none;
  }
}
.settings-page {
  min-width: 0;
}

.settings-page__header {
  margin-bottom: var(--space-6);
}

.settings-page__header--scoped {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--space-4);
}

.settings-page__header--scoped > div {
  min-width: 0;
}

.settings-page__header--compact {
  margin-bottom: var(--space-5);
}

.settings-layout {
  min-width: 0;
  display: grid;
  grid-template-columns: 14rem minmax(0, 1fr);
  gap: var(--space-4);
  align-items: start;
}

.settings-nav-mobile {
  display: none;
  min-width: 0;
}

.settings-nav {
  min-width: 0;
  display: grid;
  gap: var(--space-4);
}

.settings-nav__group {
  display: grid;
  gap: 0.3rem;
}

.settings-nav__group + .settings-nav__group {
  padding-top: var(--space-3);
  border-top: 1px solid var(--color-border-soft);
}

.settings-nav__group > span {
  margin-bottom: 0.15rem;
  color: var(--color-text-tertiary);
  font-size: var(--text-2xs);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-normal);
  text-transform: none;
}

.settings-nav__group > a {
  min-width: 0;
  min-height: 2.55rem;
  display: flex;
  align-items: center;
  gap: 0.7rem;
  padding: 0.55rem 0.7rem;
  border-radius: var(--radius-sm);
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
}

.settings-overview {
  min-width: 0;
  display: grid;
  gap: var(--space-4);
}

.settings-overview__intro span {
  color: var(--color-primary-hover);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-normal);
  text-transform: none;
}

.settings-overview__intro h2 {
  margin: 0.35rem 0 0;
  color: var(--color-text);
  font-size: var(--text-xl);
  font-weight: var(--weight-extrabold);
  letter-spacing: var(--tracking-tight);
}

.settings-overview__intro p {
  max-width: 46rem;
  margin: var(--space-2) 0 0;
  color: var(--color-text-tertiary);
  font-size: var(--text-sm);
  line-height: var(--leading-normal);
}

.settings-overview__intro + .ui-form {
  margin-top: var(--space-5);
}

.settings-general__grid {
  display: grid;
  grid-template-columns: minmax(16rem, 24rem) minmax(0, 1fr);
  gap: var(--space-5);
  margin-top: var(--space-5);
}

.settings-general__summary {
  margin: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-3);
}

.settings-general__summary > div {
  min-width: 0;
  padding: var(--space-3);
  background: var(--color-surface-subtle);
  border: 1px solid var(--color-border-soft);
  border-radius: var(--radius-md);
}

.settings-general__summary dt {
  margin-bottom: var(--space-1);
  color: var(--color-text-tertiary);
  font-size: var(--text-xs);
}

.settings-general__summary dd {
  margin: 0;
  color: var(--color-text);
  font-size: var(--text-sm);
  font-weight: var(--weight-bold);
  overflow-wrap: anywhere;
}

@media (max-width: 48rem) {
  .settings-general__grid {
    grid-template-columns: 1fr;
  }
  .settings-general__summary {
    grid-template-columns: 1fr;
  }
}
.settings-disclosure {
  min-width: 0;
  margin-top: var(--space-3);
  border: 1px solid var(--color-border-soft);
  border-radius: var(--radius-md);
}

.settings-disclosure > summary {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-2);
  cursor: pointer;
  padding: var(--space-3);
  color: var(--color-text-secondary);
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  list-style: none;
}

.settings-disclosure > summary::-webkit-details-marker {
  display: none;
}

.settings-disclosure > summary::after {
  content: "+";
  margin-left: auto;
  font-size: var(--text-lg);
  font-weight: var(--weight-regular);
}

.settings-disclosure[open] > summary::after {
  content: "−";
}

.settings-disclosure > summary:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

.settings-disclosure > p {
  margin: 0;
  padding: 0 var(--space-3) var(--space-3);
  color: var(--color-text-tertiary);
  font-size: var(--text-sm);
  line-height: var(--leading-normal);
}

.settings-disclosure > code {
  display: block;
  margin: 0;
  padding: 0 var(--space-3) var(--space-3);
  overflow-wrap: anywhere;
}

.api-overview__details .api-overview__meta,
.api-overview__details .api-security {
  margin: var(--space-3);
}

.mqtt-status-disclosure {
  margin: 0;
}

.mqtt-status-disclosure__state {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  color: var(--color-text-tertiary);
  font-weight: var(--weight-regular);
}

.mqtt-status-disclosure__body {
  display: grid;
  justify-items: start;
  gap: var(--space-3);
  padding: 0 var(--space-3) var(--space-3);
}

.mqtt-status-disclosure__body .mqtt-status-table {
  width: 100%;
}

.mqtt-panel {
  min-width: 0;
  display: grid;
  gap: var(--space-4);
}

.mqtt-tab-panel[hidden],
.mqtt-certificate-fields[hidden],
.mqtt-mtls-fields[hidden] {
  display: none;
}

.mqtt-tab-panel {
  min-width: 0;
  display: grid;
  gap: var(--space-3);
}

.mqtt-section {
  min-width: 0;
}

.mqtt-section__heading {
  min-width: 0;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-4);
  margin-bottom: var(--space-4);
}

.mqtt-section__heading h2 {
  margin: 0;
  color: var(--color-text);
  font-size: var(--text-lg);
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-tight);
}

.mqtt-section__heading p {
  margin: 0.25rem 0 0;
  color: var(--color-text-tertiary);
  font-size: var(--text-sm);
  line-height: var(--leading-normal);
}

.mqtt-form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-4);
}

.mqtt-form-grid--connection {
  grid-template-columns: minmax(0, 1fr) minmax(8rem, 0.38fr) minmax(0, 1fr);
  align-items: start;
}

.mqtt-field {
  min-width: 0;
}

.mqtt-field--wide {
  grid-column: 1/-1;
}

.mqtt-security-block {
  display: grid;
  gap: var(--space-3);
}

.mqtt-security-block__heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-3);
}

.mqtt-security-block__heading h3 {
  margin: 0;
  color: var(--color-text-secondary);
  font-size: var(--text-sm);
  font-weight: var(--weight-bold);
}

.mqtt-security-block__heading p {
  margin: 0.2rem 0 0;
  color: var(--color-text-tertiary);
  font-size: var(--text-xs);
  line-height: var(--leading-normal);
}

.mqtt-certificate-fields {
  display: grid;
  gap: var(--space-3);
  padding-top: var(--space-2);
}

.mqtt-divider {
  margin: var(--space-4) 0;
  border-top: 1px solid var(--color-border-soft);
}

.mqtt-input-action {
  min-width: 0;
  position: relative;
}

.mqtt-input-action .ui-input {
  padding-right: 2.9rem;
}

.mqtt-input-action .ui-icon-button {
  position: absolute;
  top: 50%;
  right: 0.4rem;
  transform: translateY(-50%);
}

.mqtt-status-table {
  display: grid;
  margin: 0;
}

.mqtt-status-table--wide {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0;
}

.mqtt-status-table > div {
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(7.5rem, 0.8fr) minmax(0, 1.2fr);
  gap: var(--space-3);
  padding: 0.45rem 0;
  border-bottom: 1px solid var(--color-border-soft);
}

.mqtt-status-table--wide > div {
  grid-template-columns: 1fr;
  gap: 0.2rem;
  padding: 0.75rem var(--space-4);
  border-right: 1px solid var(--color-border-soft);
}

.mqtt-status-table--wide > div:nth-child(3n+1) {
  padding-left: 0;
}

.mqtt-status-table--wide > div:nth-child(3n) {
  padding-right: 0;
  border-right: 0;
}

.mqtt-status-table--wide > div:nth-last-child(-n+3) {
  border-bottom: 0;
}

.mqtt-status-table > div:last-child {
  border-bottom: 0;
}

.mqtt-status-table dt {
  color: var(--color-text-tertiary);
  font-size: var(--text-xs);
}

.mqtt-status-table dd {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 0.45rem;
  margin: 0;
  color: var(--color-text-secondary);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  overflow-wrap: anywhere;
}

.mqtt-test-label--compact {
  display: none;
}

.mqtt-savebar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding: var(--space-3) 0;
}

.mqtt-savebar > span {
  color: var(--color-text-tertiary);
  font-size: var(--text-xs);
}

.mqtt-savebar > span[data-state=success] {
  color: var(--color-success);
}

.mqtt-savebar > span[data-state=error] {
  color: var(--color-error);
}

.mqtt-savebar > div {
  display: flex;
  gap: var(--space-2);
}

.mqtt-save-confirm-dialog__content {
  text-align: center;
}

.mqtt-save-confirm-dialog__icon {
  margin: 0 auto var(--space-3);
}

.mqtt-save-confirm-dialog .ui-dialog__content h3 {
  margin: 0 2.5rem var(--space-2);
}

.mqtt-save-confirm-dialog .ui-dialog__content > p {
  max-width: 34rem;
  margin: 0 auto var(--space-4);
}

.mqtt-save-confirm-dialog form {
  text-align: left;
  display: grid;
  gap: var(--space-4);
}

.mqtt-save-confirm-dialog__error {
  margin: 0;
}

.mqtt-save-confirm-dialog .ui-dialog__actions {
  justify-content: flex-end;
  margin-top: 0;
}

.hmi-panel {
  min-width: 0;
  display: grid;
  gap: var(--space-4);
}

.hmi-section {
  min-width: 0;
  display: grid;
  gap: var(--space-4);
}

.hmi-section__heading h2 {
  margin: 0;
  color: var(--color-text);
  font-size: var(--text-lg);
}

.hmi-section__heading p {
  margin: 0.35rem 0 0;
  color: var(--color-text-tertiary);
  font-size: var(--text-sm);
  line-height: var(--leading-normal);
}

.hmi-pair-form {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--space-3);
  align-items: end;
}

.hmi-pairing-result {
  min-width: 0;
  padding-top: var(--space-4);
  border-top: 1px solid var(--color-border-soft);
}

.hmi-pairing-result__header {
  margin-bottom: var(--space-3);
}

.hmi-pairing-result__header > div {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--space-2);
}

.hmi-pairing-result__header span {
  color: var(--color-text-tertiary);
  font-size: var(--text-xs);
}

.hmi-pairing-content {
  display: grid;
  grid-template-columns: minmax(11rem, 14rem) minmax(0, 1fr);
  gap: var(--space-4);
  align-items: start;
}

.hmi-pairing-qr {
  margin: 0;
  display: grid;
  gap: var(--space-2);
}

.hmi-pairing-qr__canvas {
  width: min(100%, 14rem);
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  padding: var(--space-2);
  border: 1px solid var(--color-border-soft);
  border-radius: var(--radius-md);
  background: var(--color-neutral-0);
}

.hmi-pairing-qr__svg {
  width: 100%;
  height: auto;
  display: block;
}

.hmi-pairing-qr figcaption {
  color: var(--color-text-tertiary);
  font-size: var(--text-xs);
  line-height: var(--leading-normal);
}

.hmi-credential-grid {
  min-width: 0;
  display: grid;
  gap: var(--space-3);
}

.hmi-credential {
  min-width: 0;
  display: grid;
  gap: 0.45rem;
}

.hmi-credential > span {
  color: var(--color-text-secondary);
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
}

.hmi-copy-row {
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--space-2);
  align-items: center;
}

.hmi-copy-row code {
  min-width: 0;
  overflow-wrap: anywhere;
  padding: 0.65rem 0.75rem;
  border: 1px solid var(--color-border-soft);
  border-radius: var(--radius-sm);
  background: var(--color-surface-muted);
  color: var(--color-text);
  font-size: var(--text-xs);
}

.hmi-pairing-note {
  margin: var(--space-3) 0 0;
}

.hmi-device-list {
  min-width: 0;
  display: grid;
}

.hmi-device-row {
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-3) 0;
  border-bottom: 1px solid var(--color-border-soft);
}

.hmi-device-row:last-child {
  border-bottom: 0;
}

.hmi-device-row__copy {
  min-width: 0;
  display: grid;
  gap: 0.35rem;
}

.hmi-device-row__heading {
  min-width: 0;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.hmi-device-row__meta {
  color: var(--color-text-tertiary);
  font-size: var(--text-xs);
  overflow-wrap: anywhere;
}

@media (max-width: 36rem) {
  .hmi-pair-form {
    grid-template-columns: 1fr;
  }
  .hmi-pair-form .ui-button {
    width: 100%;
  }
  .hmi-pairing-content {
    grid-template-columns: 1fr;
  }
  .hmi-pairing-qr__canvas {
    width: min(100%, 16rem);
  }
  .hmi-copy-row {
    grid-template-columns: 1fr;
  }
  .hmi-device-row {
    align-items: stretch;
    flex-direction: column;
  }
  .hmi-device-row > .ui-button {
    align-self: flex-start;
  }
}
.api-docs {
  min-width: 0;
  display: grid;
  gap: var(--space-5);
}

.api-overview,
.api-schemas,
.mqtt-docs__body {
  min-width: 0;
  display: grid;
  gap: var(--space-4);
}

.api-overview__heading h2,
.api-tag__header h2 {
  margin: 0;
  color: var(--color-text);
  font-size: var(--text-lg);
}

.api-overview__heading p,
.api-tag__header p {
  margin: 0.3rem 0 0;
  color: var(--color-text-tertiary);
  font-size: var(--text-sm);
  line-height: var(--leading-normal);
}

.api-overview__meta {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  border: 1px solid var(--color-border-soft);
  border-radius: var(--radius-md);
  overflow: hidden;
}

.api-overview__meta > div {
  min-width: 0;
  display: grid;
  grid-template-columns: 6rem minmax(0, 1fr);
  gap: var(--space-2);
  padding: var(--space-3);
  border-bottom: 1px solid var(--color-border-soft);
}

.api-overview__meta > div:nth-child(odd) {
  border-right: 1px solid var(--color-border-soft);
}

.api-overview__meta > div:nth-last-child(-n+2) {
  border-bottom: 0;
}

.api-overview__meta span {
  color: var(--color-text-tertiary);
  font-size: var(--text-xs);
}

.api-overview__meta code,
.api-security code,
.api-operation > summary code,
.api-schema > summary code,
.api-responses summary code,
.api-table code {
  min-width: 0;
  max-width: 100%;
  white-space: normal;
  overflow-wrap: anywhere;
  word-break: break-word;
}

.api-security {
  min-width: 0;
  display: grid;
  grid-template-columns: auto auto minmax(0, 1fr);
  gap: var(--space-3);
  align-items: center;
  padding: var(--space-3);
  border: 1px solid var(--color-border-soft);
  border-radius: var(--radius-md);
}

.api-security span {
  color: var(--color-text-secondary);
  font-size: var(--text-sm);
}

.api-tag,
.api-schemas,
.mqtt-docs {
  min-width: 0;
  display: grid;
  gap: var(--space-2);
}

.api-tag__header {
  padding: var(--space-1) 0;
}

.api-operation,
.api-schema {
  min-width: 0;
  border: 1px solid var(--color-border-soft);
  border-radius: var(--radius-md);
  overflow: hidden;
  background: var(--color-surface);
}

.api-operation > summary,
.api-schema > summary {
  min-width: 0;
  display: grid;
  align-items: center;
  gap: var(--space-3);
  cursor: pointer;
  list-style: none;
}

.api-operation > summary {
  grid-template-columns: 4.25rem minmax(12rem, auto) minmax(0, 1fr);
  padding: 0.65rem var(--space-3);
}

.api-schema > summary {
  grid-template-columns: minmax(10rem, auto) minmax(0, 1fr);
  padding: var(--space-3);
}

.api-operation > summary::-webkit-details-marker,
.api-schema > summary::-webkit-details-marker,
.api-responses details > summary::-webkit-details-marker {
  display: none;
}

.api-operation--get > summary {
  background: color-mix(in srgb, var(--color-primary) 6%, var(--color-surface));
}

.api-operation--post > summary {
  background: color-mix(in srgb, var(--color-success) 7%, var(--color-surface));
}

.api-method {
  display: inline-flex;
  justify-content: center;
  padding: 0.25rem 0.4rem;
  border-radius: var(--radius-sm);
  font-size: var(--text-2xs);
  font-weight: var(--weight-extrabold);
}

.api-operation--get .api-method {
  background: color-mix(in srgb, var(--color-primary) 14%, transparent);
  color: var(--color-primary-hover);
}

.api-operation--post .api-method {
  background: color-mix(in srgb, var(--color-success) 14%, transparent);
  color: var(--color-success);
}

.api-operation__summary,
.api-schema > summary span {
  color: var(--color-text-tertiary);
  font-size: var(--text-xs);
}

.api-operation__body,
.api-schema__body {
  min-width: 0;
  display: grid;
  gap: var(--space-3);
  padding: var(--space-4);
  border-top: 1px solid var(--color-border-soft);
}

.api-operation__body h3,
.api-schema__body h3,
.mqtt-docs__body h3 {
  margin: var(--space-1) 0 0;
  font-size: var(--text-sm);
}

.api-operation__meta {
  display: grid;
  gap: var(--space-2);
}

.api-operation__meta > div {
  display: grid;
  grid-template-columns: 8rem minmax(0, 1fr);
  gap: var(--space-3);
  font-size: var(--text-xs);
}

.api-table {
  min-width: 0;
  display: grid;
  overflow-x: auto;
}

.api-table > div {
  min-width: 38rem;
  display: grid;
  grid-template-columns: minmax(8rem, 0.2fr) minmax(8rem, 0.2fr) minmax(6rem, 0.15fr) minmax(14rem, 0.45fr);
  gap: var(--space-3);
  padding: 0.6rem 0;
  border-bottom: 1px solid var(--color-border-soft);
  align-items: start;
}

.api-table > div:last-child {
  border-bottom: 0;
}

.api-table__head {
  color: var(--color-text-tertiary);
  font-size: var(--text-2xs);
  font-weight: var(--weight-bold);
  text-transform: uppercase;
}

.api-table > div:not(.api-table__head) {
  color: var(--color-text-secondary);
  font-size: var(--text-xs);
}

.api-responses {
  display: grid;
  border: 1px solid var(--color-border-soft);
  border-radius: var(--radius-sm);
  overflow: hidden;
}

.api-responses > div,
.api-responses details > summary {
  min-width: 0;
  display: grid;
  grid-template-columns: 5rem minmax(0, 1fr) minmax(8rem, auto);
  gap: var(--space-3);
  padding: 0.65rem var(--space-3);
  align-items: start;
  border-bottom: 1px solid var(--color-border-soft);
}

.api-responses > div:last-child,
.api-responses details:last-child > summary {
  border-bottom: 0;
}

.api-responses details > summary {
  cursor: pointer;
  list-style: none;
}

.api-responses span,
.api-responses strong {
  font-size: var(--text-xs);
}

.api-responses span {
  color: var(--color-text-secondary);
}

.api-responses strong {
  color: var(--color-text-tertiary);
  font-weight: var(--weight-semibold);
}

.api-responses details .api-code {
  margin: var(--space-3);
}

.api-code {
  min-width: 0;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  margin: 0;
  overflow-x: auto;
  overflow-y: hidden;
  overscroll-behavior-inline: contain;
  padding: var(--space-3);
  border: 1px solid var(--color-border-soft);
  border-radius: var(--radius-sm);
  background: var(--color-surface-muted);
  font-size: var(--text-xs);
  line-height: var(--leading-relaxed);
  white-space: pre;
  scrollbar-width: thin;
  -webkit-overflow-scrolling: touch;
}

.api-code::-webkit-scrollbar {
  height: 0.45rem;
}

.api-code::-webkit-scrollbar-thumb {
  border-radius: var(--radius-pill);
  background: var(--color-border);
}

.api-note {
  margin: 0;
  color: var(--color-text-tertiary);
  font-size: var(--text-xs);
  line-height: var(--leading-normal);
}

@media (max-width: 48rem) {
  .api-docs {
    gap: var(--space-4);
  }
  .api-overview,
  .api-schemas,
  .mqtt-docs__body {
    gap: var(--space-3);
  }
  .api-overview__heading h2,
  .api-tag__header h2 {
    font-size: var(--text-base);
    line-height: var(--leading-snug);
  }
  .api-overview__heading p,
  .api-tag__header p {
    font-size: var(--text-xs);
    line-height: var(--leading-normal);
  }
  .api-overview__meta {
    grid-template-columns: minmax(0, 1fr);
  }
  .api-overview__meta > div,
  .api-overview__meta > div:nth-child(odd) {
    grid-template-columns: minmax(4.75rem, 0.32fr) minmax(0, 1fr);
    gap: var(--space-2);
    padding: 0.7rem var(--space-3);
    border-right: 0;
    border-bottom: 1px solid var(--color-border-soft);
  }
  .api-overview__meta > div:last-child {
    border-bottom: 0;
  }
  .api-overview__meta span,
  .api-overview__meta code,
  .api-security span,
  .api-security code {
    font-size: var(--text-2xs);
    line-height: var(--leading-normal);
  }
  .api-security {
    grid-template-columns: minmax(0, 1fr);
    gap: 0.2rem;
    padding: 0.7rem var(--space-3);
  }
  .api-security strong {
    font-size: var(--text-sm);
  }
  .api-operation > summary {
    grid-template-columns: 3.4rem minmax(0, 1fr);
    gap: var(--space-2);
    padding: 0.55rem var(--space-3);
  }
  .api-operation > summary code {
    font-size: var(--text-2xs);
    line-height: var(--leading-normal);
  }
  .api-operation__summary {
    grid-column: 1/-1;
    font-size: var(--text-2xs);
  }
  .api-operation__body,
  .api-schema__body {
    gap: var(--space-2);
    padding: var(--space-3);
  }
  .api-operation__body h3,
  .api-schema__body h3,
  .mqtt-docs__body h3 {
    font-size: var(--text-xs);
  }
  .api-operation__meta > div {
    grid-template-columns: minmax(0, 1fr);
    gap: 0.2rem;
    font-size: var(--text-2xs);
  }
  .api-table {
    overflow: visible;
  }
  .api-table > div {
    min-width: 0;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.35rem var(--space-2);
    padding: 0.5rem 0;
  }
  .api-table__head,
  .api-table > div:not(.api-table__head) {
    font-size: var(--text-2xs);
  }
  .api-responses > div,
  .api-responses details > summary {
    grid-template-columns: 3.25rem minmax(0, 1fr);
    gap: var(--space-2);
    padding: 0.55rem var(--space-3);
  }
  .api-responses strong {
    grid-column: 2;
  }
  .api-responses span,
  .api-responses strong {
    font-size: var(--text-2xs);
    line-height: var(--leading-normal);
  }
  .api-responses details {
    min-width: 0;
  }
  .api-responses details .api-code {
    width: calc(100% - var(--space-2) * 2);
    max-width: calc(100% - var(--space-2) * 2);
    margin: var(--space-2);
  }
  .api-code {
    padding: var(--space-2);
    font-size: var(--text-2xs);
    line-height: var(--leading-normal);
  }
  .api-schema > summary {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-1);
  }
  .api-note,
  .api-try-panel__heading span,
  .api-try-panel__body,
  .api-try__status {
    font-size: var(--text-2xs);
  }
}
.api-try-mode {
  display: grid;
  gap: var(--space-3);
  padding-top: var(--space-1);
  border-top: 1px solid var(--color-border-soft);
}

.api-try-mode__toggle {
  padding: 0;
}

.api-try-mode__auth {
  max-width: 38rem;
}

.api-try-warning__note {
  margin-top: var(--space-3) !important;
  font-weight: var(--weight-semibold);
}

.api-try-panel {
  display: grid;
  gap: var(--space-3);
  padding: var(--space-3);
  border: 1px dashed var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface-muted);
}

.api-try-panel__heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
}

.api-try-panel__heading strong {
  font-size: var(--text-sm);
}

.api-try-panel__heading span {
  color: var(--color-text-tertiary);
  font-size: var(--text-xs);
}

.api-try-panel__fields {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-3);
}

.api-try-panel__body {
  min-height: 8rem;
  resize: vertical;
  font-family: var(--font-mono);
  font-size: var(--text-xs);
}

.api-try-panel__actions {
  display: flex;
  justify-content: flex-end;
}

.api-try-panel__response {
  display: grid;
  gap: var(--space-2);
}

.api-try-panel__response[hidden] {
  display: none;
}

.api-try-panel__status {
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
}

.api-try-panel__status[data-ok=true] {
  color: var(--color-success);
}

.api-try-panel__status[data-ok=false] {
  color: var(--color-danger);
}

@media (max-width: 48rem) {
  .api-try-panel__fields {
    grid-template-columns: minmax(0, 1fr);
  }
  .api-try-panel__actions .ui-button {
    width: 100%;
  }
}
.api-try-mode {
  display: grid;
  gap: var(--space-3);
  padding-top: var(--space-2);
  border-top: 1px solid var(--color-border-soft);
}

.api-try-mode__auth {
  max-width: 36rem;
}

.api-try {
  display: grid;
  gap: var(--space-3);
  padding-top: var(--space-2);
  border-top: 1px solid var(--color-border-soft);
}

.api-try__toolbar {
  display: flex;
  justify-content: flex-end;
}

.api-try__panel {
  display: grid;
  gap: var(--space-3);
  padding: var(--space-3);
  border: 1px solid var(--color-border-soft);
  border-radius: var(--radius-sm);
  background: var(--color-surface-muted);
}

.api-try__fields {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
  gap: var(--space-3);
}

.api-try__textarea {
  min-height: 9rem;
  resize: vertical;
  font-family: var(--font-mono);
  line-height: var(--leading-normal);
}

.api-try__actions {
  display: flex;
  justify-content: flex-end;
}

.api-try__result {
  display: grid;
  gap: var(--space-2);
}

.api-try__status {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  color: var(--color-text-secondary);
  font-size: var(--text-xs);
}

.api-try__status strong {
  color: var(--color-text);
}

.api-try__error {
  margin: 0;
}

@media (max-width: 48rem) {
  .api-try__toolbar,
  .api-try__actions {
    justify-content: stretch;
  }
  .api-try__toolbar .ui-button,
  .api-try__actions .ui-button {
    width: 100%;
  }
}
.plugins-panel {
  min-width: 0;
  display: grid;
  gap: var(--space-4);
}

.plugin-health-card {
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
}

.plugin-health-card__identity,
.plugin-health-card__actions {
  min-width: 0;
  display: flex;
  align-items: center;
}

.plugin-health-card__identity {
  gap: var(--space-3);
}

.plugin-health-card__identity h2 {
  margin: 0;
  color: var(--color-text);
  font-size: var(--text-base);
  font-weight: var(--weight-bold);
}

.plugin-brand-icon {
  width: 1.375rem;
  height: 1.375rem;
  display: block;
  flex: 0 0 auto;
}

.plugin-health-card__copy {
  min-width: 0;
  display: grid;
  gap: 0.2rem;
}

.plugin-health-card__copy p {
  margin: 0;
  color: var(--color-text-tertiary);
  font-size: var(--text-xs);
}

.plugin-health-card__actions {
  gap: var(--space-2);
}

.zigbee2mqtt-config-dialog {
  width: min(38rem, 100vw - 2rem);
}

.zigbee2mqtt-config-dialog__header {
  min-height: 2.5rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding-right: 2.5rem;
}

.zigbee2mqtt-config-dialog__heading {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

.zigbee2mqtt-config-dialog__heading img {
  width: 1.75rem;
  height: 1.75rem;
  flex: 0 0 auto;
}

.zigbee2mqtt-config-dialog__heading h2 {
  margin: 0;
  color: var(--color-text-primary);
  font-size: var(--text-lg);
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-tight);
}

.zigbee2mqtt-config-dialog__body {
  display: grid;
  gap: var(--space-5);
  padding-block: var(--space-4);
}

.zigbee2mqtt-config-dialog__intro {
  margin: 0;
  color: var(--color-text-tertiary);
  font-size: var(--text-sm);
  line-height: var(--leading-normal);
}

.zigbee2mqtt-config-dialog__intro a {
  color: var(--color-primary-hover);
  font-weight: var(--weight-semibold);
}

.zigbee2mqtt-config-section {
  display: grid;
  gap: var(--space-3);
}

.zigbee2mqtt-config-section h3 {
  margin: 0;
  color: var(--color-text-primary);
  font-size: var(--text-sm);
  font-weight: var(--weight-bold);
}

.zigbee2mqtt-config-dialog [data-z2m-bridge-options][hidden] {
  display: none;
}

.zigbee2mqtt-config-connection-actions {
  min-width: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3);
}

.zigbee2mqtt-config-connection-actions [data-z2m-connection-test-result] {
  min-width: 0;
  overflow-wrap: anywhere;
}

.zigbee2mqtt-config-dialog__password-field {
  margin-top: var(--space-2);
}

.zigbee2mqtt-config-dialog__footer {
  display: flex;
  justify-content: flex-end;
  gap: var(--space-2);
  padding-top: var(--space-3);
  border-top: 1px solid var(--color-border-soft);
}

.zigbee2mqtt-config-dialog__footer [hidden] {
  display: none;
}

.zigbee2mqtt-config-dialog [data-z2m-config-feedback][data-tone=error] {
  color: var(--color-error) !important;
}

.zigbee2mqtt-config-dialog [data-z2m-config-feedback][data-tone=success] {
  color: var(--color-success) !important;
}

.zigbee2mqtt-config-dialog__restart-note[hidden] {
  display: none;
}

.plugin-health-state {
  width: 2rem;
  height: 2rem;
  display: inline-grid;
  flex: 0 0 auto;
  place-items: center;
  border-radius: var(--radius-pill);
  cursor: help;
}

.plugin-health-state:focus-visible {
  outline: 0;
  box-shadow: 0 0 0 var(--focus-ring-width) var(--color-focus-ring);
}

.plugin-health-state--checking {
  color: var(--color-text-tertiary);
}

.plugin-health-state--healthy {
  color: var(--color-success);
}

.plugin-health-state--unhealthy {
  color: var(--color-error);
}

.plugin-health-state--unavailable {
  color: var(--color-warning);
}

.plugin-health-state--unknown {
  color: var(--color-text-tertiary);
}

.plugin-health-state--checking .ui-icon {
  animation: plugin-health-spin 1.2s linear infinite;
}

@keyframes plugin-health-spin {
  to {
    transform: rotate(360deg);
  }
}
@media (max-width: 38rem) {
  .plugin-health-card {
    align-items: flex-start;
    flex-direction: column;
  }
  .plugin-health-card__actions {
    width: 100%;
    justify-content: flex-end;
  }
  .zigbee2mqtt-config-dialog__footer {
    flex-wrap: wrap;
  }
  .zigbee2mqtt-config-connection-actions > * {
    max-width: 100%;
  }
}
.logs-panel,
.logs-results,
.logs-list {
  min-width: 0;
  display: grid;
  gap: var(--space-4);
}

.logs-toolbar {
  min-width: 0;
}

.logs-filters {
  display: grid;
  grid-template-columns: minmax(12rem, 1.6fr) repeat(3, minmax(8rem, 1fr)) auto;
  gap: var(--space-3);
  align-items: end;
}

.logs-results__header,
.logs-row__head,
.logs-row__meta {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.logs-results__header {
  justify-content: space-between;
}

.logs-results__header h2,
.logs-results__header p,
.logs-row__message {
  margin: 0;
}

.logs-results__header h2 {
  font-size: var(--text-lg);
}

.logs-results__header p {
  margin-top: 0.25rem;
  color: var(--color-text-tertiary);
  font-size: var(--text-xs);
}

.logs-row {
  min-width: 0;
  display: grid;
  gap: var(--space-2);
  padding: var(--space-3) 0;
  border-bottom: 1px solid var(--color-border-soft);
}

.logs-row:last-child {
  border-bottom: 0;
}

.logs-row__head {
  min-width: 0;
}

.logs-row__head strong {
  font-size: var(--text-xs);
}

.logs-row__head time {
  margin-left: auto;
  color: var(--color-text-tertiary);
  font-size: var(--text-2xs);
}

.logs-row__message {
  min-width: 0;
  overflow-wrap: anywhere;
  color: var(--color-text-secondary);
  font-size: var(--text-sm);
}

.logs-row__meta {
  min-width: 0;
  flex-wrap: wrap;
  color: var(--color-text-tertiary);
  font-size: var(--text-2xs);
}

.logs-row__meta code {
  max-width: 100%;
  overflow-wrap: anywhere;
  white-space: normal;
}

.logs-row__trace {
  min-height: 1.8rem;
  padding-block: 0.2rem;
  font-size: var(--text-2xs);
}

.logs-level {
  display: inline-flex;
  min-width: 3.4rem;
  justify-content: center;
  padding: 0.18rem 0.4rem;
  border-radius: var(--radius-pill);
  font-size: var(--text-2xs);
  font-weight: var(--weight-extrabold);
  text-transform: uppercase;
}

.logs-level--info,
.logs-level--debug {
  background: var(--color-surface-muted);
  color: var(--color-text-secondary);
}

.logs-level--warn {
  background: color-mix(in srgb, var(--color-warning) 12%, transparent);
  color: var(--color-warning);
}

.logs-level--error {
  background: color-mix(in srgb, var(--color-danger) 12%, transparent);
  color: var(--color-danger);
}

@media (max-width: 64rem) {
  .logs-filters {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .logs-filters__search {
    grid-column: 1/-1;
  }
}
@media (max-width: 48rem) {
  .logs-filters {
    grid-template-columns: minmax(0, 1fr);
  }
  .logs-filters__search {
    grid-column: auto;
  }
  .logs-filters .ui-button,
  .logs-results__header .ui-button {
    width: 100%;
  }
  .logs-results__header {
    align-items: stretch;
    flex-direction: column;
  }
  .logs-row__head {
    flex-wrap: wrap;
  }
  .logs-row__head time {
    width: 100%;
    margin-left: 0;
  }
  .logs-row__message {
    font-size: var(--text-xs);
  }
}
.logs-trace-detail {
  min-width: 0;
  display: grid;
  gap: var(--space-5);
}

.logs-trace-detail__header {
  min-width: 0;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-4);
}

.logs-trace-detail__header h2,
.logs-trace-detail__header p {
  margin: 0;
}

.logs-trace-detail__header h2 {
  color: var(--color-text);
  font-size: var(--text-xl);
}

.logs-trace-detail__header code {
  min-width: 0;
  display: block;
  margin-top: var(--space-1);
  overflow-wrap: anywhere;
  color: var(--color-text-tertiary);
  font-size: var(--text-xs);
}

.logs-trace-summary {
  min-width: 0;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space-3);
  margin: 0;
}

.logs-trace-summary > div {
  min-width: 0;
  padding: var(--space-3);
  background: var(--color-surface-subtle);
  border: 1px solid var(--color-border-soft);
  border-radius: var(--radius-md);
}

.logs-trace-summary dt,
.logs-trace-summary dd {
  margin: 0;
}

.logs-trace-summary dt {
  color: var(--color-text-tertiary);
  font-size: var(--text-2xs);
  font-weight: var(--weight-bold);
}

.logs-trace-summary dd {
  margin-top: 0.2rem;
  overflow-wrap: anywhere;
  color: var(--color-text);
  font-size: var(--text-sm);
  font-weight: var(--weight-bold);
}

.logs-trace-list {
  min-width: 0;
  display: grid;
}

.logs-trace-entry {
  min-width: 0;
  display: grid;
  grid-template-columns: 2.25rem minmax(0, 1fr);
  gap: var(--space-3);
}

.logs-trace-entry__rail {
  position: relative;
  min-width: 0;
  display: flex;
  align-items: center;
  flex-direction: column;
  gap: 0.35rem;
  color: var(--color-text-tertiary);
  font-size: var(--text-2xs);
}

.logs-trace-entry__rail::after {
  content: "";
  width: 1px;
  flex: 1;
  min-height: var(--space-5);
  background: var(--color-border);
}

.logs-trace-entry:last-child .logs-trace-entry__rail::after {
  display: none;
}

.logs-trace-entry__marker {
  width: 0.7rem;
  height: 0.7rem;
  flex: 0 0 auto;
  background: var(--color-text-tertiary);
  border: 2px solid var(--color-surface);
  border-radius: var(--radius-pill);
  box-shadow: 0 0 0 1px var(--color-border);
}

.logs-trace-entry__marker--error {
  background: var(--color-error);
}

.logs-trace-entry__marker--warn {
  background: var(--color-warning);
}

.logs-trace-entry__marker--info,
.logs-trace-entry__marker--debug {
  background: var(--color-primary);
}

.logs-trace-entry__body {
  min-width: 0;
  display: grid;
  gap: var(--space-3);
  margin-bottom: var(--space-4);
  padding: var(--space-4);
  background: var(--color-surface);
  border: 1px solid var(--color-border-soft);
  border-radius: var(--radius-md);
}

.logs-trace-entry__head {
  min-width: 0;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.logs-trace-entry__head code {
  min-width: 0;
  overflow-wrap: anywhere;
  color: var(--color-text-secondary);
  font-size: var(--text-xs);
}

.logs-trace-entry__head time {
  margin-left: auto;
  color: var(--color-text-tertiary);
  font-size: var(--text-2xs);
}

.logs-trace-entry__delta {
  color: var(--color-primary-hover);
  font-family: var(--font-mono);
  font-size: var(--text-2xs);
  font-weight: var(--weight-bold);
}

.logs-trace-entry__message {
  margin: 0;
  overflow-wrap: anywhere;
  color: var(--color-text);
  font-size: var(--text-sm);
  line-height: var(--leading-normal);
}

.logs-trace-entry__facts {
  min-width: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-2) var(--space-4);
  margin: 0;
}

.logs-trace-entry__facts > div {
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(5rem, auto) minmax(0, 1fr);
  gap: var(--space-2);
}

.logs-trace-entry__facts dt,
.logs-trace-entry__facts dd {
  margin: 0;
  font-size: var(--text-xs);
}

.logs-trace-entry__facts dt {
  color: var(--color-text-tertiary);
  font-weight: var(--weight-bold);
}

.logs-trace-entry__facts dd {
  min-width: 0;
  overflow-wrap: anywhere;
  color: var(--color-text-secondary);
  font-family: var(--font-mono);
}

.logs-trace-entry__metadata {
  min-width: 0;
  display: grid;
  gap: var(--space-2);
}

.logs-trace-entry__metadata > strong {
  color: var(--color-text-secondary);
  font-size: var(--text-xs);
}

.logs-trace-entry__metadata pre {
  min-width: 0;
  max-width: 100%;
  margin: 0;
  overflow: auto;
  padding: var(--space-3);
  color: var(--color-navy-700);
  background: var(--color-surface-subtle);
  border: 1px solid var(--color-border-soft);
  border-radius: var(--radius-sm);
  font-size: var(--text-2xs);
  line-height: var(--leading-normal);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

@media (max-width: 64rem) {
  .logs-trace-summary {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .logs-trace-entry__facts {
    grid-template-columns: minmax(0, 1fr);
  }
}
@media (max-width: 48rem) {
  .logs-trace-detail__header {
    align-items: stretch;
    flex-direction: column;
  }
  .logs-trace-detail__header .ui-button {
    width: 100%;
  }
  .logs-trace-summary {
    grid-template-columns: minmax(0, 1fr);
  }
  .logs-trace-entry {
    grid-template-columns: 1.5rem minmax(0, 1fr);
    gap: var(--space-2);
  }
  .logs-trace-entry__body {
    padding: var(--space-3);
  }
  .logs-trace-entry__head time {
    width: 100%;
    margin-left: 0;
  }
  .logs-trace-entry__facts > div {
    grid-template-columns: minmax(4rem, auto) minmax(0, 1fr);
  }
}
.settings-app {
  display: grid;
  gap: var(--space-4);
  margin-top: var(--space-5);
}

.settings-app__facts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr));
  gap: var(--space-4);
  margin: 0;
}

.settings-app__facts > div {
  min-width: 0;
}

.settings-app__facts dt {
  color: var(--color-text-tertiary);
  font-size: var(--text-xs);
}

.settings-app__facts dd {
  margin: var(--space-1) 0 0;
  color: var(--color-text);
  font-size: var(--text-sm);
  overflow-wrap: anywhere;
}

.settings-app__hash {
  font-family: var(--font-mono, monospace);
  font-size: var(--text-xs);
}

.settings-app__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
}

.settings-app [hidden] {
  display: none !important;
}

.settings-range {
  width: 100%;
  min-width: 0;
  accent-color: var(--color-primary);
}

.mic-meter {
  position: relative;
  height: 1.25rem;
  min-width: 0;
  overflow: hidden;
  background: var(--color-surface-muted);
  border: 1px solid var(--color-border-soft);
  border-radius: var(--radius-pill);
}

.mic-meter__bar {
  height: 100%;
  width: 0;
  background: var(--color-primary);
  transition: width 90ms linear;
}

.mic-meter__peak {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 0.2rem;
  background: var(--color-text-primary);
  opacity: 0.55;
}

.mic-meter__readout {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3, 0.75rem) var(--space-4, 1rem);
  margin: 0;
  color: var(--color-text-secondary);
  font-size: var(--text-sm);
}

.settings-stack {
  display: grid;
  gap: var(--space-4, 1rem);
  min-width: 0;
  align-content: start;
}

.settings-openai-oauth[hidden],
[data-openai-form][hidden] {
  display: none;
}

.settings-openai-oauth {
  color: var(--color-text-secondary);
  font-size: var(--text-sm);
}

.settings-openai-oauth > p {
  margin: 0;
}

.settings-openai-oauth details > p {
  margin: var(--space-3) 0 var(--space-2);
}

.settings-openai-oauth [data-openai-callback-form] {
  margin-top: var(--space-3);
}

.settings-openai-oauth [data-openai-callback-form] .ui-field {
  margin-bottom: var(--space-3);
}

.settings-openai-actions[hidden] {
  display: none;
}

.settings-openai-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3, 0.75rem);
  min-width: 0;
}

@media (max-width: 80rem) {
  .settings-layout {
    grid-template-columns: 12.5rem minmax(0, 1fr);
  }
  .mqtt-form-grid--connection {
    grid-template-columns: minmax(0, 1fr) minmax(7.5rem, 0.34fr);
  }
  .mqtt-field--name {
    grid-column: 1/-1;
  }
  .mqtt-section__heading--broker {
    align-items: flex-start;
  }
  [data-mqtt-test] {
    width: auto;
    min-width: 0;
    min-height: 2.5rem;
    padding: 0.55rem 0.85rem;
    gap: 0.4rem;
    line-height: 1;
  }
  [data-mqtt-test] svg {
    width: 1rem;
    height: 1rem;
  }
  .mqtt-test-label--full {
    display: none;
  }
  .mqtt-test-label--compact {
    display: inline;
  }
}
@media (max-width: 56rem) {
  .settings-layout {
    grid-template-columns: 1fr;
  }
  .settings-nav--desktop {
    display: none;
  }
  .settings-nav-mobile {
    display: block;
  }
  .mqtt-status-table--wide {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .mqtt-status-table--wide > div,
  .mqtt-status-table--wide > div:nth-child(3n+1),
  .mqtt-status-table--wide > div:nth-child(3n) {
    padding-inline: var(--space-3);
    border-right: 1px solid var(--color-border-soft);
    border-bottom: 1px solid var(--color-border-soft);
  }
  .mqtt-status-table--wide > div:nth-child(2n+1) {
    padding-left: 0;
  }
  .mqtt-status-table--wide > div:nth-child(2n) {
    padding-right: 0;
    border-right: 0;
  }
  .mqtt-status-table--wide > div:nth-last-child(-n+2) {
    border-bottom: 0;
  }
}
@media (max-width: 48rem) {
  .settings-page__header--scoped {
    align-items: stretch;
    flex-direction: column;
  }
  .settings-page__header {
    margin-bottom: var(--space-4);
  }
  .mqtt-form-grid,
  .mqtt-form-grid--connection {
    grid-template-columns: 1fr;
  }
  .mqtt-field--name,
  .mqtt-field--wide {
    grid-column: auto;
  }
  .mqtt-section__heading--broker {
    align-items: stretch;
  }
  [data-mqtt-test] {
    width: auto;
    min-width: 0;
    min-height: 2.5rem;
    align-self: flex-start;
    padding: 0.55rem 0.85rem;
    gap: 0.4rem;
    line-height: 1;
  }
  .mqtt-test-label--compact {
    display: inline;
  }
  .mqtt-section__heading {
    align-items: stretch;
    flex-direction: column;
  }
  .mqtt-section__heading .ui-button {
    align-self: flex-start;
  }
  .mqtt-status-table > div {
    grid-template-columns: 1fr;
    gap: 0.2rem;
  }
  .mqtt-status-table--wide {
    grid-template-columns: 1fr;
  }
  .mqtt-status-table--wide > div,
  .mqtt-status-table--wide > div:nth-child(2n+1),
  .mqtt-status-table--wide > div:nth-child(2n) {
    padding: 0.65rem 0;
    border-right: 0;
    border-bottom: 1px solid var(--color-border-soft);
  }
  .mqtt-status-table--wide > div:last-child {
    border-bottom: 0;
  }
  .mqtt-savebar {
    align-items: stretch;
    flex-direction: column;
  }
  .mqtt-savebar > div {
    display: grid;
    grid-template-columns: 1fr 1fr;
  }
}
@media (max-width: 28rem) {
  .mqtt-savebar > div {
    grid-template-columns: 1fr;
  }
}
.users-accounts {
  min-width: 0;
  padding: var(--space-5);
}

.users-accounts__heading,
.users-pagination {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
}

.users-accounts__heading h2 {
  margin: 0;
  font-size: var(--text-lg);
}

.users-accounts__heading p {
  margin: var(--space-2) 0 0;
}

.users-toolbar {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(8rem, 11rem);
  align-items: end;
  gap: var(--space-3);
  margin: var(--space-5) 0 var(--space-3);
}

.users-toolbar > *,
.users-account > div {
  min-width: 0;
}

.users-table {
  table-layout: fixed;
}

.users-table th:nth-child(2),
.users-table td:nth-child(2) {
  width: 6rem;
  text-align: right;
}

.users-account {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

.users-account .ui-icon-tile {
  flex-shrink: 0;
}

.users-account strong,
.users-account small,
.users-created-email {
  overflow-wrap: anywhere;
}

.users-pagination {
  border-top: 1px solid var(--color-border-soft);
  padding-top: var(--space-4);
  margin-top: var(--space-3);
  font-size: var(--text-xs);
}

.users-pagination > div {
  display: flex;
  gap: var(--space-2);
}

.users-dialog .ui-dialog__content {
  display: grid;
  gap: var(--space-4);
}

.users-dialog__heading h2 {
  margin: 0 0 var(--space-2);
}

.users-dialog__heading p {
  margin: 0;
}

.users-site-access {
  margin: 0;
  padding: 0;
  border: 0;
  min-width: 0;
}

.users-site-access > p {
  margin: var(--space-2) 0 var(--space-3);
  font-size: var(--text-xs);
}

.users-site-options {
  display: grid;
  gap: var(--space-2);
  max-height: 14rem;
  overflow-y: auto;
}

.users-site-option {
  padding: var(--space-3);
  border: 1px solid var(--color-border-soft);
  border-radius: var(--radius-md);
}

.users-site-option:has(:checked) {
  background: var(--color-primary-soft-subtle);
  border-color: var(--color-control-border-focus);
}

.users-site-option > span:last-child {
  overflow-wrap: anywhere;
}

.users-access-note {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
}

.users-access-note > svg {
  flex-shrink: 0;
}

.users-access-note p {
  margin: 0;
}

[data-created-password] {
  font-family: var(--font-mono);
  min-width: 0;
}

@media (max-width: 600px) {
  .users-accounts {
    padding: var(--space-3);
  }
  .users-toolbar {
    grid-template-columns: minmax(0, 1fr);
  }
  .users-account {
    gap: var(--space-2);
  }
  .users-account .ui-icon-tile {
    display: none;
  }
  .users-pagination {
    flex-wrap: wrap;
  }
}
.users-table th:last-child,
.users-table td:last-child {
  width: 3.5rem;
  text-align: right;
}

/* Shared responsive composition.
   Verification widths: 320, 375, 425, 768, 1024, 1440, 2560 CSS px.
   Use intrinsic layout first; these rules only change composition where needed. */
@media (max-width: 48rem) {
  :root {
    --nav-width: 0rem;
    /* Mobile density: keep the shared semantic type scale, but use tighter
       bounds so compact screens do not inherit desktop-sized typography. */
    --text-2xs: 0.65625rem;
    --text-xs: 0.71875rem;
    --text-sm: 0.78125rem;
    --text-base: 0.875rem;
    --text-lg: 0.9375rem;
    --text-xl: 1.125rem;
    --text-2xl: 1.3125rem;
    --text-3xl: 1.625rem;
    --text-4xl: 2rem;
    --text-display: 2.25rem;
  }
  .nav-rail {
    display: none;
  }
  .app-surface {
    padding-left: 0;
  }
  .app-header {
    padding: 0.625rem 1rem;
  }
  .status-meta {
    display: none;
  }
  .mobile-nav {
    display: flex;
    margin-left: auto;
  }
  .app-header__status {
    display: none;
  }
  .app-main {
    padding: 1.5rem 0.875rem 2.25rem;
  }
  .page-header {
    align-items: stretch;
    flex-direction: column;
  }
  .page-header .ui-button {
    align-self: flex-start;
  }
  .ui-card {
    padding: 1.125rem;
    border-radius: var(--radius-lg);
  }
  .ui-inline-form {
    grid-template-columns: minmax(0, 1fr);
  }
  .ui-table {
    min-width: 35rem;
  }
  .ui-card:has(.ui-table) {
    overflow-x: auto;
    overscroll-behavior-inline: contain;
  }
}
@media (max-width: 26.5625rem) {
  :root {
    --text-2xs: 0.625rem;
    --text-xs: 0.6875rem;
    --text-sm: 0.75rem;
    --text-base: 0.8125rem;
    --text-lg: 0.90625rem;
    --text-xl: 1.0625rem;
    --text-2xl: 1.25rem;
    --text-3xl: 1.5rem;
  }
  .app-header {
    padding-inline: 0.75rem;
  }
  .app-main {
    padding-inline: 0.75rem;
  }
  .mobile-nav {
    min-width: 0;
    overflow-x: auto;
  }
}
@media (max-width: 22.4375rem) {
  .app-main {
    padding-inline: 0.625rem;
  }
  .ui-card {
    padding: 1rem;
  }
}
@media (min-width: 90rem) {
  .app-main {
    width: min(100%, 80rem);
    max-width: 80rem;
  }
}
@media (min-width: 160rem) {
  .app-main {
    width: min(100%, 90rem);
    max-width: 90rem;
  }
}