:root{
      --bg0:#020617;
      --bg1:#0b1220;
      --card:#0b1220;
      --card2:#0a1020;
      --line:#1f2a44;
      --text:#e5e7eb;
      --muted:#9aa7bd;
      --accent:#38bdf8;
      --accent2:#22c55e;
      --danger:#fbbf24;
      --shadow: 0 18px 50px rgba(0,0,0,.45);
      --radius:16px;
    }

    *{ box-sizing:border-box; }

    body{
      margin:0;
      font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial;
      background: radial-gradient(1200px 700px at 20% -10%, rgba(56,189,248,.25), transparent 55%),
                  radial-gradient(1000px 700px at 90% 10%, rgba(34,197,94,.18), transparent 60%),
                  linear-gradient(180deg, var(--bg0), var(--bg1));
      color: var(--text); font-weight:400;
    }

    .wrap{ max-width:760px; margin:0 auto; padding:28px 14px 44px; }

    header{
      display:flex; align-items:flex-end; justify-content:space-between; gap:16px;
      margin-bottom:18px;
    }

    h1{ margin:0; font-size:28px; letter-spacing:.2px; color: rgba(251,191,36,.95); }
    .sub{ color:var(--muted); font-size:13px; margin-top:6px; }

    .pillRow{
      display:flex;
      gap:10px;
      flex-wrap:wrap;
      justify-content:flex-end;
      margin-top:4px;
      margin-bottom:16px;
    }

    .pill{
      display:inline-flex; align-items:center; gap:8px;
      padding:10px 12px; border-radius:999px;
      border:1px solid var(--line); background:rgba(255,255,255,.02);
      color:var(--muted); font-size:13px;
    }
    .pill b{ color:var(--text); font-weight:700; }

    .grid{
      display:grid;
      grid-template-columns: 1fr 0.9fr;
      gap:20px;
    }

    /* viac miesta pod blokom Vstupné údaje */
    .grid > section.card{ margin-bottom: 26px; }

    .card{
      background: linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.015));
      border:1px solid var(--line);
      border-radius: var(--radius);
      box-shadow: var(--shadow);
      overflow:visible;
    }
.inputsCard{padding-bottom:22px;}


    .cardHeader{
      padding:14px 16px;
      border-bottom:1px solid var(--line);
      display:flex; align-items:center; justify-content:space-between; gap:10px;
      background: rgba(255,255,255,.015);
    }

    .cardHeader h2{ margin:0; font-size:15px; letter-spacing:.2px; }
    .cardBody{ padding:16px; }

    .formGrid{
      display:grid;
      grid-template-columns: 1fr 1fr;
      gap:12px 12px;
    }

    .full{ grid-column: 1 / -1; }

    label{ display:block; font-size:12px; color:var(--muted); margin:0 0 6px; }

    select, input, textarea{
      width:100%;
      padding:11px 12px;
      border-radius:12px;
      border:1px solid var(--line);
      background: rgba(2,6,23,.55);
      color:var(--text);
      font-size:14px;
      outline:none;
    }

    select{
      appearance:none;
      -webkit-appearance:none;
      -moz-appearance:none;
      padding-right:40px;
      background-image:
        linear-gradient(45deg, transparent 50%, rgba(203,213,225,.95) 50%),
        linear-gradient(135deg, rgba(203,213,225,.95) 50%, transparent 50%);
      background-position:
        calc(100% - 18px) calc(50% - 3px),
        calc(100% - 12px) calc(50% - 3px);
      background-size:6px 6px, 6px 6px;
      background-repeat:no-repeat;
    }

    select::-ms-expand{ display:none; }

    textarea{ min-height:120px; resize:vertical; }

    select:focus, input:focus, textarea:focus{
      border-color: rgba(56,189,248,.9);
      box-shadow:0 0 0 4px rgba(56,189,248,.12);
    }

    .row{
      display:flex; gap:10px; flex-wrap:wrap; align-items:center;
    }

    .btn{
      appearance:none; border:1px solid var(--line);
      background: rgba(255,255,255,.03);
      color:var(--text);
      padding:10px 12px;
      border-radius:12px;
      font-size:13px;
      cursor:pointer;
      transition: transform .05s ease, border-color .15s ease, background .15s ease;
      user-select:none;
    }

    .btn:hover{ border-color: rgba(56,189,248,.55); background: rgba(56,189,248,.08); }
    .btn:active{ transform: translateY(1px); }

    .btn.primary{ border-color: rgba(56,189,248,.6); background: rgba(56,189,248,.12); }
    .btn.good{ border-color: rgba(34,197,94,.6); background: rgba(34,197,94,.12); }
    .btn.danger{ border-color: rgba(251,113,133,.6); background: rgba(251,113,133,.12); }

    .toggle{
      display:inline-flex; align-items:center; gap:10px;
      padding:8px 10px;
      border-radius:999px;
      border:1px solid var(--line);
      background: rgba(255,255,255,.02);
      color:var(--muted);
      font-size:13px;
    }

    .switch{
      width:44px; height:24px; border-radius:999px;
      background: rgba(148,163,184,.25);
      border:1px solid var(--line);
      position:relative;
      cursor:pointer;
      flex:0 0 auto;
    }

    .knob{
      width:18px; height:18px; border-radius:999px;
      background: var(--text);
      position:absolute; top:50%; left:3px;
      transform: translateY(-50%);
      transition:left .15s ease, background .15s ease;
    }

    .switch.on{ background: rgba(56,189,248,.25); border-color: rgba(56,189,248,.5); }
    .switch.on .knob{ left:22px; background: var(--accent); }

    .resultBox{ padding:18px 16px 16px; }

    .price{
      font-size:44px;
      font-weight:900;
      letter-spacing:.2px;
      color: var(--accent);
      margin: 6px 0 8px;
    }

    .muted{ color:var(--muted); font-size:13px; }
    .divider{ height:1px; background: var(--line); margin:14px 0; }

    .statGrid{ display:grid; grid-template-columns: 1fr 1fr; gap:10px; }

    .stat{
      border:1px solid var(--line);
      background: rgba(255,255,255,.02);
      border-radius:14px;
      padding:10px 12px;
    }

    .stat .k{ font-size:12px; color:var(--muted); }
    .stat .v{ font-size:16px; font-weight:800; margin-top:3px; color:var(--text); }

    .warn{
      border:1px solid rgba(251,191,36,.45);
      background: rgba(251,191,36,.08);
      border-radius:14px;
      padding:10px 12px;
      color: rgba(251,191,36,.95);
      font-size:13px;
      line-height:1.4;
    }

    .hidden{ display:none !important; }
    /* Electron: allow clicking everywhere; only titlebar is draggable */
    body{ -webkit-app-region: no-drag; }
    .titlebar{ -webkit-app-region: drag; }
    .titlebar button, .titlebar a, .titlebar input, .titlebar select, .titlebar textarea, .titlebar .switch, .titlebar .tbBtn{ -webkit-app-region: no-drag; }

    @media (max-width: 940px){
      .grid{ grid-template-columns: 1fr; }
      header{ align-items:flex-start; flex-direction:column; }
      .pillRow{ justify-content:flex-start; }
      .formGrid{ grid-template-columns: 1fr; }
    }

    .demoBadge{
      position: fixed;
      top: 12px;
      right: 14px;
      z-index: 9999;
      padding: 4px 8px;
      font-size: 10.5px;
      font-weight: 600;
      letter-spacing: .04em;
      color: rgba(255,255,255,.75);
      background: rgba(255,255,255,.06);
      border: 1px solid rgba(255,255,255,.14);
      border-radius: 6px;
      backdrop-filter: blur(6px);
      pointer-events: none;
    }

    /* ===== TOOLTIP systém pre labely (ⓘ) ===== */
    label[data-tooltip]{
      position: relative;
      padding-right: 18px;
      cursor: help;
    }

    label[data-tooltip]::after{
      content:"ⓘ";
      position:absolute;
      right:0;
      top:0;
      font-size: 12px;
      color: var(--muted);
    }

    label[data-tooltip]:hover::after,
    label[data-tooltip].open::after{
      color: var(--accent);
    }

    label[data-tooltip]::before{
      display:none;
    }

    label[data-tooltip]:hover::before,
    label[data-tooltip].open::before{
      display:none;
    }

    /* ===== App header ===== */
    .app-header{
      display:flex;
      align-items:center;
      justify-content:center;
      gap:12px;
      margin: 8px 0 8px 0;
      padding-bottom: 4px;
      position: relative;
    }
    .app-header::after{
      content:"";
      position:absolute;
      left:50%;
      bottom:0;
      transform:translateX(-50%);
      width:120px;
      height:1px;
      background: linear-gradient(to right, transparent, rgba(255,255,255,.25), transparent);
    }
    .app-header-text{ text-align:center; }
    .app-header-text h1{ margin:0; line-height:1.08; letter-spacing:.2px; }
    .app-subtitle{ margin:10px 0 0 0; opacity:.86; font-size:1.02rem; line-height:1.25; }

    .app-header-icon{
      width:54px;
      height:54px;
      border-radius:14px;
      object-fit:cover;
      flex-shrink:0;
      box-shadow:0 14px 34px rgba(0,0,0,.40);
      border:1px solid rgba(255,255,255,.14);
      background: rgba(255,255,255,.06);
    }

    @media (min-width: 760px){
      .app-header{ justify-content:space-between; }
      .app-header-text{ text-align:left; }
      .app-header-icon{ width:62px; height:62px; border-radius:16px; }
    }

    @media (max-width: 420px){
      .app-header{ flex-direction:column; gap:10px; margin-top: 2px; }
      .app-header-icon{ width:56px; height:56px; }
      .app-subtitle{ font-size:.98rem; margin-top: 8px; }
    }

    @media (max-width:520px){
      .app-header{ margin-bottom: 42px; }
      .pillRow{ justify-content:center; margin-bottom:28px; margin-top:4px; }
    }

    /* --- Oddelenie horných tlačidiel od formulára --- */
    .top-actions, .actions, .controls, .header-actions, .toolbar{
      margin-bottom: 34px;
    }

    /* ===== Info bublina pre VŠH (superscript ⓘ) ===== */
    .infoIcon.infoSup{
      font-size: 12px;
      line-height: 1;
      position: relative;
      top: -7px;
      margin-left: 2px;
      opacity: .78;
      cursor: pointer;
    }

    .infoWrap{
      position: relative;
      display: inline-flex;
      align-items: baseline;
    }

    .infoWrap .infoBubble{
      display:none;
    }

    .infoWrap:hover .infoBubble,
    .infoWrap.open .infoBubble{
      display:none;
    }


