:root {
  color-scheme: light;
  --polo-font-ui: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --polo-page-bg: var(--polo-bg, #f7f6f2);
  --polo-page-text: var(--polo-text, #171717);
  --polo-panel-bg: var(--polo-surface, #ffffff);
  --polo-panel-strong-bg: var(--polo-surface-2, #f0eee7);
  --polo-border: var(--polo-line, #d8d5cb);
  --polo-control-bg: var(--polo-primary, #175c62);
  --polo-control-text: #ffffff;
  --polo-control-muted-bg: var(--polo-surface, #ffffff);
  --polo-control-muted-text: var(--polo-primary, #175c62);
  --polo-focus-ring: color-mix(in srgb, var(--polo-primary, #175c62) 36%, transparent);
  --polo-shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.08);
  --polo-shadow-md: 0 12px 34px rgba(15, 23, 42, 0.12);
  --polo-control-height: 36px;
  --polo-control-height-sm: 30px;
  --polo-control-padding-x: 14px;
  --polo-control-radius: var(--polo-radius-md, 8px);
  --polo-card-radius: var(--polo-radius-md, 8px);
  --polo-page-padding: var(--polo-space-lg, 20px);
  --polo-panel-padding: var(--polo-space-md, 12px);
  --polo-gap: var(--polo-space-md, 12px);
  --polo-gap-lg: var(--polo-space-lg, 20px);
  --polo-sidebar-width: 248px;
  --polo-topbar-height: 56px;
  --polo-table-row-height: 42px;
  --polo-badge-bg: color-mix(in srgb, var(--polo-primary, #175c62) 12%, var(--polo-surface, #ffffff));
  --polo-badge-text: var(--polo-primary, #175c62);
  --polo-shell-bg: linear-gradient(180deg, color-mix(in srgb, var(--polo-bg, #f7f6f2) 96%, var(--polo-primary, #175c62)), var(--polo-bg, #f7f6f2));
  --polo-shell-chrome-bg: color-mix(in srgb, var(--polo-surface, #ffffff) 86%, transparent);
  --polo-shell-chrome-text: var(--polo-text, #171717);
  --polo-shell-chrome-muted: var(--polo-muted, #5f6670);
  --polo-shell-chrome-border: color-mix(in srgb, var(--polo-line, #d8d5cb) 82%, transparent);
  --polo-shell-nav-bg: color-mix(in srgb, var(--polo-surface, #ffffff) 72%, transparent);
  --polo-shell-nav-active-bg: color-mix(in srgb, var(--polo-primary, #175c62) 16%, var(--polo-surface, #ffffff));
  --polo-shell-nav-active-text: var(--polo-primary, #175c62);
}

:root[data-polo-density="compact"] {
  --polo-control-height: 32px;
  --polo-control-height-sm: 28px;
  --polo-control-padding-x: 12px;
  --polo-page-padding: var(--polo-space-md, 12px);
  --polo-panel-padding: var(--polo-space-sm, 8px);
  --polo-gap: var(--polo-space-sm, 8px);
  --polo-gap-lg: var(--polo-space-md, 12px);
  --polo-table-row-height: 36px;
}

:root[data-polo-density="dense"] {
  --polo-control-height: 28px;
  --polo-control-height-sm: 24px;
  --polo-control-padding-x: 10px;
  --polo-page-padding: var(--polo-space-sm, 8px);
  --polo-panel-padding: var(--polo-space-sm, 8px);
  --polo-gap: var(--polo-space-xs, 4px);
  --polo-gap-lg: var(--polo-space-sm, 8px);
  --polo-table-row-height: 32px;
}

:root[data-polo-theme-mode="dark"] {
  color-scheme: dark;
  --polo-bg: #111719;
  --polo-surface: #192124;
  --polo-surface-2: #202b2f;
  --polo-text: #f2f5f4;
  --polo-muted: #aeb9b7;
  --polo-line: #334145;
  --polo-primary: #76c7c9;
  --polo-accent: #f0a56a;
  --polo-success: #70d095;
  --polo-warning: #f3c969;
  --polo-danger: #ff8b7f;
  --polo-shell-bg: linear-gradient(180deg, #0f1719, #111719);
  --polo-shell-chrome-bg: color-mix(in srgb, #192124 82%, transparent);
  --polo-shell-chrome-text: #f2f5f4;
  --polo-shell-chrome-muted: #aeb9b7;
  --polo-shell-chrome-border: rgba(174, 185, 183, .24);
  --polo-shell-nav-bg: rgba(255, 255, 255, .05);
  --polo-shell-nav-active-bg: rgba(118, 199, 201, .18);
  --polo-shell-nav-active-text: #dff8f8;
}

:root[data-polo-theme-mode="high_contrast"] {
  color-scheme: light;
  --polo-bg: #ffffff;
  --polo-surface: #ffffff;
  --polo-surface-2: #f3f4f6;
  --polo-text: #000000;
  --polo-muted: #242424;
  --polo-line: #000000;
  --polo-primary: #003f7d;
  --polo-accent: #8a2b00;
  --polo-success: #005a20;
  --polo-warning: #6f4a00;
  --polo-danger: #9b0000;
  --polo-focus-ring: #000000;
  --polo-shell-bg: #ffffff;
  --polo-shell-chrome-bg: #ffffff;
  --polo-shell-chrome-text: #000000;
  --polo-shell-chrome-muted: #242424;
  --polo-shell-chrome-border: #000000;
  --polo-shell-nav-bg: #ffffff;
  --polo-shell-nav-active-bg: #dbeafe;
  --polo-shell-nav-active-text: #003f7d;
}

:where(*, *::before, *::after) {
  box-sizing: border-box;
}

:where(html) {
  font-family: var(--polo-font-ui);
  background: var(--polo-page-bg);
  color: var(--polo-page-text);
}

:where(body) {
  font-family: var(--polo-font-ui);
  background: var(--polo-page-bg);
  color: var(--polo-page-text);
}

:where(button, input, select, textarea) {
  font: inherit;
}

:where(button, [role="button"], input, select, textarea, a):focus-visible {
  outline: 3px solid var(--polo-focus-ring);
  outline-offset: 2px;
}

:where(button, .polo-button) {
  min-height: var(--polo-control-height);
  border-radius: var(--polo-control-radius);
}

:where(.polo-button-secondary) {
  background: var(--polo-control-muted-bg);
  color: var(--polo-control-muted-text);
}

:where(input, select, textarea, .polo-input) {
  min-height: var(--polo-control-height);
  border: 1px solid var(--polo-border);
  border-radius: var(--polo-control-radius);
  background: var(--polo-panel-bg);
  color: var(--polo-page-text);
}

:where(.polo-surface, .polo-card) {
  border: 1px solid var(--polo-border);
  border-radius: var(--polo-card-radius);
  background: var(--polo-panel-bg);
  box-shadow: var(--polo-shadow-sm);
}

:where(.polo-toolbar) {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--polo-gap);
  padding: var(--polo-panel-padding);
  border: 1px solid var(--polo-border);
  border-radius: var(--polo-card-radius);
  background: var(--polo-panel-bg);
}

:where(.polo-badge) {
  display: inline-flex;
  align-items: center;
  min-height: 22px;
  border: 1px solid var(--polo-border);
  border-radius: 999px;
  padding: 2px 8px;
  background: var(--polo-badge-bg);
  color: var(--polo-badge-text);
  font-size: 12px;
  font-weight: 800;
  line-height: 1.2;
}

:where(.polo-muted) {
  color: var(--polo-muted, #5f6670);
}

:where(table) {
  border-collapse: collapse;
}

:where(th, td) {
  min-height: var(--polo-table-row-height);
}

:where([dir="rtl"] .polo-flow-row) {
  direction: rtl;
}

@media (prefers-reduced-motion: reduce) {
  :where(*, *::before, *::after) {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
  }
}