/* ============================================================
   FITKOUČING — Filament theme
   Light only · Roboto family · Soft borders · Subtle shadows
   Single source of truth: tokens + Filament overrides + .fk-* components
   ============================================================ */

/* ---------- Web fonts ---------- */
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700;900&family=Roboto+Condensed:wght@400;500;700;900&family=Roboto+Mono:wght@400;500;700&display=swap');


/* ============================================================
   1. Design tokens
   ============================================================ */
:root {
    /* Monochrome */
    --fk-black:        #0A0A0A;
    --fk-ink:          #141414;
    --fk-iron:         #3D3D3D;
    --fk-steel:        #6B6B6B;
    --fk-ash:          #9A9A9A;
    --fk-smoke:        #C7C7C7;
    --fk-bone:         #E7E5E1;
    --fk-paper:        #F3F1EC;
    --fk-white:        #FFFFFF;

    /* Ruby red — single shout */
    --fk-blood:        #e31243;
    --fk-ember:        #b30d34;

    /* Surfaces */
    --fk-bg:           var(--fk-paper);
    --fk-surface:      var(--fk-white);
    --fk-fg:           var(--fk-black);
    --fk-fg-muted:     var(--fk-iron);

    /* Borders */
    --fk-border-soft:  rgba(10, 10, 10, 0.12);
    --fk-border-medium:rgba(10, 10, 10, 0.22);
    --fk-border-strong:var(--fk-black);

    /* Radii */
    --fk-radius-sm:    4px;
    --fk-radius-md:    6px;
    --fk-radius-lg:    10px;
    --fk-radius-pill:  9999px;

    /* Shadows */
    --fk-shadow-card:  0 1px 3px rgba(0,0,0,0.05), 0 1px 2px rgba(0,0,0,0.04);
    --fk-shadow-btn:   0 1px 2px rgba(0,0,0,0.06);
    --fk-shadow-md:    0 2px 8px rgba(0,0,0,0.06);

    /* Fonts */
    --fk-font-sans:      'Roboto', system-ui, -apple-system, 'Helvetica Neue', sans-serif;
    --fk-font-display:   'Roboto Condensed', 'Roboto', system-ui, sans-serif;
    --fk-font-condensed: 'Roboto Condensed', 'Roboto', system-ui, sans-serif;
    --fk-font-mono:      'Roboto Mono', ui-monospace, 'SF Mono', monospace;

    /* Motion */
    --fk-ease:         cubic-bezier(0.42, 0, 0.58, 1); /* ease-in-out */
    --fk-dur-fast:     140ms;
    --fk-dur-med:      220ms;
}


/* ============================================================
   2. Base
   ============================================================ */
html, body,
.fi-body,
.fi-simple-layout,
.fi-simple-page {
    font-family: var(--fk-font-sans);
    font-weight: 400;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    letter-spacing: 0;
}


/* ============================================================
   3. Filament typography overrides
   ============================================================ */
.fi-header-heading,
.fi-section-header-heading,
.fi-section-heading,
.fi-ta-header-heading,
.fi-modal-heading,
.fi-simple-header-heading,
h1, h2, h3 {
    font-family: var(--fk-font-display) !important;
    font-weight: 700 !important;
    letter-spacing: -0.01em !important;
    line-height: 1.15 !important;
    color: var(--fk-fg) !important;
}
h1 { font-weight: 900 !important; }

h4, h5, h6,
.fi-fo-section-header-heading {
    font-family: var(--fk-font-condensed) !important;
    font-weight: 700 !important;
    letter-spacing: 0 !important;
}

.fi-topbar .fi-logo,
.fi-simple-header-heading {
    font-family: var(--fk-font-display) !important;
    font-weight: 900 !important;
    text-transform: uppercase !important;
    letter-spacing: -0.01em !important;
}

.fi-sidebar-group-label {
    font-family: var(--fk-font-sans) !important;
    font-size: 0.6875rem !important;
    font-weight: 500 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.1em !important;
    color: var(--fk-fg-muted) !important;
}
.fi-sidebar-item-label {
    font-family: var(--fk-font-sans) !important;
    font-weight: 500 !important;
    font-size: 0.9375rem !important;
    letter-spacing: 0 !important;
    text-transform: none !important;
}

.fi-ta-header-cell-label,
.fi-ta-text-col-label {
    font-family: var(--fk-font-sans) !important;
    font-size: 0.7rem !important;
    font-weight: 500 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.08em !important;
    color: var(--fk-fg-muted) !important;
}

.fi-wi-stats-overview-stat-value {
    font-family: var(--fk-font-display) !important;
    font-size: 1.85rem !important;
    font-weight: 700 !important;
    letter-spacing: -0.02em !important;
    line-height: 1.05 !important;
    font-feature-settings: 'tnum' !important;
}
.fi-wi-stats-overview-stat-label {
    font-family: var(--fk-font-sans) !important;
    font-size: 0.7rem !important;
    font-weight: 500 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.08em !important;
    color: var(--fk-fg-muted) !important;
}
.fi-wi-stats-overview-stat-description {
    font-family: var(--fk-font-sans) !important;
    font-size: 0.75rem !important;
    font-weight: 400 !important;
    letter-spacing: 0 !important;
}


/* ============================================================
   4. Filament surfaces
   ============================================================ */
body,
.fi-body,
.fi-main,
.fi-layout,
.fi-simple-layout,
.fi-simple-main {
    background-color: var(--fk-bg) !important;
    color: var(--fk-fg) !important;
}

.fi-topbar {
    background-color: var(--fk-bg) !important;
    border-bottom: 1px solid var(--fk-border-soft) !important;
}
.fi-sidebar {
    background-color: var(--fk-bg) !important;
    border-right: 1px solid var(--fk-border-soft) !important;
}

.fi-sidebar-item a {
    color: var(--fk-fg);
    border-radius: var(--fk-radius-md) !important;
    transition: background-color var(--fk-dur-fast) var(--fk-ease),
                color var(--fk-dur-fast) var(--fk-ease) !important;
}
.fi-sidebar-item a:hover { background-color: rgba(0,0,0,0.04) !important; }
.fi-sidebar-item-active a,
.fi-sidebar-item-active .fi-sidebar-item-label {
    color: var(--fk-white) !important;
    background-color: var(--fk-blood) !important;
}

/* Cards & form sections */
.fi-card,
.fi-wi-stats-overview-stat,
.fi-dropdown-panel,
.fi-modal-window,
.fi-ta-ctn,
.fi-tabs,
.fi-fo-section,
form .fi-section,
.fi-fo-component-ctn .fi-section {
    background-color: var(--fk-surface) !important;
    border: 1px solid var(--fk-border-soft) !important;
    border-radius: var(--fk-radius-md) !important;
    box-shadow: var(--fk-shadow-card) !important;
}

.fi-section { padding: 1rem 1.25rem !important; }
.fi-fo-section,
form .fi-section,
.fi-fo-component-ctn .fi-section { padding: 1.25rem 1.5rem !important; }
.fi-section-header { padding: 0 0 0.75rem !important; margin-bottom: 0.75rem !important; }

.fi-page > * + *,
.fi-form > * + *,
.fi-section > * + .fi-section,
.fi-fo-section + .fi-fo-section,
.fi-page-content > * + * { margin-top: 0.75rem !important; }


/* ============================================================
   5. Dashboard wrappers — transparent
   ============================================================ */
.fi-wi,
.fi-wi-ctn,
.fi-wi-stats-overview,
.fi-wi-stats-overview-stats-ctn,
.fi-widgets,
.fi-widgets-ctn,
.fi-section .fi-section,
.fi-fo-section .fi-section {
    background: transparent !important;
    background-color: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    padding: 0 !important;
}
.fi-section .fi-ta-ctn,
.fi-section .fi-resource-relation-manager,
.fi-fo-section .fi-ta-ctn {
    border: 0 !important;
    background-color: transparent !important;
    box-shadow: none !important;
}


/* ============================================================
   6. Inputs
   ============================================================ */
.fi-input,
.fi-input-wrp,
.fi-select-input,
input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
input[type="tel"],
input[type="search"],
textarea,
select {
    background-color: var(--fk-surface) !important;
    border: 1px solid var(--fk-border-medium) !important;
    border-radius: var(--fk-radius-md) !important;
    color: var(--fk-fg) !important;
    outline: 0 !important;
    transition: border-color var(--fk-dur-fast) var(--fk-ease),
                box-shadow var(--fk-dur-fast) var(--fk-ease) !important;
}
.fi-input:focus,
.fi-input-wrp:focus-within,
input:focus,
textarea:focus,
select:focus {
    border-color: var(--fk-blood) !important;
    box-shadow: 0 0 0 3px rgba(227, 18, 67, 0.15) !important;
}
.fi-fo-field-wrp { background: transparent !important; border: 0 !important; box-shadow: none !important; padding: 0 !important; }
.fi-input-wrp .fi-input-wrp { border: 0 !important; box-shadow: none !important; }


/* ============================================================
   7. Buttons (Filament)
   ============================================================ */
.fi-btn {
    font-family: var(--fk-font-sans) !important;
    font-weight: 500 !important;
    letter-spacing: 0.01em !important;
    text-transform: none !important;
    border-radius: var(--fk-radius-md) !important;
    border: 1px solid !important;
    box-shadow: var(--fk-shadow-btn) !important;
    transition: background-color var(--fk-dur-fast) var(--fk-ease),
                color var(--fk-dur-fast) var(--fk-ease),
                border-color var(--fk-dur-fast) var(--fk-ease),
                box-shadow var(--fk-dur-fast) var(--fk-ease),
                transform var(--fk-dur-fast) var(--fk-ease) !important;
}
.fi-btn:hover { transform: translateY(-1px); box-shadow: var(--fk-shadow-md) !important; }
.fi-btn:active { transform: translateY(0); box-shadow: var(--fk-shadow-btn) !important; }

.fi-btn-color-primary,
.fi-btn.fi-btn-color-primary,
button.fi-btn-color-primary,
.fi-btn-color-danger,
.fi-btn.fi-btn-color-danger {
    background-color: var(--fk-blood) !important;
    border-color: var(--fk-blood) !important;
    color: var(--fk-white) !important;
}
.fi-btn-color-primary *,
.fi-btn.fi-btn-color-primary *,
.fi-btn-color-danger *,
.fi-btn.fi-btn-color-danger * { color: var(--fk-white) !important; }

.fi-btn-color-primary:hover,
.fi-btn.fi-btn-color-primary:hover,
.fi-btn-color-danger:hover,
.fi-btn.fi-btn-color-danger:hover {
    background-color: var(--fk-ember) !important;
    border-color: var(--fk-ember) !important;
}

.fi-btn-outlined,
.fi-btn:not(.fi-btn-color-primary):not(.fi-btn-color-danger) {
    background-color: var(--fk-surface) !important;
    border-color: var(--fk-border-medium) !important;
    color: var(--fk-fg) !important;
}
.fi-btn-outlined:hover,
.fi-btn:not(.fi-btn-color-primary):not(.fi-btn-color-danger):hover {
    background-color: var(--fk-bg) !important;
    border-color: var(--fk-border-strong) !important;
}


/* ============================================================
   8. Links
   ============================================================ */
a {
    color: inherit;
    transition: color var(--fk-dur-fast) var(--fk-ease);
}
a:hover { color: var(--fk-blood); }


/* ============================================================
   9. Tables
   ============================================================ */
.fi-ta-row { border-bottom: 1px solid var(--fk-border-soft) !important; }
.fi-ta-row:hover { background-color: rgba(0,0,0,0.02) !important; }
.fi-ta-header-cell { background-color: transparent !important; }


/* ============================================================
   10. Selection + focus
   ============================================================ */
::selection { background: var(--fk-blood); color: var(--fk-white); }
*:focus-visible {
    outline: 2px solid var(--fk-blood) !important;
    outline-offset: 2px !important;
    border-radius: var(--fk-radius-sm) !important;
}


/* ============================================================
   11. Scrollbar
   ============================================================ */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--fk-bg); }
::-webkit-scrollbar-thumb { background: var(--fk-smoke); border-radius: var(--fk-radius-pill); }
::-webkit-scrollbar-thumb:hover { background: var(--fk-ash); }


/* ============================================================
   12. Hide global search
   ============================================================ */
.fi-global-search,
.fi-topbar-search,
.fi-global-search-field { display: none !important; }


/* ============================================================
   13. Page header / breadcrumbs
   ============================================================ */
.fi-header,
.fi-page-header,
.fi-breadcrumbs {
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
}


/* ============================================================
   14. Badges
   ============================================================ */
.fi-badge {
    border-radius: var(--fk-radius-sm) !important;
    font-family: var(--fk-font-sans) !important;
    font-size: 0.7rem !important;
    font-weight: 500 !important;
    letter-spacing: 0.04em !important;
    text-transform: uppercase !important;
    padding: 2px 8px !important;
}
.fi-badge.fi-color-warning,
.fi-badge.fi-badge-color-warning,
.fi-badge.fi-color-danger,
.fi-badge.fi-badge-color-danger {
    background-color: var(--fk-blood) !important;
    color: var(--fk-white) !important;
    border: 1px solid var(--fk-ember) !important;
}
.fi-badge.fi-color-success,
.fi-badge.fi-badge-color-success {
    background-color: var(--fk-fg) !important;
    color: var(--fk-white) !important;
    border: 1px solid var(--fk-fg) !important;
}
.fi-badge.fi-color-gray,
.fi-badge.fi-badge-color-gray {
    background-color: var(--fk-bone) !important;
    color: var(--fk-iron) !important;
    border: 1px solid var(--fk-border-soft) !important;
}


/* ============================================================
   ===========================================================
   CUSTOM COMPONENTS — used by client blade pages
   ===========================================================
   ============================================================ */


/* ============================================================
   15. Animations
   ============================================================ */
@keyframes fk-pulse {
    0%, 100% { opacity: 1; }
    50%      { opacity: 0.35; }
}


/* ============================================================
   16. Generic — page tabs, empty state
   ============================================================ */
.fk-tabs {
    display: flex;
    margin-bottom: 0.75rem;
    border-bottom: 1px solid var(--fk-border-soft);
}
.fk-tabs__btn {
    padding: 0.55rem 1rem;
    min-height: 44px;
    background: transparent;
    border: 0;
    border-bottom: 2px solid transparent;
    font-family: var(--fk-font-condensed);
    font-size: 0.95rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--fk-fg-muted);
    cursor: pointer;
    margin-bottom: -1px;
    border-top-left-radius: var(--fk-radius-sm);
    border-top-right-radius: var(--fk-radius-sm);
    transition: color var(--fk-dur-fast) var(--fk-ease),
                border-color var(--fk-dur-fast) var(--fk-ease);
}
.fk-tabs__btn:hover { color: var(--fk-fg); }
.fk-tabs__btn.is-active {
    color: var(--fk-blood);
    border-bottom-color: var(--fk-blood);
}

.fk-empty {
    font-size: 0.9rem;
    color: var(--fk-fg-muted);
    padding: 0.5rem 0;
}


.fk-window {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.75rem;
    flex-wrap: wrap;
}
.fk-window__btn {
    padding: 4px 10px;
    background: var(--fk-surface);
    border: 1px solid var(--fk-border-soft);
    border-radius: var(--fk-radius-md);
    font-family: var(--fk-font-mono);
    font-size: 0.6875rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    font-weight: 700;
    color: var(--fk-fg);
    cursor: pointer;
    transition: background-color var(--fk-dur-fast) var(--fk-ease),
                color var(--fk-dur-fast) var(--fk-ease),
                border-color var(--fk-dur-fast) var(--fk-ease);
}
.fk-window__btn:hover:not(:disabled) { background: rgba(0,0,0,0.05); }
.fk-window__btn:disabled { opacity: 0.35; cursor: not-allowed; }
.fk-window__btn--today {
    background: var(--fk-blood);
    border-color: var(--fk-blood);
    color: var(--fk-white);
    margin-left: auto;
}
.fk-window__btn--today:hover:not(:disabled) {
    background: var(--fk-ember);
    border-color: var(--fk-ember);
    color: var(--fk-white);
}
.fk-window__label {
    font-family: var(--fk-font-mono);
    font-size: 0.75rem;
    color: var(--fk-fg-muted);
    letter-spacing: 0.04em;
}


/* ============================================================
   18. Stat tiles (used by MyProgress)
   ============================================================ */
