/* =========================================================
   PROMPT OPTIMIZER — DESIGN SYSTEM v1
   Premium tokens + komponenty (.ds-*)
   Współistnieje z legacy styles.css. Migracja per ekran.
   ========================================================= */

:root {
  /* === COLOR — extend brand bez nadpisywania legacy === */
  --ds-bg-0: #08080A;            /* deepest, full-page background */
  --ds-bg-1: #0E0E11;            /* surface base */
  --ds-bg-2: #15151A;            /* card */
  --ds-bg-3: #1C1C22;            /* card hover / elevated */
  --ds-bg-4: #24242C;            /* highest elevation */

  --ds-line-1: rgba(255, 255, 255, 0.06);   /* subtle divider */
  --ds-line-2: rgba(255, 255, 255, 0.10);   /* card border */
  --ds-line-3: rgba(255, 255, 255, 0.16);   /* hover border */

  --ds-fg-1: #FAFAFA;            /* primary text */
  --ds-fg-2: #C9C9D1;            /* secondary text */
  --ds-fg-3: #8E8E99;            /* muted */
  --ds-fg-4: #5C5C66;            /* disabled / placeholder */

  --ds-accent: #FFC700;
  --ds-accent-hi: #FFD84A;
  --ds-accent-lo: #B88F00;
  --ds-accent-tint: rgba(255, 199, 0, 0.12);
  --ds-accent-glow: rgba(255, 199, 0, 0.45);

  --ds-success: #34D399;
  --ds-warning: #FBBF24;
  --ds-danger:  #F87171;
  --ds-info:    #60A5FA;
  --ds-violet:  #A78BFA;

  /* === LIGHT THEME OVERRIDES === */
}
[data-theme="light"] {
  --ds-bg-0: #F4F4F7;
  --ds-bg-1: #FFFFFF;
  --ds-bg-2: #FFFFFF;
  --ds-bg-3: #FAFAFC;
  --ds-bg-4: #F0F0F4;
  --ds-line-1: rgba(15, 15, 25, 0.06);
  --ds-line-2: rgba(15, 15, 25, 0.10);
  --ds-line-3: rgba(15, 15, 25, 0.18);
  --ds-fg-1: #18181B;
  --ds-fg-2: #3F3F46;
  --ds-fg-3: #71717A;
  --ds-fg-4: #A1A1AA;
  --ds-accent: #B88F00;
  --ds-accent-hi: #D4A017;
  --ds-accent-lo: #8A6900;
  --ds-accent-tint: rgba(184, 143, 0, 0.10);
  --ds-accent-glow: rgba(184, 143, 0, 0.30);
}

:root {
  /* === TYPOGRAPHY === */
  --ds-font-display: 'Plus Jakarta Sans', 'Inter', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  --ds-font-body:    'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --ds-font-mono:    'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, Consolas, monospace;

  /* Fluid type scale — clamp(min, vw-fluid, max) */
  --ds-text-2xs:  0.6875rem;                                          /* 11px */
  --ds-text-xs:   0.75rem;                                            /* 12px */
  --ds-text-sm:   0.875rem;                                           /* 14px */
  --ds-text-base: 1rem;                                               /* 16px */
  --ds-text-md:   1.0625rem;                                          /* 17px */
  --ds-text-lg:   1.125rem;                                           /* 18px */
  --ds-text-xl:   1.25rem;                                            /* 20px */
  --ds-text-2xl:  clamp(1.5rem, 1.35rem + 0.6vw, 1.75rem);            /* 24-28 */
  --ds-text-3xl:  clamp(1.875rem, 1.6rem + 1.2vw, 2.25rem);           /* 30-36 */
  --ds-text-4xl:  clamp(2.25rem, 1.85rem + 1.8vw, 3rem);              /* 36-48 */
  --ds-text-5xl:  clamp(2.75rem, 2.1rem + 2.7vw, 3.75rem);            /* 44-60 */
  --ds-text-6xl:  clamp(3.25rem, 2.4rem + 3.6vw, 4.5rem);             /* 52-72 */
  --ds-text-7xl:  clamp(3.75rem, 2.6rem + 5vw, 5.625rem);             /* 60-90 */

  /* Letter spacing */
  --ds-tracking-tighter: -0.04em;
  --ds-tracking-tight:   -0.02em;
  --ds-tracking-normal:   0em;
  --ds-tracking-wide:     0.02em;
  --ds-tracking-wider:    0.08em;
  --ds-tracking-widest:   0.16em;

  /* Line height */
  --ds-leading-none: 1;
  --ds-leading-tight: 1.15;
  --ds-leading-snug: 1.3;
  --ds-leading-normal: 1.55;
  --ds-leading-relaxed: 1.7;

  /* === SPACING (4px base scale) === */
  --ds-space-0: 0;
  --ds-space-1: 0.25rem;   /* 4 */
  --ds-space-2: 0.5rem;    /* 8 */
  --ds-space-3: 0.75rem;   /* 12 */
  --ds-space-4: 1rem;      /* 16 */
  --ds-space-5: 1.25rem;   /* 20 */
  --ds-space-6: 1.5rem;    /* 24 */
  --ds-space-7: 1.75rem;   /* 28 */
  --ds-space-8: 2rem;      /* 32 */
  --ds-space-10: 2.5rem;   /* 40 */
  --ds-space-12: 3rem;     /* 48 */
  --ds-space-16: 4rem;     /* 64 */
  --ds-space-20: 5rem;     /* 80 */
  --ds-space-24: 6rem;     /* 96 */
  --ds-space-32: 8rem;     /* 128 */

  /* === RADII === */
  --ds-r-1: 6px;
  --ds-r-2: 10px;
  --ds-r-3: 14px;
  --ds-r-4: 20px;
  --ds-r-5: 28px;
  --ds-r-pill: 9999px;

  /* === SHADOWS — multi-layer, Vercel/Linear style === */
  --ds-shadow-1: 0 1px 2px rgba(0, 0, 0, 0.18), 0 0 0 1px var(--ds-line-1);
  --ds-shadow-2: 0 2px 6px rgba(0, 0, 0, 0.22), 0 1px 2px rgba(0, 0, 0, 0.14), 0 0 0 1px var(--ds-line-1);
  --ds-shadow-3: 0 8px 24px rgba(0, 0, 0, 0.28), 0 2px 6px rgba(0, 0, 0, 0.18), 0 0 0 1px var(--ds-line-2);
  --ds-shadow-4: 0 16px 48px rgba(0, 0, 0, 0.36), 0 4px 12px rgba(0, 0, 0, 0.22), 0 0 0 1px var(--ds-line-2);
  --ds-shadow-5: 0 32px 96px rgba(0, 0, 0, 0.45), 0 8px 24px rgba(0, 0, 0, 0.30), 0 0 0 1px var(--ds-line-3);

  /* Inner highlight for premium glass cards */
  --ds-rim:        inset 0 1px 0 rgba(255, 255, 255, 0.06);
  --ds-rim-strong: inset 0 1px 0 rgba(255, 255, 255, 0.10);

  /* Glows */
  --ds-glow-accent: 0 0 0 1px var(--ds-accent-tint), 0 0 24px var(--ds-accent-glow);
  --ds-glow-soft:   0 0 60px rgba(255, 199, 0, 0.15);

  /* === MOTION === */
  --ds-dur-1: 120ms;
  --ds-dur-2: 200ms;
  --ds-dur-3: 320ms;
  --ds-dur-4: 480ms;
  --ds-dur-5: 720ms;
  --ds-ease-out:   cubic-bezier(0.22, 1, 0.36, 1);
  --ds-ease-in:    cubic-bezier(0.5, 0, 0.75, 0);
  --ds-ease-in-out:cubic-bezier(0.65, 0, 0.35, 1);
  --ds-ease-spring:cubic-bezier(0.34, 1.56, 0.64, 1);

  /* === Z-INDEX === */
  --ds-z-base: 0;
  --ds-z-raised: 10;
  --ds-z-sticky: 100;
  --ds-z-overlay: 1000;
  --ds-z-modal: 1100;
  --ds-z-toast: 1200;
}

