/* LoopOS UI v2 foundations — tokens, type, chrome, catalog components.
   Spec: .cursor/skills/loopos-ui-v2/SKILL.md */

@font-face {
  font-family: "IBM Plex Sans";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/fonts/loopos/IBMPlexSans-Regular.woff2") format("woff2");
}

@font-face {
  font-family: "IBM Plex Sans";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("/fonts/loopos/IBMPlexSans-Medium.woff2") format("woff2");
}

@font-face {
  font-family: "IBM Plex Mono";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("/fonts/loopos/IBMPlexMono-Medium.woff2") format("woff2");
}

@font-face {
  font-family: "IBM Plex Mono";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("/fonts/loopos/IBMPlexMono-SemiBold.woff2") format("woff2");
}

@font-face {
  font-family: "Space Grotesk";
  font-style: normal;
  font-weight: 100 700;
  font-display: swap;
  src: url("/fonts/loopos/SpaceGrotesk-VariableFont_wght.ttf") format("truetype");
}

:root {
  --color-primitive-gray-25: #fcfcfc;
  --color-primitive-gray-50: #f6f6f6;
  --color-primitive-gray-100: #e7e7e7;
  --color-primitive-gray-200: #d1d1d1;
  --color-primitive-gray-300: #b0b0b0;
  --color-primitive-gray-400: #888888;
  --color-primitive-gray-500: #6d6d6d;
  --color-primitive-gray-600: #5d5d5d;
  --color-primitive-gray-700: #4f4f4f;
  --color-primitive-gray-800: #454545;
  --color-primitive-gray-900: #3d3d3d;
  --color-primitive-gray-950: #181818;

  --color-success: #0fd877;
  --color-success-fg: #0d6e41;
  --color-danger: #f83446;
  --color-danger-fg: #a01421;
  --color-warning: #ef9a11;
  --color-warning-fg: #8f3f11;
  --color-informative: #068bee;
  --color-informative-fg: #024a8a;
  --color-orange: #e85d2a;
  --color-orange-fg: #9a3412;
  --color-purple: #6f4cff;
  --color-purple-fg: #443092;

  --color-tint-bg-strength: 15%;
  --color-tint-bg-strength-subtle: 10%;
  --color-tint-bg-strength-strong: 22%;
  --color-tint-border-strength: 22%;
  --color-tint-border-strength-subtle: 18%;
  --color-tint-border-strength-strong: 28%;
  --color-tint-border-strength-loud: 30%;

  --color-background: #ffffff;
  --color-primary: #fcfcfc;
  --color-secondary: #f6f6f6;
  --color-tertiary: #e7e7e7;
  --color-content: #181818;
  --color-content-secondary: #6d6d6d;
  --color-foreground: #454545;
  --color-shimmer-highlight: rgba(255, 255, 255, 0.75);

  --color-admin-sidebar-bg: #242628;
  --color-admin-sidebar-surface: #2d3032;
  --color-admin-sidebar-hover: #35383b;
  --color-admin-sidebar-active: #414549;
  --color-admin-sidebar-border: #45494d;
  --color-admin-sidebar-fg: #f7f8f8;
  --color-admin-sidebar-muted: #bcc0c3;

  --sidebar-collapsed-width: 56px;
  --sidebar-expanded-width: 240px;
  --sidebar-width: var(--sidebar-expanded-width);
  --show-layout-header-height: 88px;
  --lui-content-max-width: 1200px;
  --lui-control-height-xs: 24px;
  --lui-control-height-sm: 28px;
  --lui-control-height-md: 32px;
  --lui-control-height-lg: 40px;
  --lui-forms-control-max-width: 420px;
  --lui-select-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%236d6d6d'%3E%3Cpath d='M12 15.4 6.6 10l1.4-1.4 4 4 4-4L17.4 10z'/%3E%3C/svg%3E");
  --lui-shadow-floating: 0 1px 4px rgba(33, 37, 41, 0.10);
  --lui-float-bar-inset-bottom: 24px;
  --lui-float-bar-z-index: 50;

  --font-sans: "IBM Plex Sans", system-ui, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, monospace;
  --font-heading: "Space Grotesk", "IBM Plex Sans", sans-serif;

  --default-transition-duration: 220ms;
  --default-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);

  /* Image Processing = standalone LoopOS (neutral chrome). */
  --color-app: #102026;
  --color-app-fg: #ffffff;
  --color-app-gradient-light: #102026;
  --color-app-gradient-dark: #102026;
  --color-chrome-accent: var(--color-app);
  --color-chrome-accent-fg: var(--color-app-fg);
  --color-chrome-accent-muted: color-mix(in srgb, var(--color-app) 8%, transparent);
  --color-focus-ring: var(--color-app);
}

:root[data-theme="dark"] {
  --color-background: #181818;
  --color-primary: #202020;
  --color-secondary: #242424;
  --color-tertiary: #2e2e2e;
  --color-content: #fcfcfc;
  --color-content-secondary: #888888;
  --color-foreground: #b0b0b0;
  --color-shimmer-highlight: rgba(255, 255, 255, 0.08);
  --lui-select-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23888888'%3E%3Cpath d='M12 15.4 6.6 10l1.4-1.4 4 4 4-4L17.4 10z'/%3E%3C/svg%3E");

  --color-success-fg: color-mix(in srgb, var(--color-success) 72%, white);
  --color-danger-fg: color-mix(in srgb, var(--color-danger) 72%, white);
  --color-warning-fg: color-mix(in srgb, var(--color-warning) 72%, white);
  --color-informative-fg: color-mix(in srgb, var(--color-informative) 72%, white);
  --color-orange-fg: color-mix(in srgb, var(--color-orange) 72%, white);
  --color-purple-fg: color-mix(in srgb, var(--color-purple) 72%, white);

  --color-tint-bg-strength: 22%;
  --color-tint-bg-strength-subtle: 16%;
  --color-tint-bg-strength-strong: 30%;
  --color-tint-border-strength: 32%;
  --color-tint-border-strength-subtle: 26%;
  --color-tint-border-strength-strong: 38%;
  --color-tint-border-strength-loud: 42%;

  --color-admin-sidebar-bg: #fcfcfc;
  --color-admin-sidebar-surface: #fcfcfc;
  --color-admin-sidebar-hover: #f6f6f6;
  --color-admin-sidebar-active: #e7e7e7;
  --color-admin-sidebar-border: #e7e7e7;
  --color-admin-sidebar-fg: #181818;
  --color-admin-sidebar-muted: #6d6d6d;

  --color-focus-ring: var(--color-informative);
}

:root[data-theme="dark"][data-app="loopos"],
:root[data-theme="dark"][data-app="flux"] {
  --color-chrome-accent: var(--color-content);
  --color-chrome-accent-fg: var(--color-background);
  --color-chrome-accent-muted: var(--color-secondary);
}

html { color-scheme: light; }
html[data-theme="dark"] { color-scheme: dark; }

html,
body {
  height: 100vh;
  margin: 0;
  padding: 0;
  overflow: hidden;
  font-family: var(--font-sans);
  font-size: 13px;
  line-height: 18px;
  color: var(--color-content);
  background: var(--color-background);
}

body.login-layout {
  height: auto;
  min-height: 100vh;
  overflow: auto;
}

html body button,
html body input,
html body select,
html body textarea {
  font-family: var(--font-sans) !important;
}

*,
::before,
::after {
  border-color: var(--color-tertiary);
}

/* Typography — one class per scale step; each sets color so dialogs don't freeze light text. */
.heading-30,
.heading-24,
.heading-20,
.heading-16,
.heading-16-medium,
.heading-30-grotesk,
.heading-24-grotesk,
.heading-20-grotesk,
.copy-16,
.copy-16-medium,
.copy-13,
.copy-13-medium,
.copy-12,
.copy-12-medium,
.copy-11,
.copy-11-medium,
.copy-10,
.copy-13-mono,
.copy-12-mono,
.copy-12-mono-semibold,
.copy-11-mono,
.copy-10-mono,
.button-13,
.button-12 {
  color: var(--color-content);
}

.heading-30 { font-family: var(--font-sans); font-size: 30px; font-weight: 500; line-height: 40px; }
.heading-24 { font-family: var(--font-sans); font-size: 24px; font-weight: 500; line-height: 32px; }
.heading-20 { font-family: var(--font-sans); font-size: 20px; font-weight: 500; line-height: 24px; }
.heading-16,
.heading-16-medium { font-family: var(--font-sans); font-size: 16px; font-weight: 500; line-height: 22px; }
.heading-30-grotesk { font-family: var(--font-heading); font-size: 30px; font-weight: 500; line-height: 40px; letter-spacing: -0.02em; }
.heading-24-grotesk { font-family: var(--font-heading); font-size: 24px; font-weight: 500; line-height: 32px; letter-spacing: -0.02em; }
.heading-20-grotesk { font-family: var(--font-heading); font-size: 20px; font-weight: 500; line-height: 24px; letter-spacing: -0.01em; }

.copy-16 { font-family: var(--font-sans); font-size: 16px; font-weight: 400; line-height: 20px; }
.copy-16-medium { font-family: var(--font-sans); font-size: 16px; font-weight: 500; line-height: 20px; }
.copy-13 { font-family: var(--font-sans); font-size: 13px; font-weight: 400; line-height: 18px; }
.copy-13-medium { font-family: var(--font-sans); font-size: 13px; font-weight: 500; line-height: 18px; }
.copy-12 { font-family: var(--font-sans); font-size: 12px; font-weight: 400; line-height: 16px; }
.copy-12-medium { font-family: var(--font-sans); font-size: 12px; font-weight: 500; line-height: 16px; }
.copy-11 { font-family: var(--font-sans); font-size: 11px; font-weight: 400; line-height: 15px; }
.copy-11-medium { font-family: var(--font-sans); font-size: 11px; font-weight: 500; line-height: 15px; }
.copy-10 { font-family: var(--font-sans); font-size: 10px; font-weight: 500; line-height: 13px; }
.copy-13-mono { font-family: var(--font-mono); font-size: 13px; font-weight: 500; line-height: 18px; }
.copy-12-mono { font-family: var(--font-mono); font-size: 12px; font-weight: 500; line-height: 16px; }
.copy-12-mono-semibold { font-family: var(--font-mono); font-size: 12px; font-weight: 600; line-height: 16px; }
.copy-11-mono { font-family: var(--font-mono); font-size: 11px; font-weight: 500; line-height: 15px; }
.copy-10-mono {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 500;
  line-height: 13px;
  text-transform: uppercase;
}

.button-13 { font-family: var(--font-sans); font-size: 13px; font-weight: 500; line-height: 19px; }
.button-12 { font-family: var(--font-sans); font-size: 12px; font-weight: 500; line-height: 16px; }

.text-secondary { color: var(--color-content-secondary); }
.text-foreground { color: var(--color-foreground); }

/* Legacy type aliases (pre-v2 class names). */
.text-heading-24 { font-family: var(--font-sans); font-size: 24px; font-weight: 500; line-height: 32px; color: var(--color-content); }
.text-heading-20 { font-family: var(--font-sans); font-size: 20px; font-weight: 500; line-height: 24px; color: var(--color-content); }
.text-copy-14-500 { font-family: var(--font-sans); font-size: 13px; font-weight: 500; line-height: 18px; color: var(--color-content); }
.text-copy-14-400 { font-family: var(--font-sans); font-size: 13px; font-weight: 400; line-height: 18px; color: var(--color-content); }
.text-copy-12-500 { font-family: var(--font-sans); font-size: 12px; font-weight: 500; line-height: 16px; color: var(--color-content); }
.text-copy-12-400 { font-family: var(--font-sans); font-size: 12px; font-weight: 400; line-height: 16px; color: var(--color-content); }
.text-primary-xs-bold { font-family: var(--font-sans); font-size: 12px; font-weight: 500; line-height: 16px; color: var(--color-content); }
.text-primary-sm-regular { font-family: var(--font-sans); font-size: 13px; font-weight: 400; line-height: 18px; color: var(--color-content); }
.text-text-v2-tertiary { color: var(--color-content-secondary); }
.text-text-v2-secondary { color: var(--color-foreground); }

.material-symbols-rounded,
.material-symbols-round {
  font-family: "Material Symbols Rounded", sans-serif;
  font-weight: normal;
  font-style: normal;
  font-size: 14px;
  line-height: 1;
  letter-spacing: normal;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 1em;
  height: 1em;
  overflow: hidden;
  white-space: nowrap;
  font-feature-settings: "liga";
  font-variation-settings: "FILL" 0, "wght" 400, "GRAD" 0, "opsz" 14;
}

