/* ============================================================
   SWIMMING EDUCATION — CSS (v9.6.2 PRO, 2025-11-03)
   Theme: Blue + Silver — Light & Dark adaptive
   Author: AnalysisSwim
   ------------------------------------------------------------
   📚 Mini-doc (tokens inside #swimApp):
   • Spacing scale (px): --space-0:0; 1:2; 2:4; 3:6; 4:8; 5:10; 6:12; 7:14; 8:16;
                          9:20; 10:24; 11:28; 12:32; 13:36
   • Radius scale (px):  --r-1:8; --r-2:10; --r-3:12; --r-4:14; --r-5:16; --r-6:18; --r-round:999px
   • Shadows: --shadow-sm / --shadow / --shadow-lg / --shadow-elev
   • Component tokens:   --ex-collapsed-h, --ex-expanded-max, --ex-expanded-max-touch,
                          --progress-h, --timer-size, --video-scale
============================================================ */

/* ---------- Scope / Tokens ---------- */
#swimApp{
  /* Core palette */
  --bg:#f6f8fb; --card:#ffffff; --ink:#0b1220; --muted:#5b667a;
  --accent:#0d6efd; --accent-2:#00a2ff; --active:#0a7be6;
  --silver:#e6edf5; --ring:#c8d6e6; --success:#22c55e; --danger:#ef4f6c; --gold:#f5c518;

  /* Spacing scale */
  --space-0:0; --space-1:2px; --space-2:4px; --space-3:6px; --space-4:8px; --space-5:10px;
  --space-6:12px; --space-7:14px; --space-8:16px; --space-9:20px; --space-10:24px;
  --space-11:28px; --space-12:32px; --space-13:36px;

  /* Radii */
  --r-1:8px; --r-2:10px; --r-3:12px; --r-4:14px; --r-5:16px; --r-6:18px; --r-round:999px;

  /* Borders & effects */
  --border-1:1px; --border-2:2px;
  --shadow-sm:0 1px 0 rgba(0,0,0,.03);
  --shadow:0 10px 30px rgba(10,20,40,.10);
  --shadow-lg:0 14px 34px rgba(10,20,40,.14);
  --shadow-elev:0 8px 20px rgba(13,110,253,.15);

  /* Component tokens */
  --ex-collapsed-h:72px;
  --ex-expanded-max:4000px;
  --ex-expanded-max-touch:6000px;
  --progress-h:14px;
  --timer-size:34px;
  --video-scale:1.08;

  /* Layout/size tokens */
  --container-max:1100px;
  --lightbox-w:1000px;
  --modal-w:960px;
  --stickers-w:880px;
  --video-item-w:180px;
  --select-min:220px;

  --logo-size:44px;
  --btn-lg:48px;           /* media toggle */
  --btn-md:36px;           /* close in modal */
  --icon-md:32px;          /* carousel arrows */
  --icon-sm:28px;          /* carousel arrows (mobile) */
  --emoji-md:18px;         /* swimmer on progress bar */

  --border-strong:3px;     /* ex-sub left stripe, selected sticker outline */
  --dock-shadow:0 -8px 24px rgba(0,0,0,.12);
  --brighten-media:1.05;

  /* Z-layers */
  --z-modal:50; --z-dock:40; --z-bubbles:9999;

  color:var(--ink); background:var(--bg); min-height:100vh; display:block;
  font-family:ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Inter,Arial;
}
#swimApp.theme-dark{
  --bg:#0b1220; --card:#0f172a; --ink:#e6f0ff; --muted:#a8b3cf;
  --accent:#22d3ee; --accent-2:#38bdf8; --silver:#23314a; --ring:#2b3b57;
  --shadow:0 12px 28px rgba(2,10,30,.45);
}

/* ---------- Base / Controls ---------- */
#swimApp .container{max-width:var(--container-max); margin:0 auto; padding:var(--space-8)}
#swimApp .btn{
  appearance:none; border:var(--border-1) solid var(--silver); background:#fff; color:var(--ink);
  padding:var(--space-5) var(--space-7); border-radius:var(--r-3); cursor:pointer; font-weight:600;
  box-shadow:var(--shadow-sm)
}
#swimApp .btn:active{transform:translateY(1px)}
#swimApp .btn.primary{background:var(--accent); color:#fff; border-color:var(--accent); transition:.25s}
#swimApp .btn.primary:hover{background:#0b62e6; transform:translateY(-1px)}
#swimApp .btn.ghost{background:transparent; border:var(--border-2) solid var(--accent); color:var(--accent)}
#swimApp .btn.ghost:hover{background:var(--accent); color:#fff}
#swimApp .select{
  appearance:none; border:var(--border-1) solid var(--silver); background:#fff;
  padding:var(--space-4) var(--space-5); border-radius:var(--r-2); min-width:var(--select-min)
}

#swimApp p { font-size: 16px; }