/* =========================================================
   TYPOGRAPHY UTILITIES
   ========================================================= */
.ds-font-display { font-family: var(--ds-font-display); }
.ds-font-body    { font-family: var(--ds-font-body); }
.ds-font-mono    { font-family: var(--ds-font-mono); }

.ds-display-1 {
  font-family: var(--ds-font-display);
  font-size: var(--ds-text-7xl);
  line-height: var(--ds-leading-none);
  letter-spacing: var(--ds-tracking-tighter);
  font-weight: 800;
  text-wrap: balance;
}
.ds-display-2 {
  font-family: var(--ds-font-display);
  font-size: var(--ds-text-6xl);
  line-height: var(--ds-leading-tight);
  letter-spacing: var(--ds-tracking-tighter);
  font-weight: 800;
  text-wrap: balance;
}
.ds-h1 {
  font-family: var(--ds-font-display);
  font-size: var(--ds-text-5xl);
  line-height: var(--ds-leading-tight);
  letter-spacing: var(--ds-tracking-tight);
  font-weight: 700;
  text-wrap: balance;
}
.ds-h2 {
  font-family: var(--ds-font-display);
  font-size: var(--ds-text-4xl);
  line-height: var(--ds-leading-tight);
  letter-spacing: var(--ds-tracking-tight);
  font-weight: 700;
  text-wrap: balance;
}
.ds-h3 {
  font-family: var(--ds-font-display);
  font-size: var(--ds-text-3xl);
  line-height: var(--ds-leading-snug);
  letter-spacing: var(--ds-tracking-tight);
  font-weight: 600;
}
.ds-h4 {
  font-family: var(--ds-font-display);
  font-size: var(--ds-text-2xl);
  line-height: var(--ds-leading-snug);
  letter-spacing: var(--ds-tracking-tight);
  font-weight: 600;
}
.ds-lead {
  font-size: var(--ds-text-lg);
  line-height: var(--ds-leading-relaxed);
  color: var(--ds-fg-2);
  text-wrap: pretty;
}
.ds-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--ds-space-2);
  font-size: var(--ds-text-xs);
  letter-spacing: var(--ds-tracking-widest);
  text-transform: uppercase;
  font-weight: 600;
  color: var(--ds-fg-3);
}
.ds-eyebrow::before {
  content: '';
  width: 24px;
  height: 1px;
  background: currentColor;
  opacity: 0.5;
}
.ds-text-gradient {
  background: linear-gradient(135deg, var(--ds-accent-hi) 0%, var(--ds-accent) 50%, var(--ds-accent-lo) 100%);
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}
.ds-text-shimmer {
  background: linear-gradient(110deg, var(--ds-fg-1) 30%, var(--ds-accent-hi) 50%, var(--ds-fg-1) 70%);
  background-size: 200% 100%;
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  animation: ds-shimmer 4s linear infinite;
}
@keyframes ds-shimmer {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}
.ds-text-balance { text-wrap: balance; }
.ds-text-pretty  { text-wrap: pretty; }

/* =========================================================
   BUTTONS  .ds-btn
   ========================================================= */
.ds-btn {
  --btn-bg: var(--ds-bg-3);
  --btn-fg: var(--ds-fg-1);
  --btn-bd: var(--ds-line-2);
  --btn-h:  44px;
  --btn-px: 1.125rem;
  --btn-fs: var(--ds-text-sm);
  --btn-fw: 600;

  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  height: var(--btn-h);
  padding: 0 var(--btn-px);
  font-family: var(--ds-font-body);
  font-size: var(--btn-fs);
  font-weight: var(--btn-fw);
  letter-spacing: -0.01em;
  color: var(--btn-fg);
  background: var(--btn-bg);
  border: 1px solid var(--btn-bd);
  border-radius: var(--ds-r-2);
  cursor: pointer;
  user-select: none;
  white-space: nowrap;
  text-decoration: none;
  transition:
    transform var(--ds-dur-2) var(--ds-ease-out),
    background var(--ds-dur-2) var(--ds-ease-out),
    border-color var(--ds-dur-2) var(--ds-ease-out),
    box-shadow var(--ds-dur-3) var(--ds-ease-out),
    color var(--ds-dur-2) var(--ds-ease-out);
  box-shadow: var(--ds-rim);
  overflow: hidden;
  isolation: isolate;
}
.ds-btn::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(180deg, rgba(255,255,255,0.06), transparent 35%);
  pointer-events: none;
  opacity: 0.7;
  transition: opacity var(--ds-dur-3) var(--ds-ease-out);
  z-index: -1;
}
.ds-btn:hover { border-color: var(--ds-line-3); background: var(--ds-bg-4); transform: translateY(-1px); }
.ds-btn:active { transform: translateY(0); }
.ds-btn:focus-visible { outline: none; box-shadow: var(--ds-rim), 0 0 0 3px var(--ds-accent-tint); }
.ds-btn:disabled { opacity: 0.5; pointer-events: none; }