.lui-icon-sm { font-size: 14px; font-variation-settings: "FILL" 0, "wght" 400, "GRAD" 0, "opsz" 14; }
.lui-icon-lg { font-size: 24px; font-variation-settings: "FILL" 0, "wght" 400, "GRAD" 0, "opsz" 24; }
.lui-icon-ai { font-variation-settings: "FILL" 1, "wght" 400, "GRAD" 0, "opsz" 14; color: var(--color-content); }

@media (prefers-reduced-motion: reduce) {
  *,
  ::before,
  ::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

button:not(:disabled):not([aria-disabled="true"]),
[type="button"]:not(:disabled):not([aria-disabled="true"]),
[type="submit"]:not(:disabled):not([aria-disabled="true"]),
[type="reset"]:not(:disabled):not([aria-disabled="true"]),
[role="button"]:not([aria-disabled="true"]),
[type="checkbox"]:not(:disabled),
[type="radio"]:not(:disabled),
select:not(:disabled),
summary:not([aria-disabled="true"]),
a[href],
label:has(> input[type="checkbox"]:not(:disabled)),
label:has(> input[type="radio"]:not(:disabled)) {
  cursor: pointer;
}

button:disabled,
button[aria-disabled="true"],
[role="button"][aria-disabled="true"],
[type="checkbox"]:disabled,
[type="radio"]:disabled,
select:disabled {
  cursor: not-allowed;
}

input:not([type="button"]):not([type="submit"]):not([type="reset"]):not([type="checkbox"]):not([type="radio"]):not([type="file"]),
textarea {
  cursor: text;
}

/* Buttons */
.lui-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border: 1px solid transparent;
  border-radius: 6px;
  box-sizing: border-box;
  font-family: var(--font-sans);
  font-weight: 500;
  white-space: nowrap;
  cursor: pointer;
  text-decoration: none;
  position: relative;
  transition: background-color 0.12s ease, color 0.12s ease, border-color 0.12s ease, filter 0.12s ease;
}

.lui-button--size-xs,
.lui-button--xs { height: 24px; padding: 0 8px; font-size: 12px; line-height: 16px; gap: 6px; }
.lui-button--size-sm,
.lui-button--sm { height: 28px; padding: 0 10px; font-size: 12px; line-height: 16px; gap: 6px; }
.lui-button--size-md,
.lui-button--md { height: 32px; padding: 0 12px; font-size: 13px; line-height: 18px; }
.lui-button--size-lg,
.lui-button--lg { height: 40px; padding: 0 16px; font-size: 13px; line-height: 19px; }
.lui-button--block { width: 100%; }

.lui-button .material-symbols-rounded,
.lui-button .material-symbols-round {
  font-size: 14px !important;
  font-variation-settings: "FILL" 0, "wght" 400, "GRAD" 0, "opsz" 14 !important;
}

.lui-button--icon-only.lui-button--size-xs { width: 24px; padding: 0; }
.lui-button--icon-only.lui-button--size-sm { width: 28px; padding: 0; }
.lui-button--icon-only.lui-button--size-md { width: 32px; padding: 0; }
.lui-button--icon-only.lui-button--size-lg { width: 40px; padding: 0; }

.lui-button--primary,
.lui-button--brand--primary {
  background: var(--color-content);
  color: var(--color-background);
  border-color: transparent;
}
.lui-button--primary:hover,
.lui-button--brand--primary:hover { filter: brightness(1.08); }

.lui-button--secondary {
  background: var(--color-content);
  color: var(--color-background);
}
.lui-button--secondary:hover { filter: brightness(1.08); }

.lui-button--outline {
  background: transparent;
  color: var(--color-content);
  border-color: var(--color-tertiary);
}
.lui-button--outline:hover { background: var(--color-secondary); }

.lui-button--ghost {
  background: transparent;
  color: var(--color-content);
}
.lui-button--ghost:hover { background: var(--color-secondary); }

/* UA a:visited is purple and beats single-class chrome colors. Lock link buttons. */
a.lui-button {
  text-decoration: none;
}
a.lui-button--primary:link,
a.lui-button--primary:visited,
a.lui-button--secondary:link,
a.lui-button--secondary:visited,
a.lui-button--brand--primary:link,
a.lui-button--brand--primary:visited {
  color: var(--color-background);
}
a.lui-button--outline:link,
a.lui-button--outline:visited,
a.lui-button--ghost:link,
a.lui-button--ghost:visited,
a.lui-button--tertiary-danger:link,
a.lui-button--tertiary-danger:visited {
  color: var(--color-content);
}
a.lui-button--outline[aria-current="page"] {
  background: var(--color-secondary);
}
a.lui-button--destructive:link,
a.lui-button--destructive:visited {
  color: var(--color-app-fg);
}

.lui-button--tertiary-danger {
  background: transparent;
  color: var(--color-content);
  border-color: transparent;
}
.lui-button--tertiary-danger:hover,
.lui-button--tertiary-danger:focus-visible {
  background: var(--color-danger);
  color: var(--color-app-fg);
  border-color: color-mix(in srgb, var(--color-danger) 80%, black);
}

.lui-button--destructive {
  background: var(--color-danger);
  color: var(--color-app-fg);
  border-color: color-mix(in srgb, var(--color-danger) 80%, black);
}
.lui-button--destructive:hover { filter: brightness(1.08); }

.lui-button:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px var(--color-background), 0 0 0 4px var(--color-focus-ring);
}

.lui-button:disabled,
.lui-button[aria-disabled="true"] {
  opacity: 0.5;
  cursor: not-allowed;
  filter: none;
}

.lui-button--loading .lui-button__label,
.lui-button--loading .lui-button__icon,
.lui-button--loading .lui-button__inner {
  opacity: 0;
}

.lui-button__spinner {
  position: absolute;
  width: 16px;
  height: 16px;
  border-radius: 9999px;
  border: 2px solid currentColor;
  border-top-color: transparent;
  animation: lui-button-spin 0.6s linear infinite;
}

@keyframes lui-button-spin {
  to { transform: rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
  .lui-button__spinner { animation: none; }
}

@property --beam-angle { syntax: "<angle>"; initial-value: 0deg; inherits: true; }
@property --beam-opacity { syntax: "<number>"; initial-value: 0; inherits: true; }
@property --beam-reach { syntax: "<length-percentage>"; initial-value: 3px; inherits: true; }
@property --beam-strength { syntax: "<number>"; initial-value: 1; inherits: true; }

.lui-button--ai {
  --beam-strength: 1;
  --beam-duration: 6s;
  --beam-saturate: 1.7;
  --lui-ai-summary-border-size: 1px;
  --lui-ai-beam-radius: 6px;
  --beam-reach: 3px;
  /* LoopOS AI / Flux symbol conic stops (LoopOSAI_Symbol_animated.svg) */
  --lui-ai-beam-cyan: rgb(0, 197, 255);
  --lui-ai-beam-teal: rgb(0, 216, 181);
  --lui-ai-beam-yellow: rgb(255, 203, 51);
  --lui-ai-beam-orange: rgb(242, 115, 53);
  --lui-ai-beam-red: rgb(228, 45, 39);
  --lui-ai-beam-purple: rgb(128, 68, 255);
  --lui-ai-beam-blue: rgb(0, 114, 255);
  position: relative;
  overflow: hidden;
  isolation: isolate;
  gap: 0;
  padding: 1px;
  border: none;
  border-radius: var(--lui-ai-beam-radius);
  background: var(--color-tertiary);
  color: var(--color-content);
  animation: beam-spin var(--beam-duration) linear infinite, beam-fade-in 0.6s ease forwards;
  transition: --beam-reach 0.35s ease, --beam-strength 0.35s ease;
}

.lui-button--ai.lui-button--size-xs,
.lui-button--ai.lui-button--xs { height: 24px; padding: 1px; }
.lui-button--ai.lui-button--size-sm,
.lui-button--ai.lui-button--sm { height: 28px; padding: 1px; }
.lui-button--ai.lui-button--size-md,
.lui-button--ai.lui-button--md { height: 32px; padding: 1px; }
.lui-button--ai.lui-button--size-lg,
.lui-button--ai.lui-button--lg { height: 40px; padding: 1px; }

.lui-button--ai:hover { filter: none; }

.lui-button--ai:hover:not(:disabled),
.lui-button--ai:focus-visible:not(:disabled) {
  --beam-reach: 8px;
  --beam-strength: 1.25;
}

.lui-button--ai:hover:not(:disabled) .lui-button__inner,
.lui-button--ai:focus-visible:not(:disabled) .lui-button__inner {
  background: var(--color-secondary);
}

.lui-button--ai::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 3;
  border-radius: var(--lui-ai-beam-radius);
  clip-path: inset(0 round var(--lui-ai-beam-radius));
  pointer-events: none;
  background:
    radial-gradient(ellipse 98px 56px at 33% -7.4%, color-mix(in srgb, var(--lui-ai-beam-orange) 50%, transparent), transparent),
    radial-gradient(ellipse 84px 49px at 12% -5%, color-mix(in srgb, var(--lui-ai-beam-yellow) 50%, transparent), transparent),
    radial-gradient(ellipse 56px 98px at 2.1% 68.3%, color-mix(in srgb, var(--lui-ai-beam-teal) 50%, transparent), transparent),
    radial-gradient(ellipse 252px 45px at 74.4% 100%, color-mix(in srgb, var(--lui-ai-beam-blue) 50%, transparent), transparent),
    radial-gradient(ellipse 104px 45px at 93.9% 0%, color-mix(in srgb, var(--lui-ai-beam-red) 50%, transparent), transparent),
    radial-gradient(ellipse 73px 67px at 100% 27.1%, color-mix(in srgb, var(--lui-ai-beam-purple) 50%, transparent), transparent),
    radial-gradient(ellipse 119px 36px at 55% 100%, color-mix(in srgb, var(--lui-ai-beam-cyan) 50%, transparent), transparent);
  -webkit-mask-image:
    conic-gradient(from var(--beam-angle), transparent 0%, transparent 26%, rgba(255, 255, 255, 0.15) 34%, rgba(255, 255, 255, 0.45) 44%, white 52%, white 80%, rgba(255, 255, 255, 0.45) 88%, rgba(255, 255, 255, 0.15) 94%, transparent 98%, transparent 100%),
    linear-gradient(white, transparent var(--beam-reach), transparent calc(100% - var(--beam-reach)), white),
    linear-gradient(to right, white, transparent var(--beam-reach), transparent calc(100% - var(--beam-reach)), white);
  -webkit-mask-composite: source-in, source-over;
  mask-image:
    conic-gradient(from var(--beam-angle), transparent 0%, transparent 26%, rgba(255, 255, 255, 0.15) 34%, rgba(255, 255, 255, 0.45) 44%, white 52%, white 80%, rgba(255, 255, 255, 0.45) 88%, rgba(255, 255, 255, 0.15) 94%, transparent 98%, transparent 100%),
    linear-gradient(white, transparent var(--beam-reach), transparent calc(100% - var(--beam-reach)), white),
    linear-gradient(to right, white, transparent var(--beam-reach), transparent calc(100% - var(--beam-reach)), white);
  mask-composite: intersect, add;
  opacity: calc(var(--beam-opacity) * 0.6 * var(--beam-strength, 1));
  animation: beam-hue-shift 12s ease-in-out infinite;
}

.lui-button--ai::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 4;
  border-radius: calc(var(--lui-ai-beam-radius) - var(--lui-ai-summary-border-size));
  padding: var(--lui-ai-summary-border-size);
  clip-path: inset(0 round var(--lui-ai-beam-radius));
  pointer-events: none;
  background:
    conic-gradient(from var(--beam-angle), transparent 0%, transparent 54%, rgba(0, 0, 0, 0.05) 57%, rgba(0, 0, 0, 0.35) 66%, rgba(0, 0, 0, 0.05) 75%, transparent 78%, transparent 100%),
    radial-gradient(ellipse 70px 40px at 33% -7.4%, var(--lui-ai-beam-orange), transparent),
    radial-gradient(ellipse 60px 35px at 12% -5%, var(--lui-ai-beam-yellow), transparent),
    radial-gradient(ellipse 40px 70px at 2.1% 68.3%, var(--lui-ai-beam-teal), transparent),
    radial-gradient(ellipse 180px 32px at 74.4% 100%, var(--lui-ai-beam-blue), transparent),
    radial-gradient(ellipse 74px 32px at 93.9% 0%, var(--lui-ai-beam-red), transparent),
    radial-gradient(ellipse 52px 48px at 100% 27.1%, var(--lui-ai-beam-purple), transparent),
    radial-gradient(ellipse 85px 26px at 55% 100%, var(--lui-ai-beam-cyan), transparent);
  -webkit-mask: conic-gradient(from var(--beam-angle), transparent 0%, transparent 30%, white 52%, white 80%, transparent 95%, transparent 100%), linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: source-in, xor;
  mask: conic-gradient(from var(--beam-angle), transparent 0%, transparent 30%, white 52%, white 80%, transparent 95%, transparent 100%), linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  mask-composite: intersect, exclude;
  opacity: calc(var(--beam-opacity) * 0.2 * var(--beam-strength, 1));
  animation: beam-hue-shift 12s ease-in-out infinite;
}

