/* =====================================================
   Vzdělávací portál AED (ZZS JmK)
   Design podle Claude Design „Portál AED"
   ===================================================== */

@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&display=swap');

:root {
    --blue:       #0093D5;
    --blue-dark:  #0079B4;
    --navy:       #00507E;
    --navy-soft:  #0A6699;
    --red:        #E2001A;
    --red-dark:   #C4001A;

    --bg:         #F2F6FA;
    --panel:      #F4F8FB;
    --card:       #FFFFFF;

    --ink:        #17232E;
    --ink-2:      #3C4C5B;
    --ink-3:      #4B5B6A;
    --muted:      #68798A;
    --muted-2:    #7C8B99;
    --muted-3:    #9BAAB8;

    --border:     #E4EBF2;
    --border-2:   #DCE5EE;
    --border-3:   #EDF1F5;
    --line:       #F4F7FA;
    --input-bg:   #F8FAFC;

    --sky:        #DCEEF8;
    --sky-soft:   #EBF7FD;
    --sky-light:  #9FD4F0;
    --sky-pale:   #CFE7F5;

    --green:      #1B7F4B;
    --green-bg:   #E8F7EE;
    --amber:      #9A6100;
    --amber-bg:   #FFF4E5;
    --red-bg:     #FDE7EA;

    --shadow:     0 1px 2px rgba(16, 42, 67, .04);
    --shadow-lg:  0 10px 28px rgba(0, 80, 126, .18);
    --radius:     18px;
    --radius-sm:  12px;
}

* { box-sizing: border-box; }

body {
    margin: 0;
    font-family: 'Plus Jakarta Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
    background: var(--bg);
    color: var(--ink);
    -webkit-font-smoothing: antialiased;
    font-size: 15px;
}

a { color: var(--blue-dark); text-decoration: none; }
a:hover { color: var(--navy); text-decoration: underline; }

input, button, select, textarea { font-family: inherit; }
input:focus, textarea:focus, select:focus, button:focus-visible, a:focus-visible {
    outline: 2px solid #7FCBEC;
    outline-offset: 1px;
}

h1, h2, h3, h4 { margin: 0; letter-spacing: -.01em; }

.icon { flex: none; }

