/* conciso-theme-a.css — Clean Gradient (fixed) */
:root{
  --bg: #0b1020;
  --bg-hero-grad: linear-gradient(135deg,#0b1020 0%, #1f2550 50%, #0b1020 100%);
  --card: #0f152f;
  --text: #e9eefb;
  --muted: #b6c0e0;
  --heading: #ffffff;            /* NEW: pre nadpisy na kartách */
  --accent: #6ea8fe;
  --accent-2: #9b86ff;
  --ring: rgba(110,168,254,.35);
  --radius: 16px;
  --shadow: 0 10px 30px rgba(0,0,0,.35);
  --shadow-soft: 0 6px 18px rgba(0,0,0,.25);

  /* Input farby (dark) */
  --input-bg: rgba(255,255,255,.06);
  --input-border: rgba(255,255,255,.22);
  --input-text: #e9eefb;
  --placeholder: #c7d2fecc;
}

@media (prefers-color-scheme: light){
  :root{
    --bg:#f7f9ff;
    --bg-hero-grad: radial-gradient(1200px 600px at 50% -200px,#e9efff 0,#f7f9ff 60%,#f7f9ff 100%);
    --card:#ffffff;
    --text:#0f1226;
    --muted:#5b647f;
    --heading:#0f1226;           /* NEW: kontrastné nadpisy na kartách */
    --accent:#3b82f6;
    --accent-2:#7c5cff;
    --ring: rgba(59,130,246,.25);
    --shadow: 0 10px 28px rgba(31,41,55,.14);
    --shadow-soft: 0 6px 18px rgba(31,41,55,.12);

    /* Input farby (light) — FIX: viditeľné pole a placeholder */
    --input-bg: #eef2ff;         /* jemný modrastý podklad */
    --input-border: #d9e0ff;
    --input-text: #0f1226;
    --placeholder: #7b86a8;
  }
}

/* Reset & base */
html,body{background:var(--bg);color:var(--text);font-family:Inter,ui-sans-serif,system-ui,Segoe UI,Roboto,Helvetica,Arial,sans-serif}
*{box-sizing:border-box}
a{color:var(--accent)}
img,video{border-radius:var(--radius)}

/* Page container */
.w-full{max-width:700px;margin:0 auto;padding:1px 20px}

/* Header */
.w-full>div:first-child{margin-bottom:28px !important;}
.w-full>div:first-child .text-2xl{
  font-weight:800;letter-spacing:.2px;
  background:linear-gradient(90deg,var(--accent),var(--accent-2));
  -webkit-background-clip:text;background-clip:text;color:transparent;
}

/* Hero */
.w-full>section:nth-of-type(1){
  text-align:center;margin-bottom:28px !important;
  background:var(--bg-hero-grad);
  padding:40px 24px;border-radius:calc(var(--radius) + 8px);
  box-shadow: var(--shadow);
}
.w-full>section:nth-of-type(1) h1{
  font-size:clamp(32px,5vw,44px) !important;
  line-height:1.15 !important;font-weight:900 !important;letter-spacing:-.02em;
}
.w-full>section:nth-of-type(1) p{
  max-width:760px;margin:10px auto 0;color:var(--muted);
  font-size:clamp(15px,2.2vw,18px);
}

/* CTA card */
.w-full>div.mx-auto.max-w-2xl{
  background:var(--card) !important;border-radius:var(--radius) !important;
  padding:22px !important;box-shadow:var(--shadow);
  border:1px solid rgba(255,255,255,.06);
}
.w-full>div.mx-auto.max-w-2xl form{gap:12px !important}

/* FIX 1: viditeľný input a placeholder (light+dark) */
.w-full input[type="email"]{
  background:var(--input-bg);
  border:1px solid var(--input-border) !important;
  color:var(--input-text);
  padding:14px 16px !important;border-radius:12px !important;
  outline:0;transition:box-shadow .25s,border-color .25s,transform .05s;
}
.w-full input[type="email"]::placeholder{color:var(--placeholder)}
.w-full input[type="email"]:focus{
  box-shadow:0 0 0 5px var(--ring);
  border-color:var(--accent) !important;
}

.w-full button[type="submit"]{
  background:linear-gradient(90deg,var(--accent),var(--accent-2)) !important;
  border:none;color:#fff;padding:14px 18px !important;border-radius:12px !important;
  font-weight:700;letter-spacing:.2px;
  box-shadow:0 8px 18px rgba(124,92,255,.25);
  transition:transform .08s ease, box-shadow .25s ease, filter .25s;
}
.w-full button[type="submit"]:hover{filter:saturate(1.1);box-shadow:0 10px 22px rgba(124,92,255,.32)}
.w-full button[type="submit"]:active{transform:translateY(1px)}
.w-full p.text-xs{text-align:center;color:var(--muted) !important}

/* „Prečo Shortqi“ */
.w-full>section:nth-of-type(2){margin-top:48px !important;text-align:center}
.w-full>section:nth-of-type(2) h2{font-size:clamp(22px,3vw,26px) !important;font-weight:800}
.w-full>section:nth-of-type(2) .space-y-6>div{
  background:var(--card);padding:18px 20px;border-radius:14px;
  box-shadow:var(--shadow-soft);border:1px solid rgba(255,255,255,.06);
}
/* FIX 2: nadpis v bublinách musí mať kontrast */
.w-full>section:nth-of-type(2) .font-semibold{
  color:var(--heading);font-weight:800;margin-bottom:6px
}
.w-full>section:nth-of-type(2) .text-gray-700{color:var(--muted) !important}

/* „Ako to funguje“ — zjednotenie s kartami vyššie */
.w-full>section:nth-of-type(3){margin-top:42px !important;text-align:center}
.w-full>section:nth-of-type(3) h2{font-size:22px;font-weight:800}
.w-full>section:nth-of-type(3) ol{
  max-width:720px;margin:16px auto 0;padding:0;list-style:none
}
/* FIX 3: vizuálne rovnaké karty ako v sekcii 2 */
.w-full>section:nth-of-type(3) ol li{
  background:var(--card);
  border:1px solid rgba(255,255,255,.06);
  padding:14px 16px;margin-top:12px;border-radius:14px;
  box-shadow:var(--shadow-soft); color:var(--text);
  line-height:1.55;
}
/* voliteľné: zjednotenie čísel (ak necháš „1. 2. 3.“ v texte) */
.w-full>section:nth-of-type(3) ol li{font-variant-numeric: tabular-nums}

/* Video sekcia */
.w-full>section:nth-of-type(4){margin-top:44px !important;text-align:center}
.w-full>section:nth-of-type(4) h2{font-size:22px;font-weight:800}
.w-full>section:nth-of-type(4) .border{
  border:1px solid rgba(255,255,255,.08) !important;
  background:var(--card) !important; box-shadow:var(--shadow)
}

/* animácie */
@media (prefers-reduced-motion: no-preference){
  .w-full>section, .w-full>div.mx-auto.max-w-2xl {animation:fadeUp .4s ease both}
  @keyframes fadeUp{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}
}


/* Zosúladenie <ol><li> v sekcii Ako to funguje */
.w-full>section:nth-of-type(3) ol li {
  text-align: left;              /* zarovnanie textu vľavo */
  display: block;                /* udrží blokový formát */
  background: var(--card);
  border: 1px solid rgba(255, 255, 255, .06);
  padding: 18px 20px;
  margin-top: 12px;
  border-radius: 14px;
  box-shadow: var(--shadow-soft);
  color: var(--muted);
  line-height: 1.55;
  font-weight: 400;
}


/* Menšie medzery medzi bublinami v sekcii Ako to funguje */
.w-full>section:nth-of-type(3) ol {
  row-gap: 12px !important; /* jednotná medzera medzi li */
}

.w-full>section:nth-of-type(3) ol li {
  margin-top: 0 !important; /* odstránenie extra marginu */
}

/* Menšie medzery medzi bublinami v sekcii Prečo Shortqi */
.w-full>section:nth-of-type(2) .space-y-6 {
  row-gap: 12px !important; /* z 24px na 6px */
}

.w-full>section:nth-of-type(2) .space-y-6>div {
  margin-bottom: 1 !important; /* odstránenie extra marginu */
}



/* ==== THEME‑A — APP PAGE ADD‑ON (bez zmeny JSX) ==== */

/* Layout shell */
main.max-w-3xl.mx-auto{
  max-width: 980px !important;
  padding: 4px 20px !important;
}

/* Globálna typografia appky */
.flex.flex-col.items-center,
.flex.flex-col.items-center *{
  color: var(--text);
}

/* Malé pomocné texty */
.text-gray-600, .text-gray-500{
  color: var(--muted) !important;
}

/* Counter 10/100 a podobné info */
.w-full.max-w-2xl > .mb-2.text-sm{
  color: var(--muted) !important;
}

/* Textarea vstup */
textarea{
  background: var(--input-bg) !important;
  border: 1px solid var(--input-border) !important;
  color: var(--input-text) !important;
  border-radius: 12px !important;
  padding: 14px 16px !important;
  outline: 0;
  transition: box-shadow .25s, border-color .25s;
}
textarea:focus{
  box-shadow: 0 0 0 5px var(--ring);
  border-color: var(--accent) !important;
}

/* Tlačidlo „Clear“ */
button.text-sm.text-blue-600.underline{
  color: var(--accent) !important;
}
button.text-sm.text-blue-600.underline:hover{
  opacity: .9;
}

/* Use‑case preset buttons (grid tlačidlá) */
.mt-3.flex.flex-wrap.gap-2 button{
  border-radius: 12px !important;
  padding: 8px 12px !important;
  border: 1px solid rgba(255,255,255,.10) !important;
  background: var(--card) !important;
  color: var(--text) !important;
  box-shadow: var(--shadow-soft);
  transition: transform .08s ease, filter .2s ease, box-shadow .2s ease;
}
.mt-3.flex.flex-wrap.gap-2 button:hover{
  filter: brightness(1.04);
}
/* Aktívny preset: má triedu bg-indigo-600 → prefarbíme na gradient témy */
.mt-3.flex.flex-wrap.gap-2 button[class*="bg-indigo-600"]{
  background: linear-gradient(90deg,var(--accent),var(--accent-2)) !important;
  border-color: transparent !important;
  color: #fff !important;
  box-shadow: 0 8px 18px rgba(124,92,255,.25);
}

/* Limit (number input) + select (jazyk) */
input[type="number"], select{
  background: var(--input-bg) !important;
  border: 1px solid var(--input-border) !important;
  color: var(--input-text) !important;
  border-radius: 10px !important;
  padding: 8px 10px !important;
  outline: 0;
  transition: box-shadow .25s, border-color .25s;
}
input[type="number"]:focus, select:focus{
  box-shadow: 0 0 0 5px var(--ring);
  border-color: var(--accent) !important;
}

/* Primárne CTA „Shorten“ */
button.mt-3.bg-indigo-600.text-white{
  background: linear-gradient(90deg,var(--accent),var(--accent-2)) !important;
  border: none !important;
  border-radius: 12px !important;
  box-shadow: 0 8px 18px rgba(124,92,255,.25);
  padding: 10px 16px !important;
  font-weight: 700;
  letter-spacing: .2px;
  transition: transform .08s ease, box-shadow .25s ease, filter .25s;
  color: #fff !important;
}
button.mt-3.bg-indigo-600.text-white:hover{ filter: saturate(1.06) }
button.mt-3.bg-indigo-600.text-white:active{ transform: translateY(1px) }

/* Survey blok (tabuľka plánov) */
div.mt-6.border.rounded.p-4{
  background: var(--card) !important;
  border: 1px solid rgba(255,255,255,.08) !important;
  border-radius: 14px !important;
  box-shadow: var(--shadow);
}
div.mt-6.border.rounded.p-4 h3{
  color: var(--heading);
}
div.mt-6.border.rounded.p-4 p{
  color: var(--muted) !important;
}

div.mt-6.border.rounded.p-4 table{
  border-color: rgba(255,255,255,.10) !important;
}
div.mt-6.border.rounded.p-4 thead{
  background: rgba(255,255,255,.04) !important;
}
div.mt-6.border.rounded.p-4 th,
div.mt-6.border.rounded.p-4 td{
  border-color: rgba(255,255,255,.08) !important;
}
div.mt-6.border.rounded.p-4 ul.list-disc li{
  color: var(--text);
}

/* Tlačidlo „Choose plan“ */
div.mt-6.border.rounded.p-4 button.bg-black.text-white{
  background: linear-gradient(90deg,var(--accent),var(--accent-2)) !important;
  border: none !important;
  border-radius: 12px !important;
  box-shadow: 0 8px 18px rgba(124,92,255,.25);
  font-weight: 700;
  color: #fff !important;
}

/* Výstupy A/B (karty) */
.grid.grid-cols-1.md\:grid-cols-2.gap-4.mt-6 > div.border.p-3.rounded{
  background: var(--card) !important;
  border: 1px solid rgba(255,255,255,.08) !important;
  border-radius: 14px !important;
  box-shadow: var(--shadow-soft);
}
.grid.grid-cols-1.md\:grid-cols-2.gap-4.mt-6 h2{
  color: var(--heading);
}
.grid.grid-cols-1.md\:grid-cols-2.gap-4.mt-6 .text-xs.text-gray-500{
  color: var(--muted) !important;
}
.grid.grid-cols-1.md\:grid-cols-2.gap-4.mt-6 button.underline{
  color: var(--accent) !important;
}

/* Feedback sekcia */
div.mt-8 > button.underline{
  color: var(--accent) !important;
}
div.mt-8 .mt-2.border.rounded.p-3{
  background: var(--card) !important;
  border: 1px solid rgba(255,255,255,.08) !important;
  border-radius: 14px !important;
  box-shadow: var(--shadow-soft);
}
div.mt-8 textarea.w-full.p-2.border.rounded{
  background: var(--input-bg) !important;
  border: 1px solid var(--input-border) !important;
  color: var(--input-text) !important;
  border-radius: 12px !important;
  padding: 12px 14px !important;
}
div.mt-8 button.mt-2.bg-gray-800.text-white{
  background: linear-gradient(90deg,var(--accent),var(--accent-2)) !important;
  border: none !important;
  border-radius: 12px !important;
  box-shadow: 0 8px 18px rgba(124,92,255,.25);
  font-weight: 700;
  color: #fff !important;
}

/* Toast */
.fixed.bottom-4.left-1\/2.-translate-x-1\/2.bg-black.text-white.px-3.py-2.rounded{
  background: #0f152f !important;
  border: 1px solid rgba(255,255,255,.12) !important;
  box-shadow: var(--shadow);
  border-radius: 12px !important;
}

/* Header (AppHeader) – ochranný štýl, ak používa border/pozadie */
header, .app-header{
  background: transparent !important;
  border-bottom: 1px solid rgba(255,255,255,.08) !important;
  margin-bottom: 12px;
  margin-top: 50px;
}

/* Jemná animácia nástupu */
@media (prefers-reduced-motion: no-preference){
  main.max-w-3xl.mx-auto{ animation: fadeUp .35s ease both }
  @keyframes fadeUp{ from{opacity:0; transform: translateY(8px)} to{opacity:1; transform: translateY(0)} }
}


.aaaa{
  font-weight: 800;
    letter-spacing: .2px;
    background: linear-gradient(90deg, var(--accent), var(--accent-2));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    margin-left: 50px;
}