.lui-button--ai .lui-button__inner {
  position: relative;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-width: 0;
  height: 100%;
  width: 100%;
  padding: 0 9px;
  border-radius: calc(var(--lui-ai-beam-radius) - var(--lui-ai-summary-border-size));
  background: var(--color-background);
  color: var(--color-content);
  transition: background 0.35s ease;
}

.lui-button--ai .lui-button__ai-symbol {
  display: block;
  width: 18px;
  height: 18px;
  object-fit: contain;
  flex-shrink: 0;
}

.lui-button--ai.lui-button--icon-only .lui-button__inner {
  padding: 0;
}

.lui-button--ai[aria-busy="true"]:disabled {
  opacity: 1;
  cursor: wait;
}

.lui-button__label--shimmer {
  background-image: linear-gradient(
    90deg,
    var(--color-content) 0%,
    var(--color-shimmer-highlight) 45%,
    var(--color-content) 100%
  );
  background-size: 200% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: lui-label-shimmer 1.4s ease-in-out infinite;
}

@keyframes beam-spin { to { --beam-angle: 360deg; } }
@keyframes beam-fade-in { to { --beam-opacity: 1; } }
@keyframes beam-hue-shift {
  0%, 100% { filter: brightness(1.25) saturate(var(--beam-saturate, 1.5)); }
  50% { filter: brightness(1.4) saturate(var(--beam-saturate, 1.5)); }
}
@keyframes lui-label-shimmer {
  0% { background-position: 100% 0; }
  100% { background-position: -100% 0; }
}

@media (prefers-reduced-motion: reduce) {
  .lui-button--ai { animation: none; --beam-opacity: 1; transition: none; }
  .lui-button--ai::before,
  .lui-button--ai::after { animation: none; }
  .lui-button--ai::before { opacity: 0; }
  .lui-button--ai::after {
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    mask-composite: exclude;
  }
  .lui-button--ai .lui-button__inner { transition: none; }
  .lui-button__label--shimmer {
    animation: none;
    background: none;
    color: var(--color-content);
    -webkit-background-clip: unset;
    background-clip: unset;
  }
}

.lui-process-button-hint { display: block; width: 100%; }
.lui-process-button-hint:has(.lui-button:disabled) { cursor: not-allowed; }

/* Legacy button names */
.lui-button--neutral--primary { background: var(--color-content); color: var(--color-background); border-color: transparent; }
.lui-button--neutral--primary:hover { filter: brightness(1.08); }
.lui-button--neutral--secondary { background: transparent; color: var(--color-content); border-color: var(--color-tertiary); }
.lui-button--neutral--secondary:hover { background: var(--color-secondary); }
.lui-button--neutral--tertiary { background: transparent; color: var(--color-content); }
.lui-button--neutral--tertiary:hover { background: var(--color-secondary); }
.lui-button--size-small { height: 28px; padding: 0 10px; font-size: 12px; line-height: 16px; gap: 6px; }
.lui-button--danger--primary,
.lui-button--danger--secondary { background: var(--color-danger); color: var(--color-app-fg); }
.lui-button--success--primary,
.lui-button--success--secondary {
  color: var(--color-success-fg);
  background: color-mix(in srgb, var(--color-success) var(--color-tint-bg-strength), var(--color-background));
  border-color: color-mix(in srgb, var(--color-success) var(--color-tint-border-strength), var(--color-tertiary));
}

/* Badges */
.lui-badge,
.lui-label {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 2px 8px;
  border: 1px solid transparent;
  border-radius: 6px;
  white-space: nowrap;
  font-size: 12px;
  font-weight: 400;
  line-height: 16px;
}

.lui-badge--sm,
.lui-label { padding: 2px 6px; line-height: 14px; }
.lui-badge--pill { border-radius: 9999px; }
.lui-badge--mono .copy-12-mono { color: inherit; font-weight: inherit; line-height: inherit; }

.lui-badge--neutral,
.lui-label--neutral {
  background: var(--color-secondary);
  color: var(--color-content-secondary);
  border-color: var(--color-tertiary);
}

.lui-badge--success,
.lui-badge--green,
.lui-label--success {
  background: color-mix(in srgb, var(--color-success) var(--color-tint-bg-strength), var(--color-background));
  color: var(--color-success-fg);
  border-color: color-mix(in srgb, var(--color-success) var(--color-tint-border-strength), var(--color-tertiary));
}

.lui-badge--danger,
.lui-badge--red,
.lui-label--danger {
  background: color-mix(in srgb, var(--color-danger) var(--color-tint-bg-strength), var(--color-background));
  color: var(--color-danger-fg);
  border-color: color-mix(in srgb, var(--color-danger) var(--color-tint-border-strength), var(--color-tertiary));
}

.lui-badge--warning,
.lui-badge--yellow,
.lui-label--warning {
  background: color-mix(in srgb, var(--color-warning) var(--color-tint-bg-strength), var(--color-background));
  color: var(--color-warning-fg);
  border-color: color-mix(in srgb, var(--color-warning) var(--color-tint-border-strength), var(--color-tertiary));
}

.lui-badge--informative,
.lui-badge--blue,
.lui-label--informative {
  background: color-mix(in srgb, var(--color-informative) var(--color-tint-bg-strength), var(--color-background));
  color: var(--color-informative-fg);
  border-color: color-mix(in srgb, var(--color-informative) var(--color-tint-border-strength), var(--color-tertiary));
}

.lui-badge__icon {
  font-size: 14px;
  font-variation-settings: "FILL" 0, "wght" 400, "GRAD" 0, "opsz" 14;
}
.lui-badge__icon--filled { font-variation-settings: "FILL" 1, "wght" 400, "GRAD" 0, "opsz" 14; }

/* Forms */
.lui-forms__stack { display: flex; flex-direction: column; gap: 8px; width: 100%; }

.lui-forms__group {
  display: flex;
  flex-direction: column;
  gap: 0;
  width: 100%;
  max-width: var(--lui-forms-control-max-width, 420px);
  position: relative;
}

.lui-forms__group--full,
.lui-forms__group--full .lui-forms__control { max-width: none; }

.lui-forms__label { color: var(--color-content); margin: 0 0 4px; }
.lui-forms__required { color: var(--color-danger); }

.lui-forms__control,
.lui-input__input {
  width: 100%;
  max-width: min(var(--lui-forms-control-max-width, 420px), 100%);
  box-sizing: border-box;
  height: var(--lui-control-height-md);
  padding: 0 12px;
  border-radius: 6px;
  background: var(--color-background);
  color: var(--color-content);
  border: 1px solid var(--color-tertiary);
  transition: border-color 120ms ease, box-shadow 120ms ease;
}

.lui-forms__group--full .lui-forms__control,
.lui-forms__group--full .lui-input__input,
.lui-input .lui-input__input { max-width: none; }

.lui-forms__control::placeholder,
.lui-input__input::placeholder { color: var(--color-content-secondary); }

textarea.lui-forms__control {
  height: auto;
  min-height: 80px;
  padding-top: 8px;
  padding-bottom: 8px;
  resize: vertical;
}

.lui-forms__control:focus-visible,
.lui-input__input:focus-visible {
  outline: none;
  border-color: color-mix(in srgb, var(--color-chrome-accent) 30%, transparent);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--color-chrome-accent) 10%, transparent);
}

.lui-forms__control:disabled,
.lui-input__input:disabled {
  background: var(--color-primary);
  color: var(--color-content-secondary);
  cursor: not-allowed;
}

.lui-forms__control--xs { height: var(--lui-control-height-xs); padding: 0 8px; }
.lui-forms__control--sm,
.lui-index-layout .lui-forms__control,
.lui-index-layout .lui-input__input { height: var(--lui-control-height-sm); padding: 0 10px; }
.lui-forms__control--lg { height: var(--lui-control-height-lg); padding: 0 14px; }
input.login__input.lui-forms__control { height: var(--lui-control-height-lg); padding: 0 14px; }

select.lui-forms__control,
select.lui-input__input,
.lui-forms__control--select {
  appearance: none;
  -webkit-appearance: none;
  background-image: var(--lui-select-chevron);
  background-repeat: no-repeat;
  background-position: right 0.625rem center;
  background-size: 18px;
  padding-right: 2rem;
}

.lui-index-layout select.lui-forms__control,
.lui-index-layout select.lui-input__input {
  padding-right: 2rem;
}

.lui-forms__composite {
  display: flex;
  align-items: center;
  gap: 4px;
  box-sizing: border-box;
  width: 100%;
  height: var(--lui-control-height-md);
  padding: 0 8px;
  border-radius: 6px;
  background: var(--color-background);
  border: 1px solid var(--color-tertiary);
  transition: border-color 120ms ease, box-shadow 120ms ease;
}

.lui-forms__composite--xs { height: var(--lui-control-height-xs); padding: 0 6px; }
.lui-forms__composite--sm { height: var(--lui-control-height-sm); padding: 0 6px; }
.lui-forms__composite--lg,
.lui-forms__composite.login__input { height: var(--lui-control-height-lg); padding: 0 12px; }

.lui-forms__composite:focus-within:has(:focus-visible) {
  outline: none;
  border-color: color-mix(in srgb, var(--color-chrome-accent) 30%, transparent);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--color-chrome-accent) 10%, transparent);
}

.lui-forms__composite.is-error:focus-within:has(:focus-visible) {
  box-shadow: 0 0 0 2px var(--color-danger);
}

.lui-forms__composite .lui-forms__control {
  flex: 1;
  min-width: 0;
  width: auto;
  max-width: none;
  height: 100%;
  min-height: 0;
  border: none;
  padding: 0;
  background: transparent;
  box-shadow: none;
}

.lui-forms__composite .lui-forms__control:focus,
.lui-forms__composite .lui-forms__control:focus-visible {
  border: none;
  box-shadow: none;
}

.lui-search { width: 100%; }

.lui-search__icon {
  flex-shrink: 0;
  font-size: 14px;
  color: var(--color-content-secondary);
  pointer-events: none;
}

.lui-search__field,
.lui-forms__composite.lui-search__field {
  gap: 4px;
  padding: 0 4px 0 10px;
}

.lui-search--sm .lui-forms__composite.lui-search__field,
.lui-forms__composite.lui-search__field.lui-forms__composite--sm {
  height: var(--lui-control-height-sm);
}

.lui-search__field .lui-forms__control,
.lui-forms__composite.lui-search__field .lui-forms__control {
  height: 100%;
  min-height: 0;
  padding: 0;
}

.lui-search__field .lui-forms__control[type="search"],
.lui-forms__composite.lui-search__field .lui-forms__control[type="search"] {
  appearance: none;
  -webkit-appearance: none;
}

.lui-search__field .lui-forms__control[type="search"]::-webkit-search-cancel-button,
.lui-forms__composite.lui-search__field .lui-forms__control[type="search"]::-webkit-search-cancel-button {
  -webkit-appearance: none;
  appearance: none;
  display: none;
}

.lui-search__field .lui-forms__control[type="search"]::-webkit-search-decoration,
.lui-forms__composite.lui-search__field .lui-forms__control[type="search"]::-webkit-search-decoration {
  -webkit-appearance: none;
}

.lui-search__field .lui-forms__control[type="search"]::-moz-search-clear-button,
.lui-forms__composite.lui-search__field .lui-forms__control[type="search"]::-moz-search-clear-button {
  display: none;
}

.lui-search__clear {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  padding: 0;
  border: none;
  border-radius: 4px;
  background: transparent;
  color: var(--color-content-secondary);
  cursor: pointer;
}

.lui-search__clear .material-symbols-rounded {
  font-size: 12px;
  color: inherit;
  font-variation-settings: "FILL" 0, "wght" 400, "GRAD" 0, "opsz" 14;
}

.lui-search__clear:hover {
  background: var(--color-secondary);
  color: var(--color-content);
}

.lui-search__clear:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--color-chrome-accent) 10%, transparent);
}

.lui-search__clear[hidden] { display: none; }

.lui-password { display: flex; flex-direction: column; gap: 6px; width: 100%; }

.lui-password__field,
.lui-forms__composite.lui-password__field {
  padding: 0 6px 0 10px;
}

