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

:root {
  --background: oklch(1 0 0);
  --foreground: oklch(0.2686 0 0);
  --card: oklch(1 0 0);
  --card-foreground: oklch(0.2686 0 0);
  --primary: oklch(0.7686 0.1647 70.0804);
  --primary-foreground: oklch(0 0 0);
  --secondary: oklch(0.967 0.0029 264.5419);
  --secondary-foreground: oklch(0.4461 0.0263 256.8018);
  --muted: oklch(0.9846 0.0017 247.8389);
  --muted-foreground: oklch(0.551 0.0234 264.3637);
  --accent: oklch(0.9869 0.0214 95.2774);
  --accent-foreground: oklch(0.4732 0.1247 46.2007);
  --destructive: oklch(0.6368 0.2078 25.3313);
  --destructive-foreground: oklch(1 0 0);
  --border: oklch(0.9276 0.0058 264.5313);
  --input: oklch(0.9276 0.0058 264.5313);
  --ring: oklch(0.7686 0.1647 70.0804);
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  font-family: 'Inter', sans-serif;
  background-color: var(--background);
  color: var(--foreground);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  -webkit-font-smoothing: antialiased;
  overflow: none;
}

#app {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

main {
  flex-grow: 1;
}

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

button {
  cursor: pointer;
  font-family: inherit;
}

img {
  max-width: 100%;
  display: block;
}

input, textarea, select {
  font-family: inherit;
}

/* CRITICAL: Override Tailwind's default radius values based on --radius: 1.225rem */
/* This makes rounded-sm, rounded-md, rounded-lg, rounded-xl match the original design */
@supports (--css: variables) {
  :root {
    --radius-sm: calc(1.225rem - 3px);    /* 0.892rem ~ 14.3px */
    --radius-md: calc(1.225rem - 2px);    /* 0.917rem ~ 14.7px */
    --radius-lg: 1.225rem;                /* 1.225rem ~ 19.6px */
    --radius-xl: calc(1.225rem + 4px);    /* 1.415rem ~ 22.6px */
  }
}

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

:root {
  --background: oklch(1 0 0);
  --foreground: oklch(0.2686 0 0);
  --card: oklch(1 0 0);
  --card-foreground: oklch(0.2686 0 0);
  --primary: oklch(0.7686 0.1647 70.0804);
  --primary-foreground: oklch(0 0 0);
  --secondary: oklch(0.967 0.0029 264.5419);
  --secondary-foreground: oklch(0.4461 0.0263 256.8018);
  --muted: oklch(0.9846 0.0017 247.8389);
  --muted-foreground: oklch(0.551 0.0234 264.3637);
  --accent: oklch(0.9869 0.0214 95.2774);
  --accent-foreground: oklch(0.4732 0.1247 46.2007);
  --destructive: oklch(0.6368 0.2078 25.3313);
  --destructive-foreground: oklch(1 0 0);
  --border: oklch(0.9276 0.0058 264.5313);
  --input: oklch(0.9276 0.0058 264.5313);
  --ring: oklch(0.7686 0.1647 70.0804);
  --radius: 1.225rem;
  --spacing: 0.25rem;

  /* Shadow definitions */
  --shadow-2xs: 0px 4px 8px -1px hsl(0 0% 0% / 0.05);
  --shadow-xs: 0px 4px 8px -1px hsl(0 0% 0% / 0.05);
  --shadow-sm: 0px 4px 8px -1px hsl(0 0% 0% / 0.1), 0px 1px 2px -2px hsl(0 0% 0% / 0.1);
  --shadow: 0px 4px 8px -1px hsl(0 0% 0% / 0.1), 0px 1px 2px -2px hsl(0 0% 0% / 0.1);
  --shadow-md: 0px 4px 8px -1px hsl(0 0% 0% / 0.1), 0px 2px 4px -2px hsl(0 0% 0% / 0.1);
  --shadow-lg: 0px 4px 8px -1px hsl(0 0% 0% / 0.1), 0px 4px 6px -2px hsl(0 0% 0% / 0.1);
  --shadow-xl: 0px 4px 8px -1px hsl(0 0% 0% / 0.1), 0px 8px 10px -2px hsl(0 0% 0% / 0.1);
  --shadow-2xl: 0px 4px 8px -1px hsl(0 0% 0% / 0.25);
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  font-family: 'Inter', sans-serif;
  background-color: var(--background);
  color: var(--foreground);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  -webkit-font-smoothing: antialiased;
}

#app {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

main {
  flex-grow: 1;
}

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

button {
  cursor: pointer;
  font-family: inherit;
}

img {
  max-width: 100%;
  display: block;
}

input, textarea, select {
  font-family: inherit;
}

/* ========== CRITICAL: Tailwind Overrides with !important ========== */
/* Tailwind CDN defaults conflict with original design, must override all utilities */

