/* ============================================================
 * app/index.css — extracted from index.html (Fáze 1 refactor 2026-05-16)
 * Original location: app/index.html řádky 50–3935 (3886 lines inline <style>)
 * Same content, no behavioral changes.
 * ============================================================ */

    *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
    .dash-feed-scroll::-webkit-scrollbar { display: none; }
    /* Story rings */
    .story-ring-wrap { display:flex;flex-direction:column;align-items:center;gap:4px;flex-shrink:0;cursor:pointer;-webkit-tap-highlight-color:transparent;width:64px;position:relative }
    .story-ring-wrap:active { opacity:.75; transform:scale(.95) }
    .story-ring { width:52px;height:52px;border-radius:50%;padding:2.5px;background:linear-gradient(135deg,#16a34a,#22c55e,#4ade80);margin:0 auto }
    .story-ring.seen { background:#d1d5db }
    .story-ring.unread { background:linear-gradient(135deg,#16a34a,#22c55e,#4ade80);animation:story-pulse 2.2s ease-in-out infinite }
    .story-ring-inner { width:100%;height:100%;border-radius:50%;overflow:hidden;background:var(--card);padding:2px;display:flex;align-items:center;justify-content:center }
    .story-ring-inner img { width:100%;height:100%;object-fit:cover;border-radius:50% }
    .story-ring-initials { width:100%;height:100%;border-radius:50%;background:var(--green-light);color:var(--green-dark);display:flex;align-items:center;justify-content:center;font-size:14px;font-weight:800;font-family:'Baloo 2',sans-serif }
    .story-ring-name { font-size:10px;color:var(--text-light);max-width:60px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-align:center;font-weight:600 }
    @keyframes story-pulse { 0%,100%{box-shadow:0 0 0 0 rgba(34,197,94,.5)} 50%{box-shadow:0 0 0 5px rgba(34,197,94,0)} }
    :root {
      --green:       #16a34a;
      --green-dark:  #15803d;
      --green-deep:  #166534;
      --green-light: #dcfce7;
      --green-mid:   #bbf7d0;
      --blue-dark:   #0f172a;
      --text:        #1a1a1a;
      --text-light:  #64748b;
      --bg:          #f8fafc;
      --card:        #ffffff;
      --border:      #e2e8f0;
      --radius:      12px;
      --radius-sm:   8px;
      --radius-lg:   16px;
      --radius-xl:   20px;
      --shadow:      0 1px 3px rgba(0,0,0,.08), 0 1px 2px rgba(0,0,0,.05);
      --shadow-md:   0 4px 12px rgba(0,0,0,.1);
    }
    /* ══ TMAVÝ REŽIM ══════════════════════════════════════
       Paleta: neutrální tmavá (inspirace: Notion, Linear, Apple HIG)
       BEZ modrého nádechu — funguje s libovolným akcentem
    ════════════════════════════════════════════════════════ */
    :root {
      --dm-bg:      #111111;   /* tmavé pozadí */
      --dm-card:    #1c1c1c;   /* karta / panel */
      --dm-card2:   #242424;   /* sekundární karta (vnořené prvky) */
      --dm-border:  #2c2c2c;   /* jemné ohraničení */
      --dm-text:    #efefef;   /* hlavní text */
      --dm-muted:   #888888;   /* vedlejší text */
      --dm-input:   #1f1f1f;   /* pozadí inputů */
      --dm-hover:   #222222;   /* hover stav */
      --dm-gl:      #052e16;   /* green-light na tmavém */
      --dm-gm:      #14532d;   /* green-mid na tmavém */
    }
    html[data-theme="dark"] {
      --bg:          var(--dm-bg);
      --card:        var(--dm-card);
      --border:      var(--dm-border);
      --text:        var(--dm-text);
      --text-light:  var(--dm-muted);
      --green-light: var(--dm-gl);
      --green-mid:   var(--dm-gm);
      --shadow:      0 1px 4px rgba(0,0,0,.5), 0 1px 2px rgba(0,0,0,.4);
      --shadow-md:   0 4px 16px rgba(0,0,0,.65);
    }

    /* Makro: pokrývá dark-mode variantu */

    /* Společná dark-mode přepsání (platí pro [data-theme="dark"] i media query) */
    html[data-theme="dark"] .app-header,
    html[data-theme="dark"] .bottom-nav,
    html[data-theme="dark"] .tab-bar          { background: var(--dm-card) !important; border-color: var(--dm-border) !important; }
    html[data-theme="dark"] .screen           { background: var(--dm-bg) !important; }
    html[data-theme="dark"] input,
    html[data-theme="dark"] textarea,
    html[data-theme="dark"] select             { background: var(--dm-input) !important; color: var(--dm-text) !important; border-color: var(--dm-border) !important; }
    html[data-theme="dark"] .modal-card,
    html[data-theme="dark"] .modal-sheet       { background: var(--dm-card) !important; }
    html[data-theme="dark"] .fullscreen-modal  { background: var(--dm-bg) !important; }
    html[data-theme="dark"] .fullscreen-modal-header { background: var(--dm-card) !important; border-color: var(--dm-border) !important; }
    html[data-theme="dark"] .header-dropdown   { background: var(--dm-card) !important; border-color: var(--dm-border) !important; box-shadow: 0 8px 24px rgba(0,0,0,.6) !important; }
    html[data-theme="dark"] .hd-item           { color: var(--dm-text) !important; }
    html[data-theme="dark"] .hd-item:hover     { background: var(--dm-hover) !important; }
    html[data-theme="dark"] .news-panel,
    html[data-theme="dark"] .news-panel-header { background: var(--dm-card) !important; border-color: var(--dm-border) !important; }
    html[data-theme="dark"] .admin-tab         { background: var(--dm-bg) !important; color: var(--dm-muted) !important; }
    html[data-theme="dark"] .admin-tab.active  { background: var(--dm-card) !important; color: var(--dm-text) !important; }
    html[data-theme="dark"] .rec-card,
    html[data-theme="dark"] .coach-panel,
    html[data-theme="dark"] .inbox-widget,
    html[data-theme="dark"] .tasks-widget,
    html[data-theme="dark"] .section-card,
    html[data-theme="dark"] .stat-card,
    html[data-theme="dark"] .profile-card,
    html[data-theme="dark"] .list-item-card    { background: var(--dm-card) !important; border-color: var(--dm-border) !important; }
    html[data-theme="dark"] .coach-panel-row,
    html[data-theme="dark"] .inbox-item,
    html[data-theme="dark"] .task-item,
    html[data-theme="dark"] .task-group-toggle,
    html[data-theme="dark"] .list-item         { border-color: var(--dm-border) !important; }
    html[data-theme="dark"] .bottom-sheet-handle,
    html[data-theme="dark"] .fullscreen-modal-handle { background: var(--dm-border) !important; }
    html[data-theme="dark"] .notif-panel,
    html[data-theme="dark"] .notif-panel-header { background: var(--dm-card) !important; border-color: var(--dm-border) !important; }
    html[data-theme="dark"] .time-field input,
    html[data-theme="dark"] .login-card         { background: var(--dm-card) !important; color: var(--dm-text) !important; border-color: var(--dm-border) !important; }
    html[data-theme="dark"] .news-item,
    html[data-theme="dark"] .news-card,
    html[data-theme="dark"] .news-teaser        { background: var(--dm-card) !important; border-color: var(--dm-border) !important; }
    html[data-theme="dark"] .news-item.unread   { background: var(--dm-gl) !important; border-left-color: var(--green) !important; }
    html[data-theme="dark"] .news-item-pinned   { background: var(--dm-card2) !important; }
    html[data-theme="dark"] .news-item-achievement { background: var(--dm-card2) !important; border-color: #d97706 !important; }
    html[data-theme="dark"] .share-banner { background: var(--dm-card) !important; border-color: #d97706 !important; }
    html[data-theme="dark"] .rs-emoji-btn { background: var(--dm-card) !important; border-color: var(--dm-border) !important; }
    html[data-theme="dark"] .rs-emoji-btn.selected { border-color: var(--green) !important; background: var(--dm-card2) !important; }
    html[data-theme="dark"] .rs-preview-wrap { border-color: var(--dm-border) !important; }
    html[data-theme="dark"] .poll-option        { background: var(--dm-card2) !important; color: var(--dm-text) !important; border-color: var(--dm-border) !important; }
    html[data-theme="dark"] .training-card,
    html[data-theme="dark"] .event-card,
    html[data-theme="dark"] .challenge-card,
    html[data-theme="dark"] .leaderboard-item  { background: var(--dm-card) !important; border-color: var(--dm-border) !important; }
    html[data-theme="dark"] .comment-bubble    { background: var(--dm-card2) !important; }
    html[data-theme="dark"] .hd-user           { border-color: var(--dm-border) !important; }
    /* Panely s pevně bílým pozadím */
    html[data-theme="dark"] .roster-panel,
    html[data-theme="dark"] .pay-sheet,
    html[data-theme="dark"] .late-cancel-sheet,
    html[data-theme="dark"] .register-bar,
    html[data-theme="dark"] .finance-month,
    html[data-theme="dark"] .stats-header,
    html[data-theme="dark"] .community-header,
    html[data-theme="dark"] .community-tabs,
    html[data-theme="dark"] .swipe-content,
    html[data-theme="dark"] .accordion,
    html[data-theme="dark"] .accordion-header,
    html[data-theme="dark"] .fullscreen-modal-footer,
    html[data-theme="dark"] .member-popup        { background: var(--dm-card) !important; border-color: var(--dm-border) !important; color: var(--dm-text) !important; }
    html[data-theme="dark"] .att-qr-modal        { background: var(--dm-bg) !important; }
    html[data-theme="dark"] .pr-dist-pill,
    html[data-theme="dark"] .type-btn             { background: var(--dm-card2) !important; color: var(--dm-text) !important; border-color: var(--dm-border) !important; }
    /* Reakce, emoji, narozeniny — dark mode */
    html[data-theme="dark"] .reaction-chip        { background: var(--dm-card) !important; border-color: var(--dm-border) !important; color: var(--dm-text) !important; }
    html[data-theme="dark"] .reaction-picker       { background: var(--dm-card) !important; border-color: var(--dm-border) !important; }
    html[data-theme="dark"] .nc-emoji-btn          { background: var(--dm-card) !important; border-color: var(--dm-border) !important; }
    html[data-theme="dark"] .bday-emoji-btn        { background: var(--dm-card) !important; border-color: #d946ef !important; }
    /* Chip výběr (runner info, watch, focus) */
    html[data-theme="dark"] .chip-btn              { background: var(--dm-card2) !important; border-color: var(--dm-border) !important; color: var(--dm-text) !important; }
    html[data-theme="dark"] .chip-btn.selected     { background: var(--green) !important; color: #fff !important; border-color: var(--green) !important; }
    html[data-theme="dark"] .runner-info-card       { background: var(--dm-card) !important; border-color: var(--dm-border) !important; }
    html[data-theme="dark"] .watch-training-card    { background: var(--dm-card) !important; border-color: var(--dm-border) !important; }
    /* Team races & carpool */
    html[data-theme="dark"] .team-race-card         { background: var(--dm-card) !important; border-color: var(--dm-border) !important; }
    html[data-theme="dark"] .share-team-active      { background: var(--dm-card2) !important; border-color: var(--green) !important; }
    html[data-theme="dark"] .team-race-modal        { background: var(--dm-card) !important; }
    html[data-theme="dark"] .carpool-opt            { background: var(--dm-card2) !important; border-color: var(--dm-border) !important; }
    html[data-theme="dark"] .runner-focus-chip      { background: var(--dm-card2) !important; border-color: var(--dm-border) !important; color: var(--dm-text) !important; }

    /* ── Catch-all: inline white/light backgrounds ─────── */
    html[data-theme="dark"] .card,
    html[data-theme="dark"] .card-body              { background: var(--dm-card) !important; border-color: var(--dm-border) !important; color: var(--dm-text) !important; }
    html[data-theme="dark"] .login-logo-area,
    html[data-theme="dark"] .login-form-container   { background: var(--dm-card) !important; }
    html[data-theme="dark"] .guest-list-item,
    html[data-theme="dark"] .admin-list-item        { border-color: var(--dm-border) !important; }
    html[data-theme="dark"] .guest-list-item:hover,
    html[data-theme="dark"] .admin-list-item:hover  { background: var(--dm-hover) !important; }
    html[data-theme="dark"] .att-guest-card          { background: var(--dm-card) !important; border-color: var(--dm-border) !important; }
    html[data-theme="dark"] .att-guest-actions       { border-color: var(--dm-border) !important; }
    html[data-theme="dark"] .attendance-toggle        { border-color: var(--dm-border) !important; }
    html[data-theme="dark"] .day-filter-btn           { background: var(--dm-card2) !important; color: var(--dm-text) !important; border-color: var(--dm-border) !important; }
    html[data-theme="dark"] .guest-search-input       { background: var(--dm-input) !important; color: var(--dm-text) !important; border-color: var(--dm-border) !important; }
    html[data-theme="dark"] .guest-new-form input     { background: var(--dm-input) !important; color: var(--dm-text) !important; border-color: var(--dm-border) !important; }
    html[data-theme="dark"] .guest-modal-body         { background: var(--dm-bg) !important; }
    html[data-theme="dark"] .dc-card                  { background: var(--dm-card) !important; border-color: var(--dm-border) !important; }
    html[data-theme="dark"] .dc-hero                  { background: var(--dm-card) !important; }
    html[data-theme="dark"] .template-card            { background: var(--dm-card) !important; border-color: var(--dm-border) !important; }
    html[data-theme="dark"] .health-card,
    html[data-theme="dark"] .health-option            { background: var(--dm-card) !important; border-color: var(--dm-border) !important; color: var(--dm-text) !important; }
    html[data-theme="dark"] .welcome-slide            { background: var(--dm-bg) !important; color: var(--dm-text) !important; }
    html[data-theme="dark"] .lb-podium-item           { background: var(--dm-card) !important; border-color: var(--dm-border) !important; }
    html[data-theme="dark"] .lb-row                   { border-color: var(--dm-border) !important; }
    html[data-theme="dark"] .lb-avatar                { background: var(--dm-card2) !important; color: var(--dm-text) !important; }
    html[data-theme="dark"] .merch-card               { background: var(--dm-card) !important; border-color: var(--dm-border) !important; }
    html[data-theme="dark"] .race-event-date          { background: var(--dm-card2) !important; color: var(--dm-text) !important; }
    html[data-theme="dark"] .feed-card                { background: var(--dm-card) !important; border-color: var(--dm-border) !important; }
    html[data-theme="dark"] .btn-outline              { background: var(--dm-card) !important; color: var(--dm-text) !important; border-color: var(--dm-border) !important; }
    html[data-theme="dark"] .form-group label         { color: var(--dm-muted) !important; }
    html[data-theme="dark"] .form-error               { color: #f87171 !important; }
    /* Inline [style] overrides for common light backgrounds */
    html[data-theme="dark"] [style*="background:#f8fafc"],
    html[data-theme="dark"] [style*="background: #f8fafc"],
    html[data-theme="dark"] [style*="background:#f1f5f9"],
    html[data-theme="dark"] [style*="background: #f1f5f9"]  { background: var(--dm-bg) !important; }
    html[data-theme="dark"] [style*="background:#fff"],
    html[data-theme="dark"] [style*="background: #fff"],
    html[data-theme="dark"] [style*="background:white"],
    html[data-theme="dark"] [style*="background: white"]     { background: var(--dm-card) !important; }
    html[data-theme="dark"] [style*="background:#fffbeb"],
    html[data-theme="dark"] [style*="background:#fff7ed"],
    html[data-theme="dark"] [style*="background:#fef9ec"],
    html[data-theme="dark"] [style*="background:#fef2f2"],
    html[data-theme="dark"] [style*="background:#eff6ff"],
    html[data-theme="dark"] [style*="background:#f0fdf4"]    { background: var(--dm-card2) !important; }
    html[data-theme="dark"] [style*="color:#1a1a1a"],
    html[data-theme="dark"] [style*="color: #1a1a1a"],
    html[data-theme="dark"] [style*="color:#0f172a"],
    html[data-theme="dark"] [style*="color: #0f172a"]        { color: var(--dm-text) !important; }

    /* ══════════════════════════════════════════════════════ */

    /* Scroll container = body (explicitně, ne html).
       Důvod: iframe-based prostředí (Claude Code preview pane, embed widgety)
       neumí spolehlivě propagovat scroll z root html — chovají se, jako kdyby
       html scroll nešel. Body s explicitním overflow-y: auto + fixní výškou
       100dvh funguje všude: normální Chrome, Safari mobile, iframe embed.

       POZOR: body NIKDY nesmí mít overflow-x: hidden bez současného nastavení
       overflow-y na konkrétní hodnotu (auto/scroll/hidden). CSS spec by jinak
       promotovala overflow-y z visible na auto a body by se stal scroll-containerem
       VELIKOSTI OBSAHU (tj. body.scrollHeight === body.clientHeight → nemá co
       scrollovat → document scroll umře všude kromě sekcí s vlastním overflow:auto).
       Tady to ošetřujeme tím, že obě osy nastavujeme explicitně. */
    html {
      scroll-behavior: smooth;
      height: 100%;
      overflow: hidden; /* html nescrolluje, scroll je na body */
      overscroll-behavior-y: none;
    }
    body {
      font-family: 'Open Sans', sans-serif; font-size: 15px;
      color: var(--text); background: var(--bg);
      height: 100vh;
      height: 100dvh;
      overflow-y: auto;
      overflow-x: hidden;
      overscroll-behavior-y: none;
      -webkit-overflow-scrolling: touch;
      max-width: 100%;
    }
    img, video, iframe, canvas { max-width: 100%; height: auto; }
    h1,h2,h3,h4 { font-family: 'Baloo 2', sans-serif; line-height: 1.25; }
    a { color: inherit; text-decoration: none; }
    button { cursor: pointer; border: none; outline: none; font-family: inherit; }
    /* Keyboard focus ring — visible only for keyboard navigation */
    :focus-visible { outline: 2px solid var(--green); outline-offset: 2px; border-radius: 4px; }
    button:focus-visible, .btn:focus-visible, .toggle-btn:focus-visible { outline: 2px solid var(--green); outline-offset: 2px; }

    /* ── HELPERS ─────────────────────────────────────── */
    .hidden { display: none !important; }
    .screen { display: none; }
    .screen.active { display: block; }

    /* ── BUTTONS ─────────────────────────────────────── */
    .btn {
      display: inline-flex; align-items: center; justify-content: center; gap: 6px;
      padding: 12px 24px; border-radius: var(--radius-sm);
      font-family: 'Baloo 2', sans-serif; font-weight: 700; font-size: 15px;
      transition: all .2s; cursor: pointer;
    }
    .btn-green { background: var(--green); color: #fff; }
    .btn-green:hover { background: var(--green-dark); transform: translateY(-1px); }
    .btn-green:disabled { background: #a3d9b8; cursor: not-allowed; transform: none; }
    .btn-outline { border: 2px solid var(--green); color: var(--green); background: transparent; }
    .btn-outline:hover { background: var(--green); color: #fff; }
    .btn-red { background: #ef4444; color: #fff; }
    .btn-red:hover { background: #dc2626; }
    .btn-gray { background: var(--border); color: var(--text-light); }
    .btn-full { width: 100%; }

    /* ── LANDING PAGE ───────────────────────────────── */
    #screen-landing {
      height: 100vh; height: 100dvh;
      background: linear-gradient(135deg, #0f172a 0%, #16a34a 100%);
      display: none; flex-direction: column; align-items: center; color: white;
      overflow-y: auto; -webkit-overflow-scrolling: touch;
      padding-top: env(safe-area-inset-top, 0px);
      padding-bottom: env(safe-area-inset-bottom, 0px);
    }
    #screen-landing > * { flex-shrink: 0; }
    .landing-hero {
      width: 100%; max-width: 600px; padding: 40px 24px 20px; text-align: center;
    }
    .landing-hero img.hero-photo {
      width: 100%; max-height: 260px; object-fit: cover; border-radius: 16px;
      margin-bottom: 20px; box-shadow: 0 8px 30px rgba(0,0,0,.3);
    }
    .landing-hero h1 { font-family: 'Baloo 2', sans-serif; font-size: 32px; font-weight: 800; margin: 0 0 6px; letter-spacing: -.5px; }
    .landing-hero .claim { font-size: 16px; opacity: .85; margin: 0 0 24px; line-height: 1.5; }
    .landing-features {
      display: grid; grid-template-columns: 1fr 1fr; gap: 10px;
      width: 100%; max-width: 600px; padding: 0 24px;
    }
    .landing-feat {
      background: rgba(255,255,255,.12); backdrop-filter: blur(8px);
      border-radius: 14px; padding: 16px 14px; text-align: center;
    }
    .landing-feat .feat-icon { font-size: 28px; margin-bottom: 6px; }
    .landing-feat .feat-title { font-weight: 700; font-size: 14px; margin-bottom: 2px; }
    .landing-feat .feat-desc { font-size: 12px; opacity: .75; line-height: 1.4; }
    .landing-info {
      width: 100%; max-width: 600px; padding: 24px; text-align: center;
    }
    .landing-info .price-box {
      background: rgba(255,255,255,.15); border-radius: 14px; padding: 18px 20px;
      margin-bottom: 16px; backdrop-filter: blur(8px);
    }
    .landing-info .price-box .price { font-family: 'Baloo 2', sans-serif; font-size: 28px; font-weight: 800; }
    .landing-info .price-box .price-desc { font-size: 13px; opacity: .8; margin-top: 4px; line-height: 1.5; }
    .landing-testimonials {
      width: 100%; max-width: 600px; padding: 0 24px 8px; text-align: center;
    }
    .landing-testimonials h2 {
      font-family: 'Baloo 2', sans-serif; font-size: 20px; font-weight: 800;
      margin: 0 0 14px; opacity: .95;
    }
    .testimonial-card {
      background: rgba(255,255,255,.12); backdrop-filter: blur(8px);
      border-radius: 14px; padding: 18px 18px 14px; margin-bottom: 10px;
      text-align: left; position: relative;
    }
    .testimonial-card::before {
      content: '\201C'; font-size: 36px; font-family: Georgia, serif;
      line-height: 1; position: absolute; top: 10px; left: 14px; opacity: .4;
    }
    .testimonial-card .tq-text {
      font-size: 14px; font-style: italic; line-height: 1.5; opacity: .9;
      padding-left: 22px;
    }
    .testimonial-card .tq-author {
      font-size: 12px; font-weight: 700; opacity: .7; margin-top: 8px;
      text-align: right;
    }
    .landing-cta {
      width: 100%; max-width: 600px; padding: 0 24px 40px; text-align: center;
    }
    .landing-cta .btn-landing {
      display: block; width: 100%; padding: 16px; border: none; border-radius: 14px;
      background: white; color: #16a34a; font-family: 'Baloo 2', sans-serif;
      font-size: 18px; font-weight: 800; cursor: pointer; margin-bottom: 12px;
      box-shadow: 0 4px 20px rgba(0,0,0,.2); transition: transform .15s;
    }
    .landing-cta .btn-landing:active { transform: scale(.97); }
    .landing-cta .link-login { color: rgba(255,255,255,.7); font-size: 14px; cursor: pointer; }
    .landing-cta .link-login a { color: white; font-weight: 700; text-decoration: underline; cursor: pointer; }

    /* ── LOGIN SCREEN ────────────────────────────────── */
    #screen-login {
      height: 100vh; height: 100dvh;
      display: none; flex-direction: column;
      align-items: center;
      background: linear-gradient(135deg, #0f172a 0%, #16a34a 100%);
      padding: 24px;
      padding-top: calc(24px + env(safe-area-inset-top, 0px));
      padding-bottom: calc(24px + env(safe-area-inset-bottom, 0px));
      overflow-y: auto; -webkit-overflow-scrolling: touch;
    }
    /* margin: auto centruje login-card když se vejde do viewportu;
       když má registrace víc polí než výška obrazovky, auto resolves na 0
       a uvnitř #screen-login se zapne scroll (overflow-y: auto výše). */
    .login-card {
      background: white; border-radius: 20px; padding: 40px 32px;
      width: 100%; max-width: 400px; box-shadow: 0 20px 60px rgba(0,0,0,.3);
      margin: auto 0;
      flex-shrink: 0;
    }
    .login-logo {
      text-align: center; margin-bottom: 32px;
    }
    .login-logo .logo-img { width: 220px; height: auto; object-fit: contain; mix-blend-mode: multiply; display: block; margin: 0 auto; outline: none; border: none; }
    .login-logo .subtitle { color: var(--text-light); font-size: 13px; margin-top: 4px; }
    .login-tabs { display: flex; gap: 0; margin-bottom: 28px; border-radius: var(--radius-sm); overflow: hidden; border: 1px solid var(--border); }
    .login-tab { flex: 1; padding: 10px; text-align: center; font-family: 'Baloo 2', sans-serif; font-weight: 600; font-size: 14px; background: var(--bg); color: var(--text-light); cursor: pointer; transition: all .2s; }
    .login-tab.active { background: var(--green); color: white; }
    .form-group { margin-bottom: 16px; }
    .form-group label { display: block; font-weight: 600; font-size: 13px; margin-bottom: 6px; color: var(--text-light); text-transform: uppercase; letter-spacing: .5px; }
    .form-group input {
      width: 100%; padding: 12px 16px; border: 1.5px solid var(--border); border-radius: var(--radius-sm);
      font-size: 15px; font-family: inherit; transition: border-color .2s;
    }
    .form-group input:focus { outline: none; border-color: var(--green); }
    .form-error { color: #ef4444; font-size: 13px; margin-top: 8px; display: none; }
    .pwd-strength { margin-top: 6px; }
    .pwd-strength-bar { height: 4px; background: #eee; border-radius: 2px; overflow: hidden; }
    .pwd-strength-fill { height: 100%; width: 0; transition: width .2s, background-color .2s; }
    .pwd-strength-label { font-size: 11px; margin-top: 4px; font-weight: 600; }
    /* Password input s "oko" toggle */
    .pwd-wrap { position: relative; }
    .pwd-wrap input { padding-right: 44px !important; }
    .pwd-toggle { position: absolute; right: 8px; top: 50%; transform: translateY(-50%); background: none; border: none; cursor: pointer; padding: 6px 8px; font-size: 16px; color: var(--text-light); border-radius: 8px; line-height: 1; }
    .pwd-toggle:hover { background: var(--bg); color: var(--text); }
    /* Password requirements live checklist */
    .pwd-checklist { font-size: 12px; margin-top: 8px; display: grid; gap: 4px; }
    .pwd-check { display: flex; align-items: center; gap: 6px; color: var(--text-light); transition: color .15s; }
    .pwd-check.ok { color: #16a34a; }
    .pwd-check-icon { display: inline-flex; width: 16px; height: 16px; align-items: center; justify-content: center; flex-shrink: 0; font-size: 11px; font-weight: 700; }
    /* Modal pro change-password — vlastní padding a struktura */
    .change-pwd-modal { padding: 24px; padding-bottom: calc(24px + env(safe-area-inset-bottom, 0px)); }
    .change-pwd-modal .pwd-section { margin-bottom: 14px; }
    .change-pwd-modal label { display: block; font-size: 12px; font-weight: 700; color: var(--text-light); text-transform: uppercase; letter-spacing: .4px; margin-bottom: 6px; }
    .change-pwd-modal input[type="password"], .change-pwd-modal input[type="text"].pwd-input { width: 100%; padding: 12px 14px; border: 1.5px solid var(--border); border-radius: var(--radius-sm); font-size: 15px; font-family: inherit; transition: border-color .15s; outline: none; background: var(--card); color: var(--text); }
    .change-pwd-modal input[type="password"]:focus, .change-pwd-modal input[type="text"].pwd-input:focus { border-color: var(--green); }
    .form-error.show { display: block; }
    .cm-day-btn { padding:6px 14px;border-radius:20px;border:1.5px solid var(--border);background:var(--card);font-size:13px;font-weight:600;cursor:pointer;font-family:inherit;color:var(--text);transition:all .15s }
    .cm-day-btn.active { background:var(--green);color:white;border-color:var(--green) }
    .pace-hint { font-size: 13px; font-weight: 700; color: var(--green); white-space: nowrap; transition: opacity .2s; }

    /* ── RECORDS CARD ────────────────────────────────── */
    .rec-card { background: #f8fafc; border-radius: 14px; padding: 16px; margin-bottom: 12px; border: 1px solid var(--border); }
    .rec-card-header { display: flex; align-items: center; gap: 8px; margin-bottom: 14px; }
    .rec-card-icon { font-size: 22px; }
    .rec-card-label { font-size: 15px; font-weight: 700; flex: 1; }
    .rec-card-inputs { display: flex; align-items: flex-end; gap: 6px; }
    .time-field { display: flex; flex-direction: column; align-items: center; gap: 5px; }
    .time-field input {
      text-align: center; font-size: 28px; font-weight: 700; line-height: 1;
      border: 2px solid var(--border); border-radius: 10px; padding: 10px 4px;
      background: white; width: 64px; box-sizing: border-box;
    }
    .time-field.tf-h input { width: 50px; }
    .time-field input:focus { border-color: var(--green); outline: none; }
    .time-field-lbl { font-size: 11px; color: var(--text-light); font-weight: 700; text-transform: uppercase; letter-spacing: .04em; }
    .time-sep-big { font-size: 28px; font-weight: 900; color: #cbd5e1; padding-bottom: 26px; flex-shrink: 0; }

    /* ── PENDING / REJECTED SCREEN ──────────────────── */
    #screen-pending {
      height: 100vh; height: 100dvh;
      display: none; flex-direction: column;
      align-items: center;
      background: linear-gradient(135deg, #0f172a 0%, #16a34a 100%);
      padding: 24px;
      padding-top: calc(24px + env(safe-area-inset-top, 0px));
      padding-bottom: calc(24px + env(safe-area-inset-bottom, 0px));
      overflow-y: auto; -webkit-overflow-scrolling: touch;
    }
    /* Pending card má .login-card třídu (sdílí styl), margin:auto centruje ji */
    .pending-badge {
      display: inline-flex; align-items: center; justify-content: center;
      min-width: 18px; height: 18px; padding: 0 5px;
      background: #ef4444; color: white; font-size: 10px; font-weight: 800;
      border-radius: 10px; margin-left: 4px; vertical-align: middle;
    }

    /* ── APP LAYOUT ──────────────────────────────────── */
    /* iOS PWA: 100dvh sleduje dynamický viewport (Safari chrome). Padding-bottom
       rozšířen o safe-area, aby content nezůstával schovaný pod home-indicator
       na iPhone X+ (bottom-nav sám má env(safe-area-inset-bottom), takže jeho
       fyzická výška je 72px + safe-area — #app musí matchnout). */
    #app {
      max-width: 480px; margin: 0 auto;
      min-height: 100vh;
      min-height: 100dvh;
      display: flex; flex-direction: column;
      padding-bottom: calc(72px + env(safe-area-inset-bottom, 0px));
    }

    /* ── TOP HEADER ──────────────────────────────────── */
    .app-header {
      position: sticky; top: 0; z-index: 100;
      background: var(--card); border-bottom: 1px solid var(--border);
      padding: 0 16px;
      padding-top: max(env(safe-area-inset-top), 20px);
      display: flex; align-items: center; justify-content: space-between;
      height: calc(56px + max(env(safe-area-inset-top), 20px));
    }
    .app-header .header-left { display: flex; align-items: center; gap: 10px; }
    .app-header .logo { display: flex; align-items: center; }
    .app-header .logo img { height: 40px; width: auto; object-fit: contain; mix-blend-mode: multiply; transition: opacity .2s }
    .logo-chevron { font-size:10px;color:var(--text-light);margin-left:2px;transition:transform .2s;user-select:none }
    .app-header .header-right { display: flex; align-items: center; gap: 10px; }
    /* Role pill — switcher view-mode v hlavičce (multi-role useři + admin preview) */
    .role-pill {
      display: inline-flex; align-items: center; gap: 6px;
      padding: 6px 12px; border-radius: 999px;
      border: 1px solid var(--border); background: var(--card); color: var(--text);
      font-size: 13px; font-weight: 600; font-family: inherit;
      cursor: pointer; transition: background .15s, border-color .15s, color .15s;
      white-space: nowrap; line-height: 1;
    }
    .role-pill:hover { background: var(--bg); border-color: var(--green); color: var(--green); }
    .role-pill[hidden] { display: none !important; }
    .role-pill-icon { font-size: 14px; }
    .role-pill-chevron { font-size: 10px; opacity: .6; }
    @media (max-width: 480px) {
      .role-pill { padding: 5px 10px; font-size: 12px; gap: 5px; }
      .role-pill-label { max-width: 80px; overflow: hidden; text-overflow: ellipsis; }
      .role-pill-chevron { font-size: 9px; }
    }
    .notification-btn {
      width: 40px; height: 40px; border-radius: 50%;
      background: var(--bg); border: 1.5px solid var(--border);
      display: flex; align-items: center; justify-content: center; font-size: 20px;
      position: relative; cursor: pointer;
      transition: background .15s, border-color .15s;
    }
    .notification-btn:active { background: var(--green-light); border-color: var(--green); }
    .refresh-btn {
      width: 44px; height: 44px; border-radius: 50%;
      background: transparent; border: none;
      display: flex; align-items: center; justify-content: center;
      font-size: 17px; cursor: pointer; color: var(--text-light);
      transition: color .15s; padding: 0;
    }
    .refresh-btn:active { color: var(--green); }
    @keyframes spin-once { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
    /* QR success pop-in — zelený ✅ na confirm obrazovce */
    @keyframes _qrPop {
      0% { transform: scale(0.3); opacity: 0; }
      60% { transform: scale(1.15); opacity: 1; }
      100% { transform: scale(1); opacity: 1; }
    }
    .refresh-btn.spinning { animation: spin-once .65s linear; }
    .notif-dot {
      position: absolute; top: 5px; right: 5px;
      width: 10px; height: 10px; border-radius: 50%; background: #ef4444;
      border: 2px solid white; display: none;
      animation: pulse-dot 1.8s ease-in-out infinite;
    }
    .notif-dot.show { display: block; }
    @keyframes pulse { 0%,100%{opacity:.4} 50%{opacity:.15} }
    @keyframes slideInRight { from{opacity:0;transform:translateX(40px)} to{opacity:1;transform:translateX(0)} }
    @keyframes pulse-dot {
      0%,100% { transform: scale(1); opacity: 1; }
      50% { transform: scale(1.35); opacity: .8; }
    }
    @keyframes pulse-pay {
      0%,100% { box-shadow: 0 0 0 0 rgba(245,158,11,.5); }
      50% { box-shadow: 0 0 0 8px rgba(245,158,11,0); }
    }
    /* ── HEADER AVATAR DROPDOWN ──────────────────────── */
    .avatar-sm {
      width: 40px; height: 40px; border-radius: 50%;
      background: var(--green-light); color: var(--green-deep);
      display: flex; align-items: center; justify-content: center;
      font-family: 'Baloo 2', sans-serif; font-weight: 700; font-size: 14px;
      cursor: pointer; border: 2px solid var(--green); position: relative;
      overflow: visible;
    }
    .header-dropdown {
      position: absolute; top: calc(100% + 8px); right: 0;
      background: white; border-radius: 14px; box-shadow: 0 8px 32px rgba(0,0,0,.14);
      border: 1px solid var(--border); min-width: 200px; z-index: 300;
      overflow-y: auto; overflow-x: hidden; display: none;
      max-height: calc(100vh - 80px - env(safe-area-inset-top, 0px));
    }
    .header-dropdown.open { display: block; }
    .hd-user { padding: 14px 16px 10px; border-bottom: 1px solid var(--border); }
    .hd-name { font-weight: 700; font-size: 15px; color: var(--text); }
    .hd-email { font-size: 12px; color: var(--text-light); margin-top: 2px; }
    .hd-item { display: flex; align-items: center; gap: 10px; padding: 12px 16px;
      font-size: 14px; font-weight: 600; color: var(--text); cursor: pointer;
      transition: background .12s; }
    .hd-item:hover { background: var(--bg); }
    .hd-item.danger { color: #ef4444; }
    .hd-item-icon { font-size: 18px; width: 24px; text-align: center; }

    /* ── NEWS PANEL ──────────────────────────────────── */
    .news-overlay { position: fixed; inset: 0; background: rgba(0,0,0,.45); z-index: 299; display: none; }
    .news-overlay.open { display: block; }
    .news-panel {
      position: fixed; bottom: 0; left: 0; right: 0; margin: 0 auto;
      width: 100%; max-width: 480px; background: var(--card, white);
      border-radius: 20px 20px 0 0; box-shadow: 0 -8px 32px rgba(0,0,0,.18);
      z-index: 300; max-height: 90vh; display: flex; flex-direction: column;
      transition: transform .32s cubic-bezier(.4,0,.2,1);
      box-sizing: border-box;
      transform: translateY(100%);
    }
    .news-panel.open { transform: translateY(0); }
    .news-panel-handle { width: 42px; height: 4px; background: #d1d5db; border-radius: 2px; margin: 12px auto 6px; flex-shrink: 0; }
    .news-panel-header { display: flex; align-items: center; padding: 4px 16px 10px; gap: 10px; flex-shrink: 0; }
    .news-panel-title { font-family: 'Baloo 2', sans-serif; font-weight: 800; font-size: 18px; flex: 1; }
    .news-panel-body { overflow-y: auto; overflow-x: hidden; padding: 12px 16px calc(32px + env(safe-area-inset-bottom, 0px)); flex: 1; }
    /* Bell panel tabs — top-level Upozornění | Novinky */
    .bell-tabs { display: flex; gap: 0; flex-shrink: 0; border-bottom: 2px solid var(--border); margin: 0; }
    .bell-tab  { flex: 1; padding: 10px 8px; border: none; background: transparent; font-size: 14px; font-weight: 700; color: var(--text-light); cursor: pointer; transition: color .15s; white-space: nowrap; text-align: center; border-bottom: 2.5px solid transparent; margin-bottom: -2px; display: inline-flex; align-items: center; justify-content: center; gap: 6px; }
    .bell-tab.active { color: var(--green); border-bottom-color: var(--green); }
    .bell-tab-badge { background: #ef4444; color: white; border-radius: 10px; font-size: 10px; font-weight: 800; padding: 1px 6px; min-width: 16px; text-align: center; display: none; line-height: 1.3; flex-shrink: 0; }
    /* Notification filter chips */
    .notif-filter-chips{display:flex;gap:5px;padding:8px 16px;overflow-x:auto;flex-shrink:0;border-bottom:1px solid var(--border)}
    .notif-fchip{padding:4px 10px;border-radius:16px;font-size:11px;font-weight:600;border:1.5px solid var(--border);background:var(--bg);color:var(--text-light);cursor:pointer;transition:all .15s;white-space:nowrap;flex-shrink:0}
    .notif-fchip:hover{border-color:var(--green);color:var(--green)}
    .notif-fchip.active{border-color:var(--green);background:var(--green-light);color:var(--green-dark)}
    html[data-theme="dark"] .notif-fchip{background:var(--card);border-color:var(--border);color:var(--text-light)}
    html[data-theme="dark"] .notif-fchip.active{background:rgba(22,163,74,.15);color:#4ade80;border-color:#4ade80}
    html[data-theme="dark"] .notif-item{background:var(--card);border-color:var(--border)}
    html[data-theme="dark"] .notif-item-icon{background:var(--bg);border-color:var(--border)}
    html[data-theme="dark"] .notif-item.notif-unread .notif-item-icon{background:rgba(22,163,74,.12);border-color:rgba(22,163,74,.3)}
    html[data-theme="dark"] .notif-del{color:#6b7280}
    html[data-theme="dark"] .notif-del:active{background:rgba(220,38,38,.15);color:#f87171}
    /* Notif delete btn — always visible on mobile (no hover) */
    .notif-del{position:absolute;top:8px;right:6px;width:24px;height:24px;border:none;background:transparent;color:#9ca3af;font-size:14px;cursor:pointer;border-radius:50%;display:flex;align-items:center;justify-content:center;transition:background .15s,color .15s}
    @media (hover:hover){.notif-del{opacity:0;transition:opacity .15s}.notif-item:hover .notif-del{opacity:1}}
    .notif-del:hover{background:var(--bg);color:var(--red)}
    .notif-del:active{background:#fee2e2;color:#dc2626}
    /* Notif badge count on bell */
    .notif-badge{position:absolute;top:2px;right:0px;background:#ef4444;color:#fff;border-radius:10px;font-size:9px;font-weight:800;padding:1px 5px;min-width:16px;text-align:center;display:none;border:2px solid var(--card);line-height:1.3}
    .notif-badge.show{display:block}
    /* Bell dropdown */
    /* Notifikace = full-page navigation (Rohlík-style, David 18.5.2026):
       slide-in zprava přes celou obrazovku, "< Zpět" v headeru, žádný backdrop.
       Mobil = 100% šířka. Desktop = 480px max-width zprava (sheet variant).
       z-index 99999 je nutný — některé page-level sticky headery (Žebříček,
       admin tabs) mají z-index ~200 a překrývaly by panel na různých tabech. */
    .bell-dropdown{
      position:fixed;top:0;right:0;bottom:0;left:auto;
      width:100vw;max-width:100vw;
      background:var(--bg,#f8fafc);
      z-index:99999;
      isolation:isolate;
      display:flex;flex-direction:column;overflow:hidden;
      transform:translateX(100%);visibility:hidden;
      transition:transform .3s ease, visibility 0s linear .3s;
      padding-top:env(safe-area-inset-top,0px);
      padding-bottom:env(safe-area-inset-bottom,0px);
      box-sizing:border-box;
    }
    .bell-dropdown.open{transform:translateX(0);visibility:visible;transition:transform .3s ease, visibility 0s linear 0s}
    @media(min-width:600px){
      .bell-dropdown{left:auto;max-width:480px;border-left:1px solid var(--border);box-shadow:-4px 0 32px rgba(0,0,0,.12)}
    }
    /* Header: "< Zpět" vlevo zelené, centrovaný title, ✓ Přečíst vše vpravo */
    .bell-dd-header{
      display:flex;align-items:center;
      padding:0 12px;background:var(--card);
      border-bottom:1px solid var(--border);
      height:52px;flex-shrink:0;
      gap:8px;
    }
    .bell-dd-back{
      display:flex;align-items:center;gap:2px;
      background:none;border:none;cursor:pointer;
      color:var(--green);font-weight:600;font-size:15px;
      padding:8px 4px;border-radius:8px;
      font-family:inherit;
      flex-shrink:0;min-width:80px;
    }
    .bell-dd-back:hover{background:var(--green-light)}
    .bell-dd-header-title{
      flex:1;text-align:center;
      font-family:'Baloo 2',sans-serif;font-weight:800;font-size:17px;color:var(--text)
    }
    .bell-dd-readall{
      font-size:18px;font-weight:700;color:var(--green);
      background:none;border:none;cursor:pointer;
      padding:6px 10px;border-radius:8px;
      min-width:80px;text-align:right;
    }
    .bell-dd-readall:hover{background:var(--green-light)}
    .bell-dd-filter{background:var(--card)}
    .bell-dd-list{overflow-y:auto;flex:1;padding:12px;-webkit-overflow-scrolling:touch;background:var(--bg)}
    .bell-dd-footer{background:var(--card)}
    .bell-dd-fchip{padding:4px 10px;border-radius:14px;border:1.5px solid var(--border);background:var(--card);font-size:11px;font-weight:600;cursor:pointer;font-family:inherit;color:var(--text-light)}
    .bell-dd-fchip.active{background:var(--green-light);border-color:var(--green);color:var(--green-dark)}
    #bell-unread-count{font-size:10px;font-weight:800;margin-left:3px;padding:1px 5px;border-radius:8px;background:#ef4444;color:#fff;display:none}
    #bell-unread-count.show{display:inline-block}
    .bell-dd-item{display:flex;gap:8px;align-items:flex-start;padding:10px;border-radius:10px;cursor:pointer;transition:background .15s;border:1px solid transparent}
    .bell-dd-item:hover{background:var(--bg)}
    .bell-dd-item.unread{background:#f0fdf4;border-color:#bbf7d0}
    .bell-dd-item-icon{font-size:18px;flex-shrink:0;width:32px;height:32px;display:flex;align-items:center;justify-content:center;border-radius:8px;background:var(--bg);border:1px solid var(--border)}
    .bell-dd-item.unread .bell-dd-item-icon{background:var(--green-light);border-color:var(--green-mid,#86efac)}
    .bell-dd-item-body{flex:1;min-width:0}
    .bell-dd-item-title{font-size:12px;font-weight:700;color:var(--text-main);line-height:1.3;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
    .bell-dd-item-text{font-size:11px;color:var(--text-light);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
    .bell-dd-item-time{font-size:10px;color:#9ca3af;margin-top:2px}
    .bell-dd-item .notif-priority-dot{width:6px;height:6px;border-radius:50%;flex-shrink:0;align-self:center}
    .bell-dd-footer{text-align:center;padding:10px;font-size:13px;font-weight:700;color:var(--green);cursor:pointer;border-top:1px solid var(--border);transition:background .15s}
    .bell-dd-footer:hover{background:var(--green-light)}
    .bell-dd-empty{text-align:center;padding:32px 16px;color:var(--text-light);font-size:13px}
    html[data-theme="dark"] .bell-dropdown{background:var(--dm-card);border-color:var(--dm-border)}
    html[data-theme="dark"] .bell-dd-item.unread{background:rgba(22,163,74,.1);border-color:rgba(22,163,74,.25)}
    /* (Mobile override smazán — nový design má full-screen slide-in defaultně) */
    /* Notification items — card style */
    .notif-item { display: flex; gap: 10px; align-items: flex-start; padding: 12px; margin-bottom: 6px; border-radius: 12px; transition: background .15s, box-shadow .15s; position: relative; background: var(--bg); border: 1px solid var(--border); box-sizing: border-box; width: 100%; }
    .notif-item.notif-unread { background: #f0fdf4; border-color: #bbf7d0; }
    html[data-theme="dark"] .notif-item.notif-unread { background: rgba(22,163,74,.08); border-color: rgba(22,163,74,.25); }
    .notif-item:last-child { margin-bottom: 0; }
    .notif-item[onclick] { cursor: pointer; }
    .notif-item[onclick]:active { background: var(--green-light); }
    .notif-item-icon { font-size: 22px; flex-shrink: 0; width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; border-radius: 12px; background: var(--card, white); border: 1px solid var(--border); }
    .notif-item.notif-unread .notif-item-icon { background: var(--green-light); border-color: var(--green-mid, #86efac); }
    .notif-item-body { flex: 1; min-width: 0; }
    .notif-item-title { font-size: 13px; font-weight: 700; color: var(--text-main); margin-bottom: 2px; line-height: 1.3; }
    .notif-item-text  { font-size: 12px; color: var(--text-light); margin-bottom: 3px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; line-height: 1.4; }
    .notif-item-time  { font-size: 11px; color: #9ca3af; }
    .notif-item-chevron { color: var(--text-light); font-size: 16px; flex-shrink: 0; align-self: center; margin-left: 2px; }
    /* Swipe-to-delete wrapper */
    .notif-swipe-wrap { position: relative; overflow: hidden; border-radius: 12px; margin-bottom: 6px; }
    .notif-swipe-wrap:last-child { margin-bottom: 0; }
    .notif-swipe-bg { position: absolute; top: 0; right: 0; bottom: 0; width: 80px; background: #ef4444; display: flex; align-items: center; justify-content: center; color: white; font-size: 13px; font-weight: 700; border-radius: 0 12px 12px 0; }
    .notif-swipe-wrap .notif-item { margin-bottom: 0; transition: transform .25s ease; touch-action: pan-y; }
    /* Action button in notification */
    .notif-action-btn { display: inline-flex; align-items: center; gap: 4px; margin-top: 6px; padding: 4px 10px; border-radius: 8px; font-size: 11px; font-weight: 600; background: var(--green-light); color: var(--green-dark); border: 1px solid var(--green-mid, #86efac); cursor: pointer; transition: background .15s; }
    .notif-action-btn:active { background: var(--green); color: white; }
    html[data-theme="dark"] .notif-action-btn { background: rgba(22,163,74,.12); color: #4ade80; border-color: rgba(22,163,74,.3); }
    /* Notification preferences link */
    .notif-prefs-link { display: flex; align-items: center; gap: 6px; padding: 8px 12px; margin: 4px 0; border-radius: 8px; font-size: 12px; color: var(--text-light); cursor: pointer; transition: background .15s; }
    .notif-prefs-link:active { background: var(--bg); }
    /* Panel actions row */
    .notif-actions-row { display: flex; align-items: center; gap: 8px; padding: 0 16px 8px; flex-shrink: 0; }
    .notif-actions-row .btn { font-size: 12px; padding: 5px 12px; }
    .news-item { border-radius: var(--radius-sm); border: 1px solid var(--border); padding: 14px 14px 12px; margin-bottom: 10px; background: white; position: relative; }
    /* News teaser na dashboardu */
    .news-teaser { background:#ffffff; color:var(--text); border-radius:var(--radius); padding:20px; margin-bottom:16px; cursor:pointer; transition:opacity .15s; -webkit-tap-highlight-color:transparent; border:1px solid var(--border); box-shadow:var(--shadow); }
    .news-teaser:active { opacity:.85; }
    .news-teaser-header { display:flex; align-items:center; justify-content:space-between; margin-bottom:10px; }
    .news-teaser-label { font-size:13px; font-weight:700; color:var(--text-light); letter-spacing:.3px; }
    .news-teaser-badge { background:var(--green-light); color:var(--green-dark); border-radius:12px; font-size:11px; font-weight:800; padding:3px 10px; white-space:nowrap; border:1px solid var(--green-mid); }
    .news-teaser-title { font-family:'Baloo 2',sans-serif; font-size:20px; font-weight:800; line-height:1.2; margin-bottom:6px; }
    .news-teaser-preview { font-size:13px; color:var(--text-light); display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; margin-bottom:16px; line-height:1.45; }
    .news-teaser-stats { display:flex; border-top:1px solid var(--border); padding-top:14px; margin-top:4px; }
    .news-teaser-stat { flex:1; text-align:center; }
    .news-teaser-stat .nt-val { font-family:'Baloo 2',sans-serif; font-size:22px; font-weight:800; line-height:1.1; color:var(--green); }
    .news-teaser-stat .nt-lbl { font-size:11px; color:var(--text-light); text-transform:uppercase; letter-spacing:.4px; margin-top:2px; }
    .news-teaser-stat-div { width:1px; background:var(--border); }
    /* Uvnitř news-feed-panel — bez border/rádius, jen dělítko */
    #news-feed-panel-body .news-item { border-radius:0; border:none; border-bottom:1px solid var(--border); margin-bottom:0; }
    #news-feed-panel-body .news-item:last-child { border-bottom:none; }
    .news-item.unread { border-left: 3px solid var(--green); background: #f0fdf4; }
    .news-item-title { font-weight: 700; font-size: 15px; margin-bottom: 3px; padding-right: 28px; }
    .news-item-meta { font-size: 11px; color: var(--text-light); margin-bottom: 8px; }
    .news-item-body { font-size: 14px; line-height: 1.6; color: var(--text); white-space: pre-wrap; word-break: break-word; }
    .news-item-del { position: absolute; top: 10px; right: 10px; background: none; border: none; font-size: 16px; cursor: pointer; color: var(--text-light); padding: 2px 6px; }
    /* ── NEWS — rozšířené typy ───────────────────────── */
    .news-item-actions { position:absolute; top:10px; right:8px; display:flex; gap:2px; }
    .news-item-btn { background:none; border:none; font-size:15px; cursor:pointer; color:var(--text-light); padding:3px 5px; border-radius:6px; transition:background .1s; }
    .news-item-btn:hover { background:var(--bg); color:var(--text); }
    .news-pin-label { display:inline-flex; align-items:center; gap:4px; font-size:11px; font-weight:700; color:#7c3aed; text-transform:uppercase; letter-spacing:.4px; margin-bottom:6px; }
    .news-item-pinned { border-left:4px solid #7c3aed !important; background:#faf5ff; }
    .news-item-achievement { border:2px solid #f59e0b; background:linear-gradient(135deg,#fffbeb 0%,#fef3c7 100%); }
    .achievement-hero { display:flex; align-items:center; gap:14px; margin-bottom:8px; }
    .achievement-emoji { font-size:40px; line-height:1; flex-shrink:0; }
    .achievement-name { font-size:15px; font-weight:800; line-height:1.3; }
    .achievement-result { font-size:13px; color:var(--text-light); margin-top:3px; }

    /* ── Race Share ─────────────────────────────────────────── */
    .race-item { position:relative; }
    .race-share-btn { position:absolute; top:6px; right:6px; background:none; border:none; font-size:16px; cursor:pointer; opacity:.55; padding:4px; border-radius:6px; transition:opacity .15s,background .15s; z-index:2; }
    .race-share-btn:hover { opacity:1; background:var(--green-light); }
    .race-shared-badge { font-size:11px; color:var(--green); font-weight:700; margin-top:2px; }
    .share-banner { position:fixed; bottom:80px; left:50%; transform:translateX(-50%); background:white; border:2px solid #f59e0b; border-radius:14px; padding:12px 18px; box-shadow:0 6px 24px rgba(0,0,0,.15); display:flex; align-items:center; gap:10px; z-index:600; max-width:380px; width:calc(100% - 32px); animation:slideUp .35s ease; }
    .share-banner-text { flex:1; font-size:14px; font-weight:600; }
    .share-banner .sb-btn { padding:6px 14px; border-radius:8px; border:none; font-size:13px; font-weight:700; cursor:pointer; }
    .share-banner .sb-share { background:var(--green); color:white; }
    .share-banner .sb-dismiss { background:var(--border); color:var(--text-light); }
    .rs-field { margin-bottom:14px; }
    .rs-field label { display:block; font-size:13px; font-weight:700; margin-bottom:5px; color:var(--text); }
    .rs-field input, .rs-field textarea { width:100%; padding:10px 12px; border:1.5px solid var(--border); border-radius:var(--radius-sm); font-size:14px; font-family:inherit; background:var(--bg); color:var(--text); box-sizing:border-box; }
    .rs-field input:read-only { background:var(--border); opacity:.7; }
    .rs-field textarea { resize:vertical; min-height:50px; }
    .rs-emoji-row { display:flex; gap:6px; flex-wrap:wrap; }
    .rs-emoji-btn { width:42px; height:42px; font-size:22px; border:2px solid var(--border); border-radius:10px; background:white; cursor:pointer; transition:border-color .15s,transform .1s; }
    .rs-emoji-btn.selected { border-color:var(--green); background:var(--green-light); transform:scale(1.12); }
    .rs-char-count { text-align:right; font-size:11px; color:var(--text-light); margin-top:3px; }
    .rs-preview-wrap { border:1.5px dashed var(--border); border-radius:var(--radius); padding:12px; margin-bottom:14px; }
    .rs-preview-label { font-size:11px; text-transform:uppercase; letter-spacing:.5px; color:var(--text-light); margin-bottom:8px; font-weight:700; }
    .rs-publish-btn { width:100%; padding:13px; background:var(--green); color:white; border:none; border-radius:var(--radius); font-size:15px; font-weight:800; cursor:pointer; font-family:'Baloo 2',sans-serif; transition:opacity .15s; }
    .rs-publish-btn:disabled { opacity:.5; cursor:not-allowed; }

    /* ── Route/Map for Runs ──────────────────────────────── */
    .route-link { color:var(--green); font-weight:700; font-size:14px; text-decoration:none; transition:opacity .15s; }
    .route-link:hover { opacity:.75; text-decoration:underline; }
    .route-badge { display:inline-block; padding:3px 8px; border-radius:6px; font-size:10px; font-weight:800; letter-spacing:.5px; }
    .route-badge-strava { background:#fc4c02; color:white; }
    .route-badge-komoot { background:#6aa127; color:white; }
    .route-badge-mapy { background:#1a73e8; color:white; }
    .route-badge-generic { background:var(--border); color:var(--text); }
    .route-embed { margin-top:4px; border-radius:8px; overflow:hidden; }

    .poll-option { display:block; width:100%; padding:10px 14px; border:1.5px solid var(--border); border-radius:var(--radius-sm); margin-bottom:8px; cursor:pointer; font-size:14px; font-weight:600; background:white; transition:all .15s; text-align:left; }
    .poll-option:hover { border-color:var(--green); background:var(--green-light); }
    .poll-result { margin-bottom:10px; }
    .poll-result-label { display:flex; justify-content:space-between; font-size:13px; margin-bottom:4px; }
    .poll-bar { height:7px; background:var(--border); border-radius:4px; overflow:hidden; }
    .poll-bar-fill { height:7px; background:var(--green); border-radius:4px; transition:width .5s; }
    .news-reactions { display:flex; align-items:center; gap:6px; flex-wrap:wrap; margin-top:10px; padding-top:10px; border-top:1px solid var(--border); }
    .reaction-chip { display:inline-flex; align-items:center; gap:3px; padding:4px 10px; border-radius:20px; font-size:13px; border:1.5px solid var(--border); cursor:pointer; background:white; transition:all .15s; user-select:none; }
    .reaction-chip.mine { border-color:var(--green); background:var(--green-light); }
    .reaction-chip .rc { font-size:12px; font-weight:700; color:var(--text-light); }
    .reaction-chip.mine .rc { color:var(--green); }
    .reaction-add-wrap { position:relative; }
    .reaction-add-btn { background:none; border:1.5px dashed var(--border); border-radius:20px; padding:4px 11px; cursor:pointer; font-size:15px; color:var(--text-light); transition:all .15s; line-height:1; }
    .reaction-add-btn:hover { border-color:var(--green); color:var(--green); }
    .reaction-picker { display:none; position:absolute; bottom:calc(100% + 6px); left:0; background:white; border:1.5px solid var(--border); border-radius:12px; padding:8px; gap:2px; box-shadow:0 4px 20px rgba(0,0,0,.18); z-index:350; }
    .reaction-picker.open { display:flex; }
    .rp-btn { font-size:22px; cursor:pointer; padding:4px 8px; border-radius:8px; transition:background .1s; border:none; background:none; }
    .rp-btn:hover { background:var(--bg); }
    .news-item-body .np { margin:0 0 8px; }
    .news-item-body .np:last-child { margin-bottom:0; }
    .news-item-body .nl { list-style:none; padding:0; margin:0 0 8px; }
    .news-item-body .nl li { padding:2px 0 2px 16px; position:relative; }
    .news-item-body .nl li::before { content:'•'; position:absolute; left:0; color:var(--green); font-weight:700; }
    .nc-type-grid { display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-bottom:8px; }
    .nc-type-card { border:2px solid var(--border); border-radius:var(--radius-sm); padding:18px 10px 14px; text-align:center; cursor:pointer; transition:all .15s; }
    .nc-type-card:hover { border-color:var(--green); background:var(--green-light); }
    .nc-type-icon { font-size:28px; line-height:1; margin-bottom:8px; }
    .nc-type-label { font-size:13px; font-weight:700; }
    .nc-type-desc { font-size:11px; color:var(--text-light); margin-top:2px; }
    .nc-emoji-row { display:flex; gap:8px; flex-wrap:wrap; }
    .nc-emoji-btn { font-size:22px; padding:6px 10px; border:2px solid var(--border); border-radius:10px; cursor:pointer; background:white; transition:all .15s; }
    .nc-emoji-btn.selected { border-color:var(--green); background:var(--green-light); }
    .poll-option-row { display:flex; align-items:center; gap:8px; margin-bottom:8px; }
    .poll-option-row input { flex:1; }

    /* ── BOTTOM NAV ──────────────────────────────────── */
    .bottom-nav {
      position: fixed; bottom: 0; left: 50%;
      transform: translateX(-50%) translateZ(0);
      -webkit-transform: translateX(-50%) translateZ(0);
      will-change: transform;
      backface-visibility: hidden;
      -webkit-backface-visibility: hidden;
      width: 100%; max-width: 480px;
      background: white; border-top: 1px solid var(--border);
      display: flex; z-index: 100;
      padding-bottom: env(safe-area-inset-bottom);
    }
    @supports (bottom: env(safe-area-inset-bottom)) {
      .bottom-nav { bottom: 0; }
    }
    .nav-item {
      flex: 1; display: flex; flex-direction: column; align-items: center;
      padding: 8px 0; gap: 3px; cursor: pointer;
      color: var(--text-light); transition: color .2s;
      font-size: 10px; font-weight: 600; font-family: 'Baloo 2', sans-serif;
      white-space: nowrap; overflow: hidden;
    }
    .nav-item .nav-icon { font-size: 20px; line-height: 1; }
    .nav-item.active { color: var(--green); }
    .nav-item.active .nav-icon { transform: scale(1.1); }
    .community-badge { position: absolute; top: 2px; right: calc(50% - 18px); background: #ef4444; color: white; border-radius: 10px; font-size: 9px; font-weight: 800; padding: 1px 5px; min-width: 14px; text-align: center; line-height: 1.3; border: 2px solid white; }
    html[data-theme="dark"] .community-badge { border-color: var(--card); }

    /* Role switcher CSS odstraněn — přesun do profilu → Nastavení (Fáze 4a/5) */
    .preview-banner { position:sticky;top:0;left:0;width:100%;background:#fef3c7;border-bottom:2px solid #f59e0b;display:flex;align-items:center;justify-content:center;gap:8px;padding:6px 16px;z-index:101;font-size:12px;font-weight:600;font-family:'Baloo 2',sans-serif;color:#92400e }
    .preview-banner-btn { padding:3px 10px;border-radius:6px;font-size:12px;font-weight:700;background:#f59e0b;color:white;cursor:pointer;border:none;font-family:'Baloo 2',sans-serif }
    html[data-theme="dark"] .preview-banner { background:#451a03;border-color:#d97706;color:#fde68a }
    html[data-theme="dark"] .preview-banner-btn { background:#d97706;color:#1c1c1c }

    /* ── SCREEN CONTENT ──────────────────────────────── */
    .screen-content { padding: 16px; }

    /* ── CARDS ───────────────────────────────────────── */
    .card {
      background: var(--card); border-radius: var(--radius);
      box-shadow: var(--shadow); overflow: hidden;
    }
    .card-body { padding: 16px; }
    .card-title { font-family: 'Baloo 2', sans-serif; font-weight: 700; font-size: 17px; margin-bottom: 4px; }
    .card-sub { color: var(--text-light); font-size: 13px; }

    /* ── DASHBOARD ───────────────────────────────────── */
    .hero-card {
      background: linear-gradient(135deg, var(--green-deep) 0%, var(--green) 100%);
      color: white; border-radius: var(--radius); padding: 20px;
      margin-bottom: 16px;
    }
    .hero-greeting { font-size: 14px; opacity: .75; margin-bottom: 2px; letter-spacing: .3px; }
    .hero-name { font-family: 'Baloo 2', sans-serif; font-size: 28px; font-weight: 800; line-height: 1.1; }
    .hero-stats { display: flex; gap: 0; margin-top: 16px; }
    .hero-stat { text-align: center; flex: 1; }
    .hero-stat .val { font-family: 'Baloo 2', sans-serif; font-size: 26px; font-weight: 800; }
    .hero-stat .lbl { font-size: 11px; opacity: .8; text-transform: uppercase; letter-spacing: .5px; }
    .hero-stat-divider { width: 1px; background: rgba(255,255,255,.3); }

    .section-title {
      font-family: 'Baloo 2', sans-serif; font-size: 16px; font-weight: 700;
      color: var(--text); margin-bottom: 12px; display: flex; align-items: center; justify-content: space-between;
    }
    .section-title a { font-size: 13px; color: var(--green); font-weight: 600; font-family: 'Open Sans', sans-serif; }

    .training-card {
      background: var(--card); border-radius: var(--radius);
      box-shadow: var(--shadow); padding: 16px; margin-bottom: 10px;
      display: flex; align-items: center; gap: 14px; cursor: pointer;
      transition: box-shadow .2s, transform .15s;
      border-left: 4px solid var(--green);
    }
    .training-card:hover { box-shadow: var(--shadow-md); transform: translateY(-1px); }
    .training-card.registered { border-left-color: #3b82f6; }
    .training-card.past { border-left-color: var(--border); opacity: .7; }
    .training-date-box {
      background: var(--green-light); border-radius: var(--radius-sm);
      min-width: 50px; text-align: center; padding: 8px 6px;
    }
    .training-date-box.registered { background: #dbeafe; }
    .training-date-box.past { background: var(--bg); }
    .training-date-box .day-num { font-family: 'Baloo 2', sans-serif; font-weight: 800; font-size: 22px; color: var(--green-deep); line-height: 1; }
    .training-date-box.registered .day-num { color: #1e40af; }
    .training-date-box .day-name { font-size: 11px; font-weight: 600; color: var(--text-light); text-transform: uppercase; }
    .training-info { flex: 1; min-width: 0; }
    .training-type { font-family: 'Baloo 2', sans-serif; font-weight: 700; font-size: 15px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .training-meta { font-size: 12px; color: var(--text-light); margin-top: 2px; }
    .part-stack { display: flex; align-items: center; margin-top: 6px; }
    .part-av { width: 20px; height: 20px; border-radius: 50%; background: var(--green-light); color: var(--green-deep); font-size: 8px; font-weight: 800; display: flex; align-items: center; justify-content: center; border: 1.5px solid white; margin-left: -5px; flex-shrink: 0; }
    .part-av:first-child { margin-left: 0; }
    .part-av.more { background: #f1f5f9; color: var(--text-light); font-size: 9px; }
    .part-label { font-size: 11px; color: var(--text-light); margin-left: 6px; }
    /* Race event card — stejná velikost jako training-card */
    .race-event-card { background: var(--card); border-radius: var(--radius); box-shadow: var(--shadow); border-left: 4px solid #f59e0b; padding: 16px; margin-bottom: 10px; display: flex; align-items: center; gap: 14px; cursor: pointer; transition: box-shadow .2s, transform .15s; }
    .race-event-card:hover { box-shadow: var(--shadow-md); transform: translateY(-1px); }
    .race-event-date { background: #fffbeb; border-radius: var(--radius-sm); padding: 8px 6px; text-align: center; min-width: 50px; flex-shrink: 0; }
    .race-event-date .day-num { font-family: 'Baloo 2',sans-serif; font-weight: 800; font-size: 22px; color: #92400e; line-height: 1; }
    .race-event-date .day-name { font-size: 11px; font-weight: 600; color: #b45309; text-transform: uppercase; }
    .training-badge {
      font-size: 11px; font-weight: 700; padding: 3px 8px; border-radius: 20px;
      font-family: 'Baloo 2', sans-serif;
    }
    .badge-open { background: var(--green-light); color: var(--green-deep); }
    .badge-registered { background: #dbeafe; color: #1e40af; }
    .badge-full { background: #fee2e2; color: #b91c1c; }
    .badge-past { background: var(--border); color: var(--text-light); }
    .badge-present { background: var(--green-light); color: var(--green-deep); }
    .badge-absent { background: #fee2e2; color: #b91c1c; }
    .badge-cancelled { background: #fee2e2; color: #b91c1c; }
    .training-card.cancelled { border-left-color: #ef4444; opacity: .65; }

    /* ── LEADERBOARD ─────────────────────────────────── */
    /* Default (kids/výzvy): klasický 3-col se stupni různé výšky */
    .lb-podium { display: flex; gap: 8px; margin-bottom: 20px; align-items: flex-end; }
    .lb-podium-item {
      flex: 1; text-align: center; background: var(--card);
      border-radius: var(--radius); padding: 16px 8px; box-shadow: var(--shadow);
    }
    .lb-podium-item.gold   { border-top: 3px solid #f59e0b; padding-top: 44px; }
    .lb-podium-item.silver { border-top: 3px solid #94a3b8; padding-top: 28px; }
    .lb-podium-item.bronze { border-top: 3px solid #cd7c42; padding-top: 12px; }
    /* Tier mode (hlavní žebříček dospělých) — gold/silver/bronze každý vlastní řádka, wrap */
    .lb-podium--tiers { flex-direction: column; align-items: stretch; gap: 10px; }
    .lb-podium--tiers .lb-tier { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }
    .lb-podium--tiers .lb-podium-item {
      flex: 1 1 calc(33.33% - 8px); min-width: 100px; max-width: 220px;
      padding: 14px 8px 12px;
    }
    .lb-podium--tiers .lb-podium-item.gold   { padding-top: 14px; background: linear-gradient(180deg, #fffbeb 0%, var(--card) 60%); }
    .lb-podium--tiers .lb-podium-item.silver { padding-top: 14px; background: linear-gradient(180deg, #f1f5f9 0%, var(--card) 60%); }
    .lb-podium--tiers .lb-podium-item.bronze { padding-top: 14px; background: linear-gradient(180deg, #fef3c7 0%, var(--card) 60%); }
    .lb-podium-medal  { font-size: 28px; line-height: 1; margin-bottom: 6px; }
    .lb-podium-name   { font-family: 'Baloo 2', sans-serif; font-weight: 700; font-size: 13px; line-height: 1.2; margin-bottom: 4px; }
    .lb-podium-count  { font-size: 20px; font-weight: 800; font-family: 'Baloo 2', sans-serif; color: var(--green); }
    .lb-podium-pct    { font-size: 11px; color: var(--text-light); }
    .lb-row {
      display: flex; align-items: center; gap: 12px; padding: 12px 0;
      border-bottom: 1px solid var(--border);
    }
    .lb-row:last-child { border-bottom: none; }
    .lb-rank { min-width: 32px; padding: 0 4px; text-align: center; font-family: 'Baloo 2', sans-serif; font-weight: 700; font-size: 15px; color: var(--text-light); flex-shrink: 0; white-space: nowrap; }
    .lb-avatar { width: 38px; height: 38px; border-radius: 50%; background: var(--green-light); color: var(--green-deep); display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 13px; flex-shrink: 0; }
    .lb-avatar.me { background: var(--green); color: #fff; }
    .lb-name  { font-weight: 600; font-size: 14px; }
    .lb-name-wrap { flex: 1; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
    .lb-name .lb-you { font-size: 11px; color: var(--green); font-weight: 600; margin-left: 4px; }
    .lb-badges { display: flex; flex-wrap: wrap; gap: 4px; }
    .lb-badge {
      display: inline-flex; align-items: center; gap: 3px;
      padding: 2px 7px; border-radius: 999px;
      font-size: 10px; font-weight: 600; line-height: 1.4; white-space: nowrap;
    }
    .lb-badge--member { background: #dcfce7; color: #166534; }
    .lb-badge--host   { background: #ffedd5; color: #9a3412; }
    .lb-badge--unpaid { background: #fef3c7; color: #92400e; }
    /* Filter row */
    .lb-filter-row {
      display: flex; flex-wrap: wrap; gap: 6px; align-items: center;
      margin: 8px 0 10px;
    }
    .lb-pill {
      padding: 5px 11px; border-radius: 999px;
      background: var(--bg); color: var(--text-light);
      border: 1.5px solid var(--border);
      font-size: 12px; font-weight: 600; cursor: pointer;
      white-space: nowrap;
    }
    .lb-pill.active { background: var(--green); color: #fff; border-color: var(--green); }
    .lb-stats { text-align: right; }
    .lb-stats .lb-cnt  { font-family: 'Baloo 2', sans-serif; font-weight: 700; font-size: 16px; color: var(--green); }
    .lb-stats .lb-pct  { font-size: 11px; color: var(--text-light); }
    .lb-bar-wrap { height: 4px; background: var(--border); border-radius: 2px; margin-top: 4px; }
    .lb-bar { height: 4px; background: var(--green); border-radius: 2px; }
    .training-date-box.cancelled { background: #fee2e2; }
    .training-date-box.cancelled .day-num { color: #b91c1c; }

    /* streak card */
    .streak-card {
      background: linear-gradient(135deg, #f59e0b 0%, #f97316 100%);
      color: white; border-radius: var(--radius); padding: 16px 20px;
      display: flex; align-items: center; gap: 16px; margin-bottom: 16px;
    }
    .streak-icon { font-size: 36px; }
    .streak-val { font-family: 'Baloo 2', sans-serif; font-size: 28px; font-weight: 800; }
    .streak-lbl { font-size: 13px; opacity: .9; }

    /* ── CALENDAR ────────────────────────────────────── */
    .cal-header {
      display: flex; align-items: center; justify-content: space-between;
      padding: 0 4px; margin-bottom: 12px;
    }
    .cal-month { font-family: 'Baloo 2', sans-serif; font-size: 20px; font-weight: 700; }
    .cal-nav { background: none; border: 1.5px solid var(--border); border-radius: var(--radius-sm); width: 36px; height: 36px; font-size: 16px; display: flex; align-items: center; justify-content: center; }
    .cal-nav:hover { background: var(--green-light); border-color: var(--green); }
    .cal-today-btn { font-size: 11px; font-weight: 700; padding: 4px 10px; border-radius: 20px; border: 1.5px solid var(--green); background: var(--green-light); color: var(--green); cursor: pointer; font-family: inherit; white-space: nowrap; transition: opacity .2s; }
    .cal-today-btn--current { opacity: 0.55; }
    .cal-add-btn { width: 36px; height: 36px; border-radius: 50%; background: var(--green); color: white; border: none; font-size: 22px; font-weight: 700; display: flex; align-items: center; justify-content: center; cursor: pointer; flex-shrink: 0; }
    .cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; }
    .cal-dow { text-align: center; font-size: 11px; font-weight: 700; color: var(--text-light); text-transform: uppercase; padding: 4px 0 8px; }
    .cal-day {
      aspect-ratio: 1; display: flex; flex-direction: column;
      align-items: center; justify-content: center;
      border-radius: var(--radius-sm); font-size: 14px; font-weight: 600;
      cursor: default; position: relative; transition: all .15s;
    }
    .cal-day { cursor: pointer; }
    .cal-day.empty { background: none; cursor: default; pointer-events: none; }
    .cal-day.today { background: var(--green); color: white; font-weight: 800; }
    .cal-day.training { background: var(--green-light); color: var(--green-deep); cursor: pointer; font-weight: 700; }
    .cal-day.training:hover { background: var(--green-mid); transform: scale(1.05); }
    .cal-day.registered { background: #dbeafe; color: #1e40af; cursor: pointer; }
    .cal-day.registered:hover { background: #bfdbfe; transform: scale(1.05); }
    .cal-day.past-training { background: var(--bg); color: var(--text-light); cursor: pointer; }
    .cal-day.today.training { background: var(--green); color: white; }
    .cal-dot {
      position: absolute; bottom: 3px;
      width: 5px; height: 5px; border-radius: 50%;
    }
    .cal-dot.green { background: var(--green); }
    .cal-dot.blue { background: #3b82f6; }
    .cal-dot.white { background: white; }
    .cal-dot.gray { background: var(--text-light); }
    .cal-dot.red { background: #ef4444; }
    .cal-dot.race { background: #f59e0b; left: 50%; transform: translateX(-50%); }
    .cal-dot.race-only { left: 50%; transform: translateX(-50%); background: #f59e0b; }
    /* Závod = medailové zlato — odlišit od oranžové přípravky (kids-training) */
    .cal-day.race-day { background: #fde047; color: #713f12; border: 1.5px solid #ca8a04; cursor: pointer; font-weight: 700; }
    .cal-day.race-day:hover { background: #facc15; transform: scale(1.05); }
    /* Dnes + závod — zachovej zelený highlight dneška, ale se zlatým rámečkem */
    .cal-day.today.race-day { background: var(--green); color: white; border: 2.5px solid #eab308; }
    .cal-dot.red { background: #ef4444; }
    .cal-day.cancelled-day { background: #fee2e2; color: #b91c1c; cursor: pointer; }
    .cal-day.cancelled-day:hover { background: #fecaca; transform: scale(1.05); }
    .cal-legend {
      display: flex; gap: 16px; flex-wrap: wrap; margin-top: 16px;
      padding: 12px; background: var(--card); border-radius: var(--radius-sm);
    }
    .cal-legend-item { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--text-light); }
    .legend-dot { width: 10px; height: 10px; border-radius: 3px; flex-shrink: 0; }

    /* ── TRAINING DETAIL ─────────────────────────────── */
    .training-hero {
      background: linear-gradient(135deg, var(--green-deep) 0%, var(--green) 100%);
      color: white; padding: 24px 16px 20px; position: relative;
    }
    .hero-edit-btn {
      position: absolute; top: 12px; right: 12px;
      width: 48px; height: 48px; border-radius: 50%;
      background: rgba(255,255,255,.22); border: none; cursor: pointer;
      font-size: 20px; display: flex; align-items: center; justify-content: center;
      color: white; transition: background .15s;
      -webkit-tap-highlight-color: transparent;
    }
    .hero-edit-btn:active { background: rgba(255,255,255,.38); }
    .training-hero-meta a { color: inherit; text-decoration: underline; text-decoration-color: rgba(255,255,255,.4); }

    /* ── ROSTER PANEL ────────────────────────────────── */
    .roster-overlay { position: fixed; inset: 0; background: rgba(0,0,0,.45); z-index: 299; display: none; }
    .roster-overlay.open { display: block; }
    .roster-panel {
      position: fixed; bottom: 0; left: 50%; transform: translateX(-50%) translateY(100%);
      width: 100%; max-width: 480px; background: white;
      border-radius: 20px 20px 0 0; box-shadow: 0 -8px 32px rgba(0,0,0,.18);
      z-index: 300; max-height: 88vh; display: flex; flex-direction: column;
      transition: transform .32s cubic-bezier(.4,0,.2,1);
    }
    .roster-panel.open { transform: translateX(-50%) translateY(0); }
    .roster-handle { width: 42px; height: 4px; background: #d1d5db; border-radius: 2px; margin: 0 auto; flex-shrink: 0; }
    .sheet-drag-area { padding: 14px 0 8px; cursor: grab; touch-action: none; text-align: center; flex-shrink: 0; }
    .sheet-drag-area:active { cursor: grabbing; }
    .roster-header { display: flex; align-items: center; padding: 4px 16px 12px; border-bottom: 1px solid var(--border); flex-shrink: 0; gap: 10px; }
    .roster-title  { font-family: 'Baloo 2', sans-serif; font-weight: 800; font-size: 18px; flex: 1; }
    .roster-body   { overflow-y: auto; padding: 12px 16px calc(32px + env(safe-area-inset-bottom, 0px)); flex: 1; }
    .roster-row    { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--border); }
    .roster-row:last-child { border-bottom: none; }
    .roster-num    { font-size: 12px; color: var(--text-light); font-weight: 700; width: 20px; text-align: right; flex-shrink: 0; }
    .roster-name   { font-size: 14px; font-weight: 600; flex: 1; }
    .roster-time   { font-size: 11px; color: var(--text-light); }
    .roster-remove-btn { flex-shrink: 0; width: 30px; height: 30px; border-radius: 50%; border: 1px solid var(--border); background: #fef2f2; color: #b91c1c; font-size: 14px; font-weight: 700; line-height: 1; cursor: pointer; display: flex; align-items: center; justify-content: center; padding: 0; }
    .roster-remove-btn:hover { background: #fee2e2; }
    .roster-share-btns { display: flex; gap: 10px; padding: 12px 16px; border-top: 1px solid var(--border); flex-shrink: 0; }

    /* ── PAY SHEET ───────────────────────────────────── */
    .pay-overlay { position: fixed; inset: 0; background: rgba(0,0,0,.45); z-index: 299; display: none; }
    .pay-overlay.open { display: block; }
    .pay-sheet {
      position: fixed; bottom: 0; left: 50%; transform: translateX(-50%) translateY(100%);
      width: 100%; max-width: 480px; background: white;
      border-radius: 20px 20px 0 0; box-shadow: 0 -8px 32px rgba(0,0,0,.18);
      z-index: 300; padding: 0 16px calc(40px + env(safe-area-inset-bottom, 0px));
      transition: transform .32s cubic-bezier(.4,0,.2,1);
    }
    .pay-sheet.open { transform: translateX(-50%) translateY(0); }
    .pay-option {
      display: flex; align-items: center; gap: 14px;
      padding: 16px 0; border-bottom: 1px solid var(--border); cursor: pointer;
      transition: background .12s; border-radius: 8px; margin: 0 -4px; padding-left: 4px;
    }
    .pay-option:last-child { border-bottom: none; }
    .pay-option:active { background: var(--green-light); }
    .pay-option.disabled { opacity: .45; cursor: not-allowed; pointer-events: none; }
    .pay-option-icon { font-size: 28px; flex-shrink: 0; width: 40px; text-align: center; }
    .pay-option-body { flex: 1; min-width: 0; }
    .pay-option-title { font-size: 15px; font-weight: 700; color: var(--text); }
    .pay-option-sub   { font-size: 12px; color: var(--text-light); margin-top: 2px; }
    .pay-option-arrow { font-size: 18px; color: var(--text-light); flex-shrink: 0; }

    /* ── QR ATTENDANCE MODAL ─────────────────────────── */
    .att-qr-modal {
      position: fixed; inset: 0; background: white; z-index: 500;
      display: flex; flex-direction: column; align-items: center;
      transform: translateY(100%); transition: transform .3s cubic-bezier(.4,0,.2,1);
      max-width: 480px; left: 50%; margin-left: -240px;
    }
    @media (max-width: 480px) { .att-qr-modal { left: 0; margin-left: 0; } }
    .att-qr-modal.open { transform: translateY(0); }
    .att-qr-header {
      display: flex; align-items: center; justify-content: space-between;
      width: 100%; padding: 16px 16px 8px; padding-top: calc(16px + env(safe-area-inset-top, 0px));
      box-sizing: border-box; flex-shrink: 0;
    }
    .att-qr-code-wrap {
      flex-shrink: 0; padding: 12px 0 16px;
      display: flex; flex-direction: column; align-items: center; gap: 8px;
    }
    .att-qr-checkin-list {
      flex: 1; width: 100%; overflow-y: auto;
      border-top: 1px solid var(--border); padding: 0 16px; box-sizing: border-box;
    }
    /* ── CHECKIN SUCCESS OVERLAY ─────────────────────── */
    .att-checkin-success {
      position: fixed; inset: 0; background: #16a34a; z-index: 600;
      display: flex; flex-direction: column; align-items: center; justify-content: center;
      opacity: 0; pointer-events: none; transition: opacity .4s;
    }
    .att-checkin-success.show { opacity: 1; pointer-events: all; }

    /* ── LATE CANCEL MODAL ───────────────────────────── */
    .late-cancel-overlay { position: fixed; inset: 0; background: rgba(0,0,0,.5); z-index: 399; display: none; }
    .late-cancel-overlay.open { display: flex; align-items: flex-end; justify-content: center; }
    .late-cancel-sheet {
      width: 100%; max-width: 480px; background: white;
      border-radius: 20px 20px 0 0; padding: 24px 20px calc(40px + env(safe-area-inset-bottom, 0px));
    }
    .late-cancel-icon { font-size: 40px; text-align: center; margin-bottom: 12px; }
    .late-cancel-title { font-family:'Baloo 2',sans-serif; font-weight: 800; font-size: 20px; text-align: center; margin-bottom: 8px; }
    .late-cancel-body { font-size: 14px; color: var(--text-light); text-align: center; line-height: 1.5; margin-bottom: 24px; }
    .late-cancel-warning-banner {
      background: #fef3c7; border: 1.5px solid #f59e0b; border-radius: 10px;
      padding: 12px 16px; margin-bottom: 18px; font-size: 13px; color: #92400e;
      display: flex; align-items: flex-start; gap: 10px;
    }

    /* ── PRINT ───────────────────────────────────────── */
    /* David 19.5.2026: "vždy na jednu stránku".
       Inline page-style v printRoster() přepíše font/padding/qr-size dynamicky
       podle počtu členů (10-16px, 100-170px QR). Tady jen základní layout. */
    @media print {
      @page { size: A4 portrait; margin: 8mm; }
      /* Skryj vše */
      html, body { background: white !important; }
      body * { visibility: hidden; }
      /* Ukáž jen print-roster a jeho obsah */
      #print-roster, #print-roster * { visibility: visible; }
      #print-roster {
        display: block !important;
        position: fixed; left: 0; top: 0; width: 100%; z-index: 99999;
        background: white; padding: 0;
        page-break-after: avoid;
      }
      #print-roster table { width: 100%; border-collapse: collapse; }
      #print-roster th, #print-roster td { border: 1px solid #ccc; text-align: left; vertical-align: middle; }
      #print-roster th { background: #f0fdf4; font-weight: 700; }
      /* Zabraň zalomení uvnitř QR section */
      #print-roster .qr-section { page-break-inside: avoid; break-inside: avoid; }
      #print-roster table tr { page-break-inside: avoid; break-inside: avoid; }
    }
    .training-hero .date-big { font-family: 'Baloo 2', sans-serif; font-size: 14px; opacity: .8; margin-bottom: 4px; }
    .training-hero .type-big { font-family: 'Baloo 2', sans-serif; font-size: 26px; font-weight: 800; margin-bottom: 12px; }
    .training-hero-meta { display: flex; gap: 16px; flex-wrap: wrap; }
    .training-hero-meta span { font-size: 13px; display: flex; align-items: center; gap: 5px; }

    .info-row {
      display: flex; gap: 10px; padding: 14px 0;
      border-bottom: 1px solid var(--border);
    }
    .info-row:last-child { border-bottom: none; }
    .info-icon { font-size: 18px; width: 24px; flex-shrink: 0; }
    .info-label { font-size: 12px; color: var(--text-light); margin-bottom: 2px; }
    .info-val { font-weight: 600; font-size: 14px; }
    /* Rich HTML descriptions from training library */
    .training-desc-html { font-weight: 400 !important; font-size: 14px; line-height: 1.45; }
    .training-desc-html ul, .training-desc-html ol { margin: 4px 0; padding-left: 20px; }
    .training-desc-html li { margin-bottom: 2px; }
    .training-desc-html strong { font-weight: 700; }
    .training-desc-html h3 { font-size: 15px; font-weight: 700; margin: 8px 0 4px; }
    .training-desc-html blockquote { border-left: 3px solid var(--green); padding-left: 10px; margin: 6px 0; color: var(--text-light); }
    .training-desc-html .tp-intro { margin: 0 0 8px; }
    .training-desc-html .tp-heading {
      font-size: 13px; font-weight: 800; text-transform: uppercase; letter-spacing: .3px;
      color: var(--green-dark); margin: 10px 0 4px;
    }
    .training-desc-html .tp-tips {
      margin: 14px 0 6px; padding: 10px 14px 8px; border-radius: 10px;
      background: #fffbeb; border: 1px solid #fde68a;
    }
    html[data-theme="dark"] .training-desc-html .tp-tips { background: #2d2300; border-color: #78350f; }
    .training-desc-html .tp-tips .tp-heading { color: #92400e; margin: 0 0 6px; }
    html[data-theme="dark"] .training-desc-html .tp-tips .tp-heading { color: #fbbf24; }
    .training-desc-html .tp-list { margin: 2px 0 6px; padding-left: 18px; list-style: disc; }
    .training-desc-html .tp-list li { margin-bottom: 2px; line-height: 1.4; }
    .training-desc-html .tp-group {
      margin: 8px 0; padding: 8px 12px 10px; border-radius: 10px;
      border-left: 4px solid; background: #f5f5f5;
    }
    .training-desc-html .tp-group .tp-list { margin-top: 4px; }
    .training-desc-html .tp-group-header {
      display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
      font-weight: 800; font-size: 14px;
    }
    .training-desc-html .tp-group-emoji { font-size: 16px; }
    .training-desc-html .tp-group-sub {
      font-weight: 500; font-size: 11px; opacity: .75;
      padding: 1px 6px; border-radius: 999px; background: rgba(0,0,0,.06);
    }
    .training-desc-html .tp-lipanci  { background: #e8f7ea; border-color: #4caf50; }
    .training-desc-html .tp-lipanci  .tp-group-label { color: #2e7d32; }
    .training-desc-html .tp-raketaci { background: #e6f1ff; border-color: #2196f3; }
    .training-desc-html .tp-raketaci .tp-group-label { color: #1565c0; }
    .training-desc-html .tp-jelita   { background: #fdeaea; border-color: #e53935; }
    .training-desc-html .tp-jelita   .tp-group-label { color: #c62828; }
    .training-desc-html .tp-legend {
      position: relative;
      margin-top: 22px;
      padding: 14px 14px 12px;
      background: rgba(255,255,255,.65);
      border: 1px solid rgba(0,0,0,.08);
      border-radius: 12px;
      box-shadow: 0 1px 2px rgba(0,0,0,.04);
      display: flex; flex-direction: column; gap: 6px;
    }
    html[data-theme="dark"] .training-desc-html .tp-legend {
      background: rgba(255,255,255,.04);
      border-color: rgba(255,255,255,.08);
    }
    .training-desc-html .tp-legend::before {
      content: "";
      position: absolute;
      top: -11px; left: 14px; right: 14px;
      height: 1px;
      background: repeating-linear-gradient(to right, rgba(0,0,0,.18) 0 6px, transparent 6px 12px);
    }
    html[data-theme="dark"] .training-desc-html .tp-legend::before {
      background: repeating-linear-gradient(to right, rgba(255,255,255,.22) 0 6px, transparent 6px 12px);
    }
    .training-desc-html .tp-legend-title {
      display: inline-flex; align-items: center; gap: 6px;
      align-self: flex-start;
      font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .5px;
      color: var(--text-light);
      background: var(--card, #fff);
      padding: 3px 10px; border-radius: 999px;
      border: 1px solid rgba(0,0,0,.08);
      margin: -24px 0 4px;
    }
    html[data-theme="dark"] .training-desc-html .tp-legend-title {
      background: var(--dm-card, #1e293b);
      border-color: rgba(255,255,255,.12);
    }
    .training-desc-html .tp-legend-title::before {
      content: "ℹ️"; font-size: 12px;
    }
    .training-desc-html .tp-chip {
      display: block; padding: 4px 10px; border-radius: 8px;
      font-size: 12px; font-weight: 500; border: 1px solid transparent;
    }
    .training-desc-html .tp-chip b { font-weight: 800; }
    .training-desc-html .tp-chip-pace {
      display: inline-block; margin-left: 4px;
      font-size: 10px; font-weight: 600; opacity: .75;
      padding: 1px 6px; border-radius: 999px; background: rgba(255,255,255,.6);
    }
    .training-desc-html .tp-legend-note {
      margin-top: 4px; font-size: 10px; font-style: italic;
      color: var(--text-light); line-height: 1.35;
    }
    .training-desc-html .tp-chip.tp-lipanci  { background: #e8f7ea; color: #2e7d32; border-color: #c8e6c9; }
    .training-desc-html .tp-chip.tp-raketaci { background: #e6f1ff; color: #1565c0; border-color: #bbdefb; }
    .training-desc-html .tp-chip.tp-jelita   { background: #fdeaea; color: #c62828; border-color: #ffcdd2; }
    /* Editor toolbar pro plán tréninku */
    .tm-desc-toolbar {
      display: flex; flex-wrap: wrap; gap: 4px; align-items: center;
      padding: 6px; margin-bottom: 6px;
      background: var(--bg, #f5f5f5); border: 1px solid var(--border); border-radius: 8px;
    }
    .tm-desc-btn {
      font-size: 11px; font-weight: 600;
      padding: 4px 9px; border-radius: 6px;
      border: 1px solid var(--border); background: #fff; color: var(--text);
      cursor: pointer; white-space: nowrap;
    }
    .tm-desc-btn:hover { background: var(--green-light); border-color: var(--green); }
    .tm-desc-btn.tm-lipanci  { background: #e8f7ea; border-color: #c8e6c9; color: #2e7d32; }
    .tm-desc-btn.tm-raketaci { background: #e6f1ff; border-color: #bbdefb; color: #1565c0; }
    .tm-desc-btn.tm-jelita   { background: #fdeaea; border-color: #ffcdd2; color: #c62828; }
    /* KIDS-specific quick buttons (přípravkové bloky) — viditelné jen v audience=kids */
    .tm-desc-btn.tm-kids-rozcvicka { background: #fef3c7; border-color: #fde68a; color: #92400e; }
    .tm-desc-btn.tm-kids-hry       { background: #fce7f3; border-color: #fbcfe8; color: #9d174d; }
    .tm-desc-btn.tm-kids-stafety   { background: #dbeafe; border-color: #bfdbfe; color: #1e40af; }
    .tm-desc-btn.tm-kids-zaver     { background: #d1fae5; border-color: #a7f3d0; color: #065f46; }
    /* Audience switcher — skryje pole irrelevantní pro přípravku */
    #training-modal[data-audience="kids"] .tm-adult-only { display: none !important; }
    #training-modal[data-audience="kids"] .tm-kids-only  { display: inline-flex !important; }
    #training-modal:not([data-audience="kids"]) .tm-kids-only { display: none !important; }
    .tm-desc-sep { width: 1px; align-self: stretch; background: var(--border); margin: 0 2px; }
    /* Větší textarea pro plán tréninku */
    textarea.tm-desc-textarea {
      min-height: 280px;
      resize: vertical;
      font-family: 'Baloo 2', -apple-system, sans-serif;
      font-size: 14px;
      line-height: 1.55;
      padding: 14px 16px;
      border: 2px solid var(--border);
      border-radius: 12px;
      background: var(--card);
      color: var(--text);
      width: 100%;
      box-sizing: border-box;
      transition: border-color .15s ease, box-shadow .15s ease;
    }
    textarea.tm-desc-textarea:focus {
      outline: none;
      border-color: var(--green);
      box-shadow: 0 0 0 4px rgba(22,163,74,.12);
    }
    html[data-theme="dark"] textarea.tm-desc-textarea {
      background: var(--dm-card, #1e293b);
      border-color: var(--dm-border, #334155);
    }
    /* Živý náhled — vždy viditelný pod editorem */
    .tm-desc-preview-live {
      margin-top: 8px;
      min-height: 60px;
      border: 2px dashed var(--green-light, #bbf7d0);
      background: linear-gradient(180deg, rgba(22,163,74,.04), rgba(22,163,74,.01));
    }
    html[data-theme="dark"] .tm-desc-preview-live {
      border-color: rgba(74,222,128,.25);
      background: linear-gradient(180deg, rgba(22,163,74,.08), rgba(22,163,74,.02));
    }
    .tm-desc-preview-live:empty::before {
      content: "Náhled se zobrazí tady, jak píšeš…";
      color: var(--text-light);
      font-size: 12px;
      font-style: italic;
    }
    /* Training plan card — distinctive style in detail view */
    .training-plan-card {
      margin-top: 8px;
      padding: 12px 0;
      background: transparent;
      border-left: none;
      border-radius: 0;
      font-size: 14px;
      line-height: 1.45;
      color: var(--text);
    }
    .training-plan-row .info-label {
      font-weight: 700;
      color: var(--green-dark);
    }

    .participants-row {
      display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
    }
    .avatar-mini {
      width: 28px; height: 28px; border-radius: 50%; background: var(--green-light);
      color: var(--green-deep); display: flex; align-items: center; justify-content: center;
      font-size: 11px; font-weight: 700; font-family: 'Baloo 2', sans-serif;
      border: 2px solid white;
    }
    .avatar-mini.more { background: var(--border); color: var(--text-light); font-size: 10px; }
    .avatar-mini[data-member] { cursor: pointer; }

    /* Member preview popup */
    .member-popup {
      position: fixed; z-index: 999; background: #fff; border-radius: 14px;
      box-shadow: 0 8px 24px rgba(0,0,0,.18); padding: 16px 18px;
      display: flex; align-items: center; gap: 14px;
      min-width: 180px; max-width: 260px;
      pointer-events: none; opacity: 0; transition: opacity .15s;
    }
    .member-popup.visible { opacity: 1; pointer-events: auto; }
    .member-popup-avatar {
      width: 48px; height: 48px; border-radius: 50%; flex-shrink: 0;
      background: var(--green-light); color: var(--green-deep);
      display: flex; align-items: center; justify-content: center;
      font-family: 'Baloo 2', sans-serif; font-size: 17px; font-weight: 800;
      overflow: hidden; border: 2px solid var(--green-mid);
    }
    .member-popup-avatar img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }
    .member-popup-name { font-weight: 700; font-size: 15px; line-height: 1.3; }

    .register-bar {
      position: relative; background: var(--card);
      padding: 16px 16px calc(16px + env(safe-area-inset-bottom, 0px));
      margin-top: 12px;
      border-top: 1px solid var(--border);
      display: flex; gap: 10px;
    }

    /* ── QR MODAL ────────────────────────────────────── */
    .modal-overlay {
      position: fixed; inset: 0; background: rgba(0,0,0,.5);
      display: flex; align-items: flex-end; justify-content: center;
      z-index: 200; opacity: 0; pointer-events: none; transition: opacity .3s;
    }
    .modal-overlay.open { opacity: 1; pointer-events: all; }
    .modal-sheet {
      background: var(--card); border-radius: 20px 20px 0 0; padding: 0;
      width: 100%; max-width: 480px; transform: translateY(100%);
      transition: transform .3s ease; overflow-y: auto;
      max-height: 92vh;
    }
    .modal-overlay.open .modal-sheet { transform: translateY(0); }
    /* Mobile: bottom-sheet zůstává sheet (NE fullscreen) */
    @media (max-width: 600px) {
      .modal-sheet {
        max-height: 85vh; border-radius: 16px 16px 0 0;
        padding-bottom: env(safe-area-inset-bottom, 0px);
      }
    }
    /* Centrovaná varianta modalu (neposuvná, uprostřed obrazovky) */
    .modal-card {
      background: white; border-radius: 20px; padding: 24px;
      width: calc(100% - 32px); max-width: 480px;
      transform: translateY(20px); opacity: 0;
      transition: transform .3s ease, opacity .3s ease;
      max-height: 90vh; overflow-y: auto;
    }
    .modal-overlay.open .modal-card { transform: translateY(0); opacity: 1; }
    .modal-overlay:has(.modal-card) { align-items: center; }
    .modal-handle { width: 40px; height: 4px; border-radius: 2px; background: var(--border); margin: 12px auto 20px; }
    .modal-body { padding: 0 24px calc(32px + env(safe-area-inset-bottom, 0px)); }
    .modal-title { font-family: 'Baloo 2', sans-serif; font-size: 22px; font-weight: 800; margin-bottom: 4px; }
    .modal-sub { color: var(--text-light); font-size: 14px; margin-bottom: 24px; }
    .qr-container { display: flex; justify-content: center; margin-bottom: 20px; }
    #qr-code canvas, #qr-code img { border-radius: 8px; }
    .payment-info {
      background: var(--bg); border-radius: var(--radius-sm); padding: 14px;
      font-size: 13px; color: var(--text-light); text-align: center; line-height: 1.6;
    }
    .payment-info strong { color: var(--text); font-size: 15px; }

    /* ── DISCOUNT CODES SCREEN ───────────────────────────── */
    .dc-hero {
      background: linear-gradient(135deg, #22c55e 0%, #0ea5e9 100%);
      padding: 32px 20px 28px; text-align: center; color: #fff;
      margin: -16px -16px 20px; position: relative;
    }
    .dc-hero-title {
      font-family: 'Baloo 2', sans-serif; font-size: 26px; font-weight: 800;
      margin: 0; text-shadow: 0 2px 8px rgba(0,0,0,.15);
    }
    .dc-hero-sub { font-size: 14px; opacity: .9; margin-top: 4px; }
    .dc-back {
      position: absolute; top: 14px; left: 14px; background: rgba(255,255,255,.2);
      border: none; color: #fff; font-size: 18px; width: 36px; height: 36px;
      border-radius: 50%; cursor: pointer; display: flex; align-items: center; justify-content: center;
    }
    .dc-back:active { background: rgba(255,255,255,.35); }
    .dc-list { display: flex; flex-direction: column; gap: 16px; padding: 0 16px 24px; }
    .dc-card {
      background: var(--card); border-radius: 16px; overflow: hidden;
      box-shadow: 0 2px 12px rgba(0,0,0,.06); border: 1px solid var(--border);
    }
    .dc-card-top {
      display: flex; align-items: center; justify-content: space-between;
      padding: 14px 16px 10px; border-bottom: 1px solid var(--border);
    }
    .dc-card-name { font-family: 'Baloo 2', sans-serif; font-size: 16px; font-weight: 700; color: var(--text); }
    .dc-badge {
      display: inline-flex; align-items: center; background: #dcfce7; color: #15803d;
      font-size: 13px; font-weight: 800; border-radius: 20px; padding: 4px 12px;
      white-space: nowrap;
    }
    html[data-theme="dark"] .dc-badge { background: #14532d; color: #86efac; }
    .dc-card-body { padding: 14px 16px 16px; }
    .dc-desc { font-size: 13px; color: var(--text-light); line-height: 1.5; margin-bottom: 12px; }
    .dc-code-row {
      display: flex; align-items: center; gap: 10px;
      background: var(--bg); border: 2px dashed var(--border); border-radius: 10px;
      padding: 10px 14px; margin-bottom: 12px;
    }
    .dc-code-text {
      flex: 1; font-family: 'Courier New', monospace; font-size: 18px;
      font-weight: 800; color: var(--text); letter-spacing: .5px;
    }
    .dc-copy-btn {
      background: var(--green); color: #fff; border: none; border-radius: 8px;
      padding: 8px 14px; font-size: 13px; font-weight: 700; cursor: pointer;
      white-space: nowrap; transition: opacity .15s;
    }
    .dc-copy-btn:active { opacity: .8; }
    .dc-copy-btn.copied { background: #16a34a; }
    .dc-link {
      display: inline-flex; align-items: center; gap: 6px;
      color: var(--accent); font-size: 13px; font-weight: 600;
      text-decoration: none;
    }
    .dc-link:hover { text-decoration: underline; }
    .dc-note {
      font-size: 12px; color: var(--text-light); margin-top: 8px;
      padding: 8px 12px; background: var(--bg); border-radius: 8px; line-height: 1.5;
    }

    /* ── ATTENDANCE SCREEN ───────────────────────────── */
    .stats-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-bottom: 16px; }
    .stat-box {
      background: var(--card); border-radius: var(--radius); padding: 14px 10px;
      text-align: center; box-shadow: var(--shadow);
    }
    .stat-box .val { font-family: 'Baloo 2', sans-serif; font-size: 28px; font-weight: 800; color: var(--green); }
    .stat-box .lbl { font-size: 11px; color: var(--text-light); text-transform: uppercase; letter-spacing: .4px; margin-top: 2px; }

    .progress-bar-wrap { background: var(--border); border-radius: 99px; height: 8px; margin: 6px 0 12px; overflow: hidden; }
    .progress-bar-fill { height: 100%; border-radius: 99px; background: var(--green); transition: width .5s ease; }

    .attendance-item {
      display: flex; align-items: center; gap: 12px;
      padding: 12px 0; border-bottom: 1px solid var(--border);
    }
    .attendance-item:last-child { border-bottom: none; }
    .att-date-box {
      background: var(--bg); border-radius: var(--radius-sm); min-width: 46px;
      text-align: center; padding: 6px 4px;
    }
    .att-date-box .d { font-family: 'Baloo 2', sans-serif; font-weight: 800; font-size: 18px; line-height: 1; }
    .att-date-box .m { font-size: 10px; color: var(--text-light); text-transform: uppercase; font-weight: 600; }
    .att-info { flex: 1; }
    .att-type { font-weight: 600; font-size: 14px; }
    .att-meta { font-size: 12px; color: var(--text-light); margin-top: 1px; }

    /* ── PROFILE SCREEN ──────────────────────────────── */
    .profile-header {
      background: linear-gradient(135deg, var(--green-deep) 0%, var(--green) 100%);
      color: white; padding: 32px 16px 24px; text-align: center;
    }
    .avatar-lg {
      width: 88px; height: 88px; border-radius: 50%; background: rgba(255,255,255,.2);
      display: flex; align-items: center; justify-content: center;
      font-family: 'Baloo 2', sans-serif; font-weight: 800; font-size: 32px;
      margin: 0 auto 12px; border: 3px solid rgba(255,255,255,.5);
      cursor: pointer; position: relative; overflow: hidden;
    }
    .avatar-lg img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }
    .photo-overlay {
      position: absolute; bottom: 0; left: 0; right: 0;
      background: rgba(0,0,0,.45); color: white; font-size: 13px;
      text-align: center; padding: 3px 0; line-height: 1.4;
    }
    .avatar-sm img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }

    /* ── RECORDS ──────────────────────────────────────── */
    .records-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
    .record-box {
      background: var(--bg); border-radius: var(--radius-sm); padding: 10px 6px;
      text-align: center; border: 1.5px solid var(--border);
    }
    .record-dist { font-size: 10px; color: var(--text-light); font-weight: 700; text-transform: uppercase; letter-spacing: .3px; margin-bottom: 4px; }
    .record-time { font-family: 'Baloo 2', sans-serif; font-size: 17px; font-weight: 700; color: var(--green-deep); line-height: 1.1; }
    .record-time.empty { color: #cbd5e1; font-size: 18px; font-weight: 400; }

    /* ── PR TIMELINE ──────────────────────────────────── */
    .pr-view-tabs { display:flex; border:1.5px solid var(--border); border-radius:10px; overflow:hidden; margin-bottom:12px; }
    .pr-view-tab  { flex:1; padding:9px; text-align:center; font-size:13px; font-weight:700; cursor:pointer; color:var(--text-light); transition:background .15s,color .15s; }
    .pr-view-tab.active { background:var(--green); color:#fff; }
    .pr-dist-pills { display:flex; gap:6px; flex-wrap:wrap; margin-bottom:12px; }
    .pr-dist-pill  { padding:5px 12px; border-radius:20px; font-size:12px; font-weight:700; border:1.5px solid var(--border); background:#fff; color:var(--text-light); cursor:pointer; }
    .pr-dist-pill.active { background:var(--green); color:#fff; border-color:var(--green); }
    .pr-dist-pill.disabled { opacity:.4; cursor:default; }

    /* ── PROFILE TABS ────────────────────────────────── */
    .profile-tabs {
      display:flex; gap:0; overflow-x:auto;
      padding:0 16px 0 16px;
      /* malý padding-right vlevo wrapperu aby okrajový tab "vykukoval" */
      scroll-padding-inline-end:24px;
      border-bottom:2px solid var(--border); background:var(--card);
      -webkit-overflow-scrolling:touch;
      scrollbar-width:none;
      /* fade gradient na pravém okraji = vizuální hint že lze scrollovat */
      -webkit-mask-image: linear-gradient(to right, black 0, black calc(100% - 28px), transparent 100%);
              mask-image: linear-gradient(to right, black 0, black calc(100% - 28px), transparent 100%);
      scroll-snap-type: x proximity;
      margin-bottom:0;
    }
    .profile-tabs::-webkit-scrollbar { display:none; }
    .profile-tab { padding:10px 14px; font-size:13px; font-weight:700; color:var(--text-light); cursor:pointer; white-space:nowrap; border-bottom:2.5px solid transparent; transition:color .15s, border-color .15s, background .15s; scroll-snap-align: start; }
    .profile-tab.active { color:var(--green); border-bottom-color:var(--green); }
    /* Admin/Trenér CTA — role-specific "Správa..." tab vyčnívá zelenou pilulkou */
    .profile-tab.admin-cta {
      margin:6px 4px 6px 8px;
      padding:8px 14px;
      background:var(--green);
      color:#fff;
      border-radius:999px;
      border-bottom:none;
      box-shadow:0 2px 6px rgba(34,197,94,.28);
      display:inline-flex; align-items:center; gap:6px;
    }
    .profile-tab.admin-cta:hover { background:var(--green-dark, #15803d); }
    .profile-tab.admin-cta.active { color:#fff; border-bottom:none; box-shadow:0 2px 10px rgba(34,197,94,.45); transform:translateY(-1px); }
    .profile-tab-content { display:none; }
    .profile-tab-content.active { display:block; }

    /* ═══ MERCH TAB — Runner Figure + Catalog ═══ */
    /* ═══ MERCH v2 — Katalog oblečení ═══ */
    .merch-stats{display:flex;gap:0;border-bottom:1px solid var(--border);background:var(--card)}
    .merch-stats-cell{flex:1;padding:12px 8px;text-align:center;border-right:1px solid var(--border)}
    .merch-stats-cell:last-child{border-right:none}
    .merch-stats-val{font-size:18px;font-weight:800;font-family:'Baloo 2',sans-serif;color:var(--green)}
    .merch-stats-label{font-size:10px;color:var(--text-light);text-transform:uppercase;letter-spacing:.4px;margin-top:2px}
    .merch-progress{height:6px;background:var(--border);border-radius:3px;margin:0 16px 4px;overflow:hidden}
    .merch-progress-bar{height:100%;border-radius:3px;background:linear-gradient(90deg,#16a34a,#22c55e);transition:width .4s ease}
    .merch-filters{display:flex;gap:6px;padding:12px 16px 8px;overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none}
    .merch-filters::-webkit-scrollbar{display:none}
    .merch-filter{flex-shrink:0;padding:6px 14px;border-radius:20px;font-size:12px;font-weight:600;border:1.5px solid var(--border);background:var(--bg);color:var(--text-light);cursor:pointer;transition:all .15s;white-space:nowrap}
    .merch-filter.active{background:var(--green);color:#fff;border-color:var(--green)}
    .merch-gender-toggle{display:flex;gap:4px;padding:0 16px 10px}
    .merch-gender-btn{padding:4px 12px;border-radius:16px;font-size:11px;font-weight:600;border:1.5px solid var(--border);background:var(--bg);color:var(--text-light);cursor:pointer;transition:all .15s}
    .merch-gender-btn.active{border-color:var(--green);color:var(--green-dark);background:var(--green-light)}
    html[data-theme="dark"] .merch-gender-btn.active{background:#052e16;color:#4ade80;border-color:#4ade80}
    .merch-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;padding:0 16px 16px}
    @media(min-width:600px){.merch-grid{grid-template-columns:repeat(3,1fr)}}
    @media(min-width:900px){.merch-grid{grid-template-columns:repeat(4,1fr)}}
    .merch-card{background:var(--card);border:1px solid var(--border);border-radius:var(--radius);overflow:hidden;transition:all .2s;position:relative;box-shadow:0 1px 3px rgba(0,0,0,.06)}
    .merch-card:hover{transform:translateY(-2px);box-shadow:0 4px 12px rgba(0,0,0,.1)}
    .merch-card-img{width:100%;aspect-ratio:1;object-fit:cover;background:var(--bg);display:flex;align-items:center;justify-content:center;font-size:48px;color:var(--text-light)}
    .merch-card-img img{width:100%;height:100%;object-fit:cover}
    .merch-card-body{padding:10px 12px}
    .merch-card-name{font-size:13px;font-weight:700;line-height:1.3;margin-bottom:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
    .merch-card-row{display:flex;align-items:center;justify-content:space-between;margin-bottom:6px}
    .merch-card-price{font-size:13px;font-weight:800;color:var(--text)}
    .merch-card-gender{font-size:10px;font-weight:600;padding:1px 6px;border-radius:8px;background:var(--bg);color:var(--text-light);border:1px solid var(--border)}
    .merch-card-actions{display:flex;gap:6px;margin-bottom:6px}
    .merch-toggle{flex:1;display:flex;align-items:center;justify-content:center;gap:4px;height:32px;border-radius:16px;font-size:11px;font-weight:700;border:1.5px solid var(--border);background:var(--bg);color:var(--text-light);cursor:pointer;transition:all .15s}
    .merch-toggle:active{transform:scale(.96)}
    .merch-toggle.own-active{border-color:var(--green);background:var(--green-light);color:var(--green-dark)}
    .merch-toggle.want-active{border-color:#f59e0b;background:#fef3c7;color:#92400e}
    html[data-theme="dark"] .merch-toggle.own-active{background:#052e16;color:#4ade80;border-color:#4ade80}
    html[data-theme="dark"] .merch-toggle.want-active{background:#2d1b00;color:#fbbf24;border-color:#fbbf24}
    .merch-buy-link{display:block;text-align:center;font-size:11px;font-weight:600;color:var(--green);text-decoration:none;padding:4px 0 2px}
    .merch-buy-link:hover{text-decoration:underline}
    .merch-admin-btns{position:absolute;top:6px;right:6px;display:flex;gap:4px;z-index:2}
    .merch-admin-btn{width:26px;height:26px;border-radius:50%;border:none;background:rgba(255,255,255,.85);backdrop-filter:blur(4px);font-size:12px;cursor:pointer;display:flex;align-items:center;justify-content:center}
    .merch-admin-btn:hover{background:rgba(255,255,255,1)}
    .merch-cat-title{font-family:'Baloo 2',sans-serif;font-size:14px;font-weight:700;padding:16px 16px 6px;color:var(--text-light)}
    .merch-empty{text-align:center;padding:40px 24px;color:var(--text-light);font-size:13px}

    /* ── COMMUNITY FEED ─────────────────────────────── */
    .community-header{background:var(--card);border-bottom:1px solid var(--border);padding:0 16px;height:56px;display:flex;align-items:center;justify-content:space-between}
    .community-header-title{font-family:'Baloo 2',sans-serif;font-weight:800;font-size:20px}
    .feed-type-toggle{display:flex;gap:4px;padding:8px 16px;background:var(--card);border-bottom:1px solid var(--border)}
    .feed-type-btn{flex:1;padding:8px 12px;border:2px solid var(--border);border-radius:var(--radius-sm);background:var(--bg);color:var(--text-light);font-size:14px;font-weight:700;font-family:'Baloo 2',sans-serif;cursor:pointer;transition:all .2s;text-align:center}
    .feed-type-btn.active[data-feed="adults"]{background:var(--green-light);color:var(--green-deep);border-color:var(--green)}
    .feed-type-btn.active[data-feed="kids"]{background:#fef3c7;color:#92400e;border-color:#f59e0b}
    html[data-theme="dark"] .feed-type-btn.active[data-feed="kids"]{background:#422006;color:#fbbf24;border-color:#f59e0b}
    .community-tabs{display:flex;border-bottom:1px solid var(--border);background:var(--card);padding:0 16px}
    .community-tab{flex:1;text-align:center;padding:10px 0;font-size:14px;font-weight:700;color:var(--text-light);cursor:pointer;border-bottom:3px solid transparent;transition:all .2s}
    .community-tab.active{color:var(--green);border-bottom-color:var(--green)}
    .feed-post{background:var(--card);border:1px solid var(--border);border-radius:var(--radius);margin:12px 16px;overflow:hidden;transition:transform .15s}
    .feed-post-header{display:flex;align-items:center;gap:10px;padding:14px 16px 8px}
    .feed-post-avatar{width:40px;height:40px;border-radius:50%;background:var(--green-light);display:flex;align-items:center;justify-content:center;font-size:14px;font-weight:800;color:var(--green);flex-shrink:0;overflow:hidden}
    .feed-post-avatar img{width:100%;height:100%;object-fit:cover}
    .feed-post-meta{flex:1;min-width:0}
    .feed-post-name{font-weight:700;font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
    .feed-post-time{font-size:11px;color:var(--text-light);margin-top:1px}
    .feed-post-fav{font-size:18px;cursor:pointer;padding:4px;transition:transform .2s}
    .feed-post-fav:active{transform:scale(1.3)}
    .feed-post-body{padding:0 16px 10px;font-size:14px;line-height:1.6}
    .feed-post-body .feed-title{font-weight:700;font-size:15px;margin-bottom:4px}
    .feed-post-tags{display:flex;gap:6px;padding:0 16px 10px;flex-wrap:wrap}
    .feed-tag{padding:3px 10px;border-radius:16px;font-size:12px;font-weight:600;background:var(--green-light);color:var(--green-dark);border:1px solid var(--green)}
    html[data-theme="dark"] .feed-tag{background:#052e16;color:#4ade80;border-color:#4ade80}
    .feed-post-image{width:100%;max-height:300px;object-fit:cover;cursor:pointer;border-radius:0;transition:opacity .15s}
    .feed-post-image:active{opacity:.8}
    /* Lightbox */
    .lightbox-overlay{position:fixed;inset:0;z-index:10000;background:rgba(0,0,0,.92);display:flex;align-items:center;justify-content:center;opacity:0;pointer-events:none;transition:opacity .25s}
    .lightbox-overlay.open{opacity:1;pointer-events:auto}
    .lightbox-overlay img{max-width:95vw;max-height:90vh;object-fit:contain;border-radius:8px;touch-action:none;transform-origin:center center;transition:transform .1s ease-out}
    .lightbox-overlay .close-btn{position:absolute;top:max(16px, env(safe-area-inset-top, 16px));right:16px}
    .feed-post-actions{display:flex;gap:0;border-top:1px solid var(--border)}
    .feed-action-btn{flex:1;display:flex;align-items:center;justify-content:center;gap:6px;padding:10px;font-size:13px;font-weight:600;color:var(--text-light);cursor:pointer;transition:color .15s;background:none;border:none}
    .feed-action-btn:hover{color:var(--text)}
    .feed-action-btn.liked{color:#ef4444}
    .feed-reactors-summary{display:flex;flex-wrap:wrap;gap:6px;padding:8px 16px;border-top:1px solid var(--border)}
    .feed-reactors-chip{display:inline-flex;align-items:center;gap:5px;max-width:100%;padding:4px 10px;border-radius:14px;background:var(--bg);border:1px solid var(--border);font-size:12px;color:var(--text);cursor:pointer;line-height:1.3}
    .feed-reactors-chip span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
    .feed-reactors-chip:hover{background:var(--green-light)}
    .feed-view-count{padding:8px 16px;border-top:1px solid var(--border);font-size:12px;color:var(--text-light);font-weight:600;cursor:pointer}
    .feed-view-list{background:var(--bg);border:1px solid var(--border);border-radius:8px;padding:8px 12px;margin:0 16px 8px;max-height:200px;overflow-y:auto}
    .feed-comments{background:var(--bg);border-top:1px solid var(--border);padding:8px 16px}
    .feed-comment{display:flex;gap:8px;padding:6px 0;font-size:13px}
    .feed-comment-name{font-weight:700;flex-shrink:0}
    .feed-comment-text{flex:1;line-height:1.4}
    .feed-comment-time{font-size:10px;color:var(--text-light);flex-shrink:0;align-self:center}
    .feed-comment-input{display:flex;gap:8px;padding:8px 0;border-top:1px solid var(--border)}
    .feed-comment-input input{flex:1;border:1px solid var(--border);border-radius:20px;padding:6px 14px;font-size:13px;background:var(--card);color:var(--text);outline:none}
    .feed-comment-input input:focus{border-color:var(--green)}
    .feed-comment-input button{background:var(--green);color:#fff;border:none;border-radius:50%;width:32px;height:32px;font-size:14px;cursor:pointer;flex-shrink:0}
    .feed-empty{text-align:center;padding:60px 24px;color:var(--text-light)}
    .feed-empty-icon{font-size:48px;margin-bottom:12px}
    .feed-type-badge{display:inline-flex;align-items:center;gap:3px;font-size:11px;font-weight:700;padding:2px 8px;border-radius:10px;margin-left:6px}
    .feed-type-badge.race{background:#dbeafe;color:#1e40af}
    .feed-type-badge.pr{background:#fef3c7;color:#92400e}
    .feed-type-badge.challenge{background:#fce7f3;color:#9d174d}
    html[data-theme="dark"] .feed-type-badge.race{background:#1e3a5f;color:#93c5fd}
    html[data-theme="dark"] .feed-type-badge.pr{background:#422006;color:#fcd34d}
    html[data-theme="dark"] .feed-type-badge.challenge{background:#4a1942;color:#f9a8d4}
    .feed-type-badge.training{background:#d1fae5;color:#065f46}
    .feed-type-badge.kemp{background:#ede9fe;color:#5b21b6}
    html[data-theme="dark"] .feed-type-badge.training{background:#064e3b;color:#6ee7b7}
    html[data-theme="dark"] .feed-type-badge.kemp{background:#2e1065;color:#c4b5fd}

    /* ── Messaging styles ──────────────────────────────── */
    .msg-inbox-item{display:flex;align-items:center;gap:12px;padding:14px 16px;border-bottom:1px solid var(--border);cursor:pointer;transition:background .15s}
    .msg-inbox-item:active{background:var(--hover)}
    .msg-inbox-item.unread{background:rgba(34,197,94,.06)}
    .msg-inbox-item .msg-avatar{width:40px;height:40px;border-radius:50%;background:var(--green);color:#fff;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:14px;flex-shrink:0;overflow:hidden}
    .msg-inbox-item .msg-avatar img{width:100%;height:100%;object-fit:cover}
    .msg-inbox-item .msg-preview{flex:1;min-width:0}
    .msg-inbox-item .msg-name{font-weight:600;font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
    .msg-inbox-item .msg-text{font-size:12px;color:var(--text-light);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:2px}
    .msg-inbox-item .msg-time{font-size:11px;color:var(--text-light);flex-shrink:0}
    .msg-inbox-item .msg-unread-dot{width:8px;height:8px;border-radius:50%;background:var(--green);flex-shrink:0}
    .msg-thread{display:flex;flex-direction:column;height:100%}
    .msg-thread-messages{flex:1;overflow-y:auto;padding:16px}
    .msg-bubble{max-width:80%;padding:10px 14px;border-radius:16px;margin-bottom:8px;font-size:14px;line-height:1.4;word-break:break-word}
    .msg-bubble.sent{background:var(--green);color:#fff;margin-left:auto;border-bottom-right-radius:4px}
    .msg-bubble.received{background:var(--card);border:1px solid var(--border);border-bottom-left-radius:4px}
    .msg-bubble .msg-bubble-time{font-size:10px;opacity:.7;margin-top:4px}
    .msg-compose-bar{display:flex;gap:8px;padding:12px 16px;border-top:1px solid var(--border);background:var(--bg)}
    .msg-compose-bar input{flex:1;padding:10px 14px;border:1.5px solid var(--border);border-radius:20px;font-size:14px;background:var(--card);color:var(--text)}
    .msg-compose-bar button{padding:10px 16px;border-radius:20px;background:var(--green);color:#fff;border:none;font-weight:700;font-size:14px;cursor:pointer}
    .msg-badge{position:absolute;top:2px;right:2px;min-width:16px;height:16px;border-radius:8px;background:#ef4444;color:#fff;font-size:10px;font-weight:700;display:flex;align-items:center;justify-content:center;padding:0 4px;line-height:1}
    /* ── Report modal ─────────────────────────────────── */
    .report-reason-list{display:flex;flex-direction:column;gap:8px;margin:12px 0}
    .report-reason-item{display:flex;align-items:center;gap:10px;padding:12px 14px;border:1.5px solid var(--border);border-radius:var(--radius-sm);cursor:pointer;transition:border-color .15s}
    .report-reason-item:has(input:checked){border-color:var(--green);background:rgba(34,197,94,.06)}
    .report-reason-item input[type="radio"]{accent-color:var(--green);width:16px;height:16px}
    .feed-post-menu{position:relative}
    .feed-post-menu-btn{font-size:18px;cursor:pointer;padding:4px 6px;border-radius:4px;transition:background .15s}
    .feed-post-menu-btn:hover{background:var(--hover)}

    /* Feed filter bar */
    .feed-filter-bar{display:flex;gap:6px;padding:10px 16px 8px;overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none;background:var(--card);border-bottom:1px solid var(--border);position:sticky;top:0;z-index:10}
    .feed-filter-bar::-webkit-scrollbar{display:none}
    .feed-filter-chip{flex-shrink:0;padding:6px 14px;border-radius:20px;font-size:13px;font-weight:600;border:1.5px solid var(--border);background:var(--bg);color:var(--text-light);cursor:pointer;transition:all .15s;white-space:nowrap}
    .feed-filter-chip.active{background:var(--green);color:#fff;border-color:var(--green)}
    /* Unified community feed — hashtag chip bar (scroll-x) + FAB */
    .unified-chip-bar{display:flex;gap:6px;padding:10px 16px;overflow-x:auto;scrollbar-width:none;border-bottom:1px solid var(--border);background:var(--card)}
    .unified-chip-bar::-webkit-scrollbar{display:none}
    .unified-chip{flex-shrink:0;padding:6px 14px;border-radius:20px;font-size:13px;font-weight:600;border:1.5px solid var(--border);background:var(--bg);color:var(--text-light);cursor:pointer;transition:all .15s;white-space:nowrap;user-select:none}
    .unified-chip.active{background:var(--green);color:#fff;border-color:var(--green)}
    #community-fab{position:fixed;right:20px;bottom:80px;width:56px;height:56px;border-radius:50%;background:var(--green);color:#fff;border:none;font-size:22px;cursor:pointer;box-shadow:0 4px 16px rgba(0,0,0,.2);z-index:40;display:none;font-family:inherit}
    #community-fab:hover{transform:scale(1.05)}
    .unified-mode #community-fab{display:flex;align-items:center;justify-content:center}
    .feed-month-select{flex-shrink:0;padding:6px 12px;border-radius:20px;font-size:13px;font-weight:600;border:1.5px solid var(--border);background:var(--bg);color:var(--text-light);cursor:pointer;appearance:none;-webkit-appearance:none;margin-left:auto}
    .feed-month-select.active{border-color:var(--green);color:var(--green)}
    .feed-results-info{padding:4px 16px 8px;font-size:12px;color:var(--text-light)}

    /* ── Community Races Tab ─────────────────────────── */
    .community-race-card{background:var(--card);border:1.5px solid var(--border);border-radius:var(--radius);padding:16px;margin-bottom:10px;cursor:pointer;transition:transform .15s,box-shadow .15s}
    .community-race-card:active{transform:scale(.98)}
    .community-race-card.past{opacity:.7;border-style:dashed}
    .community-race-date{width:48px;height:52px;border-radius:10px;background:var(--green-light);border:2px solid var(--green);display:flex;flex-direction:column;align-items:center;justify-content:center;flex-shrink:0}
    .community-race-day{font-size:20px;font-weight:800;color:var(--green-deep);line-height:1}
    .community-race-dayname{font-size:10px;font-weight:700;color:var(--green);text-transform:uppercase}
    .community-race-badge{display:inline-flex;align-items:center;gap:3px;font-size:11px;font-weight:600;padding:3px 10px;border-radius:12px}
    .community-race-badge.going{background:#d1fae5;color:#065f46}
    .community-race-badge.offer{background:#dbeafe;color:#1e40af}
    .community-race-badge.seek{background:#fef3c7;color:#92400e}
    html[data-theme="dark"] .community-race-badge.going{background:#064e3b;color:#6ee7b7}
    html[data-theme="dark"] .community-race-badge.offer{background:#1e3a5f;color:#93c5fd}
    html[data-theme="dark"] .community-race-badge.seek{background:#422006;color:#fcd34d}
    .share-race-pick{padding:14px 16px;border:1.5px solid var(--border);border-radius:var(--radius);margin-bottom:8px;cursor:pointer;transition:all .15s}
    .share-race-pick:active{background:var(--green-light);border-color:var(--green)}

    /* ── Bazaar / Bazar ──────────────────────────────── */
    .bazaar-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;padding:12px 16px}
    @media(max-width:380px){.bazaar-grid{grid-template-columns:1fr}}
    .bazaar-card{background:var(--card);border:1.5px solid var(--border);border-radius:var(--radius);overflow:hidden;cursor:pointer;transition:transform .15s}
    .bazaar-card:active{transform:scale(.97)}
    .bazaar-card.sold{opacity:.6}
    .bazaar-card-img{height:120px;background:var(--bg);display:flex;align-items:center;justify-content:center;position:relative;overflow:hidden}
    .bazaar-card-img img{width:100%;height:100%;object-fit:cover}
    .bazaar-no-img{font-size:36px}
    .bazaar-sold-overlay{position:absolute;inset:0;background:rgba(0,0,0,.5);color:#fff;font-weight:800;font-size:14px;display:flex;align-items:center;justify-content:center;letter-spacing:1px}
    .bazaar-card-body{padding:10px 12px}
    .bazaar-card-title{font-weight:700;font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
    .bazaar-card-price{font-size:16px;font-weight:800;color:var(--green);margin:4px 0}
    .bazaar-card-meta{display:flex;gap:4px;flex-wrap:wrap;margin-bottom:8px}
    .bazaar-cat-badge{font-size:10px;font-weight:600;padding:2px 8px;border-radius:8px;background:var(--green-light);color:var(--green-deep)}
    .bazaar-cond-badge{font-size:10px;font-weight:600;padding:2px 8px;border-radius:8px;background:#f3f4f6;color:#6b7280}
    html[data-theme="dark"] .bazaar-cond-badge{background:#374151;color:#d1d5db}
    .bazaar-sold-badge{font-size:10px;font-weight:700;padding:2px 8px;border-radius:8px;background:#fee2e2;color:#dc2626}
    html[data-theme="dark"] .bazaar-sold-badge{background:#450a0a;color:#fca5a5}
    .bazaar-card-author{display:flex;align-items:center;gap:6px;font-size:11px;color:var(--text-light)}
    .bazaar-card-av{width:20px;height:20px;border-radius:50%;background:var(--green-light);display:flex;align-items:center;justify-content:center;font-size:8px;font-weight:700;color:var(--green-deep)}

    /* ── CHALLENGES / KM VÝZVY ───────────────────────── */
    .month-nav { display:flex; align-items:center; justify-content:center; gap:12px;
                 padding:4px 0 14px; font-weight:700; font-size:15px; }
    .month-nav-btn { background:none; border:none; font-size:22px; cursor:pointer;
                     color:var(--text-light); padding:8px 12px; border-radius:8px; line-height:1;
                     min-width:44px; min-height:44px; display:flex; align-items:center; justify-content:center; }
    .month-nav-btn:disabled { opacity:.3; cursor:default; }
    .month-nav-btn:hover { background:var(--bg); color:var(--green); }
    .challenge-add-btn { display:flex; align-items:center; justify-content:flex-end; margin-bottom:12px; }
    .challenge-card { background:var(--card); border-radius:12px; padding:16px; margin-bottom:12px;
                      box-shadow:var(--shadow); border:1px solid var(--border); }
    .challenge-card-header { display:flex; align-items:flex-start; justify-content:space-between; margin-bottom:4px; }
    .challenge-title { font-weight:700; font-size:15px; }
    .challenge-meta  { font-size:12px; color:var(--text-light); margin-bottom:12px; }
    .challenge-row   { display:flex; align-items:center; gap:8px; margin-bottom:7px; }
    .challenge-uname { width:88px; font-size:13px; flex-shrink:0; overflow:hidden;
                       text-overflow:ellipsis; white-space:nowrap; }
    .challenge-bar-wrap { flex:1; background:var(--bg); border-radius:20px; height:8px; overflow:hidden; }
    .challenge-bar-fill { height:100%; background:var(--green); border-radius:20px; transition:width .5s; }
    .challenge-km    { font-size:12px; font-weight:700; color:var(--green); min-width:52px; text-align:right; }
    .challenge-check { font-size:13px; width:18px; text-align:center; }
    .challenge-del-btn { background:none; border:none; color:var(--text-light); cursor:pointer;
                         font-size:16px; padding:0 2px; line-height:1; }
    .challenge-del-btn:hover { color:#ef4444; }
    .challenge-cover { width:100%; height:140px; object-fit:cover; border-radius:8px; margin-bottom:10px; display:block; }
    .challenge-desc  { font-size:13px; color:var(--text-light); margin-bottom:12px; white-space:pre-wrap; line-height:1.5; }
    .ch-photo-upload { width:100%; height:160px; border:2px dashed var(--border); border-radius:10px;
                       display:flex; align-items:center; justify-content:center; cursor:pointer;
                       color:var(--text-light); font-size:14px; overflow:hidden; transition:border-color .2s;
                       position:relative; }
    .ch-photo-upload:not(:has(img)):hover { border-color:var(--green); color:var(--green); }
    .ch-photo-upload img { width:100%; height:100%; object-fit:cover; border-radius:8px; cursor:default; }

    /* ── Run modal header + close ── */
    .run-modal-header { display:flex; align-items:center; justify-content:center; padding:12px 16px 0;
                        padding-top:max(12px, env(safe-area-inset-top, 12px));
                        position:relative; }
    .run-modal-header .close-btn { position:absolute; right:12px; top:max(8px, env(safe-area-inset-top, 8px)); }

    /* ── KM Leaderboard — run activities ───────────────── */
    .km-period-tabs { display:flex; gap:4px; padding:0 0 12px; justify-content:center; }
    .km-period-tab { padding:6px 14px; border-radius:20px; font-size:13px; font-weight:600;
                     background:var(--bg); border:1px solid var(--border); cursor:pointer;
                     color:var(--text-light); transition:all .2s; }
    .km-period-tab.active { background:var(--green); color:white; border-color:var(--green); }
    .km-add-run-btn { position:fixed; bottom:92px; right:16px; z-index:120;
                      height:50px; border-radius:25px; padding:0 22px;
                      background:linear-gradient(135deg, var(--green), #2da44e); color:white; border:none;
                      font-size:15px; font-weight:700; cursor:pointer;
                      box-shadow:0 4px 16px rgba(0,0,0,.3), 0 0 0 3px rgba(45,164,78,.2);
                      display:none; align-items:center; justify-content:center; gap:8px;
                      transition:transform .2s, box-shadow .2s;
                      font-family:'Baloo 2',sans-serif; animation:km-fab-pulse 3s ease-in-out infinite; }
    .km-add-run-btn:active { transform:scale(.92); }
    @keyframes km-fab-pulse { 0%,100% { box-shadow:0 4px 16px rgba(0,0,0,.3), 0 0 0 3px rgba(45,164,78,.2); }
                              50% { box-shadow:0 4px 20px rgba(0,0,0,.35), 0 0 0 6px rgba(45,164,78,.15); } }
    .km-detail-row { display:flex; align-items:center; gap:8px; padding:6px 0;
                     border-bottom:1px solid var(--border); font-size:13px; }
    .km-detail-row:last-child { border-bottom:none; }
    .km-detail-date { color:var(--text-light); width:50px; flex-shrink:0; }
    .km-detail-icon { font-size:14px; width:20px; text-align:center; }
    .km-detail-note { flex:1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
    .km-detail-km { font-weight:700; color:var(--green); min-width:52px; text-align:right; }
    .km-detail-actions { display:flex; gap:4px; }
    .km-detail-actions button { background:none; border:none; cursor:pointer; font-size:14px; padding:2px; color:var(--text-light); }
    .km-detail-actions button:hover { color:var(--green); }
    .km-my-stats { display:flex; gap:12px; margin-bottom:14px; }
    .km-my-stat { flex:1; background:var(--card); border-radius:10px; padding:10px; text-align:center;
                  border:1px solid var(--border); }
    .km-my-stat-val { font-size:18px; font-weight:800; color:var(--green); }
    .km-my-stat-label { font-size:11px; color:var(--text-light); margin-top:2px; }
    .km-your-pos { background:var(--card); border-radius:10px; padding:10px 12px; margin-top:8px;
                   border:1px solid var(--green); display:flex; align-items:center; gap:8px; }
    .km-expandable { cursor:pointer; transition:background .15s; border-radius:8px; padding:6px 4px; margin:0 -4px; }
    .km-expandable:hover { background:var(--bg); }
    .km-expanded-detail { padding:4px 8px 8px 36px; }
    .km-weekly-chart { display:flex; gap:2px; align-items:flex-end; height:80px; padding:8px 0 0;
                       margin-bottom:10px; border-bottom:1px solid var(--border); padding-bottom:8px; }
    .km-week-bar-col { flex:1; display:flex; flex-direction:column; align-items:center; min-width:0; }
    .km-week-bar { width:100%; max-width:28px; background:var(--green); border-radius:4px 4px 0 0;
                   min-height:2px; transition:height .3s; }
    .km-week-bar-val { font-size:9px; font-weight:700; color:var(--green); margin-bottom:2px;
                       white-space:nowrap; }
    .km-week-bar-label { font-size:9px; color:var(--text-light); margin-top:3px; white-space:nowrap; }
    .km-detail-list-header { font-size:11px; font-weight:700; color:var(--text-light); text-transform:uppercase;
                             letter-spacing:.5px; margin-bottom:4px; }
    .km-dash-widget { background:var(--card); border-radius:var(--radius); padding:16px;
                      border:1px solid var(--border); box-shadow:var(--shadow); margin-bottom:12px; }
    .km-dash-header { display:flex; align-items:center; justify-content:space-between; margin-bottom:10px; }
    .km-dash-title { font-weight:700; font-size:14px; }
    .km-dash-stats { display:flex; gap:16px; margin-bottom:12px; }
    .km-dash-stat { text-align:center; }
    .km-dash-stat-val { font-size:20px; font-weight:800; color:var(--green); }
    .km-dash-stat-lbl { font-size:11px; color:var(--text-light); }
    .km-dash-actions { display:flex; gap:8px; }
    .km-dash-actions .btn { flex:1; font-size:13px; padding:10px; }

    /* ── Post-workout feedback ── */
    .feedback-prompt { background:var(--card); border-radius:var(--radius); padding:16px;
                       margin-bottom:12px; box-shadow:var(--shadow); border:1px solid var(--border); }
    .feedback-prompt-header { display:flex; align-items:center; gap:10px; margin-bottom:4px; }
    .feedback-prompt-icon   { font-size:28px; }
    .feedback-prompt-title  { font-weight:700; font-size:15px; }
    .feedback-prompt-sub    { font-size:13px; color:var(--text-light); margin-bottom:14px; padding-left:38px; }
    .rpe-slider { -webkit-appearance:none; appearance:none; width:100%; height:8px;
                  border-radius:4px; background: linear-gradient(to right,
                    #22c55e 0%, #84cc16 30%, #eab308 55%, #f97316 75%, #ef4444 100%);
                  cursor:pointer; outline:none; margin:6px 0 4px; }
    .rpe-slider::-webkit-slider-thumb { -webkit-appearance:none; appearance:none;
      width:24px; height:24px; border-radius:50%; background:white;
      border:3px solid var(--green); cursor:pointer; box-shadow:0 1px 4px rgba(0,0,0,.2); }
    .rpe-slider::-moz-range-thumb { width:20px; height:20px; border-radius:50%;
      background:white; border:3px solid var(--green); cursor:pointer; }
    .rpe-labels { display:flex; justify-content:space-between; font-size:11px;
                  color:var(--text-light); margin-bottom:4px; }
    .rpe-center-emoji { text-align:center; font-size:40px; line-height:1;
                        margin:4px 0 12px; transition:transform .15s; }
    .rpe-val-label { display:inline-block; background:var(--green-light); color:var(--green);
                     font-weight:800; font-size:15px; padding:1px 10px; border-radius:8px;
                     margin-left:8px; min-width:28px; text-align:center; }
    .mood-row { display:flex; gap:8px; }
    .mood-btn { flex:1; padding:12px 4px; border:2px solid var(--border); border-radius:var(--radius-sm);
                background:var(--bg); font-size:22px; cursor:pointer; text-align:center;
                transition:.15s; line-height:1; }
    .mood-btn span { display:block; font-size:11px; font-weight:600; color:var(--text-light); margin-top:4px; }
    .mood-btn.selected { border-color:var(--green); background:var(--green-light); }
    .mood-btn.selected span { color:var(--green); }
    .fb-note-input { width:100%; padding:10px 14px; border:1.5px solid var(--border);
                     border-radius:var(--radius-sm); font-size:14px; font-family:inherit;
                     resize:vertical; min-height:72px; box-sizing:border-box; }
    .fb-note-input:focus { outline:none; border-color:var(--green); }
    /* coach feedback summary */
    .fb-avg-rpe   { font-size:34px; font-weight:800; font-family:'Baloo 2',sans-serif; color:var(--green); line-height:1; }
    .fb-mood-grid { display:flex; gap:16px; }
    .fb-mood-cell { text-align:center; }
    .fb-mood-cell .cnt { font-weight:700; font-size:16px; }
    .fb-mood-cell .lbl { font-size:10px; color:var(--text-light); }
    .fb-resp-row  { display:flex; align-items:flex-start; gap:10px; padding:10px 0;
                    border-bottom:1px solid var(--border); }
    .fb-resp-row:last-child { border-bottom:none; }
    .fb-rpe-pill  { background:var(--green-light); color:var(--green); font-weight:700;
                    font-size:12px; padding:2px 9px; border-radius:20px; white-space:nowrap; flex-shrink:0; }

    .km-lb-section-title { font-weight:700; font-size:13px; color:var(--text-light);
                           text-transform:uppercase; letter-spacing:.5px; margin:0 0 10px; }
    /* ── Km stats widget ── */
    .km-stat-widget { background:var(--card); border-radius:var(--radius); padding:16px;
                      margin-bottom:16px; box-shadow:var(--shadow); border:1px solid var(--border); }
    .km-stat-tabs   { display:flex; gap:4px; margin-bottom:14px; }
    .km-stat-tab    { flex:1; padding:7px 4px; border:none; border-radius:8px; font-size:13px;
                      font-weight:600; cursor:pointer; background:var(--bg); color:var(--text-light);
                      transition:.15s; font-family:inherit; }
    .km-stat-tab.active { background:var(--green); color:#fff; }
    .km-stat-number { font-size:30px; font-weight:800; font-family:'Baloo 2',sans-serif;
                      color:var(--text); line-height:1.1; }
    .km-stat-period { font-size:12px; color:var(--text-light); margin:2px 0 12px; }
    .km-stat-chart-wrap { position:relative; height:130px; }

    /* ── STRAVA ───────────────────────────────────────── */
    .strava-badge {
      background: #fc4c02; color: #fff; font-size: 9px; font-weight: 700;
      padding: 1px 5px; border-radius: 3px; letter-spacing: .5px;
      vertical-align: middle; margin-left: 5px; display: inline-block;
    }
    .strava-connect-bar {
      display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
      padding: 10px 12px; background: var(--bg); border-radius: 8px;
      border: 1px solid var(--border); margin-bottom: 12px; font-size: 13px;
    }
    .strava-connect-bar .btn { font-size: 12px; padding: 4px 10px; }
    .strava-sync-btn { background: #fc4c02; color: #fff; border: none; border-radius: 6px;
                       font-size: 12px; font-weight: 600; padding: 4px 10px; cursor: pointer; }
    .strava-sync-btn:hover { background: #e03d00; }
    .km-filter-tabs { display: flex; gap: 6px; margin-bottom: 12px; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; padding-bottom: 2px; }
    .km-filter-tabs::-webkit-scrollbar { display: none; }
    .km-filter-tab { flex-shrink: 0; display: inline-flex; align-items: center; gap: 5px; padding: 7px 12px; border-radius: 20px; border: 1.5px solid var(--border); background: var(--card); font-size: 13px; font-weight: 600; color: var(--text-light); cursor: pointer; transition: all .15s; white-space: nowrap; font-family: inherit; }
    .km-filter-tab:hover { border-color: var(--green); color: var(--green); }
    .km-filter-tab.active { background: var(--green); color: white; border-color: var(--green); }
    .km-filter-count { display: inline-flex; align-items: center; justify-content: center; min-width: 20px; height: 18px; padding: 0 5px; border-radius: 10px; background: var(--bg); color: var(--text-light); font-size: 11px; font-weight: 700; }
    .km-filter-tab.active .km-filter-count { background: rgba(255,255,255,.25); color: white; }
    html[data-theme="dark"] .km-filter-tab { background: var(--dm-card); border-color: var(--dm-border); }
    html[data-theme="dark"] .km-filter-count { background: #262626; }
    .strava-bar-v2 { background: var(--card); border: 1px solid var(--border); border-radius: 12px; padding: 14px 16px; margin-bottom: 14px; box-shadow: 0 1px 3px rgba(0,0,0,.04); }
    .strava-bar-header { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 12px; padding-bottom: 10px; border-bottom: 1px solid var(--border); }
    .strava-athlete-name { color: var(--text); font-weight: 700; font-size: 14px; }
    .strava-bar-spacer { flex: 1; min-width: 4px; }
    .strava-bar-stats { display: flex; gap: 10px; }
    .strava-stat { flex: 1; text-align: center; padding: 8px 4px; background: var(--bg); border-radius: 8px; }
    .strava-stat-val { font-family: 'Baloo 2', sans-serif; font-size: 18px; font-weight: 800; color: #fc4c02; line-height: 1.1; }
    .strava-stat-lbl { font-size: 10px; color: var(--text-light); font-weight: 600; text-transform: uppercase; letter-spacing: .3px; margin-top: 2px; }
    html[data-theme="dark"] .strava-bar-v2 { background: var(--dm-card); border-color: var(--dm-border); }
    html[data-theme="dark"] .strava-stat { background: #262626; }
    .strava-disconnect-btn { background: transparent; color: var(--text-light); border: 1px solid var(--border);
                             border-radius: 6px; font-size: 11px; padding: 3px 8px; cursor: pointer; }

    /* ── ACTIVITY TYPE TOGGLE ─────────────────────────── */
    .activity-type-toggle { display:flex; border-radius:8px; overflow:hidden; border:1.5px solid var(--border); }
    .type-btn { flex:1; padding:9px 8px; font-size:13px; font-weight:600; border:none; background:#fff;
                color:var(--text-light); cursor:pointer; transition:background .15s,color .15s; }
    .type-btn.active { background:var(--green); color:#fff; }
    .type-btn:not(.active):hover { background:var(--bg); }

    /* ── CHIP SELECT ────────────────────────────────────── */
    .chip-group { display:flex; flex-wrap:wrap; gap:8px; }
    .chip-btn { padding:8px 14px; border-radius:20px; border:1.5px solid var(--border); background:white;
                font-size:13px; font-weight:600; color:var(--text); cursor:pointer; transition:all .15s; user-select:none; }
    .chip-btn.selected { background:var(--green); color:white; border-color:var(--green); }
    /* Level chip colors (non-selected state) */
    .chip-btn.level-lipanek:not(.selected) { background:#dbeafe; color:#1e40af; border-color:#93c5fd; }
    .chip-btn.level-raketak:not(.selected) { background:#ffedd5; color:#9a3412; border-color:#fdba74; }
    .chip-btn.level-jelita:not(.selected)  { background:#ede9fe; color:#5b21b6; border-color:#c4b5fd; }
    .chip-btn:not(.selected):hover { background:var(--bg); border-color:var(--text-light); }

    /* ── RUNNER INFO CARD ────────────────────────────────── */
    .runner-info-card { background:white; border-radius:var(--radius); border:1px solid var(--border); overflow:hidden; }
    .runner-info-row { display:flex; align-items:center; gap:10px; padding:10px 16px; border-bottom:1px solid var(--border); }
    .runner-info-row:last-child { border-bottom:none; }
    .runner-info-icon { font-size:16px; width:24px; text-align:center; flex-shrink:0; }
    .runner-info-label { font-size:11px; color:var(--text-light); }
    .runner-info-val { font-weight:600; font-size:13px; }
    .runner-focus-chips { display:flex; flex-wrap:wrap; gap:4px; margin-top:2px; }
    .runner-focus-chip { padding:3px 10px; border-radius:12px; font-size:11px; font-weight:600; background:#f0fdf4; color:var(--green); border:1px solid #bbf7d0; }

    /* ── WATCH TRAINING CARD ─────────────────────────────── */
    /* Pre-registration payment picker (David 19.5.2026) */
    .pre-reg-opt {
      display:flex;align-items:center;gap:12px;
      width:100%;background:var(--bg);
      border:1px solid var(--border);border-radius:14px;
      padding:14px 12px;margin-bottom:8px;
      cursor:pointer;transition:transform .1s, background .15s;
      font-family:inherit;text-align:left;
    }
    .pre-reg-opt:hover { background:var(--card); }
    .pre-reg-opt:active { transform:scale(.98); }
    .pre-reg-opt-ico {
      width:40px;height:40px;border-radius:10px;
      display:flex;align-items:center;justify-content:center;
      font-size:20px;flex-shrink:0;
    }
    .pre-reg-opt-body { flex:1;min-width:0; }
    .pre-reg-opt-title { font-size:14px;font-weight:800;font-family:'Baloo 2',sans-serif;line-height:1.2; }
    .pre-reg-opt-sub { font-size:11px;color:var(--text-light);margin-top:3px;line-height:1.4; }
    .pre-reg-opt-arrow { font-size:22px;color:var(--text-light);flex-shrink:0; }

    .watch-training-card { background:linear-gradient(135deg,#1e3a5f 0%,#2563eb 100%); border-radius:var(--radius); padding:20px; color:white; margin-bottom:12px; }
    .watch-price { font-size:28px; font-weight:800; font-family:'Baloo 2',sans-serif; }
    .watch-price-old { text-decoration:line-through; opacity:.6; font-size:16px; margin-left:8px; }
    .watch-discount-badge { display:inline-block; background:#fbbf24; color:#78350f; font-weight:700; font-size:11px; padding:3px 10px; border-radius:10px; margin-left:8px; }

    /* HERO varianta watch card — David 18.5.2026: "dát víc na očích".
       Dynamický 3-stop gradient + animated shimmer + subtle pulse na NOVÉ badge.
       Bohatší padding, shadow pro vystoupení nad ostatní kartičky. */
    .watch-training-hero {
      position: relative;
      background: linear-gradient(135deg, #0f172a 0%, #1e3a8a 35%, #2563eb 70%, #3b82f6 100%);
      background-size: 200% 200%;
      animation: watchHeroGradient 12s ease infinite;
      box-shadow: 0 12px 32px rgba(37,99,235,.35), 0 2px 8px rgba(0,0,0,.15);
      padding: 22px;
      overflow: hidden;
    }
    /* Decorative glow circles (visual depth) */
    .watch-training-hero::before {
      content: '';
      position: absolute;
      top: -50%; right: -30%;
      width: 280px; height: 280px;
      background: radial-gradient(circle, rgba(59,130,246,.4), transparent 70%);
      pointer-events: none; z-index: 1;
    }
    .watch-training-hero::after {
      content: '';
      position: absolute;
      bottom: -40%; left: -20%;
      width: 220px; height: 220px;
      background: radial-gradient(circle, rgba(251,191,36,.18), transparent 70%);
      pointer-events: none; z-index: 1;
    }
    @keyframes watchHeroGradient {
      0%, 100% { background-position: 0% 0%; }
      50%      { background-position: 100% 100%; }
    }
    /* Badges */
    .watch-hero-badge {
      background: #fbbf24; color: #1f2937;
      font-size: 11px; font-weight: 900; letter-spacing: .5px;
      padding: 6px 12px; border-radius: 14px;
      animation: watchHeroPulse 2.5s ease-in-out infinite;
      box-shadow: 0 2px 8px rgba(251,191,36,.4);
    }
    @keyframes watchHeroPulse {
      0%, 100% { transform: scale(1); box-shadow: 0 2px 8px rgba(251,191,36,.4); }
      50%      { transform: scale(1.06); box-shadow: 0 4px 16px rgba(251,191,36,.6); }
    }
    .watch-hero-discount {
      background: rgba(255,255,255,.95); color: #dc2626;
      font-size: 14px; font-weight: 900; font-family: 'Baloo 2', sans-serif;
      width: 52px; height: 52px; border-radius: 50%;
      display: flex; align-items: center; justify-content: center;
      box-shadow: 0 4px 16px rgba(0,0,0,.25);
      transform: rotate(-8deg);
      flex-shrink: 0;
    }
    /* USP grid cells */
    .watch-usp {
      text-align: center;
      padding: 10px 6px;
      background: rgba(255,255,255,.12);
      backdrop-filter: blur(4px);
      border-radius: 12px;
      border: 1px solid rgba(255,255,255,.15);
      display: flex; flex-direction: column;
      justify-content: flex-start;
      min-height: 78px;
    }
    /* CTA button — větší, kontrastní, s mírnou animací on-hover */
    .btn-watch-cta {
      background: white; color: #1e3a5f;
      font-weight: 900; font-size: 16px;
      padding: 16px; width: 100%;
      border-radius: 14px; border: none; cursor: pointer;
      font-family: inherit;
      box-shadow: 0 6px 20px rgba(0,0,0,.25);
      transition: transform .15s ease, box-shadow .15s ease;
      letter-spacing: .3px;
    }
    .btn-watch-cta:hover {
      transform: translateY(-1px);
      box-shadow: 0 8px 24px rgba(0,0,0,.3);
    }
    .btn-watch-cta:active { transform: translateY(0); }

    /* ── TEAM RACES ──────────────────────────────────────── */
    .team-race-card { background:white; border-radius:var(--radius); border:1px solid var(--border); padding:14px 16px; margin-bottom:8px; cursor:pointer; transition:box-shadow .15s; }
    .share-flt-chip { background:var(--bg); border:1px solid var(--border); color:var(--text-light); padding:5px 10px; border-radius:14px; cursor:pointer; font-size:12px; font-weight:600; transition:all .15s; }
    .share-flt-chip:hover { background:var(--card); }
    .share-flt-chip.active { background:var(--green); color:white; border-color:var(--green); }
    .team-race-card:hover { box-shadow:0 2px 8px rgba(0,0,0,.08); }
    .team-race-header { display:flex; align-items:center; gap:10px; margin-bottom:8px; }
    .team-race-name { font-weight:700; font-size:14px; flex:1; }
    .team-race-meta { font-size:12px; color:var(--text-light); }
    .team-race-participants { display:flex; align-items:center; gap:-4px; margin-top:8px; }
    .team-race-av { width:28px; height:28px; border-radius:50%; background:var(--green); color:white; font-size:11px; font-weight:700;
                    display:flex; align-items:center; justify-content:center; border:2px solid white; margin-left:-6px; }
    .team-race-av:first-child { margin-left:0; }
    .carpool-badge { display:inline-flex; align-items:center; gap:4px; padding:3px 10px; border-radius:12px; font-size:11px; font-weight:600; }
    .carpool-badge.offer { background:#f0fdf4; color:#16a34a; }
    .carpool-badge.seek { background:#fef3c7; color:#d97706; }

    /* ── SHARE RACE WITH TEAM ────────────────────────────── */
    .share-team-section { margin-top:12px; }
    .share-team-btn { width:100%; padding:12px; border-radius:var(--radius-sm); border:2px dashed var(--green); background:#f0fdf4;
                      color:var(--green); font-weight:700; font-size:14px; cursor:pointer; transition:all .15s; }
    .share-team-btn:hover { background:#dcfce7; }
    .share-team-active { background:white; border:1px solid var(--border); border-radius:var(--radius); padding:16px; margin-top:8px; }
    .carpool-options { display:flex; gap:8px; margin:12px 0; }
    .carpool-opt { flex:1; padding:10px 8px; border-radius:var(--radius-sm); border:1.5px solid var(--border); background:white;
                   text-align:center; font-size:12px; font-weight:600; cursor:pointer; transition:all .15s; }
    .carpool-opt.active { border-color:var(--green); background:#f0fdf4; color:var(--green); }
    .teammates-list { margin-top:12px; }
    .teammate-row { display:flex; align-items:center; gap:10px; padding:10px 0; border-bottom:1px solid var(--border); }
    .teammate-row:last-child { border-bottom:none; }
    .teammate-av { width:32px; height:32px; border-radius:50%; background:var(--green); color:white; font-size:12px; font-weight:700;
                   display:flex; align-items:center; justify-content:center; flex-shrink:0; }

    /* ── TEAM RACE DETAIL MODAL ──────────────────────────── */
    .team-race-modal { position:fixed; bottom:0; left:0; right:0; background:white; border-radius:20px 20px 0 0;
                       max-height:85vh; overflow-y:auto; z-index:10001; transform:translateY(100%); transition:transform .3s ease; padding:0 0 env(safe-area-inset-bottom); }
    .team-race-modal.open { transform:translateY(0); }
    .team-race-modal-overlay { position:fixed; inset:0; background:rgba(0,0,0,.4); z-index:10000; opacity:0; transition:opacity .3s; pointer-events:none; }
    .team-race-modal-overlay.open { opacity:1; pointer-events:auto; }
    .team-race-modal-handle { width:36px; height:4px; border-radius:2px; background:var(--border); margin:10px auto; }

    /* ── MONTH GROUPS ─────────────────────────────────── */
    .race-month-group { margin-bottom:2px; }
    .race-month-header {
      display:flex; align-items:center; gap:8px; padding:9px 4px;
      cursor:pointer; border-bottom:1px solid var(--border); user-select:none;
    }
    .race-month-header:hover .race-month-label { color:var(--green); }
    .race-month-chevron { font-size:10px; color:var(--text-light); width:14px; flex-shrink:0; }
    .race-month-label { font-weight:700; font-size:13px; flex:1; color:var(--text); }
    .race-month-count { font-size:11px; color:var(--text-light); }
    .race-month-body.hidden { display:none; }

    /* ── RACES ────────────────────────────────────────── */
    .race-item {
      display: flex; align-items: center; gap: 12px; padding: 12px 0;
      border-bottom: 1px solid var(--border); cursor: pointer;
    }
    .race-item:last-child { border-bottom: none; }
    .race-icon-box { font-size: 22px; width: 30px; text-align: center; flex-shrink: 0; }
    .race-info { flex: 1; min-width: 0; }
    .race-name { font-weight: 600; font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .race-meta { font-size: 12px; color: var(--text-light); margin-top: 2px; }
    .race-result { text-align: right; flex-shrink: 0; }
    .race-time-val { font-family: 'Baloo 2', sans-serif; font-weight: 700; color: var(--green); font-size: 15px; }
    .race-place { font-size: 11px; color: var(--text-light); }
    .race-countdown { font-family: 'Baloo 2', sans-serif; font-weight: 700; font-size: 13px; padding: 3px 10px; border-radius: 20px; background: var(--green-light); color: var(--green); white-space: nowrap; }
    .race-countdown.urgent { background: #fef3c7; color: #92400e; }

    /* ── Daily Tip ─────────────────────────────── */
    .daily-tip-card { background: var(--card); border-left: 3px solid var(--green); border-radius: var(--radius); padding: 14px 16px; margin-bottom: 12px; cursor: pointer; transition: all .2s; box-shadow: var(--shadow); }
    .daily-tip-header { display: flex; align-items: center; gap: 8px; }
    .daily-tip-icon { font-size: 18px; }
    .daily-tip-label { font-weight: 700; font-size: 13px; color: var(--text); flex: 1; }
    .daily-tip-cat { font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: .5px; padding: 2px 8px; border-radius: 10px; background: var(--green-light); color: var(--green-deep); }
    .daily-tip-chevron { font-size: 10px; color: var(--text-light); transition: transform .2s; }
    .daily-tip-body { font-size: 14px; line-height: 1.6; color: var(--text); margin-top: 10px; }
    .daily-tip-card.collapsed .daily-tip-body { display: none; }
    .daily-tip-card.collapsed .daily-tip-chevron { transform: rotate(180deg); }

    /* ── Countdown hero card ─────────────────────────── */
    .countdown-card {
      position: relative;
      background: linear-gradient(135deg, #16a34a 0%, #15803d 55%, #166534 100%);
      border-radius: var(--radius-lg, 18px);
      padding: 18px 18px 16px;
      margin-bottom: 14px;
      cursor: pointer;
      color: #fff;
      box-shadow: 0 8px 24px rgba(22,163,74,.22), 0 2px 6px rgba(0,0,0,.06);
      overflow: hidden;
      transition: transform .15s ease, box-shadow .2s ease;
    }
    .countdown-card::before {
      content: "";
      position: absolute; inset: 0;
      background: radial-gradient(120% 60% at 110% -10%, rgba(255,255,255,.25), transparent 60%);
      pointer-events: none;
    }
    .countdown-card:hover { transform: translateY(-1px); box-shadow: 0 12px 28px rgba(22,163,74,.28), 0 2px 6px rgba(0,0,0,.08); }
    .countdown-card.live { background: linear-gradient(135deg, #f97316 0%, #ea580c 55%, #c2410c 100%); box-shadow: 0 8px 24px rgba(249,115,22,.28); }
    .countdown-card .cd-urgency-pill {
      display: inline-flex; align-items: center; gap: 6px;
      background: rgba(255,255,255,.18);
      backdrop-filter: blur(4px);
      color: #fff;
      font-size: 11px; font-weight: 800;
      text-transform: uppercase; letter-spacing: .6px;
      padding: 5px 10px; border-radius: 999px;
      border: 1px solid rgba(255,255,255,.25);
      margin-bottom: 12px;
    }
    .countdown-card .cd-urgency-pill .dot {
      width: 7px; height: 7px; border-radius: 50%; background: #fff;
      box-shadow: 0 0 0 0 rgba(255,255,255,.7);
      animation: cdPulse 1.8s ease-out infinite;
    }
    @keyframes cdPulse {
      0%   { box-shadow: 0 0 0 0 rgba(255,255,255,.7); }
      70%  { box-shadow: 0 0 0 8px rgba(255,255,255,0); }
      100% { box-shadow: 0 0 0 0 rgba(255,255,255,0); }
    }
    .countdown-card .cd-body { position: relative; display: flex; align-items: center; gap: 14px; }
    .countdown-card .cd-date-box {
      flex-shrink: 0;
      background: rgba(255,255,255,.95);
      border-radius: 14px;
      min-width: 62px;
      padding: 10px 6px;
      text-align: center;
      box-shadow: 0 4px 12px rgba(0,0,0,.12);
    }
    .countdown-card .cd-date-day { font-family: 'Baloo 2', sans-serif; font-weight: 900; font-size: 28px; line-height: 1; color: #166534; }
    .countdown-card .cd-date-mon { font-size: 11px; font-weight: 800; color: #16a34a; text-transform: uppercase; letter-spacing: .4px; margin-top: 2px; }
    .countdown-card.live .cd-date-day { color: #9a3412; }
    .countdown-card.live .cd-date-mon { color: #c2410c; }
    .countdown-card .cd-info { flex: 1; min-width: 0; }
    .countdown-card .cd-title { font-family: 'Baloo 2', sans-serif; font-weight: 800; font-size: 18px; line-height: 1.2; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .countdown-card .cd-meta { font-size: 12px; color: rgba(255,255,255,.88); margin-top: 3px; font-weight: 600; }
    .countdown-card .cd-meta-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
    .countdown-card .cd-chip {
      display: inline-flex; align-items: center; gap: 4px;
      background: rgba(255,255,255,.18);
      color: #fff;
      font-size: 11px; font-weight: 700;
      padding: 3px 9px; border-radius: 999px;
      border: 1px solid rgba(255,255,255,.22);
    }
    /* Horní řádek: pill badge vlevo, kompaktní countdown vpravo — nahradí velký
       samostatný block pod body. Vše v jednom pruhu šetří vertikální prostor
       a sjednocuje vizuální rytmus (pill + čísla těsně u sebe). */
    .countdown-card .cd-urgency-row {
      display: flex; align-items: center; justify-content: space-between;
      gap: 12px; margin-bottom: 14px; flex-wrap: wrap;
    }
    .countdown-card .cd-urgency-pill { margin-bottom: 0; }
    .countdown-card .cd-countdown {
      position: relative;
      display: inline-flex; align-items: baseline; gap: 3px;
      margin: 0;
      font-family: 'Baloo 2', sans-serif;
      font-weight: 900; color: #fff;
      text-shadow: 0 1px 3px rgba(0,0,0,.18);
    }
    .countdown-card .cd-countdown .cd-num {
      font-size: 22px; font-weight: 900; color: #fff;
      min-width: auto; text-align: center;
    }
    .countdown-card .cd-countdown .cd-unit {
      font-size: 11px; font-weight: 700;
      text-transform: uppercase; letter-spacing: .4px;
      color: rgba(255,255,255,.85);
      margin-right: 6px;
    }
    .countdown-card .cd-actions { position: relative; display: flex; gap: 8px; margin-top: 14px; }
    .countdown-card .cd-btn-primary {
      flex: 1;
      background: #fff;
      color: #15803d;
      border: none;
      border-radius: 12px;
      padding: 14px 16px;
      font-family: 'Baloo 2', sans-serif;
      font-size: 15px; font-weight: 800;
      cursor: pointer;
      box-shadow: 0 4px 14px rgba(0,0,0,.18);
      transition: transform .1s ease, box-shadow .15s ease;
      display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    }
    .countdown-card .cd-btn-primary:hover { transform: translateY(-1px); box-shadow: 0 6px 18px rgba(0,0,0,.22); }
    .countdown-card .cd-btn-primary:active { transform: translateY(0); }
    .countdown-card.live .cd-btn-primary { color: #c2410c; }
    .countdown-card .cd-btn-qr {
      flex-shrink: 0;
      background: rgba(255,255,255,.15);
      color: #fff;
      border: 1.5px solid rgba(255,255,255,.35);
      border-radius: 12px;
      padding: 14px 16px;
      font-family: 'Baloo 2', sans-serif;
      font-size: 14px; font-weight: 800;
      cursor: pointer;
      display: inline-flex; align-items: center; gap: 8px;
      transition: background .15s ease;
    }
    .countdown-card .cd-btn-qr:hover { background: rgba(255,255,255,.25); }
    .countdown-card .cd-registered {
      flex: 1;
      background: rgba(255,255,255,.22);
      color: #fff;
      border: 1.5px solid rgba(255,255,255,.4);
      border-radius: 12px;
      padding: 14px 16px;
      font-family: 'Baloo 2', sans-serif;
      font-size: 15px; font-weight: 800;
      display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    }

    /* ── Kids countdown card — detail a per-dítě akce ── */
    .countdown-card.kids { background: linear-gradient(135deg, #16a34a 0%, #15803d 55%, #166534 100%); }
    .countdown-card.kids .cd-date-day { color: #16a34a; }
    .countdown-card.kids .cd-date-mon { color: #166534; }
    .countdown-card .cd-kids-detail {
      position: relative;
      display: flex; flex-direction: column; gap: 6px;
      margin-top: 12px; padding-top: 10px;
      border-top: 1px solid rgba(255,255,255,.2);
      font-size: 12px; color: rgba(255,255,255,.92);
    }
    .countdown-card .cd-kids-loc a { color: #fff; text-decoration: underline; font-weight: 700; }
    .countdown-card .cd-kids-cap { display: flex; flex-direction: column; gap: 3px; }
    .countdown-card .cd-kids-cap-label { font-weight: 700; }
    .countdown-card .cd-kids-cap-bar { height: 5px; background: rgba(255,255,255,.2); border-radius: 3px; overflow: hidden; }
    .countdown-card .cd-kids-cap-fill { height: 100%; background: #fff; border-radius: 3px; transition: width .3s; }
    .countdown-card .cd-kids-actions { position: relative; display: flex; flex-direction: column; gap: 6px; margin-top: 14px; }
    .countdown-card .cd-kid-btn {
      background: #fff; color: #166534; border: none; border-radius: 12px;
      padding: 14px 16px; font-family: 'Baloo 2', sans-serif;
      font-size: 15px; font-weight: 800; cursor: pointer;
      box-shadow: 0 4px 12px rgba(0,0,0,.15);
      transition: transform .1s ease, box-shadow .15s ease;
    }
    .countdown-card .cd-kid-btn:hover { transform: translateY(-1px); box-shadow: 0 6px 18px rgba(0,0,0,.22); }
    .countdown-card .cd-kid-btn:active { transform: translateY(0); }
    .countdown-card .cd-kid-chip-reg {
      display: flex; align-items: center; gap: 8px;
      background: rgba(255,255,255,.22);
      border: 1.5px solid rgba(255,255,255,.4);
      color: #fff;
      border-radius: 12px;
      padding: 12px 14px;
      font-size: 14px; font-weight: 700;
    }
    .countdown-card .cd-kid-cancel {
      background: rgba(255,255,255,.18); border: 1px solid rgba(255,255,255,.35);
      color: #fff; font-size: 12px; font-weight: 700; cursor: pointer;
      padding: 6px 12px; border-radius: 8px;
      font-family: inherit; min-height: 32px;
    }
    .countdown-card .cd-kid-cancel:hover { background: rgba(255,255,255,.28); }
    .countdown-card .cd-kid-cancel:active { transform: scale(.97); }

    /* ── Stejná výška karet v seznamu nadcházejících ── */
    .training-card, .race-event-card {
      min-height: 104px;
      box-sizing: border-box;
    }

    /* ── Weather Widget ────────────────────────── */
    .weather-widget { display: flex; align-items: center; gap: 10px; padding: 10px 14px; background: var(--card); border-radius: var(--radius); margin-bottom: 12px; font-size: 13px; color: var(--text); box-shadow: var(--shadow); flex-wrap: wrap; }
    .weather-icon { font-size: 22px; }
    .weather-temp { font-weight: 700; font-family: 'Baloo 2', sans-serif; font-size: 15px; }
    .weather-label { color: var(--text-light); }
    .weather-precip { font-weight: 600; color: #3b82f6; font-size: 12px; }
    .weather-chevron { margin-left: auto; font-size: 10px; color: var(--text-light); transition: transform .2s; }
    .weather-detail { background: var(--card); border: 1px solid var(--border); border-top: none; border-radius: 0 0 var(--radius) var(--radius); margin-top: -12px; margin-bottom: 12px; padding: 14px; box-shadow: var(--shadow); }
    .weather-detail-header { display: flex; justify-content: space-between; align-items: center; font-size: 12px; font-weight: 600; color: var(--text); margin-bottom: 12px; }
    .weather-forecast { display: flex; gap: 4px; overflow-x: auto; scrollbar-width: none; }
    .weather-forecast::-webkit-scrollbar { display: none; }
    .weather-day { flex: 1; min-width: 52px; text-align: center; padding: 8px 4px; border-radius: 10px; background: var(--bg); border: 1px solid transparent; }
    .weather-day.active { background: var(--green-light); border-color: var(--green); }
    .weather-day-name { font-size: 10px; font-weight: 700; text-transform: uppercase; color: var(--text-light); margin-bottom: 4px; }
    .weather-day-icon { font-size: 18px; margin-bottom: 2px; }
    .weather-day-temp { font-size: 13px; font-weight: 700; color: var(--text); }
    .weather-day-min { font-size: 11px; color: var(--text-light); }
    .weather-day-rain { font-size: 10px; color: #3b82f6; margin-top: 2px; }
    .race-section-label { font-size: 12px; font-weight: 700; color: var(--text-light); text-transform: uppercase; letter-spacing: .5px; padding: 10px 0 4px; }
    .pay-method-btn { background: var(--bg); border: 2px solid var(--border); border-radius: var(--radius-sm); padding: 8px 14px; font-size: 13px; font-weight: 600; cursor: pointer; transition: all .15s; color: var(--text-main); font-family: inherit; }
    .pay-method-btn.selected { border-color: var(--green); background: var(--green-light); color: var(--green-deep); }
    .date-picker-btn {
      position: relative; display: flex; align-items: center; gap: 12px;
      width: 100%; padding: 12px 16px; border: 1.5px solid var(--border);
      border-radius: var(--radius-sm); font-size: 15px; background: var(--card);
      cursor: pointer; transition: border-color .2s; box-sizing: border-box;
    }
    .date-picker-btn:focus-within { border-color: var(--green); }
    .date-picker-btn input[type=date],
    .date-picker-btn input[type=time] {
      position: absolute; inset: 0; opacity: 0; width: 100%; height: 100%;
      cursor: pointer; border: none; background: none;
    }
    .date-picker-icon { font-size: 20px; flex-shrink: 0; }
    .date-picker-label { flex: 1; }
    .date-picker-label.placeholder { color: var(--text-light); }
    .stripe-pay-btn {
      display: flex; align-items: center; justify-content: center; gap: 10px;
      width: 100%; padding: 16px; border-radius: var(--radius-sm); border: none;
      background: #0f172a; color: white; font-size: 16px; font-weight: 700;
      cursor: pointer; font-family: 'Baloo 2', sans-serif; margin-bottom: 8px;
      box-shadow: 0 2px 12px rgba(15,23,42,.2); transition: opacity .15s;
    }
    .stripe-pay-btn:active { opacity: .85; }
    .stripe-pay-divider {
      display: flex; align-items: center; gap: 10px;
      color: var(--text-light); font-size: 12px; font-weight: 600;
      text-transform: uppercase; letter-spacing: .5px; margin: 12px 0;
    }
    .stripe-pay-divider::before, .stripe-pay-divider::after {
      content: ''; flex: 1; height: 1px; background: var(--border);
    }
    .topup-pkg { background: var(--bg); border: 2px solid var(--border); border-radius: var(--radius-sm); padding: 16px; text-align: center; cursor: pointer; transition: all .15s; }
    .topup-pkg.selected { border-color: var(--green); background: var(--green-light); }
    .topup-pkg-count { font-family: 'Baloo 2', sans-serif; font-size: 28px; font-weight: 800; color: var(--green); line-height: 1; }
    .topup-pkg-label { font-size: 12px; color: var(--text-light); margin: 2px 0 6px; }
    .topup-pkg-price { font-size: 14px; font-weight: 700; color: var(--text-main); }
    .topup-pending-banner { display:flex; align-items:center; gap:10px; background:#fffbeb; border:1.5px solid #fbbf24; border-radius:12px; padding:12px 14px; margin-bottom:16px; }
    .topup-pending-dot { width:10px; height:10px; border-radius:50%; background:#f59e0b; flex-shrink:0; animation: pulse-dot 1.8s ease-in-out infinite; }
    .topup-hist-row { display:flex; justify-content:space-between; align-items:center; padding:10px 0; border-bottom:1px solid var(--border); font-size:13px; }
    .topup-hist-row:last-child { border-bottom:none; }
    .finance-month { background: white; border-radius: var(--radius-sm); border: 1px solid var(--border); margin-bottom: 12px; overflow: hidden; }
    .finance-month-header { padding: 14px 16px; display: flex; justify-content: space-between; align-items: center; cursor: pointer; }
    .finance-month-title { font-family: 'Baloo 2', sans-serif; font-weight: 700; font-size: 15px; }
    .finance-month-total { font-weight: 700; color: var(--green); font-size: 15px; }
    .finance-month-body { padding: 0 16px 12px; border-top: 1px solid var(--border); }
    .profile-name { font-family: 'Baloo 2', sans-serif; font-size: 24px; font-weight: 800; }
    .profile-email { font-size: 13px; opacity: .8; margin-top: 2px; }
    .profile-since { font-size: 12px; opacity: .7; margin-top: 8px; }
    .membership-badge {
      display: inline-flex; align-items: center; gap: 5px;
      font-size: 12px; font-weight: 700; padding: 5px 12px;
      border-radius: 20px; white-space: nowrap; letter-spacing: .2px;
    }

    .menu-item {
      display: flex; align-items: center; gap: 14px;
      padding: 16px; border-bottom: 1px solid var(--border); cursor: pointer;
      transition: background .15s;
    }
    .menu-item:hover { background: var(--bg); }
    .menu-item:last-child { border-bottom: none; }
    .menu-icon { font-size: 20px; width: 28px; }
    .menu-label { flex: 1; font-weight: 600; }
    .menu-arrow { color: var(--text-light); font-size: 18px; }

    /* ── BACK BUTTON ─────────────────────────────────── */
    .back-btn {
      display: flex; align-items: center; gap: 6px;
      padding: 8px 16px; font-size: 14px; font-weight: 600; color: var(--green);
      background: none; cursor: pointer; min-height: 44px;
    }
    .close-btn {
      background: var(--border); border: none; width: 44px; height: 44px; border-radius: 50%;
      font-size: 18px; color: var(--text); cursor: pointer; display: flex; align-items: center;
      justify-content: center; flex-shrink: 0; transition: background .15s; z-index: 5; padding: 0;
      min-width: 44px; min-height: 44px; /* 44px touch target */
    }
    .close-btn:hover { background: var(--text-light); color: white; }
    .close-btn--light {
      background: rgba(255,255,255,.15); color: #fff; width: 40px; height: 40px;
      font-size: 22px; backdrop-filter: blur(4px);
    }
    .close-btn--light:hover { background: rgba(255,255,255,.3); color: #fff; }

    /* ── EMPTY STATE ─────────────────────────────────── */
    .empty-state { text-align: center; padding: 48px 24px; color: var(--text-light); }
    .empty-state .empty-icon { font-size: 48px; margin-bottom: 12px; }
    .empty-state p { font-size: 14px; line-height: 1.6; }

    /* ── TOAST ───────────────────────────────────────── */
    #toast {
      position: fixed; bottom: 84px; left: 50%; transform: translateX(-50%) translateY(40px);
      background: #1a1a2e; color: white; padding: 12px 18px;
      border-radius: 16px; font-size: 14px; font-weight: 600; z-index: 9999;
      transition: transform .25s ease, opacity .25s ease;
      /* white-space: normal → dlouhý text se zalomí. Předtím nowrap → useknuto na úzkém telefonu. */
      white-space: normal; line-height: 1.4; word-wrap: break-word;
      opacity: 0; pointer-events: none; max-width: 92vw; text-align: center;
      box-shadow: 0 4px 20px rgba(0,0,0,.25);
    }
    #toast.show { transform: translateX(-50%) translateY(0); opacity: 1; }
    #toast.success { background: var(--green); }
    #toast.error { background: #ef4444; }

    /* ── LOADER ──────────────────────────────────────── */
    .loader { text-align: center; padding: 40px; color: var(--text-light); }
    .loader .spin { display: inline-block; width: 32px; height: 32px; border: 3px solid var(--border); border-top-color: var(--green); border-radius: 50%; animation: spin .7s linear infinite; }
    @keyframes spin { to { transform: rotate(360deg); } }

    /* ── SKELETON LOADERS ──────────────────────────────────────
       Místo "Načítám…" textu zobrazit šedé pruhy s pulzováním. Pocit rychlejší
       odezvy aplikace = méně frustrace při pomalém připojení.
       Použití: <div class="skel skel-card"></div> / .skel-line / .skel-circle */
    .skel { background: linear-gradient(90deg, var(--border) 0%, #e2e8f0 50%, var(--border) 100%); background-size: 200% 100%; border-radius: 8px; animation: skel-pulse 1.4s ease-in-out infinite; }
    html[data-theme="dark"] .skel { background: linear-gradient(90deg, #1e293b 0%, #334155 50%, #1e293b 100%); background-size: 200% 100%; }
    .skel-line { height: 14px; margin: 6px 0; }
    .skel-line.lg { height: 18px; }
    .skel-line.sm { height: 11px; }
    .skel-circle { width: 40px; height: 40px; border-radius: 50%; flex-shrink: 0; }
    .skel-card { padding: 14px 16px; background: var(--card); border-radius: var(--radius); border: 1px solid var(--border); margin-bottom: 8px; display: flex; gap: 12px; align-items: flex-start; }
    .skel-card-content { flex: 1; min-width: 0; }
    .skel-list-grid { display: flex; flex-direction: column; gap: 8px; padding: 8px 0; }
    @keyframes skel-pulse { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }
    @media (prefers-reduced-motion: reduce) {
      .skel { animation-duration: 2.5s; }
    }

    /* ── PAYMENT SUCCESS OVERLAY (zelená fajfka po dokončení platby) ── */
    .pay-success-overlay {
      position: fixed; inset: 0; background: rgba(15, 23, 42, .85);
      display: none; align-items: center; justify-content: center;
      flex-direction: column; gap: 18px;
      pointer-events: none;
      z-index: 99999;
    }
    .pay-success-overlay.show { display: flex; }
    .pay-success-circle {
      width: 130px; height: 130px;
      border: 4px solid #22c55e; border-radius: 50%;
      display: flex; align-items: center; justify-content: center;
      background: rgba(34, 197, 94, .08);
      animation: pay-success-pop .35s cubic-bezier(.34,1.56,.64,1) forwards;
    }
    .pay-success-circle svg { width: 70px; height: 70px; }
    .pay-success-circle svg path {
      fill: none; stroke: #22c55e; stroke-width: 8;
      stroke-linecap: round; stroke-linejoin: round;
      stroke-dasharray: 60; stroke-dashoffset: 60;
      animation: pay-success-check .45s ease-out .25s forwards;
    }
    .pay-success-label {
      color: #fff; font-size: 17px; font-weight: 700;
      font-family: 'Baloo 2', sans-serif;
      opacity: 0; animation: pay-success-fade .35s ease-out .55s forwards;
    }
    @keyframes pay-success-pop {
      0%   { transform: scale(.3); opacity: 0 }
      60%  { transform: scale(1.1); opacity: 1 }
      100% { transform: scale(1); opacity: 1 }
    }
    @keyframes pay-success-check { to { stroke-dashoffset: 0 } }
    @keyframes pay-success-fade  { to { opacity: 1 } }

    /* ── COACH PANEL ─────────────────────────────────── */
    .coach-panel-row {
      display:flex; align-items:center; gap:12px;
      padding:13px 16px; cursor:pointer;
      transition:background .12s;
    }
    .coach-panel-row:hover { background:var(--bg); }

    /* ── NOTION WIDGETS GRID ──────────────────────────── */
    #dash-notion-widgets {
      display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-bottom:12px;
    }
    @media (max-width:700px) {
      #dash-notion-widgets { grid-template-columns:1fr; }
    }

    /* ── NOTION INBOX WIDGET ─────────────────────────── */
    .inbox-widget { margin-bottom:0; }
    .inbox-widget-header {
      display:flex; align-items:center; justify-content:space-between;
      padding:12px 16px 8px; font-family:'Baloo 2',sans-serif;
    }
    .inbox-widget-header .inbox-title {
      font-size:15px; font-weight:700; color:var(--text);
      display:flex; align-items:center; gap:8px;
    }
    .inbox-widget-header .inbox-count {
      background:var(--green); color:#fff; font-size:11px; font-weight:700;
      padding:1px 7px; border-radius:99px; font-family:'Baloo 2',sans-serif;
    }
    .inbox-widget-header a {
      font-size:12px; color:var(--text-light); font-weight:600; text-decoration:none;
    }
    .inbox-item {
      display:flex; align-items:center; gap:10px;
      padding:10px 16px; border-top:1px solid var(--border);
      cursor:pointer; transition:background .12s;
    }
    .inbox-item:hover { background:var(--bg); }
    .inbox-item-check {
      width:20px; height:20px; border-radius:50%; border:2px solid var(--border);
      flex-shrink:0; cursor:pointer; transition:all .15s;
      display:flex; align-items:center; justify-content:center;
    }
    .inbox-item-check:hover { border-color:var(--green); background:rgba(34,197,94,.1); }
    .inbox-item-check.done { border-color:var(--green); background:var(--green); }
    .inbox-item-check.done::after { content:'✓'; color:#fff; font-size:12px; font-weight:700; }
    .inbox-item-body { flex:1; min-width:0; }
    .inbox-item-title {
      font-size:13px; font-weight:600; color:var(--text);
      white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
    }
    .inbox-item-meta {
      font-size:11px; color:var(--text-light); margin-top:1px;
      display:flex; align-items:center; gap:6px;
    }
    .inbox-tag {
      font-size:10px; font-weight:700; padding:1px 6px;
      border-radius:4px; white-space:nowrap;
    }
    .inbox-item-arrow { color:var(--text-light); font-size:16px; flex-shrink:0; }

    /* ── NOTION TASKS WIDGET ──────────────────────────── */
    .tasks-widget { margin-bottom:0; }
    .tasks-widget-header {
      display:flex; align-items:center; justify-content:space-between;
      padding:12px 16px 8px; font-family:'Baloo 2',sans-serif;
    }
    .tasks-widget-header .tasks-title {
      font-size:15px; font-weight:700; color:var(--text);
      display:flex; align-items:center; gap:8px;
    }
    .tasks-widget-header .tasks-count {
      background:var(--green); color:#fff; font-size:11px; font-weight:700;
      padding:1px 7px; border-radius:99px; font-family:'Baloo 2',sans-serif;
    }
    .tasks-widget-header a {
      font-size:12px; color:var(--text-light); font-weight:600; text-decoration:none;
    }
    .task-group-toggle {
      display:flex; align-items:center; gap:6px;
      padding:8px 16px; font-size:12px; font-weight:700;
      color:var(--text-light); text-transform:uppercase; letter-spacing:.3px;
      cursor:pointer; user-select:none; border-top:1px solid var(--border);
    }
    .task-group-toggle:hover { background:var(--bg); }
    .task-group-arrow { transition:transform .15s; font-size:10px; }
    .task-group-arrow.open { transform:rotate(90deg); }
    .task-item {
      display:flex; align-items:center; gap:10px;
      padding:10px 16px; border-top:1px solid var(--border);
      cursor:pointer; transition:background .12s;
    }
    .task-item:hover { background:var(--bg); }
    .task-status-dot {
      width:10px; height:10px; border-radius:50%; flex-shrink:0;
    }
    .task-status-dot.todo { background:#d1d5db; }
    .task-status-dot.in_progress { background:#3b82f6; }
    .task-status-dot.waiting { background:#f59e0b; }
    .task-status-dot.done { background:#22c55e; }
    .task-item-body { flex:1; min-width:0; }
    .task-item-title {
      font-size:13px; font-weight:600; color:var(--text);
      white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
    }
    .task-item-meta {
      font-size:11px; color:var(--text-light); margin-top:1px;
      display:flex; align-items:center; gap:6px; flex-wrap:wrap;
    }
    .task-due-overdue { color:#dc2626; font-weight:700; }
    .task-due-today { color:#f59e0b; font-weight:700; }
    .task-item-arrow { color:var(--text-light); font-size:16px; flex-shrink:0; }

    /* ── ADMIN BADGE ─────────────────────────────────── */
    .admin-badge { background: #fef3c7; color: #92400e; font-size: 11px; font-weight: 700; padding: 2px 8px; border-radius: 99px; font-family: 'Baloo 2', sans-serif; }
    .org-badge   { background: #dbeafe; color: #1e40af; font-size: 11px; font-weight: 700; padding: 2px 8px; border-radius: 99px; font-family: 'Baloo 2', sans-serif; }
    .root-badge  { background: #7c3aed; color: white;   font-size: 11px; font-weight: 700; padding: 2px 8px; border-radius: 99px; font-family: 'Baloo 2', sans-serif; }

    /* ── PREVIEW ROLE FAB ────────────────────────────── */
    #preview-fab { display:none; position:fixed; bottom:92px; right:14px; z-index:950; }
    #preview-chip {
      display:flex; align-items:center; gap:5px;
      background:var(--green); color:white;
      border-radius:99px; padding:7px 13px;
      font-size:12px; font-weight:700;
      cursor:pointer; user-select:none; white-space:nowrap;
      box-shadow:0 3px 12px rgba(0,0,0,.25);
      transition:background .2s, transform .1s;
    }
    #preview-chip:active { transform:scale(.95); }
    #preview-chip.previewing { background:#f59e0b; }
    #preview-panel {
      display:none; position:absolute; bottom:calc(100% + 8px); right:0;
      background:white; border-radius:var(--radius);
      box-shadow:0 8px 28px rgba(0,0,0,.18);
      padding:8px 0; min-width:200px; z-index:951;
      border:1px solid var(--border);
    }
    .preview-opt {
      display:flex; align-items:center; gap:10px;
      padding:9px 14px; font-size:13px; cursor:pointer;
      transition:background .12s; color:var(--text-main);
    }
    .preview-opt:hover  { background:var(--bg); }
    .preview-opt.active { font-weight:700; color:var(--green); }
    .preview-opt .preview-check { margin-left:auto; color:var(--green); font-size:15px; }

    /* ── EVENT PICKER ─────────────────────────────────── */
    .event-picker-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
    .event-tile { background: #f8fafc; border: 1.5px solid var(--border); border-radius: 16px; padding: 20px 12px 16px; text-align: center; cursor: pointer; transition: all .15s; -webkit-tap-highlight-color: transparent; }
    .event-tile:active { transform: scale(0.95); background: var(--green-light); border-color: var(--green); }
    .event-tile-icon  { font-size: 36px; line-height: 1; margin-bottom: 10px; }
    .event-tile-label { font-family: 'Baloo 2', sans-serif; font-weight: 800; font-size: 15px; color: var(--text); }
    .event-tile-sub   { font-size: 11px; color: var(--text-light); margin-top: 3px; }

    /* ── COACH PANEL ─────────────────────────────────── */
    .coach-section { margin-top: 16px; }
    .coach-section .section-title { margin-bottom: 8px; }
    /* Coach pill multi-select */
    .coach-pills { display: flex; flex-wrap: wrap; gap: 8px; }
    .coach-pill { display: flex; align-items: center; gap: 6px; padding: 7px 12px; border-radius: 20px;
      border: 2px solid var(--border); background: var(--bg); cursor: pointer; font-size: 13px;
      font-weight: 600; transition: border-color .15s, background .15s, color .15s; user-select: none; }
    .coach-pill input { display: none; }
    .coach-pill.selected { border-color: var(--green); background: #f0fdf4; color: var(--green); }
    .attendance-toggle { display: flex; align-items: center; gap: 10px; padding: 10px 0; border-bottom: 1px solid var(--border); }
    .attendance-toggle:last-child { border-bottom: none; }
    .toggle-name { flex: 1; font-weight: 600; font-size: 14px; }
    .toggle-btn {
      width: 44px; height: 24px; border-radius: 12px; background: var(--border);
      position: relative; cursor: pointer; transition: background .2s; flex-shrink: 0;
    }
    .toggle-btn.on { background: var(--green); }
    .toggle-btn::after {
      content: ''; position: absolute; top: 2px; left: 2px;
      width: 20px; height: 20px; border-radius: 50%; background: white;
      transition: left .2s; box-shadow: 0 1px 3px rgba(0,0,0,.2);
    }
    .toggle-btn.on::after { left: 22px; }

    /* ── ADMIN TABS ──────────────────────────────────── */
    .admin-tabs {
      display: flex; background: white;
      border-bottom: 1.5px solid var(--border);
      overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none;
    }
    .admin-tabs::-webkit-scrollbar { display: none; }
    .admin-tab {
      flex: 1; min-width: 60px; position: relative;
      display: flex; flex-direction: column; align-items: center; justify-content: center;
      gap: 3px; padding: 10px 4px 8px; min-height: 44px;
      font-family: 'Baloo 2', sans-serif; font-weight: 700; font-size: 10.5px;
      color: var(--text-light); cursor: pointer; user-select: none;
      border-bottom: 2.5px solid transparent; margin-bottom: -1.5px;
      transition: color .15s, border-color .15s;
    }
    .tab-icon  { font-size: 18px; line-height: 1; transition: transform .15s; }
    .tab-label { font-size: 11px; line-height: 1; white-space: nowrap; }
    .admin-tab.active { color: var(--green); border-bottom-color: var(--green); }
    .admin-tab.active .tab-icon { transform: scale(1.18); }
    /* badges na záložkách */
    .admin-tab .pending-badge { position: absolute; top: 5px; right: 6px; }
    /* ── Admin quick nav bar ────────────────────────────────────── */
    .admin-nav-bar { display:flex; gap:6px; padding:8px 16px; overflow-x:auto; -webkit-overflow-scrolling:touch; scrollbar-width:none; border-bottom:1px solid var(--border); background:var(--bg); position:sticky; top:0; z-index:10; margin-bottom:8px; }
    .admin-nav-bar::-webkit-scrollbar { display:none; }
    .admin-nav-pill { display:flex; align-items:center; gap:5px; padding:8px 14px; min-height:36px; border-radius:20px; font-size:12px; font-weight:600; color:var(--text-light); background:var(--card); border:1px solid var(--border); text-decoration:none; white-space:nowrap; transition:all .15s; }
    .admin-nav-pill:hover { border-color:var(--green); color:var(--green); }
    .admin-nav-pill.active { background:var(--green); color:white; border-color:var(--green); }
    /* ── Šablony tréninků ──────────────────────────────────────────── */
    .template-card {
      display: flex; align-items: center; gap: 12px;
      padding: 12px 14px; background: #f8fafc;
      border: 1.5px solid var(--border); border-radius: 14px;
      cursor: pointer; transition: all .15s; margin-bottom: 8px;
      -webkit-tap-highlight-color: transparent;
    }
    .template-card:active { background: var(--green-light); border-color: var(--green); }
    .template-card-icon { font-size: 26px; flex-shrink: 0; line-height: 1; }
    .template-card-info { flex: 1; min-width: 0; }
    .template-card-name { font-weight: 700; font-size: 14px; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .template-card-meta { font-size: 12px; color: var(--text-light); margin-top: 3px; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
    .template-card-actions { display: flex; gap: 4px; flex-shrink: 0; }
    .template-action-btn {
      background: none; border: none; font-size: 15px; cursor: pointer;
      padding: 6px; color: var(--text-light); border-radius: 8px;
      transition: background .15s;
    }
    .template-action-btn:active { background: var(--border); }
    .use-template-banner {
      display: flex; align-items: center; gap: 12px;
      background: var(--green-light); border: 1.5px solid var(--green);
      border-radius: 12px; padding: 11px 14px; margin-bottom: 16px;
      cursor: pointer; -webkit-tap-highlight-color: transparent;
      transition: opacity .15s;
    }
    .use-template-banner:active { opacity: .8; }
    /* Library picker grid */
    .lib-picker-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; padding: 0 4px; }
    .lib-picker-tile {
      display: flex; flex-direction: column; align-items: center; justify-content: center;
      gap: 6px; padding: 18px 10px; background: var(--bg); border: 1.5px solid var(--border);
      border-radius: 14px; cursor: pointer; transition: all .15s; text-align: center;
      -webkit-tap-highlight-color: transparent;
    }
    .lib-picker-tile:active { background: var(--green-light); border-color: var(--green); }
    .lib-picker-tile-icon { font-size: 28px; }
    .lib-picker-tile-name { font-size: 13px; font-weight: 700; color: var(--text); }
    .lib-picker-tile-count { font-size: 11px; color: var(--text-light); }
    /* sekce v docházkovém listu */
    .att-section-hdr {
      font-size: 11px; font-weight: 700; letter-spacing: .4px; text-transform: uppercase;
      color: var(--text-light); padding: 10px 0 5px; margin-top: 4px;
    }
    .att-section-hdr:first-child { margin-top: 0; padding-top: 4px; }

    .att-level-hdr {
      display: flex; align-items: center; gap: 6px;
      padding: 6px 0 3px; margin-top: 2px;
    }
    .att-level-badge {
      display: inline-block; padding: 2px 10px; border-radius: 12px;
      font-size: 11px; font-weight: 700; letter-spacing: .3px;
    }
    .att-level-count {
      font-size: 11px; color: var(--text-light); font-weight: 600;
    }

    .att-guest-card {
      border: 2px dashed #fed7aa; border-radius: 12px; padding: 8px 10px;
      margin-bottom: 6px; background: #fffbf5;
    }
    .att-guest-actions {
      display: flex; gap: 6px; margin-top: 6px; padding-left: 38px; flex-wrap: wrap;
    }
    .att-guest-pay-btn {
      font-size: 11px; font-weight: 700; padding: 4px 10px; border-radius: 8px;
      border: 1px solid #fed7aa; background: #fff7ed; color: #c2410c; cursor: pointer;
    }
    .att-guest-pay-btn.cash { background: #f0fdf4; border-color: #bbf7d0; color: #16a34a; }
    .att-guest-pay-btn:active { opacity: .7; }
    .att-guest-remove-btn {
      font-size: 12px; font-weight: 700; padding: 4px 8px; border-radius: 8px;
      border: 1px solid #fecaca; background: #fef2f2; color: #dc2626; cursor: pointer;
      margin-left: auto;
    }

    .kids-grid { display:grid;grid-template-columns:repeat(4,1fr);gap:10px;padding:8px 0 }
    .kid-cell { display:flex;flex-direction:column;align-items:center;gap:4px;cursor:pointer;-webkit-tap-highlight-color:transparent }
    .kid-avatar { width:60px;height:60px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:18px;font-weight:800;font-family:'Baloo 2',sans-serif;background:#e5e7eb;color:#6b7280;position:relative;transition:all .2s;border:3px solid transparent;overflow:hidden }
    .kid-avatar.present { border-color:#16a34a }
    .kid-avatar.excused { border-color:#f59e0b;opacity:.7 }
    .kid-avatar.absent { border-color:#ef4444;opacity:.5 }
    .kid-avatar .kid-dot { position:absolute;bottom:2px;right:2px;width:14px;height:14px;border-radius:50%;border:2px solid var(--card) }
    .kid-dot.present { background:#16a34a }
    .kid-dot.excused { background:#f59e0b }
    .kid-dot.absent { background:#ef4444 }
    .kid-dot.none { background:#d1d5db }
    .kid-name { font-size:11px;font-weight:600;text-align:center;color:var(--text);max-width:70px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap }
    .kid-avatar:active { transform:scale(.9) }
    .kids-stats-bar { display:flex;align-items:center;justify-content:center;gap:14px;padding:8px 12px;margin-bottom:8px;background:var(--bg);border-radius:var(--radius-sm);font-size:12px;font-weight:600;color:var(--text-light) }
    .kids-stats-bar .ks-dot { display:inline-block;width:8px;height:8px;border-radius:50%;margin-right:4px;vertical-align:middle }
    .excuse-section { margin-top:12px;border-top:1px solid var(--border);padding-top:12px }
    .excuse-btn { display:flex;align-items:center;justify-content:center;gap:8px;width:100%;padding:10px;border:1.5px solid var(--border);border-radius:var(--radius-sm);background:var(--card);font-size:14px;font-weight:700;font-family:'Baloo 2',sans-serif;color:var(--text-light);cursor:pointer }
    html[data-theme="dark"] .kid-avatar { background:var(--dm-card2);color:var(--dm-muted) }
    html[data-theme="dark"] .kid-dot { border-color:var(--dm-card) }
    html[data-theme="dark"] .kids-stats-bar { background:var(--dm-card2) }
    html[data-theme="dark"] .excuse-btn { background:var(--dm-card);border-color:var(--dm-border) }
    .pb-media-btn { display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;padding:20px 10px;border:2px dashed var(--border);border-radius:14px;background:var(--bg);color:var(--text-light);cursor:pointer;font-size:13px;font-weight:600;font-family:'Baloo 2',sans-serif;transition:all .15s }
    .pb-media-btn:active { background:var(--border);transform:scale(.97) }
    html[data-theme="dark"] .pb-media-btn { background:var(--dm-card2);border-color:var(--dm-border) }
    .pb-photo-thumb { position:relative;border-radius:10px;overflow:hidden;aspect-ratio:1;background:var(--bg) }
    .pb-photo-thumb img { width:100%;height:100%;object-fit:cover }
    .pb-photo-thumb .pb-photo-remove { position:absolute;top:4px;right:4px;width:22px;height:22px;border-radius:50%;background:rgba(0,0,0,.6);color:#fff;border:none;font-size:12px;cursor:pointer;display:flex;align-items:center;justify-content:center }

    /* ── ADMIN STATS ─────────────────────────────────── */
    .stats-section-title { font-family: 'Baloo 2', sans-serif; font-weight: 700; font-size: 15px; color: var(--text); margin: 0 0 14px; }
    .stats-chart-wrap { position: relative; width: 100%; }
    .top5-row { display: flex; align-items: center; gap: 10px; padding: 9px 0; border-bottom: 1px solid var(--border); }
    .top5-row:last-child { border-bottom: none; padding-bottom: 2px; }
    .top5-rank { font-family: 'Baloo 2', sans-serif; font-weight: 800; font-size: 15px; color: var(--green); width: 22px; flex-shrink: 0; text-align: center; }
    .top5-name { font-size: 13px; font-weight: 600; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .top5-bar-wrap { width: clamp(44px, 18vw, 80px); background: var(--border); border-radius: 4px; height: 7px; flex-shrink: 0; }
    .top5-bar-fill { height: 7px; border-radius: 4px; background: var(--green); transition: width .4s; }
    .top5-pct { font-size: 12px; font-weight: 700; color: var(--text-light); width: 36px; text-align: right; flex-shrink: 0; }
    .stats-empty { color: var(--text-light); font-size: 13px; text-align: center; padding: 24px 0; }

    /* ── STATS SCREEN ────────────────────────────────── */
    .stats-header { background: white; border-bottom: 1px solid var(--border); padding: 0 16px; height: 56px; display: flex; align-items: center; justify-content: space-between; }
    .stats-header-title { font-family: 'Baloo 2', sans-serif; font-weight: 800; font-size: 20px; }
    .stats-section { margin-bottom: 20px; }
    .stats-section-lbl { font-family: 'Baloo 2', sans-serif; font-weight: 700; font-size: 14px; color: var(--text-light); text-transform: uppercase; letter-spacing: .4px; margin-bottom: 10px; }
    .stats-apex-wrap { min-height: 180px; }
    .stats-days-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
    .stats-day-card { background: var(--green-light); border-radius: 12px; padding: 14px 12px; text-align: center; border: 1px solid var(--green-mid); }
    .stats-day-card .sdc-day { font-size: 13px; font-weight: 700; color: var(--green-deep); margin-bottom: 4px; }
    .stats-day-card .sdc-num { font-family: 'Baloo 2', sans-serif; font-size: 34px; font-weight: 800; color: var(--green); line-height: 1; }
    .stats-day-card .sdc-lbl { font-size: 11px; color: var(--green-deep); margin-top: 2px; }
    .stats-summary-row { display: flex; gap: 10px; margin-bottom: 16px; }
    .stats-kpi { flex: 1; background: var(--card); border-radius: 12px; padding: 14px 10px; text-align: center; border: 1px solid var(--border); box-shadow: var(--shadow); }
    .stats-kpi .kpi-num { font-family: 'Baloo 2', sans-serif; font-size: 28px; font-weight: 800; color: var(--green); line-height: 1; }
    .stats-kpi .kpi-lbl { font-size: 11px; color: var(--text-light); margin-top: 4px; text-transform: uppercase; letter-spacing: .3px; font-weight: 600; }
    .stats-club-divider { display: flex; align-items: center; gap: 10px; margin: 20px 0 14px; }
    .stats-club-divider span { font-family: 'Baloo 2', sans-serif; font-size: 13px; font-weight: 700; color: var(--text-light); white-space: nowrap; text-transform: uppercase; letter-spacing: .4px; }
    .stats-club-divider::before, .stats-club-divider::after { content: ''; flex: 1; height: 1px; background: var(--border); }

    /* ── ADMIN LIST ITEMS ────────────────────────────── */
    .swipe-row { position: relative; overflow: hidden; border-bottom: 1px solid var(--border); }
    .swipe-row:last-child { border-bottom: none; }
    .swipe-content {
      display: flex; align-items: center; gap: 12px; padding: 12px 0;
      background: white; transition: transform .2s ease;
      will-change: transform; position: relative; z-index: 1;
    }
    .swipe-actions {
      position: absolute; right: 0; top: 0; bottom: 0;
      display: flex; align-items: stretch; z-index: 0;
    }
    .swipe-action-btn {
      display: flex; align-items: center; justify-content: center;
      flex-direction: column; gap: 2px; width: 76px;
      font-size: 11px; font-weight: 700; border: none; cursor: pointer;
      padding: 0; color: white;
    }
    .swipe-action-btn .swipe-btn-icon { font-size: 18px; }
    .swipe-action-edit   { background: var(--green); }
    .swipe-action-delete { background: #ef4444; }
    .admin-list-item {
      display: flex; align-items: center; gap: 12px; padding: 12px 0;
      border-bottom: 1px solid var(--border);
    }
    .admin-list-item:last-child { border-bottom: none; }
    .admin-list-info { flex: 1; min-width: 0; }
    .admin-list-name { font-weight: 600; font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .admin-list-sub  { font-size: 12px; color: var(--text-light); margin-top: 2px; }
    .admin-list-actions { display: flex; gap: 6px; flex-shrink: 0; }

    /* ── CALENDAR FILTER BUTTONS ────────────────────── */
    .cal-filter-btn {
      padding:10px 20px;border-radius:12px;font-size:14px;font-weight:700;
      border:2px solid var(--border);background:var(--card);color:var(--text);
      cursor:pointer;transition:all .15s;font-family:'Baloo 2',sans-serif;
      flex:1;text-align:center;min-width:0;
    }
    .cal-filter-btn.active {
      background:var(--green);color:#fff;border-color:var(--green);
      box-shadow:0 2px 8px rgba(22,163,74,.25);
    }
    .cal-filter-btn:not(.active):hover { border-color:var(--green);color:var(--green); }
    html[data-theme="dark"] .cal-filter-btn { background:var(--dm-card);border-color:var(--dm-border); }
    html[data-theme="dark"] .cal-filter-btn.active { background:var(--green);border-color:var(--green); }

    /* ── KIDS TRAINING ───────────────────────────────── */
    .cal-day.kids-training { background: #fff7ed; }
    .cal-day.kids-training.today { background: #f97316 !important; color: white !important; }
    .cal-dot.kids { background: #f97316; }
    .kids-hero { background: linear-gradient(135deg, #7c2d12 0%, #f97316 100%) !important; }
    .kids-badge { display:inline-flex;align-items:center;gap:4px;background:#fff7ed;color:#c2410c;font-size:11px;font-weight:700;padding:2px 8px;border-radius:20px;border:1px solid #fed7aa; }
    /* ── Moje děti — parent dashboard ── */
    .child-card { background:var(--card); border-radius:var(--radius); padding:14px 16px;
                  margin-bottom:10px; box-shadow:var(--shadow); border:1px solid var(--border);
                  cursor:pointer; display:flex; align-items:center; gap:14px; transition:.15s; }
    .child-card:hover { border-color:var(--green); }
    .child-avatar { width:46px; height:46px; border-radius:50%;
                    background:linear-gradient(135deg,#f97316,#7c2d12);
                    display:flex; align-items:center; justify-content:center;
                    color:#fff; font-weight:800; font-size:18px; flex-shrink:0; }
    .child-info { flex:1; min-width:0; }
    .child-name { font-weight:700; font-size:15px; }
    .child-year { font-size:12px; color:var(--text-light); margin-bottom:6px; }
    .child-stats { display:flex; gap:16px; }
    .child-stat { display:flex; flex-direction:column; }
    .child-stat-val { font-weight:700; font-size:14px; color:var(--green); line-height:1.2; }
    .child-stat-lbl { font-size:10px; color:var(--text-light); text-transform:uppercase; letter-spacing:.3px; }
    .child-chevron { color:var(--text-light); font-size:20px; flex-shrink:0; }
    .att-note { font-size:12px; color:#7c3aed; margin-top:3px; font-style:italic; }
    .kids-note-btn { background:none; border:none; cursor:pointer; font-size:16px; padding:4px 6px;
                     border-radius:6px; color:var(--text-light); line-height:1; }
    .kids-note-btn:hover { background:var(--bg); color:#7c3aed; }
    .kids-note-active { color:#7c3aed !important; }

    /* ── ZDRAVOTNÍ STAV ──────────────────────────────── */
    .health-dot { display:inline-block; width:10px; height:10px; border-radius:50%; flex-shrink:0; margin-top:1px; }
    .health-dot.ok      { background:#22c55e; }
    .health-dot.limited { background:#f59e0b; }
    .health-dot.injured { background:#ef4444; }
    .health-banner { display:flex; align-items:center; gap:12px; padding:13px 16px;
                     border-radius:var(--radius); margin-bottom:12px; cursor:pointer;
                     font-size:14px; font-weight:600; border:1.5px solid; }
    .health-banner.limited { background:#fffbeb; border-color:#fbbf24; color:#92400e; }
    .health-banner.injured { background:#fef2f2; border-color:#fecaca; color:#b91c1c; }
    .health-widget { background:var(--card); border-radius:var(--radius); padding:14px 16px;
                     display:flex; align-items:center; gap:12px; margin-bottom:12px;
                     box-shadow:var(--shadow); border:1px solid var(--border); cursor:pointer; }
    /* Status option buttons in modal */
    .hs-option { display:flex; align-items:center; gap:12px; padding:14px 16px;
                 border-radius:var(--radius-sm); border:1.5px solid var(--border);
                 background:var(--card); cursor:pointer; font-size:14px; font-weight:600;
                 text-align:left; font-family:inherit; color:var(--text); width:100%;
                 transition:border-color .15s, background .15s; }
    .hs-option + .hs-option { margin-top:8px; }
    .hs-option.selected { border-color:var(--green); background:#f0fdf4; }
    .hs-option .hs-check { margin-left:auto; color:var(--green); opacity:0; font-size:16px; flex-shrink:0; }
    .hs-option.selected .hs-check { opacity:1; }
    .hs-option .hs-desc { font-size:12px; color:var(--text-light); font-weight:400; margin-top:2px; }
    /* Admin health filter pills */
    .health-filter-pills { display:flex; gap:6px; margin-bottom:10px; flex-wrap:wrap; }
    .health-filter-pill { padding:5px 12px; border-radius:20px; font-size:12px; font-weight:700;
                          border:1.5px solid var(--border); background:var(--card);
                          color:var(--text-light); cursor:pointer; font-family:inherit; }
    .health-filter-pill.active { background:var(--green); color:#fff; border-color:var(--green); }

    /* ── COACH NOTES ─────────────────────────────────── */
    /* Wrapper handles border so inline form can sit below toggle row */
    .att-row-wrap { border-bottom: 1px solid var(--border); position:relative; }
    .att-row-wrap:last-child { border-bottom: none; }
    .att-row-wrap .attendance-toggle { border-bottom: none; padding-bottom: 0; }
    /* 💬 button next to athlete name — min 44×44px tap target */
    .cn-btn { background:none; border:none; padding:0; font-size:15px; cursor:pointer;
              opacity:.28; line-height:1; flex-shrink:0; transition:opacity .15s,background .15s;
              border-radius:8px; position:relative; display:flex; align-items:center;
              justify-content:center; min-width:44px; min-height:44px; }
    .cn-btn:hover  { opacity:.75; background:rgba(0,0,0,.05); }
    .cn-btn:active { background:rgba(0,0,0,.1); }
    .cn-btn.has-note      { opacity:1;   color:var(--green); }
    .cn-btn.has-note-read { opacity:.55; color:#0d9488; }   /* teal = přečteno atletem */
    /* Zelená tečka — poznámka nepřečtena atletem */
    .cn-dot { position:absolute; top:7px; right:7px; width:8px; height:8px;
              background:var(--green); border-radius:50%; border:1.5px solid var(--card);
              pointer-events:none; }
    /* Náhledový popover (hover desktop) */
    .cn-preview-pop { position:absolute; right:52px; top:50%; transform:translateY(-50%);
                      z-index:50; background:#1e293b; color:#f1f5f9; border-radius:8px;
                      padding:8px 11px; font-size:12px; max-width:210px; pointer-events:none;
                      line-height:1.5; box-shadow:0 4px 14px rgba(0,0,0,.22);
                      word-break:break-word; display:none; }
    .cn-preview-pop .cn-tip-hint { color:#94a3b8; font-size:11px; display:block; margin-top:3px; }
    /* Batch indicator nahoře nad listinou */
    .cn-batch { font-size:12px; font-weight:600; color:var(--green);
                padding:6px 4px 8px; display:flex; align-items:center; gap:5px; }
    /* Inline textarea form */
    .cn-inline { padding:4px 0 10px; }
    .cn-inline textarea { width:100%; padding:8px 10px; border:1.5px solid var(--border);
      border-radius:8px; font-family:inherit; font-size:13px; resize:vertical;
      min-height:68px; box-sizing:border-box; }
    .cn-inline textarea:focus { outline:none; border-color:var(--green); }
    .cn-inline-actions { display:flex; justify-content:space-between; align-items:center;
                         margin-top:6px; }
    .cn-inline-counter { font-size:11px; color:var(--text-light); }
    /* Member-side note chip */
    .cn-note-chip { display:inline-flex; align-items:center; gap:5px; font-size:12px;
      font-weight:600; color:var(--green); cursor:pointer; padding:3px 10px;
      background:#f0fdf4; border-radius:20px; border:1px solid #bbf7d0;
      margin:0 0 8px 8px; }
    .cn-new-badge { background:#ef4444; color:#fff; border-radius:10px;
                    font-size:10px; font-weight:800; padding:0 5px; }
    .cn-note-text { font-size:13px; color:var(--text); line-height:1.5;
      margin:0 8px 10px; padding:10px 12px; background:var(--bg);
      border-radius:8px; border-left:3px solid var(--green); }

    /* ── BIRTHDAY CARD ───────────────────────────────── */
    .bday-card { border-radius:var(--radius); padding:16px; margin-bottom:12px;
      background:linear-gradient(135deg,#fdf4ff 0%,#fce7f3 100%);
      border:1.5px solid #f0abfc; position:relative; }
    .bday-card-mine { background:linear-gradient(135deg,#fefce8 0%,#fef08a 60%,#fde047 100%);
      border-color:#facc15; }
    .bday-person-row { display:flex; align-items:center; gap:10px; margin-bottom:12px; }
    .bday-avatar { width:42px; height:42px; border-radius:50%; background:#e9d5ff;
      color:#7e22ce; font-weight:700; font-size:14px; display:flex; align-items:center;
      justify-content:center; flex-shrink:0; }
    .bday-card-mine .bday-avatar { background:#fde68a; color:#92400e; }
    .bday-name { font-weight:700; font-size:15px; color:var(--text); }
    .bday-sub  { font-size:12px; color:#a855f7; margin-top:2px; }
    .bday-card-mine .bday-sub { color:#92400e; }
    .bday-react-row { display:flex; align-items:center; gap:6px; flex-wrap:wrap; margin-top:4px; }
    .bday-emoji-btn { background:#fff; border:1.5px solid #f0abfc; border-radius:20px;
      font-size:19px; padding:4px 10px; cursor:pointer; line-height:1;
      transition:transform .1s,background .1s; }
    .bday-emoji-btn:hover { background:#fdf4ff; transform:scale(1.12); }
    .bday-msg-input { flex:1; min-width:90px; padding:7px 12px; border:1.5px solid #f0abfc;
      border-radius:20px; font-size:13px; font-family:inherit; background:#fff; outline:none; }
    .bday-msg-input:focus { border-color:#d946ef; }
    .bday-send-btn { background:#d946ef; color:#fff; border:none; border-radius:20px;
      padding:7px 14px; font-size:13px; font-weight:700; cursor:pointer;
      font-family:inherit; white-space:nowrap; }
    .bday-send-btn:hover { background:#a21caf; }
    .bday-reactions { display:flex; flex-wrap:wrap; gap:4px; margin-top:8px; }
    .bday-react-pill { background:#fff; border:1px solid #f0abfc; border-radius:20px;
      padding:3px 10px; font-size:12px; color:#7e22ce; }

    /* ── STRUCTURED WORKOUT FIELDS ───────────────────── */
    /* Workout type badge (cards + detail) */
    .wt-badge { display:inline-flex; align-items:center; font-size:11px; font-weight:700;
                padding:2px 8px; border-radius:20px; border:1px solid; margin-bottom:4px; }
    /* Intensity flames — read-only display */
    .intensity-display { display:inline-flex; gap:1px; font-size:13px; }
    .intensity-display .flame-off { opacity:.2; }
    /* Intensity picker — form (editable) */
    .intensity-picker { display:flex; gap:4px; margin-top:4px; }
    .intensity-btn { font-size:22px; cursor:pointer; opacity:.25; transition:opacity .15s;
                     background:none; border:none; padding:0; line-height:1; }
    .intensity-btn.active { opacity:1; }
    /* Equipment chips — read-only display */
    .equip-chips { display:flex; flex-wrap:wrap; gap:6px; margin-top:6px; }
    .equip-chip  { font-size:12px; font-weight:600; padding:3px 10px; border-radius:20px;
                   background:var(--bg); border:1px solid var(--border); color:var(--text-light); }
    /* Training card — workout preview */
    .card-wdesc { font-size:12px; color:var(--text-light); margin-top:3px; line-height:1.4; }
    .card-wdesc-more { color:var(--green); cursor:pointer; font-weight:600; }
    .card-wmeta { display:flex; align-items:center; gap:8px; margin-top:4px; flex-wrap:wrap; }

    /* ── LEADERBOARD TABS ────────────────────────────── */
    .lb-tabs { display: flex; margin-bottom: 16px; border-radius: var(--radius-sm); overflow: hidden; border: 1px solid var(--border); }
    .lb-tab { flex: 1; padding: 10px; text-align: center; font-family: 'Baloo 2', sans-serif; font-weight: 700; font-size: 13px; background: var(--bg); color: var(--text-light); cursor: pointer; transition: all .2s; }
    .lb-tab.active { background: var(--green); color: white; }
    /* Day filter pills (dashboard) */
    .day-filter-btn { padding:5px 12px; border-radius:20px; border:1.5px solid var(--border); background:var(--bg); color:var(--text-light); font-family:'Baloo 2',sans-serif; font-weight:700; font-size:12px; cursor:pointer; transition:all .15s; }
    .day-filter-btn.active { background:var(--green); color:white; border-color:var(--green); }
    .att-filter-bar { display:flex; flex-wrap:wrap; gap:6px; margin-bottom:12px; }
    .att-search-wrap { display:flex; align-items:center; gap:8px; margin-bottom:12px; background:var(--card); border:1px solid var(--border); border-radius:var(--radius-sm); padding:8px 12px; }
    .att-search-wrap input { flex:1; border:none; outline:none; font-size:13px; background:transparent; color:var(--text); font-family:'Open Sans',sans-serif; }
    .att-search-wrap input::placeholder { color:var(--text-light); }

    /* ── ACCORDION (rollap) ──────────────────────────── */
    .accordion { border-radius: var(--radius-sm); overflow: hidden; margin-bottom: 10px; background: white; box-shadow: var(--shadow); }
    .accordion-header {
      display: flex; align-items: center; gap: 10px; padding: 14px 16px;
      cursor: pointer; user-select: none; -webkit-user-select: none;
      font-weight: 700; font-size: 14px; background: white;
    }
    .accordion-header:active { background: var(--bg); }
    .accordion-icon { font-size: 18px; flex-shrink: 0; }
    .accordion-title { flex: 1; }
    .accordion-badge { font-size: 11px; font-weight: 700; padding: 2px 8px; border-radius: 20px; background: var(--green-light); color: var(--green); }
    .accordion-arrow { font-size: 18px; color: var(--text-light); transition: transform .25s; flex-shrink: 0; }
    .accordion.open .accordion-arrow { transform: rotate(90deg); }
    .accordion-body { display: none; padding: 0 16px 14px; border-top: 1px solid var(--border); }
    .accordion.open .accordion-body { display: block; }

    /* contact row */
    .contact-row { display: flex; align-items: center; gap: 10px; padding: 10px 0; border-bottom: 1px solid var(--border); }
    .contact-row:last-child { border-bottom: none; }
    .contact-row a { color: var(--green); text-decoration: none; font-size: 14px; font-weight: 600; }
    .contact-row .contact-label { font-size: 12px; color: var(--text-light); }

    /* ── FULLSCREEN MODAL (bottom-sheet on mobile) ───── */
    .fullscreen-modal-backdrop {
      position: fixed; inset: 0; z-index: 299;
      background: rgba(0,0,0,.5); opacity: 0; pointer-events: none;
      transition: opacity .3s ease;
    }
    .fullscreen-modal-backdrop.open { opacity: 1; pointer-events: auto; }
    .fullscreen-modal {
      position: fixed; z-index: 300; background: var(--bg);
      display: none; flex-direction: column;
      max-width: 480px; margin: 0 auto;
      /* Desktop: centered fullscreen */
      inset: 0;
      overflow: hidden;
    }
    .fullscreen-modal.open { display: flex; }
    /* Mobile: bottom-sheet */
    @media (max-width: 600px) {
      .fullscreen-modal {
        inset: auto 0 0 0;
        max-height: 85vh;
        border-radius: 16px 16px 0 0;
        box-shadow: 0 -8px 32px rgba(0,0,0,.18);
      }
    }
    .fullscreen-modal-handle {
      width: 40px; height: 4px; border-radius: 2px;
      background: var(--border); margin: 10px auto 0; flex-shrink: 0;
    }
    @media (max-width: 600px) {
      .fullscreen-modal--tall { max-height: 90vh; }
      .fullscreen-modal--full {
        inset: 0;
        max-height: 100vh;
        border-radius: 0;
        box-shadow: none;
      }
      /* Fullscreen variant musí respektovat iOS safe-area (notch + status bar),
         jinak header překrývá čas/baterii. Defaultní bottom-sheet to nepotřebuje. */
      .fullscreen-modal--full .fullscreen-modal-header {
        padding-top: env(safe-area-inset-top, 0px);
        height: calc(48px + env(safe-area-inset-top, 0px));
      }
    }
    @media (min-width: 601px) { .fullscreen-modal-handle { display: none; } }
    .fullscreen-modal-header {
      position: sticky; top: 0; background: var(--card);
      border-bottom: 1px solid var(--border);
      display: flex; align-items: center; justify-content: space-between;
      padding: 0 16px; padding-top: env(safe-area-inset-top, 0px);
      height: calc(56px + env(safe-area-inset-top, 0px));
      z-index: 10; flex-shrink: 0;
      gap: 12px;
    }
    @media (max-width: 600px) {
      .fullscreen-modal-header { padding-top: 0; height: 48px; }
    }
    .fullscreen-modal-title { font-family: 'Baloo 2', sans-serif; font-weight: 700; font-size: 17px; flex: 1; }
    .fullscreen-modal-body {
      padding: 16px;
      padding-bottom: calc(16px + env(safe-area-inset-bottom, 0px));
      flex: 1; overflow-y: auto; -webkit-overflow-scrolling: touch;
    }
    .fullscreen-modal-footer {
      padding: 16px; padding-bottom: calc(16px + env(safe-area-inset-bottom, 0px));
      border-top: 1px solid var(--border);
      display: flex; gap: 10px; background: var(--card); flex-shrink: 0;
    }
    .form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
    .form-row .form-group { min-width: 0; }

    /* === ONBOARDING WIZARD (Prompt 2/4) === */
    .obw-overlay{position:fixed;inset:0;padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px);z-index:500;background:var(--bg);display:none;flex-direction:column;overflow:hidden}
    .obw-overlay.open{display:flex}
    .obw-progress{display:flex;align-items:center;gap:0;padding:16px 24px 12px;flex-shrink:0}
    .obw-progress-dot{width:10px;height:10px;border-radius:50%;background:var(--border);flex-shrink:0;transition:background .2s}
    .obw-progress-dot.done{background:var(--green)}
    .obw-progress-dot.active{background:var(--green);box-shadow:0 0 0 3px rgba(34,197,94,.25)}
    .obw-progress-line{flex:1;height:2px;background:var(--border);transition:background .2s}
    .obw-progress-line.done{background:var(--green)}
    .obw-body{flex:1;overflow-y:auto;-webkit-overflow-scrolling:touch;padding:0 24px 24px;max-width:480px;margin:0 auto;width:100%}
    .obw-step{display:none}
    .obw-step.active{display:block}
    .obw-hero{text-align:center;padding:24px 0 16px}
    .obw-hero-icon{font-size:56px;margin-bottom:12px}
    .obw-hero h2{font-family:'Baloo 2',sans-serif;font-size:22px;font-weight:800;margin:0 0 8px;line-height:1.3}
    .obw-hero p{font-size:14px;color:var(--text-light);line-height:1.6;margin:0}
    .obw-info-box{background:var(--card);border:1px solid var(--border);border-radius:var(--radius);padding:14px;margin:16px 0;font-size:13px;line-height:1.6}
    .obw-info-box .obw-info-title{font-weight:700;margin-bottom:6px;font-size:14px}
    .obw-watch-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:20px 0}
    .obw-watch-btn{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;padding:20px 12px;border-radius:var(--radius);border:2px solid var(--border);background:var(--card);cursor:pointer;transition:all .15s;font-family:inherit;font-size:13px;font-weight:700;color:var(--text)}
    .obw-watch-btn:hover{border-color:var(--green);background:var(--green-light)}
    .obw-watch-btn.selected{border-color:var(--green);background:var(--green-light);color:var(--green-dark)}
    .obw-watch-btn .obw-watch-icon{font-size:32px}
    .obw-footer{padding:16px 24px;padding-bottom:calc(16px + env(safe-area-inset-bottom,0px));border-top:1px solid var(--border);display:flex;gap:10px;flex-shrink:0;background:var(--card)}
    .obw-btn{flex:1;padding:14px;border-radius:var(--radius-sm);font-size:15px;font-weight:700;font-family:inherit;cursor:pointer;border:none;transition:opacity .15s}
    .obw-btn-primary{background:var(--green);color:#fff}
    .obw-btn-primary:hover{opacity:.9}
    .obw-btn-primary:disabled{opacity:.5;cursor:not-allowed}
    .obw-btn-secondary{background:transparent;color:var(--text-light);border:1px solid var(--border)}
    .obw-btn-secondary:hover{background:var(--bg)}
    .obw-btn-ghost{background:none;border:none;color:var(--text-light);font-size:13px;font-weight:600;cursor:pointer;padding:8px 0;text-align:center}
    .obw-icu-steps{counter-reset:icu-step;margin:16px 0}
    .obw-icu-step{display:flex;gap:12px;padding:12px 0;border-bottom:1px solid var(--border);font-size:13px;line-height:1.5}
    .obw-icu-step:last-child{border-bottom:none}
    .obw-icu-step::before{counter-increment:icu-step;content:counter(icu-step);width:26px;height:26px;border-radius:50%;background:var(--green);color:#fff;display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:700;flex-shrink:0}
    .obw-status-box{text-align:center;padding:24px;border-radius:var(--radius);margin:20px 0}
    .obw-status-box.waiting{background:#fef3c7;border:1px solid #fde68a;color:#92400e}
    .obw-status-box.success{background:var(--green-light);border:1px solid var(--green-mid);color:var(--green-dark)}
    html[data-theme="dark"] .obw-status-box.waiting{background:#422006;color:#fbbf24;border-color:#78350f}
    html[data-theme="dark"] .obw-status-box.success{background:#052e16;color:#4ade80;border-color:#166534}

    /* Date input s ikonou kalendáře */
    .date-input-wrap { position: relative; }
    .date-input-wrap input[type="date"] { padding-left: 40px; }
    .date-input-wrap::before {
      content: '📅'; position: absolute; left: 13px; top: 50%; transform: translateY(-50%);
      font-size: 16px; pointer-events: none; z-index: 1; line-height: 1;
    }
    .input-suffix-wrap { position: relative; display: flex; align-items: center; }
    .input-suffix-wrap input { flex: 1; padding-right: 36px !important; min-width: 0; }
    .input-suffix { position: absolute; right: 12px; color: var(--text-light); font-size: 14px; pointer-events: none; user-select: none; }
    .form-group select, .form-group textarea {
      width: 100%; padding: 12px 16px; border: 1.5px solid var(--border);
      border-radius: var(--radius-sm); font-size: 15px; font-family: inherit;
      transition: border-color .2s; background: white;
    }
    .form-group textarea { resize: vertical; min-height: 80px; }
    .form-group select:focus, .form-group textarea:focus { outline: none; border-color: var(--green); }
    .checkbox-row { display: flex; align-items: center; gap: 10px; padding: 12px 0; border-bottom: 1px solid var(--border); }
    .checkbox-row:last-child { border-bottom: none; }
    .checkbox-row input[type=checkbox] { width: 18px; height: 18px; accent-color: var(--green); cursor: pointer; flex-shrink: 0; }
    .checkbox-row label { font-weight: 600; font-size: 14px; cursor: pointer; }
    .btn-sm { padding: 8px 14px; font-size: 13px; }

    @media (max-width: 360px) {
      .hero-stat .val { font-size: 22px; }
      .cal-day { font-size: 12px; }
    }

    /* ── HERO STAT TOOLTIPS ──────────────────────────── */
    .hero-stat { position: relative; }
    .stat-info-btn {
      background: none; border: none; cursor: pointer; color: inherit;
      font-size: 11px; opacity: .65; padding: 0 0 0 3px; line-height: 1;
      vertical-align: middle; transition: opacity .15s; font-family: inherit;
    }
    .stat-info-btn:hover { opacity: 1; }
    .stat-tooltip {
      display: none;
      position: absolute; top: calc(100% + 8px); left: 50%;
      transform: translateX(-50%);
      background: #1e293b; color: #f1f5f9;
      font-size: 12px; font-weight: 400; line-height: 1.55;
      text-transform: none; letter-spacing: 0; opacity: 1;
      border-radius: 10px; padding: 9px 13px;
      width: 170px; text-align: center;
      z-index: 9990; pointer-events: none;
      box-shadow: 0 6px 20px rgba(0,0,0,.35);
    }
    .stat-tooltip::before {
      content: ''; position: absolute; bottom: 100%; left: 50%;
      transform: translateX(-50%);
      border: 6px solid transparent; border-bottom-color: #1e293b;
    }
    .stat-tooltip.open { display: block; }
    .hero-stat-avg {
      font-size: 10px; opacity: .65; font-weight: 600;
      min-height: 13px; margin-bottom: 1px; line-height: 1.3;
    }

    /* ── LEADERBOARD INFO ACCORDION ─────────────────── */
    .lb-info {
      background: var(--card); border-radius: var(--radius);
      box-shadow: var(--shadow); margin-bottom: 16px; overflow: hidden;
    }
    .lb-info-toggle {
      width: 100%; display: flex; align-items: center;
      justify-content: space-between; padding: 13px 16px;
      font-family: 'Baloo 2', sans-serif; font-weight: 700; font-size: 14px;
      color: var(--text); background: none; cursor: pointer;
      transition: background .15s;
    }
    .lb-info-toggle:hover { background: var(--bg); }
    .lb-info-chevron {
      font-size: 13px; color: var(--green); flex-shrink: 0;
      transition: transform .25s; display: inline-block;
    }
    .lb-info.open .lb-info-chevron { transform: rotate(180deg); }
    .lb-info-body {
      display: none; padding: 0 16px 14px;
      border-top: 1px solid var(--border);
    }
    .lb-info.open .lb-info-body { display: block; }
    .lb-info-row {
      display: flex; gap: 11px; padding: 11px 0;
      border-bottom: 1px solid var(--border); font-size: 13px; line-height: 1.55;
    }
    .lb-info-row:last-child { border-bottom: none; padding-bottom: 2px; }
    .lb-info-row-icon { font-size: 17px; flex-shrink: 0; margin-top: 1px; }
    .lb-info-row-text { color: var(--text-light); }
    .lb-info-row-text strong { color: var(--text); font-weight: 700; }

    /* ── WELCOME PAGE (first-time intro) ────────────── */
    #welcome-overlay {
      position: fixed; inset: 0; z-index: 10010;
      display: none; overflow: hidden;
      background: linear-gradient(160deg, #0f172a 0%, #064e3b 40%, #166534 70%, #22c55e 100%);
    }
    #welcome-overlay.open { display: flex; flex-direction: column; }
    .welcome-slides {
      flex: 1; position: relative; overflow: hidden;
    }
    .welcome-slide {
      position: absolute; inset: 0;
      display: flex; flex-direction: column; align-items: center; justify-content: center;
      padding: 40px 28px 100px; text-align: center;
      opacity: 0; transform: translateX(60px);
      transition: opacity .45s ease, transform .45s ease;
      pointer-events: none;
    }
    .welcome-slide.active {
      opacity: 1; transform: translateX(0); pointer-events: all;
    }
    .welcome-slide.exit-left {
      opacity: 0; transform: translateX(-60px);
    }
    .welcome-logo {
      width: 200px; height: auto; object-fit: contain;
      filter: drop-shadow(0 0 1px rgba(255,255,255,.9)) drop-shadow(0 0 3px rgba(255,255,255,.6)) drop-shadow(0 10px 30px rgba(0,0,0,.3));
      margin-bottom: 28px;
    }
    .welcome-big-emoji {
      font-size: 72px; margin-bottom: 24px;
      animation: welcomePulse 2s ease-in-out infinite;
    }
    @keyframes welcomePulse {
      0%, 100% { transform: scale(1); }
      50% { transform: scale(1.08); }
    }
    .welcome-title {
      font-family: 'Baloo 2', sans-serif; font-weight: 800;
      font-size: 30px; color: #fff; line-height: 1.2; margin-bottom: 12px;
      text-shadow: 0 2px 20px rgba(0,0,0,.3);
    }
    .welcome-subtitle {
      font-size: 16px; color: rgba(255,255,255,.85);
      line-height: 1.7; max-width: 340px;
    }
    .welcome-subtitle strong { color: #fff; font-weight: 700; }
    .welcome-features {
      display: flex; flex-direction: column; gap: 16px;
      width: 100%; max-width: 340px; margin-top: 8px;
    }
    .welcome-feature {
      display: flex; align-items: center; gap: 14px;
      background: rgba(255,255,255,.12); border-radius: 16px;
      padding: 16px 18px; backdrop-filter: blur(8px);
      border: 1px solid rgba(255,255,255,.1);
      text-align: left;
    }
    .welcome-feature-icon { font-size: 30px; flex-shrink: 0; }
    .welcome-feature-text { font-size: 14px; color: rgba(255,255,255,.9); line-height: 1.5; }
    .welcome-feature-text strong { color: #fff; }
    .welcome-bottom {
      position: absolute; bottom: 0; left: 0; right: 0;
      padding: 0 28px calc(28px + env(safe-area-inset-bottom, 0px));
      display: flex; flex-direction: column; align-items: center; gap: 16px;
      background: linear-gradient(transparent, rgba(15,23,42,.6));
    }
    .welcome-dots {
      display: flex; gap: 8px;
    }
    .welcome-dot {
      width: 8px; height: 8px; border-radius: 50%;
      background: rgba(255,255,255,.35);
      transition: background .3s, width .3s, border-radius .3s;
    }
    .welcome-dot.active {
      width: 28px; border-radius: 4px; background: #fff;
    }
    .welcome-btn {
      width: 100%; max-width: 340px; padding: 16px 24px;
      font-size: 16px; font-weight: 700; font-family: 'Baloo 2', sans-serif;
      border: none; border-radius: 16px; cursor: pointer;
      background: #fff; color: #166534;
      box-shadow: 0 8px 32px rgba(0,0,0,.25);
      transition: transform .15s, box-shadow .15s;
    }
    .welcome-btn:active { transform: scale(.97); box-shadow: 0 4px 16px rgba(0,0,0,.2); }
    .welcome-skip {
      color: rgba(255,255,255,.55); font-size: 13px; cursor: pointer;
      border: none; background: none; padding: 4px 8px; margin-top: -8px;
    }
    .welcome-skip:hover { color: rgba(255,255,255,.8); }
    /* Decorative floating circles */
    .welcome-deco {
      position: absolute; border-radius: 50%;
      background: rgba(34,197,94,.12); pointer-events: none;
    }
    .welcome-deco-1 { width: 200px; height: 200px; top: -60px; right: -40px; animation: decoFloat 6s ease-in-out infinite; }
    .welcome-deco-2 { width: 150px; height: 150px; bottom: 80px; left: -50px; animation: decoFloat 8s ease-in-out infinite reverse; }
    .welcome-deco-3 { width: 100px; height: 100px; top: 30%; left: 70%; animation: decoFloat 5s ease-in-out infinite 1s; }
    @keyframes decoFloat {
      0%, 100% { transform: translate(0, 0) scale(1); opacity: .5; }
      50% { transform: translate(10px, -15px) scale(1.1); opacity: .8; }
    }

    /* ── ONBOARDING ──────────────────────────────────── */
    #onboarding-overlay {
      position: fixed; inset: 0; z-index: 9999;
      display: none; pointer-events: all;
    }
    #onboarding-overlay.open { display: block; }
    #onb-spotlight {
      position: fixed; z-index: 10000; pointer-events: none;
      border-radius: 14px;
      /* Massive box-shadow = darkened backdrop; inner glows = highlight ring */
      box-shadow: 0 0 0 9999px rgba(15,23,42,.83),
                  0 0 0 3px #22c55e,
                  0 0 28px rgba(34,197,94,.45);
      transition: top .35s cubic-bezier(.4,0,.2,1),
                  left .35s cubic-bezier(.4,0,.2,1),
                  width .35s cubic-bezier(.4,0,.2,1),
                  height .35s cubic-bezier(.4,0,.2,1);
    }
    .onb-card {
      position: fixed; z-index: 10001;
      background: var(--card); border-radius: 24px;
      padding: 28px 24px 22px;
      width: calc(100% - 48px); max-width: 360px;
      box-shadow: 0 24px 64px rgba(0,0,0,.35);
      transition: top .35s cubic-bezier(.4,0,.2,1), left .35s cubic-bezier(.4,0,.2,1);
    }
    .onb-emoji { font-size: 52px; line-height: 1; margin-bottom: 14px; text-align:center; }
    .onb-title {
      font-family: 'Baloo 2', sans-serif; font-weight: 800;
      font-size: 21px; color: var(--blue-dark); margin-bottom: 10px; text-align:center;
    }
    .onb-text {
      font-size: 14px; color: var(--text-light);
      line-height: 1.75; margin-bottom: 20px; text-align:center;
    }
    .onb-text strong { color: var(--text); }
    .onb-dots { display: flex; justify-content: center; gap: 8px; margin-bottom: 16px; }
    .onb-dot {
      height: 8px; border-radius: 4px; background: rgba(255,255,255,.3);
      transition: background .25s, width .25s;
      width: 8px;
    }
    .onb-dot.active { background: #22c55e; width: 24px; }

    /* ── TAB HINTS ───────────────────────────────────── */
    .tab-hint-card {
      display: flex; align-items: flex-start; gap: 12px;
      background: linear-gradient(135deg, #f0fdf4 0%, #dcfce7 100%);
      border: 1.5px solid #86efac; border-radius: 14px;
      padding: 14px 14px 14px 16px; margin: 12px 16px 0;
      animation: hint-in .3s ease;
    }
    @keyframes hint-in { from { opacity:0; transform:translateY(-6px); } to { opacity:1; transform:none; } }
    @keyframes slideUp { from { opacity:0; transform:translateY(20px); } to { opacity:1; transform:translateY(0); } }
    .tab-hint-icon  { font-size: 22px; flex-shrink: 0; margin-top: 2px; }
    .tab-hint-body  { flex: 1; min-width: 0; }
    .tab-hint-title { font-weight: 700; font-size: 14px; margin-bottom: 3px; color: var(--text); }
    .tab-hint-text  { font-size: 13px; color: var(--text-light); line-height: 1.55; }
    .tab-hint-close { background: none; border: none; cursor: pointer; color: var(--text-light);
                      font-size: 18px; padding: 0 0 0 6px; flex-shrink: 0; line-height: 1; margin-top: 1px; }
    /* ═══ COMMUNITY EVENTS ═══ */
    .ce-filter-bar{display:flex;gap:6px;padding:10px 16px 8px;overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none;background:var(--card);border-bottom:1px solid var(--border)}
    .ce-filter-bar::-webkit-scrollbar{display:none}
    .ce-section-title{padding:14px 16px 6px;font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.5px;color:var(--text-light)}
    .ce-card{background:var(--card);border:1px solid var(--border);border-radius:var(--radius);margin:8px 16px;overflow:hidden}
    .ce-card-header{display:flex;align-items:flex-start;gap:10px;padding:14px 16px 8px}
    .ce-card-icon{width:40px;height:40px;border-radius:12px;display:flex;align-items:center;justify-content:center;font-size:20px;flex-shrink:0}
    .ce-card-icon.run{background:#dcfce7;color:#16a34a}
    .ce-card-icon.trail{background:#fef3c7;color:#92400e}
    .ce-card-icon.bike{background:#dbeafe;color:#1e40af}
    .ce-card-icon.hike{background:#ede9fe;color:#5b21b6}
    .ce-card-icon.race{background:#fee2e2;color:#991b1b}
    .ce-card-icon.social{background:#fce7f3;color:#9d174d}
    .ce-card-icon.other{background:#e2e8f0;color:#475569}
    html[data-theme="dark"] .ce-card-icon.run{background:#052e16;color:#4ade80}
    html[data-theme="dark"] .ce-card-icon.trail{background:#422006;color:#fbbf24}
    html[data-theme="dark"] .ce-card-icon.bike{background:#1e3a5f;color:#93c5fd}
    html[data-theme="dark"] .ce-card-icon.hike{background:#2e1065;color:#c4b5fd}
    html[data-theme="dark"] .ce-card-icon.race{background:#450a0a;color:#fca5a5}
    html[data-theme="dark"] .ce-card-icon.social{background:#4a1942;color:#f9a8d4}
    html[data-theme="dark"] .ce-card-icon.other{background:#334155;color:#94a3b8}
    .ce-card-info{flex:1;min-width:0}
    .ce-card-title{font-size:15px;font-weight:800;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
    .ce-card-meta{font-size:12px;color:var(--text-light);margin-top:3px;display:flex;flex-wrap:wrap;gap:2px 8px}
    .ce-card-body{padding:0 16px 10px}
    .ce-card-location{font-size:12px;color:var(--text-light);display:flex;align-items:center;gap:4px}
    .ce-card-location a{color:var(--green);text-decoration:none;font-weight:600}
    .ce-card-footer{display:flex;align-items:center;justify-content:space-between;padding:8px 16px;border-top:1px solid var(--border)}
    .ce-avatars{display:flex;margin-left:-4px}
    .ce-avatar{width:26px;height:26px;border-radius:50%;border:2px solid var(--card);margin-left:-6px;background:var(--green-light);display:flex;align-items:center;justify-content:center;font-size:9px;font-weight:800;color:var(--green);overflow:hidden}
    .ce-avatar img{width:100%;height:100%;object-fit:cover}
    .ce-count{font-size:12px;font-weight:700;color:var(--text-light);margin-left:6px}
    .ce-join-btn{padding:6px 16px;border-radius:20px;font-size:12px;font-weight:700;border:none;cursor:pointer;transition:all .15s}
    .ce-join-btn.going{background:var(--green);color:#fff}
    .ce-join-btn.maybe{background:var(--green-light);color:var(--green-dark);border:1.5px solid var(--green)}
    .ce-join-btn.leave{background:var(--bg);color:var(--text-light);border:1.5px solid var(--border)}
    .ce-join-btn.organizer{background:var(--green-light);color:var(--green-dark);border:1.5px solid var(--green);cursor:default}
    .ce-join-btn.full{background:var(--bg);color:var(--text-light);border:1.5px solid var(--border);cursor:not-allowed;opacity:.6}
    html[data-theme="dark"] .ce-join-btn.maybe{background:#052e16;color:#4ade80;border-color:#4ade80}
    html[data-theme="dark"] .ce-join-btn.organizer{background:#052e16;color:#4ade80;border-color:#4ade80}
    .ce-card-links{display:flex;gap:10px;padding:0 16px 10px;font-size:12px}
    .ce-card-links a{color:var(--green);text-decoration:none;font-weight:600}
    .ce-badge-cancelled{background:#fee2e2;color:#991b1b;font-size:11px;font-weight:700;padding:3px 10px;border-radius:10px;display:inline-block;margin:0 16px 10px}
    html[data-theme="dark"] .ce-badge-cancelled{background:#450a0a;color:#fca5a5}
    .ce-toggle-past{padding:12px 16px;text-align:center;font-size:13px;font-weight:600;color:var(--green);cursor:pointer}
    .ce-empty{text-align:center;padding:60px 24px;color:var(--text-light)}
    .ce-empty-icon{font-size:48px;margin-bottom:12px}
    /* CE Form pills */
    .ce-pills{display:flex;flex-wrap:wrap;gap:6px;padding:4px 0}
    .ce-pill{padding:8px 14px;border-radius:20px;font-size:13px;font-weight:600;border:1.5px solid var(--border);background:var(--bg);color:var(--text-light);cursor:pointer;transition:all .15s}
    .ce-pill.active{background:var(--green);color:#fff;border-color:var(--green)}
    .ce-form-step{display:none}
    .ce-form-step.active{display:block}
    .ce-form-nav{display:flex;gap:8px;padding:16px 0 8px;position:sticky;bottom:0;background:var(--card);z-index:1;margin:0 -16px;padding-left:16px;padding-right:16px;padding-bottom:16px;border-top:1px solid var(--border)}
    .ce-form-nav button{flex:1;padding:12px;border-radius:var(--radius-sm);font-size:14px;font-weight:700;border:none;cursor:pointer}
    .ce-form-nav .ce-btn-back{background:var(--bg);color:var(--text-light);border:1.5px solid var(--border)}
    .ce-form-nav .ce-btn-next{background:var(--green);color:#fff}
    .ce-form-nav .ce-btn-next:disabled{opacity:.4;cursor:not-allowed}
    .ce-preview{background:var(--bg);border:1px solid var(--border);border-radius:var(--radius-sm);padding:14px;font-size:13px;line-height:1.6}
    .ce-detail-section{padding:0 16px 12px}
    .ce-detail-section h4{font-size:13px;font-weight:700;color:var(--text-light);text-transform:uppercase;letter-spacing:.4px;margin:0 0 8px}
    .ce-participant-row{display:flex;align-items:center;gap:10px;padding:6px 0}
    .ce-participant-avatar{width:30px;height:30px;border-radius:50%;background:var(--green-light);display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:800;color:var(--green);flex-shrink:0;overflow:hidden}
    .ce-participant-avatar img{width:100%;height:100%;object-fit:cover}
    .ce-participant-name{font-size:13px;font-weight:600;flex:1}
    .ce-participant-status{font-size:11px;padding:2px 8px;border-radius:10px;font-weight:600}
    .ce-participant-status.going{background:var(--green-light);color:var(--green-dark)}
    .ce-participant-status.maybe{background:#fef3c7;color:#92400e}
    /* ═══ TRAINING FINANCE ═══ */
    .tf-section{margin:12px 16px;background:var(--card);border:1px solid var(--border);border-radius:var(--radius);overflow:hidden}
    .tf-header{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.5px;color:var(--text-light);padding:14px 16px 8px}
    .tf-row{display:flex;align-items:center;gap:8px;padding:8px 16px;border-bottom:1px solid var(--border)}
    .tf-row:last-child{border-bottom:none}
    .tf-row label{display:flex;align-items:center;gap:8px;flex:1;min-width:0;font-size:13px;cursor:pointer}
    .tf-input{width:80px;padding:4px 8px;border:1px solid var(--border);border-radius:6px;font-size:13px;text-align:right;background:var(--card);color:var(--text)}
    .tf-input:focus{border-color:var(--green);outline:none}
    .tf-add-btn{padding:8px 16px;font-size:12px;font-weight:600;color:var(--green);cursor:pointer;border-top:1px solid var(--border)}
    .tf-summary{margin:12px 16px;padding:14px 16px;background:#f9fafb;border:1px solid var(--border);border-radius:12px;font-size:13px;line-height:1.8}
    html[data-theme="dark"] .tf-summary{background:#1e293b}
    .tf-summary-row{display:flex;justify-content:space-between}
    .tf-summary-total{display:flex;justify-content:space-between;font-weight:800;border-top:1px solid var(--border);padding-top:6px;margin-top:4px}
    .tf-remove{width:24px;height:24px;border:none;background:none;color:var(--text-light);font-size:14px;cursor:pointer;flex-shrink:0;border-radius:50%}
    .tf-remove:hover{background:#fee2e2;color:#ef4444}
    /* ═══ OFFLINE BANNER ═══ */
    .offline-banner{position:fixed;top:0;left:0;right:0;z-index:9999;background:#f59e0b;color:#78350f;text-align:center;font-size:13px;font-weight:600;padding:calc(6px + env(safe-area-inset-top,0px)) 12px 6px;transform:translateY(-100%);transition:transform .3s ease}
    .offline-banner.show{transform:translateY(0)}
    html[data-theme="dark"] .offline-banner{background:#92400e;color:#fef3c7}

    /* ── SCROLL LOCK (when any modal/sheet is open) ─── */
    body.modal-open { overflow: hidden !important; position: fixed; width: 100%; }

    /* ═══ COMMAND PALETTE ═══════════════════════════════════════════ */
    .cmd-palette-overlay{position:fixed;inset:0;z-index:10000;background:rgba(0,0,0,.5);display:flex;align-items:flex-start;justify-content:center;padding-top:min(20vh,120px);backdrop-filter:blur(2px)}
    .cmd-palette-modal{width:90vw;max-width:600px;max-height:70vh;background:var(--card);border-radius:var(--radius-lg);box-shadow:0 16px 48px rgba(0,0,0,.2),0 0 0 1px var(--border);display:flex;flex-direction:column;overflow:hidden;animation:cmdFadeIn .15s ease}
    @keyframes cmdFadeIn{from{opacity:0;transform:translateY(-12px)}to{opacity:1;transform:translateY(0)}}
    .cmd-palette-input-wrap{display:flex;align-items:center;gap:10px;padding:14px 16px;border-bottom:1px solid var(--border)}
    .cmd-palette-search-icon{color:var(--text-light);flex-shrink:0}
    .cmd-palette-input-wrap input{flex:1;border:none;outline:none;font-size:16px;font-family:inherit;background:transparent;color:var(--text)}
    .cmd-palette-input-wrap input::placeholder{color:var(--text-light)}
    .cmd-palette-kbd{display:inline-flex;align-items:center;padding:2px 6px;border-radius:4px;font-size:10px;font-weight:600;font-family:inherit;color:var(--text-light);background:var(--bg);border:1px solid var(--border);flex-shrink:0}
    .cmd-palette-results{flex:1;overflow-y:auto;padding:6px 0}
    .cmd-palette-group-label{padding:6px 16px 4px;font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.5px;color:var(--text-light)}
    .cmd-palette-item{display:flex;align-items:center;gap:10px;padding:8px 16px;cursor:pointer;transition:background .1s}
    .cmd-palette-item:hover,.cmd-palette-item.is-active{background:var(--green-light)}
    .cmd-palette-item.is-active{color:var(--green-dark)}
    .cmd-palette-item-icon{font-size:18px;width:28px;text-align:center;flex-shrink:0}
    .cmd-palette-item-text{flex:1;min-width:0}
    .cmd-palette-item-title{font-size:14px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
    .cmd-palette-item-title mark{background:#bbf7d0;color:inherit;border-radius:2px;padding:0 1px}
    .cmd-palette-item-sub{font-size:11px;color:var(--text-light);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
    .cmd-palette-empty{padding:24px 16px;text-align:center;font-size:13px;color:var(--text-light)}
    .cmd-palette-footer{display:flex;gap:16px;padding:8px 16px;border-top:1px solid var(--border);font-size:11px;color:var(--text-light)}
    .cmd-palette-footer kbd{display:inline-flex;padding:1px 4px;border-radius:3px;font-size:9px;font-weight:700;background:var(--bg);border:1px solid var(--border);margin:0 2px;font-family:inherit}
    .cmd-palette-trigger{display:none;align-items:center;justify-content:center;width:36px;height:36px;border-radius:50%;background:var(--bg);border:1px solid var(--border);font-size:15px;cursor:pointer;flex-shrink:0;transition:background .15s}
    .cmd-palette-trigger:hover{background:var(--border)}
    @media(max-width:768px){
      .cmd-palette-trigger.admin-visible{display:flex}
      .cmd-palette-footer kbd{display:none}
      .cmd-palette-modal{width:96vw;max-height:80vh}
      .cmd-palette-overlay{padding-top:10vh}
    }
    html[data-theme="dark"] .cmd-palette-modal{background:var(--dm-card);box-shadow:0 16px 48px rgba(0,0,0,.5),0 0 0 1px var(--dm-border)}
    html[data-theme="dark"] .cmd-palette-item:hover,html[data-theme="dark"] .cmd-palette-item.is-active{background:var(--dm-hover)}
    html[data-theme="dark"] .cmd-palette-item-title mark{background:var(--dm-gm);color:var(--dm-text)}

    /* ── Corporate Contracts ─────────────────────────────── */
    .corp-summary-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:10px;margin-bottom:16px}
    .corp-stat-card{background:var(--card);border:1px solid var(--border);border-radius:var(--radius-sm);padding:12px;text-align:center}
    .corp-stat-val{font-size:22px;font-weight:800;color:var(--green);font-variant-numeric:tabular-nums}
    .corp-stat-lbl{font-size:11px;color:var(--text-light);text-transform:uppercase;letter-spacing:.3px;font-weight:600;margin-top:2px}
    .corp-contract-card{background:var(--card);border:1px solid var(--border);border-radius:var(--radius);padding:16px;margin-bottom:10px;cursor:pointer;transition:box-shadow .15s,border-color .15s}
    .corp-contract-card:hover{box-shadow:0 4px 12px rgba(0,0,0,.08);border-color:var(--green)}
    .corp-contract-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:6px}
    .corp-contract-name{font-family:'Baloo 2',sans-serif;font-weight:700;font-size:17px}
    .corp-status-badge{font-size:11px;font-weight:700;padding:3px 10px;border-radius:99px}
    .corp-status-active{background:#dcfce7;color:#166534}
    .corp-status-completed{background:#dbeafe;color:#1e40af}
    .corp-status-archived{background:var(--border);color:var(--text-light)}
    .corp-contract-meta{display:flex;flex-wrap:wrap;gap:12px;font-size:13px;color:var(--text-light)}
    .corp-detail-tabs{display:flex;gap:0;background:var(--card);border:1px solid var(--border);border-radius:var(--radius-sm);overflow:hidden;margin-bottom:12px}
    .corp-detail-tab{flex:1;padding:10px;text-align:center;font-size:13px;font-weight:600;cursor:pointer;border:none;background:transparent;transition:all .15s}
    .corp-detail-tab.active{background:var(--green);color:#fff}
    .corp-event-row{display:flex;align-items:center;gap:10px;padding:12px;border-bottom:1px solid var(--border);transition:background .1s}
    .corp-event-row:last-child{border-bottom:none}
    .corp-event-row:hover{background:#f8fafc}
    .corp-event-check{width:18px;height:18px;accent-color:var(--green);cursor:pointer;flex-shrink:0}
    .corp-event-date{font-size:13px;font-weight:700;min-width:80px;flex-shrink:0}
    .corp-event-city{font-size:13px;font-weight:600;min-width:70px;flex-shrink:0}
    .corp-event-info{flex:1;font-size:12px;color:var(--text-light);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
    .corp-event-amount{font-size:13px;font-weight:700;text-align:right;min-width:70px;flex-shrink:0}
    .corp-invoiced-badge{font-size:10px;font-weight:700;padding:2px 8px;border-radius:99px;background:#dbeafe;color:#1e40af}
    .corp-city-card{background:var(--card);border:1px solid var(--border);border-radius:var(--radius);margin-bottom:10px;overflow:hidden}
    .corp-city-header{display:flex;align-items:center;justify-content:space-between;padding:14px 16px;cursor:pointer;transition:background .1s}
    .corp-city-header:hover{background:#f8fafc}
    .corp-city-name{font-weight:700;font-size:15px}
    .corp-city-stats{display:flex;gap:12px;font-size:12px;color:var(--text-light)}
    .corp-filter-bar{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:12px;align-items:center}
    .corp-filter-select{padding:7px 12px;border:1.5px solid var(--border);border-radius:var(--radius-sm);font-size:13px;font-family:inherit;background:var(--card);cursor:pointer}
    .corp-filter-select:focus{border-color:var(--green);outline:none}
    .corp-live-summary{background:#f0fdf4;border:1.5px solid #bbf7d0;border-radius:var(--radius-sm);padding:14px;margin-top:16px;font-size:13px;line-height:1.6}
    .corp-live-row{display:flex;justify-content:space-between;align-items:center}
    .corp-live-total{border-top:1.5px solid #86efac;padding-top:8px;margin-top:8px;font-weight:700}
    .corp-live-profit{font-size:15px;font-weight:800;color:var(--green)}
    .corp-live-loss{font-size:15px;font-weight:800;color:#ef4444}
    .corp-mini-chart{display:flex;align-items:flex-end;gap:3px;height:60px;margin-top:8px}
    .corp-mini-bar{flex:1;border-radius:3px 3px 0 0;min-width:8px;transition:height .3s}
    @media(max-width:600px){
      .corp-event-row{flex-wrap:wrap;gap:6px}
      .corp-event-info{min-width:100%;order:10}
      .corp-summary-grid{grid-template-columns:repeat(2,1fr)}
    }
    html[data-theme="dark"] .corp-contract-card{background:var(--dm-card);border-color:var(--dm-border)}
    html[data-theme="dark"] .corp-contract-card:hover{border-color:var(--green)}
    html[data-theme="dark"] .corp-stat-card{background:var(--dm-card);border-color:var(--dm-border)}
    html[data-theme="dark"] .corp-event-row:hover{background:var(--dm-hover)}
    html[data-theme="dark"] .corp-city-header:hover{background:var(--dm-hover)}
    html[data-theme="dark"] .corp-city-card{background:var(--dm-card);border-color:var(--dm-border)}
    html[data-theme="dark"] .corp-live-summary{background:rgba(22,163,74,.1);border-color:rgba(22,163,74,.3)}
    html[data-theme="dark"] .corp-detail-tabs{background:var(--dm-card);border-color:var(--dm-border)}

    /* ── Project Management (PM) ─────────────────────────── */
    .pm-board{display:flex;gap:10px;overflow-x:auto;-webkit-overflow-scrolling:touch;padding-bottom:8px;scrollbar-width:thin}
    .pm-col{min-width:260px;max-width:320px;flex:1;background:var(--bg);border-radius:var(--radius);border:1px solid var(--border);display:flex;flex-direction:column}
    .pm-col-header{padding:10px 12px;font-weight:700;font-size:13px;text-transform:uppercase;letter-spacing:.3px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--border)}
    .pm-col-count{background:var(--border);color:var(--text-light);font-size:11px;padding:1px 7px;border-radius:10px;font-weight:700}
    .pm-col-body{padding:8px;flex:1;overflow-y:auto;max-height:60vh}
    .pm-task-card{background:var(--card);border:1px solid var(--border);border-radius:var(--radius-sm);padding:10px 12px;margin-bottom:6px;cursor:pointer;transition:box-shadow .15s,border-color .15s}
    .pm-task-card:hover{box-shadow:0 2px 8px rgba(0,0,0,.06);border-color:var(--green)}
    .pm-task-title{font-size:13px;font-weight:600;margin-bottom:4px;word-break:break-word}
    .pm-task-meta{display:flex;flex-wrap:wrap;gap:6px;align-items:center;font-size:11px;color:var(--text-light)}
    .pm-priority-dot{width:8px;height:8px;border-radius:50%;flex-shrink:0}
    .pm-priority-low{background:#94a3b8}
    .pm-priority-medium{background:#f59e0b}
    .pm-priority-high{background:#f97316}
    .pm-priority-critical{background:#ef4444}
    .pm-tag{font-size:10px;padding:1px 6px;border-radius:4px;background:#e2e8f0;color:var(--text-light);font-weight:600}
    .pm-avatar-stack{display:flex}
    .pm-avatar-mini{width:22px;height:22px;border-radius:50%;background:var(--green);color:#fff;display:flex;align-items:center;justify-content:center;font-size:9px;font-weight:700;margin-left:-6px;border:2px solid var(--card)}
    .pm-avatar-mini:first-child{margin-left:0}
    .pm-checklist-bar{height:3px;border-radius:2px;background:var(--border);overflow:hidden;margin-top:4px}
    .pm-checklist-fill{height:100%;background:var(--green);border-radius:2px;transition:width .2s}
    .pm-project-card{background:var(--card);border:1px solid var(--border);border-radius:var(--radius);padding:14px 16px;margin-bottom:10px;cursor:pointer;transition:box-shadow .15s,border-color .15s;position:relative;overflow:hidden}
    .pm-project-card:hover{box-shadow:0 4px 12px rgba(0,0,0,.08);border-color:var(--green)}
    .pm-project-card::before{content:'';position:absolute;top:0;left:0;width:4px;height:100%}
    .pm-project-head{display:flex;align-items:center;gap:10px;margin-bottom:6px}
    .pm-project-title{font-family:'Baloo 2',sans-serif;font-weight:700;font-size:16px;flex:1}
    .pm-status-pill{font-size:10px;font-weight:700;padding:2px 8px;border-radius:99px;text-transform:uppercase;letter-spacing:.3px}
    .pm-s-planning{background:#e0e7ff;color:#4338ca}
    .pm-s-active{background:#dcfce7;color:#166534}
    .pm-s-paused{background:#fef3c7;color:#92400e}
    .pm-s-done{background:#dbeafe;color:#1e40af}
    .pm-s-archived{background:#f1f5f9;color:#64748b}
    .pm-project-stats{display:flex;flex-wrap:wrap;gap:12px;font-size:12px;color:var(--text-light)}
    .pm-progress-bar{height:4px;border-radius:2px;background:var(--border);overflow:hidden;margin-top:8px}
    .pm-progress-fill{height:100%;background:var(--green);border-radius:2px;transition:width .3s}
    .pm-filter-bar{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:12px;align-items:center}
    .pm-filter-chip{padding:6px 12px;border:1.5px solid var(--border);border-radius:20px;font-size:12px;font-weight:600;cursor:pointer;background:var(--card);transition:all .15s}
    .pm-filter-chip.active{border-color:var(--green);background:#f0fdf4;color:var(--green)}
    .pm-detail-header{padding:0 0 12px;border-bottom:1px solid var(--border);margin-bottom:12px}
    .pm-tab-bar{display:flex;gap:0;border-bottom:1.5px solid var(--border);margin-bottom:12px}
    .pm-tab{padding:10px 16px;font-size:13px;font-weight:600;cursor:pointer;border-bottom:2px solid transparent;transition:all .15s;color:var(--text-light)}
    .pm-tab.active{color:var(--green);border-bottom-color:var(--green)}
    .pm-notes-list{display:flex;flex-direction:column;gap:8px}
    .pm-note-card{background:var(--card);border:1px solid var(--border);border-radius:var(--radius-sm);padding:12px}
    .pm-note-pinned{border-color:#f59e0b;background:#fffbeb}
    .pm-linked-card{background:#f0fdf4;border:1.5px solid #bbf7d0;border-radius:var(--radius-sm);padding:12px;margin-bottom:8px}
    .pm-linked-title{font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.3px;color:var(--green);margin-bottom:6px}
    .pm-linked-stat{display:flex;justify-content:space-between;font-size:13px;padding:3px 0}
    @media(max-width:600px){
      .pm-board{flex-direction:column}
      .pm-col{min-width:100%;max-width:100%}
      .pm-col-body{max-height:none}
      .pm-project-stats{gap:8px}
    }
    html[data-theme="dark"] .pm-project-card{background:var(--dm-card);border-color:var(--dm-border)}
    html[data-theme="dark"] .pm-task-card{background:var(--dm-card);border-color:var(--dm-border)}
    html[data-theme="dark"] .pm-col{background:var(--dm-bg);border-color:var(--dm-border)}
    html[data-theme="dark"] .pm-note-card{background:var(--dm-card);border-color:var(--dm-border)}
    html[data-theme="dark"] .pm-linked-card{background:rgba(22,163,74,.1);border-color:rgba(22,163,74,.3)}
    html[data-theme="dark"] .pm-filter-chip{background:var(--dm-card);border-color:var(--dm-border)}
    html[data-theme="dark"] .pm-filter-chip.active{background:rgba(22,163,74,.15)}
    html[data-theme="dark"] .pm-note-pinned{border-color:rgba(245,158,11,.6);background:rgba(245,158,11,.1)}
    html[data-theme="dark"] .pm-tag{background:rgba(148,163,184,.2)}
    html[data-theme="dark"] .pm-s-planning{background:rgba(224,231,255,.15);color:#a5b4fc}
    html[data-theme="dark"] .pm-s-active{background:rgba(220,252,231,.1);color:#86efac}
    html[data-theme="dark"] .pm-s-paused{background:rgba(254,243,199,.1);color:#fcd34d}
    html[data-theme="dark"] .pm-s-done{background:rgba(219,234,254,.1);color:#60a5fa}
    html[data-theme="dark"] .pm-s-archived{background:rgba(241,245,249,.05);color:#cbd5e1}

    /* ═══ PŘÍPRAVKA — Parent Board & Child Attendance ═════════════════ */
    /* Nástěnka cards */
    .pb-card{background:var(--card);border-radius:var(--radius);border:1px solid var(--border);margin-bottom:14px;overflow:hidden}
    .pb-card-header{padding:14px 16px 10px;display:flex;align-items:flex-start;gap:10px}
    .pb-card-avatar{width:38px;height:38px;border-radius:50%;background:var(--green);color:#fff;display:flex;align-items:center;justify-content:center;font-size:15px;font-weight:700;flex-shrink:0}
    .pb-card-meta{flex:1;min-width:0}
    .pb-card-author{font-size:13px;font-weight:700;color:var(--text)}
    .pb-card-date{font-size:11px;color:var(--text-light);margin-top:1px}
    .pb-card-pin{font-size:11px;color:#c2410c;font-weight:700;background:#fff7ed;border-radius:4px;padding:1px 6px;flex-shrink:0}
    .pb-card-title{font-size:15px;font-weight:700;color:var(--text);padding:0 16px 6px}
    .pb-card-body{font-size:14px;color:var(--text);padding:0 16px 10px;line-height:1.55;white-space:pre-wrap;word-break:break-word}
    .pb-photo-grid{display:grid;gap:3px;padding:0 0 10px;margin:0 16px}
    .pb-photo-grid.cols-1{grid-template-columns:1fr}
    .pb-photo-grid.cols-2{grid-template-columns:1fr 1fr}
    .pb-photo-grid.cols-2-2{grid-template-columns:1fr 1fr;grid-template-rows:auto auto}
    .pb-photo-item{border-radius:8px;overflow:hidden;position:relative;aspect-ratio:1}
    .pb-photo-item img{width:100%;height:100%;object-fit:cover;display:block;cursor:pointer}
    .pb-photo-more{position:absolute;inset:0;background:rgba(0,0,0,.55);display:flex;align-items:center;justify-content:center;font-size:22px;font-weight:800;color:#fff;cursor:pointer}
    .pb-view-count{display:flex;align-items:center;gap:5px;padding:6px 16px;font-size:12px;color:var(--text-light);border-top:1px solid var(--border)}
    /* Poll inside card */
    .pb-poll-q{font-size:14px;font-weight:700;color:var(--text);padding:4px 16px 10px}
    .pb-poll-opt{display:flex;flex-direction:column;padding:0 16px;gap:7px;margin-bottom:12px}
    .pb-poll-btn{border:1.5px solid var(--border);background:var(--bg);border-radius:var(--radius-sm);padding:10px 14px;font-size:14px;font-weight:600;color:var(--text);cursor:pointer;text-align:left;transition:all .15s;min-height:44px}
    .pb-poll-btn:active{transform:scale(.98)}
    .pb-poll-bar-wrap{border-radius:var(--radius-sm);overflow:hidden;position:relative;background:var(--bg);border:1px solid var(--border);padding:9px 12px}
    .pb-poll-bar-fill{position:absolute;inset:0;background:var(--green-light,#dcfce7);transition:width .4s}
    .pb-poll-bar-text{position:relative;z-index:1;font-size:14px;font-weight:600;color:var(--text);display:flex;justify-content:space-between}
    .pb-poll-bar-pct{font-size:12px;font-weight:700;color:var(--green)}
    .pb-poll-voted{font-size:11px;color:var(--text-light);padding:4px 16px 8px}
    .pb-poll-deadline{font-size:11px;color:var(--text-light);padding:0 16px 8px}
    /* Attendance status badges */
    .ca-badge{display:inline-flex;align-items:center;gap:4px;font-size:12px;font-weight:700;border-radius:20px;padding:3px 10px}
    .ca-badge-confirmed{background:#dcfce7;color:#166534}
    .ca-badge-absent{background:#fee2e2;color:#991b1b}
    .ca-badge-unknown{background:#f1f5f9;color:#475569}
    /* Parent attendance confirm cards */
    .ca-upcoming-card{background:var(--card);border-radius:var(--radius);border:1px solid var(--border);padding:16px;margin-bottom:14px}
    .ca-upcoming-title{font-size:15px;font-weight:700;color:var(--text);margin-bottom:4px}
    .ca-upcoming-meta{font-size:12px;color:var(--text-light);margin-bottom:12px}
    .ca-btn-row{display:flex;gap:8px;margin-bottom:10px}
    .ca-btn{flex:1;min-height:52px;border-radius:var(--radius-sm);border:2px solid transparent;font-size:14px;font-weight:700;cursor:pointer;transition:all .15s;display:flex;align-items:center;justify-content:center;gap:6px}
    .ca-btn-yes{background:#dcfce7;border-color:#86efac;color:#166534}
    .ca-btn-yes.active{background:#22c55e;border-color:#16a34a;color:#fff}
    .ca-btn-no{background:#fee2e2;border-color:#fca5a5;color:#991b1b}
    .ca-btn-no.active{background:#ef4444;border-color:#dc2626;color:#fff}
    /* Coach kids grid */
    .ca-summary-bar{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:16px}
    .ca-summary-chip{display:flex;align-items:center;gap:5px;background:var(--card);border:1px solid var(--border);border-radius:20px;padding:6px 12px;font-size:13px;font-weight:700}
    .ca-kids-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(80px,1fr));gap:10px;margin-bottom:20px}
    .ca-kid-card{background:var(--card);border-radius:var(--radius);border:1px solid var(--border);padding:10px 6px;text-align:center;cursor:pointer;transition:all .15s}
    .ca-kid-card:active{transform:scale(.95)}
    .ca-kid-avatar{width:56px;height:56px;border-radius:50%;background:var(--green);color:#fff;font-size:20px;font-weight:700;display:flex;align-items:center;justify-content:center;margin:0 auto 6px}
    .ca-kid-name{font-size:11px;font-weight:700;color:var(--text);line-height:1.2;word-break:break-word}
    .ca-kid-status{margin-top:4px}
    .kid-remove-btn:hover{background:#fca5a5!important;color:#fff!important}
    /* Nastevnka FAB */
    .pb-fab-wrap{position:fixed;bottom:92px;right:16px;z-index:120;display:flex;flex-direction:column-reverse;align-items:flex-end;gap:8px}
    .pb-fab-main{width:52px;height:52px;border-radius:50%;background:var(--green);color:#fff;border:none;font-size:22px;cursor:pointer;box-shadow:0 4px 16px rgba(0,0,0,.18);display:flex;align-items:center;justify-content:center;transition:transform .2s}
    .pb-fab-main:active{transform:scale(.92)}
    .pb-fab-item{display:flex;align-items:center;gap:10px;opacity:0;transform:translateY(8px) scale(.9);pointer-events:none;transition:all .2s}
    .pb-fab-item.open{opacity:1;transform:none;pointer-events:auto}
    .pb-fab-item-btn{background:var(--card);border:1px solid var(--border);border-radius:22px;padding:8px 16px;font-size:14px;font-weight:700;cursor:pointer;white-space:nowrap;box-shadow:0 2px 8px rgba(0,0,0,.12);color:var(--text)}
    .pb-fab-label{font-size:13px;font-weight:700;background:rgba(0,0,0,.7);color:#fff;border-radius:6px;padding:4px 8px;white-space:nowrap}
    /* Coach overview section */
    .pb-section-title{font-size:16px;font-weight:800;color:var(--text);padding:16px 16px 10px;font-family:'Baloo 2',sans-serif}
    .ca-action-row{display:flex;gap:8px;flex-wrap:wrap;padding:0 0 16px}
    html[data-theme="dark"] .pb-poll-bar-fill{background:rgba(34,197,94,.15)}
    html[data-theme="dark"] .ca-badge-confirmed{background:rgba(34,197,94,.15);color:#86efac}
    html[data-theme="dark"] .ca-badge-absent{background:rgba(239,68,68,.15);color:#fca5a5}
    html[data-theme="dark"] .ca-badge-unknown{background:rgba(148,163,184,.1);color:#94a3b8}
    html[data-theme="dark"] .ca-btn-yes{background:rgba(34,197,94,.1);border-color:rgba(34,197,94,.3);color:#86efac}
    html[data-theme="dark"] .ca-btn-yes.active{background:#16a34a;border-color:#15803d;color:#fff}
    html[data-theme="dark"] .ca-btn-no{background:rgba(239,68,68,.1);border-color:rgba(239,68,68,.3);color:#fca5a5}
    html[data-theme="dark"] .ca-btn-no.active{background:#dc2626;border-color:#b91c1c;color:#fff}

    /* ═══════════════════════════════════════════════════════════════════
       RITUAL SYSTEM — Denní rituál & Produktivita
       ═══════════════════════════════════════════════════════════════════ */
    .ritual-dashboard-widget{background:var(--card);border-radius:var(--radius);box-shadow:var(--shadow);padding:16px;margin:12px 0}
    .ritual-widget-header{display:flex;align-items:center;gap:8px;margin-bottom:10px}
    .ritual-widget-header span:first-child{font-weight:700;font-size:15px}
    .ritual-widget-header .ritual-progress-badge{background:var(--green);color:#fff;font-size:12px;font-weight:700;padding:2px 10px;border-radius:20px;margin-left:auto}
    .ritual-widget-header button{background:none;border:none;color:var(--green);font-weight:600;font-size:13px;cursor:pointer;white-space:nowrap}
    .ritual-progress-bar{height:6px;background:var(--border);border-radius:3px;overflow:hidden;margin-bottom:12px}
    .ritual-progress-fill{height:100%;background:linear-gradient(90deg,var(--green),#4ade80);border-radius:3px;transition:width .5s ease}
    .ritual-quick-checks{display:flex;flex-direction:column;gap:6px}
    .ritual-quick-item{display:flex;align-items:center;gap:10px;padding:6px 8px;border-radius:var(--radius-sm);cursor:pointer;transition:background .15s}
    .ritual-quick-item:hover{background:rgba(22,163,74,.06)}
    .ritual-quick-item input[type="checkbox"]{width:18px;height:18px;accent-color:var(--green);cursor:pointer;flex-shrink:0}
    .ritual-quick-item.completed span{opacity:.5;text-decoration:line-through}
    .ritual-quick-item .rqi-time{font-size:11px;color:var(--text-light);margin-left:auto;white-space:nowrap}
    .btn-close-day{width:100%;padding:12px;border:none;border-radius:var(--radius);background:linear-gradient(135deg,#dc2626,#ea580c);color:#fff;font-weight:700;font-size:14px;cursor:pointer;margin-top:12px;transition:transform .15s,box-shadow .15s}
    .btn-close-day:hover{transform:translateY(-1px);box-shadow:0 4px 12px rgba(220,38,38,.3)}
    .btn-close-day.pulse{animation:ritualPulse 2s infinite}
    .btn-close-day:disabled{opacity:.5;cursor:not-allowed;animation:none}
    @keyframes ritualPulse{0%,100%{box-shadow:0 0 0 0 rgba(220,38,38,.4)}50%{box-shadow:0 0 0 8px rgba(220,38,38,0)}}

    /* Ritual full section — rows on desktop, columns on mobile */
    .ritual-section{display:flex;flex-direction:column;gap:16px;padding:12px;max-width:800px;margin:0 auto}
    .ritual-panel{background:var(--card);border-radius:var(--radius);box-shadow:var(--shadow);padding:16px;min-width:0}
    .ritual-panel-title{font-weight:700;font-size:15px;margin-bottom:12px;display:flex;align-items:center;gap:8px}
    .ritual-tabs{display:flex;gap:4px;margin-bottom:14px;background:var(--border);border-radius:var(--radius-sm);padding:3px}
    .ritual-tab{flex:1;text-align:center;padding:6px 10px;border-radius:6px;font-size:13px;font-weight:600;cursor:pointer;transition:background .15s,color .15s;color:var(--text-light)}
    .ritual-tab.active{background:var(--card);color:var(--text);box-shadow:var(--shadow)}
    .ritual-checklist-item{display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:var(--radius-sm);transition:background .15s;cursor:pointer}
    .ritual-checklist-item:hover{background:rgba(22,163,74,.06)}
    .ritual-checklist-item.completed{opacity:.55}
    .ritual-checklist-item.completed .rcl-label{text-decoration:line-through}
    .ritual-checklist-item input[type="checkbox"]{width:20px;height:20px;accent-color:var(--green);cursor:pointer;flex-shrink:0}
    .rcl-label{font-size:14px;flex:1;min-width:0}
    .rcl-time{font-size:11px;color:var(--text-light);white-space:nowrap}
    .rcl-duration{font-size:10px;background:var(--green-light);color:var(--green-dark);padding:1px 6px;border-radius:10px;white-space:nowrap}
    .ritual-work-block{background:var(--card);border-left:3px solid var(--green);border-radius:var(--radius-sm);padding:12px;margin-bottom:10px;box-shadow:0 1px 3px rgba(0,0,0,.05)}
    .ritual-work-block .rwb-header{display:flex;align-items:center;gap:8px;margin-bottom:8px}
    .ritual-work-block .rwb-time{font-size:12px;color:var(--text-light)}
    .ritual-work-block .rwb-label{font-weight:600;font-size:14px;flex:1}
    .ritual-work-block input[type="text"]{width:100%;padding:8px 10px;border:1px solid var(--border);border-radius:var(--radius-sm);font-size:13px;background:var(--bg);color:var(--text)}
    .ritual-work-block input[type="checkbox"]{width:18px;height:18px;accent-color:var(--green);cursor:pointer}
    .ritual-textarea{width:100%;min-height:60px;padding:10px;border:1px solid var(--border);border-radius:var(--radius-sm);font-size:13px;font-family:inherit;resize:vertical;background:var(--bg);color:var(--text)}
    .ritual-gratitude-input{width:100%;padding:8px 10px;border:1px solid var(--border);border-radius:var(--radius-sm);font-size:13px;margin-bottom:6px;background:var(--bg);color:var(--text)}
    .ritual-circle-progress{display:flex;flex-direction:column;align-items:center;margin-bottom:16px}
    .ritual-circle-progress svg{width:120px;height:120px;transform:rotate(-90deg)}
    .ritual-circle-progress .rcp-bg{fill:none;stroke:var(--border);stroke-width:8}
    .ritual-circle-progress .rcp-fill{fill:none;stroke:var(--green);stroke-width:8;stroke-linecap:round;transition:stroke-dashoffset .6s ease}
    .ritual-circle-progress .rcp-text{font-size:28px;font-weight:700;fill:var(--text);text-anchor:middle;dominant-baseline:central;transform:rotate(90deg);transform-origin:center}
    .ritual-history-row{display:flex;align-items:center;gap:8px;padding:6px 0;border-bottom:1px solid var(--border);font-size:13px}
    .ritual-history-row:last-child{border-bottom:none}
    .ritual-history-bar{flex:1;height:6px;background:var(--border);border-radius:3px;overflow:hidden}
    .ritual-history-bar-fill{height:100%;background:var(--green);border-radius:3px;transition:width .3s}
    .ritual-history-pct{font-weight:600;min-width:36px;text-align:right}
    .ritual-add-btn{display:inline-flex;align-items:center;gap:4px;padding:6px 12px;border:1px dashed var(--border);border-radius:var(--radius-sm);background:none;color:var(--text-light);font-size:13px;cursor:pointer;transition:border-color .15s,color .15s}
    .ritual-add-btn:hover{border-color:var(--green);color:var(--green)}
    .ritual-sync-btn{display:inline-flex;align-items:center;gap:6px;padding:8px 14px;border:1px solid var(--green);border-radius:var(--radius-sm);background:rgba(22,163,74,.08);color:var(--green);font-size:13px;font-weight:600;cursor:pointer;transition:background .15s}
    .ritual-sync-btn:hover{background:rgba(22,163,74,.15)}

    /* Template editor */
    .ritual-tpl-item{display:flex;align-items:center;gap:8px;padding:8px;border:1px solid var(--border);border-radius:var(--radius-sm);margin-bottom:6px;background:var(--card);cursor:grab}
    .ritual-tpl-item.dragging{opacity:.4}
    .ritual-tpl-item input{flex:1;padding:4px 8px;border:1px solid var(--border);border-radius:4px;font-size:13px;background:var(--bg);color:var(--text)}
    .ritual-tpl-item select{padding:4px;border:1px solid var(--border);border-radius:4px;font-size:12px;background:var(--bg);color:var(--text)}
    .ritual-tpl-item .tpl-delete{background:none;border:none;color:#ef4444;cursor:pointer;font-size:16px;padding:4px}
    .ritual-tpl-item .tpl-drag{color:var(--text-light);cursor:grab;font-size:14px}
    .ritual-settings-toggle{display:flex;align-items:center;justify-content:space-between;padding:10px 0;border-bottom:1px solid var(--border)}
    .ritual-settings-toggle label{font-size:14px;font-weight:500}
    .ritual-toggle-switch{position:relative;width:44px;height:24px;flex-shrink:0}
    .ritual-toggle-switch input{opacity:0;width:0;height:0}
    .ritual-toggle-switch .slider{position:absolute;cursor:pointer;inset:0;background:var(--border);border-radius:24px;transition:background .2s}
    .ritual-toggle-switch .slider:before{content:'';position:absolute;width:18px;height:18px;left:3px;bottom:3px;background:#fff;border-radius:50%;transition:transform .2s}
    .ritual-toggle-switch input:checked+.slider{background:var(--green)}
    .ritual-toggle-switch input:checked+.slider:before{transform:translateX(20px)}

    /* Mobile */
    @media(max-width:768px){
      .ritual-section{gap:12px;padding:8px}
      .ritual-panel{padding:12px}
    }

    /* Dark mode */
    html[data-theme="dark"] .ritual-dashboard-widget{background:var(--dm-card);box-shadow:none;border:1px solid var(--dm-border)}
    html[data-theme="dark"] .ritual-panel{background:var(--dm-card);box-shadow:none;border:1px solid var(--dm-border)}
    html[data-theme="dark"] .ritual-progress-bar{background:var(--dm-border)}
    html[data-theme="dark"] .ritual-tabs{background:var(--dm-border)}
    html[data-theme="dark"] .ritual-tab.active{background:var(--dm-card)}
    html[data-theme="dark"] .rcl-duration{background:rgba(22,163,74,.15);color:#86efac}
    html[data-theme="dark"] .ritual-work-block{background:var(--dm-card);border-left-color:var(--green);box-shadow:none}
    html[data-theme="dark"] .ritual-work-block input[type="text"],
    html[data-theme="dark"] .ritual-textarea,
    html[data-theme="dark"] .ritual-gratitude-input{background:var(--dm-input);border-color:var(--dm-border);color:var(--dm-text)}
    html[data-theme="dark"] .ritual-quick-item:hover,
    html[data-theme="dark"] .ritual-checklist-item:hover{background:rgba(34,197,94,.08)}
    html[data-theme="dark"] .ritual-tpl-item{background:var(--dm-card);border-color:var(--dm-border)}
    html[data-theme="dark"] .ritual-tpl-item input,
    html[data-theme="dark"] .ritual-tpl-item select{background:var(--dm-input);border-color:var(--dm-border);color:var(--dm-text)}
    html[data-theme="dark"] .ritual-history-bar{background:var(--dm-border)}
    html[data-theme="dark"] .ritual-add-btn{border-color:var(--dm-border);color:var(--dm-muted)}

    /* Focus blocks */
    .ritual-focus-block{border-radius:10px;border:1px solid var(--border);margin-bottom:8px;overflow:hidden;transition:all .2s;background:var(--card)}
    .ritual-focus-block.completed{opacity:.65}
    .ritual-focus-block.fixed-block{background:#f8f9fa;cursor:default}
    .ritual-focus-block.hard-boundary{border:2px solid #27AE60;background:#EAFAF6}
    .rfb-header{padding:10px 14px;display:flex;align-items:center;gap:8px;border-bottom:1px solid var(--border)}
    .rfb-time{font-size:11px;color:var(--text-light);white-space:nowrap;font-weight:600}
    .rfb-label{font-weight:600;font-size:13px;flex:1;min-width:0}
    .rfb-lock{font-size:12px;color:var(--text-light)}
    .rfb-body{padding:8px 14px 10px;display:flex;flex-direction:column;gap:6px}
    .ritual-category-badge{font-size:11px;font-weight:700;padding:2px 8px;border-radius:20px;white-space:nowrap}
    .ritual-category-select{border:1px solid var(--border);background:var(--bg);color:var(--text);font-size:12px;padding:3px 6px;border-radius:6px;cursor:pointer}
    .rfb-note-input{width:100%;padding:6px 8px;border:1px solid var(--border);border-radius:6px;font-size:12px;background:var(--bg);color:var(--text)}
    .ritual-hard-label{font-size:10px;font-weight:700;color:#27AE60;letter-spacing:.5px;text-transform:uppercase}

    /* Energy dots */
    .ritual-energy-rating{display:flex;align-items:center;gap:4px;margin-top:2px;flex-wrap:wrap}
    .energy-label{font-size:11px;color:var(--text-light);white-space:nowrap}
    .energy-dot{width:18px;height:18px;border-radius:50%;border:none;cursor:pointer;font-size:15px;color:#ddd;background:none;padding:0;line-height:1;transition:transform .1s,color .1s}
    .energy-dot:hover{transform:scale(1.2)}
    .energy-dot.active{transform:scale(1.25)}
    .energy-dot[data-value="1"].active{color:#E74C3C}
    .energy-dot[data-value="2"].active{color:#E67E22}
    .energy-dot[data-value="3"].active{color:#F1C40F}
    .energy-dot[data-value="4"].active{color:#2ECC71}
    .energy-dot[data-value="5"].active{color:#27AE60}
    .energy-avg-label{font-size:12px;font-weight:600;color:var(--text-light);margin-left:4px}

    /* Weekly tab */
    .ritual-week-tab{display:grid;grid-template-columns:1fr 200px;gap:16px;align-items:start}
    .ritual-chart-wrap{overflow:hidden}
    .ritual-stacked-chart{width:100%;height:180px;display:block}
    .ritual-pie-chart-wrap{display:flex;flex-direction:column;gap:10px;align-items:center}
    .ritual-pie-legend{font-size:11px;display:flex;flex-direction:column;gap:3px;width:100%}
    .ritual-pie-legend-item{display:flex;align-items:center;gap:5px}
    .ritual-pie-dot{width:10px;height:10px;border-radius:50%;flex-shrink:0}
    .ritual-target-alerts{margin-top:12px;display:flex;flex-direction:column;gap:5px}
    .ritual-alert{padding:7px 12px;border-radius:8px;font-size:12px;display:flex;align-items:center;gap:7px;font-weight:500}
    .ritual-alert.warn{background:#FFF3CD;color:#856404}
    .ritual-alert.danger{background:#FDECEA;color:#842029}
    .ritual-alert.info{background:#E8F4FD;color:#0C5460}
    .ritual-alert.success{background:#D4EDDA;color:#155724}
    .ritual-energy-line{margin-top:12px}
    .ritual-energy-line-title{font-size:12px;font-weight:600;color:var(--text-light);margin-bottom:4px}

    /* Day history cards */
    .ritual-history-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:8px;margin-top:8px}
    .ritual-day-card{border-radius:10px;border:1px solid var(--border);padding:10px;cursor:pointer;transition:all .2s;background:var(--card)}
    .ritual-day-card:hover{box-shadow:0 3px 12px rgba(0,0,0,.1);transform:translateY(-1px)}
    .ritual-day-card.today{border:2px solid var(--green)}
    .day-card-header{display:flex;align-items:center;justify-content:space-between;gap:4px;margin-bottom:5px}
    .day-name{font-size:11px;font-weight:700;color:var(--text)}
    .day-cat-badge{font-size:9px;font-weight:700;padding:1px 5px;border-radius:10px}
    .day-card-stats{font-size:10px;color:var(--text-light);margin-bottom:4px;line-height:1.5}
    .day-card-blocks{display:flex;gap:2px;flex-wrap:wrap}
    .day-block-dot{width:14px;height:14px;border-radius:3px;background:#eee}

    /* Buffer banner */
    .ritual-buffer-suggestion{background:#EEF5FF;border:1px solid #4A90D9;border-radius:10px;padding:10px 14px;margin-bottom:10px;display:flex;align-items:center;gap:10px;font-size:13px;flex-wrap:wrap}
    .ritual-buffer-suggestion button{padding:4px 10px;border-radius:6px;border:none;cursor:pointer;font-size:12px;font-weight:600}
    .ritual-buffer-suggestion .buf-add{background:#4A90D9;color:#fff}
    .ritual-buffer-suggestion .buf-dismiss{background:none;color:#4A90D9}

    /* Weekly review modal */
    #weeklyReviewModal{position:fixed;inset:0;background:rgba(0,0,0,.5);z-index:2000;display:none;align-items:center;justify-content:center;padding:16px}
    #weeklyReviewModal.open{display:flex}
    .weekly-review-content{background:var(--card);border-radius:16px;width:min(600px,100%);max-height:88vh;overflow-y:auto;padding:24px;position:relative}
    .wrc-section{margin-bottom:20px;padding-bottom:16px;border-bottom:1px solid var(--border)}
    .wrc-section:last-child{border-bottom:none}
    .wrc-title{font-size:14px;font-weight:700;margin-bottom:10px;color:var(--text)}
    .wrc-stat{display:flex;justify-content:space-between;font-size:13px;padding:3px 0}
    .wrc-textarea{width:100%;min-height:56px;padding:8px;border:1px solid var(--border);border-radius:8px;font-size:13px;font-family:inherit;resize:vertical;background:var(--bg);color:var(--text);margin-top:4px}
    .wrc-plan-row{display:flex;align-items:center;gap:8px;margin-bottom:6px;font-size:13px}
    .wrc-plan-row select{flex:1;padding:4px 6px;border:1px solid var(--border);border-radius:6px;font-size:12px;background:var(--bg);color:var(--text)}

    /* Dark mode additions */
    html[data-theme="dark"] .ritual-focus-block{background:var(--dm-card);border-color:var(--dm-border)}
    html[data-theme="dark"] .ritual-focus-block.fixed-block{background:rgba(255,255,255,.04)}
    html[data-theme="dark"] .rfb-note-input,.rfb-note-input{box-sizing:border-box}
    html[data-theme="dark"] .rfb-note-input{background:var(--dm-input);border-color:var(--dm-border);color:var(--dm-text)}
    html[data-theme="dark"] .ritual-category-select{background:var(--dm-input);border-color:var(--dm-border);color:var(--dm-text)}
    html[data-theme="dark"] .ritual-day-card{background:var(--dm-card);border-color:var(--dm-border)}
    html[data-theme="dark"] .ritual-buffer-suggestion{background:rgba(74,144,217,.1);border-color:rgba(74,144,217,.4)}
    html[data-theme="dark"] .weekly-review-content{background:var(--dm-card)}
    html[data-theme="dark"] .wrc-textarea{background:var(--dm-input);border-color:var(--dm-border);color:var(--dm-text)}
    html[data-theme="dark"] .wrc-plan-row select{background:var(--dm-input);border-color:var(--dm-border);color:var(--dm-text)}
    @media(max-width:768px){
      .ritual-week-tab{grid-template-columns:1fr}
      .ritual-history-grid{grid-template-columns:repeat(2,1fr)}
    }

    /* ── Planned race modal (pr-) ───────────────────────────────── */
    .pr-series-btn{padding:6px 12px;border:1.5px solid var(--border);border-radius:18px;cursor:pointer;font-size:12px;font-weight:600;background:var(--card);color:var(--text-light);font-family:inherit}
    .pr-series-btn-active{border-color:var(--green)!important;color:var(--green)!important;background:var(--green-light,#f0fdf4)!important}
    .pr-dist-chip{padding:6px 12px;border:1.5px solid var(--border);border-radius:18px;cursor:pointer;font-size:12px;font-weight:600;background:var(--card);color:var(--text);font-family:inherit}
    .pr-dist-chip.selected{border-color:var(--green);color:#fff;background:var(--green)}
    html[data-theme="dark"] .pr-series-btn,html[data-theme="dark"] .pr-dist-chip{background:var(--dm-card);border-color:var(--dm-border);color:var(--dm-text-light)}
    html[data-theme="dark"] .pr-dist-chip.selected{background:var(--green);color:#fff}
    .pr-src-btn{flex:1;text-align:center;padding:10px;border:1.5px solid var(--border);border-radius:10px;cursor:pointer;font-size:13px;font-weight:600;background:var(--card);color:var(--text-light)}
    .pr-src-btn-active{border-color:var(--green)!important;color:var(--green)!important;background:var(--green-light,#f0fdf4)!important}
    .pr-prio-opt:hover{border-color:var(--text-light)}
    .pr-prio-opt.sel-a{border-color:#f59e0b!important;background:#fef3c7}
    .pr-prio-opt.sel-b{border-color:#3b82f6!important;background:#dbeafe}
    .pr-prio-opt.sel-c{border-color:var(--text-light)!important;background:var(--bg)}
    .pr-search-item{padding:10px 14px;cursor:pointer;font-size:13px;border-bottom:1px solid var(--border);display:flex;align-items:center;gap:8px}
    .pr-search-item:hover{background:var(--bg)}
    .pr-search-item:last-child{border-bottom:none}
    html[data-theme="dark"] .pr-src-btn{background:var(--dm-card);border-color:var(--dm-border);color:var(--dm-text-light)}
    html[data-theme="dark"] .pr-src-btn-active{background:#064e3b!important;color:#bbf7d0!important}
    html[data-theme="dark"] #pr-search,html[data-theme="dark"] #pr-search-results{background:var(--dm-card);border-color:var(--dm-border);color:var(--dm-text)}

    /* ════ APP SPLASH ════ Zoom-in: logo přiletí z dálky, brand + claim dorazí synchronně */
    #app-splash{position:fixed;inset:0;z-index:99999;display:flex;align-items:center;justify-content:center;background:linear-gradient(160deg,#0f172a 0%,#064e3b 40%,#166534 70%,#22c55e 100%);padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px);transition:opacity .35s ease,visibility .35s ease}
    #app-splash.hide{opacity:0;visibility:hidden;pointer-events:none}
    .splash-inner{text-align:center}
    /* Logo přichází z dálky (zoom-in z malé rozmazané podoby), pak pulsuje */
    .splash-ring{width:180px;height:180px;margin:0 auto 28px;border-radius:50%;padding:5px;background:linear-gradient(135deg,#16a34a,#22c55e,#4ade80);box-shadow:0 12px 44px rgba(34,197,94,.45);box-sizing:border-box;animation:splash-zoom-in 1s cubic-bezier(.34,1.55,.64,1) both,splash-ring-pulse 2.4s ease-in-out 1s infinite}
    .splash-ring > .splash-logo{width:100%;height:100%;border-radius:50%;background:#ffffff;object-fit:contain;padding:16px;display:block;box-sizing:border-box}
    /* Brand text dorazí společně s logem (jemný scale + fade) */
    .splash-brand{font-family:'Baloo 2',sans-serif;font-size:38px;font-weight:800;color:#ffffff;letter-spacing:.5px;margin-bottom:10px;animation:splash-text-arrive 1s cubic-bezier(.34,1.55,.64,1) both}
    .splash-claim{font-family:'Open Sans',sans-serif;font-size:16px;font-weight:400;color:rgba(255,255,255,.9);letter-spacing:.4px;animation:splash-text-arrive 1s cubic-bezier(.34,1.55,.64,1) both}
    /* Zoom-in — logo přiletí z dálky, rozmazané, malé → ostré v plné velikosti */
    @keyframes splash-zoom-in{0%{transform:scale(.1);opacity:0;filter:blur(18px) brightness(1.8)}55%{opacity:1;filter:blur(3px) brightness(1.15)}100%{transform:scale(1);opacity:1;filter:blur(0) brightness(1)}}
    /* Text dorazí synchronně s logem — výraznější scale + fade + blur */
    @keyframes splash-text-arrive{0%{transform:scale(.55);opacity:0;filter:blur(8px)}100%{transform:scale(1);opacity:1;filter:blur(0)}}
    @keyframes splash-ring-pulse{0%,100%{box-shadow:0 12px 44px rgba(34,197,94,.45),0 0 0 0 rgba(34,197,94,.5)}50%{box-shadow:0 12px 44px rgba(34,197,94,.45),0 0 0 18px rgba(34,197,94,0)}}
    @media (prefers-reduced-motion: reduce){.splash-ring,.splash-brand,.splash-claim{animation:none}}