/* ================================================================
   Calcutta Pool — Components (v3 Visual Overhaul)
   Bloomberg terminal / FanDuel aesthetic
   ================================================================ */

/* ── Global resets & base ───────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }

body {
    background: var(--bg-primary);
    color: var(--text-primary);
    font-family: var(--font-body);
    font-size: var(--text-base);
    line-height: var(--leading-normal);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Noise texture overlay */
body::after {
    content: '';
    position: fixed;
    inset: 0;
    opacity: 0.015;
    pointer-events: none;
    z-index: var(--z-noise);
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E");
    background-repeat: repeat;
}

::selection { background: var(--accent); color: var(--bg-primary); }

h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-display);
    font-weight: var(--weight-bold);
    line-height: var(--leading-tight);
    letter-spacing: var(--tracking-tight);
}

/* Numbers and money should always use display font */
.money, [data-type="money"], .stat-value, .hero-pool {
    font-family: var(--font-display);
    font-variant-numeric: tabular-nums;
}

/* Section labels — quiet, not competing */
.section-label {
    font-size: var(--text-sm);
    font-weight: var(--weight-semibold);
    text-transform: uppercase;
    letter-spacing: var(--tracking-widest);
    color: var(--text-secondary);
    margin-bottom: var(--space-4);
}

/* ── Scrollbar ─────────────────────────────────────────────── */
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: var(--bg-primary); }
::-webkit-scrollbar-thumb { background: #2A3350; border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: var(--text-muted); }

/* ── Links ─────────────────────────────────────────────────── */
a { color: var(--blue); text-decoration: none; transition: color var(--duration-fast); }
a:hover { color: var(--blue-bright); text-decoration: none; }

/* ── Cards ──────────────────────────────────────────────────── */
.card {
    background: linear-gradient(145deg, #131825 0%, #0F1420 100%) !important;
    border: 1px solid var(--border-subtle) !important;
    border-radius: var(--radius-lg) !important;
    box-shadow: var(--shadow-md);
    overflow: hidden;
    transition: all var(--duration-normal) ease;
}

.card-header {
    background: rgba(255, 255, 255, 0.03) !important;
    border-bottom: 1px solid var(--border-subtle) !important;
    border-radius: var(--radius-lg) var(--radius-lg) 0 0 !important;
    padding: var(--space-3) var(--space-4);
}

.card-body { padding: var(--space-4); }

.card-footer {
    background: rgba(255, 255, 255, 0.02) !important;
    border-top: 1px solid var(--border-subtle) !important;
    padding: var(--space-3) var(--space-4);
}

/* Card interaction variants */
.card-hover:hover {
    transform: translateY(-2px);
    border-color: rgba(255, 255, 255, 0.12) !important;
    box-shadow: var(--shadow-lg);
}

.card-accent  { border-left: 3px solid var(--accent) !important; }
.card-success { border-left: 3px solid var(--accent) !important; }
.card-danger  { border-left: 3px solid var(--red) !important; }

.card-glass {
    background: rgba(19, 24, 37, 0.7) !important;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid var(--border-subtle) !important;
}

.card-eliminated {
    opacity: 0.5;
    border-left: 3px solid var(--text-muted) !important;
}
.card-eliminated:hover { opacity: 0.8; }

/* ── Stat Cards ─────────────────────────────────────────────── */
.stat-value {
    font-family: var(--font-display);
    font-weight: var(--weight-bold);
    font-size: var(--text-4xl);
    line-height: var(--leading-tight);
}
.stat-value-accent { color: var(--accent); }
.stat-value-green  { color: var(--accent); }
.stat-value-gold   { color: var(--gold); }

.stat-label {
    font-size: 12px;
    font-weight: var(--weight-medium);
    text-transform: uppercase;
    letter-spacing: var(--tracking-wider);
    color: var(--text-secondary);
    margin-top: var(--space-1);
}

/* Pool total glow */
.pool-total {
    position: relative;
    display: inline-block;
}
.pool-total::after {
    content: '';
    position: absolute;
    inset: -20px;
    background: radial-gradient(circle, rgba(52, 211, 153, 0.12) 0%, transparent 70%);
    z-index: -1;
    filter: blur(20px);
}

/* ── Tables — Bloomberg terminal style ────────────────────── */
.table-dark {
    --bs-table-bg: transparent;
    --bs-table-striped-bg: rgba(255, 255, 255, 0.02);
    --bs-table-hover-bg: rgba(255, 255, 255, 0.03);
}

.table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    font-family: var(--font-display);
    font-size: 14px;
}

.table th {
    background: rgba(255, 255, 255, 0.03);
    color: var(--text-secondary);
    font-size: 11px;
    font-weight: var(--weight-semibold);
    text-transform: uppercase;
    letter-spacing: var(--tracking-widest);
    padding: 10px 16px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
    border-top: none !important;
    text-align: left;
    position: sticky;
    top: 0;
    z-index: var(--z-base);
    white-space: nowrap;
}

.table td {
    padding: 12px 16px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.04) !important;
    border-top: none !important;
    vertical-align: middle;
    white-space: nowrap;
}

