/* ══════════════════════════════════════════════════════
       DARK THEME v1.0 — zladené so systémom QuQera (reality-sk)
       Canvas #0a1420 · Primary #5aa8ce · Green accent #26b775
       ══════════════════════════════════════════════════════ */

    /* ── RESET & BASE ─────────────────────────────────── */
    *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

    :root {
      /* ── Primary palette (teal-modrá) ── */
      --primary-50:  #0e1e2a;
      --primary-100: #13293a;
      --primary-200: #1a3a52;
      --primary-300: #245778;
      --primary-400: #3e85ab;
      --primary-500: #5aa8ce;
      --primary-600: #7dbcd9;
      --primary-700: #a2d0e5;
      --primary-800: #cbe3ef;
      --primary-900: #e8f4f8;

      /* ── Green accent ── */
      --green-100: #0f3a23;
      --green-200: #185838;
      --green-300: #20744a;
      --green-400: #26b775;
      --green-500: #4dc48f;
      --green-600: #80d5af;

      /* ── Neutrals (FLIP semantics) ── */
      --neutral-0:   #0a1420;
      --neutral-50:  #0f1b29;
      --neutral-100: #15243a;
      --neutral-200: #1d3148;
      --neutral-300: #2a4260;
      --neutral-400: #536b8a;
      --neutral-500: #8b99ab;
      --neutral-600: #b8c4d1;
      --neutral-700: #d3dde6;
      --neutral-800: #e7edf2;
      --neutral-900: #f3f6f9;

      /* ── Semantic ── */
      --danger:        #ff6b6b;
      --danger-light:  rgba(255,107,107,0.12);
      --warning:       #ffc947;
      --warning-light: rgba(255,201,71,0.14);
      --success:       #26b775;
      --success-light: rgba(38,183,117,0.14);
      --info:          #5aa8ce;
      --info-light:    rgba(90,168,206,0.14);

      /* ── Surface levels ── */
      --surface-canvas:       #0a1420;
      --surface-base:         #0f1b29;
      --surface-raised:       #15243a;
      --surface-overlay:      #1d3148;
      --surface-overlay-high: #24395a;

      /* ── Shadows / glows ── */
      --shadow-sm: 0 1px 2px rgba(0,0,0,0.5), 0 0 0 1px rgba(255,255,255,0.05);
      --shadow-md: 0 4px 12px rgba(0,0,0,0.55), 0 0 0 1px rgba(255,255,255,0.06);
      --shadow-lg: 0 10px 28px rgba(0,0,0,0.6), 0 0 0 1px rgba(255,255,255,0.07);
      --shadow-xl: 0 24px 60px rgba(0,0,0,0.7), 0 0 0 1px rgba(255,255,255,0.08);
      --glow-primary: 0 0 24px rgba(125,188,217,0.35);
      --glow-green:   0 0 24px rgba(77,196,143,0.35);
      --glow-danger:  0 0 20px rgba(255,107,107,0.35);

      /* ── Borders ── */
      --border-subtle:   rgba(255,255,255,0.06);
      --border-default:  rgba(255,255,255,0.10);
      --border-strong:   rgba(255,255,255,0.16);

      /* ── Legacy aliases (stále používané v HTML/CSS) ── */
      --navy:        var(--primary-500);
      --navy-light:  var(--primary-600);
      --navy-dark:   var(--surface-canvas);
      --gold:        var(--primary-500);
      --gold-dark:   var(--primary-600);
      --gold-pale:   rgba(90,168,206,0.12);
      --green:       var(--green-400);
      --green-bg:    rgba(38,183,117,0.10);
      --green-border:rgba(38,183,117,0.28);
      --white:       var(--surface-raised);
      --gray-50:     var(--surface-base);
      --gray-100:    var(--surface-raised);
      --gray-200:    var(--border-default);
      --gray-400:    var(--neutral-500);
      --gray-600:    var(--neutral-600);
      --gray-800:    var(--neutral-900);

      /* ── Shape + type ── */
      --radius:      14px;
      --shadow:      var(--shadow-md);
      --ff-head:     'Plus Jakarta Sans', -apple-system, system-ui, sans-serif;
      --ff-body:     'Inter', -apple-system, system-ui, sans-serif;
    }

    html { scroll-behavior: smooth; }

    body {
      font-family: var(--ff-body);
      background: var(--surface-canvas);
      color: var(--neutral-800);
      line-height: 1.6;
      font-size: 15px;
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
    }

    a { color: var(--primary-500); text-decoration: none; transition: color .15s; }
    a:hover { color: var(--primary-600); text-decoration: underline; }

    /* ── HEADER ───────────────────────────────────────── */
    .site-header {
      background: rgba(10,20,32,0.85);
      backdrop-filter: blur(12px) saturate(1.4);
      -webkit-backdrop-filter: blur(12px) saturate(1.4);
      border-bottom: 1px solid var(--border-subtle);
      color: var(--neutral-900);
      padding: 0;
      position: sticky;
      top: 0;
      z-index: 100;
      overflow: hidden;
    }
    .site-header::before {
      content: '';
      position: absolute; inset: 0;
      background: radial-gradient(ellipse at 65% 35%, rgba(90,168,206,0.10) 0%, transparent 65%);
      pointer-events: none;
    }
    .header-inner {
      position: relative;
      z-index: 1;
      max-width: 1200px;
      margin: 0 auto;
      padding: 14px 24px 12px;
    }

    .site-brand {
      font-family: var(--ff-head);
      font-size: 1.35rem;
      font-weight: 700;
      letter-spacing: 0.01em;
      background: linear-gradient(135deg, var(--primary-500), var(--green-400));
      -webkit-background-clip: text;
      background-clip: text;
      color: transparent;
    }

    /* ── ADSENSE PLACEHOLDERS ─────────────────────────── */
    .ad-wrap {
      background: var(--surface-base);
      padding: 14px 16px;
      display: flex;
      justify-content: center;
      align-items: center;
      overflow: hidden;
      box-sizing: border-box;
      width: 100%;
    }
    .ad-wrap--top  { border-bottom: 1px solid var(--border-subtle); }
    .ad-wrap--bottom { border-top: 1px solid var(--border-subtle); }

    .ad-placeholder {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      background: var(--surface-raised);
      border: 1px dashed var(--border-default);
      border-radius: 10px;
      color: var(--neutral-500);
      font-size: .75rem;
      font-weight: 600;
      letter-spacing: .06em;
      text-transform: uppercase;
      gap: 4px;
      width: 100%;
      max-width: 100%;
      box-sizing: border-box;
    }
    .ad-placeholder svg { opacity: .35; flex-shrink: 0; }

    .ad-728x90  { max-width: 728px; height: 90px; }
    .ad-300x250 { max-width: 300px; width: 300px; height: 250px; flex-shrink: 0; }

    /* ── LAYOUT ───────────────────────────────────────── */
    .container { max-width: 1200px; margin: 0 auto; padding: 0 20px; width: 100%; box-sizing: border-box; }

    main { padding: 40px 0 56px; }

    .layout {
      display: grid;
      grid-template-columns: 1fr 320px;
      gap: 32px;
      align-items: start;
    }
    @media (max-width: 920px) { .layout { grid-template-columns: 1fr; } }

    .sidebar-col {
      position: sticky;
      top: 140px;
      display: flex;
      flex-direction: column;
      gap: 24px;
    }
    @media (max-width: 920px) { .sidebar-col { position: static; } }

    /* ── CARD ─────────────────────────────────────────── */
    .card {
      background: var(--surface-raised);
      border: 1px solid var(--border-default);
      border-radius: var(--radius);
      box-shadow: var(--shadow-md);
      padding: 32px;
      margin-bottom: 28px;
      width: 100%;
      box-sizing: border-box;
      overflow: hidden;
      transition: border-color .2s, box-shadow .2s;
    }
    .card:hover { border-color: var(--border-strong); }
    .card:last-child { margin-bottom: 0; }

    @media (max-width: 600px) { .card { padding: 22px 18px; } }

    .card-icon {
      width: 42px; height: 42px;
      background: linear-gradient(135deg, var(--primary-400) 0%, var(--primary-500) 100%);
      border-radius: 10px;
      display: flex; align-items: center; justify-content: center;
      font-size: 1.15rem;
      flex-shrink: 0;
      box-shadow: var(--glow-primary);
    }
    .card-head { display: flex; align-items: center; gap: 12px; margin-bottom: 6px; }

    .card-h2, .card-h3 {
      font-family: var(--ff-head);
      color: var(--neutral-900);
      line-height: 1.25;
      font-weight: 700;
      letter-spacing: -0.01em;
    }
    .card-h2 { font-size: 1.5rem; }
    .card-h3 { font-size: 1.25rem; font-weight: 600; }

    .card-lead {
      color: var(--neutral-600);
      font-size: .9rem;
      margin-bottom: 24px;
      margin-top: 4px;
    }

    /* ── FORM ─────────────────────────────────────────── */
    .form-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 18px;
    }
    @media (max-width: 560px) { .form-grid { grid-template-columns: 1fr; } }

    .fg { display: flex; flex-direction: column; gap: 6px; }
    .fg--full { grid-column: 1 / -1; }

    label {
      font-size: .83rem;
      font-weight: 500;
      color: var(--neutral-600);
    }
    label .hint { font-weight: 400; color: var(--neutral-500); font-size: .76rem; }

    input[type="number"], input[type="text"], select {
      width: 100%;
      padding: 11px 14px;
      border: 1px solid var(--border-default);
      border-radius: 10px;
      font-family: var(--ff-body);
      font-size: .95rem;
      color: var(--neutral-900);
      background: var(--surface-overlay);
      outline: none;
      transition: border-color .15s, box-shadow .15s;
      -webkit-appearance: none;
    }
    input[type="number"]:focus, input[type="text"]:focus, select:focus {
      border-color: var(--primary-500);
      box-shadow: 0 0 0 3px rgba(90,168,206,0.22);
    }
    input[type="number"]::placeholder, input[type="text"]::placeholder { color: var(--neutral-500); }
    select {
      cursor: pointer;
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%237a8a9a' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
      background-repeat: no-repeat;
      background-position: right 12px center;
      padding-right: 40px;
    }

    .btn-calc {
      grid-column: 1 / -1;
      background: var(--primary-500);
      color: var(--surface-canvas);
      border: 1px solid transparent;
      border-radius: 10px;
      padding: 13px 28px;
      font-family: var(--ff-head);
      font-size: .95rem;
      font-weight: 600;
      letter-spacing: 0.01em;
      cursor: pointer;
      box-shadow: var(--shadow-sm);
      transition: transform .15s, box-shadow .2s, background .2s;
    }
    .btn-calc:hover { transform: translateY(-1px); background: var(--primary-600); box-shadow: var(--glow-primary), var(--shadow-sm); }
    .btn-calc:active { transform: translateY(0); }

    /* ── RESULTS ──────────────────────────────────────── */
    .results-grid {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 14px;
    }
    @media (max-width: 480px) { .results-grid { grid-template-columns: 1fr; } }

    .res-item {
      padding: 20px;
      border-radius: 12px;
      border-left: 3px solid var(--border-default);
      background: var(--surface-overlay);
      animation: fadeUp .45s ease both;
    }
    .res-item--gold {
      background: rgba(90,168,206,0.10);
      border-left-color: var(--primary-500);
    }
    .res-item--green {
      background: var(--success-light);
      border-left-color: var(--green-400);
    }
    .res-item:nth-child(1) { animation-delay: .05s; }
    .res-item:nth-child(2) { animation-delay: .10s; }
    .res-item:nth-child(3) { animation-delay: .15s; }
    .res-item:nth-child(4) { animation-delay: .20s; }

    @keyframes fadeUp {
      from { opacity: 0; transform: translateY(14px); }
      to   { opacity: 1; transform: translateY(0); }
    }

    .res-label {
      font-size: .72rem;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: .08em;
      color: var(--neutral-500);
      margin-bottom: 8px;
    }
    .res-value {
      font-family: var(--ff-head);
      font-size: clamp(1.4rem, 3vw, 1.85rem);
      color: var(--neutral-900);
      line-height: 1.15;
      font-weight: 700;
    }
    .res-item--gold .res-value { color: var(--primary-500); }
    .res-item--green .res-value { color: var(--green-500); }

    /* ── EMPTY STATE ──────────────────────────────────── */
    .empty {
      text-align: center;
      padding: 44px 20px;
      color: var(--neutral-500);
    }
    .empty svg { margin-bottom: 12px; opacity: .4; }
    .empty p   { font-size: .9rem; }

    /* ── CHART ────────────────────────────────────────── */
    .chart-wrap { position: relative; height: 320px; margin-top: 8px; }

    .chart-loading {
      height: 320px;
      display: flex;
      align-items: center;
      justify-content: center;
      color: var(--neutral-500);
      font-size: .9rem;
      gap: 10px;
    }
    @keyframes spin { to { transform: rotate(360deg); } }
    .spinner {
      width: 20px; height: 20px;
      border: 3px solid var(--border-default);
      border-top-color: var(--primary-500);
      border-radius: 50%;
      animation: spin .7s linear infinite;
    }

    /* ── INFLATION ────────────────────────────────────── */
    .range-row {
      display: flex;
      align-items: center;
      gap: 14px;
      max-width: 420px;
      margin-bottom: 22px;
    }
    input[type="range"] {
      -webkit-appearance: none;
      flex: 1;
      height: 6px;
      background: var(--surface-overlay);
      border-radius: 3px;
      outline: none;
    }
    input[type="range"]::-webkit-slider-thumb {
      -webkit-appearance: none;
      width: 22px; height: 22px;
      border-radius: 50%;
      background: var(--primary-500);
      cursor: pointer;
      box-shadow: var(--glow-primary);
    }
    input[type="range"]::-moz-range-thumb {
      width: 22px; height: 22px;
      border-radius: 50%;
      background: var(--primary-500);
      cursor: pointer;
      border: none;
    }
    .range-val {
      min-width: 54px;
      text-align: right;
      font-weight: 700;
      color: var(--primary-500);
      font-family: var(--ff-head);
    }

    .infl-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 14px;
      margin-bottom: 14px;
    }
    @media (max-width: 480px) { .infl-grid { grid-template-columns: 1fr; } }

    .infl-box {
      padding: 20px;
      border-radius: 12px;
    }
    .infl-box--nom {
      background: rgba(90,168,206,0.08);
      border: 1px solid rgba(90,168,206,0.25);
    }
    .infl-box--real {
      background: var(--success-light);
      border: 1px solid rgba(38,183,117,0.28);
    }
    .infl-lbl {
      font-size: .72rem;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: .08em;
      margin-bottom: 4px;
    }
    .infl-box--nom .infl-lbl { color: var(--primary-500); }
    .infl-box--real .infl-lbl { color: var(--green-500); }
    .infl-val {
      font-family: var(--ff-head);
      font-size: 1.6rem;
      line-height: 1.2;
      margin-bottom: 4px;
      font-weight: 700;
    }
    .infl-box--nom .infl-val { color: var(--neutral-900); }
    .infl-box--real .infl-val { color: var(--green-500); }
    .infl-note { font-size: .78rem; color: var(--neutral-600); }

    .infl-note-bar {
      background: var(--surface-overlay);
      border-left: 3px solid var(--primary-500);
      padding: 14px 18px;
      border-radius: 0 10px 10px 0;
      font-size: .88rem;
      color: var(--neutral-700);
      line-height: 1.7;
      margin-top: 6px;
    }
    .infl-note-bar strong { color: var(--neutral-900); }

    /* ── COMPARISON TABLE ─────────────────────────────── */
    .tbl-wrap { overflow-x: auto; }
    .comp-tbl {
      width: 100%;
      border-collapse: collapse;
      font-size: .9rem;
    }
    .comp-tbl th {
      background: var(--surface-overlay-high);
      color: var(--neutral-900);
      padding: 12px 16px;
      text-align: left;
      font-size: .72rem;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: .07em;
      border-bottom: 1px solid var(--border-default);
    }
    .comp-tbl th:first-child { border-radius: 10px 0 0 0; }
    .comp-tbl th:last-child  { border-radius: 0 10px 0 0; }
    .comp-tbl td {
      padding: 12px 16px;
      border-bottom: 1px solid var(--border-subtle);
      color: var(--neutral-800);
    }
    .comp-tbl tr:hover td { background: rgba(255,255,255,0.02); }
    .comp-tbl tr.best td {
      background: rgba(90,168,206,0.08);
      font-weight: 600;
      color: var(--neutral-900);
    }
    .badge {
      display: inline-flex;
      align-items: center;
      background: var(--primary-500);
      color: var(--surface-canvas);
      font-size: .68rem;
      font-weight: 700;
      padding: 2px 8px;
      border-radius: 999px;
      margin-left: 8px;
      text-transform: uppercase;
      letter-spacing: .05em;
      vertical-align: middle;
    }
    @media (max-width: 600px) { .comp-tbl th, .comp-tbl td { padding: 10px 10px; font-size: .8rem; } }

    /* ── EDUCATIONAL ──────────────────────────────────── */
    .edu p {
      color: var(--neutral-700);
      line-height: 1.8;
      margin-bottom: 16px;
      font-size: .93rem;
    }
    .edu p:last-child { margin-bottom: 0; }
    .edu strong { color: var(--neutral-900); font-weight: 600; }
    .edu h3 {
      font-family: var(--ff-head);
      font-size: 1.1rem;
      color: var(--neutral-900);
      margin: 24px 0 10px;
      font-weight: 600;
    }
    .edu h3:first-child { margin-top: 0; }
    .edu-callout {
      background: var(--info-light);
      border: 1px solid rgba(90,168,206,0.25);
      border-radius: 12px;
      padding: 18px 20px;
      margin: 20px 0;
    }
    .edu-callout p { color: var(--primary-700); font-weight: 500; margin: 0; }
    .edu-callout strong { color: var(--primary-500); }

    /* ── SIDEBAR WIDGETS ──────────────────────────────── */
    .widget {
      background: var(--surface-raised);
      border: 1px solid var(--border-default);
      border-radius: var(--radius);
      box-shadow: var(--shadow-sm);
      padding: 22px;
    }
    .widget-title {
      font-family: var(--ff-head);
      font-size: 1.05rem;
      color: var(--neutral-900);
      margin-bottom: 14px;
      font-weight: 600;
    }
    .tip-list { list-style: none; display: flex; flex-direction: column; gap: 10px; }
    .tip-list li {
      display: flex;
      gap: 10px;
      font-size: .87rem;
      color: var(--neutral-700);
      line-height: 1.5;
    }
    .tip-list li::before { content: '→'; color: var(--primary-500); font-weight: 700; flex-shrink: 0; }

    .rule72-box {
      text-align: center;
      padding: 16px;
      background: var(--surface-overlay);
      border: 1px solid var(--border-default);
      border-radius: 10px;
      margin: 12px 0;
    }
    .rule72-formula {
      font-family: var(--ff-head);
      font-size: 1.05rem;
      color: var(--primary-500);
      font-weight: 600;
    }

    /* ── SITE NAV (pill buttons) ─────────────────────── */
    .site-nav {
      border-top: 1px solid var(--border-subtle);
      padding: 10px 0;
      position: relative;
      z-index: 1;
      background: rgba(10,20,32,0.5);
    }
    .site-nav-inner {
      max-width: 1200px;
      margin: 0 auto;
      padding: 0 20px;
      display: flex;
      gap: 6px;
      flex-wrap: wrap;
    }
    .nav-link {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      padding: 8px 16px;
      min-height: 40px;
      font-family: var(--ff-body);
      font-size: 14px;
      font-weight: 500;
      color: var(--neutral-600);
      background: transparent;
      border: 1px solid transparent;
      border-radius: 999px;
      text-decoration: none;
      white-space: nowrap;
      flex-shrink: 0;
      transition: background .15s, color .15s, border-color .15s;
    }
    .nav-link:hover {
      background: rgba(255,255,255,0.04);
      color: var(--neutral-900);
      border-color: var(--border-default);
      text-decoration: none;
    }
    .nav-link.active {
      background: rgba(90,168,206,0.14);
      color: var(--primary-500);
      border-color: rgba(90,168,206,0.3);
    }
    @media (max-width: 600px) {
      .site-nav-inner {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 8px;
      }
      .nav-link {
        width: 100%;
        min-height: 44px;
        font-size: 14px;
      }
    }

    /* ── RESULT ITEM EXTRA VARIANTS ───────────────────── */
    .res-item--red {
      background: var(--danger-light);
      border-left-color: var(--danger);
    }
    .res-item--red .res-value { color: var(--danger); }
    .res-item--orange {
      background: var(--warning-light);
      border-left-color: var(--warning);
    }
    .res-item--orange .res-value { color: var(--warning); }
    .res-item--blue {
      background: rgba(90,168,206,0.08);
      border-left-color: var(--primary-500);
    }
    .res-item--blue .res-value { color: var(--primary-500); }

    /* ── HEADER CHIPS (mzda.html) ─────────────────────── */
    .header-chips {
      display: flex;
      flex-wrap: wrap;
      justify-content: flex-start;
      gap: 8px;
      margin-top: 8px;
      margin-bottom: 0;
    }
    .header-chip {
      display: inline-flex;
      align-items: center;
      padding: 5px 13px;
      background: rgba(255,255,255,0.04);
      border: 1px solid var(--border-default);
      border-radius: 999px;
      font-size: .74rem;
      font-weight: 500;
      color: var(--neutral-700);
      letter-spacing: .02em;
      white-space: nowrap;
    }
    .header-chip--year {
      background: rgba(90,168,206,0.14);
      border-color: rgba(90,168,206,0.30);
      color: var(--primary-500);
    }
    @media (max-width: 430px) {
      .header-chips  { gap: 6px; margin-top: 10px; }
      .header-chip   { font-size: .7rem; padding: 4px 10px; }
    }

    /* ── SALARY BAR (mzda.html) ──────────────────────── */
    .salary-bar {
      display: flex;
      height: 44px;
      border-radius: 10px;
      overflow: hidden;
      width: 100%;
      background: var(--surface-overlay);
    }
    .salary-bar-seg {
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: .72rem;
      font-weight: 700;
      color: var(--surface-canvas);
      transition: width .6s ease;
      min-width: 0;
      overflow: hidden;
    }
    .salary-bar-seg--net { background: var(--green-400); }
    .salary-bar-seg--emp { background: var(--primary-500); }
    .salary-bar-seg--tax { background: var(--danger); color: #fff; }
    .salary-bar-seg--er  { background: var(--warning); }

    .salary-bar-legend {
      display: flex;
      flex-wrap: wrap;
      gap: 10px 24px;
      margin-top: 16px;
    }
    .salary-bar-legend-item {
      display: flex;
      align-items: center;
      gap: 7px;
      font-size: .82rem;
      color: var(--neutral-600);
    }
    .salary-bar-dot {
      width: 10px;
      height: 10px;
      border-radius: 50%;
      display: inline-block;
      flex-shrink: 0;
    }
    .salary-bar-dot--net { background: var(--green-400); }
    .salary-bar-dot--emp { background: var(--primary-500); }
    .salary-bar-dot--tax { background: var(--danger); }
    .salary-bar-dot--er  { background: var(--warning); }
    .salary-bar-legend-label { color: var(--neutral-600); }
    .salary-bar-legend-val {
      font-weight: 700;
      color: var(--neutral-900);
      margin-left: 2px;
    }
    .salary-bar-legend-val .bar-pct {
      font-weight: 400;
      color: var(--neutral-500);
      font-size: .75rem;
      margin-left: 4px;
    }

    /* ── BREAKDOWN TABLES (mzda.html) ─────────────────── */
    .breakdown-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 24px;
    }
    @media (max-width: 680px) { .breakdown-grid { grid-template-columns: 1fr; } }

    .breakdown-title {
      font-family: var(--ff-head);
      font-size: 1rem;
      margin-bottom: 10px;
      padding: 7px 12px;
      border-radius: 8px;
      font-weight: 600;
    }
    .breakdown-title--emp {
      background: rgba(90,168,206,0.12);
      color: var(--primary-500);
    }
    .breakdown-title--er {
      background: rgba(255,201,71,0.12);
      color: var(--warning);
    }

    .breakdown-tbl {
      width: 100%;
      border-collapse: collapse;
      font-size: .85rem;
    }
    .breakdown-tbl th {
      background: var(--surface-overlay);
      color: var(--neutral-600);
      padding: 8px 10px;
      text-align: left;
      font-size: .7rem;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: .06em;
      border-bottom: 1px solid var(--border-default);
    }
    .breakdown-tbl td {
      padding: 9px 10px;
      border-bottom: 1px solid var(--border-subtle);
      color: var(--neutral-800);
      vertical-align: middle;
    }
    .breakdown-tbl td.rate {
      color: var(--neutral-500);
      font-size: .78rem;
      white-space: nowrap;
    }
    .breakdown-tbl td.amount {
      text-align: right;
      font-weight: 600;
      white-space: nowrap;
    }
    .breakdown-tbl td.amount--green { color: var(--green-500); }
    .breakdown-tbl tr.tbl-subtotal td {
      background: var(--surface-overlay);
      border-top: 1px solid var(--border-default);
      font-weight: 700;
      color: var(--neutral-900);
    }
    .breakdown-tbl tr.tbl-divider td {
      padding: 0;
      border-bottom: 1px dashed var(--border-default);
    }
    .breakdown-tbl tr.tbl-bonus td { color: var(--green-500); font-size: .83rem; }

    /* ── RATES LIST (mzda sidebar widget) ────────────── */
    .rates-list { display: flex; flex-direction: column; }
    .rates-row {
      display: flex;
      justify-content: space-between;
      align-items: center;
      gap: 8px;
      padding: 10px 0;
      border-bottom: 1px solid var(--border-subtle);
    }
    .rates-row:last-child { border-bottom: none; padding-bottom: 0; }
    .rates-label {
      font-size: .82rem;
      color: var(--neutral-600);
      line-height: 1.4;
    }
    .rates-val {
      font-size: .9rem;
      font-weight: 700;
      white-space: nowrap;
      font-family: var(--ff-head);
    }
    .rates-val--navy  { color: var(--primary-500); }
    .rates-val--gold  { color: var(--warning); }
    .rates-val--red   { color: var(--danger); }
    .rates-val--green { color: var(--green-500); }

    /* ── FIELD HINT ───────────────────────────────────── */
    .field-hint {
      font-size: .78rem;
      color: var(--neutral-500);
      margin-top: 2px;
    }

    /* ── EDUCATIONAL H4 in mzda ───────────────────────── */
    .edu-h4 {
      font-family: var(--ff-head);
      font-size: 1rem;
      color: var(--neutral-900);
      margin: 20px 0 6px;
      font-weight: 600;
    }
    .edu-h4:first-child { margin-top: 0; }

    /* ── BADGE VARIANTS ───────────────────────────────── */
    .badge--red   { background: var(--danger); color: #fff; }
    .badge--green { background: var(--green-400); color: var(--surface-canvas); }

    /* ── COMPARISON TABLE ROW VARIANT ────────────────── */
    .comp-tbl tr.row-25 td { background: var(--danger-light); }

    /* ── RESPONSIVE mzda-specific ─────────────────────── */
    @media (max-width: 430px) {
      .salary-bar       { height: 36px; }
      .salary-bar-legend { gap: 8px 16px; }
      .salary-bar-legend-item { font-size: .76rem; }
      .breakdown-tbl th,
      .breakdown-tbl td { padding: 7px 8px; font-size: .78rem; }
    }
    @media (max-width: 375px) {
      .breakdown-tbl th,
      .breakdown-tbl td { padding: 6px 6px; font-size: .72rem; }
    }

    /* ── FOOTER (fixed, rozbalovateľný smerom nahor) ─── */
    .site-footer {
      position: fixed;
      bottom: 0;
      left: 240px;
      right: 0;
      z-index: 40;
      background: rgba(15,27,41,0.92);
      backdrop-filter: blur(12px) saturate(1.4);
      -webkit-backdrop-filter: blur(12px) saturate(1.4);
      border-top: 1px solid var(--border-subtle);
      color: var(--neutral-600);
      padding: 0 24px;
      text-align: center;
      font-size: .85rem;
      line-height: 1.75;
      max-height: 52px;
      overflow: hidden;
      transition: max-height .35s cubic-bezier(.4,0,.2,1);
    }
    .site-footer:hover,
    .site-footer:focus-within {
      max-height: 360px;
      overflow-y: auto;
    }
    .site-footer::before {
      content: '▲ Viac informácií';
      display: block;
      font-size: .7rem;
      font-weight: 600;
      color: var(--neutral-500);
      letter-spacing: .08em;
      padding: 14px 0 10px;
      transition: opacity .2s;
    }
    .site-footer:hover::before,
    .site-footer:focus-within::before {
      opacity: 0;
      visibility: hidden;
      height: 0;
      padding: 0;
    }
    .footer-inner {
      max-width: 820px;
      margin: 0 auto;
      padding: 8px 0 18px;
      display: flex;
      flex-direction: column-reverse;
      gap: 12px;
    }
    .footer-links {
      display: flex;
      justify-content: center;
      flex-wrap: wrap;
      gap: 14px 24px;
      margin: 0;
      list-style: none;
    }
    .footer-links a { color: var(--primary-500); }
    .footer-links a:hover { color: var(--primary-600); }
    .footer-disclaimer { font-size: .82rem; color: var(--neutral-600); margin: 0; }
    .footer-copy { margin: 0; font-size: .78rem; color: var(--neutral-500); }

    /* Hlavný obsah potrebuje padding-bottom kvôli fixed footru */
    .app-main { padding-bottom: 60px; }
    body:not(:has(.app-shell)) { padding-bottom: 60px; }

    @media (max-width: 900px) {
      .site-footer { left: 0; }
    }
    @media (max-width: 560px) {
      .site-footer { padding: 0 14px; max-height: 48px; }
      .site-footer::before { padding: 13px 0 8px; font-size: .66rem; }
      .site-footer:hover,
      .site-footer:focus-within { max-height: 72vh; }
    }

    /* ── DISCLAIMER BAR ───────────────────────────────── */
    .disclaimer-bar {
      background: var(--warning-light);
      border-bottom: 1px solid rgba(255,201,71,0.25);
      padding: 11px 20px;
      display: flex;
      align-items: flex-start;
      gap: 10px;
    }
    .disclaimer-icon {
      font-size: 1rem;
      flex-shrink: 0;
      margin-top: 2px;
      color: var(--warning);
    }
    .disclaimer-bar p {
      flex: 1;
      font-size: .83rem;
      color: var(--warning);
      line-height: 1.55;
      margin: 0;
    }
    .disclaimer-bar strong { color: #ffd876; }
    .disclaimer-close {
      flex-shrink: 0;
      background: none;
      border: none;
      color: var(--warning);
      font-size: 1rem;
      line-height: 1;
      cursor: pointer;
      padding: 2px 4px;
      border-radius: 4px;
      opacity: .7;
      transition: opacity .15s;
      align-self: center;
    }
    .disclaimer-close:hover { opacity: 1; }
    .disclaimer-bar.is-hidden { display: none; }

    /* ── COOKIE CONSENT BANNER ────────────────────────── */
    .cookie-banner {
      position: fixed;
      bottom: 0;
      left: 0;
      right: 0;
      z-index: 9999;
      background: var(--surface-overlay);
      border-top: 1px solid var(--primary-500);
      padding: 20px 24px;
      box-shadow: var(--shadow-xl);
      transform: translateY(100%);
      transition: transform .4s cubic-bezier(.34,1.1,.64,1);
      display: none;
    }
    .cookie-banner.cookie-show    { display: block; }
    .cookie-banner.cookie-visible { transform: translateY(0); }

    .cookie-inner {
      max-width: 1200px;
      margin: 0 auto;
      display: flex;
      align-items: center;
      gap: 24px;
      flex-wrap: wrap;
    }
    .cookie-text { flex: 1; min-width: 260px; }
    .cookie-text strong {
      display: block;
      font-size: .975rem;
      color: var(--neutral-900);
      margin-bottom: 5px;
    }
    .cookie-text p {
      font-size: .83rem;
      color: var(--neutral-600);
      line-height: 1.55;
      margin: 0;
    }
    .cookie-text a { color: var(--primary-500); }

    .cookie-actions {
      display: flex;
      gap: 10px;
      flex-shrink: 0;
      flex-wrap: wrap;
    }
    .btn-cookie {
      padding: 10px 22px;
      border-radius: 10px;
      font-family: var(--ff-head);
      font-size: .87rem;
      font-weight: 600;
      cursor: pointer;
      border: 1px solid transparent;
      white-space: nowrap;
      transition: transform .15s, background .15s;
    }
    .btn-cookie:hover { transform: translateY(-1px); }
    .btn-cookie:active { transform: translateY(0); }
    .btn-cookie--accept {
      background: var(--primary-500);
      color: var(--surface-canvas);
      box-shadow: var(--shadow-sm);
    }
    .btn-cookie--accept:hover { background: var(--primary-600); box-shadow: var(--glow-primary), var(--shadow-sm); }
    .btn-cookie--minimal {
      background: transparent;
      color: var(--neutral-700);
      border-color: var(--border-default);
    }
    .btn-cookie--minimal:hover { border-color: var(--border-strong); color: var(--neutral-900); background: rgba(255,255,255,0.04); }

    @media (max-width: 560px) {
      .cookie-inner { gap: 16px; }
      .cookie-actions { width: 100%; }
      .btn-cookie { flex: 1; text-align: center; }
    }

    /* ── E-E-A-T / Trust signals block ────────────────── */
    .trust-block {
      background: linear-gradient(135deg, rgba(90,168,206,0.06) 0%, rgba(38,183,117,0.05) 100%);
      border: 1px solid var(--border-default);
      border-radius: var(--radius);
      padding: 18px 22px;
      margin-bottom: 20px;
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 14px 22px;
      font-size: .85rem;
      line-height: 1.5;
    }
    @media (max-width: 560px) { .trust-block { grid-template-columns: 1fr; padding: 14px 16px; } }
    .trust-item { display: flex; align-items: flex-start; gap: 10px; }
    .trust-item-icon { font-size: 1.05rem; flex-shrink: 0; margin-top: 2px; }
    .trust-item-label {
      font-weight: 700;
      color: var(--neutral-900);
      display: block;
      font-size: .76rem;
      letter-spacing: .04em;
      margin-bottom: 2px;
      text-transform: uppercase;
    }
    .trust-item-value {
      color: var(--neutral-700);
      font-size: .85rem;
    }
    .trust-item-value a {
      color: var(--primary-500);
      text-decoration: none;
      border-bottom: 1px solid rgba(90,168,206,0.35);
    }
    .trust-item-value a:hover { border-bottom-color: var(--primary-500); }

    /* ── Common mistakes / pitfalls block ─────────────── */
    .mistakes-list {
      list-style: none;
      padding: 0;
      margin: 14px 0 0;
      display: flex;
      flex-direction: column;
      gap: 14px;
    }
    .mistakes-list li {
      background: var(--danger-light);
      border-left: 3px solid var(--danger);
      border-radius: 0 10px 10px 0;
      padding: 14px 18px;
      font-size: .9rem;
      line-height: 1.65;
      color: var(--neutral-800);
    }
    .mistakes-list li strong {
      display: block;
      color: var(--danger);
      font-size: .95rem;
      margin-bottom: 4px;
      font-weight: 700;
    }

    /* ── Sources / references list ────────────────────── */
    .sources-list {
      list-style: none;
      padding: 0;
      margin: 12px 0 0;
      display: flex;
      flex-direction: column;
      gap: 8px;
      font-size: .85rem;
    }
    .sources-list li {
      padding-left: 22px;
      position: relative;
      color: var(--neutral-700);
      line-height: 1.55;
    }
    .sources-list li::before { content: '📘'; position: absolute; left: 0; top: 0; }
    .sources-list li a {
      color: var(--primary-500);
      border-bottom: 1px solid rgba(90,168,206,0.35);
    }

    /* ── Glossary term block ──────────────────────────── */
    .glossary-term {
      padding: 18px 0;
      border-bottom: 1px solid var(--border-subtle);
    }
    .glossary-term:last-child { border-bottom: none; }
    .glossary-term dt {
      font-family: var(--ff-head);
      font-size: 1.15rem;
      color: var(--neutral-900);
      margin-bottom: 6px;
      font-weight: 600;
    }
    .glossary-term dd {
      color: var(--neutral-700);
      font-size: .92rem;
      line-height: 1.7;
    }
    .glossary-term dd strong { color: var(--neutral-900); }
    .glossary-term dd a { color: var(--primary-500); }
    .glossary-index {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
      margin-bottom: 28px;
    }
    .glossary-index a {
      background: var(--surface-raised);
      border: 1px solid var(--border-default);
      padding: 6px 12px;
      border-radius: 999px;
      font-size: .82rem;
      font-weight: 600;
      color: var(--neutral-800);
      text-decoration: none;
      transition: background .15s, color .15s, border-color .15s;
    }
    .glossary-index a:hover {
      background: var(--primary-500);
      color: var(--surface-canvas);
      border-color: var(--primary-500);
    }

    /* ── Formula box (for metodika page) ──────────────── */
    .formula-box {
      background: var(--surface-canvas);
      color: var(--neutral-800);
      border: 1px solid var(--border-default);
      padding: 18px 22px;
      border-radius: 12px;
      font-family: 'SF Mono', 'Menlo', 'Courier New', monospace;
      font-size: .9rem;
      line-height: 1.75;
      margin: 16px 0;
      overflow-x: auto;
    }
    .formula-box strong {
      color: var(--primary-500);
      font-weight: 700;
    }

    /* ══════════════════════════════════════════════════════
       RESPONSIVE — iPhone & Mobile
       ══════════════════════════════════════════════════════ */

    html {
      -webkit-text-size-adjust: 100%;
      overflow-x: hidden;
    }
    body {
      overflow-x: hidden;
      -webkit-overflow-scrolling: touch;
    }

    * { min-width: 0; }

    /* Ads — responsive heights */
    @media (max-width: 750px) {
      .ad-728x90 { height: 60px; }
      .ad-wrap   { padding: 10px 12px; }
    }
    @media (max-width: 390px) {
      .ad-728x90 { height: 50px; }
    }
    @media (max-width: 920px) {
      .ad-300x250 {
        width: 100%;
        max-width: 336px;
        height: 280px;
      }
    }
    @media (max-width: 390px) {
      .ad-300x250 { height: 250px; }
    }

    /* Safe area insets */
    .site-header {
      padding-top: max(12px, calc(12px + env(safe-area-inset-top)));
    }
    .cookie-banner {
      padding-bottom: max(20px, env(safe-area-inset-bottom));
    }

    @media (max-width: 430px) {
      .site-header { padding: max(8px, calc(8px + env(safe-area-inset-top))) 14px 0; }
    }

    @media (max-width: 430px) {
      .disclaimer-bar   { padding: 10px 14px; gap: 8px; }
      .disclaimer-bar p { font-size: .78rem; }
    }

    @media (max-width: 430px) {
      .container { padding: 0 14px; }
      main       { padding: 24px 0 48px; }
    }
    @media (max-width: 375px) {
      .container { padding: 0 12px; }
    }

    @media (max-width: 430px) {
      .card        { padding: 20px 16px; margin-bottom: 20px; }
      .card-h2     { font-size: 1.25rem; }
      .card-h3     { font-size: 1.1rem; }
      .card-lead   { font-size: .85rem; margin-bottom: 18px; }
      .card-icon   { width: 36px; height: 36px; font-size: 1rem; }
    }
    @media (max-width: 375px) {
      .card      { padding: 16px 14px; }
      .card-h2   { font-size: 1.15rem; }
    }

    @media (max-width: 560px) {
      input[type="number"],
      input[type="text"],
      select {
        font-size: 16px;
        padding: 11px 12px;
      }
      select { padding-right: 36px; }
      .btn-calc { padding: 13px 20px; font-size: .95rem; }
    }

    @media (max-width: 430px) {
      .res-value { font-size: 1.45rem; }
    }
    @media (max-width: 480px) and (min-width: 391px) {
      .results-grid { grid-template-columns: repeat(2, 1fr); }
    }
    @media (max-width: 390px) {
      .results-grid { grid-template-columns: 1fr; }
      .res-value    { font-size: 1.35rem; }
    }

    @media (max-width: 430px) {
      .chart-wrap { height: 240px; }
    }
    @media (max-width: 375px) {
      .chart-wrap { height: 210px; }
    }

    @media (max-width: 430px) {
      .range-row { gap: 10px; }
      .infl-val  { font-size: 1.35rem; }
      input[type="range"]::-webkit-slider-thumb { width: 26px; height: 26px; }
      input[type="range"]::-moz-range-thumb     { width: 26px; height: 26px; }
    }

    @media (max-width: 600px) {
      .tbl-wrap { -webkit-overflow-scrolling: touch; margin-right: -4px; }
      .badge { font-size: .62rem; padding: 2px 6px; margin-left: 4px; }
    }
    @media (max-width: 430px) {
      .comp-tbl th, .comp-tbl td { padding: 9px 8px; font-size: .75rem; }
    }
    @media (max-width: 375px) {
      .comp-tbl th, .comp-tbl td { padding: 8px 6px; font-size: .7rem; }
      .badge { display: none; }
    }

    @media (max-width: 430px) {
      .edu-callout { padding: 14px 16px; }
      .edu p       { font-size: .88rem; }
    }

    @media (max-width: 430px) {
      .widget         { padding: 18px 14px; }
      .widget-title   { font-size: 1rem; margin-bottom: 10px; }
      .tip-list li    { font-size: .82rem; }
    }

    @media (max-width: 430px) {
      .cookie-banner      { padding: 16px 14px; }
      .cookie-text strong { font-size: .9rem; }
      .cookie-text p      { font-size: .78rem; }
      .btn-cookie         { padding: 11px 16px; font-size: .82rem; }
    }

    @media (max-width: 430px) {
      .site-footer   { padding: 22px 16px; font-size: .8rem; }
      .footer-links  { gap: 12px 18px; margin-bottom: 12px; }
      .footer-disclaimer { font-size: .8rem; }
      .footer-copy   { font-size: .72rem; }
    }

    /* iPhone SE 1st gen (320px) */
    @media (max-width: 320px) {
      .site-header { padding: 22px 12px 30px; }
      .card        { padding: 14px 12px; border-radius: 10px; }
      .card-h2     { font-size: 1.05rem; }
      .card-h3     { font-size: .95rem; }
      .container   { padding: 0 10px; }
      .res-value   { font-size: 1.2rem; }
      .infl-val    { font-size: 1.2rem; }
      .btn-calc    { font-size: .9rem; padding: 12px 14px; }
      .chart-wrap  { height: 190px; }
    }

    /* Selection color */
    ::selection {
      background: rgba(90,168,206,0.35);
      color: var(--neutral-900);
    }

    /* Scrollbar (webkit) */
    ::-webkit-scrollbar { width: 10px; height: 10px; }
    ::-webkit-scrollbar-track { background: var(--surface-base); }
    ::-webkit-scrollbar-thumb {
      background: var(--surface-overlay-high);
      border-radius: 10px;
      border: 2px solid var(--surface-base);
    }
    ::-webkit-scrollbar-thumb:hover { background: var(--primary-400); }

    /* ══════════════════════════════════════════════════════
       APP SIDEBAR — vertikálna navigácia (ako reality-sk)
       ══════════════════════════════════════════════════════ */
    .app-shell {
      min-height: 100vh;
    }

    .app-sidebar {
      background: var(--surface-base);
      border-right: 1px solid var(--border-subtle);
      padding: 20px 14px 28px;
      display: flex;
      flex-direction: column;
      gap: 18px;
      position: fixed;
      top: 0;
      left: 0;
      width: 240px;
      height: 100vh;
      overflow-y: auto;
      z-index: 50;
    }

    .app-main {
      margin-left: 240px;
      min-width: 0;
      display: flex;
      flex-direction: column;
    }

    .sidebar-brand {
      padding: 6px 10px 12px;
      border-bottom: 1px solid var(--border-subtle);
    }
    .sidebar-brand a {
      font-family: var(--ff-head);
      font-size: 1.2rem;
      font-weight: 700;
      letter-spacing: 0.01em;
      background: linear-gradient(135deg, var(--primary-500), var(--green-400));
      -webkit-background-clip: text;
      background-clip: text;
      color: transparent;
      text-decoration: none;
      display: block;
      line-height: 1.2;
    }
    .sidebar-brand small {
      display: block;
      font-family: var(--ff-body);
      font-size: .7rem;
      font-weight: 500;
      color: var(--neutral-500);
      letter-spacing: .08em;
      text-transform: uppercase;
      background: none;
      -webkit-text-fill-color: currentColor;
      margin-top: 4px;
    }

    .sidebar-nav { display: flex; flex-direction: column; gap: 18px; }
    .sidebar-section { display: flex; flex-direction: column; gap: 2px; }
    .sidebar-heading {
      font-size: .68rem;
      font-weight: 700;
      color: var(--neutral-500);
      text-transform: uppercase;
      letter-spacing: .1em;
      padding: 6px 12px 4px;
    }

    .sidebar-link {
      display: flex;
      align-items: center;
      gap: 12px;
      padding: 9px 12px;
      border-radius: 10px;
      font-family: var(--ff-body);
      font-size: .92rem;
      font-weight: 500;
      color: var(--neutral-700);
      text-decoration: none;
      transition: background .15s, color .15s;
    }
    .sidebar-link .material-symbols-outlined {
      font-size: 20px;
      flex-shrink: 0;
      opacity: .85;
    }
    .sidebar-link:hover {
      background: rgba(255,255,255,0.04);
      color: var(--neutral-900);
      text-decoration: none;
    }
    .sidebar-link.active {
      background: rgba(90,168,206,0.14);
      color: var(--primary-500);
    }
    .sidebar-link.active .material-symbols-outlined {
      opacity: 1;
      color: var(--primary-500);
    }

    /* Mobilná navigácia — hamburger */
    .sidebar-toggle {
      display: none;
      position: fixed;
      top: 12px;
      left: 12px;
      z-index: 60;
      width: 44px;
      height: 44px;
      border-radius: 10px;
      background: var(--surface-raised);
      border: 1px solid var(--border-default);
      color: var(--neutral-900);
      cursor: pointer;
      align-items: center;
      justify-content: center;
      box-shadow: var(--shadow-md);
    }
    .sidebar-toggle .material-symbols-outlined { font-size: 24px; }

    .sidebar-backdrop {
      display: none;
      position: fixed;
      inset: 0;
      background: rgba(5,10,18,0.65);
      backdrop-filter: blur(4px);
      z-index: 49;
    }

    @media (max-width: 900px) {
      .app-sidebar {
        width: 260px;
        transform: translateX(-100%);
        transition: transform .25s cubic-bezier(.4,0,.2,1);
        box-shadow: var(--shadow-xl);
      }
      .app-shell.is-open .app-sidebar { transform: translateX(0); }
      .app-shell.is-open .sidebar-backdrop { display: block; }
      .sidebar-toggle { display: inline-flex; }
      .app-main {
        margin-left: 0;
        padding-top: 64px;
      }
    }

    /* Material Symbols base */
    .material-symbols-outlined {
      font-family: 'Material Symbols Outlined';
      font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
      vertical-align: middle;
      line-height: 1;
    }