/* ===== Floating tooltip portal ===== */
.floatingTooltip{
  position: fixed;
  left: 0;
  top: 0;
  z-index: 10050;
  width: min(420px, calc(100vw - 24px));
  max-width: calc(100vw - 24px);
  padding: 12px 14px;
  border-radius: 14px;
  border: 1px solid rgba(148,163,184,.28);
  background: rgba(2,6,23,.97);
  color: rgba(248,250,252,.98);
  box-shadow: 0 22px 64px rgba(0,0,0,.55);
  font-size: 13px;
  line-height: 1.45;
  opacity: 0;
  transform: translateY(-4px);
  pointer-events: none;
  transition: opacity .14s ease, transform .14s ease;
  white-space: pre-line;
  overflow-wrap: anywhere;
}
.floatingTooltip.show{
  opacity: 1;
  transform: translateY(0);
}
.floatingTooltip[data-kind="info"]{
  width: min(460px, calc(100vw - 24px));
}
.cardHeader,
.resultBox,
.vshLabel,
.infoWrap{
  overflow: visible;
}

    /* ===== PC: dvojblok (ľavá+pravá karta) vycentruj ===== */
    @media (min-width: 1024px){
      .grid{
        max-width: 1120px; /* zmeň na 1040–1200 podľa chuti */
        margin-left: auto;
        margin-right: auto;

        grid-template-columns: minmax(0,1fr) 520px;
        align-items: start;
      }

      .wrap{
        max-width: 1200px;
        padding-left: 18px;
        padding-right: 18px;
      }
    }
/* ===== PC: horné tlačidlá zarovnané s blokom Vstupné údaje ===== */
@media (min-width: 1024px){
  .pillRow{
    max-width: 1120px;
    margin-left: auto;
    margin-right: auto;
    justify-content: flex-start;
    padding-left: 0;
    padding-right: 0;
  }
}
/* ===== POMOC: čitateľná šírka ===== */

/* kontajner pomoci nech má rozumnú šírku riadku */
.helpPanelBody{
  max-width: 980px;        /* šírka textu (skús 900–1050) */
  margin: 0;               /* zarovnanie doľava */
}

/* keď chceš, aby sa pomoc držala vľavo ale mala pekné odsadenie */
.helpPanelBody{
  padding-left: 0;
  padding-right: 0;
}

/* odseky – menej “rozťahané”, lepšia čitateľnosť */
.helpPanelBody p{
  max-width: 980px;
  line-height: 1.55;
  margin: 10px 0;
}

/* sekcie a nadpisy – ako “bloky” */
.helpPanelBody h2,
.helpPanelBody h3{
  margin: 18px 0 10px;
  line-height: 1.15;
}

/* zoznamy – aby vyzerali ako na druhom obrázku */
.helpPanelBody ol,
.helpPanelBody ul{
  max-width: 980px;
  margin: 10px 0 14px;
  padding-left: 22px;
}
.helpPanelBody li{
  margin: 6px 0;
  line-height: 1.5;
}

/* tip box nech je pekne kompakt */
.helpTip{
  max-width: 980px;
  margin-top: 14px;
}

/* karta pre "Popis položiek" – nech to nie je nalepené na kraj */
.helpSection,
.helpGrid2{
  max-width: 980px;
}
  
/* ===================== HELP (MODAL OVERLAY) ===================== */
#helpPanel.helpOverlay{
  position: fixed;
  inset: 0;
  z-index: 9998;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 22px 14px;
  background: rgba(2,6,23,.68);
  backdrop-filter: blur(10px);
}

#helpPanel.hidden{ display:none !important; }

/* modal karta */
#helpPanel .helpModal{
  width: min(1040px, 100%);
  height: min(92vh, 980px);   /* viac miesta */
  overflow: hidden;           /* scrolluje len body */
}

/* hlavička – vždy viditeľná */
#helpPanel .helpModalHeader{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:12px;
  padding:14px 16px;
  border-bottom:1px solid var(--line);
  background: rgba(255,255,255,.02);
}

#helpPanel .helpModalTitle{
  font-weight: 950;
  font-size: 18px;
  letter-spacing: .2px;
  margin:0;
}

#helpPanel .helpModalSub{
  color: var(--muted);
  font-size: 13px;
  margin-top: 4px;
  line-height: 1.35;
}

#helpPanel .helpCloseBtn{
  flex: 0 0 auto;
  align-self: flex-start;
  padding: 10px 14px;
}

/* obsah */
#helpPanel .helpModalBody{
  padding:16px;
  overflow: auto;
  height: calc(92vh - 66px);           /* 66px ~ header */
  -webkit-overflow-scrolling: touch;   /* iOS smooth scroll */
  overscroll-behavior: contain;        /* nech to “neťahá” background */
}

/* typografia – čitateľnosť */
#helpPanel .helpModalBody p,
#helpPanel .helpModalBody li{
  line-height: 1.55;
}

