/* base */
/* Společné hodnoty: barvy a zaoblení změníš pro celý web na jednom místě. */
:root {
  --background: #f6f5f1;
  --surface: #ffffff;
  --ink: #232332;
  --muted: #63636f;
  --accent: #6544c5;
  --accent-dark: #50329f;
  --accent-light: #eee8fc;
  --border: #e3e1e8;
  --radius: 24px;
  --content-width: 1160px;
  font-family: "Segoe UI", system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
  color: var(--ink);
  background: var(--background);
  font-synthesis: none;
  line-height: 1.6;
}

* { box-sizing: border-box; }
body { margin: 0; min-width: 320px; }
img { display: block; max-width: 100%; }
a { color: inherit; }
button, input, select { font: inherit; }
h1, h2, h3, p { margin: 0; }
h1, h2, h3 { line-height: 1.15; }
h1 { font-size: clamp(2.5rem, 5vw, 4.4rem); letter-spacing: -0.055em; }
h2 { font-size: clamp(1.5rem, 3vw, 2rem); letter-spacing: -0.035em; }
h3 { font-size: 1.12rem; letter-spacing: -0.02em; }
:focus-visible { outline: 3px solid var(--accent); outline-offset: 5px; }
h1[tabindex="-1"]:focus { outline: none; }

.container { width: min(var(--content-width), calc(100% - 48px)); margin-inline: auto; }
.eyebrow { color: var(--accent); font-size: 0.73rem; font-weight: 750; letter-spacing: 0.13em; text-transform: uppercase; }
.muted { color: var(--muted); }
.brand-dot { color: var(--accent); }
.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
  min-height: 50px;
  padding: 12px 23px;
  border: 1px solid transparent;
  border-radius: 13px;
  font-weight: 650;
  text-decoration: none;
  transition: background 160ms, transform 160ms;
}
.button-primary { background: var(--accent); color: white; }
.button-primary:hover { background: var(--accent-dark); transform: translateY(-2px); }
.button-secondary { background: var(--surface); border-color: var(--border); }
.button-secondary:hover { background: var(--accent-light); }
.skip-link { position: absolute; top: -100px; left: 16px; padding: 12px 20px; background: white; z-index: 10; border-radius: 10px; }
.skip-link:focus { top: 12px; }
.notice { margin-block: 20px; padding: 16px; background: var(--accent-light); border-radius: 12px; }

@media (max-width: 600px) {
  .container { width: calc(100% - 32px); }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; }
}