/* Primary — gold gradient */
.ds-btn--primary {
  --btn-bg: linear-gradient(135deg, var(--ds-accent-hi) 0%, var(--ds-accent) 100%);
  --btn-fg: #1A1300;
  --btn-bd: rgba(255, 199, 0, 0.4);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.35),
    inset 0 -1px 0 rgba(0,0,0,0.15),
    0 1px 2px rgba(0,0,0,0.20),
    0 6px 18px rgba(255, 199, 0, 0.28);
}
.ds-btn--primary:hover {
  --btn-bg: linear-gradient(135deg, #FFE066 0%, var(--ds-accent-hi) 100%);
  border-color: rgba(255, 199, 0, 0.6);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.4),
    inset 0 -1px 0 rgba(0,0,0,0.15),
    0 2px 4px rgba(0,0,0,0.20),
    0 12px 32px rgba(255, 199, 0, 0.4);
}

/* Ghost — transparent */
.ds-btn--ghost {
  --btn-bg: transparent;
  --btn-fg: var(--ds-fg-1);
  --btn-bd: transparent;
  box-shadow: none;
}
.ds-btn--ghost:hover { background: var(--ds-bg-3); border-color: var(--ds-line-2); }

/* Outline */
.ds-btn--outline {
  --btn-bg: transparent;
  --btn-fg: var(--ds-fg-1);
  --btn-bd: var(--ds-line-3);
  box-shadow: none;
}
.ds-btn--outline:hover { background: var(--ds-bg-3); border-color: var(--ds-fg-3); }

/* Danger */
.ds-btn--danger {
  --btn-bg: linear-gradient(135deg, #FB7185 0%, #E11D48 100%);
  --btn-fg: #FFFFFF;
  --btn-bd: rgba(225, 29, 72, 0.4);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.25),
    0 6px 18px rgba(225, 29, 72, 0.30);
}
.ds-btn--danger:hover { filter: brightness(1.08); }

/* Sizes */
.ds-btn--sm { --btn-h: 34px; --btn-px: 0.875rem; --btn-fs: var(--ds-text-xs); }
.ds-btn--lg { --btn-h: 52px; --btn-px: 1.5rem; --btn-fs: var(--ds-text-base); }
.ds-btn--xl { --btn-h: 60px; --btn-px: 2rem; --btn-fs: var(--ds-text-md); --btn-fw: 700; border-radius: var(--ds-r-3); }

/* Icon-only */
.ds-btn--icon { padding: 0; width: var(--btn-h); }

/* Block */
.ds-btn--block { width: 100%; }

/* =========================================================
   CARDS  .ds-card
   ========================================================= */
.ds-card {
  position: relative;
  background: var(--ds-bg-2);
  border: 1px solid var(--ds-line-2);
  border-radius: var(--ds-r-3);
  padding: var(--ds-space-6);
  box-shadow: var(--ds-shadow-2), var(--ds-rim);
  transition:
    transform var(--ds-dur-3) var(--ds-ease-out),
    border-color var(--ds-dur-3) var(--ds-ease-out),
    box-shadow var(--ds-dur-3) var(--ds-ease-out),
    background var(--ds-dur-3) var(--ds-ease-out);
}
.ds-card--interactive { cursor: pointer; }
.ds-card--interactive:hover {
  transform: translateY(-2px);
  border-color: var(--ds-line-3);
  background: var(--ds-bg-3);
  box-shadow: var(--ds-shadow-3), var(--ds-rim-strong);
}
.ds-card--elevated { box-shadow: var(--ds-shadow-3), var(--ds-rim); background: var(--ds-bg-3); }
.ds-card--flat { box-shadow: none; background: var(--ds-bg-1); }

/* Premium gradient border */
.ds-card--premium {
  position: relative;
  background:
    linear-gradient(var(--ds-bg-2), var(--ds-bg-2)) padding-box,
    linear-gradient(135deg, var(--ds-accent-tint), transparent 30%, transparent 70%, var(--ds-accent-tint)) border-box;
  border: 1px solid transparent;
  box-shadow: var(--ds-shadow-3), var(--ds-rim);
}
.ds-card--premium::before {
  content: '';
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(135deg, var(--ds-accent-glow), transparent 40%, transparent 60%, var(--ds-accent-glow));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  opacity: 0.5;
  pointer-events: none;
  transition: opacity var(--ds-dur-3) var(--ds-ease-out);
}
.ds-card--premium:hover::before { opacity: 1; }

/* Glass card */
.ds-card--glass {
  background: rgba(20, 20, 26, 0.55);
  backdrop-filter: blur(24px) saturate(140%);
  -webkit-backdrop-filter: blur(24px) saturate(140%);
  border: 1px solid var(--ds-line-2);
}
[data-theme="light"] .ds-card--glass { background: rgba(255, 255, 255, 0.65); }

/* Section header inside card */
.ds-card-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--ds-space-4);
  margin-bottom: var(--ds-space-5);
}
.ds-card-title {
  font-family: var(--ds-font-display);
  font-size: var(--ds-text-xl);
  font-weight: 700;
  letter-spacing: var(--ds-tracking-tight);
  color: var(--ds-fg-1);
  margin: 0;
}
.ds-card-desc {
  font-size: var(--ds-text-sm);
  color: var(--ds-fg-3);
  margin-top: var(--ds-space-1);
  line-height: var(--ds-leading-normal);
}

/* =========================================================
   FORM FIELDS  .ds-field / .ds-input / .ds-select / .ds-textarea
   ========================================================= */
.ds-field {
  display: flex;
  flex-direction: column;
  gap: var(--ds-space-2);
}
.ds-label {
  font-size: var(--ds-text-sm);
  font-weight: 600;
  color: var(--ds-fg-2);
  letter-spacing: -0.005em;
}
.ds-helper {
  font-size: var(--ds-text-xs);
  color: var(--ds-fg-3);
  line-height: var(--ds-leading-snug);
}
.ds-helper--error { color: var(--ds-danger); }