/* ---------- Header ---------- */
#swimApp .sw-head{
  display:flex; align-items:center; justify-content:space-between; gap:var(--space-8);
  padding:var(--space-5) var(--space-8); background:#fff; border-bottom:var(--border-1) solid var(--silver)
}
#swimApp .sw-head .brand{display:flex; gap:var(--space-6); align-items:center}
#swimApp .sw-head .brand .logo{width:var(--logo-size); height:var(--logo-size); border-radius:var(--r-round); object-fit:cover}
#swimApp .sw-head .nav{display:flex; gap:var(--space-5); align-items:center}

/* ---------- Progress with swimmer ---------- */
#swimApp .progress.container{max-width:var(--container-max); margin:0 auto var(--space-7); padding:0 var(--space-8)}
#swimApp .progress{display:flex; align-items:center; gap:var(--space-5); position:relative; min-height:24px; padding-top:var(--space-4)}
#swimApp .progress .bar{
  position:relative; flex:1 1 auto; height:var(--progress-h); border-radius:var(--r-round);
  background:#edf3fa; border:var(--border-1) solid var(--silver); overflow:visible
}
#swimApp .progress .bar>span{
  display:block; height:100%; width:var(--pct,0%);
  background:linear-gradient(90deg,var(--accent),var(--accent-2)); transition:width .3s ease
}
#swimApp .progress .bar::after{
  content:"🏊‍♂️"; position:absolute; top:50%;
  left:clamp(1%, var(--pct,0%), 99%); transform:translate(-50%, -60%) scaleX(-1);
  font-size:var(--emoji-md); pointer-events:none; z-index:3; filter:drop-shadow(0 1px 1px rgba(0,0,0,.2))
}
#swimApp .progress #swimmer{display:none !important}
#swimApp .progress .meta{white-space:nowrap; color:#44516a; font-weight:700; font-size:14px; line-height:1.2}
@media (prefers-reduced-motion:reduce){
  #swimApp .progress .bar>span, #swimApp .progress .bar::after{transition:none}
}

/* ---------- Callouts ---------- */
#swimApp .callout{
  display:flex; align-items:center; gap:var(--space-5);
  padding:var(--space-5) var(--space-6); border-radius:var(--r-2);
  border:var(--border-1) solid transparent; margin:var(--space-5) 0; font-size:14px; line-height:1.4
}
#swimApp .callout .ico{font-size:16px}
#swimApp .callout strong{font-weight:700; margin-right:var(--space-4)}
#swimApp .callout-tip{background:#eaf5ff; border-color:#d6ebff}
#swimApp .callout-parent{background:#fff7db; border-color:#ffe9a8}
#swimApp .callout-video{
  background:rgba(255,255,255,.6); border:var(--border-1) solid var(--ring);
  border-radius:var(--r-4); padding:var(--space-5); position:relative; overflow:hidden
}
#swimApp.theme-dark .callout-tip{background:rgba(56,189,248,.12); border-color:rgba(56,189,248,.25)}
#swimApp.theme-dark .callout-parent{background:rgba(250,204,21,.15); border-color:rgba(250,204,21,.28)}

/* ---------- Exercise Cards ---------- */
#swimApp .ex-list{list-style:none; margin:0; padding:0}
#swimApp .ex-card{
  background:var(--card); border-radius:var(--r-6); box-shadow:var(--shadow);
  border:var(--border-1) solid var(--silver); overflow:hidden; padding:var(--space-6); margin:var(--space-7) 0;
  transition:box-shadow .15s ease, transform .08s ease, max-height .35s ease;
  -webkit-tap-highlight-color:transparent; cursor:pointer; max-height:var(--ex-collapsed-h);
}
#swimApp .ex-card:hover{box-shadow:var(--shadow-lg); transform:translateY(-1px)}
#swimApp .ex-card.is-active{
  outline:none; border-color:var(--accent);
  box-shadow:inset 0 0 0 2px var(--accent), var(--shadow);
}
#swimApp .ex-card.is-checked{opacity:.94}

#swimApp .ex-head{display:grid; grid-template-columns:auto 1fr auto; gap:var(--space-6); align-items:center}
#swimApp .ex-title,
#swimApp .ex-chips,
#swimApp .ex-head{pointer-events:auto; position:relative}

#swimApp .ex-check{
  appearance:none; width:18px; height:18px; border-radius:6px; border:var(--border-2) solid var(--ring);
  display:grid; place-items:center; cursor:pointer; background:#fff
}
#swimApp .ex-check:checked{border-color:var(--accent); background:var(--accent)}
#swimApp .ex-check:checked::after{content:"✓"; color:#fff; font-weight:800; font-size:12px}
#swimApp .ex-title{font-weight:800; font-size:clamp(14px,2.5vw,18px); margin:0}

/* ex-sub — единый стиль + фикс свёрнутого состояния */
#swimApp .ex-sub{
  background:linear-gradient(to right, rgba(13,110,253,.05), rgba(0,162,255,.05));
  border-left:var(--border-strong) solid var(--accent);
  border-radius:0 var(--r-3) var(--r-3) 0;
  padding:var(--space-4) var(--space-5);
  margin:var(--space-3) 0 var(--space-4) 0;
  font-size:.94rem; color:var(--ink); line-height:1.4;
  transition:background .3s ease, border-color .3s ease;
}
#swimApp .ex-card:not(.is-expanded):not([aria-expanded="true"]) .ex-sub{display:none !important}
#swimApp .ex-card:hover .ex-sub{
  background:linear-gradient(to right, rgba(13,110,253,.08), rgba(0,162,255,.08));
}

