/* ============================================================
   Japka - design systém
   Barvy vychází z loga Jazykovka Krumlov:
   petrolejová (text), tmavý tyrkys, limetková, oranžová
   ============================================================ */

:root {
    --c-primary: #2e7e9e;
    --c-primary-dark: #226582;
    --c-teal: #2a8fa3;
    --c-green: #7bbf3f;
    --c-lime: #a9d75b;
    --c-orange: #f5a94e;
    --c-red: #e05656;
    --c-text: #22343c;
    --c-text-soft: #5d7280;
    --c-border: #dde6ea;
    --c-bg-soft: #f2f7f9;
    --radius: 14px;
    --shadow: 0 2px 10px rgba(34, 52, 60, 0.08);
    --shadow-lift: 0 6px 22px rgba(34, 52, 60, 0.14);
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
    margin: 0;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    background: #fff;
    color: var(--c-text);
    font-size: 16px;
    line-height: 1.45;
    min-height: 100vh;
}

/* --------------- layout --------------- */

/* spodní odsazení = výška pevné spodní lišty VČETNĚ safe-area (iPhone
   s proužkem Domů ji má o ~34 px vyšší) - jinak poslední řádek stránky
   (např. verze aplikace v Profilu) zajede pod lištu */
#app { max-width: 720px; margin: 0 auto; padding: 0 16px calc(90px + env(safe-area-inset-bottom)); }

.page { padding-top: 12px; animation: fadein .18s ease-out; }
@keyframes fadein { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }

.topbar {
    display: flex; align-items: center; gap: 10px;
    padding: 12px 0 8px;
}
.topbar img.logo { height: 40px; }
.topbar h1 { font-size: 20px; margin: 0; color: var(--c-primary); flex: 1; }
.topbar .spacer { flex: 1; }
/* mobil: horní logo schovat (na dashboardu je velké logo nad novinkami);
   desktop: logo na čtvrtinu šířky stránky, vycentrované (spacer nesmí
   sežrat volné místo, jinak auto-marginy nemají co rozdělit) */
@media (max-width: 640px) {
    .topbar img.logo { display: none; }
}
@media (min-width: 641px) {
    .topbar .spacer { flex: 0; }
    .topbar img.logo { width: 25%; max-width: 200px; height: auto; margin: 0 auto; }
}

.page-title { display: flex; align-items: center; gap: 10px; margin: 8px 0 14px; }
.page-title h2 { margin: 0; font-size: 22px; color: var(--c-primary); }

.boot-spinner, .spinner {
    width: 38px; height: 38px; margin: 25vh auto;
    border: 4px solid var(--c-border); border-top-color: var(--c-primary);
    border-radius: 50%; animation: spin .8s linear infinite;
}
.spinner { margin: 40px auto; }
@keyframes spin { to { transform: rotate(360deg); } }

/* --------------- tlačítka --------------- */

button { font: inherit; }

.btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    background: var(--c-primary); color: #fff; border: 0;
    border-radius: var(--radius); padding: 13px 20px;
    font-size: 16px; font-weight: 600; cursor: pointer;
    transition: filter .15s, transform .05s;
    text-decoration: none;
    -webkit-tap-highlight-color: transparent;
}
.btn:active { transform: scale(.98); }
.btn:hover { filter: brightness(1.07); }
.btn:disabled { opacity: .55; cursor: default; }
.btn.secondary { background: var(--c-bg-soft); color: var(--c-primary); }
.btn.outline { background: #fff; color: var(--c-primary); border: 2px solid var(--c-primary); }
.btn.danger { background: var(--c-red); }
.btn.green { background: var(--c-green); }
.btn.orange { background: var(--c-orange); }
.btn.small { padding: 8px 14px; font-size: 14px; border-radius: 10px; }
.btn.block { display: flex; width: 100%; }
.btn.icon-only { padding: 10px 12px; }

.btn-back {
    background: none; border: 0; color: var(--c-primary);
    font-size: 16px; font-weight: 600; cursor: pointer; padding: 8px 8px 8px 0;
    display: inline-flex; align-items: center; gap: 4px;
}

/* --------------- formuláře --------------- */

.field { margin-bottom: 14px; }
.field label { display: block; font-size: 14px; font-weight: 600; color: var(--c-text-soft); margin-bottom: 5px; }

input[type="text"], input[type="email"], input[type="password"], input[type="date"],
input[type="search"], input[type="number"], textarea, select {
    width: 100%;
    font-size: 16px; /* >=16px: iOS pak nezoomuje */
    padding: 12px 14px;
    border: 1.5px solid var(--c-border);
    border-radius: 12px;
    background: #fff;
    color: var(--c-text);
    outline: none;
    -webkit-appearance: none;
    appearance: none;
}
input:focus, textarea:focus, select:focus { border-color: var(--c-primary); }
textarea { min-height: 100px; resize: vertical; }

/* heslo s přepínačem viditelnosti (ui.js#pwField) */
.pw-wrap { position: relative; }
.pw-wrap input { padding-right: 48px; }
.pw-toggle {
    position: absolute; top: 0; right: 0; bottom: 0; width: 46px;
    background: none; border: none; cursor: pointer; font-size: 18px;
    padding: 0; opacity: .65; -webkit-tap-highlight-color: transparent;
}

.form-error { color: var(--c-red); font-size: 14px; margin: 8px 0; min-height: 18px; }
/* záchranné odkazy v chybě (přeposlat potvrzení, obnovit heslo) musí být
   na první pohled klikatelné - jinak vypadají jako pokračování věty */
.form-error a { color: var(--c-primary); text-decoration: underline; cursor: pointer; font-weight: 600; }

/* --------------- karty a dlaždice --------------- */

.card {
    background: #fff; border: 1px solid var(--c-border);
    border-radius: var(--radius); box-shadow: var(--shadow);
    padding: 16px; margin-bottom: 12px;
}

.tile-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 14px 0; }