.fk-stats {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0.625rem;
}
@media (max-width: 900px) { .fk-stats { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 640px) { .fk-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.fk-stat {
    border: 1px solid var(--fk-border-soft);
    border-radius: var(--fk-radius-md);
    background: var(--fk-surface);
    box-shadow: var(--fk-shadow-card);
    padding: 0.6rem 0.85rem;
    min-width: 0;
}
.fk-stat--weight {
    background: var(--fk-blood);
    border-color: var(--fk-blood);
    color: var(--fk-white);
}
.fk-stat__label {
    font-family: var(--fk-font-mono);
    font-size: 0.625rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--fk-fg-muted);
    line-height: 1;
}
.fk-stat--weight .fk-stat__label { color: var(--fk-white); opacity: 0.92; }
.fk-stat--weight .fk-stat__value { color: var(--fk-white); }
.fk-stat--weight .fk-stat__delta { color: var(--fk-white); }

.fk-stat__value-row {
    display: flex;
    align-items: baseline;
    gap: 0.5rem;
    margin-top: 4px;
    line-height: 1.1;
    flex-wrap: wrap;
}
.fk-stat__value {
    font-family: var(--fk-font-display);
    font-size: 1.05rem;
    font-weight: 900;
    color: var(--fk-fg);
    font-feature-settings: 'tnum';
}
.fk-stat__empty {
    font-family: var(--fk-font-sans);
    font-size: 1rem;
    color: var(--fk-fg-muted);
}
.fk-stat__delta {
    font-family: var(--fk-font-mono);
    font-size: 0.6875rem;
    font-weight: 700;
}
.fk-stat__delta.is-down { color: #0F7A2E; }
.fk-stat__delta.is-up   { color: #B9260E; }
.fk-stat__delta.is-flat { color: var(--fk-fg-muted); font-weight: 500; }


/* ============================================================
   19. Editable grid table (MyProgress)
   ============================================================ */
.fk-grid-wrap { overflow-x: auto; }
.fk-grid {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.875rem;
}
.fk-grid thead th {
    text-align: left;
    padding: 0.5rem 0.5rem;
    font-family: var(--fk-font-mono);
    font-size: 0.6875rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--fk-fg-muted);
    border-bottom: 1px solid var(--fk-border-soft);
    white-space: nowrap;
}
.fk-grid tbody td {
    padding: 0;
    border-bottom: 1px solid rgba(0,0,0,0.06);
    vertical-align: middle;
}
.fk-grid__date {
    white-space: nowrap;
    padding: 0 0.75rem;
    font-family: var(--fk-font-sans);
    font-weight: 600;
    color: var(--fk-fg);
    min-width: 110px;
}
.fk-grid__dow {
    display: inline-block;
    font-family: var(--fk-font-mono);
    font-size: 0.625rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--fk-fg-muted);
    margin-right: 0.5rem;
    min-width: 1.5rem;
}
.fk-grid__today {
    display: inline-block;
    background: var(--fk-blood);
    color: var(--fk-white);
    font-family: var(--fk-font-mono);
    font-size: 0.625rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    padding: 2px 6px;
    margin-right: 0.5rem;
    border-radius: var(--fk-radius-sm);
}
.fk-grid__row--today td  { background: rgba(227, 18, 67, 0.06); }
.fk-grid__row--locked td { opacity: 0.4; background: rgba(0, 0, 0, 0.03); }

.fk-grid__input {
    width: 100%;
    min-width: 70px;
    padding: 0.5rem 0.5rem;
    border: 1px solid transparent;
    border-radius: var(--fk-radius-sm);
    background: transparent;
    font-family: var(--fk-font-sans);
    font-size: 0.9rem;
    color: var(--fk-fg);
    outline: none;
    text-align: right;
    font-feature-settings: 'tnum';
    transition: background-color var(--fk-dur-fast) var(--fk-ease),
                border-color var(--fk-dur-fast) var(--fk-ease);
}
.fk-grid__input::placeholder { color: rgba(0,0,0,0.25); }
.fk-grid__input:focus {
    border-color: var(--fk-blood);
    background: rgba(227, 18, 67, 0.06);
    box-shadow: 0 0 0 1px var(--fk-blood);
}
.fk-grid__input:hover:not(:focus) { background: rgba(0,0,0,0.04); }
.fk-grid__locked-cell {
    display: block;
    padding: 0.5rem 0.5rem;
    text-align: right;
    color: var(--fk-fg-muted);
    font-family: var(--fk-font-sans);
    font-size: 0.85rem;
}


/* ============================================================
   20. Photos grid (MyProgress)
   ============================================================ */
.fk-photos__date {
    font-family: var(--fk-font-mono) !important;
    font-size: 0.75rem !important;
    letter-spacing: 0.1em !important;
    text-transform: uppercase !important;
    font-weight: 700 !important;
    color: var(--fk-fg-muted) !important;
    margin: 0 0 0.6rem !important;
}
.fk-photos__grid {
    display: grid;
    gap: 0.6rem;
    grid-template-columns: repeat(2, minmax(0, 1fr));
}
@media (min-width: 640px)  { .fk-photos__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .fk-photos__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.fk-photos__item {
    position: relative;
    overflow: hidden;
    border: 1px solid var(--fk-border-soft);
    border-radius: var(--fk-radius-md);
    transition: border-color var(--fk-dur-fast) var(--fk-ease),
                transform var(--fk-dur-fast) var(--fk-ease);
}
.fk-photos__item:hover {
    border-color: var(--fk-blood);
    transform: translateY(-2px);
}
.fk-photos__link {
    display: block;
    width: 100%;
    height: 100%;
}
.fk-photos__del {
    position: absolute;
    top: 6px;
    right: 6px;
    width: 28px;
    height: 28px;
    border: 0;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.65);
    color: var(--fk-white);
    font-size: 1.2rem;
    line-height: 1;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transform: scale(0.85);
    transition: opacity var(--fk-dur-fast) var(--fk-ease),
                transform var(--fk-dur-fast) var(--fk-ease),
                background var(--fk-dur-fast) var(--fk-ease);
    z-index: 2;
}
/* Rozšírená tap area na 44×44 bez zmeny vizuálnej veľkosti tlačidla. */
.fk-photos__del::before {
    content: '';
    position: absolute;
    inset: -8px;
}
.fk-photos__item:hover .fk-photos__del,
.fk-photos__del:focus-visible {
    opacity: 1;
    transform: scale(1);
}
.fk-photos__del:hover {
    background: var(--fk-blood);
}
@media (hover: none) {
    /* Touch devices: always show the delete button so it's reachable. */
    .fk-photos__del { opacity: 1; transform: scale(1); }
}
.fk-photos__item img {
    display: block;
    width: 100%;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    transition: transform var(--fk-dur-med) var(--fk-ease);
}
.fk-photos__item:hover img { transform: scale(1.04); }


/* ============================================================
   21. Chart container (MyProgress, Tréning)
   ============================================================ */
.fk-chart {
    position: relative;
    height: 240px;
    border: 1px solid var(--fk-border-soft);
    border-radius: var(--fk-radius-md);
    padding: 0.75rem;
    background: var(--fk-surface);
    box-shadow: var(--fk-shadow-card);
}
/* Flat variant: chart sits directly inside its parent panel without a nested card look */
.fk-chart--flat {
    border: 0;
    border-radius: 0;
    padding: 0;
    background: transparent;
    box-shadow: none;
    height: 260px;
}
/* Suppress Filament's grey top divider between section header and flat chart */
.fi-section.fi-section-has-header:has(.fk-chart--flat) > .fi-section-content-ctn {
    border-top: 0;
}

/* Rozsah-toggle nad grafom váhy (7 dní / mesiac / celkovo) */
.fk-chart-range {
    display: inline-flex;
    gap: 0.25rem;
    margin-bottom: 0.75rem;
    border: 1px solid var(--fk-border-soft);
    border-radius: var(--fk-radius-md);
    padding: 0.2rem;
    background: var(--fk-surface);
}
.fk-chart-range__btn {
    padding: 0.4rem 0.85rem;
    min-height: 36px;
    border: 0;
    background: transparent;
    border-radius: calc(var(--fk-radius-md) - 0.2rem);
    font-family: var(--fk-font-condensed);
    font-size: 0.8125rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--fk-fg-muted);
    cursor: pointer;
    transition: background var(--fk-dur-fast) var(--fk-ease),
                color var(--fk-dur-fast) var(--fk-ease);
}
.fk-chart-range__btn:hover { color: var(--fk-fg); }
.fk-chart-range__btn.is-active {
    background: var(--fk-blood);
    color: var(--fk-white);
}


/* ============================================================
   22. Page: Nástenka (.fk-na-*)
   ============================================================ */
.fk-na-greeting {
    font-family: var(--fk-font-display) !important;
    font-weight: 900 !important;
    text-transform: uppercase !important;
    letter-spacing: -0.02em !important;
    font-size: clamp(1.5rem, 3vw, 2rem) !important;
    color: var(--fk-fg) !important;
    margin: 0 0 1rem !important;
}

.fk-na-hero {
    display: block;
    padding: 1.5rem 1.75rem;
    border: 1px solid var(--fk-border-soft);
    border-radius: var(--fk-radius-md);
    background: var(--fk-surface);
    box-shadow: var(--fk-shadow-card);
    text-decoration: none;
    color: inherit;
    margin-bottom: 1rem;
    transition: border-color var(--fk-dur-fast) var(--fk-ease),
                transform var(--fk-dur-fast) var(--fk-ease),
                background-color var(--fk-dur-fast) var(--fk-ease);
}
.fk-na-hero--ready {
    background: var(--fk-blood);
    border-color: var(--fk-blood);
    color: var(--fk-white);
}
.fk-na-hero--ready:hover { background: var(--fk-ember); border-color: var(--fk-ember); }
.fk-na-hero--active { border: 2px solid var(--fk-blood); }
.fk-na-hero--active:hover { background: rgba(227, 18, 67, 0.04); }
.fk-na-hero--empty { opacity: 0.7; }

.fk-na-hero__eyebrow {
    font-family: var(--fk-font-mono);
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--fk-fg);
    opacity: 0.85;
    margin-bottom: 0.4rem;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}
.fk-na-hero--ready  .fk-na-hero__eyebrow { color: var(--fk-white); opacity: 0.95; }
.fk-na-hero--active .fk-na-hero__eyebrow { color: var(--fk-blood); }

.fk-na-hero__dot {
    width: 8px; height: 8px;
    background: var(--fk-blood);
    border-radius: 50%;
    animation: fk-pulse 1.6s infinite;
}

.fk-na-hero__title {
    font-family: var(--fk-font-display) !important;
    font-weight: 900 !important;
    font-size: clamp(1.5rem, 3.5vw, 2.5rem) !important;
    line-height: 1 !important;
    letter-spacing: -0.025em !important;
    text-transform: uppercase !important;
    margin: 0 0 0.5rem !important;
    color: inherit !important;
}
.fk-na-hero__meta {
    font-family: var(--fk-font-mono);
    font-size: 0.75rem;
    letter-spacing: 0.04em;
    opacity: 0.8;
    margin-bottom: 0.85rem;
}
.fk-na-hero__cta {
    font-family: var(--fk-font-condensed);
    font-weight: 800;
    font-size: 1rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.fk-na-tiles {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0.6rem;
    margin-bottom: 1rem;
}
@media (max-width: 1100px) { .fk-na-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px)  { .fk-na-tiles { grid-template-columns: 1fr; } }

.fk-na-tile {
    display: block;
    padding: 0.85rem 1rem;
    border: 1px solid var(--fk-border-soft);
    border-radius: var(--fk-radius-md);
    background: var(--fk-surface);
    box-shadow: var(--fk-shadow-card);
    text-decoration: none;
    color: inherit;
    transition: border-color var(--fk-dur-fast) var(--fk-ease),
                transform var(--fk-dur-fast) var(--fk-ease);
    min-width: 0;
}
a.fk-na-tile:hover { border-color: var(--fk-blood); transform: translateY(-1px); }
.fk-na-tile--warn   { border-color: var(--fk-blood); background: rgba(227, 18, 67, 0.06); }
.fk-na-tile--danger { background: var(--fk-fg); color: var(--fk-white); border-color: var(--fk-fg); }

/* Locked tiles & hero — preview blurred + lock overlay */
.fk-na-tile--locked,
.fk-na-hero--locked {
    position: relative;
    overflow: hidden;
    cursor: pointer;
}
.fk-na-hero--locked {
    background: var(--fk-surface);
    border: 1px dashed var(--fk-border-medium);
    text-decoration: none;
}
.fk-na-tile--locked { border-style: dashed; border-color: var(--fk-border-medium); }
.fk-na-locked__blur {
    filter: blur(4px);
    opacity: 0.55;
    user-select: none;
    pointer-events: none;
}
.fk-na-locked__overlay {
    position: absolute;
    inset: 0;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    background: rgba(243, 241, 236, 0.35);
    transition: background-color var(--fk-dur-fast) var(--fk-ease);
}
.fk-na-tile--locked:hover .fk-na-locked__overlay,
.fk-na-hero--locked:hover .fk-na-locked__overlay {
    background: rgba(243, 241, 236, 0.55);
}
.fk-na-locked__icon {
    font-size: 1.5rem;
    line-height: 1;
}
.fk-na-hero--locked .fk-na-locked__icon { font-size: 2.5rem; }
.fk-na-locked__cta {
    font-family: var(--fk-font-condensed);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-size: 0.8rem;
    color: var(--fk-blood);
    padding: 4px 12px;
    background: var(--fk-surface);
    border: 1px solid var(--fk-blood);
    border-radius: var(--fk-radius-sm);
}

.fk-na-tile__label {
    font-family: var(--fk-font-mono);
    font-size: 0.625rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--fk-fg-muted);
    margin-bottom: 0.35rem;
    line-height: 1;
}
.fk-na-tile--danger .fk-na-tile__label { color: rgba(255,255,255,0.65); }

.fk-na-tile__value {
    font-family: var(--fk-font-display);
    font-weight: 900;
    font-size: 1.25rem;
    letter-spacing: -0.02em;
    line-height: 1.1;
    color: var(--fk-fg);
    font-feature-settings: 'tnum';
}
.fk-na-tile--danger .fk-na-tile__value { color: var(--fk-white); }
.fk-na-tile__value--muted { color: var(--fk-fg-muted); }

.fk-na-tile__sub {
    margin-top: 0.25rem;
    font-family: var(--fk-font-mono);
    font-size: 0.7rem;
    letter-spacing: 0.04em;
    color: var(--fk-fg-muted);
}
.fk-na-tile--danger .fk-na-tile__sub { color: rgba(255,255,255,0.7); }

.fk-na-post {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    border: 1px solid var(--fk-border-soft);
    border-radius: var(--fk-radius-md);
    background: var(--fk-surface);
    box-shadow: var(--fk-shadow-card);
    text-decoration: none;
    color: inherit;
    transition: border-color var(--fk-dur-fast) var(--fk-ease);
    overflow: hidden;
}
@media (min-width: 700px) {
    .fk-na-post { grid-template-columns: 240px minmax(0, 1fr); }
}
.fk-na-post:hover { border-color: var(--fk-blood); }
.fk-na-post__cover {
    position: relative;
    background: var(--fk-bone);
    aspect-ratio: 16 / 9;
    overflow: hidden;
    border-bottom: 1px solid var(--fk-border-soft);
}
@media (min-width: 700px) {
    .fk-na-post__cover { aspect-ratio: auto; border-bottom: 0; border-right: 1px solid var(--fk-border-soft); }
}
.fk-na-post__cover img { width: 100%; height: 100%; object-fit: cover; display: block; }

.fk-na-post__body {
    padding: 1rem 1.25rem 1.15rem;
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}
.fk-na-post__eyebrow {
    font-family: var(--fk-font-mono);
    font-size: 0.625rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--fk-fg-muted);
    font-weight: 700;
}
.fk-na-post__title {
    font-family: var(--fk-font-display) !important;
    font-weight: 900 !important;
    font-size: 1.15rem !important;
    line-height: 1.1 !important;
    letter-spacing: -0.015em !important;
    text-transform: uppercase !important;
    color: var(--fk-fg) !important;
    margin: 0 !important;
}
.fk-na-post__excerpt {
    font-size: 0.875rem;
    line-height: 1.45;
    color: var(--fk-fg-muted);
    margin: 0;
}
.fk-na-post__cta {
    margin-top: 0.25rem;
    font-family: var(--fk-font-condensed);
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--fk-blood);
}


/* ============================================================
   23. Page: Tréning (.fk-tr-*)
   ============================================================ */
.fk-tr-banner {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.4rem 0.75rem;
    border: 1px solid var(--fk-blood);
    border-radius: var(--fk-radius-sm);
    background: rgba(227, 18, 67, 0.08);
    color: var(--fk-blood);
    font-family: var(--fk-font-mono);
    font-size: 0.75rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    font-weight: 700;
}
.fk-tr-banner__dot {
    width: 8px; height: 8px;
    background: var(--fk-blood);
    border-radius: 50%;
    animation: fk-pulse 1.6s infinite;
}
.fk-tr-banner__timer {
    font-family: var(--fk-font-display);
    font-size: 0.95rem;
    font-feature-settings: 'tnum';
    letter-spacing: 0;
}

/* Wrappers: bypass Filament's .fi-page-content gap-y-8 between sibling page blocks
   so header, start button and exercise list sit close together. */
.fk-tr-stack {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}
.fk-tr-stack .fk-tr-pills,
.fk-tr-stack .fk-tr-start,
.fk-tr-stack .fk-tr-done-today,
.fk-tr-stack .fk-tr-banner {
    margin: 0; /* gap from parent flex handles spacing */
}
.fk-tr-ex-list {
    display: block;
}

