/* ============================================================
   FITKO — stylesheet
   Design: světlý minimalistický, editorial, konzistentní se Špekouny
   ============================================================ */

/* ============ SELF-HOSTED FONTS (variable, latin + latin-ext) ============ */
@font-face {
    font-family: 'Inter';
    font-style: normal; font-display: swap; font-weight: 100 900;
    src: url('/assets/fonts/inter-latin-wght-normal.woff2') format('woff2');
    unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face {
    font-family: 'Inter';
    font-style: normal; font-display: swap; font-weight: 100 900;
    src: url('/assets/fonts/inter-latin-ext-wght-normal.woff2') format('woff2');
    unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face {
    font-family: 'Playfair Display';
    font-style: normal; font-display: swap; font-weight: 400 900;
    src: url('/assets/fonts/playfair-display-latin-wght-normal.woff2') format('woff2');
    unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face {
    font-family: 'Playfair Display';
    font-style: normal; font-display: swap; font-weight: 400 900;
    src: url('/assets/fonts/playfair-display-latin-ext-wght-normal.woff2') format('woff2');
    unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face {
    font-family: 'JetBrains Mono';
    font-style: normal; font-display: swap; font-weight: 100 800;
    src: url('/assets/fonts/jetbrains-mono-latin-wght-normal.woff2') format('woff2');
    unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face {
    font-family: 'JetBrains Mono';
    font-style: normal; font-display: swap; font-weight: 100 800;
    src: url('/assets/fonts/jetbrains-mono-latin-ext-wght-normal.woff2') format('woff2');
    unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}

:root {
    color-scheme: light;
    --bg: #fdfcfa;
    --bg-card: #ffffff;
    --bg-hover: #f5f2ea;
    --border: #e8e3d6;
    --border-strong: #d4cebd;
    --text: #1a1a1a;
    --text-muted: #666;
    --text-dim: #999;
    --accent: #8b6914;
    --accent-light: #b08d57;
    --accent-bg: #f5eacd;
    --success: #2c7a47;
    --success-bg: #e2f0e6;
    --danger: #c0392b;
    --danger-bg: #fbe6e2;
    --pr-gold: #d4a743;

    --shadow-sm: 0 1px 2px rgba(26, 26, 26, 0.04);
    --shadow-md: 0 2px 8px rgba(26, 26, 26, 0.06);
    --shadow-lg: 0 8px 24px rgba(26, 26, 26, 0.10);

    --radius-sm: 6px;
    --radius: 10px;
    --radius-lg: 14px;

    --font: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    --font-mono: 'JetBrains Mono', ui-monospace, monospace;
    --font-serif: 'Playfair Display', Georgia, serif;

    /* Nové tokeny — grafy, skeletony, drag, theming */
    --heat-rgb: 139, 105, 20;          /* barva heatmapy (rgba základ) */
    --chart-empty: #e0dcd0;            /* netrénovaná partie / prázdný stav grafu */
    --chart-label: #8a7a5c;            /* popisky v SVG grafech */
    --skeleton-base: #efece3;
    --skeleton-shine: rgba(255, 255, 255, 0.65);
    --overlay: rgba(26, 26, 26, 0.45); /* modal backdrop */
    --on-accent: #ffffff;              /* text na akcentním pozadí */
}


* { box-sizing: border-box; margin: 0; padding: 0; }

html, body {
    font-family: var(--font);
    background: var(--bg);
    color: var(--text);
    -webkit-font-smoothing: antialiased;
    line-height: 1.5;
    font-size: 16px;
    min-height: 100vh;
}

button, input, select, textarea {
    font-family: inherit;
    font-size: inherit;
    color: inherit;
}

a { color: inherit; text-decoration: none; }
a:hover { text-decoration: none; }

/* ============ HEADER ============ */

.app-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 20px;
    background: var(--bg);
    border-bottom: 1px solid var(--border);
    position: sticky;
    top: 0;
    z-index: 100;
}

.app-brand {
    display: flex;
    align-items: center;
    gap: 10px;
    font-family: var(--font-mono);
    font-weight: 700;
    font-size: 14px;
    letter-spacing: 3px;
    color: var(--text);
}

.brand-dot {
    width: 10px;
    height: 10px;
    background: var(--accent);
    border-radius: 50%;
    display: inline-block;
}

.app-user {
    display: flex;
    align-items: center;
    gap: 12px;
}

.user-name {
    font-weight: 600;
    font-size: 14px;
}

.user-weight {
    font-family: var(--font-mono);
    font-size: 13px;
    color: var(--text-muted);
    padding: 3px 8px;
    background: var(--bg-hover);
    border-radius: var(--radius-sm);
}

.btn-icon {
    background: none;
    border: none;
    padding: 6px;
    border-radius: var(--radius-sm);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--text-muted);
    transition: background 0.15s, color 0.15s;
}

.btn-icon:hover {
    background: var(--bg-hover);
    color: var(--text);
}

/* ============ MAIN ============ */

.app-main {
    max-width: 900px;
    margin: 0 auto;
    padding: 24px 20px 80px;
}

@media (max-width: 640px) {
    .app-main { padding: 16px 14px 100px; }
}

.loading {
    text-align: center;
    color: var(--text-muted);
    padding: 60px 0;
    font-family: var(--font-mono);
    font-size: 13px;
    letter-spacing: 2px;
}

/* ============ TYPO ============ */

h1, h2, h3, h4 {
    font-weight: 700;
    line-height: 1.15;
    color: var(--text);
}

.page-title {
    font-family: var(--font-serif);
    font-weight: 900;
    font-size: 42px;
    letter-spacing: -1px;
    margin-bottom: 6px;
}

.page-title .accent { color: var(--accent); font-style: italic; }

.page-subtitle {
    font-size: 14px;
    color: var(--text-muted);
    margin-bottom: 24px;
    letter-spacing: 0.5px;
}

.section-header {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    margin: 32px 0 14px;
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 3px;
    color: var(--text-muted);
    text-transform: uppercase;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--border);
}

.section-header .count {
    color: var(--accent);
    font-weight: 600;
}

/* ============ BUTTONS ============ */

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 10px 18px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    color: var(--text);
    font-weight: 500;
    font-size: 14px;
    cursor: pointer;
    transition: all 0.15s;
    text-align: center;
    box-shadow: var(--shadow-sm);
}

.btn:hover {
    background: var(--bg-hover);
    box-shadow: var(--shadow-md);
    transform: translateY(-1px);
}

.btn:active { transform: translateY(0); }

.btn-primary {
    background: var(--text);
    color: var(--bg-card);
    border-color: var(--text);
}

.btn-primary:hover {
    background: var(--btn-primary-hover, #000);
    color: var(--bg-card);
}

.btn-accent {
    background: var(--accent);
    color: var(--on-accent);
    border-color: var(--accent);
}

.btn-accent:hover {
    background: var(--accent-light);
    color: var(--on-accent);
}

.btn-ghost {
    background: transparent;
    border-color: transparent;
    box-shadow: none;
}

.btn-ghost:hover {
    background: var(--bg-hover);
    box-shadow: none;
}

.btn-danger {
    color: var(--danger);
    border-color: var(--border);
}

.btn-danger:hover {
    background: var(--danger-bg);
    border-color: var(--danger);
}

.btn-sm {
    padding: 6px 12px;
    font-size: 12px;
}

.btn-lg {
    padding: 14px 24px;
    font-size: 15px;
}

.btn-block { width: 100%; }

/* ============ CARDS ============ */

.card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 20px;
    box-shadow: var(--shadow-sm);
    transition: all 0.15s;
}

.card:hover {
    box-shadow: var(--shadow-md);
}

.card-title {
    font-weight: 700;
    font-size: 17px;
    margin-bottom: 4px;
}

.card-subtitle {
    font-size: 13px;
    color: var(--text-muted);
    margin-bottom: 12px;
}

/* ============ HOME ============ */

.template-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 12px;
    margin-bottom: 16px;
}

.template-card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 18px;
    cursor: pointer;
    transition: all 0.15s;
    box-shadow: var(--shadow-sm);
    text-align: left;
    display: flex;
    flex-direction: column;
    gap: 6px;
    font-family: inherit;
    color: inherit;
    position: relative;
    overflow: hidden;
}

.template-card::before {
    content: '';
    position: absolute;
    top: 0; left: 0;
    width: 3px;
    height: 100%;
    background: var(--accent);
    transform: scaleY(0);
    transform-origin: top;
    transition: transform 0.2s;
}

.template-card:hover {
    background: var(--bg-hover);
    box-shadow: var(--shadow-md);
    transform: translateY(-2px);
}

.template-card:hover::before {
    transform: scaleY(1);
}

.template-name {
    font-weight: 700;
    font-size: 16px;
    margin-bottom: 2px;
}

.template-desc {
    font-size: 12px;
    color: var(--text-muted);
    line-height: 1.4;
}

.template-meta {
    display: flex;
    gap: 12px;
    margin-top: 8px;
    font-family: var(--font-mono);
    font-size: 11px;
    color: var(--text-dim);
    letter-spacing: 1px;
}

/* ============ WEEK COVERAGE (lišta 2) ============ */

.week-coverage {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(90px, 1fr));
    gap: 8px;
}

.muscle-tag {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 10px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    font-size: 12px;
    background: var(--bg-card);
    transition: all 0.15s;
    position: relative;
}

.muscle-tag-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--danger); /* default: 0× červená */
    flex-shrink: 0;
    box-shadow: 0 0 0 2px rgba(0,0,0,0.03);
}

.muscle-tag-count {
    margin-left: auto;
    font-family: var(--font-mono);
    font-size: 10px;
    color: var(--text-dim);
    padding: 1px 5px;
    background: var(--bg-hover);
    border-radius: 3px;
    letter-spacing: 0.5px;
}

/* Semafor podle počtu tréninků za týden */
.muscle-tag.lvl-0 .muscle-tag-dot {
    background: var(--danger); /* červená - 0× */
}

.muscle-tag.lvl-1 .muscle-tag-dot {
    background: #e67e22; /* oranžová - 1× */
}

.muscle-tag.lvl-1 {
    border-color: rgba(230, 126, 34, 0.35);
}

.muscle-tag.lvl-2 .muscle-tag-dot {
    background: #f1c40f; /* žlutá - 2× */
}

.muscle-tag.lvl-2 {
    border-color: rgba(241, 196, 15, 0.5);
    background: rgba(241, 196, 15, 0.05);
}

.muscle-tag.lvl-3 .muscle-tag-dot {
    background: var(--success); /* zelená - 3+× */
}

.muscle-tag.lvl-3 {
    background: var(--success-bg);
    border-color: var(--success);
    color: var(--success);
    font-weight: 500;
}

/* ============ RECENT SESSIONS ============ */

.session-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.session-row {
    display: grid;
    grid-template-columns: 100px 1fr auto auto 32px;
    gap: 12px;
    align-items: center;
    padding: 12px 16px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    font-size: 13px;
    cursor: pointer;
    transition: all 0.15s;
    text-align: left;
    font: inherit;
    color: inherit;
    width: 100%;
}