/* Chips */
#swimApp .ex-chips{margin-left:auto; display:flex; gap:var(--space-4); flex-wrap:wrap; align-items:center; justify-content:flex-end}
#swimApp .ex-chip{
  font-size:12px; padding:var(--space-3) var(--space-5); border-radius:var(--r-round);
  background:#eef7ff; color:#0a4fbf; border:var(--border-1) solid #cfe3ff
}
#swimApp .ex-chip.dist{background:#fff7ed; color:#7a3e00; border-color:#ffe0b2}

/* Media inside card */
#swimApp .ex-media{
  margin:var(--space-6) 0 var(--space-5); background:#fff; border:var(--border-1) solid var(--silver);
  border-radius:var(--r-3); padding:var(--space-5); box-shadow:0 2px 8px rgba(0,0,0,.06)
}
#swimApp .media-thumb{
  position:relative; width:100%; aspect-ratio:16/9; overflow:hidden; border:var(--border-1) solid var(--silver);
  border-radius:var(--r-3); background:#fff; box-shadow:0 3px 8px rgba(0,0,0,.08)
}
#swimApp .media-thumb>img.thumb{display:block !important; width:100% !important; height:100% !important; object-fit:cover !important; object-position:center; border:0 !important}

/* Linear progress (opt-in inside cards) */
#swimApp .ex-bar{position:relative; height:8px; background:#edf3fa; border:var(--border-1) solid #e2e8f0; border-radius:var(--r-round); overflow:hidden}
#swimApp .ex-bar>span{position:absolute; inset:0; width:0%; background:linear-gradient(90deg,var(--accent),var(--accent-2)); transition:width .25s}

/* Actions + timer ring */
#swimApp .ex-actions{display:flex; align-items:center; justify-content:space-between; gap:var(--space-5); margin-top:var(--space-5); flex-wrap:wrap}
#swimApp .ex-actions .left{display:flex; gap:var(--space-5); align-items:center}
#swimApp .ex-actions .right{display:flex; gap:var(--space-4)}
#swimApp .ex-time{font-variant-numeric:tabular-nums; color:#334155; font-weight:700}
#swimApp .ex-ring{
  --size:var(--timer-size); --deg:0deg; width:var(--size); height:var(--size); border-radius:50%;
  background:conic-gradient(var(--accent) var(--deg), var(--ring) 0deg); display:grid; place-items:center
}
#swimApp .ex-ring .dot{
  width:calc(var(--timer-size) - 8px); height:calc(var(--timer-size) - 8px); border-radius:50%;
  background:#fff; border:var(--border-1) solid #e2e8f0; font-size:11px; display:grid; place-items:center; color:#14315d
}

/* Sections / legacy lists */
#swimApp .section{margin:var(--space-8) 0 var(--space-5)}
#swimApp .section>h3{margin:0 0 var(--space-4); font-weight:800; font-size:clamp(18px,4.5vw,22px); line-height:1.2}
#swimApp .section>h3 + p{
  margin:var(--space-3) 0 var(--space-5); font-weight:600; font-size:clamp(14px,3.8vw,17px); color:#0b1220; line-height:1.35;
  overflow-wrap:anywhere; word-break:break-word
}
#swimApp .exercise-list{list-style:disc; padding-left:20px}

/* ---------- Quiz as cards ---------- */
#swimApp .quiz{
  margin:var(--space-6) 0; padding:var(--space-6); background:#fff; border:var(--border-1) solid var(--silver);
  border-radius:var(--r-5); box-shadow:0 6px 20px rgba(0,0,0,.06)
}
#swimApp .quiz>strong{display:block; margin-bottom:var(--space-5); font-weight:800; font-size:clamp(16px,4.2vw,18px)}
#swimApp .quiz-item{background:#f8fafc; border:var(--border-1) solid #e2e8f0; border-radius:var(--r-3); padding:var(--space-5); margin-top:var(--space-5)}
#swimApp .quiz-item p{margin:0 0 var(--space-5); font-weight:600; color:#0b1220; font-size:clamp(14px,3.8vw,17px)}
#swimApp .quiz-btn{
  appearance:none; border:var(--border-1) solid #d0d7e3; background:#fff; border-radius:var(--r-3); padding:var(--space-4) var(--space-5);
  font-weight:600; cursor:pointer; margin-right:var(--space-4)
}
#swimApp .quiz-btn:active{transform:translateY(1px)}
#swimApp .quiz-item .quiz-feedback:empty{display:none}