.lui-password__input,
.lui-forms__composite .lui-password__input {
  color: var(--color-content);
}

.lui-password__toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  flex-shrink: 0;
  border: none;
  border-radius: 6px;
  background: transparent;
  color: var(--color-content-secondary);
  cursor: pointer;
  transition: color 120ms ease, background 120ms ease;
}
.lui-password__toggle:hover { background: var(--color-secondary); color: var(--color-content); }
.lui-password__toggle:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px var(--color-background), 0 0 0 4px var(--color-chrome-accent);
}
.lui-password__toggle-icon { font-size: 20px; }

.lui-forms__helper,
.lui-forms__error { margin: 4px 0 0; }
.lui-forms__error { color: var(--color-danger-fg); display: inline-flex; align-items: center; gap: 4px; }

.lui-input { display: flex; align-items: center; width: 100%; }

.lui-form-error { color: var(--color-danger-fg); }

.lui-form_entry {
  display: flex;
  flex-direction: column;
  gap: 4px;
  width: 100%;
}

form.lui-form_entry {
  gap: 12px;
}

.lui-form_entry__label {
  margin: 0;
  color: var(--color-content);
  font-size: 13px;
  font-weight: 500;
  line-height: 18px;
}

.lui-form_entry__input { width: 100%; min-width: 0; }

.lui-form_entry__input--inline {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.lui-form_entry__input--compact { width: 4.5rem; }

.lui-form_entry--horizontal {
  flex-direction: row;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 8px;
}

.lui-form-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.lui-checkbox {
  display: flex;
  align-items: flex-start;
  gap: 8px;
}

.lui-checkbox__control {
  position: relative;
  display: inline-flex;
  flex: none;
}

.lui-checkbox__input {
  position: absolute;
  inset: 0;
  margin: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  cursor: pointer;
}
.lui-checkbox__input:disabled { cursor: not-allowed; }

.lui-checkbox__box {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  border-radius: 4px;
  background: var(--color-background);
  border: 1px solid var(--color-tertiary);
  color: var(--color-app-fg);
  transition: background 120ms ease, border-color 120ms ease;
  pointer-events: none;
}

.lui-checkbox__mark {
  font-variation-settings: "wght" 600;
  transform: scale(0.6);
  opacity: 0;
  transition: opacity 100ms ease, transform 100ms ease;
}

.lui-checkbox__input:not(:disabled):hover ~ .lui-checkbox__box {
  border-color: var(--color-content-secondary);
  background: var(--color-secondary);
}

.lui-checkbox__input:checked:not(:disabled):hover ~ .lui-checkbox__box,
.lui-checkbox__input:indeterminate:not(:disabled):hover ~ .lui-checkbox__box {
  background: var(--color-app);
  border-color: var(--color-app);
  filter: brightness(1.08);
}

.lui-checkbox__input:checked ~ .lui-checkbox__box,
.lui-checkbox__input:indeterminate ~ .lui-checkbox__box {
  background: var(--color-app);
  border-color: var(--color-app);
}
.lui-checkbox__input:checked ~ .lui-checkbox__box .lui-checkbox__mark,
.lui-checkbox__input:indeterminate ~ .lui-checkbox__box .lui-checkbox__mark {
  opacity: 1;
  transform: scale(1);
}

.lui-checkbox__input:focus-visible ~ .lui-checkbox__box {
  outline: none;
  box-shadow: 0 0 0 2px var(--color-background), 0 0 0 4px var(--color-app);
}

.lui-checkbox__input:disabled ~ .lui-checkbox__box {
  background: var(--color-secondary);
  border-color: var(--color-tertiary);
  opacity: 0.6;
}

.login__remember .lui-checkbox { align-items: center; }

.login .lui-checkbox__input:checked ~ .lui-checkbox__box,
.login .lui-checkbox__input:indeterminate ~ .lui-checkbox__box {
  background: var(--color-content);
  border-color: var(--color-content);
  color: var(--color-background);
}
.login .lui-checkbox__input:checked:not(:disabled):hover ~ .lui-checkbox__box,
.login .lui-checkbox__input:indeterminate:not(:disabled):hover ~ .lui-checkbox__box {
  background: var(--color-content);
  border-color: var(--color-content);
}

.lui-checkbox__label { color: var(--color-content); cursor: pointer; }
.lui-checkbox__description { color: var(--color-content-secondary); margin: 2px 0 0; }
.lui-checkbox__required { color: var(--color-danger); }
.lui-checkbox__error { color: var(--color-danger-fg); margin-top: 2px; }

.lui-checkbox--error .lui-checkbox__input:not(:checked) ~ .lui-checkbox__box {
  border-color: var(--color-danger);
}

.lui-checkbox--sm .lui-checkbox__box { width: 14px; height: 14px; }
.lui-checkbox--sm .lui-checkbox__mark { font-size: 14px; }
.lui-checkbox--md .lui-checkbox__box { width: 16px; height: 16px; }
.lui-checkbox--md .lui-checkbox__mark { font-size: 16px; }
.lui-checkbox--lg .lui-checkbox__box { width: 20px; height: 20px; }
.lui-checkbox--lg .lui-checkbox__mark { font-size: 18px; }

.lui-switch {
  display: flex;
  align-items: flex-start;
  gap: 8px;
}

.lui-switch__control {
  position: relative;
  display: inline-flex;
  flex: none;
}

.lui-switch__input {
  position: absolute;
  inset: 0;
  margin: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  cursor: pointer;
}
.lui-switch__input:disabled { cursor: not-allowed; }

.lui-switch__track {
  display: inline-flex;
  align-items: center;
  box-sizing: border-box;
  border-radius: 9999px;
  background: var(--color-tertiary);
  border: 1px solid var(--color-tertiary);
  transition: background 140ms ease, border-color 140ms ease;
  pointer-events: none;
}

.lui-switch__thumb {
  display: inline-flex;
  border-radius: 9999px;
  background: var(--color-background);
  box-shadow: 0 1px 4px rgb(33 37 41 / 0.10);
  transition: transform 140ms ease;
  transform: translateX(0);
}

.lui-switch__input:not(:disabled):hover ~ .lui-switch__track {
  background: var(--color-content-secondary);
  border-color: var(--color-content-secondary);
}

.lui-switch__input:checked ~ .lui-switch__track {
  background: var(--color-chrome-accent);
  border-color: var(--color-chrome-accent);
}
.lui-switch__input:not(:disabled):checked:hover ~ .lui-switch__track {
  background: color-mix(in srgb, var(--color-chrome-accent) 85%, black);
  border-color: color-mix(in srgb, var(--color-chrome-accent) 85%, black);
}

.lui-switch__input:focus-visible ~ .lui-switch__track {
  outline: none;
  box-shadow: 0 0 0 2px var(--color-background), 0 0 0 4px var(--color-chrome-accent);
}

.lui-switch__input:disabled ~ .lui-switch__track {
  background: var(--color-secondary);
  border-color: var(--color-tertiary);
  opacity: 0.6;
}

.lui-switch__text { display: flex; flex-direction: column; }
.lui-switch__label { color: var(--color-content); cursor: pointer; }

.lui-switch--sm .lui-switch__track { width: 32px; height: 18px; padding: 2px; }
.lui-switch--sm .lui-switch__thumb { width: 14px; height: 14px; }
.lui-switch--sm .lui-switch__input:checked ~ .lui-switch__track .lui-switch__thumb { transform: translateX(14px); }

.lui-switch--md .lui-switch__track { width: 40px; height: 24px; padding: 2px; }
.lui-switch--md .lui-switch__thumb { width: 18px; height: 18px; }
.lui-switch--md .lui-switch__input:checked ~ .lui-switch__track .lui-switch__thumb { transform: translateX(16px); }

.lui-switch--lg .lui-switch__track { width: 56px; height: 32px; padding: 3px; }
.lui-switch--lg .lui-switch__thumb { width: 24px; height: 24px; }
.lui-switch--lg .lui-switch__input:checked ~ .lui-switch__track .lui-switch__thumb { transform: translateX(24px); }

.lui-radio-group {
  display: flex;
  flex-direction: column;
  gap: 12px;
  border: 0;
  margin: 0;
  padding: 0;
  min-inline-size: 0;
}

.lui-radio-group__legend {
  color: var(--color-content);
  margin: 0 0 4px;
  padding: 0;
}

.lui-radio {
  display: flex;
  align-items: flex-start;
  gap: 8px;
}

.lui-radio__input {
  position: absolute;
  inset: 0;
  margin: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
}
.lui-radio__input:disabled { cursor: not-allowed; }

.lui-radio__control {
  position: relative;
  display: inline-flex;
  flex: none;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
}

.lui-radio__circle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  border-radius: 9999px;
  background: var(--color-background);
  border: 1px solid var(--color-tertiary);
  transition: background 120ms ease, border-color 120ms ease;
  pointer-events: none;
}

.lui-radio__dot {
  border-radius: 9999px;
  background: var(--color-app-fg);
  transform: scale(0);
  opacity: 0;
  transition: opacity 100ms ease, transform 100ms ease;
}

.lui-radio__input:not(:disabled):hover ~ .lui-radio__circle {
  border-color: var(--color-content-secondary);
  background: var(--color-secondary);
}

.lui-radio__input:checked ~ .lui-radio__circle {
  background: var(--color-app);
  border-color: var(--color-app);
}
.lui-radio__input:checked ~ .lui-radio__circle .lui-radio__dot {
  opacity: 1;
  transform: scale(1);
}

.lui-radio__input:focus-visible ~ .lui-radio__circle {
  outline: none;
  box-shadow: 0 0 0 2px var(--color-background), 0 0 0 4px var(--color-app);
}

.lui-radio__input:disabled ~ .lui-radio__circle {
  background: var(--color-secondary);
  border-color: var(--color-tertiary);
  opacity: 0.6;
}