.session-row:hover {
    background: var(--bg-hover);
    box-shadow: var(--shadow-sm);
}

/* Nedokončený trénink */
.session-row.active-session {
    border-left: 3px solid var(--danger);
    background: linear-gradient(to right, var(--danger-bg) 0%, var(--bg-card) 20%);
}

.active-dot {
    display: inline-block;
    width: 8px;
    height: 8px;
    background: var(--danger);
    border-radius: 50%;
    margin-right: 6px;
    vertical-align: middle;
    animation: pulse-dot 2s infinite;
}

@keyframes pulse-dot {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.4; }
}

/* Delete tlačítko v řádku */
.session-delete-btn {
    background: transparent;
    border: 1px solid transparent;
    padding: 6px;
    border-radius: var(--radius-sm);
    cursor: pointer;
    color: var(--text-dim);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: all 0.15s;
}

.session-delete-btn:hover {
    background: var(--danger-bg);
    color: var(--danger);
    border-color: var(--danger);
}

.session-date {
    font-family: var(--font-mono);
    font-size: 12px;
    color: var(--text-muted);
}

.session-name {
    font-weight: 500;
}

.session-meta {
    font-family: var(--font-mono);
    font-size: 11px;
    color: var(--text-dim);
    letter-spacing: 1px;
    white-space: nowrap;
}

.session-sauna {
    font-size: 11px;
    color: var(--accent);
}

@media (max-width: 640px) {
    .session-row {
        grid-template-columns: 70px 1fr auto 32px;
        font-size: 12px;
        gap: 8px;
        padding: 10px 12px;
    }
    .session-sauna { display: none; }
    .session-meta { font-size: 10px; }
}

/* ============ WORKOUT SESSION ============ */

.workout-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 20px;
    gap: 12px;
}

.workout-title {
    font-family: var(--font-serif);
    font-weight: 900;
    font-size: 28px;
    letter-spacing: -0.5px;
}

.workout-progress-bar {
    height: 4px;
    background: var(--border);
    border-radius: 2px;
    overflow: hidden;
    margin-bottom: 20px;
}

.workout-progress-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--accent), var(--accent-light));
    transition: width 0.3s;
}

.workout-progress-label {
    display: flex;
    justify-content: space-between;
    font-family: var(--font-mono);
    font-size: 11px;
    color: var(--text-muted);
    margin-bottom: 4px;
    letter-spacing: 1px;
}

/* Exercise card in workout */

.exercise-card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 16px;
    margin-bottom: 12px;
    transition: border-color 0.15s;
}

.exercise-card.completed {
    border-color: var(--success);
    background: linear-gradient(to right, var(--success-bg) 0%, var(--bg-card) 40%);
}

.exercise-head {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin-bottom: 4px;
    gap: 10px;
}

.exercise-name {
    font-weight: 700;
    font-size: 16px;
}

.exercise-muscle {
    font-family: var(--font-mono);
    font-size: 10px;
    letter-spacing: 2px;
    color: var(--text-dim);
    text-transform: uppercase;
}

.exercise-suggestion {
    font-family: var(--font-mono);
    font-size: 11px;
    color: var(--accent);
    margin-bottom: 12px;
    padding: 6px 10px;
    background: var(--accent-bg);
    border-radius: var(--radius-sm);
    display: inline-block;
}

.sets-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-bottom: 8px;
}

.set-row {
    display: grid;
    grid-template-columns: 32px 1fr 1fr 44px;
    gap: 8px;
    align-items: center;
    padding: 6px 4px;
}

.set-number {
    font-family: var(--font-mono);
    font-size: 12px;
    color: var(--text-dim);
    text-align: center;
    font-weight: 600;
}

.set-input {
    background: var(--bg-hover);
    border: 1px solid transparent;
    padding: 10px 12px;
    border-radius: var(--radius);
    font-family: var(--font-mono);
    font-weight: 600;
    font-size: 15px;
    text-align: center;
    cursor: pointer;
    transition: all 0.15s;
}

.set-input:hover {
    border-color: var(--border-strong);
    background: var(--bg-card);
}

.set-input.filled {
    background: var(--bg-card);
    border-color: var(--border-strong);
}

.set-input-unit {
    font-family: var(--font-mono);
    font-size: 10px;
    color: var(--text-dim);
    display: block;
    margin-top: 1px;
    letter-spacing: 1px;
    text-transform: uppercase;
}

.set-check {
    background: var(--bg-hover);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 10px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.15s;
}

.set-check.done {
    background: var(--success);
    border-color: var(--success);
    color: var(--on-accent);
}

.set-check svg { width: 18px; height: 18px; }

.set-actions {
    display: flex;
    gap: 8px;
    justify-content: flex-end;
    margin-top: 4px;
}

.add-set-btn {
    background: transparent;
    border: 1px dashed var(--border-strong);
    padding: 8px;
    width: 100%;
    border-radius: var(--radius);
    color: var(--text-muted);
    cursor: pointer;
    font-size: 12px;
    transition: all 0.15s;
}

.add-set-btn:hover {
    background: var(--bg-hover);
    color: var(--text);
    border-color: var(--accent);
}

.pr-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 6px;
    background: var(--pr-gold);
    color: var(--on-accent);
    border-radius: 4px;
    font-family: var(--font-mono);
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 1px;
    margin-left: 6px;
}

/* Workout footer with complete button */

.workout-footer {
    position: sticky;
    bottom: 0;
    background: linear-gradient(to top, var(--bg) 60%, transparent);
    padding: 20px 0 12px;
    margin: 24px -20px 0;
    padding-left: 20px;
    padding-right: 20px;
    display: flex;
    gap: 8px;
}

.workout-footer .btn { flex: 1; }

/* ============ MODALS ============ */

.modal-backdrop {
    position: fixed;
    inset: 0;
    background: var(--overlay);
    display: flex;
    align-items: flex-end;
    justify-content: center;
    z-index: 1000;
    animation: fade-in 0.15s;
    padding: 16px;
}

@keyframes fade-in {
    from { opacity: 0; }
    to { opacity: 1; }
}

@media (min-width: 640px) {
    .modal-backdrop {
        align-items: center;
    }
}

.modal {
    background: var(--bg-card);
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
    padding: 20px;
    width: 100%;
    max-width: 500px;
    box-shadow: var(--shadow-lg);
    animation: slide-up 0.2s;
    max-height: 90vh;
    overflow-y: auto;
}

@media (min-width: 640px) {
    .modal { border-radius: var(--radius-lg); }
}

@keyframes slide-up {
    from { transform: translateY(20px); opacity: 0; }
    to { transform: translateY(0); opacity: 1; }
}

.modal-title {
    font-family: var(--font-serif);
    font-weight: 700;
    font-size: 22px;
    margin-bottom: 8px;
    text-align: center;
}

.modal-value {
    font-family: var(--font-mono);
    font-weight: 700;
    font-size: 40px;
    text-align: center;
    padding: 16px;
    background: var(--bg-hover);
    border-radius: var(--radius);
    margin: 12px 0;
}

.modal-value.gold { color: var(--accent); }

.number-picker {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 8px;
    margin: 12px 0;
}

.number-picker button {
    padding: 14px 8px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    font-family: var(--font-mono);
    font-weight: 600;
    font-size: 14px;
    cursor: pointer;
    transition: all 0.15s;
}

.number-picker button:hover {
    background: var(--bg-hover);
    border-color: var(--accent);
}

.number-picker button:active {
    transform: scale(0.96);
}

.modal-actions {
    display: flex;
    gap: 8px;
    margin-top: 16px;
}

.modal-actions .btn { flex: 1; }

/* ============ TOAST ============ */

#toast-root {
    position: fixed;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 2000;
    display: flex;
    flex-direction: column;
    gap: 8px;
    pointer-events: none;
}

.toast {
    background: var(--text);
    color: var(--bg);
    padding: 12px 20px;
    border-radius: var(--radius);
    font-size: 13px;
    font-weight: 500;
    box-shadow: var(--shadow-lg);
    animation: toast-in 0.2s, toast-out 0.3s 2.5s forwards;
    max-width: 320px;
    text-align: center;
}

.toast.success { background: var(--success); }
.toast.error { background: var(--danger); }
.toast.pr {
    background: var(--pr-gold);
    color: var(--on-accent);
    font-weight: 700;
    letter-spacing: 1px;
}

@keyframes toast-in {
    from { transform: translateY(20px); opacity: 0; }
    to { transform: translateY(0); opacity: 1; }
}

@keyframes toast-out {
    to { transform: translateY(20px); opacity: 0; }
}

/* ============ STATS PAGE ============ */

.stats-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    margin-bottom: 20px;
}

@media (max-width: 640px) {
    .stats-grid { grid-template-columns: 1fr; }
}

.stat-card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 18px;
}

.stat-label {
    font-family: var(--font-mono);
    font-size: 10px;
    letter-spacing: 2px;
    color: var(--text-muted);
    text-transform: uppercase;
    margin-bottom: 4px;
}

.stat-value {
    font-family: var(--font-serif);
    font-weight: 900;
    font-size: 32px;
    line-height: 1;
    color: var(--text);
}

.stat-value.gold { color: var(--accent); }
.stat-value.success { color: var(--success); }

.stat-sub {
    font-size: 12px;
    color: var(--text-muted);
    margin-top: 4px;
}

/* Muscle heat map */

.heatmap-wrap {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 20px;
    margin-bottom: 20px;
}

@media (max-width: 640px) {
    .heatmap-wrap { grid-template-columns: 1fr; }
}

.heatmap-svg {
    width: 100%;
    max-width: 260px;
    margin: 0 auto;
    display: block;
}

.heatmap-legend {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.heatmap-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 6px 8px;
    border-radius: var(--radius-sm);
    font-size: 13px;
}

.heatmap-row .label { font-weight: 500; }
.heatmap-row .value {
    font-family: var(--font-mono);
    font-size: 11px;
    color: var(--text-muted);
    letter-spacing: 1px;
}

.heatmap-row .intensity-bar {
    width: 60px;
    height: 4px;
    background: var(--border);
    border-radius: 2px;
    overflow: hidden;
    display: inline-block;
    margin-right: 8px;
}

.heatmap-row .intensity-fill {
    height: 100%;
    background: var(--accent);
    border-radius: 2px;
}

/* PR list */

.pr-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.pr-row {
    display: grid;
    grid-template-columns: 1fr auto auto;
    gap: 12px;
    align-items: center;
    padding: 10px 14px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    font-size: 13px;
    cursor: pointer;
    transition: all 0.15s;
}

.pr-row:hover {
    background: var(--bg-hover);
}

.pr-name { font-weight: 500; }

.pr-value {
    font-family: var(--font-mono);
    font-weight: 700;
    font-size: 14px;
    color: var(--accent);
}

