/* ============================================
   klasirane.eu — Main Stylesheet
   Dark theme · DM Sans · Gradient accents
   ============================================ */

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

:root {
  /* Colors */
  --bg: #0a0a0f;
  --bg-card: #12121a;
  --bg-card-hover: #1a1a26;
  --bg-surface: #16161f;
  --bg-input: #1e1e2a;
  --border: #2a2a3a;
  --border-hover: #3a3a5a;

  --text: #e8e8f0;
  --text-dim: #9898b0;
  --text-muted: #6a6a80;

  /* Gradients */
  --accent-1: #6366f1;  /* indigo */
  --accent-2: #ec4899;  /* pink */
  --accent-3: #8b5cf6;  /* violet */
  --gradient: linear-gradient(135deg, var(--accent-1), var(--accent-2));
  --gradient-subtle: linear-gradient(135deg, rgba(99,102,241,0.15), rgba(236,72,153,0.1));
  --gradient-text: linear-gradient(135deg, var(--accent-1), var(--accent-2));

  /* Chance colors */
  --chance-high: #22c55e;
  --chance-medium: #eab308;
  --chance-low: #f97316;
  --chance-none: #ef4444;

  /* Sizing */
  --nav-h: 60px;
  --max-w: 1200px;
  --radius: 12px;
  --radius-sm: 8px;
  --radius-xs: 6px;

  /* Shadows */
  --shadow: 0 4px 24px rgba(0,0,0,0.3);
  --shadow-lg: 0 8px 48px rgba(0,0,0,0.4);
  --shadow-glow: 0 0 40px rgba(99,102,241,0.15);
}

html { scroll-behavior: smooth; scroll-padding-top: calc(var(--nav-h) + 1rem); }

body {
  font-family: 'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  background: var(--bg);
  color: var(--text);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  min-height: 100vh;
}

a { color: var(--accent-1); text-decoration: none; transition: color 0.2s; }
a:hover { color: var(--accent-2); }

h1, h2, h3 { line-height: 1.2; font-weight: 700; }
h1 { font-size: clamp(1.75rem, 4vw, 2.5rem); }
h2 { font-size: clamp(1.25rem, 3vw, 1.75rem); }
h3 { font-size: 1.125rem; }

code { background: var(--bg-input); padding: 0.15em 0.4em; border-radius: 4px; font-size: 0.9em; }

/* --- Navigation --- */
.site-nav {
  position: sticky; top: 0; z-index: 100;
  background: rgba(10,10,15,0.85);
  backdrop-filter: blur(20px);
  border-bottom: 1px solid var(--border);
  height: var(--nav-h);
}
.nav-inner {
  max-width: var(--max-w); margin: 0 auto;
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 1.25rem; height: 100%;
}
.nav-logo {
  display: flex; align-items: center; gap: 0.5rem;
  font-weight: 700; font-size: 1.2rem; color: var(--text);
}
.nav-logo:hover { color: var(--text); }
.logo-icon { font-size: 1.5rem; }
.logo-dot { background: var(--gradient-text); -webkit-background-clip: text; -webkit-text-fill-color: transparent; }
.nav-links {
  display: flex; gap: 0.25rem; align-items: center;
}
.nav-links a {
  padding: 0.5rem 0.75rem; border-radius: var(--radius-xs);
  font-size: 0.875rem; font-weight: 500; color: var(--text-dim);
  transition: all 0.2s;
}
.nav-links a:hover { color: var(--text); background: var(--bg-card); }
.nav-links a.active {
  color: var(--text);
  background: var(--gradient-subtle);
}
.nav-toggle {
  display: none; flex-direction: column; gap: 4px;
  background: none; border: none; cursor: pointer; padding: 8px;
}
.nav-toggle span { display: block; width: 20px; height: 2px; background: var(--text); border-radius: 2px; transition: all 0.3s; }

@media (max-width: 768px) {
  .nav-toggle { display: flex; }
  .nav-links {
    display: none; position: absolute; top: var(--nav-h); left: 0; right: 0;
    background: var(--bg-surface); border-bottom: 1px solid var(--border);
    flex-direction: column; padding: 0.5rem;
    box-shadow: var(--shadow);
  }
  .nav-links.open { display: flex; }
  .nav-links a { padding: 0.75rem 1rem; }
}