.lui-radio__text {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.lui-radio__label { color: var(--color-content); cursor: pointer; margin: 0; }
.lui-radio__description { color: var(--color-content-secondary); margin: 2px 0 0; }
.lui-radio__required { color: var(--color-danger); }
.lui-radio__error { color: var(--color-danger-fg); margin: 2px 0 0; }

.lui-radio--error .lui-radio__input:not(:checked) ~ .lui-radio__circle {
  border-color: var(--color-danger);
}

.lui-radio--sm .lui-radio__control { height: 16px; }
.lui-radio--sm .lui-radio__circle { width: 14px; height: 14px; }
.lui-radio--sm .lui-radio__dot    { width: 6px;  height: 6px; }
.lui-radio--md .lui-radio__control { height: 18px; }
.lui-radio--md .lui-radio__circle { width: 16px; height: 16px; }
.lui-radio--md .lui-radio__dot    { width: 6px;  height: 6px; }
.lui-radio--lg .lui-radio__control { height: 20px; }
.lui-radio--lg .lui-radio__circle { width: 20px; height: 20px; }
.lui-radio--lg .lui-radio__dot    { width: 8px;  height: 8px; }

.lui-settings-readonly {
  display: grid;
  gap: 12px;
  margin: 0;
}

.lui-settings-readonly dt {
  margin: 0;
  font-weight: 400;
}

.lui-settings-readonly dd { margin: 4px 0 0; }

/* Cards */
.lui-card,
.lui-card_v2 {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 12px;
  border-radius: 6px;
  border: 1px solid var(--color-tertiary);
  background: var(--color-background);
  color: var(--color-content);
}

.lui-card__header,
.lui-card__body,
.lui-card__footer { padding: 12px; }

.lui-tab-panel-card.lui-card,
.lui-detail-card.lui-card {
  overflow: hidden;
  gap: 0;
  padding: 0;
}

.lui-tab-panel-card.lui-card > .lui-card__header {
  padding: 12px;
  background: var(--color-background);
  border-bottom: 1px solid var(--color-tertiary);
}

.lui-tab-panel-card.lui-card > .lui-card__body { padding: 0; }

.lui-tab-panel-card__header {
  display: flex;
  flex-direction: column;
  gap: 0;
  min-width: 0;
}

.lui-tab-panel-card__header--with-actions {
  flex-direction: row;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.lui-tab-panel-card__header-text { min-width: 0; flex: 1 1 auto; }
.lui-tab-panel-card__header-text .heading-16 { margin: 0; }
.lui-tab-panel-card__header-text .copy-12 { margin: 4px 0 0; }

.lui-tab-panel-card__header-actions {
  flex-shrink: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
}

.lui-tab-panel-card__body { padding: 12px; }
.lui-tab-panel-card__body.p-0 { padding: 0; }

/* Tables */
.lui-table-wrapper {
  border: 1px solid var(--color-tertiary);
  border-radius: 6px;
  background: var(--color-background);
  width: 100%;
  max-width: 100%;
  min-width: 0;
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-x: contain;
}

.lui-table { width: 100%; border-collapse: collapse; }
.lui-table thead { background: var(--color-primary); }

.lui-table__th,
.lui-table__cell {
  height: auto;
  padding: 8px 16px;
  text-align: left;
  vertical-align: middle;
  border-bottom: 1px solid var(--color-tertiary);
}

.lui-table__th:not(.lui-table__cell--checkbox):not(.lui-table__cell--actions),
.lui-table__cell:not(.lui-table__cell--checkbox):not(.lui-table__cell--actions) {
  min-width: 4.5rem;
  white-space: nowrap;
}

.lui-table :is(tbody, tfoot):last-child tr:last-child :is(.lui-table__th, .lui-table__cell) {
  border-bottom: none;
}

.lui-table tbody tr:hover { background: var(--color-secondary); }
.lui-table__row--clickable { cursor: pointer; }

/* Selection column — shrink-to-fit; table-cell + height:1px stretch + inner flex wrapper */
.lui-table__th.lui-table__cell--checkbox,
.lui-table__cell.lui-table__cell--checkbox {
  width: 1%;
  max-width: 40px;
  white-space: nowrap;
  padding: 8px 8px 8px 16px;
  vertical-align: middle;
  height: 1px;
}
.lui-table__cell--checkbox .lui-table__cell-checkbox {
  display: flex;
  align-items: center;
  height: 100%;
  min-height: 16px;
}
.lui-table__cell--checkbox .lui-checkbox { gap: 0; width: 16px; height: 16px; margin: 0; }
.lui-table__row--clickable:focus-visible {
  outline: 2px solid var(--color-chrome-accent);
  outline-offset: -2px;
}
.lui-table__row--highlight { background: var(--color-secondary); }
.lui-table__row--highlight .lui-table__cell:first-child { font-weight: 500; }
.lui-table__actions { display: flex; gap: 8px; justify-content: flex-end; }

.lui-link,
.lui-prose-link { color: var(--color-informative); text-decoration: none; text-underline-offset: 2px; cursor: pointer; }
.lui-link:link,
.lui-link:visited,
.lui-prose-link:link,
.lui-prose-link:visited { color: var(--color-informative); }
.lui-link:hover,
.lui-prose-link:hover,
.lui-link:focus-visible,
.lui-prose-link:focus-visible { text-decoration: underline; }
.lui-link--chrome,
.lui-table__link { color: var(--color-content); }
.lui-link--chrome:link,
.lui-link--chrome:visited,
.lui-table__link:link,
.lui-table__link:visited { color: var(--color-content); }
.lui-link--chrome.copy-13,
.lui-table__link.copy-13 { color: var(--color-content-secondary); }
.lui-link--chrome.copy-13:link,
.lui-link--chrome.copy-13:visited,
.lui-table__link.copy-13:link,
.lui-table__link.copy-13:visited { color: var(--color-content-secondary); }
.lui-link--chrome:hover,
.lui-table__link:hover { color: var(--color-chrome-accent); }

/* Toast — Rails Blocks lui-toast (border only, no shadow) */
.lui-toast-region {
  position: fixed;
  z-index: 99999;
  pointer-events: none;
}

.lui-toast-region--top-center {
  top: 0;
  left: 0;
  right: 0;
  margin-top: 16px;
  display: flex;
  justify-content: center;
  padding-inline: 16px;
  box-sizing: border-box;
}

.lui-toast-region--top-left { top: 0; left: 16px; margin-top: 16px; width: min(24rem, calc(100% - 32px)); }
.lui-toast-region--top-right { top: 0; right: 16px; margin-top: 16px; width: min(24rem, calc(100% - 32px)); }
.lui-toast-region--bottom-center {
  bottom: 0;
  left: 0;
  right: 0;
  margin-bottom: 16px;
  display: flex;
  justify-content: center;
  padding-inline: 16px;
  box-sizing: border-box;
}
.lui-toast-region--bottom-left { bottom: 0; left: 16px; margin-bottom: 16px; width: min(24rem, calc(100% - 32px)); }
.lui-toast-region--bottom-right { bottom: 0; right: 16px; margin-bottom: 16px; width: min(24rem, calc(100% - 32px)); }

.lui-toast-region--top-center .lui-toast-region__list,
.lui-toast-region--bottom-center .lui-toast-region__list { width: min(24rem, 100%); }

.lui-toast-region__list {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
  pointer-events: auto;
}

.lui-toast-item {
  position: relative;
  pointer-events: auto;
  transition: opacity 0.3s ease, transform 0.3s ease;
}

.lui-toast-item[data-removed="true"] {
  opacity: 0;
  transform: translateY(-0.35rem);
  pointer-events: none;
}

.lui-toast {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 10px;
  align-items: start;
  width: 100%;
  min-width: 18rem;
  max-width: 24rem;
  padding: 12px 14px;
  border-radius: 6px;
  border: 1px solid var(--color-tertiary);
  background: var(--color-background);
  color: var(--color-content);
  box-sizing: border-box;
}

.lui-toast:not(:has(.lui-toast__description)):not(:has(.lui-toast__actions)) {
  align-items: center;
}

.lui-toast:not(:has(.lui-toast__description)):not(:has(.lui-toast__actions)) .lui-toast__icon {
  margin-top: 0;
}

.lui-toast__icon {
  font-size: 18px;
  line-height: 1;
  margin-top: 1px;
  color: var(--color-foreground);
}

.lui-toast__body {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.lui-toast__title { color: var(--color-content); margin: 0; }
.lui-toast__description { color: var(--color-content-secondary); margin: 0; }

.lui-toast--success .lui-toast__icon { color: var(--color-success); }
.lui-toast--error .lui-toast__icon,
.lui-toast--danger .lui-toast__icon { color: var(--color-danger); }
.lui-toast--info .lui-toast__icon { color: var(--color-informative); }
.lui-toast--warning .lui-toast__icon { color: var(--color-warning); }
.lui-toast--loading .lui-toast__icon { color: var(--color-content-secondary); }

.lui-toast__icon--spin { animation: lui-toast-spin 1s linear infinite; }
@keyframes lui-toast-spin { to { transform: rotate(360deg); } }

.lui-toast__dismiss {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 24px;
  width: 24px;
  border: none;
  border-radius: 6px;
  background: transparent;
  color: var(--color-foreground);
  opacity: 0.7;
  cursor: pointer;
}
.lui-toast__dismiss .material-symbols-rounded { font-size: 16px; }
.lui-toast__dismiss:hover { opacity: 1; background: color-mix(in srgb, currentColor 12%, transparent); }
.lui-toast__dismiss:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px var(--color-background), 0 0 0 4px var(--color-chrome-accent);
}

@media (prefers-reduced-motion: reduce) {
  .lui-toast-item { transition: none; }
  .lui-toast__icon--spin { animation: none; }
}

/* Avatar */
.lui-avatar {
  position: relative;
  isolation: isolate;
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  max-width: 24px;
  max-height: 24px;
  overflow: hidden;
  box-sizing: border-box;
}

.lui-avatar::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  box-shadow: inset 0 0 0 1px rgba(69, 69, 69, 0.25);
  mix-blend-mode: difference;
  pointer-events: none;
}

span.lui-avatar:not(:has(> img)) {
  background: var(--color-secondary);
  color: var(--color-content-secondary);
  font-weight: 400;
}

.lui-avatar--circle { border-radius: 9999px; }
.lui-avatar--square { border-radius: 4px; }
.lui-avatar--sm { width: 20px; height: 20px; max-width: 20px; max-height: 20px; }
.lui-avatar--md { width: 32px; height: 32px; max-width: 32px; max-height: 32px; }

/* App shell */
.lui-app-layout {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
}

.lui-app-layout__content {
  display: flex;
  flex: 1 1 auto;
  flex-direction: row;
  overflow: hidden;
  position: relative;
}

.lui-app-layout__content-container {
  position: relative;
  display: flex;
  flex: 1 1 0;
  flex-direction: column;
  overflow: hidden;
}

.lui-app-layout__content-inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-rows: auto minmax(0, 1fr);
  height: 100%;
  width: 100%;
  min-height: 0;
}

#lui-action-bar {
  grid-column: 1;
  grid-row: 1;
  min-width: 0;
}

.lui-app-layout__bottom-bar {
  display: flex;
  align-items: stretch;
  grid-column: 2;
  grid-row: 1;
  height: 48px;
  box-sizing: border-box;
  background: var(--color-background);
  border-bottom: 1px solid var(--color-tertiary);
}

.lui-app-layout__bottom-bar:not(:has(.lui-bottom-bar > :not([hidden]))) {
  display: none;
}

.lui-app-layout__content-inner:has(.lui-bottom-bar > :not([hidden])) #lui-action-bar .lui-action-bar {
  padding-right: 8px;
}

.lui-main-layout__container {
  grid-column: 1 / -1;
  grid-row: 2;
  min-width: 0;
  min-height: 0;
}

.lui-bottom-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 100%;
  padding: 0 16px 0 8px;
  box-sizing: border-box;
}

@media (max-width: 949px) {
  .lui-app-layout__content-inner {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto minmax(0, 1fr) auto;
  }

  .lui-app-layout__bottom-bar {
    grid-column: 1;
    grid-row: 3;
    height: auto;
    min-height: 48px;
    border-bottom: none;
    border-top: 1px solid var(--color-tertiary);
  }

  .lui-app-layout__content-inner:has(.lui-bottom-bar > :not([hidden])) #lui-action-bar .lui-action-bar {
    padding-right: 16px;
  }

  .lui-bottom-bar,
  .lui-action-bar__actions,
  .lui-action_buttons {
    flex-direction: column-reverse;
    align-items: stretch;
    justify-content: flex-end;
    flex-wrap: nowrap;
    width: 100%;
    height: auto;
    padding: 8px 16px;
    padding-bottom: max(8px, env(safe-area-inset-bottom));
  }

  .lui-bottom-bar .lui-button,
  .lui-action-bar__actions .lui-button,
  .lui-action_buttons .lui-button {
    height: 40px;
    padding: 0 16px;
    font-size: 13px;
    line-height: 19px;
  }

  .lui-bottom-bar .lui-button--icon-only,
  .lui-action-bar__actions .lui-button--icon-only,
  .lui-action_buttons .lui-button--icon-only {
    width: 40px;
    padding: 0;
  }

  .lui-bottom-bar .lui-button .material-symbols-rounded,
  .lui-bottom-bar .lui-button .material-symbols-round,
  .lui-action-bar__actions .lui-button .material-symbols-rounded,
  .lui-action-bar__actions .lui-button .material-symbols-round,
  .lui-action_buttons .lui-button .material-symbols-rounded,
  .lui-action_buttons .lui-button .material-symbols-round {
    font-size: 16px !important;
    font-variation-settings: "FILL" 0, "wght" 400, "GRAD" 0, "opsz" 16 !important;
  }

  .lui-bottom-bar .lui-month-navigator,
  .lui-action-bar__actions .lui-month-navigator,
  .lui-action_buttons .lui-month-navigator {
    min-height: 40px;
  }

  .lui-bottom-bar .lui-month-navigator__control,
  .lui-action-bar__actions .lui-month-navigator__control,
  .lui-action_buttons .lui-month-navigator__control {
    min-width: 40px;
  }
}

.lui-main-layout__content {
  flex: 1;
  width: 100%;
  height: 100%;
  display: flex;
  overflow-y: auto;
  overflow-x: hidden;
  min-width: 0;
  min-height: 0;
}

/* Sidebar — collapsible rail + mobile drawer */
.lui-sidebar { display: contents; }

.lui-sidebar__rail,
.lui-sidebar__sidebar {
  display: flex;
  flex-direction: column;
  width: var(--sidebar-expanded-width);
  min-width: var(--sidebar-expanded-width);
  height: 100%;
  background: var(--color-primary);
  border-right: 1px solid var(--color-tertiary);
  box-sizing: border-box;
  transition: width 0.2s ease, min-width 0.2s ease;
}

.lui-sidebar__rail--collapsed {
  width: var(--sidebar-collapsed-width);
  min-width: var(--sidebar-collapsed-width);
}

.lui-sidebar__summary,
.lui-sidebar__sidebar__header {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  height: 48px;
  min-height: 48px;
  box-sizing: border-box;
  padding: 4px 8px;
  border-bottom: 1px solid var(--color-tertiary);
  flex-shrink: 0;
}