.table-hover tbody tr {
    transition: background-color var(--duration-fast);
}
.table-hover tbody tr:hover {
    background-color: rgba(255, 255, 255, 0.03) !important;
}

/* Money columns */
.text-end {
    font-family: var(--font-display);
    font-variant-numeric: tabular-nums;
}
td.money, td[data-type="money"] {
    font-family: var(--font-display);
    font-variant-numeric: tabular-nums;
    font-weight: var(--weight-semibold);
}
.positive { color: var(--accent); }
.negative { color: var(--red); }

/* Leaderboard rank rows */
.leaderboard-gold, .rank-1 {
    background: transparent !important;
    border-left: 3px solid var(--rank-gold);
}
.leaderboard-silver, .rank-2 {
    background: transparent !important;
    border-left: 3px solid var(--rank-silver);
}
.leaderboard-bronze, .rank-3 {
    background: transparent !important;
    border-left: 3px solid var(--rank-bronze);
}

.row-highlight {
    background: var(--accent-subtle) !important;
    border-left: 3px solid var(--accent);
}

/* Eliminated team row */
.row-eliminated { opacity: 0.45; }
.row-eliminated:hover { opacity: 0.7; }
.row-eliminated .team-name-cell { text-decoration: line-through; text-decoration-color: var(--text-muted); }

/* Sortable table headers */
.sortable-th {
    cursor: pointer;
    user-select: none;
    white-space: nowrap;
    transition: color var(--duration-fast);
}
.sortable-th:hover { color: var(--accent) !important; }
.sortable-th .sort-icon {
    display: inline-block;
    width: 12px;
    font-size: 0.6rem;
    color: var(--text-muted);
    margin-left: 2px;
    vertical-align: middle;
}
.sortable-th.sort-asc .sort-icon::after { content: '\25B2'; color: var(--accent); }
.sortable-th.sort-desc .sort-icon::after { content: '\25BC'; color: var(--accent); }
.sortable-th:not(.sort-asc):not(.sort-desc) .sort-icon::after { content: '\25B4\25BE'; font-size: 0.5rem; }

/* Scrollable table */
.table-responsive-custom { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.table-responsive-custom .table th:first-child,
.table-responsive-custom .table td:first-child {
    position: sticky;
    left: 0;
    z-index: var(--z-base);
    background: var(--bg-surface);
}

/* ── Badges ─────────────────────────────────────────────────── */
.badge {
    font-family: var(--font-display);
    font-weight: var(--weight-semibold);
    font-size: 11px;
    letter-spacing: var(--tracking-wide);
    border-radius: var(--radius-full);
}

.badge-seed {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px; height: 24px;
    border-radius: 50%;
    font-family: var(--font-display);
    font-weight: var(--weight-bold);
    font-size: 11px;
    border: 2px solid;
}

.badge-alive {
    background: rgba(52, 211, 153, 0.15);
    color: var(--accent);
    padding: 2px 10px;
    border-radius: var(--radius-full);
    font-size: 11px;
    font-weight: var(--weight-semibold);
    border: none;
}

.badge-eliminated {
    background: rgba(248, 113, 113, 0.1);
    color: var(--red);
    padding: 2px 10px;
    border-radius: var(--radius-full);
    font-size: 11px;
    font-weight: var(--weight-semibold);
    border: none;
}

.badge-live {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: rgba(251, 146, 60, 0.15);
    color: var(--amber);
    font-size: 11px;
    font-weight: var(--weight-bold);
    text-transform: uppercase;
    letter-spacing: var(--tracking-widest);
    padding: 3px 10px;
    border-radius: var(--radius-full);
}
.badge-live::before {
    content: '';
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--amber);
    animation: pulse-live 1.5s ease-in-out infinite;
}
@keyframes pulse-live {
    0%, 100% { opacity: 1; box-shadow: 0 0 0 0 rgba(251, 146, 60, 0.5); }
    50% { opacity: 0.6; box-shadow: 0 0 0 6px rgba(251, 146, 60, 0); }
}