/* ===== Border Radius ===== */
.rounded-sm {
  border-radius: calc(1.225rem - 3px) !important;
}
.rounded-md {
  border-radius: calc(1.225rem - 2px) !important;
}
.rounded-lg {
  border-radius: 1.225rem !important;
}
.rounded-xl {
  border-radius: calc(1.225rem + 4px) !important;
}
.rounded {
  border-radius: 1.225rem !important;
}
.rounded-full {
  border-radius: 9999px !important;
}

/* ===== Gap/Spacing ===== */
.gap-1 { gap: 0.25rem !important; }
.gap-2 { gap: 0.5rem !important; }
.gap-3 { gap: 0.75rem !important; }
.gap-4 { gap: 1rem !important; }
.gap-6 { gap: 1.5rem !important; }

/* ===== Padding ===== */
.p-1 { padding: 0.25rem !important; }
.p-2 { padding: 0.5rem !important; }
.p-3 { padding: 0.75rem !important; }
.p-4 { padding: 1rem !important; }
.p-6 { padding: 1.5rem !important; }
.p-8 { padding: 2rem !important; }
.p-12 { padding: 3rem !important; }
.pt-0 { padding-top: 0 !important; }
.px-2 { padding-left: 0.5rem !important; padding-right: 0.5rem !important; }
.px-3 { padding-left: 0.75rem !important; padding-right: 0.75rem !important; }
.px-4 { padding-left: 1rem !important; padding-right: 1rem !important; }
.px-8 { padding-left: 2rem !important; padding-right: 2rem !important; }
.py-1 { padding-top: 0.25rem !important; padding-bottom: 0.25rem !important; }
.py-2 { padding-top: 0.5rem !important; padding-bottom: 0.5rem !important; }

/* ===== Height ===== */
.h-8 { height: 2rem !important; }
.h-9 { height: 2.25rem !important; }
.h-10 { height: 2.5rem !important; }
.h-full { height: 100% !important; }

/* ===== Width ===== */
.w-full { width: 100% !important; }
.w-4 { width: 1rem !important; }

/* ===== Shadows ===== */
.shadow { box-shadow: var(--shadow) !important; }
.shadow-sm { box-shadow: var(--shadow-sm) !important; }
.shadow-md { box-shadow: var(--shadow-md) !important; }
.shadow-lg { box-shadow: var(--shadow-lg) !important; }

/* ===== Font Sizes ===== */
.text-xs { font-size: 0.75rem !important; line-height: 1rem !important; }
.text-sm { font-size: 0.875rem !important; line-height: 1.25rem !important; }
.text-lg { font-size: 1.125rem !important; line-height: 1.75rem !important; }
.text-xl { font-size: 1.25rem !important; line-height: 1.75rem !important; }
.text-2xl { font-size: 1.5rem !important; line-height: 2rem !important; }
.text-3xl { font-size: 1.875rem !important; line-height: 2.25rem !important; }
.text-4xl { font-size: 2.25rem !important; line-height: 2.5rem !important; }
.text-6xl { font-size: 3.75rem !important; line-height: 1 !important; }

/* ===== Font Weight ===== */
.font-medium { font-weight: 500 !important; }
.font-semibold { font-weight: 600 !important; }
.font-bold { font-weight: 700 !important; }

/* ===== Text & Color Utilities ===== */
.text-foreground { color: var(--foreground) !important; }
.text-muted-foreground { color: var(--muted-foreground) !important; }
.bg-primary { background-color: var(--primary) !important; }
.text-primary { color: var(--primary) !important; }
.bg-card { background-color: var(--card) !important; }
.text-card-foreground { color: var(--card-foreground) !important; }
.border-border { border-color: var(--border) !important; }
.hover\:text-primary:hover { color: var(--primary) !important; }
.hover\:bg-gray-100:hover { background-color: rgba(0, 0, 0, 0.05) !important; }
.hover\:bg-gray-50:hover { background-color: rgba(0, 0, 0, 0.02) !important; }
.hover\:bg-accent:hover { background-color: var(--accent) !important; }

.loader-main {
  justify-content: center;
  align-items: center;
  position: absolute;
  width: 100%;
  height: 100vh;
  display: flex;
  z-index: 999;
  background-color: #0000005C;
  transition: opacity .6s ease-in;
}

.loader-main-show {
  pointer-events: auto;
  opacity: 1;
}

.loader-main-hide {
  pointer-events: none;
  opacity: 0;
}

.loader {
  width: 48px;
  height: 48px;
  display: inline-block;
  position: relative;
}
.loader::after,
.loader::before {
  content: '';  
  box-sizing: border-box;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border: 2px solid #FFF;
  position: absolute;
  left: 0;
  top: 0;
  animation: animloader 2s linear infinite;
}
.loader::after {
  animation-delay: 1s;
}

@keyframes animloader {
  0% {
    transform: scale(0);
    opacity: 1;
  }
  100% {
    transform: scale(1);
    opacity: 0;
  }
}