:root{
  color-scheme: light;
  --bg:#F8F9FE; --surface:#FFFFFF; --surface-2:#F5F7FD; --ink:#1A1D3A; --ink-2:#555B86; --line:#E3E7F5;
  --accent:#5145D8; --accent-ink:#FFFFFF; --accent-soft:#ECEAFF;
  --sun:#FFC83D; --sun-2:#F2AE00; --on-sun:#1A1D3A; --good:#1C8551; --good-soft:#E3F6EC; --warn:#B4530A;
  --focus:#5145D8; --sheep:#1A1D3A; --sheep-face:#3C4275; --scrim:rgba(8,10,26,.96);
  --w-veda:#3F6FD8; --w-vesmir:#7D4BC2; --w-historie:#B7681A; --w-priroda:#1F8F5A; --w-svet:#0B8C99; --w-pribehy:#D23F6E;
  --font:"Bricolage Grotesque", ui-rounded, "Segoe UI", system-ui, -apple-system, Roboto, sans-serif;
  --mono:ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  box-sizing:border-box;
  padding-top:env(safe-area-inset-top,0px); padding-bottom:env(safe-area-inset-bottom,0px);
}
/* Vždy světlý vzhled (i v tmavém režimu systému nebo claude.ai); večer jen jemně ztlumený */
:root, :root[data-theme]{ color-scheme: light; }
:root[data-mood="night"]{
  --bg:#F3F2FC; --surface-2:#F0EFFB; --line:#E0DEF3; --accent-soft:#EDEBFF;
}
*,*::before,*::after{box-sizing:inherit}
html{height:100%; scroll-padding-top:env(safe-area-inset-top,0px)}
body{margin:0; min-height:100%; background:var(--bg); color:var(--ink); font-family:var(--font); font-size:17px; line-height:1.45; -webkit-font-smoothing:antialiased}
button,input,select,textarea{font:inherit; color:inherit}
button{cursor:pointer}
:focus-visible{outline:3px solid var(--focus); outline-offset:3px; border-radius:12px}
h1,h2,h3{margin:0; line-height:1.12; font-weight:800; letter-spacing:-0.015em}
p{margin:0}
.wrap{max-width:1320px; margin:0 auto; padding:0 20px}
.sr{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap}
.muted{color:var(--ink-2)}

/* Header */
.hdr{background:var(--surface); border-bottom:2px solid var(--line)}
.hdr .wrap{display:flex; flex-wrap:wrap; align-items:center; gap:14px 24px; padding-top:14px; padding-bottom:14px}
.brand{display:flex; align-items:center; gap:14px; margin-right:auto; min-width:0; color:inherit; text-decoration:none; border-radius:20px}
.brand:hover .logo{transform:rotate(-6deg)}
.brand .logo{transition:transform .15s}
.brand:focus-visible{outline:3px solid var(--accent); outline-offset:4px}
.logo{position:relative; width:60px; height:60px; border-radius:18px; background:var(--sun); display:grid; place-items:center; flex:none; box-shadow:inset 0 -5px 0 var(--sun-2)}
.logo svg{width:46px}
.logo .bee{position:absolute; right:-8px; bottom:-8px; background:var(--accent); color:var(--accent-ink); font-size:11px; font-weight:800; border-radius:999px; padding:2px 7px; border:2px solid var(--surface)}
.brand h1{font-size:27px; display:flex; align-items:center; gap:10px; flex-wrap:wrap}
.brand .claim{font-size:13px; font-weight:700; background:var(--accent-soft); color:var(--accent); border-radius:999px; padding:3px 10px; letter-spacing:0}
.brand p{font-size:14px; color:var(--ink-2)}
.modes{display:flex; gap:4px; background:var(--surface-2); border:2px solid var(--line); border-radius:999px; padding:4px; overflow-x:auto; max-width:100%}
.modes button{flex:none; border:0; background:none; border-radius:999px; padding:9px 16px; font-weight:700; font-size:15px; color:var(--ink-2); white-space:nowrap}
.modes button.on{background:var(--accent); color:var(--accent-ink)}
.kids{display:flex; gap:8px; overflow-x:auto; max-width:100%}
.kid{flex:none; display:flex; align-items:center; gap:10px; border:2px solid var(--line); background:var(--surface); border-radius:18px; padding:7px 14px 7px 8px; text-align:left}
.kid.on{border-color:var(--sun-2); background:color-mix(in srgb, var(--sun) 16%, var(--surface))}
.kid .av{width:38px; height:38px; border-radius:50%; display:grid; place-items:center; font-size:22px; flex:none}
.kid b{display:block; font-size:15px; line-height:1.2}
.kid span.mb{font-size:13px; font-weight:800; color:var(--good)}
.kid.on span.mb{color:var(--warn)}
@media (max-width:640px){ .brand h1{font-size:22px} .logo{width:50px;height:50px} .logo svg{width:38px} .modes button{padding:8px 12px; font-size:14px} }

main{padding:22px 0 60px}
.card{background:var(--surface); border:2px solid var(--line); border-radius:28px; padding:24px}
@media (max-width:640px){ .card{padding:18px; border-radius:22px} }
.label{display:inline-flex; align-items:center; gap:6px; font-size:13px; font-weight:800; border-radius:999px; padding:4px 12px; background:var(--good-soft); color:var(--good)}
.label.sun{background:color-mix(in srgb, var(--sun) 28%, var(--surface)); color:var(--warn)}
.rowhead{display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:10px 16px}
.stack{display:grid; grid-template-columns:minmax(0,1fr); gap:22px}
.stack > *, .mainrow > *, .lowrow > *{min-width:0}

/* DJ */
.dj h2{font-size:clamp(24px,3.4vw,32px); margin-top:10px}
.dj .who{font-size:14px; color:var(--ink-2)}
.dj .who b{color:var(--ink)}
.energy{display:inline-flex; align-items:center; gap:8px; border:2px solid color-mix(in srgb, var(--sun) 60%, var(--line)); background:color-mix(in srgb, var(--sun) 12%, var(--surface)); border-radius:999px; padding:8px 16px; font-size:15px}
.energy b{color:var(--warn)}
.parts{display:flex; gap:10px; overflow-x:auto; padding:18px 2px 4px; scrollbar-width:thin}
.part{flex:none; display:flex; align-items:center; gap:12px; border:2px solid var(--line); background:var(--surface); border-radius:20px; padding:12px 18px 12px 14px; text-align:left}
.part .em{font-size:26px}
.part b{display:block; font-size:16px; white-space:nowrap}
.part span.d{font-size:13px; color:var(--ink-2)}
.part.on{background:var(--accent); border-color:var(--accent); color:var(--accent-ink)}
.part.on span.d{color:inherit; opacity:.85}
.part .now{font-size:11px; font-weight:800; background:var(--sun); color:var(--on-sun); border-radius:999px; padding:1px 7px; margin-left:6px; vertical-align:2px}

.mainrow{display:grid; gap:22px}
@media (min-width:1000px){ .mainrow{grid-template-columns:minmax(0,1.45fr) minmax(0,1fr); align-items:start} }
.lowrow{display:grid; gap:22px}
@media (min-width:1000px){ .lowrow{grid-template-columns:minmax(0,1fr) minmax(0,1.35fr); align-items:start} }

