@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap');

:root {
  --bg-base: oklch(1 0 0);
  --bg-primary: oklch(1 0 0);
  --bg-secondary: oklch(0.97 0 0);
  --bg-surface: oklch(1 0 0);
  --bg-elevated: oklch(1 0 0);
  --bg-deep: oklch(0.97 0 0);
  --bg-sunken: oklch(0.985 0 0);
  --bg-hover: oklch(0.97 0 0 / 0.72);

  --border-primary: oklch(0.922 0 0);
  --border-secondary: oklch(0.708 0 0);
  --border-subtle: oklch(0.922 0 0 / 0.6);

  --text-primary: oklch(0.145 0 0);
  --text-secondary: oklch(0.205 0 0);
  --text-tertiary: oklch(0.556 0 0);
  --text-muted: oklch(0.708 0 0);

  --scrollbar-track: oklch(0.97 0 0);
  --scrollbar-thumb: oklch(0.922 0 0);
  --scrollbar-thumb-hover: oklch(0.708 0 0);

  --glass-bg: oklch(1 0 0 / 0.72);
  --glass-border: oklch(0.922 0 0 / 0.6);

  --nav-active-bg: oklch(0.205 0 0 / 0.12);
  --nav-hover-bg: oklch(0.205 0 0 / 0.08);

  --btn-primary-bg: oklch(0.205 0 0);
  --btn-primary-text: oklch(0.985 0 0);
  --btn-primary-hover: oklch(0.145 0 0);
  --btn-primary-shadow: oklch(0.205 0 0 / 0.3);
  --btn-selected-bg: oklch(0.205 0 0 / 0.14);
  --btn-selected-border: oklch(0.205 0 0 / 0.3);

  --overlay-heavy: oklch(0.145 0 0 / 0.7);
  --overlay-medium: oklch(0.145 0 0 / 0.5);
  --overlay-light: oklch(0.145 0 0 / 0.2);
  --overlay-full: oklch(0.145 0 0 / 0.9);
  --overlay-border: oklch(0.922 0 0 / 0.5);
  --selection-bg: oklch(0.205 0 0 / 0.2);

  --accent: oklch(0.205 0 0);
  --accent-hover: oklch(0.145 0 0);
  --accent-muted: oklch(0.556 0 0);
  --accent-bg: oklch(0.205 0 0 / 0.12);
  --accent-bg-hover: oklch(0.205 0 0 / 0.18);
  --accent-border: oklch(0.205 0 0 / 0.3);
  --accent-text: oklch(0.145 0 0);
  --accent-text-hover: oklch(0.145 0 0);
  --accent-on: oklch(0.985 0 0);
  --accent-shadow: oklch(0.205 0 0 / 0.2);

  --toggle-active: oklch(0.205 0 0);
  --toggle-inactive: var(--border-secondary);
  --toggle-knob: oklch(1 0 0);

  --success: #16a34a;
  --success-text: #15803d;
  --success-bg: rgba(22, 163, 74, 0.08);
  --success-border: rgba(22, 163, 74, 0.25);

  --error: #dc2626;
  --error-text: #b91c1c;
  --error-bg: rgba(220, 38, 38, 0.06);
  --error-border: rgba(220, 38, 38, 0.2);
  --error-hover-bg: rgba(220, 38, 38, 0.08);
  --error-hover-bg-strong: rgba(220, 38, 38, 0.15);

  --warning: #d97706;
  --warning-text: #b45309;
  --warning-bg: rgba(217, 119, 6, 0.08);
  --warning-border: rgba(217, 119, 6, 0.25);

  --info: #2563eb;
  --info-text: #1d4ed8;
  --info-bg: rgba(37, 99, 235, 0.08);
  --info-border: rgba(37, 99, 235, 0.25);

  --tag-purple: #7c3aed;
  --tag-purple-bg: rgba(124, 58, 237, 0.08);
  --tag-purple-border: rgba(124, 58, 237, 0.2);
  --tag-purple-hover: rgba(124, 58, 237, 0.08);

  --font-sans: 'Inter', 'Noto Sans SC', system-ui, sans-serif;
  --radius: 0px;
  --radius-sm: 0px;
  --radius-md: 0px;
  --radius-lg: 0px;
  --radius-xl: 0px;
  --radius-2xl: 0px;
  --radius-3xl: 0px;
}

body {
  font-family: var(--font-sans);
  background-color: var(--bg-base);
  color: var(--text-secondary);
  transition: background-color 0.2s ease, color 0.2s ease;
  background-image: none;
  background-attachment: fixed;
}

::-webkit-scrollbar {
  width: 5px;
  height: 5px;
}

::-webkit-scrollbar-track {
  background: var(--scrollbar-track);
}

::-webkit-scrollbar-thumb {
  background: var(--scrollbar-thumb);
  border-radius: 3px;
}

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

.font-mono {
  font-family: 'JetBrains Mono', 'Fira Code', monospace;
}

select option {
  background-color: var(--bg-surface);
  color: var(--text-primary);
}

.glass-panel {
  background: var(--glass-bg);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid var(--glass-border);
}