.tile {
    position: relative;
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px;
    background: var(--c-bg-soft); border: 1px solid var(--c-border);
    border-radius: var(--radius); padding: 22px 12px;
    font-weight: 700; font-size: 16px; color: var(--c-primary);
    cursor: pointer; text-align: center; box-shadow: var(--shadow);
    transition: transform .1s, box-shadow .15s;
    -webkit-tap-highlight-color: transparent;
}
.tile:active { transform: scale(.97); }
.tile .tile-icon { font-size: 30px; line-height: 1; }
.tile .tile-badge {
    position: absolute; top: 8px; right: 8px;
    background: var(--c-red); color: #fff; border-radius: 999px;
    min-width: 22px; height: 22px; padding: 0 6px;
    font-size: 13px; font-weight: 700; line-height: 22px; text-align: center;
}
/* stav dnešní dávky opáčka (dashboard.js, review.js#reviewDoseState):
   zelená = na dnešek hotovo / vše zopakováno, oranžová = dávka hotová,
   ale fronta je ještě dlouhá (tmavá fajfka kvůli kontrastu na oranžové) */
.tile .tile-badge.done { background: #2f8a3c; }
.tile .tile-badge.more { background: var(--c-orange); color: #4d340f; }
/* pozastavený jazyk v nabídce opáčka (review.js#renderLangPicker) */
.tile.dimmed { opacity: .6; }
.tile .tile-action {
    margin-top: 4px; padding: 4px 10px; border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, .7); background: transparent;
    color: inherit; font-size: 12.5px; font-weight: 600; cursor: pointer;
}
.tile.primary { background: var(--c-primary); color: #fff; border: 0; }
.tile.green { background: var(--c-lime); color: #2f4419; border: 0; }
.tile.orange { background: var(--c-orange); color: #4d340f; border: 0; }
.tile.teal { background: var(--c-teal); color: #fff; border: 0; }
/* popisek dlaždice - jen pro nováčka, který ještě nic neprocvičil
   (dashboard.js#fresh); plná sytost kvůli čitelnosti na barevném podkladu */
.tile .tile-desc { font-size: 12.5px; font-weight: 500; line-height: 1.25; }
/* bílý malý text na petrolejové/tyrkysové má kontrast jen ~3,8-4,6:1 -
   jemné ztmavení podkladu ho dostane bezpečně nad 4,5:1 (WCAG AA) */
.tile.primary .tile-desc, .tile.teal .tile-desc {
    background: rgba(0, 0, 0, .2); border-radius: 6px; padding: 2px 6px;
}

/* uvítací karta pro účet bez slovíček (dashboard.js#welcomeCard) a stejné
   akce v prázdných Mých slovíčkách */
.welcome-card { border-color: var(--c-primary); margin: 0 0 14px; }
.welcome-card h3 { color: var(--c-primary); font-size: 18px; }
.welcome-card p { margin: 0 0 12px; }
.welcome-actions { display: flex; flex-direction: column; gap: 8px; margin-top: 12px; }
.welcome-school { margin-top: 14px; border-top: 1px solid var(--c-border); padding-top: 12px; font-size: 14.5px; }
.welcome-school summary { cursor: pointer; font-weight: 600; color: var(--c-primary); }
.welcome-school p { margin: 10px 0 0; }
.welcome-school .welcome-account {
    background: var(--c-bg-soft); border-radius: 10px; padding: 8px 12px;
    font-weight: 600; word-break: break-word; user-select: all;
}

/* upozornění na dashboardu */
.alert-tile {
    background: linear-gradient(120deg, var(--c-orange), #f7c078);
    border: 0; border-radius: var(--radius);
    padding: 14px 16px; margin-bottom: 10px;
    color: #4d340f; box-shadow: var(--shadow-lift);
}
.alert-tile h3 { margin: 0 0 4px; font-size: 16px; }
.alert-tile p { margin: 0; font-size: 14px; white-space: pre-wrap; }

/* dlaždice lekcí - gradient podle stáří (novější tmavší) */
.lesson-tile {
    border: 0; border-radius: var(--radius);
    padding: 16px; margin-bottom: 10px; cursor: pointer;
    color: #fff; box-shadow: var(--shadow);
    display: flex; align-items: center; gap: 12px;
    transition: transform .1s;
    -webkit-tap-highlight-color: transparent;
}
.lesson-tile:active { transform: scale(.98); }
.lesson-tile .lesson-info { flex: 1; min-width: 0; }
.lesson-tile h3 { margin: 0 0 2px; font-size: 17px; }
.lesson-tile .lesson-date { font-size: 13px; opacity: .9; }
.lesson-tile .lesson-check { font-size: 22px; }
/* nová neotevřená lekce (lessons.js, server lesson_new_sql) - limetková
   z loga je čitelná na tmavých i vybledlých dlaždicích */
.lesson-tile .lesson-new {
    background: var(--c-lime); color: #2f4419; border-radius: 999px;
    padding: 3px 9px; font-size: 12px; font-weight: 700; white-space: nowrap;
}

/* novinky */
.news-item { border-left: 4px solid var(--c-lime); padding: 10px 14px; background: var(--c-bg-soft); border-radius: 8px; margin-bottom: 10px; }
.news-item h3 { margin: 0 0 4px; font-size: 15px; }
.news-item .news-date { font-size: 12px; color: var(--c-text-soft); }
.news-item p { margin: 6px 0 0; font-size: 14px; white-space: pre-wrap; }

/* --------------- cvičení - obecné --------------- */

.exercise-page { position: fixed; inset: 0; background: #fff; z-index: 50; overflow-y: auto; padding: 12px 16px calc(20px + env(safe-area-inset-bottom)); display: flex; flex-direction: column; }
/* na velkých displejích držet obsah cvičení v rozumné šířce (jako zbytek aplikace) */
.exercise-page > * { width: 100%; max-width: 720px; margin-left: auto; margin-right: auto; }
.exercise-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.exercise-head h2 { font-size: 17px; margin: 0; color: var(--c-primary); }
.exercise-close {
    background: var(--c-green); color: #fff; border: 0; border-radius: 10px;
    width: 42px; height: 42px; font-size: 20px; cursor: pointer; font-weight: 700;
}

.exercise-progress { display: flex; align-items: center; gap: 10px; color: var(--c-text-soft); font-size: 14px; margin-top: auto; padding-top: 14px; }
.progress-track { flex: 1; height: 8px; background: var(--c-border); border-radius: 4px; overflow: hidden; }
.progress-fill { height: 100%; background: var(--c-primary); border-radius: 4px; transition: width .25s; }

.main-card {
    background: #fff; border: 1px solid var(--c-border); border-radius: 18px;
    box-shadow: var(--shadow-lift);
    min-height: 180px; display: flex; align-items: center; justify-content: center;
    font-size: clamp(24px, 6vw, 40px); font-weight: 600; text-align: center;
    padding: 24px; margin: 8px 0 16px; cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    word-break: break-word;
}

.option-btn {
    display: block; width: 100%; text-align: left;
    background: #fff; border: 1.5px solid var(--c-border); border-radius: 12px;
    padding: 14px 16px; font-size: 17px; margin-bottom: 10px; cursor: pointer;
    transition: background .15s, border-color .15s;
    -webkit-tap-highlight-color: transparent;
}
.option-btn.correct { background: #e3f4d9; border-color: var(--c-green); }
.option-btn.wrong { background: #fbe3e3; border-color: var(--c-red); animation: shake .35s; }
@keyframes shake {
    0%, 100% { transform: translateX(0); }
    20% { transform: translateX(-7px); } 40% { transform: translateX(7px); }
    60% { transform: translateX(-5px); } 80% { transform: translateX(5px); }
}

.heart-btn {
    background: none; border: 0; font-size: 26px; cursor: pointer;
    color: #c6d2d9; transition: color .15s, transform .1s; padding: 6px 10px;
    -webkit-tap-highlight-color: transparent;
}
.heart-btn.active { color: var(--c-red); }
.heart-btn:active { transform: scale(1.2); }

.audio-btn { background: #fff; border: 1.5px solid var(--c-border); border-radius: 10px; padding: 8px 12px; font-size: 18px; cursor: pointer; }

/* Click & Match */
.cm-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.cm-tile {
    background: #fff; border: 1.5px solid var(--c-border); border-radius: 12px;
    min-height: 74px; display: flex; align-items: center; justify-content: center;
    text-align: center; padding: 10px; font-size: 15px; cursor: pointer;
    transition: background .15s, border-color .15s, opacity .3s, transform .1s;
    -webkit-tap-highlight-color: transparent;
    word-break: break-word;
}
.cm-tile.selected { border-color: var(--c-primary); background: #e7f2f7; }
.cm-tile.matched { background: #e3f4d9; border-color: var(--c-green); }
.cm-tile.mismatch { background: #fbe3e3; border-color: var(--c-red); animation: shake .35s; }
.cm-tile.gone { opacity: 0; pointer-events: none; transform: scale(.9); }
.cm-timer { font-size: 22px; font-weight: 700; text-align: center; margin: 6px 0 12px; color: var(--c-primary); font-variant-numeric: tabular-nums; }

/* Flip Cards */
.flip-scene { perspective: 1200px; margin: 8px 0 14px; }
.flip-card { position: relative; width: 100%; min-height: 240px; transform-style: preserve-3d; transition: transform .45s; cursor: pointer; }
.flip-card.flipped { transform: rotateY(180deg); }
.flip-face {
    position: absolute; inset: 0; backface-visibility: hidden; -webkit-backface-visibility: hidden;
    display: flex; align-items: center; justify-content: center; text-align: center;
    background: #fff; border: 1px solid var(--c-border); border-radius: 18px;
    box-shadow: var(--shadow-lift); padding: 24px;
    font-size: clamp(24px, 6vw, 38px); font-weight: 600; word-break: break-word;
}
.flip-face.back { transform: rotateY(180deg); }

/* Flash Review */
.fr-row {
    display: flex; gap: 12px; align-items: center;
    border: 1px solid var(--c-border); border-radius: 12px;
    padding: 12px 14px; margin-bottom: 8px; background: #fff;
}
.fr-row:nth-child(even) { background: var(--c-bg-soft); }
.fr-word { flex: 1; cursor: pointer; font-size: 16px; }
.fr-word.foreign { font-weight: 600; color: var(--c-primary); }
@media (max-width: 560px) {
    .fr-row { flex-direction: column; align-items: stretch; gap: 4px; }
}

/* Write it */
.write-answer-row { display: flex; gap: 8px; margin-bottom: 12px; }
input.input-wrong { background: #fbe3e3; border-color: var(--c-red); }
/* 100% správná odpověď: podbarvit rovnou studentův vstup (druhý box se
   správnou odpovědí se pak už neukazuje - byl by jen duplikát) */
input.input-correct { background: #e3f4d9; border-color: var(--c-green); }

/* Say it - overlay "Poslouchám..." přes celé cvičení */
.listen-overlay {
    position: fixed; inset: 0; z-index: 120;
    background: rgba(20, 35, 43, .55);
    display: flex; align-items: center; justify-content: center;
    padding: 20px; cursor: pointer;
}
.listen-panel {
    background: #fff; border-radius: 18px; box-shadow: var(--shadow-lift);
    padding: 28px 24px; text-align: center; max-width: 340px; width: 100%;
}
.listen-mic {
    width: 84px; height: 84px; margin: 0 auto 14px; border-radius: 50%;
    background: var(--c-primary); color: #fff; font-size: 40px;
    display: flex; align-items: center; justify-content: center;
    animation: listen-pulse 1.2s ease-out infinite;
}
.listen-title { font-size: 20px; font-weight: 700; color: var(--c-primary); margin-bottom: 6px; }
@keyframes listen-pulse {
    0% { box-shadow: 0 0 0 0 rgba(46, 126, 158, .45); }
    70% { box-shadow: 0 0 0 22px rgba(46, 126, 158, 0); }
    100% { box-shadow: 0 0 0 0 rgba(46, 126, 158, 0); }
}
.listen-mic.processing { background: var(--c-orange); animation: none; }

/* Say it - upozornění na nepodporovaný prohlížeč
   (auto marginy nesmí přebít centrování z `.exercise-page > *`) */
.speech-warn {
    text-align: center;
    font-size: 17px;
    color: var(--c-text-soft);
    background: var(--c-bg-soft);
    border-radius: 12px;
    padding: 12px 16px;
    margin: 10px auto 14px;
}
/* Say it - rada, když se opakovaně nedaří zachytit zvuk */
.speech-trouble { color: var(--c-orange); font-weight: 600; }
.write-buttons { display: flex; gap: 8px; justify-content: flex-end; flex-wrap: wrap; margin-bottom: 10px; }
.correct-answer-box {
    background: #e3f4d9; border: 1.5px solid var(--c-green); border-radius: 12px;
    padding: 12px 16px; font-size: 18px; font-weight: 600; margin-bottom: 12px;
}
/* Say it: box se slyšenou odpovědí, která neodpovídá (červeně jako input-wrong) */
.correct-answer-box.wrong { background: #fbe3e3; border-color: var(--c-red); }
/* box se správnou odpovědí jde klepnutím přehrát (Write it / Say it) */
.correct-answer-box.playable {
    cursor: pointer;
    display: flex; justify-content: space-between; align-items: center; gap: 10px;
}
.correct-answer-box .play-ico { flex: none; opacity: .5; font-size: 15px; }

/* proužek „Stáhněte si aplikaci" (web na telefonu, viz js/appbanner.js) */
.app-banner {
    display: flex; align-items: center; gap: 10px;
    background: var(--c-primary); color: #fff; padding: 8px 10px;
}
.app-banner img { width: 40px; height: 40px; border-radius: 9px; background: #fff; flex: none; }
.app-banner-text { flex: 1; display: flex; flex-direction: column; line-height: 1.25; min-width: 0; }
.app-banner-text strong { font-size: 14px; }
.app-banner-text span { font-size: 12px; opacity: .85; }
.app-banner-get {
    flex: none; background: #fff; color: var(--c-primary); font-weight: 700;
    text-decoration: none; border-radius: 999px; padding: 7px 16px; font-size: 14px;
}
.app-banner-close {
    flex: none; background: none; border: none; color: #fff; opacity: .7;
    font-size: 16px; padding: 6px; cursor: pointer;
}

/* seznam lekcí - vyhledávání a řazení */
.list-controls { display: flex; gap: 8px; margin-bottom: 12px; }
.list-controls input { flex: 1; min-width: 0; }
.list-controls select { width: auto; }

/* Zlobivá slovíčka - štítek automatického leeche (P7) */
.fr-auto {
    font-size: 11px; color: var(--c-text-soft);
    border: 1px solid var(--c-border); border-radius: 6px;
    padding: 1px 6px; white-space: nowrap; flex-shrink: 0;
}

/* Dashboard - šňůra učení */
.streak-banner {
    display: flex; align-items: center; gap: 10px;
    background: #fdf3e4; border: 1.5px solid var(--c-orange); border-radius: 12px;
    padding: 10px 14px; margin-bottom: 14px; font-weight: 600;
}

/* „dnes procvičeno" pod šňůrou - roste během dne (viz dashboard.js) */
.today-line {
    text-align: center; color: var(--c-text-soft); font-size: 14px;
    font-weight: 600; margin: -4px 0 10px;
}
.streak-banner .streak-flame { font-size: 26px; }
.streak-banner .streak-medal { font-size: 26px; }

/* Statistika „Co už umím" - karta na dashboardu + detail #/knowledge
 * (barvy kategorií: umím zelená, asi umím limetková, povědomé oranžová,
 * nová šedá; viz views/knowledge.js) */
.know-card {
    background: #fff; border: 1px solid var(--c-border); border-radius: var(--radius);
    box-shadow: var(--shadow); padding: 14px 16px; margin: 0 0 14px;
    cursor: pointer; transition: transform .1s;
    -webkit-tap-highlight-color: transparent;
}
.know-card:active { transform: scale(.98); }
.know-head {
    display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 4px 10px;
    font-weight: 700; color: var(--c-primary); margin-bottom: 8px;
}
.know-pct { font-size: 15px; color: var(--c-text); white-space: nowrap; }
.know-more { color: var(--c-primary); font-size: 18px; line-height: 1; }
.know-bar {
    display: flex; height: 14px; border-radius: 7px; overflow: hidden;
    background: var(--c-bg-soft); border: 1px solid var(--c-border);
}
.know-bar span { display: block; height: 100%; min-width: 2px; }
.k-known { background: var(--c-green); }
.k-likely { background: var(--c-lime); }
.k-familiar { background: var(--c-orange); }
.k-new { background: #d5dfe4; }
.know-legend {
    display: flex; flex-wrap: wrap; gap: 4px 12px; margin-top: 8px;
    font-size: 13px; color: var(--c-text-soft);
}
.know-legend .dot {
    display: inline-block; width: 10px; height: 10px; border-radius: 50%;
    margin-right: 5px; vertical-align: -1px;
}
.know-big { font-size: 18px; font-weight: 700; color: var(--c-primary); margin-bottom: 10px; }
.know-h { color: var(--c-primary); font-size: 16px; margin: 18px 0 8px; }
.know-row {
    background: #fff; border: 1px solid var(--c-border); border-radius: 12px;
    padding: 10px 14px; margin-bottom: 8px;
}
.know-row.link { cursor: pointer; transition: transform .1s; -webkit-tap-highlight-color: transparent; }
.know-row.link:active { transform: scale(.98); }
.know-row-head { display: flex; align-items: center; gap: 10px; margin-bottom: 6px; }
.know-row-info { flex: 1; min-width: 0; }
.know-row-title { font-weight: 600; font-size: 15px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.know-row-sub { font-size: 12.5px; color: var(--c-text-soft); }
.know-row-num { font-size: 14px; font-weight: 700; color: #2f6a1d; white-space: nowrap; }
.answer-note { font-size: 14px; color: var(--c-text-soft); margin: 0 0 10px; }

/* výsledková tabulka */
.result-table { width: 100%; border-collapse: collapse; margin: 10px 0; }
.result-table th, .result-table td { text-align: left; padding: 8px 10px; border-bottom: 1px solid var(--c-border); font-size: 15px; }
.result-table tr.me { background: #e7f2f7; font-weight: 700; }

.exercise-summary { text-align: center; padding: 30px 10px; }
.exercise-summary .big { font-size: 46px; }
.exercise-summary h2 { color: var(--c-primary); }
.summary-buttons { display: flex; flex-direction: column; gap: 10px; margin-top: 22px; }

/* tlačítka cvičení podle účinnosti */
.exercise-list { display: flex; flex-direction: column; gap: 10px; margin: 12px 0; }
.exercise-btn {
    display: flex; align-items: center; gap: 12px;
    border: 0; border-radius: var(--radius); padding: 15px 16px;
    font-size: 16px; font-weight: 700; color: #fff; cursor: pointer;
    box-shadow: var(--shadow); text-align: left;
    -webkit-tap-highlight-color: transparent;
}
.exercise-btn:active { transform: scale(.98); }
.exercise-btn .ex-desc { font-size: 12.5px; font-weight: 400; opacity: .92; display: block; }
/* odstíny petrolejové podle účinnosti - čím účinnější cvičení, tím tmavší/výraznější */
.exercise-btn.eff-low { background: hsl(197, 48%, 86%); color: #14424f; }
.exercise-btn.eff-medium { background: hsl(197, 48%, 70%); color: #0e3642; }
.exercise-btn.eff-high { background: hsl(197, 50%, 51%); }
.exercise-btn.eff-veryhigh { background: hsl(197, 58%, 34%); }
/* Poslech v opáčku (11/2026) - pasivní, nejméně přínosný -> nejsvětlejší */
.exercise-btn.eff-lowest { background: hsl(197, 45%, 93%); color: #1b4855; }
.exercise-btn.eff-lowest .mode-last { background: rgba(46, 126, 158, .14); }
/* štítek Beta u nového režimu (Poslech, 11/2026) */
.exercise-btn .mode-beta {
    display: inline-block; vertical-align: 2px; margin-left: 8px;
    background: var(--c-orange); color: #4d340f; border-radius: 999px;
    padding: 1px 8px; font-size: 11px; font-weight: 700; letter-spacing: .02em;
}

/* nabídka režimů Celkového opáčka (review.js#reviewModePicker) - ikona
   vlevo, štítek „naposledy" u minule zvoleného režimu */
.exercise-btn .mode-ico { font-size: 26px; line-height: 1; flex-shrink: 0; }
.exercise-btn .mode-last {
    flex-shrink: 0; font-size: 11px; font-weight: 600; white-space: nowrap;
    background: rgba(255, 255, 255, .25); border-radius: 999px; padding: 2px 8px;
}
/* nabídka se načítá (várka z API) - druhé klepnutí nesmí spustit druhý průběh */
.exercise-list.is-loading { opacity: .6; pointer-events: none; }
/* představení nového slovíčka v přímých režimech opáčka (writeit.js#renderIntro):
   štítek, zadání i cizí tvar jsou uvnitř hlavní karty - rozložení pod ní
   (srdíčko, Pokračovat) tak sedí s běžnou kartou otázky */
.main-card.intro-card { flex-direction: column; gap: 8px; }
.intro-tag {
    font-size: 13px; font-weight: 700; color: #7a4a0c; white-space: nowrap;
    background: #fdf3e4; border: 1.5px solid var(--c-orange); border-radius: 999px;
    padding: 3px 12px;
}
.intro-foreign { font-size: .72em; font-weight: 700; color: #2f6a1d; }
.intro-foreign .play-ico { opacity: .5; font-size: .7em; }

/* --------------- modal + toast --------------- */

.modal-backdrop {
    position: fixed; inset: 0; background: rgba(20, 35, 43, .45);
    display: flex; align-items: center; justify-content: center; z-index: 100; padding: 18px;
}
.modal {
    background: #fff; border-radius: var(--radius); box-shadow: var(--shadow-lift);
    max-width: 520px; width: 100%; max-height: 86vh; overflow-y: auto; padding: 20px;
}
.modal h3 { margin-top: 0; color: var(--c-primary); }
.modal-actions { display: flex; gap: 10px; justify-content: flex-end; margin-top: 16px; flex-wrap: wrap; }

#toast-root { position: fixed; bottom: 18px; left: 0; right: 0; display: flex; flex-direction: column; align-items: center; gap: 8px; z-index: 200; pointer-events: none; }
.toast {
    background: var(--c-text); color: #fff; border-radius: 12px; padding: 12px 20px;
    font-size: 15px; box-shadow: var(--shadow-lift); animation: fadein .2s;
    max-width: 90vw;
}
.toast.error { background: var(--c-red); }
.toast.success { background: var(--c-green); }

/* --------------- login --------------- */

.auth-page { max-width: 400px; margin: 0 auto; padding-top: 6vh; }
.auth-logo { display: block; margin: 0 auto 18px; max-width: 260px; width: 80%; }
.auth-switch { text-align: center; margin-top: 16px; font-size: 15px; }
.auth-switch a { color: var(--c-primary); font-weight: 600; cursor: pointer; text-decoration: none; }
.google-btn-wrap { display: flex; justify-content: center; margin: 14px 0; min-height: 44px; }
.divider { display: flex; align-items: center; gap: 12px; color: var(--c-text-soft); font-size: 13px; margin: 14px 0; }
.divider::before, .divider::after { content: ''; flex: 1; height: 1px; background: var(--c-border); }

/* --------------- různé --------------- */

.list-empty { text-align: center; color: var(--c-text-soft); padding: 30px 10px; }
.list-empty .btn { margin-top: 6px; }
.badge { display: inline-block; background: var(--c-bg-soft); color: var(--c-primary); border-radius: 20px; padding: 3px 10px; font-size: 12.5px; font-weight: 700; }
.badge.green { background: #e3f4d9; color: #2f6a1d; }
.muted { color: var(--c-text-soft); font-size: 14px; }
.mt0 { margin-top: 0; }

.bottom-nav {
    position: fixed; bottom: 0; left: 0; right: 0; z-index: 40;
    background: #fff; border-top: 1px solid var(--c-border);
    display: flex; justify-content: space-around;
    padding: 6px 4px calc(6px + env(safe-area-inset-bottom));
}
.bottom-nav button {
    background: none; border: 0; display: flex; flex-direction: column; align-items: center; gap: 2px;
    font-size: 11.5px; color: var(--c-text-soft); cursor: pointer; padding: 4px 10px;
    -webkit-tap-highlight-color: transparent;
}
.bottom-nav button.active { color: var(--c-primary); font-weight: 700; }
.bottom-nav .nav-icon { font-size: 21px; }

@media (min-width: 720px) {
    .tile-grid { grid-template-columns: repeat(4, 1fr); }
    .cm-grid { grid-template-columns: repeat(4, 1fr); }
}

@media print {
    .bottom-nav, .topbar, .btn, button { display: none !important; }
}

/* klikatelné odkazy v textech (linkify) */
.text-link { color: var(--c-primary); font-weight: 600; text-decoration: underline; word-break: break-all; }
.alert-tile .text-link { color: inherit; } /* na oranžové dlaždici dědit tmavou barvu textu */

/* výběr položek (třídy, sety) */
.pick-item {
    display: flex; align-items: center; gap: 10px;
    border: 1.5px solid var(--c-border); border-radius: 12px;
    padding: 12px 14px; margin-bottom: 8px; cursor: pointer; background: #fff;
}
.pick-item:hover { border-color: var(--c-primary); }
.pick-item.selected { border-color: var(--c-primary); background: #e7f2f7; }
.pick-item .pick-main { flex: 1; min-width: 0; }
.pick-item .pick-title { font-weight: 600; }
.pick-item .pick-sub { font-size: 13px; color: var(--c-text-soft); }

/* editor termínů */
.term-row {
    display: flex; gap: 8px; align-items: flex-start;
    border-bottom: 1px solid var(--c-border); padding: 10px 0;
}
.term-side { flex: 1; display: flex; flex-direction: column; gap: 6px; }
.term-main-row { display: flex; gap: 6px; align-items: center; }
.term-main-row input { flex: 1; }
.term-variant-row { display: flex; gap: 6px; align-items: center; }
.term-variant-row input { flex: 1; font-size: 14px; padding: 8px 10px; }
.term-add-variant, .term-del-btn, .term-del-variant {
    background: var(--c-bg-soft); border: 1px solid var(--c-border); border-radius: 8px;
    width: 34px; height: 34px; font-size: 16px; cursor: pointer; color: var(--c-primary);
    flex-shrink: 0;
}
.term-del-btn { color: var(--c-red); }
.term-del-variant { width: 28px; height: 28px; font-size: 13px; }
@media (max-width: 640px) {
    .term-row { flex-direction: column; }
    .term-row .term-del-btn { align-self: flex-end; }
}

/* Limit vlastních slovíček - počítadlo / badge „∞ bonus" (mywords.js) */
.limit-badge { font-size: 14px; color: var(--c-text-soft); margin: 8px 0 0; }
.limit-badge.warn { color: var(--c-orange); font-weight: 600; }
.limit-badge.unlimited { color: var(--c-green); font-weight: 600; }

/* Logo s proklikem na web školy na dashboardu - jen mobily (dashboard.js) */
.dash-logo { display: none; }
@media (max-width: 640px) {
    .dash-logo { display: flex; justify-content: center; margin: 18px 0 6px; }
    .dash-logo img { width: 220px; max-width: 70%; height: auto; }
}

/* Nativní aplikace (Capacitor, html.cap-native) - odsazení pod systémové
   lišty; spodní navigace už env(safe-area-inset-bottom) má */
html.cap-native .topbar { padding-top: calc(12px + env(safe-area-inset-top)); }
html.cap-native .exercise-page { padding-top: calc(12px + env(safe-area-inset-top)); }

/* Study: výzva „Zkus si vzpomenout" před zobrazením možností */
.recall-hint {
    text-align: center; color: var(--c-text-soft); font-style: italic;
    margin: 22px 0; animation: fadein .3s ease-out;
}

/* řádek se srdíčkem pod kartou (Write it / Say it) */
.heart-row { display: flex; justify-content: center; margin: -6px 0 8px; }

/* Write it na telefonu: s otevřenou klávesnicí zbývá ~400 bodů výšky.
   Kompaktní karta a rozestupy, ať je najednou vidět zadání, vstup
   i výsledek s tlačítkem Pokračovat - jinak správná odpověď končí pod
   klávesnicí (report z iPhone 13 Pro, 8/2026). Say it kompaktní není
   (mikrofon, klávesnice se neotvírá). */
@media (max-width: 600px) {
    .exercise-page.write-mode .main-card {
        min-height: 76px;
        font-size: clamp(20px, 5.5vw, 28px);
        padding: 10px 14px;
        margin: 2px 0 8px;
    }
    .exercise-page.write-mode .heart-row { margin: 0 0 6px; }
    .exercise-page.write-mode .correct-answer-box { padding: 9px 14px; font-size: 17px; margin-bottom: 8px; }
    .exercise-page.write-mode .answer-note { margin-bottom: 5px; }
    .exercise-page.write-mode .write-buttons { margin-bottom: 6px; }
}

/* cíl pojistkového doscrollování ve Write it / Say it - kousek vzduchu pod
   cílem (v Say it bez spodního Pokračovat je cílem poslední box/řádek) */
.write-buttons button,
.write-buttons,
.correct-answer-box { scroll-margin-bottom: 14px; }

/* informační rámeček nad přihlašovacím formulářem (potvrzený e-mail) */
.auth-note {
    background: #e3f4d9; border: 1px solid var(--c-green); border-radius: 12px;
    padding: 10px 14px; margin: 0 0 14px; font-size: 14px; text-align: center;
}

/* AI překlad v editoru slovíček: čekání (třpyt) a doplnění (probliknutí) */
input.ai-loading {
    background-image: linear-gradient(100deg, transparent 30%, rgba(46, 126, 158, 0.14) 50%, transparent 70%);
    background-size: 200% 100%;
    animation: ai-shimmer 1.1s linear infinite;
}
@keyframes ai-shimmer { from { background-position: 180% 0; } to { background-position: -20% 0; } }
input.ai-filled { animation: ai-flash 0.9s ease-out; }
@keyframes ai-flash { from { background-color: #e3f4d9; } to { background-color: #fff; } }

/* Poslech (js/exercises/listen.js, 11/2026) */
.hear-intro p { margin: 0 0 10px; }
.hear-intro p:last-child { margin-bottom: 0; }
.hear-pass {
    text-align: center; font-size: 14px; font-weight: 600; color: var(--c-text-soft);
    margin: 6px 0 0;
}
.hear-pass.recall { color: var(--c-primary); }
.main-card.hear-card { flex-direction: column; gap: 12px; cursor: default; min-height: 200px; }
.hear-foreign { font-size: clamp(26px, 7vw, 42px); transition: color .15s; }
.hear-native { font-size: clamp(18px, 4.8vw, 26px); font-weight: 500; color: var(--c-text-soft); transition: color .15s; }
.hear-card .hidden-word { opacity: .35; }
.hear-card .speaking { color: var(--c-primary); }
.hear-controls { display: flex; gap: 10px; }
.hear-controls .btn { flex: 1; padding-left: 8px; padding-right: 8px; white-space: nowrap; }
.hear-status { text-align: center; font-size: 14px; margin: 14px 0 0; }