/* ── Buttons ────────────────────────────────────────────────── */
.btn {
    font-family: var(--font-body);
    font-weight: var(--weight-semibold);
    font-size: 14px;
    border-radius: var(--radius-md);
    transition: all var(--duration-fast) ease;
    cursor: pointer;
}

/* Primary — emerald green CTA */
.btn-primary, .btn-warning {
    background: var(--accent) !important;
    border-color: var(--accent) !important;
    color: var(--bg-primary) !important;
    font-weight: var(--weight-semibold);
}
.btn-primary:hover, .btn-warning:hover {
    background: var(--accent-hover) !important;
    border-color: var(--accent-hover) !important;
    color: var(--bg-primary) !important;
    box-shadow: var(--shadow-glow);
    transform: translateY(-1px);
}
.btn-primary:active, .btn-warning:active {
    transform: translateY(0);
    box-shadow: none;
}

/* Secondary / ghost */
.btn-secondary, .btn-ghost {
    background: transparent;
    color: var(--text-primary);
    font-weight: var(--weight-medium);
    border: 1px solid var(--border-strong);
}
.btn-secondary:hover, .btn-ghost:hover {
    background: var(--bg-active);
    border-color: rgba(255, 255, 255, 0.25);
    color: var(--text-primary);
}

/* Success */
.btn-success {
    background: var(--accent);
    border-color: var(--accent);
    color: var(--bg-primary);
}
.btn-success:hover {
    background: var(--accent-hover);
    border-color: var(--accent-hover);
    transform: translateY(-1px);
    box-shadow: var(--shadow-glow);
}

/* Danger */
.btn-danger, .btn-outline-danger {
    border-color: var(--red);
    color: var(--red);
}
.btn-danger {
    background: var(--red);
    color: var(--bg-primary);
}

/* Outline variants */
.btn-outline-light, .btn-outline-secondary {
    border: 1px solid var(--border-strong);
    color: var(--text-primary);
    background: transparent;
}
.btn-outline-light:hover, .btn-outline-secondary:hover {
    background: var(--bg-active);
    border-color: rgba(255, 255, 255, 0.25);
    color: var(--text-primary);
}

