/* ===========================
     BPL THEME (Dark + Gold)
     =========================== */
    :root{
      --bg: #0b1220;
      --bg2:#0f1b2e;
      --card:#101a2a;
      --card2:#0e1726;
      --stroke: rgba(255,255,255,.08);
      --stroke2: rgba(255,255,255,.14);
      --text:#e8eefc;
      --muted: rgba(232,238,252,.72);

      --gold:#d6b25e;
      --gold2:#b8943b;

      --danger:#ff5a6a;
      --ok:#2ee59d;

      --shadow: 0 12px 30px rgba(0,0,0,.35);
      --radius: 18px;

      --font: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial;
    }

    *{ box-sizing:border-box; }
    html,body{ height:100%; }
    body{
      margin:0;
      background: radial-gradient(1200px 600px at 20% -10%, rgba(214,178,94,.18), transparent 60%),
                  radial-gradient(900px 500px at 90% 0%, rgba(90,140,255,.14), transparent 55%),
                  linear-gradient(180deg, var(--bg) 0%, #070b13 100%);
      color:var(--text);
      font-family:var(--font);
    }
    a{ color:inherit; }
    .hidden{ display:none !important; }

    #app{
      max-width: 980px;
      margin: 0 auto;
      padding: 18px 16px 110px;
    }

    .score-input.invalid {
  border: 2px solid #ff5a6a;
  background: rgba(255,90,106,0.08);
    }

    .app-header{
      position: sticky;
      top: 0;
      z-index: 10;
      backdrop-filter: blur(10px);
      background: rgba(11,18,32,.72);
      border-bottom: 1px solid var(--stroke);
    }

    .wrap{ min-height: 100%; }
    .logo-row{
      max-width: 980px;
      margin: 0 auto;
      padding: 12px 16px;
      display:flex;
      align-items:center;
      gap:12px;
      justify-content: space-between;
    }
    .logo-row > div:first-child{
      display:flex;
      align-items:center;
      gap:12px;
    }
    .logo{
      width:44px;
      height:44px;
      border-radius: 12px;
      border: 1px solid var(--stroke2);
      background: rgba(255,255,255,.06);
      display:flex;
      align-items:center;
      justify-content:center;
      overflow:hidden;
    }
    .logo img{
      width:100%;
      height:100%;
      object-fit: cover;
      display:block;
    }
    .h1{
      font-weight: 800;
      letter-spacing:.2px;
      font-size: 16px;
      line-height: 1.2;
    }

    .card{
      background: linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.01));
      border: 1px solid var(--stroke);
      border-radius: var(--radius);
      box-shadow: var(--shadow);
      padding: 16px;
    }
    .card + .card{ margin-top: 12px; }

    .card-header-row{
      display:flex;
      align-items:flex-start;
      justify-content:space-between;
      gap: 12px;
      margin-bottom: 10px;
    }

    .section-title{
      font-size: 18px;
      font-weight: 800;
      letter-spacing:.2px;
    }
    .text-muted{
      color: var(--muted);
      font-size: 13px;
      margin-top: 4px;
    }

    .divider{
      height:1px;
      background: var(--stroke);
      margin: 12px 0;
    }

    .tag{
      display:inline-flex;
      align-items:center;
      gap:8px;
      font-size: 11px;
      letter-spacing: .3px;
      text-transform: uppercase;
      color: rgba(214,178,94,.92);
    }

    .pill{
      display:inline-flex;
      align-items:center;
      padding: 6px 10px;
      border-radius: 999px;
      font-size: 12px;
      border: 1px solid var(--stroke2);
      background: rgba(255,255,255,.04);
    }
    .pill.gold{
      border-color: rgba(214,178,94,.35);
      background: rgba(214,178,94,.12);
      color: rgba(255,230,170,.95);
    }

    .btn{
      appearance:none;
      border: 1px solid var(--stroke2);
      background: rgba(255,255,255,.05);
      color: var(--text);
      padding: 10px 12px;
      border-radius: 14px;
      cursor:pointer;
      font-weight: 700;
      transition: transform .06s ease, background .15s ease, border-color .15s ease, opacity .15s ease;
    }
    .btn:hover{ background: rgba(255,255,255,.07); }
    .btn:active{ transform: translateY(1px); }
    .btn[disabled]{ opacity:.55; cursor:not-allowed; }

    .btn-row{
      display:flex;
      flex-wrap:wrap;
      gap:10px;
      margin-top: 12px;
    }
    .btn-primary{
      border-color: rgba(214,178,94,.45);
      background: linear-gradient(180deg, rgba(214,178,94,.22), rgba(214,178,94,.10));
    }
    .btn-primary:hover{
      background: linear-gradient(180deg, rgba(214,178,94,.28), rgba(214,178,94,.12));
    }
    .btn-ghost{ background: rgba(255,255,255,.03); }
    .btn-danger{
      border-color: rgba(255,90,106,.45);
      background: rgba(255,90,106,.10);
    }

    .input-row{
      display:flex;
      flex-wrap:wrap;
      gap:12px;
      margin-top: 10px;
    }
    .input-wrap{
      flex: 1 1 220px;
      color: rgba(232,238,252,.85);
      font-size: 12px;
    }
    .text-input, .select, .score-input{
      width: 100%;
      margin-top: 6px;
      background: rgba(255,255,255,.05);
      border: 1px solid var(--stroke2);
      color: var(--text);
      padding: 10px 12px;
      border-radius: 14px;
      outline:none;
    }

    /* Dark theme <select> */
    .select{ background-color: rgba(255,255,255,.05); color: var(--text); }
    .select option{ background-color: #0f1b2e; color: #e8eefc; }
    .select option:checked{ background-color: rgba(214,178,94,.25); color: #fff; }
    .select:focus{
      border-color: rgba(214,178,94,.5);
      box-shadow: 0 0 0 3px rgba(214,178,94,.15);
    }

    .text-input:focus, .score-input:focus{
      border-color: rgba(214,178,94,.5);
      box-shadow: 0 0 0 3px rgba(214,178,94,.12);
    }

    .score-input{
      text-align:center;
      font-size: 16px;
      font-weight: 800;
    }

    .schedule-table, .team-table, .verify-table{
      width:100%;
      border-collapse: separate;
      border-spacing: 0;
      overflow:hidden;
      border-radius: 16px;
      border: 1px solid var(--stroke);
      background: rgba(255,255,255,.02);
    }
    .schedule-table th, .schedule-table td,
    .team-table th, .team-table td,
    .verify-table th, .verify-table td{
      padding: 10px 12px;
      border-bottom: 1px solid var(--stroke);
      font-size: 13px;
    }
    .schedule-table thead th,
    .team-table thead th,
    .verify-table thead th{
      text-align:left;
      color: rgba(232,238,252,.85);
      background: rgba(255,255,255,.03);
    }
    .schedule-table tr:last-child td,
    .team-table tr:last-child td,
    .verify-table tr:last-child td{
      border-bottom: none;
    }

    .row{ display:flex; flex-wrap:wrap; gap:12px; }
    .col-3{ flex: 1 1 240px; }

    .kpi{
      background: rgba(255,255,255,.03);
      border: 1px solid var(--stroke);
      border-radius: 16px;
      padding: 12px;
    }
    .kpi-label{ color: var(--muted); font-size: 12px; }
    .kpi-value{ font-size: 26px; font-weight: 900; margin-top: 4px; }
    .kpi-sub{ color: var(--muted); font-size: 12px; margin-top: 2px; }

    .banner{
      display:flex;
      gap:10px;
      align-items:flex-start;
      padding: 12px;
      border-radius: 16px;
      border: 1px solid var(--stroke);
      background: rgba(255,255,255,.03);
      margin-top: 12px;
    }
    .banner-icon{
      width: 26px;
      height: 26px;
      border-radius: 10px;
      display:flex;
      align-items:center;
      justify-content:center;
      font-weight: 900;
      background: rgba(214,178,94,.14);
      border: 1px solid rgba(214,178,94,.30);
      color: rgba(255,230,170,.95);
    }

    .round-strip{
      max-width: 980px;
      margin: 10px auto 0;
      padding: 0 16px;
      display:flex;
      flex-wrap:wrap;
      gap:8px;
    }

    .tab-row{
      display:flex;
      flex-wrap:wrap;
      gap:8px;
      margin-top: 12px;
    }
    .tab-btn{
      border: 1px solid var(--stroke2);
      background: rgba(255,255,255,.03);
      color: var(--text);
      padding: 8px 10px;
      border-radius: 999px;
      cursor:pointer;
      font-weight: 800;
      font-size: 12px;
    }
    .tab-btn.active{
      border-color: rgba(214,178,94,.45);
      background: rgba(214,178,94,.12);
    }

    .bottom-nav{
      position: fixed;
      left: 0;
      right: 0;
      bottom: 0;
      background: rgba(11,18,32,.86);
      border-top: 1px solid var(--stroke);
      backdrop-filter: blur(12px);
      z-index: 30;
    }
    .bottom-nav .nav-inner{
      max-width: 980px;
      margin: 0 auto;
      padding: 10px 12px;
      display:flex;
      gap:10px;
      justify-content: space-between;
    }
    .nav-btn{
      flex:1;
      border: 1px solid var(--stroke2);
      background: rgba(255,255,255,.03);
      color: rgba(232,238,252,.88);
      padding: 10px 10px;
      border-radius: 16px;
      cursor:pointer;
      font-weight: 900;
      font-size: 12px;
    }
    .nav-btn.active{
      border-color: rgba(214,178,94,.45);
      background: rgba(214,178,94,.12);
      color: rgba(255,230,170,.96);
    }
    .nav-btn > button{
      width:100%;
      padding:0;
      border:none;
      background:transparent;
      color:inherit;
      font:inherit;
      cursor:pointer;
    }

    .modal-backdrop{
      position:fixed;
      inset:0;
      background: rgba(0,0,0,.55);
      backdrop-filter: blur(6px);
      display:flex;
      align-items:center;
      justify-content:center;
      z-index: 50;
      padding: 16px;
    }
    .modal{
      width: min(560px, 100%);
      background: linear-gradient(180deg, rgba(16,26,42,.96), rgba(10,16,28,.96));
      border: 1px solid var(--stroke2);
      border-radius: 18px;
      box-shadow: var(--shadow);
      padding: 14px;
    }
    .modal-head{
      display:flex;
      align-items:flex-start;
      justify-content:space-between;
      gap:12px;
      margin-bottom: 10px;
    }
    .modal-title{ font-size: 18px; font-weight: 900; }
    .modal-close{
      border: 1px solid var(--stroke2);
      background: rgba(255,255,255,.04);
      color: var(--text);
      border-radius: 12px;
      padding: 8px 10px;
      cursor:pointer;
      font-weight: 800;
    }

    .game-card{
      border: 1px solid var(--stroke);
      background: rgba(255,255,255,.02);
      border-radius: 16px;
      padding: 12px;
      margin-top: 10px;
    }
    .game-head{
      display:flex;
      justify-content:space-between;
      align-items:center;
      gap:10px;
      color: rgba(232,238,252,.85);
      font-size: 12px;
    }
    .game-players{
      display:flex;
      justify-content:space-between;
      gap:10px;
      margin-top: 10px;
      font-size: 13px;
      color: rgba(232,238,252,.92);
    }
    .player-tag{
      display:inline-flex;
      border: 1px solid var(--stroke2);
      background: rgba(255,255,255,.03);
      padding: 4px 8px;
      border-radius: 999px;
      font-weight: 800;
    }

    .total-row{
      margin-top: 8px;
      padding: 8px 10px;
      border-radius: 14px;
      border: 1px solid var(--stroke);
      background: rgba(255,255,255,.02);
      font-weight: 900;
    }
    .total-ok{
      border-color: rgba(46,229,157,.25);
      background: rgba(46,229,157,.08);
    }
    .total-bad{
      border-color: rgba(255,90,106,.25);
      background: rgba(255,90,106,.08);
    }

    .small-note{
      margin-top: 8px;
      color: var(--muted);
      font-size: 12px;
    }
  
  .avg-tag{ font-size:12px; opacity:.75; margin-left:6px; }


    /* ===== Auth Loading (prevents login flicker on refresh) ===== */
    .loading-wrap{ display:flex; align-items:center; gap:12px; }
    .loading-spinner{
      width:18px; height:18px;
      border:3px solid rgba(255,255,255,.18);
      border-top-color: var(--gold);
      border-radius:50%;
      animation: spin 1s linear infinite;
      flex: 0 0 auto;
    }
    @keyframes spin{ to{ transform: rotate(360deg); } }

    /* ===========================
       TOASTS (non-blocking alerts)
       =========================== */
    .toast-wrap{
      position: fixed;
      left: 50%;
      bottom: 92px; /* sits above bottom nav */
      transform: translateX(-50%);
      z-index: 9999;
      display:flex;
      flex-direction: column;
      gap: 10px;
      width: min(520px, calc(100% - 24px));
      pointer-events: none;
    }
    .toast{
      pointer-events: auto;
      background: rgba(16,26,42,.96);
      border: 1px solid var(--stroke2);
      border-radius: 14px;
      box-shadow: var(--shadow);
      padding: 12px 12px;
      display:flex;
      align-items:flex-start;
      gap: 10px;
      animation: toastIn .16s ease-out;
    }
    .toast .t-ico{
      width: 20px;
      height: 20px;
      border-radius: 999px;
      margin-top: 1px;
      flex: 0 0 20px;
      display:flex;
      align-items:center;
      justify-content:center;
      font-weight: 900;
      font-size: 12px;
    }
    .toast.info .t-ico{ background: rgba(90,140,255,.18); border: 1px solid rgba(90,140,255,.35); }
    .toast.ok   .t-ico{ background: rgba(46,229,157,.16); border: 1px solid rgba(46,229,157,.35); }
    .toast.warn .t-ico{ background: rgba(214,178,94,.16); border: 1px solid rgba(214,178,94,.35); }
    .toast.err  .t-ico{ background: rgba(255,90,106,.16); border: 1px solid rgba(255,90,106,.35); }

    .toast .t-title{ font-weight: 800; font-size: 13px; margin-bottom: 2px; }
    .toast .t-msg{ color: var(--muted); font-size: 12.5px; line-height: 1.35; }
    .toast .t-actions{ margin-left:auto; display:flex; gap:8px; }
    .toast .t-actions button{
      pointer-events:auto;
      border: 1px solid var(--stroke2);
      background: rgba(255,255,255,.04);
      color: var(--text);
      border-radius: 12px;
      padding: 6px 10px;
      font-size: 12px;
      cursor: pointer;
    }
    .toast .t-actions button:hover{ background: rgba(255,255,255,.08); }

    @keyframes toastIn{
      from{ transform: translateY(6px); opacity: 0; }
      to{ transform: translateY(0); opacity: 1; }
    }