#helpPanel .helpModalBody h3{
  font-size: 16px;
  margin: 18px 0 10px;
}

#helpPanel .helpModalBody ol,
#helpPanel .helpModalBody ul{
  padding-left: 22px;
  margin: 10px 0 14px;
}

#helpPanel .helpModalBody li{ margin: 7px 0; }

/* callout "Dôležité" */
#helpPanel .helpCallout{
  border:1px solid var(--line);
  background: rgba(255,255,255,.02);
  border-radius: 14px;
  padding: 12px 14px;
  margin: 8px 0 14px;
}

#helpPanel .helpCalloutTitle{
  font-weight: 900;
  margin: 0 0 8px;
}

/* tip box – nech je podobný calloutu, ale jemnejší */
#helpPanel .helpTip{
  margin-top: 12px;
}

/* Popis položiek – grid nech je pruhovaný a vzdušný */
#helpPanel .helpGrid2{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:10px;
}

@media (max-width: 940px){
  #helpPanel.helpOverlay{ padding: 14px 12px; }
  #helpPanel .helpModal{ max-height: calc(100vh - 28px); }
  #helpPanel .helpGrid2{ grid-template-columns: 1fr; }
}

/* ===== HELP PANEL: obsah (prehľad, typografia, grid) ===== */
#helpPanel .helpSection{ margin-top: 22px; }
#helpPanel .helpSection:first-child{ margin-top: 0; }

#helpPanel .helpSection h3{
  margin: 0 0 12px;
  font-size: 18px;
  letter-spacing: .2px;
}

#helpPanel .helpModalBody p{
  margin: 10px 0;
  line-height: 1.6;
}

#helpPanel .helpModalBody ol,
#helpPanel .helpModalBody ul{
  margin: 10px 0 14px;
  padding-left: 22px;
}
#helpPanel .helpModalBody li{
  margin: 7px 0;
  line-height: 1.55;
}

#helpPanel .helpTip{
  margin-top: 14px;
  padding: 12px 14px;
  border-radius: 14px;
  border: 1px solid rgba(56,189,248,.22);
  background: rgba(56,189,248,.08);
  color: var(--text);
  font-size: 13.5px;
  line-height: 1.45;
}
#helpPanel .helpTip b{ color: #fff; }

#helpPanel .helpGrid2{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
@media (max-width: 900px){
  #helpPanel .helpGrid2{ grid-template-columns: 1fr; }
}

#helpPanel .helpItem2{
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(2,6,23,.35);
  border-radius: 14px;
  padding: 12px 14px;
}
#helpPanel .helpItem2 b{
  display:block;
  font-size: 14px;
  font-weight: 900;
  color: var(--text);
  margin: 0 0 6px;
}
#helpPanel .helpItem2 span{
  display:block;
  font-size: 13px;
  line-height: 1.45;
  color: rgba(226,232,240,.86);
}
#helpPanel .helpItem2 i{
  display:block;
  margin-top: 6px;
  font-style: normal;
  color: rgba(148,163,184,.9);
}

/* expert-only položky v pomoci nech sú vizuálne jemnejšie */
#helpPanel .helpItem2.expertOnlyHelp{
  border-style: dashed;
  border-color: rgba(255,255,255,.12);
  background: rgba(2,6,23,.28);
}

/* lepšie tlačidlo zavrieť (stále ostáva #helpCloseBtn) */
#helpCloseBtn{
  border-color: rgba(251,113,133,.50) !important;
  background: rgba(251,113,133,.10) !important;
  padding: 10px 14px !important;
  border-radius: 14px !important;
}
#helpCloseBtn:hover{
  border-color: rgba(251,113,133,.75) !important;
  background: rgba(251,113,133,.16) !important;
}

/* jemnejší scrollbar v pomoci */
#helpPanel .helpModalBody::-webkit-scrollbar{ width: 12px; }
#helpPanel .helpModalBody::-webkit-scrollbar-track{ background: rgba(255,255,255,.04); border-radius: 999px; }
#helpPanel .helpModalBody::-webkit-scrollbar-thumb{ background: rgba(148,163,184,.35); border-radius: 999px; border: 3px solid rgba(0,0,0,0); background-clip: padding-box; }
#helpPanel .helpModalBody::-webkit-scrollbar-thumb:hover{ background: rgba(148,163,184,.55); border: 3px solid rgba(0,0,0,0); background-clip: padding-box; }



    /* ===== FIELD VALIDATION (OK ✓ / Doplň) ===== */
    .field{ position:relative; }
    .field.invalid select,
    .field.invalid input,
    .field.invalid textarea{ border-color: rgba(251,191,36,.65); box-shadow: 0 0 0 4px rgba(251,191,36,.08); }
    .field.valid select,
    .field.valid input,
    .field.valid textarea{ border-color: rgba(34,197,94,.85); box-shadow: 0 0 0 4px rgba(34,197,94,.12); }

    .fieldStatus{
      margin-top:6px;
      font-size:12px;
      line-height:1;
      display:flex;
      align-items:center;
      gap:6px;
      color: var(--muted);
      user-select:none;
    }
    .fieldStatus .mark{
      display:inline-flex;
      width:16px;
      height:16px;
      align-items:center;
      justify-content:center;
      border-radius:999px;
      border:1px solid var(--line);
      background: rgba(255,255,255,.02);
      font-weight:900;
      font-size:12px;
    }
    .field.invalid .fieldStatus{ color: rgba(251,191,36,.95); }
    .field.invalid .fieldStatus .mark{ border-color: rgba(251,191,36,.55); }

    .field.valid .fieldStatus{ color: rgba(34,197,94,.95); }
    .field.valid .fieldStatus .mark{
      border-color: rgba(34,197,94,.55);
      background: rgba(34,197,94,.10);
    }

    /* ===== TRH vs. VÝPOČET (informatívne váhy) ===== */
    .weightBox{
      margin-top:12px;
      border:1px solid var(--line);
      background: rgba(255,255,255,.02);
      border-radius:14px;
      padding:10px 12px;
    }
    .weightTop{ display:flex; align-items:center; justify-content:space-between; gap:10px; }
    .weightTop b{ font-size:12px; }
    .weightHint{ color:var(--muted); font-size:12px; }
    .weightBars{ margin-top:10px; display:grid; gap:8px; }
    .wRow{ display:grid; grid-template-columns: 110px 1fr 56px; gap:10px; align-items:center; }
    .wName{ color:var(--muted); font-size:12px; }
    .wBar{ height:10px; border-radius:999px; border:1px solid var(--line); background: rgba(255,255,255,.02); overflow:hidden; }
    .wFill{ height:100%; width:0%; background: rgba(56,189,248,.55); }
    .wFill.calc{ background: rgba(34,197,94,.55); }
    .wPct{ font-size:12px; color:var(--text); text-align:right; font-variant-numeric: tabular-nums; }


/* ===== Trhové dáta: dostupnosť + jemné animácie ===== */
.marketMeta{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  flex-wrap:wrap;
}

.marketAvail{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:6px 10px;
  border-radius:999px;
  border:1px solid var(--line);
  background: rgba(255,255,255,.02);
  font-size:12.5px;
  color: var(--muted);
  user-select:none;
}

.marketAvail .dot{
  width:10px; height:10px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.18);
  background: rgba(148,163,184,.35); /* default */
  box-shadow: 0 0 0 3px rgba(148,163,184,.10);
}

.marketAvail.high .dot{
  background: rgba(34,197,94,.9);
  box-shadow: 0 0 0 3px rgba(34,197,94,.16);
}
.marketAvail.mid .dot{
  background: rgba(250,204,21,.95);
  box-shadow: 0 0 0 3px rgba(250,204,21,.14);
}
.marketAvail.low .dot{
  background: rgba(148,163,184,.55);
  box-shadow: 0 0 0 3px rgba(148,163,184,.10);
}