.pr-date {
    font-family: var(--font-mono);
    font-size: 11px;
    color: var(--text-dim);
}

/* Exercise chart */

.chart-wrap {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 20px;
    margin-bottom: 20px;
}

.chart-svg {
    width: 100%;
    height: auto;
    max-height: 300px;
}

/* ============ SAUNA STATS ============ */

.sauna-stat {
    background: var(--accent-bg);
    border: 1px solid var(--accent);
    border-radius: var(--radius-lg);
    padding: 16px;
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 16px;
}

.sauna-stat-icon {
    width: 40px;
    height: 40px;
    background: var(--accent);
    color: var(--on-accent);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.sauna-stat-value {
    font-family: var(--font-serif);
    font-weight: 900;
    font-size: 24px;
    color: var(--accent);
}

.sauna-stat-label {
    font-size: 12px;
    color: var(--text-muted);
    font-family: var(--font-mono);
    letter-spacing: 1px;
    text-transform: uppercase;
}

/* ============ LOGIN PAGE ============ */

.login-body {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    background: var(--bg);
    padding: 20px;
}

.login-wrap {
    max-width: 380px;
    width: 100%;
}

.login-brand {
    display: flex;
    align-items: center;
    gap: 10px;
    font-family: var(--font-mono);
    font-weight: 700;
    font-size: 14px;
    letter-spacing: 4px;
    color: var(--text);
    margin-bottom: 40px;
    justify-content: center;
}

.login-title {
    font-family: var(--font-serif);
    font-weight: 900;
    font-size: 48px;
    text-align: center;
    letter-spacing: -1px;
    margin-bottom: 30px;
}

.login-title .accent { color: var(--accent); font-style: italic; }

.login-form {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.login-form label {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.login-form label span {
    font-family: var(--font-mono);
    font-size: 10px;
    letter-spacing: 2px;
    color: var(--text-muted);
    text-transform: uppercase;
}

.login-form input {
    padding: 14px 16px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    font-size: 15px;
    transition: border-color 0.15s;
}

.login-form input:focus {
    outline: none;
    border-color: var(--accent);
}

.login-error {
    padding: 10px 14px;
    background: var(--danger-bg);
    border: 1px solid var(--danger);
    color: var(--danger);
    border-radius: var(--radius);
    font-size: 13px;
    text-align: center;
}

.login-foot {
    margin-top: 30px;
    text-align: center;
    font-family: var(--font-mono);
    font-size: 10px;
    letter-spacing: 3px;
    color: var(--text-dim);
    text-transform: uppercase;
}

/* ============ EXERCISE PICKER ============ */

.exercise-picker-search {
    padding: 12px 14px;
    background: var(--bg-hover);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    font-size: 14px;
    width: 100%;
    margin-bottom: 12px;
}

.exercise-picker-list {
    max-height: 400px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.exercise-picker-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 12px;
    border-radius: var(--radius-sm);
    cursor: pointer;
    background: var(--bg-card);
    border: 1px solid var(--border);
    transition: all 0.1s;
}

.exercise-picker-item:hover {
    background: var(--bg-hover);
    border-color: var(--accent);
}

.exercise-picker-item .name { font-weight: 500; font-size: 14px; }
.exercise-picker-item .muscle {
    font-family: var(--font-mono);
    font-size: 10px;
    letter-spacing: 1px;
    color: var(--text-dim);
    text-transform: uppercase;
}

/* Filtr podle svalové skupiny - řada klikacích tagů */
.muscle-filter-row {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    margin-bottom: 12px;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--border);
}

.muscle-filter-btn {
    padding: 5px 10px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 999px;
    font-family: var(--font-mono);
    font-size: 10px;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--text-muted);
    cursor: pointer;
    transition: all 0.15s;
}

.muscle-filter-btn:hover {
    background: var(--bg-hover);
    color: var(--text);
    border-color: var(--border-strong);
}

.muscle-filter-btn.active {
    background: var(--accent);
    border-color: var(--accent);
    color: var(--on-accent);
    font-weight: 600;
}

/* Nadpis skupiny v seznamu cviků */
.exercise-picker-group {
    font-family: var(--font-mono);
    font-size: 10px;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--accent);
    padding: 8px 4px 4px;
    margin-top: 4px;
    border-top: 1px solid var(--border);
    font-weight: 700;
}

.exercise-picker-group:first-child {
    margin-top: 0;
    border-top: none;
    padding-top: 4px;
}

/* ============ NAV TABS ============ */

.nav-tabs {
    display: flex;
    gap: 4px;
    margin-bottom: 20px;
    border-bottom: 1px solid var(--border);
    padding-bottom: 0;

    /* Přejezd do strany, když se položky nevejdou */
    overflow-x: auto;
    scroll-behavior: smooth;
    scrollbar-width: none;              /* Firefox */
    -ms-overflow-style: none;
    scroll-snap-type: x proximity;
    -webkit-overflow-scrolling: touch;
}

.nav-tabs::-webkit-scrollbar { display: none; }

.nav-tabs .nav-tab {
    flex: 0 0 auto;                     /* nesmršťovat, ať se dá odjet */
    scroll-snap-align: center;
}

/* Fade na okraji naznačuje, že za hranou něco je.
   Třídy nastavuje JS podle pozice scrollu. */
