/* ============================================================
   ANALYSISSWIM — EDUCATION SHARED STYLES
   Template: education/styles
   Theme: Pace Clock visual system

   Contains:
   1. Swimming Education — scoped to #swimApp
   2. Swimming Book — scoped to #swimmingBookApp

   Replace the contents of education/styles completely with this
   file. Do not append it below an older stylesheet.
============================================================ */

/* ---------- Scope / Tokens ---------- */
#swimApp{
  /* Core palette — exactly the same base as Pace Clock */
  --pc-blue1:#00aaff;
  --pc-blue2:#0088dd;
  --pc-blue3:#0077cc;
  --bg:rgba(0,0,0,.10);
  --card:rgba(10,35,50,.78);
  --card-soft:rgba(255,255,255,.08);
  --card-hover:rgba(255,255,255,.14);
  --ink:#ffffff;
  --muted:rgba(255,255,255,.82);
  --muted-soft:rgba(255,255,255,.68);
  --accent:var(--pc-blue2);
  --accent-2:var(--pc-blue1);
  --active:var(--pc-blue3);
  --accent-dark:#ffffff;
  --silver:rgba(255,255,255,.18);
  --ring:rgba(255,255,255,.22);
  --success:#41c45a;
  --danger:#dc3545;
  --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:12px;
  --r-3:12px;
  --r-4:14px;
  --r-5:16px;
  --r-6:18px;
  --r-panel:20px;
  --r-round:999px;

  /* Borders & effects */
  --border-1:1px; --border-2:2px;
  --shadow-sm:0 6px 14px rgba(0,0,0,.14);
  --shadow:0 10px 24px rgba(0,0,0,.18);
  --shadow-lg:0 14px 30px rgba(0,0,0,.22);
  --shadow-elev:0 10px 24px rgba(0,0,0,.22);

  /* 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:linear-gradient(180deg,var(--pc-blue1),var(--pc-blue2));
  min-height:100vh;
  display:block;
  width:100%;
  max-width:1200px;
  margin:16px auto 24px;
  padding:14px;
  border:1px solid var(--silver);
  border-radius:18px;
  box-shadow:var(--shadow);
  overflow-x:hidden;
  isolation:isolate;
  font-family:ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Inter,Arial;
}
#swimApp,
#swimApp *{box-sizing:border-box}
#swimApp.theme-dark{
  --bg:rgba(0,0,0,.10);
  --card:rgba(10,35,50,.78);
  --ink:#ffffff;
  --muted:rgba(255,255,255,.82);
  --accent:#0088dd;
  --accent-2:#00aaff;
  --active:#0077cc;
  --silver:rgba(255,255,255,.18);
  --ring:rgba(255,255,255,.22);
}

/* ---------- 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:var(--accent); color:#fff;
  padding:var(--space-5) var(--space-7); border-radius:var(--r-3); cursor:pointer; font-weight:600;
  box-shadow:var(--shadow-sm);
  transition:transform .12s ease, box-shadow .12s ease, background .12s ease, filter .12s ease
}
#swimApp .btn:hover{background:var(--active); transform:translateY(-1px); box-shadow:0 10px 20px rgba(0,0,0,.18); filter:brightness(1.02)}
#swimApp .btn:active{transform:translateY(0); box-shadow:var(--shadow-sm)}
#swimApp .btn:focus-visible{outline:3px solid rgba(255,255,255,.34); outline-offset:2px}
#swimApp .btn:disabled{opacity:.45; cursor:not-allowed}
#swimApp .btn.primary{background:var(--accent); color:#fff; border-color:var(--silver)}
#swimApp .btn.primary:hover{background:var(--active)}
#swimApp .btn.ghost{background:rgba(255,255,255,.14); border:var(--border-1) solid rgba(255,255,255,.20); color:#fff}
#swimApp .btn.ghost:hover{background:rgba(255,255,255,.22); color:#fff}
#swimApp .select{
  appearance:none; border:var(--border-1) solid rgba(255,255,255,.22); background:rgba(255,255,255,.12); color:var(--ink);
  padding:var(--space-4) var(--space-5); border-radius:var(--r-2); min-width:var(--select-min); outline:none
}
#swimApp .select option{color:#111; background:#fff}
#swimApp .select:focus{border-color:rgba(0,170,255,.65); box-shadow:0 0 0 2px rgba(0,170,255,.25)}

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

#swimApp h1,
#swimApp h2,
#swimApp h3,
#swimApp h4,
#swimApp h5,
#swimApp h6 {
  color: #fff;
  font-family: inherit;
  font-style: normal;
  font-weight: 800;
}

/* ---------- 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:linear-gradient(180deg,rgba(0,0,0,.10),rgba(0,0,0,.16));
  border:var(--border-1) solid var(--silver);
  border-radius:var(--r-6);
  box-shadow:var(--shadow-sm)
}
#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:rgba(0,0,0,.16); 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:var(--muted); 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:rgba(0,136,221,.18); border-color:rgba(77,184,255,.38)}
#swimApp .callout-parent{background:rgba(255,209,102,.16); border-color:rgba(255,209,102,.38)}
#swimApp .callout-video{
  background:rgba(0,0,0,.10); 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:linear-gradient(180deg,rgba(0,0,0,.10),rgba(0,0,0,.16)); 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:#4db8ff;
  background:rgba(0,136,221,.24);
  box-shadow:inset 0 0 0 2px rgba(77,184,255,.34), 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:rgba(255,255,255,.10)
}
#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(0,136,221,.20), rgba(0,170,255,.08));
  border-left:var(--border-strong) solid #4db8ff;
  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(0,136,221,.28), rgba(0,170,255,.12));
}

/* 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:rgba(255,255,255,.12); color:#fff; border:var(--border-1) solid rgba(255,255,255,.20)
}
#swimApp .ex-chip.dist{background:rgba(255,209,102,.16); color:#fff; border-color:rgba(255,209,102,.38)}

/* Media inside card */
#swimApp .ex-media{
  margin:var(--space-6) 0 var(--space-5); background:rgba(0,0,0,.10); 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:#000; box-shadow:0 3px 8px rgba(0,0,0,.18)
}
#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:rgba(0,0,0,.16); border:var(--border-1) solid var(--silver); 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:var(--muted); 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:#0f2f46; border:var(--border-1) solid var(--silver); font-size:11px; display:grid; place-items:center; color:#fff
}