@keyframes softPulse {
  0%   { transform: translateY(0); filter: brightness(1); }
  40%  { transform: translateY(-1px); filter: brightness(1.08); }
  100% { transform: translateY(0); filter: brightness(1); }
}

.pulseOnce{ animation: softPulse .35s ease; }



.startup-hint{
  display:flex;
  align-items:center;
  gap:10px;
  padding:12px 14px;
  border-radius:14px;
  border:1px solid rgba(251,191,36,.45);
  background: rgba(251,191,36,.08);
  color: var(--text);
  font-size:13.5px;
  line-height:1.35;
  margin: 10px auto 18px;
  width: 100%;
  max-width: 1120px;
}
.startup-hint .hintIcon{ font-size:14px; opacity:.9; }
.startup-hint.ready{
  border-color: rgba(34,197,94,.55);
  background: rgba(34,197,94,.10);
  color: rgba(34,197,94,.95);
}
.startup-hint.busy{
  border-color: rgba(34,197,94,.55);
  background: rgba(34,197,94,.08);
  color: rgba(34,197,94,.95);
}

/* Medzivýpočty (expert) */
.btn.link.small{
  background: transparent !important;
  border: 0 !important;
  padding: 0 !important;
  color: var(--accent2);
  text-decoration: underline;
  font-weight: 600;
  cursor: pointer;
}
.btn.link.small:hover{ opacity: .9; }

.midModal{
  position: fixed; inset: 0;
  display: flex; align-items: center; justify-content: center;
  padding: 20px;
  background: rgba(0,0,0,.55);
  z-index: 9999;
}
.midModal.hidden{ display:none; }
.midCard{
  width: min(520px, 92vw);
  max-height: min(78vh, 640px);
  overflow: auto;
  border-radius: 18px;
  padding: 18px 18px 14px;
  background: rgba(10,14,24,.92);
  border: 1px solid rgba(255,255,255,.12);
  box-shadow: 0 18px 60px rgba(0,0,0,.45);
}
.midHeader{
  display:flex; align-items:center; justify-content:space-between;
  gap: 12px;
  margin-bottom: 10px;
}
.midTitle{ font-size: 20px; font-weight: 800; }
.midClose{
  background: transparent;
  border: 1px solid rgba(255,255,255,.25);
  color: #fff;
  border-radius: 999px;
  padding: 8px 12px;
}
.midList{ margin-top: 10px; }
.midRow{
  display:flex; justify-content:space-between; align-items:baseline;
  gap: 14px;
  padding: 10px 0;
  border-bottom: 1px dashed rgba(255,255,255,.12);
}
.midRow .k{ color: rgba(255,255,255,.78); }
.midRow .v{ font-weight: 800; }
/* ===== HERO HEADER (banner) ===== */
.heroBanner{
  position: relative;
  overflow: hidden;
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,.08);
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  background-image: image-set(url("../banner-v3.webp") type("image/webp"), url("../banner-v3.png") type("image/png"));
  box-shadow: 0 20px 60px rgba(0,0,0,.35);

  min-height: 110px;
  display:flex;
  align-items:center;
}
@media (max-width: 640px){
  .heroBanner{ min-height: 96px; }
}

.heroBanner::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events: none;   /* ← DÔLEŽITÉ */
  z-index: 0;

  background: linear-gradient(90deg,
    rgba(2,6,23,.90) 0%,
    rgba(2,6,23,.72) 45%,
    rgba(2,6,23,.20) 100%);
}

.heroInner{
  position: relative;
  z-index: 1; 
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 14px;
  padding: 20px 18px;
}

.heroTitles{
  display:flex;
  flex-direction:column;
  gap: 6px;
}