/* Exercise card — stacked tight, only the open one gets shadow + margin */
.fk-tr-ex {
    background: var(--fk-surface);
    border: 1px solid var(--fk-border-soft);
    border-radius: var(--fk-radius-md);
    box-shadow: none;
    margin: 0;
}
.fk-tr-ex + .fk-tr-ex { margin-top: 0.35rem; } /* same small gap as around open card */
.fk-tr-ex[open] {
    border-color: var(--fk-blood);
    box-shadow: var(--fk-shadow-card);
    margin: 0.35rem 0;
    position: relative;
    z-index: 1;
}
.fk-tr-ex__head {
    list-style: none;
    cursor: pointer;
    padding: 0.6rem 0.95rem;
    display: flex;
    align-items: center;
    gap: 0.75rem;
}
.fk-tr-ex__head::-webkit-details-marker { display: none; }
.fk-tr-ex__chevron {
    font-size: 0.7rem;
    color: var(--fk-fg-muted);
    transition: transform var(--fk-dur-fast) var(--fk-ease);
    flex-shrink: 0;
}
.fk-tr-ex[open] .fk-tr-ex__chevron { transform: rotate(90deg); }
.fk-tr-ex__name {
    font-family: var(--fk-font-display);
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: -0.01em;
    font-size: 1rem;
    color: var(--fk-fg);
    flex: 1;
    line-height: 1.15;
}
.fk-tr-ex__count {
    font-family: var(--fk-font-mono);
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    padding: 2px 8px;
    border: 1px solid var(--fk-fg-muted);
    border-radius: var(--fk-radius-sm);
    color: var(--fk-fg-muted);
}
.fk-tr-ex__count.is-done {
    background: var(--fk-blood);
    border-color: var(--fk-blood);
    color: var(--fk-white);
}
.fk-tr-ex__body {
    padding: 0 1rem 1rem;
    border-top: 1px dashed rgba(0,0,0,0.1);
    padding-top: 0.85rem;
}

/* Prescribed pills */
.fk-tr-prescr {
    display: flex; flex-wrap: wrap; gap: 0.4rem;
    margin-bottom: 0.5rem;
}
.fk-tr-prescr__pill {
    display: inline-block;
    padding: 2px 8px;
    border: 1px solid var(--fk-border-soft);
    border-radius: var(--fk-radius-sm);
    background: var(--fk-bg);
    font-family: var(--fk-font-mono);
    font-size: 0.6875rem;
    letter-spacing: 0.05em;
    font-weight: 700;
    color: var(--fk-fg);
}
.fk-tr-prescr__pill--muted { opacity: 0.7; font-weight: 500; }
.fk-tr-exnotes {
    margin-bottom: 0.6rem;
    font-size: 0.85rem;
    color: var(--fk-fg-muted);
    font-style: italic;
}

/* Set inputs */
.fk-tr-sets {
    width: 100%;
    border-collapse: collapse;
    margin-top: 0.4rem;
}
.fk-tr-sets thead th {
    text-align: center;
    padding: 0.3rem;
    font-family: var(--fk-font-mono);
    font-size: 0.6rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--fk-fg-muted);
    border-bottom: 1px solid var(--fk-border-soft);
    font-weight: 500;
}
.fk-tr-sets thead th:first-child { width: 32px; }
.fk-tr-sets__num {
    font-family: var(--fk-font-mono);
    font-weight: 700;
    color: var(--fk-fg-muted);
    text-align: center;
}
.fk-tr-sets tbody td {
    padding: 2px 1px;
    border-bottom: 1px solid rgba(0,0,0,0.05);
}
.fk-tr-sets tbody tr.is-logged .fk-tr-sets__num { color: var(--fk-blood); }

.fk-tr-input {
    width: 100%;
    min-width: 48px;
    padding: 0.45rem 0.4rem;
    border: 1px solid transparent;
    border-radius: var(--fk-radius-sm);
    background: transparent;
    font-family: var(--fk-font-sans);
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--fk-fg);
    outline: none;
    text-align: center;
    font-feature-settings: 'tnum';
    transition: background-color var(--fk-dur-fast) var(--fk-ease),
                border-color var(--fk-dur-fast) var(--fk-ease);
}
.fk-tr-input::placeholder { color: rgba(0,0,0,0.25); font-weight: 400; }
.fk-tr-input:focus {
    border-color: var(--fk-blood);
    background: rgba(227, 18, 67, 0.06);
    box-shadow: 0 0 0 1px var(--fk-blood);
}
.fk-tr-input:hover:not(:focus):not(:disabled) { background: rgba(0,0,0,0.04); }
.fk-tr-input:disabled { opacity: 0.4; cursor: not-allowed; }

/* Notes + buttons */
.fk-tr-notes {
    width: 100%;
    padding: 0.5rem 0.75rem;
    border: 1px solid var(--fk-border-soft);
    border-radius: var(--fk-radius-md);
    background: var(--fk-surface);
    font-family: var(--fk-font-sans);
    font-size: 0.9rem;
    color: var(--fk-fg);
    margin-bottom: 0.75rem;
    resize: vertical;
}
.fk-tr-notes:focus {
    outline: none;
    border-color: var(--fk-blood);
    box-shadow: 0 0 0 1px var(--fk-blood);
}

.fk-tr-finish { display: flex; gap: 0.5rem; flex-wrap: wrap; }
.fk-tr-btn {
    padding: 0.6rem 1.25rem;
    font-family: var(--fk-font-condensed);
    font-size: 0.95rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    cursor: pointer;
    border: 2px solid;
    border-radius: var(--fk-radius-md);
    transition: background-color var(--fk-dur-fast) var(--fk-ease),
                color var(--fk-dur-fast) var(--fk-ease),
                border-color var(--fk-dur-fast) var(--fk-ease);
}
.fk-tr-btn--big {
    padding: 0.85rem 1.75rem;
    font-size: 1.15rem;
    letter-spacing: 0.08em;
}
.fk-tr-btn--primary {
    background: var(--fk-blood);
    border-color: var(--fk-blood);
    color: var(--fk-white);
}
.fk-tr-btn--primary:hover { background: var(--fk-ember); border-color: var(--fk-ember); }
.fk-tr-btn--ghost {
    background: transparent;
    border-color: var(--fk-border-soft);
    color: var(--fk-fg);
}
.fk-tr-btn--ghost:hover { background: var(--fk-fg); color: var(--fk-white); }

/* Sticky bar */
.fk-tr-stickybar {
    position: sticky;
    bottom: 0;
    z-index: 30;
    margin: 1rem -1rem -1rem;
    padding: 0.75rem 1rem;
    background: var(--fk-bg);
    border-top: 1px solid var(--fk-border-soft);
    box-shadow: 0 -2px 8px rgba(0,0,0,0.08);
}
.fk-tr-stickybar__inner {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    max-width: 100%;
}
.fk-tr-stickybar__progress { flex: 1; min-width: 0; }
.fk-tr-stickybar__bar {
    height: 4px;
    background: rgba(0,0,0,0.1);
    margin-bottom: 0.4rem;
    overflow: hidden;
    border-radius: var(--fk-radius-pill);
}
.fk-tr-stickybar__fill {
    height: 100%;
    background: var(--fk-blood);
    transition: width 250ms var(--fk-ease);
}
.fk-tr-stickybar__stat {
    font-family: var(--fk-font-mono);
    font-size: 0.7rem;
    letter-spacing: 0.05em;
    color: var(--fk-fg-muted);
    display: flex;
    gap: 0.35rem;
    align-items: baseline;
    flex-wrap: wrap;
}
.fk-tr-stickybar__stat strong {
    font-family: var(--fk-font-display);
    font-size: 0.95rem;
    color: var(--fk-fg);
    font-feature-settings: 'tnum';
}
.fk-tr-stickybar__stat em { font-style: normal; opacity: 0.4; }
.fk-tr-stickybar__cta { white-space: nowrap; flex-shrink: 0; }


/* Workout history (Tréning) */
.fk-tr-history__item {
    border: 1px solid var(--fk-border-soft);
    border-radius: var(--fk-radius-md);
    margin-bottom: 0.5rem;
    background: var(--fk-surface);
    box-shadow: var(--fk-shadow-card);
}
.fk-tr-history__item[open] { border-color: var(--fk-fg); }
.fk-tr-history__summary {
    list-style: none;
    cursor: pointer;
    padding: 0.65rem 1rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
}
.fk-tr-history__summary::-webkit-details-marker { display: none; }
.fk-tr-history__summary::before {
    content: '▸';
    font-size: 0.7rem;
    color: var(--fk-fg-muted);
    transition: transform var(--fk-dur-fast) var(--fk-ease);
}
.fk-tr-history__item[open] .fk-tr-history__summary::before { transform: rotate(90deg); }
.fk-tr-history__name {
    font-family: var(--fk-font-condensed);
    font-weight: 700;
    text-transform: uppercase;
    color: var(--fk-fg);
    flex: 1;
}
.fk-tr-history__meta {
    font-family: var(--fk-font-mono);
    font-size: 0.6875rem;
    color: var(--fk-fg-muted);
    letter-spacing: 0.04em;
}
.fk-tr-history__edit {
    font-family: var(--fk-font-mono);
    font-size: 0.6875rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    padding: 0.5rem 0.75rem;
    min-height: 36px;
    display: inline-flex;
    align-items: center;
    border: 1px solid var(--fk-border-soft);
    border-radius: var(--fk-radius-sm);
    color: var(--fk-fg);
    text-decoration: none;
    transition: background-color var(--fk-dur-fast) var(--fk-ease),
                color var(--fk-dur-fast) var(--fk-ease);
}
.fk-tr-history__edit:hover { background: var(--fk-fg); color: var(--fk-white); }
/* Mobile: 1 workout = 1 riadok (bez zalamovania) */
@media (max-width: 640px) {
    .fk-tr-history__summary {
        flex-wrap: nowrap;
        gap: 0.5rem;
        padding: 0.6rem 0.75rem;
    }
    .fk-tr-history__name {
        font-size: 0.9rem;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        min-width: 0;
    }
    .fk-tr-history__meta {
        flex-shrink: 0;
        white-space: nowrap;
    }
    .fk-tr-history__meta-extra { display: none; }
    .fk-tr-history__edit {
        flex-shrink: 0;
        padding: 0.4rem 0.6rem;
        min-height: 32px;
    }
}
.fk-tr-history__body {
    padding: 0 1rem 1rem;
    border-top: 1px dashed rgba(0,0,0,0.1);
    padding-top: 0.75rem;
}


/* ============================================================
   24. Page: Check-in (.fk-ci-*)
   ============================================================ */
.fk-ci__row { margin-bottom: 1.25rem; }
.fk-ci__row:last-of-type { margin-bottom: 1.5rem; }

.fk-ci__head {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin-bottom: 0.4rem;
}
.fk-ci__label {
    font-family: var(--fk-font-condensed);
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-size: 1rem;
    color: var(--fk-fg);
}
.fk-ci__value {
    font-family: var(--fk-font-display);
    font-weight: 900;
    font-size: 1.4rem;
    color: var(--fk-blood);
    font-feature-settings: 'tnum';
    line-height: 1;
}
.fk-ci__value.is-empty { color: var(--fk-fg-muted); }
.fk-ci__value small {
    font-family: var(--fk-font-mono);
    font-size: 0.65rem;
    font-weight: 500;
    opacity: 0.55;
    letter-spacing: 0.05em;
}

.fk-ci__slider {
    -webkit-appearance: none;
    appearance: none;
    width: 100%;
    height: 6px;
    background: rgba(0,0,0,0.1);
    border-radius: var(--fk-radius-pill);
    outline: none;
    cursor: pointer;
    border: 0;
    margin: 0.4rem 0 0.25rem;
}
.fk-ci__slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 24px;
    height: 24px;
    background: var(--fk-blood);
    border: 2px solid var(--fk-white);
    border-radius: 50%;
    box-shadow: var(--fk-shadow-btn);
    cursor: grab;
}
.fk-ci__slider::-moz-range-thumb {
    width: 24px;
    height: 24px;
    background: var(--fk-blood);
    border: 2px solid var(--fk-white);
    border-radius: 50%;
    box-shadow: var(--fk-shadow-btn);
    cursor: grab;
}
.fk-ci__slider:disabled { opacity: 0.4; cursor: not-allowed; }
.fk-ci__slider:disabled::-webkit-slider-thumb { cursor: not-allowed; }

.fk-ci__scale {
    display: flex;
    justify-content: space-between;
    font-family: var(--fk-font-mono);
    font-size: 0.6875rem;
    color: var(--fk-fg-muted);
    letter-spacing: 0.06em;
    padding: 0 4px;
}

.fk-ci__notes {
    margin-top: 1.5rem;
    padding-top: 1.25rem;
    border-top: 1px solid var(--fk-border-soft);
}
.fk-ci__notes-label {
    display: block;
    font-family: var(--fk-font-mono);
    font-size: 0.6875rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    font-weight: 700;
    color: var(--fk-fg-muted);
    margin-bottom: 0.5rem;
}
.fk-ci__textarea {
    width: 100%;
    padding: 0.75rem 0.9rem;
    border: 1px solid var(--fk-border-soft);
    border-radius: var(--fk-radius-md);
    background: var(--fk-surface);
    font-family: var(--fk-font-sans);
    font-size: 0.95rem;
    line-height: 1.5;
    color: var(--fk-fg);
    outline: none;
    resize: vertical;
    min-height: 120px;
}
.fk-ci__textarea:focus {
    border-color: var(--fk-blood);
    box-shadow: 0 0 0 1px var(--fk-blood);
}
.fk-ci__textarea:disabled { background: rgba(0,0,0,0.02); opacity: 0.7; }

.fk-ci-actions { display: flex; gap: 0.5rem; flex-wrap: wrap; }
.fk-ci-btn {
    padding: 0.7rem 1.5rem;
    border: 2px solid;
    border-radius: var(--fk-radius-md);
    font-family: var(--fk-font-condensed);
    font-weight: 800;
    font-size: 1rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    cursor: pointer;
    transition: background-color var(--fk-dur-fast) var(--fk-ease),
                color var(--fk-dur-fast) var(--fk-ease),
                border-color var(--fk-dur-fast) var(--fk-ease);
}
.fk-ci-btn--primary {
    background: var(--fk-blood);
    border-color: var(--fk-blood);
    color: var(--fk-white);
}
.fk-ci-btn--primary:hover { background: var(--fk-ember); border-color: var(--fk-ember); }
.fk-ci-btn--ghost {
    background: transparent;
    border-color: var(--fk-border-soft);
    color: var(--fk-fg);
}
.fk-ci-btn--ghost:hover { background: var(--fk-fg); color: var(--fk-white); }


/* ============================================================
   25. Generic history (.fk-history) — used by Check-in
   ============================================================ */
.fk-history__item {
    border: 1px solid var(--fk-border-soft);
    border-radius: var(--fk-radius-md);
    margin-bottom: 0.5rem;
    background: var(--fk-surface);
    box-shadow: var(--fk-shadow-card);
}
.fk-history__item[open] { border-color: var(--fk-fg); }
.fk-history__summary {
    list-style: none;
    cursor: pointer;
    padding: 0.75rem 1rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
}
.fk-history__summary::-webkit-details-marker { display: none; }
.fk-history__summary::before {
    content: '▸';
    font-size: 0.7rem;
    color: var(--fk-fg-muted);
    transition: transform var(--fk-dur-fast) var(--fk-ease);
}
.fk-history__item[open] .fk-history__summary::before { transform: rotate(90deg); }
.fk-history__week {
    font-family: var(--fk-font-sans);
    font-weight: 700;
    color: var(--fk-fg);
    flex: 1;
    margin-left: 0.5rem;
}
.fk-history__meta {
    display: inline-flex; align-items: center; gap: 0.5rem; flex-wrap: wrap;
    font-family: var(--fk-font-mono);
    font-size: 0.6875rem;
    color: var(--fk-fg-muted);
    letter-spacing: 0.04em;
}
.fk-history__badge {
    display: inline-block;
    padding: 2px 8px;
    border: 1px solid var(--fk-border-soft);
    border-radius: var(--fk-radius-sm);
    font-family: var(--fk-font-mono);
    font-size: 0.625rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}
.fk-history__badge--replied {
    background: var(--fk-blood);
    color: var(--fk-white);
    border-color: var(--fk-blood);
}
.fk-history__badge--pending {
    background: var(--fk-surface);
    color: var(--fk-fg-muted);
    border-color: var(--fk-border-medium);
}
.fk-history__body {
    padding: 0 1rem 1rem;
    border-top: 1px dashed rgba(0,0,0,0.1);
    padding-top: 1rem;
}
.fk-history__reply {
    background: rgba(91, 192, 68, 0.12);
    border-left: 3px solid #2E8B2E;
    border-radius: var(--fk-radius-sm);
    padding: 0.85rem 1rem;
    margin-bottom: 1rem;
}
.fk-history__reply-label {
    font-family: var(--fk-font-mono);
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #1F5512;
    margin-bottom: 0.4rem;
    display: flex;
    justify-content: space-between;
    align-items: baseline;
}
.fk-history__reply-date { font-weight: 400; opacity: 0.7; font-size: 0.625rem; }