.lui-sidebar__brand {
  display: flex;
  align-items: center;
  height: 100%;
  min-width: 0;
  flex: 1;
}
.lui-sidebar__brand--static { pointer-events: none; }
.lui-sidebar__wordmark,
.lui-sidebar__brand-wordmark,
.lui-sidebar .lui-wordmark__img {
  height: 26px;
  width: auto;
  max-width: 100%;
  object-fit: contain;
}

.lui-sidebar__collapse-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  margin-left: auto;
  flex-shrink: 0;
  padding: 0;
  border: none;
  border-radius: 6px;
  background: transparent;
  color: var(--color-content-secondary);
  cursor: pointer;
  font-family: var(--font-sans);
}
.lui-sidebar__collapse-btn:hover {
  background: var(--color-secondary);
  color: var(--color-content);
}
.lui-sidebar__collapse-btn:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px var(--color-primary), 0 0 0 4px var(--color-focus-ring);
}
.lui-sidebar__collapse-icon {
  font-size: 16px;
  font-variation-settings: "FILL" 0, "wght" 400, "GRAD" 0, "opsz" 14;
}

.lui-sidebar__rail--collapsed .lui-sidebar__wordmark,
.lui-sidebar__rail--collapsed .lui-sidebar__brand--static,
.lui-sidebar__rail--collapsed .lui-sidebar__app-name,
.lui-sidebar__rail--collapsed .lui-sidebar__label,
.lui-sidebar__rail--collapsed .lui-sidebar__item-label,
.lui-sidebar__rail--collapsed .lui-sidebar__chev,
.lui-sidebar__rail--collapsed .lui-sidebar__bottom {
  display: none;
}
.lui-sidebar__rail--collapsed .lui-sidebar__summary {
  justify-content: center;
  padding-inline: 0;
}
.lui-sidebar__rail--collapsed .lui-sidebar__collapse-btn { margin-left: 0; }
.lui-sidebar__rail--collapsed .lui-sidebar__nav,
.lui-sidebar__rail--collapsed .lui-sidebar__footer {
  padding-inline: 0;
  align-items: center;
}
.lui-sidebar__rail--collapsed .lui-sidebar__item,
.lui-sidebar__rail--collapsed .lui-sidebar__row {
  justify-content: center;
  align-items: center;
  width: 36px;
  min-width: 36px;
  max-width: 36px;
  height: 36px;
  min-height: 36px;
  padding: 0;
  margin-inline: auto;
  gap: 0;
  overflow: hidden;
}
.lui-sidebar__rail--collapsed .lui-sidebar__row--account {
  height: 36px;
  min-height: 36px;
}

.lui-wordmark__img--light { display: block; }
.lui-wordmark__img--dark { display: none; }
html[data-theme="dark"] .lui-wordmark__img--light { display: none; }
html[data-theme="dark"] .lui-wordmark__img--dark { display: block; }

.lui-sidebar__app-name {
  margin: 0;
  padding: 8px 16px 4px;
  color: var(--color-content-secondary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex-shrink: 0;
}

.lui-sidebar__nav,
.lui-sidebar__sidebar__groups {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 8px;
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: color-mix(in srgb, var(--color-content) 24%, transparent) transparent;
}

.lui-sidebar__nav::-webkit-scrollbar,
.lui-sidebar__sidebar__groups::-webkit-scrollbar { width: 6px; }
.lui-sidebar__nav::-webkit-scrollbar-track,
.lui-sidebar__sidebar__groups::-webkit-scrollbar-track { background: transparent; }
.lui-sidebar__nav::-webkit-scrollbar-thumb,
.lui-sidebar__sidebar__groups::-webkit-scrollbar-thumb {
  background-color: color-mix(in srgb, var(--color-content) 24%, transparent);
  border: 1px solid transparent;
  border-radius: 9999px;
  background-clip: content-box;
}

.lui-sidebar__item {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  height: 28px;
  min-height: 28px;
  flex-shrink: 0;
  padding: 0 8px;
  border-radius: 6px;
  border: none;
  background: transparent;
  color: var(--color-content);
  text-decoration: none;
  cursor: pointer;
  box-sizing: border-box;
}

a.lui-sidebar__item:link,
a.lui-sidebar__item:visited {
  color: var(--color-content);
  text-decoration: none;
}

.lui-sidebar__item:hover { background: var(--color-secondary); }
.lui-sidebar__item:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px var(--color-primary), 0 0 0 4px var(--color-focus-ring);
}

.lui-sidebar__icon,
.lui-sidebar__item-icon {
  color: currentColor;
  flex-shrink: 0;
  font-size: 16px !important;
  font-variation-settings: "FILL" 0, "wght" 400, "GRAD" 0, "opsz" 16 !important;
}

.lui-sidebar__label,
.lui-sidebar__item-label {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: inherit;
}

.lui-sidebar__item--active {
  background: var(--color-chrome-accent-muted);
  color: var(--color-chrome-accent);
}
a.lui-sidebar__item--active:link,
a.lui-sidebar__item--active:visited {
  color: var(--color-chrome-accent);
}
.lui-sidebar__item--active .lui-sidebar__icon { color: currentColor; }
.lui-sidebar__item--active:hover { background: color-mix(in srgb, var(--color-chrome-accent) 12%, transparent); }

.lui-sidebar__bottom {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: auto;
  padding: 8px;
  flex-shrink: 0;
}

.lui-sidebar__footer {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 8px;
  border-top: 1px solid var(--color-tertiary);
  flex-shrink: 0;
}

.lui-sidebar__rail:not(:has(.lui-sidebar__bottom)) .lui-sidebar__footer {
  margin-top: auto;
}

.lui-sidebar__row {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  border: none;
  background: transparent;
  color: var(--color-content);
  border-radius: 6px;
  padding: 0 8px;
  text-align: left;
}

.lui-sidebar__row--account {
  height: 40px;
  min-height: 40px;
  padding-block: 0;
}

.lui-sidebar__row--account:hover { background: var(--color-secondary); }
.lui-sidebar__row--account:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px var(--color-primary), 0 0 0 4px var(--color-focus-ring);
}

.lui-sidebar__mobile-toggle {
  display: none;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  flex-shrink: 0;
  padding: 0;
  border-radius: 6px;
  border: 1px solid var(--color-tertiary);
  background: var(--color-background);
  color: var(--color-content);
  cursor: pointer;
}
.lui-sidebar__mobile-toggle:hover { background: var(--color-secondary); }
.lui-sidebar__mobile-toggle:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px var(--color-background), 0 0 0 4px var(--color-focus-ring);
}
.lui-sidebar__mobile-toggle-icon { font-size: 20px; }

.lui-sidebar__mobile {
  position: fixed;
  inset: 0;
  z-index: 80;
}
.lui-sidebar__mobile[hidden] {
  display: none !important;
}
.lui-sidebar__backdrop {
  position: absolute;
  inset: 0;
  background: color-mix(in srgb, var(--color-foreground) 40%, transparent);
}
.lui-sidebar__panel {
  position: absolute;
  inset: 0 auto 0 0;
  display: flex;
  flex-direction: column;
  width: 17rem;
  max-width: 85vw;
  height: 100%;
  background: var(--color-primary);
  box-shadow: var(--lui-shadow-floating);
  transform: translateX(-100%);
  transition: transform 0.25s cubic-bezier(0.32, 0.72, 0, 1);
  box-sizing: border-box;
}
.lui-sidebar__mobile--open .lui-sidebar__panel { transform: translateX(0); }
.lui-sidebar__panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  height: 48px;
  min-height: 48px;
  padding: 4px 8px;
  box-sizing: border-box;
  border-bottom: 1px solid var(--color-tertiary);
  flex-shrink: 0;
}
.lui-sidebar__close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  flex-shrink: 0;
  padding: 0;
  border: none;
  border-radius: 6px;
  background: transparent;
  color: var(--color-content-secondary);
  cursor: pointer;
}
.lui-sidebar__close:hover {
  background: var(--color-secondary);
  color: var(--color-content);
}
.lui-sidebar__close:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px var(--color-primary), 0 0 0 4px var(--color-focus-ring);
}
.lui-sidebar__close-icon { font-size: 20px; }

.lui-sidebar__panel .lui-sidebar__nav { flex: 1; min-height: 0; }
.lui-sidebar__panel .lui-sidebar__footer { margin-top: 0; }

@media (max-width: 767px) {
  .lui-sidebar__rail { display: none; }
  .lui-sidebar__mobile-toggle { display: inline-flex; }
}

@media (prefers-reduced-motion: reduce) {
  .lui-sidebar__rail,
  .lui-sidebar__panel { transition: none; }
}

.lui-sidebar__chev {
  margin-left: auto;
  color: var(--color-content-secondary);
  font-size: 14px;
  font-variation-settings: "FILL" 0, "wght" 400, "GRAD" 0, "opsz" 14;
}

/* Dropdown (account menu — CSS positioned, click to toggle) */
.lui-dropdown { position: relative; }
.lui-dropdown__menu {
  position: absolute;
  z-index: 40;
  display: none;
  min-width: 100%;
  width: 100%;
  padding: 4px;
  border: 1px solid var(--color-tertiary);
  border-radius: 6px;
  background: var(--color-background);
  color: var(--color-content);
  box-sizing: border-box;
}

.lui-dropdown.is-open > .lui-dropdown__menu,
.lui-dropdown__menu:not([hidden]) { display: flex; flex-direction: column; }
.lui-dropdown__menu[hidden] { display: none; }

.lui-dropdown--top-start .lui-dropdown__menu {
  bottom: calc(100% + 4px);
  top: auto;
  left: 0;
}
.lui-dropdown--bottom-start .lui-dropdown__menu {
  top: calc(100% + 4px);
  left: 0;
}
.lui-dropdown--bottom-end .lui-dropdown__menu {
  top: calc(100% + 4px);
  right: 0;
  left: auto;
}

.lui-dropdown__item {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  min-height: 32px;
  padding: 6px 8px;
  border: none;
  border-radius: 6px;
  background: transparent;
  color: var(--color-content);
  text-decoration: none;
  text-align: left;
  box-sizing: border-box;
}

.lui-dropdown__item:hover { background: var(--color-secondary); }
.lui-dropdown__item--trailing-icon { justify-content: space-between; }
.lui-dropdown__item--danger { color: var(--color-danger-fg); }
.lui-dropdown__item--active { background: var(--color-chrome-accent-muted); color: var(--color-chrome-accent); }
.lui-dropdown__item-text { flex: 1; min-width: 0; }
.lui-dropdown__item-icon { font-size: 16px; color: var(--color-content-secondary); flex-shrink: 0; }

.lui-dropdown__theme-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 6px 8px;
}

.lui-theme-segment {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  width: fit-content;
  padding: 2px;
  border-radius: 9999px;
  background: var(--color-secondary);
  border: 1px solid var(--color-tertiary);
  flex-shrink: 0;
}

.lui-theme-segment--compact { padding: 2px 1px; height: 28px; min-height: 28px; box-sizing: border-box; }
.lui-theme-segment--compact .lui-theme-segment__option { width: 24px; height: 24px; }

.lui-theme-segment__option {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  padding: 0;
  border: none;
  border-radius: 9999px;
  background: transparent;
  color: var(--color-content-secondary);
}

.lui-theme-segment__option:hover {
  color: var(--color-content);
  background: color-mix(in srgb, var(--color-content) 8%, transparent);
}

.lui-theme-segment__option--active {
  background: var(--color-background);
  color: var(--color-content);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.14);
}

.lui-theme-segment__option:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px var(--color-background), 0 0 0 4px var(--color-focus-ring);
}

.lui-dropdown__trigger-icon {
  flex-shrink: 0;
  font-size: 14px;
  color: var(--color-content-secondary);
}

/* Color picker — trigger + portaled sat/brightness panel (hex only) */
.lui-color-picker {
  display: flex;
  flex-direction: column;
  gap: 6px;
  position: relative;
}

.lui-color-picker__label { color: var(--color-content); }
.lui-color-picker__required { color: var(--color-danger); }

.lui-color-picker__trigger {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  width: 15.5rem;
  max-width: 100%;
  height: var(--lui-control-height-md);
  padding: 0 8px 0 6px;
  box-sizing: border-box;
  border-radius: 6px;
  border: 1px solid var(--color-tertiary);
  background: var(--color-background);
  color: var(--color-content);
  cursor: pointer;
  font: inherit;
  transition: background-color 120ms ease, border-color 120ms ease;
}
.lui-color-picker__trigger:not(:disabled):hover,
.lui-color-picker__trigger[data-state="open"] { background: var(--color-secondary); }
.lui-color-picker__trigger:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px var(--color-background), 0 0 0 4px var(--color-focus-ring);
}
.lui-color-picker__trigger:disabled { opacity: 0.6; cursor: not-allowed; }