/* ── Form inputs ────────────────────────────────────────────── */
.form-control, .form-select,
input[type="text"], input[type="email"], input[type="password"],
input[type="number"], select, textarea {
    background: var(--bg-elevated) !important;
    border: 1px solid var(--border-default);
    border-radius: var(--radius-md);
    color: var(--text-primary) !important;
    font-family: var(--font-body);
    font-size: var(--text-base);
    padding: 12px 16px;
    outline: none;
    transition: border-color var(--duration-fast) ease, box-shadow var(--duration-fast) ease;
}
.form-control:focus, .form-select:focus,
input:focus, select:focus, textarea:focus {
    border-color: var(--accent) !important;
    box-shadow: 0 0 0 3px rgba(52, 211, 153, 0.12) !important;
}
.form-control::placeholder, input::placeholder { color: #4A5568; }

.form-label, label {
    font-size: var(--text-sm);
    font-weight: var(--weight-medium);
    color: var(--text-secondary);
    margin-bottom: 6px;
    display: block;
}

/* ── Filter pills / tab toggles ─────────────────────────────── */
.filter-pill, .region-pill, .filter-btn {
    display: inline-flex;
    align-items: center;
    padding: 6px 14px;
    border-radius: var(--radius-full);
    font-size: 12px;
    font-weight: var(--weight-semibold);
    text-transform: uppercase;
    letter-spacing: var(--tracking-wider);
    cursor: pointer;
    border: 1px solid rgba(255, 255, 255, 0.08);
    color: var(--text-secondary);
    background: transparent;
    transition: all var(--duration-fast) ease;
    white-space: nowrap;
}
.filter-pill:hover, .region-pill:hover, .filter-btn:hover {
    background: var(--bg-active);
    color: var(--text-primary);
}
.filter-pill.active, .region-pill.active, .filter-btn.active {
    background: rgba(52, 211, 153, 0.12);
    color: var(--accent);
    border-color: rgba(52, 211, 153, 0.3);
}

/* ── Dropdowns ──────────────────────────────────────────────── */
.dropdown-menu {
    background: var(--bg-elevated) !important;
    border: 1px solid var(--border-default) !important;
    border-radius: var(--radius-lg) !important;
    box-shadow: var(--shadow-lg);
    padding: var(--space-2);
    z-index: var(--z-dropdown);
}
.dropdown-item {
    color: var(--text-secondary) !important;
    border-radius: var(--radius-md);
    padding: var(--space-2) var(--space-3);
    font-size: var(--text-sm);
    transition: all var(--duration-fast);
}
.dropdown-item:hover {
    background: var(--bg-active) !important;
    color: var(--text-primary) !important;
}
.dropdown-divider { border-color: var(--border-subtle); }

/* ── Alerts ─────────────────────────────────────────────────── */
.alert {
    border-radius: var(--radius-lg);
    border: none;
    font-size: var(--text-sm);
}
.alert-success { background: var(--green-subtle); color: var(--accent); border-left: 3px solid var(--accent); }
.alert-danger  { background: var(--red-subtle); color: var(--red); border-left: 3px solid var(--red); }
.alert-warning { background: rgba(251, 146, 60, 0.1); color: var(--amber); border-left: 3px solid var(--amber); }
.alert-info    { background: var(--blue-glow); color: var(--blue); border-left: 3px solid var(--blue); }

/* ── Progress bars ──────────────────────────────────────────── */
.progress {
    background: var(--bg-primary);
    border-radius: var(--radius-full);
    height: 6px;
}
.progress-bar {
    background: linear-gradient(90deg, var(--accent), var(--gold));
    border-radius: var(--radius-full);
    transition: width var(--duration-slow) var(--ease-out);
}

/* ── Accordion ──────────────────────────────────────────────── */
.accordion-item {
    background: var(--bg-surface) !important;
    border: 1px solid var(--border-subtle) !important;
    border-radius: var(--radius-lg) !important;
    margin-bottom: var(--space-2);
    overflow: hidden;
}
.accordion-button {
    background: var(--bg-surface) !important;
    color: var(--text-primary) !important;
    font-family: var(--font-display);
    font-weight: var(--weight-semibold);
    box-shadow: none !important;
}
.accordion-button.collapsed { color: var(--text-secondary) !important; }
.accordion-button::after { filter: invert(0.5); }
.accordion-body { background: var(--bg-surface); }

/* ── Navbar ─────────────────────────────────────────────────── */
.navbar {
    background: rgba(11, 15, 26, 0.85) !important;
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border-bottom: 1px solid var(--border-subtle) !important;
    padding: 0 24px;
    height: 56px;
    position: sticky;
    top: 0;
    z-index: var(--z-dropdown);
    box-shadow: none;
}

.navbar-brand {
    font-family: var(--font-display);
    font-weight: var(--weight-bold);
    font-size: var(--text-xl);
    color: var(--text-primary) !important;
    letter-spacing: var(--tracking-tight);
    text-transform: none;
}

.nav-link {
    font-size: var(--text-sm);
    font-weight: var(--weight-medium);
    color: var(--text-secondary) !important;
    padding: 16px 12px;
    border-radius: 0;
    transition: color var(--duration-fast);
    text-decoration: none;
    border-bottom: 2px solid transparent;
}
.nav-link:hover {
    color: var(--text-primary) !important;
    background: transparent;
}
.nav-link.active {
    color: var(--text-primary) !important;
    background: transparent;
    border-bottom: 2px solid var(--accent);
}

/* Event context sub-nav */
.nav-pills-event {
    display: flex;
    gap: var(--space-1);
    overflow-x: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
    height: 44px;
    align-items: center;
}
.nav-pills-event::-webkit-scrollbar { display: none; }
.nav-pills-event .nav-link {
    white-space: nowrap;
    flex-shrink: 0;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: var(--tracking-wider);
    padding: 8px 12px;
}

/* Pool size in nav */
#pool-size-nav {
    font-family: var(--font-display);
    font-weight: var(--weight-bold);
    color: var(--accent) !important;
    font-size: var(--text-sm);
}

/* ── Hero pool number ───────────────────────────────────────── */
.hero-pool {
    font-family: var(--font-display);
    font-size: var(--text-5xl);
    font-weight: var(--weight-bold);
    color: var(--accent);
    text-shadow: 0 0 40px var(--green-glow);
    line-height: 1;
}
.hero-pool-label {
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: var(--tracking-widest);
    color: var(--text-secondary);
    font-weight: var(--weight-medium);
}