/* 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:var(--ink); 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:rgba(10,35,50,.62); border:var(--border-1) solid var(--silver);
  border-radius:var(--r-5); box-shadow:var(--shadow-sm)
}
#swimApp .quiz>strong{display:block; margin-bottom:var(--space-5); font-weight:800; font-size:clamp(16px,4.2vw,18px)}
#swimApp .quiz-item{background:rgba(0,0,0,.12); border:var(--border-1) solid var(--silver); 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:var(--ink); font-size:clamp(14px,3.8vw,17px)}
#swimApp .quiz-btn{
  appearance:none; border:var(--border-1) solid rgba(255,255,255,.20); background:rgba(255,255,255,.14); color:#fff; border-radius:var(--r-3); padding:var(--space-4) var(--space-5);
  font-weight:600; cursor:pointer; margin-right:var(--space-4); transition:background .12s ease, transform .12s ease
}
#swimApp .quiz-btn:hover{background:rgba(255,255,255,.22); transform:translateY(-1px)}
#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(10,35,50,.88); border:var(--border-1) solid var(--silver); color:#fff; display:flex; align-items:center; justify-content:center;
  z-index:2; box-shadow:var(--shadow-sm);
}
#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,.72); 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(0,0,0,.72); display:none; align-items:center; justify-content:center; padding:var(--space-8)}
#swimApp .modal.open{display:flex}
#swimApp .modal .box{background:#111; border:var(--border-1) solid rgba(255,255,255,.14); border-radius:20px; width:min(var(--modal-w),96vw); max-height:90vh; overflow:auto; padding:var(--space-6); box-shadow:0 20px 60px rgba(0,0,0,.45)}
#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 rgba(255,255,255,.12); border-radius:var(--r-4); background:#171717}
#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:#0f2f46; border:var(--border-1) solid rgba(255,255,255,.14); border-bottom:0;
  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)); backdrop-filter:blur(10px)
}
#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:var(--muted); 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{
  --bg:rgba(0,0,0,.10);
  --card:#111111;
  --tile:#171717;
  --ink:#ffffff;
  --muted:rgba(255,255,255,.82);
  --accent:#0088dd;
  --accent-2:#0077cc;
  --silver:rgba(255,255,255,.18);
  --space-2:4px;
  --space-4:8px;
  --space-5:10px;
  --space-6:12px;
  --space-7:14px;
  --space-8:16px;
  --space-9:20px;
  --space-10:24px;
  --r-2:12px;
  --r-3:12px;
  --r-4:14px;
  --r-panel:20px;
  --border-1:1px;
  --border-2:2px;
  --border-strong:3px;
  --btn-md:36px;
  --stickers-w:880px;

  color:var(--ink);
  font-family:ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Inter,Arial;
}
#stickersModal.modal{background:rgba(0,0,0,.72)}

#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:var(--tile); 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:rgba(10,35,50,.62);
  border:var(--border-1) solid var(--silver); border-radius:var(--r-5); box-shadow:var(--shadow-sm);
  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); background:rgba(255,255,255,.12); border-color:rgba(255,255,255,.30); box-shadow:var(--shadow)}
#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:var(--ink); margin:var(--space-2) 0; line-height:1.2em}
#swimApp #stickersGrid .tile .btn-inline{font-size:12px; background:none; border:none; color:var(--muted); cursor:pointer; margin-top:var(--space-1)}
#swimApp #stickersGrid .tile .btn-inline:hover{color:var(--danger)}
#swimApp #stickersGrid .tile.rare{border-color:#4db8ff; box-shadow:0 0 0 2px rgba(77,184,255,.22)}
#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:rgba(255,255,255,.10); 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); color:var(--ink); border-radius:var(--r-panel); box-shadow:0 20px 60px rgba(0,0,0,.45);
  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:#fff; font-family:inherit; font-style:normal; 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-1) solid rgba(255,255,255,.18); color:#fff;
  background:rgba(255,255,255,.10); font-size:18px; font-weight:700; line-height:1; cursor:pointer; transition:all .25s
}
#stickersModal .box-head button:hover{background:rgba(255,255,255,.18); 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 rgba(255,255,255,.22); border-radius:var(--r-2); padding:var(--space-4) var(--space-5); background:rgba(255,255,255,.12); color:#fff; font-size:14px; outline:none
}
#stickersModal .uploader select option{color:#111; background:#fff}
#stickersModal .uploader select:focus,#stickersModal .uploader input[type="file"]:focus{border-color:rgba(0,170,255,.65); box-shadow:0 0 0 2px rgba(0,170,255,.25)}
#stickersModal #stickerAddBtn{background:var(--accent); color:#fff; border:1px solid rgba(255,255,255,.18); border-radius:var(--r-2); padding:var(--space-4) var(--space-6); font-weight:600; transition:.12s}
#stickersModal #stickerAddBtn:hover{background:var(--accent-2); transform:translateY(-1px)}
#stickersModal #stickersGrid{margin-top:var(--space-5); padding:var(--space-7) var(--space-8); border:1px solid rgba(255,255,255,.12); border-radius:var(--r-4); background:#171717; overflow-y:auto; max-height:65vh}
#stickersGrid .tile{background:#171717; color:#fff; border:var(--border-1) solid rgba(255,255,255,.12); transition:all .2s ease; opacity:1 !important; transform:none !important; animation:stickerFadeIn .35s ease forwards}
#stickersGrid .tile:hover{transform:translateY(-4px); border-color:#4db8ff; box-shadow:0 6px 14px rgba(0,0,0,.22)}
#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:#4db8ff; box-shadow:0 0 0 2px rgba(77,184,255,.22)}
@keyframes stickerFadeIn{to{opacity:1; transform:scale(1)}}
@keyframes stickerSelectPulse{0%{box-shadow:0 0 0 0 rgba(77,184,255,.5)}70%{box-shadow:0 0 0 6px rgba(77,184,255,0)}100%{box-shadow:0 0 0 0 rgba(77,184,255,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:rgba(255,255,255,.22); box-shadow:none; opacity:.6; filter:grayscale(.7)}
#stickersModal .stickers-grid .tile.locked::after{content:"???? Locked"; display:block; font-size:11px; color:var(--muted); margin-top:var(--space-2); text-align:center}

/* === MEDIA TOGGLE — Blue ON / Red OFF === */
#swimApp #mediaToggle{
  font-size:20px; line-height:1; border:var(--border-1) solid rgba(255,255,255,.20); background:rgba(255,255,255,.14); color:#fff;
  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;
}
#swimApp #mediaToggle:hover{background:rgba(255,255,255,.22); color:#fff; transform:scale(1.05)}
#swimApp #mediaToggle.off{border-color:var(--danger); color:var(--danger); opacity:.9}
#swimApp #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;
    color:#000 !important;
    border:0 !important;
    border-radius:0 !important;
    box-shadow:none !important;
    margin:0 !important;
    padding:0 !important;
  }
  #swimApp h1,
  #swimApp h2,
  #swimApp h3,
  #swimApp h4,
  #swimApp h5,
  #swimApp h6{color:#000 !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{color:#000 !important; background:#fff !important; 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{color:#000 !important; background:none !important; 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:var(--card);}