/* ---------- Video carousel ---------- */
#swimApp .callout-video::before{
  content:"🎬 Videos"; position:absolute; top:var(--space-4); left:var(--space-5); font-size:13px; font-weight:600;
  background:rgba(0,0,0,.65); color:#fff; padding:var(--space-3) var(--space-5); border-radius:var(--r-round); backdrop-filter:blur(2px); z-index:2;
}
#swimApp .video-carousel{position:relative; overflow:hidden; border-radius:var(--r-4)}
#swimApp .video-carousel .track{
  display:flex; gap:var(--space-5); overflow-x:auto; -webkit-overflow-scrolling:touch; scroll-behavior:smooth;
  scroll-snap-type:x mandatory; padding:0 42px;
}
#swimApp .video-carousel .track>*{flex:0 0 var(--video-item-w); scroll-snap-align:center}
#swimApp .video-carousel img{display:block; width:100%; aspect-ratio:16/9; object-fit:cover; border-radius:var(--r-3)}
#swimApp .video-carousel .nav{
  position:absolute; top:50%; transform:translateY(-50%); width:var(--icon-md); height:var(--icon-md); border-radius:50%;
  background:rgba(255,255,255,0.9); border:var(--border-1) solid #d0d7e3; display:flex; align-items:center; justify-content:center;
  z-index:2; box-shadow:0 2px 5px rgba(0,0,0,.15);
}
#swimApp .video-carousel .nav.prev{left:6px}
#swimApp .video-carousel .nav.next{right:6px}

/* ---------- Lightbox & Modal ---------- */
#swimApp .lightbox{position:fixed; inset:0; background:rgba(0,0,0,.6); display:none; align-items:center; justify-content:center; padding:var(--space-8); z-index:var(--z-modal)}
#swimApp .lightbox.open{display:flex}
#swimApp .lightbox .lightbox-inner{position:relative; width:min(var(--lightbox-w),96vw); aspect-ratio:16/9; background:#000; border-radius:var(--r-3); overflow:hidden}
#swimApp .lightbox .lightbox-close{position:absolute; top:var(--space-4); right:var(--space-4); z-index:2; color:#fff; border-color:rgba(255,255,255,.4)}

#swimApp .modal{position:fixed; inset:0; background:rgba(5,10,20,.35); display:none; align-items:center; justify-content:center; padding:var(--space-8)}
#swimApp .modal.open{display:flex}
#swimApp .modal .box{background:var(--card); border:var(--border-1) solid var(--silver); border-radius:var(--r-5); width:min(var(--modal-w),96vw); max-height:90vh; overflow:auto; padding:var(--space-6)}
#swimApp .modal .stickers-grid{display:grid; grid-template-columns:repeat(auto-fill, minmax(120px,1fr)); gap:var(--space-6); padding:var(--space-6) 0}
#swimApp .modal .stickers-grid .tile{display:grid; place-items:center; gap:var(--space-4); padding:var(--space-6); border:var(--border-1) solid var(--silver); border-radius:var(--r-4); background:#fff}
#swimApp .modal .stickers-grid .tile.locked{opacity:.55}
#swimApp .modal .stickers-grid .tile.rare{outline:2px dashed #f2cf5b}
#swimApp .modal .stickers-grid .tile .emoji{font-size:32px}
#swimApp .modal .stickers-grid .tile .st-img{width:100%; height:100px; object-fit:cover; border-radius:var(--r-3)}

/* ---------- Sticky Dock (#exDock) ---------- */
#swimApp #exDock{
  position:sticky; bottom:0; z-index:var(--z-dock); background:#fff; border-top-left-radius:var(--r-5); border-top-right-radius:var(--r-5);
  box-shadow:var(--dock-shadow); padding:var(--space-5) var(--space-6) calc(var(--space-5) + env(safe-area-inset-bottom,0))
}
#swimApp #exDock .row{display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:var(--space-5)}
#swimApp #exDock .left{min-width:0; display:flex; align-items:center; gap:var(--space-5)}
#swimApp #exDock .right{display:flex; align-items:center; gap:var(--space-4); justify-content:flex-end}
#swimApp #exDock .title{font-weight:700; font-size:14px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
#swimApp #exDock .info{color:#5b667a; font-size:12px}
#swimApp #exDock .progressline{flex:1; display:none}
@media (min-width:640px){#swimApp #exDock .progressline{display:block}}
#swimApp #exDock .btn, #swimApp #exDock button{min-height:40px; border-radius:var(--r-3); padding:var(--space-4) var(--space-5); font-weight:600}

/* ------ STICKER PREVIEW ------ */
#stickersModal #stickerPreview{
  display:none; align-items:center; justify-content:center;
  min-height:160px; padding:var(--space-5) var(--space-6);
  border:var(--border-1) solid var(--silver); border-radius:var(--r-3);
  background:#fff; overflow:hidden;
}
#stickersModal #stickerPreview:has(.thumb),
#stickersModal #stickerPreview:has(.msg){ display:flex; }
#stickersModal #stickerPreview .thumb{
  max-width:280px; max-height:200px; width:auto !important; height:auto !important;
  object-fit:contain !important; display:block; border-radius:var(--r-2); box-shadow:0 2px 6px rgba(0,0,0,.08);
}
@media (max-width:600px){
  #stickersModal #stickerPreview{ min-height:140px; }
  #stickersModal #stickerPreview .thumb{ max-width:220px; max-height:160px; }
}