/* Hero section glow */
.hero {
    position: relative;
    overflow: hidden;
}
.hero::before {
    content: '';
    position: absolute;
    top: -30%;
    left: 50%;
    transform: translateX(-50%);
    width: 800px;
    height: 600px;
    background: radial-gradient(ellipse, rgba(52, 211, 153, 0.08) 0%, transparent 70%);
    pointer-events: none;
    z-index: 0;
}

/* ── Live indicator ─────────────────────────────────────────── */
.live-dot {
    display: inline-block;
    width: 8px; height: 8px;
    border-radius: 50%;
    background: var(--amber);
    animation: pulse-dot 1.5s infinite;
    margin-right: var(--space-1);
}
@keyframes pulse-dot {
    0%, 100% { opacity: 1; box-shadow: 0 0 0 0 rgba(251, 146, 60, 0.4); }
    50%      { opacity: 0.6; box-shadow: 0 0 0 4px rgba(251, 146, 60, 0); }
}

/* ── Page enter animation ───────────────────────────────────── */
@keyframes fadeInUp {
    from { opacity: 0; transform: translateY(12px); }
    to   { opacity: 1; transform: translateY(0); }
}

.page-enter {
    animation: fadeInUp 0.4s ease-out both;
}

/* Staggered animation support */
.stagger-1 { animation: fadeInUp 0.4s ease-out 0s both; }
.stagger-2 { animation: fadeInUp 0.4s ease-out 0.05s both; }
.stagger-3 { animation: fadeInUp 0.4s ease-out 0.1s both; }
.stagger-4 { animation: fadeInUp 0.4s ease-out 0.15s both; }

/* Market ticker card stagger */
.ticker-card {
    animation: fadeInUp 0.3s ease-out both;
}
.ticker-card:nth-child(1)  { animation-delay: 0s; }
.ticker-card:nth-child(2)  { animation-delay: 0.03s; }
.ticker-card:nth-child(3)  { animation-delay: 0.06s; }
.ticker-card:nth-child(4)  { animation-delay: 0.09s; }
.ticker-card:nth-child(5)  { animation-delay: 0.12s; }
.ticker-card:nth-child(6)  { animation-delay: 0.15s; }
.ticker-card:nth-child(7)  { animation-delay: 0.18s; }
.ticker-card:nth-child(8)  { animation-delay: 0.21s; }
.ticker-card:nth-child(9)  { animation-delay: 0.24s; }
.ticker-card:nth-child(10) { animation-delay: 0.27s; }
.ticker-card:nth-child(n+11) { animation-delay: 0.3s; }

/* ── Team links ───────────────────────────────────────────── */
.team-link { color: inherit; text-decoration: none; transition: color 0.15s ease; }
.team-link:hover { color: var(--accent) !important; }

/* ── Utility text classes ───────────────────────────────────── */
.text-display { font-family: var(--font-display); font-weight: var(--weight-bold); }
.text-accent  { color: var(--accent) !important; }
.text-green   { color: var(--accent) !important; }
.text-red     { color: var(--red) !important; }
.text-gold    { color: var(--gold) !important; }
.text-money-positive { color: var(--accent); }
.text-money-negative { color: var(--red); }

/* ── Dividers & footer ──────────────────────────────────────── */
hr { border-color: var(--border-subtle); opacity: 1; }

footer {
    font-size: var(--text-sm);
    color: var(--text-muted);
    border-top: 1px solid var(--border-subtle);
}

/* ── Scroll to Top ─────────────────────────────────────────── */
.scroll-top-btn {
    position: fixed;
    bottom: var(--space-4);
    right: var(--space-4);
    width: 40px;
    height: 40px;
    border-radius: var(--radius-full);
    background: var(--bg-elevated);
    border: 1px solid var(--border-default);
    color: var(--text-secondary);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--duration-normal) ease, transform var(--duration-normal) ease;
    transform: translateY(8px);
    z-index: var(--z-sticky);
    box-shadow: var(--shadow-lg);
}
.scroll-top-btn.visible {
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0);
}
.scroll-top-btn:hover {
    background: rgba(52, 211, 153, 0.1);
    border-color: rgba(52, 211, 153, 0.3);
    color: var(--accent);
}

