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

        :root {
            --blue:      #2563eb;
            --blue-2:    #3b82f6;
            --aqua:      #06b6d4;
            --aqua-2:    #22d3ee;
            --bg:        #f0f4ff;
            --card:      #ffffff;
            --text:      #0f172a;
            --muted:     #64748b;
            --line:      #e2e8f0;
            --green:     #22c55e;
            --orange:    #f59e0b;
            --red:       #ef4444;
            --purple:    #8b5cf6;
            --shadow-sm: 0 2px 8px rgba(15,34,72,.07);
            --shadow:    0 8px 32px rgba(15,34,72,.1);
            --shadow-lg: 0 20px 60px rgba(15,34,72,.18);
            --radius:    20px;
            --radius-sm: 14px;
            --grad-main: linear-gradient(135deg, var(--blue) 0%, var(--aqua) 100%);
        }

        [data-theme="dark"] {
            --bg:        #0a0e17;
            --card:      #111827;
            --text:      #f1f5f9;
            --muted:     #94a3b8;
            --line:      #1e293b;
            --shadow-sm: 0 2px 8px rgba(0,0,0,.4);
            --shadow:    0 8px 32px rgba(0,0,0,.5);
            --shadow-lg: 0 20px 60px rgba(0,0,0,.7);
        }

        [data-theme="dark"] ::-webkit-scrollbar-thumb {
            background: #334155;
        }
        [data-theme="dark"] ::-webkit-scrollbar-thumb:hover {
            background: #475569;
        }

        [data-theme="dark"] .sidebar {
            background: rgba(8, 14, 26, 0.96);
            border-right-color: #1e293b;
        }
        [data-theme="dark"] .sidebar-footer {
            color: #64748b;
            border-top-color: #1e293b;
        }

        [data-theme="dark"] .panel,
        [data-theme="dark"] .card,
        [data-theme="dark"] .workout-card,
        [data-theme="dark"] .profile-chip,
        [data-theme="dark"] .results-table-wrapper,
        [data-theme="dark"] .standards-table-wrapper,
        [data-theme="dark"] .std-calc-result,
        [data-theme="dark"] .comp-distance-item,
        [data-theme="dark"] .chart-card {
            background: #111827;
            border-color: #1e293b;
            color: var(--text);
        }

        [data-theme="dark"] .card::before {
            background: linear-gradient(105deg,transparent 40%,rgba(255,255,255,.08) 50%,transparent 60%);
        }

        [data-theme="dark"] .panel p,
        [data-theme="dark"] .workout-notes,
        [data-theme="dark"] .detail-notes,
        [data-theme="dark"] .set-card-desc {
            color: #94a3b8;
        }

        [data-theme="dark"] .field input,
        [data-theme="dark"] .field select,
        [data-theme="dark"] .field textarea,
        [data-theme="dark"] #analyticsMonthSelect,
        [data-theme="dark"] #analyticsCustomDateBox {
            background: #0b1120 !important;
            border-color: #1e293b !important;
            color: #f1f5f9 !important;
        }

        [data-theme="dark"] .field input:focus,
        [data-theme="dark"] .field select:focus,
        [data-theme="dark"] .field textarea:focus {
            background: #0f172a !important;
            border-color: var(--blue-2) !important;
        }

        [data-theme="dark"] .field input::placeholder,
        [data-theme="dark"] .field textarea::placeholder {
            color: #64748b;
        }

        [data-theme="dark"] option {
            background-color: #111827;
            color: #f1f5f9;
        }

        [data-theme="dark"] .secondary,
        [data-theme="dark"] .filter-btn,
        [data-theme="dark"] .pill-btn {
            background: #111827;
            border-color: #1e293b;
            color: #94a3b8;
        }

        [data-theme="dark"] .secondary:hover,
        [data-theme="dark"] .filter-btn:hover,
        [data-theme="dark"] .pill-btn:hover {
            background: #1e293b;
            color: #f1f5f9;
            border-color: #334155;
        }

        [data-theme="dark"] .category-switch,
        [data-theme="dark"] .std-segmented {
            background: #0b1120;
            border-color: #1e293b;
        }

        [data-theme="dark"] .cat-btn.active,
        [data-theme="dark"] .std-seg-btn.active {
            background: #1e293b;
            color: #38bdf8;
            box-shadow: 0 2px 10px rgba(0,0,0,.35);
        }

        [data-theme="dark"] .stat-icon {
            background: rgba(37,99,235,0.18) !important;
        }
        [data-theme="dark"] .card:nth-child(2) .stat-icon {
            background: rgba(139,92,246,0.18) !important;
        }
        [data-theme="dark"] .card:nth-child(3) .stat-icon {
            background: rgba(245,158,11,0.18) !important;
        }
        [data-theme="dark"] .card:nth-child(4) .stat-icon {
            background: rgba(34,197,94,0.18) !important;
        }

        [data-theme="dark"] .set-row,
        [data-theme="dark"] .exercise-row,
        [data-theme="dark"] .set-card,
        [data-theme="dark"] .competition-card,
        [data-theme="dark"] .meal-card,
        [data-theme="dark"] .recovery-log-card {
            background: #0d1527;
            border-color: #1e293b;
        }

        [data-theme="dark"] .comp-status-upcoming {
            background: rgba(3, 105, 161, 0.22);
            color: #38bdf8;
            border-color: rgba(56, 189, 248, 0.35);
        }
        [data-theme="dark"] .comp-status-today {
            background: rgba(245, 158, 11, 0.22);
            color: #fbbf24;
            border-color: rgba(251, 191, 36, 0.35);
        }
        [data-theme="dark"] .comp-status-completed {
            background: rgba(22, 163, 74, 0.22);
            color: #4ade80;
            border-color: rgba(74, 222, 128, 0.35);
        }

        [data-theme="dark"] .std-calc-box {
            background: linear-gradient(135deg, #091e36 0%, #0d2744 100%);
            border-color: #1e3a5f;
        }
        [data-theme="dark"] .std-calc-box h2 {
            color: #f1f5f9 !important;
        }
        [data-theme="dark"] .std-calc-box p {
            color: #94a3b8 !important;
        }
        [data-theme="dark"] .std-calc-box > div:first-child > div:first-child {
            background: #0f1f38 !important;
        }

        [data-theme="dark"] .insight {
            background: linear-gradient(135deg, #0c1e36, #09283f);
            border-color: #1e3a8a;
            color: #93c5fd;
        }

        [data-theme="dark"] .total-distance {
            background: linear-gradient(135deg, #0c1e36, #09283f);
            border-color: #1e3a8a;
        }
        [data-theme="dark"] .total-distance .card-title {
            color: #60a5fa;
        }

        [data-theme="dark"] .chart-stats-grid {
            border-bottom-color: #1e293b;
        }
        [data-theme="dark"] .chart-stat-item strong {
            color: #f1f5f9;
        }

        [data-theme="dark"] .progress-row {
            border-bottom-color: #1e293b;
        }
        [data-theme="dark"] .profile-hero,
        [data-theme="dark"] .info-row {
            border-bottom-color: #1e293b;
        }
        [data-theme="dark"] .profile-hero h3,
        [data-theme="dark"] .info-row .info-value {
            color: #f1f5f9;
        }

        [data-theme="dark"] .metric-track {
            background: #1e293b;
        }
        [data-theme="dark"] .empty-icon {
            background: #162032;
        }
        [data-theme="dark"] .meal-icon {
            background: #162032;
            border: 1px solid #1e293b;
        }
        [data-theme="dark"] .meal-name {
            color: #f1f5f9;
        }

        [data-theme="dark"] .badge {
            background: #172554;
            color: #60a5fa;
        }
        [data-theme="dark"] .badge--green {
            background: #052e16;
            color: #4ade80;
        }
        [data-theme="dark"] .badge--orange {
            background: #451a03;
            color: #fbbf24;
        }
        [data-theme="dark"] .badge--purple {
            background: #2e1065;
            color: #c084fc;
        }

        [data-theme="dark"] .comp-status-upcoming {
            background: #082f49;
            color: #38bdf8;
            border-color: #0369a1;
        }
        [data-theme="dark"] .comp-status-today {
            background: #451a03;
            color: #fbbf24;
            border-color: #b45309;
        }
        [data-theme="dark"] .comp-status-completed {
            background: #052e16;
            color: #4ade80;
            border-color: #15803d;
        }
        [data-theme="dark"] .comp-distance-pill {
            background: #172554;
            color: #93c5fd;
            border: 1px solid #1e3a8a;
        }

        [data-theme="dark"] #competitionReportPanel div[style*="background:#f8fafc"] {
            background: #0b1120 !important;
            border-color: #1e293b !important;
            color: #94a3b8 !important;
        }

        [data-theme="dark"] .results-table th,
        [data-theme="dark"] .standards-table th {
            background: #0b1120;
            color: #94a3b8;
            border-bottom-color: #1e293b;
        }

        [data-theme="dark"] .standards-table th.col-distance,
        [data-theme="dark"] .standards-table td.cell-dist {
            background: #111827;
            border-right-color: #1e293b;
            color: #f1f5f9;
        }

        [data-theme="dark"] .results-table td,
        [data-theme="dark"] .standards-table td {
            border-bottom-color: #1e293b;
            color: #cbd5e1;
        }

        [data-theme="dark"] .results-table tr:hover td,
        [data-theme="dark"] .standards-table tr:hover td {
            background: #172033;
        }

        [data-theme="dark"] .standards-table tr:hover td.cell-dist {
            background: #1a253c;
        }

        [data-theme="dark"] .rank-msmk { background: rgba(239,68,68,0.2); color: #f87171; border-color: rgba(239,68,68,0.4); }
        [data-theme="dark"] .rank-ms   { background: rgba(249,115,22,0.2); color: #fb923c; border-color: rgba(249,115,22,0.4); }
        [data-theme="dark"] .rank-kms  { background: rgba(245,158,11,0.2); color: #fbbf24; border-color: rgba(245,158,11,0.4); }
        [data-theme="dark"] .rank-r1   { background: rgba(132,204,22,0.2); color: #a3e635; border-color: rgba(132,204,22,0.4); }
        [data-theme="dark"] .rank-r2   { background: rgba(37,99,235,0.2);  color: #60a5fa; border-color: rgba(37,99,235,0.4); }
        [data-theme="dark"] .rank-r3   { background: rgba(99,102,241,0.2); color: #818cf8; border-color: rgba(99,102,241,0.4); }
        [data-theme="dark"] .rank-y1   { background: rgba(168,85,247,0.2); color: #c084fc; border-color: rgba(168,85,247,0.4); }
        [data-theme="dark"] .rank-y2   { background: rgba(217,70,239,0.2); color: #e879f9; border-color: rgba(217,70,239,0.4); }
        [data-theme="dark"] .rank-y3   { background: rgba(100,116,139,0.2);color: #94a3b8; border-color: rgba(100,116,139,0.4); }

        [data-theme="dark"] .zone-1    { background: #172554; color: #93c5fd; }
        [data-theme="dark"] .zone-2    { background: #052e16; color: #86efac; }
        [data-theme="dark"] .zone-3    { background: #422006; color: #fde047; }
        [data-theme="dark"] .zone-4    { background: #431407; color: #fdba74; }
        [data-theme="dark"] .zone-5    { background: #450a0a; color: #fca5a5; }

        [data-theme="dark"] .pr-tag    { background: #451a03; color: #fde047; }

        [data-theme="dark"] .btn-delete-item,
        [data-theme="dark"] .btn-remove-row {
            background: rgba(239,68,68,0.15);
            border-color: rgba(239,68,68,0.35);
            color: #f87171;
        }
        [data-theme="dark"] .btn-outline-danger {
            background: rgba(239,68,68,0.12);
            border-color: rgba(239,68,68,0.3);
            color: #f87171;
        }
        [data-theme="dark"] .btn-delete-danger {
            background: transparent;
            border-color: #ef4444;
            color: #f87171;
        }
        [data-theme="dark"] .btn-delete-danger:hover {
            background: #ef4444;
            color: #fff;
        }

        [data-theme="dark"] .ring::before {
            background: #111827;
            box-shadow: inset 0 2px 8px rgba(0,0,0,.6);
        }

        [data-theme="dark"] .ring-value,
        [data-theme="dark"] .ring-label {
            color: #f1f5f9;
        }

        [data-theme="dark"] .activity-chip {
            background: #0d1527;
            border-color: #1e293b;
            color: #94a3b8;
        }

        [data-theme="dark"] .activity-chip:hover {
            background: #1e293b;
            color: #f1f5f9;
        }

        [data-theme="dark"] .activity-chip.active {
            background: #172554;
            border-color: var(--blue-2);
            color: #60a5fa;
        }

        [data-theme="dark"] .activity-badge {
            background: #052e16;
            color: #4ade80;
            border-color: #166534;
        }

        [data-theme="dark"] #recoveryCoachAdvicePanel {
            background: linear-gradient(135deg, #091a2e, #062327) !important;
            border-color: #1e3a5f !important;
        }
        [data-theme="dark"] #recoveryCoachAdvicePanel > div > div:first-child {
            background: #0b1424 !important;
            box-shadow: none !important;
        }

        [data-theme="dark"] #recoveryCoachAdviceText {
            color: #cbd5e1 !important;
        }

        [data-theme="dark"] #calcResultBox {
            background: #0b1120;
            border-color: #1e3a8a;
        }

        [data-theme="dark"] #calcResultTitle {
            color: #f1f5f9 !important;
        }

        [data-theme="dark"] #calcResultDesc {
            color: #94a3b8 !important;
        }

        [data-theme="dark"] #analyticsCustomDateBox input[type="date"]::-webkit-calendar-picker-indicator {
            filter: invert(1);
        }

        body {
            font-family: 'Inter', 'Segoe UI', sans-serif;
            background: var(--bg);
            color: var(--text);
            -webkit-font-smoothing: antialiased;
            overflow-x: hidden;
            transition: background .25s ease, color .25s ease;
        }

        ::-webkit-scrollbar { width: 6px; height: 6px; }
        ::-webkit-scrollbar-track { background: transparent; }
        ::-webkit-scrollbar-thumb { background: #c7d2fe; border-radius: 99px; }
        ::-webkit-scrollbar-thumb:hover { background: #a5b4fc; }

        body::before, body::after {
            content: '';
            position: fixed;
            border-radius: 50%;
            filter: none;
            opacity: .18;
            pointer-events: none;
            z-index: -1;
            animation: blobFloat 12s ease-in-out infinite alternate;
        }
        body::before {
            width: 600px; height: 600px;
            background: radial-gradient(circle, #3b82f6 0%, transparent 70%);
            top: -200px; right: -100px;
        }
        body::after {
            width: 500px; height: 500px;
            background: radial-gradient(circle, #06b6d4 0%, transparent 70%);
            bottom: -150px; left: -100px;
            animation-delay: -6s;
        }
        @keyframes blobFloat {
            from { transform: translate(0,0) scale(1); }
            to   { transform: translate(40px,30px) scale(1.08); }
        }

        .app { display: flex; min-height: 100vh; }

        /* ── SIDEBAR ── */
        .sidebar {
            width: 260px;
            background: #080e1a;
            backdrop-filter: none !important;
            -webkit-backdrop-filter: none !important;
            filter: none !important;
            color: white;
            padding: 28px 16px;
            position: sticky; top: 0; height: 100vh;
            display: flex; flex-direction: column;
            border-right: 1px solid rgba(255,255,255,.06);
            box-shadow: 4px 0 40px rgba(0,0,0,.25);
            z-index: 100;
        }

        .logo {
            font-size: 21px; font-weight: 900; letter-spacing: -.5px;
            margin-bottom: 36px; padding: 0 8px;
            display: flex; align-items: center; gap: 12px;
        }
        .logo-icon {
            width: 40px; height: 40px; border-radius: 12px;
            background: var(--grad-main);
            display: flex; align-items: center; justify-content: center;
            box-shadow: 0 8px 20px rgba(37,99,235,.5);
            animation: logoGlow 3s ease-in-out infinite alternate;
            flex-shrink: 0;
        }
        .logo-icon svg { width: 20px; height: 20px; color: white; stroke-width: 2.5; }
        @keyframes logoGlow {
            from { box-shadow: 0 8px 20px rgba(37,99,235,.4); }
            to   { box-shadow: 0 8px 30px rgba(6,182,212,.7); }
        }
        .logo-text { background: var(--grad-main); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }

        .nav { display: flex; flex-direction: column; gap: 4px; }
        .nav button {
            width: 100%; border: none; background: transparent;
            color: #94a3b8; text-align: left;
            padding: 13px 14px; border-radius: 14px; cursor: pointer;
            font-size: 14.5px; font-weight: 500; font-family: inherit;
            display: flex; align-items: center; gap: 12px;
            transition: all .22s cubic-bezier(.4,0,.2,1);
            position: relative; overflow: hidden;
        }
        .nav button::before {
            content: ''; position: absolute; inset: 0;
            background: var(--grad-main); opacity: 0;
            transition: opacity .22s ease; border-radius: 14px;
        }
        .nav button:hover { color: #fff; transform: translateX(4px); }
        .nav button:hover::before { opacity: .12; }
        .nav button.active {
            background: var(--grad-main); color: #fff; font-weight: 700;
            box-shadow: 0 8px 24px rgba(37,99,235,.4); transform: translateX(0);
        }
        .nav button.active::before { opacity: 0; }

        .nav-icon {
            flex-shrink: 0; position: relative; z-index: 1;
            display: flex; align-items: center; justify-content: center;
            width: 20px; height: 20px;
        }
        .nav-icon svg { width: 20px; height: 20px; stroke-width: 2; }
        .nav-label { position: relative; z-index: 1; }

        .sidebar-footer {
            margin-top: auto; padding: 16px 10px 0;
            font-size: 11.5px; color: #475569;
            border-top: 1px solid rgba(255,255,255,.06); letter-spacing: .3px;
        }

        /* ── MAIN ── */
        .main { flex: 1; padding: 36px 42px; min-width: 0; }

        .top {
            display: flex; justify-content: space-between;
            align-items: center; margin-bottom: 34px;
        }
        h1 { font-size: 30px; font-weight: 900; letter-spacing: -.6px; line-height: 1.1; }
        .subtitle { color: var(--muted); margin-top: 5px; font-size: 15px; }

        .profile-chip {
            background: white; padding: 10px 20px; border-radius: 999px;
            box-shadow: var(--shadow); border: 1px solid var(--line);
            font-weight: 700; font-size: 14px;
            display: flex; align-items: center; gap: 8px;
            transition: transform .18s ease, box-shadow .18s ease;
        }
        .profile-chip svg { width: 16px; height: 16px; color: var(--blue); stroke-width: 2.5; }
        .profile-chip:hover { transform: translateY(-2px); box-shadow: var(--shadow-lg); }

        /* ── STAT CARDS ── */
        .cards {
            display: grid; grid-template-columns: repeat(4,1fr);
            gap: 20px; margin-bottom: 28px;
        }
        .card {
            background: white; border-radius: var(--radius);
            padding: 24px; box-shadow: var(--shadow);
            border: 1px solid rgba(226,232,240,.8);
            position: relative; overflow: hidden;
            transition: transform .25s cubic-bezier(.4,0,.2,1), box-shadow .25s ease;
        }
        .card::after {
            content: ''; position: absolute; top: 0; left: 0; right: 0;
            height: 3px; background: var(--grad-main);
            border-radius: var(--radius) var(--radius) 0 0;
        }
        .card::before {
            content: ''; position: absolute; inset: 0;
            background: linear-gradient(105deg,transparent 40%,rgba(255,255,255,.5) 50%,transparent 60%);
            transform: translateX(-100%); transition: transform .6s ease;
            border-radius: var(--radius);
        }
        .card:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); }
        .card:hover::before { transform: translateX(100%); }
        .card:nth-child(2)::after { background: linear-gradient(90deg,#8b5cf6,#ec4899); }
        .card:nth-child(3)::after { background: linear-gradient(90deg,#f59e0b,#ef4444); }
        .card:nth-child(4)::after { background: linear-gradient(90deg,#22c55e,#06b6d4); }

        .stat-icon {
            width: 44px; height: 44px; border-radius: 12px;
            display: inline-flex; align-items: center; justify-content: center;
            background: linear-gradient(135deg,#eff6ff,#e0f2fe);
            margin-bottom: 16px;
        }
        .stat-icon svg { width: 22px; height: 22px; stroke-width: 2; color: #2563eb; }
        .card:nth-child(2) .stat-icon { background: linear-gradient(135deg,#f5f3ff,#fce7f3); }
        .card:nth-child(2) .stat-icon svg { color: #7c3aed; }
        .card:nth-child(3) .stat-icon { background: linear-gradient(135deg,#fffbeb,#fef2f2); }
        .card:nth-child(3) .stat-icon svg { color: #d97706; }
        .card:nth-child(4) .stat-icon { background: linear-gradient(135deg,#f0fdf4,#ecfeff); }
        .card:nth-child(4) .stat-icon svg { color: #16a34a; }

        .card-title { color: var(--muted); font-size: 12px; text-transform: uppercase; letter-spacing: .8px; font-weight: 700; margin-bottom: 8px; }
        .card-value { font-size: 26px; font-weight: 900; letter-spacing: -.5px; background: var(--grad-main); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
        .card:nth-child(2) .card-value { background: linear-gradient(135deg,#8b5cf6,#ec4899); -webkit-background-clip: text; background-clip: text; }
        .card:nth-child(3) .card-value { background: linear-gradient(135deg,#f59e0b,#ef4444); -webkit-background-clip: text; background-clip: text; }
        .card:nth-child(4) .card-value { background: linear-gradient(135deg,#22c55e,#06b6d4); -webkit-background-clip: text; background-clip: text; }
        .card-small { color: var(--muted); margin-top: 6px; font-size: 12.5px; font-weight: 500; }

        /* ── GRID / PANEL ── */
        .grid { display: grid; grid-template-columns: 2fr 1fr; gap: 22px; }
        .panel {
            background: white; border-radius: var(--radius);
            padding: 26px; margin-bottom: 22px;
            box-shadow: var(--shadow); border: 1px solid rgba(226,232,240,.8);
            transition: box-shadow .22s ease;
        }
        .panel:hover { box-shadow: var(--shadow-lg); }
        .panel h2 { font-size: 18px; margin-bottom: 20px; font-weight: 800; display: flex; align-items: center; gap: 10px; }
        .panel h2::before { content: ''; width: 4px; height: 20px; border-radius: 99px; background: var(--grad-main); flex-shrink: 0; }
        .panel p { color: #475569; line-height: 1.75; font-size: 15px; }

        /* ── CHART ── */
        .chart { height: 220px; display: flex; align-items: flex-end; justify-content: space-around; gap: 12px; padding-top: 20px; }
        .bar-container { height: 100%; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; flex: 1; }
        .bar {
            width: 100%; max-width: 42px; background: var(--grad-main);
            border-radius: 10px 10px 4px 4px; min-height: 10px;
            box-shadow: 0 6px 20px rgba(37,99,235,.3);
            transition: height .6s cubic-bezier(.22,1,.36,1);
            position: relative; overflow: hidden;
        }
        .bar::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg,rgba(255,255,255,.25) 0%,transparent 50%); }
        .bar-container:hover .bar { filter: brightness(1.1); box-shadow: 0 8px 28px rgba(37,99,235,.5); transform: scaleX(1.05); }
        .bar-value { font-size: 10.5px; color: var(--muted); font-weight: 700; margin-bottom: 6px; min-height: 14px; white-space: nowrap; }
        .day { margin-top: 8px; color: var(--muted); font-size: 12px; font-weight: 700; }

        /* ── INSIGHT ── */
        .insight { background: linear-gradient(135deg,#eff6ff,#ecfeff); border: 1px solid #bfdbfe; border-radius: var(--radius-sm); padding: 20px; line-height: 1.75; font-size: 14.5px; color: #1e40af; font-weight: 500; }

        /* ── COMPETITION BLOCK (dashboard) ── */
        .competition { border-left: 3px solid var(--blue-2); padding: 4px 0 4px 18px; }
        .competition-name { font-size: 18px; font-weight: 800; margin-bottom: 8px; }
        .competition-info { color: var(--muted); line-height: 1.9; font-size: 14px; display: flex; flex-direction: column; gap: 4px; }
        .competition-info-row { display: flex; align-items: center; gap: 6px; }
        .competition-info-row svg { width: 14px; height: 14px; color: var(--blue); stroke-width: 2.5; flex-shrink: 0; }
        .countdown { font-size: 36px; font-weight: 900; margin-top: 6px; background: var(--grad-main); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; letter-spacing: -.5px; }
        .countdown-label { margin-top: 16px; font-size: 11px; text-transform: uppercase; letter-spacing: 1px; font-weight: 800; color: var(--muted); }

        /* ── PROGRESS ── */
        .progress-row { display: flex; justify-content: space-between; align-items: center; gap: 14px; padding: 14px 0; border-bottom: 1px solid var(--line); }
        .progress-row:last-child { border-bottom: none; }
        .progress-title { font-weight: 700; font-size: 15px; }
        .progress-subtitle { font-size: 12px; color: var(--muted); margin-top: 3px; }
        .progress-value { font-size: 17px; font-weight: 900; background: var(--grad-main); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; white-space: nowrap; }

        /* ── BUTTONS ── */
        .primary {
            border: none; background: var(--grad-main); color: white;
            padding: 12px 22px; border-radius: var(--radius-sm);
            cursor: pointer; font-size: 14.5px; font-weight: 700;
            font-family: inherit; box-shadow: 0 8px 24px rgba(37,99,235,.35);
            transition: transform .18s ease, box-shadow .18s ease, filter .18s ease;
            display: inline-flex; align-items: center; gap: 8px;
        }
        .primary:hover { transform: translateY(-3px); box-shadow: 0 14px 32px rgba(37,99,235,.5); filter: brightness(1.06); }
        .primary:active { transform: translateY(-1px); }
        .primary svg { width: 16px; height: 16px; stroke-width: 2.5; }

        .secondary {
            border: 1.5px solid var(--line); background: white; color: #475569;
            padding: 12px 22px; border-radius: var(--radius-sm);
            cursor: pointer; font-size: 14.5px; font-weight: 600;
            font-family: inherit; transition: all .18s ease;
            display: inline-flex; align-items: center; gap: 8px;
        }
        .secondary:hover { background: #f8fafc; border-color: #94a3b8; color: var(--text); transform: translateY(-1px); }
        .secondary svg { width: 16px; height: 16px; stroke-width: 2; }

        /* ── PAGES ── */
        .page { display: none; }
        .page.active { display: block; animation: pageIn .4s cubic-bezier(.22,1,.36,1); }
        @keyframes pageIn { from { opacity:0; transform:translateY(16px); } to { opacity:1; transform:translateY(0); } }

        /* ── CATEGORY SWITCH ── */
        .category-switch {
            display: inline-flex;
            gap: 6px;
            padding: 5px;
            border-radius: 9999px;
            background: rgba(148, 163, 184, 0.14);
            border: 1px solid rgba(148, 163, 184, 0.22);
            margin-bottom: 24px;
            max-width: 100%;
            overflow-x: auto;
            -webkit-overflow-scrolling: touch;
            scrollbar-width: none;
            box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.04);
        }
        .category-switch::-webkit-scrollbar { display: none; }
        .cat-btn {
            border: none;
            background: transparent;
            color: var(--muted);
            padding: 9px 22px;
            border-radius: 9999px;
            cursor: pointer;
            font-size: 14px;
            font-weight: 600;
            font-family: inherit;
            transition: all 0.22s cubic-bezier(0.16, 1, 0.3, 1);
            display: flex;
            align-items: center;
            gap: 7px;
            white-space: nowrap;
            flex-shrink: 0;
        }
        .cat-btn svg { width: 16px; height: 16px; stroke-width: 2; }
        .cat-btn:hover { color: var(--text); }
        .cat-btn.active {
            background: white;
            color: var(--blue);
            box-shadow: 0 4px 14px rgba(0, 0, 0, 0.08);
            font-weight: 700;
        }

        /* ── FILTER TABS ── */
        .filter-tabs {
            display: flex;
            flex-wrap: wrap;
            gap: 8px;
            margin-bottom: 22px;
            background: transparent !important;
            border: none !important;
            padding: 0 !important;
        }
        .filter-btn {
            border: 1px solid var(--line);
            background: var(--card, white);
            color: var(--muted);
            padding: 8px 18px;
            border-radius: 9999px;
            cursor: pointer;
            font-size: 13px;
            font-weight: 600;
            font-family: inherit;
            transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
            display: inline-flex;
            align-items: center;
            gap: 6px;
            box-shadow: 0 1px 3px rgba(0, 0, 0, 0.03);
        }
        .filter-btn svg { width: 14px; height: 14px; stroke-width: 2.5; }
        .filter-btn:hover {
            border-color: var(--blue);
            color: var(--blue);
            background: rgba(37, 99, 235, 0.04);
            transform: translateY(-1px);
            box-shadow: 0 3px 10px rgba(0, 0, 0, 0.06);
        }
        .filter-btn.active {
            background: linear-gradient(135deg, #2563eb, #1d4ed8) !important;
            border-color: transparent !important;
            color: white !important;
            box-shadow: 0 4px 16px rgba(37, 99, 235, 0.35) !important;
            font-weight: 700;
        }

        /* ── WORKOUT TAGS ── */
        .workout-tag { display: inline-flex; align-items: center; gap: 4px; font-size: 11px; font-weight: 800; padding: 3px 10px; border-radius: 999px; background: #dbeafe; color: #1d4ed8; letter-spacing: .3px; }
        .workout-tag svg { width: 11px; height: 11px; stroke-width: 2.5; }
        .workout-tag--gym { background: #ede9fe; color: #6d28d9; }

        /* ── WORKOUT CARDS ── */
        .workout-card {
            border: 1.5px solid var(--line); border-radius: var(--radius-sm);
            padding: 20px; margin-bottom: 14px; background: white;
            cursor: pointer; transition: all .25s cubic-bezier(.4,0,.2,1);
            position: relative; overflow: hidden;
        }
        .workout-card::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: var(--grad-main); opacity: 0; transition: opacity .22s ease; }
        .workout-card:hover { transform: translateY(-4px) translateX(2px); box-shadow: var(--shadow-lg); border-color: #bfdbfe; }
        .workout-card:hover::before { opacity: 1; }
        .workout-card-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 14px; }
        .workout-date { color: var(--muted); font-size: 13px; font-weight: 600; }
        .workout-stats { display: grid; grid-template-columns: repeat(auto-fit,minmax(110px,1fr)); gap: 14px; }
        .workout-stats small { color: var(--muted); font-size: 11px; text-transform: uppercase; letter-spacing: .5px; font-weight: 700; }
        .workout-stats strong { display: block; margin-top: 4px; font-size: 15px; font-weight: 800; }
        .workout-notes { margin-top: 14px; padding-top: 12px; border-top: 1px dashed var(--line); color: #475569; font-size: 13.5px; display: flex; align-items: flex-start; gap: 6px; }
        .workout-notes svg { width: 15px; height: 15px; color: var(--muted); stroke-width: 2; flex-shrink: 0; margin-top: 2px; }

        /* ── FORM ── */
        .form-grid { display: grid; grid-template-columns: repeat(2,1fr); gap: 16px; }
        .field label { display: block; font-size: 12.5px; font-weight: 700; margin-bottom: 8px; color: #475569; letter-spacing: .3px; text-transform: uppercase; }
        .field input, .field select, .field textarea { width: 100%; border: 1.5px solid #e2e8f0; border-radius: 12px; padding: 12px 14px; font-size: 15px; font-family: inherit; color: var(--text); background: #f8fafc; transition: all .2s ease; }
        .field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--blue-2); background: white; box-shadow: 0 0 0 4px rgba(59,130,246,.12); }
        .field textarea { min-height: 100px; resize: vertical; }

        /* ── SET / EXERCISE ROWS ── */
        .set-row, .exercise-row { border: 1.5px solid var(--line); border-radius: var(--radius-sm); padding: 18px; margin-bottom: 14px; background: #fafbff; transition: border-color .2s ease, box-shadow .2s ease; animation: rowSlideIn .3s ease; }
        .set-row:hover, .exercise-row:hover { border-color: #bfdbfe; box-shadow: 0 4px 16px rgba(37,99,235,.08); }
        @keyframes rowSlideIn { from { opacity:0; transform:translateY(-8px); } to { opacity:1; transform:translateY(0); } }

        /* ── TOTAL DISTANCE ── */
        .total-distance { background: linear-gradient(135deg,#eff6ff,#ecfeff); border: 1px solid #bfdbfe; border-radius: var(--radius-sm); padding: 20px 24px; margin-bottom: 20px; display: flex; align-items: center; justify-content: space-between; gap: 14px; }
        .total-distance .card-title { margin-bottom: 0; color: #1d4ed8; }
        .total-distance .card-value { font-size: 28px; }

        /* ── SECTION TITLE ── */
        .section-title { margin-top: 28px; font-size: 18px; font-weight: 800; display: flex; align-items: center; gap: 10px; }
        .section-title::before { content: ''; width: 4px; height: 20px; border-radius: 99px; background: var(--grad-main); flex-shrink: 0; }

        /* ── COMPETITION LIST ── */
        .competition-list { display: flex; flex-direction: column; gap: 16px; margin-top: 16px; }
        .competition-card { border: 1.5px solid var(--line); border-left: 4px solid var(--blue-2); border-radius: var(--radius-sm); padding: 20px; background: #fafbff; transition: all .22s ease; }
        .competition-card:hover { transform: translateY(-3px); box-shadow: var(--shadow); border-left-color: var(--aqua); }
        .competition-card-header { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 14px; flex-wrap: wrap; }
        .competition-card-title { font-size: 18px; font-weight: 800; color: var(--text); line-height: 1.3; }
        .comp-badge,
        .comp-status-badge {
            display: inline-flex;
            align-items: center;
            gap: 6px;
            padding: 5px 12px;
            border-radius: 999px;
            font-size: 12px;
            font-weight: 800;
            letter-spacing: .3px;
            white-space: nowrap;
        }

        /* ── BADGES ── */
        .badge { display: inline-flex; align-items: center; gap: 6px; padding: 5px 14px; border-radius: 999px; font-size: 12px; font-weight: 700; background: #dbeafe; color: #1d4ed8; }
        .badge svg { width: 13px; height: 13px; stroke-width: 2.5; }
        .badge--green { background: #dcfce7; color: #15803d; }
        .badge--orange { background: #fef3c7; color: #b45309; }
        .badge--purple { background: #ede9fe; color: #6d28d9; }

        /* ── MEAL CARDS ── */
        .meal-grid { display: grid; grid-template-columns: repeat(auto-fit,minmax(190px,1fr)); gap: 16px; }
        .meal-card { border: 1.5px solid var(--line); border-radius: var(--radius-sm); padding: 20px; background: #fafbff; transition: all .22s ease; }
        .meal-card:hover { transform: translateY(-4px); box-shadow: var(--shadow); border-color: #bfdbfe; }
        .meal-icon { width: 46px; height: 46px; border-radius: 14px; display: flex; align-items: center; justify-content: center; background: linear-gradient(135deg,#eff6ff,#ecfeff); margin-bottom: 14px; }
        .meal-icon svg { width: 24px; height: 24px; stroke-width: 2; color: #2563eb; }
        .meal-name { font-weight: 800; margin-bottom: 6px; font-size: 15px; }
        .meal-status { font-size: 13px; color: var(--muted); }

        /* ── RINGS ── */
        .rings { display: grid; grid-template-columns: repeat(auto-fit,minmax(180px,1fr)); gap: 20px; text-align: center; }
        .ring { --pct:0; --ring-color:var(--blue); width:130px; height:130px; margin:0 auto 14px; border-radius:50%; background:conic-gradient(var(--ring-color) calc(var(--pct)*1%),#e2e8f0 0); display:flex; align-items:center; justify-content:center; position:relative; transition:transform .22s ease; }
        .ring:hover { transform: scale(1.06); }
        .ring::before { content:''; position:absolute; inset:13px; border-radius:50%; background:white; box-shadow:inset 0 2px 8px rgba(15,34,72,.08); }
        .ring-value { position:relative; font-size:22px; font-weight:900; color:var(--text); }
        .ring-label { font-weight:700; color:var(--text); font-size:15px; }
        .ring-sub { font-size:12px; color:var(--muted); margin-top:4px; }

        /* ── PROFILE ── */
        .profile-hero { display:flex; align-items:center; gap:20px; margin-bottom:24px; padding-bottom:24px; border-bottom:1px solid var(--line); }
        .avatar { width:80px; height:80px; border-radius:50%; display:flex; align-items:center; justify-content:center; background:var(--grad-main); box-shadow:0 12px 30px rgba(37,99,235,.4); flex-shrink:0; }
        .avatar svg { width:38px; height:38px; color:white; stroke-width:2; }
        .profile-hero h3 { font-size:22px; font-weight:900; margin-bottom:4px; }
        .profile-hero p { color:var(--muted); margin:0; }
        .info-row { display:flex; justify-content:space-between; align-items:center; gap:14px; padding:15px 0; border-bottom:1px solid var(--line); }
        .info-row:last-child { border-bottom:none; }
        .info-row .info-label { color:var(--muted); font-size:14px; font-weight:500; }
        .info-row .info-value { font-weight:700; font-size:15px; }

        /* ── ANALYTICS METRICS ── */
        .metric-list { display:flex; flex-direction:column; gap:18px; }
        .metric { display:flex; flex-direction:column; gap:8px; }
        .metric-head { display:flex; justify-content:space-between; font-size:14px; font-weight:700; }
        .metric-track { height:10px; border-radius:999px; background:#e2e8f0; overflow:hidden; }
        .metric-fill { height:100%; border-radius:999px; background:var(--grad-main); transition:width .8s cubic-bezier(.22,1,.36,1); }

        /* ── EMPTY STATE ── */
        .empty-state { text-align:center; padding:36px 20px; color:var(--muted); font-size:15px; }
        .empty-icon { display:flex; align-items:center; justify-content:center; width:64px; height:64px; border-radius:20px; background:linear-gradient(135deg,#eff6ff,#ecfeff); margin:0 auto 16px; animation:iconBob 2.5s ease-in-out infinite; }
        .empty-icon svg { width:32px; height:32px; color:#93c5fd; stroke-width:1.5; }
        @keyframes iconBob { 0%,100%{transform:translateY(0);} 50%{transform:translateY(-8px);} }

        /* ── DETAIL VIEW ── */
        .set-card { border:1.5px solid var(--line); border-radius:var(--radius-sm); padding:18px; margin-bottom:12px; background:#fafbff; transition:all .22s ease; animation:rowSlideIn .3s ease; }
        .set-card:hover { border-color:#bfdbfe; box-shadow:var(--shadow-sm); }
        .set-card-info { margin-top:12px; line-height:1.9; font-size:14px; }
        .set-card-desc { margin-top:12px; color:#475569; font-size:14px; }
        .detail-head { display:flex; justify-content:space-between; align-items:center; gap:14px; margin-bottom:22px; }
        .detail-notes { margin-top:22px; padding:18px; border-radius:var(--radius-sm); background:#f8fafc; border:1.5px solid var(--line); color:#475569; font-size:14.5px; line-height:1.7; }

        /* ── DELETE BUTTONS ── */
        .btn-delete { border:none; background:transparent; cursor:pointer; padding:5px 7px; border-radius:8px; opacity:0; transition:opacity .18s ease,background .18s ease,transform .18s ease; flex-shrink:0; display:flex; align-items:center; justify-content:center; }
        .btn-delete svg { width:15px; height:15px; color:#94a3b8; stroke-width:2; }
        .workout-card:hover .btn-delete, .competition-card:hover .btn-delete { opacity:1; }
        .btn-delete:hover { background:#fee2e2; transform:scale(1.15); }
        .btn-delete:hover svg { color:#ef4444; }

        .btn-delete-danger { border:1.5px solid var(--red); background:white; color:var(--red); padding:10px 18px; border-radius:var(--radius-sm); cursor:pointer; font-size:13.5px; font-weight:700; font-family:inherit; transition:all .18s ease; display:inline-flex; align-items:center; gap:7px; }
        .btn-delete-danger svg { width:15px; height:15px; stroke-width:2.5; }
        .btn-delete-danger:hover { background:var(--red); color:white; box-shadow:0 6px 20px rgba(239,68,68,.4); }

        .btn-remove-row { border:1.5px solid #fca5a5; background:#fff5f5; color:#dc2626; padding:6px 14px; border-radius:8px; cursor:pointer; font-size:12.5px; font-weight:700; font-family:inherit; transition:all .18s ease; display:inline-flex; align-items:center; gap:6px; }
        .btn-remove-row svg { width:13px; height:13px; stroke-width:2.5; }
        .btn-remove-row:hover { background:#fee2e2; border-color:var(--red); }

        /* ── ANALYTICS RESULTS & CHART ── */
        .distance-pills {
            display: flex;
            flex-wrap: wrap;
            gap: 8px;
            margin-bottom: 20px;
        }
        .pill-btn {
            border: 1.5px solid var(--line);
            background: white;
            color: var(--muted);
            padding: 7px 16px;
            border-radius: 999px;
            cursor: pointer;
            font-size: 13px;
            font-weight: 700;
            font-family: inherit;
            transition: all .2s ease;
        }
        .pill-btn:hover {
            border-color: var(--blue-2);
            color: var(--blue);
            transform: translateY(-1px);
        }
        .pill-btn.active {
            background: var(--blue);
            border-color: var(--blue);
            color: white;
            box-shadow: 0 4px 14px rgba(37,99,235,.3);
        }
        .chart-card {
            position: relative;
            background: #fafcff;
            border: 1.5px solid var(--line);
            border-radius: var(--radius-sm);
            padding: 22px 20px 18px;
            margin-bottom: 20px;
        }
        .chart-stats-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
            gap: 14px;
            margin-bottom: 20px;
            padding-bottom: 16px;
            border-bottom: 1px dashed var(--line);
        }
        .chart-stat-item small {
            font-size: 11px;
            text-transform: uppercase;
            font-weight: 700;
            letter-spacing: .5px;
            color: var(--muted);
        }
        .chart-stat-item strong {
            display: block;
            font-size: 20px;
            font-weight: 900;
            color: var(--text);
            margin-top: 4px;
        }
        .chart-stat-item .trend-good {
            color: var(--green);
            font-size: 15px;
            font-weight: 800;
        }
        .chart-container-svg {
            position: relative;
            width: 100%;
            min-height: 260px;
        }
        .chart-container-svg svg {
            width: 100%;
            height: 260px;
            overflow: visible;
        }
        .chart-tooltip {
            position: absolute;
            pointer-events: none;
            background: rgba(15, 23, 42, 0.94);
            color: white;
            padding: 9px 13px;
            border-radius: 10px;
            font-size: 12.5px;
            box-shadow: 0 8px 24px rgba(0,0,0,.25);
            transition: opacity .15s ease, transform .15s ease;
            opacity: 0;
            z-index: 20;
            transform: translate(-50%, -115%);
            white-space: nowrap;
        }
        .chart-tooltip.visible {
            opacity: 1;
        }
        .chart-point {
            cursor: pointer;
            transition: r .2s ease, stroke-width .2s ease;
        }
        .chart-point:hover {
            r: 7;
        }
        .results-table-wrapper {
            overflow-x: auto;
            border-radius: var(--radius-sm);
            border: 1.5px solid var(--line);
            background: white;
        }
        .results-table {
            width: 100%;
            border-collapse: collapse;
            font-size: 14px;
            text-align: left;
        }
        .results-table th {
            background: #f8fafc;
            color: var(--muted);
            font-size: 11.5px;
            font-weight: 700;
            text-transform: uppercase;
            letter-spacing: .6px;
            padding: 14px 16px;
            border-bottom: 1.5px solid var(--line);
            white-space: nowrap;
        }
        .results-table td {
            padding: 14px 16px;
            border-bottom: 1px solid var(--line);
            vertical-align: middle;
        }
        .results-table tr:last-child td {
            border-bottom: none;
        }
        .results-table tr:hover td {
            background: #f8fafc;
        }
        .time-badge {
            display: inline-flex;
            align-items: center;
            gap: 6px;
            font-size: 15px;
            font-weight: 800;
            color: var(--blue);
        }
        .time-badge.is-pr {
            color: #d97706;
        }
        .pr-tag {
            background: #fef3c7;
            color: #b45309;
            font-size: 11px;
            font-weight: 800;
            padding: 3px 8px;
            border-radius: 999px;
            letter-spacing: .4px;
            display: inline-flex;
            align-items: center;
            gap: 4px;
        }
        .btn-delete-item {
            border: 1px solid #fca5a5;
            background: #fff5f5;
            color: #dc2626;
            padding: 6px 12px;
            border-radius: 8px;
            cursor: pointer;
            font-size: 12.5px;
            font-weight: 700;
            font-family: inherit;
            display: inline-flex;
            align-items: center;
            gap: 5px;
            transition: all .18s ease;
        }
        .btn-delete-item:hover {
            background: #dc2626;
            border-color: #dc2626;
            color: white;
            box-shadow: 0 4px 12px rgba(220,38,38,.25);
            transform: scale(1.05);
        }
        .btn-delete-item svg {
            width: 14px;
            height: 14px;
            stroke-width: 2.2;
        }
        .btn-outline-danger {
            border: 1.5px solid #fecaca;
            background: white;
            color: #dc2626;
            padding: 8px 14px;
            border-radius: 999px;
            cursor: pointer;
            font-size: 13px;
            font-weight: 600;
            font-family: inherit;
            display: inline-flex;
            align-items: center;
            gap: 6px;
            transition: all .18s ease;
        }
        .btn-outline-danger:hover {
            background: #fee2e2;
            border-color: #ef4444;
            color: #b91c1c;
            transform: translateY(-1px);
        }
        .btn-outline-danger svg {
            width: 14px;
            height: 14px;
            stroke-width: 2.2;
        }
        .text-danger { color: var(--red); font-weight: 800; }
        .zone-pill {
            display: inline-flex;
            align-items: center;
            gap: 6px;
            padding: 5px 12px;
            border-radius: 999px;
            font-size: 12px;
            font-weight: 700;
        }
        .zone-1 { background: #eff6ff; color: #1d4ed8; }
        .zone-2 { background: #f0fdf4; color: #15803d; }
        .zone-3 { background: #fefce8; color: #a16207; }
        .zone-4 { background: #fff7ed; color: #c2410c; }
        .zone-5 { background: #fef2f2; color: #b91c1c; }

        /* ── COMPETITION STATUS & REPORT STYLES ── */
        .comp-status-badge {
            display: inline-flex;
            align-items: center;
            gap: 5px;
            padding: 4px 11px;
            border-radius: 999px;
            font-size: 11.5px;
            font-weight: 800;
            letter-spacing: .3px;
            text-transform: uppercase;
        }
        .comp-status-upcoming {
            background: #e0f2fe;
            color: #0369a1;
            border: 1px solid #bae6fd;
        }
        .comp-status-today {
            background: #fef3c7;
            color: #b45309;
            border: 1px solid #fde68a;
            animation: pulseToday 2s infinite ease-in-out;
        }
        .comp-status-completed {
            background: #dcfce7;
            color: #15803d;
            border: 1px solid #bbf7d0;
        }
        @keyframes pulseToday {
            0%, 100% { box-shadow: 0 0 0 0 rgba(245, 158, 11, 0.4); }
            50% { box-shadow: 0 0 0 6px rgba(245, 158, 11, 0); }
        }
        .comp-distance-item {
            border: 1.5px solid var(--line);
            border-radius: var(--radius-sm);
            padding: 14px;
            background: #ffffff;
            margin-bottom: 10px;
            position: relative;
            transition: all .2s ease;
        }
        .comp-distance-item:hover {
            border-color: #bfdbfe;
        }
        .comp-distance-pill {
            display: inline-flex;
            align-items: center;
            gap: 6px;
            padding: 4px 10px;
            border-radius: 8px;
            font-size: 12.5px;
            font-weight: 700;
            background: #eff6ff;
            color: #1d4ed8;
            margin-right: 6px;
            margin-bottom: 6px;
        }

        /* ── RECOVERY SECTION STYLES ── */
        .recovery-log-card {
            border: 1.5px solid var(--line);
            border-radius: var(--radius-sm);
            padding: 18px 20px;
            background: #fafbff;
            margin-bottom: 14px;
            transition: all .2s ease;
        }
        .recovery-log-card:hover {
            border-color: #bfdbfe;
            box-shadow: var(--shadow-sm);
            transform: translateY(-2px);
        }
        .activity-chip {
            display: inline-flex;
            align-items: center;
            gap: 6px;
            padding: 8px 14px;
            border-radius: 12px;
            background: #f1f5f9;
            border: 1.5px solid #e2e8f0;
            cursor: pointer;
            font-size: 13.5px;
            font-weight: 600;
            transition: all .18s ease;
            user-select: none;
        }
        .activity-chip:hover {
            background: #e2e8f0;
            border-color: #cbd5e1;
        }
        .activity-chip.active {
            background: #eff6ff;
            border-color: var(--blue);
            color: var(--blue);
            box-shadow: 0 4px 12px rgba(37,99,235,.15);
        }
        .activity-badge {
            display: inline-flex;
            align-items: center;
            gap: 5px;
            padding: 4px 10px;
            border-radius: 8px;
            font-size: 12px;
            font-weight: 700;
            background: #f0fdf4;
            color: #15803d;
            border: 1px solid #bbf7d0;
        }

        /* ── STANDARDS / RANKS STYLES ── */
        .std-filter-bar {
            display: flex;
            align-items: center;
            gap: 12px;
            flex-wrap: wrap;
            margin-bottom: 22px;
        }
        .std-segmented {
            display: inline-flex;
            background: rgba(148, 163, 184, 0.14);
            border: 1px solid rgba(148, 163, 184, 0.22);
            border-radius: 9999px;
            padding: 4px;
            gap: 4px;
            max-width: 100%;
            overflow-x: auto;
            -webkit-overflow-scrolling: touch;
            scrollbar-width: none;
            box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.04);
        }
        .std-segmented::-webkit-scrollbar { display: none; }
        .std-seg-btn {
            border: none;
            background: transparent;
            padding: 7px 18px;
            border-radius: 9999px;
            font-size: 13px;
            font-weight: 600;
            cursor: pointer;
            color: var(--muted);
            font-family: inherit;
            transition: all 0.22s cubic-bezier(0.16, 1, 0.3, 1);
            display: inline-flex;
            align-items: center;
            gap: 6px;
            white-space: nowrap;
            flex-shrink: 0;
        }
        .std-seg-btn:hover {
            color: var(--text);
        }
        .std-seg-btn.active {
            background: white;
            color: var(--blue);
            box-shadow: 0 3px 12px rgba(0, 0, 0, 0.08);
            font-weight: 700;
        }
        .std-rank-pill {
            display: inline-block;
            font-size: 11.5px;
            font-weight: 700;
            padding: 3px 10px;
            border-radius: 9999px;
            text-align: center;
            white-space: nowrap;
            letter-spacing: .3px;
        }
        .rank-msmk { background: #fee2e2; color: #b91c1c; border: 1px solid #fecaca; }
        .rank-ms   { background: #ffedd5; color: #c2410c; border: 1px solid #fed7aa; }
        .rank-kms  { background: #fef3c7; color: #b45309; border: 1px solid #fde68a; }
        .rank-r1   { background: #ecfccb; color: #4d7c0f; border: 1px solid #d9f99d; }
        .rank-r2   { background: #dbeafe; color: #1d4ed8; border: 1px solid #bfdbfe; }
        .rank-r3   { background: #e0e7ff; color: #4338ca; border: 1px solid #c7d2fe; }
        .rank-y1   { background: #f3e8ff; color: #7e22ce; border: 1px solid #e9d5ff; }
        .standards-table-wrapper {
            overflow-x: auto;
            border-radius: var(--radius-sm);
            border: 1.5px solid var(--line);
            background: white;
            box-shadow: var(--shadow-sm);
        }
        .standards-table {
            width: 100%;
            border-collapse: collapse;
            font-size: 13.5px;
            text-align: center;
        }
        .standards-table th {
            background: #f8fafc;
            color: #334155;
            font-size: 12px;
            font-weight: 800;
            padding: 12px 10px;
            border-bottom: 2px solid var(--line);
            white-space: nowrap;
        }
        .standards-table th.col-distance {
            text-align: left;
            padding-left: 18px;
            position: sticky;
            left: 0;
            background: #f8fafc;
            z-index: 2;
        }
        .standards-table td {
            padding: 12px 10px;
            border-bottom: 1px solid var(--line);
            font-family: 'SF Mono', Consolas, Monaco, monospace;
            font-size: 13px;
            font-weight: 600;
            color: #1e293b;
            white-space: nowrap;
        }
        .standards-table td.cell-dist {
            text-align: left;
            padding-left: 18px;
            font-family: inherit;
            font-weight: 700;
            color: var(--text);
            position: sticky;
            left: 0;
            background: white;
            z-index: 1;
            border-right: 1.5px solid var(--line);
        }
        .standards-table tr:hover td {
            background: #f8fafc;
        }
        .standards-table tr:hover td.cell-dist {
            background: #f1f5f9;
        }
        .std-calc-box {
            background: linear-gradient(135deg, #f0f9ff 0%, #e0f2fe 100%);
            border: 1.5px solid #bae6fd;
            border-radius: var(--radius);
            padding: 22px 26px;
            margin-bottom: 28px;
        }
        .std-calc-result {
            margin-top: 18px;
            padding: 16px 20px;
            background: white;
            border-radius: 14px;
            border: 1.5px solid #bae6fd;
            display: flex;
            align-items: center;
            justify-content: space-between;
            flex-wrap: wrap;
            gap: 14px;
        }

        /* ── EQUIPMENT CHIPS & DRAFT BANNER ── */
        .equipment-chips {
            display: flex;
            flex-wrap: wrap;
            gap: 6px;
            margin-top: 6px;
        }
        .eq-chip {
            display: inline-flex;
            align-items: center;
            gap: 4px;
            font-size: 11px;
            font-weight: 600;
            padding: 4px 9px;
            border-radius: 12px;
            background: #f1f5f9;
            border: 1px solid var(--line);
            color: var(--text);
            cursor: pointer;
            user-select: none;
            transition: all .15s ease;
        }
        .eq-chip input[type="checkbox"] { display: none; }
        .eq-chip:hover { border-color: var(--blue-2); }
        .eq-chip.active,
        .eq-chip:has(input:checked) {
            background: rgba(37,99,235,0.12);
            border-color: var(--blue);
            color: var(--blue);
        }
        [data-theme="dark"] .eq-chip {
            background: #1e293b;
            border-color: #334155;
            color: #cbd5e1;
        }
        [data-theme="dark"] .eq-chip.active,
        [data-theme="dark"] .eq-chip:has(input:checked) {
            background: rgba(59,130,246,0.25);
            border-color: var(--blue-2);
            color: #93c5fd;
        }
        .draft-banner {
            background: rgba(245,158,11,0.1);
            border: 1px solid rgba(245,158,11,0.3);
            border-radius: 10px;
            padding: 10px 14px;
            margin-bottom: 16px;
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 12px;
            font-size: 13px;
            color: var(--text);
        }

        /* ── STOPWATCH & CSS CALCULATOR ── */
        .stopwatch-box {
            background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%);
            border-radius: 18px;
            padding: 26px;
            color: #ffffff;
            text-align: center;
            margin-bottom: 24px;
            box-shadow: 0 10px 30px rgba(15,23,42,0.2);
        }
        .stopwatch-time {
            font-size: 54px;
            font-weight: 800;
            font-variant-numeric: tabular-nums;
            letter-spacing: 2px;
        }
        .stopwatch-controls {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 12px;
            margin-top: 20px;
            flex-wrap: wrap;
        }
        .btn-sw {
            border: none;
            padding: 12px 24px;
            border-radius: var(--radius-sm);
            font-size: 15px;
            font-weight: 700;
            cursor: pointer;
            font-family: inherit;
            display: inline-flex;
            align-items: center;
            gap: 8px;
            transition: all .2s ease;
        }
        .btn-sw svg { width: 18px; height: 18px; stroke-width: 2.5; }
        .btn-sw-start {
            background: var(--green);
            color: white;
            box-shadow: 0 4px 14px rgba(34,197,94,.4);
        }
        .btn-sw-start:hover {
            transform: translateY(-2px);
            box-shadow: 0 6px 20px rgba(34,197,94,.5);
        }
        .btn-sw-start.running {
            background: var(--red);
            box-shadow: 0 4px 14px rgba(239,68,68,.4);
        }
        .btn-sw-split {
            background: var(--blue);
            color: white;
            box-shadow: 0 4px 14px rgba(37,99,235,.3);
        }
        .btn-sw-split:disabled {
            opacity: .4;
            cursor: not-allowed;
            box-shadow: none;
        }
        .btn-sw-reset {
            background: rgba(255,255,255,.15);
            color: white;
            border: 1px solid rgba(255,255,255,.2);
        }
        .btn-sw-reset:hover {
            background: rgba(255,255,255,.25);
        }
        .laps-table {
            width: 100%;
            border-collapse: collapse;
            margin-top: 18px;
            font-size: 13px;
        }
        .laps-table th {
            text-align: left;
            padding: 10px 12px;
            border-bottom: 2px solid var(--line);
            color: var(--muted);
            font-size: 12px;
            text-transform: uppercase;
        }
        .laps-table td {
            padding: 10px 12px;
            border-bottom: 1px solid var(--line);
            font-variant-numeric: tabular-nums;
        }

        /* ── CSS CALCULATOR ── */
        .css-hero-card {
            background: linear-gradient(135deg, #eff6ff 0%, #dbeafe 100%);
            border: 1.5px solid #93c5fd;
            border-radius: 16px;
            padding: 22px;
            margin-bottom: 24px;
            display: flex;
            align-items: center;
            justify-content: space-around;
            flex-wrap: wrap;
            gap: 16px;
        }
        [data-theme="dark"] .css-hero-card {
            background: linear-gradient(135deg, #1e293b 0%, #0f172a 100%);
            border-color: #3b82f6;
        }
        .css-big-val {
            font-size: 38px;
            font-weight: 900;
            color: var(--blue);
            line-height: 1;
        }
        [data-theme="dark"] .css-big-val { color: #60a5fa; }
        .css-zone-row {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 10px 14px;
            border-radius: 10px;
            margin-bottom: 8px;
            background: var(--bg);
            border: 1px solid var(--line);
            font-size: 13px;
        }

        /* ── PERSONAL BESTS & GOALS ── */
        .pb-toast {
            position: fixed;
            bottom: 24px;
            right: 24px;
            background: linear-gradient(135deg, #1e293b 0%, #0f172a 100%);
            color: white;
            border: 2px solid #f59e0b;
            padding: 16px 22px;
            border-radius: 16px;
            box-shadow: 0 12px 36px rgba(0,0,0,0.35);
            z-index: 9999;
            display: flex;
            align-items: center;
            gap: 14px;
            animation: slideUpFade 0.4s ease;
        }
        @keyframes slideUpFade {
            from { transform: translateY(40px); opacity: 0; }
            to { transform: translateY(0); opacity: 1; }
        }
        .goal-card {
            border: 1.5px solid var(--line);
            border-radius: 14px;
            padding: 16px 18px;
            background: var(--card);
            margin-bottom: 12px;
            transition: all .2s ease;
        }
        .goal-card:hover {
            border-color: #93c5fd;
            box-shadow: var(--shadow-sm);
        }
        .goal-progress {
            height: 8px;
            border-radius: 4px;
            background: var(--line);
            overflow: hidden;
            margin-top: 8px;
        }
        .goal-progress-bar {
            height: 100%;
            background: linear-gradient(90deg, var(--blue) 0%, var(--aqua) 100%);
            border-radius: 4px;
            transition: width 0.4s ease;
        }

        /* ── PERIOD COMPARISON & WORKLOAD ── */
        .compare-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
            gap: 14px;
            margin-top: 16px;
        }
        .compare-card {
            background: var(--bg);
            border: 1px solid var(--line);
            border-radius: 12px;
            padding: 14px;
        }
        .delta-badge {
            display: inline-flex;
            align-items: center;
            gap: 4px;
            padding: 2px 7px;
            border-radius: 6px;
            font-size: 11px;
            font-weight: 700;
        }
        .delta-pos { background: #dcfce7; color: #15803d; }
        .delta-neg { background: #fee2e2; color: #b91c1c; }
        .delta-neutral { background: #f1f5f9; color: #475569; }
        [data-theme="dark"] .delta-pos { background: rgba(34,197,94,0.2); color: #86efac; }
        [data-theme="dark"] .delta-neg { background: rgba(239,68,68,0.2); color: #fca5a5; }
        [data-theme="dark"] .delta-neutral { background: #334155; color: #cbd5e1; }

        .workload-gauge {
            border: 1.5px solid var(--line);
            border-radius: 16px;
            padding: 18px 22px;
            background: var(--card);
            margin-bottom: 22px;
        }
        .workload-bar-track {
            height: 12px;
            border-radius: 6px;
            background: linear-gradient(90deg, #60a5fa 0%, #22c55e 35%, #22c55e 65%, #f59e0b 80%, #ef4444 100%);
            position: relative;
            margin: 14px 0 8px;
        }
        .workload-pin {
            position: absolute;
            top: -4px;
            width: 20px;
            height: 20px;
            border-radius: 50%;
            background: #ffffff;
            border: 3px solid var(--text);
            transform: translateX(-50%);
            box-shadow: 0 2px 6px rgba(0,0,0,0.3);
            transition: left 0.4s ease;
        }

        /* ── NUTRITION SECTION STYLES ── */
        .nutri-day-nav {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 12px;
            flex-wrap: wrap;
            padding: 14px 18px;
            background: #fafbff;
            border-radius: var(--radius-sm);
            border: 1.5px solid var(--line);
            margin-bottom: 20px;
        }
        .nutri-day-controls {
            display: flex;
            align-items: center;
            gap: 8px;
            flex-wrap: wrap;
        }
        .nutri-day-controls input[type="date"] {
            border: 1.5px solid var(--line);
            background: #fff;
            padding: 8px 14px;
            border-radius: var(--radius-sm);
            font-size: 14px;
            font-weight: 600;
            color: var(--text);
            outline: none;
            cursor: pointer;
        }
        .nutri-day-controls input[type="date"]:focus {
            border-color: var(--blue);
        }
        .nutri-badge-workout {
            background: rgba(37,99,235,0.12);
            color: #2563eb;
            font-size: 13px;
            font-weight: 700;
            padding: 6px 14px;
            border-radius: 999px;
            display: inline-flex;
            align-items: center;
            gap: 6px;
        }
        .nutri-badge-rest {
            background: rgba(100,116,139,0.12);
            color: #64748b;
            font-size: 13px;
            font-weight: 700;
            padding: 6px 14px;
            border-radius: 999px;
            display: inline-flex;
            align-items: center;
            gap: 6px;
        }
        .nutri-dashboard-grid {
            display: grid;
            grid-template-columns: 280px 1fr 300px;
            gap: 18px;
            margin-bottom: 22px;
        }
        @media (max-width: 1100px) {
            .nutri-dashboard-grid {
                grid-template-columns: 1fr;
            }
        }
        .nutri-ring-panel {
            background: #fafbff;
            border: 1.5px solid var(--line);
            border-radius: var(--radius-sm);
            padding: 20px;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            text-align: center;
            position: relative;
        }
        .nutri-ring-panel .ring {
            margin-bottom: 12px;
        }
        .nutri-macros-col {
            display: flex;
            flex-direction: column;
            gap: 12px;
            justify-content: center;
        }
        .nutri-macro-bar-card {
            background: #fafbff;
            border: 1.5px solid var(--line);
            border-radius: var(--radius-sm);
            padding: 14px 18px;
            display: flex;
            flex-direction: column;
            gap: 8px;
            transition: all .2s ease;
        }
        .nutri-macro-bar-card:hover {
            border-color: #bfdbfe;
            box-shadow: var(--shadow-sm);
        }
        .nutri-macro-head {
            display: flex;
            justify-content: space-between;
            align-items: center;
            font-size: 13.5px;
            font-weight: 700;
        }
        .nutri-macro-nums {
            font-size: 13.5px;
            font-weight: 800;
            color: var(--text);
        }
        .nutri-macro-track {
            height: 10px;
            border-radius: 999px;
            background: #e2e8f0;
            overflow: hidden;
            position: relative;
        }
        .nutri-macro-fill {
            height: 100%;
            border-radius: 999px;
            transition: width .5s ease;
        }
        .nutri-water-card {
            background: linear-gradient(145deg, #f0fdf4 0%, #ecfeff 100%);
            border: 1.5px solid #a7f3d0;
            border-radius: var(--radius-sm);
            padding: 20px;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            gap: 14px;
        }
        .nutri-water-head {
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
        .nutri-water-val {
            font-size: 24px;
            font-weight: 900;
            color: #065f46;
        }
        .nutri-water-sub {
            font-size: 12.5px;
            color: #047857;
            font-weight: 600;
        }
        .nutri-water-track {
            height: 12px;
            background: rgba(6,182,212,0.2);
            border-radius: 999px;
            overflow: hidden;
        }
        .nutri-water-fill {
            height: 100%;
            background: linear-gradient(90deg, #06b6d4, #2563eb);
            border-radius: 999px;
            transition: width .4s ease;
        }
        .nutri-water-btns {
            display: flex;
            gap: 8px;
            flex-wrap: wrap;
        }
        .nutri-water-btn {
            background: #ffffff;
            border: 1px solid #6ee7b7;
            color: #065f46;
            font-size: 12.5px;
            font-weight: 700;
            padding: 6px 12px;
            border-radius: 8px;
            cursor: pointer;
            transition: all .18s ease;
            display: inline-flex;
            align-items: center;
            gap: 4px;
        }
        .nutri-water-btn:hover {
            background: #d1fae5;
            border-color: #34d399;
            transform: translateY(-1px);
        }
        .nutri-water-btn.reset-btn {
            border-color: #cbd5e1;
            color: #64748b;
        }
        .nutri-water-btn.reset-btn:hover {
            background: #f1f5f9;
            color: #ef4444;
        }

        /* Meal categories blocks */
        .nutri-meals-wrapper {
            display: flex;
            flex-direction: column;
            gap: 16px;
            margin-bottom: 28px;
        }
        .nutri-meal-block {
            border: 1.5px solid var(--line);
            border-radius: var(--radius-sm);
            background: #ffffff;
            overflow: hidden;
            transition: all .2s ease;
        }
        .nutri-meal-block:hover {
            border-color: #cbd5e1;
            box-shadow: var(--shadow-sm);
        }
        .nutri-meal-header {
            padding: 14px 18px;
            background: #fafbff;
            border-bottom: 1px solid var(--line);
            display: flex;
            justify-content: space-between;
            align-items: center;
            flex-wrap: wrap;
            gap: 10px;
        }
        .nutri-meal-title-group {
            display: flex;
            align-items: center;
            gap: 12px;
        }
        .nutri-meal-icon {
            width: 38px;
            height: 38px;
            border-radius: 12px;
            display: flex;
            align-items: center;
            justify-content: center;
            background: linear-gradient(135deg,#eff6ff,#e0e7ff);
            color: var(--blue);
            flex-shrink: 0;
        }
        .nutri-meal-icon svg {
            width: 20px;
            height: 20px;
            stroke-width: 2;
        }
        .nutri-meal-name {
            font-weight: 800;
            font-size: 16px;
            color: var(--text);
        }
        .nutri-meal-totals {
            font-size: 13px;
            font-weight: 600;
            color: var(--muted);
            display: flex;
            align-items: center;
            gap: 10px;
            flex-wrap: wrap;
        }
        .nutri-meal-items-list {
            padding: 12px 18px;
            display: flex;
            flex-direction: column;
            gap: 8px;
        }
        .nutri-food-row {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 10px 14px;
            border-radius: 10px;
            background: #f8fafc;
            border: 1px solid var(--line);
            gap: 12px;
            transition: background .15s ease;
        }
        .nutri-food-row:hover {
            background: #f1f5f9;
        }
        .nutri-food-row:hover .btn-delete {
            opacity: 1;
        }
        .nutri-food-main {
            display: flex;
            flex-direction: column;
            gap: 3px;
        }
        .nutri-food-name {
            font-weight: 700;
            font-size: 14px;
            color: var(--text);
        }
        .nutri-food-portion {
            font-size: 12px;
            color: var(--muted);
        }
        .nutri-food-meta {
            display: flex;
            align-items: center;
            gap: 10px;
        }
        .nutri-food-chips {
            display: flex;
            gap: 6px;
            flex-wrap: wrap;
            font-size: 11.5px;
            font-weight: 700;
        }
        .nutri-chip-cal { background: #fee2e2; color: #dc2626; padding: 3px 8px; border-radius: 6px; }
        .nutri-chip-p { background: #dbeafe; color: #1d4ed8; padding: 3px 8px; border-radius: 6px; }
        .nutri-chip-f { background: #fef3c7; color: #b45309; padding: 3px 8px; border-radius: 6px; }
        .nutri-chip-c { background: #dcfce7; color: #15803d; padding: 3px 8px; border-radius: 6px; }
        
        .nutri-meal-empty {
            padding: 16px;
            text-align: center;
            color: var(--muted);
            font-size: 13.5px;
            font-style: italic;
        }

        /* Swimmer Nutrient Timing */
        .timing-timeline {
            display: flex;
            flex-direction: column;
            gap: 16px;
            margin-top: 18px;
            position: relative;
        }
        .timing-timeline::before {
            content: '';
            position: absolute;
            top: 20px;
            bottom: 20px;
            left: 21px;
            width: 2.5px;
            background: #cbd5e1;
            border-radius: 2px;
        }
        .timing-step {
            display: flex;
            gap: 18px;
            align-items: flex-start;
            position: relative;
        }
        .timing-step-icon {
            width: 44px;
            height: 44px;
            border-radius: 50%;
            background: #ffffff;
            border: 2.5px solid var(--blue);
            display: flex;
            align-items: center;
            justify-content: center;
            flex-shrink: 0;
            z-index: 1;
            box-shadow: var(--shadow-sm);
        }
        .timing-step-icon svg {
            width: 20px;
            height: 20px;
            color: var(--blue);
            stroke-width: 2.2;
        }
        .timing-step-content {
            flex: 1;
            background: #fafbff;
            border: 1.5px solid var(--line);
            border-radius: var(--radius-sm);
            padding: 16px 18px;
        }
        .timing-step-time {
            font-size: 12px;
            font-weight: 800;
            text-transform: uppercase;
            letter-spacing: 0.5px;
            color: var(--blue);
            margin-bottom: 4px;
        }
        .timing-step-title {
            font-size: 15.5px;
            font-weight: 800;
            color: var(--text);
            margin-bottom: 6px;
        }
        .timing-step-desc {
            font-size: 13.5px;
            color: #475569;
            line-height: 1.6;
        }

        /* Supplement Cards */
        .supp-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
            gap: 16px;
            margin-top: 18px;
        }
        .supp-card {
            border: 1.5px solid var(--line);
            border-radius: var(--radius-sm);
            padding: 18px;
            background: #ffffff;
            transition: all .22s ease;
            display: flex;
            flex-direction: column;
            gap: 10px;
        }
        .supp-card:hover {
            border-color: #93c5fd;
            box-shadow: var(--shadow-sm);
            transform: translateY(-2px);
        }
        .supp-card-top {
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
        .supp-name {
            font-size: 15.5px;
            font-weight: 800;
            color: var(--text);
        }
        .supp-desc {
            font-size: 13.5px;
            color: #475569;
            line-height: 1.6;
        }
        .supp-dosage {
            font-size: 12.5px;
            font-weight: 700;
            color: var(--blue);
            background: rgba(37,99,235,0.08);
            padding: 6px 10px;
            border-radius: 8px;
            display: inline-block;
        }

        /* Preset Chips in Modal */
        .preset-chips-scroll {
            display: flex;
            gap: 8px;
            overflow-x: auto;
            padding-bottom: 8px;
            margin-bottom: 12px;
        }
        .preset-chip {
            padding: 6px 12px;
            border-radius: 999px;
            background: #f1f5f9;
            border: 1px solid var(--line);
            font-size: 12.5px;
            font-weight: 600;
            cursor: pointer;
            transition: all .15s ease;
            display: inline-flex;
            align-items: center;
            gap: 6px;
            user-select: none;
            white-space: nowrap;
        }
        .preset-chip:hover {
            background: #e2e8f0;
            border-color: #cbd5e1;
        }
        .preset-chip.active {
            background: var(--blue);
            color: #ffffff;
            border-color: var(--blue);
        }

        /* Dark Theme overrides for nutrition */
        [data-theme="dark"] .nutri-day-nav {
            background: #0d1527;
            border-color: #1e293b;
        }
        [data-theme="dark"] .nutri-day-controls input[type="date"] {
            background: #0b1120;
            border-color: #1e293b;
            color: #f1f5f9;
        }
        [data-theme="dark"] .nutri-ring-panel,
        [data-theme="dark"] .nutri-macro-bar-card,
        [data-theme="dark"] .nutri-meal-block,
        [data-theme="dark"] .supp-card,
        [data-theme="dark"] .timing-step-content {
            background: #0d1527;
            border-color: #1e293b;
            color: var(--text);
        }
        [data-theme="dark"] .nutri-macro-track {
            background: #1e293b;
        }
        [data-theme="dark"] .nutri-meal-header {
            background: #111a33;
            border-color: #1e293b;
        }
        [data-theme="dark"] .nutri-meal-icon {
            background: rgba(37,99,235,0.22);
            color: #60a5fa;
        }
        [data-theme="dark"] .nutri-food-row {
            background: #090e1c;
            border-color: #1e293b;
        }
        [data-theme="dark"] .nutri-food-row:hover {
            background: #10182b;
        }
        [data-theme="dark"] .timing-timeline::before {
            background: #1e293b;
        }
        [data-theme="dark"] .timing-step-icon {
            background: #0d1527;
            border-color: #38bdf8;
        }
        [data-theme="dark"] .timing-step-icon svg {
            color: #38bdf8;
        }
        [data-theme="dark"] .timing-step-desc,
        [data-theme="dark"] .supp-desc {
            color: #94a3b8;
        }
        [data-theme="dark"] .preset-chip {
            background: #1e293b;
            border-color: #334155;
            color: #94a3b8;
        }
        [data-theme="dark"] .preset-chip:hover {
            background: #334155;
            color: #f1f5f9;
        }
        [data-theme="dark"] .nutri-water-card {
            background: linear-gradient(145deg, #062b21 0%, #08293b 100%);
            border-color: #065f46;
        }
        [data-theme="dark"] .nutri-water-val {
            color: #34d399;
        }
        [data-theme="dark"] .nutri-water-sub {
            color: #6ee7b7;
        }
        [data-theme="dark"] .nutri-water-btn {
            background: #0a1f18;
            border-color: #065f46;
            color: #6ee7b7;
        }
        [data-theme="dark"] .nutri-water-btn:hover {
            background: #0f392c;
        }
        [data-theme="dark"] .nutri-water-btn.reset-btn {
            background: #1e293b;
            border-color: #334155;
            color: #94a3b8;
        }
        [data-theme="dark"] .nutri-water-btn.reset-btn:hover {
            color: #f87171;
        }
        [data-theme="dark"] .nutri-chip-cal { background: rgba(239,68,68,0.2); color: #fca5a5; }
        [data-theme="dark"] .nutri-chip-p { background: rgba(59,130,246,0.2); color: #93c5fd; }
        [data-theme="dark"] .nutri-chip-f { background: rgba(245,158,11,0.2); color: #fcd34d; }
        [data-theme="dark"] .nutri-chip-c { background: rgba(34,197,94,0.2); color: #86efac; }
        [data-theme="dark"] .supp-dosage { background: rgba(56,189,248,0.15); color: #38bdf8; }

        /* ── AUTH & CLOUD SYNC STYLES ── */
        .sync-status-indicator {
            width: 9px;
            height: 9px;
            border-radius: 50%;
            display: inline-block;
            margin-left: 5px;
            background: #94a3b8;
            box-shadow: 0 0 0 2px rgba(255,255,255,0.9);
            transition: all .2s ease;
        }
        .sync-status-indicator.green {
            background: #22c55e;
            box-shadow: 0 0 8px rgba(34,197,94,0.7);
        }
        .sync-status-indicator.orange {
            background: #f59e0b;
            box-shadow: 0 0 8px rgba(245,158,11,0.7);
        }
        .sync-status-indicator.blue {
            background: #3b82f6;
            box-shadow: 0 0 8px rgba(59,130,246,0.7);
        }
        .password-input-wrap {
            position: relative;
            display: flex;
            align-items: center;
        }
        .password-input-wrap input {
            width: 100%;
            padding-right: 44px !important;
        }
        .password-toggle-btn {
            position: absolute;
            right: 8px;
            top: 50%;
            transform: translateY(-50%);
            background: none;
            border: none;
            cursor: pointer;
            color: var(--muted);
            padding: 4px 6px;
            border-radius: 6px;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        .password-toggle-btn:hover {
            color: var(--text);
        }
        .auth-error-box {
            display: none;
            background: #fee2e2;
            border: 1px solid #f87171;
            color: #b91c1c;
            padding: 10px 14px;
            border-radius: 10px;
            font-size: 13px;
            font-weight: 600;
            margin-bottom: 14px;
            line-height: 1.4;
        }
        .cloud-guide-step {
            display: flex;
            gap: 12px;
            align-items: flex-start;
            margin-bottom: 10px;
            background: #f8fafc;
            padding: 10px 14px;
            border-radius: 10px;
            border: 1px solid var(--line);
        }
        .cloud-guide-num {
            width: 22px;
            height: 22px;
            border-radius: 50%;
            background: var(--blue);
            color: white;
            font-size: 11.5px;
            font-weight: 800;
            display: flex;
            align-items: center;
            justify-content: center;
            flex-shrink: 0;
            margin-top: 2px;
        }
        .cloud-guide-text {
            font-size: 13px;
            color: var(--text);
            line-height: 1.5;
        }
        [data-theme="dark"] .sync-status-indicator {
            box-shadow: 0 0 0 2px rgba(17,24,39,0.9);
        }
        [data-theme="dark"] .auth-error-box {
            background: rgba(239,68,68,0.2);
            border-color: #ef4444;
            color: #fca5a5;
        }
        [data-theme="dark"] .cloud-guide-step {
            background: #0d1527;
            border-color: #1e293b;
        }

        /* ── RESPONSIVE TABLET & MOBILE ADAPTATION ── */
        .sidebar-backdrop {
            display: none !important;
            position: fixed;
            inset: 0;
            background: rgba(15, 23, 42, 0.55);
            backdrop-filter: none !important;
            -webkit-backdrop-filter: none !important;
            filter: none !important;
            z-index: 9998;
            opacity: 0;
            pointer-events: none !important;
        }
        .sidebar-backdrop.active {
            display: block !important;
            opacity: 1;
            pointer-events: auto !important;
        }

        .btn-mobile-menu {
            display: none;
            align-items: center;
            gap: 7px;
            background: var(--blue-subtle, rgba(14, 165, 233, 0.12));
            border: 1.5px solid var(--blue, #0ea5e9);
            color: var(--blue, #0ea5e9);
            padding: 8px 14px;
            border-radius: 12px;
            font-size: 13.5px;
            font-weight: 700;
            cursor: pointer;
            transition: all 0.2s ease;
            white-space: nowrap !important;
            flex-shrink: 0 !important;
        }
        .btn-mobile-menu:hover,
        .btn-mobile-menu:active {
            background: var(--blue, #0ea5e9);
            color: white;
        }
        .btn-mobile-menu svg {
            width: 18px;
            height: 18px;
            flex-shrink: 0;
        }

        .btn-close-sidebar {
            display: none;
            align-items: center;
            justify-content: center;
            width: 32px;
            height: 32px;
            border-radius: 10px;
            background: rgba(255, 255, 255, 0.08);
            border: 1px solid rgba(255, 255, 255, 0.15);
            color: white;
            cursor: pointer;
            transition: all 0.2s ease;
            flex-shrink: 0 !important;
        }
        .btn-close-sidebar:hover {
            background: rgba(239, 68, 68, 0.2);
            color: #ef4444;
            border-color: #ef4444;
        }

        .sidebar-nav-title {
            font-size: 11px;
            font-weight: 800;
            text-transform: uppercase;
            letter-spacing: 0.08em;
            color: var(--muted);
            padding: 10px 14px 6px 14px;
            user-select: none;
        }

        @keyframes spin {
            from { transform: rotate(0deg); }
            to { transform: rotate(360deg); }
        }
        .spin-animation {
            animation: spin 0.8s linear infinite !important;
        }

        .mobile-top-header {
            display: none;
        }
        .table-responsive,
        .results-table-wrapper,
        .standards-table-wrapper,
        #pbTableContainer {
            width: 100%;
            max-width: 100%;
            overflow-x: auto;
            -webkit-overflow-scrolling: touch;
            border-radius: var(--radius-sm);
            box-sizing: border-box;
        }

        /* ── TABLET (769px - 1024px) ── */
        @media (min-width: 769px) and (max-width: 1024px) {
            .sidebar { width: 72px; padding: 20px 10px; }
            .logo-text { display: none; }
            .logo { justify-content: center; margin-bottom: 28px; }
            .nav button { justify-content: center; padding: 14px 8px; }
            .nav-label { display: none; }
            .nav-icon svg { width: 22px; height: 22px; }
            .sidebar-footer { display: none; }
            .main { padding: 24px 20px; }
            .cards { grid-template-columns: repeat(2, 1fr); }
            .grid { grid-template-columns: 1fr; }
        }

        /* ── MOBILE SMARTPHONES (<= 768px) ── */
        @media (max-width: 768px) {
            body::before, body::after {
                display: none !important;
            }

            .app {
                flex-direction: column !important;
                min-height: 100vh;
                overflow-x: hidden;
                position: static !important;
                z-index: auto !important;
            }

            /* Mobile Top Sticky Header */
            .mobile-top-header {
                display: flex !important;
                justify-content: space-between !important;
                align-items: center !important;
                position: sticky !important;
                top: 0 !important;
                z-index: 999 !important;
                background: var(--card) !important;
                backdrop-filter: none !important;
                -webkit-backdrop-filter: none !important;
                padding: 12px 14px !important;
                border-bottom: 1px solid var(--line) !important;
                margin: -16px -14px 16px -14px !important;
                box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08) !important;
                color: var(--text) !important;
            }

            .btn-mobile-menu {
                display: inline-flex !important;
            }

            .btn-close-sidebar {
                display: flex !important;
            }

            /* Slide-out Sidebar Drawer on Mobile */
            .sidebar {
                position: fixed !important;
                top: 0 !important;
                left: -320px !important;
                bottom: 0 !important;
                width: 290px !important;
                max-width: 85vw !important;
                height: 100% !important;
                height: 100vh !important;
                height: 100dvh !important;
                z-index: 999999 !important;
                background: var(--card) !important;
                backdrop-filter: none !important;
                -webkit-backdrop-filter: none !important;
                filter: none !important;
                border-right: 1px solid var(--line) !important;
                box-shadow: 12px 0 50px rgba(0, 0, 0, 0.35) !important;
                color: var(--text) !important;
                transition: left 0.22s cubic-bezier(0.16, 1, 0.3, 1) !important;
                display: flex !important;
                flex-direction: column !important;
                padding: 20px 16px !important;
                overflow-y: auto !important;
                -webkit-overflow-scrolling: touch;
                pointer-events: auto !important;
                touch-action: pan-y !important;
            }

            .sidebar.open {
                left: 0 !important;
                pointer-events: auto !important;
            }

            .sidebar-backdrop {
                z-index: 999990 !important;
                position: fixed !important;
                inset: 0 !important;
                background: rgba(0, 0, 0, 0.5) !important;
                backdrop-filter: none !important;
                -webkit-backdrop-filter: none !important;
                filter: none !important;
                touch-action: none;
            }

            .sidebar .logo {
                display: flex !important;
                margin-bottom: 24px !important;
                justify-content: space-between !important;
                align-items: center !important;
                width: 100% !important;
            }

            .sidebar .logo-text {
                display: block !important;
            }

            .sidebar .nav {
                display: flex !important;
                flex-direction: column !important;
                gap: 6px !important;
                overflow-y: auto !important;
                padding: 0 !important;
            }

            .sidebar .nav button {
                display: flex !important;
                flex-direction: row !important;
                align-items: center !important;
                justify-content: flex-start !important;
                gap: 12px !important;
                padding: 14px 16px !important;
                border-radius: 12px !important;
                width: 100% !important;
                text-align: left !important;
                background: transparent;
                min-width: 0 !important;
                cursor: pointer !important;
                pointer-events: auto !important;
                position: relative !important;
                z-index: 100000 !important;
                -webkit-tap-highlight-color: transparent !important;
                touch-action: manipulation !important;
            }

            .sidebar .nav button * {
                pointer-events: none !important;
            }

            .sidebar .nav button.active {
                background: rgba(14, 165, 233, 0.16) !important;
                color: #38bdf8 !important;
            }

            .sidebar .nav button .nav-icon svg {
                width: 20px !important;
                height: 20px !important;
            }

            .sidebar .nav button .nav-label {
                display: block !important;
                font-size: 14px !important;
                font-weight: 600 !important;
                max-width: none !important;
            }

            .sidebar .sidebar-footer {
                display: block !important;
                margin-top: auto !important;
                padding-top: 16px !important;
            }

            /* Main Content Area on Mobile */
            .main {
                flex: 1 !important;
                width: 100% !important;
                max-width: 100vw !important;
                box-sizing: border-box !important;
                padding: 16px 14px 24px 14px !important;
                overflow-x: hidden !important;
            }

            /* Header Top Bar on Mobile */
            .top {
                flex-direction: row !important;
                flex-wrap: wrap !important;
                justify-content: space-between !important;
                align-items: center !important;
                gap: 10px !important;
                margin-bottom: 18px !important;
            }

            .top > div:first-child h1 {
                font-size: 20px !important;
                line-height: 1.2 !important;
            }

            .top > div:first-child p {
                font-size: 12px !important;
            }

            .top > div:last-child {
                display: flex;
                align-items: center;
                gap: 8px;
            }

            .profile-chip {
                padding: 6px 10px !important;
                font-size: 12px !important;
            }

            /* Dashboard Cards & Grids on Mobile */
            .cards {
                grid-template-columns: repeat(2, 1fr) !important;
                gap: 10px !important;
                margin-bottom: 18px !important;
            }

            .card {
                padding: 14px 12px !important;
                border-radius: 14px !important;
            }

            .card-value {
                font-size: 19px !important;
            }

            .card-label {
                font-size: 11.5px !important;
            }

            .card-sub {
                font-size: 11px !important;
            }

            .panel {
                padding: 18px 14px !important;
                margin-bottom: 16px !important;
                border-radius: 16px !important;
            }

            .form-grid {
                grid-template-columns: 1fr !important;
                gap: 12px !important;
            }

            .grid {
                grid-template-columns: 1fr !important;
                gap: 14px !important;
            }

            /* Horizontally scrollable segmented controls */
            .std-segmented {
                overflow-x: auto !important;
                -webkit-overflow-scrolling: touch;
                scrollbar-width: none;
                width: 100% !important;
                box-sizing: border-box;
            }
            .std-segmented::-webkit-scrollbar {
                display: none;
            }
            .std-seg-btn {
                white-space: nowrap !important;
                padding: 8px 14px !important;
                font-size: 12.5px !important;
                border-radius: 9999px !important;
            }

            /* Filter buttons wrapping */
            .filter-btn-group,
            .distance-btn-group {
                display: flex;
                flex-wrap: wrap;
                gap: 6px;
            }

            /* Responsive Tables */
            .results-table-wrapper,
            .standards-table-wrapper,
            .table-responsive,
            #pbTableContainer {
                width: 100% !important;
                overflow-x: auto !important;
                -webkit-overflow-scrolling: touch;
                margin-bottom: 12px;
            }

            table {
                min-width: 440px;
            }

            /* Modals on mobile */
            .modal {
                padding: 12px !important;
                align-items: flex-end !important;
            }

            .modal > .panel {
                max-height: 88vh !important;
                overflow-y: auto !important;
                border-bottom-left-radius: 0 !important;
                border-bottom-right-radius: 0 !important;
                padding: 20px 16px !important;
                width: 100% !important;
                margin: 0 !important;
            }

            /* Nutrition grids on mobile */
            .nutri-dashboard-grid {
                grid-template-columns: 1fr !important;
                gap: 14px !important;
            }

            .nutri-meals-row {
                grid-template-columns: 1fr !important;
            }

            /* Calculators on mobile */
            .calc-grid,
            .pace-converter-grid {
                grid-template-columns: 1fr !important;
                gap: 12px !important;
            }
        }

        /* ── SMALL PHONES (<= 480px) ── */
        @media (max-width: 480px) {
            .mobile-header-logo strong {
                display: none !important;
            }
            .mobile-top-header {
                padding: 10px 12px !important;
                gap: 6px !important;
            }
            .btn-mobile-menu {
                padding: 6px 10px !important;
                font-size: 12px !important;
                gap: 5px !important;
            }
        }

        /* ── EXTRA SMALL PHONES (<= 400px) ── */
        @media (max-width: 400px) {
            .cards {
                grid-template-columns: 1fr !important;
            }
            .top > div:first-child h1 {
                font-size: 18px !important;
            }
            /* Keep proper full-sized touch targets on small phones */
            .sidebar .nav button {
                padding: 12px 14px !important;
            }
            .sidebar .nav button .nav-label {
                font-size: 13.5px !important;
            }
        }

        /* ── SWIMSMART PRO & AI COACH STYLES ── */
        .pro-nav-pill {
            background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
            color: #ffffff !important;
            font-size: 10px;
            font-weight: 900;
            padding: 2px 7px;
            border-radius: 999px;
            letter-spacing: 0.5px;
            margin-left: auto;
            box-shadow: 0 2px 6px rgba(245, 158, 11, 0.4);
            display: inline-flex;
            align-items: center;
        }
        .btn-pro-pill {
            display: inline-flex;
            align-items: center;
            gap: 6px;
            padding: 7px 13px;
            border-radius: 999px;
            font-size: 12px;
            font-weight: 800;
            background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
            color: #ffffff !important;
            border: none;
            cursor: pointer;
            box-shadow: 0 2px 10px rgba(245, 158, 11, 0.35);
            transition: transform .18s ease, box-shadow .18s ease;
        }
        .btn-pro-pill:hover {
            transform: translateY(-1.5px);
            box-shadow: 0 4px 14px rgba(245, 158, 11, 0.5);
        }
        .pro-badge-glow {
            background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
            color: #ffffff;
            font-size: 11px;
            font-weight: 900;
            padding: 3px 10px;
            border-radius: 999px;
            letter-spacing: 0.5px;
            box-shadow: 0 0 12px rgba(245, 158, 11, 0.55);
            display: inline-flex;
            align-items: center;
        }
        .pro-tariff-cards {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 14px;
            margin: 18px 0;
        }
        @media (max-width: 600px) {
            .pro-tariff-cards {
                grid-template-columns: 1fr;
            }
        }
        .pro-tariff-card {
            border: 2px solid var(--line);
            border-radius: 16px;
            padding: 16px;
            cursor: pointer;
            transition: all .2s ease;
            background: var(--card);
            position: relative;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
        }
        .pro-tariff-card:hover {
            border-color: #f59e0b;
            transform: translateY(-2px);
        }
        .pro-tariff-card.selected {
            border-color: #f59e0b;
            background: rgba(245, 158, 11, 0.05);
            box-shadow: 0 0 16px rgba(245, 158, 11, 0.25);
        }
        .pro-hit-badge {
            position: absolute;
            top: -10px;
            right: 12px;
            background: linear-gradient(135deg, #ef4444, #f59e0b);
            color: white;
            font-size: 10px;
            font-weight: 900;
            padding: 3px 8px;
            border-radius: 999px;
            text-transform: uppercase;
            box-shadow: 0 2px 6px rgba(239, 68, 68, 0.4);
        }
        .ai-set-block {
            padding: 14px 16px;
            border-radius: 14px;
            margin-bottom: 12px;
            border-left: 4px solid var(--blue);
            background: rgba(37, 99, 235, 0.04);
        }
        [data-theme="dark"] .ai-set-block {
            background: rgba(255, 255, 255, 0.03);
        }
        .ai-set-block.warmup {
            border-left-color: #06b6d4;
        }
        .ai-set-block.drills {
            border-left-color: #8b5cf6;
        }
        .ai-set-block.main {
            border-left-color: #ef4444;
        }
        .ai-set-block.cooldown {
            border-left-color: #10b981;
        }
        .ai-chat-bubble {
            padding: 12px 16px;
            border-radius: 16px;
            max-width: 85%;
            font-size: 13.5px;
            line-height: 1.5;
            margin-bottom: 12px;
        }
        .ai-chat-bubble.assistant {
            background: var(--card);
            border: 1px solid var(--line);
            color: var(--text);
            align-self: flex-start;
            border-bottom-left-radius: 4px;
        }
        .ai-chat-bubble.user {
            background: var(--grad-main);
            color: #ffffff;
            align-self: flex-end;
            border-bottom-right-radius: 4px;
        }
        .ai-chip-prompt {
            display: inline-flex;
            align-items: center;
            gap: 6px;
            padding: 6px 12px;
            border-radius: 999px;
            font-size: 12px;
            background: var(--card);
            border: 1px solid var(--line);
            color: var(--text);
            cursor: pointer;
            transition: all .15s ease;
            margin-right: 6px;
            margin-bottom: 6px;
        }
        .ai-chip-prompt:hover {
            border-color: var(--blue);
            color: var(--blue);
            transform: translateY(-1px);
        }


        /* Dark mode polish for PRO & AI Coach */
        [data-theme="dark"] .pro-tariff-card.selected {
            background: rgba(245, 158, 11, 0.12) !important;
            border-color: #f59e0b !important;
        }
        [data-theme="dark"] .ai-chat-bubble.assistant {
            background: #1e293b !important;
            border-color: rgba(255, 255, 255, 0.1) !important;
            color: #f1f5f9 !important;
        }
        [data-theme="dark"] .ai-chip-prompt {
            background: #1e293b !important;
            border-color: rgba(255, 255, 255, 0.12) !important;
            color: #cbd5e1 !important;
        }
        [data-theme="dark"] .ai-chip-prompt:hover {
            border-color: #60a5fa !important;
            color: #93c5fd !important;
        }
        [data-theme="dark"] #profileProBanner,
        [data-theme="dark"] #aiCoachStatusNotice {
            background: linear-gradient(135deg, rgba(245, 158, 11, 0.14), rgba(217, 119, 6, 0.07)) !important;
            border-color: rgba(245, 158, 11, 0.4) !important;
        }


/* ========================================================
   SWIMSMART POOLSIDE, METRONOME & PRINT SHEET ENHANCEMENTS
   ======================================================== */

.poolside-overlay {
    position: fixed;
    inset: 0;
    background: #020617;
    color: #ffffff;
    z-index: 99999;
    display: flex;
    flex-direction: column;
    padding: clamp(16px, 3vw, 32px);
    user-select: none;
    -webkit-user-select: none;
    touch-action: manipulation;
    box-sizing: border-box;
    overflow: hidden;
}

.poolside-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 2px solid #1e293b;
    padding-bottom: 12px;
}

.poolside-timer {
    font-size: clamp(68px, 16vw, 150px);
    font-weight: 900;
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
    letter-spacing: 2px;
    text-align: center;
    color: #22d3ee;
    text-shadow: 0 0 30px rgba(34, 211, 238, 0.45);
    margin: auto 0;
    line-height: 1.05;
}

.poolside-btn {
    font-size: 19px;
    font-weight: 800;
    padding: 16px 24px;
    border-radius: 16px;
    border: none;
    cursor: pointer;
    transition: transform 0.1s, opacity 0.2s, background 0.2s;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.poolside-btn:active {
    transform: scale(0.97);
}

.waterlock-screen {
    position: absolute;
    inset: 0;
    background: rgba(15, 23, 42, 0.95);
    backdrop-filter: none;
    z-index: 100000;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 24px;
}

.metronome-card {
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 24px;
    box-shadow: var(--shadow);
    text-align: center;
    max-width: 600px;
    margin: 0 auto;
}

.metronome-visual {
    width: 96px;
    height: 96px;
    border-radius: 50%;
    margin: 16px auto;
    background: radial-gradient(circle, #22d3ee 0%, #2563eb 100%);
    box-shadow: 0 0 0 0 rgba(34, 211, 238, 0.7);
    transition: transform 0.06s cubic-bezier(0.1, 0.9, 0.2, 1);
}

.metronome-visual.pulse {
    transform: scale(1.24);
    box-shadow: 0 0 40px 14px rgba(34, 211, 238, 0.85);
}

.preset-chip {
    padding: 8px 14px;
    border-radius: 12px;
    border: 1px solid var(--line);
    background: var(--bg);
    color: var(--text);
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.15s ease;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.preset-chip:hover {
    background: rgba(37, 99, 235, 0.1);
    border-color: var(--blue);
}

.preset-chip.active {
    background: var(--blue);
    color: #fff;
    border-color: var(--blue);
}

/* Print Sheet Styling for Poolside clipboard */
@media print {
    body {
        background: #ffffff !important;
        color: #000000 !important;
        font-size: 12pt !important;
    }
    .sidebar,
    .mobile-header,
    .sidebar-backdrop,
    .filter-tabs,
    .nav,
    .top button,
    .btn-delete,
    .modal,
    #sidebarBackdrop,
    #pbToastContainer,
    #toastContainer {
        display: none !important;
    }
    .app {
        display: block !important;
        padding: 0 !important;
    }
    .main-content {
        padding: 0 !important;
        margin: 0 !important;
    }
    .print-only-sheet {
        display: block !important;
        padding: 20px !important;
    }
    .print-table {
        width: 100%;
        border-collapse: collapse;
        margin-top: 15px;
    }
    .print-table th, .print-table td {
        border: 1px solid #333 !important;
        padding: 8px 12px !important;
        text-align: left;
    }
}


/* ==========================================================================
   ULTRA-CONTRAST BLACK & WHITE (DARK & LIGHT) THEME & RESPONSIVE ADAPTATION
   ========================================================================== */

/* ── 1. DARK / BLACK THEME (Obsidian OLED & Vivid Cyan) ── */
[data-theme="dark"] {
    --bg: #050811;
    --card: #0b1220;
    --text: #f8fafc;
    --muted: #94a3b8;
    --line: #1e293b;
    --blue: #3b82f6;
    --aqua: #22d3ee;
    --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.5);
    --shadow: 0 8px 30px rgba(0, 0, 0, 0.6);
    --shadow-lg: 0 20px 60px rgba(0, 0, 0, 0.8);
}

[data-theme="dark"] body {
    background-color: #050811 !important;
    color: #f8fafc !important;
}

[data-theme="dark"] .sidebar {
    background: #080e1a !important;
    border-right: 1px solid rgba(255, 255, 255, 0.08) !important;
}

[data-theme="dark"] .sidebar .nav button {
    color: #94a3b8;
}

[data-theme="dark"] .sidebar .nav button:hover {
    background: rgba(255, 255, 255, 0.05);
    color: #f8fafc;
}

[data-theme="dark"] .sidebar .nav button.active {
    background: linear-gradient(135deg, rgba(37, 99, 235, 0.25), rgba(6, 182, 212, 0.15)) !important;
    color: #38bdf8 !important;
    border-color: rgba(56, 189, 248, 0.4) !important;
}

[data-theme="dark"] .panel,
[data-theme="dark"] .card,
[data-theme="dark"] .workout-card,
[data-theme="dark"] .metronome-card,
[data-theme="dark"] .chart-card,
[data-theme="dark"] .modal .panel {
    background: #0b1220 !important;
    border: 1px solid #1e293b !important;
    color: #f8fafc !important;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4) !important;
}

[data-theme="dark"] .workout-card:hover {
    border-color: #38bdf8 !important;
    box-shadow: 0 10px 35px rgba(0, 0, 0, 0.6), 0 0 15px rgba(56, 189, 248, 0.15) !important;
}

[data-theme="dark"] .field input,
[data-theme="dark"] .field select,
[data-theme="dark"] .field textarea,
[data-theme="dark"] input[type="text"],
[data-theme="dark"] input[type="number"],
[data-theme="dark"] input[type="date"],
[data-theme="dark"] input[type="password"] {
    background: #070c18 !important;
    border: 1.5px solid #1e293b !important;
    color: #f8fafc !important;
}

[data-theme="dark"] .field input:focus,
[data-theme="dark"] .field select:focus,
[data-theme="dark"] .field textarea:focus {
    border-color: #38bdf8 !important;
    box-shadow: 0 0 0 3px rgba(56, 189, 248, 0.2) !important;
    background: #091224 !important;
}

[data-theme="dark"] .secondary {
    background: #0e172a !important;
    border: 1px solid #1e293b !important;
    color: #cbd5e1 !important;
}

[data-theme="dark"] .secondary:hover {
    background: #1e293b !important;
    border-color: #38bdf8 !important;
    color: #ffffff !important;
}

[data-theme="dark"] .category-switch,
[data-theme="dark"] .std-segmented {
    background: rgba(15, 23, 42, 0.65) !important;
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.35);
}

[data-theme="dark"] .filter-tabs {
    background: transparent !important;
    border: none !important;
    padding: 0 !important;
}

[data-theme="dark"] .filter-btn {
    background: rgba(15, 23, 42, 0.75) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    color: #94a3b8 !important;
}

[data-theme="dark"] .filter-btn:hover {
    background: #1e293b !important;
    color: #f8fafc !important;
    border-color: rgba(56, 189, 248, 0.4) !important;
}

[data-theme="dark"] .cat-btn,
[data-theme="dark"] .std-seg-btn {
    color: #94a3b8 !important;
}

[data-theme="dark"] .filter-btn.active {
    background: linear-gradient(135deg, #0284c7, #2563eb) !important;
    color: #ffffff !important;
    border-color: transparent !important;
    box-shadow: 0 4px 18px rgba(2, 132, 199, 0.45) !important;
}

[data-theme="dark"] .cat-btn.active,
[data-theme="dark"] .std-seg-btn.active {
    background: #1e293b !important;
    color: #38bdf8 !important;
    border-color: transparent !important;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4) !important;
}

[data-theme="dark"] .preset-chip {
    background: #070c18 !important;
    border: 1px solid #1e293b !important;
    color: #f1f5f9 !important;
}

[data-theme="dark"] .preset-chip:hover {
    background: #111d35 !important;
    border-color: #38bdf8 !important;
}

[data-theme="dark"] .preset-chip.active {
    background: #2563eb !important;
    color: #fff !important;
}

[data-theme="dark"] #printSheetPreviewContent {
    background: #080e1a !important;
    color: #f8fafc !important;
    border-color: #1e293b !important;
}

[data-theme="dark"] .print-table th {
    background: #0f172a !important;
    border-color: #1e293b !important;
    color: #94a3b8 !important;
}

[data-theme="dark"] .print-table td {
    border-color: #1e293b !important;
    color: #f8fafc !important;
}

[data-theme="dark"] .results-table th,
[data-theme="dark"] .standards-table th {
    background: #0e172a !important;
    border-color: #1e293b !important;
    color: #94a3b8 !important;
}

[data-theme="dark"] .results-table td,
[data-theme="dark"] .standards-table td {
    border-color: #1e293b !important;
    color: #f8fafc !important;
}

[data-theme="dark"] .results-table tr:hover td,
[data-theme="dark"] .standards-table tr:hover td {
    background: #111d35 !important;
}

[data-theme="dark"] .pro-tariff-card {
    background: #070c18 !important;
    border: 1.5px solid #1e293b !important;
}

[data-theme="dark"] .pro-tariff-card.selected {
    background: rgba(245, 158, 11, 0.12) !important;
    border-color: #f59e0b !important;
}

[data-theme="dark"] #proModalCurrentStatusBox,
[data-theme="dark"] #aiServerNotice,
[data-theme="dark"] #aiApiKeyHelpDeepseek,
[data-theme="dark"] #aiApiKeyHelpGemini {
    background: #070c18 !important;
    border-color: #1e293b !important;
    color: #cbd5e1 !important;
}

/* ── 2. LIGHT / WHITE THEME (Crisp Modern Athletic Palette) ── */
:root:not([data-theme="dark"]) {
    --bg: #f8fafc;
    --card: #ffffff;
    --text: #0f172a;
    --muted: #475569;
    --line: #e2e8f0;
    --blue: #2563eb;
    --aqua: #0284c7;
    --shadow-sm: 0 1px 3px rgba(15, 23, 42, 0.08);
    --shadow: 0 4px 20px -2px rgba(15, 23, 42, 0.08);
    --shadow-lg: 0 20px 40px -4px rgba(15, 23, 42, 0.12);
}

:root:not([data-theme="dark"]) body {
    background-color: #f8fafc !important;
    color: #0f172a !important;
}

:root:not([data-theme="dark"]) .panel,
:root:not([data-theme="dark"]) .card,
:root:not([data-theme="dark"]) .workout-card,
:root:not([data-theme="dark"]) .metronome-card,
:root:not([data-theme="dark"]) .chart-card {
    background: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
    box-shadow: 0 4px 20px -2px rgba(15, 23, 42, 0.06) !important;
}

:root:not([data-theme="dark"]) .workout-card:hover {
    border-color: #3b82f6 !important;
    box-shadow: 0 8px 30px rgba(37, 99, 235, 0.12) !important;
}

:root:not([data-theme="dark"]) .field input,
:root:not([data-theme="dark"]) .field select,
:root:not([data-theme="dark"]) .field textarea {
    background: #ffffff !important;
    border: 1.5px solid #cbd5e1 !important;
    color: #0f172a !important;
}

:root:not([data-theme="dark"]) .field input:focus,
:root:not([data-theme="dark"]) .field select:focus,
:root:not([data-theme="dark"]) .field textarea:focus {
    border-color: #2563eb !important;
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.15) !important;
}

/* ── 3. RESPONSIVE DESKTOP & MOBILE ADAPTATION ── */
@media (min-width: 1025px) {
    .main {
        max-width: 1380px;
        margin: 0 auto;
        padding: 32px 40px;
        width: calc(100% - 260px);
    }
    .cards {
        grid-template-columns: repeat(4, 1fr) !important;
        gap: 20px !important;
    }
}

@media (max-width: 1024px) and (min-width: 769px) {
    .main {
        padding: 24px;
        width: calc(100% - 240px);
    }
    .cards {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 16px !important;
    }
}

@media (max-width: 768px) {
    .main {
        padding: 12px 14px 56px 14px !important;
        width: 100% !important;
    }
    .cards {
        grid-template-columns: 1fr !important;
        gap: 12px !important;
    }
    .top {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 12px !important;
    }
    .top > div:last-child {
        width: 100%;
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
    }
    .top h1 {
        font-size: 24px !important;
    }
    .filter-tabs {
        overflow-x: auto !important;
        white-space: nowrap !important;
        -webkit-overflow-scrolling: touch;
        padding-bottom: 6px !important;
    }
    .filter-btn {
        padding: 8px 14px !important;
        font-size: 13px !important;
        flex-shrink: 0 !important;
    }
    .btn-mobile-menu,
    #mobileThemeBtn,
    #mobileLangBtn {
        min-height: 44px !important;
        min-width: 44px !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        border-radius: 12px !important;
    }
    .results-table-wrapper,
    .standards-table-wrapper {
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch;
        border-radius: 12px;
    }
}


/* ── THEME ENHANCEMENTS FOR MOBILE HEADER & SIDEBAR DRAWER ── */
:root:not([data-theme="dark"]) .mobile-top-header,
[data-theme="light"] .mobile-top-header {
    background: #ffffff !important;
    border-bottom: 1px solid #e2e8f0 !important;
    color: #0f172a !important;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06) !important;
}
:root:not([data-theme="dark"]) .sidebar,
[data-theme="light"] .sidebar {
    background: #ffffff !important;
    border-right: 1px solid #e2e8f0 !important;
    color: #0f172a !important;
}
:root:not([data-theme="dark"]) .sidebar .logo-text,
[data-theme="light"] .sidebar .logo-text {
    color: #0f172a !important;
}
:root:not([data-theme="dark"]) .sidebar-nav-title,
[data-theme="light"] .sidebar-nav-title {
    color: #64748b !important;
}
:root:not([data-theme="dark"]) .sidebar .nav button,
[data-theme="light"] .sidebar .nav button {
    color: #475569 !important;
}
:root:not([data-theme="dark"]) .sidebar .nav button:hover,
[data-theme="light"] .sidebar .nav button:hover {
    background: #f1f5f9 !important;
    color: #0f172a !important;
}
:root:not([data-theme="dark"]) .sidebar .nav button.active,
[data-theme="light"] .sidebar .nav button.active {
    background: #e0f2fe !important;
    color: #0284c7 !important;
    border: 1px solid #bae6fd !important;
}
:root:not([data-theme="dark"]) .btn-close-sidebar,
[data-theme="light"] .btn-close-sidebar {
    background: #f1f5f9 !important;
    border: 1px solid #cbd5e1 !important;
    color: #475569 !important;
}
[data-theme="dark"] .mobile-top-header {
    background: #080e1a !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
    color: #f8fafc !important;
}
[data-theme="dark"] .sidebar {
    background: #080e1a !important;
    border-right: 1px solid rgba(255, 255, 255, 0.12) !important;
    color: #f8fafc !important;
}
[data-theme="dark"] .sidebar .logo-text {
    color: #f8fafc !important;
}
[data-theme="dark"] .sidebar-nav-title {
    color: #94a3b8 !important;
}
[data-theme="dark"] .sidebar .nav button {
    color: #94a3b8 !important;
}
[data-theme="dark"] .sidebar .nav button:hover {
    background: rgba(255, 255, 255, 0.05) !important;
    color: #f8fafc !important;
}
[data-theme="dark"] .sidebar .nav button.active {
    background: rgba(14, 165, 233, 0.16) !important;
    color: #38bdf8 !important;
    border: 1px solid rgba(56, 189, 248, 0.4) !important;
}
[data-theme="dark"] .btn-close-sidebar {
    background: rgba(255, 255, 255, 0.08) !important;
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
    color: #94a3b8 !important;
}

/* ==========================================================================
   20 COMPLIANCE TASKS: ACCESSIBILITY, KEYBOARD FOCUS, LEGAL MODALS & COOKIES
   ========================================================================== */

/* 16. Keyboard Navigation & Accessibility: Visible Focus Rings */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
    outline: 2.5px solid #2563eb !important;
    outline-offset: 2px !important;
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.25) !important;
}

[data-theme="dark"] a:focus-visible,
[data-theme="dark"] button:focus-visible,
[data-theme="dark"] input:focus-visible,
[data-theme="dark"] select:focus-visible,
[data-theme="dark"] textarea:focus-visible {
    outline: 2.5px solid #38bdf8 !important;
    outline-offset: 2px !important;
    box-shadow: 0 0 0 3px rgba(56, 189, 248, 0.3) !important;
}

/* 15. WCAG AA Contrast Adjustments: High Legibility on dark and light */
.legal-tab-btn {
    padding: 7px 16px;
    font-size: 12.5px;
    font-weight: 700;
    border-radius: 9999px;
    border: 1px solid transparent;
    background: transparent;
    color: var(--muted);
    cursor: pointer;
    white-space: nowrap;
    transition: all 0.15s ease;
}

.legal-tab-btn:hover {
    color: var(--text);
    background: rgba(0, 0, 0, 0.04);
}

.legal-tab-btn.active {
    background: var(--card);
    color: var(--blue);
    border-color: var(--line);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.06);
}

[data-theme="dark"] .legal-tab-btn:hover {
    background: rgba(255, 255, 255, 0.05);
}

[data-theme="dark"] .legal-tab-btn.active {
    background: #1e293b;
    color: #38bdf8;
    border-color: rgba(255, 255, 255, 0.12);
}

#cookieConsentBanner {
    animation: cookieSlideUp 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes cookieSlideUp {
    from {
        opacity: 0;
        transform: translate(-50%, 20px);
    }
    to {
        opacity: 1;
        transform: translate(-50%, 0);
    }
}