@keyframes fadeUp { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

/* ---------- Přihlašovací obrazovka ---------- */
.login {
    min-height: 100vh;
    display: grid;
    grid-template-columns: 1.05fr 1fr;
    background: #fff;
}
.login-hero {
    background: var(--navy);
    color: #fff;
    padding: 64px 60px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    position: relative;
    overflow: hidden;
}
/* Dekorativní kruhy v pozadí levého panelu */
.login-hero::before, .login-hero::after {
    content: '';
    position: absolute;
    border-radius: 50%;
    background: var(--navy-soft);
}
.login-hero::before { width: 640px; height: 640px; opacity: .55; right: -260px; top: -200px; }
.login-hero::after  { width: 420px; height: 420px; opacity: .40; left: -180px; bottom: -160px; }

.login-hero > * { position: relative; }
.login-hero-top { display: flex; flex-direction: column; gap: 44px; }
.login-logo {
    background: #fff;
    border-radius: 16px;
    padding: 16px 20px;
    width: fit-content;
    box-shadow: 0 10px 30px rgba(0, 0, 0, .14);
}
.login-logo img { display: block; height: 52px; width: auto; }
.login-claim { display: flex; flex-direction: column; gap: 18px; max-width: 460px; }
.login-eyebrow { display: flex; align-items: center; gap: 10px; }
.login-eyebrow span:first-child { width: 34px; height: 3px; background: var(--red); border-radius: 2px; }
.login-eyebrow span:last-child {
    font-size: 13px; font-weight: 700; letter-spacing: .16em;
    text-transform: uppercase; color: var(--sky-light);
}
.login-claim h1 { font-size: 46px; line-height: 1.08; font-weight: 800; letter-spacing: -.02em; text-wrap: pretty; }
.login-claim p  { margin: 0; font-size: 17px; line-height: 1.6; color: var(--sky-pale); text-wrap: pretty; }

.login-facts { display: flex; gap: 14px; flex-wrap: wrap; }
.login-fact {
    background: rgba(255, 255, 255, .1);
    border: 1px solid rgba(255, 255, 255, .18);
    border-radius: 14px;
    padding: 14px 18px;
    min-width: 150px;
}
.login-fact b { display: block; font-size: 26px; font-weight: 800; }
.login-fact span { font-size: 13px; color: var(--sky-pale); font-weight: 500; }

.login-form-wrap { display: flex; align-items: center; justify-content: center; padding: 56px 40px; }
.login-form { width: 100%; max-width: 392px; display: flex; flex-direction: column; gap: 26px; }
.login-form h2 { font-size: 29px; font-weight: 800; letter-spacing: -.02em; }
.login-form .lead { margin: 0; font-size: 15px; color: var(--muted); line-height: 1.55; }
.login-note {
    border-top: 1px solid var(--border-3);
    padding-top: 18px;
    display: flex; gap: 10px; align-items: flex-start;
}
.login-note span { width: 8px; height: 8px; border-radius: 50%; background: var(--red); margin-top: 6px; flex: none; }
.login-note p { margin: 0; font-size: 13px; line-height: 1.6; color: var(--muted-2); }

@media (max-width: 900px) {
    .login { grid-template-columns: 1fr; }
    .login-hero { padding: 40px 28px; }
    .login-claim h1 { font-size: 32px; }
    .login-form-wrap { padding: 36px 24px; }
}

/* ---------- Layout aplikace ---------- */
.layout { min-height: 100vh; display: grid; grid-template-columns: 262px 1fr; }

.sidebar {
    background: #fff;
    border-right: 1px solid var(--border);
    padding: 22px 16px;
    display: flex; flex-direction: column; gap: 26px;
    position: sticky; top: 0; height: 100vh; overflow: auto;
}
.brand { display: flex; align-items: center; gap: 11px; padding: 0 6px; }
.brand img { height: 34px; width: auto; }
.brand span {
    font-size: 12px; font-weight: 700; line-height: 1.25;
    color: var(--blue-dark); letter-spacing: .02em;
}

.nav-group { display: flex; flex-direction: column; gap: 4px; margin-bottom: 18px; }
.nav-title {
    font-size: 11px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
    color: var(--muted-3); padding: 0 10px 8px;
}
.nav-item {
    display: flex; align-items: center; gap: 11px;
    width: 100%; border: 0; cursor: pointer; text-align: left;
    padding: 10px 11px; border-radius: 11px;
    font-size: 14.5px; font-weight: 600;
    background: transparent; color: var(--ink-3);
    text-decoration: none;
}
.nav-item:hover { background: #F1F6FA; text-decoration: none; color: var(--ink-3); }
.nav-item.is-active { background: var(--sky-soft); color: var(--blue-dark); }
.nav-item span:not(.nav-badge) { flex: 1; }
.nav-badge {
    font-size: 11px; font-weight: 700;
    background: var(--red-bg); color: var(--red-dark);
    padding: 3px 7px; border-radius: 7px;
}

.sidebar-foot { margin-top: auto; display: flex; flex-direction: column; gap: 12px; }
.sidebar-box {
    background: var(--panel); border: 1px solid var(--border);
    border-radius: 14px; padding: 13px 14px;
    display: flex; flex-direction: column; gap: 6px;
}
.sidebar-box b { font-size: 12.5px; font-weight: 700; color: var(--ink-2); }
.sidebar-box span { font-size: 12.5px; color: var(--muted); line-height: 1.5; }
.logout-btn {
    display: flex; align-items: center; gap: 10px;
    border: 0; background: transparent; cursor: pointer;
    padding: 9px 11px; border-radius: 11px;
    font-size: 14px; font-weight: 600; color: #6B7C8C; width: 100%;
}
.logout-btn:hover { background: #F1F6FA; color: var(--red-dark); }

.main { display: flex; flex-direction: column; min-width: 0; }

.topbar {
    background: #fff; border-bottom: 1px solid var(--border);
    padding: 16px 34px;
    display: flex; align-items: center; justify-content: space-between; gap: 20px;
    position: sticky; top: 0; z-index: 5;
}
.topbar-crumb { font-size: 12px; font-weight: 600; color: var(--muted-3); }
.topbar h1 { font-size: 21px; font-weight: 800; }
.topbar-right { display: flex; align-items: center; gap: 14px; }
.topbar-user {
    display: flex; align-items: center; gap: 10px;
    padding-left: 14px; border-left: 1px solid var(--border-3);
}
.topbar-user .name { font-size: 14px; font-weight: 700; }
.topbar-user .role { font-size: 12px; color: var(--muted-2); }
.avatar {
    width: 38px; height: 38px; border-radius: 11px;
    background: var(--sky); color: var(--navy);
    display: grid; place-items: center;
    font-size: 14px; font-weight: 800; flex: none;
}
.avatar-lg { width: 66px; height: 66px; border-radius: 18px; font-size: 21px; }
.avatar-sm { width: 32px; height: 32px; border-radius: 10px; font-size: 11.5px; background: #F0F5F9; color: var(--ink-2); }
.avatar-md { width: 42px; height: 42px; border-radius: 12px; font-size: 13px; background: #F0F5F9; color: var(--ink-2); }

.content { padding: 30px 34px 56px; animation: fadeUp .28s ease both; }
.wrap    { display: flex; flex-direction: column; gap: 20px; }
.wrap-sm { max-width: 780px; }
.wrap-md { max-width: 960px; }
.wrap-lg { max-width: 1180px; }

@media (max-width: 1000px) {
    .layout { grid-template-columns: 1fr; }
    .sidebar { position: static; height: auto; border-right: 0; border-bottom: 1px solid var(--border); }
    .content { padding: 22px 18px 40px; }
    .topbar  { padding: 14px 18px; }
}

/* ---------- Karty ---------- */
.card {
    background: #fff; border: 1px solid var(--border);
    border-radius: var(--radius); padding: 24px;
    box-shadow: var(--shadow);
}
.card-tight { padding: 18px 20px; }
.card-lg    { padding: 30px 34px; }
.card-hover:hover { border-color: #BBD3E4; }
.card-head {
    display: flex; align-items: center; justify-content: space-between;
    gap: 12px; flex-wrap: wrap;
}
.card-head h2 { font-size: 17px; font-weight: 800; }
.stack { display: flex; flex-direction: column; gap: 16px; }
.stack-sm { display: flex; flex-direction: column; gap: 10px; }
.row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.row-between { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.grow { flex: 1; min-width: 0; }

/* ---------- Statistické dlaždice ---------- */
.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 16px; }
.stat {
    background: #fff; border: 1px solid var(--border);
    border-radius: var(--radius); padding: 22px;
    display: flex; flex-direction: column; gap: 8px;
    box-shadow: var(--shadow);
}
.stat-label {
    font-size: 12.5px; font-weight: 700; letter-spacing: .1em;
    text-transform: uppercase; color: var(--muted-3);
}
.stat-value { font-size: 28px; font-weight: 800; line-height: 1.1; }
.stat-value.sm { font-size: 20px; }
.stat-note { font-size: 13.5px; color: var(--muted); }

.stat-dark {
    background: var(--navy); color: #fff; border-color: var(--navy);
    box-shadow: var(--shadow-lg);
    gap: 14px;
}
.stat-dark .stat-label { color: var(--sky-light); }
.stat-dark .stat-value { font-size: 40px; line-height: 1; }
.stat-dark .stat-note  { color: var(--sky-pale); }

.c-navy  { color: var(--navy); }
.c-blue  { color: var(--blue-dark); }
.c-green { color: var(--green); }
.c-amber { color: var(--amber); }
.c-red   { color: var(--red-dark); }
.c-muted { color: var(--muted-2); }

/* ---------- Progress ---------- */
.progress { height: 8px; border-radius: 5px; background: #EDF2F6; overflow: hidden; }
.progress > span { display: block; height: 100%; border-radius: 5px; background: var(--blue); }
.progress-thin { height: 7px; }
.progress-thick { height: 9px; border-radius: 6px; }
.stat-dark .progress { background: rgba(255, 255, 255, .22); height: 7px; }
.stat-dark .progress > span { background: #fff; }
.progress > span.is-green { background: var(--green); }
.progress > span.is-amber { background: #E08A00; }
.progress > span.is-red   { background: var(--red-dark); }

/* ---------- Odznaky ---------- */
.badge {
    display: inline-block;
    font-size: 12px; font-weight: 700;
    padding: 5px 10px; border-radius: 8px;
    white-space: nowrap;
}
.badge-green { background: var(--green-bg); color: var(--green); }
.badge-blue  { background: var(--sky-soft); color: var(--blue-dark); }
.badge-amber { background: var(--amber-bg); color: var(--amber); }
.badge-red   { background: var(--red-bg);   color: var(--red-dark); }
.badge-gray  { background: #F2F5F8;         color: var(--muted-2); }

.eyebrow {
    font-size: 12px; font-weight: 700; letter-spacing: .1em;
    text-transform: uppercase; color: var(--blue-dark);
}
.eyebrow-muted { color: var(--muted-3); }
.eyebrow-red   { color: var(--red-dark); }

/* ---------- Tlačítka ---------- */
.btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    height: 44px; padding: 0 20px;
    border-radius: 12px; border: 1px solid transparent;
    font-size: 14.5px; font-weight: 700; cursor: pointer;
    text-decoration: none; white-space: nowrap;
}
.btn:hover { text-decoration: none; }
.btn-primary {
    background: var(--blue); color: #fff; border: 0;
    box-shadow: 0 8px 18px rgba(0, 147, 213, .25);
}
.btn-primary:hover { background: var(--blue-dark); color: #fff; }
.btn-outline {
    background: #fff; border-color: var(--border-2); color: var(--ink-2); font-weight: 600;
}
.btn-outline:hover { background: var(--panel); border-color: #BBD3E4; color: var(--ink-2); }
.btn-blue-outline { background: #fff; border-color: var(--border-2); color: var(--blue-dark); }
.btn-blue-outline:hover { background: var(--panel); color: var(--blue-dark); }
.btn-danger { background: #fff; border-color: #F0C9D0; color: var(--red-dark); font-weight: 600; }
.btn-danger:hover { background: var(--red-bg); color: var(--red-dark); }
.btn-link {
    border: 0; background: transparent; color: var(--blue-dark);
    font-size: 13.5px; font-weight: 700; cursor: pointer; padding: 0; height: auto;
}
.btn-link:hover { text-decoration: underline; }
.btn-sm { height: 38px; padding: 0 15px; font-size: 13.5px; }
.btn-xs { height: 36px; padding: 0 14px; font-size: 13px; font-weight: 600; }
.btn-lg { height: 50px; padding: 0 24px; font-size: 16px; border-radius: 13px; }
.btn-block { width: 100%; }
.btn:disabled, .btn.is-disabled {
    opacity: .55; cursor: not-allowed; box-shadow: none;
}
.btn-icon { padding: 0; width: 38px; }

/* ---------- Formuláře ---------- */
.field { display: flex; flex-direction: column; gap: 7px; }
.field > span, .label { font-size: 13px; font-weight: 600; color: var(--ink-2); }
.input, input[type=text], input[type=email], input[type=password], input[type=number],
input[type=date], input[type=search], select, textarea {
    height: 44px;
    border: 1px solid var(--border-2);
    background: var(--input-bg);
    border-radius: 11px;
    padding: 0 13px;
    font-size: 14.5px;
    color: var(--ink);
    width: 100%;
}
textarea { height: auto; padding: 11px 13px; line-height: 1.6; resize: vertical; min-height: 96px; }
select { appearance: none; background-image: none; cursor: pointer; }
.input-lg, .login-form input { height: 48px; border-radius: 12px; padding: 0 15px; font-size: 15px; }
.input-white { background: #fff; }
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
@media (max-width: 700px) { .grid-2, .grid-3 { grid-template-columns: 1fr; } }

.check { display: flex; align-items: center; gap: 8px; font-size: 14px; color: var(--ink-3); cursor: pointer; }
.check input { width: 16px; height: 16px; accent-color: var(--blue); }
.form-actions { display: flex; gap: 11px; justify-content: flex-end; flex-wrap: wrap; }
.hint { font-size: 13px; color: var(--muted-2); line-height: 1.55; margin: 0; }

/* Přepínač oznámení */
.toggle {
    width: 46px; height: 27px; border-radius: 14px; border: 0;
    cursor: pointer; flex: none; position: relative; background: #D9E2EA;
    padding: 0;
}
.toggle.is-on { background: var(--blue); }
.toggle span {
    position: absolute; top: 3px; left: 3px;
    width: 21px; height: 21px; border-radius: 50%; background: #fff;
    box-shadow: 0 1px 3px rgba(0, 0, 0, .2);
    transition: left .18s ease;
}
.toggle.is-on span { left: 22px; }
.toggle-row {
    display: flex; align-items: center; justify-content: space-between; gap: 16px;
    padding: 13px 0; border-bottom: 1px solid var(--line);
}
.toggle-row:last-child { border-bottom: 0; }
.toggle-row b { font-size: 14.5px; font-weight: 600; display: block; }
.toggle-row span.note { font-size: 13px; color: var(--muted-2); line-height: 1.5; }

/* ---------- Hlášky ---------- */
.alert {
    border-radius: 14px; padding: 14px 18px;
    font-size: 14px; line-height: 1.55; margin-bottom: 16px;
    border: 1px solid transparent;
}
.alert-success { background: var(--green-bg); border-color: #C6E9D5; color: #14603A; }
.alert-error   { background: var(--red-bg);   border-color: #F6D6DB; color: #5C3238; }
.alert-info    { background: var(--sky-soft); border-color: #CBE7F6; color: var(--navy); }
.alert-warning { background: var(--amber-bg); border-color: #F5DFBA; color: #6E4600; }

/* Červený rámeček „Bezpečnost" / „Připomínka" */
.note-red {
    background: var(--red-bg); border: 1px solid #F6D6DB;
    border-radius: 15px; padding: 19px;
    display: flex; flex-direction: column; gap: 9px;
}
.note-red p { margin: 0; font-size: 14px; line-height: 1.6; color: #5C3238; }

/* ---------- Tabulky (grid) ---------- */
.table { display: flex; flex-direction: column; }
.table-head, .table-row {
    display: grid; gap: 14px; align-items: center;
}
.table-head {
    padding: 0 4px 10px; border-bottom: 1px solid var(--border-3);
    font-size: 12px; font-weight: 700; letter-spacing: .06em;
    text-transform: uppercase; color: var(--muted-3);
}
.table-row {
    padding: 13px 4px; border-bottom: 1px solid var(--line);
    font-size: 14px;
}
.table-row:last-child { border-bottom: 0; }
.table-scroll { overflow-x: auto; }
.table-scroll .table { min-width: 720px; }
.table-empty { padding: 26px 4px; color: var(--muted-2); font-size: 14px; text-align: center; }

/* ---------- Modul v seznamu kurzu ---------- */
.modul {
    background: #fff; border: 1px solid var(--border);
    border-radius: 16px; padding: 18px 20px;
    display: flex; align-items: center; gap: 18px;
    box-shadow: var(--shadow);
}
.modul:hover { border-color: #BBD3E4; }
.modul-num {
    width: 48px; height: 48px; border-radius: 13px; flex: none;
    display: grid; place-items: center;
    font-size: 15px; font-weight: 800;
    background: #F2F5F8; color: var(--muted-3);
}
.modul-num.is-done    { background: var(--sky); color: var(--navy); }
.modul-num.is-current { background: var(--navy); color: #fff; }
.modul-body { display: flex; flex-direction: column; gap: 4px; flex: 1; min-width: 0; }
.modul-body b { font-size: 16px; font-weight: 700; letter-spacing: -.01em; }
.modul-body span { font-size: 13px; color: var(--muted-2); }

/* ---------- Dlaždice „pokračovat" ---------- */
.resume {
    display: flex; gap: 18px; align-items: center;
    background: var(--panel); border: 1px solid var(--border);
    border-radius: 15px; padding: 18px;
    flex-wrap: wrap;
}
.resume-thumb {
    width: 92px; height: 92px; border-radius: 13px;
    background: var(--sky); color: var(--navy);
    display: grid; place-items: center; flex: none;
    text-align: center; font-size: 11.5px; font-weight: 700; line-height: 1.35; padding: 8px;
}
.resume-body { display: flex; flex-direction: column; gap: 9px; min-width: 0; flex: 1; }
.resume-body h3 { font-size: 18px; font-weight: 800; letter-spacing: -.01em; }
.resume-body p { margin: 0; font-size: 13.5px; color: var(--muted); line-height: 1.55; }

/* Rychlé odkazy pod dlaždicí */
.quick { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.quick a, .quick button {
    border: 1px solid var(--border-2); background: #fff;
    border-radius: 14px; padding: 16px; text-align: left; cursor: pointer;
    display: flex; flex-direction: column; gap: 6px; text-decoration: none;
}
.quick a:hover, .quick button:hover { border-color: var(--blue); background: #F8FCFE; text-decoration: none; }
.quick b    { font-size: 14.5px; font-weight: 700; color: var(--ink); }
.quick span { font-size: 12.5px; color: var(--muted-2); line-height: 1.45; }
@media (max-width: 760px) { .quick { grid-template-columns: 1fr; } }

/* ---------- Oznámení metodika ---------- */
.notice { display: flex; gap: 11px; padding-bottom: 13px; border-bottom: 1px solid #F1F5F8; }
.notice:last-child { border-bottom: 0; padding-bottom: 0; }
.notice-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--blue); margin-top: 6px; flex: none; }
.notice-dot.is-important { background: var(--red); }
.notice b    { font-size: 13.5px; font-weight: 700; line-height: 1.4; }
.notice span { font-size: 12.5px; color: var(--muted-2); line-height: 1.5; }

/* ---------- Lekce ---------- */
.lesson-grid { display: grid; grid-template-columns: 1fr 250px; gap: 22px; align-items: start; }
@media (max-width: 1000px) { .lesson-grid { grid-template-columns: 1fr; } }
.lesson-side { display: flex; flex-direction: column; gap: 16px; position: sticky; top: 104px; }
@media (max-width: 1000px) { .lesson-side { position: static; } }

.lesson h2 { font-size: 29px; font-weight: 800; letter-spacing: -.02em; text-wrap: pretty; }
.lesson-perex { margin: 0; font-size: 15.5px; line-height: 1.65; color: var(--ink-3); text-wrap: pretty; }
.lesson-obsah { font-size: 15px; line-height: 1.7; color: var(--ink-3); }
.lesson-obsah p { margin: 0 0 12px; }
.lesson-obsah ul, .lesson-obsah ol { margin: 0 0 12px; padding-left: 22px; }
.lesson-obsah li { margin-bottom: 6px; }

.media {
    background: var(--panel); border: 1px dashed #C6DAE8;
    border-radius: 15px; min-height: 250px;
    display: grid; place-items: center; text-align: center; padding: 24px;
}
.media-inner { display: flex; flex-direction: column; gap: 7px; color: var(--muted-2); }
.media-inner b { font-size: 14.5px; font-weight: 700; color: var(--ink-2); }
.media-inner span { font-size: 13px; }
.media iframe, .media video { width: 100%; aspect-ratio: 16 / 9; border: 0; border-radius: 12px; }

.step {
    display: flex; gap: 15px; align-items: flex-start;
    padding: 15px 17px; border: 1px solid #E9EFF4; border-radius: 14px;
}
.step-num {
    width: 29px; height: 29px; border-radius: 9px;
    background: var(--sky); color: var(--navy);
    display: grid; place-items: center;
    font-size: 13px; font-weight: 800; flex: none;
}
.step b    { font-size: 15px; font-weight: 700; }
.step span { font-size: 14px; color: var(--muted); line-height: 1.6; }

.toc-item {
    display: flex; gap: 10px; align-items: center;
    padding: 8px 9px; border-radius: 10px;
    font-size: 13.5px; font-weight: 600; color: var(--ink-3); line-height: 1.4;
    text-decoration: none;
}
.toc-item:hover { background: #F7FAFC; text-decoration: none; color: var(--ink-3); }
.toc-item.is-current { background: var(--sky-soft); color: var(--blue-dark); }
.toc-item.is-done .toc-dot { background: var(--green); }
.toc-item.is-current .toc-dot { background: var(--blue); }
.toc-dot { width: 8px; height: 8px; border-radius: 50%; background: #D6DEE6; flex: none; }

/* ---------- Test ---------- */
.quiz-option {
    display: flex; align-items: center; gap: 14px;
    text-align: left; cursor: pointer; width: 100%;
    padding: 16px 18px; border-radius: 14px;
    font-size: 15.5px; font-weight: 600;
    background: #fff; border: 1.5px solid var(--border); color: var(--ink);
}
.quiz-option:hover { border-color: var(--blue); }
.quiz-option.is-selected,
.quiz-option:has(input:checked) { background: var(--sky-soft); border-color: var(--blue); }
/* Vlastní přepínač: nativní input schováme, ale musí zůstat fokusovatelný */
.visually-hidden {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.quiz-option:has(input:focus-visible) { outline: 2px solid #7FCBEC; outline-offset: 1px; }
.quiz-letter {
    width: 28px; height: 28px; border-radius: 9px;
    display: grid; place-items: center;
    font-size: 13px; font-weight: 800; flex: none;
    background: #F2F5F8; color: var(--muted-2);
}
.quiz-option.is-selected .quiz-letter { background: var(--blue); color: #fff; }
.quiz-option.is-correct { border-color: var(--green); background: var(--green-bg); }
.quiz-option.is-correct .quiz-letter { background: var(--green); color: #fff; }
.quiz-option.is-wrong { border-color: var(--red-dark); background: var(--red-bg); }
.quiz-option.is-wrong .quiz-letter { background: var(--red-dark); color: #fff; }
.quiz-question { font-size: 23px; font-weight: 800; line-height: 1.35; letter-spacing: -.01em; text-wrap: pretty; }

.timer {
    display: flex; align-items: center; gap: 9px;
    background: var(--panel); border: 1px solid var(--border);
    border-radius: 11px; padding: 9px 14px;
    font-size: 14px; font-weight: 700; color: var(--navy);
}
.timer.is-low { background: var(--red-bg); border-color: #F6D6DB; color: var(--red-dark); }

/* ---------- Certifikát ---------- */
.score-ring {
    width: 118px; height: 118px; border-radius: 50%;
    background: var(--green-bg); color: var(--green);
    display: grid; place-items: center; flex: none; text-align: center;
}
.score-ring.is-fail { background: var(--red-bg); color: var(--red-dark); }
.score-ring b { display: block; font-size: 31px; font-weight: 800; }
.score-ring span { font-size: 11.5px; font-weight: 700; letter-spacing: .08em; }

.cert {
    background: #fff; border: 1px solid var(--border);
    border-radius: var(--radius); padding: 34px 40px;
    box-shadow: var(--shadow); position: relative; overflow: hidden;
}
.cert::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 6px; background: var(--red); }
.cert-inner { display: flex; flex-direction: column; gap: 22px; }
.cert-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 20px; flex-wrap: wrap; }
.cert-head img { height: 44px; width: auto; }
.cert-no { text-align: right; font-size: 12.5px; color: var(--muted-2); line-height: 1.6; }
.cert-no b { font-weight: 700; color: var(--ink-2); }
.cert-name { font-size: 31px; font-weight: 800; letter-spacing: -.02em; }
.cert-text { margin: 0; font-size: 15px; color: var(--ink-3); line-height: 1.65; max-width: 620px; }
.cert-meta {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 18px;
    border-top: 1px solid var(--border-3); padding-top: 20px;
}
.cert-meta div { display: flex; flex-direction: column; gap: 3px; }
.cert-meta span { font-size: 12px; color: var(--muted-3); font-weight: 600; }
.cert-meta b { font-size: 14.5px; font-weight: 700; }

/* ---------- Fórum ---------- */
.thread {
    background: #fff; border: 1px solid var(--border);
    border-radius: 16px; padding: 19px 21px;
    display: flex; gap: 16px; align-items: flex-start;
    box-shadow: var(--shadow); text-decoration: none; color: inherit;
}
.thread:hover { border-color: #BBD3E4; text-decoration: none; color: inherit; }
.thread-body { display: flex; flex-direction: column; gap: 5px; flex: 1; min-width: 0; }
.thread-title { font-size: 15.5px; font-weight: 700; letter-spacing: -.01em; }
.thread-excerpt { font-size: 13.5px; color: var(--muted); line-height: 1.55; }
.thread-meta { font-size: 12.5px; color: var(--muted-3); }
.thread-count { display: flex; flex-direction: column; align-items: center; gap: 2px; flex: none; }
.thread-count b { font-size: 17px; font-weight: 800; color: var(--blue-dark); }
.thread-count span { font-size: 11.5px; color: var(--muted-3); }

.post { display: flex; gap: 14px; padding: 18px 0; border-bottom: 1px solid var(--line); }
.post:last-child { border-bottom: 0; }
.post-body { flex: 1; min-width: 0; }
.post-head { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; margin-bottom: 6px; }
.post-head b { font-size: 14px; font-weight: 700; }
.post-head span { font-size: 12.5px; color: var(--muted-3); }
.post-text { font-size: 14.5px; line-height: 1.65; color: var(--ink-3); white-space: pre-wrap; margin: 0; }

/* ---------- Graf úspěšnosti (administrace) ---------- */
.chart { display: flex; align-items: flex-end; gap: 14px; height: 190px; padding-top: 8px; }
.chart-bar {
    flex: 1; display: flex; flex-direction: column; align-items: center; gap: 9px;
    height: 100%; justify-content: flex-end;
}
.chart-bar b { font-size: 12px; font-weight: 700; color: var(--ink-2); }
.chart-bar i { display: block; width: 100%; max-width: 52px; border-radius: 9px 9px 4px 4px; background: #BBD3E4; }
.chart-bar i.is-high { background: var(--blue); }
.chart-bar i.is-mid  { background: #8FC6E6; }
.chart-bar span { font-size: 12px; color: var(--muted-3); font-weight: 600; }

/* Filtr složek */
.chips { display: flex; gap: 8px; flex-wrap: wrap; }
.chip {
    height: 36px; display: inline-flex; align-items: center;
    border: 1px solid var(--border-2); background: #fff; border-radius: 10px;
    padding: 0 13px; font-size: 13px; font-weight: 600; color: var(--muted);
    cursor: pointer; text-decoration: none;
}
.chip:hover { background: var(--panel); text-decoration: none; color: var(--muted); }
.chip.is-active { border-color: var(--blue); background: var(--sky-soft); color: var(--blue-dark); font-weight: 700; }

/* Panel s číslem (banka otázek) */
.mini-stats { display: flex; gap: 14px; flex-wrap: wrap; }
.mini-stat {
    flex: 1; min-width: 170px;
    background: var(--panel); border: 1px solid var(--border);
    border-radius: 14px; padding: 16px;
    display: flex; flex-direction: column; gap: 4px;
}
.mini-stat b { font-size: 24px; font-weight: 800; color: var(--navy); }
.mini-stat span { font-size: 13px; color: var(--muted); }

/* ---------- Chybové stránky ---------- */
.centered { display: grid; place-items: center; min-height: 100vh; padding: 24px; }
.err-code { font-size: 60px; font-weight: 800; color: var(--navy); margin: 0 0 6px; }
.text-center { text-align: center; }
.text-muted { color: var(--muted-2); }

/* ---------- Tisk certifikátu ---------- */
@media print {
    .no-print, .sidebar, .topbar { display: none !important; }
    body { background: #fff; }
    .layout { display: block; }
    .content { padding: 0; }
    .cert { border: 0; box-shadow: none; }
}

/* ---------- Média vložená přímo do lekce ---------- */
.lesson-media { margin: 0; }

/* Obrázky i videa se drží v rozumné výšce a nikdy nepřetečou sloupec.
   Bez stropu na výšku se panoramatické snímky (např. 1440x487) roztáhnou
   přes celou šířku a lekci opticky rozbijí. */
.lesson-media img,
.lesson-media video {
    display: block;
    width: auto;
    height: auto;
    max-width: 100%;
    margin: 0 auto;
    border-radius: 14px;
    border: 1px solid var(--border);
    background: var(--panel);
}
.lesson-media img   { max-height: 320px; }
.lesson-media video { width: 100%; max-width: 680px; aspect-ratio: 16 / 9; background: #0B1620; }

.lesson-media figcaption {
    margin-top: 8px; font-size: 13px; line-height: 1.5;
    color: var(--muted-2); text-align: center;
}

/* Galerie: dva sloupce, ale jen když je na ně místo. Jediný obrázek
   se necentruje na plnou šířku, ale zůstane ve své velikosti. */
.lesson-gallery {
    display: grid; gap: 18px;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    align-items: start;
}
.lesson-gallery:has(.lesson-media:only-child) { grid-template-columns: 1fr; }
.lesson-gallery .lesson-media img { max-height: 260px; }
@media (max-width: 640px) {
    .lesson-gallery { grid-template-columns: 1fr; }
    .lesson-media img { max-height: 240px; }
}