/* ── Toast notification ────────────────────────────────────── */
.toast-container {
    position: fixed;
    bottom: var(--space-4);
    right: var(--space-4);
    z-index: var(--z-modal);
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    pointer-events: none;
}
.toast-msg {
    background: var(--bg-elevated);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-md);
    padding: var(--space-2) var(--space-3);
    color: var(--text-primary);
    font-size: var(--text-sm);
    box-shadow: var(--shadow-xl);
    pointer-events: auto;
    animation: toastIn var(--duration-normal) ease both;
}
.toast-msg.toast-out {
    animation: toastOut var(--duration-normal) ease both;
}
@keyframes toastIn {
    from { opacity: 0; transform: translateX(20px); }
    to   { opacity: 1; transform: translateX(0); }
}
@keyframes toastOut {
    from { opacity: 1; transform: translateX(0); }
    to   { opacity: 0; transform: translateX(20px); }
}

/* ── Empty states ──────────────────────────────────────────── */
.empty-state {
    color: var(--text-muted);
    font-style: italic;
    text-align: center;
    padding: 32px;
}

/* ── Special payout card borders ───────────────────────────── */
.payout-blowout   { border-top: 3px solid var(--red) !important; }
.payout-cinderella { border-top: 3px solid var(--gold) !important; }
.payout-kingslayer { border-top: 3px solid var(--amber) !important; }
.payout-default    { border-top: 3px solid var(--accent) !important; }

/* Prize amount pill */
.prize-pill {
    background: rgba(52, 211, 153, 0.12);
    color: var(--accent);
    padding: 6px 16px;
    border-radius: var(--radius-full);
    font-family: var(--font-display);
    font-weight: var(--weight-bold);
    font-size: 18px;
    display: inline-block;
}

/* ── Ticker symbol styling (market) ────────────────────────── */
.ticker-symbol {
    font-family: var(--font-display);
    font-weight: var(--weight-bold);
    font-size: var(--text-sm);
    color: var(--blue);
    letter-spacing: var(--tracking-wide);
}

.ticker-price {
    font-family: var(--font-display);
    font-weight: var(--weight-bold);
    font-size: var(--text-xl);
    color: var(--text-primary);
}

/* ── Owner dots ────────────────────────────────────────────── */
.owner-dot {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    margin-right: 4px;
    vertical-align: middle;
}

/* ── Content max-width ─────────────────────────────────────── */
.container-fluid {
    max-width: 1200px;
}

/* ── Google Sign In button ─────────────────────────────────── */
.btn-google {
    background: #fff;
    color: #1a1a1a;
    font-weight: var(--weight-semibold);
    border-radius: var(--radius-md);
    padding: 12px 24px;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    border: none;
    font-size: var(--text-base);
    transition: all var(--duration-fast) ease;
}
.btn-google:hover {
    background: #f0f0f0;
    box-shadow: var(--shadow-md);
}

/* ── "or" divider ──────────────────────────────────────────── */
.divider-or {
    display: flex;
    align-items: center;
    gap: 16px;
    margin: 24px 0;
}
.divider-or::before, .divider-or::after {
    content: '';
    flex: 1;
    height: 1px;
    background: rgba(255, 255, 255, 0.08);
}
.divider-or span {
    color: var(--text-secondary);
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    font-weight: var(--weight-medium);
}

/* ── Bracket grid background ───────────────────────────────── */
.bracket-container {
    background-image:
        linear-gradient(rgba(255, 255, 255, 0.02) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.02) 1px, transparent 1px);
    background-size: 40px 40px;
}

/* ── Mobile ─────────────────────────────────────────────────── */
@media (max-width: 768px) {
    .table { font-size: 12px; }
    .table th { font-size: 10px; padding: 8px 10px; }
    .table td { padding: 10px; }
    .card-body { padding: var(--space-3); }
    .navbar { padding: 0 12px; }
    .navbar-brand { font-size: var(--text-lg); }
    .hero-pool { font-size: var(--text-4xl); }
    .stat-value { font-size: var(--text-2xl); }
    .btn { min-height: 44px; display: inline-flex; align-items: center; }
    .nav-link { min-height: 44px; display: flex; align-items: center; }
    input, select, textarea { font-size: 16px !important; }
    .container-fluid { max-width: 100%; }
}

@media (max-width: 576px) {
    .container-fluid { padding-left: var(--space-3); padding-right: var(--space-3); }
}