#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:rgba(255,255,255,.08);
}

/*Хочешь временно убрать колонку со списком — добавь одну строку: #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 (мобилки/планшеты) */
#swimApp #lessonList{
  position:static;
  top:auto;
  max-height:none;
  overflow:visible;
  padding-right:0;
}

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

/* ===== Внешний вид карточек уроков ===== */
#swimApp #lessonList .lesson-card{
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 10px 12px;
  margin: 0 0 8px;
  border: 1px solid var(--silver);
  border-radius: var(--r-3);
  background: rgba(10,35,50,.62);
  cursor: pointer;
  box-shadow: var(--shadow-sm);
  transition: background .12s ease, border-color .12s ease, transform .12s ease;
}
#swimApp.theme-dark #lessonList .lesson-card{
  background: rgba(10,35,50,.62);
  border-color: var(--silver);
}
#swimApp #lessonList .lesson-card:hover{
  background: rgba(255,255,255,.12);
  border-color: rgba(255,255,255,.30);
  transform: translateY(-1px);
}
#swimApp #lessonList .lesson-card.is-active{
  background: rgba(0,136,221,.24);
  border-color: #4db8ff;
  box-shadow: inset 0 0 0 1px rgba(77,184,255,.34), var(--shadow-sm);
}
#swimApp .lesson-card .lesson-top{ display: flex; align-items: center; gap: 8px; }
#swimApp .lesson-card .lesson-num{ width: 2.5em; font-variant-numeric: tabular-nums; color: var(--accent); }
#swimApp .lesson-card .lesson-title{ flex: 1; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#swimApp .lesson-card .lesson-status{ width: 1.5em; text-align: right; }
#swimApp .lesson-card .lesson-meta{ font-size: 12px; color: var(--muted); display: flex; gap: 6px; }
#swimApp .lesson-card.is-done{
  opacity:.78;
  border-color:rgba(65,196,90,.42);
}
#swimApp .lesson-card.is-done .lesson-status{color:#bfffc9}

