/* ===== DataDent – vizuální upgrade (vše pod html.up, obsah beze změny) ===== */

/* přepínač porovnání */
.cmp-toggle{position:fixed;left:max(16px,env(safe-area-inset-left,0px));bottom:calc(16px + env(safe-area-inset-bottom,0px));z-index:9999;display:flex;gap:4px;padding:4px;border-radius:999px;background:rgba(48,53,58,.92);backdrop-filter:blur(10px);box-shadow:0 10px 30px -10px rgba(0,0,0,.4);font:600 13px/1 var(--f-body)}
.cmp-toggle button{border:0;background:transparent;color:rgba(255,255,255,.7);padding:9px 14px;border-radius:999px;cursor:pointer;font:inherit}
.cmp-toggle button[aria-pressed=true]{background:#fff;color:var(--ink)}

/* 1 · průběh scrollování */
.up-progress{position:fixed;top:0;left:0;right:0;height:2px;z-index:200;pointer-events:none;transform-origin:left;transform:scaleX(var(--sp,0));background:linear-gradient(90deg,var(--violet),var(--violet-2),var(--peri));display:none}
.up .up-progress{display:block}

/* 2 · rytmus sekcí – méně prázdna */
.up .section:not(#jak){padding-block:clamp(48px,7vw,96px)}

/* 4 · spotlight pod kurzorem na kartách */
.up :is(.mod,.seg,.lib,.rm,.sstat,.study,.feat){position:relative;isolation:isolate}
.up :is(.mod,.seg,.lib,.rm,.sstat,.study,.feat)::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:-1;opacity:0;transition:opacity .35s var(--ease);
  background:radial-gradient(320px circle at var(--mx,50%) var(--my,50%),rgba(3,178,181,.11),rgba(24,137,139,.06) 40%,transparent 65%)}
.up :is(.mod,.seg,.lib,.rm,.sstat,.study,.feat):hover::after{opacity:1}
.up :is(.seg,.lib){transition:transform .35s var(--ease),box-shadow .35s var(--ease)}
.up :is(.seg,.lib):hover{transform:translateY(-3px);box-shadow:var(--shadow-md),0 0 0 1px #c3e8e9 inset}

/* 6 · Vychytávky – 10 položek ve 2 plných řadách */
@media (min-width:1180px){.up .gad-grid{grid-template-columns:repeat(5,minmax(0,1fr));gap:14px 24px}}
.up .gad{transition:transform .3s var(--ease)}
.up .gad:hover{transform:translateX(3px)}
.up .gad:hover svg{color:var(--violet)}

/* 7 · Moduly – plynulý nástup po filtrování */
@keyframes upModIn{from{opacity:0;transform:translateY(10px) scale(.98)}to{opacity:1;transform:none}}
.up .mod{animation:upModIn .45s var(--ease) both}
.up .mod:hover .mi{background:var(--violet);color:#fff;transition:background .25s,color .25s}

/* 8 · Pro koho – role filtrují karty */
.up .role{cursor:pointer;transition:background .2s,color .2s,box-shadow .2s;border:0;font:inherit;font-size:14px;font-weight:500}
.up .role:hover{background:var(--lav)}
.up .role[aria-pressed=true]{background:var(--violet);color:#fff;box-shadow:0 8px 20px -8px rgba(3,178,181,.7)}
.up .seg{transition:opacity .35s var(--ease),transform .35s var(--ease),box-shadow .35s var(--ease)}
.up .seg-grid.filtering .seg{opacity:.38;transform:scale(.98)}
.up .seg-grid.filtering .seg.match{opacity:1;transform:translateY(-4px);box-shadow:var(--shadow-lg),0 0 0 2px var(--violet) inset}

/* 9 · Knihovna – 3 × 2 bez osiřelé karty */
@media (min-width:720px){.up .lib-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:1080px){.up .lib-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}

/* 10 · Roadmapa jako časová osa */
@media (min-width:900px){
  .up .road{padding-top:34px;grid-template-columns:repeat(4,minmax(0,1fr))}
  .up .road::before{content:"";position:absolute;top:10px;left:22px;right:22px;height:2px;border-radius:2px;transform:translateY(-4px);background:linear-gradient(90deg,var(--violet) 0 18%,var(--line) 18% 100%)}
  .up .rm .yr::before{position:absolute;top:-30px;left:22px}
  .up .rm .yr{padding-left:0}
}
.up .rm.now .yr::before{animation:upPulse 2.2s ease-out infinite}
@keyframes upPulse{0%{box-shadow:0 0 0 0 rgba(3,178,181,.45)}70%{box-shadow:0 0 0 12px rgba(3,178,181,0)}100%{box-shadow:0 0 0 0 rgba(3,178,181,0)}}
.up .rm .prog i{width:0;transition:width 1.6s var(--ease) .2s}
.up .road.in .rm .prog i{width:70%}

/* 11 · FAQ – plynulé rozbalení */
.up .qa .ans{overflow:hidden}
.up .qa summary{transition:color .2s}
.up .qa summary:hover{color:var(--violet)}

@media (prefers-reduced-motion:reduce){
  .up *{animation:none!important;transition:none!important}
  .up .rm .prog i{width:70%}
}

/* 12 · Úspora – rozvržení „Pod sebou“ + karta „Jedna karta, dvě kolony“ (v3) */
.us-v3{display:grid;gap:28px;grid-template-columns:minmax(0,1fr)!important}
.us-v3>*{grid-column:1/-1;min-width:0}
.us-v3 .save-stats{margin-top:0;grid-template-columns:repeat(4,minmax(0,1fr))}
.us-v3 .sstat b{color:var(--violet);font-family:var(--f-mono);font-weight:500}
.us-v3 .studies{margin-top:0;grid-template-columns:repeat(3,minmax(0,1fr))}
.us-v3 .study{background:#fff;box-shadow:0 0 0 1px var(--line) inset}
.us-v3 .study b{font-family:var(--f-mono);font-weight:500;font-size:1.6rem}
.us-v3 .method{margin-top:0;font-size:13px}
@media (max-width:900px){.us-v3 .save-stats{grid-template-columns:repeat(2,minmax(0,1fr))}.us-v3 .studies{grid-template-columns:minmax(0,1fr)}}
.c-card{background:#fff;border-radius:22px;box-shadow:0 1px 2px rgba(36,40,44,.04),0 14px 34px -18px rgba(36,40,44,.22);display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);overflow:hidden;text-align:left}
.c-col{padding:24px 24px 22px;display:grid;gap:12px;align-content:start}
.c-col.d{background:linear-gradient(180deg,#f1fcfc,#fff 60%);border-left:1px solid var(--line)}
.c-h{display:flex;justify-content:space-between;align-items:center;gap:10px}
.c-h b{font-size:15.5px;letter-spacing:-.01em}
.c-pill{font-family:var(--f-mono);font-size:15px;font-weight:500;padding:5px 11px;border-radius:999px;white-space:nowrap}
.c-col.p .c-pill{color:var(--bad);background:var(--bad-bg)}
.c-col.d .c-pill{color:#019d9f;background:var(--mint)}
.c-ul{list-style:none;margin:0;padding:0;display:grid;gap:4px}
.c-ul li{display:grid;grid-template-columns:18px minmax(0,1fr) auto;gap:10px;align-items:center;padding:8px 10px;border-radius:10px;font-size:14px}
.c-ul li:nth-child(odd){background:var(--sand)}
.c-col.p li svg{color:var(--bad)}
.c-col.d li svg{color:var(--violet)}
.c-ul .t{font-family:var(--f-mono);font-size:12px;color:var(--muted);white-space:nowrap}
.c-ok{font-size:13.5px;font-weight:600;color:var(--ok)}
@media (max-width:700px){.c-card{grid-template-columns:minmax(0,1fr)}.c-col.d{border-left:0;border-top:1px solid var(--line)}}

/* 13 · Patička – spodní lišta „Dvě řady“ (v4) */
.dd-bottom.dd-bottom2{display:block;padding:0;gap:0;background:rgba(255,255,255,.55)}
.dd-bottom2 nav{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:0;border-bottom:1px solid var(--dd-line)}
.dd-bottom2 nav .dd-lnk{display:block;padding:15px 16px;text-align:center;font-size:13px;color:var(--dd-muted);transition:background .2s,color .2s}
.dd-bottom2 nav .dd-lnk+.dd-lnk{border-left:1px solid var(--dd-line)}
.dd-bottom2 nav .dd-lnk:hover{background:#fff;color:var(--dd-teal)}
.dd-bottom2 .dd-row{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:8px 20px;padding-block:14px 18px;font-size:12.5px;color:var(--dd-muted)}
.dd-bottom2 .dd-brand{display:flex;align-items:center;gap:10px;color:var(--dd-ink);font-weight:500}
.dd-bottom2 .dd-brand i{width:8px;height:8px;border-radius:50%;background:var(--dd-teal);box-shadow:0 0 0 4px var(--dd-teal-soft)}
.dd-bottom2 .dd-row .dd-lnk{color:var(--dd-ink);font-weight:500}
.dd-bottom2 .dd-row .dd-lnk:hover{color:var(--dd-teal)}
@media (max-width:820px){
  .dd-bottom2 nav{grid-template-columns:repeat(2,minmax(0,1fr))}
  .dd-bottom2 nav .dd-lnk{text-align:left;border-left:0!important;border-top:1px solid var(--dd-line)}
  .dd-bottom2 nav .dd-lnk:nth-child(-n+2){border-top:0}
  .dd-bottom2 nav .dd-lnk:nth-child(even){border-left:1px solid var(--dd-line)!important}
  .dd-bottom2 nav .dd-lnk:last-child{grid-column:1/-1}
}
@media (max-width:480px){.dd-bottom2 .dd-row{flex-direction:column;align-items:flex-start}}
@media (min-width:481px){.dd-bottom2 .dd-row{padding-right:max(104px,env(safe-area-inset-right,0px))}}

/* 14 · Mobilní menu – varianta F „Velké písmo + druhá úroveň“ (v7) */
.nav-shell .nav{position:relative;z-index:2}
#mmenu.mm-f{position:fixed;inset:0;z-index:1;margin:0;max-width:none;max-height:none;border-radius:0;box-shadow:none;padding:calc(env(safe-area-inset-top,0px) + 92px) 0 0;
  background:#fff;backdrop-filter:none;display:flex;flex-direction:column;gap:0;overflow:hidden;transform:none;opacity:0;visibility:hidden;transition:opacity .28s var(--ease),visibility .28s}
#mmenu.mm-f.open{opacity:1;visibility:visible}
#mmenu.mm-f[hidden]{display:none!important}
#mmenu.mm-f a::after{content:none}
#mmenu .mf-stage{position:relative;flex:1;min-height:0;overflow:hidden}
#mmenu .mf-lv{position:absolute;inset:0;display:flex;flex-direction:column;transition:transform .42s var(--ease),opacity .3s var(--ease)}
#mmenu .mf-lv2{transform:translateX(100%);visibility:hidden}
#mmenu.deep .mf-lv1{transform:translateX(-25%);opacity:0;pointer-events:none;visibility:hidden}
#mmenu.deep .mf-lv2{transform:none;visibility:visible}
#mmenu .mf-lv1,#mmenu .mf-lv2{transition:transform .42s var(--ease),opacity .3s var(--ease),visibility 0s linear .42s}
#mmenu.deep .mf-lv2,#mmenu:not(.deep) .mf-lv1{transition-delay:0s}
#mmenu .mf-body{flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;padding:4px max(20px,env(safe-area-inset-right,0px)) 16px max(20px,env(safe-area-inset-left,0px))}
#mmenu .mf-r{display:flex;align-items:center;gap:12px;width:100%;min-height:62px;padding:6px 2px;border:0;border-bottom:1px solid var(--line);border-radius:0;background:none;
  font:600 24px/1.15 var(--f-display);letter-spacing:-.03em;color:var(--ink);text-align:left;cursor:pointer;transition:color .2s}
#mmenu .mf-r:hover,#mmenu .mf-r:active{color:var(--violet);background:none}
#mmenu .mf-go{margin-left:auto;width:34px;height:34px;border-radius:50%;background:var(--sand);display:grid;place-items:center;color:var(--ink-2);flex:none;transition:background .2s,color .2s}
#mmenu .mf-r:hover .mf-go,#mmenu .mf-r:active .mf-go{background:var(--mint);color:var(--violet)}
#mmenu .mf-cnt{font-family:var(--f-mono);font-size:12px;font-weight:500;letter-spacing:0;padding:2px 8px;border-radius:999px;background:var(--sand);color:var(--muted)}
#mmenu .mf-head{flex:none;display:grid;gap:6px;padding:0 max(20px,env(safe-area-inset-right,0px)) 12px max(20px,env(safe-area-inset-left,0px));border-bottom:1px solid var(--line)}
#mmenu .mf-back{justify-self:start;display:inline-flex;align-items:center;gap:6px;min-height:44px;padding:0 8px 0 0;border:0;background:none;font:600 15px var(--f-body);color:var(--violet);cursor:pointer}
#mmenu .mf-ttl{margin:0;display:flex;align-items:baseline;gap:10px;font:600 32px/1.1 var(--f-display);letter-spacing:-.04em;color:var(--ink)}
#mmenu .mf-seg{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:3px;padding:3px;margin-top:6px;border-radius:13px;background:var(--sand)}
#mmenu .mf-tab{min-height:44px;border:0;border-radius:10px;background:none;display:flex;align-items:center;justify-content:center;gap:6px;font:500 14.5px var(--f-body);color:var(--ink);cursor:pointer;transition:background .2s,color .2s,box-shadow .2s}
#mmenu .mf-tab small{font-family:var(--f-mono);font-size:10.5px;color:var(--muted)}
#mmenu .mf-tab[aria-pressed=true]{background:#fff;color:#019d9f;box-shadow:0 2px 8px -3px rgba(36,40,44,.28)}
#mmenu .mf-mods{list-style:none;margin:0;padding:6px 0 0;display:grid;gap:2px}
#mmenu .mf-mods[hidden]{display:none}
#mmenu .mf-m{display:flex;align-items:center;justify-content:flex-start;gap:12px;min-height:54px;padding:6px 8px;border-radius:14px;font-size:16px;font-weight:500;color:var(--ink)}
#mmenu .mf-m:hover,#mmenu .mf-m:active{background:var(--sand)}
#mmenu .mf-ic{width:36px;height:36px;border-radius:11px;display:grid;place-items:center;background:var(--lav);color:var(--violet);flex:none}
#mmenu .mf-ft{flex:none;display:grid;gap:10px;padding:12px max(20px,env(safe-area-inset-right,0px)) calc(14px + env(safe-area-inset-bottom,0px)) max(20px,env(safe-area-inset-left,0px));border-top:1px solid var(--line);background:#fff}
#mmenu .mf-cta{display:grid;grid-template-columns:auto 1fr;gap:8px}
#mmenu .mf-cta a{height:52px;padding:0 22px;border-radius:999px;display:flex;align-items:center;justify-content:center;font-size:15.5px;font-weight:600;white-space:nowrap}
#mmenu .mf-log{box-shadow:0 0 0 1px var(--line) inset;color:var(--ink);background:#fff}
#mmenu .mf-reg{background:var(--violet);color:#fff;box-shadow:0 10px 24px -10px rgba(3,178,181,.8)}
#mmenu .mf-reg:hover{background:#019d9f}
#mmenu .mf-note{margin:0;display:flex;justify-content:center;align-items:center;gap:8px;font-size:12px;color:var(--muted)}
#mmenu .mf-note::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--violet);box-shadow:0 0 0 3px var(--mint)}
@media (max-width:359px){#mmenu .mf-cta{grid-template-columns:1fr}#mmenu .mf-r{font-size:21px}}
@media (prefers-reduced-motion:reduce){#mmenu.mm-f,#mmenu .mf-lv{transition:none!important}}