/* ============================================================================
   realitnynavigator.sk — design system (cascade-first)
   Jediný zdroj pravdy. Nič sa neopakuje: tokeny, reset, farby, rádiusy,
   typografia a komponenty definované raz, naprieč celým webom.
   Poradie vrstiev = explicitná kaskáda (neskoršie prebíja skoršie).
============================================================================ */
@layer tokens, base, layout, nav, buttons, hero, cards, steps, dedup, calc,
       tools, mapview, detail, locality, realitky, kategorie, wizard, submit, footer, util, zones;

/* ── tokens ─────────────────────────────────────────────────────────────── */
@layer tokens {
  :root {
    /* paleta — podklad s modrým nádychom + tmavý slate text; akcent je modrá zo značky
       (rovnaká ako mapa /app/), teplá terakota vyhradená pre CTA tlačidlá */
    --cream:#f6f9fb; --paper:#ffffff; --warm:#eef3f8;
    --ink:#14202e; --muted:#5d6c7d; --line:#e2e8f0;
    --accent:#1d6fa4; --accent-d:#0d4a75; --accent-hi:#3aa7e0;
    --cta:#e2593c; --cta-d:#c44526;
    --green:#1a8a5a; --gold:#c08a2d; --violet:#6d4bb8;
    /* sémantické aliasy (mapa/dedup používa tieto názvy) */
    --new:var(--green); --drop:var(--gold); --dup:var(--violet);
    /* tinty pre odznaky/ikony (raz, znovupoužité) */
    --t-accent:rgba(29,111,164,.10); --t-green:rgba(26,138,90,.13);
    --t-gold:rgba(192,138,45,.14);  --t-violet:rgba(109,75,184,.12);
    /* tvar + tieň */
    --r:16px; --r-sm:11px; --r-lg:24px; --pill:999px;
    --shadow:0 14px 40px rgba(27,37,48,.08);
    --shadow-sm:0 10px 34px rgba(27,37,48,.10);
    /* typografia */
    --serif:"Fraunces",Georgia,serif;
    --sans:"Inter",system-ui,-apple-system,sans-serif;
    /* rozmery layoutu */
    --wrap:1140px; --gutter:24px; --nav-h:68px;
  }
}

/* ── base / reset ───────────────────────────────────────────────────────── */
@layer base {
  *,*::before,*::after { box-sizing:border-box; }
  html { -webkit-text-size-adjust:100%; }
  body {
    margin:0; background:var(--cream); color:var(--ink);
    font-family:var(--sans); line-height:1.6; -webkit-font-smoothing:antialiased;
  }
  a { color:inherit; text-decoration:none; }
  img { max-width:100%; display:block; }
  h1,h2,h3,h4 { font-family:var(--serif); font-weight:600; letter-spacing:-.02em; line-height:1.1; margin:0; }
  input,select,button,textarea { font:inherit; }
  :focus-visible { outline:2px solid var(--accent); outline-offset:2px; border-radius:4px; }
  .accent { color:var(--accent); }
  .serif { font-family:var(--serif); }
}

/* ── layout ─────────────────────────────────────────────────────────────── */
@layer layout {
  .wrap { max-width:var(--wrap); margin-inline:auto; padding-inline:var(--gutter); }
  .section { padding-block:64px; }
  .section--paper { background:var(--paper); border-block:1px solid var(--line); }
  .section-head { text-align:center; margin-bottom:40px; }
  .section-head--left { text-align:left; margin-bottom:26px; }
  .section-head h2 { font-size:40px; margin-bottom:12px; }
  .section-head--left h2 { font-size:30px; margin-bottom:6px; }
  .section-head p { color:var(--muted); font-size:17px; max-width:52ch; margin-inline:auto; }
  .section-head--left p { margin:0; max-width:none; }
}

/* ── nav + app header ───────────────────────────────────────────────────── */
@layer nav {
  .nav {
    position:sticky; top:0; z-index:1000;
    background:color-mix(in srgb, var(--cream) 85%, transparent);
    backdrop-filter:blur(10px); border-bottom:1px solid var(--line);
  }
  .nav-in { display:flex; align-items:center; gap:28px; height:var(--nav-h); }
  .brand { display:flex; align-items:center; gap:10px; font-family:var(--serif); font-weight:700; font-size:18px; white-space:nowrap; }
  .brand .nd { width:30px; height:30px; border-radius:50%; background:var(--ink); color:var(--cream); display:grid; place-items:center; font-size:15px; transform:rotate(45deg); }
  .brand .nd span { transform:rotate(-45deg); }
  .brand-mark { width:30px; height:30px; flex:0 0 auto; }
  /* wordmark je v Inter ako v logu — serif z .brand by sa s ním rozchádzal */
  .brand-name { font-family:var(--sans); font-weight:400; font-size:17px; letter-spacing:-.02em; color:var(--muted); }
  .brand-name b { font-weight:800; color:var(--ink); }
  .nav-links { display:flex; gap:16px; color:var(--muted); font-size:14px; font-weight:500; }
  .nav-links a { white-space:nowrap; }
  .nav-links a:hover { color:var(--ink); }
  .nav-links a.active { color:var(--ink); font-weight:600; }
  .nav-actions { margin-left:auto; display:flex; align-items:center; gap:8px; }

  /* full-screen app header (mapa) */
  .appbar { display:flex; align-items:center; gap:16px; height:64px; flex:0 0 64px; padding-inline:20px; background:var(--paper); border-bottom:1px solid var(--line); z-index:1000; }
  .appbar .brand { font-weight:600; }
  .appbar .search { flex:1; max-width:440px; display:flex; align-items:center; gap:9px; background:var(--warm); border:1px solid var(--line); border-radius:var(--pill); padding:9px 16px; color:var(--muted); }
  .appbar .search input { background:none; border:0; color:var(--ink); outline:none; width:100%; font-size:14px; }

  /* header zhodný s mapou (/app/ — komunita.html): ikonové menu s bublinami */
  .site-header { position:sticky; top:0; z-index:1000; padding:0 20px;
    background:color-mix(in srgb, var(--cream) 85%, transparent);
    backdrop-filter:blur(10px); border-bottom:1px solid var(--line); }
  .header-inner { display:flex; align-items:center; gap:20px; height:var(--nav-h); }
  .brand .brand-sub { opacity:.6; font-weight:400; font-size:13px; font-family:var(--sans); }
  .site-header .nav { position:static; display:flex; gap:6px; background:none; backdrop-filter:none; border:0; }
  /* veľkosť ikon je zhodná s appkou /app/ (komunita.html) — menu musí byť na celom webe rovnaké */
  .site-header .nav a { position:relative; font-size:23px; padding:6px 10px; line-height:1; border-radius:10px; }
  .site-header .nav a:hover { background:var(--warm); }
  .site-header .nav a.active { background:var(--t-accent); }
  /* názov položky sa ukáže na hover/focus v bubline pod ikonou */
  .site-header .nav a::after { content:attr(data-label); position:absolute; top:calc(100% + 7px); left:50%;
    transform:translateX(-50%) translateY(-3px); background:var(--ink); color:var(--paper);
    font-size:11px; font-weight:600; padding:4px 9px; border-radius:6px; white-space:nowrap;
    opacity:0; pointer-events:none; transition:opacity .15s, transform .15s; z-index:1400; }
  .site-header .nav a:hover::after, .site-header .nav a:focus-visible::after { opacity:1; transform:translateX(-50%) translateY(0); }
  .site-header .btn { padding:8px 14px; font-size:13px; white-space:nowrap; }

  /* všetky nástroje sú priamo v menu ako ikony; oddeľovač ich vizuálne delí od sekcií webu */
  .nav-sep { width:1px; height:20px; background:var(--line); margin:0 4px; align-self:center; flex-shrink:0; }
  /* registrácia = len hlava avatara (ako účet na mape) */
  .nav-avatar { width:34px; height:34px; border-radius:50%; border:1.5px solid var(--line); background:var(--paper);
    display:grid; place-items:center; font-size:16px; flex-shrink:0; }
  .nav-avatar:hover, .nav-avatar.active { border-color:var(--ink); }
  /* 15 ikon menu: pod 1900 px zhusti, pod 1700 px zalom do 2 riadkov — rovnaké
     zlomy ako appka /app/, aby mala ikona všade rovnakú veľkosť pri rovnakej šírke okna */
  @media (max-width:1900px) {
    .header-inner { gap:12px; }
    .site-header .nav { gap:0; }
    .site-header .nav a { padding:6px 7px; font-size:20px; }
  }
  @media (max-width:1700px) {
    .header-inner { flex-wrap:wrap; height:auto; padding:8px 0; row-gap:8px; }
    .site-header .nav { flex-wrap:wrap; }
  }
  /* na dotyku tooltips nefungujú a emoji bez popisov sú múr — mobil: riadok 1 = brand
     + avatar + CTA, riadok 2 = sekcie webu ako JEDEN horizontálne rolovateľný pás čipov
     ikona + krátky popisok (data-short zo site.js). Nástroje sú za 🛠️ (s názvami). */
  @media (max-width:640px) {
    .site-header { padding:0 16px; overflow-x:clip; }
    .site-header .nav a[href^="/nastroje/"], .nav-sep { display:none; }
    .header-inner { flex-wrap:wrap; height:auto; padding:8px 0 0; gap:8px; row-gap:0; }
    .brand .brand-sub { display:none; }             /* „SK+CZ" na 360 px nezaplatí nájom */
    .site-header .nav-actions { margin-left:auto; }
    .site-header .nav { order:3; flex-basis:100%; flex-wrap:nowrap; overflow-x:auto;
      scrollbar-width:none; margin:0 -16px; padding:2px 10px 6px; }
    .site-header .nav::-webkit-scrollbar { display:none; }
    .site-header .nav a { display:flex; flex-direction:column; align-items:center; gap:2px;
      font-size:20px; padding:5px 9px; flex-shrink:0; }
    /* hover bublina sa mení na stály popisok pod ikonou */
    .site-header .nav a::after { content:attr(data-short); position:static; transform:none;
      opacity:1; background:none; color:var(--muted); font-size:10px; font-weight:600;
      padding:0; transition:none; }
    .site-header .nav a.active::after { color:var(--accent-d); }
  }
  @media (max-width:480px) {
    .brand-name { font-size:15px; }
    .site-header .btn { padding:7px 10px; font-size:12.5px; }
  }
}