/* ===== Правая колонка с контентом ===== */
#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;
  color:#fff;
  background:rgba(255,255,255,.10);
  border:1px solid rgba(255,255,255,.18);
}
#swimApp .notice.success{
  background:rgba(65,196,90,.16);
  border-color:rgba(65,196,90,.38);
}
#swimApp .notice.warn{
  background:rgba(255,209,102,.16);
  border-color:rgba(255,209,102,.38);
}
#swimApp .notice.error{
  background:rgba(220,53,69,.18);
  border-color:rgba(220,53,69,.40);
}
#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:rgba(255,255,255,.10);
  border-color:rgba(255,255,255,.18);
  color:#fff;
}
#swimApp.theme-dark .notice.success{background:rgba(65,196,90,.16); border-color:rgba(65,196,90,.38)}
#swimApp.theme-dark .notice.warn{background:rgba(255,209,102,.16); border-color:rgba(255,209,102,.38)}
#swimApp.theme-dark .notice.error{background:rgba(220,53,69,.18); border-color:rgba(220,53,69,.40)}
#swimApp.theme-dark .notice .meta{color:rgba(255,255,255,.82); 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 */
#swimApp .chip-lock {
  border: 1px solid rgba(255, 90, 90, .45);
  background: rgba(220, 53, 69, .18);
  color: #ffd0d0;
}

#swimApp .chip-free {
  border: 1px solid rgba(65, 196, 90, .45);
  background: rgba(65, 196, 90, .18);
  color: #d8ffe0;
}

#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 */
#swimApp #mediaToggle.off{background-color:var(--danger) !important; color:#fff !important; border-color:var(--danger) !important;}

/* =========================================================
   SWIMMING BOOK MODULE
   ========================================================= */

/* =========================================================
   ANALYSISSWIM — SWIMMING BOOK
   Pace Clock visual system

   Module inside education/styles.
   All rules are scoped to #swimmingBookApp.
   ========================================================= */

#swimmingBookApp,
#swimmingBookApp *{
  box-sizing:border-box;
}