/* --- Hero --- */
.hero {
  padding: 4rem 1.25rem 3rem;
  text-align: center;
  background: radial-gradient(ellipse at 50% 0%, rgba(99,102,241,0.1) 0%, transparent 60%);
}
.hero-inner { max-width: 700px; margin: 0 auto; }
.hero-badge {
  display: inline-block;
  padding: 0.35rem 1rem; border-radius: 50px;
  background: var(--gradient-subtle); border: 1px solid rgba(99,102,241,0.3);
  font-size: 0.8rem; font-weight: 600; color: var(--accent-1);
  margin-bottom: 1.25rem; letter-spacing: 0.03em;
}
.hero h1 {
  font-size: clamp(2rem, 5vw, 3rem);
  margin-bottom: 1rem;
  background: var(--gradient-text); -webkit-background-clip: text; -webkit-text-fill-color: transparent;
}
.hero-sub { font-size: 1.1rem; color: var(--text-dim); margin-bottom: 2rem; }

/* --- Search Box --- */
.search-box {
  display: flex; gap: 0.5rem;
  background: var(--bg-card); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 0.4rem;
  transition: border-color 0.3s, box-shadow 0.3s;
}
.search-box:focus-within {
  border-color: var(--accent-1);
  box-shadow: 0 0 0 3px rgba(99,102,241,0.2);
}
.search-box input {
  flex: 1; background: transparent; border: none; outline: none;
  padding: 0.75rem 1rem; color: var(--text); font-size: 1rem;
  font-family: inherit;
}
.search-box input::placeholder { color: var(--text-muted); }
.hero-hint { font-size: 0.8rem; color: var(--text-muted); margin-top: 0.75rem; }

/* --- Buttons --- */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 0.75rem 1.5rem; border-radius: var(--radius-sm);
  font-size: 0.9rem; font-weight: 600; font-family: inherit;
  border: none; cursor: pointer; transition: all 0.25s;
  text-decoration: none; white-space: nowrap;
}
.btn-primary {
  background: var(--gradient); color: #fff;
  box-shadow: 0 4px 16px rgba(99,102,241,0.3);
}
.btn-primary:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 24px rgba(99,102,241,0.4);
  color: #fff;
}
.btn-secondary {
  background: var(--bg-card); color: var(--text); border: 1px solid var(--border);
}
.btn-secondary:hover { background: var(--bg-card-hover); border-color: var(--border-hover); color: var(--text); }

/* --- Stats Bar --- */
.stats-bar {
  background: var(--bg-surface); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border);
  padding: 1.5rem 1.25rem;
}
.stats-inner {
  max-width: var(--max-w); margin: 0 auto;
  display: flex; justify-content: center; gap: 3rem; flex-wrap: wrap;
}
.stat { text-align: center; }
.stat-num {
  display: block; font-size: 1.5rem; font-weight: 700;
  background: var(--gradient-text); -webkit-background-clip: text; -webkit-text-fill-color: transparent;
}
.stat-label { font-size: 0.8rem; color: var(--text-muted); margin-top: 0.25rem; }

/* --- Features --- */
.features { padding: 4rem 1.25rem; }
.features-inner { max-width: var(--max-w); margin: 0 auto; text-align: center; }
.features-inner h2 { margin-bottom: 2rem; }
.features-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 1.25rem;
  text-align: left;
}
.feature-card {
  background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 1.5rem; transition: all 0.3s;
}
.feature-card:hover {
  border-color: var(--border-hover); transform: translateY(-2px);
  box-shadow: var(--shadow-glow);
}
.feature-icon { font-size: 2rem; margin-bottom: 0.75rem; }
.feature-card h3 { margin-bottom: 0.5rem; }
.feature-card p { font-size: 0.9rem; color: var(--text-dim); }

/* --- District Chips --- */
.districts-preview { padding: 3rem 1.25rem 4rem; }
.districts-inner { max-width: var(--max-w); margin: 0 auto; text-align: center; }
.districts-inner h2 { margin-bottom: 0.5rem; }
.districts-inner > p { color: var(--text-dim); margin-bottom: 1.5rem; }
.district-chips { display: flex; flex-wrap: wrap; gap: 0.5rem; justify-content: center; }
.district-chip {
  padding: 0.4rem 1rem; border-radius: 50px;
  background: var(--bg-card); border: 1px solid var(--border);
  font-size: 0.85rem; color: var(--text-dim); transition: all 0.2s;
  text-decoration: none;
}
.district-chip:hover { border-color: var(--accent-1); color: var(--accent-1); background: var(--gradient-subtle); }