/* ---------- Stickers Collection (outside modal) ---------- */
#swimApp #stickersGrid{
  display:grid; grid-template-columns:repeat(auto-fill, minmax(120px,1fr));
  gap:var(--space-6); justify-items:center; align-items:start; padding:var(--space-5) 0;
  overflow-y:auto; max-height:70vh;
}
#swimApp #stickersGrid .tile{
  width:100%; max-width:140px; min-height:150px; background:#fff;
  border:var(--border-2) solid rgba(0,0,0,.05); border-radius:var(--r-5); box-shadow:0 4px 10px rgba(0,0,0,.06);
  display:flex; flex-direction:column; align-items:center; justify-content:flex-start; gap:var(--space-2);
  transition:transform .2s ease, box-shadow .2s ease;
}
#swimApp #stickersGrid .tile:hover{transform:translateY(-4px); box-shadow:0 6px 16px rgba(0,0,0,.12)}
#swimApp #stickersGrid .tile .st-img,
#swimApp #stickersGrid .tile .emoji{width:72px; height:72px; object-fit:contain; border-radius:var(--r-3); display:block; margin-top:var(--space-5)}
#swimApp #stickersGrid .tile .name{font-size:13px; text-align:center; color:#333; margin:var(--space-2) 0; line-height:1.2em}
#swimApp #stickersGrid .tile .btn-inline{font-size:12px; background:none; border:none; color:#777; cursor:pointer; margin-top:var(--space-1)}
#swimApp #stickersGrid .tile .btn-inline:hover{color:#c00}
#swimApp #stickersGrid .tile.rare{border-color:var(--accent); box-shadow:0 0 8px rgba(13,110,253,.3)}
#swimApp #stickersGrid .tile.locked{opacity:.4; filter:grayscale(.8)}
#swimApp #stickersGrid .tile.is-selected{outline:var(--border-strong) solid var(--accent); outline-offset:1px}
#swimApp #stickersGrid .tile.locked.rare{opacity:.6; filter:grayscale(.4)}

/* ---------- Utilities ---------- */
#swimApp .tip{background:#eef7ff; border:var(--border-1) solid var(--silver); padding:var(--space-5) var(--space-6); border-radius:var(--r-3)}
#swimApp #bubbleStage{position:fixed; inset:0; pointer-events:none; z-index:var(--z-bubbles)}

/* ---------- Media toggle visibility ---------- */
#swimApp.media-off .ex-media,
#swimApp.media-off .ex-card .media-thumb,
#swimApp.media-off .ex-card [data-video],
#swimApp.media-off .ex-card .vid-thumb,
#swimApp.media-off .ex-card img.thumb{display:none !important}
#swimApp.media-off .ex-card .ex-media{padding:0 !important; margin:0 !important; border:0 !important; box-shadow:none !important; background:transparent !important}
#swimApp.media-off .callout-video, #swimApp.media-off .video-carousel{display:block !important; visibility:visible !important; opacity:1 !important}

/* ---------- Responsiveness ---------- */
@media (max-width:860px){
  #swimApp .sw-head{flex-wrap:wrap}
  #swimApp .ex-actions .right{width:100%; justify-content:flex-end}
}
@media (max-width:900px){
  #swimApp #stickersGrid{grid-template-columns:repeat(auto-fill, minmax(110px,1fr)); gap:var(--space-5)}
}
@media (max-width:600px){
  #swimApp #lessonCard{padding-bottom:calc(var(--ex-collapsed-h) + env(safe-area-inset-bottom,0))}
  #swimApp #stickersGrid{grid-template-columns:repeat(auto-fill, minmax(90px,1fr)); gap:var(--space-4)}
  #swimApp #stickersGrid .tile{max-width:100px; min-height:120px}
  #swimApp #stickersGrid .tile .st-img, #swimApp #stickersGrid .tile .emoji{width:56px; height:56px}
  #swimApp #stickersGrid .tile .name{font-size:12px}
  #swimApp .video-carousel .nav{width:var(--icon-sm); height:var(--icon-sm)}
  #swimApp .video-carousel .track{padding:0 36px}
  #swimApp .callout-video::before{font-size:12px; top:6px; left:10px; padding:3px 8px}
}

/* ==== FIX: Dock button alignment ==== */
@media (max-width:640px){
  #swimApp #exDock .row{flex-direction:column; align-items:stretch; gap:var(--space-4)}
  #swimApp #exDock .left, #swimApp #exDock .right{justify-content:space-between; width:100%}
}