#swimmingBookApp{
  --sb-blue1:#159fdd;
  --sb-blue2:#0b82c1;
  --sb-blue3:#076ca6;
  --sb-navy:#075f93;
  --sb-navy2:#087caf;
  --sb-paper:#fffdf6;
  --sb-paper2:#f7efdf;
  --sb-paper3:#ecdfc8;
  --sb-ink:#17334a;
  --sb-muted-dark:#607487;
  --sb-text:#ffffff;
  --sb-muted:rgba(255,255,255,.84);
  --sb-line:rgba(255,255,255,.20);
  --sb-paper-line:#dfd1b8;
  --sb-green1:#41c45a;
  --sb-danger:#ef4f6c;
  --sb-gold:#e5ae36;
  --sb-shadow:0 14px 34px rgba(5,75,115,.19);
  --sb-shadow2:0 6px 18px rgba(5,75,115,.13);

  width:100%;
  max-width:1200px;
  margin:16px auto 24px;
  padding:18px;
  color:var(--sb-text);
  background:
    radial-gradient(circle at 100% 0,rgba(255,255,255,.18),transparent 32%),
    linear-gradient(145deg,var(--sb-blue1),var(--sb-blue2));
  border:1px solid var(--sb-line);
  border-radius:24px;
  box-shadow:var(--sb-shadow);
  font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  isolation:isolate;
  overflow-x:hidden;
}

#swimmingBookApp .container{
  width:100%;
  max-width:1100px;
  margin:0 auto;
  padding:14px;
}

#swimmingBookApp header{
  position:relative;
  display:flex;
  align-items:center;
  gap:14px;
  flex-wrap:wrap;
  margin:0 0 16px;
  padding:22px 22px 22px 30px;
  overflow:hidden;
  background:
    linear-gradient(90deg,rgba(0,0,0,.13),transparent 14%),
    linear-gradient(135deg,var(--sb-navy),var(--sb-navy2));
  border:1px solid rgba(255,255,255,.24);
  border-radius:20px;
  box-shadow:var(--sb-shadow2);
}

#swimmingBookApp header::before{
  content:"";
  position:absolute;
  inset:0 auto 0 10px;
  width:6px;
  background:linear-gradient(180deg,#f6d377,var(--sb-gold),#b47b18);
  border-radius:999px;
  box-shadow:0 0 0 1px rgba(255,255,255,.18);
}

#swimmingBookApp .logo{
  flex:1 1 auto;
  min-width:220px;
  color:#fff;
  font-family:'Philosopher',Georgia,serif;
  font-size:clamp(22px,3vw,30px);
  font-weight:700;
  letter-spacing:.2px;
  line-height:1.16;
}

#swimmingBookApp .badge{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:7px 11px;
  color:#fff8df;
  background:rgba(229,174,54,.18);
  border:1px solid rgba(246,211,119,.46);
  border-radius:999px;
  font-size:14px;
  font-weight:700;
  line-height:1.2;
}

#swimmingBookApp .toolbar,
#swimmingBookApp #manualLinks{
  display:flex;
  align-items:center;
  gap:8px;
  flex-wrap:wrap;
}

#swimmingBookApp .toolbar{
  margin-left:auto;
}

#swimmingBookApp button,
#swimmingBookApp #manualLinks a{
  appearance:none;
  min-height:40px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  padding:9px 14px;
  color:#fff;
  background:linear-gradient(180deg,var(--sb-blue1),var(--sb-blue2));
  border:1px solid rgba(255,255,255,.24);
  border-radius:12px;
  box-shadow:var(--sb-shadow2);
  font:inherit;
  font-size:14px;
  font-weight:700;
  line-height:1.2;
  text-decoration:none;
  cursor:pointer;
  transition:background .12s ease,transform .12s ease,box-shadow .12s ease;
}

#swimmingBookApp button:hover,
#swimmingBookApp #manualLinks a:hover{
  color:#fff;
  background:var(--sb-blue3);
  transform:translateY(-1px);
  box-shadow:0 10px 20px rgba(0,0,0,.18);
}

#swimmingBookApp button:active,
#swimmingBookApp #manualLinks a:active{
  transform:translateY(0);
  box-shadow:var(--sb-shadow2);
}

#swimmingBookApp button:focus-visible,
#swimmingBookApp #manualLinks a:focus-visible,
#swimmingBookApp select:focus-visible,
#swimmingBookApp input:focus-visible,
#swimmingBookApp .answer:focus-visible{
  outline:3px solid rgba(255,255,255,.34);
  outline-offset:2px;
}