.fk-history__ratings {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0.5rem;
    margin-bottom: 0.85rem;
}
@media (max-width: 600px) { .fk-history__ratings { grid-template-columns: repeat(2, 1fr); } }
.fk-history__rating {
    border: 1px solid var(--fk-border-soft);
    border-radius: var(--fk-radius-sm);
    padding: 0.4rem 0.6rem;
    display: flex; flex-direction: column;
}
.fk-history__rating-label {
    font-family: var(--fk-font-mono);
    font-size: 0.6rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--fk-fg-muted);
}
.fk-history__rating-value {
    font-family: var(--fk-font-display);
    font-weight: 900;
    font-size: 1.1rem;
    color: var(--fk-fg);
    line-height: 1.2;
}
.fk-history__rating-value small {
    font-family: var(--fk-font-mono);
    font-size: 0.6rem;
    font-weight: 500;
    opacity: 0.5;
}
.fk-history__field { margin-bottom: 0.85rem; }
.fk-history__field-label {
    font-family: var(--fk-font-mono);
    font-size: 0.625rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--fk-fg-muted);
    margin-bottom: 0.2rem;
}
.fk-history__field-value {
    font-family: var(--fk-font-sans);
    font-size: 0.9rem;
    color: var(--fk-fg);
}


/* ============================================================
   26. Page: Makrá (.fk-mc-*)
   ============================================================ */
.fk-mc {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 1.25rem;
    padding: 0.5rem 0;
}
.fk-mc__tile {
    width: 140px;
    height: 140px;
    border-radius: 50%;
    border: 4px solid var(--fk-border-soft);
    background: var(--fk-surface);
    box-shadow: var(--fk-shadow-card);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 0.5rem;
    transition: transform var(--fk-dur-fast) var(--fk-ease),
                box-shadow var(--fk-dur-fast) var(--fk-ease);
}
.fk-mc__tile:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 18px rgba(0, 0, 0, 0.08);
}
.fk-mc__tile--kcal    { border-color: var(--fk-blood); }
.fk-mc__tile--protein { border-color: #3B82F6; }
.fk-mc__tile--carbs   { border-color: #F59E0B; }
.fk-mc__tile--fats    { border-color: #5BC044; }

.fk-mc__icon {
    font-size: 1.4rem;
    line-height: 1;
    margin-bottom: 0.25rem;
}
.fk-mc__label {
    font-family: var(--fk-font-mono);
    font-size: 0.65rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--fk-fg-muted);
    font-weight: 700;
    line-height: 1;
    margin-bottom: 0.3rem;
}
.fk-mc__value {
    font-family: var(--fk-font-display);
    font-weight: 900;
    font-size: 1.55rem;
    line-height: 1;
    color: var(--fk-fg);
    font-feature-settings: 'tnum';
    display: flex;
    align-items: baseline;
    justify-content: center;
    gap: 0.15rem;
}
.fk-mc__unit {
    font-family: var(--fk-font-mono);
    font-size: 0.65rem;
    font-weight: 600;
    letter-spacing: 0.05em;
    color: var(--fk-fg-muted);
    margin-left: 0.1rem;
    text-transform: lowercase;
}

.fk-mc__notes {
    margin-top: 1rem;
    padding: 0.75rem 1rem;
    border-left: 3px solid var(--fk-blood);
    border-radius: var(--fk-radius-sm);
    background: rgba(227, 18, 67, 0.08);
}
.fk-mc__notes-label {
    font-family: var(--fk-font-mono);
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--fk-fg);
    margin-bottom: 0.3rem;
}
.fk-mc__notes-body {
    font-size: 0.95rem;
    line-height: 1.5;
    color: var(--fk-fg);
}

/* History items (different visual from generic .fk-history) */
.fk-mc-history__item {
    border: 1px solid var(--fk-border-soft);
    border-radius: var(--fk-radius-md);
    background: var(--fk-surface);
    box-shadow: var(--fk-shadow-card);
    padding: 0.75rem 1rem;
    margin-bottom: 0.5rem;
}
.fk-mc-history__item--upcoming {
    border-color: var(--fk-blood);
    background: rgba(227, 18, 67, 0.04);
}
.fk-mc-history__date {
    font-family: var(--fk-font-condensed);
    font-weight: 700;
    text-transform: uppercase;
    color: var(--fk-fg);
    margin-bottom: 0.4rem;
    display: flex;
    align-items: baseline;
    gap: 0.5rem;
    flex-wrap: wrap;
}
.fk-mc-history__since {
    font-family: var(--fk-font-mono);
    font-weight: 400;
    font-size: 0.7rem;
    color: var(--fk-fg-muted);
    text-transform: none;
    letter-spacing: 0;
}
.fk-mc-history__badge {
    display: inline-block;
    padding: 2px 8px;
    border: 1px solid var(--fk-blood);
    border-radius: var(--fk-radius-sm);
    background: var(--fk-blood);
    color: var(--fk-white);
    font-family: var(--fk-font-mono);
    font-size: 0.625rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}
.fk-mc-history__values {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
    font-family: var(--fk-font-mono);
    font-size: 0.85rem;
    color: var(--fk-fg-muted);
    margin-bottom: 0.4rem;
}
.fk-mc-history__values strong {
    font-family: var(--fk-font-display);
    font-weight: 900;
    color: var(--fk-fg);
    font-size: 0.95rem;
    font-feature-settings: 'tnum';
}
.fk-mc-history__notes {
    font-size: 0.875rem;
    color: var(--fk-fg-muted);
    font-style: italic;
}


/* ============================================================
   27. Page: Blog (.fk-blog-*)
   ============================================================ */
.fk-blog-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1rem;
}
@media (max-width: 1100px) { .fk-blog-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 700px)  { .fk-blog-grid { grid-template-columns: 1fr; } }

.fk-blog-card {
    display: flex;
    flex-direction: column;
    background: var(--fk-surface);
    border: 1px solid var(--fk-border-soft);
    border-radius: var(--fk-radius-md);
    box-shadow: var(--fk-shadow-card);
    text-decoration: none;
    color: inherit;
    overflow: hidden;
    transition: transform var(--fk-dur-fast) var(--fk-ease),
                border-color var(--fk-dur-fast) var(--fk-ease);
}
.fk-blog-card:hover {
    border-color: var(--fk-blood);
    transform: translateY(-2px);
}
.fk-blog-card__cover {
    position: relative;
    aspect-ratio: 16 / 9;
    background: var(--fk-bone);
    overflow: hidden;
    border-bottom: 1px solid var(--fk-border-soft);
}
.fk-blog-card__cover img { width: 100%; height: 100%; object-fit: cover; }
.fk-blog-card__cover--blank {
    background: linear-gradient(135deg, var(--fk-bone) 0%, var(--fk-paper) 100%);
}
.fk-blog-card__body {
    padding: 1rem 1.1rem 1.1rem;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    flex: 1;
}
.fk-blog-card__meta {
    font-family: var(--fk-font-mono);
    font-size: 0.6875rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--fk-fg-muted);
}
.fk-blog-card__title {
    font-family: var(--fk-font-display) !important;
    font-weight: 900 !important;
    font-size: 1.2rem !important;
    line-height: 1.1 !important;
    letter-spacing: -0.015em !important;
    text-transform: uppercase !important;
    color: var(--fk-fg) !important;
    margin: 0 !important;
}
.fk-blog-card__excerpt {
    font-size: 0.9rem;
    line-height: 1.5;
    color: var(--fk-fg-muted);
    margin: 0;
    flex: 1;
}
.fk-blog-card__cta {
    margin-top: 0.25rem;
    font-family: var(--fk-font-condensed);
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-size: 0.875rem;
    color: var(--fk-blood);
}

/* Single article view */
.fk-blog-stack {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}
.fk-blog-back { margin-bottom: 0; }
.fk-blog-back__link {
    display: inline-block;
    font-family: var(--fk-font-mono);
    font-size: 0.75rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    font-weight: 700;
    text-decoration: none;
    color: var(--fk-fg);
    padding: 4px 10px;
    border: 1px solid var(--fk-border-soft);
    border-radius: var(--fk-radius-md);
    transition: background-color var(--fk-dur-fast) var(--fk-ease),
                color var(--fk-dur-fast) var(--fk-ease);
}
.fk-blog-back__link:hover { background: var(--fk-fg); color: var(--fk-white); }

.fk-blog-cover {
    border: 1px solid var(--fk-border-soft);
    border-radius: var(--fk-radius-md);
    margin-bottom: 0;
    overflow: hidden;
    aspect-ratio: 16 / 7;
    background: var(--fk-bone);
}
.fk-blog-cover img { width: 100%; height: 100%; object-fit: cover; display: block; }

.fk-blog-article {
    background: var(--fk-surface);
    border: 1px solid var(--fk-border-soft);
    border-radius: var(--fk-radius-md);
    box-shadow: var(--fk-shadow-card);
    padding: 2rem 2rem 2.25rem;
}
@media (max-width: 700px) { .fk-blog-article { padding: 1.25rem; } }
.fk-blog-article__lead {
    font-size: 1.125rem;
    line-height: 1.5;
    color: var(--fk-fg-muted);
    font-style: italic;
    margin: 0 0 1.5rem;
    padding-bottom: 1.25rem;
    border-bottom: 1px solid var(--fk-border-soft);
}
.fk-blog-article__body {
    font-family: var(--fk-font-sans);
    font-size: 1rem;
    line-height: 1.65;
    color: var(--fk-fg);
}
.fk-blog-article__body h1,
.fk-blog-article__body h2,
.fk-blog-article__body h3 {
    font-family: var(--fk-font-display) !important;
    text-transform: uppercase !important;
    letter-spacing: -0.02em !important;
    margin: 1.5rem 0 0.75rem !important;
    line-height: 1.1 !important;
}
.fk-blog-article__body h1 { font-size: 1.75rem !important; }
.fk-blog-article__body h2 { font-size: 1.4rem !important; }
.fk-blog-article__body h3 { font-size: 1.15rem !important; }
.fk-blog-article__body p { margin: 0 0 1rem; }
.fk-blog-article__body ul,
.fk-blog-article__body ol { margin: 0 0 1rem 1.25rem; padding-left: 0.5rem; }
.fk-blog-article__body li { margin-bottom: 0.4rem; }
.fk-blog-article__body a { color: var(--fk-blood); text-decoration: underline; text-underline-offset: 3px; }
.fk-blog-article__body img {
    max-width: 100%;
    height: auto;
    margin: 1rem 0;
    border: 1px solid var(--fk-border-soft);
    border-radius: var(--fk-radius-sm);
}
.fk-blog-article__body blockquote {
    margin: 1rem 0;
    padding: 0.5rem 1rem;
    border-left: 3px solid var(--fk-blood);
    background: rgba(227, 18, 67, 0.04);
    font-style: italic;
    color: var(--fk-fg-muted);
}
.fk-blog-article__body code {
    font-family: var(--fk-font-mono);
    font-size: 0.875em;
    background: rgba(0,0,0,0.06);
    padding: 1px 5px;
    border-radius: var(--fk-radius-sm);
}


/* ============================================================
   28. Page: Videá (.fk-vid-*)
   ============================================================ */
.fk-vid-filter {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin-bottom: 1rem;
}
.fk-vid-filter__btn {
    padding: 6px 14px;
    background: var(--fk-surface);
    border: 1px solid var(--fk-border-soft);
    border-radius: var(--fk-radius-md);
    font-family: var(--fk-font-mono);
    font-size: 0.6875rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    font-weight: 700;
    color: var(--fk-fg);
    cursor: pointer;
    transition: background-color var(--fk-dur-fast) var(--fk-ease),
                color var(--fk-dur-fast) var(--fk-ease),
                border-color var(--fk-dur-fast) var(--fk-ease);
}
.fk-vid-filter__btn:hover:not(.is-active) { background: rgba(0,0,0,0.04); }
.fk-vid-filter__btn.is-active {
    background: var(--fk-blood);
    border-color: var(--fk-blood);
    color: var(--fk-white);
}


/* ============================================================
   29. Page: Členstvo (.fk-upgrade__*)
   ============================================================ */
.fk-upgrade__lead {
    font-family: var(--fk-font-sans);
    font-size: 1rem;
    color: var(--fk-fg-muted);
    margin-bottom: 1.25rem;
    max-width: 56ch;
}
.fk-upgrade__alert {
    border: 1px solid var(--fk-blood);
    border-left: 3px solid var(--fk-blood);
    border-radius: var(--fk-radius-md);
    background: rgba(227, 18, 67, 0.06);
    color: var(--fk-fg);
    padding: 0.85rem 1.1rem;
    margin-bottom: 1.5rem;
    font-size: 0.95rem;
    line-height: 1.5;
}
.fk-upgrade__alert strong { font-weight: 700; }
.fk-upgrade__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr));
    gap: 1.5rem;
}
/* Single-tier layout — vycentrovaná karta s rozumným max-width,
   inak by sa cez grid-template auto-fit roztiahla na full width. */
.fk-upgrade__grid--single {
    grid-template-columns: minmax(0, 28rem);
    justify-content: center;
}
.fk-upgrade__card {
    background-color: var(--fk-surface);
    border: 1px solid var(--fk-border-soft);
    border-radius: var(--fk-radius-md);
    box-shadow: var(--fk-shadow-card);
    padding: 1.75rem 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 0.875rem;
}
.fk-upgrade__card--current {
    background-color: var(--fk-blood);
    color: var(--fk-white);
    border-color: var(--fk-blood);
}
.fk-upgrade__eyebrow {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-family: var(--fk-font-mono);
    font-size: 0.6875rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--fk-fg-muted);
}
.fk-upgrade__card--current .fk-upgrade__eyebrow { color: var(--fk-white); opacity: 0.85; }
.fk-upgrade__tag {
    background: var(--fk-fg);
    color: var(--fk-blood);
    padding: 2px 8px;
    border-radius: var(--fk-radius-sm);
    font-weight: 700;
}
.fk-upgrade__name {
    font-family: var(--fk-font-display);
    font-size: 2.25rem;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: -0.02em;
    line-height: 1;
}
.fk-upgrade__price {
    display: flex;
    align-items: baseline;
    gap: 0.5rem;
    font-family: var(--fk-font-display);
}
.fk-upgrade__price-value {
    font-size: 2.5rem;
    font-weight: 900;
    letter-spacing: -0.03em;
}
.fk-upgrade__price-period {
    font-family: var(--fk-font-mono);
    font-size: 0.8125rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    font-weight: 500;
}
.fk-upgrade__desc {
    font-size: 0.9375rem;
    line-height: 1.5;
    margin: 0;
}
.fk-upgrade__features {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.625rem;
    border-top: 1px solid currentColor;
    padding-top: 1rem;
    margin-top: 0.5rem;
}
.fk-upgrade__feature {
    display: flex;
    gap: 0.75rem;
    align-items: flex-start;
    font-size: 0.9375rem;
    line-height: 1.35;
}
.fk-upgrade__check {
    font-family: var(--fk-font-mono);
    font-weight: 700;
    color: var(--fk-blood);
    flex-shrink: 0;
}
.fk-upgrade__card--current .fk-upgrade__check { color: var(--fk-white); }
.fk-upgrade__feature-name { font-weight: 600; }
.fk-upgrade__feature-desc {
    font-size: 0.8125rem;
    color: var(--fk-fg-muted);
    line-height: 1.35;
}
.fk-upgrade__card--current .fk-upgrade__feature-desc { color: var(--fk-white); opacity: 0.85; }

.fk-upgrade__price-yearly {
    font-family: var(--fk-font-mono);
    font-size: 0.8rem;
    color: var(--fk-fg-muted);
    margin-top: -0.4rem;
}
.fk-upgrade__price-yearly strong {
    color: var(--fk-fg);
    font-weight: 700;
}
.fk-upgrade__savings {
    color: var(--fk-blood);
    font-weight: 700;
}
.fk-upgrade__card--current .fk-upgrade__price-yearly,
.fk-upgrade__card--current .fk-upgrade__price-yearly strong,
.fk-upgrade__card--current .fk-upgrade__savings { color: var(--fk-white); }

.fk-upgrade__trial {
    font-family: var(--fk-font-mono);
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    color: var(--fk-blood);
    background: rgba(227, 18, 67, 0.08);
    padding: 0.4rem 0.6rem;
    border-radius: var(--fk-radius-sm);
    border: 1px dashed var(--fk-blood);
    align-self: flex-start;
}
.fk-upgrade__card--current .fk-upgrade__trial {
    background: rgba(255,255,255,0.15);
    color: var(--fk-white);
    border-color: var(--fk-white);
}

.fk-upgrade__cta-row {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin-top: 0.75rem;
}
.fk-upgrade__cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 12px 22px;
    background: var(--fk-blood);
    color: var(--fk-white);
    border: 2px solid var(--fk-blood);
    border-radius: var(--fk-radius-md);
    font-family: var(--fk-font-condensed);
    font-weight: 800;
    font-size: 0.9375rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    text-decoration: none;
    cursor: pointer;
    box-shadow: var(--fk-shadow-btn);
    transition: background-color var(--fk-dur-fast) var(--fk-ease),
                border-color var(--fk-dur-fast) var(--fk-ease),
                color var(--fk-dur-fast) var(--fk-ease),
                transform var(--fk-dur-fast) var(--fk-ease),
                box-shadow var(--fk-dur-fast) var(--fk-ease);
}
.fk-upgrade__cta:hover {
    background: var(--fk-ember);
    border-color: var(--fk-ember);
    transform: translateY(-1px);
    box-shadow: var(--fk-shadow-md);
}
.fk-upgrade__cta--ghost {
    background: transparent;
    color: var(--fk-fg);
    border-color: var(--fk-fg);
}
.fk-upgrade__cta--ghost:hover {
    background: var(--fk-fg);
    color: var(--fk-white);
    border-color: var(--fk-fg);
}
.fk-upgrade__nostripe {
    font-size: 0.85rem;
    color: var(--fk-fg-muted);
    font-style: italic;
}