.heroTitle{
  margin:0;
  font-weight: 800;
  letter-spacing: .2px;
  line-height: 1.05;
  background: linear-gradient(90deg, #fbbf24 0%, #fde68a 35%, #f59e0b 70%, #fbbf24 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  filter: drop-shadow(0 10px 26px rgba(0,0,0,.55));
  /* ŽLTÁ NATVRDO */
  text-shadow: 0 8px 30px rgba(0,0,0,.55);
  font-size: clamp(22px, 3vw, 34px);
}

.heroSubtitle{
  margin:0;
  font-weight: 500;
  color: rgba(226,232,240,.88);
  font-size: 14px;
}

.heroAppIcon{
  width: 46px;
  height: 46px;
  border-radius: 14px;
  flex: 0 0 auto;
  box-shadow: 0 10px 28px rgba(0,0,0,.45);
  border: 1px solid rgba(255,255,255,.18);
  background: rgba(0,0,0,.18);
  backdrop-filter: blur(6px);
}

/* mobil – menej paddingu */
@media (max-width: 640px){
  .heroInner{ padding: 16px 14px; }
  .heroAppIcon{ width: 42px; height: 42px; border-radius: 13px; }
}
/* ===== TOP CONTROLS (tlačidlá mimo banneru) ===== */
.topControls{
  width: 100%;
  max-width: var(--maxw, 1180px);
  margin: 10px auto 10px auto;
  padding: 0 14px;
  display:flex;
  align-items:center;
  gap:10px;
  flex-wrap:wrap;
}

/* nech to na PC sedí naľavo ako karty */
@media (min-width: 1024px){
  .topControls{
    max-width: 1120px;      /* rovnaké ako grid */
    padding-left: 0;
    padding-right: 0;
  }
}
/* ===== VÝRAZNEJŠIE TLAČIDLÁ (bez žltej) ===== */

.topControls .btn,
.topControls .toggle{
  border: 1.5px solid rgba(255,255,255,.35);
  background: rgba(255,255,255,.04);
  backdrop-filter: blur(6px);
  transition: all .2s ease;
}

/* hover efekt */
.topControls .btn:hover,
.topControls .toggle:hover{
  border-color: rgba(56,189,248,.85);   /* MODRÁ */
  background: rgba(56,189,248,.12);
  box-shadow: 0 0 0 3px rgba(56,189,248,.15);
}

/* PDF tlačidlo nech ostane zelené ale výraznejšie */
.topControls .btn.good{
  border: 1.5px solid rgba(34,197,94,.6);
  background: rgba(34,197,94,.12);
}

/* keď je Expert režim zapnutý */
.switch.on{
  border-color: rgba(255,255,255,.75);
  box-shadow: 0 0 0 3px rgba(255,255,255,.08);
}

/* ===== HISTÓRIA (localStorage) ===== */
.historyList{
  margin-top: 12px;
  display: grid;
  gap: 10px;
  max-height: 46vh;
  overflow: auto;
  padding-right: 6px;
}
.histItem{
  border:1px solid rgba(255,255,255,.10);
  background: rgba(2,6,23,.35);
  border-radius: 14px;
  padding: 10px 12px;
  cursor: pointer;
  transition: .15s ease;
}
.histItem:hover{
  border-color: rgba(56,189,248,.45);
  background: rgba(56,189,248,.06);
}
.histTop{
  display:flex;
  justify-content:space-between;
  gap:10px;
  align-items:baseline;
}
.histTitle{ font-weight: 900; }
.histMeta{ color: rgba(148,163,184,.95); font-size: 12.5px; margin-top: 4px; }
.histPrice{ font-weight: 900; color: rgba(56,189,248,.95); }


.historyTools{
  display:flex;
  justify-content:space-between;
  gap:10px;
  margin-top: 10px;
  align-items:center;
  flex-wrap: wrap;
}
.historyToolsLeft{ flex: 1; min-width: 220px; }
.historySearch{
  width: 100%;
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(2,6,23,.30);
  color: rgba(255,255,255,.92);
  outline: none;
}
.historySearch::placeholder{ color: rgba(148,163,184,.8); }
.historyToolsRight{
  display:flex;
  gap:10px;
  align-items:center;
}
.historySort{
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(2,6,23,.30);
  color: rgba(255,255,255,.92);
  outline:none;
}
.historyStarOnly{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding: 9px 10px;
  border-radius: 12px;
  border: 1px solid rgba(251,191,36,.22);
  background: rgba(251,191,36,.08);
  color: rgba(251,191,36,.95);
  cursor:pointer;
  user-select:none;
}
.historyStarOnly input{ display:none; }

.histItem{
  position: relative;
  padding-bottom: 44px; /* room for actions */
}
.histItem.starred{
  border-color: rgba(251,191,36,.35);
  box-shadow: 0 18px 44px rgba(251,191,36,.08);
}
.histActions{
  position:absolute;
  left: 10px;
  right: 10px;
  bottom: 10px;
  display:flex;
  justify-content:space-between;
  gap:10px;
  opacity: .0;
  transform: translateY(3px);
  transition: .15s ease;
  pointer-events:none;
}
.histItem:hover .histActions{
  opacity: 1;
  transform: translateY(0);
  pointer-events:auto;
}

/* Touch zariadenia nemajú hover → akcie musia byť vždy klikateľné */
@media (hover: none){
  .histActions{ opacity:1; transform: translateY(0); pointer-events:auto; }
}
.histStarBtn{
  width: 36px;
  height: 30px;
  border-radius: 10px;
  border: 1px solid rgba(251,191,36,.25);
  background: rgba(251,191,36,.10);
  color: rgba(251,191,36,.95);
  font-size: 16px;
}
.histExportBtn{
  border-radius: 10px;
  border: 1px solid rgba(56,189,248,.25);
  background: rgba(56,189,248,.08);
  color: rgba(226,232,240,.92);
  padding: 6px 10px;
  font-weight: 700;
  font-size: 12px;
}

.histPrice{
  background: linear-gradient(90deg, rgba(56,189,248,1), rgba(34,197,94,.95), rgba(251,191,36,.95));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* ===== Detail výpočtu – tabuľka ===== */
.midTable{
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  margin-top: 12px;
  overflow: hidden;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,.12);
}
.midTable th, .midTable td{
  padding: 10px 12px;
  border-bottom: 1px solid rgba(255,255,255,.10);
  font-size: 13px;
}
.midTable th{
  text-align:left;
  color: rgba(226,232,240,.9);
  background: rgba(2,6,23,.35);
  font-weight: 900;
  letter-spacing: .02em;
}
.midTable td.k{
  color: rgba(226,232,240,.88);
  width: 62%;
}
.midTable td.v{
  text-align:right;
  font-weight: 900;
  color: rgba(255,255,255,.92);
}
.midTable tr:last-child td{ border-bottom: 0; }

/* DEMO badge – menej blur, viac clean */
.demoBadge{
  backdrop-filter: blur(2px) !important;
  background: rgba(255,255,255,.05) !important;
  border-color: rgba(255,255,255,.12) !important;
  color: rgba(255,255,255,.72) !important;
}
/* ===== ELECTRON CUSTOM TITLEBAR ===== */
.titlebar{
  height: 44px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding: 0 10px 0 14px;
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 14px;
  background: rgba(2,6,23,.35);
  backdrop-filter: blur(10px);
  box-shadow: 0 10px 30px rgba(0,0,0,.25);
  margin: 0 auto 12px;
  max-width: 1120px;
  -webkit-app-region: drag;
}
.titlebar .tbLeft{
  display:flex; align-items:center; gap:10px;
  min-width: 0;
}
.titlebar .tbLogo{
  width: 22px; height: 22px;
  border-radius: 6px;
  border: 1px solid rgba(255,255,255,.18);
  background: rgba(255,255,255,.06);
  display:flex; align-items:center; justify-content:center;
  font-weight: 900;
  color: rgba(251,191,36,.95);
  flex: 0 0 auto;
}
.titlebar .tbTitle{
  font-size: 13px;
  font-weight: 750;
  color: rgba(226,232,240,.92);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.titlebar .tbBtns{
  display:flex; align-items:center; gap:8px;
  -webkit-app-region: no-drag;
}
.tbBtn{
  width: 38px; height: 28px;
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,.18);
  background: rgba(255,255,255,.04);
  color: rgba(226,232,240,.9);
  cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  transition: .15s ease;
}
.tbBtn:hover{
  border-color: rgba(56,189,248,.65);
  background: rgba(56,189,248,.10);
}
.tbBtn.close:hover{
  border-color: rgba(251,113,133,.75);
  background: rgba(251,113,133,.14);
}
    @media (max-width: 940px){
  .titlebar{ max-width: 100%; border-radius: 12px; }
}
/* samotná ikonka */
.tbIcon{
  width:16px;
  height:16px;
  color: rgba(255,255,255,.85); /* farba ikony */
  flex: 0 0 auto;
}
.tbBrand{ display:flex; align-items:center; gap:8px; }

.tbLogo{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  line-height:0;
  margin:0;
  padding:0;
  background:none;
  width:auto;
  height:auto;
}

.tbIcon{
  width:16px;
  height:16px;
  flex:0 0 auto;
}

/* ===================== UI VYLEPŠENIA (kontrast + akcenty) ===================== */
:root{
  /* vyšší kontrast */
  --text:#f8fafc;
  --muted:#cbd5e1;
  --muted2:#94a3b8;

  /* brand akcenty (modrá + tyrkys + zlatá) */
  --accent:#38bdf8;   /* info / čísla */
  --accent2:#22c55e;  /* success */
  --gold:#fbbf24;     /* hlavné CTA (PDF) */

  /* jemnejšie tiene */
  --shadow: 0 10px 28px rgba(0,0,0,.42);
}

/* texty */
.sub{ color:var(--muted2); }
label{ color:var(--muted2); }
.muted{ color:var(--muted2); }

/* karty – viac definície, menej „rozmazané“ */
.card{
  background:
    linear-gradient(180deg, rgba(255,255,255,.055), rgba(255,255,255,.02));
  border-color: rgba(148,163,184,.20);
  box-shadow: var(--shadow);
}
.cardHeader{
  background: rgba(255,255,255,.02);
  border-bottom-color: rgba(148,163,184,.18);
}
.divider{ background: rgba(148,163,184,.18); }

/* zvýrazni výsledkovú kartu (vpravo) jemným akcentom */
.grid > aside.card{
  border-color: rgba(56,189,248,.28);
  box-shadow: 0 14px 40px rgba(0,0,0,.48);
}

/* tlačidlá – zjednotenie: primary=modrá, PDF(good)=zlatá */
.btn{
  background: rgba(255,255,255,.035);
  border-color: rgba(148,163,184,.22);
}
.btn:hover{
  border-color: rgba(56,189,248,.60);
  background: rgba(56,189,248,.10);
}
.btn.primary{
  border-color: rgba(56,189,248,.70);
  background: rgba(56,189,248,.14);
}
.btn.good{
  border-color: rgba(251,191,36,.75);
  background: rgba(251,191,36,.16);
  color: #0b1220;
  font-weight: 800;
}
.btn.good:hover{
  background: rgba(251,191,36,.22);
  border-color: rgba(251,191,36,.90);
}

/* hero cena – jemný glow + gradient */
.price{
  color: var(--accent);
  text-shadow: 0 0 18px rgba(56,189,248,.20);
  background: linear-gradient(90deg, rgba(56,189,248,1), rgba(251,191,36,.95));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* stat boxy – čistejšie */
.stat{
  border-color: rgba(148,163,184,.18);
  background: rgba(255,255,255,.018);
}
.stat .k{ color:var(--muted2); }

/* banner – kompaktnejší a čitateľnejší */
.heroBanner{
  min-height: 96px;
  box-shadow: 0 16px 46px rgba(0,0,0,.40);
  border-color: rgba(148,163,184,.18);
}
.heroInner{ padding: 18px 18px; }

/* „OK“ lišta */
.startup-hint{
  border-color: rgba(34,197,94,.30);
  background: rgba(34,197,94,.10);
}


/* ===================== VŠH HERO (UI) ===================== */
.resultBox{ position: relative; }

.vshHeroBadge{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:6px 10px;
  border-radius:999px;
  border:1px solid rgba(56,189,248,.28);
  background: rgba(2,132,199,.10);
  color: rgba(226,232,240,.92);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .02em;
  margin-bottom: 10px;
}

.vshHeroBadge .dot{
  width:8px;height:8px;border-radius:999px;
  background: rgba(56,189,248,.95);
  box-shadow: 0 0 0 4px rgba(56,189,248,.12);
}

.vshHeroBadge .infoMini{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:18px;height:18px;
  border-radius:999px;
  border:1px solid rgba(251,191,36,.38);
  color:#fbbf24;
  background: rgba(251,191,36,.10);
  font-size: 12px;
  line-height: 1;
}

/* jemný “hero” look ceny */
.price.heroPrice{
  font-size: 56px;
  letter-spacing: .02em;
  line-height: 1.05;
  text-shadow: 0 12px 38px rgba(56,189,248,.10);
  background: linear-gradient(90deg, rgba(56,189,248,1), rgba(34,197,94,.95), rgba(251,191,36,.95));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* riadok “k dnešnému dňu” */
.vshAsOf{
  margin-top: 6px;
  font-size: 12px;
  color: rgba(226,232,240,.78);
}
.vshAsOf b{
  color: rgba(248,250,252,.92);
  font-weight: 800;
}

@media (max-width: 520px){
  .price.heroPrice{ font-size: 50px; }
}


/* TOPCONTROLS_WRAP_TWEAK */
.topControls{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  align-items:center;
}
.topControls .btn{ flex: 1 1 auto; }
.topControls .toggle{ flex: 1 1 220px; }
@media (max-width: 520px){
  .topControls .btn{ flex: 1 1 46%; }
  .topControls .toggle{ flex: 1 1 100%; }
}


/* ===== V3 polish: market section separation ===== */
.marketWrap{
  margin-top: 10px;
  padding-top: 12px;
  border-top: 1px solid rgba(148,163,184,.18);
  position: relative;
}
.marketWrap::before{
  content:"";
  position:absolute;
  left:-2px; right:-2px; top:8px; bottom:-6px;
  border-radius: 16px;
  background: linear-gradient(180deg, rgba(56,189,248,.08), rgba(34,197,94,.05) 55%, rgba(2,6,23,0));
  border: 1px solid rgba(56,189,248,.16);
  pointer-events:none;
  opacity:.95;
}
.marketWrap > *{ position: relative; }

/* Make the “market” intro line feel like a section header */
.marketWrap .row{
  padding: 10px 12px;
  border-radius: 14px;
  background: rgba(2,6,23,.18);
  border: 1px solid rgba(148,163,184,.18);
}

/* Market box: a bit more contrast from the hero */
#marketBox{
  margin-top: 12px !important;
  padding: 12px;
  border-radius: 16px;
  background: rgba(2,6,23,.22);
  border: 1px solid rgba(148,163,184,.18);
}

/* ===== History modal polish ===== */
.midCard{
  background: linear-gradient(180deg, rgba(2,6,23,.78), rgba(2,6,23,.62));
  border: 1px solid rgba(148,163,184,.16);
  box-shadow: 0 18px 55px rgba(0,0,0,.55);
}
.midHeader{
  position: sticky;
  top: 0;
  z-index: 2;
  padding-bottom: 10px;
  background: linear-gradient(180deg, rgba(2,6,23,.92), rgba(2,6,23,.70));
  border-bottom: 1px solid rgba(148,163,184,.12);
  backdrop-filter: blur(10px);
}
.midHeader .row{ gap:10px; flex-wrap: wrap; justify-content:flex-end; }
.midTitle{ letter-spacing:.2px; }
.histList{
  padding-right: 6px;
}
.histItem{
  background: rgba(15,23,42,.35);
  border: 1px solid rgba(148,163,184,.16);
  box-shadow: 0 10px 22px rgba(0,0,0,.22);
  transition: transform .12s ease, border-color .12s ease;
}
.histItem:hover{
  transform: translateY(-1px);
  border-color: rgba(56,189,248,.28);
}
.histTop .t{
  font-size: 18px;
  letter-spacing:.2px;
}
.histTop .p{
  font-weight: 900;
  background: linear-gradient(90deg, rgba(56,189,248,1), rgba(34,197,94,1));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  filter: drop-shadow(0 6px 16px rgba(0,0,0,.35));
}
.histMeta{
  color: rgba(226,232,240,.72);
}
/* Footer hint in history */
.midHint{
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px dashed rgba(148,163,184,.18);
  color: rgba(226,232,240,.62);
}


/* ===== AI verify button ===== */
.btn.ai{
  border: 1px solid rgba(251,191,36,.55) !important;
  background: linear-gradient(180deg, rgba(251,191,36,.18), rgba(2,6,23,.12)) !important;
  color: #fde68a !important;
  box-shadow: 0 10px 24px rgba(251,191,36,.10);
}
.btn.ai:hover{ filter: brightness(1.06); }
.btn.ai:active{ transform: translateY(1px); }

    /* ===== AI prompt modal ===== */
    .aiModal{ position:fixed; inset:0; z-index:9999; display:flex; align-items:center; justify-content:center;
      padding:18px; background: rgba(0,0,0,.55); backdrop-filter: blur(10px); }
    .aiModal.hidden{ display:none; }
    .aiCard{ width:min(680px, 96vw); border-radius:18px; border:1px solid rgba(148,163,184,.18);
      background: linear-gradient(180deg, rgba(2,6,23,.92), rgba(2,6,23,.78)); box-shadow: 0 24px 80px rgba(0,0,0,.55); }
    .aiHead{ display:flex; align-items:center; justify-content:space-between; gap:10px; padding:14px 14px 10px 14px;
      border-bottom:1px solid rgba(148,163,184,.14); }
    .aiTitle{ font-size:18px; font-weight:950; letter-spacing:.2px; }
    .aiBody{ padding:14px; }
    #aiPrompt{ width:100%; min-height:160px; resize:vertical; padding:12px 12px; border-radius:14px;
      background: rgba(15,23,42,.55); color: #e2e8f0; border:1px solid rgba(148,163,184,.20);
      font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
      font-size:12.5px; line-height:1.35; outline:none; }
    #aiPrompt:focus{ border-color: rgba(56,189,248,.55); box-shadow: 0 0 0 3px rgba(56,189,248,.14); }
    .aiBtns{ display:flex; gap:10px; flex-wrap:wrap; margin-top:12px; }
    .aiNote{ margin-top:10px; font-size:12.5px; color: rgba(226,232,240,.68); line-height:1.35; }


/* === v15 enhancements === */
.resultHeroPanel{padding:14px 14px 10px;border:1px solid rgba(56,189,248,.16);border-radius:18px;background:linear-gradient(180deg,rgba(56,189,248,.08),rgba(34,197,94,.05) 65%,rgba(2,6,23,.02));box-shadow:0 10px 30px rgba(2,6,23,.18), inset 0 1px 0 rgba(255,255,255,.04);}
.resultHeroTop{display:flex;justify-content:space-between;align-items:center;gap:8px;margin-bottom:4px;}
.vshMetaLine{display:flex;flex-wrap:wrap;gap:8px;align-items:center;font-size:12px;color:rgba(226,232,240,.8);}
.vshMetaItem b{color:rgba(248,250,252,.96);font-weight:800;}
.vshMetaDot{opacity:.45;}
.vehicleState{display:inline-flex;align-items:center;gap:8px;margin-top:10px;padding:8px 12px;border-radius:999px;font-size:12px;font-weight:800;letter-spacing:.03em;width:max-content;border:1px solid rgba(148,163,184,.22);}
.vehicleState.high{background:rgba(34,197,94,.12);color:rgba(134,239,172,.98);border-color:rgba(34,197,94,.3);}
.vehicleState.mid{background:rgba(56,189,248,.12);color:rgba(147,197,253,.98);border-color:rgba(56,189,248,.28);}
.vehicleState.low{background:rgba(245,158,11,.12);color:rgba(253,230,138,.98);border-color:rgba(245,158,11,.28);}
.valueComment{border:1px solid rgba(56,189,248,.22);background:rgba(56,189,248,.07);border-radius:16px;padding:12px 14px;}
.valueCommentTitle{font-size:12px;font-weight:800;letter-spacing:.03em;text-transform:uppercase;color:rgba(125,211,252,.95);margin-bottom:6px;}
.valueCommentBody{color:rgba(226,232,240,.92);font-size:14px;line-height:1.55;}
.smartWarn{border-color:rgba(248,113,113,.4);background:rgba(248,113,113,.08);color:rgba(254,202,202,.95);}
.marketComment{border:1px solid rgba(34,197,94,.2);background:rgba(34,197,94,.08);border-radius:14px;padding:10px 12px;color:rgba(220,252,231,.95);font-size:13px;line-height:1.5;}
.btn.accent{background:rgba(56,189,248,.12);border-color:rgba(56,189,248,.28);color:rgba(186,230,253,.98);}
.btn.accent:hover{background:rgba(56,189,248,.18);}
@media (max-width:700px){.vshMetaDot{display:none}.resultHeroPanel{padding:12px}.vshMetaLine{gap:4px;flex-direction:column;align-items:flex-start;}}


/* v17: stav vozidla, VHV návrh, rozpätie hodnoty */
.vehicleState.excellent{background:rgba(34,197,94,.14);color:rgba(187,247,208,.98);border-color:rgba(34,197,94,.34);}
.vehicleState.good{background:rgba(56,189,248,.14);color:rgba(191,219,254,.98);border-color:rgba(56,189,248,.32);}
.vehicleState.mid{background:rgba(148,163,184,.16);color:rgba(226,232,240,.96);border-color:rgba(148,163,184,.28);}
.vehicleState.soft{background:rgba(245,158,11,.14);color:rgba(253,230,138,.98);border-color:rgba(245,158,11,.30);}
.vehicleState.attn{background:rgba(239,68,68,.14);color:rgba(254,202,202,.98);border-color:rgba(239,68,68,.28);}

.valueRange{margin-top:10px;padding:10px 12px;border-radius:14px;border:1px solid rgba(56,189,248,.22);background:rgba(56,189,248,.08);width:max-content;max-width:100%;}
.valueRangeLabel{font-size:11px;text-transform:uppercase;letter-spacing:.05em;color:rgba(191,219,254,.9);margin-bottom:3px;}
.valueRangeValue{font-size:14px;font-weight:900;color:#e0f2fe;}

.vhvSuggest{margin-top:8px;display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding:9px 10px;border-radius:12px;border:1px dashed rgba(56,189,248,.32);background:rgba(56,189,248,.06);}
.vhvSuggestText{font-size:12.5px;color:rgba(191,219,254,.96);}
.btn.small{padding:7px 10px;font-size:12px;border-radius:10px;}

.pRangeInline{margin-top:6px;font-size:12px;color:rgba(226,232,240,.9);}
.pRangeInline b{color:#fff;}


/* WEB verzia – skryť Electron lištu */
.titlebar{display:none !important;}

/* Detail výpočtu pri výsledku */
.resultHeroPanel{ position:relative; }
.resultDetailBtn{ margin-top:10px !important; align-self:flex-start; }

/* Graf vývoja hodnoty */
.ageChartBox{
  margin-top:14px;
  border:1px solid rgba(255,255,255,.10);
  border-radius:16px;
  padding:14px 14px 10px;
  background: rgba(255,255,255,.02);
}
.ageChartTitle{
  font-size:13px;
  font-weight:800;
  color:var(--text);
  margin-bottom:10px;
}
.ageChartWrap svg{ width:100%; height:auto; display:block; }
.ageChartMeta{ display:flex; gap:10px; flex-wrap:wrap; margin-top:8px; }
.ageChartPill{
  display:inline-flex; align-items:center; gap:8px; padding:6px 10px; border-radius:999px;
  border:1px solid var(--line); background: rgba(255,255,255,.03); color:var(--muted); font-size:12px;
}
.ageChartPill .dot{ width:9px; height:9px; border-radius:99px; display:inline-block; }
.ageChartPill .dot.line{ background: rgba(96,165,250,.9); }
.ageChartPill .dot.point{ background: rgba(34,197,94,.95); }


/* v20 fixes */
.resultHeroPanel{display:flex;flex-direction:column;align-items:flex-start;}
.resultDetailBtn{display:block !important; width:max-content; margin-top:12px !important; align-self:flex-start !important;}
.valueRange{width:100%; max-width:420px;}
.ageChartBox{width:100%;}

.resultDetailBtn{display:block !important;margin-top:12px !important;align-self:flex-start !important;}

/* optional VIN field */
.vinToggleBar{width:100%;max-width:1120px;margin:0 auto 10px;padding:0 14px}
@media (min-width:1024px){.vinToggleBar{padding-left:0;padding-right:0}}
.vinWrap{width:100%;max-width:1120px;margin:0 auto 14px;padding:0 14px}
@media (min-width:1024px){.vinWrap{padding-left:0;padding-right:0}}
.vinField{border:1px solid var(--line);background:rgba(255,255,255,.02);border-radius:14px;padding:12px 14px}
.marketPositionBox{border:1px solid var(--line);background:rgba(255,255,255,.02);border-radius:14px;padding:12px}
.marketPosTitle{font-size:12px;color:var(--muted);margin-bottom:8px}
.marketPosScale{display:grid;grid-template-columns:auto 1fr auto;gap:10px;align-items:center}
.marketPosMin,.marketPosMax{font-size:12px;color:var(--muted)}
.marketPosTrack{position:relative;height:8px;background:rgba(255,255,255,.08);border:1px solid var(--line);border-radius:999px}
.marketPosDot{position:absolute;top:50%;transform:translate(-50%,-50%);width:14px;height:14px;border-radius:50%;background:var(--accent2);border:2px solid #fff;box-shadow:0 0 0 3px rgba(34,197,94,.18)}
.marketPosValue{text-align:center;font-size:13px;font-weight:800;margin-top:8px}


/* v36 market actions + VIN helper */
.marketActionsGrid{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:10px;
  margin-top: 2px;
}
.marketActionsGrid .btn{
  width:100%;
  min-height:58px;
  font-size:16px;
  border-radius:18px;
}
@media (max-width: 680px){
  .marketActionsGrid{
    grid-template-columns:1fr 1fr;
  }
}
@media (max-width: 420px){
  .marketActionsGrid .btn{
    min-height:54px;
    font-size:15px;
    padding:10px 12px;
  }
}
.vinInfo{
  margin-top:8px;
  font-size:12px;
  line-height:1.35;
}
.vinInfo.ok{
  color: rgba(34,197,94,.95);
}
.vinInfo.warn{
  color: rgba(251,191,36,.95);
}

.vinSummary{margin-top:8px;border:1px solid rgba(148,163,184,.22);background:rgba(15,23,42,.34);border-radius:14px;padding:10px 12px}
.vinSummaryTitle{font-size:11px;font-weight:800;letter-spacing:.03em;text-transform:uppercase;color:rgba(226,232,240,.88);margin-bottom:6px}
.vinSummaryGrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;align-items:start}
.vinSummaryBlock{border:1px solid rgba(148,163,184,.14);border-radius:12px;padding:8px 10px;background:rgba(255,255,255,.025);align-self:start}
.vinSummaryBlock h4{margin:0 0 5px;font-size:11px;color:rgba(148,163,184,.92)}
.vinSummaryList{display:flex;flex-wrap:wrap;gap:5px}
.vinTag{display:inline-flex;align-items:center;padding:5px 9px;border-radius:999px;font-size:11px;font-weight:700;border:1px solid transparent;background:rgba(148,163,184,.12);color:#e5e7eb;line-height:1.2}
.vinTag.vin{background:rgba(59,130,246,.14);border-color:rgba(96,165,250,.30);color:#dbeafe}
.vinTag.auto{background:rgba(34,197,94,.11);border-color:rgba(74,222,128,.30);color:#dcfce7}
.vinTag.manual{background:rgba(148,163,184,.12);border-color:rgba(148,163,184,.22);color:#e5e7eb}
.vinSummaryNote{margin-top:8px;font-size:11px;line-height:1.35;color:rgba(251,191,36,.96)}
@media (max-width:1100px){.vinSummaryGrid{grid-template-columns:1fr 1fr}}
@media (max-width:860px){.vinSummaryGrid{grid-template-columns:1fr}}

/* v37 market actions placement */
.marketActionsGrid{
  margin: 2px 0 14px 0;
}
.marketActionsGrid .btn{
  min-height: 58px;
}


/* v38 panel scroll + market deviation */
.grid{
  align-items:start;
}
.panelScroll{
  max-height: calc(100vh - 170px);
  overflow-y: auto;
  padding-right: 6px;
}
.panelScroll::-webkit-scrollbar{
  width: 8px;
}
.panelScroll::-webkit-scrollbar-thumb{
  background: rgba(255,255,255,.16);
  border-radius: 999px;
}
.panelScroll::-webkit-scrollbar-track{
  background: rgba(255,255,255,.04);
  border-radius: 999px;
}
.panelInputs .cardBody,
.panelResult .resultBox{
  padding-bottom: 10px;
}
.marketDeviation{
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid rgba(255,255,255,.08);
}
.marketDeviationTitle{
  font-size: 12px;
  color: var(--muted);
  margin-bottom: 8px;
}
.marketDeviationLines{
  display:flex;
  flex-direction:column;
  gap:6px;
}
.devLine{
  font-size: 14px;
  color: rgba(255,255,255,.6);
  font-weight: 700;
}
.devLine.active{
  color: #fff;
}
@media (max-width: 980px){
  .panelScroll{
    max-height: none;
    overflow: visible;
    padding-right: 0;
  }
}


/* v39 print switch */
body.okc-printing #app{
  display:none !important;
}
body.okc-printing #printArea{
  display:block !important;
  background:#fff !important;
}

/* v16 layout + modes */
.modeBar{
  flex: 1 1 100%;
  min-width: 280px;
  padding: 12px 14px;
  border:1px solid rgba(96,165,250,.18);
  border-radius: 18px;
  background: linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.018));
}
.modeBarLabel{font-size:12px;font-weight:800;letter-spacing:.05em;text-transform:uppercase;color:rgba(148,163,184,.92);margin-bottom:8px}
.modeBtns{display:flex;gap:8px;flex-wrap:wrap}
.modeBtn{
  border:1px solid rgba(148,163,184,.28);
  background: rgba(15,23,42,.46);
  color: var(--text);
  border-radius: 999px;
  padding: 10px 14px;
  font-weight: 700;
  cursor: pointer;
}
.modeBtn.active{border-color: rgba(96,165,250,.75); box-shadow: 0 0 0 1px rgba(96,165,250,.25) inset; background: rgba(30,41,59,.76)}
.modeBarSub{margin-top:8px;color:var(--muted);font-size:13px;line-height:1.35}
.layoutFlow{display:block}
.grid{grid-template-columns: 1fr !important; gap: 18px;}
.grid > section.card, .grid > aside.card{margin-bottom:0}
.panelScroll{max-height:none;overflow:visible;padding-right:0}
.panelInputs,.panelResult{width:100%}
.panelResult{order:2}
.vinToggleBar{margin-top:8px}
.vinToggleBar .btn{width:100%;justify-content:flex-start}
.vinWrap{margin-top:10px;margin-bottom:16px}
.vinInputRow{display:flex;gap:10px;align-items:center}
.vinInputRow input{flex:1 1 auto}
.vinInputRow .btn{flex:0 0 auto}
.vinSummary{padding:8px 10px;border-radius:12px}
.vinSummaryGrid{gap:8px}
.vinSummaryBlock{padding:7px 9px}
.vinTag{padding:6px 10px;font-size:12px}
.cardHeader{padding:16px 18px}
.cardHeader h2{font-size:18px}
.resultBox{padding:16px 18px 18px}
.resultHeroPanel{max-width:100%}
.marketWrap{margin-top:18px}
.marketActionsGrid{grid-template-columns: repeat(4, minmax(0,1fr));}
@media (max-width:1100px){.marketActionsGrid{grid-template-columns:1fr 1fr}}
@media (max-width:720px){
  .vinInputRow{flex-direction:column;align-items:stretch}
  .marketActionsGrid{grid-template-columns:1fr}
}
.autoModeHide{display:block !important}
body.mode-auto .autoModeHide{display:block !important}
body.mode-basic .expertOnly{display:none !important}
body.mode-auto .modeAutoOnlyHint{display:block}
body.mode-basic .modeAutoOnlyHint, body.mode-expert .modeAutoOnlyHint{display:none}
.modeAutoOnlyHint{display:none;color:var(--muted);font-size:13px;margin-top:6px}


/* Auto režim: základné polia ostávajú editovateľné */
.modeAutoEditable{display:block !important}
body.mode-auto .modeAutoOnly{display:block !important}
body.mode-basic .modeAutoOnly, body.mode-expert .modeAutoOnly{display:none !important}


/* v18 select mobile fix */
select{ position:relative; z-index:2; pointer-events:auto; }
.formGrid > div, .field{ position:relative; z-index:1; }


/* v19 polish */
.card{
  box-shadow: 0 16px 42px rgba(2, 8, 23, .18);
}
.cardHeader{
  background: linear-gradient(90deg, rgba(255,255,255,.03), rgba(56,189,248,.04));
}
.resultBox{
  background: radial-gradient(circle at top left, rgba(56,189,248,.08), transparent 40%), rgba(255,255,255,.02);
  border-radius: 18px;
}
.warn{
  margin-top: 10px;
  box-shadow: inset 0 0 0 1px rgba(251,191,36,.10);
}
@media (max-width: 860px){
  .card{ box-shadow: 0 12px 28px rgba(2,8,23,.14); }
  .cardHeader{ padding: 14px 16px; }
}


/* v21 auto inputs collapse */
.cardHeaderActions{display:flex;align-items:center;gap:12px;justify-content:flex-end;flex-wrap:wrap}
.inputsToggleBtn{padding:8px 12px;border-radius:999px;font-size:13px;font-weight:700}
.vinAutoHint{margin-top:6px}
body.mode-auto .vinAutoHint{display:block;color:rgba(148,163,184,.95)}
.inputsCardBodyCollapsed{display:none}
.inputsCard.autoCollapsed #inputsCardBody{display:none !important}
.mode-auto .inputsCard.autoCollapsed #inputsCardBody{display:none !important}
@media (max-width:720px){.cardHeaderActions{width:100%;justify-content:space-between}.inputsToggleBtn{padding:8px 10px;font-size:12px}}