#swimmingBookApp button.secondary{
  color:#fff;
  background:rgba(255,255,255,.12);
  border-color:rgba(255,255,255,.26);
}

#swimmingBookApp button.secondary:hover{
  background:rgba(255,255,255,.22);
}

#swimmingBookApp .card{
  color:var(--sb-ink);
  background:
    linear-gradient(90deg,rgba(120,91,43,.035) 1px,transparent 1px),
    var(--sb-paper);
  background-size:28px 100%;
  border:1px solid var(--sb-paper-line);
  border-radius:16px;
  box-shadow:var(--sb-shadow2);
}

#swimmingBookApp .hero{
  position:relative;
  padding:24px 26px 24px 30px;
  overflow:hidden;
}

#swimmingBookApp .hero::before{
  content:"";
  position:absolute;
  inset:14px auto 14px 12px;
  width:4px;
  border-radius:999px;
  background:var(--sb-gold);
}

#swimmingBookApp .hero h1{
  margin:0 0 7px;
  color:var(--sb-ink);
  font-family:'Philosopher',Georgia,serif;
  font-size:clamp(24px,4vw,34px);
  font-style:italic;
  font-weight:700;
  line-height:1.15;
}

#swimmingBookApp .hero p{
  margin:0;
  color:var(--sb-muted-dark);
  font-size:16px;
  line-height:1.5;
}

#swimmingBookApp .chapters,
#swimmingBookApp .jump{
  margin-top:14px;
  padding:12px;
}

#swimmingBookApp .sr-only{
  position:absolute;
  width:1px;
  height:1px;
  padding:0;
  margin:-1px;
  overflow:hidden;
  clip:rect(0,0,0,0);
  white-space:nowrap;
  border:0;
}

#swimmingBookApp .select,
#swimmingBookApp .select-chapters,
#swimmingBookApp .input{
  appearance:none;
  width:100%;
  min-height:42px;
  padding:9px 12px;
  color:var(--sb-ink);
  background:#fff;
  border:1px solid var(--sb-paper-line);
  border-radius:12px;
  outline:none;
  font:inherit;
  font-size:14px;
}

#swimmingBookApp .select-chapters{
  max-width:100%;
  padding-right:40px;
  font-weight:700;
  cursor:pointer;
}

#swimmingBookApp select option,
#swimmingBookApp select optgroup{
  color:#111;
  background:#fff;
}

#swimmingBookApp .progress{
  display:flex;
  flex-direction:row;
  align-items:center;
  gap:12px;
  flex-wrap:nowrap;
  height:auto;
  min-height:58px;
  overflow:visible;
  margin-top:14px;
  padding:16px;
  font-size:inherit;
  background:var(--sb-paper);
}

#swimmingBookApp .progress-bar{
  flex:1 1 auto;
  width:auto;
  min-width:120px;
  height:10px;
  overflow:hidden;
  background:var(--sb-paper3);
  border:1px solid #d5c29e;
  border-radius:999px;
}

#swimmingBookApp .progress-bar>span{
  display:block;
  width:0%;
  height:100%;
  background:linear-gradient(90deg,var(--sb-blue2),#19a5d8,var(--sb-gold));
  transition:width .25s ease;
}

#swimmingBookApp .stars{
  min-height:24px;
  display:flex;
  align-items:center;
  gap:6px;
}

#swimmingBookApp .star{
  color:var(--sb-gold);
  font-size:22px;
  line-height:1;
  filter:drop-shadow(0 1px 1px rgba(0,0,0,.18));
}

#swimmingBookApp .star.small{
  color:#c7b589;
  font-size:18px;
}

#swimmingBookApp #score{
  min-width:44px;
  color:var(--sb-ink);
  font-weight:800;
  text-align:right;
}

#swimmingBookApp .nav{
  display:flex;
  align-items:center;
  gap:8px;
  flex-wrap:wrap;
  margin-top:14px;
  padding:12px;
  background:linear-gradient(135deg,var(--sb-navy),var(--sb-navy2));
  border:1px solid rgba(255,255,255,.22);
  border-radius:16px;
  box-shadow:var(--sb-shadow2);
}

#swimmingBookApp .chip{
  min-height:38px;
  padding:8px 12px;
  color:#fff8df;
  background:rgba(255,255,255,.08);
  border-color:rgba(255,255,255,.22);
  border-radius:999px;
  box-shadow:none;
}