/* ============================================================
   30. Partial: workout-detail (.fk-wd__*)
   ============================================================ */
.fk-wd { font-size: 0.875rem; }
.fk-wd__meta {
    display: flex; gap: 0.75rem; flex-wrap: wrap;
    margin-bottom: 0.75rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid var(--fk-border-soft);
    font-family: var(--fk-font-mono);
    font-size: 0.75rem;
    color: var(--fk-fg-muted);
}
.fk-wd__ex {
    margin-bottom: 0.5rem;
    display: flex; gap: 0.75rem; flex-wrap: wrap; align-items: baseline;
}
.fk-wd__exname { min-width: 140px; color: var(--fk-fg); font-weight: 700; }
.fk-wd__sets {
    font-family: var(--fk-font-mono);
    font-size: 0.8125rem;
    color: var(--fk-fg-muted);
    display: inline-flex; flex-wrap: wrap; gap: 0.5rem;
}
.fk-wd__set em {
    font-style: normal;
    opacity: 0.65;
    font-size: 0.7rem;
    margin-left: 2px;
}
.fk-wd__notes {
    margin-top: 0.5rem;
    padding-top: 0.5rem;
    border-top: 1px dashed var(--fk-border-soft);
    font-style: italic;
    color: var(--fk-fg-muted);
}
.fk-wd__empty {
    color: var(--fk-fg-muted);
    font-style: italic;
}

/* -------------------------------------------------------------
   30. Page: Členstvo — current subscription panel
   ------------------------------------------------------------- */
.fk-upgrade__current {
    background: var(--fk-white);
    border: 1px solid var(--fk-border-soft);
    border-radius: 6px;
    padding: 1rem 1.25rem;
    margin-bottom: 1.25rem;
    box-shadow: 0 1px 2px rgba(0,0,0,0.04);
}
.fk-upgrade__current--comp {
    border-left: 3px solid var(--fk-blood);
}
.fk-upgrade__current-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 0.5rem;
}
.fk-upgrade__current-label {
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--fk-fg-muted);
    font-weight: 600;
}
.fk-upgrade__current-badge {
    font-size: 0.75rem;
    font-weight: 700;
    padding: 0.2rem 0.55rem;
    border-radius: 999px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.fk-upgrade__current-badge--active {
    background: #d1fae5;
    color: #065f46;
}
.fk-upgrade__current-badge--trial {
    background: #fef3c7;
    color: #92400e;
}
.fk-upgrade__current-badge--cancelled {
    background: #fee2e2;
    color: #991b1b;
}
.fk-upgrade__current-badge--comp {
    background: var(--fk-blood);
    color: var(--fk-white);
}
.fk-upgrade__current-body {
    font-size: 1rem;
    color: var(--fk-fg);
    line-height: 1.55;
}
.fk-upgrade__current-body strong {
    font-weight: 700;
    font-size: 1.1rem;
}
.fk-upgrade__current-note {
    margin-top: 0.35rem;
    font-size: 0.85rem;
    color: var(--fk-fg-muted);
}
.fk-upgrade__current-actions {
    margin-top: 0.85rem;
    padding-top: 0.85rem;
    border-top: 1px dashed var(--fk-border-soft);
}

/* -------------------------------------------------------------
   31. Nástenka — expired banner
   ------------------------------------------------------------- */
.fk-na-expired {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1rem 1.25rem;
    margin-bottom: 1.25rem;
    background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
    border: 1px solid #f59e0b;
    border-radius: 6px;
    color: #78350f;
    text-decoration: none;
    transition: transform 200ms ease-in-out, box-shadow 200ms ease-in-out;
}
.fk-na-expired:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(245, 158, 11, 0.25);
    color: #78350f;
}
.fk-na-expired__icon {
    font-size: 2rem;
    line-height: 1;
    flex-shrink: 0;
}
.fk-na-expired__body {
    flex: 1;
    min-width: 0;
}
.fk-na-expired__title {
    font-size: 1.05rem;
    font-weight: 700;
    margin-bottom: 0.2rem;
}
.fk-na-expired__desc {
    font-size: 0.9rem;
    line-height: 1.4;
    opacity: 0.85;
}
.fk-na-expired__cta {
    font-weight: 700;
    flex-shrink: 0;
    padding-left: 0.5rem;
}
@media (max-width: 600px) {
    .fk-na-expired { flex-wrap: wrap; }
    .fk-na-expired__cta { width: 100%; text-align: right; }
}

/* -------------------------------------------------------------
   32. Nástenka — week strip + compact hero
   ------------------------------------------------------------- */
/* Outer wrap reserves vertical space so today's lift + shadow don't clip,
   while the inner .fk-na-week handles horizontal scroll. */
.fk-na-week-wrap {
    margin: 0.5rem 0 0.6rem;
    padding: 6px 0 10px; /* breathing room for today's translateY(-2px) + shadow */
}

/* Week navigation arrows — centered row BELOW the strip */
.fk-na-week-nav {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.6rem;
    margin-top: 0.75rem;
}
.fk-na-week-nav__btn {
    width: 38px;
    height: 32px;
    border-radius: 6px;
    border: 1px solid var(--fk-border-soft);
    background: var(--fk-white);
    color: var(--fk-fg);
    font-size: 1.4rem;
    line-height: 1;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background var(--fk-dur-fast) var(--fk-ease),
                border-color var(--fk-dur-fast) var(--fk-ease),
                color var(--fk-dur-fast) var(--fk-ease);
    flex-shrink: 0;
}
.fk-na-week-nav__btn:hover {
    background: var(--fk-blood);
    border-color: var(--fk-blood);
    color: var(--fk-white);
}
.fk-na-week {
    display: flex;
    align-items: stretch;
    gap: 0.5rem;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
}
.fk-na-week::-webkit-scrollbar { height: 4px; }
.fk-na-week::-webkit-scrollbar-thumb {
    background: var(--fk-border-soft);
    border-radius: 4px;
}
.fk-na-week__day {
    position: relative;
    background: var(--fk-white);
    border: 1px solid var(--fk-border-soft);
    border-radius: 8px;
    padding: 0.5rem 0.65rem 0.55rem;
    text-align: left;
    text-decoration: none;
    color: var(--fk-fg);
    transition: border-color var(--fk-dur-fast) var(--fk-ease),
                background var(--fk-dur-fast) var(--fk-ease),
                transform var(--fk-dur-fast) var(--fk-ease),
                box-shadow var(--fk-dur-fast) var(--fk-ease);
    flex: 1 0 110px;
    min-height: 78px;
    scroll-snap-align: start;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 0.35rem;
}
.fk-na-week__head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.4rem;
    line-height: 1;
}
.fk-na-week__label {
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-weight: 700;
    color: var(--fk-fg-muted);
}
.fk-na-week__num {
    font-size: 1.4rem;
    font-weight: 700;
    line-height: 1;
}
.fk-na-week__body {
    font-size: 0.95rem;
    font-weight: 600;
    line-height: 1.15;
    word-break: break-word;
}
/* Past — completed workout: grey filled, white text, clickable (opens summary modal) */
.fk-na-week__day--done {
    background: var(--fk-iron);
    border-color: var(--fk-iron);
    color: var(--fk-white);
    opacity: 1;
    cursor: pointer;
    font: inherit; /* normalize <button> defaults */
    text-align: left;
}
.fk-na-week__day--done:hover {
    background: var(--fk-ink);
    border-color: var(--fk-ink);
    color: var(--fk-white);
    transform: translateY(-1px);
}
.fk-na-week__day--done .fk-na-week__label,
.fk-na-week__day--done .fk-na-week__num {
    color: var(--fk-white);
    opacity: 0.95;
}
.fk-na-week__day--done .fk-na-week__body {
    color: var(--fk-white);
}

/* Past — rest day */
.fk-na-week__day--rest {
    opacity: 0.85;
}
.fk-na-week__day--rest .fk-na-week__body {
    color: #2E8B2E;
    font-weight: 700;
}

/* Today — red filled CTA (whole square is a link) */
.fk-na-week__day--today,
.fk-na-week__day--today_inprogress {
    background: var(--fk-blood);
    border: 2px solid var(--fk-blood);
    padding: calc(0.5rem - 1px) calc(0.65rem - 1px) calc(0.55rem - 1px);
    color: var(--fk-white);
    transform: translateY(-2px);
    box-shadow: 0 6px 14px rgba(227, 18, 67, 0.28);
}
.fk-na-week__day--today:hover,
.fk-na-week__day--today_inprogress:hover {
    background: var(--fk-ember);
    border-color: var(--fk-ember);
    color: var(--fk-white);
    transform: translateY(-3px);
}
.fk-na-week__day--today .fk-na-week__label,
.fk-na-week__day--today_inprogress .fk-na-week__label,
.fk-na-week__day--today .fk-na-week__num,
.fk-na-week__day--today_inprogress .fk-na-week__num {
    color: var(--fk-white);
    opacity: 0.9;
}
.fk-na-week__day--today .fk-na-week__body,
.fk-na-week__day--today_inprogress .fk-na-week__body {
    font-size: 1rem;
    font-weight: 800;
    line-height: 1.1;
}

/* Today — already done (workout completed before midnight tomorrow) */
.fk-na-week__day--today_done {
    background: var(--fk-white);
    border: 2px solid var(--fk-blood);
    padding: calc(0.5rem - 1px) calc(0.65rem - 1px) calc(0.55rem - 1px);
    color: var(--fk-fg);
}
.fk-na-week__day--today_done .fk-na-week__num,
.fk-na-week__day--today_done .fk-na-week__label {
    color: var(--fk-blood);
}

/* Future days — empty body, slightly faded */
.fk-na-week__day--future {
    opacity: 0.55;
    background: var(--fk-paper);
}

/* Mobile: všetkých 7 dní naraz v gride (žiadny horizontal scroll) */
@media (max-width: 640px) {
    .fk-na-week {
        display: grid;
        grid-template-columns: repeat(7, 1fr);
        gap: 0.2rem;
        overflow-x: visible;
        scroll-snap-type: none;
    }
    .fk-na-week__day {
        flex: none;
        min-height: 62px;
        padding: 0.3rem 0.15rem;
        gap: 0.1rem;
        justify-content: flex-start;
    }
    .fk-na-week__day--today,
    .fk-na-week__day--today_inprogress,
    .fk-na-week__day--today_done {
        padding: calc(0.3rem - 1px) calc(0.15rem - 1px);
    }
    .fk-na-week__head {
        flex-direction: column;
        align-items: center;
        gap: 0;
    }
    .fk-na-week__label { font-size: 0.5rem; }
    .fk-na-week__num { font-size: 0.95rem; }
    .fk-na-week__body,
    .fk-na-week__day--today .fk-na-week__body,
    .fk-na-week__day--today_inprogress .fk-na-week__body {
        font-size: 0.5rem;
        font-weight: 700;
        text-align: center;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        max-width: 100%;
        line-height: 1.1;
    }
}

/* Compact hero — smaller version for use under week strip */
.fk-na-hero--compact {
    padding: 1rem 1.25rem;
    margin-bottom: 1rem;
}
.fk-na-hero--compact .fk-na-hero__title {
    font-size: 1.3rem;
    margin: 0.2rem 0 0.4rem;
}
.fk-na-hero--compact .fk-na-hero__meta {
    font-size: 0.85rem;
    margin-bottom: 0.6rem;
}
.fk-na-hero--compact .fk-na-hero__cta {
    font-size: 0.95rem;
}

/* -------------------------------------------------------------
   33. Workout summary modal (fired from week strip)
   ------------------------------------------------------------- */
.fk-modal {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.5rem;
}
.fk-modal__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.55);
    backdrop-filter: blur(2px);
    cursor: pointer;
}
.fk-modal__content {
    position: relative;
    background: var(--fk-surface);
    border-radius: var(--fk-radius-md);
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.4);
    max-width: 720px;
    width: 100%;
    max-height: 85vh;
    overflow-y: auto;
    padding: 1.5rem 1.5rem 1.75rem;
}
.fk-modal__close {
    position: absolute;
    top: 0.5rem;
    right: 0.5rem;
    width: 44px;
    height: 44px;
    border: 0;
    background: transparent;
    color: var(--fk-fg-muted);
    font-size: 1.5rem;
    line-height: 1;
    cursor: pointer;
    border-radius: 4px;
    transition: background var(--fk-dur-fast) var(--fk-ease),
                color var(--fk-dur-fast) var(--fk-ease);
}
.fk-modal__close:hover {
    background: var(--fk-bone);
    color: var(--fk-fg);
}
.fk-modal__head {
    margin-bottom: 1rem;
    padding-right: 2.5rem;
    border-bottom: 1px solid var(--fk-border-soft);
    padding-bottom: 0.75rem;
}
.fk-modal__title {
    font-size: 1.4rem;
    font-weight: 700;
    margin: 0 0 0.3rem;
}
.fk-modal__meta {
    color: var(--fk-fg-muted);
    font-size: 0.875rem;
    font-family: 'Roboto Mono', monospace;
}
.fk-modal__body { font-size: 0.95rem; }

/* -------------------------------------------------------------
   34. Training edit — date picker
   ------------------------------------------------------------- */
.fk-tr-edit-label {
    display: block;
    font-size: 0.8rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--fk-fg-muted);
    margin: 0.25rem 0 0.35rem;
}
.fk-tr-edit-date {
    display: inline-block;
    font: inherit;
    font-family: 'Roboto', sans-serif;
    padding: 0.5rem 0.75rem;
    border: 1px solid var(--fk-border-soft);
    border-radius: 6px;
    background: var(--fk-white);
    color: var(--fk-fg);
    margin-bottom: 0.85rem;
    transition: border-color var(--fk-dur-fast) var(--fk-ease);
}
.fk-tr-edit-date:focus {
    outline: 2px solid var(--fk-blood);
    outline-offset: 1px;
    border-color: var(--fk-blood);
}

/* -------------------------------------------------------------
   35. Training page — header pills + start CTA
   ------------------------------------------------------------- */
.fk-tr-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin: 0 0 0.6rem;
}
.fk-tr-pill {
    display: inline-flex;
    align-items: center;
    padding: 0.25rem 0.7rem;
    border: 1.5px solid var(--fk-fg);
    border-radius: 999px;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--fk-fg);
    background: transparent;
    line-height: 1.4;
}
.fk-tr-pill--solid {
    background: var(--fk-fg);
    color: var(--fk-white);
}

.fk-tr-start {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.4rem;
    margin: 0 0 1rem;
}
.fk-tr-start__hint {
    font-size: 0.8rem;
    color: var(--fk-fg-muted);
    margin: 0;
}

.fk-tr-done-today {
    margin: 0 0 1rem;
    padding: 0.7rem 0.95rem;
    background: #E8F8E5;
    border: 1px solid #5BC044;
    border-radius: 6px;
    color: #1F5512;
    font-size: 0.9rem;
}
.fk-tr-done-today a {
    color: #1F5512;
    text-decoration: underline;
    font-weight: 700;
}

/* Pill label prefix (e.g. "Program:") */
.fk-tr-pill__label {
    font-weight: 700;
    margin-right: 0.25rem;
    opacity: 0.65;
}
.fk-tr-pill--solid .fk-tr-pill__label {
    opacity: 0.7;
}

/* Hero card variant: today's workout already done */
.fk-na-hero--done {
    display: block;
    width: 100%;
    text-align: left;
    background: var(--fk-surface);
    border: 1px solid #5BC044;
    border-radius: var(--fk-radius-md);
    box-shadow: var(--fk-shadow-card);
    padding: 1rem 1.25rem;
    margin-bottom: 1rem;
    cursor: pointer;
    color: var(--fk-fg);
    font: inherit;
    transition: transform var(--fk-dur-fast) var(--fk-ease),
                box-shadow var(--fk-dur-fast) var(--fk-ease);
}
.fk-na-hero--done:hover {
    transform: translateY(-1px);
    box-shadow: 0 6px 16px rgba(91, 192, 68, 0.18);
}
.fk-na-hero--done .fk-na-hero__eyebrow {
    color: #1F5512;
    font-weight: 700;
}
.fk-na-hero--done .fk-na-hero__title {
    margin: 0.2rem 0 0.5rem;
}
.fk-na-hero--done .fk-na-hero__cta {
    color: #1F5512;
    font-weight: 700;
}

/* -------------------------------------------------------------
   36. My progress — compact value badge in chart heading
   ------------------------------------------------------------- */