/* layout */
/* HLAVIČKA A NAVIGACE */
.site-header { border-bottom: 1px solid var(--border); }
.header-inner { min-height: 94px; display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.brand { display: inline-flex; align-items: center; gap: 9px; font-size: 1.2rem; font-weight: 600; text-decoration: none; letter-spacing: -0.04em; white-space: nowrap; }
.brand strong { color: var(--accent); font-weight: 750; }
.main-nav { display: flex; align-items: center; gap: 6px; padding: 5px; border: 1px solid var(--border); border-radius: 14px; background: #eeede8; }
.nav-link { padding: 8px 20px; border-radius: 9px; text-decoration: none; color: var(--muted); font-size: 0.9rem; font-weight: 650; }
.nav-link:hover { color: var(--ink); }
.nav-link.is-active { background: white; color: var(--ink); box-shadow: 0 2px 5px #2323320a; }
.header-note { display: flex; align-items: center; gap: 8px; color: var(--muted); font-size: 0.78rem; }
.status-dot { width: 7px; height: 7px; border-radius: 50%; background: #6b8f5a; }
.page-content { min-height: calc(100vh - 200px); padding-block: 46px 60px; }
.loading-message { padding-block: 60px; }

/* ÚVODNÍ OBRAZOVKA */
.hero { display: grid; grid-template-columns: 1.15fr 1fr; align-items: center; gap: 64px; }
.hero-copy { padding-block: 24px; }
.hero-copy h1 { margin-top: 20px; max-width: 590px; }
.hero-copy h1 span { color: var(--accent); }
.hero-description { max-width: 440px; color: var(--muted); font-size: 1.06rem; margin-top: 25px; }
.hero-copy .button { margin-top: 30px; }
.hero-footnote { margin-top: 14px; color: var(--muted); font-size: 0.8rem; }
.hero-art { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 430px; overflow: hidden; border-radius: 32px; background: #e8dff9; isolation: isolate; }
.art-caption { position: absolute; top: 27px; left: 30px; color: #5a4279; font-size: 0.67rem; font-weight: 750; letter-spacing: 0.13em; }
.art-circle { position: absolute; width: 290px; height: 290px; border: 1px solid #c9b5e8; border-radius: 50%; z-index: -1; }
.art-circle::after { content: ""; position: absolute; inset: -28px; border: 1px solid #d4c3ee; border-radius: 50%; }
.hero-mascot { width: 265px; height: 265px; transform: rotate(-8deg); }
.art-tag { position: absolute; padding: 10px 16px; background: white; border-radius: 12px; font-size: 0.82rem; font-weight: 650; box-shadow: 0 8px 18px #5934790b; }
.art-tag-top { top: 85px; right: 22px; transform: rotate(7deg); }
.art-tag-bottom { bottom: 61px; left: 25px; transform: rotate(-7deg); }
.art-bottom { position: absolute; bottom: 24px; color: #5a4279; font-size: 0.73rem; }
.how-it-works { margin-top: 68px; }
.section-heading { display: flex; justify-content: space-between; align-items: baseline; gap: 20px; margin-bottom: 22px; }
.section-heading p { color: var(--muted); font-size: 0.9rem; }
.steps-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.step-card { padding: 26px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); }
.step-number { display: inline-flex; width: 34px; height: 34px; align-items: center; justify-content: center; border-radius: 10px; background: var(--accent-light); color: var(--accent); font-size: 0.75rem; font-weight: 750; margin-bottom: 25px; }
.step-card p { color: var(--muted); margin-top: 11px; font-size: 0.9rem; }

/* KATALOG – V PRVNÍM KROKU ZATÍM BEZ SKLADEB */
.page-heading { margin-top: 8px; }
.page-heading h1 { font-size: clamp(2.4rem, 5vw, 3.6rem); margin-top: 13px; }
.page-heading > p:last-child { margin-top: 17px; max-width: 590px; color: var(--muted); }
.catalog-layout { display: grid; grid-template-columns: 1fr 300px; gap: 22px; margin-top: 36px; }
.empty-state { display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 370px; padding: 42px 28px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); text-align: center; }
.empty-state img { width: 95px; height: 95px; margin-bottom: 15px; }
.empty-state h2 { font-size: 1.6rem; }
.empty-state p { max-width: 390px; margin-top: 15px; color: var(--muted); }
.empty-state .button { margin-top: 25px; }
.catalog-note { align-self: start; padding: 27px; background: var(--accent-light); border-radius: var(--radius); }
.catalog-note h2 { font-size: 1.3rem; margin-block: 14px; }
.catalog-note > p:not(.eyebrow) { color: #5e5275; font-size: 0.9rem; }
.topic-list { list-style: none; padding: 0; margin: 22px 0 0; }
.topic-list li { padding-block: 12px; border-top: 1px solid #d6caed; font-size: 0.9rem; font-weight: 600; }
.topic-list small { display: block; margin-top: 3px; color: #685879; font-size: 0.78rem; font-weight: 400; }
.not-found { margin-block: 35px; }

/* PATIČKA */
.site-footer { display: flex; justify-content: space-between; align-items: center; gap: 20px; border-top: 1px solid var(--border); padding-block: 25px; }
.site-footer > span { font-weight: 700; font-size: 0.87rem; }
.site-footer p { color: var(--muted); font-size: 0.78rem; }

/* TABLET A TELEFON */
@media (max-width: 1000px) {
  .header-note { display: none; }
  .hero { gap: 32px; }
  .hero-art { min-height: 400px; }
  .art-tag-top { right: 12px; }
  .catalog-layout { grid-template-columns: 1fr 260px; }
}
@media (max-width: 760px) {
  .header-inner { min-height: 82px; }
  .hero { grid-template-columns: 1fr; gap: 27px; }
  .hero-copy { padding-block: 0; }
  .hero-copy h1 { max-width: 620px; font-size: clamp(2.7rem, 8vw, 4rem); }
  .hero-art { min-height: 320px; }
  .hero-mascot { width: 210px; height: 210px; }
  .art-circle { width: 220px; height: 220px; }
  .art-tag-top { top: 76px; right: 30px; }
  .art-tag-bottom { bottom: 57px; }
  .how-it-works { margin-top: 42px; }
  .section-heading { display: block; }
  .section-heading p { margin-top: 9px; }
  .steps-grid { grid-template-columns: 1fr; }
  .step-card { padding: 23px; }
  .step-number { margin-bottom: 16px; }
  .catalog-layout { grid-template-columns: 1fr; }
  .catalog-note { padding: 24px; }
}
@media (max-width: 480px) {
  .header-inner { gap: 14px; flex-wrap: wrap; padding-block: 16px; }
  .brand { font-size: 1.13rem; }
  .brand img { width: 36px; height: 36px; }
  .main-nav { width: 100%; }
  .nav-link { flex: 1; text-align: center; }
  .page-content { padding-block: 30px 40px; }
  .hero-description { font-size: 1rem; }
  .hero-art { min-height: 310px; }
  .art-tag { padding: 9px 12px; font-size: 0.75rem; }
  .art-tag-top { right: 13px; top: 76px; }
  .art-tag-bottom { left: 14px; bottom: 55px; }
  .art-caption { left: 22px; top: 24px; }
  .site-footer { align-items: flex-start; flex-direction: column; gap: 5px; }
}


/* catalog */
/* Katalog má vlastní styly. Barvy a základní prvky přebírá z base.css. */
.catalog-page [hidden] { display: none; }
.catalog-toolbar { padding: 22px; margin-top: 30px; background: white; border: 1px solid var(--border); border-radius: 20px; }
.catalog-controls { display: grid; grid-template-columns: minmax(180px, 1.5fr) minmax(180px, 1fr) minmax(180px, 1fr) auto; align-items: end; gap: 14px; border: 0; padding: 0; margin: 0; min-width: 0; }
.catalog-field { display: flex; flex-direction: column; gap: 7px; min-width: 0; }
.catalog-field > span { font-size: 0.76rem; font-weight: 650; color: var(--muted); }
.catalog-field input, .catalog-field select { width: 100%; min-width: 0; min-height: 46px; padding: 10px 12px; border: 1px solid #d7d4df; background: #faf9fc; border-radius: 10px; color: var(--ink); font-size: 0.9rem; }
.catalog-field input::placeholder { color: #797582; }
.catalog-controls .button { min-height: 46px; padding-inline: 15px; font-size: 0.83rem; cursor: pointer; }
.catalog-controls:disabled { opacity: 0.55; }
.catalog-controls:disabled .button { cursor: default; }
.catalog-results-heading { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-block: 27px 18px; }
.catalog-results-heading h2 { font-size: 1.25rem; }
.catalog-results-heading p { color: var(--muted); font-size: 0.85rem; text-align: right; }
.catalog-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: start; gap: 22px; }
.catalog-song { overflow: hidden; border: 1px solid var(--border); border-radius: 22px; background: var(--surface); min-width: 0; }
.song-cover { position: relative; min-height: 140px; padding: 23px; display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; overflow: hidden; background: #e9e0fa; color: #573593; }
.song-cover::before { content: ""; position: absolute; width: 150px; height: 150px; border: 1px solid #ffffff70; border-radius: 50%; right: -12px; top: -57px; pointer-events: none; }
.song-cover-history { background: #e6ebd9; color: #475d37; }
.song-cover-label { max-width: 150px; position: relative; font-size: 0.69rem; text-transform: uppercase; letter-spacing: 0.1em; font-weight: 750; }
.song-cover-letter { position: relative; line-height: 0.9; font-size: 4.6rem; font-weight: 750; letter-spacing: -0.07em; }
.song-body { padding: 23px; }
.song-subject { color: var(--muted); font-size: 0.73rem; margin-bottom: 10px; }
.song-title { font-size: 1.45rem; line-height: 1.2; overflow-wrap: anywhere; }
.song-author { margin-top: 8px; font-size: 0.88rem; font-weight: 600; }
.song-description { color: var(--muted); margin-top: 15px; font-size: 0.88rem; }
.song-text { margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--border); }
.song-text summary { cursor: pointer; color: var(--accent); font-size: 0.85rem; font-weight: 650; padding-block: 6px; }
.song-lyrics { max-height: 260px; overflow-y: auto; overscroll-behavior: contain; padding-right: 8px; margin-top: 14px; font-size: 0.85rem; line-height: 1.7; }
.song-lyrics p + p { margin-top: 9px; }
.catalog-state { min-height: 260px; padding: 34px 24px; text-align: center; border: 1px dashed #cdc5db; border-radius: 22px; background: #ffffff80; }
.catalog-state h3 { font-size: 1.3rem; margin-bottom: 12px; }
.catalog-state p { max-width: 460px; margin-inline: auto; color: var(--muted); }
.catalog-state .button { margin-top: 23px; cursor: pointer; }
.catalog-error { border-color: #d9bcc6; background: #fff8fa; }
.catalog-screen-reader { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }

@media (max-width: 1000px) {
  .catalog-controls { grid-template-columns: 1fr 1fr; }
  .catalog-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 600px) {
  .catalog-toolbar { padding: 18px; }
  .catalog-controls, .catalog-grid { grid-template-columns: 1fr; }
  .catalog-results-heading { align-items: flex-start; flex-direction: column; gap: 6px; }
  .catalog-results-heading p { text-align: left; }
  .song-cover { min-height: 120px; }
}


/* player */
/* Trvalá spodní lišta. Její skutečnou výšku měří player.js. */
body { padding-bottom: var(--player-space, 0px); }
.player-bar[hidden], .player-message[hidden], .song-page [hidden] { display: none; }
.player-bar { position: fixed; bottom: 0; left: 0; right: 0; z-index: 20; border-top: 1px solid #d9d3e7; background: #fbfaff; box-shadow: 0 -8px 28px #2323320b; padding-bottom: env(safe-area-inset-bottom); }
.player-inner { display: grid; grid-template-columns: minmax(0, 1fr) minmax(280px, 1fr) auto; align-items: center; gap: 18px; padding-block: 16px; }
.player-info { display: flex; align-items: center; gap: 12px; min-width: 0; }
.player-info > div { min-width: 0; }
.player-info img { flex: 0 0 48px; }
.player-kicker { display: block; color: var(--accent); font-size: 0.61rem; font-weight: 750; letter-spacing: 0.12em; text-transform: uppercase; }
#player-title { display: block; font-size: 0.98rem; font-weight: 700; text-decoration: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#player-title:hover { text-decoration: underline; }
#player-subtitle { color: var(--muted); font-size: 0.75rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#app-audio { display: block; width: 100%; height: 44px; }
.player-close { background: transparent; border: 1px solid var(--border); border-radius: 10px; padding: 10px; color: var(--muted); cursor: pointer; font-size: 0.77rem; }
.player-close:hover { background: var(--accent-light); color: var(--ink); }
.player-message { grid-column: 1 / -1; display: flex; gap: 12px; align-items: center; color: #804157; font-size: 0.82rem; }
.player-message button { flex-shrink: 0; border: 0; background: none; text-decoration: underline; color: inherit; cursor: pointer; }

/* Ovládání v kartách katalogu. */
.song-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 12px; margin-top: 20px; }
.song-actions .button { min-height: 43px; padding: 9px 16px; font-size: 0.83rem; cursor: pointer; }
.song-detail-link { font-size: 0.81rem; font-weight: 650; color: var(--accent); text-underline-offset: 3px; }
.catalog-song.is-playing { border-color: #a18ad6; }

/* Detail skladby a text. */
.song-back { display: inline-block; margin-bottom: 24px; color: var(--muted); font-size: 0.85rem; text-underline-offset: 4px; }
.song-page-heading h1 { font-size: clamp(2.3rem, 5vw, 3.8rem); margin-top: 12px; }
.song-page-author { margin-top: 14px; color: var(--muted); font-size: 1.04rem; }
.song-detail-grid { display: grid; grid-template-columns: minmax(240px, 0.7fr) minmax(0, 1.3fr); align-items: start; gap: 28px; margin-top: 30px; }
.song-overview { padding: 28px; border-radius: 24px; border: 1px solid var(--border); background: white; }
.song-detail-art { display: flex; align-items: center; justify-content: center; min-height: 180px; margin: -8px -8px 22px; background: var(--accent-light); border-radius: 18px; }
.song-detail-art img { width: 150px; height: 150px; }
.song-overview h2 { font-size: 1.2rem; }
.song-overview > p { color: var(--muted); margin-top: 12px; font-size: 0.9rem; }
.song-detail-controls { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 22px; }
.song-detail-controls .button { min-height: 46px; padding: 10px 17px; font-size: 0.86rem; cursor: pointer; }
.song-play-state { min-height: 2.9em; font-size: 0.78rem !important; }
.song-lyrics-panel { padding: 25px; background: white; border: 1px solid var(--border); border-radius: 24px; min-width: 0; }
.song-lyrics-heading { display: flex; align-items: center; justify-content: space-between; gap: 15px; margin-bottom: 12px; }
.song-lyrics-heading h2 { font-size: 1.3rem; }
.follow-control { display: inline-flex; gap: 7px; align-items: center; font-size: 0.77rem; color: var(--muted); }
.follow-control input { accent-color: var(--accent); width: 16px; height: 16px; }
.lyrics-hint { color: var(--muted); font-size: 0.78rem; margin-bottom: 18px; }
.lyrics-window { position: relative; max-height: min(60vh, 540px); overflow-y: auto; overscroll-behavior: contain; scrollbar-gutter: stable; padding: 4px 10px 25px 0; }
.timed-line, .plain-line { display: flex; gap: 13px; width: 100%; text-align: left; padding: 13px 12px; margin-block: 5px; border: 0; border-radius: 12px; background: transparent; color: #666172; line-height: 1.6; font-size: 1rem; }
.timed-line { cursor: pointer; transition: background 120ms, color 120ms; }
.timed-line:hover { background: #f5f2fb; color: var(--ink); }
.timed-line.is-active { background: var(--accent-light); color: #4c2f99; font-weight: 700; }
.line-time { min-width: 35px; padding-top: 4px; color: #8a8199; font-size: 0.66rem; font-weight: 500; font-variant-numeric: tabular-nums; }
.line-copy { min-width: 0; overflow-wrap: anywhere; }
.timed-line:disabled { cursor: default; opacity: 0.5; }
.timing-note { margin-top: 18px; padding: 13px; border-radius: 12px; background: #faf1dc; color: #765a24; font-size: 0.77rem; }
.song-load-error { margin-top: 28px; }

@media (max-width: 800px) {
  .song-detail-grid { grid-template-columns: 1fr; }
  .song-detail-art { display: none; }
  .song-overview { padding: 22px; }
  .player-inner { grid-template-columns: minmax(0, 1fr) auto; gap: 12px; }
  #app-audio { grid-row: 2; grid-column: 1 / -1; }
  .player-close { grid-row: 1; grid-column: 2; }
  .player-message { flex-wrap: wrap; }
}
@media (max-width: 480px) {
  .song-lyrics-panel { padding: 19px 14px; }
  .song-lyrics-heading { flex-wrap: wrap; }
  .timed-line, .plain-line { padding: 12px 8px; gap: 9px; font-size: 0.95rem; }
  .lyrics-window { max-height: 48vh; }
  .player-info img { width: 36px; height: 36px; flex-basis: 36px; }
  .player-inner { padding-block: 12px; }
}


/* study */
[hidden] { display: none !important; }
.header-inner { flex-wrap: wrap; }
.main-nav { flex-wrap: wrap; }
.nav-link { padding-inline: 14px; }
.header-note { display: none; }
.study-mode { margin: 24px 0; color: var(--muted); font-size: .9rem; }
.study-stats { display: grid; grid-template-columns: repeat(3,1fr); gap: 16px; margin-block: 28px; }
.study-stats > div { padding: 24px; border-radius: 20px; background: white; border: 1px solid var(--border); }
.study-stats strong { display: block; font-size: 2.7rem; color: var(--accent); letter-spacing: -.05em; }
.study-stats span { color: var(--muted); font-size: .85rem; }
.study-filters { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 22px; }
.study-filters button, .learning-toggle { padding: 10px 14px; border: 1px solid var(--border); border-radius: 10px; background: white; color: var(--muted); cursor: pointer; }
.study-filters button[aria-pressed="true"], .learning-toggle[aria-pressed="true"] { background: var(--accent-light); border-color: #b7a5de; color: var(--accent-dark); }
.learning-controls { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.learning-toggle { font-size: .75rem; padding: 8px 10px; }
.song-progress { font-size: .78rem; margin-top: 12px; color: var(--muted); }
#study-status { margin-bottom: 20px; color: var(--muted); }
.study-panel { padding: 28px; border-radius: 24px; border: 1px solid var(--border); background: white; }
.study-panel h2 { font-size: 1.45rem; }
.study-panel p { margin-top: 14px; color: var(--muted); font-size: .9rem; }
.study-panel > .button { margin-top: 18px; }
.backup-panel { margin-top: 36px; }
.import-label { cursor: pointer; position: relative; overflow: hidden; }
.import-label input { position: absolute; inset: 0; opacity: 0; width: 100%; cursor: pointer; }
.import-label:focus-within { outline: 3px solid var(--accent); outline-offset: 3px; }
.account-grid { display: grid; grid-template-columns: 1.3fr 1fr; gap: 24px; align-items: start; }
.account-form { display: grid; gap: 16px; margin-top: 22px; }
.account-form label { display: grid; gap: 6px; font-size: .85rem; font-weight: 600; }
.account-form input { padding: 13px; border: 1px solid var(--border); border-radius: 10px; width: 100%; background: #faf9fc; }
.account-form .song-actions { margin: 0; }
#reset-form { padding-top: 24px; margin-top: 30px; border-top: 1px solid var(--border); }
.confirm-choice { display: flex; align-items: center; gap: 10px; margin-top: 20px; font-size: .85rem; }
.spaced { margin-top: 30px; }
button { cursor: pointer; }
button:disabled { opacity: .55; cursor: wait; }
@media(max-width:760px) { .header-inner { padding-block: 16px; gap: 15px; } .main-nav { width: 100%; } .nav-link { flex: 1; text-align: center; padding-inline: 7px; font-size: .82rem; } .account-grid { grid-template-columns: 1fr; } .study-stats { gap: 8px; } .study-stats > div { padding: 16px 12px; } .study-stats strong { font-size: 2rem; } .study-panel { padding: 22px; } }
@media(max-width:400px) { .study-stats { grid-template-columns: 1fr; } .study-stats > div { display: flex; align-items: center; gap: 16px; } .nav-link { flex-basis: 40%; } }


/* mobile */
/* Telefon: pohodlné dotykové ovládání a prostor pro výřez displeje. */
body {
  min-width: 0;
  padding-left: env(safe-area-inset-left, 0px);
  padding-right: env(safe-area-inset-right, 0px);
}
.player-bar {
  padding-left: env(safe-area-inset-left, 0px);
  padding-right: env(safe-area-inset-right, 0px);
}
.phone-help { margin-top: 38px; padding: 24px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); }
.phone-help > p { margin-top: 12px; color: var(--muted); }
.phone-help details { margin-top: 14px; }
.phone-help summary { padding-block: 12px; cursor: pointer; font-weight: 650; color: var(--accent); }
.phone-help ol { padding-left: 24px; }
.phone-help li + li { margin-top: 8px; }
.phone-help .phone-small { font-size: .85rem; }
@media (max-width: 760px) {
  .nav-link { min-height: 44px; display: flex; justify-content: center; align-items: center; }
  .learning-toggle, .player-close, .study-filters button, .song-actions .button { min-height: 44px; }
  .song-detail-link, .song-text summary { display: inline-flex; align-items: center; min-height: 44px; }
  .catalog-field input, .catalog-field select, .account-form input { font-size: 16px; }
  .song-back { min-height: 44px; display: inline-flex; align-items: center; }
  .phone-help { padding: 22px; }
}


/* refresh */
/* Čitelnější karty, účet a přehrávač. Sdílí původní barvy aplikace. */
button, select { color: var(--ink); }
.button-primary { color: white; }
.button-secondary { color: var(--accent-dark); }
.worm-watermark { position: fixed; z-index: -1; inset: 0; background: url('../assets/logo.webp') calc(100% + 90px) 26vh / 480px no-repeat; opacity: .075; pointer-events: none; }
body { isolation: isolate; }
.page-content { position: relative; }
.catalog-page .page-heading { padding-right: 130px; position: relative; }
.catalog-page .page-heading::after { content: ''; position: absolute; right: 0; top: -12px; width: 130px; height: 130px; background: url('../assets/logo.webp') center/contain no-repeat; transform: rotate(10deg); }
.catalog-grid { align-items: stretch; gap: 16px; }
.catalog-song { border-radius: 20px; box-shadow: 0 3px 0 #e4deee55; transition: border-color .2s, box-shadow .2s; }
.catalog-song:hover { border-color: #bda9e2; box-shadow: 0 8px 24px #60438b0d; }
.catalog-song.is-playing { border-color: var(--accent); box-shadow: 0 0 0 2px #6544c520; }
.song-body { padding: 22px; height: 100%; display: flex; flex-direction: column; }
.song-category-label { color: #705396; background: #f2edf9; border-radius: 6px; padding: 4px 9px; font-size: .7rem; font-weight: 700; align-self: flex-start; margin-bottom: 16px; }
.song-title { font-size: 1.45rem; }
.song-author { color: var(--muted); font-weight: 500; margin-top: 7px; margin-bottom: auto; }
.song-actions { gap: 16px; }
.song-actions .button { min-height: 46px; padding-inline: 22px; }
.song-detail-link { min-height: 44px; display: inline-flex; align-items: center; }
.learning-controls { gap: 12px; align-items: center; border-top: 1px solid #efedf2; padding-top: 12px; margin-top: 16px; }
.learning-toggle { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; color: var(--muted); font-size: .79rem; border: none; background: transparent; }
.learning-favorite { width: 44px; padding: 10px; border-radius: 50%; }
.learning-favorite svg { width: 23px; height: 23px; stroke: #82728e; stroke-width: 1.6; fill: transparent; transition: fill .2s, stroke .2s, transform .2s; }
.learning-favorite[aria-pressed="true"] { background: #fff0f5; }
.learning-favorite[aria-pressed="true"] svg { fill: #db4778; stroke: #db4778; animation: heart-pop .28s ease-out; }
@keyframes heart-pop { 50% { transform: scale(1.25); } }
.played-box { display: inline-grid; place-items: center; width: 20px; height: 20px; border: 1.5px solid #b6adbf; border-radius: 5px; color: transparent; }
.learning-learned[aria-pressed="true"] { color: #416338; background: #f1f6ec; }
.learning-learned[aria-pressed="true"] .played-box { background: #5e7b48; border-color: #5e7b48; color: white; }
.song-progress:empty { display: none; }
.account-avatar { display: inline-grid; place-items: center; background: var(--accent); color: white; width: 26px; height: 26px; border-radius: 50%; font-size: .75rem; margin-left: 6px; }
.cloud-panel { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 12px; margin-top: 18px; padding: 12px 16px; border: 1px solid #ddd5ec; background: #f1edf8; border-radius: 14px; }
.cloud-panel p { margin-right: auto; font-size: .82rem; color: #5e4e74; }
.cloud-panel .button { min-height: 44px; font-size: .82rem; padding: 9px 16px; }
.cloud-panel.has-error, .notice.is-error { background: #fff0ed; border-color: #e8b1a7; color: #9c3028; }
.auth-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.button-register { background: #dcd2f5; color: #40247f; border-color: #bba5e4; }
.button-register:hover { background: #cbb9ed; }
.account-form { min-width: 0; }
.account-form input { min-width: 0; }
.account-benefits { background: #f0ebf8; }
.account-benefits img { margin-bottom: 10px; }
#auth-email { overflow-wrap: anywhere; }
.player-inner { grid-template-columns: minmax(170px,.65fr) minmax(300px,1.35fr) auto; }
.player-controls { display: flex; gap: 12px; align-items: center; min-width: 0; }
.player-toggle { border: 0; background: var(--accent); color: white; border-radius: 50%; width: 44px; height: 44px; flex: 0 0 44px; }
.player-timeline { flex: 1; min-width: 0; }
#player-seek { width: 100%; height: 30px; display: block; margin: 0; cursor: pointer; accent-color: var(--accent); }
.player-time-row { display: flex; justify-content: space-between; gap: 6px; font-size: .65rem; font-variant-numeric: tabular-nums; color: var(--muted); }
.player-speed select { border: 1px solid var(--border); border-radius: 8px; padding: 8px 2px; min-height: 44px; background: white; font-size: .8rem; }
.player-volume { width: 55px; }
.player-volume input { width: 100%; accent-color: var(--accent); }
.player-message { color: var(--ink); padding: 12px; background: var(--accent-light); border-radius: 12px; }
.player-message .button { font-size: .8rem; min-height: 44px; padding: 9px 15px; white-space: nowrap; }
.site-footer { display: grid; grid-template-columns: 1.2fr .7fr 1.1fr; align-items: start; gap: 36px; padding-block: 44px; border-top: 1px solid #ded8e8; }
.site-footer h2 { font-size: 1rem; margin-bottom: 16px; }
.site-footer p { font-size: .85rem; margin-block: 12px; }
.site-footer a { color: var(--accent-dark); text-underline-offset: 4px; }
.footer-intro .brand { font-size: 1.15rem; }
.footer-links { display: grid; gap: 10px; font-size: .85rem; }
.footer-links h2 { margin-bottom: 5px; }
.footer-faq details { border-bottom: 1px solid #e4deed; padding-block: 10px; }
.footer-faq summary { cursor: pointer; font-size: .85rem; }
.worm-scroll { position: fixed; right: 3px; top: 12vh; bottom: max(100px, var(--player-space, 0px)); width: 38px; z-index: 18; border-radius: 20px; background: #e8e1f155; touch-action: none; }
.worm-thumb { position: absolute; width: 38px; height: 54px; cursor: grab; border-radius: 20px; background: #e2d5f7; box-shadow: inset 0 0 0 1px #c8b2e7; }
.worm-thumb:active { cursor: grabbing; }
.worm-thumb img { width: 38px; height: 54px; pointer-events: none; }
@media (hover:hover) and (min-width:1250px) { html.worm-scroll-ready { scrollbar-width: none; } html.worm-scroll-ready::-webkit-scrollbar { display:none; } }
@media (hover:none), (max-width:1249px) { .worm-scroll { display: none; } }
@media(max-width:800px) {
  .player-inner { grid-template-columns: minmax(0,1fr) auto; }
  .player-controls { grid-row: 2; grid-column: 1/-1; }
  .player-volume { display: none; }
  .site-footer { grid-template-columns: 1fr 1fr; gap: 28px; }
  .footer-faq { grid-column: 1/-1; }
}
@media(max-width:600px) {
  .catalog-page .page-heading { padding-right: 55px; }
  .catalog-page .page-heading::after { width: 72px; height: 72px; right: 0; top: -10px; }
  .catalog-page h1 { font-size: 2.35rem; }
  .catalog-toolbar { padding: 15px; margin-top: 22px; }
  .catalog-controls { grid-template-columns: 1fr 1fr; gap: 12px; }
  .catalog-field:first-of-type, #catalog-reset { grid-column: 1/-1; }
  .catalog-grid { gap: 12px; }
  .song-body { padding: 18px; }
  .song-category-label { margin-bottom: 10px; }
  .song-title { font-size: 1.3rem; }
  .song-actions { margin-top: 16px; }
  .learning-controls { padding-top: 8px; margin-top: 12px; }
  .auth-actions { grid-template-columns: 1fr; }
  .auth-actions .button { width: 100%; }
  .cloud-panel { gap: 8px; }
  .cloud-panel p { flex-basis: 100%; }
  .worm-watermark { background-size: 300px; background-position: calc(100% + 140px) 26vh; }
  .site-footer { grid-template-columns: 1fr; }
  .footer-faq { grid-column: auto; }
  .player-message { gap: 8px; }
}


/* design */
/* Nová vizuální identita. Obsah, kontrast a ovládání mají přednost před dekoracemi. */
:root { --accent:#7444c6; --accent-dark:#552a9a; --accent-light:#f0e9fb; --background:#f8f7fa; --border:#e7e3ed; --radius:20px; }
body { background:var(--background); }
.site-header { background:#fbfafddd; border-bottom-color:var(--border); }
.brand img { object-fit:contain; width:48px; height:48px; }
.header-inner { gap:18px; }
.main-nav { background:#eeebf3; }
.nav-link { padding-inline:13px; }
.hero-art { background:#eeebf5; border-color:#e4dced; box-shadow:none; }
.hero-mascot { width:290px; height:290px; object-fit:contain; }
.art-circle { background:#e7dbf8; }
.art-tag { box-shadow:0 8px 20px #4a2e7210; }
.catalog-page .page-heading::after { background-image:url('../assets/logo.webp'); width:110px; height:135px; }
.worm-watermark { background:url('../assets/long-worm.svg') calc(100% + 115px) 24vh / 380px auto no-repeat; opacity:.085; }
.worm-watermark::after { content:''; position:absolute; top:calc(24vh - 50px); right:-22px; width:180px; height:180px; background:url('../assets/worm-head.webp') center/contain no-repeat; transform:rotate(-12deg); }
.catalog-song { box-shadow:0 3px 12px #36204f05; }
.song-category-label { border-radius:20px; font-size:.68rem; font-weight:650; letter-spacing:.02em; }
.song-body { padding:22px; }
.catalog-display-options { display:flex; flex-wrap:wrap; gap:18px; align-items:end; margin-bottom:12px; }
.catalog-display-options label,.stats-options label { display:flex; align-items:center; gap:10px; color:var(--muted); font-size:.82rem; }
select { background:#fff; border:1px solid var(--border); border-radius:10px; min-height:44px; padding:8px 12px; max-width:100%; }
.pagination { display:flex; gap:7px; align-items:center; justify-content:flex-end; margin-block:18px; }
.page-button,.icon-button { min-width:44px; min-height:44px; border:1px solid var(--border); border-radius:10px; background:white; color:var(--accent-dark); font-size:.9rem; }
.page-button[aria-current=page] { background:var(--accent); color:#fff; border-color:var(--accent); }
.page-button:disabled { cursor:default; opacity:.35; }
.page-ellipsis { color:var(--muted); }
.playlist-add { margin-left:auto; width:44px; height:44px; border:1px solid var(--border); border-radius:12px; background:white; color:var(--accent); font-size:1.5rem; }
.playlist-add:hover { background:var(--accent-light); }
.song-back { display:inline-flex; align-items:center; padding:12px 20px; min-height:50px; border:1px solid #baa2da; border-radius:12px; color:var(--accent-dark); font-weight:700; font-size:.95rem; background:var(--accent-light); text-decoration:none; }
.back-to-top { position:fixed; right:18px; bottom:calc(var(--player-space,0px) + 20px); z-index:25; width:46px; height:46px; border:1px solid #cebae5; border-radius:50%; background:#fff; color:var(--accent-dark); box-shadow:0 6px 18px #44246618; font-size:1.6rem; }
.worm-scroll { width:54px; right:0; background:transparent; top:10vh; bottom:max(90px,var(--player-space,0px)); }
.worm-thumb { width:54px; height:54px; background:none; box-shadow:none; z-index:2; }
.worm-thumb img { width:54px; height:54px; object-fit:contain; filter:drop-shadow(0 2px 2px #49206620); }
.scroll-tail { position:absolute; inset:0; width:100%; height:100%; overflow:visible; pointer-events:none; }
#scroll-notes { position:absolute; inset:0; pointer-events:none; }
#scroll-notes span { position:absolute; left:16px; color:#9988b1; font-size:24px; line-height:1; transition:opacity .18s,transform .18s; }
#scroll-notes .is-eaten { opacity:0; transform:scale(.1); }
.worm-thumb.is-munching img { animation:munch .3s; }
@keyframes munch { 40% { transform:scale(1.1,.9) rotate(7deg); } 70% {transform:scale(.95,1.05);} }
.worm-reaction { position:fixed; z-index:60; width:118px; pointer-events:none; text-align:center; }
.reaction-sprite { display:block; height:105px; background:url('../assets/worm-reactions.webp') 0 center/200% 100% no-repeat; }
.reaction-favorite .reaction-sprite { background-position:100% center; filter:drop-shadow(0 0 12px #f1a6c966); }
.reaction-learned .reaction-sprite { animation:laugh .18s 5 alternate; }
@keyframes laugh { to {transform:translateY(-3px) rotate(4deg);} }
.reaction-caption { display:inline-block; padding:3px 8px; border-radius:9px; background:white; box-shadow:0 2px 10px #40206015; font-size:.67rem; color:var(--accent-dark); }
dialog { border:1px solid var(--border); border-radius:22px; padding:30px; width:min(480px,calc(100% - 32px)); max-height:85vh; overflow:auto; color:var(--ink); background:#fff; box-shadow:0 24px 100px #22133435; }
dialog::backdrop { background:#21152f66; backdrop-filter:blur(3px); }
.dialog-close { display:block; margin-left:auto; margin-bottom:12px; }
.dialog-content h2 { font-size:1.4rem; }
.dialog-content p { margin-block:16px; }
.link-button { display:block; border:none; background:none; color:var(--accent-dark); text-decoration:underline; font-size:.78rem; margin-top:16px; padding:8px 0; }
.study-analytics { border:1px solid var(--border); border-radius:22px; background:white; padding:26px; margin:28px 0; }
.study-analytics .section-heading { margin:0 0 20px; align-items:center; }
.stats-options { display:flex; flex-wrap:wrap; align-items:center; gap:12px; margin-block:20px; }
.stats-options .button { min-height:44px; padding:8px 16px; }
.stats-message { color:var(--muted); font-size:.82rem; margin-bottom:20px; }
.listening-totals,.admin-totals { display:grid; grid-template-columns:repeat(2,1fr); gap:16px; margin:20px 0; }
.listening-totals>div,.admin-totals>div { border-radius:14px; background:#f6f3fa; padding:16px; display:flex; flex-direction:column; }
.listening-totals strong,.admin-totals strong { color:var(--accent-dark); font-size:1.7rem; font-variant-numeric:tabular-nums; }
.listening-totals span,.admin-totals span { color:var(--muted); font-size:.8rem; }
.admin-totals { grid-template-columns:repeat(5,1fr); }
.charts-grid { display:grid; grid-template-columns:minmax(0,1.3fr) minmax(0,1fr); gap:28px; }
.listening-chart { min-width:0; margin:0; }
.listening-chart figcaption { font-size:.9rem; font-weight:650; margin-bottom:20px; }
.daily-bars { height:150px; display:flex; align-items:end; gap:4px; border-bottom:1px solid var(--border); background:repeating-linear-gradient(to top,transparent 0 49px,#e9e4ee 49px 50px); }
.daily-column { height:100%; flex:1; display:flex; align-items:end; }
.daily-bar { display:block; width:100%; background:linear-gradient(#ba91ed,#7644bd); border-radius:4px 4px 0 0; }
.chart-axis { display:flex; justify-content:space-between; font-size:.68rem; color:var(--muted); margin-top:7px; }
.chart-data { margin-top:14px; font-size:.78rem; }
.chart-data summary { cursor:pointer; color:var(--accent-dark); }
.chart-data table { margin-top:12px; width:100%; }
.chart-data td,.chart-data th { padding:5px; text-align:left; }
.top-track { margin-bottom:16px; }
.top-track-label { display:flex; justify-content:space-between; gap:8px; font-size:.78rem; margin-bottom:7px; }
.top-track-label strong { white-space:nowrap; font-weight:600; }
.top-track-meter { height:7px; border-radius:6px; background:#eee9f3; overflow:hidden; }
.top-track-meter span { display:block; height:100%; border-radius:6px; background:#9771ca; }
.chart-empty { grid-column:1/-1; padding:26px; text-align:center; color:var(--muted); background:#faf9fc; border:1px dashed var(--border); border-radius:14px; }
.table-scroll { overflow:auto; margin-top:28px; border:1px solid var(--border); border-radius:16px; }
.admin-table { border-collapse:collapse; width:100%; text-align:left; font-size:.86rem; background:white; }
.admin-table th,.admin-table td { padding:15px; border-bottom:1px solid var(--border); }
.admin-table th { background:#f0ebf7; white-space:nowrap; }
.playlist-create,.playlist-rename,.playlist-add-form { display:flex; gap:12px; align-items:end; flex-wrap:wrap; margin:22px 0; }
.playlist-create label { display:flex; flex-direction:column; gap:8px; font-size:.85rem; }
.playlist-create input,.playlist-rename input { min-height:46px; border:1px solid var(--border); border-radius:10px; padding:10px 12px; min-width:0; }
.playlist-layout { display:grid; grid-template-columns:240px minmax(0,1fr); gap:22px; margin-top:28px; }
.playlist-list-item { display:block; width:100%; text-align:left; padding:16px; min-height:48px; border:1px solid var(--border); border-radius:12px; background:#fff; margin-bottom:8px; overflow-wrap:anywhere; }
.playlist-list-item[aria-pressed=true] { background:var(--accent-light); border-color:#b498d9; color:var(--accent-dark); }
.playlist-settings { display:grid; gap:12px; margin-block:22px; }
.playlist-settings label { display:flex; align-items:center; gap:10px; font-size:.85rem; }
.playlist-settings input { width:19px; height:19px; accent-color:var(--accent); }
.playlist-tracks { list-style:none; padding:0; margin:24px 0; }
.playlist-tracks li { display:flex; align-items:center; gap:6px; padding-block:10px; border-bottom:1px solid var(--border); }
.playlist-tracks a { margin-right:auto; text-decoration:none; font-size:.9rem; }
.playlist-tracks .icon-button { flex:0 0 40px; min-width:40px; }
.delete-playlist { color:#934c61; background:transparent; border:0; padding:12px 0; text-decoration:underline; }
#playlist-editor h2 { overflow-wrap:anywhere; }
.player-queue { grid-column:1/-1; display:flex; align-items:center; gap:10px; padding-top:10px; border-top:1px solid var(--border); font-size:.78rem; }
#queue-caption { margin-right:auto; overflow-wrap:anywhere; }
.player-queue label { display:flex; align-items:center; gap:6px; }
.player-queue input { accent-color:var(--accent); }
.player-queue .icon-button { min-width:36px; min-height:36px; }
@media(max-width:900px){.admin-totals{grid-template-columns:repeat(3,1fr);} .playlist-layout{grid-template-columns:190px minmax(0,1fr);} .charts-grid{grid-template-columns:1fr;}}
@media(max-width:760px){.main-nav{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:3px;} .main-nav .nav-link{padding:9px 5px;font-size:.78rem;} .nav-link:last-child{grid-column:span 2;} .site-footer{gap:28px;}.hero-mascot{width:245px;height:245px;} .account-avatar{width:22px;height:22px;margin-left:4px;} .playlist-layout{grid-template-columns:1fr;} #playlist-list{display:flex;gap:8px;overflow:auto;} .playlist-list-item{min-width:160px;width:auto;flex-shrink:0;max-width:240px;} .study-analytics{padding:20px;} .study-analytics .section-heading{display:block;} .back-to-top{right:12px;bottom:calc(var(--player-space,0px) + 12px);}}
@media(max-width:600px){.catalog-display-options{display:grid;grid-template-columns:minmax(0,1fr) 125px;gap:10px;} .catalog-display-options label{display:flex;flex-direction:column;align-items:stretch;gap:5px;font-size:.72rem;} .catalog-display-options select{width:100%;min-width:0;font-size:.85rem;} .pagination{justify-content:center;gap:5px;} .page-button{min-width:40px;} .catalog-page .page-heading{padding-right:70px;} .catalog-page .page-heading::after{width:72px;height:95px;right:0;} .worm-watermark{background-size:300px;background-position:calc(100% + 170px) 26vh;opacity:.06;} .worm-watermark::after{right:-75px;width:150px;height:150px;} .playlist-create input,.playlist-rename input{width:100%;} .playlist-create label{width:100%;} .playlist-rename{display:grid;grid-template-columns:minmax(0,1fr) auto;} .playlist-rename .button{padding-inline:12px;font-size:.8rem;} .playlist-add-form{flex-direction:column;align-items:stretch;} .playlist-tracks{margin-inline:-8px;}.admin-totals{grid-template-columns:repeat(2,1fr);} .player-queue{flex-wrap:wrap;} .player-queue label{flex-basis:100%;}.player-queue .icon-button{min-width:44px;min-height:44px;} .study-stats{grid-template-columns:repeat(3,minmax(0,1fr));}.study-stats>div{display:block;padding:13px 9px;}.study-stats span{font-size:.7rem;}}
@media(prefers-reduced-motion:reduce){#scroll-notes span{transition:none;}.reaction-sprite,.worm-thumb img{animation:none!important;}}


/* experience */
:root{--glass:#ffffffc9;--surface-soft:#f1edf7;--shadow:0 8px 28px #35214d0a;color-scheme:light;}
[data-theme=dark]{--background:#17151e;--surface:#24212e;--surface-soft:#302a3c;--ink:#f0ecf6;--muted:#b9b1c6;--border:#443b52;--accent:#bea0f0;--accent-dark:#d7c1fa;--accent-light:#393047;--glass:#24212ed9;--shadow:0 8px 28px #0002;color-scheme:dark;}
body{color:var(--ink);background:var(--background);}
.site-header,.main-nav,.player-bar{background:var(--glass);backdrop-filter:blur(18px) saturate(120%);-webkit-backdrop-filter:blur(18px) saturate(120%);border-color:var(--border);}
.main-nav{border:1px solid var(--border);box-shadow:inset 0 1px #fff3;}
.nav-link{transition:background .2s,transform .2s,color .2s;}
.nav-link.is-active{background:var(--surface);color:var(--ink);box-shadow:0 2px 8px #21152f10;animation:tab-settle .24s ease-out;}
.nav-link:active,.button:active,.icon-button:active{transform:scale(.96);}
@keyframes tab-settle{from{transform:translateY(3px);opacity:.6}to{transform:translateY(0);opacity:1}}
.worm-scroll{filter:saturate(.5) contrast(.82);opacity:.65;transition:opacity .2s;}.worm-scroll:hover,.worm-scroll:focus-within{opacity:.9;}
.compact-account{position:fixed;top:12px;right:14px;z-index:65;width:44px;height:44px;display:grid;place-items:center;background:var(--glass);color:var(--accent-dark);border:1px solid var(--border);border-radius:50%;backdrop-filter:blur(16px);box-shadow:var(--shadow);font-weight:750;text-decoration:none;animation:account-arrive .25s ease-out;}
@keyframes account-arrive{from{opacity:0;transform:translateY(-12px) scale(.8)}to{opacity:1;transform:none}}
.catalog-song{border-color:var(--border);background:var(--surface);box-shadow:var(--shadow);border-radius:17px;}
.song-body{padding:17px;gap:5px;}.song-title{font-size:1.15rem;}.song-author{font-size:.82rem;}.song-category-label{font-size:.63rem;}.song-progress:empty{display:none;}.song-actions{margin-top:12px;gap:14px;}.learning-controls{margin-top:12px;padding-top:8px;}.song-detail-link{font-size:.78rem;}.playlist-add{width:40px;height:40px;}.learning-toggle{min-height:40px;}.song-detail-art{max-height:170px;}
.play-icon{gap:6px;min-width:46px;min-height:44px;padding:10px 12px;line-height:1;}.play-icon svg{width:22px;height:22px;fill:currentColor;flex:none;}.stop-square{display:inline-block;width:17px;height:17px;background:currentColor;border-radius:3px;flex:none;}.stop-word{font-size:.71rem;font-weight:750;}.play-feedback{animation:play-tap .25s ease-out;}
@keyframes play-tap{40%{transform:scale(.9)}75%{transform:scale(1.06)}to{transform:none}}
.player-toggle{width:auto;}.player-expand{display:block;width:100%;height:27px;border:0;background:transparent;color:var(--accent-dark);cursor:pointer;touch-action:none;}.player-expand span{display:block;width:72px;margin:auto;border-bottom:3px solid var(--border);font-size:1.4rem;line-height:13px;}.player-inner{padding-top:7px;}.player-kicker{display:none;}.player-controls{flex-wrap:wrap;}.player-timeline{flex:1;min-width:120px;}#player-repeat{display:inline-flex;align-items:center;justify-content:center;font-size:1.4rem;min-width:44px;min-height:44px;}#player-repeat small{font-size:.65rem;}#player-repeat[aria-pressed=true]{background:var(--accent-light);border-color:var(--accent);}.sleep-control select{font-size:.75rem;max-width:100px;}
.study-panel,.study-analytics,.song-lyrics-panel,.song-overview,.catalog-toolbar,.step-card,.phone-help,.chart-empty,dialog,.page-button,.icon-button,.playlist-add,.playlist-list-item,.button-secondary,.back-to-top,.auth-form,.study-stats>div{background:var(--surface);color:var(--ink);border-color:var(--border);}
input,select,textarea{background:var(--surface);color:var(--ink);border-color:var(--border);}input::placeholder{color:var(--muted);opacity:.75;}.catalog-controls input,.catalog-controls select{background:var(--background);color:var(--ink);}.main-nav,.hero-art,.listening-totals>div,.admin-totals>div,.admin-table th,.song-category-label{background:var(--surface-soft);}.hero-art{border-color:var(--border);}.art-circle{background:var(--accent-light);}.learning-toggle{color:var(--muted);}.learning-learned[aria-pressed=true]{background:var(--accent-light);color:var(--accent-dark);}.played-box{border-color:var(--muted);}.song-back,.notice,.cloud-panel{color:var(--ink);background:var(--accent-light);border-color:var(--border);}.admin-table{background:var(--surface);}.top-track-meter{background:var(--surface-soft);}.chart-data td,.chart-data th{color:var(--ink);}.daily-bars{background:repeating-linear-gradient(to top,transparent 0 49px,var(--border) 49px 50px);border-color:var(--border);}.chart-scale{font-size:.7rem;color:var(--muted);margin:-12px 0 12px;}.daily-column{min-width:0;}.daily-bar{min-width:2px;}.top-track-meter{height:10px;}.top-track-meter>span{display:block;height:10px;min-height:10px;}.chart-axis{gap:12px;}.admin-tools{padding:18px 0;border-bottom:1px solid var(--border);}.admin-tools p:empty{display:none;}.admin-totals{gap:10px;}.admin-totals strong{font-size:1.5rem;}
[data-theme=dark] .button-primary,[data-theme=dark] .button-register,[data-theme=dark] .page-button[aria-current=page]{background:#7953bd;color:white;}[data-theme=dark] .song-detail-link,[data-theme=dark] .brand strong{color:var(--accent);}[data-theme=dark] .timed-line,[data-theme=dark] .plain-line{color:var(--ink);}[data-theme=dark] .timed-line.is-active{background:var(--accent-light);color:var(--ink);}[data-theme=dark] .lyrics-window{background:var(--background);border-color:var(--border);}[data-theme=dark] .reaction-caption{background:var(--surface);color:var(--ink);}[data-theme=dark] .is-playing{border-color:var(--accent);}[data-theme=dark] .account-avatar{background:#7953bd;color:#fff;}[data-theme=dark] .study-filters button{background:var(--surface);color:var(--ink);border-color:var(--border);}[data-theme=dark] .study-filters button[aria-pressed=true]{background:var(--accent-light);}
.settings-form{display:grid;gap:20px;max-width:660px;}.settings-form label{display:grid;gap:8px;font-size:.9rem;}.settings-form .setting-switch{display:flex;align-items:center;gap:12px;min-height:44px;}.setting-switch input{width:21px;height:21px;accent-color:var(--accent);}.settings-form input[type=date]{min-height:44px;padding:10px;border:1px solid var(--border);border-radius:10px;}.settings-form select{width:100%;}.quick-links{display:flex;flex-direction:column;gap:14px;}.quick-links a{padding:8px 0;text-decoration:none;border-bottom:1px solid var(--border);}.password-change,.reset-statistics{margin-top:26px;border-top:1px solid var(--border);padding-top:18px;}.password-change summary,.reset-statistics summary{cursor:pointer;min-height:44px;font-weight:650;}.reset-statistics p{font-size:.82rem;color:var(--muted);margin-bottom:14px;}.danger-button{background:var(--surface);border:1px solid #b76474;color:#ae304d;}[data-theme=dark] .danger-button{color:#ff9db1;}.reset-statistics .settings-form{grid-template-columns:1fr 1fr;}.reset-statistics button{grid-column:1/-1;}.optional-hint{display:none;}[data-hints=on] .optional-hint{display:block;}p:empty{display:none;}
.mascot-button{border:0;background:transparent;position:relative;z-index:2;padding:0;cursor:pointer;}.hero-mascot{position:static;transform:none;}.hero-art{display:grid;place-items:center;min-height:340px;}.hero-description{max-width:470px;}.art-note{position:absolute;font-size:2.2rem;color:var(--accent);opacity:.55;}.note-one{left:14%;top:25%;transform:rotate(-15deg)}.note-two{right:14%;bottom:20%;transform:rotate(15deg)}.mini-illustration{width:62px;height:62px;color:var(--accent);margin-bottom:22px;}.step-card{padding:24px;}.step-card p{font-size:.9rem;}.phone-help{display:flex;align-items:center;justify-content:space-between;gap:25px;padding:30px;border:1px solid var(--border);border-radius:22px;}.phone-help .mini-illustration{width:42px;height:42px;margin-bottom:12px;}.phone-help p{color:var(--muted);margin-top:12px;}.about-more{margin:36px 0;max-width:850px;}.about-more summary{cursor:pointer;color:var(--accent-dark);padding:14px 0;}.about-more p{margin-top:18px;color:var(--muted);}.about-more h2{margin-top:14px;}.install-steps{list-style:none;display:grid;grid-template-columns:repeat(3,1fr);gap:20px;padding:0;margin:24px 0 50px;}.install-steps li{padding:24px;background:var(--surface);border:1px solid var(--border);border-radius:20px;}.install-steps p{margin-top:12px;color:var(--muted);}.lyrics-fullscreen{overflow:hidden;}.song-lyrics-panel.is-fullscreen{position:fixed;inset:0;z-index:100;display:flex;flex-direction:column;border-radius:0;padding:max(20px,env(safe-area-inset-top)) max(22px,env(safe-area-inset-right)) max(20px,env(safe-area-inset-bottom));}.song-lyrics-panel.is-fullscreen .lyrics-window{flex:1;max-height:none;height:auto;}.song-lyrics-panel.is-fullscreen .timed-line,.song-lyrics-panel.is-fullscreen .plain-line{font-size:clamp(1.2rem,3vw,2rem);}.song-lyrics-heading{flex-wrap:wrap;gap:12px;}[data-lyrics-size=large] .timed-line,[data-lyrics-size=large] .plain-line{font-size:1.4rem;}
[data-motion=off] *,[data-motion=off] *::before,[data-motion=off] *::after{animation:none!important;transition:none!important;scroll-behavior:auto!important;}
[hidden]{display:none!important;}
@media(max-width:760px){.hero-art{min-height:280px;}.hero-mascot{width:240px;height:240px;}.hero{gap:22px;}.hero-copy h1{font-size:2.45rem;}.hero-description{font-size:1rem;}.hero-art .art-caption,.hero-art .art-tag,.hero-art .art-bottom{display:none;}.phone-help{display:block;padding:24px;}.phone-help .button{margin-top:22px;}.install-steps{grid-template-columns:1fr;gap:12px;}.install-steps li{padding:20px;}.install-steps .mini-illustration{float:right;margin:0 0 10px 12px;}.page-heading{margin-bottom:24px;}.page-heading p:not(.eyebrow){font-size:.9rem;}.catalog-grid{gap:10px;}.song-body{display:grid;grid-template-columns:minmax(0,1fr) 84px;gap:4px 12px;padding:13px 15px;}.song-category-label,.song-title,.song-author{grid-column:1;}.song-category-label{justify-self:start;font-size:.6rem;padding:3px 7px;}.song-title{font-size:1.04rem;margin:0;line-height:1.15;}.song-author{font-size:.74rem;margin:0;}.song-actions{grid-column:2;grid-row:1/4;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;margin:0;}.song-detail-link{font-size:.65rem;padding:8px 0;white-space:nowrap;}.learning-controls{grid-column:1/-1;display:flex;margin-top:5px;padding-top:4px;gap:8px;}.song-progress{grid-column:1/-1;margin:0;font-size:.65rem;}.song-body>.song-progress:empty{display:none;}.learning-toggle{min-height:38px;}.learning-favorite{width:38px;}.learning-learned{font-size:.68rem;}.playlist-add{height:38px;width:38px;}.play-icon{min-height:42px;min-width:46px;border-radius:13px;}.player-bar .player-inner{gap:8px;}.player-info img{width:35px;height:35px;}.player-info{min-width:0;}.player-info #player-title{font-size:.9rem;}.player-subtitle{font-size:.7rem;}.player-close{padding:8px;}.player-controls{gap:7px;}.player-speed select{font-size:.7rem;min-width:53px;padding:6px;}.player-volume{display:none;}#player-repeat{min-width:36px;min-height:40px;padding:4px;}.sleep-control select{max-width:85px;min-height:40px;padding:5px;}.player-timeline{min-width:95px;}.player-controls .player-toggle{padding:8px;min-width:40px;}.player-toggle .stop-word{display:none;}.compact-account{top:10px;right:10px;width:42px;height:42px;}.study-analytics{padding:18px;}.charts-grid{gap:30px;}.admin-table td,.admin-table th{padding:10px;font-size:.75rem;}.account-grid{gap:16px;}.account-page .study-panel{padding:22px;}}
.player-speed select{background:var(--surface);color:var(--ink);border-color:var(--border);}.learning-controls,.footer-faq details{border-color:var(--border);}.song-actions .play-icon{padding:9px 12px;gap:5px;max-width:84px;}[data-theme=dark] .player-toggle{background:#7953bd;color:#fff;}[data-theme=dark] .song-category-label{color:#c8acef;}


/* refinements */
/* Jemnější ovládání a čitelný kontrast v obou motivech. */
:root{--glass:#ffffffa8}[data-theme=dark]{--glass:#24212eaa}
.site-header,.main-nav,.player-bar{background:var(--glass);backdrop-filter:blur(24px) saturate(145%);-webkit-backdrop-filter:blur(24px) saturate(145%);box-shadow:inset 0 1px #fff3,0 6px 24px #3021450a}
.ui-icon{width:22px;height:22px;flex:none;vertical-align:middle}.nav-link:has(.ui-icon){display:flex;align-items:center;justify-content:center}
.password-field{position:relative;display:block}.account-form .password-field input{width:100%;padding-right:50px}.password-eye{position:absolute;right:4px;top:50%;transform:translateY(-50%);display:grid;place-items:center;width:42px;height:42px;background:none;border:0;color:var(--muted);cursor:pointer}.password-eye[aria-pressed=true]{color:var(--accent-dark)}
.account-form input,.playlist-rename input,.playlist-create input,.catalog-state,.empty-state{background:var(--surface);color:var(--ink);border-color:var(--border)}
.account-form input:-webkit-autofill{-webkit-text-fill-color:var(--ink);box-shadow:0 0 0 1000px var(--surface) inset}
[data-theme=dark] .timed-line:hover,[data-theme=dark] .timed-line:focus-visible{background:var(--surface-soft);color:var(--ink)}
.song-title a{color:inherit;text-decoration:none}.song-title a:hover{text-decoration:underline;text-underline-offset:4px}.playlist-add{display:inline-grid;place-items:center;padding:0;line-height:1;flex:none;font-family:Arial,sans-serif;font-size:24px}
.learning-favorite{display:inline-grid;place-items:center;flex:0 0 40px;width:40px;height:40px;padding:0}.learning-favorite svg{width:24px;height:24px;aspect-ratio:1;flex:none}.learning-learned{overflow:hidden;gap:6px;min-width:40px;justify-content:center}.learned-label{display:inline-block;max-width:85px;opacity:1;transition:max-width .3s,opacity .2s,transform .3s;white-space:nowrap}.learning-learned[aria-pressed=true] .learned-label{max-width:0;opacity:0;transform:translateX(-16px)}.learning-learned[aria-pressed=true]{gap:0}
.hero-art{overflow:visible;isolation:isolate}.hero-art .art-circle{width:min(84%,340px);height:auto;aspect-ratio:1;top:50%;left:50%;transform:translate(-50%,-50%);border-radius:50%;z-index:0}.rhythm-worm{position:relative;width:76px;height:62px;margin-bottom:22px}.smiling-worm{display:block;background:url('../assets/worm-reactions.webp') no-repeat left center;background-size:200% 100%;width:62px;height:62px}.rhythm-worm>span:not(.smiling-worm){position:absolute;color:var(--accent);font-size:23px;right:-8px;top:-5px}.rhythm-worm>span:last-child{right:0;top:32px;font-size:18px}
.floating-menu{position:absolute;z-index:90;min-width:220px;border:1px solid var(--border);background:var(--glass);color:var(--ink);backdrop-filter:blur(28px);-webkit-backdrop-filter:blur(28px);border-radius:18px;box-shadow:0 12px 45px #21132e2a;padding:12px;display:grid;gap:10px}.floating-menu a,.floating-menu>button{padding:12px;color:var(--ink);text-decoration:none;text-align:left;border-radius:10px}.floating-menu a:hover{background:var(--surface-soft)}.account-menu{position:fixed;right:14px;top:64px}.player-options{position:relative}.player-options .floating-menu{bottom:calc(100% + 14px);right:0;min-width:250px;max-height:65dvh;overflow-y:auto}.player-options-toggle,#player-options-toggle{font-size:26px;width:44px;height:44px}.player-options label{display:flex;align-items:center;justify-content:space-between;gap:14px;font-size:.8rem;width:auto}.player-options .player-volume{display:flex}.player-options .player-volume input{width:130px}.player-options #player-repeat{font-size:.85rem;width:100%;border-radius:10px;justify-content:flex-start;padding:10px}.player-close{font-size:26px;line-height:1;min-width:40px;min-height:40px}.player-controls{flex-wrap:nowrap}.player-toggle{display:grid;place-items:center}.player-toggle svg{width:24px;height:24px}
.song-page-heading .play-icon{margin-top:14px}.lyrics-bottom-controls{display:none}.song-lyrics-panel.is-fullscreen .lyrics-bottom-controls{display:flex;justify-content:center;padding:14px 0 0}.song-lyrics-panel.is-fullscreen .lyrics-bottom-controls button{min-width:58px;min-height:52px}.song-lyrics-panel.is-fullscreen{z-index:140}
.study-sort{display:flex;align-items:center;gap:12px;margin:20px 0}.study-sort select{max-width:240px}.study-filters .filter-count{display:inline-block;margin-left:7px;font-variant-numeric:tabular-nums}.study-analytics{margin-top:38px;animation:study-arrive .5s ease both}@keyframes study-arrive{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:none}}
.study-analytics .chart-scale,.study-analytics .chart-data{display:none}.daily-column{position:relative;border:0;background:none;padding:0;cursor:pointer;color:var(--ink)}.chart-tooltip{position:absolute;bottom:calc(100% + 8px);left:50%;transform:translateX(-50%);background:var(--surface);color:var(--ink);padding:8px 10px;border-radius:9px;border:1px solid var(--border);font-size:12px;white-space:nowrap;z-index:4;pointer-events:none;box-shadow:var(--shadow)}.daily-column:first-child .chart-tooltip{left:0;transform:none}.daily-column:last-child .chart-tooltip{left:auto;right:0;transform:none}.daily-bar{animation:bar-rise .6s ease both;transform-origin:bottom}@keyframes bar-rise{from{transform:scaleY(0)}to{transform:scaleY(1)}}
@media(max-width:760px){.song-body{grid-template-columns:minmax(0,1fr) 54px}.learning-favorite{flex-basis:38px;width:38px;height:38px}.song-overview .song-detail-art{display:none}.song-overview{padding:16px}.song-page-heading{margin-bottom:18px}.song-detail-grid{gap:16px}.song-page-heading h1{font-size:2rem}.song-page-heading .play-icon{margin-top:12px}.player-controls{grid-column:1/-1}.player-options .floating-menu{right:0}.hero-art{overflow:visible}.hero-art .art-circle{width:82%;max-width:260px}.player-options .player-volume{display:flex}.study-sort{font-size:.85rem}}
@media(prefers-reduced-motion:reduce){.daily-bar,.study-analytics{animation:none}}

.player-bar{z-index:90}.player-sheet{position:fixed;left:0;right:0;top:0;z-index:80;overflow:auto;overscroll-behavior:contain;padding:48px max(20px,calc((100vw - 1100px)/2)) 20px;background:var(--background);border-radius:24px 24px 0 0;transition:transform .28s cubic-bezier(.2,.8,.2,1);box-shadow:0 -10px 45px #24153022;will-change:transform}.player-expand{position:relative;z-index:2;transition:transform .28s cubic-bezier(.2,.8,.2,1);background:var(--glass);border-radius:22px 22px 0 0;backdrop-filter:blur(24px)}.player-expand.is-expanded span{transform:rotate(180deg)}.player-expand.is-dragging,.player-sheet.is-dragging{transition:none}.sheet-open{overflow:hidden}.sheet-open .player-sheet .song-page{max-width:1100px;margin:auto}.sheet-open .player-sheet .song-page-heading{margin-top:0}.sheet-open.lyrics-fullscreen .player-sheet{transform:none!important;height:100dvh!important;z-index:130;padding:0}.sheet-open.lyrics-fullscreen .player-expand{visibility:hidden}
.playlist-create-panel{margin:0 0 22px;border:1px solid var(--border);border-radius:16px;background:var(--surface)}.playlist-create-panel>summary{padding:20px;cursor:pointer;font-weight:650;list-style:none}.playlist-create{display:grid;grid-template-columns:1fr;padding:0 20px 20px;gap:16px;margin:0}.playlist-create>label{display:grid;gap:8px}.playlist-create .setting-switch{display:flex;align-items:center}.playlist-create input[type=checkbox],.playlist-menu input[type=checkbox]{width:18px;height:18px;accent-color:var(--accent);flex:none}.playlist-item{border:1px solid var(--border);border-radius:16px;background:var(--surface);margin-bottom:12px}.playlist-row{display:flex;align-items:center;gap:12px;padding:15px 18px}.playlist-name{flex:1;min-width:0;overflow-wrap:anywhere;text-align:left;font-size:1rem;font-weight:650;border:0;background:none;color:var(--ink);padding:12px 0;cursor:pointer}.playlist-menu{position:relative}.playlist-menu>summary{list-style:none;display:grid;place-items:center;width:40px;height:44px;cursor:pointer;font-size:26px}.playlist-menu>summary::-webkit-details-marker{display:none}.playlist-menu-content{position:absolute;right:0;top:100%;z-index:15;background:var(--surface);color:var(--ink);border:1px solid var(--border);border-radius:16px;width:min(300px,calc(100vw - 60px));padding:18px;box-shadow:0 12px 40px #20132e22;display:grid;gap:18px}.playlist-menu .playlist-rename{display:grid;gap:8px;margin:0}.playlist-menu label{display:flex;align-items:center;gap:10px;font-size:.85rem}.playlist-editor{padding:0 18px 20px;animation:study-arrive .25s ease}.playlist-tracks{list-style:none;padding:0}.playlist-tracks li{display:flex;gap:7px;align-items:center;padding:12px 0;border-bottom:1px solid var(--border)}.playlist-tracks li>a{flex:1;min-width:0;font-size:.85rem;color:var(--ink)}.drag-handle{touch-action:none;cursor:grab;width:36px;min-height:44px;padding:0;border:0;background:none;color:var(--muted);font-size:24px;flex:none}.playlist-tracks .is-dragged{background:var(--accent-light);border-radius:10px;opacity:.8}.playlist-tracks .icon-button{width:32px;min-width:32px;height:38px;padding:0}.playlist-add-form{display:flex;gap:12px;margin-top:16px}.playlist-add-form select{min-width:0;flex:1}.top-track{position:relative}.top-track:focus-visible{outline:2px solid var(--accent)}.study-analytics .charts-grid{overflow:visible}
@media(max-width:480px){.playlist-row{padding:10px 12px;gap:8px}.playlist-editor{padding:0 12px 14px}.playlist-tracks li{gap:4px}.playlist-tracks .icon-button{min-width:28px;width:28px}.playlist-add-form{flex-direction:column}.playlist-name{font-size:.94rem}}
#playlist-list{display:block;overflow:visible}.playlist-item{width:100%}.playlist-menu{flex:none}.playlist-menu-content{max-height:65dvh;overflow:auto}.playlist-tracks .icon-button{flex:0 0 32px}.drag-handle svg{width:20px;height:26px;fill:currentColor}

[data-theme=dark] .learning-favorite[aria-pressed=true]{background:#412b3f;color:#f38bb4;border-color:#75455f}