/* shadcn preset bbVKF9c compatibility layer for the mirrored SPA bundle */
:where(
  .rounded,
  .rounded-md,
  .rounded-lg,
  .rounded-xl,
  .rounded-2xl,
  .rounded-t-lg,
  .rounded-b-2xl,
  [class*="rounded-["],
  [class*=" rounded-["],
  [class^="rounded-"]
):not([class*="rounded-full"]) {
  border-radius: 0 !important;
}

:where(.rounded-full, [class*="rounded-full"]) {
  border-radius: 9999px !important;
}

:where(
  .shadow,
  .shadow-sm,
  .shadow-md,
  .shadow-lg,
  .shadow-xl,
  .shadow-2xl,
  .shadow-inner,
  [class*="shadow-["],
  [class*=" shadow-["]
) {
  box-shadow: none !important;
}

:where(
  .backdrop-blur,
  .backdrop-blur-sm,
  .backdrop-blur-md,
  .backdrop-blur-xl,
  [class*="backdrop-blur"],
  [class*=" backdrop-blur"]
) {
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

:where(
  button,
  [role="button"],
  input[type="button"],
  input[type="submit"],
  input[type="reset"]
) {
  border-radius: 0 !important;
  box-shadow: none !important;
}

:where(
  [class*="bg-[radial-gradient("],
  [class*=" bg-[radial-gradient("]
) {
  background-image: none !important;
  background-color: var(--bg-surface) !important;
}

:where(
  [class*="bg-[var(--bg-surface)]"][class*="border"],
  [class*="bg-[var(--bg-elevated)]"][class*="border"],
  [class*="bg-[var(--bg-primary)]"][class*="border"],
  [class*="bg-[var(--bg-sunken)]"][class*="border"]
) {
  border-color: var(--border-primary) !important;
  box-shadow: none !important;
}

:where(
  [class*="h-16"][class*="border-b"],
  [class*="sticky"][class*="top-0"],
  [class*="w-72"][class*="border-r"]
) {
  background-color: var(--bg-surface) !important;
  box-shadow: none !important;
}

/* structural pass: align multi-page SPA layouts to shadcn-style shell */
@media (min-width: 1024px) {
  :where(
    div:has(> [class*="w-72"][class*="border-r"][class*="bg-[var(--bg-primary)]"])
  ) {
    display: grid !important;
    grid-template-columns: 240px minmax(0, 1fr) !important;
    min-height: 100vh;
  }

  :where(
    [class*="w-72"][class*="border-r"][class*="bg-[var(--bg-primary)]"]
  ) {
    width: 240px !important;
    min-width: 240px !important;
    max-width: 240px !important;
    background: var(--bg-surface) !important;
    border-right: 1px solid var(--border-primary) !important;
  }
}

@media (min-width: 768px) {
  :where(
    [class*="md:grid-cols-[240px_minmax(0,1fr)]"],
    [class*="md:grid-cols-[260px_minmax(0,1fr)]"]
  ) {
    grid-template-columns: 220px minmax(0, 1fr) !important;
    gap: 1rem !important;
  }
}

@media (min-width: 1280px) {
  :where(
    [class*="xl:grid-cols-[360px_minmax(0,1fr)]"]
  ) {
    grid-template-columns: 320px minmax(0, 1fr) !important;
  }

  :where(
    [class*="xl:grid-cols-[minmax(0,1fr)_clamp(340px,32vw,460px)]"]
  ) {
    grid-template-columns: minmax(0, 1fr) 360px !important;
  }
}

:where(
  [class*="h-16"][class*="border-b"][class*="flex items-center justify-between"],
  [class*="sticky top-0 z-10"][class*="border-y"][class*="px-8"]
) {
  height: 56px !important;
  min-height: 56px !important;
  padding-left: 1rem !important;
  padding-right: 1rem !important;
  border-color: var(--border-primary) !important;
}

:where(
  [class*="bg-[var(--bg-surface)]"][class*="border"][class*="overflow-hidden"][class*="flex flex-col"],
  [class*="bg-[var(--bg-elevated)]"][class*="border"][class*="overflow-hidden"][class*="flex flex-col"],
  [class*="min-h-[156px]"][class*="border"][class*="bg-[var(--bg-surface)]"]
) {
  border-radius: 0 !important;
  border-color: var(--border-primary) !important;
  box-shadow: none !important;
  background: var(--bg-surface) !important;
}

:where(
  [class*="rounded-xl border"][class*="px-3"][class*="py-4"][class*="text-left"],
  [class*="rounded-xl border"][class*="p-2.5"][class*="cursor-pointer"]
) {
  border-radius: 0 !important;
  border-color: var(--border-primary) !important;
}

@media (min-width: 1024px) {
  :where(
    [class*="grid"][class*="lg:grid-cols-4"]
  ) {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 1rem !important;
  }
}

@media (min-width: 1280px) {
  :where(
    [class*="grid"][class*="xl:grid-cols-5"]
  ) {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 1rem !important;
  }
}

:where(
  [class*="max-w-4xl"][class*="rounded-2xl"][class*="overflow-hidden"],
  [class*="max-w-2xl"][class*="rounded-xl"][class*="overflow-hidden"]
) {
  border-radius: 0 !important;
  border: 1px solid var(--border-primary) !important;
  box-shadow: none !important;
}