.ds-input,
.ds-select,
.ds-textarea {
  width: 100%;
  padding: 0.75rem 0.875rem;
  background: var(--ds-bg-1);
  border: 1px solid var(--ds-line-2);
  border-radius: var(--ds-r-2);
  color: var(--ds-fg-1);
  font-family: var(--ds-font-body);
  font-size: var(--ds-text-sm);
  line-height: var(--ds-leading-snug);
  transition:
    border-color var(--ds-dur-2) var(--ds-ease-out),
    background var(--ds-dur-2) var(--ds-ease-out),
    box-shadow var(--ds-dur-2) var(--ds-ease-out);
  box-shadow: var(--ds-rim);
}
.ds-input::placeholder,
.ds-textarea::placeholder { color: var(--ds-fg-4); }

.ds-input:hover,
.ds-select:hover,
.ds-textarea:hover { border-color: var(--ds-line-3); background: var(--ds-bg-2); }

.ds-input:focus,
.ds-select:focus,
.ds-textarea:focus {
  outline: none;
  border-color: var(--ds-accent);
  background: var(--ds-bg-2);
  box-shadow: var(--ds-rim), 0 0 0 3px var(--ds-accent-tint);
}

.ds-textarea {
  min-height: 120px;
  resize: vertical;
  line-height: var(--ds-leading-normal);
}
.ds-input--lg { padding: 1rem 1.125rem; font-size: var(--ds-text-base); border-radius: var(--ds-r-3); }

/* =========================================================
   CHIPS / BADGES  .ds-chip / .ds-badge
   ========================================================= */
.ds-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.3125rem 0.75rem;
  font-size: var(--ds-text-xs);
  font-weight: 600;
  color: var(--ds-fg-2);
  background: var(--ds-bg-3);
  border: 1px solid var(--ds-line-2);
  border-radius: var(--ds-r-pill);
  letter-spacing: -0.005em;
}
.ds-chip--accent {
  background: var(--ds-accent-tint);
  border-color: var(--ds-accent-tint);
  color: var(--ds-accent-hi);
}
.ds-chip--success {
  background: rgba(52, 211, 153, 0.10);
  border-color: rgba(52, 211, 153, 0.20);
  color: var(--ds-success);
}
.ds-chip--danger {
  background: rgba(248, 113, 113, 0.10);
  border-color: rgba(248, 113, 113, 0.22);
  color: var(--ds-danger);
}
.ds-chip--violet {
  background: rgba(167, 139, 250, 0.10);
  border-color: rgba(167, 139, 250, 0.22);
  color: var(--ds-violet);
}
.ds-chip-dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: currentColor;
  box-shadow: 0 0 8px currentColor;
}

.ds-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  padding: 0 0.375rem;
  font-size: var(--ds-text-2xs);
  font-weight: 700;
  color: #1A1300;
  background: var(--ds-accent);
  border-radius: var(--ds-r-pill);
}

/* =========================================================
   MODAL  .ds-modal-backdrop / .ds-modal
   ========================================================= */
.ds-modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.55);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  z-index: var(--ds-z-overlay);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--ds-space-6);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--ds-dur-3) var(--ds-ease-out);
}
.ds-modal-backdrop.is-open { opacity: 1; pointer-events: auto; }

.ds-modal {
  position: relative;
  width: 100%;
  max-width: 560px;
  max-height: calc(100vh - 4rem);
  overflow: auto;
  background: var(--ds-bg-2);
  border: 1px solid var(--ds-line-2);
  border-radius: var(--ds-r-4);
  padding: var(--ds-space-8);
  box-shadow: var(--ds-shadow-5), var(--ds-rim-strong);
  transform: translateY(8px) scale(0.985);
  opacity: 0;
  transition:
    transform var(--ds-dur-3) var(--ds-ease-spring),
    opacity var(--ds-dur-3) var(--ds-ease-out);
  z-index: var(--ds-z-modal);
}
.ds-modal-backdrop.is-open .ds-modal { transform: translateY(0) scale(1); opacity: 1; }

.ds-modal-close {
  position: absolute;
  top: var(--ds-space-4);
  right: var(--ds-space-4);
  width: 36px; height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--ds-r-2);
  background: transparent;
  color: var(--ds-fg-3);
  border: 1px solid transparent;
  cursor: pointer;
  transition: all var(--ds-dur-2) var(--ds-ease-out);
}
.ds-modal-close:hover { background: var(--ds-bg-3); color: var(--ds-fg-1); border-color: var(--ds-line-2); }

/* =========================================================
   SKELETON  .ds-skeleton
   ========================================================= */
.ds-skeleton {
  display: block;
  position: relative;
  overflow: hidden;
  background: var(--ds-bg-3);
  border-radius: var(--ds-r-2);
  min-height: 12px;
}
.ds-skeleton::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.05), transparent);
  animation: ds-skel 1.4s linear infinite;
  transform: translateX(-100%);
}
@keyframes ds-skel { to { transform: translateX(100%); } }

/* =========================================================
   SURFACE / EFFECTS UTILITIES
   ========================================================= */
.ds-glass {
  background: rgba(14, 14, 17, 0.55);
  backdrop-filter: blur(20px) saturate(140%);
  -webkit-backdrop-filter: blur(20px) saturate(140%);
  border: 1px solid var(--ds-line-2);
}
[data-theme="light"] .ds-glass { background: rgba(255,255,255,0.65); }

.ds-noise {
  position: relative;
  isolation: isolate;
}
.ds-noise::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.04 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
  opacity: 0.5;
  mix-blend-mode: overlay;
  z-index: -1;
}

.ds-aurora {
  position: relative;
  isolation: isolate;
  overflow: hidden;
}
.ds-aurora::before {
  content: '';
  position: absolute;
  inset: -20%;
  z-index: -1;
  background:
    radial-gradient(ellipse 40% 30% at 20% 30%, rgba(255, 199, 0, 0.18), transparent 60%),
    radial-gradient(ellipse 35% 25% at 80% 20%, rgba(167, 139, 250, 0.14), transparent 55%),
    radial-gradient(ellipse 50% 40% at 50% 90%, rgba(96, 165, 250, 0.10), transparent 60%);
  filter: blur(40px);
  animation: ds-aurora 20s ease-in-out infinite alternate;
}
@keyframes ds-aurora {
  0%   { transform: translate(0,0) scale(1); }
  50%  { transform: translate(2%, -1%) scale(1.05); }
  100% { transform: translate(-1%, 2%) scale(0.97); }
}