/* ==== STICKERS MODAL — Polished layout v2 ==== */
#stickersModal .box{
  background:var(--card); border-radius:22px; box-shadow:0 8px 36px rgba(0,0,0,.12);
  border:var(--border-1) solid var(--silver); padding:var(--space-6) var(--space-7) var(--space-10);
  max-width:var(--stickers-w); width:95%; margin:auto; position:relative; overflow:hidden;
}
#stickersModal .box-head{display:flex; align-items:center; justify-content:space-between; gap:var(--space-6); margin-bottom:var(--space-5); border:none}
#stickersModal .box-head h3{color:var(--accent); font-weight:800; font-size:1.35rem; margin:0}
#stickersModal .box-head button{
  width:var(--btn-md); height:var(--btn-md); border-radius:var(--r-2); border:var(--border-2) solid var(--accent); color:var(--accent);
  background:transparent; font-size:18px; font-weight:700; line-height:1; cursor:pointer; transition:all .25s
}
#stickersModal .box-head button:hover{background:var(--accent); color:#fff; transform:rotate(90deg)}
#stickersModal .uploader .row{display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:var(--space-5); align-items:end; margin:var(--space-6) 0 var(--space-8)}
#stickersModal .uploader label{font-size:14px; color:var(--muted)}
#stickersModal .uploader select,#stickersModal .uploader input[type="file"]{
  width:100%; border:var(--border-1) solid var(--silver); border-radius:var(--r-2); padding:var(--space-4) var(--space-5); background:#fff; font-size:14px
}
#stickersModal #stickerAddBtn{background:var(--accent); color:#fff; border:none; border-radius:var(--r-2); padding:var(--space-4) var(--space-6); font-weight:600; transition:.25s}
#stickersModal #stickerAddBtn:hover{background:var(--accent-2); transform:translateY(-2px)}
#stickersModal #stickersGrid{margin-top:var(--space-5); padding:var(--space-7) var(--space-8); border-radius:var(--r-4); background:linear-gradient(180deg,#f9fbff,#f3f6fa); overflow-y:auto; max-height:65vh}
#stickersGrid .tile{border:var(--border-2) solid rgba(0,0,0,.05); transition:all .2s ease; opacity:1 !important; transform:none !important; animation:stickerFadeIn .35s ease forwards}
#stickersGrid .tile:hover{transform:translateY(-4px); border-color:var(--accent); box-shadow:0 4px 12px rgba(13,110,253,.18)}
#stickersGrid .tile.is-selected{outline:var(--border-strong) solid var(--accent); outline-offset:1px; transform:translateY(-2px); animation:stickerSelectPulse .4s ease}
#stickersGrid .tile.rare{border-color:#007bff; box-shadow:0 0 8px rgba(0,123,255,.3)}
@keyframes stickerFadeIn{to{opacity:1; transform:scale(1)}}
@keyframes stickerSelectPulse{0%{box-shadow:0 0 0 0 rgba(13,110,253,.5)}70%{box-shadow:0 0 0 6px rgba(13,110,253,0)}100%{box-shadow:0 0 0 0 rgba(13,110,253,0)}}
#stickersModal .msg{text-align:center; color:var(--muted); margin-top:var(--space-5)}
@media (max-width:700px){#stickersModal .box{padding:var(--space-5) var(--space-6) var(--space-9)} #stickersModal .uploader .row{grid-template-columns:1fr}}

/* === STICKERS: make tiles & visuals bigger === */
#stickersModal .stickers-grid{grid-template-columns:repeat(auto-fill,minmax(160px,1fr)); gap:var(--space-6)}
#stickersModal .stickers-grid .tile,
#swimApp #stickersGrid .tile{max-width:180px; min-height:190px; padding-top:var(--space-5)}
#stickersModal .stickers-grid .tile .st-img,
#swimApp #stickersGrid .tile .st-img{width:100%; height:120px; object-fit:contain}
#stickersModal .stickers-grid .tile .emoji,
#swimApp #stickersGrid .tile .emoji{font-size:48px; width:auto; height:auto; line-height:1}
#stickersModal .stickers-grid .tile .name,
#swimApp #stickersGrid .tile .name{font-size:14px}
@media (max-width:600px){
  #stickersModal .stickers-grid{grid-template-columns:repeat(auto-fill,minmax(140px,1fr)); gap:var(--space-5)}
  #stickersModal .stickers-grid .tile,
  #swimApp #stickersGrid .tile{max-width:150px; min-height:170px}
  #stickersModal .stickers-grid .tile .st-img,
  #swimApp #stickersGrid .tile .st-img{height:100px}
  #stickersModal .stickers-grid .tile .emoji,
  #swimApp #stickersGrid .tile .emoji{font-size:40px}
}
/* Locked tiles */
#stickersModal .stickers-grid .tile.locked,
#swimApp #stickersGrid .tile.locked{
  opacity:.45; filter:grayscale(.85) contrast(.9); pointer-events:none; cursor:not-allowed; box-shadow:none;
}
#stickersModal .stickers-grid .tile.locked button[data-del],
#swimApp #stickersGrid .tile.locked button[data-del]{pointer-events:auto !important; cursor:pointer !important; opacity:.85 !important; filter:none !important;}
#stickersModal .stickers-grid .tile.locked:hover,
#swimApp #stickersGrid .tile.locked:hover{cursor:not-allowed; transform:none; box-shadow:none}
#stickersModal .stickers-grid .tile.locked.rare,
#swimApp #stickersGrid .tile.locked.rare{border-color:#d0d7e3; box-shadow:none; opacity:.6; filter:grayscale(.7)}
#stickersModal .stickers-grid .tile.locked::after{content:"🔒 Locked"; display:block; font-size:11px; color:#888; margin-top:var(--space-2); text-align:center}