.fk-chart-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.75rem;
    flex-wrap: wrap;
    width: 100%;
}
.fk-chart-head__value {
    font-family: 'Roboto Mono', monospace;
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--fk-fg);
    display: inline-flex;
    align-items: baseline;
    gap: 0.5rem;
}
.fk-chart-head__delta {
    font-size: 0.85rem;
    font-weight: 600;
    padding: 0.1rem 0.45rem;
    border-radius: 4px;
}
.fk-chart-head__delta.is-down { background: #E8F8E5; color: #1F5512; }
.fk-chart-head__delta.is-up   { background: #FDECEC; color: #B9260E; }
.fk-chart-head__delta.is-flat { background: var(--fk-bone); color: var(--fk-fg-muted); }

/* -------------------------------------------------------------
   37. Weight stat cards (Štartovacia / Aktuálna / Cieľová)
   ------------------------------------------------------------- */
.fk-wstats {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.6rem;
    margin: 0;
}
@media (max-width: 600px) {
    .fk-wstats { grid-template-columns: 1fr; }
}
.fk-wstats__card {
    background: var(--fk-surface);
    border: 1px solid var(--fk-border-soft);
    border-radius: var(--fk-radius-md);
    box-shadow: var(--fk-shadow-card);
    padding: 0.85rem 1rem;
}
.fk-wstats__card--current {
    background: var(--fk-fg);
    border-color: var(--fk-fg);
    color: var(--fk-white);
}
.fk-wstats__label {
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-weight: 700;
    color: var(--fk-fg-muted);
    margin-bottom: 0.25rem;
}
.fk-wstats__card--current .fk-wstats__label { color: rgba(255, 255, 255, 0.75); }
.fk-wstats__value {
    font-family: 'Roboto Mono', monospace;
    font-size: 1.45rem;
    font-weight: 700;
    line-height: 1;
}
.fk-wstats__empty { color: var(--fk-fg-muted); font-weight: 500; }
.fk-wstats__delta {
    margin-top: 0.35rem;
    font-size: 0.78rem;
    color: var(--fk-fg-muted);
}
.fk-wstats__card--current .fk-wstats__delta { color: rgba(255, 255, 255, 0.8); }
.fk-wstats__delta.is-down { color: #5BC044; }
.fk-wstats__delta.is-up   { color: #FF8FA0; }
.fk-wstats__card--current .fk-wstats__delta.is-down { color: #B7F0A2; }
.fk-wstats__card--current .fk-wstats__delta.is-up   { color: #FFB8C2; }

/* Generic ruby red CTA button (works as standalone, e.g. in Filament headers) */
.fk-btn-blood {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.5rem 0.9rem;
    background: var(--fk-blood);
    color: var(--fk-white);
    border: 0;
    border-radius: 6px;
    font-size: 0.875rem;
    font-weight: 600;
    line-height: 1;
    cursor: pointer;
    box-shadow: var(--fk-shadow-btn);
    transition: background var(--fk-dur-fast) var(--fk-ease),
                transform var(--fk-dur-fast) var(--fk-ease);
}
.fk-btn-blood:hover {
    background: var(--fk-ember);
    color: var(--fk-white);
    transform: translateY(-1px);
}
.fk-btn-blood svg {
    flex-shrink: 0;
}

/* Blog category badge in card meta */
.fk-blog-card__cat {
    display: inline-block;
    padding: 1px 6px;
    border: 1px solid var(--fk-fg);
    border-radius: 999px;
    font-size: 0.65rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--fk-fg);
}

/* -------------------------------------------------------------
   38. Video lightbox modal — full-size Vimeo player
   ------------------------------------------------------------- */
.fk-vid-modal {
    /* extends .fk-modal layout */
}
.fk-vid-modal__content {
    position: relative;
    background: var(--fk-ink);
    border-radius: var(--fk-radius-md);
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.55);
    width: 100%;
    max-width: 1100px;
    max-height: 92vh;
    overflow: hidden;
    color: var(--fk-white);
    display: flex;
    flex-direction: column;
}
.fk-vid-modal__close {
    position: absolute;
    top: 8px;
    right: 10px;
    width: 36px;
    height: 36px;
    border: 0;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.6);
    color: var(--fk-white);
    font-size: 1.6rem;
    line-height: 1;
    cursor: pointer;
    z-index: 3;
    transition: background var(--fk-dur-fast) var(--fk-ease);
}
.fk-vid-modal__close:hover {
    background: var(--fk-blood);
}
.fk-vid-modal__player {
    position: relative;
    aspect-ratio: 16 / 9;
    width: 100%;
    background: #000;
    flex-shrink: 0;
}
.fk-vid-modal__player iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
}
.fk-vid-modal__meta {
    padding: 0.85rem 1.25rem 1.1rem;
    background: var(--fk-ink);
    color: var(--fk-white);
}
.fk-vid-modal__title {
    font-family: var(--fk-font-display) !important;
    font-weight: 900 !important;
    font-size: 1.1rem !important;
    line-height: 1.2 !important;
    margin: 0 0 0.3rem !important;
    color: var(--fk-white) !important;
}
.fk-vid-modal__desc {
    font-size: 0.875rem;
    color: rgba(255, 255, 255, 0.75);
    margin: 0;
    line-height: 1.45;
}

/* -------------------------------------------------------------
   39. Blog magazine layout — hero + secondary + grid
   ------------------------------------------------------------- */
.fk-blog-hero {
    display: grid;
    grid-template-columns: 1.4fr 1fr;
    background: var(--fk-surface);
    border: 1px solid var(--fk-border-soft);
    border-radius: var(--fk-radius-md);
    box-shadow: var(--fk-shadow-card);
    overflow: hidden;
    text-decoration: none;
    color: inherit;
    transition: transform var(--fk-dur-fast) var(--fk-ease),
                box-shadow var(--fk-dur-fast) var(--fk-ease),
                border-color var(--fk-dur-fast) var(--fk-ease);
}
@media (max-width: 800px) {
    .fk-blog-hero { grid-template-columns: 1fr; }
}
.fk-blog-hero:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.10);
    border-color: var(--fk-blood);
    color: inherit;
}
.fk-blog-hero__cover {
    aspect-ratio: 16 / 10;
    background: var(--fk-bone);
    overflow: hidden;
}
.fk-blog-hero__cover img {
    width: 100%; height: 100%; object-fit: cover;
    display: block;
    transition: transform var(--fk-dur-med) var(--fk-ease);
}
.fk-blog-hero:hover .fk-blog-hero__cover img { transform: scale(1.03); }
.fk-blog-hero__body {
    padding: 1.5rem 1.75rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 0.6rem;
}
.fk-blog-hero__meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    font-family: var(--fk-font-mono);
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--fk-fg-muted);
}
.fk-blog-hero__cat {
    background: var(--fk-blood);
    color: var(--fk-white);
    padding: 2px 8px;
    border-radius: 999px;
    font-weight: 700;
    letter-spacing: 0.05em;
}
.fk-blog-hero__date,
.fk-blog-hero__time {
    font-weight: 600;
}
.fk-blog-hero__date::before,
.fk-blog-hero__time::before { content: "• "; }
.fk-blog-hero__title {
    font-family: var(--fk-font-display) !important;
    font-weight: 900 !important;
    font-size: clamp(1.4rem, 2.6vw, 2rem) !important;
    line-height: 1.1 !important;
    margin: 0 !important;
    color: var(--fk-fg) !important;
}
.fk-blog-hero__excerpt {
    color: var(--fk-fg-muted);
    font-size: 0.95rem;
    line-height: 1.55;
    margin: 0;
}
.fk-blog-hero__cta {
    margin-top: 0.25rem;
    font-weight: 700;
    color: var(--fk-blood);
    font-size: 0.95rem;
}

/* Secondary row: 2 medium horizontal cards */
.fk-blog-secondary {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
}
@media (max-width: 800px) {
    .fk-blog-secondary { grid-template-columns: 1fr; }
}
.fk-blog-secondary__card {
    display: grid;
    grid-template-columns: 130px 1fr;
    background: var(--fk-surface);
    border: 1px solid var(--fk-border-soft);
    border-radius: var(--fk-radius-md);
    box-shadow: var(--fk-shadow-card);
    overflow: hidden;
    text-decoration: none;
    color: inherit;
    transition: transform var(--fk-dur-fast) var(--fk-ease),
                box-shadow var(--fk-dur-fast) var(--fk-ease),
                border-color var(--fk-dur-fast) var(--fk-ease);
}
@media (max-width: 480px) {
    .fk-blog-secondary__card { grid-template-columns: 1fr; }
}
.fk-blog-secondary__card:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 18px rgba(0, 0, 0, 0.08);
    border-color: var(--fk-blood);
    color: inherit;
}
.fk-blog-secondary__cover {
    aspect-ratio: 1 / 1;
    overflow: hidden;
    background: var(--fk-bone);
}
@media (max-width: 480px) {
    .fk-blog-secondary__cover { aspect-ratio: 16 / 9; }
}
.fk-blog-secondary__cover img { width: 100%; height: 100%; object-fit: cover; display: block; }
.fk-blog-secondary__body {
    padding: 0.85rem 1rem 0.95rem;
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}
.fk-blog-secondary__title {
    font-family: var(--fk-font-display) !important;
    font-weight: 900 !important;
    font-size: 1.1rem !important;
    line-height: 1.2 !important;
    margin: 0 !important;
}

/* "Ďalšie články" heading */
.fk-blog-section-title {
    font-family: var(--fk-font-mono) !important;
    text-transform: uppercase !important;
    letter-spacing: 0.08em !important;
    font-size: 0.8rem !important;
    font-weight: 700 !important;
    color: var(--fk-fg-muted) !important;
    margin: 0 0 0.5rem !important;
    padding-bottom: 0.5rem !important;
    border-bottom: 1px solid var(--fk-border-soft) !important;
}

.fk-blog-list-stack {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

/* Current check-in coach reply — slightly stronger callout than history */
.fk-coach-reply--current {
    padding: 1rem 1.25rem;
    border-left-width: 4px;
    box-shadow: 0 1px 3px rgba(46, 139, 46, 0.12);
    font-size: 0.95rem;
    line-height: 1.55;
}

/* Exercise info inside expanded card: thumbnail (lightbox trigger) + description */
.fk-tr-exinfo {
    display: grid;
    grid-template-columns: 160px 1fr;
    gap: 0.85rem;
    margin: 0.5rem 0 0.75rem;
}
@media (max-width: 540px) {
    .fk-tr-exinfo {
        grid-template-columns: 1fr;
        gap: 0.6rem;
    }
}
.fk-tr-exinfo__thumb {
    position: relative;
    aspect-ratio: 16 / 9;
    background: var(--fk-ink);
    border: 1px solid var(--fk-border-soft);
    border-radius: 6px;
    overflow: hidden;
    cursor: pointer;
    padding: 0;
}
.fk-tr-exinfo__thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform var(--fk-dur-med) var(--fk-ease);
}
.fk-tr-exinfo__thumb:hover img { transform: scale(1.04); }
.fk-tr-exinfo__play {
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    width: 42px;
    height: 42px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--fk-blood);
    color: var(--fk-white);
    border: 2px solid var(--fk-white);
    border-radius: 50%;
    font-size: 0.95rem;
    transition: transform var(--fk-dur-fast) var(--fk-ease);
}
.fk-tr-exinfo__thumb:hover .fk-tr-exinfo__play { transform: translate(-50%, -50%) scale(1.1); }
.fk-tr-exinfo__desc {
    font-size: 0.9rem;
    line-height: 1.5;
    color: var(--fk-fg);
    white-space: pre-line;
}

/* Per-exercise coach note — green callout */
.fk-tr-exnotes {
    margin: 0.5rem 0 0.75rem;
    padding: 0.6rem 0.85rem;
    background: rgba(91, 192, 68, 0.10);
    border-left: 3px solid #2E8B2E;
    border-radius: var(--fk-radius-sm);
    font-size: 0.9rem;
    line-height: 1.5;
}
.fk-tr-exnotes__label {
    display: block;
    font-family: var(--fk-font-mono);
    font-size: 0.65rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: #1F5512;
    margin-bottom: 0.2rem;
}

[x-cloak] { display: none !important; }

/* -------------------------------------------------------------
   42. Training — monthly calendar of completed workouts
   ------------------------------------------------------------- */
.fk-cal {
    display: flex;
    flex-direction: column;
    gap: 0.65rem;
}
.fk-cal-nav {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    justify-content: center;
}
.fk-cal-nav__btn {
    width: 36px;
    height: 32px;
    border-radius: 6px;
    border: 1px solid var(--fk-border-soft);
    background: var(--fk-white);
    color: var(--fk-fg);
    font-size: 1.3rem;
    line-height: 1;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background var(--fk-dur-fast) var(--fk-ease),
                border-color var(--fk-dur-fast) var(--fk-ease),
                color var(--fk-dur-fast) var(--fk-ease);
}
.fk-cal-nav__btn:hover {
    background: var(--fk-blood);
    border-color: var(--fk-blood);
    color: var(--fk-white);
}
.fk-cal-nav__label {
    background: transparent;
    border: 0;
    font-family: var(--fk-font-mono);
    font-size: 0.85rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--fk-fg);
    cursor: pointer;
    padding: 0.35rem 0.85rem;
    border-radius: 6px;
    min-width: 200px;
    text-align: center;
}
.fk-cal-nav__label:hover:not(:disabled) { background: var(--fk-bone); }
.fk-cal-nav__label:disabled { cursor: default; color: var(--fk-fg-muted); }

.fk-cal-grid {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 4px;
}
.fk-cal-grid__dow {
    font-family: var(--fk-font-mono);
    font-size: 0.65rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--fk-fg-muted);
    text-align: center;
    padding: 0.35rem 0;
}

.fk-cal-day {
    position: relative;
    min-height: 58px;
    background: var(--fk-white);
    border: 1px solid var(--fk-border-soft);
    border-radius: 6px;
    padding: 0.35rem 0.4rem;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: space-between;
    text-align: left;
    font: inherit;
    color: var(--fk-fg);
    overflow: hidden;
}
.fk-cal-day__num {
    font-size: 0.85rem;
    font-weight: 700;
    line-height: 1;
}
.fk-cal-day__name {
    font-size: 0.7rem;
    line-height: 1.15;
    color: var(--fk-white);
    opacity: 0.9;
    width: 100%;
    word-break: break-word;
}

/* Out-of-month: greyed out */
.fk-cal-day--out {
    background: var(--fk-paper);
    color: var(--fk-fg-muted);
    opacity: 0.45;
}

/* Future days (this month, no log): subtle */
.fk-cal-day--future {
    background: var(--fk-paper);
}

/* Today: ruby ring */
.fk-cal-day--today {
    border: 2px solid var(--fk-blood);
    padding: calc(0.35rem - 1px) calc(0.4rem - 1px);
}
.fk-cal-day--today .fk-cal-day__num { color: var(--fk-blood); }

/* Completed workout day: dark filled, clickable */
.fk-cal-day--done {
    background: var(--fk-iron);
    border-color: var(--fk-iron);
    color: var(--fk-white);
    cursor: pointer;
    opacity: 1;
    transition: background var(--fk-dur-fast) var(--fk-ease),
                transform var(--fk-dur-fast) var(--fk-ease);
}
.fk-cal-day--done:hover {
    background: var(--fk-ink);
    transform: translateY(-1px);
}
.fk-cal-day--done .fk-cal-day__num { color: var(--fk-white); }
.fk-cal-day--done.fk-cal-day--today {
    border-color: var(--fk-blood);
}
.fk-cal-day--done.fk-cal-day--today .fk-cal-day__num { color: var(--fk-blood); }

/* ============================================================
   ChoosePlan page (klient → vyber tréningový plán)
   Mobile-first: jeden stĺpec na ≤640, dva stĺpce desktop
   ============================================================ */
.fk-cp {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}
.fk-cp__head {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}
.fk-cp__back {
    font-family: var(--fk-font-mono);
    font-size: 0.75rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--fk-fg-muted);
    text-decoration: none;
    width: fit-content;
}
.fk-cp__back:hover {
    color: var(--fk-blood);
}
.fk-cp__lead {
    font-size: 0.95rem;
    line-height: 1.5;
    color: var(--fk-fg-muted);
    margin: 0;
}
.fk-cp__custom-cta {
    display: block;
    background: var(--fk-fg);
    color: var(--fk-white);
    border-radius: var(--fk-radius-md);
    padding: 1.25rem 1.5rem;
    text-decoration: none;
    transition: background var(--fk-dur-fast) var(--fk-ease);
}
.fk-cp__custom-cta:hover {
    background: var(--fk-blood);
}
.fk-cp__custom-cta-eyebrow {
    font-family: var(--fk-font-mono);
    font-size: 0.6875rem;
    letter-spacing: 0.14em;
    opacity: 0.7;
}
.fk-cp__custom-cta-title {
    font-size: 1.25rem;
    font-weight: 700;
    margin-top: 0.25rem;
}
.fk-cp__custom-cta-desc {
    font-size: 0.875rem;
    opacity: 0.85;
    margin-top: 0.5rem;
}
.fk-cp__grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem;
}
@media (min-width: 768px) {
    .fk-cp__grid {
        grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr));
        gap: 1.25rem;
    }
}
.fk-cp__card {
    background: var(--fk-surface);
    border: 1px solid var(--fk-border-soft);
    border-radius: var(--fk-radius-md);
    display: flex;
    flex-direction: column;
    box-shadow: var(--fk-shadow-card);
    overflow: hidden;
}
.fk-cp__card--active {
    border-color: var(--fk-blood);
}
.fk-cp__card--active .fk-cp__card-body {
    background: linear-gradient(180deg, rgba(227, 18, 67, 0.06), transparent);
}