/* --- Calculator Result --- */
.calculator-result { margin-top: 1.5rem; }
.calculator-result.hidden { display: none; }
.result-card {
  background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 1.25rem; margin-bottom: 1rem;
}
.result-card h3 { font-size: 1rem; margin-bottom: 0.75rem; }
.result-card .kg-link { font-weight: 600; }
.chance-bar-wrap { margin-top: 0.75rem; }
.chance-label { display: flex; justify-content: space-between; font-size: 0.85rem; margin-bottom: 0.25rem; }
.chance-bar {
  height: 8px; border-radius: 4px; background: var(--bg-input); overflow: hidden;
}
.chance-fill {
  height: 100%; border-radius: 4px; transition: width 0.8s ease;
}
.chance-fill.high { background: var(--chance-high); }
.chance-fill.medium { background: var(--chance-medium); }
.chance-fill.low { background: var(--chance-low); }
.chance-fill.none { background: var(--chance-none); }
.result-meta { display: flex; flex-wrap: wrap; gap: 0.75rem; font-size: 0.85rem; color: var(--text-dim); margin-top: 0.5rem; }

/* --- KG Badges --- */
.kg-badge {
  display: inline-block; padding: 0.2rem 0.6rem; border-radius: 50px;
  font-size: 0.75rem; font-weight: 600;
}
.kg-badge.region { background: rgba(99,102,241,0.15); color: var(--accent-1); }
.kg-badge.type { background: rgba(139,92,246,0.15); color: var(--accent-3); }
.kg-badge.groups { background: rgba(236,72,153,0.12); color: var(--accent-2); }
.kg-badge.spots { background: rgba(34,197,94,0.15); color: var(--chance-high); }

/* --- KG List Page --- */
.kg-list-page, .kg-detail-page, .district-page, .free-spots-page,
.guide-page, .criteria-page, .calendar-page, .faq-page, .calc-page,
.error-page {
  max-width: var(--max-w); margin: 0 auto; padding: 2rem 1.25rem 4rem;
}
.kg-filter { display: flex; gap: 0.75rem; margin-bottom: 1.5rem; flex-wrap: wrap; }
.kg-filter input, .kg-filter select {
  flex: 1; min-width: 200px; padding: 0.65rem 1rem;
  background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-sm);
  color: var(--text); font-family: inherit; font-size: 0.9rem;
  outline: none; transition: border-color 0.2s;
}
.kg-filter input:focus, .kg-filter select:focus { border-color: var(--accent-1); }
.kg-filter select option { background: var(--bg-card); }

.kg-region-section { margin-bottom: 2rem; }
.kg-region-section h2 { margin-bottom: 0.75rem; font-size: 1.25rem; }
.kg-region-section .count { font-weight: 400; color: var(--text-muted); font-size: 0.9rem; }

.kg-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 0.75rem; }
.kg-card {
  display: block; background: var(--bg-card); border: 1px solid var(--border);
  border-radius: var(--radius-sm); padding: 1rem; transition: all 0.2s;
  text-decoration: none; color: var(--text);
}
.kg-card:hover { border-color: var(--border-hover); background: var(--bg-card-hover); color: var(--text); transform: translateY(-1px); }
.kg-card-name { font-weight: 600; margin-bottom: 0.5rem; }
.kg-card-meta { display: flex; flex-wrap: wrap; gap: 0.4rem; }

/* --- KG Detail --- */
.kg-detail-header { margin-bottom: 2rem; }
.kg-detail-header h1 { margin-bottom: 0.75rem; }
.kg-meta-row { display: flex; gap: 0.5rem; margin-bottom: 1rem; }
.kg-info-grid { display: grid; gap: 0.5rem; }
.kg-info-item { font-size: 0.9rem; color: var(--text-dim); }
.kg-info-item .label { font-weight: 600; color: var(--text); }

.groups-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: 1rem; }
.group-card {
  background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 1.25rem;
}
.group-card h3 { font-size: 0.95rem; margin-bottom: 0.75rem; }
.spot-row {
  display: flex; align-items: center; gap: 0.75rem;
  padding: 0.35rem 0; font-size: 0.85rem; border-bottom: 1px solid var(--border);
}
.spot-row:last-child { border-bottom: none; }
.spot-label { flex: 1; color: var(--text-dim); }
.spot-free { font-weight: 600; color: var(--chance-high); }
.spot-cap { color: var(--text-muted); font-size: 0.8rem; }
.queue-info {
  display: flex; gap: 1rem; flex-wrap: wrap; margin-top: 0.75rem;
  padding-top: 0.75rem; border-top: 1px solid var(--border);
  font-size: 0.85rem; color: var(--text-dim);
}
.no-data { color: var(--text-muted); font-style: italic; }

/* --- Free Spots --- */
.spots-controls { margin-bottom: 1.5rem; }
.spots-controls label {
  display: flex; align-items: center; gap: 0.5rem; font-size: 0.9rem; color: var(--text-dim);
}
.spots-controls select {
  padding: 0.5rem 1rem; background: var(--bg-card); border: 1px solid var(--border);
  border-radius: var(--radius-sm); color: var(--text); font-family: inherit;
}
.spots-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 0.75rem;
}
.spot-district-card {
  background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-sm);
  padding: 1rem; transition: all 0.2s;
}
.spot-district-card:hover { border-color: var(--border-hover); }
.spot-district-name { font-weight: 600; margin-bottom: 0.5rem; }
.spot-district-num {
  font-size: 1.5rem; font-weight: 700;
  background: var(--gradient-text); -webkit-background-clip: text; -webkit-text-fill-color: transparent;
}