/* === MEDIA TOGGLE — Blue ON / Red OFF === */
#mediaToggle{
  font-size:20px; line-height:1; border:var(--border-2) solid var(--accent); background:transparent; color:var(--accent);
  border-radius:var(--r-2); width:var(--btn-lg); height:var(--btn-lg); display:flex; align-items:center; justify-content:center; transition:all .25s ease;
}
#mediaToggle:hover{background:var(--accent); color:#fff; transform:scale(1.08)}
#mediaToggle.off{border-color:var(--danger); color:var(--danger); opacity:.9}
#mediaToggle.off:hover{background:var(--danger); color:#fff; transform:scale(1.08)}

/* ===================== PRINT ONLY ===================== */
@media print{
  @page{
    size:A4; margin:12mm;
    @top-left{content:none} @top-right{content:none}
    @bottom-left{content:none} @bottom-right{content:none}
  }
  html,body{background:#fff !important; color:#000 !important; margin:0 !important; padding:0 !important}
  #swimApp{background:#fff !important; box-shadow:none !important; margin:0 !important; padding:0 !important}

  #printTitle{display:block !important; font-size:28pt; font-weight:900; text-align:center; margin:0 0 12mm 0; line-height:1.15}
  #lessonCard{display:block !important; border:0 !important; box-shadow:none !important; padding:0 !important;
    page-break-inside:avoid !important; page-break-before:auto !important; page-break-after:auto !important}

  .sw-head,.progress,#exDock,#videoLightbox,#stickersModal,
  .actions,.quiz,.ex-actions,.ex-chips,.section .meta,
  header:not(.print-keep),footer,.site-footer,.quick-links,
  .breadcrumbs,.crumbs,.breadcrumb,.path,
  #blockSelect,#lessonSelect,label[for="blockSelect"],label[for="lessonSelect"],
  .select,.filters,.selectors,.lesson-selectors,
  .callout-video,.callout-video *,.callout-video::before,
  .video-carousel,.video-carousel *, .ex-media,.ex-media *,.media-thumb,.vid-thumb,
  .video-list,.media-caption,[data-video], img[src*="img.youtube.com"],
  .video-placeholder,.video-note,.video-caption,
  .print-url,.footer-url,[class*="footer"],[class*="credits"],[id*="footer"],
  body::before,body::after{display:none !important; content:none !important}

  #lessonCard .ex-card{border:0 !important; box-shadow:none !important; padding:0 !important; margin:0 0 6px !important; page-break-inside:avoid !important}
  #lessonCard .ex-check,#lessonCard .ex-card.is-active,#lessonCard .secbar{display:none !important}
  #lessonCard .ex-title{font-weight:700}
  #lessonCard .ex-sub{margin:2px 0 6px 0}

  *:focus,*:active{outline:0 !important; box-shadow:none !important}
  input,button,select{appearance:none; border:0 !important; background:none !important; padding:0 !important}
}

/* === Videos — unified === */
#swimApp .ex-media{padding:0 !important; border:0 !important; background:transparent !important; box-shadow:none !important;}
#swimApp .ex-media .video-list{display:grid; grid-template-columns:repeat(2,1fr); gap:var(--space-4); padding:var(--space-4);}
@media (max-width:640px){#swimApp .ex-media .video-list{grid-template-columns:1fr}}
#swimApp .vid-thumb{overflow:hidden; border-radius:var(--r-4); background:#fff;}
#swimApp .vid-thumb img{
  display:block; width:100%; height:100%; aspect-ratio:16/9; object-fit:cover;
  border:none !important; border-radius:var(--r-4); transform:scale(var(--video-scale)); filter:brightness(var(--brighten-media));
}

/* ==== Accordion expand state ==== */
#swimApp .ex-card.is-expanded,
#swimApp .ex-card[aria-expanded="true"]{
  max-height:var(--ex-expanded-max) !important; box-shadow:var(--shadow-elev);
  border-color:var(--accent); cursor:default;
}
@media (hover:none){
  #swimApp .ex-card.is-expanded,
  #swimApp .ex-card[aria-expanded="true"]{max-height:var(--ex-expanded-max-touch) !important;}
}

/* safety net for collapsed */
#swimApp .ex-card:not(.is-expanded):not([aria-expanded="true"]) .ex-sub,
#swimApp .ex-card:not(.is-expanded):not([aria-expanded="true"]) .ex-media,
#swimApp .ex-card:not(.is-expanded):not([aria-expanded="true"]) .ex-chips,
#swimApp .ex-card:not(.is-expanded):not([aria-expanded="true"]) .ex-actions,
#swimApp .ex-card:not(.is-expanded):not([aria-expanded="true"]) .ex-bar,
#swimApp .ex-card:not(.is-expanded):not([aria-expanded="true"]) .tip,
#swimApp .ex-card:not(.is-expanded):not([aria-expanded="true"]) .achievement{display:none !important}

/* «Video» placeholder look */
#swimApp .vid-thumb.no-thumb{
  display:inline-flex; align-items:center; justify-content:center;
  min-height:40px; padding:var(--space-4) var(--space-5); border:1px dashed var(--ring);
  border-radius:var(--r-3); font-weight:600; gap:var(--space-4); background:#fff;
}