.ds-divider {
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--ds-line-2), transparent);
  border: 0;
  margin: var(--ds-space-8) 0;
}

/* =========================================================
   MOTION HELPERS — entrance animations
   ========================================================= */
.ds-anim-fade-up {
  animation: ds-fade-up var(--ds-dur-4) var(--ds-ease-out) both;
}
.ds-anim-fade-in {
  animation: ds-fade-in var(--ds-dur-3) var(--ds-ease-out) both;
}
.ds-anim-scale-in {
  animation: ds-scale-in var(--ds-dur-3) var(--ds-ease-spring) both;
}
.ds-anim-slide-right {
  animation: ds-slide-right var(--ds-dur-4) var(--ds-ease-out) both;
}
.ds-anim-delay-1 { animation-delay: 80ms; }
.ds-anim-delay-2 { animation-delay: 160ms; }
.ds-anim-delay-3 { animation-delay: 240ms; }
.ds-anim-delay-4 { animation-delay: 320ms; }
.ds-anim-delay-5 { animation-delay: 400ms; }
.ds-anim-delay-6 { animation-delay: 480ms; }

@keyframes ds-fade-up {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes ds-fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes ds-scale-in {
  from { opacity: 0; transform: scale(0.96); }
  to   { opacity: 1; transform: scale(1); }
}
@keyframes ds-slide-right {
  from { opacity: 0; transform: translateX(-24px); }
  to   { opacity: 1; transform: translateX(0); }
}

@media (prefers-reduced-motion: reduce) {
  .ds-anim-fade-up,
  .ds-anim-fade-in,
  .ds-anim-scale-in,
  .ds-anim-slide-right,
  .ds-text-shimmer,
  .ds-aurora::before {
    animation: none !important;
  }
  * { transition-duration: 0.01ms !important; }
}

/* =========================================================
   HOVER EFFECT UTILITIES
   ========================================================= */
.ds-hover-lift  { transition: transform var(--ds-dur-3) var(--ds-ease-out), box-shadow var(--ds-dur-3) var(--ds-ease-out); }
.ds-hover-lift:hover { transform: translateY(-3px); box-shadow: var(--ds-shadow-4), var(--ds-rim); }

.ds-hover-glow  { transition: box-shadow var(--ds-dur-3) var(--ds-ease-out); }
.ds-hover-glow:hover { box-shadow: var(--ds-glow-accent); }

.ds-hover-tilt { transition: transform var(--ds-dur-3) var(--ds-ease-out); }
.ds-hover-tilt:hover { transform: perspective(800px) rotateX(2deg) rotateY(-2deg) scale(1.01); }

/* =========================================================
   FOCUS RING — uniform focus state
   ========================================================= */
.ds-focus-ring:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px var(--ds-accent-tint), 0 0 0 4px var(--ds-accent);
}

/* =========================================================
   LAYOUT HELPERS
   ========================================================= */
.ds-container {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding-left: var(--ds-space-6);
  padding-right: var(--ds-space-6);
}
.ds-container--wide { max-width: 1440px; }
.ds-container--narrow { max-width: 880px; }
.ds-container--prose { max-width: 680px; }

.ds-stack { display: flex; flex-direction: column; }
.ds-stack-2 { gap: var(--ds-space-2); }
.ds-stack-3 { gap: var(--ds-space-3); }
.ds-stack-4 { gap: var(--ds-space-4); }
.ds-stack-6 { gap: var(--ds-space-6); }
.ds-stack-8 { gap: var(--ds-space-8); }
.ds-stack-12 { gap: var(--ds-space-12); }

.ds-row { display: flex; align-items: center; gap: var(--ds-space-4); }
.ds-row--between { justify-content: space-between; }
.ds-row--end { justify-content: flex-end; }
.ds-row--wrap { flex-wrap: wrap; }

.ds-grid { display: grid; gap: var(--ds-space-4); }
.ds-grid-2 { grid-template-columns: repeat(2, 1fr); }
.ds-grid-3 { grid-template-columns: repeat(3, 1fr); }
.ds-grid-4 { grid-template-columns: repeat(4, 1fr); }
.ds-grid-auto { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }

@media (max-width: 900px) {
  .ds-grid-3, .ds-grid-4 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
  .ds-grid-2, .ds-grid-3, .ds-grid-4 { grid-template-columns: 1fr; }
}

/* =========================================================
   MUTED HEADINGS / DECORATIVE NUMBERS
   ========================================================= */
.ds-num {
  font-family: var(--ds-font-display);
  font-variant-numeric: tabular-nums;
  font-weight: 800;
  letter-spacing: var(--ds-tracking-tighter);
}
.ds-kbd {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.5rem;
  height: 1.5rem;
  padding: 0 0.4rem;
  font-family: var(--ds-font-mono);
  font-size: var(--ds-text-xs);
  font-weight: 600;
  color: var(--ds-fg-2);
  background: var(--ds-bg-3);
  border: 1px solid var(--ds-line-2);
  border-bottom-width: 2px;
  border-radius: var(--ds-r-1);
}

/* =========================================================
   SCROLLBAR — premium thin
   ========================================================= */
.ds-scroll::-webkit-scrollbar { width: 10px; height: 10px; }
.ds-scroll::-webkit-scrollbar-track { background: transparent; }
.ds-scroll::-webkit-scrollbar-thumb {
  background: var(--ds-bg-4);
  border-radius: var(--ds-r-pill);
  border: 2px solid transparent;
  background-clip: padding-box;
}
.ds-scroll::-webkit-scrollbar-thumb:hover { background: var(--ds-fg-4); background-clip: padding-box; border: 2px solid transparent; }

/* =========================================================
   GLOBAL LIGHT MODE NUCLEAR RESET
   Ostatnia sekcja — najwyższy priorytet, !important.
   Wymusza czytelność wszędzie gdzie design-system jest załączony.
   Pokrywa zarówno .ds-* jak i legacy klasy (.card, .btn, .modal itd.)
   oraz native elementy (textarea, input, select, h1-h6, p, a).
   ========================================================= */

/* Baseline — body/html w light */
html[data-theme="light"],
html[data-theme="light"] body {
  background: #F4F4F7 !important;
  color: #18181B !important;
}