.nav-tabs.fade-r  { mask-image: linear-gradient(to right, #000 88%, transparent 100%);
                    -webkit-mask-image: linear-gradient(to right, #000 88%, transparent 100%); }
.nav-tabs.fade-l  { mask-image: linear-gradient(to left, #000 88%, transparent 100%);
                    -webkit-mask-image: linear-gradient(to left, #000 88%, transparent 100%); }
.nav-tabs.fade-lr { mask-image: linear-gradient(to right, transparent 0%, #000 7%, #000 93%, transparent 100%);
                    -webkit-mask-image: linear-gradient(to right, transparent 0%, #000 7%, #000 93%, transparent 100%); }

.nav-tab {
    padding: 10px 16px;
    background: none;
    border: none;
    border-bottom: 2px solid transparent;
    cursor: pointer;
    font-weight: 500;
    color: var(--text-muted);
    transition: all 0.15s;
    font-size: 14px;
    margin-bottom: -1px;
}

.nav-tab:hover { color: var(--text); }

.nav-tab.active {
    color: var(--text);
    border-bottom-color: var(--accent);
    font-weight: 600;
}

/* ============ FORM ============ */

.form-field {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-bottom: 12px;
}

.form-field label {
    font-family: var(--font-mono);
    font-size: 10px;
    letter-spacing: 2px;
    color: var(--text-muted);
    text-transform: uppercase;
}

.form-field input,
.form-field select,
.form-field textarea {
    padding: 10px 12px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    font-size: 14px;
}

.form-field input:focus,
.form-field select:focus {
    outline: none;
    border-color: var(--accent);
}

/* ============ MISC ============ */

.empty {
    text-align: center;
    padding: 40px 20px;
    color: var(--text-muted);
    font-size: 14px;
}

.empty-icon {
    font-size: 40px;
    margin-bottom: 12px;
    opacity: 0.3;
}

hr.divider {
    border: none;
    border-top: 1px solid var(--border);
    margin: 24px 0;
}

.row { display: flex; gap: 8px; align-items: center; }
.row-between { display: flex; gap: 8px; align-items: center; justify-content: space-between; }
.flex-1 { flex: 1; }

.text-mono { font-family: var(--font-mono); }
.text-muted { color: var(--text-muted); }
.text-dim { color: var(--text-dim); }
.text-sm { font-size: 12px; }
.text-xs { font-size: 11px; }

.mt-8 { margin-top: 8px; }
.mt-16 { margin-top: 16px; }
.mt-24 { margin-top: 24px; }
.mb-8 { margin-bottom: 8px; }
.mb-16 { margin-bottom: 16px; }

/* ============================================================
   FÁZE A — nové styly
   ============================================================ */

/* Recovery indicator na template card */
.template-card.recovery-lvl-0 {
    border-color: var(--danger);
}
.template-card.recovery-lvl-0::before {
    background: var(--danger);
    transform: scaleY(1);
}
.template-card.recovery-lvl-1 {
    border-color: var(--pr-gold);
}
.template-card.recovery-lvl-1::before {
    background: var(--pr-gold);
    transform: scaleY(1);
}
.template-card.recovery-lvl-2::before {
    background: var(--success);
}

.template-recovery {
    font-family: var(--font-mono);
    font-size: 10px;
    letter-spacing: 1px;
    padding: 4px 6px;
    border-radius: var(--radius-sm);
    margin-top: 6px;
    display: inline-block;
    background: var(--bg-hover);
    color: var(--text-muted);
}

.template-card.recovery-lvl-0 .template-recovery {
    background: var(--danger-bg);
    color: var(--danger);
    font-weight: 600;
}

.template-card.recovery-lvl-1 .template-recovery {
    background: rgba(212, 167, 67, 0.15);
    color: var(--accent);
    font-weight: 500;
}

.template-card.recovery-lvl-2 .template-recovery {
    background: var(--success-bg);
    color: var(--success);
}

/* Auto-fill z minula */
.exercise-last-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 8px 10px;
    background: var(--bg-hover);
    border-radius: var(--radius-sm);
    margin-bottom: 10px;
    border: 1px dashed var(--border-strong);
}

.exercise-last-text {
    font-family: var(--font-mono);
    font-size: 11px;
    color: var(--text-muted);
    letter-spacing: 0.5px;
    flex: 1;
    min-width: 0;
    white-space: normal;
    overflow-wrap: anywhere;
    line-height: 1.5;
}

@media (max-width: 640px) {
    .exercise-last-row {
        flex-direction: column;
        align-items: flex-start;
    }
    .exercise-last-row .exercise-last-text {
        width: 100%;
    }
    .exercise-last-row .btn {
        width: 100%;
    }
}

/* Session row - approve extra column for compare button */
.session-row {
    grid-template-columns: 100px 1fr auto auto 28px 28px;
}
.session-row-btn {
    background: transparent;
    border: 1px solid transparent;
    padding: 5px;
    border-radius: var(--radius-sm);
    cursor: pointer;
    color: var(--text-dim);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: all 0.15s;
}
.session-row-btn:hover {
    background: var(--bg-hover);
    color: var(--text);
}
.session-delete-btn:hover {
    background: var(--danger-bg);
    color: var(--danger);
    border-color: var(--danger);
}
.session-compare-btn:hover {
    background: var(--accent-bg);
    color: var(--accent);
    border-color: var(--accent);
}

@media (max-width: 640px) {
    .session-row {
        grid-template-columns: 70px 1fr auto 26px 26px;
    }
    .session-sauna { display: none; }
}

/* Stats nav quick buttons */
.stats-nav {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
}

.stats-nav-btn {
    padding: 14px 12px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    font-weight: 500;
    font-size: 13px;
    cursor: pointer;
    transition: all 0.15s;
    color: var(--text);
}

.stats-nav-btn:hover {
    background: var(--bg-hover);
    border-color: var(--accent);
    color: var(--accent);
    transform: translateY(-1px);
}

/* Session compare */
.compare-headers {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    margin-bottom: 20px;
    padding: 14px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
}

.compare-header-cell {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.compare-header-cell:first-child {
    border-right: 1px solid var(--border);
    padding-right: 12px;
}

.compare-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.compare-exercise-card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 14px;
}

.compare-exercise-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    margin-bottom: 10px;
}

.compare-exercise-name {
    font-weight: 700;
    font-size: 15px;
}

.compare-exercise-muscle {
    font-family: var(--font-mono);
    font-size: 9px;
    letter-spacing: 2px;
    color: var(--text-dim);
    text-transform: uppercase;
    margin-top: 2px;
}

.compare-delta {
    font-family: var(--font-mono);
    font-weight: 700;
    font-size: 13px;
    padding: 4px 10px;
    border-radius: var(--radius-sm);
    letter-spacing: 0.5px;
}

.compare-delta.positive {
    background: var(--success-bg);
    color: var(--success);
}

.compare-delta.negative {
    background: var(--danger-bg);
    color: var(--danger);
}

.compare-delta.neutral {
    background: var(--bg-hover);
    color: var(--text-muted);
}

.compare-rows {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

.compare-cell {
    padding: 10px;
    background: var(--bg-hover);
    border-radius: var(--radius);
}

.compare-cell.current {
    background: var(--accent-bg);
    border: 1px solid var(--accent);
}

.compare-cell-label {
    font-family: var(--font-mono);
    font-size: 9px;
    letter-spacing: 2px;
    color: var(--text-dim);
    text-transform: uppercase;
    margin-bottom: 6px;
}

.compare-sets {
    font-family: var(--font-mono);
    font-size: 12px;
    font-weight: 500;
    line-height: 1.4;
}

.compare-best {
    font-family: var(--font-mono);
    font-size: 11px;
    color: var(--accent);
    margin-top: 4px;
    font-weight: 600;
}

.compare-volume {
    font-family: var(--font-mono);
    font-size: 10px;
    color: var(--text-muted);
    margin-top: 2px;
}

/* Muscle Balance */
.balance-card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 14px 16px;
    margin-bottom: 12px;
}

.balance-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    margin-bottom: 10px;
}

.balance-title {
    font-weight: 700;
    font-size: 15px;
}

.balance-ratio {
    font-family: var(--font-mono);
    font-size: 13px;
    font-weight: 600;
    color: var(--accent);
}

.balance-bar {
    display: flex;
    height: 32px;
    border-radius: var(--radius-sm);
    overflow: hidden;
    margin-bottom: 8px;
}

.balance-bar-a, .balance-bar-b {
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-mono);
    font-size: 10px;
    letter-spacing: 1px;
    font-weight: 600;
    color: var(--on-accent);
    padding: 0 6px;
    text-transform: uppercase;
    min-width: 20px;
    overflow: hidden;
    white-space: nowrap;
}

.balance-bar-a {
    background: var(--accent);
}

.balance-bar-b {
    background: var(--accent-light);
}

.balance-advice {
    font-family: var(--font-mono);
    font-size: 11px;
    padding: 6px 10px;
    border-radius: var(--radius-sm);
    letter-spacing: 0.5px;
}

.balance-advice.balanced {
    background: var(--success-bg);
    color: var(--success);
    font-weight: 500;
}

.balance-advice.unbalanced {
    background: var(--danger-bg);
    color: var(--danger);
    font-weight: 500;
}

.balance-advice.nodata {
    background: var(--bg-hover);
    color: var(--text-dim);
}

.muscle-volume-list {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.muscle-volume-row {
    display: grid;
    grid-template-columns: 1fr auto auto;
    gap: 12px;
    padding: 8px 12px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    font-size: 13px;
    align-items: center;
}

.muscle-volume-label {
    font-weight: 500;
}

.muscle-volume-sets, .muscle-volume-vol {
    font-family: var(--font-mono);
    font-size: 11px;
    color: var(--text-muted);
    letter-spacing: 0.5px;
}

/* PR Compare */
.pr-compare-header {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    gap: 16px;
    align-items: center;
    padding: 16px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    margin-bottom: 20px;
}

.pr-compare-name-me, .pr-compare-name-them {
    text-align: center;
    font-family: var(--font-serif);
    font-weight: 900;
    font-size: 24px;
    letter-spacing: -0.5px;
}

.pr-compare-name-me {
    color: var(--accent);
}

.pr-compare-vs {
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 3px;
    color: var(--text-dim);
    text-transform: uppercase;
}

.pr-compare-list {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.pr-compare-row {
    display: grid;
    grid-template-columns: 1fr 90px 90px;
    gap: 12px;
    align-items: center;
    padding: 10px 14px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    font-size: 13px;
}

.pr-compare-name {
    font-weight: 500;
}

.pr-compare-me, .pr-compare-them {
    font-family: var(--font-mono);
    font-weight: 600;
    font-size: 13px;
    text-align: center;
    padding: 4px 8px;
    border-radius: var(--radius-sm);
    background: var(--bg-hover);
    color: var(--text-muted);
}

.pr-compare-me.wins {
    background: var(--accent-bg);
    color: var(--accent);
    font-weight: 700;
}

.pr-compare-them.wins {
    background: var(--success-bg);
    color: var(--success);
    font-weight: 700;
}

@media (max-width: 640px) {
    .pr-compare-header {
        grid-template-columns: 1fr;
        text-align: center;
        gap: 8px;
    }
    .pr-compare-name-me, .pr-compare-name-them {
        font-size: 18px;
    }
    .pr-compare-row {
        grid-template-columns: 1fr 70px 70px;
        font-size: 12px;
    }
}

/* ============================================================
   FÁZE B — nové styly
   ============================================================ */

/* Quick stats na Home (volume, streaks, sauna) */
.quick-stats {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 10px;
    margin-top: 20px;
    margin-bottom: 8px;
}

@media (max-width: 640px) {
    .quick-stats { grid-template-columns: 1fr 1fr 1fr; gap: 6px; }
}

.quick-stat {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 14px 12px;
    text-align: center;
}

.quick-stat.sauna {
    background: var(--accent-bg);
    border-color: var(--accent);
}

.quick-stat.empty {
    background: var(--bg-hover);
}

.quick-stat-value {
    font-family: var(--font-serif);
    font-weight: 900;
    font-size: 26px;
    line-height: 1;
    color: var(--accent);
}

.quick-stat-label {
    font-family: var(--font-mono);
    font-size: 9px;
    letter-spacing: 1.5px;
    color: var(--text-muted);
    text-transform: uppercase;
    margin-top: 4px;
}

.quick-stat-delta {
    font-family: var(--font-mono);
    font-size: 10px;
    color: var(--text-dim);
    margin-top: 4px;
}

.quick-stat-delta.positive {
    color: var(--success);
}

.quick-stat-delta.negative {
    color: var(--danger);
}

@media (max-width: 640px) {
    .quick-stat-value { font-size: 20px; }
    .quick-stat { padding: 10px 8px; }
    .quick-stat-label { font-size: 8px; }
}

/* Exercise notes button */
.exercise-notes-btn {
    background: transparent;
    border: 1px solid transparent;
    padding: 6px;
    border-radius: var(--radius-sm);
    cursor: pointer;
    color: var(--text-dim);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: all 0.15s;
    flex-shrink: 0;
}

.exercise-notes-btn:hover {
    background: var(--accent-bg);
    color: var(--accent);
    border-color: var(--accent);
}

.exercise-head {
    align-items: flex-start;
}

/* Session notes */
.session-notes-wrap {
    padding: 12px 14px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
}

.session-notes-text {
    padding: 10px 12px;
    background: var(--bg-hover);
    border-radius: var(--radius-sm);
    font-size: 13px;
    line-height: 1.5;
    white-space: pre-wrap;
    word-wrap: break-word;
}

.session-notes-empty {
    color: var(--text-dim);
    font-style: italic;
    font-size: 13px;
    padding: 6px 0;
}

/* Notes textarea */
.notes-textarea {
    width: 100%;
    padding: 12px 14px;
    background: var(--bg-hover);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    font-family: var(--font);
    font-size: 14px;
    line-height: 1.5;
    resize: vertical;
    min-height: 100px;
    color: var(--text);
}

.notes-textarea:focus {
    outline: none;
    border-color: var(--accent);
    background: var(--bg-card);
}

/* Progression trend na PR row */
.pr-trend {
    display: inline-block;
    margin-left: 8px;
    padding: 1px 6px;
    font-family: var(--font-mono);
    font-weight: 700;
    font-size: 11px;
    border-radius: 3px;
    vertical-align: middle;
}

.pr-trend.trend-up {
    background: var(--success-bg);
    color: var(--success);
}

.pr-trend.trend-flat {
    background: var(--bg-hover);
    color: var(--text-muted);
}

.pr-trend.trend-down {
    background: var(--danger-bg);
    color: var(--danger);
}

/* Stats-nav zvětšit na 4 tlačítka */
.stats-nav {
    grid-template-columns: 1fr 1fr;
}

@media (min-width: 640px) {
    .stats-nav {
        grid-template-columns: 1fr 1fr 1fr 1fr;
    }
}

/* Volume graf */
.volume-summary {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 8px;
    margin-bottom: 20px;
}

@media (max-width: 640px) {
    .volume-summary { grid-template-columns: 1fr; }
}

.volume-bars {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 4px;
    height: 260px;
    padding: 0 4px;
    margin-top: 10px;
}

.volume-bar-col {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
    height: 100%;
    min-width: 0;
}

.volume-bar-fill {
    width: 100%;
    background: linear-gradient(to top, var(--accent) 0%, var(--accent-light) 100%);
    border-radius: 3px 3px 0 0;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    color: var(--on-accent);
    font-family: var(--font-mono);
    font-size: 9px;
    font-weight: 600;
    padding: 3px 0;
    min-height: 4px;
    transition: all 0.2s;
    cursor: help;
}

.volume-bar-fill:hover {
    filter: brightness(1.1);
}

.volume-bar-label {
    font-family: var(--font-mono);
    font-size: 9px;
    color: var(--text-dim);
    margin-top: 4px;
    text-align: center;
    letter-spacing: 0.5px;
}

/* Report page */
.report-page {
    max-width: 100%;
}

.report-content {
    background: var(--bg-card);
    padding: 30px;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-md);
}

.report-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    padding-bottom: 20px;
    margin-bottom: 24px;
    border-bottom: 2px solid var(--accent);
}

.report-summary {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 12px;
    margin-bottom: 24px;
    padding: 16px;
    background: var(--bg);
    border-radius: var(--radius-lg);
}

@media (max-width: 640px) {
    .report-summary { grid-template-columns: repeat(2, 1fr); }
}

.report-summary-cell {
    text-align: center;
}

.report-summary-value {
    font-family: var(--font-serif);
    font-weight: 900;
    font-size: 28px;
    line-height: 1;
    color: var(--accent);
}

.report-summary-label {
    font-family: var(--font-mono);
    font-size: 10px;
    letter-spacing: 1.5px;
    color: var(--text-muted);
    margin-top: 4px;
    text-transform: uppercase;
}

.report-section-title {
    font-family: var(--font-serif);
    font-weight: 700;
    font-size: 20px;
    margin: 28px 0 12px;
    padding-bottom: 6px;
    border-bottom: 1px solid var(--border);
    color: var(--text);
}

.report-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
    margin-bottom: 20px;
}

.report-table th {
    text-align: left;
    padding: 8px 10px;
    background: var(--bg);
    border-bottom: 2px solid var(--border);
    font-family: var(--font-mono);
    font-size: 10px;
    letter-spacing: 1px;
    color: var(--text-muted);
    text-transform: uppercase;
    font-weight: 600;
}

.report-table td {
    padding: 8px 10px;
    border-bottom: 1px solid var(--border);
}

.report-table tr:hover {
    background: var(--bg);
}

.report-note {
    background: var(--bg);
    padding: 12px 14px;
    border-left: 3px solid var(--accent);
    border-radius: 0 var(--radius) var(--radius) 0;
    margin-bottom: 10px;
}

.report-footer {
    margin-top: 32px;
    padding-top: 16px;
    border-top: 1px solid var(--border);
    text-align: center;
    font-family: var(--font-mono);
    font-size: 10px;
    color: var(--text-dim);
    letter-spacing: 2px;
    text-transform: uppercase;
}

/* Print styly */
@media print {
    body {
        background: var(--bg-card);
    }
    .app-header, .no-print, #modal-root, #toast-root {
        display: none !important;
    }
    .app-main {
        max-width: 100%;
        padding: 0;
    }
    .report-content {
        box-shadow: none;
        padding: 20px;
        border-radius: 0;
    }
    .report-table {
        page-break-inside: auto;
    }
    .report-table tr {
        page-break-inside: avoid;
    }
    .report-note {
        page-break-inside: avoid;
    }
}

/* ============================================================
   SPECTATOR MODE
   ============================================================ */

.spectator-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    background: var(--accent);
    color: var(--on-accent);
    border-radius: var(--radius-sm);
    font-family: var(--font-mono);
    font-size: 10px;
    letter-spacing: 1px;
    margin-left: 8px;
    text-transform: uppercase;
}

.spectator-badge .spectator-label {
    font-weight: 700;
}

.spectator-badge .spectator-viewing {
    font-weight: 400;
    opacity: 0.85;
}

/* Přizpůsobení pro mobil - kratší */
@media (max-width: 640px) {
    .spectator-badge {
        font-size: 9px;
        padding: 3px 8px;
        letter-spacing: 0.5px;
    }
}

/* Disabled input pro spectatora - jinak vypadá než hover */
.set-input:disabled, .set-check:disabled {
    cursor: default;
    opacity: 0.75;
}

/* ============================================================
   RECOVERY LEGEND
   ============================================================ */

.section-info-btn {
    background: transparent;
    border: none;
    padding: 3px;
    margin-left: 6px;
    cursor: pointer;
    color: var(--text-dim);
    vertical-align: middle;
    transition: color 0.15s;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.section-info-btn:hover {
    color: var(--accent);
}

.legend-intro {
    font-size: 13px;
    color: var(--text-muted);
    line-height: 1.5;
    margin-bottom: 20px;
    padding: 10px 12px;
    background: var(--bg-hover);
    border-radius: var(--radius-sm);
}

.legend-levels {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 24px;
}

.legend-level {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 10px 12px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
}

.legend-level .legend-dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    flex-shrink: 0;
    margin-top: 3px;
    box-shadow: 0 0 0 2px rgba(0,0,0,0.03);
}

.legend-level.lvl-2 { border-left: 3px solid var(--success); }
.legend-level.lvl-2 .legend-dot { background: var(--success); }

.legend-level.lvl-1 { border-left: 3px solid var(--pr-gold); }
.legend-level.lvl-1 .legend-dot { background: var(--pr-gold); }

.legend-level.lvl-0 { border-left: 3px solid var(--danger); }
.legend-level.lvl-0 .legend-dot { background: var(--danger); }

.legend-label {
    font-weight: 600;
    font-size: 14px;
    color: var(--text);
}

.legend-desc {
    font-size: 12px;
    color: var(--text-muted);
    margin-top: 2px;
}

.legend-section-title {
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 2px;
    color: var(--text-muted);
    text-transform: uppercase;
    margin: 20px 0 10px;
    padding-bottom: 6px;
    border-bottom: 1px solid var(--border);
}

.legend-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
    margin-bottom: 16px;
}

.legend-table th {
    text-align: left;
    padding: 6px 8px;
    background: var(--bg);
    font-family: var(--font-mono);
    font-size: 10px;
    letter-spacing: 1px;
    color: var(--text-muted);
    text-transform: uppercase;
    font-weight: 600;
}

.legend-table td {
    padding: 6px 8px;
    border-bottom: 1px solid var(--border);
}

.legend-header-row td {
    background: var(--accent-bg);
    color: var(--accent);
    font-weight: 600;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 1px;
    padding: 8px 10px !important;
    border: none !important;
}

.legend-note {
    font-size: 12px;
    color: var(--text-muted);
    font-style: italic;
    padding: 10px 12px;
    background: var(--bg-hover);
    border-radius: var(--radius-sm);
    line-height: 1.5;
    margin-bottom: 16px;
}

/* ============================================================
   RIR (Reps in Reserve)
   ============================================================ */

/* RIR tlačítko v set row */
.set-rir {
    background: var(--bg-hover);
    border: 1px dashed var(--border-strong);
    border-radius: var(--radius-sm);
    padding: 6px 8px;
    font-family: var(--font-mono);
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    color: var(--text-dim);
    letter-spacing: 0.5px;
    transition: all 0.15s;
    min-width: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 3px;
}

.set-rir:hover:not(:disabled) {
    background: var(--bg-card);
    border-color: var(--accent);
    color: var(--accent);
}

.set-rir:disabled {
    cursor: default;
    opacity: 0.6;
}

.set-rir.filled {
    border-style: solid;
    color: var(--text);
}

.set-rir.rir-hard.filled {
    background: rgba(192, 57, 43, 0.1);
    border-color: var(--danger);
    color: var(--danger);
}

.set-rir.rir-medium.filled {
    background: rgba(212, 167, 67, 0.12);
    border-color: var(--pr-gold);
    color: var(--accent);
}

.set-rir.rir-easy.filled {
    background: rgba(44, 122, 71, 0.1);
    border-color: var(--success);
    color: var(--success);
}

/* set-row grid update - přidat sloupec pro RIR */
.set-row {
    grid-template-columns: 32px 1fr 1fr 60px 44px;
    gap: 8px;
}

@media (max-width: 640px) {
    .set-row {
        grid-template-columns: 28px 1fr 1fr 52px 40px;
        gap: 6px;
    }
    .set-rir {
        font-size: 11px;
        padding: 5px 6px;
        min-width: 40px;
    }
}

/* RIR picker modal */
.rir-picker-desc {
    text-align: center;
    color: var(--text-muted);
    font-size: 13px;
    margin: 6px 0 20px;
    font-family: var(--font-mono);
    letter-spacing: 0.5px;
}

.rir-picker-grid {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 16px;
}

.rir-picker-option {
    display: grid;
    grid-template-columns: 50px 1fr;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    cursor: pointer;
    transition: all 0.15s;
    text-align: left;
}

.rir-picker-option:hover {
    background: var(--bg-hover);
    border-color: var(--accent);
    transform: translateX(2px);
}

.rir-picker-option.selected {
    background: var(--accent-bg);
    border-color: var(--accent);
}

.rir-picker-value {
    font-family: var(--font-serif);
    font-weight: 900;
    font-size: 28px;
    color: var(--accent);
    text-align: center;
    line-height: 1;
}

.rir-picker-label {
    font-size: 13px;
    color: var(--text);
    line-height: 1.3;
}

/* Suggestion note - rule badge */
.suggestion-rule {
    display: inline-block;
    font-family: var(--font-mono);
    font-size: 9px;
    letter-spacing: 1px;
    padding: 2px 6px;
    border-radius: 3px;
    margin-left: 8px;
    text-transform: uppercase;
    font-weight: 700;
}

.suggestion-rule.rule-rir_up,
.suggestion-rule.rule-rir_moderate_up,
.suggestion-rule.rule-legacy_up {
    background: var(--success-bg);
    color: var(--success);
}

.suggestion-rule.rule-deload {
    background: rgba(212, 167, 67, 0.15);
    color: var(--accent);
}

.suggestion-rule.rule-rir_hold,
.suggestion-rule.rule-legacy_hold {
    background: var(--bg-hover);
    color: var(--text-muted);
}

/* ============================================================
   FATIGUE METER + TEMPLATE SUGGESTION
   ============================================================ */

.fatigue-banner {
    display: grid;
    grid-template-columns: 120px 1fr;
    gap: 20px;
    align-items: center;
    padding: 20px 24px;
    background: linear-gradient(135deg, var(--bg-card) 0%, var(--bg) 100%);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    margin-bottom: 24px;
    box-shadow: var(--shadow-sm);
}

@media (max-width: 640px) {
    .fatigue-banner {
        grid-template-columns: 90px 1fr;
        gap: 14px;
        padding: 16px;
    }
}

/* Kruh s fatigue skóre */
.fatigue-circle {
    width: 110px;
    height: 110px;
    border-radius: 50%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: var(--on-accent);
    box-shadow: 0 6px 20px rgba(0,0,0,0.12);
    position: relative;
    cursor: help;
    flex-shrink: 0;
}

@media (max-width: 640px) {
    .fatigue-circle {
        width: 88px;
        height: 88px;
    }
}

.fatigue-circle.fatigue-green {
    background: linear-gradient(135deg, var(--success) 0%, #3d9159 100%);
}

.fatigue-circle.fatigue-yellow {
    background: linear-gradient(135deg, var(--pr-gold) 0%, #e6b954 100%);
}

.fatigue-circle.fatigue-red {
    background: linear-gradient(135deg, var(--danger) 0%, #e04836 100%);
}

.fatigue-score {
    font-family: var(--font-serif);
    font-weight: 900;
    font-size: 38px;
    line-height: 1;
}

@media (max-width: 640px) {
    .fatigue-score { font-size: 30px; }
}

.fatigue-label {
    font-family: var(--font-mono);
    font-size: 9px;
    letter-spacing: 2px;
    text-transform: uppercase;
    margin-top: 2px;
    opacity: 0.95;
}

/* Suggestion box */
.fatigue-suggestion {
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-width: 0;
}

.fatigue-suggestion-name {
    font-family: var(--font-serif);
    font-weight: 900;
    font-size: 22px;
    line-height: 1.2;
    margin: 4px 0 6px;
    color: var(--text);
    letter-spacing: -0.5px;
}

@media (max-width: 640px) {
    .fatigue-suggestion-name { font-size: 17px; }
}

.fatigue-suggestion-reason {
    font-size: 12px;
    color: var(--text-muted);
    line-height: 1.4;
}

/* ============================================================
   PROGRESSION SUMMARY (Exercise chart)
   ============================================================ */

.progression-summary {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 8px;
    margin-bottom: 16px;
}

@media (max-width: 640px) {
    .progression-summary {
        grid-template-columns: 1fr 1fr 1fr;
        gap: 6px;
    }
    .progression-summary .stat-value {
        font-size: 20px;
    }
    .progression-summary .stat-card {
        padding: 10px 8px;
    }
}

/* ============================================================
   ALTERNATIVNÍ SET ROW TYPES (bodyweight, hold, duration)
   ============================================================ */

/* Bodyweight_reps: 32px + 1fr + 44px + 40px */
.set-row-bw {
    grid-template-columns: 32px 1fr 60px 44px;
}

@media (max-width: 640px) {
    .set-row-bw {
        grid-template-columns: 28px 1fr 52px 40px;
    }
}

/* Hold_time / duration / stretch: 32px + 1fr + 40px */
.set-row-hold {
    grid-template-columns: 32px 1fr 44px;
}

@media (max-width: 640px) {
    .set-row-hold {
        grid-template-columns: 28px 1fr 40px;
    }
}

.set-input-wide {
    /* Pro bodyweight - širší reps input */
    padding: 12px 18px;
}

.set-input-wider {
    /* Pro hold/duration - ještě širší, jen jeden input */
    padding: 14px 20px;
    text-align: center;
}

/* ============================================================
   KARDIO BANNER
   ============================================================ */

.cardio-banner {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 14px 16px;
    margin-bottom: 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    box-shadow: var(--shadow-sm);
}

.cardio-banner.cardio-empty {
    border-style: dashed;
    background: var(--bg-hover);
}

.cardio-banner.cardio-filled {
    background: linear-gradient(135deg, var(--bg-card) 0%, rgba(139, 105, 20, 0.03) 100%);
    display: block;
    padding: 16px 18px;
}

.cardio-banner.cardio-goal-reached {
    background: linear-gradient(135deg, var(--bg-card) 0%, rgba(44, 122, 71, 0.08) 100%);
    border-color: rgba(44, 122, 71, 0.3);
    box-shadow: 0 0 0 3px rgba(44, 122, 71, 0.05), var(--shadow-md);
    animation: cardio-glow 2s ease-out;
}

@keyframes cardio-glow {
    0% { box-shadow: 0 0 0 0 rgba(44, 122, 71, 0.4); }
    100% { box-shadow: 0 0 0 3px rgba(44, 122, 71, 0.05), var(--shadow-md); }
}

.cardio-banner-content {
    flex: 1;
    min-width: 0;
}

.cardio-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
}

.cardio-empty-text {
    font-size: 13px;
    color: var(--text-muted);
    margin-top: 4px;
}

.cardio-edit-btn {
    background: transparent;
    border: 1px solid transparent;
    padding: 4px;
    border-radius: var(--radius-sm);
    cursor: pointer;
    color: var(--text-dim);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: all 0.15s;
}

.cardio-edit-btn:hover {
    background: var(--bg-hover);
    color: var(--accent);
}

.cardio-stats {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 12px;
    margin-bottom: 10px;
}

@media (max-width: 640px) {
    .cardio-stats {
        grid-template-columns: 1fr 1fr;
        gap: 8px;
    }
    .cardio-stats .cardio-stat:first-child {
        grid-column: 1 / -1;
    }
}

.cardio-stat {
    text-align: center;
}

.cardio-stat-value {
    font-family: var(--font-serif);
    font-weight: 700;
    font-size: 18px;
    line-height: 1.2;
    color: var(--text);
}

.cardio-stat-label {
    font-family: var(--font-mono);
    font-size: 9px;
    letter-spacing: 1.5px;
    color: var(--text-muted);
    text-transform: uppercase;
    margin-top: 2px;
}

.cardio-stat-success .cardio-stat-value {
    color: var(--success);
}

.cardio-stat-success .cardio-stat-label {
    color: var(--success);
    font-weight: 700;
}

/* Progress bar */
.cardio-progress-bar {
    width: 100%;
    height: 8px;
    background: var(--bg-hover);
    border-radius: 4px;
    overflow: hidden;
}

.cardio-progress-fill {
    height: 100%;
    background: linear-gradient(to right, var(--pr-gold) 0%, var(--accent-light) 100%);
    transition: width 0.5s ease-out;
    border-radius: 4px;
}

.cardio-progress-fill.cardio-progress-reached {
    background: linear-gradient(to right, var(--success) 0%, #3d9159 100%);
    box-shadow: 0 0 10px rgba(44, 122, 71, 0.5);
}

/* Kardio type grid v modálu */
.cardio-type-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    margin-bottom: 20px;
}

.cardio-type-btn {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 14px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    cursor: pointer;
    transition: all 0.15s;
    text-align: left;
}

.cardio-type-btn:hover {
    background: var(--bg-hover);
    border-color: var(--accent);
}

.cardio-type-btn.selected {
    background: var(--accent-bg);
    border-color: var(--accent);
    color: var(--accent);
    font-weight: 600;
}

.cardio-type-icon {
    font-size: 24px;
    line-height: 1;
}

.cardio-type-label {
    font-size: 13px;
    font-weight: 500;
}

.cardio-input-row {
    display: grid;
    grid-template-columns: 100px 1fr;
    align-items: center;
    gap: 12px;
    margin-bottom: 10px;
}

.cardio-input-label {
    font-family: var(--font-mono);
    font-size: 11px;
    color: var(--text-muted);
    letter-spacing: 1px;
    text-transform: uppercase;
}

.cardio-input {
    padding: 10px 14px;
    background: var(--bg-hover);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    font-family: var(--font-mono);
    font-size: 14px;
    cursor: pointer;
    text-align: center;
    transition: all 0.15s;
}

.cardio-input:hover {
    background: var(--bg-card);
    border-color: var(--accent);
}

.cardio-input-success {
    background: rgba(44, 122, 71, 0.1);
    border-color: var(--success);
    color: var(--success);
    font-weight: 700;
}

.cardio-preview {
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px solid var(--border);
}

/* ============================================================
   KARDIO-ONLY ŠABLONA
   ============================================================ */

.template-card.template-cardio-only {
    border-style: dashed;
    border-color: var(--border-strong);
}

.template-card.template-cardio-only .template-meta {
    color: var(--accent);
}

.template-card.template-cardio-only .template-meta span:first-child {
    font-weight: 600;
    letter-spacing: 1px;
    text-transform: uppercase;
}

/* Kardio info v řádku historie */
.session-meta-cardio {
    color: var(--accent);
    font-weight: 600;
}

/* Kardio nad cílem v reportu */
.report-cardio-goal {
    color: var(--success);
    font-weight: 700;
}

/* ============================================================
   KATALOG CVIKŮ
   ============================================================ */

.catalog-filter-label,
.catalog-field-label {
    font-family: var(--font-mono);
    font-size: 10px;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--text-muted);
    margin: 14px 0 6px;
}

.catalog-field-label:first-of-type { margin-top: 8px; }

.catalog-input {
    width: 100%;
    padding: 12px 14px;
    background: var(--bg-hover);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    font-family: var(--font);
    font-size: 15px;
    color: var(--text);
}

.catalog-input:focus {
    outline: none;
    border-color: var(--accent);
    background: var(--bg-card);
}

.catalog-row {
    display: grid;
    grid-template-columns: 1fr 32px 32px;
    gap: 8px;
    align-items: center;
    padding: 10px 14px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    margin-bottom: 4px;
    transition: all 0.15s;
}

.catalog-row:hover {
    background: var(--bg-hover);
    box-shadow: var(--shadow-sm);
}

.catalog-row-main { min-width: 0; }

.catalog-row-name {
    font-weight: 500;
    font-size: 14px;
    margin-bottom: 4px;
}

.catalog-row-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
}

.catalog-badge {
    font-family: var(--font-mono);
    font-size: 9px;
    letter-spacing: 0.5px;
    padding: 2px 6px;
    border-radius: 3px;
    background: var(--bg-hover);
    color: var(--text-muted);
    white-space: nowrap;
}

.catalog-badge-equip {
    background: var(--accent-bg);
    color: var(--accent);
    font-weight: 600;
    text-transform: uppercase;
}

.catalog-badge-type {
    background: rgba(212, 167, 67, 0.15);
    color: var(--accent);
    font-weight: 600;
}

.catalog-badge-sec { font-style: italic; }

.catalog-badge-usage {
    background: var(--success-bg);
    color: var(--success);
}

.catalog-badge-unused {
    background: transparent;
    color: var(--text-dim);
    border: 1px dashed var(--border-strong);
}

@media (max-width: 640px) {
    .catalog-row {
        grid-template-columns: 1fr 28px 28px;
        padding: 10px;
    }
    .catalog-badge { font-size: 8px; }
}

/* ============================================================
   REŽIM ÚPRAV DOKONČENÉHO TRÉNINKU
   ============================================================ */

.edit-mode-banner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 16px;
    margin-bottom: 16px;
    background: rgba(212, 167, 67, 0.12);
    border: 1px solid var(--pr-gold);
    border-radius: var(--radius-lg);
}

