:root{
  --bg:#eef4ff;
  --paper:#ffffff;
  --ink:#0a1022;
  --muted:#5a6172;
  --line:#dde5f4;

  --brand:#0A84FF;
  --brand2:#22C3B5;
  --warm:#FFB85C;

  --radius:16px;
  --radius-lg:20px;
  --shadow:0 18px 48px rgba(14,28,64,.12);
  --container:1100px;

  --glass-bg: rgba(255,255,255,.65);
  --glass-brd: rgba(255,255,255,.35);
  --glass-blur: 10px;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion: reduce){ html{scroll-behavior:auto} }
body{
  margin:0;
  color:var(--ink);
  background:
    radial-gradient(1200px 560px at 88% -12%, #e3f0ff 0%, transparent 62%),
    radial-gradient(940px 520px at -12% 24%, #e0fff6 0%, transparent 60%),
    var(--bg);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif;
  line-height:1.6;
  padding-bottom:90px; /* miesto pre footer */
}

/* HERO */
.hero{position:relative; min-height:92vh; display:grid; place-items:center; overflow:hidden}
.hero-inner{position:relative; z-index:2; text-align:center; max-width:940px; padding:90px 20px 50px}
.hero h1{margin:0 0 6px; font-size:clamp(44px, 9vw, 110px); line-height:1.02; font-weight:800; letter-spacing:-.02em}
.hero .sub{margin:0; font-weight:800; font-size:clamp(16px, 3.2vw, 22px); color:transparent;
  background:linear-gradient(90deg, var(--brand), var(--brand2));
  -webkit-background-clip:text; background-clip:text}
.hero .lead{color:#394055; max-width:720px; margin:8px auto 16px}

/* Buttons */
.btn{
  display:inline-block; padding:12px 18px; border-radius:14px; border:1px solid var(--line);
  background:#fff; color:var(--ink); text-decoration:none; font-weight:600;
  transition:transform .06s ease, box-shadow .25s ease, background .2s ease, filter .25s ease;
}
.btn.primary{
  background:linear-gradient(90deg, var(--brand), var(--brand2)); color:#fff; border-color:transparent;
  box-shadow:0 14px 38px rgba(10,132,255,.28);
}
.btn.primary:hover{
  transform:translateY(-1px) scale(1.02);
  filter:saturate(1.1);
  box-shadow:0 18px 50px rgba(10,132,255,.38), 0 0 0 6px rgba(10,132,255,.12);
}
.btn:active{transform:translateY(0) scale(0.995)}
.btn.ghost{background:#fff; border:1px solid var(--line)}
.btn.danger{border-color:#ffd3d3; background:#fff5f5}

/* Hover animácia pre tlačidlá tabuľky */
.tableControls .btn{
  transition: transform .08s ease, box-shadow .2s ease, background .2s ease, border-color .2s ease, color .2s ease;
}
.tableControls .btn:hover{
  transform: translateY(-1px);
  box-shadow: 0 10px 24px rgba(10,132,255,.12);
  border-color: #cfe3ff;
  background:#f9fbff;
}
.tableControls .btn.danger:hover{
  box-shadow: 0 10px 24px rgba(255,80,80,.12);
  border-color:#ffbcbc;
  background:#fff1f1;
}

/* Pozadie */
.bg{position:absolute; inset:0; z-index:1}
.glow{
  position:absolute; inset:-18% -18% -18% -18%;
  border-radius:40%; filter:blur(26px); opacity:.98; will-change:transform; transform:translateZ(0);
}
.g1{background:
  radial-gradient(1200px 520px at 12% 18%, #c6dbff 0%, transparent 62%),
  radial-gradient(1000px 500px at 70% 60%, #bfffee 0%, transparent 60%)}
.g2{background:
  radial-gradient(1080px 520px at 86% 12%, #ffd9a3 0%, transparent 62%),
  radial-gradient(920px 460px at 10% 86%, #d5e3ff 0%, transparent 60%)}
.g3{background:
  radial-gradient(1400px 640px at 50% 110%, #eaf6ff 0%, transparent 62%)}
.grain{
  position:absolute; inset:0;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160' viewBox='0 0 160 160'%3E%3Cfilter id='n'%3E%3CfeTurbulence baseFrequency='0.65' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3CfeComponentTransfer%3E%3CfeFuncA type='table' tableValues='0 0 0 0 .12 0'/%3E%3C/feComponentTransfer%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.05'/%3E%3C/svg%3E");
  mix-blend-mode:multiply; pointer-events:none;
}

/* CONTAINER */
.wrap{max-width:var(--container); margin:40px auto; padding:0 18px}

/* Tabs panel – SLIM */
.panel.tabs.slim{
  background:#fff; border:1px solid var(--line); border-radius:var(--radius-lg); box-shadow:var(--shadow);
  padding:10px 12px; margin-bottom:14px;
}
.tablist{display:flex; gap:8px; flex-wrap:wrap; justify-content:center}
.tab{
  border:1px solid var(--line); background:#fff; color:#1c2440; padding:8px 12px; border-radius:12px; cursor:pointer;
  font-weight:600; transition:background .2s ease, transform .06s ease, box-shadow .2s ease;
}
.tab:hover{background:#f6f9ff}
.tab.active{
  background:linear-gradient(90deg, var(--brand), var(--brand2)); color:#fff; border-color:transparent;
  box-shadow:0 6px 22px rgba(10,132,255,.25)
}

/* Series pills */
.seriesPills{
  margin-top:8px;
  display:flex; gap:8px; justify-content:center; flex-wrap:wrap;
}
.pill{
  display:inline-flex; align-items:center; gap:8px;
  border:1px solid var(--line); background:#fff; color:#1f2937; padding:6px 12px; border-radius:999px;
  cursor:pointer; font-weight:600;
  transition:background .18s ease, transform .06s ease, box-shadow .2s ease, border-color .2s ease;
}
.pill .box{
  width:16px; height:16px; border-radius:4px; border:2px solid #d1d5db; background:#fff;
  position:relative; box-shadow:inset 0 0 0 1px rgba(0,0,0,.02);
}
.pill.on{
  border-color: rgba(10,132,255,.35);
  box-shadow:0 6px 18px rgba(10,132,255,.18);
}
.pill.on .box{
  border-color:transparent;
  background:linear-gradient(135deg, var(--brand), var(--brand2));
}
.pill.on .box::after{
  content:""; position:absolute; inset:2px;
  background:#fff; clip-path: polygon(20% 55%, 40% 75%, 82% 28%, 76% 22%, 40% 65%, 26% 50%);
}

/* Pie year control */
.pieYearCtrl{
  display:none;
  margin-top:8px;
  gap:10px;
  grid-template-columns:auto 1fr auto;
  align-items:center;
  justify-content:center;
}
.pieYearCtrl label{font-size:13px; color:#6b7285}
.pieYearCtrl output{min-width:40px; text-align:right; color:#5a6172}

/* VIZ */
.viz .canvas{
  position:relative; background:#fff; border:1px solid var(--line); border-radius:var(--radius-lg); box-shadow:var(--shadow);
  padding:10px; margin-bottom:10px;
}
svg#chart{width:100%; height:auto; display:block}

/* SVG štýly */
.axes .axis{stroke:#c7d0e2; stroke-width:2}
.axes .label{fill:#5c6374; font-size:12px}
.grid{stroke:#eef2f6; stroke-width:1}
.legend .label{fill:#5c6374; font-size:12px}
text.big{fill:#2b3242; font-size:28px; font-weight:800}
.dots circle{filter: drop-shadow(0 2px 4px rgba(0,0,0,.1))}

/* Tooltip */
.tip{
  position:absolute; pointer-events:none; padding:8px 10px; background:#0b1126; color:#fff;
  border-radius:10px; font-size:13px; box-shadow:0 12px 30px rgba(16,32,72,.24);
  transition:opacity .16s ease, transform .16s ease; opacity:0;
}

.muted{color:var(--muted)}
.tiny{font-size:13px}

/* TABLE */
.tableSec{margin-top:18px}
.tableHeader{display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:8px; flex-wrap:wrap}
.tableHeader h2{margin:0}
.tableControls{display:flex; align-items:center; gap:12px; flex-wrap:wrap}
.badges{display:flex; gap:8px; flex-wrap:wrap}
.badge{
  background:#f0f6ff; border:1px solid #d8e6ff; color:#0e234a; padding:6px 8px; border-radius:999px; font-size:12px
}
.toggles{display:flex; gap:8px}

.tableWrap{
  background:#fff; border:1px solid var(--line); border-radius:var(--radius-lg); box-shadow:var(--shadow);
  overflow:auto; -webkit-overflow-scrolling:touch;
}
table{width:100%; border-collapse:collapse; font-size:15px}
th,td{padding:10px 12px; border-bottom:1px solid #eef2f6}
thead th{
  background:#f7f9fc; text-align:left; position:relative; line-height:1.4;
  padding-right:30px; /* miesto pre ikony */
}
thead th.sortable{cursor:pointer; user-select:none; transition:background .18s ease, color .18s ease, box-shadow .18s ease}
thead th.sortable:hover{
  background:#eef5ff;
  color:#0A84FF;
  box-shadow:inset 0 -2px 0 rgba(10,132,255,.25);
}
/* Hover „⇅“ – len keď nie je aktívne zoradenie */
thead th.sortable:not(.sortedAsc):not(.sortedDesc):hover::before{
  content:"⇅";
  position:absolute; right:10px; top:50%; transform:translateY(-50%);
  font-size:12px; color:#0A84FF; opacity:.9; line-height:1;
}
/* Aktívna šípka zoradenia – presne v pravom rohu, vždy rovnaké zarovnanie */
thead th.sortedAsc::after,
thead th.sortedDesc::after{
  content:""; position:absolute; right:10px; top:50%; transform:translateY(-50%);
  width:0; height:0; line-height:1;
  border-left:5px solid transparent; border-right:5px solid transparent;
}
thead th.sortedAsc::after{ border-bottom:7px solid #0A84FF; }
thead th.sortedDesc::after{ border-top:7px solid #0A84FF; }

tbody tr:hover{background:#fcfdff}

/* GLASSMORPHISM FOOTER – always visible */
.glassFooter{
  position:fixed; left:0; right:0; bottom:0; z-index:100;
  display:flex; justify-content:center; pointer-events:none;
}
.glassFooter .inner{
  margin:10px; padding:10px 14px; border-radius:14px; pointer-events:auto;
  background: var(--glass-bg);
  border: 1px solid var(--glass-brd);
  box-shadow: 0 8px 30px rgba(10,20,60,.18);
  -webkit-backdrop-filter: blur(var(--glass-blur));
  backdrop-filter: blur(var(--glass-blur));
}
.glassFooter small{color:#10224a; font-weight:600}

/* ======= RESPONZIVITA ======= */
@media (max-width: 980px){
  :root{ --container: 92vw; }
  .viz .canvas{ padding:8px }
  table{ font-size:14px }
}
@media (max-width: 740px){
  .hero-inner{ padding:64px 16px 40px }
  .hero h1{ font-size: clamp(36px, 10vw, 64px) }
  .tablist, .seriesPills{ justify-content:stretch }
  .tab, .pill{ width: calc(50% - 6px); justify-content:center; padding:10px 12px }
  .pieYearCtrl{ grid-template-columns:1fr auto; justify-content:stretch }
  .pieYearCtrl label{ display:none }
  .pieYearCtrl output{ justify-self:end }
  .tableHeader{ gap:8px }
  .tableControls .btn{ padding:10px 12px }
  .glassFooter .inner{ margin:8px; padding:8px 12px }
  body{ padding-bottom:96px } /* viac miesta pre footer */
}
@media (max-width: 480px){
  .tab, .pill{ width:100% }
  th,td{ padding:9px 10px }
  thead th{ padding-right:28px }
  .tiny{ font-size:12px }
}

/* Menší copyright na mobiloch */
@media (max-width: 740px){
  .glassFooter .inner{
    font-size: 12px;         /* menšie písmo */
    padding: 6px 10px;       /* kompaktnejší blok */
    border-radius: 10px;
  }
}
@media (max-width: 480px){
  .glassFooter .inner{
    font-size: 11px;         /* ešte o kúsok menšie na very small */
    padding: 5px 8px;
  }
}

.sourceNote{
  margin: 6px 2px 0;
  font-size: 12px;
  color: #5a6172;
}
@media (max-width: 480px){
  .sourceNote{ font-size: 11px; }
}

/* REDUCED MOTION */
@media (prefers-reduced-motion: reduce){
  .glow{transform:none !important}
  .tip{transition:none}
  .btn, .tableControls .btn{transition:none}
}