﻿:root { --c: #008b9b; --c2: #006d7b; --bg: #f8fafe; --card: #fff; --border: #e8ecf1; --text: #1a1d23; --muted: #6b7280; --live: #dc3545; --success: #10b981; }
        * { margin: 0; padding: 0; box-sizing: border-box; }
        body { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; background: var(--bg); color: var(--text); -webkit-font-smoothing: antialiased; }
        
        /* Top Nav */
        .top-nav { background: #fff; border-bottom: 1px solid var(--border); padding: 0.6rem 0; position: sticky; top: 0; z-index: 100; }
        .top-nav-inner { max-width: 1400px; margin: 0 auto; padding: 0 1.25rem; display: flex; align-items: center; justify-content: space-between; }
        .nav-logo { display: flex; align-items: center; gap: 0.5rem; text-decoration: none; }
        .nav-logo img { height: 28px; }
        .nav-logo span { font-weight: 700; font-size: 1rem; color: var(--c); }
        .nav-actions { display: flex; gap: 0.5rem; align-items: center; }
        .nav-actions a, .nav-actions button { padding: 0.4rem 0.75rem; border-radius: 6px; font-size: 0.8rem; font-weight: 500; text-decoration: none; border: none; cursor: pointer; transition: all 0.15s; }
        .btn-nav { background: var(--c); color: #fff; }
        .btn-nav:hover { background: var(--c2); color: #fff; }
        .btn-nav-outline { background: none; color: var(--c); border: 1px solid var(--border); }
        .btn-nav-outline:hover { border-color: var(--c); }
        
        /* Event Header */
        .evt-header { padding: 1.5rem 0 0; }
        .evt-header-inner { max-width: 1400px; margin: 0 auto; padding: 0 1.25rem; }
        .evt-top-row { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
        .evt-title { font-size: 1.5rem; font-weight: 700; line-height: 1.2; }
        .evt-meta { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 0.4rem; font-size: 0.8rem; color: var(--muted); }
        .evt-meta span { display: flex; align-items: center; gap: 0.3rem; }
        .evt-meta i { font-size: 0.75rem; }
        .status-pill { display: inline-flex; align-items: center; gap: 0.3rem; padding: 0.3rem 0.7rem; border-radius: 20px; font-size: 0.7rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; }
        .status-pill.live { background: var(--live); color: #fff; animation: pulse 2s infinite; }
        .status-pill.upcoming { background: var(--c); color: #fff; }
        .status-pill.completed { background: #6b7280; color: #fff; }
        .status-pill.onhold { background: #6b7280; color: #fff; }
        .status-pill.break { background: #f59e0b; color: #fff; }
        @keyframes pulse { 0%,100%{opacity:1}50%{opacity:.7} }
        
        /* Stats Strip */
        .stats-strip { max-width: 1400px; margin: 0 auto; padding: 1rem 1.25rem; display: flex; gap: 0.5rem; flex-wrap: wrap; }
        .stat-chip { display: flex; align-items: center; gap: 0.4rem; background: #fff; border: 1px solid var(--border); border-radius: 8px; padding: 0.4rem 0.75rem; font-size: 0.78rem; }
        .stat-chip i { color: var(--c); font-size: 0.85rem; }
        .stat-chip strong { color: var(--text); }
        
        /* Section */
        .section { max-width: 1400px; margin: 0 auto; padding: 0 1.25rem 1.5rem; }
        .section-title { font-size: 0.75rem; font-weight: 700; text-transform: uppercase; letter-spacing: 1px; color: var(--muted); margin-bottom: 0.75rem; display: flex; align-items: center; gap: 0.4rem; }
        .section-title i { color: var(--c); }
        
        /* Live Now Banner */
        .live-banner { background: linear-gradient(135deg, #1a1d23 0%, #2d3748 100%); border-radius: 12px; padding: 1.25rem; margin-bottom: 1rem; }
        .live-banner-title { color: #fff; font-size: 0.82rem; font-weight: 700; text-transform: uppercase; letter-spacing: 1px; margin-bottom: 0.75rem; display: flex; align-items: center; gap: 0.4rem; }
        .live-viewers { font-size: 0.7rem; font-weight: 500; color: rgba(255,255,255,0.5); margin-left: auto; text-transform: none; letter-spacing: 0; display: flex; align-items: center; gap: 0.25rem; }
        .live-viewers i { font-size: 0.65rem; }
        .live-banner-title .dot { width: 9px; height: 9px; border-radius: 50%; background: var(--live); animation: pulse 1.5s infinite; }
        .live-heat-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(360px, 1fr)); gap: 0.75rem; }
        
        .live-card { background: rgba(255,255,255,0.06); border-radius: 10px; border: 1px solid rgba(255,255,255,0.12); overflow: hidden; box-shadow: 0 0 20px rgba(0,139,155,0.08); position: relative; }
        .timeout-banner { background: rgba(220,38,38,0.12); color: #fca5a5; font-size: 0.75rem; font-weight: 600; text-align: center; padding: 0.4rem 0.75rem; letter-spacing: 0.3px; animation: timeoutPulse 2s infinite; }
        .timeout-banner i { margin-right: 4px; }
        @keyframes timeoutPulse { 0%,100% { opacity: 0.7; } 50% { opacity: 1; } }
        .live-card-header { background: linear-gradient(135deg, rgba(0,139,155,0.35), rgba(0,139,155,0.2)); padding: 0.6rem 0.85rem; display: flex; justify-content: space-between; align-items: center; }
        .live-card-header .h-left { min-width: 0; overflow: hidden; }
        .live-card-header .h-title { color: #fff; font-size: 0.92rem; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
        .live-card-header .h-div { color: rgba(255,255,255,0.7); font-size: 0.75rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
        .live-card-header .h-right { display: flex; align-items: center; gap: 0; flex-shrink: 0; }
        .live-card-header .h-timer { color: #fff; font-family: 'Courier New', monospace; font-weight: 700; font-size: 1rem; text-align: right; min-width: 55px; }
        .live-card-header .h-sep { width: 1px; height: 1.4rem; background: rgba(255,255,255,0.15); margin: 0 0.5rem; }
        .live-card-header .h-needs-label { font-size: 0.65rem; color: rgba(255,255,255,0.35); text-transform: uppercase; letter-spacing: 0.5px; min-width: 55px; text-align: center; }
        .live-card-body { padding: 0; }
        .live-athlete { display: grid; grid-template-columns: 32px minmax(0, 1fr) auto; align-items: center; padding: 0.6rem 0.85rem; gap: 0.6rem; border-bottom: 1px solid rgba(255,255,255,0.05); border-left: 3px solid transparent; transition: background 0.3s, border-color 0.3s; }
        .live-athlete:last-child { border-bottom: none; }
        .live-athlete.zone-adv { border-left-color: #10b981; background: rgba(16,185,129,0.06); }
        .live-athlete.zone-elim { border-left-color: #f87171; background: rgba(248,113,113,0.04); }
        .la-pos { width: 28px; height: 28px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 0.75rem; font-weight: 700; color: #fff; }
        .la-info { min-width: 0; }
        .la-name { display: block; min-width: 0; color: #e5e7eb; font-size: 0.92rem; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
        .la-score-col { display: flex; align-items: center; gap: 0; }
        .la-score-section { text-align: right; min-width: 55px; }
        .la-score { color: #2dd4bf; font-weight: 700; font-size: 1.15rem; line-height: 1.2; }
        .la-waves { font-size: 0.6rem; color: rgba(255,255,255,0.35); line-height: 1.2; white-space: nowrap; }
        .la-sep { width: 1px; align-self: stretch; background: rgba(255,255,255,0.12); margin: 0 0.5rem; }
        .la-needs { font-size: 0.6rem; color: #fff; text-transform: uppercase; letter-spacing: 0.2px; line-height: 1.3; min-width: 60px; text-align: center; }
        @keyframes score-pulse { 0% { transform: scale(1); } 50% { transform: scale(1.15); } 100% { transform: scale(1); } }
        .la-score.pulse { animation: score-pulse 0.4s ease-out; }
        .live-card-footer { padding: 0.4rem 0.75rem; border-top: 1px solid rgba(255,255,255,0.06); display: flex; justify-content: flex-end; }
        .live-card-footer a { color: var(--c); font-size: 0.7rem; font-weight: 600; text-decoration: none; }
        .live-card-footer a:hover { text-decoration: underline; }
        
        /* Up Next */
        .upnext-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 0.6rem; }
        .upnext-card { background: var(--card); border: 1px solid var(--border); border-radius: 10px; overflow: hidden; border-left: 3px solid var(--c); transition: box-shadow 0.15s; cursor: pointer; }
        .upnext-card:hover { box-shadow: 0 2px 12px rgba(0,0,0,0.06); }
        .upnext-card-header { padding: 0.55rem 0.75rem; border-bottom: 1px solid var(--border); display: flex; justify-content: space-between; align-items: center; }
        .upnext-title { font-weight: 600; font-size: 0.8rem; }
        .upnext-div { font-size: 0.65rem; color: var(--muted); margin-top: 0.1rem; }
        .upnext-badge { font-size: 0.55rem; font-weight: 700; text-transform: uppercase; padding: 0.12rem 0.4rem; border-radius: 3px; background: rgba(0,139,155,0.1); color: var(--c); letter-spacing: 0.3px; }
        .upnext-athletes { padding: 0.35rem 0.75rem; }
        .upnext-ath { display: flex; align-items: center; gap: 0.4rem; padding: 0.2rem 0; font-size: 0.75rem; color: var(--text); }
        .upnext-dot { width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0; }
        .upnext-ath-name { display: block; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
        .upnext-more { font-size: 0.68rem; color: var(--muted); padding: 0.15rem 0; font-style: italic; }
        
        /* Division Tabs */
        .div-tabs-wrapper { position: relative; }
        .div-tabs-scroll-btn { position: absolute; top: 0; bottom: 2px; width: 28px; z-index: 2; border: none; background: linear-gradient(90deg, var(--bg) 60%, transparent); cursor: pointer; display: none; align-items: center; justify-content: center; color: var(--muted); font-size: 0.9rem; padding: 0; }
        .div-tabs-scroll-btn:hover { color: var(--c); }
        .div-tabs-scroll-btn.left { left: 0; }
        .div-tabs-scroll-btn.right { right: 0; background: linear-gradient(270deg, var(--bg) 60%, transparent); }
        .div-tabs-wrapper.show-left .div-tabs-scroll-btn.left { display: flex; }
        .div-tabs-wrapper.show-right .div-tabs-scroll-btn.right { display: flex; }
        .div-tabs { display: flex; gap: 0; box-shadow: inset 0 -2px 0 var(--border); margin-bottom: 1rem; overflow-x: auto; overflow-y: hidden; -webkit-overflow-scrolling: touch; scrollbar-width: none; padding-bottom: 2px; }
        .div-tabs::-webkit-scrollbar { display: none; }
        .div-tab { padding: 0.5rem 1rem; font-size: 0.8rem; font-weight: 500; color: var(--muted); border: none; background: none; cursor: pointer; white-space: nowrap; border-bottom: 2px solid transparent; transition: all 0.15s; text-align: left; flex-shrink: 0; border-radius: 6px 6px 0 0; }
        .div-tab:hover { color: var(--c); background: rgba(0,139,155,0.03); }
        .div-tab.active { color: var(--c); border-bottom-color: var(--c); font-weight: 600; background: rgba(0,139,155,0.05); }
        .div-tab-info { font-size: 0.6rem; color: var(--muted); font-weight: 400; display: block; line-height: 1.2; margin-top: 1px; }
        .div-tab.active .div-tab-info { color: var(--c); opacity: 0.7; }
        .div-tab-name { display: block; }
        .div-tab-progress { height: 2px; border-radius: 1px; background: var(--border); margin-top: 3px; overflow: hidden; }
        .div-tab-progress-fill { height: 100%; border-radius: 1px; background: var(--c); transition: width 0.3s; }
        .div-tab.active .div-tab-progress { background: rgba(0,139,155,0.15); }
        .div-content { display: none; }
        .div-content.active { display: block; }
        
        /* Round Tabs (sub-tabs within division) */
        .round-tabs { display: flex; gap: 0; box-shadow: inset 0 -1px 0 var(--border); margin-bottom: 0.75rem; overflow-x: auto; overflow-y: hidden; -webkit-overflow-scrolling: touch; scrollbar-width: none; padding-bottom: 1px; }
        .round-tabs::-webkit-scrollbar { display: none; }
        .round-tab { padding: 0.45rem 0.85rem; font-size: 0.75rem; font-weight: 500; color: var(--muted); border: none; background: none; cursor: pointer; white-space: nowrap; border-bottom: 2px solid transparent; transition: all 0.15s; display: flex; align-items: center; gap: 0.35rem; flex-shrink: 0; }
        .round-tab:hover { color: var(--c); }
        .round-tab.active { color: var(--c); border-bottom-color: var(--c); font-weight: 600; }
        .round-tab .rt-badge { font-size: 0.5rem; padding: 0.1rem 0.3rem; border-radius: 3px; font-weight: 700; text-transform: uppercase; line-height: 1; }
        .round-tab .rt-badge.in-progress { background: rgba(220,53,69,0.15); color: var(--live); }
        .round-tab .rt-badge.completed { background: rgba(16,185,129,0.15); color: var(--success); }
        .round-tab .rt-badge.on-hold { background: rgba(245,158,11,0.15); color: #d97706; }
        .round-tab .rt-badge.draft { background: rgba(107,114,128,0.1); color: var(--muted); }
        .round-content { display: none; }
        .round-content.active { display: block; }
        
        /* Round content area */
        
        /* Heat Card */
        .heat-card { background: var(--card); border: 1px solid var(--border); border-radius: 10px; margin-bottom: 0.5rem; overflow: hidden; transition: box-shadow 0.15s; }
        .heat-card:hover { box-shadow: 0 2px 12px rgba(0,0,0,0.06); }
        .heat-card.is-live { border-color: var(--live); border-width: 1px 1px 1px 3px; }
        .heat-card.is-hold { border-color: #f59e0b; border-width: 1px 1px 1px 3px; }
        .heat-card.is-done { border-color: var(--success); border-width: 1px 1px 1px 3px; }
        
        .hc-top { display: flex; justify-content: space-between; align-items: center; padding: 0.6rem 0.75rem; border-bottom: 1px solid var(--border); }
        .hc-name { font-weight: 600; font-size: 0.85rem; display: flex; align-items: center; gap: 0.4rem; }
        .hc-status { font-size: 0.6rem; font-weight: 700; text-transform: uppercase; padding: 0.15rem 0.5rem; border-radius: 3px; }
        .hc-status.live { background: var(--live); color: #fff; }
        .hc-status.paused { background: #f59e0b; color: #1f2937; }
        .hc-status.done { background: var(--success); color: #fff; }
        .hc-status.upcoming { background: rgba(0,139,155,0.1); color: var(--c); }
        
        .hc-athletes { padding: 0; }
        .hc-ath { display: grid; grid-template-columns: 26px minmax(0, 1fr) 55px; align-items: center; padding: 0.4rem 0.75rem; gap: 0.3rem; border-bottom: 1px solid #f3f4f6; font-size: 0.8rem; }
        .hc-ath:last-child { border-bottom: none; }
        .hc-jersey { width: 22px; height: 22px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 0.55rem; font-weight: 700; color: #fff; }
        .hc-ath-name { display: block; min-width: 0; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
        .hc-ath-score { font-weight: 700; text-align: right; color: var(--c); font-size: 0.85rem; }
        .hc-ath-score.penalty { color: var(--live); }
        .hc-ath.hc-advancing { background: rgba(22,163,74,0.06); }
        .hc-ath .hc-rank { font-size: 0.6rem; font-weight: 700; color: #fff; width: 16px; height: 16px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; position: absolute; top: -4px; right: -4px; z-index: 1; }
        .hc-ath .hc-rank.r1 { background: linear-gradient(135deg, #ffd700, #ffb300); color: #1f2937; }
        .hc-ath .hc-rank.r2 { background: linear-gradient(135deg, #c0c0c0, #a0a0a0); color: #1f2937; }
        .hc-ath .hc-rank.r3 { background: linear-gradient(135deg, #cd7f32, #b8691a); }
        .hc-ath .hc-advance-icon { color: var(--success); font-size: 0.6rem; margin-left: 0.2rem; }
        
        .hc-bottom { padding: 0.4rem 0.75rem; background: #fafbfc; display: flex; justify-content: space-between; align-items: center; }
        .hc-bottom-info { font-size: 0.7rem; color: var(--muted); display: flex; gap: 0.75rem; }
        .hc-bottom-info span { display: flex; align-items: center; gap: 0.2rem; }
        .hc-watch { font-size: 0.7rem; font-weight: 600; color: var(--live); text-decoration: none; display: flex; align-items: center; gap: 0.25rem; }
        .hc-watch:hover { text-decoration: underline; }
        
        /* Placeholder athletes (next round TBD) */
        .hc-placeholder-sep { border-top: 1px dashed var(--border); margin: 0; }
        .hc-ath.placeholder { opacity: 0.85; background: rgba(0,139,155,0.02); padding: 0.3rem 0.75rem; }
        .hc-ath.placeholder .hc-ath-name { font-style: italic; color: var(--muted); font-size: 0.75rem; }
        .hc-ath.placeholder .hc-jersey { opacity: 0.6; border: 1.5px dashed rgba(0,0,0,0.15); }
        .hc-ath .tbd-badge { font-size: 0.5rem; background: rgba(0,139,155,0.08); color: var(--c); padding: 0.08rem 0.25rem; border-radius: 3px; font-weight: 600; letter-spacing: 0.3px; }
        
        /* Officials */
        .officials-grid { display: flex; flex-wrap: wrap; gap: 0.5rem; }
        .official-chip { display: flex; align-items: center; gap: 0.4rem; background: #fff; border: 1px solid var(--border); border-radius: 8px; padding: 0.4rem 0.75rem; font-size: 0.78rem; }
        .official-chip i { color: var(--c); }
        .official-chip.head { border-color: var(--c); background: rgba(0,139,155,0.05); }
        
        /* Share */
        .share-row { display: flex; gap: 0.5rem; align-items: center; }
        .share-input { flex: 1; padding: 0.4rem 0.65rem; border: 1px solid var(--border); border-radius: 6px; font-size: 0.78rem; color: var(--muted); background: #fff; }
        .share-btn { padding: 0.4rem 0.65rem; border: 1px solid var(--border); border-radius: 6px; background: #fff; cursor: pointer; font-size: 0.8rem; color: var(--muted); transition: all 0.15s; }
        .share-btn:hover { border-color: var(--c); color: var(--c); }
        
        /* Division skeleton placeholder */
        .div-skel-tabs { display: flex; gap: 0.5rem; padding-bottom: 0.6rem; margin-bottom: 0.75rem; border-bottom: 1px solid var(--border); }
        
        /* Skeleton Loading â€” premium shimmer */
        @keyframes skel-shimmer { 0% { background-position: -200% 0; } 100% { background-position: 200% 0; } }
        @keyframes skel-pulse { 0%,100% { opacity: 0.6; } 50% { opacity: 1; } }
        .skel { background: linear-gradient(90deg, #e5e7eb 25%, #f3f4f6 37%, #e5e7eb 63%) !important; background-size: 400% 100%; animation: skel-shimmer 1.8s ease-in-out infinite; color: transparent !important; border-color: transparent !important; pointer-events: none; border: none !important; }
        .skel * { visibility: hidden; }
        .skel-text { display: inline-block; border-radius: 4px; height: 0.8em; min-width: 40px; }
        .skel-circle { border-radius: 50% !important; }
        .skel-score { display: inline-block; border-radius: 4px; width: 36px; height: 0.85em; }
        /* Live card skeleton */
        .live-card .skel { background: linear-gradient(90deg, rgba(255,255,255,0.06) 25%, rgba(255,255,255,0.12) 37%, rgba(255,255,255,0.06) 63%) !important; background-size: 400% 100%; animation: skel-shimmer 1.8s ease-in-out infinite; }
        /* Fade out skeleton â†’ loaded */
        .skel-fade { transition: opacity 0.3s ease; }
        .skel-fade.loaded { opacity: 0; pointer-events: none; }
        
        /* Last Heat Results Banner */
        .lhr-banner { background: linear-gradient(135deg, #f0fdf4 0%, #ecfdf5 50%, #f0fdfa 100%); border: 1px solid rgba(16,185,129,0.15); border-radius: 14px; overflow: hidden; }
        .lhr-header { padding: 0.75rem 1rem; display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; flex-wrap: wrap; }
        .lhr-title { font-size: 0.78rem; font-weight: 700; color: #065f46; display: flex; align-items: center; gap: 0.4rem; }
        .lhr-title i { color: #10b981; }
        .lhr-heat-info { font-size: 0.72rem; color: #6b7280; }
        .lhr-body { padding: 0 0.75rem 0.75rem; }
        .lhr-results { display: flex; flex-direction: column; gap: 0.3rem; }
        .lhr-row { display: flex; align-items: center; gap: 0.65rem; padding: 0.5rem 0.65rem; background: #fff; border-radius: 10px; border: 1px solid #e8ecf1; transition: all 0.12s; }
        .lhr-row.advanced { border-color: rgba(16,185,129,0.25); background: linear-gradient(135deg, #fff 0%, #f0fdf4 100%); }
        .lhr-row.champion { border-color: #fde68a; background: linear-gradient(135deg, #fffbeb 0%, #fef3c7 100%); }
        .lhr-pos { width: 28px; height: 28px; border-radius: 8px; display: flex; align-items: center; justify-content: center; font-size: 0.72rem; font-weight: 800; flex-shrink: 0; }
        .lhr-pos.p1 { background: linear-gradient(135deg, #f59e0b, #d97706); color: #fff; }
        .lhr-pos.p2 { background: linear-gradient(135deg, #94a3b8, #64748b); color: #fff; }
        .lhr-pos.p3 { background: linear-gradient(135deg, #d97706, #b45309); color: #fff; }
        .lhr-pos.other { background: #f3f4f6; color: #6b7280; }
        .lhr-jersey { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; border: 1px solid rgba(0,0,0,0.1); }
        .lhr-name { flex: 1; font-size: 0.82rem; font-weight: 600; color: #1e293b; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
        .lhr-score { font-size: 0.88rem; font-weight: 800; color: #1e293b; font-variant-numeric: tabular-nums; min-width: 42px; text-align: right; }
        .lhr-advance-badge { font-size: 0.58rem; font-weight: 700; text-transform: uppercase; padding: 1px 6px; border-radius: 3px; white-space: nowrap; }
        .lhr-advance-badge.adv { background: rgba(16,185,129,0.15); color: #059669; }
        .lhr-advance-badge.champ { background: rgba(245,158,11,0.15); color: #d97706; }

        /* Notify Me Banner */
        .notify-banner { max-width: 1400px; margin: 0 auto; padding: 0 1.25rem 0.5rem; }
        .notify-card { display: flex; align-items: center; gap: 0.75rem; background: linear-gradient(135deg, #f0fdfa 0%, #e6f7f9 100%); border: 1px solid rgba(0,139,155,0.15); border-radius: 12px; padding: 0.75rem 1rem; flex-wrap: wrap; }
        .notify-card .nc-icon { width: 36px; height: 36px; border-radius: 10px; background: var(--c); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
        .notify-card .nc-icon i { color: #fff; font-size: 1rem; }
        .notify-card .nc-text { flex: 1; min-width: 180px; }
        .notify-card .nc-title { font-size: 0.82rem; font-weight: 700; color: #1e293b; }
        .notify-card .nc-sub { font-size: 0.72rem; color: var(--muted); margin-top: 1px; }
        .notify-card .nc-form { display: flex; gap: 0.4rem; align-items: center; flex-wrap: wrap; }
        .notify-card .nc-input { padding: 0.45rem 0.75rem; border: 1.5px solid rgba(0,139,155,0.25); border-radius: 8px; font-size: 0.8rem; font-family: inherit; min-width: 200px; background: #fff; color: var(--text); outline: none; transition: border-color 0.15s; }
        .notify-card .nc-input:focus { border-color: var(--c); box-shadow: 0 0 0 3px rgba(0,139,155,0.1); }
        .notify-card .nc-input::placeholder { color: #b0b8c4; }
        .notify-card .nc-btn { padding: 0.45rem 1rem; border: none; border-radius: 8px; background: var(--c); color: #fff; font-size: 0.8rem; font-weight: 600; cursor: pointer; transition: background 0.15s; white-space: nowrap; display: inline-flex; align-items: center; gap: 0.3rem; }
        .notify-card .nc-btn:hover { background: var(--c2); }
        .notify-card .nc-btn:disabled { opacity: 0.5; cursor: default; }
        .notify-card .nc-btn.subscribed { background: #10b981; }
        .notify-card .nc-btn.subscribed:hover { background: #059669; }
        .notify-card .nc-status { font-size: 0.72rem; color: var(--muted); display: flex; align-items: center; gap: 0.25rem; flex-wrap: wrap; line-height: 1.3; }
        .notify-card .nc-status.active { color: #10b981; font-weight: 600; }
        @media (max-width: 480px) {
            .notify-card { padding: 0.65rem 0.75rem; }
            .notify-card .nc-input { min-width: 160px; width: 100%; }
            .notify-card .nc-form { width: 100%; }
        }

        /* Footer */
        .evt-footer { max-width: 1400px; margin: 0 auto; padding: 1.5rem 1.25rem; border-top: 1px solid var(--border); display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 0.5rem; font-size: 0.75rem; color: var(--muted); }
        .evt-footer a { color: var(--c); text-decoration: none; }
        
        /* Heat Detail Modal */
        .hdm-backdrop { display:none; position:fixed; inset:0; background:rgba(0,0,0,0.5); z-index:9998; backdrop-filter:blur(2px); }
        .hdm-backdrop.show { display:block; }
        .hdm-modal { display:none; position:fixed; top:50%; left:50%; transform:translate(-50%,-50%); background:#fff; border-radius:14px; width:94vw; max-width:540px; max-height:85vh; overflow:hidden; z-index:9999; box-shadow:0 20px 60px rgba(0,0,0,0.25); }
        .hdm-modal.show { display:flex; flex-direction:column; }
        .hdm-head { padding:1rem 1.25rem; border-bottom:1px solid var(--border); display:flex; justify-content:space-between; align-items:flex-start; }
        .hdm-title { font-size:1rem; font-weight:700; }
        .hdm-subtitle { font-size:0.72rem; color:var(--muted); margin-top:0.15rem; }
        .hdm-close { background:none; border:none; font-size:1.3rem; cursor:pointer; color:var(--muted); padding:0; line-height:1; }
        .hdm-close:hover { color:var(--text); }
        .hdm-body { overflow-y:auto; padding:0; flex:1; }
        .hdm-status-bar { padding:0.5rem 1.25rem; background:#fafbfc; border-bottom:1px solid var(--border); display:flex; gap:0.75rem; align-items:center; font-size:0.75rem; color:var(--muted); }
        .hdm-status-bar i { color:var(--c); }
        .hdm-athlete { border-bottom:1px solid #f3f4f6; }
        .hdm-athlete:last-child { border-bottom:none; }
        .hdm-ath-header { display:grid; grid-template-columns:28px 1fr auto; align-items:center; gap:0.5rem; padding:0.65rem 1.25rem; cursor:pointer; transition:background 0.12s; }
        .hdm-ath-header:hover { background:#f8fafe; }
        .hdm-ath-jersey { width:24px; height:24px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:0.6rem; font-weight:700; color:#fff; position:relative; }
        .hdm-ath-rank { position:absolute; top:-3px; right:-5px; width:14px; height:14px; border-radius:50%; font-size:0.5rem; font-weight:700; display:flex; align-items:center; justify-content:center; color:#fff; }
        .hdm-ath-rank.r1 { background:linear-gradient(135deg,#ffd700,#ffb300); color:#1f2937; }
        .hdm-ath-rank.r2 { background:linear-gradient(135deg,#c0c0c0,#a0a0a0); color:#1f2937; }
        .hdm-ath-rank.r3 { background:linear-gradient(135deg,#cd7f32,#b8691a); }
        .hdm-ath-rank.rn { background:#6b7280; }
        .hdm-ath-info { min-width:0; }
        .hdm-ath-name { font-weight:600; font-size:0.85rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
        .hdm-ath-name.advancing { color:var(--success); }
        .hdm-ath-needs { font-size:0.65rem; color:var(--muted); margin-top:0.1rem; }
        .hdm-ath-needs .needs-val { font-weight:700; color:#e11d48; }
        .hdm-ath-scores { text-align:right; }
        .hdm-ath-total { font-size:1.05rem; font-weight:700; color:var(--c); }
        .hdm-ath-total.penalty { color:var(--live); }
        .hdm-ath-best2 { font-size:0.65rem; color:var(--muted); margin-top:0.1rem; }
        .hdm-waves { display:none; padding:0.4rem 1.25rem 0.65rem 3.5rem; background:#fafbfc; }
        .hdm-waves.show { display:block; }
        .hdm-wave-row { display:flex; justify-content:space-between; align-items:center; padding:0.2rem 0; font-size:0.78rem; }
        .hdm-wave-label { color:var(--muted); font-weight:500; }
        .hdm-wave-score { font-weight:700; color:var(--text); }
        .hdm-wave-score.is-best { color:var(--c); }
        .hdm-wave-score.is-penalty { color:var(--live); }
        .hdm-no-scores { padding:2rem 1.25rem; text-align:center; color:var(--muted); font-size:0.85rem; }
        .hdm-loading { padding:2.5rem 1.25rem; text-align:center; color:var(--muted); font-size:0.85rem; }
        .hdm-waves-section { border-top:1px solid var(--border); padding:0.75rem 0; }
        .hdm-waves-title { font-size:0.7rem; font-weight:700; text-transform:uppercase; letter-spacing:0.5px; color:var(--muted); padding:0 1.25rem 0.5rem; }
        .hdm-waves-table { width:100%; border-collapse:collapse; font-size:0.78rem; }
        .hdm-waves-table th { color:var(--muted); font-weight:600; text-align:center; padding:0.3rem 0.4rem; font-size:0.68rem; border-bottom:1px solid var(--border); }
        .hdm-waves-table td { text-align:center; padding:0.35rem 0.4rem; color:var(--text); font-weight:500; border-bottom:1px solid #f3f4f6; }
        .hdm-waves-table .wt-name { text-align:left; font-weight:600; color:var(--muted); font-size:0.75rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:120px; padding-left:1.25rem; display:flex; align-items:center; gap:5px; }
        .wt-dot { width:8px; height:8px; border-radius:50%; flex-shrink:0; display:inline-block; }
        .hdm-waves-table .wt-total { font-weight:700; color:var(--c); }
        .hdm-waves-table .wt-best { background:rgba(0,139,155,0.1); color:var(--c); font-weight:700; border-radius:3px; }
        .hdm-waves-table .wt-penalty { color:var(--live); }
        .hdm-waves-table tr:last-child td { border-bottom:none; }
        .hdm-footer { padding:0.6rem 1.25rem; border-top:1px solid var(--border); display:flex; justify-content:flex-end; gap:0.5rem; }
        .hdm-footer a { font-size:0.78rem; font-weight:600; color:var(--c); text-decoration:none; display:flex; align-items:center; gap:0.3rem; }
        .hdm-footer a:hover { text-decoration:underline; }
        
        /* Not found */
        .not-found { text-align: center; padding: 5rem 2rem; }
        .not-found i { font-size: 3rem; color: #d1d5db; }
        
        /* Registration CTA */
        .reg-cta { display: flex; align-items: center; justify-content: space-between; gap: 1rem; background: linear-gradient(135deg, #1a1d23 0%, #2d3748 100%); border-radius: 12px; padding: 1.25rem 1.5rem; color: #fff; flex-wrap: wrap; }
        .reg-cta-text h3 { font-size: 1rem; font-weight: 700; margin: 0 0 0.15rem; }
        .reg-cta-text p { font-size: 0.8rem; opacity: 0.7; margin: 0; }
        .reg-cta-btn { display: inline-flex; align-items: center; gap: 0.4rem; background: var(--c); color: #fff; border: none; border-radius: 8px; padding: 0.6rem 1.25rem; font-size: 0.85rem; font-weight: 600; text-decoration: none; transition: background 0.15s; white-space: nowrap; }
        .reg-cta-btn:hover { background: var(--c2); color: #fff; }
        
        /* Responsive */
        @media (max-width: 768px) {
            .evt-title { font-size: 1.2rem; }
            .live-heat-cards { grid-template-columns: 1fr; }
            .live-banner { padding: 1rem; }
            .live-card-header { padding: 0.5rem 0.7rem; }
            .live-card-header .h-title { font-size: 0.85rem; }
            .live-card-header .h-timer { font-size: 0.9rem; }
            .live-athlete { padding: 0.5rem 0.7rem; grid-template-columns: 28px minmax(0, 1fr) auto; }
            .la-pos { width: 24px; height: 24px; font-size: 0.65rem; }
            .la-name { font-size: 0.82rem; }
            .la-score { font-size: 1rem; }
            .la-needs { font-size: 0.55rem; min-width: 50px; }
            .la-waves { font-size: 0.5rem; }
            .upnext-cards { grid-template-columns: 1fr; }
            .stats-strip { gap: 0.4rem; }
            .stat-chip { font-size: 0.72rem; padding: 0.3rem 0.6rem; }
            .div-tab { padding: 0.5rem 0.75rem; font-size: 0.75rem; }
        }
        @media (max-width: 480px) {
            .top-nav-inner { padding: 0 0.75rem; }
            .section { padding: 0 0.75rem 1.25rem; }
            .stats-strip { padding: 0.75rem; }
            .evt-header-inner { padding: 0 0.75rem; }
            .hc-ath { grid-template-columns: 24px minmax(0, 1fr) 50px; padding: 0.35rem 0.5rem; }
        }
        
        /* Event Chat */
        .chat-fab { position: fixed; bottom: 1.25rem; right: 1.25rem; z-index: 9000; width: 48px; height: 48px; border-radius: 50%; background: var(--c); color: #fff; border: none; cursor: pointer; box-shadow: 0 4px 16px rgba(0,0,0,0.2); display: flex; align-items: center; justify-content: center; font-size: 1.2rem; transition: transform 0.15s, box-shadow 0.15s; }
        .chat-fab:hover { transform: scale(1.08); box-shadow: 0 6px 20px rgba(0,0,0,0.3); }
        .chat-fab .chat-badge { position: absolute; top: -2px; right: -2px; width: 18px; height: 18px; border-radius: 50%; background: var(--live); color: #fff; font-size: 0.55rem; font-weight: 700; display: none; align-items: center; justify-content: center; border: 2px solid #fff; }
        .chat-fab .chat-badge.show { display: flex; }
        .chat-panel { position: fixed; bottom: 1.25rem; right: 1.25rem; z-index: 9001; width: 320px; max-width: calc(100vw - 1.5rem); height: 400px; max-height: 60vh; background: #fff; border-radius: 14px; box-shadow: 0 8px 40px rgba(0,0,0,0.18); display: none; flex-direction: column; overflow: hidden; }
        .chat-panel.open { display: flex; }
        .chat-head { background: linear-gradient(135deg, #1a1d23 0%, #2d3748 100%); color: #fff; padding: 0.6rem 0.85rem; display: flex; align-items: center; justify-content: space-between; flex-shrink: 0; }
        .chat-head-title { font-size: 0.78rem; font-weight: 700; display: flex; align-items: center; gap: 0.35rem; }
        .chat-head-title i { font-size: 0.7rem; opacity: 0.7; }
        .chat-head-close { background: none; border: none; color: rgba(255,255,255,0.7); font-size: 1rem; cursor: pointer; padding: 0; line-height: 1; }
        .chat-head-close:hover { color: #fff; }
        .chat-msgs { flex: 1; overflow-y: auto; padding: 0.5rem 0.75rem; display: flex; flex-direction: column; gap: 0.35rem; background: #f8fafe; }
        .chat-msg { max-width: 100%; display: flex; flex-direction: column; }
        .chat-msg-nick { font-size: 0.62rem; font-weight: 700; color: var(--muted); display: inline-flex; align-items: center; gap: 0.2rem; }
        .chat-msg-nick .verified { color: var(--c); cursor: help; font-size: 0.6rem; }
        .chat-msg-text { font-size: 0.78rem; color: var(--text); line-height: 1.35; word-break: break-word; }
        .chat-msg-time { font-size: 0.5rem; color: #c0c0c0; margin-left: 0.3rem; }
        .chat-msg.system { text-align: center; }
        .chat-msg.system .chat-msg-text { font-size: 0.68rem; color: var(--muted); font-style: italic; }
        .chat-msg.mine { align-items: flex-end; }
        .chat-msg.mine .chat-msg-bubble { background: rgba(0,139,155,0.12); border-radius: 12px 12px 4px 12px; margin-left: auto; max-width: 80%; }
        .chat-msg.mine .chat-msg-nick { text-align: right; }
        .chat-msg:not(.mine):not(.system) .chat-msg-bubble { background: rgba(0,0,0,0.04); border-radius: 12px 12px 12px 4px; margin-right: 2.5rem; }
        .chat-msg-bubble { padding: 0.3rem 0.55rem; }
        .chat-input-row { display: flex; gap: 0; border-top: 1px solid var(--border); flex-shrink: 0; background: #fff; }
        .chat-input { flex: 1; border: none; outline: none; padding: 0.55rem 0.75rem; font-size: 0.8rem; font-family: inherit; }
        .chat-input::placeholder { color: #bbb; }
        .chat-input:disabled { background: #f3f4f6; }
        .chat-send { border: none; background: none; color: var(--c); padding: 0 0.75rem; font-size: 1rem; cursor: pointer; }
        .chat-send:hover { color: var(--c2); }
        .chat-send:disabled { color: #ccc; cursor: default; }
        .chat-nick-bar { display: flex; border-top: 1px solid var(--border); background: #f0f9ff; flex-shrink: 0; align-items: center; }
        .chat-disabled { flex: 1; display: flex; align-items: center; justify-content: center; padding: 1.5rem; text-align: center; color: var(--muted); font-size: 0.78rem; background: #f8fafe; }
        @media (max-width: 480px) {
            .chat-panel { width: calc(100vw - 1rem); right: 0.5rem; bottom: 0.5rem; height: 350px; }
            .chat-fab { bottom: 0.75rem; right: 0.75rem; width: 44px; height: 44px; }
        }