.edit-mode-title {
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 2px;
    text-transform: uppercase;
    font-weight: 700;
    color: var(--accent);
}

.edit-mode-desc {
    font-size: 12px;
    color: var(--text-muted);
    margin-top: 3px;
    line-height: 1.4;
}

@media (max-width: 640px) {
    .edit-mode-banner {
        flex-direction: column;
        align-items: stretch;
        gap: 10px;
    }
}

/* Popisek nad řádky filtrů v pickeru cviků */
.picker-filter-label {
    font-family: var(--font-mono);
    font-size: 9px;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--text-dim);
    margin: 8px 0 4px;
}

.equip-filter-row {
    margin-bottom: 8px;
}

/* ============================================================
   POPIS CVIKU (kurzivou pod názvem)
   ============================================================ */

.exercise-desc {
    font-style: italic;
    font-size: 12px;
    line-height: 1.45;
    color: var(--text-muted);
    margin-top: 4px;
    margin-bottom: 4px;
}

/* V pickeru drž popis na dvou řádcích, ať se seznam neroztáhne */
.exercise-picker-item .exercise-desc {
    font-size: 11px;
    margin-top: 3px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Karta cviku v tréninku — jemnější, ať nepřebíjí čísla */
.exercise-card .exercise-desc {
    font-size: 11.5px;
    color: var(--text-dim);
    margin-bottom: 2px;
}

@media (max-width: 640px) {
    .exercise-desc { font-size: 11px; }
    .exercise-picker-item .exercise-desc { -webkit-line-clamp: 3; }
}

/* Popis zvýšil položky — zarovnat obsah nahoru místo na střed */
.exercise-picker-item {
    align-items: flex-start;
    gap: 12px;
}

.exercise-picker-item > div:first-child { flex: 1; min-width: 0; }

.exercise-head { align-items: flex-start; }

/* ============================================================
   ADMIN — SPRÁVA UŽIVATELŮ + IMPERSONACE
   ============================================================ */

.impersonation-bar {
    position: sticky;
    top: 0;
    z-index: 300;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 8px 16px;
    background: #2b2419;
    color: #f5edd8;
    font-size: 13px;
}

.impersonation-bar strong { color: #e6c36a; }

.impersonation-exit {
    margin-left: 10px;
    padding: 4px 12px;
    background: transparent;
    border: 1px solid #e6c36a;
    color: #e6c36a;
    border-radius: var(--radius-sm);
    font-size: 12px;
    cursor: pointer;
    transition: all 0.15s;
}

.impersonation-exit:hover { background: #e6c36a; color: #2b2419; }

.admin-user-card {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 12px;
    padding: 14px 16px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    margin-bottom: 8px;
}

.admin-user-card.admin-user-admin {
    border-color: var(--accent);
    background: linear-gradient(135deg, var(--bg-card) 0%, var(--accent-bg) 100%);
}

.admin-user-main { min-width: 0; flex: 1; }

.admin-user-head {
    display: flex;
    align-items: baseline;
    gap: 8px;
    flex-wrap: wrap;
}

.admin-user-name {
    font-family: var(--font-serif);
    font-weight: 700;
    font-size: 17px;
}

.admin-user-login {
    font-family: var(--font-mono);
    font-size: 11px;
    color: var(--text-dim);
}

.admin-badge {
    font-family: var(--font-mono);
    font-size: 9px;
    letter-spacing: 1px;
    padding: 2px 6px;
    border-radius: 3px;
    background: var(--accent-bg);
    color: var(--accent);
    font-weight: 700;
}

.admin-badge-spec { background: var(--bg-hover); color: var(--text-muted); }

.admin-user-contact {
    font-size: 12px;
    color: var(--text-muted);
    margin-top: 4px;
}

.admin-user-note {
    font-size: 12px;
    font-style: italic;
    color: var(--text-dim);
    margin-top: 2px;
}

.admin-user-stats {
    display: flex;
    gap: 12px;
    margin-top: 6px;
    font-family: var(--font-mono);
    font-size: 10px;
    letter-spacing: 0.5px;
    color: var(--text-muted);
}

.admin-user-actions {
    display: flex;
    flex-direction: column;
    gap: 6px;
    flex-shrink: 0;
}

@media (max-width: 640px) {
    .admin-user-card { flex-direction: column; }
    .admin-user-actions { flex-direction: row; flex-wrap: wrap; }
}

/* ============================================================
   KATALOG ŠABLON — VÝBĚR PROGRAMŮ
   ============================================================ */

.tcat-section { margin: 22px 0 10px; }

.tcat-section-title {
    font-family: var(--font-serif);
    font-weight: 800;
    font-size: 22px;
}

.tcat-section-sub {
    font-size: 12px;
    color: var(--text-muted);
    font-style: italic;
    margin-top: 2px;
}

.tcat-card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    margin-bottom: 8px;
    overflow: hidden;
    transition: all 0.15s;
}

.tcat-card.tcat-picked {
    border-color: var(--accent);
    background: linear-gradient(135deg, var(--bg-card) 0%, var(--accent-bg) 100%);
}

.tcat-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    cursor: pointer;
}

.tcat-info { min-width: 0; flex: 1; }

.tcat-name {
    font-weight: 600;
    font-size: 15px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.tcat-cardio-badge {
    font-family: var(--font-mono);
    font-size: 8px;
    letter-spacing: 1px;
    padding: 2px 6px;
    border-radius: 3px;
    background: var(--success-bg);
    color: var(--success);
    font-weight: 700;
}

.tcat-desc {
    font-size: 12px;
    font-style: italic;
    color: var(--text-muted);
    margin-top: 2px;
}

.tcat-meta {
    font-family: var(--font-mono);
    font-size: 10px;
    color: var(--text-dim);
    margin-top: 4px;
    letter-spacing: 0.5px;
}

.tcat-head .btn { flex-shrink: 0; }

.tcat-btn-picked {
    background: var(--accent);
    color: var(--on-accent);
    border-color: var(--accent);
}

.tcat-exercises {
    border-top: 1px dashed var(--border);
    padding: 8px 14px 12px;
}

.tcat-ex-row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    padding: 4px 0;
    font-size: 13px;
}

.tcat-ex-name { color: var(--text); }

.tcat-ex-scheme {
    font-family: var(--font-mono);
    font-size: 11px;
    color: var(--text-muted);
    flex-shrink: 0;
    margin-left: 12px;
}

.tcat-footer {
    position: sticky;
    bottom: 12px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    margin-top: 20px;
    padding: 12px 16px;
    background: var(--bg-card);
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg, 0 8px 24px rgba(0,0,0,0.12));
}