#swimmingBookApp .chip:hover,
#swimmingBookApp .chip.active{
  color:var(--sb-navy);
  background:linear-gradient(180deg,#ffe8a2,var(--sb-gold));
  border-color:#ffe8a2;
  box-shadow:0 5px 14px rgba(0,0,0,.18);
}

#swimmingBookApp .grid{
  display:grid;
  grid-template-columns:repeat(12,minmax(0,1fr));
  gap:16px;
  margin-top:14px;
}

#swimmingBookApp .section{
  display:none;
  grid-column:1/-1;
}

#swimmingBookApp .section.active{
  display:block;
}

#swimmingBookApp .section .wrap{
  display:grid;
  grid-template-columns:minmax(0,1.2fr) minmax(280px,.8fr);
  gap:0;
  filter:drop-shadow(0 16px 24px rgba(3,57,89,.16));
}

#swimmingBookApp .content,
#swimmingBookApp .quiz{
  min-width:0;
  min-height:340px;
  padding:26px;
  color:var(--sb-ink);
  background:
    linear-gradient(90deg,rgba(117,85,33,.035) 1px,transparent 1px),
    linear-gradient(180deg,#fffefa,var(--sb-paper));
  background-size:28px 100%,100% 100%;
  border:1px solid var(--sb-paper-line);
}

#swimmingBookApp .content{
  border-right:0;
  border-radius:20px 0 0 20px;
  box-shadow:
    inset -18px 0 28px -28px rgba(75,48,16,.70),
    inset 9px 0 14px -15px rgba(75,48,16,.45);
}

#swimmingBookApp .quiz{
  border-left:1px solid #d8c7a8;
  border-radius:0 20px 20px 0;
  box-shadow:
    inset 18px 0 28px -28px rgba(75,48,16,.75),
    inset -9px 0 14px -15px rgba(75,48,16,.40);
}

#swimmingBookApp .content h2{
  margin:0 0 10px;
  color:var(--sb-navy);
  font-family:'Philosopher',Georgia,serif;
  font-size:clamp(23px,3.2vw,30px);
  font-style:italic;
  font-weight:700;
  line-height:1.18;
}

#swimmingBookApp .content p{
  margin:0 0 10px;
  color:var(--sb-ink);
  font-size:16px;
  line-height:1.65;
}

#swimmingBookApp .tips{
  display:flex;
  flex-direction:column;
  gap:8px;
  margin-top:12px;
}

#swimmingBookApp .tip{
  display:flex;
  align-items:flex-start;
  gap:10px;
  padding:10px;
  color:#18552c;
  background:#eef8ed;
  border:1px solid #a9d5a9;
  border-radius:12px;
}

#swimmingBookApp .q-title{
  margin-bottom:12px;
  color:var(--sb-navy);
  font-family:'Philosopher',Georgia,serif;
  font-size:21px;
  font-weight:700;
}

#swimmingBookApp .answers{
  display:flex;
  flex-direction:column;
  gap:8px;
  margin-bottom:12px;
}

#swimmingBookApp .answer{
  display:flex;
  align-items:center;
  gap:10px;
  padding:11px 12px;
  color:var(--sb-ink);
  background:#fff;
  border:1px solid var(--sb-paper-line);
  border-radius:12px;
  cursor:pointer;
  transition:background .12s ease,border-color .12s ease,transform .12s ease;
}

#swimmingBookApp .answer:hover{
  background:#f7fbff;
  border-color:#82b9d8;
  transform:translateY(-1px);
}

#swimmingBookApp .answer.selected{
  color:var(--sb-navy);
  background:#e6f5ff;
  border-color:#4a9fcd;
  box-shadow:inset 0 0 0 1px rgba(74,159,205,.20);
}

#swimmingBookApp .answer.correct{
  color:#154f27;
  background:#e8f7e8;
  border-color:#68b979;
  box-shadow:inset 0 0 0 1px rgba(65,196,90,.22);
}

#swimmingBookApp .answer.wrong{
  color:#7a2334;
  background:#fff0f3;
  border-color:#d97a8d;
  box-shadow:inset 0 0 0 1px rgba(239,79,108,.22);
}

#swimmingBookApp .actions{
  display:flex;
  align-items:center;
  gap:10px;
  flex-wrap:wrap;
}

