/* ============================================
   KanXing Design System
   AI Face & Palm Reading - EU/US Edition
   ============================================ */

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

/* ---------- CSS Custom Properties ---------- */
:root {
  /* --- Colors --- */
  --color-bg-primary:    #0a0a1a;
  --color-bg-secondary:  #111128;
  --color-bg-tertiary:   #1a1a3e;
  --color-bg-card:       rgba(26, 26, 62, 0.6);
  --color-bg-glass:      rgba(255, 255, 255, 0.04);
  --color-bg-glass-hover:rgba(255, 255, 255, 0.08);

  --color-primary:       #7c3aed;
  --color-primary-light: #a855f7;
  --color-primary-dark:  #5b21b6;
  --color-primary-glow:  rgba(124, 58, 237, 0.3);

  --color-accent-cyan:   #06b6d4;
  --color-accent-gold:   #f59e0b;
  --color-accent-rose:   #f43f5e;
  --color-accent-emerald:#10b981;

  --color-text-primary:  #f8fafc;
  --color-text-secondary:#94a3b8;
  --color-text-tertiary: #64748b;
  --color-text-muted:    #475569;

  --color-success:       #10b981;
  --color-warning:       #f59e0b;
  --color-error:         #ef4444;
  --color-info:          #06b6d4;

  --color-border:        rgba(255, 255, 255, 0.08);
  --color-border-hover:  rgba(255, 255, 255, 0.15);
  --color-divider:       rgba(255, 255, 255, 0.06);

  /* --- Gradients --- */
  --gradient-primary:    linear-gradient(135deg, #7c3aed 0%, #a855f7 50%, #06b6d4 100%);
  --gradient-bg:         linear-gradient(180deg, #0a0a1a 0%, #1a1a3e 100%);
  --gradient-card:       linear-gradient(135deg, rgba(124,58,237,0.1) 0%, rgba(6,182,212,0.05) 100%);
  --gradient-gold:       linear-gradient(135deg, #f59e0b 0%, #fbbf24 50%, #f59e0b 100%);
  --gradient-rose:       linear-gradient(135deg, #f43f5e 0%, #ec4899 100%);
  --gradient-glass:      linear-gradient(135deg, rgba(255,255,255,0.08) 0%, rgba(255,255,255,0.02) 100%);
  --gradient-scan:       linear-gradient(180deg, transparent 0%, rgba(124,58,237,0.4) 50%, transparent 100%);
  --gradient-mystic:     linear-gradient(135deg, #1a1a3e 0%, #2d1b69 50%, #0a0a1a 100%);

  /* --- Typography --- */
  --font-display:        'Outfit', system-ui, -apple-system, sans-serif;
  --font-body:           'Inter', system-ui, -apple-system, sans-serif;

  --fs-xs:    0.75rem;    /* 12px */
  --fs-sm:    0.875rem;   /* 14px */
  --fs-base:  1rem;       /* 16px */
  --fs-md:    1.125rem;   /* 18px */
  --fs-lg:    1.25rem;    /* 20px */
  --fs-xl:    1.5rem;     /* 24px */
  --fs-2xl:   1.875rem;   /* 30px */
  --fs-3xl:   2.25rem;    /* 36px */
  --fs-4xl:   3rem;       /* 48px */
  --fs-5xl:   3.75rem;    /* 60px */

  --fw-light:    300;
  --fw-regular:  400;
  --fw-medium:   500;
  --fw-semibold: 600;
  --fw-bold:     700;
  --fw-extrabold:800;

  --lh-tight:    1.2;
  --lh-normal:   1.5;
  --lh-relaxed:  1.7;

  --ls-tight:   -0.02em;
  --ls-normal:   0;
  --ls-wide:     0.02em;
  --ls-wider:    0.05em;
  --ls-widest:   0.1em;

  /* --- Spacing --- */
  --space-1:  0.25rem;   /* 4px */
  --space-2:  0.5rem;    /* 8px */
  --space-3:  0.75rem;   /* 12px */
  --space-4:  1rem;      /* 16px */
  --space-5:  1.25rem;   /* 20px */
  --space-6:  1.5rem;    /* 24px */
  --space-8:  2rem;      /* 32px */
  --space-10: 2.5rem;    /* 40px */
  --space-12: 3rem;      /* 48px */
  --space-16: 4rem;      /* 64px */
  --space-20: 5rem;      /* 80px */

  /* --- Border Radius --- */
  --radius-sm:    8px;
  --radius-md:    12px;
  --radius-lg:    16px;
  --radius-xl:    24px;
  --radius-2xl:   32px;
  --radius-full:  9999px;

  /* --- Shadows --- */
  --shadow-sm:      0 2px 8px rgba(0, 0, 0, 0.3);
  --shadow-md:      0 4px 16px rgba(0, 0, 0, 0.4);
  --shadow-lg:      0 8px 32px rgba(0, 0, 0, 0.5);
  --shadow-glow:    0 0 30px var(--color-primary-glow);
  --shadow-glow-sm: 0 0 15px var(--color-primary-glow);
  --shadow-cyan:    0 0 20px rgba(6, 182, 212, 0.3);
  --shadow-gold:    0 0 20px rgba(245, 158, 11, 0.3);

  /* --- Transitions --- */
  --ease-default:  cubic-bezier(0.4, 0, 0.2, 1);
  --ease-bounce:   cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-spring:   cubic-bezier(0.175, 0.885, 0.32, 1.275);
  --duration-fast:   150ms;
  --duration-normal: 300ms;
  --duration-slow:   500ms;

  /* --- Z-Index --- */
  --z-behind:   -1;
  --z-base:      0;
  --z-dropdown:  100;
  --z-sticky:    200;
  --z-fixed:     300;
  --z-overlay:   400;
  --z-modal:     500;
  --z-toast:     600;
  --z-tooltip:   700;

  /* --- Layout --- */
  --sidebar-width:    260px;
  --header-height:    64px;
  --bottom-nav-height:72px;
  --max-content-width:1200px;
  --page-padding:     var(--space-6);
}

/* ---------- Reset & Base ---------- */
*, *::before, *::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  font-size: 16px;
  scroll-behavior: smooth;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  color-scheme: dark;
}

body {
  font-family: var(--font-body);
  font-weight: var(--fw-regular);
  font-size: var(--fs-base);
  line-height: var(--lh-normal);
  color: var(--color-text-primary);
  background: var(--gradient-bg);
  min-height: 100vh;
  overflow-x: hidden;
}

a {
  color: var(--color-primary-light);
  text-decoration: none;
  transition: color var(--duration-fast) var(--ease-default);
}
a:hover { color: var(--color-accent-cyan); }

img, video { max-width: 100%; height: auto; display: block; }
button, input, select, textarea {
  font-family: inherit;
  font-size: inherit;
  color: inherit;
  border: none;
  outline: none;
  background: none;
}
button { cursor: pointer; }
ul, ol { list-style: none; }

::selection {
  background: rgba(124, 58, 237, 0.4);
  color: var(--color-text-primary);
}

::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: rgba(124, 58, 237, 0.3);
  border-radius: var(--radius-full);
}
::-webkit-scrollbar-thumb:hover { background: rgba(124, 58, 237, 0.5); }

/* ---------- Typography Classes ---------- */
.heading-1 {
  font-family: var(--font-display);
  font-size: var(--fs-4xl);
  font-weight: var(--fw-bold);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-tight);
}
.heading-2 {
  font-family: var(--font-display);
  font-size: var(--fs-3xl);
  font-weight: var(--fw-bold);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-tight);
}
.heading-3 {
  font-family: var(--font-display);
  font-size: var(--fs-2xl);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-tight);
}
.heading-4 {
  font-family: var(--font-display);
  font-size: var(--fs-xl);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-tight);
}
.heading-5 {
  font-family: var(--font-display);
  font-size: var(--fs-lg);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-normal);
}
.body-lg  { font-size: var(--fs-md); line-height: var(--lh-relaxed); }
.body-md  { font-size: var(--fs-base); line-height: var(--lh-normal); }
.body-sm  { font-size: var(--fs-sm); line-height: var(--lh-normal); }
.caption  { font-size: var(--fs-xs); line-height: var(--lh-normal); color: var(--color-text-tertiary); }
.label    { font-size: var(--fs-xs); font-weight: var(--fw-semibold); letter-spacing: var(--ls-wider); text-transform: uppercase; }
.text-gradient {
  background: var(--gradient-primary);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* ---------- Layout Utilities ---------- */
.container {
  width: 100%;
  max-width: var(--max-content-width);
  margin: 0 auto;
  padding: 0 var(--page-padding);
}

.page-wrapper {
  min-height: 100vh;
  padding-bottom: calc(var(--bottom-nav-height) + var(--space-6));
}

.flex        { display: flex; }
.flex-col    { flex-direction: column; }
.flex-wrap   { flex-wrap: wrap; }
.items-center{ align-items: center; }
.items-start { align-items: flex-start; }
.items-end   { align-items: flex-end; }
.justify-center  { justify-content: center; }
.justify-between { justify-content: space-between; }
.justify-end     { justify-content: flex-end; }
.gap-1  { gap: var(--space-1); }
.gap-2  { gap: var(--space-2); }
.gap-3  { gap: var(--space-3); }
.gap-4  { gap: var(--space-4); }
.gap-5  { gap: var(--space-5); }
.gap-6  { gap: var(--space-6); }
.gap-8  { gap: var(--space-8); }

.grid          { display: grid; }
.grid-cols-2   { grid-template-columns: repeat(2, 1fr); }
.grid-cols-3   { grid-template-columns: repeat(3, 1fr); }
.grid-cols-4   { grid-template-columns: repeat(4, 1fr); }

.text-center   { text-align: center; }
.text-left     { text-align: left; }
.text-right    { text-align: right; }
.w-full        { width: 100%; }
.h-full        { height: 100%; }
.relative      { position: relative; }
.absolute      { position: absolute; }
.overflow-hidden { overflow: hidden; }
.hidden        { display: none !important; }
.block         { display: block; }
.inline-block  { display: inline-block; }

.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

/* Spacing helpers */
.mt-1 { margin-top: var(--space-1); } .mt-2 { margin-top: var(--space-2); }
.mt-3 { margin-top: var(--space-3); } .mt-4 { margin-top: var(--space-4); }
.mt-5 { margin-top: var(--space-5); } .mt-6 { margin-top: var(--space-6); }
.mt-8 { margin-top: var(--space-8); } .mt-10 { margin-top: var(--space-10); }
.mb-1 { margin-bottom: var(--space-1); } .mb-2 { margin-bottom: var(--space-2); }
.mb-3 { margin-bottom: var(--space-3); } .mb-4 { margin-bottom: var(--space-4); }
.mb-5 { margin-bottom: var(--space-5); } .mb-6 { margin-bottom: var(--space-6); }
.mb-8 { margin-bottom: var(--space-8); }
.p-2 { padding: var(--space-2); } .p-3 { padding: var(--space-3); }
.p-4 { padding: var(--space-4); } .p-5 { padding: var(--space-5); }
.p-6 { padding: var(--space-6); } .p-8 { padding: var(--space-8); }

/* ---------- Background Effects ---------- */
.bg-stars {
  position: fixed;
  top: 0; left: 0;
  width: 100%; height: 100%;
  pointer-events: none;
  z-index: var(--z-behind);
  background:
    radial-gradient(1px 1px at 20% 30%, rgba(255,255,255,0.4) 0%, transparent 100%),
    radial-gradient(1px 1px at 40% 70%, rgba(255,255,255,0.3) 0%, transparent 100%),
    radial-gradient(1px 1px at 60% 20%, rgba(255,255,255,0.5) 0%, transparent 100%),
    radial-gradient(1px 1px at 80% 50%, rgba(255,255,255,0.2) 0%, transparent 100%),
    radial-gradient(2px 2px at 10% 80%, rgba(124,58,237,0.3) 0%, transparent 100%),
    radial-gradient(2px 2px at 90% 10%, rgba(6,182,212,0.3) 0%, transparent 100%),
    radial-gradient(1px 1px at 50% 50%, rgba(255,255,255,0.3) 0%, transparent 100%),
    radial-gradient(1px 1px at 30% 90%, rgba(255,255,255,0.4) 0%, transparent 100%),
    radial-gradient(1px 1px at 70% 40%, rgba(255,255,255,0.3) 0%, transparent 100%),
    radial-gradient(1px 1px at 15% 55%, rgba(255,255,255,0.2) 0%, transparent 100%),
    radial-gradient(1px 1px at 85% 75%, rgba(255,255,255,0.3) 0%, transparent 100%),
    radial-gradient(1px 1px at 45% 15%, rgba(168,85,247,0.3) 0%, transparent 100%);
}

.bg-orb {
  position: fixed;
  border-radius: 50%;
  filter: blur(100px);
  pointer-events: none;
  z-index: var(--z-behind);
  animation: orb-float 15s ease-in-out infinite alternate;
}
.bg-orb-1 {
  width: 400px; height: 400px;
  background: rgba(124, 58, 237, 0.15);
  top: -100px; right: -100px;
}
.bg-orb-2 {
  width: 300px; height: 300px;
  background: rgba(6, 182, 212, 0.1);
  bottom: -50px; left: -50px;
  animation-delay: -7s;
}
.bg-orb-3 {
  width: 250px; height: 250px;
  background: rgba(244, 63, 94, 0.08);
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  animation-delay: -3s;
}

/* ---------- Keyframe Animations ---------- */
@keyframes orb-float {
  0%   { transform: translate(0, 0) scale(1); }
  50%  { transform: translate(30px, -20px) scale(1.1); }
  100% { transform: translate(-20px, 30px) scale(0.95); }
}

@keyframes fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@keyframes fade-in-up {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes fade-in-down {
  from { opacity: 0; transform: translateY(-20px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes slide-in-left {
  from { opacity: 0; transform: translateX(-30px); }
  to   { opacity: 1; transform: translateX(0); }
}

@keyframes slide-in-right {
  from { opacity: 0; transform: translateX(30px); }
  to   { opacity: 1; transform: translateX(0); }
}

@keyframes scale-in {
  from { opacity: 0; transform: scale(0.9); }
  to   { opacity: 1; transform: scale(1); }
}

@keyframes pulse-glow {
  0%, 100% { box-shadow: 0 0 20px var(--color-primary-glow); }
  50%      { box-shadow: 0 0 40px var(--color-primary-glow), 0 0 60px rgba(124,58,237,0.15); }
}

@keyframes breathing {
  0%, 100% { opacity: 0.6; }
  50%      { opacity: 1; }
}

@keyframes scan-line {
  0%   { top: 0; }
  100% { top: 100%; }
}

@keyframes spin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

@keyframes shimmer {
  0%   { transform: translateX(-100%); }
  100% { transform: translateX(100%); }
}

@keyframes float {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-10px); }
}

@keyframes particle-rise {
  0%   { opacity: 1; transform: translateY(0) scale(1); }
  100% { opacity: 0; transform: translateY(-100px) scale(0); }
}

@keyframes rotate-slow {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

/* Animation utility classes */
.animate-fade-in     { animation: fade-in var(--duration-normal) var(--ease-default) both; }
.animate-fade-in-up  { animation: fade-in-up var(--duration-slow) var(--ease-default) both; }
.animate-scale-in    { animation: scale-in var(--duration-normal) var(--ease-spring) both; }
.animate-pulse-glow  { animation: pulse-glow 3s ease-in-out infinite; }
.animate-breathing   { animation: breathing 3s ease-in-out infinite; }
.animate-float       { animation: float 4s ease-in-out infinite; }
.animate-spin        { animation: spin 1s linear infinite; }
.animate-rotate-slow { animation: rotate-slow 20s linear infinite; }

.delay-1 { animation-delay: 0.1s; }
.delay-2 { animation-delay: 0.2s; }
.delay-3 { animation-delay: 0.3s; }
.delay-4 { animation-delay: 0.4s; }
.delay-5 { animation-delay: 0.5s; }

/* ---------- Responsive Breakpoints ---------- */
@media (min-width: 768px) {
  :root { --page-padding: var(--space-8); }
  .md-grid-cols-2 { grid-template-columns: repeat(2, 1fr); }
  .md-grid-cols-3 { grid-template-columns: repeat(3, 1fr); }
  .md-hidden { display: none !important; }
  .md-block  { display: block !important; }
  .md-flex   { display: flex !important; }
}

@media (min-width: 1024px) {
  :root { --page-padding: var(--space-10); }
  .lg-grid-cols-3 { grid-template-columns: repeat(3, 1fr); }
  .lg-grid-cols-4 { grid-template-columns: repeat(4, 1fr); }
  .lg-hidden { display: none !important; }
  .lg-block  { display: block !important; }
  .lg-flex   { display: flex !important; }

  .page-wrapper {
    margin-left: var(--sidebar-width);
    padding-bottom: var(--space-8);
  }
}