/* cache-bust 2026-07-15b -- vynutit nový content hash na Cloudflare Workers Assets */

  body{padding:0!important;overflow:hidden!important}
  .app{max-width:none!important;margin:0!important;padding:0!important}
  .page{display:none;flex-direction:column;width:100%;height:100vh;height:100dvh;overflow:hidden;position:relative;background:var(--color-bg)}
  .page.active{display:flex}
  .home-greet-row{display:flex;align-items:center;gap:12px;padding:.65rem 1rem .35rem}
  .home-greet-text{flex:1;min-width:0}
  .home-greet-main{font-size:1.15rem;font-weight:700;color:var(--color-text);line-height:1.2}
  .home-greet-sub{font-size:.8rem;color:var(--color-text-muted);margin-top:3px;line-height:1.3}
  .home-level-ico{width:95px;height:95px;object-fit:contain;flex-shrink:0}
  .ph-topbar{display:flex;align-items:center;justify-content:space-between;padding:.65rem 1rem;background:var(--color-surface);border-bottom:1px solid var(--color-border);flex-shrink:0}
  .ph-title{font-size:1.05rem;font-weight:700;color:var(--color-primary-text);display:flex;align-items:baseline;gap:5px}
  .ph-title-ver{font-size:.6rem;font-weight:400;opacity:.5}
  .ph-scroll{flex:1;overflow-y:auto;padding-bottom:calc(82px + env(safe-area-inset-bottom,0px))}
  .ph-stats{display:flex;background:var(--color-surface);margin-bottom:.35rem;border-bottom:1px solid var(--color-border)}
  .ph-stat-box{flex:1;padding:.6rem .4rem;text-align:center;border-right:1px solid var(--color-border)}
  .ph-stat-box:last-child{border-right:none}
  .ph-stat-val{font-size:1.2rem;font-weight:700;color:var(--color-primary);line-height:1.1}
  .ph-stat-lbl{font-size:.62rem;color:var(--color-text-muted);margin-top:.1rem}
  .ph-stat-sub{font-size:.58rem;color:var(--color-text-muted);margin-top:.05rem}
  .ph-stat-sub.up{color:var(--color-success)}
  .ph-stat-sub.down{color:var(--color-text-muted)}
  .ph-stats{display:flex!important;gap:.2rem!important;padding:.4rem .15rem!important}
  .ph-stat-box{display:flex!important;flex-direction:row!important;align-items:flex-start!important;justify-content:center!important;gap:.25rem!important;text-align:left!important;border-right:none!important;padding:.25rem .1rem .1rem!important;flex:1;min-width:0}
  .ph-stat-ico{width:26px;height:26px;object-fit:contain;flex-shrink:0}
  .ph-stat-text{min-width:0;text-align:left;overflow:hidden}
  .ph-stat-val{font-size:.92rem!important;white-space:nowrap}
  .ph-stat-lbl{font-size:.5rem!important;white-space:normal;line-height:1.05;overflow:visible;word-break:break-word}
  .ph-stat-sub{font-size:.44rem!important;line-height:1.1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .ph-smart-row{display:flex;align-items:center;gap:.5rem;background:var(--color-surface);padding:.45rem .85rem;margin-bottom:.35rem;border-bottom:1px solid var(--color-border);font-size:.82rem}
  .ph-smart-label{flex-shrink:0;font-weight:600;color:var(--color-text)}
  .ph-smart-bar-wrap{flex:1;min-width:0}
  .ph-smart-bar-inner{display:flex;align-items:center;gap:.4rem}
  .ph-smart-prog{flex:1;height:6px;background:var(--color-border);border-radius:3px;overflow:hidden}
  .ph-smart-prog-fill{height:100%;background:var(--color-primary);border-radius:3px;transition:width .4s}
  .ph-smart-count{font-size:.73rem;color:var(--color-text-muted);min-width:2.5em;text-align:right}
  .smart-pill-btn{flex-shrink:0;padding:.2rem .65rem;border-radius:20px;border:1.5px solid var(--color-primary);background:transparent;color:var(--color-primary);font-size:.74rem;font-weight:700;cursor:pointer;font-family:var(--font);transition:all .18s;white-space:nowrap}
  .smart-pill-btn.on{background:var(--color-primary);color:#fff}
  .ph-smart-row.smart-hidden{display:none}
  .ph-section-lbl{font-size:.69rem;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:var(--color-text-muted);padding:.6rem .9rem .3rem}
  .mode-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:7px;padding:9px;background:transparent;border-radius:20px;margin:0 .85rem .85rem;position:relative;isolation:isolate}
  .mode-cell-empty{background:var(--color-bg);border-radius:15px 10px 10px 0;border:none;cursor:pointer;-webkit-tap-highlight-color:transparent;position:relative;overflow:visible;}
  .smart-cell-img{position:absolute;right:-9px;bottom:-9px;width:85%;height:85%;object-fit:contain;opacity:.9;transition:opacity .2s,transform .15s,filter .2s}
  .mode-cell-empty.smart-on .smart-cell-img{opacity:1;filter:drop-shadow(0 0 8px rgba(220,160,20,.8))}
  .mode-cell-empty:active .smart-cell-img{transform:scale(.85)}
  .mode-card{position:relative;display:block;padding:0;border:none;border-radius:var(--radius-lg);background:transparent;cursor:pointer;aspect-ratio:1;-webkit-tap-highlight-color:transparent;transition:transform .1s}
  .mode-card:active{transform:scale(.92)}
  .mc-img{position:absolute;top:3%;left:3%;width:94%;height:94%;object-fit:contain;display:block;border-radius:0px;filter:drop-shadow(0 1px 2px rgba(0,0,0,.18));transition:filter .1s}
  .mode-card:active .mc-img{filter:drop-shadow(0 1px 4px rgba(0,0,0,.1))}
  .mc-name{display:none}
  .mc-repeat,.mc-scramble,.mc-write,.mc-dict,.mc-mc,.mc-fill,.mc-error{background:transparent;border:none}
  .bnav{position:fixed;bottom:0;left:0;right:0;width:100%;min-height:64px;height:calc(64px + env(safe-area-inset-bottom,0px));padding-bottom:env(safe-area-inset-bottom,0px);background:var(--color-surface);border-top:1px solid var(--color-border);z-index:500;box-shadow:0 -2px 12px rgba(0,0,0,.06);display:flex;box-sizing:border-box}
  .bnav.bnav-hidden{display:none!important}
  .page-scroll{flex:1;overflow-y:auto;padding-bottom:calc(82px + env(safe-area-inset-bottom,0px))}
  .bnav-item{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;padding:.2rem 0;background:none;border:none;cursor:pointer;font-family:var(--font);color:var(--color-text-muted);font-size:.5rem;font-weight:500;transition:color .12s;-webkit-tap-highlight-color:transparent;min-width:0}
  .bnav-item:hover,.bnav-item.active{color:var(--color-primary)}
  .bnav-img{width:42px;height:42px;object-fit:contain;display:block;opacity:.55;transition:opacity .12s}
  .bnav-item:hover .bnav-img,.bnav-item.active .bnav-img{opacity:1}
  .bnav-lbl{display:block;line-height:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}

  #page-drill{background:var(--color-bg)}
  #page-drill.smart-active::before{content:'';display:block;height:3px;background:linear-gradient(90deg,#e8c020,#f0a820);flex-shrink:0}
  .drill-topbar{display:flex;align-items:center;gap:.5rem;padding:.45rem .85rem;background:var(--color-surface);border-bottom:1px solid var(--color-border);flex-shrink:0;box-shadow:var(--shadow-sm)}
  .drill-back-btn{background:none;border:none;cursor:pointer;color:var(--color-primary);font-size:.82rem;font-family:var(--font);padding:.2rem .4rem;border-radius:var(--radius-sm);font-weight:600;flex-shrink:0}
  .drill-back-btn:hover{background:var(--color-primary-bg)}
  .drill-mode-name{flex:1;font-size:.82rem;font-weight:700;text-align:center;color:var(--color-text);display:flex;align-items:center;justify-content:center;gap:.35rem;line-height:1.2}
  .drill-mode-name .mode-ico{width:26px;height:26px;object-fit:contain;flex-shrink:0}
  .drill-back-ico{width:34px;height:34px;object-fit:contain;display:block}
  .smart-btn-ico{width:34px;height:34px;object-fit:contain;display:block}
  .drill-smart-btn{background:none;border:none;padding:.1rem;cursor:pointer;flex-shrink:0;transition:opacity .15s}
  .drill-scroll{flex:1;overflow-y:auto;padding:.65rem .9rem .5rem}
  .page-topbar{display:flex;align-items:center;gap:.6rem;padding:.5rem .9rem;background:var(--color-surface);border-bottom:1px solid var(--color-border);flex-shrink:0;box-shadow:var(--shadow-sm)}
  .page-topbar h1{font-size:.9rem;font-weight:700;margin:0;flex:1}
  .page-back-btn{background:none;border:none;cursor:pointer;color:var(--color-primary);font-size:.82rem;font-family:var(--font);padding:.2rem .4rem;border-radius:var(--radius-sm);font-weight:600;flex-shrink:0;white-space:nowrap}
  .page-back-btn:hover{background:var(--color-primary-bg)}
  .page .stats-panel{position:static!important;height:auto!important;max-height:none!important;width:auto!important;z-index:auto!important;display:block!important;box-shadow:none!important;border:none!important;border-radius:0!important;overflow:visible!important;opacity:1!important;transform:none!important;background:transparent!important;padding:.75rem .9rem!important;transition:none!important;pointer-events:all!important}
  .page .stats-panel .stats-title{position:sticky;top:0;background:var(--color-surface);border-bottom:1px solid var(--color-border);padding:.55rem .9rem;margin:-.75rem -.9rem .65rem;font-size:.9rem;font-weight:700;z-index:5;display:flex;align-items:center;justify-content:space-between}
  .page .stats-title .btn-ghost{display:none!important}
  .profile-user-card{background:var(--color-surface);margin:.75rem .9rem 0;border-radius:var(--radius-lg);padding:1.2rem 1rem;text-align:center;box-shadow:var(--shadow-sm)}
  .profile-user-row{display:flex;align-items:flex-end;justify-content:space-between;gap:.4rem;padding:0 .9rem}
  .profile-center-cell{flex:1;min-width:0}
  .profile-side-cell{flex:0 0 auto;max-width:80px;display:flex;flex-direction:column;align-items:center;text-align:center}
  .profile-side-ico{width:24px;height:24px;object-fit:contain;margin-bottom:.25rem}
  .profile-side-ico-emoji{font-size:1.3rem;line-height:1;margin-bottom:.25rem}
  .profile-side-val{font-size:1.05rem;font-weight:700;color:var(--color-primary);line-height:1}
  .profile-side-lbl{font-size:.62rem;color:var(--color-text-muted);margin-top:.2rem;line-height:1.2}
  .profile-avatar{font-size:3rem;line-height:1;margin-bottom:.5rem}
  .profile-name{font-size:1rem;font-weight:700;color:var(--color-text)}
  .profile-email{font-size:.75rem;color:var(--color-text-muted);margin-top:.15rem}
  .profile-login-btn{display:inline-flex;align-items:center;gap:6px;margin-top:.75rem;padding:.45rem .9rem;border-radius:var(--radius-sm);border:1px solid var(--color-border);background:var(--color-surface);color:var(--color-text);font-size:.82rem;font-family:var(--font);cursor:pointer}
  .profile-grid{display:grid;grid-template-columns:1fr 1fr 1fr;gap:.5rem;padding:.75rem .9rem}
  .profile-stat-card{background:var(--color-surface);border-radius:var(--radius-md);padding:.8rem .85rem;box-shadow:var(--shadow-sm);text-align:center;position:relative}
  .profile-info-bubble{position:absolute;left:50%;top:100%;transform:translateX(-50%);margin-top:.5rem;width:210px;max-width:75vw;background:var(--color-surface);border:1px solid var(--color-border);border-radius:8px;box-shadow:0 6px 18px rgba(0,0,0,.2);padding:.5rem .6rem;font-size:.68rem;line-height:1.35;color:var(--color-text-muted);text-align:left;z-index:30}
  .profile-info-bubble::before{content:'';position:absolute;top:-5px;left:50%;transform:translateX(-50%);width:9px;height:9px;background:var(--color-surface);border-left:1px solid var(--color-border);border-top:1px solid var(--color-border);rotate:45deg}
  .profile-stat-val{font-size:1.35rem;font-weight:700;color:var(--color-primary);line-height:1}
  .profile-stat-lbl{font-size:.7rem;color:var(--color-text-muted);margin-top:.25rem}
  .profile-stat-ico{width:26px;height:26px;object-fit:contain;margin:0 auto .35rem;display:block}
  .profile-stat-ico-emoji{font-size:1.4rem;line-height:1;margin-bottom:.35rem;display:block}
  .profile-level-progress{background:var(--color-surface);border-radius:var(--radius-lg);padding:.7rem .8rem;margin:.6rem .9rem 0;box-shadow:var(--shadow-sm)}
  .profile-card{background:var(--color-surface);margin:.6rem .9rem 0;border-radius:var(--radius-lg);padding:.85rem .9rem;box-shadow:var(--shadow-sm)}
  .profile-card-title{font-size:.8rem;font-weight:700;color:var(--color-text);margin-bottom:.3rem}
  .profile-card-sub{font-size:.78rem;color:var(--color-text-muted)}
  .profile-card-link{font-size:.75rem;color:var(--color-primary);font-weight:600;margin-top:.4rem}
  .profile-curr-list{display:flex;flex-direction:column;gap:.7rem;margin-top:.3rem}
  .curr-prog-item{padding-top:.6rem}
  .curr-prog-item:first-child{padding-top:0}
  .curr-prog-item+.curr-prog-item{border-top:1px solid var(--color-border)}
  .curr-prog-head{display:flex;align-items:center;gap:.4rem;font-size:.83rem;font-weight:700;color:var(--color-text);margin-bottom:.45rem}
  .curr-prog-head .pci-ico{font-size:.85rem;flex-shrink:0}
  .curr-prog-head .pci-lvl{font-size:.62rem;font-weight:600;color:var(--color-text-muted);flex-shrink:0;border:1px solid var(--color-border);border-radius:4px;padding:0 .3rem}
  .curr-prog-modes{display:flex;flex-wrap:wrap;gap:.4rem;margin-bottom:.55rem}
  .curr-prog-mode-ico{width:19px;height:19px;object-fit:contain}
  .curr-prog-mode-ico.done{opacity:1}
  .curr-prog-mode-ico.not-done{opacity:.28;filter:grayscale(1)}
  .curr-prog-metric{margin-bottom:.4rem}
  .curr-prog-metric:last-of-type{margin-bottom:0}
  .curr-prog-metric-row{display:flex;justify-content:space-between;gap:.5rem;font-size:.7rem;color:var(--color-text-muted);margin-bottom:.2rem}
  .curr-prog-metric-row b{color:var(--color-text);font-weight:600}
  .curr-prog-bar{height:6px;border-radius:3px;background:var(--color-border);overflow:hidden}
  .curr-prog-fill{height:100%;background:var(--color-primary);border-radius:3px}
  .curr-prog-fill.ok{background:#2e9e5b}
  .curr-prog-fill.pending{background:var(--color-text-muted);opacity:.45}
  .curr-prog-blockers{font-size:.72rem;color:var(--color-primary);margin-top:.5rem;line-height:1.4}
  .profile-badges-grid{display:flex;flex-wrap:wrap;justify-content:center;gap:.5rem;margin-top:.2rem}
  #profileBadgesCard .profile-card-title{text-align:center}
  .profile-badge-ico{width:42px;height:42px;flex-shrink:0;cursor:pointer;border-radius:8px;transition:transform .1s}
  .profile-badge-ico:active{transform:scale(.92)}
  .profile-badge-ico img{width:100%;height:100%;object-fit:contain;display:block}
  /* Tlacitka prehravaní -- ikony */
  .bb-ico-btn{padding:2px 5px!important;min-width:0!important;background:transparent!important;border:none!important;box-shadow:none!important;border-radius:8px!important;display:inline-flex!important;align-items:center!important;justify-content:center!important}
  .bb-ico-btn:active{background:rgba(0,0,0,.07)!important}
  .bb-ico{width:40px;height:40px;object-fit:contain;display:block;transition:opacity .15s,transform .12s;opacity:.88}
  .bb-ico-btn:active .bb-ico{transform:scale(.87);opacity:.7}
  /* nextSentBtn rikuje v110 pres setNextVisible() -- my do toho nezasahujeme */
  #page-drill #controlsWrap{display:grid!important;grid-template-columns:1fr auto 1fr!important;align-items:center!important;padding:2px 4px!important;gap:0!important}
  .ctrl-left,.ctrl-right{display:flex;gap:2px;align-items:center}
  .ctrl-left{justify-content:flex-start}
  .ctrl-right{justify-content:flex-end}
  .ctrl-center{display:flex;justify-content:center;align-items:center}
  #playStopBtn.bb-ico-btn{display:inline-flex!important}
  #page-drill #nextSentBtn.bb-ico-btn{background:transparent!important}
  #page-drill #controlsWrap{display:flex!important;flex-wrap:wrap!important;justify-content:center!important;align-items:center!important;gap:6px!important}
  #page-drill .ctrl-left,#page-drill .ctrl-center,#page-drill .ctrl-right{display:contents!important}
  #playStopBtn .bb-ico{width:52px;height:52px;opacity:1}
  #playStopBtn{position:relative}
  #page-drill.drill-stopped #playStopBtn::before{content:'';position:absolute;top:-46px;left:50%;transform:translateX(-50%);width:34px;height:34px;background:url('./img/Navigace/Zacni.png') no-repeat center/contain;animation:playHintBounce 1.1s ease-in-out infinite;pointer-events:none}
  @keyframes playHintBounce{0%,100%{opacity:.55;transform:translateX(-50%) translateY(0)}50%{opacity:1;transform:translateX(-50%) translateY(7px)}}
  /* autoToggleBtn: zobraz jen v samohodnoceni (data-mode=main) */
  #page-drill #autoToggleBtn{display:none!important}
  #page-drill[data-mode=main] #autoToggleBtn{display:inline-flex!important}
  /* nextSentBtn: defaultne skryty pres display -- setNextVisible ho zobrazi (oprava 2026-07-10: driv visibility, drzelo si misto v radku) */
  #nextSentBtn{display:none;pointer-events:none}
  /* Tlacitka neaktivni pred spustenim drilu */
  #page-drill.drill-stopped #wordsBtn,
  #page-drill.drill-stopped #gramBtn,
  #page-drill.drill-stopped #favBtn{opacity:.3!important;pointer-events:none!important}
  #page-drill.drill-stopped .ctrl-left .bb-ico-btn,
  #page-drill.drill-stopped .ctrl-right .bb-ico-btn{opacity:.3!important;pointer-events:none!important}
  .card-icons{display:none!important}
  /* Odstranitbarevne rohky cvicebniho panelu */
  .drill-card.scramble-active,.drill-card.write-active,.drill-card.dict-active,
  .drill-card.mc-active,.drill-card.fill-active,.drill-card.error-active{
    background:var(--color-surface)!important}
  /* Denní log Drilovek */
  .home-daily-log{background:var(--color-surface);margin:.35rem .9rem .5rem;border-radius:var(--radius-md);padding:.65rem .85rem;box-shadow:var(--shadow-sm)}
  /* Obchod s tématy (2026-08-02) -- #filterWrap se na Domů přesouvá do
     #homeFilterSlot (navigation.js _placeFilterWrap). Na cvičení dostává okraje
     zdarma od .drill-scroll paddingu, ale .ph-scroll žádný horizontální padding
     nemá (ostatní karty na Domů si okraje řeší každá zvlášť) -- bez tohohle by
     filtr sahal až k okrajům obrazovky. */
  #homeFilterSlot .filter-wrap{margin-left:.9rem;margin-right:.9rem}
  .home-daily-header{display:flex;align-items:baseline;gap:.35rem;margin-bottom:.4rem}
  .home-daily-lbl{font-size:.72rem;font-weight:600;color:var(--color-text-muted)}
  .home-daily-val{font-size:1.1rem;font-weight:700;color:var(--color-primary);margin:0 .2rem}
  .home-daily-unit{font-size:.7rem;color:var(--color-text-muted)}
  .home-daily-items{max-height:9.5rem;overflow-y:auto}
  .home-daily-item{display:flex;align-items:center;gap:.5rem;font-size:.77rem;padding:.12rem 0;border-bottom:1px solid var(--color-border)}
  .home-daily-item:last-child{border-bottom:none}
  .hdi-icon{width:1.4em;text-align:center;flex-shrink:0;font-size:.9rem}
  .hdi-reason{flex:1;color:var(--color-text-muted)}
  .hdi-pts{font-weight:700;color:var(--color-primary);font-size:.82rem}
  .home-daily-item.bonus .hdi-reason{color:var(--color-text)}
  .bonus-toast{position:fixed;top:68px;left:50%;transform:translateX(-50%);background:var(--color-primary);color:#fff;padding:.38rem 1.1rem;border-radius:20px;font-size:.82rem;font-weight:700;z-index:9999;pointer-events:none;white-space:nowrap;opacity:0;transition:opacity .25s;display:none}
  .bonus-toast.visible{opacity:1}
  .bonus-toast.quiet{background:var(--color-surface-alt);color:var(--color-text-muted)}
  .home-level-progress{background:var(--color-surface);border-radius:var(--radius-lg);padding:.7rem .8rem;margin:.5rem 0 .7rem;box-shadow:var(--shadow-sm)}
  .hlp-row{display:flex;align-items:center;gap:.7rem;margin-bottom:.5rem}
  .hlp-ico{width:76px;height:76px;flex-shrink:0}
  .hlp-ico img{width:100%;height:100%;object-fit:contain}
  .hlp-right{flex:1;min-width:0}
  .hlp-info{margin-bottom:.35rem;display:flex;align-items:flex-start;justify-content:space-between;gap:.5rem}
  .hlp-name{font-size:.85rem;font-weight:700;color:var(--color-text)}
  .hlp-lvlnum{font-size:.68rem;font-weight:600;color:var(--color-text-muted);margin-top:1px}
  .hlp-countdown{flex-shrink:0;text-align:right}
  .hlp-countdown-num{font-size:1.05rem;font-weight:800;color:#e08e00;line-height:1.1}
  .hlp-countdown-lbl{font-size:.6rem;font-weight:600;color:var(--color-text-muted);white-space:nowrap}
  .hlp-segs{display:flex;gap:3px;margin-bottom:.35rem}
  .hlp-seg{flex:1;height:7px;border-radius:2px;background:var(--color-border)}
  .hlp-seg.done{background:var(--color-primary)}
  .hlp-seg.cur{background:var(--color-primary);opacity:.5}
  .hlp-footer{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:.3rem .5rem}
  .hlp-caption{font-size:.68rem;color:var(--color-text-muted);flex:1;min-width:0}
  .hlp-next{display:flex;align-items:center;gap:4px;font-size:.68rem;color:var(--color-text-muted);flex-shrink:0}
  .hlp-next-ico{width:20px;height:20px}
  .hlp-next-ico img{width:100%;height:100%;object-fit:contain}
  .home-drilovky-box{display:flex;align-items:center;gap:6px;flex-shrink:0;background:var(--color-surface-alt);border-radius:14px;padding:.35rem .7rem}
  .hdb-ico{width:28px;height:28px;object-fit:contain;flex-shrink:0}
  .hdb-text{display:flex;flex-direction:column;line-height:1.05}
  .hdb-val{font-size:.95rem;font-weight:700;color:var(--color-text)}
  .hdb-lbl{font-size:.58rem;color:var(--color-text-muted)}
  /* Obchod s tématy (2026-08-02) -- zůstatek "k utracení" (odděleně od celkových
     Drilovek nahoře, které pohání levely/odznaky a nikdy neklesají) */
  .hdb-balance{font-size:.58rem;color:var(--color-primary-text);margin-top:1px}
  /* Badge unlock popup — bez karty, odznak + text primo na tmavem pozadi */
  #badgeUnlockPopup{position:fixed;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;z-index:9500;background:rgba(0,0,0,0);backdrop-filter:blur(0px);opacity:0;pointer-events:none;transition:background .35s,backdrop-filter .35s,opacity .25s}
  #badgeUnlockPopup.bup-show{opacity:1;pointer-events:auto;background:rgba(0,0,0,.65);backdrop-filter:blur(4px)}
  .bup-label{font-size:.7rem;font-weight:800;letter-spacing:.12em;color:#ffd700;text-transform:uppercase;margin-bottom:.5rem;text-shadow:0 2px 8px rgba(0,0,0,.7)}
  .bup-img{width:150px;height:150px;object-fit:contain;display:block;margin:0 auto;filter:drop-shadow(0 8px 24px rgba(0,0,0,.5));transform:scale(0);opacity:0}
  #badgeUnlockPopup.bup-show:not(.bup-duel-active) .bup-img{animation:bupPulseBurst .7s ease forwards}
  .bup-text{text-align:center;margin-top:1.1rem;opacity:0}
  #badgeUnlockPopup.bup-show:not(.bup-duel-active) .bup-text{animation:bupTextIn .45s ease .5s both}
  .bup-name{font-size:1.15rem;font-weight:800;color:#fff;text-shadow:0 2px 8px rgba(0,0,0,.7)}
  .bup-desc{font-size:1rem;font-weight:700;color:#b9dbff;text-shadow:-1px -1px 0 #0c2e52,1px -1px 0 #0c2e52,-1px 1px 0 #0c2e52,1px 1px 0 #0c2e52,0 2px 5px rgba(0,0,0,.5);margin-top:.4rem;max-width:260px}
  .bup-pts{display:inline-block;margin-top:.7rem;background:rgba(255,180,0,.2);border:1px solid rgba(255,180,0,.4);color:#ffd700;font-weight:700;font-size:.85rem;padding:4px 14px;border-radius:20px}
  .bup-hint{font-size:.68rem;color:rgba(255,255,255,.4);margin-top:.9rem;opacity:0}
  #badgeUnlockPopup.bup-show:not(.bup-duel-active) .bup-hint{animation:bupTextIn .4s ease .75s both}
  @keyframes bupPulseBurst{0%{transform:scale(0);opacity:0}40%{transform:scale(1.3);opacity:1}60%{transform:scale(.9)}75%{transform:scale(1.1)}90%{transform:scale(.97)}100%{transform:scale(1);opacity:1}}
  @keyframes bupTextIn{0%{transform:translateY(14px);opacity:0}100%{transform:translateY(0);opacity:1}}
  .bup-imgwrap{position:relative;display:flex;align-items:center;justify-content:center}
  .glow-ring,.glow-ring-2{position:absolute;top:50%;left:50%;border-radius:50%;opacity:0;pointer-events:none}
  .glow-ring{width:150px;height:150px;border:3px solid rgba(255,215,0,.7);transform:translate(-50%,-50%) scale(1)}
  .glow-ring-2{width:150px;height:150px;border:2px solid rgba(255,150,0,.5);transform:translate(-50%,-50%) scale(1)}
  #badgeUnlockPopup.bup-show:not(.bup-duel-active) .glow-ring{animation:bupGlowRing .9s ease-out .75s both}
  #badgeUnlockPopup.bup-show:not(.bup-duel-active) .glow-ring-2{animation:bupGlowRing2 1.1s ease-out .9s both}
  @keyframes bupGlowRing{0%{transform:translate(-50%,-50%) scale(1);opacity:0}10%{transform:translate(-50%,-50%) scale(1.05);opacity:1}100%{transform:translate(-50%,-50%) scale(2.6);opacity:0}}
  @keyframes bupGlowRing2{0%{transform:translate(-50%,-50%) scale(1);opacity:0}10%{transform:translate(-50%,-50%) scale(1.05);opacity:.6}100%{transform:translate(-50%,-50%) scale(2.2);opacity:0}}
  /* Level-up souboj: stary vs. novy odznak urovne, srazka uprostred, vybuch */
  /* #bupDuelLayer je ted VEVNITR .bup-imgwrap (viz HTML) - presne tam, kde se */
  /* pak zobrazi finalni odznak, aby srazka a zrod odznaku byly na stejnem miste */
  #bupDuelLayer{position:absolute;inset:0;display:none;pointer-events:none;z-index:2}
  #badgeUnlockPopup.bup-duel-active #bupDuelLayer{display:block}
  .bup-duel-img{position:absolute;top:50%;left:50%;width:120px;height:120px;object-fit:contain;filter:drop-shadow(0 8px 24px rgba(0,0,0,.5))}
  #badgeUnlockPopup.bup-duel-active .bup-duel-old{animation:bupDuelInRight 1s cubic-bezier(.55,0,1,.45) both}
  #badgeUnlockPopup.bup-duel-active .bup-duel-new{animation:bupDuelInLeft 1s cubic-bezier(.55,0,1,.45) both}
  .bup-duel-flash{position:absolute;top:50%;left:50%;width:50px;height:50px;border-radius:50%;background:radial-gradient(circle,#fff 0%,#ffd700 30%,rgba(255,140,0,.6) 55%,rgba(255,120,0,0) 75%);opacity:0}
  #badgeUnlockPopup.bup-duel-active .bup-duel-flash{animation:bupDuelFlash .6s ease-out .82s both}
  .bup-duel-ring{position:absolute;top:50%;left:50%;width:60px;height:60px;border-radius:50%;border:4px solid rgba(255,255,255,.9);opacity:0}
  #badgeUnlockPopup.bup-duel-active .bup-duel-ring{animation:bupDuelRing .55s ease-out .82s both}
  @keyframes bupDuelInRight{0%{transform:translate(-50%,-50%) translateX(220px) scale(.7);opacity:0}15%{opacity:1}70%{transform:translate(-50%,-50%) translateX(8px) scale(1.05)}100%{transform:translate(-50%,-50%) translateX(0) scale(0);opacity:0}}
  @keyframes bupDuelInLeft{0%{transform:translate(-50%,-50%) translateX(-220px) scale(.7);opacity:0}15%{opacity:1}70%{transform:translate(-50%,-50%) translateX(-8px) scale(1.05)}100%{transform:translate(-50%,-50%) translateX(0) scale(0);opacity:0}}
  @keyframes bupDuelFlash{0%{transform:translate(-50%,-50%) scale(.2);opacity:0}30%{transform:translate(-50%,-50%) scale(2.6);opacity:1}100%{transform:translate(-50%,-50%) scale(4.2);opacity:0}}
  @keyframes bupDuelRing{0%{transform:translate(-50%,-50%) scale(.5);opacity:0}15%{opacity:1}100%{transform:translate(-50%,-50%) scale(4.5);opacity:0}}
  /* Odměny carousel */
  .bnav-spacer{height:calc(64px + env(safe-area-inset-bottom,0px));flex-shrink:0}
  .rewards-carousel{flex:1;overflow:hidden;position:relative}
  .rewards-track{display:flex;height:100%;transition:transform .35s cubic-bezier(.4,0,.2,1);will-change:transform}
  .rewards-slide{min-width:100%;width:100%;height:100%;overflow-y:auto;padding:.7rem .9rem 1rem;box-sizing:border-box}
  .rewards-dots{display:flex;justify-content:center;align-items:center;gap:6px;padding:.45rem;flex-shrink:0;background:var(--color-surface);border-top:1px solid var(--color-border)}
  .rdot{height:6px;border-radius:3px;background:var(--color-border);transition:all .3s;cursor:pointer}
  .rdot.active{width:20px;background:var(--color-primary)}
  .rdot:not(.active){width:6px}
  .rcarousel-arrow{
    position:absolute;top:50%;transform:translateY(-50%);z-index:5;
    width:34px;height:34px;border-radius:50%;border:1px solid var(--color-border);
    background:var(--color-surface);color:var(--color-text);opacity:.85;
    font-size:1.3rem;line-height:1;display:flex;align-items:center;justify-content:center;
    cursor:pointer;box-shadow:0 1px 6px rgba(0,0,0,.15);transition:opacity .15s,background .15s;
  }
  .rcarousel-arrow:hover{opacity:1;background:var(--color-primary-bg)}
  .rcarousel-arrow-left{left:6px}
  .rcarousel-arrow-right{right:6px}
  .rcarousel-arrow.rarrow-hidden{display:none}
  .rslide-title{font-size:.75rem;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--color-text-muted);margin-bottom:.6rem}
  .rlevel-hero{background:var(--color-surface);border-radius:var(--radius-lg);padding:.8rem;margin-bottom:.7rem;display:flex;align-items:center;gap:.7rem;box-shadow:var(--shadow-sm)}
  .rlevel-img{width:60px;height:60px;object-fit:contain;flex-shrink:0}
  .rlevel-info{flex:1;min-width:0}
  .rlevel-name{font-size:.95rem;font-weight:700;color:var(--color-text);line-height:1.2}
  .rlevel-sub{font-size:.7rem;color:var(--color-text-muted);margin:.12rem 0 .35rem}
  .rlevel-bar{height:5px;background:var(--color-border);border-radius:3px;overflow:hidden}
  .rlevel-bar-fill{height:100%;background:var(--color-primary);border-radius:3px;transition:width .5s}
  .rbadge-grid{display:flex;flex-wrap:wrap;justify-content:center;gap:.5rem}
  .rbadge{display:flex;flex-direction:column;align-items:center;gap:.25rem;background:var(--color-surface);border-radius:var(--radius-md);padding:.6rem .3rem .5rem;box-shadow:var(--shadow-sm);position:relative;flex:0 0 calc((100% - 1rem)/3);box-sizing:border-box}
  .rbadge-img{width:58px;height:58px;object-fit:contain;transition:filter .3s}
  .rbadge.locked .rbadge-img{filter:grayscale(100%) opacity(.35)}
  .rbadge-name{font-size:.59rem;font-weight:600;text-align:center;color:var(--color-text);line-height:1.25;margin-top:.1rem}
  .rbadge.locked .rbadge-name{color:var(--color-text-muted)}
  .rbadge-pts{font-size:.57rem;font-weight:700;color:var(--color-primary)}
  .rbadge.locked .rbadge-pts{color:var(--color-text-muted)}
  .rbadge-lock{position:absolute;top:4px;right:5px;font-size:.62rem;opacity:.4}
  .rbadge.mystery .rbadge-img{filter:grayscale(100%) opacity(.2) brightness(.5)}
  .rbadge.mystery .rbadge-name{color:var(--color-text-muted);font-style:italic}
  .rbadge-desc{font-size:.52rem;text-align:center;line-height:1.3;color:var(--color-text-muted);opacity:.7;padding:0 .15rem;margin-top:-.1rem}
  .rbadge.locked .rbadge-desc{opacity:.55}
  @keyframes coinReveal3D{0%{transform:rotateY(0deg) scale(.3);opacity:0}7%{transform:rotateY(-25deg) scale(.7);opacity:1}80%{transform:rotateY(-1080deg) scale(1.05);opacity:1}90%{transform:rotateY(-1080deg) scale(.96)}95%{transform:rotateY(-1080deg) scale(1.01)}100%{transform:rotateY(-1080deg) scale(1);opacity:1}}
  .anim-coin3d{animation:coinReveal3D 3s cubic-bezier(.33,0,.66,1) forwards;transform-style:preserve-3d}
  @keyframes bcvLabelIn{0%{transform:translateY(12px);opacity:0}100%{transform:translateY(0);opacity:1}}
  @keyframes bcvPartFly{0%{transform:translate(0,0) scale(1);opacity:1}100%{transform:translate(var(--tx),var(--ty)) scale(0);opacity:0}}
  /* Oblíbené panel — vždy full-screen fixed bez ohledu na viewport */
  #oblibenePanel{box-sizing:border-box!important;overflow-x:hidden!important}
  /* O aplikaci stránka */
  .about-hero{display:flex;flex-direction:column;align-items:center;padding:2rem 1rem 1.2rem;text-align:center}
  .about-icon{width:84px;height:84px;border-radius:20px;box-shadow:0 4px 16px rgba(0,0,0,.18);margin-bottom:1rem}
  .about-appname{font-size:1.5rem;font-weight:800;color:var(--color-text);letter-spacing:.01em}
  .about-version{font-size:.8rem;color:var(--color-text-muted);margin-top:.2rem}
  .about-desc{font-size:.85rem;color:var(--color-text-muted);line-height:1.6;max-width:320px;margin-top:.7rem}
  .about-section{padding:.9rem 1.1rem;border-top:1px solid var(--color-border)}
  .about-section-title{font-size:.7rem;font-weight:700;text-transform:uppercase;letter-spacing:.07em;color:var(--color-text-muted);margin-bottom:.45rem}
  .about-section-body{font-size:.84rem;color:var(--color-text);line-height:1.65}
  .about-section-body strong{color:var(--color-text);font-weight:700}
  .about-warning{background:rgba(255,150,0,.08);border:1px solid rgba(255,150,0,.25);border-radius:10px;padding:.7rem .9rem;font-size:.78rem;color:var(--color-text);line-height:1.55;margin-top:.5rem}
  .about-warning::before{content:'⚠️ ';font-size:.9rem}
  .about-footer{text-align:center;padding:1rem;font-size:.7rem;color:var(--color-text-muted);opacity:.55;border-top:1px solid var(--color-border)}
  .hdi-badge-img{width:28px;height:28px;object-fit:contain;vertical-align:middle;display:inline-block;flex-shrink:0}
  .hdi-badge{gap:.55rem!important}
  .hdi-badge-name{font-weight:600!important}
  .rbadge:not(.locked):not(.mystery){cursor:pointer}
  @media(min-width:600px){
    body{background:var(--color-surface-alt)}
    .page{max-width:680px;margin:0 auto}
    .bnav{max-width:680px;left:50%;right:auto;transform:translateX(-50%)}
  }


    @keyframes autoPulse { 0%,100%{opacity:1;transform:scale(1)} 50%{opacity:.4;transform:scale(1.3)} }
    @keyframes fadeIn { from{opacity:0;transform:translateY(4px)} to{opacity:1;transform:translateY(0)} }
    .hidden { display:none !important; }

    /* Tmavý režim */
    body.dark {
      --color-bg: #0f1117;
      --color-surface: #1a1d26;
      --color-surface-alt: #222534;
      --color-border: #2e3347;
      --color-border-light: #252838;
      --color-text: #e2e6f0;
      --color-text-muted: #7a84a0;
      --color-text-light: #4a5270;
      --color-primary-bg: #1a2540;
      --color-primary-text: #7eb8f7;
      --color-success-bg: #0d2a1a;
      --color-danger-bg: #2a0d0d;
    }

    /* Header s tmavým režimem */
    .app-header-r1 {
      display:flex; align-items:center; justify-content:space-between;
      margin-bottom:.3rem; gap:6px; line-height:1;
    }
    .app-title-wrap { display:flex; align-items:center; gap:5px; flex-shrink:0; }
    .app-title { font-size:1.1rem; font-weight:700; color:var(--color-primary-text); margin-bottom:0; line-height:1; }
    .app-login-wrap { display:flex; align-items:center; gap:4px; min-width:0; flex-shrink:1; overflow:hidden; }
    .app-login-wrap .fb-login-btn { min-width:0; max-width:130px; overflow:hidden; padding:3px 8px; }
    .app-login-wrap #fbLoginLabel { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
    .app-header-r2 { display:flex; gap:6px; align-items:center; margin-bottom:.85rem; justify-content:space-between; }
    .drawer-toggle-btn { width:36px;height:36px;border-radius:50%;border:1px solid var(--color-border);background:var(--color-surface);color:var(--color-text);font-size:1.2rem;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .2s;flex-shrink:0; }
    .drawer-toggle-btn:hover { background:var(--color-surface-alt); }
    #drawerOverlay { position:fixed;inset:0;background:rgba(0,0,0,.45);z-index:2000;opacity:0;pointer-events:none;transition:opacity .28s ease; }
    #drawerOverlay.open { opacity:1;pointer-events:all; }
    #appDrawer { position:fixed;top:0;left:0;height:100%;width:78%;max-width:310px;background:var(--color-surface);z-index:2001;transform:translateX(-100%);transition:transform .28s ease;display:flex;flex-direction:column;box-shadow:4px 0 24px rgba(0,0,0,.18);overflow-y:auto; }
    #appDrawer.open { transform:translateX(0); }
    .drawer-header { padding:.85rem 1rem;border-bottom:1px solid var(--color-border);display:flex;align-items:center;justify-content:space-between;flex-shrink:0; }
    .drawer-title { font-weight:700;font-size:1rem;color:var(--color-text); }
    .drawer-close { background:none;border:none;font-size:1.1rem;cursor:pointer;color:var(--color-text-muted);padding:.2rem .5rem;border-radius:var(--radius-sm); }
    .drawer-nav { flex:1;padding:.4rem 0; }
    .drawer-item { display:flex;align-items:center;gap:.8rem;width:100%;padding:.72rem 1.2rem;background:none;border:none;cursor:pointer;font-size:.92rem;color:var(--color-text);font-family:var(--font);text-align:left;transition:background .15s;line-height:1.3; }
    .drawer-item:hover,.drawer-item:active { background:var(--color-surface-alt); }
    .drawer-icon { font-size:1.15rem;width:1.6rem;text-align:center;flex-shrink:0; }
    .drawer-sep { height:1px;background:var(--color-border);margin:.3rem .9rem; }
    .dark-toggle {
      width:36px; height:36px; border-radius:50%;
      border:1px solid var(--color-border);
      background:var(--color-surface); color:var(--color-text);
      font-size:1.1rem; cursor:pointer; display:flex;
      align-items:center; justify-content:center;
      transition:all .2s;
    }
    .dark-toggle:hover { background:var(--color-surface-alt); }

    /* Firebase login button */
    .fb-login-btn {
      display:flex; align-items:center; gap:5px;
      padding:4px 10px; border-radius:var(--radius-sm);
      border:1px solid var(--color-border);
      background:var(--color-surface); color:var(--color-text);
      font-size:.78rem; font-family:var(--font); cursor:pointer;
      transition:all .2s; white-space:nowrap;
    }
    .fb-login-btn:hover { background:var(--color-surface-alt); }
    .fb-user-avatar {
      width:22px; height:22px; border-radius:50%; object-fit:cover;
    }
    #fbSyncStatus {
      font-size:.7rem; color:var(--color-text-muted);
      display:flex; align-items:center; gap:3px;
    }

    /* Filtry */
    .filter-wrap { display:block; margin-bottom:1.1rem; border:2px solid var(--color-primary); border-radius:var(--radius-lg); box-shadow:0 2px 14px rgba(46,117,182,.13); }
    .filter-toggle { display:flex; align-items:center; gap:8px; background:var(--color-primary-bg); border:none; border-bottom:1px solid var(--color-border); border-radius:calc(var(--radius-lg) - 2px); padding:.6rem 1.25rem; font-size:.82rem; font-weight:700; color:var(--color-primary-text); cursor:pointer; width:100%; user-select:none; transition:background .15s; box-sizing:border-box; }
    .filter-toggle:hover { background:#cfe2f5; }
    .filter-toggle.open { border-radius:calc(var(--radius-lg) - 2px) calc(var(--radius-lg) - 2px) 0 0; border-bottom:2px solid var(--color-primary); }
    .filter-toggle .ft-arrow { margin-left:auto; transition:transform .25s ease; display:inline-block; font-size:.72rem; color:var(--color-primary); }
    .filter-toggle.open .ft-arrow { transform:rotate(180deg); }
    .filter-inner { display:none; grid-template-columns:1fr 1fr; gap:10px; padding:1rem 1.25rem; }
    .filter-inner.open { display:grid; }
    .filter-group { display:flex; flex-direction:column; gap:.3rem; }
    .filter-lbl { font-size:.75rem; color:var(--color-text-muted); font-weight:700; text-transform:uppercase; letter-spacing:.04em; white-space:nowrap; }
    .filter-sel { width:100%; padding:5px 10px; border-radius:var(--radius-sm); border:1px solid var(--color-border); background:var(--color-surface); color:var(--color-text); font-size:.82rem; font-family:var(--font); cursor:pointer; outline:none; box-sizing:border-box; }
    /* Custom select dropdown */
    .cs-wrap { position:relative; width:100%; }
    .cs-btn  { width:100%; display:flex; align-items:center; gap:4px;
               padding:5px 10px; border-radius:var(--radius-sm); border:1px solid var(--color-border);
               background:var(--color-surface); color:var(--color-text); font-size:.82rem;
               font-family:var(--font); cursor:pointer; text-align:left; outline:none;
               white-space:nowrap; overflow:hidden; }
    .cs-label{ flex:1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; min-width:0; }
    .cs-arrow{ flex-shrink:0; font-size:.65rem; opacity:.55; transition:transform .15s; }
    .cs-wrap.cs-open .cs-arrow { transform:rotate(180deg); }
    .cs-wrap.cs-disabled .cs-btn { opacity:.5; pointer-events:none; }
    .cs-list { display:none; position:absolute; top:calc(100% + 2px); left:0; right:0;
               background:var(--color-surface); border:1px solid var(--color-primary);
               border-radius:var(--radius-sm); z-index:300; overflow:hidden;
               box-shadow:0 4px 16px rgba(0,0,0,.18); }
    .cs-wrap.cs-open .cs-list { display:block; }
    .cs-scroll { max-height:400px; overflow-y:auto; }
    .cs-item { padding:8px 12px; cursor:pointer; font-size:.82rem; color:var(--color-text);
               border-bottom:1px solid var(--color-border-light); white-space:normal; line-height:1.3; }
    .cs-item:last-child  { border-bottom:none; }
    .cs-item:active      { background:var(--color-primary-bg); color:var(--color-primary-text); }
    .cs-item.cs-selected { background:var(--color-primary-bg); color:var(--color-primary-text); font-weight:600; }
    .cs-item-check { display:flex; align-items:center; gap:6px; }
    .cs-check { width:14px; height:14px; border:1.5px solid var(--color-border); border-radius:3px;
                display:inline-flex; align-items:center; justify-content:center;
                font-size:.65rem; flex-shrink:0; background:var(--color-surface); }
    .cs-item-check.cs-selected .cs-check { background:var(--color-primary); border-color:var(--color-primary); color:#fff; }
    .cs-topic-label { font-size:.82rem; }
    .cs-topic-count { font-size:.75rem; opacity:.6; margin-left:auto; flex-shrink:0; }
    /* Obchod s tématy (2026-08-02) -- zamčené téma v seznamu výběru témat */
    .cs-item-locked { opacity:.85; }
    .cs-item-locked .cs-topic-label { color:var(--color-text-muted); }
    .cs-lock-ico { flex-shrink:0; font-size:.85rem; }
    .cs-topic-price { font-size:.72rem; margin-left:auto; flex-shrink:0; font-weight:600;
                       padding:2px 8px; border-radius:10px; background:var(--color-primary-bg);
                       color:var(--color-primary-text); }
    .cs-topic-price.cs-price-disabled { background:var(--color-surface-alt); color:var(--color-text-muted); }
    .cs-group{ padding:4px 8px; font-size:.67rem; font-weight:700; letter-spacing:.04em;
               color:var(--color-text-muted); background:var(--color-surface-alt);
               border-bottom:1px solid var(--color-border-light); text-transform:uppercase; }
    /* Klávesové zkratky — skrýt na dotykových zařízeních */
    @media (pointer: coarse) { #shortcutHint { display: none !important; } }
    /* Fixovaná spodní lišta na mobilu */
    @media (pointer: coarse) {
      #bottomBar {
        position: fixed; bottom: 0; left: 0; right: 0;
        background: var(--color-surface);
        border-top: 1px solid var(--color-border);
        padding: .4rem 1rem env(safe-area-inset-bottom, .4rem);
        z-index: 100;
        box-shadow: 0 -2px 8px rgba(0,0,0,.08);
      }
      .app { padding-bottom: 100px; } /* výchozí — přepisuje JS funkce updateBottomPadding() */

      /* Magnetický snap — řeší JS, ne CSS */
    }
    /* Tenký scrollbar */
    .cs-scroll { scrollbar-width:thin; scrollbar-color:var(--color-primary) transparent; }
    .cs-scroll::-webkit-scrollbar { width:3px; }
    .cs-scroll::-webkit-scrollbar-thumb { background:var(--color-primary); border-radius:2px; }
    /* Gradient fade dole — position:absolute mimo scroll kontejner */
    .cs-fade-bot { position:absolute; bottom:0; left:0; right:0; height:32px;
                   background:linear-gradient(transparent, rgba(46,117,182,0.25));
                   pointer-events:none; transition:opacity .15s; z-index:10; }
    @media (max-width:600px) {
      .filter-inner { grid-template-columns:1fr; gap:6px; }
      .filter-fav-row { grid-column:1; }
      .cs-btn  { font-size:13px; padding:6px 10px; }
      .cs-item { font-size:13px; padding:10px 12px; }
    }
    .filter-sel:focus { border-color:var(--color-primary); }
    .filter-fav-row { grid-column:1/-1; }

    /* Info badgy + ikony karty */
    .card-top-row { display:flex; flex-direction:column; gap:4px; margin-bottom:.4rem; }
    .card-meta-row { display:flex; align-items:flex-start; gap:4px; padding-bottom:.35rem; border-bottom:1px solid var(--color-border); }
    /* Badge (uroven/gramatika/tema/blok/pattern) -- na prani uzivatele (2026-07-30)
       uz se nezalamuji (jednou 1 radek, jednou 2 -- karta pak poskakovala do
       vysky). Misto toho pevne 2 radky (1. uroven+gramatika+pattern, 2. tema+blok),
       kazdy s vodorovnym posouvanim, kdyz se obsah nevejde na sirku. */
    .card-meta { display:flex; flex-direction:column; gap:4px; flex:1; border-right:1px solid var(--color-border); padding-right:6px; margin-right:2px; min-width:0; }
    .card-meta-line { display:flex; gap:4px; flex-wrap:nowrap; overflow-x:auto; scrollbar-width:none; -ms-overflow-style:none; }
    .card-meta-line::-webkit-scrollbar { display:none; }
    .card-icons { display:flex; align-items:center; gap:6px; justify-content:space-between; }
    .meta-badge { font-size:.7rem; font-weight:600; padding:2px 9px; border-radius:10px; font-family:var(--font); white-space:nowrap; flex-shrink:0; }
    .mb-grammar { background:var(--color-primary-bg); color:var(--color-primary-text); }
    .mb-level   { background:#f0f8e8; color:#2d6a2d; }
    .mb-topic   { background:#fff8e7; color:#7a5c00; }
    .mb-pattern { background:#f5f0ff; color:#5b3fa0; }
    .mb-block   { background:#e8f0fe; color:#1a56a0; }
    body.dark .mb-level   { background:#0d2a0d; color:#6dbf6d; }
    body.dark .mb-topic   { background:#2a2000; color:#c4a030; }
    body.dark .mb-pattern { background:#1a0d2a; color:#b090e0; }
    body.dark .mb-block   { background:#0d1a2a; color:#6090d0; }

    /* Uvítací overlay */
    .welcome-overlay {
      position:fixed; inset:0; background:rgba(0,0,0,.45); z-index:999;
      display:flex; align-items:center; justify-content:center;
      animation:fadeIn .2s ease;
    }
    .welcome-card {
      background:var(--color-surface); border-radius:var(--radius-lg);
      padding:2rem 2.2rem; max-width:400px; width:90%; box-shadow:0 8px 32px rgba(0,0,0,.22);
      display:flex; flex-direction:column; gap:1rem;
    }
    .welcome-title { font-size:1.2rem; font-weight:700; color:var(--color-text); }
    .welcome-hint  { font-size:.85rem; color:var(--color-text-muted); margin:0; }
    .welcome-row   { display:flex; flex-direction:column; gap:.35rem; }
    .welcome-label { font-size:.75rem; font-weight:700; color:var(--color-text-muted); text-transform:uppercase; letter-spacing:.05em; }
    .welcome-row select { width:100%; padding:6px 10px; border-radius:var(--radius-sm); border:1px solid var(--color-border); background:var(--color-surface-alt); color:var(--color-text); font-size:.9rem; cursor:pointer; }
    .welcome-start { width:100%; padding:.65rem; font-size:1rem; margin-top:.25rem; }
    .welcome-skip  { text-align:center; font-size:.78rem; color:var(--color-text-muted); cursor:pointer; margin:0; text-decoration:underline; }
    .welcome-skip:hover { color:var(--color-primary); }
    .onb-section { font-size:.7rem;font-weight:700;color:var(--color-text-muted);text-transform:uppercase;letter-spacing:.05em;margin:.9rem 0 .35rem }
    .onb-section:first-child { margin-top:0 }
    .onb-row { display:flex;align-items:center;gap:.55rem;background:var(--color-surface-alt);border-radius:var(--radius-sm);padding:.5rem .65rem;margin:.35rem 0;font-size:.82rem }
    .onb-icon { font-size:1.1rem;line-height:1;flex-shrink:0 }
    .onb-name { font-weight:600;color:var(--color-text);font-size:.8rem }
    .onb-desc { color:var(--color-text-muted);font-size:.78rem;margin-top:.05rem }
    .onb-rating { display:flex;gap:5px;margin:.5rem 0 }
    .onb-rb { flex:1;padding:5px 3px;border-radius:6px;font-size:.75rem;text-align:center;font-weight:600;border:1px solid }
    .onb-rb-g { border-color:var(--color-success);color:var(--color-success);background:var(--color-success-bg) }
    .onb-rb-o { border-color:#d97706;color:#d97706;background:#fef3c7 }
    .onb-rb-r { border-color:var(--color-danger);color:var(--color-danger);background:var(--color-danger-bg) }
    body.dark .onb-rb-o { background:#2a1d00 }
    .onb-compare { display:grid;grid-template-columns:1fr 1fr;gap:7px;margin:.5rem 0 }
    .onb-box { border:1px solid var(--color-border);border-radius:var(--radius-sm);padding:.55rem .7rem;font-size:.78rem }
    .onb-box-title { font-weight:700;font-size:.8rem;margin-bottom:.3rem }
    .onb-box ul { padding-left:1rem;margin:0;color:var(--color-text-muted);line-height:1.6 }
    .onb-box.hl { border-color:var(--color-primary);background:var(--color-primary-bg) }
    .onb-box.hl .onb-box-title { color:var(--color-primary-text) }
    .onb-bar-wrap { background:var(--color-surface-alt);border-radius:var(--radius-sm);padding:.55rem .7rem;margin:.5rem 0 }
    .onb-bar-lbl { display:flex;justify-content:space-between;font-size:.75rem;color:var(--color-text-muted);margin-bottom:5px }
    .onb-bar-track { height:7px;background:var(--color-border);border-radius:4px;overflow:hidden }
    .onb-bar-fill { height:100%;background:linear-gradient(90deg,var(--color-primary),#22d3ee);border-radius:4px;width:60% }
    .onb-dot { width:6px;height:6px;border-radius:50%;background:var(--color-border) }
    .onb-dot.active { background:var(--color-primary) }
  .hint-backdrop{position:fixed;inset:0;z-index:3000;background:transparent;animation:fadeIn .2s ease}
  .hint-ring{position:fixed;z-index:3001;border:2px solid var(--color-primary);border-radius:14px;box-shadow:0 0 0 6px rgba(46,117,182,.35),0 0 0 9999px rgba(0,0,0,.55);pointer-events:none}
  .hint-bubble{position:fixed;z-index:3002;background:var(--color-surface);color:var(--color-text);border-radius:var(--radius-sm);padding:.6rem .85rem;font-size:.82rem;line-height:1.45;max-width:250px;box-shadow:0 8px 24px rgba(0,0,0,.3);cursor:pointer}
  .hint-bubble-task{cursor:default}
  @keyframes hintPulseRing{0%,100%{box-shadow:0 0 0 6px rgba(46,117,182,.35),0 0 0 9999px rgba(0,0,0,.55)}50%{box-shadow:0 0 0 11px rgba(46,117,182,.6),0 0 0 9999px rgba(0,0,0,.55)}}
  .hint-ring-pulse{animation:hintPulseRing 1.1s ease-in-out infinite}

    /* Hvězdička + gramatika ikona */
    .fav-btn, .gram-btn {
      background:transparent; border:none; font-size:1.3rem;
      cursor:pointer; padding:0 4px; line-height:1;
      color:var(--color-text-light); transition:all .15s;
    }
    .fav-btn.active { color:#f59e0b; }
    .fav-btn:hover, .gram-btn:hover { transform:scale(1.2); }
    .gram-btn { font-size:1.1rem; color:var(--color-text-muted); }
    .gram-btn.active { color:var(--color-primary); background:var(--color-primary-bg); border-radius:6px; }
    .mico{width:max(1.1em,18px);height:max(1.1em,18px);object-fit:contain;vertical-align:-0.15em;flex-shrink:0}

    /* Hlavní dril tlačítko */
    .main-drill-btn {
      font-size:1rem !important; font-weight:700;
      padding:4px 10px !important; border-radius:20px !important;
      border:2px solid var(--color-border) !important;
      background:var(--color-surface-alt); color:var(--color-text-muted) !important;
      transition:all .15s; white-space:nowrap; margin:0 !important;
    }
    .main-drill-btn.active {
      background:var(--color-primary); color:#fff !important;
      border-color:var(--color-primary) !important;
    }
    .main-drill-btn:hover { transform:none !important; border-color:var(--color-primary) !important; }

    /* Skupina módových tlačítek */
    .mode-btn-group {
      display:inline-flex; align-items:center; gap:2px;
    }
    .mode-btn-group .gram-btn { margin:0; }

    /* Info tlačítka (gram tip + oblíbené) */
    .info-btn-group {
      display:inline-flex; align-items:center; gap:0;
      flex-shrink:0;
    }

    /* Slovíčka box */
    .words-tip {
      display:none; margin-top:.75rem;
      background:var(--color-surface-alt);
      border-radius:var(--radius-sm); border-left:3px solid #16a34a;
      padding:.6rem .85rem;
    }
    .words-tip.visible { display:block; }
    .words-tip-title { font-size:.72rem; font-weight:700; color:#16a34a; text-transform:uppercase; letter-spacing:.05em; margin-bottom:.4rem; }
    .words-list { display:flex; flex-wrap:wrap; gap:.35rem; }
    .words-item { font-size:.82rem; background:var(--color-surface); border:1px solid var(--color-border);
                  border-radius:var(--radius-sm); padding:.2rem .55rem; color:var(--color-text);
                  cursor:pointer; transition:background .15s,border-color .15s; }
    .words-item:hover { background:var(--color-primary-bg); border-color:var(--color-primary); }
    .words-item strong { color:#16a34a; }
    body.dark .words-item strong { color:#4ade80; }

    /* Potvrzeni filtru slovicka pod napovedni bublinou */
    #wordFilterConfirm {
      display:none; align-items:center; gap:.5rem; flex-wrap:wrap;
      margin-top:.55rem; padding:.45rem .6rem;
      background:var(--color-primary-bg); border-left:3px solid var(--color-primary);
      border-radius:var(--radius-sm); font-size:.78rem; color:var(--color-primary-text);
    }
    #wordFilterConfirm .wfc-btns { display:flex; gap:.4rem; margin-left:auto; flex-shrink:0; }
    #wordFilterConfirm .wfc-yes { padding:2px 9px; border-radius:var(--radius-sm); border:1px solid var(--color-primary); background:var(--color-primary); color:#fff; font-size:.74rem; cursor:pointer; font-family:var(--font); }
    #wordFilterConfirm .wfc-no  { padding:2px 9px; border-radius:var(--radius-sm); border:1px solid var(--color-border); background:transparent; color:var(--color-text-muted); font-size:.74rem; cursor:pointer; font-family:var(--font); }

    /* Indikace aktivniho filtru slovicka (vedle Oblibene) */
    .word-filter-chip {
      display:none; align-items:center; gap:.35rem;
      padding:5px 10px; border-radius:var(--radius-xl);
      border:1px solid #16a34a; background:#dcfce7; color:#166534;
      font-size:.82rem; white-space:nowrap;
    }
    .word-filter-chip.show { display:inline-flex; }
    .word-filter-chip button { border:none; background:none; color:inherit; cursor:pointer; font-size:.8rem; padding:0; line-height:1; }
    body.dark .word-filter-chip { background:rgba(22,163,74,.18); border-color:#4ade80; color:#86efac; }

    /* Gramatický tip box */
    .gram-tip {
      display:none; margin-top:.75rem;
      background:var(--color-surface-alt);
      border-left:3px solid var(--color-primary);
      border-radius:0 var(--radius-sm) var(--radius-sm) 0;
      padding:.6rem .85rem;
    }
    .gram-tip.visible { display:block; }
    .gram-tip-title { font-size:.72rem; font-weight:700; color:var(--color-primary); text-transform:uppercase; letter-spacing:.05em; margin-bottom:.35rem; }
    .gram-tip-text { font-size:.82rem; color:var(--color-text); line-height:1.6; margin:0 0 .3rem; }
    .gram-tip-formula { font-size:.78rem; color:var(--color-text-muted); line-height:1.5; font-style:italic; }

    /* Klik na slovo */
    .w-click { cursor:pointer; border-radius:3px; transition:background .1s; }
    .w-click:hover { background:var(--color-primary-bg); }

    /* Hodnocení */
    .rating-wrap {
      display:flex; gap:8px; margin-top:.75rem;
      animation:fadeIn .25s ease;
    }
    .rating-wrap.rating-hidden {
      visibility:hidden; pointer-events:none;
    }
    .rating-wrap.rating-locked .rating-btn {
      opacity:0.35; filter:grayscale(40%);
    }
    .rating-btn {
      flex:1; padding:8px 6px; border-radius:var(--radius-md);
      border:1px solid var(--color-border); background:var(--color-surface);
      font-size:.82rem; font-family:var(--font); font-weight:600;
      cursor:pointer; transition:all .15s; text-align:center;
      outline:none; -webkit-tap-highlight-color:transparent;
    }
    .rating-btn:hover { transform:translateY(-1px); box-shadow:0 2px 8px rgba(0,0,0,.1); }
    .rating-btn:focus { outline:none; background:var(--color-surface); transform:none; box-shadow:none; }
    .rb-good  { color:var(--color-success); border-color:var(--color-success); }
    .rb-good:hover  { background:var(--color-success-bg); }
    .rb-ok    { color:#d97706; border-color:#d97706; }
    .rb-ok:hover    { background:#fef3c7; }
    .rb-bad   { color:var(--color-danger); border-color:var(--color-danger); }

    /* Další věta -- presunuto z bottomBar primo do karty (2026-07-30). Ikonka
       dalsi_veta.png uz ma vlastni zaoblene barevne pozadi vypalene v obrazku
       (stejne jako pustit.png u Zapnout) -- tlacitko samo zustava bez pozadi.
       "Levituje" nad kartou (position:absolute, viz .drill-card{position:relative}
       ve style.css) -- na prani uzivatele nema pri zobrazeni/schovani vubec
       menit vysku karty (predtim jako bezny flex-child kartu natahoval). */
    #nextSentBtn.bb-ico-btn { position:absolute; right:1.1rem; bottom:1.1rem; z-index:5; }
    #nextSentBtn .bb-ico { width:34px; height:34px; }
    .rb-bad:hover   { background:var(--color-danger-bg); }
    body.dark .rb-ok:hover { background:#2a1d00; }

    /* Denní cíl */
    .daily-bar {
      background:var(--color-surface); border:1px solid var(--color-border);
      border-radius:var(--radius-lg); padding:.6rem 1rem;
      margin-bottom:.9rem; display:flex; align-items:center; gap:.75rem;
      box-shadow:var(--shadow-sm);
    }
    .daily-label { font-size:.78rem; color:var(--color-text-muted); white-space:nowrap; }
    .daily-progress { flex:1; height:8px; background:var(--color-border); border-radius:4px; overflow:hidden; display:flex; }
    .daily-fill { height:100%; background:linear-gradient(90deg,var(--color-primary),#22d3ee); border-radius:4px; transition:width .4s ease; }
    .daily-fill-bonus { height:100%; background:rgba(0,180,220,.28); border-radius:0 4px 4px 0; transition:width .4s ease; }
    #smartBar .daily-fill-bonus { background:rgba(251,191,36,.4); }
    .daily-count { font-size:.78rem; font-weight:700; color:var(--color-primary); white-space:nowrap; cursor:pointer; border-bottom:1px dashed currentColor; }
    .daily-count:hover { opacity:.75; }
    .ab-ok  { font-size:.78rem; font-weight:700; color:var(--color-success); white-space:nowrap; }
    .ab-bad { font-size:.78rem; font-weight:700; color:var(--color-danger);  white-space:nowrap; }
    .ab-sep { color:var(--color-border); }
    .ab-chips { display:flex; align-items:center; gap:5px; flex-wrap:wrap; flex:1; }
    .ab-chip { font-size:.75rem; background:var(--color-surface-alt); border:1px solid var(--color-border); border-radius:6px; padding:2px 5px; color:var(--color-text-muted); }
    .ab-chip.cur { background:var(--color-primary-bg); border-color:var(--color-primary); color:var(--color-primary-text); font-weight:700; }
    .daily-done { color:var(--color-success) !important; }

    /* Statistiky panel */
    .stats-panel {
      position:fixed;top:0;left:0;width:100%;height:100%;
      background:var(--color-surface);
      z-index:1500;overflow-y:auto;
      padding:1rem 1.25rem;
      transform:translateX(-100%);
      transition:transform .28s ease;
      pointer-events:none;
    }
    .stats-panel.show { transform:translateX(0); pointer-events:auto; }
    .stats-panel.closing-right { transform:translateX(100%)!important; pointer-events:none; }
    .stats-panel.no-transition { transition:none!important; }
    .stats-title { font-size:.78rem; font-weight:700; color:var(--color-text-muted); text-transform:uppercase; letter-spacing:.05em; margin-bottom:.85rem; display:flex; align-items:center; justify-content:space-between; }
    .stats-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:.6rem; margin-bottom:.85rem; }
    .stat-card { background:var(--color-surface-alt); border-radius:var(--radius-md); padding:.6rem .75rem; text-align:center; }
    .stat-num { font-size:1.3rem; font-weight:700; color:var(--color-text); }
    .stat-lbl { font-size:.68rem; color:var(--color-text-light); text-transform:uppercase; letter-spacing:.05em; }
    .stat-good { color:var(--color-success); }
    .stat-ok   { color:#d97706; }
    .stat-bad  { color:var(--color-danger); }
    .weak-list { margin-top:.5rem; }
    .weak-item { display:flex; align-items:center; gap:.5rem; padding:.3rem 0; border-bottom:1px solid var(--color-border-light); font-size:.8rem; cursor:pointer; transition:background .15s; }
    .weak-item:hover { background:rgba(0,0,0,.06); border-radius:4px; margin:0 -.25rem; padding:.3rem .25rem; }
    .weak-drill { font-size:.65rem; color:var(--color-text-muted); margin-left:.25rem; opacity:.55; flex-shrink:0; }
    .weak-item:last-child { border-bottom:none; }
    .weak-name { flex:1; color:var(--color-text); }
    .weak-bar-wrap { width:80px; height:6px; background:var(--color-border); border-radius:3px; overflow:hidden; }
    .weak-bar { height:100%; border-radius:3px; background:var(--color-danger); }
    .weak-pct { font-size:.72rem; color:var(--color-text-muted); min-width:32px; text-align:right; }

    /* Více databází */
    .db-list { display:flex; flex-direction:column; gap:6px; margin-top:.6rem; }
    .db-item { display:flex; align-items:center; gap:8px; padding:7px 10px; background:var(--color-surface-alt); border-radius:var(--radius-sm); font-size:.82rem; cursor:pointer; border:1px solid transparent; transition:all .15s; }
    .db-item.active { border-color:#7c65a9; background:#f0ebfa; }
    .db-item:hover:not(.active) { border-color:var(--color-border); }
    .db-item-name { flex:1; font-weight:500; color:var(--color-text); }
    .db-item-count { font-size:.72rem; color:var(--color-text-muted); }
    .db-item-del { font-size:.8rem; color:var(--color-text-light); cursor:pointer; padding:2px 4px; }
    .db-item-del:hover { color:var(--color-danger); }

    /* Auto indikátor */
    .auto-bar {
      display:none; margin-top:.75rem; padding:8px 14px;
      background:var(--color-primary-bg); border-radius:var(--border-radius-md);
      font-size:.82rem; color:var(--color-primary-text);
      align-items:center; gap:8px;
    }
    .auto-pulse { width:8px; height:8px; border-radius:50%; background:var(--color-primary); animation:autoPulse 1s infinite; display:inline-block; }

    /* Pozastavit btn */
    .auto-pause-btn {
      padding:3px 10px; border-radius:12px;
      border:1px solid var(--color-primary);
      background:transparent; color:var(--color-primary-text);
      font-size:.78rem; cursor:pointer; margin-left:auto;
    }

    /* Oblíbené filtr — split tlačítko */
    .fav-filter-wrap {
      display:inline-flex; border-radius:var(--radius-xl);
      border:1px solid var(--color-border); overflow:hidden; transition:border-color .15s;
    }
    .fav-filter-wrap.active { border-color:#d97706; }
    .fav-filter-btn {
      padding:5px 12px;
      border:none; background:var(--color-surface);
      color:var(--color-text-muted); font-size:.82rem;
      cursor:pointer; transition:background .15s,color .15s; white-space:nowrap;
    }
    .fav-filter-arrow {
      padding:5px 9px; border:none; border-left:1px solid var(--color-border);
      background:var(--color-surface); color:var(--color-text-muted);
      font-size:.78rem; cursor:pointer; transition:all .15s;
    }
    .fav-filter-wrap.active .fav-filter-btn { background:#fef3c7; color:#92400e; }
    .fav-filter-wrap.active .fav-filter-arrow { background:#fef3c7; color:#92400e; border-left-color:#d97706; }
    .fav-filter-btn:hover,.fav-filter-arrow:hover { opacity:.8; }
    /* Oblíbené panel — položky */
    .oblibene-item { padding:.55rem 0; border-bottom:.5px solid var(--color-border); }
    .oblibene-item:last-child { border-bottom:none; }
    .oblibene-gram { font-size:.68rem; font-weight:700; color:var(--color-text-muted); text-transform:uppercase; letter-spacing:.04em; margin-bottom:.15rem; }
    .oblibene-cz { font-size:.9rem; color:var(--color-text); margin-bottom:.1rem; }
    .oblibene-en { font-size:.82rem; color:var(--color-text-light); font-style:italic; }

    /* Notifikace chybějícího hlasu */
    .voice-notice {
      display:flex; align-items:flex-start; gap:.6rem;
      margin-bottom:.85rem; padding:.75rem 1rem;
      background:#fff8e7; border:1px solid #f59e0b;
      border-radius:var(--radius-md);
      font-size:.82rem; color:#78350f; line-height:1.4;
    }
    .voice-notice a { color:#92400e; font-weight:700; }
    .voice-notice a:hover { color:#78350f; }
    body.dark .voice-notice { background:#2a1d00; border-color:#92400e; color:#fcd34d; }
    body.dark .voice-notice a { color:#fbbf24; }
    body.dark .hlp-countdown-num { color:#fbbf24; }

    /* ── SCRAMBLE REŽIM ──────────────────────────────────────────── */
    .scramble-btn { font-size:1rem; opacity:.45; transition:opacity .2s; }
    .scramble-btn.active { opacity:1; filter:drop-shadow(0 0 4px #6366f1); }
    #scrambleWrap { display:none; margin:.5rem 0; }
    #scrambleWrap.visible { display:block; }
    .scramble-answer {
      min-height:5.5rem;
      border:2px dashed var(--color-border); border-radius:var(--radius-sm);
      padding:.5rem .6rem; display:flex; flex-wrap:wrap; gap:.4rem; align-content:flex-start; margin-bottom:.6rem;
      background:var(--color-surface-alt); transition:border-color .2s, background .2s;
      box-sizing:border-box;
    }
    .scramble-answer.correct { border-color:#22c55e; background:#f0fdf4; }
    .scramble-answer.almost  { border-color:#f59e0b; background:#fffbeb; }
    .scramble-answer.wrong   { border-color:#ef4444; background:#fef2f2; }
    body.dark .scramble-answer.correct { background:#052e16; }
    body.dark .scramble-answer.almost  { background:#3a2a06; }
    body.dark .scramble-answer.wrong   { background:#2d0a0a; }
    .scramble-bank { display:flex; flex-wrap:wrap; gap:.4rem; }
    .scr-word {
      padding:.28rem .6rem; border-radius:var(--radius-sm); border:1px solid #cbd5e1;
      background:#f1f5f9; cursor:pointer; font-size:.88rem; font-family:var(--font);
      color:#1e293b; transition:background .15s, border-color .15s; user-select:none;
    }
    body.dark .scr-word { background:#1e293b; color:#e2e8f0; border-color:#334155; }
    .scr-word.scr-pending { opacity:.45; cursor:default; }
    .scr-word:not(.scr-pending):hover  { background:#dbeafe; border-color:#3b82f6; }
    .scr-word.used   { opacity:.25; cursor:default; pointer-events:none; }
    .scr-word.placed { background:#dbeafe; border-color:#3b82f6; color:#1d4ed8; }
    body.dark .scr-word.placed { background:#1e3a5f; border-color:#3b82f6; color:#93c5fd; }
    /* Po zkontrolování — zmraz všechna slova */
    #scrambleWrap.scramble-frozen .scr-word { pointer-events:none !important; cursor:default !important; }
    #scrambleWrap.scramble-frozen .scr-word.placed { opacity:.9; }
    .scr-word.placed:hover { background:#fee2e2; border-color:#ef4444; cursor:pointer; }
    .drill-card.scramble-active { background: linear-gradient(135deg, var(--color-surface) 85%, #ede9fe 100%); }
    body.dark .drill-card.scramble-active { background: linear-gradient(135deg, var(--color-surface) 85%, #1e1b4b 100%); }


    /* ── DIKTÁT ───────────────────────────────────────────────────── */
    .dict-btn { font-size:1rem; opacity:.45; transition:opacity .2s; }
    .dict-btn.active { opacity:1; filter:drop-shadow(0 0 4px #0891b2); }
    #dictWrap { display:none; margin:.5rem 0; }
    #dictWrap.visible { display:block; }
    .dict-hint { font-size:.78rem; color:var(--color-text-muted); margin-bottom:.4rem; display:flex; align-items:center; gap:.4rem; }
    .dict-replay { background:none; border:1px solid var(--color-border); border-radius:6px; padding:2px 8px; cursor:pointer; font-size:.85rem; }
    .dict-replay:hover { background:var(--color-surface); }

    /* ── MULTIPLE CHOICE ──────────────────────────────────────────── */
    .mc-btn-icon { font-size:1rem; opacity:.45; transition:opacity .2s; }
    .mc-btn-icon.active { opacity:1; filter:drop-shadow(0 0 4px #7c3aed); }
    #mcWrap { display:none; margin:.5rem 0; }
    #mcWrap.visible { display:block; }
    .mc-options { display:flex; flex-direction:column; gap:.35rem; }
    .mc-option {
      width:100%; text-align:left; padding:.5rem .75rem;
      border:1.5px solid var(--color-border); border-radius:8px;
      background:var(--color-surface); cursor:pointer;
      font-size:.9rem; color:var(--color-text); transition:border-color .15s, background .15s;
    }
    .mc-option:hover:not(:disabled) { border-color:var(--color-primary); background:var(--color-primary-bg); }
    .mc-option.mc-correct { border-color:#16a34a; background:#f0fdf4; color:#15803d; font-weight:600; }
    .mc-option.mc-wrong   { border-color:#dc2626; background:#fef2f2; color:#b91c1c; }
    .mc-option:disabled   { cursor:default; opacity:.85; }

    /* ── DOPLŇOVÁNÍ MEZER ─────────────────────────────────────────── */
    .fill-btn { font-size:1rem; opacity:.45; transition:opacity .2s; }
    .fill-btn.active { opacity:1; filter:drop-shadow(0 0 4px #d97706); }
    #fillWrap { display:none; margin:.5rem 0; }
    #fillWrap.visible { display:block; }
    .fill-sentence { font-size:1rem; line-height:1.6; margin-bottom:.5rem; color:var(--color-text); }
    .fill-blank { display:inline-block; min-width:5rem; border-bottom:2px solid var(--color-primary); margin:0 .15rem; }
    .fill-input-row { display:flex; gap:.4rem; align-items:center; }
    .fill-input { flex:1; }

    /* ── OPRAVA CHYBY ─────────────────────────────────────────────── */
    .error-btn { font-size:1rem; opacity:.45; transition:opacity .2s; }
    .error-btn.active { opacity:1; filter:drop-shadow(0 0 4px #dc2626); }
    #errorWrap { display:none; margin:.5rem 0; }
    #errorWrap.visible { display:block; }
    .error-wrong-sent { font-size:.95rem; color:#b91c1c; background:#fef2f2; border:1px solid #fecaca; border-radius:8px; padding:.4rem .65rem; margin-bottom:.5rem; line-height:1.5; }
    .error-label { font-size:.72rem; font-weight:700; color:var(--color-text-muted); text-transform:uppercase; letter-spacing:.05em; margin-bottom:.25rem; }


    /* ── REŽIM PSANÍ ──────────────────────────────────────────────── */
    .write-btn { font-size:1rem; opacity:.45; transition:opacity .2s; }
    .write-btn.active { opacity:1; filter:drop-shadow(0 0 4px #f59e0b); }
    #writeWrap { display:none; margin:.5rem 0; }
    #writeWrap.visible { display:block; }
    .write-input-row { display:flex; flex-direction:column; gap:.4rem; }
    .write-input-row .write-input { width:100%; box-sizing:border-box; }
    .write-input-btns { display:flex; gap:.4rem; justify-content:flex-end; }
    .write-input {
      flex:1; padding:.4rem .6rem; border-radius:var(--radius-sm);
      border:2px solid var(--color-border); background:var(--color-surface);
      color:var(--color-text); font-size:.95rem; font-family:var(--font);
      outline:none; transition:border-color .2s;
    }
    .write-input:focus { border-color:#6366f1; }
    .write-input.correct { border-color:#22c55e; }
    .write-input.wrong   { border-color:#ef4444; }
    .write-input.typo    { border-color:#f59e0b; }
    .write-result { margin-top:.5rem; min-height:4.5rem; }
    .write-result .wr-wrong  { opacity:.85; margin-bottom:.2rem; }
    .write-result .wr-correct { font-weight:600; color:#16a34a; }
    .write-result .wr-typo   { font-weight:600; color:#d97706; margin-bottom:.2rem; }
    .drill-card.write-active { background: linear-gradient(135deg, var(--color-surface) 85%, #fef3c7 100%); }
    body.dark .drill-card.write-active { background: linear-gradient(135deg, var(--color-surface) 85%, #2d1f00 100%); }
    .drill-card.dict-active  { background: linear-gradient(135deg, var(--color-surface) 85%, #cffafe 100%); }
    body.dark .drill-card.dict-active  { background: linear-gradient(135deg, var(--color-surface) 85%, #083344 100%); }
    .drill-card.mc-active    { background: linear-gradient(135deg, var(--color-surface) 85%, #ede9fe 100%); }
    body.dark .drill-card.mc-active    { background: linear-gradient(135deg, var(--color-surface) 85%, #1e1b4b 100%); }
    .drill-card.fill-active  { background: linear-gradient(135deg, var(--color-surface) 85%, #fef9c3 100%); }
    body.dark .drill-card.fill-active  { background: linear-gradient(135deg, var(--color-surface) 85%, #2d2000 100%); }
    .drill-card.error-active { background: linear-gradient(135deg, var(--color-surface) 85%, #fee2e2 100%); }
    body.dark .drill-card.error-active { background: linear-gradient(135deg, var(--color-surface) 85%, #2d0a0a 100%); }

    /* ── CHYTRÝ REŽIM ─────────────────────────────────────────────── */
    .smart-btn { font-size:1.1rem; opacity:.45; transition:opacity .2s; }
    .smart-btn.active { opacity:1; filter:drop-shadow(0 0 4px #f59e0b); }

    /* Overlay — sdílený styl pro first-launch + dokončení */
    .smart-overlay {
      display:none; position:fixed; inset:0; z-index:200;
      background:rgba(0,0,0,.55); align-items:center; justify-content:center; padding:1rem;
    }
    .smart-overlay.visible { display:flex; }
    .smart-box {
      background:var(--color-surface); border-radius:var(--radius-lg);
      padding:1.5rem; max-width:420px; width:100%; box-shadow:0 8px 32px rgba(0,0,0,.25);
    }
    .smart-box h2 { margin:0 0 .5rem; font-size:1.1rem; }
    .smart-box p  { margin:0 0 1rem; font-size:.88rem; color:var(--color-text-muted); line-height:1.6; }
    .smart-box .btn-row { display:flex; flex-direction:column; gap:.5rem; }
    .smart-level-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(90px,1fr)); gap:.5rem; margin:.75rem 0; }
    .smart-level-btn {
      padding:.5rem; border-radius:var(--radius-sm); border:1.5px solid var(--color-border);
      background:var(--color-surface-alt); cursor:pointer; font-size:.85rem; text-align:center;
      color:var(--color-text); transition:border-color .15s,background .15s;
    }
    .smart-level-btn:hover { border-color:var(--color-primary); }
    .smart-level-btn.selected { border-color:var(--color-primary); background:var(--color-primary-bg); color:var(--color-primary-text); font-weight:700; }

    /* Priming slovíček */
    .wp-list { max-height:50vh; overflow-y:auto; display:flex; flex-direction:column; gap:.35rem; margin:.5rem 0; }
    .wp-item {
      display:flex; justify-content:space-between; align-items:center; gap:.75rem;
      padding:.5rem .65rem; border-radius:var(--radius-sm); background:var(--color-surface-alt);
      border:1px solid var(--color-border); cursor:pointer; transition:background .1s;
    }
    .wp-item:hover { background:var(--color-primary-bg); }
    .wp-en { font-weight:700; color:var(--color-text); }
    .wp-cz { color:var(--color-text-muted); font-size:.88rem; }
    .wp-match-hint { font-size:.82rem; margin:0 0 .5rem; }
    .wp-match-grid { display:grid; grid-template-columns:1fr 1fr; gap:.5rem; }
    .wp-match-col { display:flex; flex-direction:column; gap:.4rem; }
    .wp-match-btn {
      padding:.5rem .4rem; border-radius:var(--radius-sm); border:1.5px solid var(--color-border);
      background:var(--color-surface-alt); cursor:pointer; font-size:.82rem; text-align:center;
      color:var(--color-text); transition:border-color .15s,background .15s;
    }
    .wp-match-btn:hover:not(:disabled) { border-color:var(--color-primary); }
    .wp-match-btn.selected { border-color:var(--color-primary); background:var(--color-primary-bg); }
    .wp-match-btn.matched { border-color:var(--color-success); background:var(--color-success); color:#fff; opacity:.7; }
    .wp-match-btn.wrong { border-color:#e53935; background:#ffebee; }
    /* Stat info tlačítko — kolečko ℹ */
    .stat-info-btn { display:inline-flex; align-items:center; justify-content:center; width:1rem; height:1rem; border-radius:50%; border:1.5px solid var(--color-text-muted); background:none; color:var(--color-text-muted); font-size:.62rem; font-style:italic; font-family:serif; cursor:pointer; flex-shrink:0; padding:0; line-height:1; vertical-align:middle; }
    .stat-info-btn:hover { opacity:.7; }

    /* Lišta denního drilu */
    /* Lišta denního drilu */
    #smartBar { display:none; background:linear-gradient(rgba(255,200,0,.05),rgba(255,200,0,.05)),var(--color-surface); border-color:rgba(180,140,0,.6); box-shadow:0 0 0 2px rgba(200,160,0,.12),0 2px 8px rgba(0,0,0,.08); }
    #smartBar .daily-fill { background:linear-gradient(90deg,#f59e0b,#fbbf24); }
    #smartBar .daily-count { color:#d97706; }
    body.dark #smartBar { background:linear-gradient(rgba(255,220,0,.06),rgba(255,220,0,.06)),var(--color-surface); border-color:rgba(255,220,50,.35); box-shadow:0 0 0 2px rgba(255,220,0,.1),0 2px 8px rgba(0,0,0,.22); }
    body.dark #smartBar .daily-count { color:#fbbf24; }
    #activeBar:not(.smart-active) { border-color:rgba(46,117,182,.4); box-shadow:0 0 0 2px rgba(46,117,182,.09),0 2px 8px rgba(0,0,0,.08); }
    #activeBar.smart-active { background:linear-gradient(rgba(255,200,0,.05),rgba(255,200,0,.05)),var(--color-surface); border-color:rgba(180,140,0,.6); box-shadow:0 0 0 2px rgba(200,160,0,.12),0 2px 8px rgba(0,0,0,.08); }
    body.dark #activeBar:not(.smart-active) { border-color:rgba(100,160,220,.28); box-shadow:0 0 0 2px rgba(100,160,220,.08),0 2px 8px rgba(0,0,0,.22); }
    body.dark #activeBar.smart-active { background:linear-gradient(rgba(255,220,0,.06),rgba(255,220,0,.06)),var(--color-surface); border-color:rgba(255,220,50,.35); box-shadow:0 0 0 2px rgba(255,220,0,.1),0 2px 8px rgba(0,0,0,.22); }
    #smartStars { font-size:.95rem; letter-spacing:.05em; min-width:1em; }
    @keyframes starPop { 0%{transform:scale(1)} 40%{transform:scale(1.7)} 100%{transform:scale(1)} }
    .star-pop { animation:starPop .35s ease; }

    /* Banner — nabídka chytrého režimu */
    #smartOfferBanner {
      display:none; align-items:center; gap:.6rem; flex-wrap:wrap;
      padding:.5rem .75rem; margin:.4rem 0;
      background:var(--color-primary-bg); border-left:3px solid var(--color-primary);
      border-radius:var(--radius-sm); font-size:.82rem; color:var(--color-primary-text);
    }
    #smartOfferBanner .sob-text { flex:1; min-width:0; }
    #smartOfferBanner .sob-btns { display:flex; gap:.4rem; flex-shrink:0; }
    #smartOfferBanner .sob-yes { padding:3px 10px; border-radius:var(--radius-sm); border:1px solid var(--color-primary); background:var(--color-primary); color:#fff; font-size:.78rem; cursor:pointer; font-family:var(--font); }
    #smartOfferBanner .sob-no  { padding:3px 10px; border-radius:var(--radius-sm); border:1px solid var(--color-border); background:transparent; color:var(--color-text-muted); font-size:.78rem; cursor:pointer; font-family:var(--font); }

    /* Banner — nabídka zpětné vazby (Domů) */
    #feedbackOfferBanner {
      display:none; align-items:center; gap:.6rem; flex-wrap:wrap;
      padding:.5rem .75rem; margin:.4rem .9rem;
      background:var(--color-primary-bg); border-left:3px solid var(--color-primary);
      border-radius:var(--radius-sm); font-size:.82rem; color:var(--color-primary-text);
    }
    #feedbackOfferBanner .sob-text { flex:1; min-width:0; }
    #feedbackOfferBanner .sob-btns { display:flex; gap:.4rem; flex-shrink:0; }
    #feedbackOfferBanner .sob-yes { padding:3px 10px; border-radius:var(--radius-sm); border:1px solid var(--color-primary); background:var(--color-primary); color:#fff; font-size:.78rem; cursor:pointer; font-family:var(--font); }
    #feedbackOfferBanner .sob-no  { padding:3px 10px; border-radius:var(--radius-sm); border:1px solid var(--color-border); background:transparent; color:var(--color-text-muted); font-size:.78rem; cursor:pointer; font-family:var(--font); }

    /* Trvalý odkaz na zpětnou vazbu dole na Domů */
    .home-feedback-link { text-align:center; padding:.6rem 0 .3rem; }
    .home-feedback-link a { font-size:.76rem; color:var(--color-text-muted); text-decoration:none; line-height:1.5; }
    .home-feedback-link a:hover { color:var(--color-primary); text-decoration:underline; }

    /* Banner návrhu úrovně */
    #levelSuggestBanner {
      display:none; padding:.6rem .85rem; margin:.5rem 0;
      background:#f0f8e8; border:1px solid #639922; border-radius:var(--radius-sm);
      font-size:.82rem; color:#3B6D11; gap:.5rem; align-items:center;
    }
    body.dark #levelSuggestBanner { background:#0d2a0d; border-color:#3B6D11; color:#6dbf6d; }
    #levelSuggestBanner.visible { display:flex; }
    #levelSuggestBanner .lsb-text { flex:1; }
  @media(min-width:600px){#appShell{max-width:768px;margin:0 auto;position:relative;overflow:hidden;min-height:100vh}#appDrawer,#drawerOverlay,.stats-panel{position:absolute!important}#appDrawer{box-shadow:none!important}#appDrawer.open{box-shadow:4px 0 24px rgba(0,0,0,.18)!important}#panelBackdrop{position:absolute;top:0;left:0;right:0;bottom:0;z-index:1400;display:none;pointer-events:none}#panelBackdrop.show{display:block;pointer-events:auto}.stats-panel{left:44px!important;right:44px!important;width:auto!important;height:auto!important;max-height:calc(100vh - 96px)!important;top:56px!important;border-radius:0!important;box-shadow:0 6px 18px rgba(0,0,0,0)!important;transform:translateX(calc(-100% - 46px))!important;transition:transform .28s ease,box-shadow .28s ease,border-radius .28s ease!important;z-index:1500!important}.stats-panel.show{transform:translateX(0)!important;border-radius:var(--radius-lg)!important;box-shadow:0 6px 18px rgba(0,0,0,.9)!important}.stats-panel.closing-right{transform:translateX(calc(100% + 46px))!important}}