/*Хочешь временно убрать колонку со списком — добавь одну строку: #lessonList{ display:none; }
*/
/* ===== Layout: две колонки внутри приложения ===== */
/* MOBILE-FIRST: по умолчанию один столбец */
#swimApp .two-col{
  display:flex;
  flex-direction:column;
  gap:16px;
  align-items:stretch;
}

/* Desktop ≥ 1100px — две колонки */
@media (min-width:1100px){
  #swimApp .two-col{
    display:grid;
    grid-template-columns:320px minmax(0,1fr);
    gap:16px;
    align-items:start;
  }

  /* когда список скрыт кнопкой ☰ */
  #swimApp.list-hidden .two-col{
    grid-template-columns:1fr;
  }
}



/* ===== Переключатель ☰: скрыть список уроков ===== */
#swimApp.list-hidden #lessonList{ display:none; }

/* ===== Левый сайдбар со списком уроков ===== */
/* База: обычный блок, без sticky (мобилки/планшеты) */
#lessonList{
  position:static;
  top:auto;
  max-height:none;
  overflow:visible;
  padding-right:0;
}

/* Sticky только на широких десктопах */
@media (min-width:1100px){
  #lessonList{
    position:sticky;
    top:84px;
    max-height:calc(100vh - 120px);
    overflow:auto;
    padding-right:6px;
  }
}

/* ===== Внешний вид карточек уроков ===== */
#lessonList .lesson-card{
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 10px 12px;
  margin: 0 0 8px;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  background: #fff;
  cursor: pointer;
}
.theme-dark #lessonList .lesson-card{
  background: #0b1220;
  border-color: #1f2937;
}
.lesson-card .lesson-top{ display: flex; align-items: center; gap: 8px; }
.lesson-card .lesson-num{ width: 2.5em; font-variant-numeric: tabular-nums; color: #2563eb; }
.lesson-card .lesson-title{ flex: 1; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lesson-card .lesson-status{ width: 1.5em; text-align: right; }
.lesson-card .lesson-meta{ font-size: 12px; color: #64748b; display: flex; gap: 6px; }
.lesson-card.is-done{ opacity: .7; }

/* ===== Правая колонка с контентом ===== */
#lessonCard{ min-height: 420px; }

/* Notices (баннеры) — scope под #swimApp, чтобы не утекали на сайт */
#swimApp .notice{
  margin:12px 16px;
  padding:12px 14px;
  border-radius:12px;
  font-size:14px;
  line-height:1.4;
  background:#fafcff;                 /* дефолтный фон */
  border:1px solid #cfd8dc;           /* дефолтная рамка */
}
#swimApp .notice.success{
  background:#e7f8ee;
  border-color:#b8ebcd;
}
#swimApp .notice.warn{
  background:#fff7e6;
  border-color:#ffe2b3;
}
#swimApp .notice.error{
  background:#fdeeee;
  border-color:#f6caca;
}
#swimApp .notice .meta{
  opacity:.9;
  font-size:13px;
  margin-top:6px;
}
#swimApp .notice .close{
  float:right;
  cursor:pointer;
  border:none;
  background:transparent;
  font-size:16px;
}

/* Небольшая адаптация для тёмной темы (если у тебя есть .theme-dark) */
#swimApp.theme-dark .notice{
  background:#1e293b;
  border-color:#334155;
  color:#e2e8f0;
}
#swimApp.theme-dark .notice.success{ background:#114530; border-color:#1b6d4a; }
#swimApp.theme-dark .notice.warn{    background:#4a3c18; border-color:#876a25; }
#swimApp.theme-dark .notice.error{   background:#4a1f1f; border-color:#7f3434; }
#swimApp.theme-dark .notice .meta{ color:#cbd5e1; opacity:.85; }

/* --- Gate modal animation --- */
#gateModal {
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.22s ease-out;
}

#gateModal.open {
  opacity: 1;
  pointer-events: auto;
}

#gateModal .box {
  transform: translateY(-10px);
  transition: transform 0.22s ease-out;
}

#gateModal.open .box {
  transform: translateY(0);
}


/* Premium / Free badges inside lesson card */
.chip-lock {
  border: 1px solid rgba(185, 28, 28, 0.45);
  background: rgba(185, 28, 28, 0.08);
  color: #b91c1c;
}

.chip-free {
  border: 1px solid rgba(22, 163, 74, 0.45);
  background: rgba(22, 163, 74, 0.08);
  color: #15803d;
}

#swimApp .sw-head .nav .btn-sm {
  font-size: 0.9rem;
  padding-inline: 10px;
  padding-block: 4px;
  border-radius: 999px;
  white-space: nowrap;
}

#swimApp .sw-head .nav #buyBlockBtn {
  border: 1px solid rgba(255,255,255,0.4);
}

#swimApp .sw-head .nav #subBlockBtn {
  font-weight: 600;
}

/* На маленьких экранах прячем подписи, оставляем только Subscribe */
@media (max-width: 600px) {
  #swimApp .sw-head .nav #buyBlockBtn {
    display: none;
  }
}


/* Media toggle color when OFF */
#mediaToggle.off{background-color:#dc2626 !important; color:#fff !important; border-color:#dc2626 !important;}