/* ---- Hero header (obrázok / gradient + eyebrow + title) ---- */
.fk-cp__card-hero {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 10;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    overflow: hidden;
}
/* Fallback gradienty keď nie je nahraný obrázok */
.fk-cp__card-hero--template {
    background: linear-gradient(135deg, #1a1a1a 0%, #3d0d18 60%, #6b1228 100%);
}
.fk-cp__card-hero--custom {
    background: linear-gradient(135deg, #2c3e50 0%, #34495e 100%);
}
.fk-cp__card-hero--clone {
    background: linear-gradient(135deg, #3a2f5b 0%, #5a3d7a 100%);
}
.fk-cp__card-hero-overlay {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: 1rem 1.25rem;
    gap: 0.25rem;
    /* Dark gradient overlay zhora-dole pre čitateľnosť textu */
    background: linear-gradient(180deg, rgba(0, 0, 0, 0) 30%, rgba(0, 0, 0, 0.75) 100%);
}

.fk-cp__card-eyebrow {
    font-family: var(--fk-font-mono);
    font-size: 0.6875rem;
    letter-spacing: 0.14em;
    color: var(--fk-fg-muted);
    text-transform: uppercase;
}
/* Eyebrow vnútri hero overlay je biely a tučnejší (na tmavom pozadí) */
.fk-cp__card-hero-overlay .fk-cp__card-eyebrow {
    color: rgba(255, 255, 255, 0.85);
    font-weight: 600;
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.5);
}
.fk-cp__card-title {
    font-size: 1.125rem;
    font-weight: 700;
    margin: 0;
    color: var(--fk-fg);
}
/* Title v hero overlay — biely, väčší, dramatickejší ako predtým */
.fk-cp__card-hero-overlay .fk-cp__card-title {
    color: #fff;
    font-size: 1.5rem;
    line-height: 1.15;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.6);
}

/* ---- Body (zvyšok karty pod hero) ---- */
.fk-cp__card-body {
    padding: 1.25rem;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}
.fk-cp__card-desc {
    font-size: 0.875rem;
    color: var(--fk-fg-muted);
    margin: 0;
    line-height: 1.4;
}
.fk-cp__card-stats {
    display: flex;
    gap: 1.5rem;
    padding: 0.5rem 0;
    border-top: 1px solid var(--fk-border-soft);
    border-bottom: 1px solid var(--fk-border-soft);
}
.fk-cp__stat {
    display: flex;
    flex-direction: column;
}
.fk-cp__stat-value {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--fk-fg);
    line-height: 1;
}
.fk-cp__stat-label {
    font-family: var(--fk-font-mono);
    font-size: 0.6875rem;
    letter-spacing: 0.1em;
    color: var(--fk-fg-muted);
    text-transform: uppercase;
    margin-top: 0.25rem;
}
.fk-cp__card-workouts {
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
}
.fk-cp__card-workout {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.375rem 0;
    font-size: 0.875rem;
}
.fk-cp__card-workout-name {
    color: var(--fk-fg);
    font-weight: 500;
}
.fk-cp__card-workout-count {
    color: var(--fk-fg-muted);
    font-family: var(--fk-font-mono);
    font-size: 0.75rem;
}
.fk-cp__card-more {
    font-size: 0.75rem;
    color: var(--fk-fg-muted);
    font-style: italic;
}
.fk-cp__card-cta {
    background: var(--fk-fg);
    color: var(--fk-white);
    border: none;
    border-radius: var(--fk-radius-md);
    padding: 0.875rem 1rem;
    font-weight: 600;
    font-size: 0.9375rem;
    cursor: pointer;
    transition: background var(--fk-dur-fast) var(--fk-ease);
    min-height: 44px;
}
.fk-cp__card-cta:hover:not(:disabled) {
    background: var(--fk-blood);
}
.fk-cp__card-cta:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}
.fk-cp__card-active-tag {
    background: var(--fk-blood);
    color: var(--fk-white);
    border-radius: var(--fk-radius-md);
    padding: 0.625rem 0.875rem;
    text-align: center;
    font-weight: 600;
    font-size: 0.875rem;
    font-family: var(--fk-font-mono);
    letter-spacing: 0.06em;
}

/* ============================================================
   PlanBuilder page — klient si zostavuje vlastný plán
   ============================================================ */
.fk-pb {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}
.fk-pb__back {
    font-family: var(--fk-font-mono);
    font-size: 0.75rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--fk-fg-muted);
    text-decoration: none;
    width: fit-content;
}
.fk-pb__back:hover {
    color: var(--fk-blood);
}
.fk-pb__form {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}
.fk-pb__actions {
    position: sticky;
    bottom: 0;
    padding: 1rem 0;
    background: linear-gradient(180deg, transparent, var(--fk-surface) 30%);
    margin-top: 0.5rem;
}
.fk-pb__save {
    width: 100%;
    background: var(--fk-blood);
    color: var(--fk-white);
    border: none;
    border-radius: var(--fk-radius-md);
    padding: 1rem 1.5rem;
    font-weight: 700;
    font-size: 1rem;
    cursor: pointer;
    min-height: 52px;
    transition: background var(--fk-dur-fast) var(--fk-ease);
}
.fk-pb__save:hover:not(:disabled) {
    background: var(--fk-ember);
}
.fk-pb__save:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

/* ============================================================
   Training page — empty state (klient ešte nemá plán)
   + ghost pill variant pre "Zmeniť plán" / "Upraviť plán" links
   ============================================================ */
.fk-tr-empty {
    background: var(--fk-surface);
    border: 1px solid var(--fk-border-soft);
    border-radius: var(--fk-radius-md);
    padding: 2rem 1.5rem;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.75rem;
}
.fk-tr-empty__title {
    font-size: 1.25rem;
    font-weight: 700;
    margin: 0;
    color: var(--fk-fg);
}
.fk-tr-empty__lead {
    font-size: 0.95rem;
    color: var(--fk-fg-muted);
    margin: 0;
    max-width: 32rem;
    line-height: 1.5;
}
.fk-tr-empty__actions {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin-top: 0.5rem;
    width: 100%;
    max-width: 22rem;
}
@media (min-width: 480px) {
    .fk-tr-empty__actions {
        flex-direction: row;
        justify-content: center;
    }
}
.fk-tr-empty__actions .fk-tr-btn {
    flex: 1;
    text-decoration: none;
    text-align: center;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
}
.fk-tr-pill--ghost {
    background: transparent;
    border-color: var(--fk-border-soft);
    color: var(--fk-fg-muted);
    text-decoration: none;
    font-weight: 500;
}
.fk-tr-pill--ghost:hover {
    border-color: var(--fk-blood);
    color: var(--fk-blood);
}

/* ============================================================
   ChoosePlan — sekcie, my-plans row actions, ghost/danger variants
   ============================================================ */
.fk-cp__section {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    margin-top: 0.5rem;
}
.fk-cp__section-title {
    font-size: 1.125rem;
    font-weight: 700;
    color: var(--fk-fg);
    margin: 0;
}
.fk-cp__section-desc {
    font-size: 0.875rem;
    color: var(--fk-fg-muted);
    margin: 0;
}
.fk-cp__card-row-actions {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.5rem;
    margin-top: 0.5rem;
}
@media (min-width: 480px) {
    .fk-cp__card-row-actions {
        grid-template-columns: repeat(auto-fit, minmax(8rem, 1fr));
    }
}
.fk-cp__card-cta--ghost {
    background: transparent;
    color: var(--fk-fg);
    border: 1.5px solid var(--fk-border-soft);
    text-decoration: none;
    text-align: center;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.fk-cp__card-cta--ghost:hover {
    border-color: var(--fk-fg);
    background: var(--fk-fg);
    color: var(--fk-white);
}
.fk-cp__card-cta--danger {
    background: transparent;
    color: var(--fk-blood);
    border: 1.5px solid var(--fk-blood);
}
.fk-cp__card-cta--danger:hover:not(:disabled) {
    background: var(--fk-blood);
    color: var(--fk-white);
}
.fk-cp__card-hint {
    font-size: 0.75rem;
    color: var(--fk-fg-muted);
    text-align: center;
    font-style: italic;
    margin-top: -0.25rem;
}

/* ============================================================
   Training page — dynamic set controls (+/- série pri trackovaní)
   ============================================================ */
.fk-tr-set-controls {
    display: flex;
    gap: 0.5rem;
    margin-top: 0.75rem;
    padding-top: 0.75rem;
    border-top: 1px dashed var(--fk-border-soft);
}
.fk-tr-set-btn {
    flex: 1;
    background: transparent;
    border: 1.5px solid var(--fk-border-soft);
    border-radius: var(--fk-radius-md);
    padding: 0.625rem 0.875rem;
    min-height: 44px;
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--fk-fg);
    cursor: pointer;
    min-height: 44px;
    transition: all var(--fk-dur-fast) var(--fk-ease);
}
.fk-tr-set-btn:hover:not(:disabled) {
    border-color: var(--fk-fg);
    background: var(--fk-fg);
    color: var(--fk-white);
}
.fk-tr-set-btn--minus:hover:not(:disabled) {
    border-color: var(--fk-blood);
    background: var(--fk-blood);
    color: var(--fk-white);
}
.fk-tr-set-btn:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

/* ============================================================
   ChoosePlan — collapsible rozpis (workouts + exercises) per karta
   ============================================================ */
.fk-cp__details {
    background: rgba(0, 0, 0, 0.025);
    border: 1px solid var(--fk-border-soft);
    border-radius: var(--fk-radius-md);
    overflow: hidden;
}
.fk-cp__details[open] {
    background: var(--fk-surface);
}
.fk-cp__details-summary {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.625rem 0.875rem;
    cursor: pointer;
    list-style: none;
    user-select: none;
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--fk-fg);
    min-height: 44px;
}
.fk-cp__details-summary::-webkit-details-marker { display: none; }
.fk-cp__details-summary:hover {
    background: rgba(0, 0, 0, 0.04);
}
.fk-cp__details-label {
    font-family: var(--fk-font-mono);
    font-size: 0.75rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--fk-fg-muted);
}
.fk-cp__details[open] .fk-cp__details-label {
    color: var(--fk-fg);
}
.fk-cp__details-chevron {
    color: var(--fk-fg-muted);
    transition: transform var(--fk-dur-fast) var(--fk-ease);
}
.fk-cp__details[open] .fk-cp__details-chevron {
    transform: rotate(180deg);
}
.fk-cp__details-body {
    padding: 0.5rem 0.875rem 0.875rem;
    display: flex;
    flex-direction: column;
    gap: 0.875rem;
    border-top: 1px solid var(--fk-border-soft);
}
.fk-cp__details-workout {
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
}
.fk-cp__details-workout-head {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding-bottom: 0.25rem;
    border-bottom: 1px dashed var(--fk-border-soft);
}
.fk-cp__details-workout-num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.5rem;
    height: 1.5rem;
    background: var(--fk-fg);
    color: var(--fk-white);
    border-radius: 50%;
    font-family: var(--fk-font-mono);
    font-size: 0.75rem;
    font-weight: 700;
    flex-shrink: 0;
}
.fk-cp__details-workout-name {
    font-weight: 700;
    font-size: 0.9375rem;
    color: var(--fk-fg);
    flex: 1;
}
.fk-cp__details-workout-count {
    font-family: var(--fk-font-mono);
    font-size: 0.6875rem;
    letter-spacing: 0.08em;
    color: var(--fk-fg-muted);
    text-transform: uppercase;
}
.fk-cp__details-exercises {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
}
.fk-cp__details-exercise {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.25rem 0;
    font-size: 0.875rem;
}
.fk-cp__details-exercise-name {
    color: var(--fk-fg);
    flex: 1;
}
.fk-cp__details-exercise-sets {
    font-family: var(--fk-font-mono);
    color: var(--fk-fg-muted);
    font-weight: 600;
    flex-shrink: 0;
}

/* ============================================================
   Workouts page (klient) — at-home workout video knižnica
   Mobile-first: stack na ≤640, grid na ≥768
   ============================================================ */
.fk-wo {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

/* ---- Today hero ---------------------------------------------------- */
.fk-wo-hero {
    background: var(--fk-fg);
    color: var(--fk-white);
    border-radius: var(--fk-radius-md);
    padding: 1.5rem 1.25rem;
    box-shadow: var(--fk-shadow-card);
    display: flex;
    flex-direction: column;
    gap: 0.625rem;
}
.fk-wo-hero--done {
    background: linear-gradient(180deg, var(--fk-blood), var(--fk-ember));
}
.fk-wo-hero--empty {
    background: var(--fk-surface);
    color: var(--fk-fg);
    border: 1px dashed var(--fk-border-soft);
    text-align: center;
}
.fk-wo-hero__top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.5rem;
}
.fk-wo-hero__eyebrow {
    font-family: var(--fk-font-mono);
    font-size: 0.6875rem;
    letter-spacing: 0.14em;
    opacity: 0.75;
}
.fk-wo-hero__cat {
    background: rgba(255, 255, 255, 0.15);
    color: var(--fk-white);
    border-radius: 999px;
    padding: 2px 10px;
    font-size: 0.75rem;
    font-weight: 600;
}
.fk-wo-hero--empty .fk-wo-hero__cat { background: var(--fk-fg); color: var(--fk-white); }
.fk-wo-hero__title {
    font-size: 1.5rem;
    font-weight: 800;
    margin: 0;
    line-height: 1.2;
}
.fk-wo-hero__meta {
    font-family: var(--fk-font-mono);
    font-size: 0.8125rem;
    opacity: 0.85;
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
}
.fk-wo-hero__desc {
    font-size: 0.9375rem;
    opacity: 0.9;
    margin: 0;
    line-height: 1.5;
}
.fk-wo-hero__note {
    font-size: 0.8125rem;
    font-style: italic;
    opacity: 0.75;
    margin: 0;
    padding-left: 0.75rem;
    border-left: 2px solid rgba(255, 255, 255, 0.3);
}
.fk-wo-hero__actions {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin-top: 0.5rem;
}
@media (min-width: 480px) {
    .fk-wo-hero__actions { flex-direction: row; }
}

.fk-wo-btn {
    flex: 1;
    border: none;
    border-radius: var(--fk-radius-md);
    padding: 0.875rem 1.25rem;
    font-weight: 700;
    font-size: 0.9375rem;
    cursor: pointer;
    min-height: 48px;
    transition: all var(--fk-dur-fast) var(--fk-ease);
    text-align: center;
}
.fk-wo-btn--primary {
    background: var(--fk-blood);
    color: var(--fk-white);
}
.fk-wo-btn--primary:hover { background: var(--fk-ember); }
.fk-wo-btn--ghost {
    background: rgba(255, 255, 255, 0.1);
    color: var(--fk-white);
    border: 1.5px solid rgba(255, 255, 255, 0.3);
}
.fk-wo-btn--ghost:hover { background: rgba(255, 255, 255, 0.2); }
.fk-wo-btn--done {
    background: rgba(255, 255, 255, 0.95);
    color: var(--fk-blood);
}
.fk-wo-btn--done:hover { background: var(--fk-white); }

/* ---- Section headers --------------------------------------------- */
.fk-wo-section {
    margin-top: 0.5rem;
}
.fk-wo-section__title {
    font-size: 1.125rem;
    font-weight: 700;
    margin: 0;
    color: var(--fk-fg);
}
.fk-wo-section__desc {
    font-size: 0.875rem;
    color: var(--fk-fg-muted);
    margin: 0.25rem 0 0;
}

/* ---- Filters ----------------------------------------------------- */
.fk-wo-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 0.375rem;
}
.fk-wo-filter {
    background: transparent;
    border: 1.5px solid var(--fk-border-soft);
    border-radius: 999px;
    padding: 0.375rem 0.875rem;
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--fk-fg);
    cursor: pointer;
    min-height: 32px;
}
.fk-wo-filter:hover { border-color: var(--fk-fg); }
.fk-wo-filter.is-active {
    background: var(--fk-fg);
    color: var(--fk-white);
    border-color: var(--fk-fg);
}

/* ---- Library grid ------------------------------------------------ */
.fk-wo-library {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.75rem;
}
@media (min-width: 600px) {
    .fk-wo-library {
        grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
    }
}
.fk-wo-card {
    text-align: left;
    background: var(--fk-surface);
    border: 1px solid var(--fk-border-soft);
    border-radius: var(--fk-radius-md);
    padding: 0;
    cursor: pointer;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transition: border-color var(--fk-dur-fast) var(--fk-ease), transform var(--fk-dur-fast) var(--fk-ease);
}
.fk-wo-card:hover {
    border-color: var(--fk-blood);
    transform: translateY(-2px);
}
.fk-wo-card__thumb {
    position: relative;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    background: #000;
}
.fk-wo-card__thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.fk-wo-card__play {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--fk-white);
    font-size: 2rem;
    background: rgba(0, 0, 0, 0.25);
    transition: background var(--fk-dur-fast) var(--fk-ease);
}
.fk-wo-card:hover .fk-wo-card__play { background: rgba(0, 0, 0, 0.45); }
.fk-wo-card__body {
    padding: 0.75rem 0.875rem 0.875rem;
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
}
.fk-wo-card__head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-family: var(--fk-font-mono);
    font-size: 0.6875rem;
    letter-spacing: 0.08em;
    color: var(--fk-fg-muted);
    text-transform: uppercase;
}
.fk-wo-card__title {
    font-size: 0.9375rem;
    font-weight: 700;
    margin: 0;
    color: var(--fk-fg);
    line-height: 1.3;
}
.fk-wo-card__diff {
    align-self: flex-start;
    font-size: 0.6875rem;
    font-weight: 700;
    padding: 1px 8px;
    border-radius: 999px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}