.tcat-count {
    font-family: var(--font-mono);
    font-size: 12px;
    letter-spacing: 1px;
    color: var(--text-muted);
}

/* ============================================================
   PŘEPÍNAČ JAZYKA
   ============================================================ */

.lang-toggle {
    font-family: var(--font-mono);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1px;
    padding: 4px 9px;
    margin-right: 4px;
    background: transparent;
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-sm);
    color: var(--text-muted);
    cursor: pointer;
    transition: all 0.15s;
}

.lang-toggle:hover {
    border-color: var(--accent);
    color: var(--accent);
    background: var(--accent-bg);
}

/* ============================================================
   CHYTRÝ NÁVRH K TÝDENNÍMU POKRYTÍ
   ============================================================ */

.week-hint {
    font-size: 12.5px;
    line-height: 1.5;
    padding: 9px 13px;
    margin-bottom: 10px;
    border-radius: var(--radius);
    border-left: 3px solid;
}

.week-hint.hint-neutral {
    background: var(--bg-hover);
    border-left-color: var(--border-strong);
    color: var(--text-muted);
}

.week-hint.hint-warn {
    background: rgba(212, 167, 67, 0.10);
    border-left-color: var(--pr-gold);
    color: #7a5c12;
}

.week-hint.hint-good {
    background: var(--success-bg);
    border-left-color: var(--success);
    color: var(--success);
}

