:root {
      --brand-midnight: #0D2238;
      --brand-deep-teal: #144B5F;
      --brand-cricket-green: #3E8F68;
      --brand-off-white: #F7F8F6;
      --brand-warm-grey: #D9DDD9;
      --brand-slate-grey: #5E6A73;
      --brand-gold: #C8A96B;
      
      --radius-large: 24px;
      --radius-medium: 16px;
      --radius-pill: 999px;
    }

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

    body {
      font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
      background: var(--brand-off-white);
      color: var(--brand-slate-grey);
      min-height: 100vh;
    }

    h1, h2, h3, h4, h5, h6, .brand-font {
      font-family: 'Sora', sans-serif;
    }

    .sr-only {
      position: absolute;
      width: 1px;
      height: 1px;
      padding: 0;
      margin: -1px;
      overflow: hidden;
      clip: rect(0, 0, 0, 0);
      white-space: nowrap;
      border: 0;
    }

    .skip-link {
      position: absolute;
      left: 0.75rem;
      top: -3rem;
      z-index: 999;
      background: #102a43;
      color: #fff;
      padding: 0.5rem 0.75rem;
      border-radius: 6px;
      font-size: 0.85rem;
      text-decoration: none;
      box-shadow: 0 2px 10px rgba(0, 0, 0, 0.25);
      transition: top 0.15s ease;
    }
    .skip-link:focus {
      top: 0.75rem;
    }

    /* ---- Navigation ---- */
    .site-nav {
      background: var(--brand-midnight);
      color: #fff;
      height: 64px;
      padding: 0 1.5rem;
      display: flex;
      align-items: center;
      justify-content: space-between;
      position: sticky;
      top: 0;
      z-index: 100;
      box-shadow: 0 2px 12px rgba(0,0,0,0.1);
    }
    .nav-left, .nav-center, .nav-right {
      flex: 1;
      display: flex;
      align-items: center;
    }
    .nav-left { justify-content: flex-start; }
    .nav-center { justify-content: center; flex: 1; white-space: nowrap; }
    .nav-right { justify-content: flex-end; gap: 0.75rem; }
    .nav-brand {
      font-family: 'Sora', sans-serif;
      font-weight: 700;
      font-size: 1.2rem;
      color: #fff;
      text-decoration: none;
      display: flex;
      align-items: center;
      gap: 0.5rem;
    }
    .nav-brand:hover { color: #9fd3c7; }
    .nav-brand .brand-dot { color: #2a9d8f; }



    .nav-links {
      display: flex;
      align-items: center;
      gap: 0.25rem;
      flex-shrink: 0;
    }
    .nav-link {
      color: var(--brand-warm-grey);
      text-decoration: none;
      font-size: 0.85rem;
      font-weight: 500;
      padding: 0.5rem 0.75rem;
      border-radius: var(--radius-medium);
      transition: all 0.2s;
      white-space: nowrap;
    }
    .nav-link:hover { color: #fff; background: rgba(255,255,255,0.05); }
    .nav-link.active { color: #fff; background: var(--brand-deep-teal); }
    
    .nav-link-btn {
      background: rgba(255,255,255,0.05);
      border: 1px solid rgba(255,255,255,0.1);
      color: #fff;
      font-size: 0.8rem;
      font-weight: 600;
      padding: 0.5rem 1rem;
      border-radius: var(--radius-pill);
      cursor: pointer;
      text-decoration: none;
      display: inline-block;
      transition: all 0.2s;
      white-space: nowrap;
      font-family: 'Sora', sans-serif;
    }
    .nav-link-btn:hover { background: rgba(255,255,255,0.1); border-color: rgba(255,255,255,0.2); }
    .nav-hamburger {
      background: none;
      border: none;
      color: #b8d9d2;
      cursor: pointer;
      padding: 0.4rem;
      border-radius: 6px;
      display: none;
      flex-shrink: 0;
    }
    .nav-hamburger:hover { background: rgba(255,255,255,0.08); color: #fff; }
    .nav-mobile-menu {
      display: none;
      background: #0f2135;
      border-top: 1px solid rgba(255,255,255,0.08);
      padding: 0.75rem 1.25rem;
      flex-direction: column;
      gap: 0.5rem;
      position: fixed;
      top: 60px;
      left: 0;
      right: 0;
      z-index: 90;
      box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
      max-height: calc(100vh - 60px);
      overflow-y: auto;
    }
    .nav-mobile-menu .nav-link { color: #9fd3c7; }

    /* ---- Layout: sidebar + content ---- */
    .layout-wrapper {
      display: flex;
      align-items: stretch;
      min-height: calc(100vh - 56px);
    }
    .sidebar-panel, .sidebar-panel-right {
      width: 248px;
      min-width: 248px;
      flex-shrink: 0;
      background: #fff;
      position: sticky;
      top: 60px;
      min-height: calc(100vh - 60px);
      max-height: calc(100vh - 60px);
      overflow-y: auto;
      padding: 1rem 0 0;
      scrollbar-width: thin;
    }
    .sidebar-panel { border-right: 1px solid #e4eaee; }
    .sidebar-panel-right { border-left: 1px solid #e4eaee; width: 300px; min-width: 300px; }
    
    .content-panel {
      flex: 1;
      min-width: 0;
      padding: 1.75rem 1.75rem;
      max-width: 1200px; /* Increased to reflect 3col */
    }
    .content-panel-full {
      flex: 1;
      min-width: 0;
      padding: 1.75rem 1.75rem;
    }

    /* ---- Sidebar tree ---- */
    .sidebar-section-label {
      font-size: 0.67rem;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 0.7px;
      color: #6c757d;
      padding: 0.5rem 1rem 0.25rem;
    }
    .sb-details { border: none; }
    .sb-details > summary {
      list-style: none;
      cursor: pointer;
      padding: 0.4rem 1rem;
      font-size: 0.82rem;
      font-weight: 600;
      color: #102a43;
      display: flex;
      align-items: center;
      gap: 0.45rem;
      border-radius: 0;
      user-select: none;
      transition: background 0.1s;
    }
    .sb-details > summary::-webkit-details-marker { display: none; }
    .sb-details > summary::before {
      content: '';
      display: inline-block;
      width: 0;
      height: 0;
      border-style: solid;
      border-width: 4px 0 4px 6px;
      border-color: transparent transparent transparent #6c757d;
      font-size: 0;
      color: #6c757d;
      flex-shrink: 0;
      transition: transform 0.15s;
      width: 10px;
    }
    .sb-details[open] > summary::before { transform: rotate(90deg); }
    .sb-details > summary:hover { background: #f3f8fb; }
    .sb-details[open] > summary { color: #1f4e5f; }
    .sb-details > summary a {
      color: inherit;
      text-decoration: none;
      flex: 1;
      display: inline-block;
    }
    .sb-details > summary a:hover {
      text-decoration: underline;
    }

    .sb-details-l2 > summary {
      padding-left: 1.75rem;
      font-weight: 500;
      color: #495057;
    }
    .sb-details-l3 > summary {
      padding-left: 2.5rem;
      font-weight: 500;
      font-size: 0.8rem;
      color: #495057;
    }
    .sb-details-l4 > summary {
      padding-left: 3.1rem;
      font-size: 0.78rem;
      font-weight: 400;
      color: #6c757d;
    }

    .sb-team-link {
      display: block;
      padding: 0.32rem 1rem 0.32rem 3.1rem;
      font-size: 0.8rem;
      color: #1f4e5f;
      text-decoration: none;
      transition: background 0.1s;
    }
    .sb-team-link:hover { background: #f3f8fb; color: #102a43; }
    .sb-match-link {
      display: block;
      padding: 0.28rem 1rem 0.28rem 3.8rem;
      font-size: 0.74rem;
      color: #6c757d;
      text-decoration: none;
      transition: background 0.1s;
    }
    .sb-match-link:hover { background: #f3f8fb; color: #102a43; }
    .sb-skeleton {
      opacity: 0.38;
      cursor: not-allowed;
      pointer-events: none;
    }
    .sb-skeleton > summary { color: #6c757d !important; }
    .sb-badge-soon {
      display: inline-block;
      font-size: 0.6rem;
      font-weight: 700;
      background: #e9ecef;
      color: #6c757d;
      padding: 0.05rem 0.35rem;
      border-radius: 3px;
      letter-spacing: 0.3px;
      text-transform: uppercase;
      margin-left: auto;
    }

    /* ---- Breadcrumbs ---- */
    .breadcrumb {
      display: flex;
      align-items: center;
      gap: 0.35rem;
      font-size: 0.78rem;
      color: #6c757d;
      margin-bottom: 1.25rem;
      flex-wrap: wrap;
    }
    .breadcrumb a { color: #1f4e5f; text-decoration: none; }
    .breadcrumb a:hover { color: #102a43; text-decoration: underline; }
    .breadcrumb-sep { color: #ced4da; }

    .subnav-tabs {
      display: flex;
      gap: 0.5rem;
      margin-bottom: 1.5rem;
      border-bottom: 2px solid #e9ecef;
      padding-bottom: 0;
      flex-wrap: wrap;
    }
    .subnav-tab-link { text-decoration: none; }
    .subnav-tab-current {
      border-bottom: 3px solid #2a9d8f;
      color: #102a43;
    }

    .muted-text { color: #6c757d; }
    .muted-small { color: #6c757d; font-size: 0.82rem; }
    .rank-cell { color: #6c757d; font-size: 0.8rem; }
    .vs-separator { color: #6c757d; font-weight: 400; }

    /* ---- Main content tables ---- */
    h1 { font-size: 1.6rem; font-weight: 700; margin-bottom: 1.5rem; color: #102a43; }
    h2 { font-size: 1.15rem; font-weight: 600; margin: 1.5rem 0 0.75rem; color: #102a43; }

    table {
      width: 100%;
      border-collapse: separate;
      border-spacing: 0;
      font-size: 0.875rem;
      background: #fff;
      border-radius: var(--radius-medium);
      overflow: hidden;
      box-shadow: 0 4px 15px rgba(0,0,0,0.04);
      border: 1px solid rgba(0,0,0,0.05);
    }
    caption.table-caption {
      caption-side: top;
      text-align: left;
      color: #6c757d;
      font-size: 0.8rem;
      font-weight: 500;
      padding: 0.4rem 0.2rem 0.5rem;
    }
    th {
      background: #102a43;
      color: #e6f7f3;
      text-align: left;
      padding: 0.6rem 0.8rem;
      font-weight: 600;
      font-size: 0.78rem;
      text-transform: uppercase;
      letter-spacing: 0.5px;
    }
    td {
      padding: 0.55rem 0.8rem;
      border-bottom: 1px solid #f0f0f0;
      vertical-align: middle;
    }
    tr:last-child td { border-bottom: none; }
    tr:hover td { background: #f7fbff; }

    /* ---- Form badges ---- */
    .badge {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 2.1rem;
      height: 2.1rem;
      border-radius: 50%;
      font-weight: 700;
      font-size: 0.75rem;
      color: #fff;
      margin-right: 2px;
      flex-shrink: 0;
      font-family: 'Sora', sans-serif;
    }
    .badge-green  { background: var(--brand-cricket-green); }
    .badge-amber  { background: var(--brand-gold); }
    .badge-red    { background: #b94a48; }
    .badge-grey   { background: var(--brand-slate-grey); }

    .stat { font-variant-numeric: tabular-nums; }

    .tag-success { color: #1f4e5f; font-weight: 600; }
    .tag-error   { color: #c0392b; font-weight: 600; }
    .tag-skipped { color: #868e96; }

    a { color: #1f4e5f; }
    a:hover { color: #102a43; }

    .empty { color: #868e96; font-style: italic; padding: 1rem 0; }

    form.inline { display: inline; }
    input[type="text"], input[type="email"] {
      border: 1px solid var(--brand-warm-grey);
      border-radius: var(--radius-medium);
      padding: 0.6rem 0.9rem;
      font-size: 0.875rem;
      font-family: inherit;
      outline: none;
      transition: all 0.2s;
    }
    input[type="text"]:focus, input[type="email"]:focus {
      border-color: var(--brand-deep-teal);
      box-shadow: 0 0 0 3px rgba(20,75,95,0.08);
    }
    button[type="submit"], .btn {
      background: var(--brand-midnight);
      color: #fff;
      border: none;
      border-radius: var(--radius-pill);
      padding: 0.6rem 1.25rem;
      cursor: pointer;
      font-size: 0.875rem;
      font-family: 'Sora', sans-serif;
      font-weight: 600;
      transition: all 0.2s;
      display: inline-flex;
      align-items: center;
      gap: 0.5rem;
    }
    button[type="submit"]:hover, .btn:hover { background: var(--brand-deep-teal); transform: translateY(-1px); box-shadow: 0 4px 12px rgba(0,0,0,0.1); }
    .btn-sm  { padding: 0.3rem 0.75rem; font-size: 0.8rem; }
    .btn-teal { background: #1f4e5f; }
    .btn-teal:hover { background: #163a47; }
    .btn-danger { background: #c0392b; }
    .btn-danger:hover { background: #a93226; }
    .btn-dark   { background: #374151; }
    .btn-dark:hover { background: #1f2937; }
    .ca-badge { font-weight: 600; color: #15803d; background: #dcfce7; padding: 2px 7px; border-radius: 4px; font-size: 0.8rem; }
    tr.tr-highlight { background: #f0fdf4; }
    /* Claim state chip variants */
    .chip-claim-mine     { background: #e6f7f3; color: #1f4e5f; border-color: #9fd3c7; font-weight: 600; }
    .chip-claim-pending  { background: #fff9e6; color: #8a6400; border-color: #fde68a; }
    .chip-claim-can      { background: #f0fdf4; color: #15803d; border-color: #bbf7d0; font-weight: 600; }
    .chip-claim-auth     { background: #f0fdf4; color: #15803d; border-color: #bbf7d0; }
    .chip-claim-taken    { background: #f8f9fa; color: #6b7280; border-color: #d1d5db; }
    .chip-claim-rejected { background: #fef2f2; color: #b91c1c; border-color: #fecaca; font-weight: 600; }
    .chip-self-reported  { background: #f0fdf4; color: #15803d; border-color: #bbf7d0; font-size: 0.7rem; padding: 2px 7px; }

    .counts-grid {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
      gap: 1rem;
      margin-bottom: 2rem;
    }
    .count-card {
      background: #fff;
      border-radius: var(--radius-large);
      padding: 1.5rem;
      text-align: center;
      box-shadow: 0 4px 20px rgba(0,0,0,0.04);
      border: 1px solid rgba(0,0,0,0.05);
    }
    .count-card .number { font-family: 'Sora', sans-serif; font-size: 2.2rem; font-weight: 700; color: var(--brand-midnight); }
    .count-card .label  { font-size: 0.72rem; color: var(--brand-slate-grey); text-transform: uppercase; letter-spacing: 0.05em; font-weight: 600; }

    .team-grid {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
      gap: 1rem;
    }
    .team-card {
      background: #fff;
      border-radius: var(--radius-large);
      padding: 1.25rem 1.5rem;
      box-shadow: 0 4px 15px rgba(0,0,0,0.04);
      border: 1px solid rgba(0,0,0,0.05);
      text-decoration: none;
      color: inherit;
      transition: all 0.3s cubic-bezier(0.22, 1, 0.36, 1);
      display: block;
    }
    .team-card:hover { border-color: var(--brand-cricket-green); transform: translateY(-3px); box-shadow: 0 12px 30px rgba(0,0,0,0.08); }
    .team-card .name { font-family: 'Sora', sans-serif; font-weight: 700; color: var(--brand-midnight); }
    .team-card .id   { font-size: 0.75rem; color: var(--brand-slate-grey); margin-top: 4px; }

    /* ---- Chat interface ---- */
    .stats-bar {
      text-align: center;
      font-size: 0.8rem;
      color: #6c757d;
      padding: 0.25rem 0 1.5rem;
      letter-spacing: 0.3px;
    }
    .chat-container {
      max-width: 740px;
      margin: 0 auto;
      display: flex;
      flex-direction: column;
      gap: 0.85rem;
    }
    .chat-messages {
      background: #fff;
      border-radius: 10px;
      padding: 1.25rem;
      min-height: 300px;
      max-height: 520px;
      overflow-y: auto;
      box-shadow: 0 1px 3px rgba(0,0,0,0.08);
      display: flex;
      flex-direction: column;
      gap: 0.75rem;
    }
    .message {
      max-width: 88%;
      padding: 0.65rem 0.95rem;
      border-radius: 10px;
      font-size: 0.88rem;
      line-height: 1.55;
    }
    .message-user      { background: #102a43; color: #e6f7f3; align-self: flex-end; border-bottom-right-radius: 2px; }
    .message-assistant { background: #f1f3f5; color: #212529; align-self: flex-start; border-bottom-left-radius: 2px; }
    .message-assistant p { margin-bottom: 0.4rem; }
    .message-assistant p:last-child { margin-bottom: 0; }
    .chat-table {
      border-collapse: collapse;
      font-size: 0.8rem;
      width: 100%;
      margin: 0.5rem 0;
      background: #fff;
      border-radius: 4px;
      overflow: hidden;
    }
    .chat-table th { background: #102a43; color: #e6f7f3; padding: 0.3rem 0.6rem; text-align: left; font-size: 0.75rem; }
    .chat-table td { padding: 0.3rem 0.6rem; border-bottom: 1px solid #f0f0f0; }
    .chat-table tr:last-child td { border-bottom: none; }
    .chat-chips {
      display: flex;
      flex-wrap: wrap;
      gap: 0.45rem;
    }
    .chip {
      background: #fff;
      border: 1px solid #dee2e6;
      border-radius: 20px;
      padding: 0.35rem 0.9rem;
      font-size: 0.8rem;
      cursor: pointer;
      color: #102a43;
      text-decoration: none;
      transition: background 0.12s, border-color 0.12s;
      font-family: inherit;
    }
    .chip:hover { background: #e7f5f3; border-color: #1f4e5f; color: #102a43; }
    .chip-link { display: inline-block; }
    .chat-form {
      display: flex;
      gap: 0.5rem;
    }
    .chat-form input[type="text"] {
      flex: 1;
      padding: 0.6rem 0.8rem;
      font-size: 0.9rem;
    }
    .chat-form button { white-space: nowrap; border-radius: 6px; padding: 0.6rem 1.1rem; }
    .dot-pulse::after {
      content: '.';
      animation: dotpulse 1s steps(3, end) infinite;
    }
    @keyframes dotpulse {
      0%   { content: '.'; }
      33%  { content: '..'; }
      66%  { content: '...'; }
      100% { content: '.'; }
    }

    /* ---- Player role badges ---- */
    .role-badge {
      display: inline-block;
      padding: 0.15rem 0.45rem;
      border-radius: 3px;
      font-size: 0.7rem;
      font-weight: 700;
      letter-spacing: 0.4px;
      text-transform: uppercase;
    }
    .role-bat  { background: #e6f7f3; color: #102a43; }
    .role-bowl { background: #fff3cd; color: #856404; }
    .role-all  { background: #cfe2ff; color: #084298; }
    .role-keep { background: #f8d7da; color: #842029; }

    /* ---- Stats card panels ---- */
    .stats-card-grid {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
      gap: 1rem;
      margin-bottom: 1.5rem;
    }
    .stats-panel {
      background: #fff;
      border-radius: var(--radius-large);
      padding: 1.25rem 1.5rem;
      box-shadow: 0 4px 15px rgba(0,0,0,0.04);
      border: 1px solid rgba(0,0,0,0.05);
    }
    .stats-panel-title {
      font-size: 0.7rem;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 0.7px;
      color: #6c757d;
      margin-bottom: 0.75rem;
    }
    .stats-kv-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 0.5rem 1rem;
    }
    .kv { display: flex; flex-direction: column; }
    .kv-label { font-size: 0.72rem; color: #6c757d; }
    .kv-val { font-size: 1rem; font-weight: 700; color: #102a43; font-variant-numeric: tabular-nums; }

    .consistency-label { font-size: 0.85rem; }
    .trend-improving { color: #1f4e5f; }
    .trend-stable { color: #495057; }
    .trend-declining { color: #c0392b; }
    .trend-insufficient { color: #868e96; }

    .milestone-badge {
      display: inline-block;
      padding: 0.15rem 0.5rem;
      border-radius: 3px;
      font-size: 0.75rem;
      font-weight: 700;
    }
    .badge-gold   { background: #fff3cd; color: #856404; }
    .badge-silver { background: #e9ecef; color: #495057; }

    /* ---- Team stats page ---- */
    .stat-block {
      background: #fff;
      border-radius: var(--radius-large);
      padding: 1.5rem;
      box-shadow: 0 4px 15px rgba(0,0,0,0.04);
      border: 1px solid rgba(0,0,0,0.05);
      margin-bottom: 1.5rem;
    }
    .stat-block h3 {
      font-size: 0.8rem;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 0.6px;
      color: #6c757d;
      margin-bottom: 0.75rem;
    }
    .record-grid {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
      gap: 0.75rem;
    }
    .record-item { display: flex; flex-direction: column; }
    .record-item .rl { font-size: 0.72rem; color: #6c757d; }
    .record-item .rv { font-size: 1.1rem; font-weight: 700; color: #102a43; }

    /* ---- Filter pills ---- */
    .filter-pill {
      background: #fff;
      border: 1px solid #dee2e6;
      border-radius: 20px;
      padding: 0.3rem 0.8rem;
      font-size: 0.78rem;
      font-weight: 600;
      cursor: pointer;
      color: #495057;
      font-family: inherit;
      letter-spacing: 0.3px;
    }
    .filter-pill.active { background: #102a43; color: #fff; border-color: #102a43; }
    .filter-pill:hover:not(.active) { background: #edf6f5; border-color: #1f4e5f; color: #102a43; }

    /* ---- Sortable table headers ---- */
    .sortable { cursor: pointer; user-select: none; }
    .sortable:hover { background: #0f1f31; }

    /* ---- Tab navigation ---- */
    .tab-nav {
      display: flex;
      gap: 0.5rem;
      margin-bottom: 1rem;
      border-bottom: 2px solid #e9ecef;
      padding-bottom: 0;
    }
    .tab-btn {
      background: none;
      border: none;
      border-bottom: 3px solid transparent;
      padding: 0.5rem 1rem;
      cursor: pointer;
      font-size: 0.9rem;
      font-weight: 600;
      color: #6c757d;
      margin-bottom: -2px;
      font-family: inherit;
    }
    .tab-btn.active { color: #102a43; border-bottom-color: #2a9d8f; }
    .tab-btn:hover { color: #102a43; }

    /* ---- Venue cards ---- */
    .venues-grid {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
      gap: 1rem;
    }
    .venue-card {
      background: #fff;
      border-radius: 8px;
      padding: 1.1rem 1.25rem;
      box-shadow: 0 1px 4px rgba(0,0,0,0.07);
    }
    .venue-name { font-weight: 700; font-size: 1rem; color: #102a43; margin-bottom: 2px; }
    .venue-matches { font-size: 0.75rem; color: #6c757d; margin-bottom: 0.75rem; }
    .venue-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 0.4rem 0.8rem; margin-bottom: 0.75rem; }
    .venue-stat { display: flex; flex-direction: column; }
    .venue-stat-label { font-size: 0.7rem; color: #6c757d; }
    .venue-stat-val { font-size: 0.95rem; font-weight: 700; color: #212529; }
    .venue-outcome { display: flex; align-items: center; gap: 0.5rem; margin-top: 0.3rem; font-size: 0.78rem; }
    .outcome-label { width: 55px; color: #6c757d; }
    .outcome-bar-wrap { flex: 1; height: 6px; background: #e9ecef; border-radius: 3px; overflow: hidden; }
    .outcome-bar { height: 100%; border-radius: 3px; }
    .bat-bar { background: #1f4e5f; }
    .chase-bar { background: #e87b00; }
    .outcome-pct { width: 36px; text-align: right; font-weight: 600; }

    /* ---- Match scorecard ---- */
    .match-header {
      background: linear-gradient(135deg, #102a43 0%, #1f4e5f 100%);
      color: #fff;
      border-radius: 10px;
      padding: 1.25rem 1.5rem;
      margin-bottom: 1.5rem;
    }
    .match-teams { font-size: 1.35rem; font-weight: 700; margin-bottom: 0.25rem; }
    .match-teams .vs { font-weight: 300; color: #9fd3c7; margin: 0 0.4rem; }
    .match-meta { font-size: 0.85rem; color: #9fd3c7; margin-bottom: 0.5rem; }
    .match-meta span::after { content: " · "; }
    .match-meta span:last-child::after { content: ""; }
    .match-result { font-size: 1rem; font-weight: 600; color: #e6f7f3; margin-bottom: 0.25rem; }
    .match-toss { font-size: 0.8rem; color: #9fd3c7; }
    .scorecard-table { margin-bottom: 0; }
    .extras-row td { background: #fafafa; color: #6c757d; font-size: 0.85rem; }
    .total-row td { background: #edf6f5; font-weight: 700; border-top: 2px solid #dee2e6; }

    /* ---- Hero/page headers ---- */
    .page-hero {
      background: linear-gradient(135deg, #102a43 0%, #1f4e5f 100%);
      color: #fff;
      border-radius: 10px;
      padding: 1.5rem 1.75rem;
      margin-bottom: 1.75rem;
    }
    .page-hero-label {
      font-size: 0.7rem;
      font-weight: 700;
      letter-spacing: 0.8px;
      text-transform: uppercase;
      color: #9fd3c7;
      margin-bottom: 0.35rem;
    }
    .page-hero-title {
      font-size: 1.6rem;
      font-weight: 800;
      color: #fff;
      margin-bottom: 0.35rem;
    }
    .page-hero-sub {
      font-size: 0.9rem;
      color: #9fd3c7;
    }
    .page-hero-stats {
      display: flex;
      gap: 2rem;
      margin-top: 1rem;
      flex-wrap: wrap;
    }
    .page-hero-stat .phs-val {
      font-size: 1.6rem;
      font-weight: 800;
      color: #fff;
      line-height: 1;
    }
    .page-hero-stat .phs-label {
      font-size: 0.72rem;
      color: #9fd3c7;
      letter-spacing: 0.3px;
    }

    /* ---- Homepage cards ---- */
    .home-grid {
      display: grid;
      grid-template-columns: 3fr 2fr;
      gap: 1.25rem;
      margin-bottom: 1.5rem;
    }
    .card {
      background: #fff;
      border-radius: 10px;
      box-shadow: 0 1px 4px rgba(0,0,0,0.07);
      overflow: hidden;
    }
    .card-header {
      padding: 0.7rem 1rem;
      font-size: 0.72rem;
      font-weight: 700;
      letter-spacing: 0.6px;
      text-transform: uppercase;
      color: #6c757d;
      border-bottom: 1px solid #f0f0f0;
      display: flex;
      align-items: center;
      justify-content: space-between;
    }
    .card-header a { font-size: 0.72rem; font-weight: 600; color: #1f4e5f; text-transform: none; letter-spacing: 0; }
    .card-body { padding: 0.75rem 1rem; }

    .result-row {
      display: flex;
      align-items: center;
      gap: 0.6rem;
      padding: 0.55rem 0;
      border-bottom: 1px solid #f5f5f5;
      font-size: 0.83rem;
    }
    .result-row:last-child { border-bottom: none; }
    .result-date { color: #6c757d; font-size: 0.72rem; min-width: 70px; }
    .result-teams { flex: 1; color: #212529; font-weight: 500; }
    .result-chip {
      font-size: 0.7rem;
      font-weight: 700;
      padding: 0.15rem 0.5rem;
      border-radius: 4px;
      white-space: nowrap;
    }
    .result-chip-win  { background: #e6f7f3; color: #1f4e5f; }
    .result-chip-loss { background: #f8d7da; color: #842029; }
    .result-chip-nr   { background: #e9ecef; color: #6c757d; }

    .performer-item {
      display: flex;
      align-items: center;
      gap: 0.6rem;
      padding: 0.5rem 0;
      border-bottom: 1px solid #f5f5f5;
    }
    .performer-item:last-child { border-bottom: none; }
    .performer-rank {
      font-size: 0.7rem;
      font-weight: 700;
      color: #6c757d;
      min-width: 18px;
    }
    .performer-name { flex: 1; font-size: 0.85rem; font-weight: 600; color: #102a43; }
    .performer-team { font-size: 0.72rem; color: #6c757d; }
    .performer-stat { font-size: 0.9rem; font-weight: 700; color: #1f4e5f; }
    .performer-sub  { font-size: 0.72rem; color: #6c757d; }

    .form-player-grid {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
      gap: 1rem;
      margin-bottom: 1.5rem;
    }
    .form-player-card {
      background: #fff;
      border-radius: 10px;
      padding: 0.9rem 1rem;
      box-shadow: 0 1px 4px rgba(0,0,0,0.07);
    }
    .form-player-name { font-weight: 700; font-size: 0.9rem; color: #102a43; text-decoration: none; }
    .form-player-name:hover { color: #1f4e5f; }
    .form-player-team { font-size: 0.72rem; color: #6c757d; margin-bottom: 0.5rem; }
    .form-strip { display: flex; gap: 3px; flex-wrap: wrap; margin-bottom: 0.4rem; }
    .form-avg { font-size: 0.72rem; color: #6c757d; }

    /* ---- Stat progress bars ---- */
    .stat-bar-wrap { height: 5px; background: #e9ecef; border-radius: 3px; overflow: hidden; display: inline-block; width: 60px; vertical-align: middle; }
    .stat-bar-fill { height: 100%; border-radius: 3px; background: #2a9d8f; }

    /* ---- Leaderboard podium ---- */
    .podium-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 1rem;
      margin-bottom: 1.5rem;
    }
    .podium-card {
      background: #fff;
      border-radius: 10px;
      padding: 1rem;
      box-shadow: 0 1px 4px rgba(0,0,0,0.07);
      text-align: center;
      border-top: 3px solid #e9ecef;
    }
    .podium-card.gold   { border-top-color: #f4c542; }
    .podium-card.silver { border-top-color: #868e96; }
    .podium-card.bronze { border-top-color: #cd7f32; }
    .podium-pos { font-size: 0.65rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.6px; color: #6c757d; margin-bottom: 0.3rem; }
    .podium-name { font-weight: 700; font-size: 0.9rem; color: #102a43; margin-bottom: 0.1rem; }
    .podium-team { font-size: 0.72rem; color: #6c757d; margin-bottom: 0.5rem; }
    .podium-val { font-size: 1.6rem; font-weight: 800; color: #1f4e5f; line-height: 1; }
    .podium-sub { font-size: 0.72rem; color: #6c757d; }

    /* ---- Search results dropdown ---- */
    .search-results-group { padding: 0.4rem 0; }
    .search-results-label {
      font-size: 0.65rem;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 0.6px;
      color: #6c757d;
      padding: 0.4rem 1rem 0.2rem;
    }
    .search-result-item {
      display: flex;
      align-items: center;
      gap: 0.6rem;
      padding: 0.5rem 1rem;
      text-decoration: none;
      color: #212529;
      transition: background 0.1s;
    }
    .search-result-item:hover { background: #f3f8fb; }
    .search-result-icon { font-size: 0.9rem; flex-shrink: 0; }
    .search-result-name { font-size: 0.85rem; font-weight: 600; color: #102a43; flex: 1; }
    .search-result-sub { font-size: 0.75rem; color: #6c757d; }
    .search-divider { height: 1px; background: #f0f0f0; margin: 0.25rem 0; }
    .search-empty { padding: 1rem; text-align: center; font-size: 0.85rem; color: #6c757d; }

    /* ---- HTMX loading indicator ---- */
    .htmx-indicator { display: none; }
    .htmx-request .htmx-indicator { display: inline; }

    /* ---- Responsive ---- */
    @media (max-width: 1024px) {
      .layout-wrapper { flex-direction: column; }
      .sidebar-panel, .sidebar-panel-right {
        width: 100%; min-width: 0; position: static; max-height: none; border: none;
        padding: 1rem;
      }
      .sidebar-panel { order: 1; border-bottom: 1px solid #e4eaee; }
      .content-panel { order: 2; width: 100%; max-width: none; }
      .sidebar-panel-right { order: 3; border-top: 1px solid #e4eaee; }
      
      .hidden-on-mobile { display: none !important; }
    }
    @media (max-width: 768px) {
      .nav-left { visibility: hidden; pointer-events: none; }
      .nav-right { gap: 0.5rem; }
      .nav-links { display: none; }
      .nav-hamburger { display: flex; }
      .nav-mobile-menu { display: none; }
      .nav-mobile-menu.open { display: flex; }

      .sidebar-panel { display: none; }
      .layout-wrapper { display: block; }
      .content-panel, .content-panel-full { padding: 1.25rem 1rem; }
      .home-grid { grid-template-columns: 1fr; }
      .podium-grid { grid-template-columns: 1fr; }
      .form-player-grid { grid-template-columns: 1fr; }
      .stats-card-grid { grid-template-columns: 1fr; }
      .venues-grid { grid-template-columns: 1fr; }
      .overflow-x { overflow-x: auto; }
    }

    /* ---- Animations ---- */
    @keyframes fade-up {
      from { opacity: 0; transform: translateY(20px); }
      to { opacity: 1; transform: translateY(0); }
    }
    .animate-fade-up {
      animation: fade-up 0.5s cubic-bezier(0.22, 1, 0.36, 1) forwards;
    }
    .delay-1 { animation-delay: 0.1s; }
    .delay-2 { animation-delay: 0.2s; }
    .delay-3 { animation-delay: 0.3s; }

    /* ---- Transitions ---- */
    .transition-premium {
      transition: all 0.3s cubic-bezier(0.22, 1, 0.36, 1);
    }