/* --- Guide --- */
.guide-intro { font-size: 1.1rem; color: var(--text-dim); margin-bottom: 2rem; }
.guide-toc {
  background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 1.25rem 1.5rem; margin-bottom: 2rem;
}
.guide-toc h2 { font-size: 1rem; margin-bottom: 0.75rem; }
.guide-toc ol { padding-left: 1.25rem; }
.guide-toc li { margin-bottom: 0.35rem; }
.guide-content h2 { margin: 2rem 0 0.75rem; padding-top: 1rem; border-top: 1px solid var(--border); }
.guide-content p { color: var(--text-dim); margin-bottom: 0.75rem; }
.guide-content ul { padding-left: 1.5rem; margin-bottom: 1rem; }
.guide-content li { color: var(--text-dim); margin-bottom: 0.35rem; }
.guide-content strong { color: var(--text); }

/* --- Criteria Table --- */
.criteria-table {
  width: 100%; border-collapse: collapse; margin-bottom: 2rem;
}
.criteria-table th, .criteria-table td {
  padding: 0.65rem 1rem; text-align: left; border-bottom: 1px solid var(--border);
  font-size: 0.9rem;
}
.criteria-table th {
  background: var(--bg-surface); font-weight: 600; position: sticky; top: var(--nav-h);
}
.criteria-table tr:hover { background: var(--bg-card); }
.criteria-explanation { margin-top: 1.5rem; }
.criteria-explanation p { color: var(--text-dim); margin-bottom: 0.5rem; }

/* --- Calendar --- */
.calendar-highlights {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 1rem;
  margin-bottom: 2.5rem;
}
.highlight-card {
  background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 1.25rem; text-align: center;
}
.highlight-card.alert { border-color: var(--accent-2); background: rgba(236,72,153,0.05); }
.h-date { font-size: 1.1rem; font-weight: 700; margin-bottom: 0.25rem; background: var(--gradient-text); -webkit-background-clip: text; -webkit-text-fill-color: transparent; }
.h-text { font-size: 0.9rem; color: var(--text-dim); }

.cal-events { display: grid; gap: 0.5rem; }
.cal-event {
  display: grid; grid-template-columns: 100px 1fr; gap: 0.5rem 1rem;
  padding: 0.75rem 1rem; background: var(--bg-card); border-radius: var(--radius-sm);
  border-left: 3px solid var(--event-color, var(--accent-1));
}
.cal-date { font-weight: 600; font-size: 0.85rem; color: var(--text-muted); }
.cal-title { font-weight: 600; font-size: 0.9rem; }
.cal-desc { grid-column: 2; font-size: 0.8rem; color: var(--text-muted); }