/* ── buttons + chips ────────────────────────────────────────────────────── */
@layer buttons {
  .btn { font-family:var(--sans); font-weight:600; font-size:14px; padding:11px 20px; border-radius:var(--pill); border:0; cursor:pointer; transition:.18s; display:inline-flex; align-items:center; gap:6px; }
  .btn-pri { background:var(--cta); color:#fff; }
  .btn-pri:hover { background:var(--cta-d); }
  .btn-ghost { background:transparent; border:1px solid var(--line); color:var(--ink); }
  .btn-ghost:hover { border-color:var(--ink); }
  .btn-hot { background:color-mix(in srgb, var(--green) 10%, transparent); border:1px solid color-mix(in srgb, var(--green) 25%, transparent); color:var(--green); font-size:13px; padding:8px 16px; white-space:nowrap; }
  .btn-hot:hover { background:color-mix(in srgb, var(--green) 18%, transparent); }

  /* Dynamický „populárny nástroj" widget (re-rankuje sa podľa rn_tool_usage) */
  .hot-tool { display:flex; align-items:center; gap:18px; background:var(--paper); border:1px solid var(--line); border-left:4px solid var(--green); border-radius:var(--r); padding:16px 22px; box-shadow:var(--shadow-sm); margin:24px 0 8px; transition:.18s; }
  .hot-tool:hover { transform:translateY(-2px); border-left-color:var(--accent); }
  .hot-tool__flag { font-size:12px; font-weight:700; color:var(--green); text-transform:uppercase; letter-spacing:.04em; white-space:nowrap; }
  .hot-tool__body { display:flex; align-items:center; gap:14px; flex:1; min-width:0; }
  .hot-tool__ic { font-size:30px; line-height:1; }
  .hot-tool__txt { display:flex; flex-direction:column; min-width:0; }
  .hot-tool__txt strong { font-family:var(--serif); font-size:19px; color:var(--ink); }
  .hot-tool__txt small { color:var(--muted); font-size:13px; }
  .hot-tool__go { font-weight:600; color:var(--accent); white-space:nowrap; }
  @media (max-width:640px){ .hot-tool{flex-wrap:wrap; gap:10px} .hot-tool__flag{flex-basis:100%} }

  .chips { display:flex; gap:7px; margin-left:auto; }
  .chip { font-size:13px; font-weight:500; padding:8px 14px; border-radius:var(--pill); border:1px solid var(--line); background:var(--paper); color:var(--muted); cursor:pointer; white-space:nowrap; transition:.15s; }
  .chip:hover { color:var(--ink); border-color:var(--accent); }
  .chip.active { background:var(--accent); color:#fff; border-color:var(--accent); font-weight:600; }
}

/* ── hero + searchbar ───────────────────────────────────────────────────── */
@layer hero {
  .hero { padding:84px 0 56px; text-align:center; }
  .hero--tool { padding:72px 0 40px; }
  .eyebrow { display:inline-flex; align-items:center; gap:8px; font-size:13px; font-weight:600; color:var(--accent); background:var(--paper); border:1px solid var(--line); padding:6px 14px; border-radius:var(--pill); margin-bottom:24px; }
  .hero h1 { font-size:clamp(28px,4vw,46px); max-width:none; margin:0 auto 18px; text-wrap:balance; }
  .hero:not(.hero--tool) h1 { white-space:nowrap; }
  .hero--tool h1 { font-size:52px; max-width:18ch; margin-bottom:16px; }
  /* hub stránky s dlhými nadpismi — drž na jednom riadku (zmršti font, nezalamuj) */
  body[data-page="realitky"] .hero--tool h1,
  body[data-page="kategorie"] .hero--tool h1,
  body[data-page="nastroje"] .hero--tool h1 {
    max-width:none; white-space:nowrap; font-size:clamp(24px,3.4vw,42px);
  }
  .hero p { font-size:19px; color:var(--muted); max-width:86ch; margin:0 auto 34px; text-wrap:balance; }
  .hero--tool p { font-size:18px; max-width:60ch; margin-bottom:0; }

  .searchbar { display:flex; align-items:center; gap:8px; background:var(--paper); border:1px solid var(--line); border-radius:var(--pill); padding:8px; max-width:680px; margin:0 auto; box-shadow:var(--shadow); }
  .searchbar input, .searchbar select { border:0; background:none; outline:none; color:var(--ink); padding:12px 16px; }
  .searchbar input { flex:1; min-width:0; }
  .searchbar select { border-left:1px solid var(--line); color:var(--muted); cursor:pointer; }
  .searchbar .btn { flex:0 0 auto; }
  .trust { margin-top:20px; font-size:14px; color:var(--muted); }
  .trust b { color:var(--ink); }
}

/* ── cards: value props + listings ──────────────────────────────────────── */
@layer cards {
  .props { display:grid; grid-template-columns:repeat(4,1fr); gap:18px; margin:30px 0 70px; }
  .prop { background:var(--paper); border:1px solid var(--line); border-radius:var(--r); padding:24px; }
  .prop .ic { width:44px; height:44px; border-radius:12px; display:grid; place-items:center; font-size:20px; margin-bottom:14px; }
  .prop h3 { font-size:18px; margin-bottom:7px; }
  .prop p { font-size:14px; color:var(--muted); margin:0; line-height:1.5; }

  .grid { display:grid; grid-template-columns:repeat(3,1fr); gap:22px; }
  .lc { background:var(--paper); border:1px solid var(--line); border-radius:var(--r); overflow:hidden; transition:.2s; cursor:pointer; display:block; }
  .lc:hover { transform:translateY(-4px); box-shadow:var(--shadow); }
  .lc .ph { position:relative; height:182px; }
  .lc .ph img { width:100%; height:100%; object-fit:cover; }
  .lc .tags { position:absolute; top:10px; left:10px; display:flex; gap:6px; }
  .lc-body { padding:16px 17px 18px; }
  .lc .price { font-family:var(--serif); font-size:23px; font-weight:600; }
  .lc .ppm { font-size:13px; color:var(--muted); font-family:var(--sans); font-weight:500; margin-left:7px; }
  .lc h3 { font-size:15px; font-weight:600; font-family:var(--sans); margin:6px 0 10px; line-height:1.35; }
  .lc .meta { display:flex; gap:10px; font-size:13px; color:var(--muted); border-top:1px solid var(--line); padding-top:11px; }

  /* tag pilulky (zdieľané listing + tool) */
  .tag { font-size:11px; font-weight:700; padding:4px 9px; border-radius:7px; }
  .t-dup { background:color-mix(in srgb,var(--violet) 92%,transparent); color:#fff; }
  .t-drop { background:color-mix(in srgb,var(--gold) 95%,transparent); color:#fff; }
  .t-new { background:color-mix(in srgb,var(--green) 95%,transparent); color:#fff; }
}

/* ── steps ──────────────────────────────────────────────────────────────── */
@layer steps {
  .steps { display:grid; grid-template-columns:repeat(3,1fr); gap:26px; }
  .step { text-align:center; padding:8px; }
  .step .n { width:52px; height:52px; border-radius:50%; background:var(--ink); color:var(--cream); font-family:var(--serif); font-size:22px; display:grid; place-items:center; margin:0 auto 16px; }
  .step h3 { font-size:20px; margin-bottom:8px; }
  .step p { color:var(--muted); font-size:15px; margin:0; }
}

/* ── dedup explainer + CTA ──────────────────────────────────────────────── */
@layer dedup {
  .dedup { background:var(--ink); color:#eaf0f8; border-radius:var(--r-lg); padding:54px; display:grid; grid-template-columns:1.45fr 1fr; gap:44px; align-items:center; }
  .dedup h2 { color:#fff; font-size:clamp(22px,2.3vw,26px); margin-bottom:16px; white-space:nowrap; }
  .dedup p { color:#9fb0c8; font-size:16px; margin:0 0 14px; }
  .dedup .chk { color:#fff; font-size:15px; display:flex; gap:10px; margin:9px 0; }
  .dedup .chk span { color:var(--accent); font-weight:800; }
  .merge { background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.1); border-radius:var(--r); padding:22px; }
  .mrow { display:flex; align-items:center; justify-content:space-between; background:rgba(255,255,255,.05); border-radius:10px; padding:10px 14px; margin-bottom:9px; font-size:13px; }
  .mrow .p { font-weight:700; }
  .mrow.best { outline:1.5px solid var(--green); }
  .mrow.best .p { color:#69d6a3; }
  .marrow { text-align:center; color:var(--accent); font-size:24px; margin:6px 0; }
  .mresult { background:var(--accent); color:#fff; border-radius:12px; padding:14px 16px; text-align:center; font-weight:700; }

  .cta { text-align:center; background:linear-gradient(180deg,#fff,#fbf6ee); border:1px solid var(--line); border-radius:var(--r-lg); padding:56px; }
  .cta h2 { font-size:36px; margin-bottom:12px; }
  .cta p { color:var(--muted); font-size:17px; margin:0 auto 26px; max-width:46ch; }
  .cta form { display:flex; gap:8px; max-width:440px; margin:0 auto; flex-wrap:wrap; justify-content:center; }
  .cta input { flex:1; min-width:0; padding:13px 18px; border:1px solid var(--line); border-radius:var(--pill); outline:none; }
}

/* ── calc (interaktívne kalkulačky) ─────────────────────────────────────── */
@layer calc {
  .calc-grid { display:grid; grid-template-columns:1fr 1fr; gap:22px; }
  .calc { background:var(--paper); border:1px solid var(--line); border-radius:var(--r); padding:26px; box-shadow:var(--shadow); }
  .calc--solo { max-width:760px; margin-inline:auto; }
  .calc h3 { font-size:21px; margin-bottom:4px; }
  .calc .sub { color:var(--muted); font-size:13.5px; margin-bottom:18px; }

  .field { margin-bottom:14px; }
  .field > label { display:block; font-size:13px; font-weight:600; color:var(--ink); margin-bottom:5px; }
  .field .row { display:flex; align-items:center; gap:10px; }
  .field input[type=range] { flex:1; accent-color:var(--accent); }
  .field .val { font-family:var(--serif); font-weight:600; font-size:15px; min-width:96px; text-align:right; }
  .field input[type=number], .field input[type=text], .field input[type=password], .field select { width:100%; padding:10px 12px; border:1px solid var(--line); border-radius:10px; outline:none; background:var(--paper); color:var(--ink); }
  .field input:focus, .field select:focus { border-color:var(--accent); }
  .field-grid { display:grid; grid-template-columns:1fr 1fr; gap:14px; }

  .out { margin-top:18px; background:var(--warm); border-radius:12px; padding:16px 18px; display:flex; flex-wrap:wrap; gap:18px; }
  .out .o { flex:1; min-width:120px; }
  .out .o .k { font-size:12px; color:var(--muted); }
  .out .o .v { font-family:var(--serif); font-weight:700; font-size:24px; letter-spacing:-.02em; }
  .out .o .v.big { color:var(--accent); }
  .note { font-size:12px; color:var(--muted); margin-top:10px; }
  .note.warn { color:var(--accent-d); font-weight:600; }
  .note.ok { color:var(--green); font-weight:600; }

  /* tabuľky (amortizácia, banky, rozpis poplatkov) */
  .ntable { width:100%; border-collapse:collapse; font-size:13.5px; margin-top:8px; }
  .ntable th, .ntable td { text-align:left; padding:9px 12px; border-bottom:1px solid var(--line); }
  .ntable th { font-family:var(--sans); font-weight:600; color:var(--muted); font-size:12px; text-transform:uppercase; letter-spacing:.03em; }
  .ntable td.num, .ntable th.num { text-align:right; font-variant-numeric:tabular-nums; }
  .ntable tr.total td { font-weight:700; border-top:2px solid var(--ink); border-bottom:0; }
  .ntable tr.best td { background:var(--t-green); }

  /* segmentové prepínače */
  .seg { display:inline-flex; background:var(--warm); border:1px solid var(--line); border-radius:var(--pill); padding:3px; gap:3px; }
  .seg button { border:0; background:none; padding:8px 16px; border-radius:var(--pill); font-weight:600; font-size:13px; color:var(--muted); cursor:pointer; }
  .seg button.active { background:var(--accent); color:#fff; }

  /* bar pre vizualizáciu (energie, dostupnosť) */
  .bars { display:grid; gap:7px; margin-top:14px; }
  .bar-row { display:grid; grid-template-columns:48px 1fr 96px; align-items:center; gap:10px; font-size:13px; }
  .bar-track { background:var(--warm); border-radius:var(--pill); height:18px; overflow:hidden; }
  .bar-fill { height:100%; border-radius:var(--pill); background:var(--accent); }
  .bar-row.active .bar-fill { background:var(--ink); }
  .bar-row.active { font-weight:700; }
}

/* ── tools hub (rozcestník) ─────────────────────────────────────────────── */
@layer tools {
  .group { margin-top:14px; }
  .group h3 { font-family:var(--sans); font-size:14px; font-weight:700; text-transform:uppercase; letter-spacing:.04em; color:var(--muted); margin:0 0 14px; display:flex; align-items:center; gap:10px; }
  .group h3::after { content:""; flex:1; height:1px; background:var(--line); }
  .tgrid { display:grid; grid-template-columns:repeat(4,1fr); gap:14px; }
  .tool { background:var(--paper); border:1px solid var(--line); border-radius:13px; padding:16px; transition:.18s; position:relative; display:block; }
  /* živý nástroj (odkaz) musí byť v katalógu rozoznateľný od „čoskoro" karty na prvý
     pohľad, nie až po prečítaní odznaku — neklikateľné karty sú stlmené a bez hover-liftu.
     Scope na #groups: roadmapa na registrácii používa div.tool zámerne informačne. */
  #groups div.tool { background:transparent; opacity:.72; }
  #groups div.tool:hover { transform:none; box-shadow:none; border-color:var(--line); }
  .tool[href] { cursor:pointer; }
  .tool:hover { transform:translateY(-3px); box-shadow:var(--shadow); border-color:var(--accent); }
  .tool .ic { font-size:19px; margin-bottom:8px; }
  .tool h4 { font-family:var(--sans); font-size:14px; font-weight:600; margin:0 0 4px; line-height:1.3; }
  .tool p { font-size:12.5px; color:var(--muted); margin:0; line-height:1.45; }
  .tool .badge { position:absolute; top:13px; right:13px; font-size:10px; font-weight:700; padding:2px 7px; border-radius:6px; }
  .t-free { background:var(--t-green); color:var(--green); }
  .t-prem { background:var(--t-violet); color:var(--violet); }
  .t-lead { background:var(--t-gold); color:var(--gold); }
  .t-live { background:var(--t-accent); color:var(--accent); }
}

/* ── mapview (app shell) ────────────────────────────────────────────────── */
@layer mapview {
  body.app { height:100vh; display:flex; flex-direction:column; overflow:hidden; }
  .stats { display:flex; gap:24px; padding:10px 20px; background:var(--paper); border-bottom:1px solid var(--line); font-size:13px; color:var(--muted); }
  .stats b { color:var(--ink); }
  .stats .hl { color:var(--accent); }
  main.app-main { flex:1; display:flex; min-height:0; }
  aside.list { width:400px; flex:0 0 400px; background:var(--cream); border-right:1px solid var(--line); overflow-y:auto; }
  .list-head { padding:14px 18px 8px; font-size:13px; color:var(--muted); display:flex; justify-content:space-between; }
  .card { display:flex; gap:13px; padding:13px 18px; border-bottom:1px solid var(--line); cursor:pointer; transition:background .15s; }
  .card:hover, .card.active { background:var(--paper); }
  .card.active { box-shadow:inset 3px 0 0 var(--accent); }
  .thumb { width:112px; height:86px; flex:0 0 112px; border-radius:var(--r-sm); object-fit:cover; background:var(--warm); }
  .card-body { min-width:0; flex:1; }
  .card .price { font-family:var(--serif); font-size:19px; font-weight:600; letter-spacing:-.01em; }
  .card .ppm { font-size:12px; color:var(--muted); font-weight:500; margin-left:6px; font-family:var(--sans); }
  .ctitle { font-size:13.5px; margin:3px 0 5px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .card .meta { font-size:12px; color:var(--muted); display:flex; gap:8px; flex-wrap:wrap; }
  .badges { display:flex; gap:5px; margin-top:8px; flex-wrap:wrap; }
  .badge { font-size:11px; font-weight:700; padding:3px 8px; border-radius:7px; }
  .b-dup { background:var(--t-violet); color:var(--dup); }
  .b-drop { background:var(--t-gold); color:var(--drop); }
  .b-new { background:var(--t-green); color:var(--new); }
  .b-invest { background:var(--t-green); color:var(--green); box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--green) 40%, transparent); }

  /* filter strip pod nav v app shell (nahradil .appbar) */
  body.app .nav { position:relative; background:var(--paper); backdrop-filter:none; }
  .app-filters { display:flex; align-items:center; gap:16px; height:52px; flex:0 0 52px; padding-inline:20px; background:var(--paper); border-bottom:1px solid var(--line); z-index:900; }
  .app-filters .search { flex:1; max-width:440px; display:flex; align-items:center; gap:9px; background:var(--warm); border:1px solid var(--line); border-radius:var(--pill); padding:9px 16px; color:var(--muted); }
  .app-filters .search input { background:none; border:0; color:var(--ink); outline:none; width:100%; font-size:14px; }
  .app-filters .seg-sel { border:1px solid var(--line); background:var(--warm); color:var(--ink); border-radius:var(--pill); padding:8px 12px; font-size:13px; cursor:pointer; }
  .app-filters .stats { margin-left:auto; padding:0; background:none; border:0; gap:18px; white-space:nowrap; flex:0 0 auto; }
  .app-filters .brand { flex:0 0 auto; display:flex; align-items:center; gap:8px; font-family:var(--serif); font-weight:700; font-size:16px; color:var(--ink); text-decoration:none; white-space:nowrap; }
  .app-filters .app-add { flex:0 0 auto; font-size:13px; padding:8px 14px; white-space:nowrap; }
  .filterbar { display:flex; align-items:center; gap:10px; padding:8px 20px; background:var(--paper); border-bottom:1px solid var(--line); font-size:13px; color:var(--muted); }
  .filterbar .fpill { display:inline-flex; align-items:center; gap:8px; background:var(--t-accent); color:var(--accent-d); font-weight:600; padding:5px 12px; border-radius:var(--pill); }
  .filterbar .fpill button { border:0; background:none; color:inherit; cursor:pointer; font-weight:700; font-size:14px; line-height:1; }

  #map { flex:1; min-width:0; background:#eef2ea; }
  #map.embed { flex:none; height:440px; border-radius:20px; border:1px solid var(--line); overflow:hidden; box-shadow:var(--shadow); }

  .pin { display:inline-flex; align-items:center; gap:5px; font-family:var(--sans); background:var(--accent); color:#fff; font-weight:700; font-size:13px; padding:6px 11px 6px 8px; border-radius:var(--pill); white-space:nowrap; box-shadow:var(--shadow-sm); border:2px solid #fff; transform:translate(-50%,-50%); line-height:1; cursor:pointer; }
  .pin:hover { filter:brightness(1.06); }
  .pin .pin-ic { font-size:14px; }
  .pin .pin-px { font-family:var(--serif); }
  .pin.dom { background:var(--new); }
  .pin.pozemok { background:var(--drop); }
  .pin.kancelaria, .pin.office { background:var(--ink); }
  .pin.dup { outline:3px solid var(--dup); outline-offset:1px; }

  /* zhlukovanie (markercluster) — v brand farbách */
  .marker-cluster { background:color-mix(in srgb,var(--accent) 30%,transparent); }
  .marker-cluster div { background:var(--accent); color:#fff; font-family:var(--serif); font-weight:700; }
  .marker-cluster span { line-height:30px; }

  /* legenda + nástroje na mape */
  .map-legend { background:var(--paper); border:1px solid var(--line); border-radius:12px; padding:11px 13px; font-size:12px; box-shadow:var(--shadow-sm); line-height:1.7; }
  .map-legend b { display:block; margin-bottom:5px; font-family:var(--serif); }
  .map-legend .lg { display:flex; align-items:center; gap:7px; }
  .map-legend .dot { width:12px; height:12px; border-radius:50%; flex:0 0 12px; }
  .map-legend .hint { margin-top:7px; padding-top:7px; border-top:1px solid var(--line); color:var(--muted); max-width:180px; }
  .leaflet-popup-content .toollink { margin-top:8px; display:flex; gap:10px; }
  .leaflet-popup-content .toollink a { font-size:12px; font-weight:600; color:var(--accent); }

  .leaflet-popup-content-wrapper { background:var(--paper); color:var(--ink); border-radius:var(--r); box-shadow:var(--shadow-sm); }
  .leaflet-popup-tip { background:var(--paper); }
  .leaflet-popup-content { margin:0; }
  .pop { width:272px; }
  .pop img { width:100%; height:144px; object-fit:cover; border-radius:var(--r) var(--r) 0 0; }
  .pop-body { padding:13px 14px 15px; }
  .pop .price { font-family:var(--serif); font-size:20px; font-weight:600; }
  .pop .ppm { font-size:12px; color:var(--muted); font-weight:500; }
  .pop h4 { margin:5px 0 8px; font-size:13.5px; font-weight:600; line-height:1.35; font-family:var(--sans); }
  .pop .meta { font-size:12px; color:var(--muted); }
  .src { margin-top:11px; border-top:1px solid var(--line); padding-top:10px; }
  .src-row { display:flex; justify-content:space-between; font-size:12px; padding:3px 0; color:var(--muted); }
  .src-row b { color:var(--ink); font-weight:600; }
  .src-row .best { color:var(--new); font-weight:700; }
  .spark { margin-top:9px; }
  .dup-note { font-size:12px; color:var(--dup); font-weight:700; margin-top:8px; display:flex; align-items:center; gap:6px; }
  .openlink { margin-top:10px; display:inline-block; font-size:12.5px; font-weight:600; color:var(--accent); }
}

/* ── detail nehnuteľnosti ───────────────────────────────────────────────── */
@layer detail {
  .crumbs { font-size:13px; color:var(--muted); padding:18px 0 0; }
  .crumbs a:hover { color:var(--ink); }

  .dhero { display:grid; grid-template-columns:1.35fr 1fr; gap:32px; align-items:start; margin-top:14px; }
  .gallery .main { width:100%; height:400px; object-fit:cover; border-radius:var(--r); border:1px solid var(--line); }
  .gallery .thumbs { display:grid; grid-template-columns:repeat(5,1fr); gap:8px; margin-top:8px; }
  .gallery .thumbs img { width:100%; height:68px; object-fit:cover; border-radius:9px; cursor:pointer; opacity:.78; transition:.15s; border:1px solid var(--line); }
  .gallery .thumbs img:hover, .gallery .thumbs img.active { opacity:1; outline:2px solid var(--accent); }

  .dsum .ptag { display:inline-flex; gap:6px; align-items:center; font-size:13px; font-weight:700; color:var(--accent); background:var(--t-accent); padding:5px 12px; border-radius:var(--pill); }
  .dsum .price { font-family:var(--serif); font-size:40px; font-weight:700; letter-spacing:-.02em; margin-top:14px; }
  .dsum .ppm { font-family:var(--sans); font-size:15px; color:var(--muted); font-weight:500; margin-left:8px; }
  .dsum h1 { font-size:25px; margin:8px 0 6px; }
  .dsum .loc { color:var(--muted); font-size:15px; }
  .dsum .badges { margin:16px 0; }
  .dsum .dcta { display:flex; gap:10px; flex-wrap:wrap; margin-top:8px; }

  .facts { display:grid; grid-template-columns:repeat(3,1fr); gap:12px; margin-top:18px; }
  .fact { background:var(--paper); border:1px solid var(--line); border-radius:12px; padding:11px 14px; }
  .fact .k { font-size:12px; color:var(--muted); }
  .fact .v { font-weight:700; font-size:16px; }

  .dsection { padding-block:30px; border-top:1px solid var(--line); }
  .dsection > h2 { font-size:26px; margin-bottom:6px; }
  .dsection > .lead { color:var(--muted); margin:0 0 18px; }

  .score-card { display:grid; grid-template-columns:auto 1fr; gap:26px; align-items:center; background:var(--ink); color:#eaf0f8; border-radius:var(--r-lg); padding:28px 32px; }
  .score-num { font-family:var(--serif); font-size:64px; font-weight:700; line-height:1; color:#fff; }
  .score-num small { font-size:24px; color:#9fb0c8; }
  .score-card .bars .bar-row span:first-child { color:#cdd8e8; }
  .score-card .bar-track { background:rgba(255,255,255,.12); }
  .score-prof { display:flex; gap:8px; margin-top:14px; flex-wrap:wrap; }
  .score-prof .chip { background:rgba(255,255,255,.06); border-color:rgba(255,255,255,.18); color:#cdd8e8; }
  .score-prof .chip.active { background:var(--accent); border-color:var(--accent); color:#fff; }

  @media (max-width:920px) {
    .dhero { grid-template-columns:1fr; }
    .gallery .main { height:300px; }
    .facts { grid-template-columns:1fr 1fr; }
    .score-card { grid-template-columns:1fr; text-align:center; }
  }
}

/* ── lokality (SEO landing) ─────────────────────────────────────────────── */
@layer locality {
  .loc-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }
  .loc-card { display:block; background:var(--paper); border:1px solid var(--line); border-radius:var(--r); padding:20px 22px; transition:.18s; }
  .loc-card[href]:hover { transform:translateY(-4px); box-shadow:var(--shadow); border-color:var(--accent); }
  .loc-card.soon { opacity:.6; }
  .loc-card h3 { font-size:20px; margin-bottom:4px; }
  .loc-card .cnt { font-size:13px; color:var(--accent); font-weight:600; }
  .loc-card .st { display:flex; gap:18px; margin-top:14px; padding-top:13px; border-top:1px solid var(--line); }
  .loc-card .st .k { font-size:11px; color:var(--muted); }
  .loc-card .st .v { font-family:var(--serif); font-weight:700; font-size:17px; }
  .loc-card .loc-district { display:block; font-size:12px; color:var(--muted); margin-top:2px; }
  .loc-search { display:flex; align-items:center; gap:12px; margin-bottom:18px; }
  .loc-search input { flex:1; max-width:420px; padding:11px 14px; border:1px solid var(--line); border-radius:10px;
    background:var(--paper); color:var(--ink); font:inherit; font-size:15px; }
  .loc-search input:focus-visible { outline:2px solid var(--accent); outline-offset:1px; }
  .loc-count { font-size:13px; color:var(--muted); font-weight:600; }
  .loc-more { display:flex; justify-content:center; margin-top:22px; }
  .loc-empty { color:var(--muted); }
  .seo-prose { max-width:68ch; color:var(--muted); line-height:1.7; }
  .seo-prose p { margin:0 0 14px; }
  .faq dt { font-weight:700; color:var(--ink); margin-top:16px; }
  .faq dd { margin:6px 0 0; color:var(--muted); }

  @media (max-width:920px) { .loc-grid { grid-template-columns:1fr 1fr; } }
  @media (max-width:600px) { .loc-grid { grid-template-columns:1fr; } .loc-search { flex-wrap:wrap; } }
}

/* ── pridať inzerát (formulár + náhľad) ─────────────────────────────────── */
@layer submit {
  .submit-grid { display:grid; grid-template-columns:1.05fr .95fr; gap:24px; align-items:start; }
  .preview-col { position:sticky; top:88px; }
  .preview-col .plabel { font-size:12px; text-transform:uppercase; letter-spacing:.04em; color:var(--muted); font-weight:700; margin-bottom:10px; }
  .req { color:var(--accent); }
  .source-box { background:var(--warm); border:1px solid var(--line); border-radius:12px; padding:14px; margin:8px 0 18px; }
  .source-box .field { margin-bottom:10px; }
  .source-box .btn { width:100%; justify-content:center; }
  .field .hint { font-size:11px; color:var(--muted); font-weight:400; margin-left:4px; }
  .field.bad input, .field.bad select, .field.bad textarea { border-color:var(--accent); }
  textarea { width:100%; min-height:96px; padding:10px 12px; border:1px solid var(--line); border-radius:10px; resize:vertical; }
  textarea:focus { border-color:var(--accent); outline:none; }
  .hp { position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }

  .photo-drop { border:2px dashed var(--line); border-radius:12px; padding:18px; text-align:center; color:var(--muted); cursor:pointer; transition:.15s; }
  .photo-drop:hover { border-color:var(--accent); color:var(--ink); }
  .photo-thumbs { display:flex; gap:8px; flex-wrap:wrap; margin-top:10px; }
  .photo-thumbs img { width:66px; height:50px; object-fit:cover; border-radius:8px; border:1px solid var(--line); }

  .ph.empty { display:grid; place-items:center; background:var(--warm); color:var(--muted); font-size:13px; }
  .preview-facts { display:flex; flex-wrap:wrap; gap:8px; margin-top:14px; }
  .preview-facts span { font-size:12px; background:var(--warm); border:1px solid var(--line); border-radius:8px; padding:5px 9px; }

  .ok-panel { background:var(--t-green); border:1px solid var(--green); border-radius:var(--r); padding:22px 24px; }
  .ok-panel h3 { font-size:21px; margin-bottom:8px; }
  .ok-panel pre { background:var(--paper); border:1px solid var(--line); border-radius:10px; padding:14px; overflow:auto; font-size:12px; line-height:1.5; max-height:300px; }

  @media (max-width:920px) {
    .submit-grid { grid-template-columns:1fr; }
    .preview-col { position:static; }
  }
}

@layer tools {
  .compare-actions { display:flex; gap:8px; flex-wrap:wrap; margin-top:10px; }
  .cmp-btn { font-size:12px; padding:7px 11px; border-radius:var(--pill); border:1px solid var(--line); background:var(--paper); color:var(--muted); font-weight:700; cursor:pointer; }
  .cmp-btn:hover, .cmp-btn.active { border-color:var(--accent); color:var(--accent); background:var(--t-accent); }
  .card .compare-actions { margin-top:8px; }
  .card .cmp-btn { padding:5px 9px; }
  .compare-head { display:flex; justify-content:space-between; gap:18px; align-items:flex-start; margin-bottom:18px; }
  .compare-head h2 { font-size:30px; margin-bottom:6px; }
  .compare-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); gap:16px; margin-bottom:18px; }
  .cmp-card { background:var(--paper); border:1px solid var(--line); border-radius:var(--r); overflow:hidden; }
  .cmp-card img { width:100%; height:150px; object-fit:cover; background:var(--warm); }
  .cmp-card__body { padding:15px; }
  .cmp-card h3 { font-family:var(--sans); font-size:14px; line-height:1.35; margin:8px 0; }
  .cmp-card .price { font-family:var(--serif); font-size:21px; font-weight:700; }
  .cmp-card .ppm { font-family:var(--sans); color:var(--muted); font-size:12px; margin-left:6px; }
  .compare-table-wrap { margin-top:0; }
  .compare-table th { min-width:145px; color:var(--muted); }
  .compare-table td { min-width:180px; vertical-align:top; }
  .empty-compare { text-align:center; }
  .empty-compare .lead { color:var(--muted); max-width:58ch; margin:8px auto 20px; }
  @media (max-width:720px) {
    .compare-head { flex-direction:column; }
  }
}

/* ── footer ─────────────────────────────────────────────────────────────── */
@layer footer {
  .foot { padding:48px 0; border-top:1px solid var(--line); color:var(--muted); font-size:14px; margin-top:64px; }
  .foot-in { display:flex; justify-content:space-between; flex-wrap:wrap; gap:18px; }
  .foot strong { color:var(--ink); }
  .foot-brand { display:flex; align-items:center; gap:10px; }
  .foot a:hover { color:var(--ink); }
}

/* ── realitky: katalóg realitných kancelárií ────────────────────────────── */
@layer realitky {
  .rk-toolbar { background:var(--paper); border:1px solid var(--line); border-radius:var(--r); padding:18px; box-shadow:var(--shadow-sm); position:sticky; top:calc(var(--nav-h) + 10px); z-index:50; }
  .rk-search { display:flex; align-items:center; gap:10px; background:var(--warm); border:1px solid var(--line); border-radius:var(--pill); padding:11px 18px; }
  .rk-search input { flex:1; min-width:0; background:none; border:0; outline:none; color:var(--ink); font-size:15px; }
  .rk-search .ic { color:var(--muted); }
  .rk-filters { display:flex; flex-wrap:wrap; gap:8px; align-items:center; margin-top:14px; }
  .rk-filters .chips { flex-wrap:wrap; }
  .rk-filters select { border:1px solid var(--line); background:var(--paper); color:var(--ink); border-radius:var(--pill); padding:8px 14px; cursor:pointer; }
  .rk-count { margin-left:auto; font-size:14px; color:var(--muted); white-space:nowrap; }
  .rk-count b { color:var(--ink); font-family:var(--serif); }

  .rk-list { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin-top:24px; }
  .rk-card { background:var(--paper); border:1px solid var(--line); border-radius:var(--r); padding:18px 18px 16px; display:flex; flex-direction:column; gap:9px; transition:.16s; }
  .rk-card:hover { border-color:var(--accent); box-shadow:var(--shadow-sm); transform:translateY(-3px); }
  .rk-card h3 { font-family:var(--sans); font-size:16px; font-weight:700; line-height:1.3; }
  .rk-card .addr { font-size:13.5px; color:var(--muted); line-height:1.45; }
  .rk-card .row { display:flex; flex-wrap:wrap; gap:8px; align-items:center; font-size:12.5px; color:var(--muted); margin-top:auto; }
  .rk-tag { font-size:11px; font-weight:700; padding:3px 9px; border-radius:var(--pill); background:var(--warm); color:var(--ink); border:1px solid var(--line); }
  .rk-tag.kraj { background:var(--t-accent); color:var(--accent-d); border-color:transparent; }
  .rk-tag.liq { background:rgba(192,138,45,.16); color:#8a5e10; border-color:transparent; }
  .rk-card .links { display:flex; gap:14px; margin-top:6px; padding-top:11px; border-top:1px solid var(--line); font-size:13px; font-weight:600; }
  .rk-card .links a { color:var(--accent); }
  .rk-card .links a:hover { color:var(--accent-d); }
  .rk-ico { font-variant-numeric:tabular-nums; }

  .rk-more { display:flex; justify-content:center; margin-top:28px; }
  .rk-empty { text-align:center; color:var(--muted); padding:48px 0; }
  .rk-note { font-size:12.5px; color:var(--muted); margin-top:10px; }

  @media (max-width:920px) { .rk-list { grid-template-columns:1fr 1fr; } .rk-toolbar { position:static; } }
  @media (max-width:600px) { .rk-list { grid-template-columns:1fr; } .rk-count { margin-left:0; width:100%; } }
}

/* ── kategórie: realít + zákazníkov ─────────────────────────────────────── */
@layer kategorie {
  .seg { display:inline-flex; gap:6px; background:var(--warm); border:1px solid var(--line); border-radius:var(--pill); padding:4px; }
  .seg button { border:0; background:none; cursor:pointer; padding:8px 16px; border-radius:var(--pill); font-weight:600; font-size:14px; color:var(--muted); transition:.15s; }
  .seg button.active { background:var(--paper); color:var(--ink); box-shadow:var(--shadow-sm); }

  .kat-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:18px; }
  .kat-card { background:var(--paper); border:1px solid var(--line); border-radius:var(--r); padding:24px; border-left:4px solid var(--line); }
  .kat-card .ic { font-size:26px; }
  .kat-card h3 { font-size:21px; margin:10px 0 4px; }
  .kat-card .lead { color:var(--muted); font-size:14.5px; margin:0 0 12px; }
  .kat-card ul { margin:0; padding-left:18px; color:var(--ink); font-size:14px; line-height:1.7; }
  .kat-card .who { font-size:13px; color:var(--muted); margin-top:12px; padding-top:12px; border-top:1px solid var(--line); }
  .kat-card .who b { color:var(--ink); }
  .kat-card.invest { border-left-color:var(--green); }
  .kat-card.uziv   { border-left-color:var(--accent); }
  .kat-card.biznis { border-left-color:var(--violet); }
  .kat-card.pozemok{ border-left-color:var(--gold); }
  .kat-cnt { font-family:var(--serif); font-weight:700; font-size:15px; color:var(--ink); }

  .seg-cards { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin-top:8px; }
  .seg-card { background:var(--paper); border:1px solid var(--line); border-radius:var(--r); padding:22px; }
  .seg-card .ic { font-size:24px; }
  .seg-card h3 { font-size:18px; margin:8px 0 4px; }
  .seg-card p { color:var(--muted); font-size:14px; margin:0 0 10px; }
  .seg-card .wants { display:flex; flex-wrap:wrap; gap:6px; }

  .invest-badge { background:var(--t-green); color:var(--green); border:1px solid transparent; }

  @media (max-width:820px) { .kat-grid, .seg-cards { grid-template-columns:1fr; } }
}

/* ── wizard: žiadosť o hypotéku / úver / poistenie ──────────────────────── */
@layer wizard {
  .wiz { max-width:780px; margin-inline:auto; }

  /* progress (3 kroky) */
  .wiz-prog { display:flex; align-items:center; gap:0; margin-bottom:26px; }
  .wiz-prog .st { display:flex; align-items:center; gap:9px; flex:1; }
  .wiz-prog .st:last-child { flex:0 0 auto; }
  .wiz-prog .dot { width:30px; height:30px; flex:0 0 auto; border-radius:50%; display:grid; place-items:center; font-weight:700; font-size:14px; background:var(--warm); color:var(--muted); border:1px solid var(--line); }
  .wiz-prog .st.on .dot { background:var(--accent); color:#fff; border-color:var(--accent); }
  .wiz-prog .st.done .dot { background:var(--green); color:#fff; border-color:var(--green); }
  .wiz-prog .lbl { font-size:13px; font-weight:600; color:var(--muted); white-space:nowrap; }
  .wiz-prog .st.on .lbl, .wiz-prog .st.done .lbl { color:var(--ink); }
  .wiz-prog .bar { flex:1; height:2px; background:var(--line); margin:0 12px; }
  .wiz-prog .st.done + .st .bar, .wiz-prog .bar.done { background:var(--green); }

  .wiz-step { display:none; }
  .wiz-step.active { display:block; }
  .wiz-step h3 { font-size:22px; margin-bottom:4px; }
  .wiz-step .sub { color:var(--muted); font-size:14px; margin-bottom:20px; }

  /* veľké voľby produktu */
  .choices { display:grid; grid-template-columns:repeat(3,1fr); gap:14px; }
  .choice { position:relative; display:block; cursor:pointer; background:var(--paper); border:1.5px solid var(--line); border-radius:var(--r); padding:22px 18px; text-align:center; transition:.15s; }
  .choice:hover { border-color:var(--accent); transform:translateY(-3px); box-shadow:var(--shadow-sm); }
  .choice input { position:absolute; opacity:0; pointer-events:none; }
  .choice .ic { font-size:30px; }
  .choice h4 { font-family:var(--sans); font-size:16px; margin:10px 0 4px; }
  .choice p { font-size:12.5px; color:var(--muted); margin:0; line-height:1.45; }
  .choice:has(input:checked) { border-color:var(--accent); background:var(--t-accent); box-shadow:inset 0 0 0 1px var(--accent); }
  .choice:has(input:focus-visible) { outline:2px solid var(--accent); outline-offset:2px; }

  .wiz-fields { display:grid; grid-template-columns:1fr 1fr; gap:14px 20px; }
  .wiz-fields .span { grid-column:1 / -1; }
  .wiz-fields .err { box-shadow:inset 0 0 0 1.5px var(--accent); border-radius:10px; }
  .wiz-err { color:var(--accent-d); font-size:13px; font-weight:600; margin-top:12px; display:none; }
  .wiz-err.on { display:block; }

  .wiz-nav { display:flex; justify-content:space-between; gap:12px; margin-top:24px; }
  .wiz-nav .btn[disabled] { opacity:.4; pointer-events:none; }
  .hp { position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }

  /* zhrnutie + úspech */
  .wiz-summary { background:var(--warm); border-radius:12px; padding:16px 18px; margin:16px 0; }
  .wiz-summary .row { display:flex; justify-content:space-between; gap:12px; font-size:14px; padding:6px 0; border-bottom:1px solid var(--line); }
  .wiz-summary .row:last-child { border-bottom:0; }
  .wiz-summary .row span { color:var(--muted); }
  .wiz-summary .row b { text-align:right; }
  .wiz-ok { text-align:center; padding:20px 0; }
  .wiz-ok .ic { font-size:48px; }
  .wiz-ok h3 { font-size:26px; margin:12px 0 8px; }
  .wiz-ok p { color:var(--muted); max-width:48ch; margin:0 auto 18px; }

  @media (max-width:620px) {
    .choices { grid-template-columns:1fr; }
    .wiz-fields { grid-template-columns:1fr; }
    .wiz-prog .lbl { display:none; }
    .wiz-prog .bar { margin:0 8px; }
  }
}

/* ── util + responsive ──────────────────────────────────────────────────── */
@layer util {
  .center { text-align:center; }
  .mt-24 { margin-top:24px; }
  .hide { display:none !important; }
  /* Leaflet piny sú absolútne pozicované a bez orezania pretečú stránku do
     vodorovného scrollu; platí pre všetky embed mapy (#map/#lmap/#dmap) */
  .embed { overflow:hidden; border-radius:20px; border:1px solid var(--line); }
  /* inline grid so 4 stĺpcami (lokalita.html) sa na mobile nezmestí */
  @media (max-width:640px) {
    .out[style*="grid-template-columns"] { grid-template-columns:1fr 1fr !important; }
  }

  @media (max-width:920px) {
    .hero:not(.hero--tool) h1 { white-space:normal; }
    .hero--tool h1 { font-size:36px; }
    body[data-page="realitky"] .hero--tool h1,
    body[data-page="kategorie"] .hero--tool h1,
    body[data-page="nastroje"] .hero--tool h1 { white-space:normal; font-size:32px; }
    .props { grid-template-columns:repeat(2,1fr); }
    .grid { grid-template-columns:1fr 1fr; }
    .steps { grid-template-columns:1fr; }
    .dedup { grid-template-columns:1fr; padding:32px; }
    .dedup h2 { white-space:normal; }
    .calc-grid { grid-template-columns:1fr; }
    .tgrid { grid-template-columns:1fr 1fr; }
    .field-grid { grid-template-columns:1fr; }
    .nav-links, .nav-add, .btn-hot { display:none; }
    .searchbar { flex-wrap:wrap; border-radius:18px; }
    .searchbar input { flex:1 1 100%; }
  }
  /* na úzkych displejoch hlavné CTA pretekalo z hlavičky a tlačilo stránku
     do vodorovného scrollu — drž ho na jednom riadku a zmenši (fix prenesený z CZ) */
  @media (max-width:640px) {
    .nav-in { gap:12px; }
    .brand { font-size:16px; }
    .brand .nd { width:26px; height:26px; font-size:13px; }
    .brand-mark { width:26px; height:26px; }
    .nav-actions .btn { font-size:13px; padding:9px 13px; white-space:nowrap; }
    .wrap { padding-inline:16px; }
  }
  @media (max-width:860px) {
    .app-filters .chips, .app-filters .stats { display:none; }
    aside.list { position:absolute; bottom:0; left:0; right:0; width:100%; flex:none; height:46%; border-right:0; border-top:1px solid var(--line); z-index:900; }
    main.app-main { position:relative; }
    .app-filters .search { max-width:none; }
  }
  @media (max-width:600px) {
    .props, .grid { grid-template-columns:1fr; }
    .tgrid { grid-template-columns:1fr; }
    .bar-row { grid-template-columns:42px 1fr 78px; }
  }
}

/* ── hypotéka — rozšírená kalkulačka (profil žiadateľa + bonita) ─────────── */
@layer layout { .wrap--wide { max-width:1380px; } }

@layer calc {
  /* karta cez celú šírku (nie solo 760) */
  .calc--wide { max-width:none; margin-inline:0; }

  /* mriežka vstupov profilu — vyplní celú šírku okna */
  .profile-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); gap:14px 24px; }
  .profile-grid .span { grid-column:1 / -1; }

  /* hlavný split: 3/4 vstupy vľavo, 1/4 výsledok vpravo (na jednom obraze) */
  .hypo-top { display:grid; grid-template-columns:3fr 1fr; gap:22px; align-items:start; }
  .hypo-result { position:sticky; top:88px; }
  .hypo-result h3 { margin-bottom:14px; }
  .hypo-result .rlabel { font-size:12px; color:var(--muted); }
  .hypo-result .rhero { font-family:var(--serif); font-weight:700; font-size:40px; color:var(--accent); line-height:1; letter-spacing:-.02em; margin:3px 0 14px; }
  .rverdict { display:block; text-align:center; font-weight:700; font-size:14px; padding:10px 12px; border-radius:11px; }
  .rverdict.ok { background:var(--t-green); color:var(--green); }
  .rverdict.warn { background:var(--t-gold); color:var(--gold); }
  .rverdict.block { background:var(--t-accent); color:var(--accent-d); }
  .rsub { font-size:12px; color:var(--muted); margin-top:9px; line-height:1.45; }
  .rlist { list-style:none; padding:0; margin:15px 0 0; }
  .rlist li { display:flex; justify-content:space-between; gap:10px; font-size:13px; padding:8px 0; border-bottom:1px solid var(--line); }
  .rlist li:last-child { border-bottom:0; }
  .rlist span { color:var(--muted); }
  .rlist b { font-family:var(--serif); font-weight:700; white-space:nowrap; }

  /* dashboard detailov: limity/bonita + stress vedľa seba */
  .dash { display:grid; grid-template-columns:1fr 1fr; gap:22px; margin-top:22px; align-items:start; }

  /* segmentový prepínač na rádiá (typ príjmu) */
  .radioseg { display:flex; flex-wrap:wrap; gap:6px; }
  .radioseg label { font-size:12.5px; font-weight:600; padding:7px 13px; border-radius:var(--pill); border:1px solid var(--line); background:var(--paper); color:var(--muted); cursor:pointer; transition:.15s; }
  .radioseg label:hover { border-color:var(--accent); color:var(--ink); }
  .radioseg label:has(input:checked) { background:var(--accent); border-color:var(--accent); color:#fff; }
  .radioseg label:has(input:focus-visible) { outline:2px solid var(--accent); outline-offset:2px; }
  .radioseg input { position:absolute; opacity:0; width:0; height:0; pointer-events:none; }

  /* inline checkbox riadok */
  .checks { display:flex; flex-wrap:wrap; gap:10px 22px; }
  .checks label { display:inline-flex; gap:8px; align-items:center; cursor:pointer; font-size:13px; font-weight:600; color:var(--ink); }
  .checks input { width:auto; accent-color:var(--accent); }

  /* verdikt bonity */
  .verdict { display:grid; grid-template-columns:auto 1fr; gap:22px; align-items:center; background:var(--ink); color:#eaf0f8; border-radius:var(--r); padding:22px 26px; }
  .verdict .score { text-align:center; }
  .verdict .score .big { font-family:var(--serif); font-weight:700; font-size:46px; line-height:1; }
  .verdict .score .lbl { font-size:12px; color:#a9b6c9; margin-top:4px; }
  .verdict h4 { font-family:var(--sans); font-size:15px; margin:0 0 4px; }
  .verdict .vsub { font-size:13px; color:#a9b6c9; }

  .checklist { list-style:none; padding:0; margin:12px 0 0; display:grid; gap:7px; }
  .checklist li { display:flex; gap:9px; align-items:flex-start; font-size:13px; line-height:1.45; }
  .checklist .ic { flex:0 0 auto; font-weight:800; }
  .checklist li.ok .ic { color:var(--green); }
  .checklist li.warn .ic { color:var(--gold); }
  .checklist li.block .ic { color:var(--accent); }

  /* výrazný alert pri tvrdom blokátore (registre, nedoplatky, skúšobná) */
  .alert { display:flex; gap:14px; align-items:flex-start; background:var(--t-accent); border:1.5px solid var(--accent); border-radius:var(--r); padding:16px 20px; margin-top:22px; }
  .alert .ic { font-size:22px; line-height:1.1; }
  .alert h4 { font-family:var(--sans); font-size:15.5px; margin:0 0 3px; color:var(--accent-d); }
  .alert p { margin:0; font-size:13px; color:var(--ink); line-height:1.5; }
  .alert ul { margin:7px 0 0; padding-left:18px; }
  .alert li { font-size:13px; color:var(--ink); line-height:1.5; margin-bottom:3px; }

  /* odznak schváliteľnosti v tabuľke bánk */
  .vbadge { display:inline-flex; align-items:center; gap:5px; font-weight:700; font-size:11.5px; padding:4px 10px; border-radius:var(--pill); white-space:nowrap; }
  .vbadge.ok { background:var(--t-green); color:var(--green); }
  .vbadge.warn { background:var(--t-gold); color:var(--gold); }
  .vbadge.block { background:var(--t-accent); color:var(--accent-d); }

  .tscroll { overflow-x:auto; -webkit-overflow-scrolling:touch; }

  /* karty „aké parametre banka rieši" */
  .paramgrid { display:grid; grid-template-columns:repeat(auto-fit,minmax(265px,1fr)); gap:16px; margin-top:6px; }
  .param { background:var(--warm); border-radius:12px; padding:16px 18px; }
  .param .tag { font-size:10.5px; font-weight:700; color:var(--accent); text-transform:uppercase; letter-spacing:.05em; }
  .param h4 { font-family:var(--sans); font-size:14.5px; font-weight:700; margin:4px 0 5px; }
  .param p { font-size:13px; color:var(--muted); margin:0; line-height:1.5; }

  @media (max-width:920px) {
    .hypo-top { grid-template-columns:1fr; }
    .hypo-result { position:static; }
    .dash { grid-template-columns:1fr; }
    .verdict { grid-template-columns:1fr; text-align:center; }
  }
}

/* ── cenové zóny (/cenove-zony.html) + rank (/rank.html) ─────────────────── */
@layer zones {
  .zone-bar { display:flex; flex-wrap:wrap; align-items:center; gap:12px; margin-bottom:14px; }
  .seg { display:inline-flex; background:var(--warm); border-radius:var(--pill); padding:3px; gap:2px; }
  .seg button { border:0; background:transparent; color:var(--muted); font:inherit; font-size:13.5px; font-weight:600;
    padding:8px 16px; border-radius:var(--pill); cursor:pointer; transition:.15s; }
  .seg button:hover { color:var(--ink); }
  .seg button.active { background:var(--paper); color:var(--accent); box-shadow:0 1px 3px rgba(27,37,48,.12); }
  .zone-check { display:inline-flex; align-items:center; gap:7px; font-size:13.5px; color:var(--muted); cursor:pointer; }
  .zone-note { margin-left:auto; font-size:13px; color:var(--muted); }
  .zone-map { height:min(66vh,620px); }

  .zone-legend { margin-top:14px; background:var(--paper); border:1px solid var(--line); border-radius:13px; padding:14px 18px; }
  .zl-title { font-size:12px; font-weight:700; text-transform:uppercase; letter-spacing:.05em; color:var(--muted); margin-bottom:9px; }
  .zl-scale { display:flex; height:11px; border-radius:6px; overflow:hidden; }
  .zl-scale span { flex:1; }
  .zl-ends { display:flex; justify-content:space-between; font-size:12.5px; color:var(--muted); margin-top:6px; }
  .zl-hint { font-size:12.5px; color:var(--muted); margin-top:8px; }

  .zone-stats { margin-top:16px; display:grid; grid-template-columns:repeat(3,1fr); gap:14px; }
  .zone-steps { margin-top:8px; }
  .zone-formula { margin-top:22px; }
  .zone-formula h3 { font-size:20px; margin:0 0 8px; }
  .zone-code { background:var(--ink); color:#dbe6f2; border-radius:12px; padding:16px 18px; font-size:13px;
    line-height:1.65; overflow-x:auto; -webkit-overflow-scrolling:touch; margin:14px 0; }
  .zone-list { margin:0; padding-left:20px; color:var(--muted); font-size:14.5px; line-height:1.65; }
  .zone-list b { color:var(--ink); }
  .zone-warn { margin:16px 0 0; padding:12px 15px; background:var(--t-gold); color:var(--gold);
    border-radius:11px; font-size:13.5px; line-height:1.55; }

  /* rank */
  .rank-hero { display:grid; grid-template-columns:auto 1fr; gap:30px; align-items:center; }
  .rank-dial { width:132px; height:132px; border-radius:50%; display:grid; place-items:center; text-align:center;
    background:conic-gradient(var(--accent) calc(var(--pctval) * 1%), rgba(255,255,255,.14) 0); }
  .rank-dial > span { width:104px; height:104px; border-radius:50%; background:var(--ink); display:grid; place-items:center;
    font-family:var(--serif); font-size:38px; font-weight:700; color:#fff; }
  .rank-table { width:100%; border-collapse:collapse; font-size:14px; }
  .rank-table th, .rank-table td { text-align:left; padding:11px 12px; border-bottom:1px solid var(--line); vertical-align:top; }
  .rank-table th { font-size:12px; text-transform:uppercase; letter-spacing:.04em; color:var(--muted); }
  .rank-table td.num, .rank-table th.num { text-align:right; white-space:nowrap; }
  .rank-table tr.off td { color:var(--muted); background:var(--warm); }
  .rank-inputs { display:grid; grid-template-columns:repeat(auto-fit,minmax(210px,1fr)); gap:14px 22px; }
  .rank-inputs label { display:block; font-size:12.5px; color:var(--muted); margin-bottom:5px; }
  .rank-inputs select, .rank-inputs input[type=number] { width:100%; padding:9px 11px; border:1px solid var(--line);
    border-radius:10px; font:inherit; font-size:14px; background:var(--paper); color:var(--ink); }
  .rank-flag { display:inline-block; font-size:11px; font-weight:700; padding:2px 8px; border-radius:7px;
    background:var(--warm); color:var(--muted); }
  .rank-flag.on { background:var(--t-green); color:var(--green); }
  .rank-flag.off { background:var(--t-gold); color:var(--gold); }

  .rank-bars { display:grid; gap:9px; width:100%; }
  .rank-bar { display:grid; grid-template-columns:152px 1fr 94px; align-items:center; gap:12px; font-size:13.5px; }
  /* .t je grid-item (blokový), .f je vnorený span — bez display:block by výška 100 %
     na inline elemente neplatila a výplň by nebolo vidieť */
  .rank-bar .t { background:rgba(255,255,255,.13); border-radius:var(--pill); height:16px; overflow:hidden; }
  .rank-bar .f { display:block; height:100%; background:var(--accent-hi); border-radius:var(--pill); }
  .rank-bar .v { text-align:right; font-variant-numeric:tabular-nums; opacity:.9; }
  .rank-bar.na { opacity:.5; }
  .rank-bar.na .f { background:var(--muted); }
  .rank-card { display:grid; grid-template-columns:auto 1fr; gap:28px; align-items:center;
    background:var(--ink); color:#eaf0f8; border-radius:var(--r-lg); padding:26px 30px; }
  .rank-conf { font-size:12.5px; color:#9fb0c8; margin-top:10px; }
  .rank-band { font-size:12px; font-weight:700; letter-spacing:.05em; text-transform:uppercase; color:#9fb0c8; margin-top:8px; }

  @media (max-width:760px) {
    .rank-card { grid-template-columns:1fr; justify-items:center; text-align:center; }
    .rank-bar { grid-template-columns:110px 1fr 74px; font-size:12.5px; }
  }

  @media (max-width:860px) {
    .zone-stats { grid-template-columns:1fr; }
    .zone-note { margin-left:0; width:100%; }
    .zone-map { height:60vh; }
    .rank-hero { grid-template-columns:1fr; text-align:center; justify-items:center; }
  }
}