:root {
  --ui2-brand: #5b5ce2;
  --ui2-brand-strong: #4547c7;
  --ui2-accent: #06b6d4;
  --ui2-success: #059669;
  --ui2-warning: #d97706;
  --ui2-danger: #dc2626;
  --ui2-ink: #0f172a;
  --ui2-muted: #64748b;
  --ui2-canvas: #f6f8fc;
  --ui2-surface: #ffffff;
  --ui2-surface-soft: #f8fafc;
  --ui2-line: #dbe4ee;
  --ui2-line-strong: #cbd5e1;
  --ui2-radius-sm: 10px;
  --ui2-radius-md: 16px;
  --ui2-radius-lg: 24px;
  --ui2-shadow-sm: 0 8px 24px rgba(15, 23, 42, 0.06);
  --ui2-shadow-md: 0 20px 50px rgba(15, 23, 42, 0.09);
  --ui2-control-h: 44px;
  --ui2-content: 1200px;
}

html[data-theme] {
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  scroll-padding-top: 76px;
}

html[data-theme] body {
  accent-color: var(--ui2-brand);
  animation: none !important;
}

html[data-theme] ::selection {
  background: rgba(91, 92, 226, 0.2);
  color: var(--ui2-ink);
}

.ui-refresh-skip {
  position: fixed;
  z-index: 100000;
  top: 10px;
  left: 12px;
  max-width: calc(100vw - 24px);
  padding: 10px 14px;
  transform: translateY(-160%);
  border: 1px solid rgba(255, 255, 255, 0.5);
  border-radius: 999px;
  background: var(--ui2-ink);
  color: #fff !important;
  font-size: 14px;
  font-weight: 700;
  text-decoration: none !important;
  box-shadow: var(--ui2-shadow-md);
  transition: transform 160ms ease;
}

.ui-refresh-skip:focus {
  transform: translateY(0);
}

html[data-theme] :where(a, button, input, textarea, select, summary, [tabindex]):focus-visible {
  outline: 3px solid rgba(6, 182, 212, 0.46) !important;
  outline-offset: 3px !important;
}

html[data-theme] :where(input:not([type="checkbox"]):not([type="radio"]):not([type="range"]), textarea, select) {
  min-height: var(--ui2-control-h);
  border-radius: var(--ui2-radius-sm);
  transition: border-color 160ms ease, box-shadow 160ms ease, background-color 160ms ease;
}

html[data-theme] :where(input:not([type="checkbox"]):not([type="radio"]):not([type="range"]), textarea, select):hover:not(:disabled) {
  border-color: var(--ui2-line-strong);
}

html[data-theme] :where(input, textarea, select)::placeholder {
  color: #94a3b8;
  opacity: 1;
}

html[data-theme] :where(button, .btn, [class$="-btn"], [class*="-btn "]) {
  font-weight: 700;
  text-underline-offset: 3px;
  transition: transform 160ms ease, box-shadow 160ms ease, border-color 160ms ease, background-color 160ms ease, color 160ms ease;
}

html[data-theme] :where(button, .btn, [class$="-btn"], [class*="-btn "]):not(:disabled):active {
  transform: translateY(1px);
}

html[data-theme] :where(button, input, textarea, select):disabled {
  cursor: not-allowed;
  opacity: 0.58;
}

html[data-theme] :where(.card, .panel, .form-card, .content-card, .settings-card, .stat-card, .kpi, .sec) {
  border-color: var(--ui2-line);
  box-shadow: var(--ui2-shadow-sm);
}

html[data-theme] :where(table) {
  border-collapse: separate;
  border-spacing: 0;
}

html[data-theme] :where(th) {
  color: var(--ui2-muted);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: none;
}

html[data-theme] :where(tbody tr) {
  transition: background-color 140ms ease;
}

html[data-theme] :where(tbody tr):hover {
  background: rgba(91, 92, 226, 0.045);
}

html[data-theme] :where([role="alert"], .error-message, .field-error) {
  border-radius: var(--ui2-radius-sm);
}

html[data-theme] :where([role="status"], .status-message, .notice) {
  text-wrap: pretty;
}

html[data-theme="dark"],
html[data-theme-mode="dark"] {
  --ui2-ink: #f8fafc;
  --ui2-muted: #94a3b8;
  --ui2-canvas: #070b16;
  --ui2-surface: #0f172a;
  --ui2-surface-soft: #111827;
  --ui2-line: rgba(148, 163, 184, 0.22);
  --ui2-line-strong: rgba(148, 163, 184, 0.36);
  --ui2-shadow-sm: 0 10px 28px rgba(0, 0, 0, 0.22);
  --ui2-shadow-md: 0 24px 54px rgba(0, 0, 0, 0.32);
}

html[data-theme="dark"] ::selection,
html[data-theme-mode="dark"] ::selection {
  background: rgba(34, 211, 238, 0.28);
  color: #f8fafc;
}

@media (max-width: 720px) {
  :root {
    --ui2-control-h: 46px;
    --ui2-radius-lg: 20px;
  }

  html[data-theme] {
    scroll-padding-top: 64px;
  }

  html[data-theme] :where(input, textarea, select) {
    font-size: max(16px, 1em);
  }

  html[data-theme] :where(button, .btn, [class$="-btn"], [class*="-btn "]) {
    min-height: 44px;
  }
}

@media (prefers-reduced-motion: reduce) {
  html[data-theme] {
    scroll-behavior: auto !important;
  }

  html[data-theme] *,
  html[data-theme] *::before,
  html[data-theme] *::after {
    scroll-behavior: auto !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}