.lui-color-picker__swatch {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  border-radius: 4px;
  border: 1px solid var(--color-tertiary);
  background: var(--lui-swatch-fill, var(--color-secondary));
}

.lui-color-picker__value {
  flex: 1;
  min-width: 5.5ch;
  text-align: left;
  text-transform: uppercase;
  color: var(--color-content);
}

.lui-color-picker__trigger .lui-dropdown__trigger-icon {
  flex-shrink: 0;
  font-size: 14px;
  color: var(--color-content-secondary);
}

.lui-color-picker__panel.lui-dropdown__menu {
  display: flex;
  flex-direction: column;
  gap: 12px;
  width: 15.5rem;
  min-width: 15.5rem;
  max-width: 15.5rem;
  padding: 12px;
  z-index: 2147483646;
}
.lui-color-picker__panel.lui-dropdown__menu[hidden] { display: none; }

.lui-color-picker__area {
  position: relative;
  width: 100%;
  height: 9.5rem;
  border-radius: 6px;
  border: 1px solid var(--color-tertiary);
  background:
    linear-gradient(to top, #000, transparent),
    linear-gradient(to right, #fff, transparent),
    hsl(var(--lui-hue, 0) 100% 50%);
  cursor: crosshair;
  touch-action: none;
}
.lui-color-picker__area:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px var(--color-background), 0 0 0 4px var(--color-focus-ring);
}
.lui-color-picker__area-thumb {
  position: absolute;
  top: 0;
  left: 0;
  width: 14px;
  height: 14px;
  margin: -7px 0 0 -7px;
  border-radius: 50%;
  border: 2px solid #fff;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.35);
  background: var(--lui-swatch-fill, transparent);
  pointer-events: none;
}

.lui-color-picker__hue {
  position: relative;
  height: 12px;
  border-radius: 999px;
  background: linear-gradient(to right, #f00, #ff0, #0f0, #0ff, #00f, #f0f, #f00);
  cursor: pointer;
  touch-action: none;
}
.lui-color-picker__hue:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px var(--color-background), 0 0 0 4px var(--color-focus-ring);
}
.lui-color-picker__hue-thumb {
  position: absolute;
  top: 50%;
  left: 0;
  width: 16px;
  height: 16px;
  margin: -8px 0 0 -8px;
  border-radius: 50%;
  border: 2px solid #fff;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.35);
  background: hsl(var(--lui-hue, 0) 100% 50%);
  pointer-events: none;
}

.lui-color-picker__fields { display: flex; }
.lui-color-picker__hex {
  flex: 1;
  align-items: center;
  gap: 2px;
  padding-left: 8px;
}
.lui-color-picker__hex-prefix { flex-shrink: 0; }

.lui-color-picker__presets {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.lui-color-picker__preset {
  position: relative;
  width: 22px;
  height: 22px;
  padding: 0;
  border-radius: 5px;
  border: 1px solid var(--color-tertiary);
  background: var(--lui-preset-fill, var(--color-secondary));
  cursor: pointer;
  transition: transform 100ms ease;
}
.lui-color-picker__preset:hover { transform: scale(1.08); }
.lui-color-picker__preset:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px var(--color-background), 0 0 0 4px var(--color-focus-ring);
}
.lui-color-picker__preset[aria-pressed="true"] {
  box-shadow: 0 0 0 2px var(--color-background), 0 0 0 3px var(--color-focus-ring);
}

.lui-color-picker--disabled .lui-color-picker__trigger { opacity: 0.6; cursor: not-allowed; }

/* Action bar */
.lui-action-bar,
.lui-action_bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  height: 48px;
  padding: 0 16px;
  width: 100%;
  border-bottom: 1px solid var(--color-tertiary);
  background: var(--color-background);
  box-sizing: border-box;
  flex-shrink: 0;
}

.lui-action-bar__start {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  flex: 1 1 auto;
}

.lui-action-bar__breadcrumbs,
.lui-action_bar__breadcrumbs {
  display: flex;
  align-items: center;
  min-width: 0;
  flex: 1 1 auto;
}

.lui-action-bar__leading {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

.lui-action-bar__actions,
.lui-action_buttons {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: flex-end;
  flex-shrink: 0;
}

.lui-action-bar__actions .lui-form-inline .lui-input {
  width: auto;
  min-width: 10rem;
}

.lui-breadcrumb {
  display: flex;
  overflow-x: auto;
  white-space: nowrap;
  min-width: 0;
}
.lui-breadcrumb__list {
  display: flex;
  align-items: center;
  min-width: 0;
  max-width: 100%;
  margin: 0;
  padding: 0;
  list-style: none;
}
.lui-breadcrumb__item {
  display: flex;
  align-items: center;
  min-width: 0;
}
.lui-breadcrumb__item:last-child {
  min-width: 0;
  max-width: 100%;
}

.lui-breadcrumb__separator,
.lui-breadcrumb__icon {
  font-size: 16px;
  flex-shrink: 0;
}
.lui-breadcrumb__separator { color: var(--color-content-secondary); }
html.material-symbols-ready .lui-breadcrumb__separator.material-symbols-rounded {
  color: var(--color-content-secondary);
}

.lui-breadcrumb__link {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 6px;
  border-radius: 6px;
  color: var(--color-content-secondary);
  text-decoration: none;
  transition: color 120ms ease, background 120ms ease;
}
a.lui-breadcrumb__link:link,
a.lui-breadcrumb__link:visited {
  color: var(--color-content-secondary);
  text-decoration: none;
}
.lui-breadcrumb__link:hover {
  color: var(--color-content);
  background: var(--color-secondary);
}
.lui-breadcrumb__link:focus-visible,
.lui-breadcrumb__ellipsis:focus-visible,
.lui-breadcrumb__current-trigger:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px var(--color-background), 0 0 0 4px var(--color-focus-ring);
}

.lui-breadcrumb__ellipsis {
  display: inline-flex;
  align-items: center;
  padding: 4px 6px;
  border: none;
  border-radius: 6px;
  background: transparent;
  color: var(--color-content-secondary);
  cursor: pointer;
  transition: color 120ms ease, background 120ms ease;
}
.lui-breadcrumb__ellipsis:hover {
  color: var(--color-content);
  background: var(--color-secondary);
}

.lui-breadcrumb__current {
  display: inline-flex;
  align-items: center;
  padding: 4px 6px;
  border-radius: 6px;
  color: var(--color-content);
}
.lui-breadcrumb__plain {
  display: inline-flex;
  align-items: center;
  padding: 4px 6px;
  border-radius: 6px;
}
.lui-breadcrumb__current--truncate {
  max-width: 200px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}
.lui-breadcrumb__current--truncate:has(.lui-breadcrumb__label-group) {
  max-width: 100%;
}
.lui-breadcrumb__label {
  min-width: 0;
}
.lui-breadcrumb__current--truncate .lui-breadcrumb__label {
  display: block;
  max-width: 200px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.lui-breadcrumb__label-group {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  min-width: 0;
  max-width: 100%;
}
.lui-breadcrumb__label-group .lui-badge {
  flex-shrink: 0;
}

.lui-breadcrumb__switcher { min-width: 0; position: relative; }
.lui-breadcrumb__current-trigger {
  display: inline-flex;
  align-items: center;
  gap: 0;
  padding: 4px 6px;
  border: none;
  border-radius: 6px;
  background: transparent;
  color: var(--color-content);
  font: inherit;
  cursor: pointer;
  transition: color 120ms ease, background 120ms ease;
}
.lui-breadcrumb__current-trigger:hover,
.lui-breadcrumb__current-trigger[aria-expanded="true"] {
  background: var(--color-secondary);
}
.lui-breadcrumb__switcher-icon {
  font-size: 16px;
  color: var(--color-content-secondary);
  flex-shrink: 0;
}
.lui-breadcrumb__switcher-menu {
  min-width: 220px;
  width: max-content;
  max-width: min(360px, 90vw);
  max-height: min(320px, 50vh);
  padding: 0;
  overflow: hidden;
}
.lui-breadcrumb__switcher-body {
  display: flex;
  flex-direction: column;
  min-height: 0;
  max-height: inherit;
}
.lui-breadcrumb__switcher-list {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
  margin: 0;
  padding: 4px;
  overflow-y: auto;
}
.lui-breadcrumb__switcher-check {
  font-size: 16px;
  flex-shrink: 0;
  margin-left: auto;
  color: var(--color-content);
}
.lui-breadcrumb__switcher-footer {
  flex-shrink: 0;
  padding: 0 4px 4px;
  border-top: 1px solid var(--color-tertiary);
  background: var(--color-background);
}

.lui-sidebar-plan {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 8px;
  border: 1px solid var(--color-tertiary);
  border-radius: 6px;
  background: var(--color-background);
  text-align: left;
  text-decoration: none;
  color: inherit;
  box-sizing: border-box;
}

a.lui-sidebar-plan:link,
a.lui-sidebar-plan:visited {
  color: inherit;
  text-decoration: none;
}

a.lui-sidebar-plan:hover {
  background: var(--color-background);
  border-color: var(--color-tertiary);
  box-shadow: var(--lui-shadow-floating);
}
a.lui-sidebar-plan:focus-visible {
  outline: none;
  box-shadow: var(--lui-shadow-floating), 0 0 0 2px var(--color-background), 0 0 0 4px var(--color-focus-ring);
}

.lui-sidebar-plan--active {
  background: var(--color-background);
  border-color: var(--color-tertiary);
  box-shadow: var(--lui-shadow-floating);
}

a.lui-sidebar-plan--active:hover {
  border-color: var(--color-tertiary);
  background: var(--color-background);
  box-shadow: var(--lui-shadow-floating);
}

a.lui-sidebar-plan--active:focus-visible {
  box-shadow: var(--lui-shadow-floating), 0 0 0 2px var(--color-background), 0 0 0 4px var(--color-focus-ring);
}

.lui-sidebar-plan__header {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
}

.lui-sidebar-plan__title {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.lui-sidebar-plan__percent {
  flex-shrink: 0;
  color: var(--color-content);
}

.lui-sidebar-plan__bar {
  display: block;
  width: 100%;
  height: 4px;
  background: var(--color-tertiary);
  border-radius: 999px;
  overflow: hidden;
}

.lui-sidebar-plan__fill {
  display: block;
  height: 100%;
  background: var(--color-content);
  border-radius: inherit;
}

.lui-sidebar-plan__meta {
  margin: 0;
}

.lui-sidebar-plan--suspended .lui-sidebar-plan__title,
.lui-sidebar-plan--suspended .lui-sidebar-plan__percent {
  color: var(--color-danger-fg);
}

.lui-sidebar-plan--suspended .lui-sidebar-plan__fill,
.lui-sidebar-plan__fill--over-limit {
  background: var(--color-danger);
}

.lui-sidebar-plan__meta--alert {
  color: var(--color-danger-fg);
}

a.lui-sidebar-plan--suspended:hover {
  border-color: var(--color-tertiary);
  background: color-mix(in srgb, var(--color-danger) 8%, var(--color-background));
  box-shadow: var(--lui-shadow-floating);
}

/* Page recipes */
.lui-index-layout,
.lui-show-layout {
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  height: 100%;
  overflow-y: auto;
  padding: 16px;
  gap: 16px;
  box-sizing: border-box;
}

.lui-index-layout > header + .lui-tabs,
.lui-show-layout > header + .lui-tabs {
  margin-top: -8px;
}

.lui-page-tabs {
  display: flex;
  flex-direction: column;
  gap: 12px;
  width: 100%;
}

/* Headerless show: tab rail sits outside the padded content container */
.lui-show-layout--tabs-first,
.lui-index-layout--tabs-first {
  padding: 0;
  gap: 0;
  overflow: hidden;
}

.lui-page-tabs--below-action-bar {
  flex-shrink: 0;
  background: var(--color-background);
}

.lui-page-tabs--below-action-bar .lui-tabs--underline .lui-tabs__list {
  padding-inline: 16px;
  box-sizing: border-box;
}

.lui-show-layout--tabs-first > .lui-show-layout__main,
.lui-index-layout--tabs-first > .lui-show-layout__main {
  flex: 1 1 auto;
  min-height: 0;
  width: 100%;
  overflow-y: auto;
  padding: 16px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* Tabs — underline is the route-nav variant */
.lui-tabs { width: 100%; }

.lui-tabs__list {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  max-width: 100%;
}

.lui-tabs__tab {
  appearance: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 8px 12px;
  border: none;
  background: transparent;
  cursor: pointer;
  color: var(--color-content-secondary);
  text-decoration: none;
  white-space: nowrap;
  flex: 0 0 auto;
  transition: color 0.15s ease, background 0.15s ease, box-shadow 0.15s ease;
}

a.lui-tabs__tab:link,
a.lui-tabs__tab:visited {
  color: var(--color-content-secondary);
  text-decoration: none;
}

.lui-tabs__tab:hover {
  color: var(--color-content);
  text-decoration: none;
}

.lui-tabs__tab[aria-selected="true"],
.lui-tabs__tab--active {
  color: var(--color-content);
}

a.lui-tabs__tab[aria-selected="true"]:link,
a.lui-tabs__tab[aria-selected="true"]:visited,
a.lui-tabs__tab--active:link,
a.lui-tabs__tab--active:visited {
  color: var(--color-content);
}

.lui-tabs__tab:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px var(--color-background), 0 0 0 4px var(--color-focus-ring);
}

.lui-tabs__icon { font-size: 16px; }

.lui-tabs--underline .lui-tabs__list {
  position: relative;
  gap: 0;
  align-items: flex-end;
  border-bottom: none;
  overflow-x: auto;
  overflow-y: visible;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
}

.lui-tabs--underline .lui-tabs__list::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1px;
  background: var(--color-tertiary);
  pointer-events: none;
  z-index: 0;
}

.lui-tabs--underline .lui-tabs__list::-webkit-scrollbar { display: none; }

.lui-tabs--underline .lui-tabs__tab {
  position: relative;
  z-index: 1;
  border-radius: 0;
  border-bottom: none;
  margin-bottom: 0;
  padding: 8px 8px;
}

.lui-tabs--underline .lui-tabs__tab[aria-selected="true"]::after,
.lui-tabs--underline .lui-tabs__tab--active::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 2px;
  background: var(--color-chrome-accent);
  pointer-events: none;
  z-index: 1;
}