/* --- FAQ --- */
.faq-list { display: grid; gap: 0.5rem; }
.faq-item {
  background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-sm);
  overflow: hidden; transition: border-color 0.2s;
}
.faq-item:hover { border-color: var(--border-hover); }
.faq-item summary {
  padding: 1rem 1.25rem; cursor: pointer; font-weight: 600; font-size: 0.95rem;
  list-style: none; display: flex; justify-content: space-between; align-items: center;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after { content: '+'; font-size: 1.25rem; color: var(--text-muted); transition: transform 0.3s; }
.faq-item[open] summary::after { content: '−'; color: var(--accent-1); }
.faq-item p { padding: 0 1.25rem 1rem; color: var(--text-dim); font-size: 0.9rem; }

/* --- Breadcrumbs --- */
.breadcrumbs {
  display: flex; flex-wrap: wrap; align-items: center; gap: 0.35rem;
  padding: 0.75rem 0; font-size: 0.8rem; margin-bottom: 1rem;
}
.breadcrumbs a { color: var(--text-muted); }
.breadcrumbs a:hover { color: var(--accent-1); }
.bc-sep { color: var(--text-muted); }
.bc-current { color: var(--text-dim); }

/* --- Error Page --- */
.error-page { text-align: center; padding-top: 4rem; }
.error-page h1 { margin-bottom: 1rem; }
.error-page p { color: var(--text-dim); margin-bottom: 2rem; }
.error-page .btn { margin: 0 0.5rem; }

/* --- Footer --- */
.site-footer {
  background: var(--bg-surface); border-top: 1px solid var(--border);
  padding: 3rem 1.25rem;
}
.footer-inner { max-width: var(--max-w); margin: 0 auto; text-align: center; }
.footer-brand { display: flex; align-items: center; justify-content: center; gap: 0.5rem; font-size: 1.1rem; font-weight: 700; margin-bottom: 0.75rem; }
.footer-desc { font-size: 0.85rem; color: var(--text-muted); margin-bottom: 1rem; max-width: 500px; margin-left: auto; margin-right: auto; }
.footer-links { display: flex; flex-wrap: wrap; justify-content: center; gap: 1rem; margin-bottom: 1.5rem; }
.footer-links a { font-size: 0.85rem; color: var(--text-dim); }
.footer-copy { font-size: 0.75rem; color: var(--text-muted); }

/* --- Calc Page extras --- */
.calc-page h1 { margin-bottom: 0.75rem; }
.calc-page > p { color: var(--text-dim); margin-bottom: 1.5rem; }
.calc-info { margin-top: 2rem; }
.calc-info h2 { font-size: 1.25rem; margin-bottom: 0.75rem; }
.calc-info p { color: var(--text-dim); margin-bottom: 0.5rem; }
.calc-info ul { padding-left: 1.5rem; margin-bottom: 1rem; }
.calc-info li { color: var(--text-dim); margin-bottom: 0.35rem; }
.calc-info strong { color: var(--text); }

/* --- Loading --- */
.loading {
  text-align: center; padding: 2rem; color: var(--text-muted);
}
.loading::after {
  content: ''; display: inline-block; width: 20px; height: 20px;
  border: 2px solid var(--border); border-top-color: var(--accent-1);
  border-radius: 50%; animation: spin 0.8s linear infinite;
  margin-left: 0.5rem; vertical-align: middle;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* --- Utility --- */
.hidden { display: none !important; }
.page-main { min-height: calc(100vh - var(--nav-h) - 200px); }

/* --- Responsive --- */
@media (max-width: 640px) {
  .stats-inner { gap: 1.5rem; }
  .stat-num { font-size: 1.25rem; }
  .search-box { flex-direction: column; }
  .search-box .btn { width: 100%; }
  .kg-cards { grid-template-columns: 1fr; }
  .groups-grid { grid-template-columns: 1fr; }
  .calendar-highlights { grid-template-columns: 1fr 1fr; }
  .cal-event { grid-template-columns: 80px 1fr; }
  .hero { padding: 2.5rem 1rem 2rem; }
}

/* --- Progressive Reveal (result cards) --- */
.result-card-full{position:relative}
.rc-level-badge{position:absolute;top:12px;right:12px;font-size:9px;font-weight:600;border-radius:50px;padding:2px 8px}
.rc-level-full{color:var(--chance-high);background:rgba(34,197,94,.1);border:1px solid rgba(34,197,94,.2)}
.result-card-teaser{border-color:rgba(234,179,8,.2)}
.result-card-locked{border-color:rgba(99,102,241,.15);background:rgba(18,18,26,.4)}
.rc-locked-inner{display:flex;align-items:center;gap:10px;padding:4px 0}
.rc-locked-icon{font-size:18px;opacity:.5;flex-shrink:0}
.rc-locked-name{font-size:13px;font-weight:600;color:var(--text-muted)}
.rc-locked-sub{font-size:11px;color:var(--text-muted);opacity:.7}
.ch-teaser-row{display:flex;align-items:center;justify-content:space-between;margin-top:8px;padding:8px 12px;background:rgba(234,179,8,.06);border:1px solid rgba(234,179,8,.15);border-radius:var(--radius-sm)}
.ch-teaser-left{display:flex;align-items:center;gap:6px}
.ch-teaser-dot{width:10px;height:10px;border-radius:50%;flex-shrink:0}
.ch-teaser-label{font-size:12px;font-weight:600}
.ch-teaser-lock{font-size:10px;color:var(--text-muted)}
.res-progress{display:flex;align-items:center;justify-content:center;gap:6px;margin-bottom:12px}
.res-progress-dot{width:8px;height:8px;border-radius:50%}
.res-progress-dot.on{background:var(--chance-high)}
.res-progress-dot.half{background:#eab308}
.res-progress-dot.off{background:var(--border)}
.res-progress-text{font-size:10px;color:var(--text-muted);margin-left:2px}
.res-unlock-cta{margin-top:14px;padding:16px;background:linear-gradient(135deg,rgba(99,102,241,.08),rgba(139,92,246,.08));border:1px solid rgba(99,102,241,.25);border-radius:var(--radius);text-align:center}
.res-unlock-icon{font-size:22px;margin-bottom:6px}
.res-unlock-title{font-size:14px;font-weight:600;color:var(--text);margin-bottom:4px}
.res-unlock-sub{font-size:11px;color:var(--text-dim);line-height:1.4;margin-bottom:12px}
.res-unlock-form{display:flex;gap:6px}
.res-unlock-email{flex:1;background:var(--bg-input);border:1px solid var(--border);border-radius:var(--radius-sm);padding:10px 12px;color:var(--text);font-size:13px;font-family:inherit;outline:none;min-width:0}
.res-unlock-email:focus{border-color:rgba(139,92,246,.5);box-shadow:0 0 0 3px rgba(139,92,246,.1)}
.res-unlock-email::placeholder{color:var(--text-muted)}
.res-unlock-btn{padding:10px 18px;border-radius:var(--radius-sm);background:linear-gradient(135deg,#8b5cf6,#ec4899);color:#fff;font-size:12px;font-weight:600;font-family:inherit;border:none;cursor:pointer;white-space:nowrap}
.res-unlock-btn:hover{opacity:.92}
.res-unlock-hint{font-size:10px;color:var(--text-muted);margin-top:8px}
.res-unlock-success{padding:10px;background:rgba(34,197,94,.1);border:1px solid rgba(34,197,94,.25);border-radius:var(--radius-sm);font-size:12px;color:var(--chance-high);margin-top:10px}
.analysis-spinner{width:20px;height:20px;border:2px solid var(--border);border-top-color:var(--accent-1);border-radius:50%;animation:spin .8s linear infinite}
@media(max-width:640px){.res-unlock-form{flex-direction:column}.res-unlock-btn{width:100%;text-align:center;padding:12px}.rc-locked-inner{flex-wrap:wrap}}
[data-theme="light"] .result-card-locked{background:rgba(0,0,0,.02);border-color:var(--border)}
[data-theme="light"] .ch-teaser-row{background:rgba(234,179,8,.04);border-color:rgba(234,179,8,.12)}
[data-theme="light"] .res-unlock-cta{background:linear-gradient(135deg,rgba(99,102,241,.04),rgba(139,92,246,.04));border-color:rgba(99,102,241,.15)}
[data-theme="light"] .res-unlock-email{background:#fff;border-color:#d0d0e0}

/* --- Promo V3 Card (homepage) --- */
.promo-v3{margin-top:16px;background:linear-gradient(135deg,rgba(99,102,241,.1),rgba(139,92,246,.1));border:1px solid rgba(99,102,241,.28);border-radius:var(--radius);padding:16px;text-align:left;position:relative;overflow:hidden;transition:all .3s}
.promo-v3::before{content:'';position:absolute;top:0;left:0;right:0;height:2px;background:var(--gradient)}
.promo-v3-head{display:flex;align-items:flex-start;gap:12px}
.promo-v3-icon{width:40px;height:40px;border-radius:10px;background:linear-gradient(135deg,rgba(99,102,241,.2),rgba(139,92,246,.2));display:flex;align-items:center;justify-content:center;font-size:18px;flex-shrink:0}
.promo-v3-badge{display:inline-block;font-size:9px;font-weight:700;color:#fff;background:var(--accent-2);border-radius:3px;padding:1px 6px;text-transform:uppercase;margin-bottom:3px;letter-spacing:.5px}
.promo-v3-title{font-size:14px;font-weight:600;color:var(--text);margin-bottom:2px}
.promo-v3-desc{font-size:11.5px;color:var(--text-dim);line-height:1.4}
.promo-v3-compare{display:flex;gap:8px;margin-top:12px;align-items:center}
.promo-v3-box{flex:1;border-radius:var(--radius-sm);padding:10px;text-align:center}
.promo-v3-box-basic{background:var(--bg-input)}
.promo-v3-box-detail{background:rgba(99,102,241,.08);border:1.5px solid rgba(99,102,241,.2)}
.promo-v3-box-label{font-size:9px;color:var(--text-muted);margin-bottom:2px}
.promo-v3-box-val{font-size:16px;font-weight:700}
.promo-v3-box-basic .promo-v3-box-val{color:var(--text-dim)}
.promo-v3-box-detail .promo-v3-box-val{color:var(--accent-1)}
.promo-v3-box-tag{font-size:9px;color:var(--text-muted);margin-top:1px}
.promo-v3-arrow{color:var(--text-muted);font-size:14px;flex-shrink:0}
.promo-v3-cta{margin-top:12px;width:100%;padding:11px;border-radius:var(--radius-sm);background:linear-gradient(135deg,#8b5cf6,#ec4899);color:#fff;font-size:13px;font-weight:600;font-family:inherit;border:none;cursor:pointer;transition:all .2s}
.promo-v3-cta:hover{opacity:.92;transform:translateY(-1px)}
.promo-v3-free{margin-top:8px;font-size:10px;color:var(--text-muted);text-align:center}
.promo-v3-expand{max-height:0;overflow:hidden;opacity:0;transition:all .35s cubic-bezier(.4,0,.2,1);margin-top:0}
.promo-v3-expand.open{max-height:200px;opacity:1;margin-top:4px}
.promo-v3-form{display:flex;gap:6px;margin-top:10px}
.promo-v3-email{flex:1;background:rgba(30,30,42,.8);border:1px solid var(--border);border-radius:var(--radius-sm);padding:10px 12px;color:var(--text);font-size:13px;font-family:inherit;outline:none;min-width:0;transition:border-color .2s}
.promo-v3-email:focus{border-color:rgba(139,92,246,.5);box-shadow:0 0 0 3px rgba(139,92,246,.1)}
.promo-v3-email::placeholder{color:var(--text-muted)}
.promo-v3-send{padding:10px 18px;border-radius:var(--radius-sm);background:linear-gradient(135deg,#8b5cf6,#ec4899);color:#fff;font-size:12px;font-weight:600;font-family:inherit;border:none;cursor:pointer;white-space:nowrap;transition:all .2s}
.promo-v3-send:hover{opacity:.92}
.promo-v3-sub{font-size:10px;color:var(--text-muted);margin-top:6px;display:flex;justify-content:space-between;align-items:center}
.promo-v3-childid{color:var(--accent-3);font-weight:500}
.promo-v3-close{background:none;border:none;color:var(--accent-1);font-size:10px;cursor:pointer;font-family:inherit;padding:2px 4px}
.promo-v3-close:hover{text-decoration:underline}
.promo-v3-success{display:none;padding:10px;background:rgba(34,197,94,.1);border:1px solid rgba(34,197,94,.25);border-radius:var(--radius-sm);font-size:12px;color:var(--chance-high);text-align:center;margin-top:10px}
.promo-v3-upsell{margin-top:12px;padding-top:12px;border-top:1px solid rgba(99,102,241,.15);display:flex;align-items:center;gap:10px}
.promo-v3-upsell-text{flex:1;font-size:11px;color:var(--text-dim);line-height:1.35}
.promo-v3-upsell-text strong{color:var(--text);font-weight:600}
.promo-v3-upsell-btn{padding:7px 14px;border-radius:7px;background:var(--bg-input);border:1px solid rgba(99,102,241,.25);color:var(--accent-3);font-size:11px;font-weight:600;white-space:nowrap;transition:all .2s;flex-shrink:0;text-decoration:none;display:inline-flex;align-items:center;gap:4px}
.promo-v3-upsell-btn:hover{border-color:rgba(99,102,241,.5);background:rgba(99,102,241,.1);color:var(--accent-3)}
/* --- Giveaway Card (homepage) --- */
.giveaway-card{margin-top:16px;background:linear-gradient(135deg,#1e1245 0%,#2a1050 50%,#1a0a3a 100%);border:1px solid rgba(139,92,246,.35);border-radius:var(--radius);padding:18px 16px;text-align:center;position:relative;overflow:hidden}
.giveaway-card::before{content:'';position:absolute;top:0;left:0;right:0;height:2px;background:linear-gradient(90deg,#8b5cf6,#ec4899,#f59e0b)}
.giveaway-sparkle{position:absolute;top:8px;right:12px;font-size:20px;animation:sparkPulse 2s ease-in-out infinite}
@keyframes sparkPulse{0%,100%{opacity:.6;transform:scale(1)}50%{opacity:1;transform:scale(1.15)}}
.giveaway-emoji{font-size:28px;margin-bottom:6px}
.giveaway-countdown{display:inline-flex;align-items:center;gap:4px;background:rgba(245,158,11,.1);border:1px solid rgba(245,158,11,.2);border-radius:50px;padding:3px 10px;font-size:10px;color:#f59e0b;font-weight:600;margin-bottom:10px}
.giveaway-title{font-size:15px;font-weight:700;color:var(--text);margin-bottom:4px}
.giveaway-title span{background:linear-gradient(135deg,#f59e0b,#ec4899);-webkit-background-clip:text;-webkit-text-fill-color:transparent}
.giveaway-sub{font-size:11.5px;color:var(--text-dim);line-height:1.4;margin-bottom:14px}
.giveaway-steps{display:flex;flex-direction:column;gap:8px;margin-bottom:14px}
.giveaway-step{display:flex;align-items:center;gap:10px;background:rgba(255,255,255,.04);border-radius:var(--radius-sm);padding:10px 12px;text-align:left}
.giveaway-step-num{width:22px;height:22px;border-radius:50%;background:linear-gradient(135deg,#8b5cf6,#ec4899);display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:700;color:#fff;flex-shrink:0}
.giveaway-step-text{font-size:12px;color:#d0d0e0;line-height:1.3}
.giveaway-step-text strong{color:#fff;font-weight:600}
.giveaway-step.done{opacity:.5}
.giveaway-step.done .giveaway-step-num{background:var(--chance-high)}
.giveaway-btns{display:flex;gap:8px;margin-bottom:8px}
.giveaway-btn{flex:1;padding:10px;border-radius:var(--radius-sm);font-size:12px;font-weight:600;font-family:inherit;border:none;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:6px;transition:all .2s}
.giveaway-btn-fb{background:#1877f2;color:#fff}
.giveaway-btn-fb:hover{background:#1565d8}
.giveaway-btn-fb.done{background:#22c55e;pointer-events:none}
.giveaway-btn-share{background:linear-gradient(135deg,#8b5cf6,#ec4899);color:#fff}
.giveaway-btn-share:hover{opacity:.9}
.giveaway-btn-share.done{background:#22c55e;pointer-events:none}
.giveaway-code{margin-top:12px;padding:14px;background:rgba(34,197,94,.08);border:1px solid rgba(34,197,94,.25);border-radius:var(--radius-sm);animation:promoFadeIn .4s ease}
.giveaway-code-text{font-size:13px;color:#22c55e;font-weight:600;margin-bottom:8px}
.giveaway-code-btn{display:inline-flex;align-items:center;gap:6px;padding:10px 24px;background:linear-gradient(135deg,#22c55e,#16a34a);color:#fff;border-radius:var(--radius-sm);font-size:13px;font-weight:600;text-decoration:none;transition:all .2s}
.giveaway-code-btn:hover{opacity:.9;color:#fff;transform:translateY(-1px)}
.giveaway-limit{font-size:10px;color:var(--text-muted);margin-top:8px}
@media(max-width:640px){.giveaway-btns{flex-direction:column}.giveaway-card{padding:16px 14px}}
/* Light theme */
[data-theme="light"] .giveaway-card{background:linear-gradient(135deg,rgba(99,102,241,.06),rgba(139,92,246,.08));border-color:rgba(99,102,241,.2)}
[data-theme="light"] .giveaway-step{background:rgba(0,0,0,.03)}
[data-theme="light"] .giveaway-step-text{color:var(--text-dim)}
[data-theme="light"] .giveaway-step-text strong{color:var(--text)}

/* Bell animation */
.bell-anim{display:inline-block;animation:bellRing 4s ease-in-out infinite}
@keyframes bellRing{0%,88%,100%{transform:rotate(0)}90%{transform:rotate(12deg)}92%{transform:rotate(-10deg)}94%{transform:rotate(8deg)}96%{transform:rotate(-6deg)}98%{transform:rotate(0)}}
/* Responsive */
@media(max-width:640px){.promo-v3-head{flex-direction:column}.promo-v3-form{flex-direction:column}.promo-v3-send{width:100%;padding:12px}.promo-v3-upsell{flex-direction:column;text-align:center;gap:8px}}
/* Light theme */
[data-theme="light"] .promo-v3{background:linear-gradient(135deg,rgba(99,102,241,.06),rgba(139,92,246,.06));border-color:rgba(99,102,241,.2)}
[data-theme="light"] .promo-v3-email{background:#fff;border-color:#d0d0e0}
[data-theme="light"] .promo-v3-box-basic{background:rgba(0,0,0,.03)}

/* Hero background image */
.hero,
[data-theme="light"] .hero {
  background-image: 
    linear-gradient(to bottom, rgba(15,12,41,0.25) 0%, rgba(15,12,41,0.5) 40%, rgba(15,12,41,0.93) 100%),
    url('/assets/hero-klasirane-detski-gradini-sofia.png') !important;
  background-size: cover !important;
  background-position: center center !important;
  background-repeat: no-repeat !important;
  min-height: 540px;
  padding: 80px 20px 40px;
}
[data-theme="light"] .hero h1 {
  background: none !important;
  -webkit-text-fill-color: #fff !important;
  color: #fff !important;
}
[data-theme="light"] .hero .hero-badge {
  background: rgba(99,102,241,.25) !important;
  border-color: rgba(99,102,241,.4) !important;
  color: #c7b2ff !important;
}
[data-theme="light"] .hero .hero-sub,
[data-theme="light"] .hero .hero-hint {
  color: rgba(255,255,255,0.75) !important;
}
[data-theme="light"] .hero .hero-hint a {
  color: #a5b4fc !important;
}
@media (max-width: 768px) {
  .hero,
  [data-theme="light"] .hero {
    background-position: 25% center !important;
    min-height: 480px;
  }
}