/* Kontenery i karty */
[data-theme="light"] .container,
[data-theme="light"] .page-wrap,
[data-theme="light"] main,
[data-theme="light"] section,
[data-theme="light"] .step-content { color: #18181B !important; }

[data-theme="light"] .ds-card,
[data-theme="light"] .ds-card--premium,
[data-theme="light"] .ds-card--glass,
[data-theme="light"] .ds-card--elevated,
[data-theme="light"] .ds-card--interactive,
[data-theme="light"] .ds-card--flat,
[data-theme="light"] .card,
[data-theme="light"] .main-card,
[data-theme="light"] .feature-card,
[data-theme="light"] .preset-card,
[data-theme="light"] .category-card,
[data-theme="light"] .question-card,
[data-theme="light"] .result-section,
[data-theme="light"] .review-section,
[data-theme="light"] .reasoning-box,
[data-theme="light"] .score-item,
[data-theme="light"] .score-total,
[data-theme="light"] .issue-item,
[data-theme="light"] .suggestion-item,
[data-theme="light"] .uploaded-file,
[data-theme="light"] .modal-content,
[data-theme="light"] .ds-modal,
[data-theme="light"] .auth-tab,
[data-theme="light"] .ai-evolution-promo,
[data-theme="light"] .promo-card,
[data-theme="light"] .similar-result-item,
[data-theme="light"] .history-item,
[data-theme="light"] .prompt-item,
[data-theme="light"] .collection-item,
[data-theme="light"] .api-key-item,
[data-theme="light"] .batch-item,
[data-theme="light"] .version-item,
[data-theme="light"] .plan-card,
[data-theme="light"] .testimonial-card,
[data-theme="light"] .faq-item,
[data-theme="light"] .account-card,
[data-theme="light"] .admin-card,
[data-theme="light"] .queue-item,
[data-theme="light"] .landing-item,
[data-theme="light"] .mp-card {
  background: #FFFFFF !important;
  color: #18181B !important;
  border-color: rgba(15, 15, 25, 0.08) !important;
  box-shadow: 0 1px 2px rgba(15, 15, 25, 0.04), 0 4px 12px rgba(15, 15, 25, 0.04) !important;
}

/* Premium card gradient border w light */
[data-theme="light"] .ds-card--premium {
  background:
    linear-gradient(#FFFFFF, #FFFFFF) padding-box,
    linear-gradient(135deg, rgba(184, 143, 0, 0.25), rgba(15,15,25,0.08) 30%, rgba(15,15,25,0.08) 70%, rgba(184, 143, 0, 0.25)) border-box !important;
  border: 1px solid transparent !important;
}

/* Glass cards + topnav */
[data-theme="light"] .ds-glass,
[data-theme="light"] .ds-card--glass,
[data-theme="light"] .ds-topnav {
  background: rgba(255, 255, 255, 0.82) !important;
  backdrop-filter: blur(20px) saturate(160%) !important;
  -webkit-backdrop-filter: blur(20px) saturate(160%) !important;
  border-bottom-color: rgba(15, 15, 25, 0.08) !important;
}

/* Aurora background — subtle w light */
[data-theme="light"] .ds-aurora::before,
[data-theme="light"] .page-aurora {
  background:
    radial-gradient(ellipse 50% 35% at 15% 12%, rgba(184, 143, 0, 0.04), transparent 60%),
    radial-gradient(ellipse 45% 30% at 85% 18%, rgba(167, 139, 250, 0.035), transparent 55%),
    radial-gradient(ellipse 60% 45% at 50% 90%, rgba(96, 165, 250, 0.03), transparent 60%) !important;
  filter: blur(80px) !important;
}
[data-theme="light"] #particles-canvas { opacity: 0.18 !important; }

/* ======= INPUTY — czytelny text na białym ======= */
[data-theme="light"] textarea,
[data-theme="light"] input[type="text"],
[data-theme="light"] input[type="email"],
[data-theme="light"] input[type="password"],
[data-theme="light"] input[type="number"],
[data-theme="light"] input[type="search"],
[data-theme="light"] input[type="tel"],
[data-theme="light"] input[type="url"],
[data-theme="light"] input[type="date"],
[data-theme="light"] input[type="datetime-local"],
[data-theme="light"] input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]):not([type="file"]),
[data-theme="light"] select,
[data-theme="light"] .ds-input,
[data-theme="light"] .ds-select,
[data-theme="light"] .ds-textarea,
[data-theme="light"] .input-text,
[data-theme="light"] .input-textarea,
[data-theme="light"] .output-textarea {
  background: #FFFFFF !important;
  color: #18181B !important;
  -webkit-text-fill-color: #18181B !important;
  border: 1px solid rgba(15, 15, 25, 0.14) !important;
  caret-color: #B88F00 !important;
}
[data-theme="light"] textarea::placeholder,
[data-theme="light"] input::placeholder,
[data-theme="light"] .ds-input::placeholder,
[data-theme="light"] .ds-textarea::placeholder,
[data-theme="light"] .input-text::placeholder,
[data-theme="light"] .input-textarea::placeholder,
[data-theme="light"] .output-textarea::placeholder {
  color: rgba(15, 15, 25, 0.42) !important;
  -webkit-text-fill-color: rgba(15, 15, 25, 0.42) !important;
  opacity: 1 !important;
}
[data-theme="light"] textarea:focus,
[data-theme="light"] input:focus,
[data-theme="light"] select:focus,
[data-theme="light"] .ds-input:focus,
[data-theme="light"] .ds-select:focus,
[data-theme="light"] .ds-textarea:focus,
[data-theme="light"] .input-text:focus,
[data-theme="light"] .input-textarea:focus,
[data-theme="light"] .output-textarea:focus {
  border-color: #B88F00 !important;
  box-shadow: 0 0 0 3px rgba(184, 143, 0, 0.18) !important;
  outline: none !important;
}

/* Output textarea (mono, critical readability) */
[data-theme="light"] .output-textarea,
[data-theme="light"] textarea#promptV01,
[data-theme="light"] textarea#promptOutput,
[data-theme="light"] .prompt-output {
  background: #FAFAFA !important;
  color: #0F172A !important;
  -webkit-text-fill-color: #0F172A !important;
  font-family: 'JetBrains Mono', ui-monospace, monospace !important;
  border: 1px solid rgba(15, 15, 25, 0.12) !important;
}