.lui-page-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  flex-wrap: wrap;
  gap: 16px;
}

.lui-page-header--start { align-items: flex-start; }
.lui-page-header__meta { flex: 1 1 auto; min-width: 0; max-width: 100%; }
.lui-page-header__actions,
.lui-toolbar { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.lui-toolbar--sm { gap: 8px; }

.lui-section-title { margin: 0 0 12px; }
.lui-section-title--flush { margin: 0; }
.lui-section-block { width: 100%; max-width: 100%; min-width: 0; display: flex; flex-direction: column; gap: 12px; }
.lui-card-full { width: 100%; }
.lui-card-section { width: 100%; padding: 16px; gap: 16px; }
.lui-card-panel { width: 100%; max-width: 720px; }
.lui-card-panel--narrow { max-width: 560px; }
.lui-stack { display: flex; flex-direction: column; gap: 12px; }
.lui-stack--sm { gap: 8px; }
.lui-metrics-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 16px;
  width: 100%;
}

/* Modal — floating: shadow only */
.lui-modal {
  padding: 0;
  border: none;
  border-radius: 12px;
  width: min(92vw, 480px);
  max-height: 90vh;
  background: var(--color-background);
  color: var(--color-content);
  box-shadow: var(--lui-shadow-floating);
  overflow: hidden;
}

/* Native <dialog>:modal UA styles set inset-block 0 + margin auto, which
   mis-centers in Chrome. Reset inset, then pin to the viewport midpoint. */
.lui-modal:modal,
.lui-confirm-dialog:modal {
  position: fixed;
  inset: auto;
  top: 50%;
  left: 50%;
  translate: -50% -50%;
  margin: 0;
  height: fit-content;
}

.lui-modal::backdrop { background: rgb(24 24 24 / 0.55); }
.lui-modal__wrapper { display: flex; flex-direction: column; max-height: inherit; }
.lui-modal__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  padding: 16px 20px;
  border-bottom: 1px solid var(--color-tertiary);
}
.lui-modal__title { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.lui-modal__close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  border: none;
  background: transparent;
  border-radius: 6px;
  color: var(--color-content-secondary);
}
.lui-modal__close:hover { background: var(--color-secondary); color: var(--color-content); }
.lui-modal__content { padding: 20px; overflow-y: auto; }
.lui-modal__footer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  padding: 12px 20px 16px;
}
.lui-modal__footer > * {
  flex: 1 1 0;
  min-width: 0;
}
.lui-modal__footer .lui-button {
  width: 100%;
}
.lui-modal__footer:empty { display: none; }

/* Tooltip — floating bubble appended to body so overflow:hidden ancestors cannot clip it */
.lui-tooltip__bubble {
  position: fixed;
  z-index: 2147483647;
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  box-sizing: border-box;
  width: max-content;
  min-width: min-content;
  max-width: min(var(--lui-tooltip-max-width, 280px), calc(100vw - 16px));
  padding: 6px 8px;
  border-radius: 6px;
  background: var(--color-content);
  color: var(--color-background);
  box-shadow: var(--lui-shadow-floating);
  pointer-events: none;
  overflow: visible;
  white-space: normal;
}

.lui-tooltip__bubble--portaled {
  opacity: 0;
  visibility: hidden;
  transform: none;
  transition: opacity 120ms ease, visibility 120ms ease;
}

.lui-tooltip__bubble--portaled[data-state="open"] {
  opacity: 1;
  visibility: visible;
}

.lui-tooltip__text {
  display: block;
  flex: 1 1 auto;
  min-width: 0;
  max-width: 100%;
  line-height: 16px;
  color: var(--color-background);
  overflow: visible;
  white-space: normal;
  overflow-wrap: break-word;
}

@media (prefers-reduced-motion: reduce) {
  .lui-tooltip__bubble--portaled { transition: opacity 80ms ease, visibility 80ms ease; }
}

.lui-float-bar {
  position: fixed;
  bottom: var(--lui-float-bar-inset-bottom, 24px);
  left: 50%;
  z-index: var(--lui-float-bar-z-index, 50);
  transform: translateX(-50%);
  width: max-content;
  max-width: calc(100vw - 32px);
  border: 1px solid transparent;
  border-radius: 6px;
  background: var(--color-background);
  color: var(--color-content);
  box-shadow: var(--lui-shadow-floating);
  box-sizing: border-box;
  padding: 8px;
}

.lui-float-bar:not([hidden]) {
  animation: lui-float-bar-enter 220ms ease;
}

@keyframes lui-float-bar-enter {
  from {
    opacity: 0;
    transform: translateX(-50%) translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
  }
}

.lui-float-bar[hidden] {
  display: none;
}

.lui-float-bar__content {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding-left: 8px;
  padding-right: 8px;
}

.lui-float-bar--inline-edit .lui-float-bar__content {
  padding-left: 0;
  padding-right: 0;
}

.lui-float-bar--inline-edit .lui-float-bar__meta {
  font-weight: 400;
}

.lui-float-bar__meta {
  flex: none;
  white-space: nowrap;
  color: inherit;
}

.lui-float-bar__actions {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex: none;
}

.lui-confirm-dialog {
  width: min(28rem, calc(100vw - 2rem));
  max-width: 28rem;
  max-height: calc(100dvh - 2rem);
  padding: 0;
  border: none;
  background: transparent;
  overflow: visible;
}

.lui-confirm-dialog::backdrop {
  background: color-mix(in srgb, black 45%, transparent);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}

.lui-confirm-dialog__panel {
  border-radius: 6px;
  border: 1px solid var(--color-tertiary);
  background: var(--color-background);
  box-shadow: var(--lui-shadow-floating);
  overflow: hidden;
}

.lui-confirm-dialog__header {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 16px 16px 12px;
}

.lui-confirm-dialog__header:has(+ .lui-confirm-dialog__body:not([hidden])) {
  padding-bottom: 12px;
}

.lui-confirm-dialog__icon {
  color: var(--color-danger);
  font-size: 20px;
  width: 20px;
  height: 20px;
  font-variation-settings: "FILL" 0, "wght" 400, "GRAD" 0, "opsz" 20;
}

.lui-confirm-dialog__title {
  margin: 0;
  min-width: 0;
}

.lui-confirm-dialog__body {
  padding: 12px 16px 16px;
}

.lui-confirm-dialog__body[hidden] {
  display: none;
}

.lui-confirm-dialog__footer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  padding: 12px 16px 16px;
}

.lui-confirm-dialog__footer > * {
  flex: 1 1 0;
  min-width: 0;
}

.lui-confirm-dialog__footer .lui-button {
  width: 100%;
}

/* Scroll edge fades — top/bottom (vertical) and left/right (horizontal) */
.lui-scroll-edge {
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: 0;
  --lui-scroll-edge-surface: var(--color-primary);
}

.lui-scroll-edge--surface-primary {
  --lui-scroll-edge-surface: var(--color-primary);
}

.lui-scroll-edge--surface-secondary {
  --lui-scroll-edge-surface: var(--color-secondary);
}

.lui-scroll-edge--surface-background {
  --lui-scroll-edge-surface: var(--color-background);
}

.lui-scroll-edge__viewport {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
}

.lui-scroll-edge__fade {
  position: absolute;
  pointer-events: none;
  z-index: 5;
  opacity: 0;
  transition: opacity var(--default-transition-duration) var(--default-transition-timing-function);
}

.lui-scroll-edge__fade--top,
.lui-scroll-edge__fade--bottom {
  left: 0;
  right: 0;
  height: 20px;
}

.lui-scroll-edge__fade--top {
  top: 0;
  background: linear-gradient(
    to bottom,
    var(--lui-scroll-edge-surface) 0%,
    color-mix(in srgb, var(--lui-scroll-edge-surface) 55%, transparent) 45%,
    transparent 100%
  );
}

.lui-scroll-edge__fade--bottom {
  bottom: 0;
  background: linear-gradient(
    to top,
    var(--lui-scroll-edge-surface) 0%,
    color-mix(in srgb, var(--lui-scroll-edge-surface) 55%, transparent) 45%,
    transparent 100%
  );
}

.lui-scroll-edge__fade--left,
.lui-scroll-edge__fade--right {
  top: 0;
  bottom: 0;
  width: 20px;
}

.lui-scroll-edge__fade--left {
  left: 0;
  background: linear-gradient(
    to right,
    var(--lui-scroll-edge-surface) 0%,
    color-mix(in srgb, var(--lui-scroll-edge-surface) 55%, transparent) 45%,
    transparent 100%
  );
}

.lui-scroll-edge__fade--right {
  right: 0;
  background: linear-gradient(
    to left,
    var(--lui-scroll-edge-surface) 0%,
    color-mix(in srgb, var(--lui-scroll-edge-surface) 55%, transparent) 45%,
    transparent 100%
  );
}

.lui-scroll-edge--fade-top .lui-scroll-edge__fade--top:not([hidden]),
.lui-scroll-edge--fade-bottom .lui-scroll-edge__fade--bottom:not([hidden]),
.lui-scroll-edge--fade-left .lui-scroll-edge__fade--left:not([hidden]),
.lui-scroll-edge--fade-right .lui-scroll-edge__fade--right:not([hidden]) {
  opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
  .lui-scroll-edge__fade {
    transition: none;
  }
}

/* Pagination */
.lui-pagination {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  width: 100%;
}

.lui-pagination__info,
.lui-pagination__count {
  margin-right: auto;
  color: var(--color-content-secondary);
}

.lui-pagination__count-current { color: var(--color-content); }

.lui-pagination__list {
  display: flex;
  align-items: center;
  gap: 6px;
  list-style: none;
  padding: 0;
  margin: 0;
}

.lui-pagination__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 32px;
  height: 32px;
  padding: 0 8px;
  border-radius: 6px;
  border: 1px solid var(--color-tertiary);
  background: var(--color-background);
  color: var(--color-content);
  cursor: pointer;
  text-decoration: none;
  transition: background 120ms ease, border-color 120ms ease;
}

a.lui-pagination__btn:link,
a.lui-pagination__btn:visited {
  color: var(--color-content);
  text-decoration: none;
}

.lui-pagination__btn .material-symbols-rounded,
.lui-pagination__btn .material-symbols-round {
  font-size: 18px;
}

.lui-pagination__btn:hover { background: var(--color-secondary); }
.lui-pagination__btn:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px var(--color-background), 0 0 0 4px var(--color-focus-ring);
}

.lui-pagination__btn--nav { padding-inline: 0; }

.lui-pagination__btn[aria-disabled="true"] {
  color: var(--color-foreground);
  cursor: not-allowed;
  pointer-events: none;
}

.lui-pagination__current {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 32px;
  height: 32px;
  padding: 0 8px;
  border-radius: 6px;
  background: var(--color-content);
  color: var(--color-background);
}

.lui-pagination__gap {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 4px;
  color: var(--color-foreground);
}