#swimmingBookApp .quiz .actions{
  margin-top:14px;
}

#swimmingBookApp .quiz .actions button,
#swimmingBookApp .quiz .actions button.secondary{
  color:#fff;
  background:linear-gradient(180deg,var(--sb-blue1),var(--sb-blue2));
  border-color:var(--sb-blue3);
  box-shadow:0 6px 14px rgba(5,65,103,.18);
}

#swimmingBookApp .quiz .actions button:hover,
#swimmingBookApp .quiz .actions button.secondary:hover{
  color:#fff;
  background:var(--sb-blue3);
}

#swimmingBookApp .quiz .actions button + button,
#swimmingBookApp .quiz .actions button.secondary + button.secondary{
  color:var(--sb-ink);
  background:var(--sb-paper2);
  border-color:var(--sb-paper-line);
}

#swimmingBookApp .quiz .actions button + button:hover,
#swimmingBookApp .quiz .actions button.secondary + button.secondary:hover{
  color:var(--sb-navy);
  background:#efe3cd;
}

#swimmingBookApp .certificate{
  margin-top:16px;
  padding:18px;
  color:var(--sb-ink);
  background:
    linear-gradient(135deg,rgba(229,174,54,.12),transparent 42%),
    var(--sb-paper);
  border-color:#d9bd78;
}

#swimmingBookApp .certificate[hidden]{
  display:none;
}

#swimmingBookApp .cert-box{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  flex-wrap:wrap;
}

#swimmingBookApp .certificate h3{
  margin:0 0 8px;
  color:var(--sb-navy);
  font-family:'Philosopher',Georgia,serif;
  font-style:italic;
  font-weight:700;
}

#swimmingBookApp .certificate .muted{
  color:var(--sb-muted-dark);
}

#swimmingBookApp noscript{
  display:block;
  margin-top:14px;
  padding:12px 14px;
  color:#fff;
  background:rgba(239,79,108,.18);
  border:1px solid rgba(239,79,108,.40);
  border-radius:12px;
}

@media (max-width:860px){
  #swimmingBookApp .section .wrap{
    grid-template-columns:1fr;
    gap:14px;
    filter:none;
  }

  #swimmingBookApp .content,
  #swimmingBookApp .quiz{
    min-height:0;
    border:1px solid var(--sb-paper-line);
    border-radius:18px;
    box-shadow:var(--sb-shadow2);
  }
}

@media (max-width:640px){
  #swimmingBookApp{
    margin:10px auto 18px;
    padding:10px;
    border-radius:16px;
  }

  #swimmingBookApp .container{
    padding:8px;
  }

  #swimmingBookApp header{
    align-items:stretch;
    padding:18px 14px 16px 24px;
    border-radius:14px;
  }

  #swimmingBookApp .logo{
    min-width:0;
    width:100%;
    font-size:19px;
  }

  #swimmingBookApp .toolbar,
  #swimmingBookApp #manualLinks{
    width:100%;
  }

  #swimmingBookApp #manualLinks a,
  #swimmingBookApp #btn-reset{
    flex:1 1 auto;
  }

  #swimmingBookApp .hero,
  #swimmingBookApp .content,
  #swimmingBookApp .quiz{
    padding:18px;
  }

  #swimmingBookApp .hero{
    padding-left:24px;
  }

  #swimmingBookApp .content p{
    font-size:15px;
    line-height:1.58;
  }
}

@media (max-width:480px){
  #swimmingBookApp .progress{
    flex-wrap:wrap;
  }

  #swimmingBookApp .stars{
    flex:1 1 100%;
  }
}

@media print{
  #swimmingBookApp{
    max-width:none;
    margin:0;
    padding:0;
    color:#000;
    background:#fff;
    border:0;
    border-radius:0;
    box-shadow:none;
  }

  #swimmingBookApp header,
  #swimmingBookApp .chapters,
  #swimmingBookApp .jump,
  #swimmingBookApp .progress,
  #swimmingBookApp .nav,
  #swimmingBookApp .quiz,
  #swimmingBookApp .certificate,
  #swimmingBookApp noscript{
    display:none !important;
  }

  #swimmingBookApp .section.active,
  #swimmingBookApp .section .wrap{
    display:block;
  }

  #swimmingBookApp .content{
    color:#000;
    background:#fff;
    border:0;
    box-shadow:none;
  }

  #swimmingBookApp .content h2,
  #swimmingBookApp .content p{
    color:#000;
  }
}