/* ======= NAGŁÓWKI I TEKST ======= */
[data-theme="light"] h1,
[data-theme="light"] h2,
[data-theme="light"] h3,
[data-theme="light"] h4,
[data-theme="light"] h5,
[data-theme="light"] h6,
[data-theme="light"] .ds-h1,
[data-theme="light"] .ds-h2,
[data-theme="light"] .ds-h3,
[data-theme="light"] .ds-h4,
[data-theme="light"] .ds-display-1,
[data-theme="light"] .ds-display-2,
[data-theme="light"] .ds-card-title { color: #0F172A !important; }

[data-theme="light"] p,
[data-theme="light"] .subtitle,
[data-theme="light"] .subtitle-small,
[data-theme="light"] .ds-lead,
[data-theme="light"] .hero-sub,
[data-theme="light"] .input-label,
[data-theme="light"] .ds-label,
[data-theme="light"] label,
[data-theme="light"] .preset-name,
[data-theme="light"] .category-name,
[data-theme="light"] .question-text,
[data-theme="light"] .reasoning-box,
[data-theme="light"] .issue-text,
[data-theme="light"] .suggestion-text,
[data-theme="light"] .ds-helper,
[data-theme="light"] .promo-text { color: #3F3F46 !important; }

[data-theme="light"] .preset-desc,
[data-theme="light"] .text-muted,
[data-theme="light"] .text-secondary,
[data-theme="light"] .nav-label,
[data-theme="light"] .ds-card-desc,
[data-theme="light"] .upload-hint,
[data-theme="light"] .upload-hint-inline,
[data-theme="light"] .char-counter,
[data-theme="light"] small { color: #52525B !important; }

/* Hero gradient (gold, ciemniejszy w light) */
[data-theme="light"] .ds-text-gradient,
[data-theme="light"] .text-gradient,
[data-theme="light"] .gradient {
  background: linear-gradient(135deg, #B88F00 0%, #D4A017 50%, #8A6900 100%) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  color: transparent !important;
}
[data-theme="light"] .ds-text-shimmer {
  background: linear-gradient(110deg, #18181B 30%, #D4A017 50%, #18181B 70%) !important;
  background-size: 200% 100% !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  color: transparent !important;
}

/* Eyebrow */
[data-theme="light"] .ds-eyebrow { color: #71717A !important; }

/* ======= BUTTONS ======= */
[data-theme="light"] .ds-btn,
[data-theme="light"] .btn {
  background: #FFFFFF !important;
  color: #18181B !important;
  border: 1px solid rgba(15, 15, 25, 0.14) !important;
  box-shadow: 0 1px 2px rgba(15, 15, 25, 0.04) !important;
}
[data-theme="light"] .ds-btn:hover,
[data-theme="light"] .btn:hover {
  background: #F4F4F7 !important;
  border-color: rgba(15, 15, 25, 0.22) !important;
}
[data-theme="light"] .ds-btn--primary,
[data-theme="light"] .btn-primary,
[data-theme="light"] .btn-accent {
  background: linear-gradient(135deg, #D4A017 0%, #B88F00 100%) !important;
  color: #1A1300 !important;
  -webkit-text-fill-color: #1A1300 !important;
  border-color: rgba(184, 143, 0, 0.4) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.45),
    0 1px 2px rgba(15,15,25,0.10),
    0 6px 18px rgba(184, 143, 0, 0.22) !important;
}
[data-theme="light"] .ds-btn--primary:hover,
[data-theme="light"] .btn-primary:hover,
[data-theme="light"] .btn-accent:hover {
  background: linear-gradient(135deg, #E0AE2A 0%, #C99B0A 100%) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.50),
    0 2px 4px rgba(15,15,25,0.10),
    0 12px 28px rgba(184, 143, 0, 0.32) !important;
}
[data-theme="light"] .ds-btn--ghost,
[data-theme="light"] .ds-btn--outline,
[data-theme="light"] .btn-secondary,
[data-theme="light"] .btn-secondary-outline {
  background: transparent !important;
  color: #18181B !important;
  border: 1px solid rgba(15, 15, 25, 0.14) !important;
}
[data-theme="light"] .ds-btn--ghost:hover,
[data-theme="light"] .ds-btn--outline:hover,
[data-theme="light"] .btn-secondary:hover {
  background: rgba(15, 15, 25, 0.05) !important;
  border-color: rgba(15, 15, 25, 0.22) !important;
}
[data-theme="light"] .ds-btn--danger {
  background: linear-gradient(135deg, #FB7185 0%, #E11D48 100%) !important;
  color: #FFFFFF !important;
  -webkit-text-fill-color: #FFFFFF !important;
}

/* ======= CHIPS / BADGES ======= */
[data-theme="light"] .ds-chip,
[data-theme="light"] .chip,
[data-theme="light"] .badge {
  background: #F4F4F7 !important;
  color: #3F3F46 !important;
  border: 1px solid rgba(15, 15, 25, 0.10) !important;
}
[data-theme="light"] .ds-chip--accent,
[data-theme="light"] .badge-accent {
  background: rgba(184, 143, 0, 0.14) !important;
  color: #8A6900 !important;
  border-color: rgba(184, 143, 0, 0.32) !important;
}
[data-theme="light"] .ds-chip--success,
[data-theme="light"] .badge-success {
  background: rgba(16, 185, 129, 0.12) !important;
  color: #047857 !important;
  border-color: rgba(16, 185, 129, 0.30) !important;
}
[data-theme="light"] .ds-chip--danger {
  background: rgba(248, 113, 113, 0.12) !important;
  color: #B91C1C !important;
  border-color: rgba(248, 113, 113, 0.30) !important;
}
[data-theme="light"] .ds-chip--violet {
  background: rgba(139, 92, 246, 0.10) !important;
  color: #6D28D9 !important;
  border-color: rgba(139, 92, 246, 0.30) !important;
}
[data-theme="light"] .ds-badge {
  background: #B88F00 !important;
  color: #1A1300 !important;
}

/* ======= NAV ======= */
[data-theme="light"] .ds-nav-link,
[data-theme="light"] .ds-nav-link:visited,
[data-theme="light"] .nav-item { color: #3F3F46 !important; }
[data-theme="light"] .ds-nav-link:hover,
[data-theme="light"] .nav-item:hover { color: #18181B !important; background: rgba(15, 15, 25, 0.05) !important; }
[data-theme="light"] .ds-nav-link[aria-current="page"] { color: #18181B !important; background: rgba(184, 143, 0, 0.10) !important; }
[data-theme="light"] .ds-nav-divider { background: rgba(15, 15, 25, 0.10) !important; }
[data-theme="light"] .ds-nav-pkg-badge,
[data-theme="light"] .account-badge {
  background: #FFFFFF !important;
  color: #3F3F46 !important;
  border: 1px solid rgba(15, 15, 25, 0.12) !important;
}

/* ======= LINKI ======= */
[data-theme="light"] a:not(.ds-btn):not(.btn):not(.ds-nav-link):not(.nav-item) {
  color: #B88F00 !important;
}
[data-theme="light"] a:not(.ds-btn):not(.btn):not(.ds-nav-link):not(.nav-item):hover {
  color: #8A6900 !important;
}

/* ======= MODAL ======= */
[data-theme="light"] .ds-modal-backdrop,
[data-theme="light"] .modal {
  background: rgba(15, 15, 25, 0.45) !important;
  backdrop-filter: blur(8px) !important;
  -webkit-backdrop-filter: blur(8px) !important;
}
[data-theme="light"] .ds-modal,
[data-theme="light"] .modal-content {
  background: #FFFFFF !important;
  color: #18181B !important;
  border: 1px solid rgba(15, 15, 25, 0.10) !important;
  box-shadow: 0 24px 64px rgba(15, 15, 25, 0.20) !important;
}
[data-theme="light"] .modal-header,
[data-theme="light"] .modal-footer {
  border-color: rgba(15, 15, 25, 0.08) !important;
  color: #18181B !important;
  background: transparent !important;
}
[data-theme="light"] .ds-modal-close,
[data-theme="light"] .modal-close {
  color: #71717A !important;
  background: transparent !important;
  border: 1px solid transparent !important;
}
[data-theme="light"] .ds-modal-close:hover,
[data-theme="light"] .modal-close:hover {
  background: #F4F4F7 !important;
  color: #18181B !important;
  border-color: rgba(15, 15, 25, 0.12) !important;
}

/* ======= KOD / KBD / MONO ======= */
[data-theme="light"] code,
[data-theme="light"] pre,
[data-theme="light"] kbd,
[data-theme="light"] .ds-kbd {
  background: #F4F4F7 !important;
  color: #18181B !important;
  border: 1px solid rgba(15, 15, 25, 0.12) !important;
}

/* ======= STEPS + PROGRESS ======= */
[data-theme="light"] .step-number {
  background: #FFFFFF !important;
  color: #71717A !important;
  border: 1px solid rgba(15, 15, 25, 0.14) !important;
}
[data-theme="light"] .step.active .step-number {
  background: linear-gradient(135deg, #D4A017, #B88F00) !important;
  color: #1A1300 !important;
  border-color: #B88F00 !important;
  box-shadow: 0 0 0 4px rgba(184, 143, 0, 0.14) !important;
}
[data-theme="light"] .step.completed .step-number {
  background: #10B981 !important;
  color: #FFFFFF !important;
  border-color: #10B981 !important;
}
[data-theme="light"] .step-label { color: #52525B !important; }
[data-theme="light"] .step.active .step-label { color: #18181B !important; }
[data-theme="light"] .step-line,
[data-theme="light"] .progress-bar-track { background: rgba(15, 15, 25, 0.08) !important; }
[data-theme="light"] .progress-bar-fill,
[data-theme="light"] .step-line.filled {
  background: linear-gradient(90deg, #B88F00, #D4A017) !important;
}

/* Score circle */
[data-theme="light"] .score-circle {
  background: linear-gradient(135deg, #FFFFFF, #FAFAFA) !important;
  border: 2px solid rgba(184, 143, 0, 0.35) !important;
  color: #18181B !important;
  box-shadow: 0 4px 16px rgba(184, 143, 0, 0.18) !important;
}
[data-theme="light"] .score-number,
[data-theme="light"] .score-max { color: #18181B !important; }

/* ======= DROPZONE ======= */
[data-theme="light"] .dropzone-container,
[data-theme="light"] .dropzone {
  background: #FAFAFA !important;
  border: 2px dashed rgba(15, 15, 25, 0.20) !important;
  color: #3F3F46 !important;
}
[data-theme="light"] .dropzone-container:hover,
[data-theme="light"] .dropzone-container.dz-drag-hover {
  background: rgba(184, 143, 0, 0.05) !important;
  border-color: #B88F00 !important;
}

/* Spinner */
[data-theme="light"] .spinner {
  border-color: rgba(15, 15, 25, 0.10) !important;
  border-top-color: #B88F00 !important;
}

/* ======= CKEditor / Gamma-editor (landing generator) ======= */
[data-theme="light"] .ck-editor__main,
[data-theme="light"] .ck-editor__main .ck-content {
  background: #FFFFFF !important;
  color: #18181B !important;
}
[data-theme="light"] .ck-toolbar,
[data-theme="light"] .ck-toolbar_grouping {
  background: #FAFAFA !important;
  border-color: rgba(15, 15, 25, 0.10) !important;
}
[data-theme="light"] .ck-button,
[data-theme="light"] .ck-dropdown__button { color: #18181B !important; }
[data-theme="light"] .ck-button:hover { background: rgba(15, 15, 25, 0.06) !important; }

/* ======= TABLICE (admin) ======= */
[data-theme="light"] table { background: transparent !important; color: #18181B !important; }
[data-theme="light"] th {
  background: #F4F4F7 !important;
  color: #3F3F46 !important;
  border-bottom: 1px solid rgba(15, 15, 25, 0.10) !important;
}
[data-theme="light"] td {
  border-bottom: 1px solid rgba(15, 15, 25, 0.06) !important;
  color: #18181B !important;
}
[data-theme="light"] tr:hover { background: rgba(15, 15, 25, 0.03) !important; }

/* ======= SELECTION ======= */
[data-theme="light"] *::selection {
  background: rgba(184, 143, 0, 0.30) !important;
  color: #1A1300 !important;
}

/* ======= ORBS / BG-GRADIENT (legacy) — schowane w light ======= */
[data-theme="light"] .orb,
[data-theme="light"] .bg-gradient { display: none !important; }

/* =========================================================
   END
   ========================================================= */