/* ============================================================
   GENERÁTOR TRÉNINKU — "Dnes chci zničit…"
   ============================================================ */

.btn-destroy {
    background: linear-gradient(135deg, #2b2419 0%, #3d3222 100%);
    color: #e6c36a;
    border: 1px solid #4a3d28;
    font-family: var(--font-mono);
    font-size: 12px;
    letter-spacing: 2px;
    text-transform: uppercase;
    font-weight: 700;
}

.btn-destroy:hover {
    background: linear-gradient(135deg, #3d3222 0%, #4a3d28 100%);
    border-color: #e6c36a;
}

.destroy-list { max-height: 58vh; overflow-y: auto; }

.destroy-item { margin-bottom: 4px; }

.destroy-row { display: flex; gap: 4px; }

.destroy-main {
    flex: 1;
    text-align: left;
    padding: 11px 14px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    font-size: 15px;
    font-weight: 500;
    color: var(--text);
    cursor: pointer;
    transition: all 0.15s;
}

.destroy-main:hover {
    border-color: var(--accent);
    background: var(--accent-bg);
    color: var(--accent);
}

.destroy-expand {
    width: 40px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    color: var(--text-dim);
    cursor: pointer;
    font-size: 11px;
}

.destroy-expand:hover, .destroy-expand.open {
    border-color: var(--accent);
    color: var(--accent);
}

.destroy-subs {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    padding: 6px 0 6px 16px;
}

.destroy-sub {
    padding: 6px 12px;
    background: var(--bg-hover);
    border: 1px solid var(--border);
    border-radius: 20px;
    font-size: 13px;
    color: var(--text-muted);
    cursor: pointer;
    transition: all 0.15s;
}

.destroy-sub:hover {
    border-color: var(--accent);
    background: var(--accent-bg);
    color: var(--accent);
}

.destroy-preview {
    margin: 10px 0;
    max-height: 50vh;
    overflow-y: auto;
}

.destroy-ex {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    padding: 9px 12px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    margin-bottom: 4px;
}

.destroy-ex-name { font-size: 14px; font-weight: 500; }

.destroy-ex-meta {
    font-family: var(--font-mono);
    font-size: 10px;
    color: var(--text-dim);
    margin-top: 2px;
}

.destroy-ex-scheme {
    font-family: var(--font-mono);
    font-size: 13px;
    font-weight: 600;
    color: var(--accent);
    flex-shrink: 0;
}

.destroy-keep {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: var(--text-muted);
    cursor: pointer;
    padding: 6px 0;
}

.catalog-badge-detail {
    background: rgba(139, 105, 20, 0.12);
    color: var(--accent);
    font-style: normal;
}

/* ============================================================
   REPORT — progres a srovnání
   ============================================================ */

.report-delta {
    font-family: var(--font-mono);
    font-size: 10px;
    letter-spacing: 0.5px;
    margin-top: 3px;
}

.report-up   { color: #2d7a3e; }
.report-down { color: #a33; }

.report-num {
    text-align: right;
    font-family: var(--font-mono);
    white-space: nowrap;
}

.report-note {
    font-size: 12px;
    color: var(--text-muted);
    font-style: italic;
    margin: 6px 0 14px;
}

@media print {
    .report-up   { color: #1a5c2a !important; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
    .report-down { color: #8a2020 !important; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}

/* ============================================================
   OZNAČENÍ POHLAVÍ
   ============================================================ */

.gender-mark {
    font-size: 0.9em;
    margin-left: 4px;
    font-weight: 600;
    opacity: 0.75;
}

.gender-m { color: #3b6ea5; }
.gender-f { color: #a5417a; }

.nav-tab .gender-mark { margin-left: 3px; font-size: 0.85em; }

/* ============================================================
   OSOBNÍ CÍLE
   ============================================================ */

.goal-row { margin-bottom: 12px; }
.goal-row:last-child { margin-bottom: 0; }

.goal-head {
    display: flex;
    align-items: baseline;
    gap: 8px;
    margin-bottom: 5px;
}

.goal-label { font-size: 14px; font-weight: 500; flex: 1; min-width: 0; }

.goal-value {
    font-family: var(--font-mono);
    font-size: 12px;
    color: var(--text-muted);
    white-space: nowrap;
}

.goal-del {
    background: none;
    border: none;
    color: var(--text-dim);
    font-size: 18px;
    line-height: 1;
    cursor: pointer;
    padding: 0 2px;
}
.goal-del:hover { color: var(--danger, #a33); }

.goal-bar {
    height: 6px;
    background: var(--bg-hover);
    border-radius: 3px;
    overflow: hidden;
}

.goal-bar-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--accent) 0%, var(--pr-gold) 100%);
    border-radius: 3px;
    transition: width 0.4s ease;
}

.goal-meta {
    font-family: var(--font-mono);
    font-size: 10px;
    color: var(--text-dim);
    margin-top: 3px;
}

.goal-done { opacity: 0.55; }
.goal-done .goal-label { text-decoration: line-through; }

/* ============================================================
   PRŮVODCE
   ============================================================ */

.guide-modal { text-align: center; position: relative; }

.guide-icon { font-size: 44px; line-height: 1; margin: 4px 0 12px; }

.guide-title {
    font-family: var(--font-serif);
    font-weight: 800;
    font-size: 22px;
    margin-bottom: 10px;
}

.guide-text {
    font-size: 14px;
    line-height: 1.6;
    color: var(--text-muted);
    margin-bottom: 18px;
}

.guide-dots {
    display: flex;
    justify-content: center;
    gap: 6px;
    margin-bottom: 6px;
}

.guide-dot {
    width: 6px; height: 6px;
    border-radius: 50%;
    background: var(--border-strong);
    transition: all 0.2s;
}
.guide-dot.active { background: var(--accent); width: 18px; border-radius: 3px; }

.guide-skip {
    position: absolute;
    top: 10px; right: 14px;
    background: none;
    border: none;
    font-family: var(--font-mono);
    font-size: 10px;
    letter-spacing: 1px;
    color: var(--text-dim);
    cursor: pointer;
}
.guide-skip:hover { color: var(--text); }

.goal-prep {
    font-style: italic;
    color: var(--accent);
    opacity: 0.85;
}

/* Karta, která zve k akci — když chybí údaj */
.stat-card-action {
    cursor: pointer;
    border-style: dashed;
    transition: all 0.15s;
}
.stat-card-action:hover {
    border-color: var(--accent);
    background: var(--accent-bg);
}

.number-picker .sauna-pick.active {
    background: var(--accent);
    color: var(--on-accent);
    border-color: var(--accent);
}


/* ============================================================
   DARK THEME — noční režim
   Paleta vychází z intro overlaye (tmavá káva + zlatá).
   Přepíná se atributem data-theme na <html>; default řídí
   prefers-color-scheme + localStorage (viz index.php + app.js).
   ============================================================ */

[data-theme="dark"] {
    color-scheme: dark;

    --bg: #191510;
    --bg-card: #221d15;
    --bg-hover: #2c2519;
    --border: #3a3222;
    --border-strong: #4f4430;
    --text: #f0e9d8;
    --text-muted: #a89877;
    --text-dim: #79694e;
    --accent: #e6c36a;
    --accent-light: #c9a952;
    --accent-bg: #38300f;
    --success: #5fbf7f;
    --success-bg: #1c3123;
    --danger: #e06a5a;
    --danger-bg: #3a1f1a;
    --pr-gold: #ecc85f;

    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.35);
    --shadow-md: 0 2px 8px rgba(0, 0, 0, 0.45);
    --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.6);

    --heat-rgb: 230, 195, 106;
    --chart-empty: #332c1f;
    --chart-label: #a08a5e;
    --skeleton-base: #2a2417;
    --skeleton-shine: rgba(255, 255, 255, 0.06);
    --overlay: rgba(0, 0, 0, 0.65);
    --on-accent: #1c1812;
    --btn-primary-hover: #fffbe8;
}

/* Primární tlačítko v dark: text = tmavé pozadí by splynul, tady
   background: var(--text) zůstává (světlá) a color: var(--bg-card) tmavá — funguje samo. */

/* Doladění míst, kde tokeny nestačí */
[data-theme="dark"] .week-hint.hint-warn { color: #e8ca7a; }
[data-theme="dark"] .report-up   { color: #6fcf8f; }
[data-theme="dark"] .report-down { color: #e07a6a; }
[data-theme="dark"] .gender-m { color: #7aa8d8; }
[data-theme="dark"] .gender-f { color: #d883b0; }
[data-theme="dark"] .set-input:hover,
[data-theme="dark"] .set-input.filled { background: var(--bg-hover); }


/* ============ THEME TOGGLE (vedle CZ/EN) ============ */

.theme-toggle {
    font-size: 14px;
    line-height: 1;
    padding: 4px 8px;
    margin-right: 4px;
    background: transparent;
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-sm);
    color: var(--text-muted);
    cursor: pointer;
    transition: all 0.15s;
}

.theme-toggle:hover {
    border-color: var(--accent);
    color: var(--accent);
    background: var(--accent-bg);
}

/* Krátká animace při přepnutí, ať to neblikne natvrdo */
html.theme-anim, html.theme-anim body,
html.theme-anim .app-header, html.theme-anim .app-main *,
html.theme-anim .modal, html.theme-anim .login-wrap * {
    transition: background-color 0.25s ease, border-color 0.25s ease, color 0.25s ease !important;
}

/* ============ SKELETON LOADERS ============ */

.skeleton-wrap { padding-top: 4px; }

.skel {
    position: relative;
    overflow: hidden;
    background: var(--skeleton-base);
    border-radius: var(--radius);
}

.skel::after {
    content: '';
    position: absolute;
    inset: 0;
    transform: translateX(-100%);
    background: linear-gradient(90deg, transparent, var(--skeleton-shine), transparent);
    animation: skelShine 1.3s infinite;
}

@keyframes skelShine {
    100% { transform: translateX(100%); }
}

.skel-title  { height: 34px; width: 45%; margin-bottom: 10px; }
.skel-sub    { height: 14px; width: 65%; margin-bottom: 22px; }
.skel-banner { height: 110px; margin-bottom: 20px; border-radius: var(--radius-lg); }
.skel-card   { height: 68px; margin-bottom: 10px; }
.skel-chip   { height: 30px; width: 120px; display: inline-block; margin-right: 8px; border-radius: 999px; }

@media (prefers-reduced-motion: reduce) {
    .skel::after { animation: none; }
}

/* ============ ACHIEVEMENTY ============ */

.ach-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 10px;
    margin-top: 16px;
}

.ach-card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 16px 12px;
    text-align: center;
    box-shadow: var(--shadow-sm);
    transition: transform 0.15s;
}

.ach-card.unlocked {
    position: relative;
    border-color: var(--pr-gold);
    box-shadow: 0 0 0 1.5px var(--pr-gold), 0 4px 14px rgba(212, 167, 67, 0.25);
    background: radial-gradient(120% 85% at 50% 0%, var(--accent-bg) 0%, var(--bg-card) 75%);
}

.ach-card.unlocked::after {
    content: '✓';
    position: absolute;
    top: 6px;
    right: 6px;
    width: 18px;
    height: 18px;
    line-height: 18px;
    font-size: 11px;
    font-weight: 700;
    text-align: center;
    border-radius: 50%;
    background: var(--pr-gold);
    color: var(--on-accent);
}

[data-theme="dark"] .ach-card.unlocked {
    box-shadow: 0 0 0 1.5px var(--pr-gold), 0 4px 18px rgba(230, 195, 106, 0.28);
}

.ach-card.locked { opacity: 0.35; filter: grayscale(1); }

.ach-emoji { font-size: 34px; line-height: 1; margin-bottom: 8px; }

.ach-name {
    font-weight: 700;
    font-size: 13px;
    margin-bottom: 4px;
}

.ach-desc {
    font-size: 11px;
    color: var(--text-muted);
    line-height: 1.35;
}

.ach-date {
    font-family: var(--font-mono);
    font-size: 10px;
    color: var(--accent);
    margin-top: 6px;
    letter-spacing: 1px;
}

.ach-progress {
    font-family: var(--font-mono);
    font-size: 10px;
    color: var(--text-dim);
    margin-top: 6px;
}

/* Celebrace při odemčení */
.ach-unlock-overlay {
    position: fixed;
    inset: 0;
    z-index: 900;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--overlay);
    animation: fadeIn 0.25s ease;
}

.ach-unlock-card {
    background: var(--bg-card);
    border: 2px solid var(--pr-gold);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
    padding: 28px 32px;
    text-align: center;
    max-width: 320px;
    animation: achPop 0.45s cubic-bezier(0.2, 1.6, 0.4, 1);
}

.ach-unlock-card .ach-emoji { font-size: 52px; margin-bottom: 12px; }

.ach-unlock-kicker {
    font-family: var(--font-mono);
    font-size: 10px;
    letter-spacing: 3px;
    text-transform: uppercase;
    color: var(--accent);
    margin-bottom: 6px;
}

.ach-unlock-name {
    font-family: var(--font-serif);
    font-size: 24px;
    font-weight: 900;
    margin-bottom: 6px;
}

@keyframes fadeIn { from { opacity: 0; } }
@keyframes achPop {
    0% { transform: scale(0.6); opacity: 0; }
    100% { transform: scale(1); opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
    .ach-unlock-overlay, .ach-unlock-card { animation: none; }
}

/* ============ KONFETY ============ */

.confetti-canvas {
    position: fixed;
    inset: 0;
    z-index: 950;
    pointer-events: none;
}

/* ============ DRAG & DROP ============ */

.drag-handle {
    touch-action: none;
    cursor: grab;
    color: var(--text-dim);
    font-size: 18px;
    padding: 8px 10px 8px 2px;
    user-select: none;
    -webkit-user-select: none;
    display: flex;
    align-items: center;
}

.drag-handle:active { cursor: grabbing; color: var(--accent); }

.drag-item { position: relative; }

.drag-item.dragging {
    opacity: 0.95;
    z-index: 10;
    box-shadow: var(--shadow-lg);
    border-color: var(--accent);
    transition: none !important;
}

.drag-item.drag-settle { transition: transform 0.18s ease; }

/* ============ OFFLINE REŽIM ============ */

.offline-badge {
    display: none;
    font-family: var(--font-mono);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 1px;
    padding: 4px 8px;
    margin-right: 6px;
    border-radius: var(--radius-sm);
    background: var(--danger-bg);
    color: var(--danger);
    border: 1px solid var(--danger);
    white-space: nowrap;
}

.offline-badge.visible { display: inline-block; }
.offline-badge.syncing {
    background: var(--accent-bg);
    color: var(--accent);
    border-color: var(--accent);
}

/* ============ MOBIL: zákaz zoomu na double-tap ============ */

button, a, .set-input, .number-picker button {
    touch-action: manipulation;
}


/* ============ KARDIO — intenzita ============ */

.cardio-intensity-row {
    display: flex;
    gap: 8px;
    margin: 10px 0 14px;
}

.cardio-intensity-btn {
    flex: 1;
    padding: 8px 6px;
    font-size: 12px;
    font-weight: 600;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 999px;
    color: var(--text-muted);
    cursor: pointer;
    transition: all 0.15s;
}

.cardio-intensity-btn.selected {
    border-color: var(--accent);
    background: var(--accent-bg);
    color: var(--accent);
}