.fk-wo-card__diff--easy   { background: #e6f6ec; color: #137a3b; }
.fk-wo-card__diff--medium { background: #fff4e0; color: #8a5500; }
.fk-wo-card__diff--hard   { background: #fde6ea; color: #b30d34; }

/* ============================================================
   Nástenka tile — split variant (2 čísla pod sebou)
   Použité pre „Odmakané tréningy" rozdelené at-home / silové
   ============================================================ */
.fk-na-tile--split {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}
.fk-na-tile__split {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}
.fk-na-tile__split-row {
    display: flex;
    align-items: baseline;
    gap: 0.5rem;
}
.fk-na-tile__split-num {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--fk-fg);
    line-height: 1;
    min-width: 2rem;
}
.fk-na-tile__split-label {
    font-family: var(--fk-font-mono);
    font-size: 0.6875rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--fk-fg-muted);
}

/* ============================================================
   Workouts page — mesačný kalendár (klient + admin variant)
   ============================================================ */

/* ---- Calendar navigation (klient) -------------------------- */
.fk-wo-cal-nav {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem;
    background: var(--fk-surface);
    border: 1px solid var(--fk-border-soft);
    border-radius: var(--fk-radius-md);
}
.fk-wo-cal-nav__label {
    flex: 1;
    text-align: center;
    font-weight: 700;
    font-size: 0.9375rem;
    color: var(--fk-fg);
}
.fk-wo-cal-nav__btn {
    background: var(--fk-fg);
    color: var(--fk-white);
    border: none;
    border-radius: var(--fk-radius-md);
    padding: 0.5rem 0.75rem;
    font-weight: 600;
    font-size: 0.875rem;
    cursor: pointer;
    min-width: 44px;
    min-height: 44px;
    transition: background var(--fk-dur-fast) var(--fk-ease);
}
.fk-wo-cal-nav__btn:hover:not(:disabled) { background: var(--fk-blood); }
.fk-wo-cal-nav__btn:disabled { opacity: 0.35; cursor: not-allowed; }
.fk-wo-cal-nav__btn--ghost {
    background: transparent;
    color: var(--fk-fg);
    border: 1.5px solid var(--fk-border-soft);
}
.fk-wo-cal-nav__btn--ghost:hover:not(:disabled) {
    background: var(--fk-fg);
    color: var(--fk-white);
}

/* ---- Month grid (zdieľaný klient + admin) ------------------- */
.fk-wo-month {
    background: var(--fk-surface);
    border: 1px solid var(--fk-border-soft);
    border-radius: var(--fk-radius-md);
    padding: 0.75rem;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}
.fk-wo-month--locked {
    opacity: 0.85;
    background: rgba(0, 0, 0, 0.02);
}
.fk-wo-month__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 0.25rem;
}
.fk-wo-month__title {
    font-size: 1.0625rem;
    font-weight: 800;
    margin: 0;
    color: var(--fk-fg);
}
.fk-wo-month__lock-badge {
    font-family: var(--fk-font-mono);
    font-size: 0.6875rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--fk-fg-muted);
    padding: 2px 8px;
    border: 1px solid var(--fk-border-soft);
    border-radius: 999px;
}
.fk-wo-month__dow {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 2px;
}
.fk-wo-month__dow-cell {
    font-family: var(--fk-font-mono);
    font-size: 0.6875rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    text-align: center;
    color: var(--fk-fg-muted);
    padding: 0.25rem 0;
}
.fk-wo-month__grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 2px;
}

/* ---- Calendar cells ---------------------------------------- */
.fk-wo-cell {
    position: relative;
    background: #fff;
    border: 1px solid var(--fk-border-soft);
    border-radius: 6px;
    padding: 0.25rem;
    min-height: 70px;
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
    overflow: hidden;
}
@media (min-width: 768px) {
    .fk-wo-cell { min-height: 92px; padding: 0.375rem; }
}
.fk-wo-cell--out {
    background: transparent;
    border-color: transparent;
    pointer-events: none;
}
.fk-wo-cell--out .fk-wo-cell__num {
    color: var(--fk-fg-muted);
    opacity: 0.35;
}
.fk-wo-cell--today {
    border-color: var(--fk-blood);
    border-width: 2px;
    box-shadow: 0 0 0 1px var(--fk-blood) inset;
}
.fk-wo-cell--done .fk-wo-cell__btn {
    background: linear-gradient(180deg, rgba(20, 122, 59, 0.1), rgba(20, 122, 59, 0.04));
    border-color: rgba(20, 122, 59, 0.4);
}
.fk-wo-cell--locked .fk-wo-cell__btn--locked {
    background: rgba(0, 0, 0, 0.025);
    color: var(--fk-fg-muted);
    cursor: not-allowed;
    border: 1px dashed var(--fk-border-soft);
}
.fk-wo-cell--rest {
    background: #fff;
}
.fk-wo-cell__num {
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--fk-fg);
    text-align: right;
    padding: 0 0.125rem;
}
.fk-wo-cell--today .fk-wo-cell__num {
    color: var(--fk-blood);
}
.fk-wo-cell__btn {
    flex: 1;
    background: rgba(227, 18, 67, 0.06);
    border: 1px solid rgba(227, 18, 67, 0.25);
    border-radius: 4px;
    padding: 0.25rem;
    cursor: pointer;
    text-align: left;
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
    overflow: hidden;
    color: var(--fk-fg);
    font-family: inherit;
    transition: background var(--fk-dur-fast) var(--fk-ease);
    position: relative;
}
.fk-wo-cell__btn:hover {
    background: rgba(227, 18, 67, 0.12);
}
.fk-wo-cell__title {
    font-size: 0.6875rem;
    font-weight: 700;
    line-height: 1.2;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}
.fk-wo-cell__cat {
    font-family: var(--fk-font-mono);
    font-size: 0.5625rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--fk-fg-muted);
}
/* Mobile: kategória zaberá miesto a názov sa preplní → skry, daj názvu priestor.
   Title ostáva 2-riadkový clamp (krátke názvy = 1 riadok prirodzene). */
@media (max-width: 640px) {
    .fk-wo-cell__cat { display: none; }
    .fk-wo-cell__btn { padding: 0.2rem; gap: 0; }
    .fk-wo-cell__title { font-size: 0.625rem; line-height: 1.15; }
}
.fk-wo-cell__done {
    position: absolute;
    top: 2px;
    right: 4px;
    color: rgb(20, 122, 59);
    font-weight: 700;
    font-size: 0.75rem;
}
.fk-wo-cell__add {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--fk-fg-muted);
    font-family: var(--fk-font-mono);
    font-size: 0.6875rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    opacity: 0;
    transition: opacity var(--fk-dur-fast) var(--fk-ease);
}
.fk-wo-cell--admin:hover .fk-wo-cell__add { opacity: 1; }
.fk-wo-cell--admin {
    text-decoration: none;
    color: inherit;
}
.fk-wo-cell--admin:hover {
    background: rgba(227, 18, 67, 0.04);
}
.fk-wo-cell__btn--admin {
    background: rgba(0, 0, 0, 0.04);
    border-color: var(--fk-border-soft);
}
.fk-wo-cell--admin:hover .fk-wo-cell__btn--admin {
    background: rgba(0, 0, 0, 0.08);
}

/* ---- Admin calendar nav ------------------------------------ */
.fk-wo-admin-cal {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}
.fk-wo-admin-cal__nav {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
}
.fk-wo-admin-cal__label {
    flex: 1;
    font-weight: 700;
    font-size: 1rem;
    text-align: center;
    min-width: 12rem;
}
.fk-wo-admin-cal__btn {
    background: var(--fk-fg);
    color: var(--fk-white);
    border: none;
    border-radius: var(--fk-radius-md);
    padding: 0.5rem 0.875rem;
    font-weight: 600;
    cursor: pointer;
    min-height: 40px;
    transition: background var(--fk-dur-fast) var(--fk-ease);
}
.fk-wo-admin-cal__btn:hover:not(:disabled) { background: var(--fk-blood); }
.fk-wo-admin-cal__btn:disabled { opacity: 0.35; cursor: not-allowed; }
.fk-wo-admin-cal__btn--ghost {
    background: transparent;
    color: var(--fk-fg);
    border: 1.5px solid var(--fk-border-soft);
}
.fk-wo-admin-cal__hint {
    font-size: 0.875rem;
    color: var(--fk-fg-muted);
    margin: 0;
    padding: 0.5rem 0.75rem;
    background: rgba(0, 0, 0, 0.025);
    border-radius: var(--fk-radius-md);
    border-left: 3px solid var(--fk-blood);
}

/* ---- Library collapsed details (klient) -------------------- */
.fk-wo-library-details {
    background: var(--fk-surface);
    border: 1px solid var(--fk-border-soft);
    border-radius: var(--fk-radius-md);
    overflow: hidden;
}
.fk-wo-library-details__summary {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem 1.25rem;
    cursor: pointer;
    list-style: none;
    user-select: none;
    font-weight: 700;
    color: var(--fk-fg);
    min-height: 52px;
}
.fk-wo-library-details__summary::-webkit-details-marker { display: none; }
.fk-wo-library-details__summary:hover { background: rgba(0, 0, 0, 0.025); }
.fk-wo-library-details__chevron {
    color: var(--fk-fg-muted);
    transition: transform var(--fk-dur-fast) var(--fk-ease);
}
.fk-wo-library-details[open] .fk-wo-library-details__chevron {
    transform: rotate(180deg);
}
.fk-wo-library-details__body {
    padding: 0 1.25rem 1.25rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    border-top: 1px solid var(--fk-border-soft);
}
.fk-wo-library__empty {
    color: var(--fk-fg-muted);
    font-size: 0.9375rem;
    padding: 1rem 0;
}

/* ============================================================
   Workout cell — mini ✓ toggle (priamy completion z kalendára)
   Pozícionovaný absolútne v rohu bunky, aby neprerážal layout.
   ============================================================ */
.fk-wo-cell__toggle {
    position: absolute;
    bottom: 2px;
    right: 2px;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.92);
    border: 1.5px solid var(--fk-border-soft);
    color: var(--fk-fg-muted);
    cursor: pointer;
    font-size: 0.75rem;
    font-weight: 700;
    line-height: 1;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all var(--fk-dur-fast) var(--fk-ease);
    z-index: 2;
}
/* Rozšírená tap area na ~38×38 bez zmeny vizuálnej veľkosti.
   Plný 44px sa nezmestil v rámci kalendárovej bunky bez prekrytia iných elementov. */
.fk-wo-cell__toggle::before {
    content: '';
    position: absolute;
    inset: -8px;
}
.fk-wo-cell__toggle:hover {
    border-color: var(--fk-blood);
    color: var(--fk-blood);
}
.fk-wo-cell__toggle.is-done {
    background: rgb(20, 122, 59);
    border-color: rgb(20, 122, 59);
    color: var(--fk-white);
}
.fk-wo-cell__toggle.is-done:hover {
    background: var(--fk-blood);
    border-color: var(--fk-blood);
}

/* ============================================================
   WorkoutDetail page — 2-col layout (info + player)
   Mobile-first: stack na ≤900, side-by-side na ≥900
   ============================================================ */
.fk-wd {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}
.fk-wd__back {
    font-family: var(--fk-font-mono);
    font-size: 0.75rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--fk-fg-muted);
    text-decoration: none;
    width: fit-content;
}
.fk-wd__back:hover { color: var(--fk-blood); }

.fk-wd__grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.25rem;
}
@media (min-width: 900px) {
    .fk-wd__grid {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr);
        gap: 1.75rem;
        align-items: start;
    }
}

/* ---- Left: info ---- */
.fk-wd__info {
    display: flex;
    flex-direction: column;
    gap: 0.875rem;
    background: var(--fk-surface);
    border: 1px solid var(--fk-border-soft);
    border-radius: var(--fk-radius-md);
    padding: 1.5rem 1.25rem;
}
.fk-wd__eyebrow {
    font-family: var(--fk-font-mono);
    font-size: 0.6875rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--fk-blood);
    font-weight: 700;
}
.fk-wd__title {
    font-size: 1.625rem;
    font-weight: 800;
    margin: 0;
    color: var(--fk-fg);
    line-height: 1.2;
}
@media (min-width: 900px) {
    .fk-wd__title { font-size: 1.875rem; }
}
.fk-wd__meta {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
    font-family: var(--fk-font-mono);
    font-size: 0.8125rem;
    color: var(--fk-fg-muted);
}
.fk-wd__desc {
    margin: 0;
    font-size: 0.95rem;
    line-height: 1.55;
    color: var(--fk-fg);
}
.fk-wd__date {
    font-size: 0.875rem;
    color: var(--fk-fg-muted);
    padding: 0.625rem 0.875rem;
    background: rgba(0, 0, 0, 0.03);
    border-radius: var(--fk-radius-md);
    border-left: 3px solid var(--fk-blood);
}
.fk-wd__date strong { color: var(--fk-fg); }

.fk-wd__actions {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin-top: 0.25rem;
}
@media (min-width: 480px) {
    .fk-wd__actions { flex-direction: row; }
}

.fk-wd-btn {
    flex: 1;
    border: none;
    border-radius: var(--fk-radius-md);
    padding: 0.875rem 1.25rem;
    font-weight: 700;
    font-size: 0.9375rem;
    cursor: pointer;
    min-height: 48px;
    transition: all var(--fk-dur-fast) var(--fk-ease);
    text-align: center;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-family: inherit;
}
.fk-wd-btn--primary {
    background: var(--fk-blood);
    color: var(--fk-white);
}
.fk-wd-btn--primary:hover:not(:disabled) { background: var(--fk-ember); }
.fk-wd-btn--primary:disabled { opacity: 0.7; cursor: default; }
.fk-wd-btn--check {
    background: transparent;
    color: var(--fk-fg);
    border: 1.5px solid var(--fk-border-soft);
}
.fk-wd-btn--check:hover {
    border-color: var(--fk-fg);
    background: var(--fk-fg);
    color: var(--fk-white);
}
.fk-wd-btn--done {
    background: rgb(20, 122, 59);
    color: var(--fk-white);
}
.fk-wd-btn--done:hover { background: rgb(15, 95, 45); }

/* ---- Right: player ---- */
.fk-wd__player {
    width: 100%;
}
.fk-wd__player-frame {
    position: relative;
    aspect-ratio: 16 / 9;
    background: #000;
    border-radius: var(--fk-radius-md);
    overflow: hidden;
    box-shadow: var(--fk-shadow-card);
}
.fk-wd__iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
}
.fk-wd__poster {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: none;
    background: #000;
    cursor: pointer;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}
.fk-wd__poster-img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0.78;
    transition: opacity var(--fk-dur-fast) var(--fk-ease);
}
.fk-wd__poster:hover .fk-wd__poster-img { opacity: 1; }
.fk-wd__poster-play {
    position: relative;
    z-index: 2;
    color: var(--fk-white);
    font-size: 4rem;
    text-shadow: 0 2px 12px rgba(0, 0, 0, 0.4);
    transition: transform var(--fk-dur-fast) var(--fk-ease);
}
.fk-wd__poster:hover .fk-wd__poster-play { transform: scale(1.15); }
.fk-wd__poster--empty {
    color: var(--fk-fg-muted);
    cursor: default;
    font-size: 0.875rem;
}

/* ============================================================
   READ-ONLY BANNER (F5.1 — expired klient)
   ============================================================ */
.fk-readonly-banner {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1rem 1.25rem;
    margin-bottom: 1.25rem;
    border: 1px solid #f6c97b;
    background: linear-gradient(135deg, #fff6e1 0%, #fff1d0 100%);
    border-radius: var(--fk-radius-md);
    box-shadow: var(--fk-shadow-card);
}
.fk-readonly-banner__icon {
    font-size: 1.5rem;
    flex-shrink: 0;
}
.fk-readonly-banner__body {
    flex: 1;
    min-width: 0;
}
.fk-readonly-banner__title {
    display: block;
    font-weight: 700;
    color: #7a4a00;
    margin-bottom: 0.125rem;
}
.fk-readonly-banner__text {
    margin: 0;
    color: #7a4a00;
    font-size: 0.875rem;
    line-height: 1.4;
}
.fk-readonly-banner__cta {
    flex-shrink: 0;
    padding: 0.5rem 1rem;
    background: var(--fk-accent);
    color: var(--fk-white);
    border-radius: var(--fk-radius-sm);
    font-weight: 600;
    font-size: 0.875rem;
    text-decoration: none;
    transition: background var(--fk-dur-fast) var(--fk-ease);
}
.fk-readonly-banner__cta:hover { background: var(--fk-accent-hover, var(--fk-accent)); filter: brightness(0.92); }
@media (max-width: 640px) {
    .fk-readonly-banner {
        flex-wrap: wrap;
        gap: 0.75rem;
    }
    .fk-readonly-banner__cta {
        width: 100%;
        text-align: center;
    }
}