/* Player (inline) */
.player{background:linear-gradient(180deg, var(--accent-soft), var(--surface) 260px)}
.pills{display:flex; flex-wrap:wrap; gap:8px; align-items:center}
.pill{display:inline-flex; align-items:center; gap:6px; border-radius:999px; padding:6px 13px; font-size:14px; font-weight:700; background:var(--surface); border:2px solid var(--line)}
.pill.w{border-color:transparent; color:#fff}
.pill.off{background:var(--ink); color:var(--bg); border-color:var(--ink)}
button.pill{cursor:pointer}
.nowline{font-size:14px; font-weight:800; color:var(--accent); margin:18px 0 6px}
.nowline .t{font-family:var(--mono); font-weight:700}
.head2{display:flex; gap:20px; align-items:flex-start}
.etile{flex:none; width:104px; height:104px; border-radius:26px; background:var(--surface); border:2px solid var(--line); display:grid; place-items:center; font-size:54px}
.head2 h2{font-size:clamp(23px,3vw,34px)}
.head2 .lead{color:var(--ink-2); margin-top:8px; font-size:17px}
@media (max-width:560px){ .etile{width:72px; height:72px; font-size:38px; border-radius:20px} .head2{gap:14px} }
.transcript{margin-top:20px; border:2px solid var(--line); border-radius:22px; background:var(--surface); padding:16px 18px}
.transcript .th{display:flex; justify-content:space-between; gap:10px; flex-wrap:wrap; font-size:13px; font-weight:800}
.transcript .th .l{color:var(--accent)}
.transcript .th .l::before{content:""; display:inline-block; width:9px; height:9px; border-radius:50%; background:var(--good); margin-right:7px; vertical-align:1px}
.transcript .th .r{color:var(--good)}
.tbody{max-height:190px; overflow-y:auto; margin-top:10px; font-size:clamp(17px,2vw,21px); line-height:1.55; scroll-behavior:smooth}
.tbody span{color:var(--ink-2); opacity:.6; transition:opacity .2s}
.tbody span.past{opacity:.95; color:var(--ink)}
.tbody span.cur{opacity:1; color:var(--ink); background:color-mix(in srgb, var(--sun) 35%, transparent); border-radius:6px; box-decoration-break:clone; -webkit-box-decoration-break:clone; padding:0 2px}
.wave{display:flex; align-items:center; justify-content:space-between; gap:3px; height:54px; margin-top:16px; padding:0 4px; border-radius:16px; background:var(--surface-2)}
.wave i{flex:1; max-width:10px; border-radius:6px; background:linear-gradient(180deg, var(--accent), var(--w-svet)); height:var(--h); opacity:.45}
.playing .wave i{opacity:1; animation:wv 1s ease-in-out infinite alternate; animation-delay:var(--d)}
@keyframes wv{from{transform:scaleY(.35)} to{transform:scaleY(1)}}
.timeline{display:flex; align-items:center; gap:12px; margin-top:12px; font-family:var(--mono); font-size:14px; color:var(--ink-2)}
.timeline .tbar{flex:1; height:8px; border-radius:6px; background:var(--line); overflow:hidden}
.timeline .tbar i{display:block; height:100%; background:linear-gradient(90deg, var(--accent), var(--w-svet), var(--sun)); border-radius:6px}
.ctrls{display:flex; align-items:center; justify-content:center; gap:14px; margin-top:18px; flex-wrap:wrap}
.iconbtn{width:48px; height:48px; border-radius:50%; border:2px solid var(--line); background:var(--surface); display:grid; place-items:center; flex:none}
.iconbtn svg{width:20px; height:20px}
.iconbtn:disabled{opacity:.35; cursor:not-allowed}
.bigplay{width:84px; height:84px; border-radius:50%; border:0; background:var(--sun); color:var(--on-sun); display:grid; place-items:center; box-shadow:inset 0 -6px 0 var(--sun-2); flex:none}
.bigplay svg{width:34px; height:34px}
.dosenote{text-align:center; font-size:14px; color:var(--ink-2); margin-top:12px}
.ctrlbar{display:flex; align-items:center; justify-content:space-between; gap:14px; flex-wrap:wrap; margin-top:18px; padding-top:18px; border-top:2px solid var(--line)}
.ctrlbar .grp{display:flex; align-items:center; gap:10px; flex-wrap:wrap}
.ctrlbar .iconbtn{width:56px; height:56px; border-radius:18px}
.earbtn{display:inline-flex; align-items:center; gap:12px; border:0; border-radius:22px; background:var(--accent); color:var(--accent-ink); font-size:21px; font-weight:800; padding:16px 30px; box-shadow:0 6px 18px color-mix(in srgb, var(--accent) 30%, transparent)}
.earbtn svg{width:24px; height:24px}
.savebtn, .donebtn{display:inline-flex; align-items:center; gap:8px; border-radius:18px; padding:13px 20px; font-weight:800; font-size:16px; border:2px solid}
.savebtn{background:color-mix(in srgb, var(--sun) 14%, var(--surface)); border-color:color-mix(in srgb, var(--sun) 55%, var(--line)); color:var(--warn)}
.donebtn{background:var(--good-soft); border-color:color-mix(in srgb, var(--good) 35%, var(--line)); color:var(--good)}
.savebtn:disabled, .donebtn:disabled{opacity:.5; cursor:not-allowed}
.realworld{display:flex; gap:14px; align-items:flex-start; margin:20px -24px -24px; padding:18px 24px; background:var(--accent-soft); border-top:2px solid var(--line); border-radius:0 0 26px 26px}
.brushcard .bhead{display:flex; gap:16px; align-items:flex-start}
.brushcard .btile{flex:none; width:64px; height:64px; border-radius:20px; display:grid; place-items:center; font-size:32px; background:color-mix(in srgb, var(--w-svet) 10%, var(--surface)); border:2px solid color-mix(in srgb, var(--w-svet) 30%, var(--line))}
.brushcard .bt{display:flex; flex-wrap:wrap; align-items:center; gap:8px 12px}
.brushcard h2{font-size:clamp(22px,2.6vw,28px)}
.brushcard .htag{font-size:14px; font-weight:800; border-radius:999px; padding:3px 12px; color:var(--w-svet); background:color-mix(in srgb, var(--w-svet) 12%, var(--surface))}
.brushcard .bhead p{color:var(--ink-2); margin-top:6px}
.brushgo{display:inline-flex; align-items:center; gap:8px; margin-top:16px; border:0; border-radius:16px; padding:14px 24px; font-size:19px; font-weight:800; background:var(--w-svet); color:#fff}
.brushgo:disabled{opacity:.55; cursor:not-allowed}
.quads{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:12px; margin-top:18px}
@media (max-width:700px){ .quads{grid-template-columns:repeat(2,minmax(0,1fr))} }
.quad{border:2px solid var(--line); border-radius:18px; padding:14px 10px; text-align:center; background:var(--surface-2); transition:background .2s, border-color .2s}
.quad span{display:block; font-size:14px; color:var(--ink-2); font-family:var(--mono)}
.quad b{display:block; font-size:clamp(16px,1.7vw,20px); margin-top:4px}
.quad.on{border-color:var(--w-svet); background:color-mix(in srgb, var(--w-svet) 14%, var(--surface)); box-shadow:0 0 0 3px color-mix(in srgb, var(--w-svet) 20%, transparent)}
.quad.past{opacity:.5}
.bready{display:flex; justify-content:space-between; align-items:center; gap:12px; margin-top:16px; border:2px solid color-mix(in srgb, var(--w-svet) 25%, var(--line)); border-radius:18px; padding:14px 18px; background:color-mix(in srgb, var(--w-svet) 5%, var(--surface))}
.bready .bclock{font-family:var(--mono); font-weight:800; font-size:24px; color:var(--w-svet); flex:none}
.realworld .bub{flex:none; font-size:26px; line-height:1}
.realworld small{display:block; font-size:14px; font-weight:800; letter-spacing:.03em; text-transform:uppercase; color:var(--accent)}
.realworld p{font-size:18px; font-weight:700; margin-top:4px}
@media (max-width:640px){ .realworld{margin:18px -18px -18px; padding:16px 18px; border-radius:0 0 20px 20px} .earbtn{font-size:19px; padding:14px 22px} }
.brush{display:inline-flex; font-size:18px; font-weight:800; background:var(--sun); color:var(--on-sun); border-radius:999px; padding:6px 16px; margin-top:14px}
.opts{display:grid; gap:10px; margin-top:16px}
.opt{border:2px solid var(--line); background:var(--surface); border-radius:18px; padding:14px 16px; font-size:19px; font-weight:700; text-align:left}
.opt.right{background:var(--good); color:#fff; border-color:var(--good)}
.opt.wrong{border-color:var(--warn); color:var(--warn)}
.done{text-align:center; padding:12px 0}
.done h2{font-size:clamp(34px,5vw,48px)}
.mbgain{display:inline-block; background:var(--sun); color:var(--on-sun); font-weight:800; font-size:20px; border-radius:999px; padding:4px 16px; margin-top:10px; box-shadow:inset 0 -3px 0 var(--sun-2)}
.challenge{background:var(--surface); border:2px solid var(--line); border-radius:22px; padding:18px 20px; margin:18px auto; font-size:20px; font-weight:700; max-width:36ch}
.challenge small{display:block; font-size:14px; color:var(--ink-2); font-weight:700; margin-bottom:6px}
.newb{display:flex; gap:8px; justify-content:center; flex-wrap:wrap; margin-bottom:10px}
.newb span{background:var(--accent); color:var(--accent-ink); border-radius:999px; padding:5px 12px; font-weight:800; font-size:14px}
.btns{display:flex; flex-wrap:wrap; gap:10px; justify-content:center}
.btn{border:2px solid var(--ink); background:var(--ink); color:var(--bg); border-radius:999px; padding:12px 22px; font-weight:800; font-size:16px}
.btn.ghost{background:transparent; color:var(--ink)}
.btn.sun{background:var(--sun); color:var(--on-sun); border-color:var(--sun)}
.btn.acc{background:var(--accent); color:var(--accent-ink); border-color:var(--accent)}
.btn:disabled{opacity:.45; cursor:not-allowed}
.btn.small{font-size:14px; padding:8px 14px}
.limit{text-align:center; padding:20px 0}
.limit svg.sheep{width:120px}
.limit h2{font-size:28px; margin:8px 0}

/* Mix */
.mix h2{font-size:26px}
.count{border:2px solid var(--line); border-radius:999px; padding:4px 12px; font-weight:800; font-size:14px; color:var(--accent); background:var(--accent-soft); border-color:transparent}
.filters{display:flex; gap:8px; overflow-x:auto; padding:14px 0 12px; border-bottom:2px solid var(--line); scrollbar-width:thin}
.filters button{flex:none; border:2px solid var(--line); background:var(--surface); border-radius:999px; padding:7px 14px; font-weight:700; font-size:14px; white-space:nowrap}
.filters button.on{background:var(--accent); color:var(--accent-ink); border-color:var(--accent)}
.mixlist{display:flex; flex-direction:column; gap:10px; padding-top:12px}
@media (min-width:1000px){ .mixlist{max-height:720px; overflow-y:auto; padding-right:6px} }
.mi{display:flex; align-items:center; gap:14px; border:2px solid var(--line); border-radius:20px; padding:12px; background:var(--surface)}
.mi.cur{border-color:var(--accent); background:var(--accent-soft)}
.mi .et{flex:none; width:56px; height:56px; border-radius:16px; background:var(--surface-2); display:grid; place-items:center; font-size:28px}
.mi .tx{flex:1; min-width:0}
.mi .cat{font-size:12px; font-weight:800; display:flex; gap:8px; align-items:center; flex-wrap:wrap}
.mi .ideal{background:var(--good-soft); color:var(--good); border-radius:999px; padding:1px 8px}
.mi .own{background:var(--surface-2); color:var(--ink-2); border-radius:999px; padding:1px 8px}
.mi b{display:block; font-size:16px; line-height:1.25; margin:2px 0; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden}
.mi .meta{font-size:13px; color:var(--ink-2); font-family:var(--mono)}
.mi .go{flex:none}

/* Map */
.map h2, .album h2{font-size:clamp(22px,2.6vw,28px); margin-top:12px}
.map > p, .album .sub{color:var(--ink-2); margin-top:6px}
.radar{display:block; width:100%; max-width:430px; margin:10px auto 6px}
.radar text{font-family:var(--font); font-size:12.5px; font-weight:700; fill:var(--ink)}
.tiles{display:grid; grid-template-columns:1fr 1fr; gap:10px}
.tile{display:flex; justify-content:space-between; align-items:center; gap:8px; border:2px solid color-mix(in srgb, var(--wc) 35%, var(--line)); background:color-mix(in srgb, var(--wc) 9%, var(--surface)); border-radius:16px; padding:10px 14px; font-weight:800; font-size:15px; color:var(--ink); text-align:left}
.tile .pc{font-family:var(--mono); color:var(--wc)}
@media (max-width:420px){ .tiles{grid-template-columns:1fr} }
.mission{margin-top:16px; border:2px solid var(--line); border-radius:20px; padding:16px 18px; background:linear-gradient(135deg, color-mix(in srgb, var(--sun) 10%, var(--surface)), var(--surface))}
.mission .mh{display:flex; justify-content:space-between; gap:10px; align-items:baseline}
.mission .mh span{font-family:var(--mono); font-weight:700; color:var(--good)}
.mission p{font-size:15px; margin-top:6px}
.mbar{height:10px; border-radius:8px; background:var(--line); margin-top:12px; overflow:hidden}
.mbar i{display:block; height:100%; border-radius:8px; background:linear-gradient(90deg, var(--accent), var(--good))}

/* Album */
.cards{display:grid; grid-template-columns:repeat(auto-fill,minmax(178px,1fr)); gap:14px; margin-top:16px}
.fc{perspective:900px; min-height:236px}
.fc .in{position:relative; width:100%; height:100%; min-height:236px; transition:transform .5s; transform-style:preserve-3d}
.fc.flip .in{transform:rotateY(180deg)}
.face{position:absolute; inset:0; backface-visibility:hidden; -webkit-backface-visibility:hidden; border-radius:22px; padding:16px; display:flex; flex-direction:column; text-align:left; border:3px solid var(--sun); background:linear-gradient(160deg, color-mix(in srgb, var(--sun) 10%, var(--surface)), var(--surface))}
.face.front{cursor:pointer}
.face .top{display:flex; justify-content:space-between; align-items:center}
.face .top .em{font-size:36px}
.face .top .ot{font-size:12px; font-weight:800; border:2px solid var(--sun); border-radius:999px; padding:2px 9px; color:var(--warn); background:color-mix(in srgb, var(--sun) 15%, var(--surface))}
.face .cat{margin-top:auto; font-size:12px; font-weight:800; color:var(--wc)}
.face b{font-size:16px; line-height:1.25; margin-top:4px}
.face.back{transform:rotateY(180deg); background:var(--wc); color:#fff; border-color:var(--wc)}
.face.back p{font-size:14px; line-height:1.45; flex:1; overflow:hidden}
.face.back .bb{display:flex; gap:8px; margin-top:10px}
.face.back button{border:0; border-radius:999px; padding:7px 12px; font-weight:800; font-size:13px; background:#fff; color:#1A1D3A}
.face.back button.ghost{background:rgba(255,255,255,.2); color:#fff}
.rar{font-size:11px; font-weight:800; border-radius:999px; padding:1px 7px; background:var(--surface-2); color:var(--ink-2); margin-left:6px}
.rar.E{background:var(--sun); color:var(--on-sun)}
.rar.V{background:var(--accent); color:var(--accent-ink)}
.lockc{border:3px dashed var(--line); border-radius:22px; padding:16px; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; gap:8px; min-height:236px; background:transparent; color:var(--ink-2)}
.lockc .em{font-size:34px; filter:grayscale(1); opacity:.55}
.lockc b{color:var(--ink-2); font-size:15px; line-height:1.3}
.lockc span{color:var(--accent); font-weight:800; font-size:14px}
.newcards{display:flex; gap:12px; justify-content:center; flex-wrap:wrap; margin-top:12px}
@media (prefers-reduced-motion: reduce){ *{animation:none !important; transition:none !important} }

/* Badges */
.badges{display:flex; gap:12px; overflow-x:auto; padding-top:14px}
.badge{flex:none; width:136px; display:flex; flex-direction:column; align-items:center; text-align:center; gap:6px}
.badge .medal{width:64px; height:64px; border-radius:50%; display:grid; place-items:center; font-size:28px; background:var(--surface-2); border:3px dashed var(--line); filter:grayscale(1); opacity:.6}
.badge.got .medal{background:var(--sun); border:0; filter:none; opacity:1; box-shadow:inset 0 -5px 0 var(--sun-2)}
.badge b{font-size:14px; line-height:1.2}
.badge span{font-size:12px; color:var(--ink-2)}
.lvl{display:flex; align-items:center; gap:14px; flex-wrap:wrap}
.lvl .n{width:52px; height:52px; border-radius:50%; background:var(--accent); color:var(--accent-ink); display:grid; place-items:center; font-weight:800; font-size:24px}
.lvl .bar{flex:1; min-width:160px; height:10px; border-radius:8px; background:var(--line); overflow:hidden}
.lvl .bar i{display:block; height:100%; background:var(--sun)}

/* Car mode */
.car{max-width:900px; margin:0 auto}
.car h1{font-size:clamp(34px,6vw,54px)}
.car .sub{color:var(--ink-2); font-size:18px; margin-top:8px}
.car h2{font-size:22px; margin:28px 0 12px}
.bigtoggles{display:flex; flex-wrap:wrap; gap:12px}
.bigtoggles button{display:flex; align-items:center; gap:12px; border:3px solid var(--line); background:var(--surface); border-radius:22px; padding:14px 22px; font-size:20px; font-weight:800}
.bigtoggles button .e{font-size:30px}
.bigtoggles button.on{border-color:var(--sun); background:color-mix(in srgb, var(--sun) 18%, var(--surface))}
.go{display:flex; flex-direction:column; align-items:center; gap:10px; margin-top:30px}
.gobtn{border:0; border-radius:999px; background:var(--sun); color:var(--on-sun); font-size:26px; font-weight:800; padding:22px 48px; box-shadow:inset 0 -7px 0 var(--sun-2)}
.gobtn:disabled{opacity:.4}
.detect{margin-top:30px; display:flex; gap:16px; align-items:center; border:3px dashed var(--line); border-radius:24px; padding:18px}
.detect.open{border-style:solid; border-color:var(--sun)}
.detect .e{font-size:44px}
.detect .tx{flex:1}
.detect b{font-size:20px}

/* Overlay player (car) */
.overlay{position:fixed; inset:0; z-index:50; background:var(--bg); overflow-y:auto; padding:env(safe-area-inset-top,0px) 0 env(safe-area-inset-bottom,0px)}
.overlay[hidden]{display:none}
.ov{max-width:900px; margin:0 auto; padding:16px 22px 40px; display:flex; flex-direction:column; min-height:100%}
.ov .top{display:flex; justify-content:space-between; align-items:center; gap:10px}
.ov .big{flex:1; display:flex; flex-direction:column; justify-content:center; text-align:center; padding:20px 0}
.ov .big .em{font-size:80px}
.ov .big h2{font-size:clamp(28px,5vw,44px); margin:10px 0 16px}
.ov .big .line{font-size:clamp(24px,4.4vw,36px); font-weight:700; line-height:1.35}
.ov .bigplay{width:120px; height:120px}
.ov .bigplay svg{width:48px; height:48px}
.ov .iconbtn{width:68px; height:68px}
.ov .opt{font-size:24px; padding:18px}
.dim{position:fixed; inset:0; z-index:80; background:var(--scrim); display:flex; flex-direction:column; align-items:center; justify-content:center; gap:16px; color:#A9B0D8; border:0; width:100%; font-size:18px}
.dim[hidden]{display:none}
.dim svg{width:90px; opacity:.5}

/* Parent */
.gate{max-width:420px; margin:30px auto; text-align:center}
.gate h1{font-size:32px; margin-bottom:10px}
.gate input{width:140px; text-align:center; font-size:28px; font-weight:800; padding:10px; border-radius:16px; border:2px solid var(--line); background:var(--surface)}
.gate .err{color:var(--warn); font-weight:700; margin-top:10px; min-height:1.4em}
.pagehead h1{font-size:clamp(30px,5vw,42px)}
.pagehead p{color:var(--ink-2); margin-top:6px}
.ptabs{display:flex; gap:6px; overflow-x:auto; margin:20px 0}
.ptabs button{flex:none; border:2px solid var(--line); background:var(--surface); border-radius:999px; padding:8px 16px; font-weight:700}
.ptabs button.on{background:var(--accent); color:var(--accent-ink); border-color:var(--accent)}
.panel{background:var(--surface); border:2px solid var(--line); border-radius:24px; padding:20px; margin-bottom:16px}
.panel h2{font-size:21px; margin-bottom:6px}
.panel > p{color:var(--ink-2); margin-bottom:14px; font-size:15px}
.notif{display:flex; gap:12px; align-items:flex-start; background:var(--surface-2); border-radius:18px; padding:14px; margin-bottom:16px}
.notif svg{width:36px; flex:none}
.notif b{display:block; font-size:14px}
.talk{border-top:2px solid var(--line); padding:14px 0; display:flex; gap:12px; align-items:flex-start}
.talk:first-of-type{border-top:0}
.talk .et{flex:none; width:44px; height:44px; border-radius:12px; display:grid; place-items:center; background:var(--surface-2); font-size:24px}
.talk .tx{flex:1; min-width:0}
.talk .tx p{font-size:15px; color:var(--ink-2); margin:2px 0 8px}
.tag{display:inline-block; font-size:12px; font-weight:700; padding:1px 8px; border-radius:6px; background:var(--surface-2); color:var(--ink-2); margin-left:6px; vertical-align:2px}
.tag.good{background:var(--good); color:#fff}
.tag.sun{background:var(--sun); color:var(--on-sun)}
.tag.ai{background:var(--accent); color:var(--accent-ink)}
.kidhead{display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-bottom:4px}
.kidhead .av{width:40px; height:40px; border-radius:50%; display:grid; place-items:center; font-size:22px}
.kidhead b{font-size:19px}
.field{display:flex; flex-direction:column; gap:6px; margin-bottom:14px}
.field label, .field .lbl{font-weight:700; font-size:15px}
.field input[type=text], .field input[type=email], .field input[type=password], .field input[type=tel], .field select{border:2px solid var(--line); border-radius:14px; padding:10px 12px; background:var(--surface); font-size:16px; width:100%}
.toggles{display:flex; flex-wrap:wrap; gap:8px}
.toggles button{border:2px solid var(--line); background:var(--surface); border-radius:999px; padding:6px 12px; font-weight:600; font-size:14px}
.toggles button.on{color:#fff; border-color:transparent}
.toggles.em button{font-size:22px; padding:4px 10px}
.toggles.em button.on{background:var(--sun); color:var(--on-sun)}
.switch{display:flex; align-items:flex-start; gap:14px; padding:12px 0; border-top:2px solid var(--line)}
.switch:first-of-type{border-top:0}
.switch .tx{flex:1}
.switch .tx p{font-size:14px; color:var(--ink-2)}
.sw{flex:none; width:56px; height:32px; border-radius:999px; border:0; background:var(--line); position:relative}
.sw::after{content:""; position:absolute; top:4px; left:4px; width:24px; height:24px; border-radius:50%; background:#fff; transition:left .15s}
.sw.on{background:var(--good)}
.sw.on::after{left:28px}
.stepper{display:flex; align-items:center; gap:12px}
.stepper b{font-size:22px; min-width:2ch; text-align:center}
.kidrow{display:flex; align-items:center; gap:12px; padding:12px 0; border-top:2px solid var(--line)}
.kidrow:first-of-type{border-top:0}
.kidrow .av{width:44px; height:44px; border-radius:50%; display:grid; place-items:center; font-size:24px; flex:none}
.kidrow .tx{flex:1}
.kidrow .tx span{font-size:14px; color:var(--ink-2)}
.draft{background:var(--surface-2); border-radius:18px; padding:16px; margin-top:14px}
.draft ol{margin:8px 0 10px; padding-left:22px}
.check{display:flex; gap:10px; align-items:flex-start; font-size:15px; margin:10px 0 14px}
.check input{width:20px; height:20px; margin-top:2px; flex:none}
.empty{color:var(--ink-2); padding:8px 0}
.partrow{display:flex; flex-wrap:wrap; gap:12px 20px; align-items:center; justify-content:space-between; padding:14px 0; border-top:2px solid var(--line)}
.partrow:first-of-type{border-top:0}
.partrow .pn{display:flex; gap:12px; align-items:center; min-width:220px}
.partrow .pn > span{font-size:28px}
.partrow .pn b{display:block}
.partrow .pn div span{font-size:13px; color:var(--ink-2)}
.partrow .pf{display:flex; gap:10px; flex-wrap:wrap}
.partrow label{display:flex; flex-direction:column; gap:4px; font-size:13px; font-weight:700; color:var(--ink-2)}
.partrow input{border:2px solid var(--line); border-radius:12px; padding:6px 8px; background:var(--surface); font-size:15px; width:104px}
.partrow input[type=number]{width:70px}
.toast{position:fixed; left:50%; bottom:28px; transform:translateX(-50%); z-index:90; background:var(--ink); color:var(--bg); border-radius:999px; padding:10px 18px; font-weight:700; font-size:15px; box-shadow:0 6px 24px rgba(0,0,0,.2); max-width:90vw; text-align:center}
.toast[hidden]{display:none}

/* Účty: přihlášení, registrace, Moje rodina */
.av{overflow:hidden}
.av img{width:100%; height:100%; object-fit:cover; border-radius:50%; display:block}
.bigtoggles .e img{width:34px; height:34px; border-radius:50%; object-fit:cover; display:block}
.acct{flex:none; border:2px solid var(--line); background:var(--surface); border-radius:999px; padding:9px 16px; font-weight:700; font-size:15px; max-width:240px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.acct.on{border-color:var(--accent); color:var(--accent)}
.authwrap{max-width:480px; margin:18px auto 0}
.authcard{background:var(--surface); border:2px solid var(--line); border-radius:28px; padding:28px}
.authcard h1{font-size:clamp(26px,4vw,32px); margin-bottom:6px}
.authcard form{margin-top:18px}
.authcard .big{font-size:44px; margin-bottom:6px}
.wide{width:100%}
.linkbtn{border:0; background:none; padding:0; color:var(--accent); font-weight:700; text-decoration:underline; text-underline-offset:3px}
.authalt{text-align:center; margin-top:18px; color:var(--ink-2)}
.authrow{display:flex; justify-content:flex-end; margin:-4px 0 16px}
.msg{border-radius:14px; padding:10px 14px; font-weight:700; font-size:15px; margin:4px 0 14px}
.msg.err{background:color-mix(in srgb, var(--warn) 12%, var(--surface)); color:var(--warn)}
.msg.ok{background:var(--good-soft); color:var(--good)}
.msg .linkbtn{margin-left:6px}
.hint{font-size:13px; color:var(--ink-2)}
.req{color:var(--warn)}
.opt{font-weight:600; font-size:12px; color:var(--ink-2); background:var(--surface-2); border-radius:999px; padding:1px 8px; margin-left:4px}
.devbox{border:2px dashed var(--sun-2); border-radius:16px; padding:12px 14px; margin-top:16px; font-size:14px}
.devbox a{color:var(--accent); font-weight:800; word-break:break-all}
.draft h3{margin-bottom:12px}
.dob{display:flex; gap:10px; flex-wrap:wrap}
.dob label{display:flex; flex-direction:column; gap:4px; font-size:13px; font-weight:700; color:var(--ink-2); flex:1; min-width:96px}
.dob select{border:2px solid var(--line); border-radius:14px; padding:10px 12px; background:var(--surface); font-size:16px; width:100%}
.photorow{display:flex; align-items:center; gap:12px; flex-wrap:wrap}
.phprev{width:72px; height:72px; border-radius:50%; overflow:hidden; display:grid; place-items:center; font-size:34px; background:var(--surface); border:2px solid var(--line); flex:none}
.phprev img{width:100%; height:100%; object-fit:cover}
.filebtn{cursor:pointer}
.pwbox{border:2px solid color-mix(in srgb, var(--accent) 30%, var(--line)); background:var(--accent-soft); border-radius:18px; padding:14px 16px; margin-bottom:14px}
.pwbox[hidden]{display:none}
.pwbox > p{margin-bottom:12px; font-size:15px}
.chips{display:flex; gap:6px; flex-wrap:wrap; margin-top:6px}
.chip{font-size:13px; font-weight:700; border-radius:999px; padding:2px 10px; background:var(--surface-2); color:var(--ink-2)}
.chip.ok{background:var(--good-soft); color:var(--good)}
.appset{margin:4px 0 16px}
.appset summary{cursor:pointer; font-weight:700; margin-bottom:10px}
.btn.danger{border-color:var(--warn); color:var(--warn)}
/* Aktivita, statistiky a screen time */
.stbar{display:flex; align-items:center; gap:10px 14px; flex-wrap:wrap; background:var(--surface); border:2px solid var(--line); border-radius:18px; padding:10px 16px; font-size:15px}
.stbar .meter{width:120px; height:8px; border-radius:999px; background:var(--surface-2); overflow:hidden; box-shadow:inset 0 0 0 1px var(--line)}
.stbar .meter i{display:block; height:100%; background:var(--accent); border-radius:999px}
.stbar.low{border-color:color-mix(in srgb, var(--warn) 45%, var(--line))}
.stbar.low .meter i{background:var(--warn)}
.stbar .muted{font-size:14px}
.lock{text-align:center; max-width:640px; margin:12px auto}
.lock .bigem{font-size:64px; line-height:1}
.lock h1{font-size:28px; margin:10px 0 6px}
.lock ul{text-align:left; margin:18px auto; padding:0; list-style:none; display:grid; gap:8px; max-width:460px}
.lock li{background:var(--surface-2); border-radius:14px; padding:10px 14px}
.lock form{border-top:2px solid var(--line); margin-top:18px; padding-top:16px; text-align:left}
.lock .row{display:flex; gap:10px; flex-wrap:wrap; align-items:flex-end}
.lock .row label{display:flex; flex-direction:column; gap:4px; font-size:13px; font-weight:700; color:var(--ink-2); flex:1; min-width:150px}
.inp{border:2px solid var(--line); border-radius:12px; padding:9px 12px; font:inherit; font-size:16px; color:var(--ink); background:var(--surface); width:100%}
.inp:focus{outline:3px solid var(--accent-soft); border-color:var(--accent)}
.filt{display:flex; flex-wrap:wrap; gap:8px; align-items:center; margin-bottom:12px}
.chipbtn{border:2px solid var(--line); background:var(--surface); color:var(--ink); border-radius:999px; padding:6px 14px 6px 8px; font-weight:700; font-size:14px; display:inline-flex; align-items:center; gap:8px}
.chipbtn.plain{padding:6px 14px}
.chipbtn.on{background:var(--accent); border-color:var(--accent); color:var(--accent-ink)}
.mav{width:26px; height:26px; border-radius:50%; display:inline-grid; place-items:center; font-size:14px; overflow:hidden; flex:none}
.mav img{width:100%; height:100%; object-fit:cover}
.kpis{display:grid; grid-template-columns:repeat(auto-fit,minmax(160px,1fr)); gap:12px; margin-bottom:16px}
.kpi{background:var(--surface); border:2px solid var(--line); border-radius:20px; padding:14px 16px}
.kpi span{display:block; font-size:13px; font-weight:700; color:var(--ink-2)}
.kpi b{display:block; font-size:26px; line-height:1.2; margin:4px 0 2px; font-variant-numeric:tabular-nums}
.kpi small{font-size:13px; color:var(--ink-2)}
@media (max-width:560px){ .kpis{grid-template-columns:1fr 1fr; gap:8px} .kpi{padding:12px} .kpi b{font-size:20px} }
.legend{display:flex; gap:6px 16px; flex-wrap:wrap; font-size:13px; color:var(--ink-2); margin:2px 0 12px}
.legend i{display:inline-block; width:10px; height:10px; border-radius:3px; margin-right:6px}
.bars.few, .xlab.few{gap:14px}
.bars{display:flex; align-items:stretch; gap:2px; height:180px; border-bottom:1px solid var(--line)}
.bars .col{flex:1; min-width:0; display:flex; flex-direction:column-reverse; gap:2px; cursor:default}
.bars .col:hover{background:var(--surface-2); border-radius:6px 6px 0 0}
.bars .col i{display:block; flex:none}
.bars .col i:last-child{border-radius:4px 4px 0 0}
.xlab{display:flex; gap:2px; font-size:11px; color:var(--ink-2); margin-top:4px}
.xlab span{flex:1; min-width:0; text-align:center; white-space:nowrap; overflow:visible}
.ymax{font-size:12px; color:var(--ink-2); text-align:right; margin-bottom:2px}
.heat{display:grid; grid-template-columns:24px repeat(24,minmax(0,1fr)); gap:2px; font-size:11px; color:var(--ink-2); align-items:center}
.heat i{display:block; height:22px; border-radius:3px}
@media (max-width:560px){ .heat i{height:12px} }
.heat .hx{text-align:center}
.scale{display:inline-flex; gap:2px; vertical-align:middle; margin:0 6px}
.scale i{width:12px; height:12px; border-radius:3px; display:inline-block}
.hb{display:grid; grid-template-columns:minmax(80px,170px) minmax(0,1fr) auto; gap:10px; align-items:center; font-size:14px; margin:7px 0}
.hb .tr{height:12px; background:var(--surface-2); border-radius:999px; overflow:hidden}
.hb .tr i{display:block; height:100%; border-radius:0 4px 4px 0}
.hb b{font-weight:600; font-variant-numeric:tabular-nums; color:var(--ink-2)}
.grid2{display:grid; gap:16px; margin-bottom:16px}
.grid2 .panel{margin-bottom:0}
@media (min-width:900px){ .grid2{grid-template-columns:1fr 1fr} }
.tlday{font-size:15px; margin:16px 0 4px; display:flex; justify-content:space-between; gap:10px; flex-wrap:wrap}
.tlday span{font-weight:600; color:var(--ink-2); font-size:14px}
.tlday small{font-weight:600; color:var(--ink-2); font-size:14px; margin-left:8px}
.tlrow{display:grid; grid-template-columns:100px 26px minmax(0,1fr) auto; gap:10px; align-items:center; padding:8px 0; border-top:1px solid var(--line); font-size:14px}
.tlrow .tm{font-variant-numeric:tabular-nums; color:var(--ink-2)}
.tlrow .ti b{font-weight:700}
.tlrow .du{font-variant-numeric:tabular-nums; font-weight:700}
@media (max-width:560px){ .tlrow{grid-template-columns:62px minmax(0,1fr) auto} .tlrow .mav{display:none} }
table.dt{width:100%; border-collapse:collapse; font-size:14px; margin-top:8px}
table.dt th, table.dt td{padding:5px 8px; border-bottom:1px solid var(--line); text-align:right; font-variant-numeric:tabular-nums}
table.dt th:first-child, table.dt td:first-child{text-align:left}
details.tbl summary{cursor:pointer; font-weight:700; font-size:14px; color:var(--accent); margin-top:12px}
#ctip{position:fixed; z-index:80; pointer-events:none; background:var(--ink); color:#fff; font-size:13px; line-height:1.4; border-radius:10px; padding:7px 10px; max-width:260px; box-shadow:0 6px 20px rgba(26,29,58,.18)}
.stgrid{display:grid; grid-template-columns:repeat(auto-fit,minmax(140px,1fr)); gap:10px; margin:12px 0}
.stgrid label{display:flex; flex-direction:column; gap:4px; font-size:13px; font-weight:700; color:var(--ink-2)}
.usebar{height:12px; background:var(--surface-2); border-radius:999px; overflow:hidden; margin:8px 0 4px}
.usebar i{display:block; height:100%; background:var(--accent); border-radius:0 4px 4px 0}
.usebar.over i{background:var(--warn)}
/* Veřejné stránky, výpis obsahu a patička */
a.btn{display:inline-block; text-decoration:none}
.hdr .pubnav{display:flex; gap:8px; flex-wrap:wrap}
.todo{background:color-mix(in srgb, var(--sun) 40%, var(--surface)); border-radius:6px; padding:0 6px; font-weight:700}
.doc{max-width:860px}
.doc .lead{font-size:19px; margin:4px 0 22px}
.doc h2{font-size:22px; margin:28px 0 8px}
.doc p{margin:0 0 10px}
.doc ul{margin:0 0 10px; padding-left:22px}
.doc li{margin:5px 0}
.doc a{color:var(--accent); font-weight:700}
.doc code{background:var(--surface-2); border-radius:6px; padding:1px 6px; font-size:15px}
.feats{display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:14px; margin:8px 0 10px}
.feat{background:var(--surface); border:2px solid var(--line); border-radius:22px; padding:18px}
.feat > span{font-size:30px; display:block; margin-bottom:6px}
.feat b{display:block; font-size:18px; margin-bottom:4px}
.feat p{font-size:15px; color:var(--ink-2); margin:4px 0 0}
/* Patička */
.ftr{background:#16183A; color:#C9CCEA; margin-top:20px; padding:40px 0 22px; font-size:15px}
.ftr a{color:#fff; text-decoration:none}
.ftr a:hover{text-decoration:underline}
.ftr a:focus-visible{outline:3px solid var(--sun); outline-offset:3px; border-radius:6px}
.fstats{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:12px; padding-bottom:26px; border-bottom:1px solid rgba(255,255,255,.12)}
.fstats div{text-align:center}
.fstats b{display:block; font-size:clamp(26px,4vw,38px); color:#fff; line-height:1.1; font-variant-numeric:tabular-nums}
.fstats span{font-size:14px}
.fbadges{list-style:none; margin:0; padding:24px 0; display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:10px; border-bottom:1px solid rgba(255,255,255,.12)}
.fbadges li{display:flex; gap:12px; align-items:center; background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.14); border-radius:16px; padding:12px 14px}
.fbadges .bi{width:40px; height:40px; flex:none; border-radius:12px; background:rgba(255,255,255,.1); display:grid; place-items:center; font-size:21px}
.fbadges b{display:block; color:#fff; font-size:15px}
.fbadges small{display:block; font-size:13px; line-height:1.35}
.fgrid{display:grid; grid-template-columns:minmax(260px,1.6fr) repeat(4,minmax(0,1fr)); gap:28px; padding:30px 0}
@media (max-width:1000px){ .fgrid{grid-template-columns:repeat(2,minmax(0,1fr))} .fbrand{grid-column:1/-1} }
@media (max-width:640px){ .fstats{grid-template-columns:repeat(2,minmax(0,1fr)); row-gap:20px} }
.fname{display:inline-flex; align-items:center; gap:10px; font-size:22px; font-weight:800}
.logo.sm{width:40px; height:40px; border-radius:12px; box-shadow:inset 0 -3px 0 var(--sun-2)}
.logo.sm svg{width:30px}
.fbrand p{margin:10px 0 0; max-width:420px}
.fsupport{margin-top:18px; background:rgba(255,200,61,.1); border:1px solid rgba(255,200,61,.35); border-radius:16px; padding:14px 16px; max-width:420px}
.fsupport b{color:#fff}
.fsupport p{margin:2px 0 8px; font-size:14px}
.fmail{display:inline-block; background:var(--sun); color:var(--on-sun) !important; font-weight:800; border-radius:999px; padding:8px 16px}
.fcol h2{font-size:14px; text-transform:uppercase; letter-spacing:.06em; color:#fff; margin-bottom:10px}
.fcol ul{list-style:none; margin:0; padding:0}
.fcol li{margin:7px 0}
.fcol a{color:#C9CCEA}
.fcol a:hover{color:#fff}
.fbottom{display:flex; flex-wrap:wrap; justify-content:space-between; gap:8px 20px; border-top:1px solid rgba(255,255,255,.12); padding-top:18px; font-size:13px}
/* ========== Design v2 (Stupidio App v2) ========== */
:root{
  --bg:#EBFFDD; --surface:#FFFFFF; --surface-2:#EBFFDD; --ink:#1A1A33; --ink-2:#6E6E73; --line:rgba(60,60,67,.12);
  --accent:#1A1A33; --accent-ink:#FFFFFF; --accent-soft:#EBFFDD; --teal:#004751; --lime:#C6F222; --lime-2:#B5E00F;
  --sun:#C6F222; --sun-2:#B5E00F; --on-sun:#1A1A33; --good:#007A4A; --good-soft:#DDF7E6; --warn:#B4530A; --focus:#9540FF;
  --sheep:#1A1A33; --sheep-face:#1A1A33; --scrim:#000;
  --font:-apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display", "Helvetica Neue", system-ui, "Segoe UI", Roboto, sans-serif;
}
:root[data-mood]{ --bg:#EBFFDD; --surface-2:#EBFFDD; --line:rgba(60,60,67,.12); --accent-soft:#EBFFDD; }
body{font-size:16px; letter-spacing:-.005em}
h1,h2,h3{letter-spacing:-.02em}
:focus-visible{outline:3px solid rgba(149,64,255,.5); outline-offset:2px}
@keyframes eq{from{transform:scaleY(.45)}to{transform:scaleY(1)}}
@keyframes blink{0%,92%,100%{transform:scaleY(1)}96%{transform:scaleY(.1)}}
.card,.panel{border:0; border-radius:24px; box-shadow:none}
.btn{border-radius:999px; font-weight:600; font-size:15px; padding:11px 20px; border:0; background:var(--ink); color:#fff}
.btn:hover{background:var(--teal)}
.btn.acc,.btn.sun{background:var(--lime); color:var(--ink); border:0}
.btn.acc:hover,.btn.sun:hover{background:var(--lime-2)}
.btn.ghost{background:#fff; color:var(--ink); box-shadow:inset 0 0 0 1.5px rgba(0,0,0,.12)}
.btn.ghost:hover{background:var(--surface-2)}
.btn.small{font-size:13px; padding:7px 14px}
.btn:disabled{opacity:.45}
.muted.small, p.small{font-size:13px}
.flex1{flex:1}
.tag{border-radius:999px; padding:2px 9px; background:var(--surface-2); color:var(--ink)}
.tag.good{background:var(--teal)}
.tag.sun{background:var(--lime); color:var(--ink)}
.tag.ai{background:#CDBFFF; color:var(--ink)}
.pagehead h1, .phead h1{font-size:clamp(32px,5vw,48px); font-weight:700; letter-spacing:-.035em; line-height:1.05}
.kline{font-size:15px; color:var(--ink-2); font-weight:500}
.phead{margin:8px 0 22px}
.sechead{display:flex; align-items:baseline; gap:12px; flex-wrap:wrap; margin-bottom:12px}
.sechead h2{font-size:22px; font-weight:700; flex:1}
/* Hlavička */
.hdr{background:rgba(255,255,255,.82); -webkit-backdrop-filter:saturate(180%) blur(20px); backdrop-filter:saturate(180%) blur(20px); border-bottom:1px solid rgba(0,0,0,.06); position:sticky; top:0; z-index:30}
.hdr .wrap.hbar, .hdr .wrap{display:flex; flex-wrap:nowrap; align-items:center; gap:16px; min-height:64px; padding-top:8px; padding-bottom:8px}
.brand{display:flex; align-items:center; gap:10px; flex:none; margin:0; text-decoration:none; color:var(--ink)}
.brand:hover .ltile{transform:rotate(-6deg)}
.ltile{width:38px; height:38px; border-radius:11px; background:var(--lime); display:grid; place-items:center; flex:none; transition:transform .15s}
.wmark{display:inline-flex; align-items:flex-end; font-family:"Bricolage Grotesque", system-ui, sans-serif; font-weight:700; font-size:25px; letter-spacing:-.04em; line-height:.9; padding-bottom:2px}
.wmark .ib{display:inline-flex; flex-direction:column; align-items:center; gap:.1em; margin:0 1px}
.wmark .ib i{display:block; width:.18em; height:.52em; border-radius:999px; background:currentColor}
.beta{font-size:11px; font-weight:600; background:#CDBFFF; color:var(--ink); padding:3px 8px; border-radius:999px}
.seg{flex:1; display:flex; justify-content:center; min-width:0}
.seg::before{content:none}
.seg{gap:2px}
.seg > button{border:0; background:transparent; padding:6px 16px; border-radius:8px; font-size:13px; font-weight:500; color:var(--ink); white-space:nowrap}
.seg{background:none}
.seg{position:relative}
.seg > button.on{background:#fff; box-shadow:0 1px 3px rgba(0,0,0,.12); font-weight:600}
.hbar .seg{max-width:max-content; margin:0 auto; background:rgba(118,118,128,.12); padding:3px; border-radius:10px; flex:0 1 auto}
.segsp{flex:1}
.hright{display:flex; align-items:center; gap:10px; flex:none; margin-left:auto}
.kavs{display:flex; gap:8px}
.kav{all:unset; box-sizing:border-box; cursor:pointer; width:32px; height:32px; border-radius:50%; background:var(--kc); color:#fff; display:grid; place-items:center; font-size:13px; font-weight:600; overflow:hidden; opacity:.55; flex:none}
.kav img{width:100%; height:100%; object-fit:cover}
.kav.on{opacity:1; box-shadow:0 0 0 2px #fff, 0 0 0 4px var(--kc)}
.kav:focus-visible{outline:3px solid rgba(149,64,255,.5); outline-offset:3px}
span.kav{cursor:default; opacity:1}
.hdiv{width:1px; height:20px; background:rgba(0,0,0,.1)}
.acct{border:0; background:none; font-size:13px; font-weight:500; color:var(--ink); padding:6px 8px; border-radius:8px; max-width:160px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.acct.on, .acct:hover{background:rgba(118,118,128,.12)}
.hdr .pubnav{margin-left:auto}
.tabbar{display:none}
@media (max-width:860px){
  .hbar .seg{display:none}
  .hdr .wrap.hbar{gap:10px}
  .tabbar{display:flex; position:fixed; left:0; right:0; bottom:0; z-index:40; justify-content:space-around; background:rgba(249,249,249,.88); -webkit-backdrop-filter:saturate(180%) blur(20px); backdrop-filter:saturate(180%) blur(20px); border-top:1px solid rgba(0,0,0,.06); padding:8px 6px calc(10px + env(safe-area-inset-bottom,0px))}
  .tabbar button{border:0; background:none; display:flex; flex-direction:column; align-items:center; gap:3px; font-size:10px; font-weight:500; color:#8E8E93; min-width:64px}
  .tabbar button.on{color:var(--teal)}
  body.hastab{padding-bottom:84px}
  body.hastab .toast{bottom:96px}
}
@media (max-width:520px){ .wmark{font-size:21px} .ltile{width:32px; height:32px; border-radius:9px} .ltile svg{width:24px; height:19px} .beta, .hdiv, .acct{display:none} .kav{width:30px; height:30px} }
/* Dětský svět */
.kstack{display:flex; flex-direction:column; gap:32px}
.khead{display:flex; align-items:flex-end; gap:24px; flex-wrap:wrap}
.khead .kt{flex:1; min-width:240px}
.greet{font-size:clamp(32px,5vw,48px); font-weight:700; letter-spacing:-.035em; line-height:1.05; margin-top:4px}
.stw{display:flex; align-items:center; gap:14px; background:#fff; border-radius:16px; padding:12px 18px}
.stw .ring{width:40px; height:40px; border-radius:50%; display:grid; place-items:center; flex:none}
.stw .ring i{width:30px; height:30px; border-radius:50%; background:#fff}
.stw b{display:block; font-size:15px; font-weight:600}
.stw small{display:block; font-size:12px; color:var(--ink-2)}
.pgrid{display:grid; grid-template-columns:repeat(8,minmax(0,1fr)); gap:10px}
.pcard{border:0; background:#fff; color:var(--ink); border-radius:16px; padding:14px 14px 12px; display:flex; flex-direction:column; gap:14px; text-align:left; transition:background .2s}
.pcard .pt{display:flex; justify-content:space-between; align-items:center; color:var(--teal); min-height:20px}
.pcard .nowb{font-size:10px; font-weight:700; padding:2px 7px; border-radius:999px; background:var(--lime); color:var(--ink)}
.pcard .pn{font-size:13px; font-weight:600; line-height:1.25}
.pcard .pd{font-size:12px; color:var(--ink-2); margin-top:-12px}
.pcard.on{background:var(--ink); color:#fff}
.pcard.on .pt{color:var(--lime)}
.pcard.on .pd{color:rgba(255,255,255,.7)}
@media (max-width:1100px){ .pgrid{grid-template-columns:repeat(4,minmax(0,1fr))} }
@media (max-width:640px){ .pgrid{display:flex; overflow-x:auto; scrollbar-width:none; margin:0 -20px; padding:0 20px} .pcard{flex:none; width:112px} }
.mainrow{gap:24px}
@media (min-width:1000px){ .mainrow{grid-template-columns:minmax(0,1.55fr) minmax(0,1fr); align-items:start} }
.card.player{background:#fff; padding:32px; display:flex; flex-direction:column; gap:26px}
@media (max-width:640px){ .card.player{padding:20px; gap:20px} }
.nph{display:flex; gap:28px; align-items:center}
.art{display:grid; place-items:center; color:#fff; width:52px; height:52px; border-radius:12px; flex:none}
.art.big{width:184px; height:184px; border-radius:20px; box-shadow:0 14px 34px rgba(0,0,0,.18)}
.art.sm{width:30px; height:30px; border-radius:8px}
.nphx{flex:1; min-width:0; display:flex; flex-direction:column; gap:8px}
.kick{font-size:13px; font-weight:600; color:var(--teal)}
.nph h2{font-size:clamp(24px,3vw,34px); font-weight:700; letter-spacing:-.03em; line-height:1.1; text-wrap:pretty}
.nph .lead{font-size:16px; color:var(--ink-2)}
.tags{display:flex; gap:6px; flex-wrap:wrap; margin-top:6px}
.tags span{font-size:12px; font-weight:500; padding:5px 10px; border-radius:999px; background:var(--surface-2)}
@media (max-width:640px){ .nph{flex-direction:column; align-items:stretch; gap:16px} .art.big{width:100%; height:150px; border-radius:14px} }
.prog{display:flex; flex-direction:column; gap:8px}
.pbar{height:5px; border-radius:999px; background:rgba(0,0,0,.08); overflow:hidden}
.pbar i{display:block; height:100%; background:var(--ink); border-radius:999px; transition:width .25s linear}
.ptime{display:flex; justify-content:space-between; font-size:12px; color:var(--ink-2); font-variant-numeric:tabular-nums}
.pctrl{display:flex; align-items:center; gap:22px; flex-wrap:wrap}
.rb{border:0; background:none; width:44px; height:44px; border-radius:50%; display:grid; place-items:center; color:var(--ink)}
.rb:hover:not(:disabled){background:var(--surface-2)}
.rb:disabled{opacity:.35}
.bigp{border:0; width:64px; height:64px; border-radius:50%; background:var(--lime); color:var(--ink); display:grid; place-items:center}
.bigp:hover{background:var(--lime-2)}
.bigp svg{width:26px; height:26px}
.nightsw{border:0; background:none; display:flex; align-items:center; gap:10px; font-size:13px; font-weight:500; color:var(--ink)}
.sw2{width:51px; height:31px; border-radius:999px; background:rgba(120,120,128,.24); position:relative; flex:none; transition:background .2s}
.sw2 i{position:absolute; top:2px; left:2px; width:27px; height:27px; border-radius:50%; background:#fff; box-shadow:0 2px 6px rgba(0,0,0,.2); transition:left .2s}
.sw2.on{background:#00D37F}
.sw2.on i{left:22px}
.live{border-top:1px solid rgba(0,0,0,.06); padding-top:24px; display:flex; flex-direction:column; gap:14px}
.lhead{display:flex; align-items:center; gap:10px; font-size:13px; font-weight:600; color:var(--ink-2)}
.lines{display:flex; flex-direction:column; gap:10px; max-height:420px; overflow-y:auto}
.ln{all:unset; cursor:pointer; font-size:clamp(19px,2.2vw,26px); font-weight:700; letter-spacing:-.02em; line-height:1.25; color:#D1D1D6; transition:color .4s; text-wrap:pretty}
.ln.past{color:#AEAEB2}
.ln.cur{color:var(--ink)}
.ln:focus-visible{outline:3px solid rgba(149,64,255,.5); outline-offset:2px; border-radius:6px}
.pextra{display:flex; justify-content:space-between; gap:10px; flex-wrap:wrap}
.pextra .grp{display:flex; gap:8px; flex-wrap:wrap}
.mini{border:0; background:var(--surface-2); color:var(--ink); border-radius:999px; height:32px; padding:0 12px; font-size:13px; font-weight:500; line-height:1; display:inline-flex; align-items:center; gap:6px; white-space:nowrap}
.mini:hover:not(:disabled){background:#DFF8CC}
.mini.lime:hover:not(:disabled){background:var(--lime-2)}
.mini svg{width:12px; height:12px; flex:none}
.mini.lime{background:var(--lime); font-weight:600}
.mini:disabled{opacity:.45}
.card.player .realworld{margin:0; border-radius:18px; border:0; background:var(--surface-2); padding:16px 18px}
.card.player .realworld small{color:var(--teal); font-size:12px}
.card.player .realworld p{font-size:17px}
.card.player .dosenote{margin:0}
.player .opts{display:grid; gap:10px; margin:0}
.player .opt, .ov .opt{all:unset; box-sizing:border-box; cursor:pointer; background:var(--surface-2); border-radius:16px; padding:14px 16px; font-size:18px; font-weight:600; color:var(--ink); margin:0}
.player .opt.right, .ov .opt.right{background:#00D37F; color:var(--ink)}
.player .opt.wrong, .ov .opt.wrong{background:#FFE1E1; color:#9B1C1C}
.brushrow{text-align:center}
.brush{background:var(--lime)}
.done h2{font-weight:700}
.done .eqsheep{margin:0 auto}
.mini2{display:flex; gap:10px; align-items:center; background:var(--surface-2); border-radius:14px; padding:8px 12px; text-align:left}
.mini2 .art{width:32px; height:32px; border-radius:8px}
.challenge{border:0; background:var(--surface-2)}
.card.mix{background:#fff; padding:28px 24px 14px; display:flex; flex-direction:column; gap:14px}
.card.mix .sechead{margin:0}
.card.mix .sub{margin-top:-12px; font-size:14px}
.chips2{display:flex; gap:6px; flex-wrap:wrap}
.chips2 button{border:0; padding:6px 12px; border-radius:999px; font-size:13px; font-weight:500; background:var(--surface-2); color:var(--ink)}
.chips2 button.on{background:var(--ink); color:#fff}
.mixlist{display:flex; flex-direction:column}
.mrow{all:unset; box-sizing:border-box; cursor:pointer; display:flex; align-items:center; gap:14px; padding:10px 8px; border-radius:14px}
.mrow:hover, .mrow.cur{background:var(--surface-2)}
.mrow:focus-visible{outline:3px solid rgba(149,64,255,.5)}
.mrow .tx{flex:1; min-width:0}
.mrow b{display:block; font-size:15px; font-weight:600; line-height:1.3}
.mrow.cur b{color:var(--teal)}
.mrow .meta{display:block; font-size:12px; color:var(--ink-2); margin-top:2px}
.mrow em{font-style:normal; color:var(--teal); font-weight:600}
.pst{width:32px; height:32px; border-radius:50%; background:var(--surface-2); display:grid; place-items:center; flex:none}
.pst svg{width:14px; height:14px}
.mrow:hover .pst{background:#fff}
/* Car Mode */
.carv{background:var(--ink); color:#fff; border-radius:28px; padding:clamp(22px,4vw,44px) clamp(18px,4vw,48px); display:flex; flex-direction:column; gap:28px}
.carhead{display:flex; align-items:flex-end; gap:20px; flex-wrap:wrap}
.carhead > div:first-child{flex:1; min-width:240px}
.carv .kline{color:rgba(255,255,255,.6)}
.carv h1{font-size:clamp(30px,5vw,48px); font-weight:700; letter-spacing:-.035em; line-height:1.05; margin-top:4px}
.clens{display:flex; gap:8px; flex-wrap:wrap}
.clens button, .crew button{border:0; padding:14px 22px; border-radius:999px; font-size:17px; font-weight:700; background:rgba(255,255,255,.1); color:#fff; white-space:nowrap}
.clens button.on, .crew button.on{background:var(--lime); color:var(--ink)}
.crew{display:flex; gap:8px; align-items:center; flex-wrap:wrap}
.crew > span{font-size:14px; color:rgba(255,255,255,.6); margin-right:6px}
.crew button{font-size:15px; padding:10px 16px; display:inline-flex; align-items:center; gap:8px}
.crew .dot{width:10px; height:10px; border-radius:50%}
.cgrid{display:grid; gap:24px}
@media (min-width:900px){ .cgrid{grid-template-columns:minmax(0,1.2fr) minmax(0,1fr)} }
.cplay{background:rgba(255,255,255,.06); border-radius:28px; padding:36px; display:flex; flex-direction:column; align-items:center; gap:22px; text-align:center}
.cplay .kick, .ov .kick{color:var(--lime); font-size:14px}
.cplay h2{font-size:clamp(22px,3vw,30px); font-weight:700; letter-spacing:-.03em; line-height:1.15; margin-top:4px; max-width:520px}
.cbar{width:100%; max-width:520px; height:6px; border-radius:999px; background:rgba(255,255,255,.14); overflow:hidden}
.cbar i{display:block; height:100%; background:var(--lime)}
.cctrl{display:flex; align-items:center; justify-content:center; gap:clamp(18px,4vw,36px)}
.cbtn{border:0; width:clamp(72px,10vw,96px); height:clamp(72px,10vw,96px); border-radius:50%; background:rgba(255,255,255,.1); color:#fff; display:grid; place-items:center}
.cbtn:hover:not(:disabled){background:rgba(255,255,255,.18)}
.cbtn:disabled{opacity:.35}
.cbtn svg{width:36px; height:36px}
.cgo{border:0; width:clamp(120px,16vw,160px); height:clamp(120px,16vw,160px); border-radius:50%; background:var(--lime); color:var(--ink); display:grid; place-items:center}
.cgo:hover:not(:disabled){background:var(--lime-2)}
.cgo:disabled{opacity:.4}
.cgo svg{width:56px; height:56px}
.cnote{font-size:14px; color:rgba(255,255,255,.65)}
.cnote b{color:#fff}
.cside{display:flex; flex-direction:column; gap:16px}
.cmodes{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px}
.cmodes button{border:0; border-radius:22px; padding:18px 16px; background:rgba(255,255,255,.08); color:#fff; display:flex; flex-direction:column; gap:10px; min-height:96px; text-align:left; font-size:16px; font-weight:700; line-height:1.2}
.cmodes button.on{background:#fff; color:var(--ink)}
.cq{background:rgba(255,255,255,.06); border-radius:24px; padding:20px 22px; display:flex; flex-direction:column; gap:4px}
.cqh{display:flex; align-items:baseline; margin-bottom:8px; gap:10px}
.cqh b{font-size:18px; flex:1}
.cqh span, .cq .more{font-size:13px; color:rgba(255,255,255,.6)}
.cqr{all:unset; cursor:pointer; display:flex; align-items:center; gap:12px; padding:8px 0}
.cqr .art{width:40px; height:40px; border-radius:10px}
.cqr .t{flex:1; font-size:15px; font-weight:600}
.cqr .d{font-size:13px; color:rgba(255,255,255,.55); font-variant-numeric:tabular-nums}
.cqr:hover .t{color:var(--lime)}
.carv .detect{background:rgba(255,255,255,.06); border:0; border-radius:24px; color:#fff; display:flex; gap:16px; align-items:center; padding:18px 22px; margin:0}
.carv .detect .e{color:var(--lime)}
.carv .detect .tx{flex:1}
.carv .detect p{color:rgba(255,255,255,.65); font-size:14px}
.overlay{background:var(--ink); color:#fff}
.ov .top .muted{color:rgba(255,255,255,.6)}
.ov .btn.ghost{background:rgba(255,255,255,.1); color:#fff; box-shadow:none}
.ov .big{align-items:center; gap:14px}
.ov .big h2{color:#fff; margin:0}
.ov .big .line{color:#fff}
.ov .big .muted{color:rgba(255,255,255,.65)}
.ov .challenge{background:rgba(255,255,255,.08); color:#fff}
.ov .opts{display:grid; gap:10px; width:100%; max-width:560px}
.ov .opt{background:rgba(255,255,255,.1); color:#fff; font-size:22px}
.ov .cctrl{padding:10px 0 20px}
.dim{background:#000; color:rgba(255,255,255,.4); font-size:14px}
.dim svg{width:80px; height:auto; opacity:.5}
/* Velín: přehled */
.ptabs{gap:2px; background:rgba(118,118,128,.12); padding:3px; border-radius:10px; width:max-content; max-width:100%}
.ptabs button{border:0; background:transparent; border-radius:8px; padding:6px 14px; font-size:13px; font-weight:500; color:var(--ink)}
.ptabs button.on{background:#fff; color:var(--ink); box-shadow:0 1px 3px rgba(0,0,0,.12); border:0; font-weight:600}
.ogrid{display:grid; gap:20px; grid-template-columns:repeat(auto-fit,minmax(250px,1fr)); margin-bottom:20px}
.ogrid .oweek{grid-column:1/-1}
@media (min-width:1100px){ .ogrid{grid-template-columns:repeat(2,minmax(0,1fr)) minmax(0,1.3fr)} .ogrid .oweek{grid-column:auto} }
.okid{display:flex; flex-direction:column; gap:16px; padding:22px}
.okh{display:flex; align-items:center; gap:12px}
.okh .kav{width:44px; height:44px; font-size:17px; font-weight:700}
.nm{flex:1; min-width:0}
.nm b{display:block; font-size:17px; font-weight:700}
.nm small{display:block; font-size:13px; color:var(--ink-2)}
.oused{display:flex; align-items:baseline; gap:10px}
.oused b{font-size:30px; font-weight:700; letter-spacing:-.03em; flex:1}
.oused span{font-size:13px; color:var(--ink-2)}
.obar{height:8px; border-radius:999px; background:var(--surface-2); overflow:hidden; margin-top:-8px}
.obar i{display:block; height:100%; border-radius:999px; transition:width .3s}
.ostep, .orow .stp{display:flex; align-items:center; gap:10px}
.ostep{background:var(--surface-2); border-radius:14px; padding:8px 10px 8px 14px}
.ostep > span:first-child{flex:1; font-size:14px; font-weight:500}
.stp{display:flex; align-items:center; background:#fff; border-radius:10px; overflow:hidden}
.orow .stp{background:var(--surface-2)}
.stp button{border:0; background:none; width:40px; height:32px; font-size:20px; font-weight:500; color:var(--ink)}
.stp button:hover{background:var(--surface-2)}
.stp b{min-width:64px; text-align:center; font-size:14px; font-weight:600}
.oweek{padding:22px; display:flex; flex-direction:column; gap:12px}
.oweek .sechead{margin:0}
.oweek .sechead h2{font-size:17px}
.olegend{display:flex; gap:12px; flex-wrap:wrap; font-size:12px; color:var(--ink-2)}
.olegend i{display:inline-block; width:8px; height:8px; border-radius:50%; margin-right:5px}
.wbars{display:flex; align-items:flex-end; gap:10px; min-height:170px}
.wd{flex:1; display:flex; flex-direction:column; align-items:center; gap:6px}
.wcol{display:flex; gap:3px; align-items:flex-end; height:140px}
.wcol i{width:10px; border-radius:999px; min-height:0}
.wd span{font-size:12px; color:var(--ink-2)}
.wd span.today{font-weight:700; color:var(--ink)}
.ogrid3{display:grid; gap:20px; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); align-items:start}
.olist{padding:8px 22px}
.olist h2, .odinner h2{font-size:17px; font-weight:700; padding:14px 0 6px}
.orow{all:unset; box-sizing:border-box; cursor:pointer; display:flex; align-items:center; gap:12px; padding:10px 0; border-bottom:1px solid var(--line); width:100%}
.orow:last-child{border-bottom:0}
div.orow{cursor:default}
.orow .nm{font-size:15px; font-weight:500}
.orow .nm b{font-size:15px; font-weight:500}
.orow:focus-visible{outline:3px solid rgba(149,64,255,.5)}
.odinner{background:var(--teal); color:#fff; padding:22px; display:flex; flex-direction:column; gap:12px}
.odinner h2{padding:0}
.odinner > p{font-size:13px; color:rgba(255,255,255,.7); margin-top:-8px}
.dq{background:rgba(255,255,255,.08); border-radius:16px; padding:14px; display:flex; flex-direction:column; gap:4px}
.dq small{font-size:12px; font-weight:600; color:var(--lime)}
.dq b{font-size:15px; font-weight:600; line-height:1.3}
/* Moje rodina */
.frow{display:grid; gap:20px; margin-bottom:20px}
@media (min-width:900px){ .frow{grid-template-columns:minmax(0,1.3fr) minmax(0,1fr); align-items:start} }
.chal{background:var(--lime); border-radius:28px; padding:30px; display:flex; gap:26px; align-items:center}
.chal .cx{flex:1; display:flex; flex-direction:column; gap:10px}
.chal .ck{font-size:13px; font-weight:700; letter-spacing:.04em; text-transform:uppercase; color:var(--teal)}
.chal h2{font-size:clamp(24px,3vw,32px); font-weight:700; letter-spacing:-.03em; line-height:1.1}
.cbar2{height:12px; border-radius:999px; background:rgba(26,26,51,.12); overflow:hidden; margin-top:6px}
.cbar2 i{display:block; height:100%; background:var(--ink); border-radius:999px; transition:width .4s}
.chal b{font-size:15px; font-weight:600}
.chs{width:150px; height:150px; border-radius:50%; background:var(--ink); display:grid; place-items:center; flex:none}
@media (max-width:560px){ .chal{padding:20px} .chs{width:84px; height:84px} .chs svg{width:60px; height:48px} }
.list2{padding:8px 22px 14px; margin-bottom:20px}
.list2 > h2, .list2 .sechead{padding:14px 0 6px; margin:0}
.list2 h2{font-size:17px; font-weight:700}
.lrow{all:unset; box-sizing:border-box; display:flex; align-items:center; gap:12px; padding:12px 0; border-bottom:1px solid var(--line); width:100%; flex-wrap:wrap}
button.lrow{cursor:pointer}
.lrow:last-of-type{border-bottom:0}
.lrow .rank{width:24px; font-size:15px; font-weight:700; color:var(--ink-2)}
.lrow > b{font-size:17px; font-variant-numeric:tabular-nums}
.lrow .kav{width:40px; height:40px; font-size:16px; font-weight:700; opacity:1}
.lrow .art{width:44px; height:44px; border-radius:10px}
.lrow .nm b{font-size:15px; font-weight:600}
.tagm{font-size:12px; font-weight:600; padding:4px 10px; border-radius:999px; background:var(--surface-2); color:var(--teal)}
.list2 form.draft{margin:10px 0}
/* Ostatní stránky v nových barvách */
.footer, .ftr{background:var(--ink)}
.ftr .wmark{color:#fff; font-size:24px}
.fname{gap:12px}
.fsupport{background:rgba(198,242,34,.08); border-color:rgba(198,242,34,.35)}
.doc a{color:var(--teal)}
.chipbtn{border:0; background:#fff; box-shadow:inset 0 0 0 1.5px rgba(0,0,0,.08)}
.inp, .field input, .field select, input[type=text], input[type=email], input[type=password], input[type=number], input[type=time], select{border-radius:12px}
.notif{background:#fff; border-radius:20px}
.kpi{border:0}
.gate{background:#fff; border-radius:24px}
/* Design v2: spodní část Dětského světa */
.card.brushcard{display:flex; flex-direction:column; gap:20px}
.bh2{display:flex; gap:16px; align-items:flex-start}
.bt2{flex:1; min-width:0}
.bt2 h2{font-size:22px; font-weight:700; margin:2px 0 4px}
.bt2 p{font-size:14px}
.brushcard .bclock{font-family:var(--font); font-size:34px; font-weight:700; letter-spacing:-.03em; font-variant-numeric:tabular-nums; color:var(--ink); line-height:1}
.quads{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:8px; margin:0}
.quad{display:flex; align-items:center; gap:10px; border:0; border-radius:14px; padding:10px 12px; background:var(--surface-2); text-align:left; transition:background .2s, color .2s}
.quad .qn{width:26px; height:26px; border-radius:50%; background:#fff; display:grid; place-items:center; font-size:12px; font-weight:700; flex:none}
.quad span{font-family:var(--font); color:inherit}
.quad b{display:block; font-size:13px; font-weight:600; margin:0}
.quad small{display:block; font-size:11px; color:var(--ink-2); font-variant-numeric:tabular-nums}
.quad.on{background:var(--ink); color:#fff; box-shadow:none; border:0}
.quad.on .qn{background:var(--lime); color:var(--ink)}
.quad.on small{color:rgba(255,255,255,.7)}
.quad.past{opacity:.45}
@media (max-width:700px){ .quads{grid-template-columns:repeat(2,minmax(0,1fr))} .brushcard .bclock{font-size:26px} }
.brow{display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap}
.brow .muted{font-size:14px}
.brow .muted b{color:var(--ink)}
.btn.brushgo{margin:0; border-radius:999px; padding:11px 20px; font-size:15px; display:inline-block}
.map .rowhead, .album .rowhead{display:flex; justify-content:space-between; align-items:baseline; gap:10px}
.map h2, .album h2{font-size:22px; font-weight:700; margin-top:4px}
.map > p, .album .sub{font-size:14px}
.radar text{font-weight:600; font-size:12px}
.tiles{display:flex; flex-direction:column; gap:2px; margin-top:4px}
.tile{all:unset; box-sizing:border-box; cursor:pointer; display:flex; align-items:center; gap:10px; padding:7px 8px; border-radius:12px; font-size:14px}
.tile:hover{background:var(--surface-2)}
.tile:focus-visible{outline:3px solid rgba(149,64,255,.5)}
.tile .tn{width:130px; font-weight:500}
.tile .tb{flex:1; height:6px; border-radius:999px; background:var(--surface-2); overflow:hidden}
.tile .tb i{display:block; height:100%; border-radius:999px}
.tile .pc{width:42px; text-align:right; font-family:var(--font); font-size:13px; font-weight:600; color:var(--ink-2); font-variant-numeric:tabular-nums}
.mission{border:0; border-radius:18px; background:var(--lime); padding:16px 18px; margin-top:14px}
.mission .mh span{font-family:var(--font); font-weight:700; color:var(--ink); font-variant-numeric:tabular-nums}
.mission p{font-size:14px}
.mbar{height:8px; background:rgba(26,26,51,.12); border-radius:999px}
.mbar i{background:var(--ink); border-radius:999px}
.cards{gap:10px}
.face{border:0; border-radius:18px; background:var(--surface-2); padding:14px}
.face .top .ot{border:0; background:#fff; color:var(--ink); font-weight:600; font-size:11px}
.face .cat{color:var(--teal); font-weight:600}
.face b{font-size:15px; font-weight:600}
.face.back{background:var(--ink); color:#fff}
.face.back button{font-weight:600; background:var(--lime); color:var(--ink)}
.face.back button.ghost{background:rgba(255,255,255,.14); color:#fff}
.rar{font-weight:600; background:#fff}
.rar.E{background:var(--lime)}
.rar.V{background:#CDBFFF; color:var(--ink)}
.lockc{border:0; background:var(--surface-2); border-radius:18px; padding:14px; gap:10px; align-items:flex-start; justify-content:space-between; text-align:left; min-height:150px}
.lockc .art{width:40px; height:40px; border-radius:10px; opacity:.55; filter:saturate(.6)}
.lockc b{color:var(--ink-2); font-size:14px; font-weight:600}
.lockc span{display:inline-flex; align-items:center; gap:6px; color:var(--teal); font-weight:600; font-size:13px}
.lockc span svg{width:12px; height:12px}
.lockc:hover{background:#DFF8CC}
.lockc:hover .art{opacity:1; filter:none}
.lvl .n{background:var(--lime); color:var(--ink); font-weight:700}
.lvl h2{font-weight:700}
.lvl .bar{height:8px; background:var(--surface-2); border-radius:999px}
.lvl .bar i{background:var(--ink); border-radius:999px}
.badge .medal{background:var(--surface-2); border:0; width:56px; height:56px; font-size:24px}
.badge.got .medal{background:var(--lime); box-shadow:none}
.badge b{font-weight:600}
.fbadges .bi{color:var(--lime)}
.fname{text-decoration:none!important}
/* ========== Design v2, revize 30. 10.: spodní část Dětského světa a patička ========== */
.pill{display:inline-block; font-size:12px; font-weight:600; padding:4px 10px; border-radius:999px; background:var(--surface-2); color:var(--teal); flex:none}
.pill.lav{background:#CDBFFF; color:var(--ink)}
.chead{display:flex; align-items:center; gap:10px}
.chead .who{margin-left:auto; font-size:13px; font-weight:600}
.chead .who.muted{font-weight:400}
.chead .who b{color:var(--ink); font-weight:700}
/* Zubní časovač */
.card.brush3{padding:32px; display:flex; flex-direction:column; gap:24px}
.bh3{display:flex; align-items:center; gap:20px}
.bico{width:60px; height:60px; border-radius:16px; background:var(--surface-2); color:var(--teal); display:grid; place-items:center; flex:none}
.bt3{flex:1; min-width:0}
.bt3t{display:flex; align-items:center; gap:10px; flex-wrap:wrap}
.bt3 h2{font-size:26px; font-weight:700; letter-spacing:-.025em}
.bt3 p{font-size:15px; color:var(--ink-2); margin-top:3px}
.brush3 .bclock{font-size:48px; font-weight:700; letter-spacing:-.03em; font-variant-numeric:tabular-nums; color:var(--ink); line-height:1}
.brush3 .bclock.run{color:var(--teal)}
.bbtn{border:0; display:flex; align-items:center; gap:8px; padding:14px 22px; border-radius:999px; background:var(--lime); color:var(--ink); font-size:16px; font-weight:700; white-space:nowrap}
.bbtn:hover:not(:disabled){background:var(--lime-2)}
.bbtn:disabled{opacity:.45}
.bquads{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:12px}
.bq{border-radius:18px; padding:16px; background:rgba(26,26,51,.04); color:var(--ink); display:flex; gap:14px; align-items:center; transition:background .3s; position:relative; overflow:hidden}
.bq.act{background:var(--ink); color:#fff}
.bq.done{background:var(--surface-2)}
.bq .cells{display:grid; grid-template-columns:14px 14px; gap:3px; flex:none}
.bq .cells i{width:14px; height:14px; border-radius:4px}
.bqt{flex:1; min-width:0}
.bqt small{display:block; font-size:12px; font-variant-numeric:tabular-nums; opacity:.65}
.bqt b{display:block; font-size:17px; font-weight:700; letter-spacing:-.01em}
.bok{width:26px; height:26px; border-radius:50%; background:#00D37F; color:#fff; display:grid; place-items:center; flex:none}
.bqbar{position:absolute; left:0; bottom:0; height:4px; background:var(--lime); transition:width 1s linear}
.bnow{display:flex; align-items:center; gap:14px; background:var(--surface-2); border-radius:16px; padding:14px 18px}
.bnow .eqsheep{flex:none; width:44px; height:auto}
.bnow .st{font-size:15px; color:var(--ink-2); flex:none}
.bnow .bline{font-size:15px; font-weight:600; flex:1; min-width:0; color:var(--ink)}
@media (max-width:900px){ .bh3{flex-wrap:wrap} .bt3{flex-basis:calc(100% - 80px)} .brush3 .bclock{font-size:40px} .bquads{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (max-width:560px){ .card.brush3{padding:20px} .bico{width:48px; height:48px; border-radius:14px} .bt3{flex-basis:calc(100% - 68px)} .bt3 h2{font-size:21px} .bt3 p{font-size:14px} .brush3 .bclock{flex:1; font-size:36px} .bq{padding:12px; gap:10px} .bqt b{font-size:15px} .bnow{flex-wrap:wrap; gap:2px 8px; padding:12px 14px} .bnow .eqsheep{display:none} .bnow .bline{flex-basis:100%} }
/* Mapa vědění a mise */
@media (min-width:1000px){ .lowrow{grid-template-columns:minmax(0,1fr) minmax(0,1.45fr)} }
.card.map2, .card.album2{padding:30px; display:flex; flex-direction:column; gap:18px}
.map2 h2, .album2 h2{font-size:26px; font-weight:700; letter-spacing:-.025em}
.map2 p.muted, .album2 p.muted{font-size:15px; margin-top:3px; text-wrap:pretty}
.radar2{display:block; width:100%; max-width:400px; margin:0 auto}
.radar2 .rl{font-size:12px; font-weight:600; fill:var(--ink)}
.radar2 .rp{font-size:12px; font-weight:700}
.wgrid{display:grid; grid-template-columns:1fr 1fr; gap:8px}
.wcell{border:0; background:var(--surface-2); border-radius:14px; padding:10px 12px; display:flex; flex-direction:column; gap:7px; text-align:left; color:var(--ink)}
.wcell:hover{background:#DFF8CC}
.wt{display:flex; align-items:center; gap:8px}
.wt i{width:8px; height:8px; border-radius:50%; flex:none}
.wt span{flex:1; font-size:13px; font-weight:600}
.wt b{font-size:13px; font-weight:700; font-variant-numeric:tabular-nums; white-space:nowrap}
.wb{height:4px; border-radius:999px; background:rgba(26,26,51,.08); overflow:hidden}
.wb i{display:block; height:100%; border-radius:999px}
.miss2{background:var(--ink); color:#fff; border-radius:18px; padding:18px; display:flex; flex-direction:column; gap:10px}
.miss2 .mh{display:flex; align-items:baseline; gap:10px}
.miss2 .mh b{font-size:16px; font-weight:700; flex:1}
.miss2 .mh span{font-size:14px; font-weight:700; color:var(--lime); font-variant-numeric:tabular-nums}
.miss2 p{font-size:14px; color:rgba(255,255,255,.75); text-wrap:pretty}
.miss2 p b{color:#fff; font-weight:600}
.miss2 .mb{height:6px; border-radius:999px; background:rgba(255,255,255,.14); overflow:hidden}
.miss2 .mb i{display:block; height:100%; background:var(--lime); border-radius:999px; transition:width .4s}
/* Album */
.acards{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px}
.acard{border:0; height:200px; border-radius:20px; padding:16px; background:rgba(26,26,51,.04); color:#fff; display:flex; flex-direction:column; gap:8px; text-align:left; position:relative; overflow:hidden; transition:background .3s, transform .2s}
.acard:hover{transform:translateY(-2px)}
.acard .ak{display:flex; align-items:center; justify-content:space-between; gap:6px; font-size:11px; font-weight:700; letter-spacing:.02em; text-transform:uppercase; opacity:.75}
.acard .ak span{white-space:nowrap; overflow:hidden; text-overflow:ellipsis; min-width:0}
.acard .aart{flex:1; display:flex; align-items:center; justify-content:center}
.acard .aart svg{width:56px; height:56px; padding:15px; border-radius:50%; background:rgba(255,255,255,.16); box-sizing:border-box}
.acard b{font-size:15px; font-weight:700; line-height:1.25; text-wrap:pretty; display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden}
.acard .acta{font-size:12px; font-weight:600; color:rgba(255,255,255,.8)}
.acard.lock{color:#8E8E93}
.acard.lock .aart svg{background:rgba(26,26,51,.06); color:#AEAEB2}
.acard.lock .acta{color:var(--ink)}
.acard.flip{background:#fff; color:var(--ink); box-shadow:inset 0 0 0 2px var(--ink)}
.acard.flip .fact{flex:1; display:-webkit-box; -webkit-line-clamp:6; font-size:15px}
.acard.flip .acta{color:var(--teal)}
.amore{border:0; align-self:center; padding:10px 20px; border-radius:999px; background:var(--surface-2); font-size:14px; font-weight:600; color:var(--ink)}
.amore:hover{background:var(--lime)}
@media (max-width:700px){ .acards{grid-template-columns:repeat(2,minmax(0,1fr))} .acard{height:180px} .card.map2, .card.album2{padding:20px} }
/* Úroveň a odznaky */
.card.lvl2{padding:30px; display:flex; flex-direction:column; gap:24px}
.lh{display:flex; align-items:center; gap:20px; flex-wrap:wrap}
.lnum{width:64px; height:64px; border-radius:50%; background:var(--ink); color:var(--lime); display:grid; place-items:center; font-size:28px; font-weight:700; flex:none}
.lt{flex:1; min-width:220px}
.lt h2{font-size:26px; font-weight:700; letter-spacing:-.025em}
.lt p{font-size:15px; margin-top:2px}
.lp{width:320px; max-width:100%; display:flex; flex-direction:column; gap:6px}
.lbar{height:10px; border-radius:999px; background:var(--surface-2); overflow:hidden}
.lbar i{display:block; height:100%; background:var(--ink); border-radius:999px; transition:width .4s}
.ll{display:flex; justify-content:space-between; font-size:12px; color:var(--ink-2)}
.bdg{display:flex; gap:8px; overflow-x:auto; scrollbar-width:none; margin:0 -30px; padding:6px 30px}
.bd{flex:none; width:128px; display:flex; flex-direction:column; align-items:center; text-align:center; gap:8px}
.bd .bm{width:72px; height:72px; border-radius:50%; background:rgba(26,26,51,.05); color:#AEAEB2; display:grid; place-items:center}
.bd.got .bm{background:var(--lime); color:var(--ink); box-shadow:0 0 0 5px rgba(198,242,34,.3)}
.bd b{font-size:14px; font-weight:700; color:var(--ink-2)}
.bd.got b{color:var(--ink)}
.bd .bdsc{font-size:12px; color:var(--ink-2); line-height:1.35}
.bd .bpr{font-size:11px; font-weight:700; white-space:nowrap; padding:2px 8px; border-radius:999px; background:var(--surface-2); color:var(--ink-2)}
.bd.got .bpr{background:var(--ink); color:var(--lime)}
@media (max-width:560px){ .card.lvl2{padding:20px} .bdg{margin:0 -20px; padding:6px 20px} }
/* Patička */
.ftr{background:var(--ink); color:#fff; padding:56px 0 28px}
.ftr .wrap{display:flex; flex-direction:column; gap:40px}
.fstats{grid-template-columns:repeat(4,minmax(0,1fr)); gap:20px; padding:0; border:0}
.fstats div{text-align:left}
.fstats b{font-size:clamp(36px,5vw,56px); font-weight:700; letter-spacing:-.04em; line-height:1}
.fstats b.lime{color:var(--lime)}
.fstats span{display:block; font-size:15px; color:rgba(255,255,255,.6); margin-top:6px}
.fbadges{grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; padding:0 0 40px; border-bottom:1px solid rgba(255,255,255,.1)}
@media (max-width:900px){ .fbadges{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (max-width:560px){ .fbadges{grid-template-columns:1fr} }
.fbadges li{align-items:flex-start; gap:14px; background:rgba(255,255,255,.05); border:0; border-radius:18px; padding:18px}
.fbadges .bi{width:40px; height:40px; border-radius:12px; background:rgba(198,242,34,.12); color:var(--lime)}
.fbadges b{font-size:15px; font-weight:700}
.fbadges small{font-size:13px; color:rgba(255,255,255,.6); margin-top:2px}
.fgrid{padding:0; gap:28px}
.fbrand{display:flex; flex-direction:column; gap:18px}
.fbrand p{font-size:15px; color:rgba(255,255,255,.65); line-height:1.55; max-width:340px; margin:0}
.ftr .ltile{width:40px; height:40px}
.ftr .wmark{font-size:27px; color:#fff}
.fsupport{background:rgba(255,255,255,.05); border:0; border-radius:18px; padding:18px; display:flex; flex-direction:column; gap:12px; max-width:340px; margin:0}
.fsupport b{font-size:15px; font-weight:700}
.fsupport p{font-size:13px; color:rgba(255,255,255,.6); margin:-10px 0 0}
.fmail{display:inline-flex; align-items:center; gap:8px; align-self:flex-start; padding:10px 16px; font-size:14px; font-weight:700}
.fmail:hover{background:var(--lime-2); text-decoration:none!important}
.fcol h2{font-size:12px; font-weight:700; letter-spacing:.08em; color:rgba(255,255,255,.45); margin-bottom:14px}
.fcol li{margin:0 0 10px}
.fcol a{font-size:14px; color:rgba(255,255,255,.75)}
.fcol a:hover{color:var(--lime); text-decoration:none}
.fbottom{border-top:1px solid rgba(255,255,255,.1); padding-top:24px; font-size:13px; color:rgba(255,255,255,.5)}

/* Spolupráce */
.coop .kline{margin-bottom:2px}
.ccards{display:grid; gap:14px; grid-template-columns:repeat(2,minmax(0,1fr)); margin:8px 0 6px}
@media (max-width:640px){ .ccards{grid-template-columns:1fr} }
.ccard{background:#fff; border-radius:22px; padding:20px; display:flex; flex-direction:column; gap:8px}
.ccard .cic{width:44px; height:44px; border-radius:12px; background:var(--surface-2); color:var(--teal); display:grid; place-items:center}
.ccard h3{font-size:18px; font-weight:700; margin:4px 0 0}
.ccard p{font-size:15px; color:var(--ink-2); margin:0}
.ccard ul{margin:2px 0 6px; padding-left:18px; font-size:14px}
.ccard li{margin:3px 0}
.ccard .btn{margin-top:auto; align-self:flex-start; display:inline-flex; align-items:center; gap:6px}
.coop .note{font-size:13px; color:var(--ink-2)}
.cbox{background:#fff; border-radius:22px; padding:22px; margin:22px 0 4px; display:flex; flex-wrap:wrap; gap:14px 24px; align-items:center}
.cbox > div:first-child{flex:1; min-width:260px}
.cbox h2{margin:0 0 6px}
.cbox p{margin:0; color:var(--ink-2)}
.cbox .btns{margin:0; justify-content:flex-start}
.cbox .btn{display:inline-flex; align-items:center; gap:6px}
.steps{list-style:none; padding:0; margin:8px 0; display:grid; gap:12px; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); counter-reset:st}
.steps li{background:#fff; border-radius:18px; padding:16px 18px; display:flex; flex-direction:column; gap:4px; counter-increment:st; margin:0}
.steps li::before{content:counter(st); width:30px; height:30px; border-radius:50%; background:var(--lime); display:grid; place-items:center; font-weight:700; font-size:14px; margin-bottom:6px}
.steps b{font-size:16px}
.steps span{font-size:14px; color:var(--ink-2)}
.ccta{background:var(--ink); color:#fff; border-radius:22px; padding:22px; margin-top:26px; display:flex; flex-wrap:wrap; gap:14px 20px; align-items:center; justify-content:space-between}
.ccta b{display:block; font-size:20px}
.ccta span{font-size:14px; color:rgba(255,255,255,.65)}
.ccta .btn{display:inline-flex; align-items:center; gap:6px}
.coop a.btn{color:var(--ink); text-decoration:none}
/* Obsahové stránky přes celou šířku */
.doc.wide{max-width:none}
.doc.wide .lead{max-width:none}
@media (min-width:900px){ .doc.wide .feats{grid-template-columns:repeat(3,minmax(0,1fr))} }
@media (min-width:1100px){ .doc.wide .ccards{grid-template-columns:repeat(4,minmax(0,1fr))} }
.feat b.co{display:inline; font-size:inherit; margin:0; color:var(--ink)}
/* Kontakt (podle návrhu Stupidio Kontakt) */
.kx{display:flex; flex-direction:column; gap:0}
.kx-hero{display:grid; grid-template-columns:minmax(0,1fr) 340px; gap:48px; align-items:end; padding:48px 0 48px}
.kx-hero .kick{font-size:15px}
.kx-hero h1{margin:8px 0 0; font-size:clamp(40px,6vw,64px); font-weight:700; letter-spacing:-.04em; line-height:1.02; text-wrap:balance}
.kx-hero p{margin:18px 0 0; font-size:19px; line-height:1.5; color:var(--ink-2); max-width:600px; text-wrap:pretty}
.kx-sheep{background:var(--ink); border-radius:28px; height:220px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:14px}
.kx-sheep span{font-size:13px; font-weight:600; color:rgba(255,255,255,.7)}
.kx-chs{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px; padding-bottom:48px}
.kx-ch{all:unset; box-sizing:border-box; cursor:pointer; color:var(--ink); background:#fff; border-radius:24px; padding:26px; display:flex; flex-direction:column; gap:18px; transition:box-shadow .2s}
.kx-ch:hover{box-shadow:0 10px 30px rgba(0,0,0,.08)}
.kx-ch:focus-visible{outline:3px solid rgba(149,64,255,.5); outline-offset:2px}
.kx-ci{width:48px; height:48px; border-radius:14px; display:grid; place-items:center; flex:none}
.kx-ct b{display:block; font-size:19px; font-weight:700; letter-spacing:-.02em}
.kx-ct span{display:block; font-size:14px; color:var(--ink-2); margin-top:4px; line-height:1.45}
.kx-cta{display:flex; align-items:center; gap:6px; font-size:15px; font-weight:600; color:var(--teal); margin-top:auto}
.kx-grid{display:grid; grid-template-columns:minmax(0,1.5fr) minmax(0,1fr); gap:24px; align-items:start; padding-bottom:24px}
.kx-card{background:#fff; border-radius:28px; padding:40px}
.kx-card h2{font-size:28px; font-weight:700; letter-spacing:-.03em}
.kx-card form{display:flex; flex-direction:column; gap:22px}
.kx-fh p{font-size:15px; color:var(--ink-2); margin-top:4px}
.kx-lbl{display:block; font-size:13px; font-weight:600; color:var(--ink)}
.kx-row{display:flex}
.kx-row > span:first-child{flex:1}
.kx-cnt{font-weight:400; color:#AEAEB2; font-variant-numeric:tabular-nums}
.kx-who{display:flex; flex-direction:column; gap:10px}
.kx-topics{display:flex; gap:8px; flex-wrap:wrap}
.kx-topics button{border:0; display:flex; align-items:center; gap:8px; padding:10px 16px; border-radius:999px; font-size:14px; font-weight:600; background:#F5F5F7; color:var(--ink); transition:background .15s}
.kx-topics button.on{background:var(--ink); color:#fff}
.kx-two{display:grid; grid-template-columns:1fr 1fr; gap:16px}
.kx-f{display:flex; flex-direction:column; gap:8px}
.kx-in{border:0; box-sizing:border-box; width:100%; height:50px; padding:0 16px; border-radius:14px; background:#F5F5F7; font:inherit; font-size:16px; color:var(--ink)}
textarea.kx-in{height:auto; padding:14px 16px; line-height:1.5; resize:vertical; min-height:150px}
.kx-in::placeholder{color:#AEAEB2}
.kx-in:focus{outline:3px solid rgba(149,64,255,.5); outline-offset:0}
.kx-in.bad{box-shadow:inset 0 0 0 2px #D70015}
.kx-err{font-size:12px; color:#D70015; min-height:14px}
.kx-hp{position:absolute; left:-9999px; width:1px; height:1px; opacity:0}
.kx-send{display:flex; align-items:center; gap:16px; flex-wrap:wrap}
.kx-cons{display:flex; align-items:flex-start; gap:10px; flex:1; min-width:240px; font-size:13px; color:var(--ink-2); line-height:1.45; cursor:pointer; position:relative}
.kx-cons input{position:absolute; opacity:0; width:22px; height:22px; margin:0}
.kx-box{width:22px; height:22px; border-radius:7px; flex:none; display:grid; place-items:center; background:#F5F5F7; box-shadow:inset 0 0 0 1.5px #C7C7CC; color:transparent; transition:background .15s}
.kx-cons input:checked + .kx-box{background:var(--ink); box-shadow:none; color:var(--lime)}
.kx-cons input:focus-visible + .kx-box{outline:3px solid rgba(149,64,255,.5); outline-offset:2px}
.kx-cons.bad .kx-box{box-shadow:inset 0 0 0 2px #D70015}
.kx-submit{border:0; display:flex; align-items:center; gap:8px; padding:15px 26px; border-radius:999px; background:var(--lime); color:var(--ink); font-size:16px; font-weight:700; flex:none}
.kx-submit:hover:not(:disabled){background:var(--lime-2)}
.kx-submit:disabled{opacity:.6}
.kx-sent{min-height:420px; display:flex; flex-direction:column; align-items:flex-start; justify-content:center; gap:16px}
.kx-ok{width:72px; height:72px; border-radius:50%; background:var(--lime); display:grid; place-items:center; color:var(--ink)}
.kx-sent h2{font-size:36px; line-height:1.1}
.kx-sent p{font-size:17px; color:var(--ink-2); line-height:1.5; max-width:460px}
.kx-again{border:0; margin-top:8px; padding:12px 20px; border-radius:999px; background:var(--surface-2); font-size:15px; font-weight:600; color:var(--ink)}
.kx-again:hover{background:#DDF5C8}
.kx-side{display:flex; flex-direction:column; gap:16px}
.kx-faq{padding:10px 26px}
.kx-faq h2{font-size:20px; letter-spacing:-.02em; padding:18px 0 8px}
.kx-q{border-top:1px solid var(--line)}
.kx-q button{border:0; background:none; display:flex; align-items:center; gap:12px; width:100%; padding:16px 0; text-align:left; color:var(--ink)}
.kx-q button span{flex:1; font-size:15px; font-weight:600; line-height:1.35}
.kx-q i{width:28px; height:28px; border-radius:50%; background:var(--surface-2); display:grid; place-items:center; flex:none; transition:transform .2s}
.kx-q.open i{transform:rotate(45deg)}
.kx-q p{font-size:14px; color:var(--ink-2); line-height:1.55; padding:0 40px 18px 0; margin:0}
.kx-idea{background:var(--teal); color:#fff; border-radius:28px; padding:26px; display:flex; flex-direction:column; gap:10px}
.kx-idea small{font-size:13px; font-weight:700; color:var(--lime); text-transform:uppercase; letter-spacing:.04em}
.kx-idea b{font-size:20px; font-weight:700; letter-spacing:-.02em; line-height:1.25}
.kx-idea button{border:0; align-self:flex-start; margin-top:6px; padding:10px 16px; border-radius:999px; background:rgba(255,255,255,.12); color:#fff; font-size:14px; font-weight:600}
.kx-idea button:hover{background:rgba(255,255,255,.2)}
.kx-co{padding:26px}
.kx-co h2{font-size:18px; margin-bottom:8px}
.kx-co p{font-size:14px; color:var(--ink-2); line-height:1.6; margin:0}
.kx-co p b{color:var(--ink)}
@media (max-width:1000px){ .kx-hero{grid-template-columns:1fr; gap:24px; padding:24px 0 32px} .kx-sheep{height:160px} .kx-chs{grid-template-columns:1fr; gap:10px; padding-bottom:28px} .kx-grid{grid-template-columns:1fr} }
@media (max-width:640px){ .kx-hero h1{font-size:34px} .kx-hero p{font-size:16px} .kx-sheep{display:none} .kx-ch{flex-direction:row; align-items:center; padding:14px 16px; gap:12px; border-radius:16px} .kx-ci{width:36px; height:36px; border-radius:10px} .kx-ci svg{width:18px; height:18px} .kx-ct b{font-size:16px} .kx-ct span{font-size:13px} .kx-cta{display:none} .kx-card{padding:22px; border-radius:20px} .kx-two{grid-template-columns:1fr} .kx-topics{flex-wrap:nowrap; overflow-x:auto; margin:0 -22px; padding:0 22px; scrollbar-width:none} .kx-topics button{flex:none} .kx-submit{width:100%; justify-content:center} .kx-faq{padding:4px 18px} }
/* O Stupidio.me (podle návrhu) */
.ab{display:flex; flex-direction:column; gap:72px; padding:40px 0 24px}
.ab small{display:block; font-size:13px; font-weight:700; letter-spacing:.04em; text-transform:uppercase; color:var(--ink-2)}
.ab h2{font-size:clamp(30px,4vw,44px); font-weight:700; letter-spacing:-.035em; line-height:1.05; margin-top:6px}
.ab-hero{display:flex; flex-direction:column; gap:22px; padding-top:24px}
.ab-hero .kick{font-size:15px}
.ab-hero h1{margin:0; font-size:clamp(48px,8vw,88px); font-weight:700; letter-spacing:-.045em; line-height:.98; max-width:1000px; text-wrap:balance}
.ab-hero h1 span{color:var(--teal)}
.ab-hero p{margin:6px 0 0; font-size:clamp(17px,2vw,22px); line-height:1.5; color:var(--ink-2); max-width:720px; text-wrap:pretty}
.ab-two{display:grid; grid-template-columns:1fr 1fr; gap:20px}
.ab-why, .ab-how{border-radius:28px; padding:40px; display:flex; flex-direction:column; gap:14px; position:relative; overflow:hidden}
.ab-why{background:#fff}
.ab-how{background:var(--ink); color:#fff}
.ab-how small{color:var(--lime)}
.ab-two h2{font-size:clamp(24px,3vw,34px); letter-spacing:-.03em; line-height:1.12; margin:0; text-wrap:pretty}
.ab-two p{margin:0; font-size:17px; line-height:1.6; color:var(--ink-2); text-wrap:pretty}
.ab-how p{color:rgba(255,255,255,.7); max-width:440px; padding-bottom:70px}
.ab-sheep{position:absolute; right:28px; bottom:24px; opacity:.9}
.ab-sec{display:flex; flex-direction:column; gap:28px}
.ab-head{display:flex; align-items:flex-end; gap:24px; flex-wrap:wrap}
.ab-head > div{flex:1; min-width:280px}
.ab-head p{font-size:15px; color:var(--ink-2); max-width:360px; line-height:1.5}
.ab-parts{display:grid; grid-template-columns:repeat(8,minmax(0,1fr)); gap:8px}
.ab-parts button{border:0; display:flex; flex-direction:column; gap:12px; padding:16px 14px; border-radius:18px; background:#fff; color:var(--ink); text-align:left; transition:background .2s}
.ab-parts .t{font-size:12px; font-weight:600; color:var(--ink-2); font-variant-numeric:tabular-nums}
.ab-parts .i{color:var(--teal); display:flex}
.ab-parts .n{font-size:14px; font-weight:600; line-height:1.25}
.ab-parts button.on{background:var(--ink); color:#fff}
.ab-parts button.on .t{color:rgba(255,255,255,.6)}
.ab-parts button.on .i{color:var(--lime)}
.ab-demo{background:#fff; border-radius:28px; padding:32px 36px; display:grid; grid-template-columns:120px minmax(0,1fr) auto; gap:32px; align-items:center}
.ab-art{width:120px; height:120px; border-radius:24px; display:grid; place-items:center; transition:background .3s}
.ab-dx{display:flex; flex-direction:column; gap:10px; min-width:0}
.ab-chips{display:flex; gap:8px; flex-wrap:wrap}
.ab-chips span{font-size:12px; font-weight:600; padding:4px 10px; border-radius:999px; background:#F5F5F7}
.ab-chips span.mint{background:var(--surface-2); color:var(--teal)}
.ab-fact{font-size:clamp(20px,2.4vw,28px); font-weight:700; letter-spacing:-.025em; line-height:1.2; text-wrap:pretty}
.ab-bar{height:4px; border-radius:999px; background:rgba(0,0,0,.08); overflow:hidden; max-width:560px}
.ab-bar i{display:block; height:100%; background:var(--ink); transition:width .2s linear}
.ab-src{font-size:13px; color:var(--teal); font-weight:600; text-decoration:none}
.ab-src:hover{text-decoration:underline}
.ab-play{border:0; width:72px; height:72px; border-radius:50%; background:var(--lime); color:var(--ink); display:grid; place-items:center}
.ab-play:hover{background:var(--lime-2)}
.ab-play svg{width:26px; height:26px}
.ab-rules{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:16px}
.ab-rules > div{background:#fff; border-radius:24px; padding:28px 24px; display:flex; flex-direction:column; gap:16px}
.ab-rules .n{font-family:"Bricolage Grotesque", system-ui, sans-serif; font-size:44px; font-weight:700; letter-spacing:-.04em; line-height:1}
.ab-rules b{font-size:20px; font-weight:700; letter-spacing:-.02em; line-height:1.2}
.ab-rules p{font-size:15px; color:var(--ink-2); line-height:1.55; margin:0}
.ab-stats{background:var(--lime); border-radius:32px; padding:44px 48px; display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:24px}
.ab-stats b{display:block; font-size:clamp(40px,5vw,64px); font-weight:700; letter-spacing:-.045em; line-height:1}
.ab-stats span{display:block; font-size:15px; font-weight:600; color:var(--teal); margin-top:6px}
.ab-road{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.3fr); gap:48px; align-items:start}
.ab-road p{margin:16px 0 0; font-size:17px; line-height:1.6; color:var(--ink-2); max-width:440px}
.ab-road ol{list-style:none; margin:0; background:#fff; border-radius:28px; padding:8px 28px}
.ab-road li{display:flex; gap:18px; padding:20px 0; border-bottom:1px solid var(--line)}
.ab-road li:last-child{border-bottom:0}
.ab-road .dot{width:28px; height:28px; border-radius:50%; flex:none; display:grid; place-items:center; background:#fff; box-shadow:inset 0 0 0 2px #D1D1D6}
.ab-road li.now .dot{background:var(--lime); box-shadow:none; color:var(--ink)}
.ab-road li.next .dot{box-shadow:inset 0 0 0 2px var(--teal)}
.ab-road .rt{display:flex; align-items:baseline; gap:10px; flex-wrap:wrap}
.ab-road .rt b{font-size:17px}
.ab-road .tag{font-size:12px; font-weight:600; padding:3px 9px; border-radius:999px; background:#F5F5F7; color:var(--ink); margin:0}
.ab-road li.now .tag{background:var(--lime)}
.ab-road li.next .tag{background:var(--surface-2); color:var(--teal)}
.ab-road li p{font-size:14px; margin:4px 0 0; line-height:1.5}
.ab-cta{background:var(--ink); color:#fff; border-radius:32px; padding:56px; display:flex; align-items:center; gap:40px}
.ab-cta > div{flex:1; display:flex; flex-direction:column; gap:12px}
.ab-cta h2{margin:0}
.ab-cta p{font-size:17px; color:rgba(255,255,255,.7); margin:0}
.ab-cta .btns{justify-content:flex-start; margin-top:10px}
.ab-cta .btn{text-decoration:none; font-size:16px; padding:15px 26px}
.ab-cta .ab-ghost{background:rgba(255,255,255,.1); color:#fff; box-shadow:none}
.ab-cta .ab-ghost:hover{background:rgba(255,255,255,.18)}
@media (max-width:1100px){ .ab-parts{grid-template-columns:repeat(4,minmax(0,1fr))} .ab-rules{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (max-width:900px){ .ab-two, .ab-road{grid-template-columns:1fr; gap:24px} .ab-stats{grid-template-columns:repeat(2,minmax(0,1fr))} .ab-big{display:none} }
@media (max-width:640px){
  .ab{gap:48px; padding-top:16px}
  .ab-why, .ab-how{padding:26px}
  .ab-parts{display:flex; overflow-x:auto; scrollbar-width:none; margin:0 -20px; padding:0 20px}
  .ab-parts button{flex:none; width:118px}
  .ab-demo{grid-template-columns:1fr auto; padding:22px; gap:16px}
  .ab-art{display:none}
  .ab-rules{grid-template-columns:1fr}
  .ab-stats{padding:28px; gap:20px}
  .ab-cta{padding:30px}
}

/* Světy poznání na hlavní stránce */
.wtiles .sechead{margin-bottom:14px}
.wt-all{font-size:15px; font-weight:600; color:var(--teal); text-decoration:none}
.wt-all:hover{text-decoration:underline}
.wt-grid{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:12px}
.wtile{border-radius:22px; padding:20px; display:flex; flex-direction:column; justify-content:space-between; gap:22px; min-height:118px; text-decoration:none; transition:transform .15s}
.wtile:hover{transform:translateY(-2px)}
.wtile:first-child{grid-column:span 2}
.wtile:first-child b{font-size:26px}
.wtile .tt{display:flex; justify-content:space-between; align-items:flex-start}
.wtile .ic{width:40px; height:40px; border-radius:12px; display:grid; place-items:center}
.wtile .ct{font-size:13px; font-weight:600; opacity:.75}
.wtile b{display:block; font-size:18px; font-weight:700; letter-spacing:-.02em; line-height:1.15}
.wtile small{display:block; font-size:13px; opacity:.75; margin-top:3px}
@media (max-width:900px){ .wt-grid{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (max-width:640px){ .wt-grid{gap:8px} .wtile{padding:14px; min-height:100px; gap:14px} .wtile b{font-size:15px} .wtile:first-child b{font-size:20px} }

/* ===== Můj účet (acc) ===== */
.accpg{display:grid;grid-template-columns:280px minmax(0,1fr);gap:32px;align-items:start;padding:8px 0 40px}
.acc-side{display:flex;flex-direction:column;gap:14px;position:sticky;top:84px}
.acc-mt{display:none}
.acc-me{background:#fff;border-radius:24px;padding:22px;display:flex;flex-direction:column;gap:14px}
.acc-me b{display:block;font-size:20px;font-weight:700;letter-spacing:-.02em;color:#1A1A33}
.acc-me small{display:block;font-size:13px;color:#6E6E73;margin-top:2px;overflow-wrap:anywhere}
.acc-av{width:64px;height:64px;border-radius:50%;background:#1A1A33;color:#C6F222;display:grid;place-items:center;font-weight:700;font-size:26px;flex:none}
.acc-role{align-self:flex-start;font-size:12px;font-weight:700;padding:4px 10px;border-radius:999px;background:#EBFFDD;color:#004751}
.acc-nav{display:flex;flex-direction:column;gap:2px}
.acc-nav button{all:unset;box-sizing:border-box;cursor:pointer;display:flex;align-items:center;gap:12px;padding:11px 14px;border-radius:14px;font-size:15px;font-weight:500;color:#1A1A33}
.acc-nav button:hover{background:rgba(255,255,255,.7)}
.acc-nav button.on{background:#fff;font-weight:700}
.acc-nav button:focus-visible,.acc-btn:focus-visible,.acc-lnk:focus-visible{outline:2px solid #004751;outline-offset:2px}
.acc-ti{display:flex;color:#6E6E73}
.acc-nav button.on .acc-ti{color:#004751}
.acc-nl{flex:1}
.acc-nm{font-size:12px;color:#6E6E73}
.acc-chev,.acc-links,.acc-co,.acc-back{display:none}
.acc-out{all:unset;cursor:pointer;padding:11px 14px;font-size:15px;font-weight:600;color:#D70015;border-radius:14px}
.acc-out:hover{background:rgba(255,255,255,.7)}
.acc-main{display:flex;flex-direction:column;gap:20px;min-width:0}
.acc-h{font-size:40px;font-weight:700;letter-spacing:-.035em;line-height:1.05;margin:0;color:#1A1A33}
.acc-tb{display:flex;justify-content:flex-end;margin-top:-62px;min-height:42px}
.acc-card{background:#fff;border-radius:24px;padding:24px;display:flex;flex-direction:column;gap:14px}
.acc-card h3{font-size:17px;font-weight:700;margin:0;color:#1A1A33}
.acc-rows{padding:8px 24px;gap:0}
.acc-rows h3{padding:16px 0 6px}
.acc-row{display:flex;align-items:center;gap:16px;padding:16px 0;border-bottom:1px solid rgba(60,60,67,.12)}
.acc-row:last-child{border-bottom:0}
.acc-rt{flex:1;min-width:0}
.acc-rt b{display:block;font-size:15px;font-weight:600;color:#1A1A33}
.acc-rt small{display:block;font-size:13px;color:#6E6E73;margin-top:1px}
.acc-note{font-size:13px;color:#6E6E73;line-height:1.5;margin:0}
.acc-empty p{margin:0;color:#6E6E73}
.acc-btn{all:unset;box-sizing:border-box;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;padding:10px 16px;border-radius:999px;font-size:14px;font-weight:600;white-space:nowrap;color:#1A1A33;align-self:flex-start;text-decoration:none}
.acc-btn.soft{background:#EBFFDD}.acc-btn.soft:hover{background:#DDF7CB}
.acc-btn.dark{background:#1A1A33;color:#fff;padding:11px 18px}
.acc-btn.lime{background:#C6F222;padding:13px 22px;font-size:15px;font-weight:700}.acc-btn.lime:hover{background:#B5E00F}
.acc-btn.pink{background:#FFE5E7;color:#D70015}
.acc-btn.red{background:#D70015;color:#fff}
.acc-btn:disabled{opacity:.5;cursor:default}
.acc-lnk{all:unset;cursor:pointer;font-size:14px;font-weight:600;color:#004751;text-decoration:underline;text-underline-offset:2px}
.acc-lnk.red{color:#D70015;text-decoration:none}
.acc-kids{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.acc-kid{all:unset;box-sizing:border-box;cursor:pointer;background:#fff;border-radius:24px;padding:22px;display:flex;flex-direction:column;gap:14px}
.acc-kid.on{box-shadow:inset 0 0 0 2px #1A1A33}
.acc-kid:focus-visible{outline:2px solid #004751;outline-offset:2px}
.acc-kav{width:56px;height:56px;border-radius:50%;color:#fff;display:grid;place-items:center;font-weight:700;font-size:22px;overflow:hidden;flex:none}
.acc-kav img{width:100%;height:100%;object-fit:cover}
.acc-kav.sm{width:48px;height:48px;font-size:19px}
.acc-kt b{display:block;font-size:19px;font-weight:700;color:#1A1A33}
.acc-kt small{display:block;font-size:13px;color:#6E6E73;margin-top:2px}
.acc-ke{font-size:13px;color:#004751;font-weight:600}
.acc-edit{padding:26px;gap:20px}
.acc-eh{display:flex;align-items:center;gap:14px}
.acc-eh b{font-size:20px;font-weight:700;flex:1}
.acc-eg{display:grid;grid-template-columns:1fr 1fr 1fr;gap:20px}
.acc-f{display:flex;flex-direction:column;gap:8px}
.acc-f>span{font-size:13px;font-weight:600;color:#1A1A33}
.acc-f small{font-size:12px;color:#6E6E73}
.acc-f input,.acc-in{box-sizing:border-box;height:48px;padding:0 16px;border-radius:14px;background:#F5F5F7;border:0;font:inherit;font-size:16px;color:#1A1A33;width:100%}
.acc-in{max-width:260px;height:42px}
.acc-f input:focus,.acc-in:focus{outline:2px solid #004751;outline-offset:0}
.acc-step{display:flex;align-items:center;height:48px;border-radius:14px;background:#F5F5F7;overflow:hidden}
.acc-step button{all:unset;cursor:pointer;width:52px;height:100%;display:grid;place-items:center;font-size:22px}
.acc-step button:hover{background:rgba(0,0,0,.05)}
.acc-step b{flex:1;text-align:center;font-size:17px}
.acc-sw{display:flex;gap:10px;height:48px;align-items:center;flex-wrap:wrap}
.acc-sw button{all:unset;cursor:pointer;width:32px;height:32px;border-radius:50%;background:var(--c)}
.acc-sw button.on{box-shadow:0 0 0 2px #fff,0 0 0 4px var(--c)}
.acc-fb{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.acc-pw{display:flex;flex-direction:column;gap:14px;padding:4px 0 20px;max-width:420px}
.acc-voices{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.acc-voice{position:relative;border-radius:20px;background:#F5F5F7;color:#1A1A33;transition:background .2s}
.acc-voice.on{background:#1A1A33;color:#fff}
.acc-vsel{all:unset;box-sizing:border-box;cursor:pointer;display:flex;flex-direction:column;gap:6px;padding:18px;width:100%;height:100%}
.acc-vsel:focus-visible{outline:2px solid #004751;outline-offset:2px;border-radius:20px}
.acc-vs{height:44px;display:flex;align-items:center;margin-bottom:6px}
.acc-vsel b{font-size:17px;font-weight:700}
.acc-vsel small{font-size:13px;opacity:.7}
.acc-vpl{all:unset;cursor:pointer;position:absolute;top:18px;right:18px;width:36px;height:36px;border-radius:50%;background:#fff;color:#1A1A33;display:grid;place-items:center}
.acc-vpl svg{width:14px;height:14px}
.acc-voice.on .acc-vpl{background:#C6F222}
.acc-tick{display:none}
.acc-seg{display:flex;gap:2px;background:rgba(118,118,128,.12);padding:3px;border-radius:10px;flex:none}
.acc-seg button{all:unset;cursor:pointer;padding:6px 14px;border-radius:8px;font-size:13px;font-weight:500}
.acc-seg button.on{background:#fff;font-weight:600;box-shadow:0 1px 3px rgba(0,0,0,.12)}
.acc-di{width:40px;height:40px;border-radius:12px;background:#EBFFDD;color:#004751;display:grid;place-items:center;flex:none}
.acc-dev{padding:13px 0}
.acc-tag{font-size:12px;font-weight:700;padding:4px 10px;border-radius:999px;background:#C6F222;white-space:nowrap}
.acc-two{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.acc-two .acc-card{padding:22px;gap:10px}
.acc-two h3{font-size:15px}
.acc-modal{position:fixed;inset:0;background:rgba(26,26,51,.45);display:grid;place-items:center;z-index:200;padding:16px}
.acc-mbox{width:420px;max-width:100%;background:#fff;border-radius:28px;padding:28px;display:flex;flex-direction:column;gap:14px;box-shadow:0 30px 80px rgba(0,0,0,.3)}
.acc-mbox h3{font-size:22px;font-weight:700;letter-spacing:-.02em;margin:0}
.acc-mbox p{font-size:14px;color:#6E6E73;line-height:1.5;margin:0}
.acc-mb{display:flex;gap:10px;margin-top:6px}
.acc-mb .acc-btn{flex:1;padding:13px 0;font-size:15px}
.acc-mb .soft{background:#F5F5F7}
@media (max-width:1000px){ .acc-kids,.acc-voices{grid-template-columns:repeat(2,minmax(0,1fr))} .acc-eg{grid-template-columns:1fr 1fr} }
/* Mobil: seznam po vzoru iOS, sekce jako podstránka */
@media (max-width:760px){
  .accpg{display:block;padding:0 0 24px}
  .acc-side{position:static;gap:22px}
  .accpg.m-open .acc-side{display:none}
  .accpg:not(.m-open) .acc-main{display:none}
  .acc-mt{display:block;font-size:34px;font-weight:700;letter-spacing:-.03em;line-height:1.1;margin:12px 4px 0}
  .acc-me{flex-direction:row;align-items:center;border-radius:16px;padding:14px 16px;flex-wrap:wrap}
  .acc-me>div{flex:1;min-width:0}
  .acc-me b{font-size:19px;font-weight:600}
  .acc-av{width:56px;height:56px;font-size:22px}
  .acc-role{order:3;margin-left:70px}
  .acc-nav{background:#fff;border-radius:16px;padding-left:16px;gap:0}
  .acc-nav button{border-radius:0;padding:11px 16px 11px 0;border-bottom:1px solid rgba(60,60,67,.12);font-size:16px}
  .acc-nav button:last-child{border-bottom:0}
  .acc-nav button.on{background:none;font-weight:500}
  .acc-nav button:hover{background:none}
  .acc-ti{width:30px;height:30px;border-radius:8px;background:var(--t);color:var(--tf)!important;display:grid;place-items:center;flex:none}
  .acc-ti svg{width:17px;height:17px}
  .acc-nm{font-size:15px;color:#8E8E93}
  .acc-chev{display:flex;color:#C7C7CC}
  .acc-links{display:flex;flex-direction:column;background:#fff;border-radius:16px;padding:0 16px}
  .acc-links a,.acc-links button{all:unset;cursor:pointer;display:flex;padding:13px 0;font-size:16px;color:#1A1A33;border-bottom:1px solid rgba(60,60,67,.12)}
  .acc-links>:last-child{border-bottom:0}
  .acc-links span{flex:1}.acc-links small{color:#8E8E93;font-size:15px}
  .acc-out{background:#fff;border-radius:16px;padding:13px 16px;text-align:center;font-weight:400;font-size:16px}
  .acc-co{display:block;text-align:center;font-size:12px;color:#8E8E93;margin:-6px 0 0}
  .acc-back{all:unset;cursor:pointer;display:flex;align-items:center;gap:2px;font-size:17px;color:#004751;margin-left:-6px;height:40px}
  .acc-main{gap:18px}
  .acc-h{font-size:30px;letter-spacing:-.03em;line-height:1.1;margin-top:-8px}
  .acc-tb{margin-top:0;justify-content:flex-start}
  .acc-card{border-radius:16px;padding:16px}
  .acc-rows{padding:0 16px}
  .acc-row{flex-wrap:wrap;gap:12px;padding:12px 0}
  .acc-kids{grid-template-columns:1fr;gap:0;background:#fff;border-radius:16px;padding-left:16px}
  .acc-kid{flex-direction:row;align-items:center;gap:12px;padding:11px 16px 11px 0;border-radius:0;border-bottom:1px solid rgba(60,60,67,.12)}
  .acc-kid:last-child{border-bottom:0}
  .acc-kid.on{box-shadow:none}
  .acc-kid .acc-kav{width:40px;height:40px;font-size:16px}
  .acc-kt{flex:1;min-width:0}.acc-kt b{font-size:16px;font-weight:600}.acc-kt small{font-size:12px}
  .acc-kid:not(.on) .acc-ke{display:none}
  .acc-eg{grid-template-columns:1fr}
  .acc-eh b{font-size:18px}
  .acc-voices{grid-template-columns:1fr;gap:0}
  .acc-voice,.acc-voice.on{background:none;color:#1A1A33;border-bottom:1px solid rgba(60,60,67,.12);border-radius:0}
  .acc-voice:last-child{border-bottom:0}
  .acc-vsel{display:grid;grid-template-columns:40px 1fr;column-gap:12px;row-gap:0;padding:10px 90px 10px 0}
  .acc-vs{grid-row:span 2;width:40px;height:40px;border-radius:10px;background:#1A1A33;justify-content:center;margin:0}
  .acc-vs svg{width:30px;height:24px}
  .acc-vsel b{font-size:16px;font-weight:500}.acc-vsel small{font-size:12px;color:#6E6E73;opacity:1}
  .acc-vpl{top:50%;transform:translateY(-50%);right:36px;width:32px;height:32px;background:#F5F5F7}
  .acc-voice.on .acc-vpl{background:#C6F222}
  .acc-tick{display:flex;position:absolute;right:4px;top:50%;transform:translateY(-50%);color:#004751}
  .acc-two{grid-template-columns:1fr}
  .acc-in{max-width:none;flex-basis:100%}
}