/* ============================================================
   19888 Premium Design System
   Inspired by Stripe + Betway + world-class sports betting
   ============================================================ */

:root{
  /* === Brand === */
  --primary:#533afd;
  --primary-dark:#4434d4;
  --primary-light:#b9b9f9;
  --accent:#533afd;
  --accent-deep:#4434d4;
  --accent-grad:linear-gradient(135deg,#533afd 0%,#7c6ff7 100%);
  --accent-ring:rgba(83,58,253,0.15);
  --accent-glow:rgba(83,58,253,0.05);

  /* === Sport Gold === */
  --gold:#D4A017;
  --gold-light:#F5E6C8;

  /* === Status === */
  --red:#E53935;
  --red-soft:rgba(229,57,53,0.06);
  --green:#0F9D58;
  --green-soft:rgba(15,157,88,0.06);

  /* === Surfaces === */
  --bg:#F8FAFC;
  --bg-alt:#F1F5F9;
  --surface:#FFFFFF;
  --surface-hover:#F8FAFC;

  /* === Text === */
  --text:#0F172A;
  --text-light:#475569;
  --text-muted:#94A3B8;
  --text-inverse:#FFFFFF;

  /* === Borders === */
  --border:#E2E8F0;
  --border-light:#F1F5F9;

  /* === Shadows (blue-tinted, multi-layer) === */
  --shadow-sm:rgba(50,50,93,0.08) 0px 2px 5px -1px, rgba(0,0,0,0.04) 0px 1px 3px -1px;
  --shadow:rgba(50,50,93,0.12) 0px 8px 20px -6px, rgba(0,0,0,0.06) 0px 4px 10px -4px;
  --shadow-md:rgba(50,50,93,0.15) 0px 16px 32px -12px, rgba(0,0,0,0.08) 0px 8px 18px -8px;
  --shadow-lg:rgba(50,50,93,0.20) 0px 24px 48px -16px, rgba(0,0,0,0.10) 0px 12px 24px -12px;

  /* === Spacing === */
  --space-xs:4px;
  --space-sm:8px;
  --space-md:16px;
  --space-lg:24px;
  --space-xl:32px;

  /* === Radius === */
  --radius-sm:4px;
  --radius:6px;
  --radius-md:8px;
  --radius-lg:12px;

  /* === Typography === */
  --font:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  --font-mono:"JetBrains Mono","SF Mono",monospace;
}

/* ============ BASE ============ */
*{outline:0;box-sizing:border-box}
body{
  font:14px/1.6 var(--font);
  background:var(--bg);color:var(--text);
  max-width:750px;margin:0 auto;padding-top:45px;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  letter-spacing:-0.01em;
}
body::before{display:none}
body.index{padding-top:0}
a{text-decoration:none;color:var(--accent);transition:color .2s ease}
a:hover{color:#E55A2B}
img{max-width:100%}
.wp{padding:0 12px;background:transparent}
.main{background:var(--bg);padding-top:45px;padding-bottom:70px}

/* ===== HEADER ===== */
.header{
  background:rgba(255,255,255,0.92);backdrop-filter:blur(16px);
  -webkit-backdrop-filter:blur(16px);
  border-bottom:1px solid var(--border);box-shadow:0 1px 4px rgba(0,0,0,0.04);height:48px;
  display:flex;align-items:center;
}
/* Language btn spacing */
.header .wp{display:flex;align-items:center;gap:0;width:100%;height:100%}
body.index .header .global-lang-switch-btn{
  position:relative !important;left:auto !important;top:auto !important;
  margin-right:40px;flex-shrink:0;
}
.header .logo{margin:0;flex-shrink:0;display:flex;align-items:center;height:100%}
.header .logo img{display:block}
.header h3.tit{display:flex;align-items:center;height:100%;margin:0}
.header .wallet-connect{position:relative !important;top:auto !important;right:auto !important;transform:none !important;margin-left:auto;flex-shrink:0;align-self:center}

/* ===== WALLET ===== */
.wallet-connect{
  background:linear-gradient(135deg,#FF6B35,#FF8C42);
  color:#fff;
  border:none;
  border-radius:8px;
  padding:9px 18px;
  font-size:13px;
  font-weight:700;
  cursor:pointer;
  box-shadow:0 2px 12px rgba(255,107,53,0.35);
  transition:background .2s ease,box-shadow .2s ease,transform .2s ease;
  letter-spacing:0.3px;
}
.wallet-connect:hover{
  background:linear-gradient(135deg,#E55A2B,#FF6B35);
  box-shadow:0 4px 16px rgba(255,107,53,0.5);
  transform:translateY(-1px);
}
.wallet-connect.connected{
  background:linear-gradient(135deg,#00A86B,#00C853);
  box-shadow:0 2px 8px rgba(0,168,107,0.3);
}
.wallet-connect.connected:hover{
  background:linear-gradient(135deg,#008B5A,#00A86B);
  box-shadow:0 4px 12px rgba(0,168,107,0.45);
}
/* Pulse animation when not connected */
.wallet-connect:not(.connected){
  animation:walletPulse 2s ease-in-out infinite;
}
@keyframes walletPulse{
  0%,100%{box-shadow:0 2px 12px rgba(255,107,53,0.35)}
  50%{box-shadow:0 2px 20px rgba(255,107,53,0.55)}
}
.wallet-icon{
  display:inline-block;width:18px;height:18px;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23fff'%3E%3Cpath d='M21 18v1c0 1.1-.9 2-2 2H5c-1.11 0-2-.9-2-2V5c0-1.1.89-2 2-2h14c1.1 0 2 .9 2 2v1h-9c-1.11 0-2 .9-2 2v8c0 1.1.89 2 2 2h9zm-9-2h10V8H12v8zm4-2.5c-.83 0-1.5-.67-1.5-1.5s.67-1.5 1.5-1.5 1.5.67 1.5 1.5-.67 1.5-1.5 1.5z'/%3E%3C/svg%3E") no-repeat center/contain;
  vertical-align:middle;margin-right:6px
}
.wallet-label{color:#fff;font-size:12px;font-weight:700;letter-spacing:0.2px}
.wallet-address{color:#fff;font-size:12px;font-weight:700;letter-spacing:0.2px}

/* ===== BANNER ===== */
.banner{padding:0;margin:0}
.banner .item{
  height:150px;
  background:linear-gradient(135deg,#FFF3E0 0%,#FFE0B2 50%,#FFF8E1 100%) !important;
  border-radius:0;border-bottom:1px solid var(--border);
}
.banner .item::before{display:none}

/* ===== NOTICE ===== */
.m-notice{
  background:linear-gradient(135deg,rgba(255,107,53,0.06) 0%,rgba(255,165,2,0.03) 100%);
  border:1px solid rgba(255,107,53,0.12);color:#FF6B35;
  border-radius:6px;box-shadow:none;margin:12px;
}
.m-notice .notice{color:#FF6B35}

/* ===== SPA NAVIGATION (tab_con/page display) ===== */
.tab_con{display:none}
.tab_con.show,.tab_con.active{display:block}
.page{display:none}
.page.active{display:block}

/* ===== TABS ===== */
.ul-tabs_b1{overflow-x:auto;-webkit-overflow-scrolling:touch;font-size:0;background:transparent}
.ul-tabs_b1 li{display:inline-block}
.ul-tabs_b1 li a{color:var(--text-light);display:block;font-size:16px;margin-right:25px;padding-bottom:5px;transition:color .3s ease}
.ul-tabs_b1 li.on a{color:var(--accent);font-weight:bold;position:relative}
.ul-tabs_b1 li.on a::after{background:var(--accent);content:"";display:block;width:16px;height:3px;border-radius:3px;position:absolute;bottom:0;left:50%;margin-left:-11px}
.tab-header-wrapper{position:relative;margin-bottom:5px;padding:0 12px}
.more-link{
  position:absolute;right:15px;top:50%;transform:translateY(-50%);
  color:var(--accent);font-size:16px;text-decoration:none;
  display:flex;align-items:center;gap:3px;transition:color .3s ease;z-index:10;
}
.more-link::after{content:'»';font-size:16px;font-weight:bold}

/* ===== MATCH CARDS ===== */
.ul-info li .con{
  background:var(--surface) !important;border:1px solid var(--border);border-radius:8px;
  box-shadow:var(--shadow-sm);
}
.ul-info li:nth-child(even) .con{background:var(--surface) !important}
.ul-info li .con:hover{border-color:var(--accent);box-shadow:var(--shadow)}
.ul-info li::before,.ul-info li::after{display:none}
.ul-info li .league-name{
  background:linear-gradient(135deg,var(--accent-glow),var(--bg));
  border-radius:0 0 8px 8px;margin:0 auto 8px auto;
  padding:6px 16px;text-align:center;border-top:1px solid var(--border)
}
.ul-info li .league-name::before,.ul-info li .league-name::after{display:none}
.ul-info li .league-name .p1{
  color:var(--accent);font-size:12px;font-weight:600;letter-spacing:.5px;
  text-transform:uppercase
}
/* League group header (match list page) */
.league-group-header .con{
  padding:10px 12px !important;text-align:center
}
.league-group-header .con span{
  display:inline-block;padding:6px 20px;font-size:12px;font-weight:600;
  color:var(--accent);background:var(--accent-glow);
  border-radius:16px;cursor:default;letter-spacing:.5px
}
.ul-info li .team-logo{background:var(--bg);border:1px solid var(--border)}
.ul-info li .team-name{color:var(--text);font-size:13px}
.ul-info li .match-time .time{color:#2D2D2D}
.ul-info li .match-time .date{color:var(--text-light)}

/* ===== MATCH CARD INNER LAYOUT ===== */
.ul-info li{position:relative}
.ul-info li::before,.ul-info li::after{display:none}
.ul-info .con .pic,.ul-info .info,.ul-info .info .top,.ul-info .info .bot,.ul-info .info .date{display:none}
.ul-info{padding-bottom:30px}
.ul-info li .match-content{display:flex;align-items:center;justify-content:space-between;flex:1;width:100%;padding:10px 5px}
.ul-info li .team-left,.ul-info li .team-right{flex:1;display:flex;flex-direction:column;align-items:center;text-align:center}
.ul-info li .match-time{flex:0 0 auto;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:0 15px}

/* ===== FOOTER ===== */
.ul-tabbar{
  position:fixed;bottom:0;left:0;width:100%;height:56px;
  display:flex;justify-content:space-between;
  background:var(--surface);
  border-top:1px solid var(--border);box-shadow:0 -1px 4px rgba(0,0,0,0.03);
  z-index:99999;padding-bottom:10px;list-style:none;margin:0;padding-left:0;
}
.ul-tabbar li{flex:1;text-align:center;list-style:none}
.ul-tabbar li a{
  display:flex;width:100%;height:100%;padding-top:2px;
  flex-direction:column;align-items:center;justify-content:center;
  font-size:10px;color:var(--text-light);
}
.ul-tabbar p{color:var(--text-light);font-size:10px;margin:0;transition:color 0.3s}
.ul-tabbar .on p{color:var(--accent);font-weight:600}
.footer{z-index:99999;position:fixed}

/* Tabbar icons - gray */
.ul-tabbar li i{display:block;width:22px;height:22px;background-size:contain;background-repeat:no-repeat;background-position:center;margin-bottom:2px}
.ul-tabbar li .icon_home{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23B5A89A'%3E%3Cpath d='M10 20v-6h4v6h5v-8h3L12 3 2 12h3v8z'/%3E%3C/svg%3E")}
.ul-tabbar li .icon_ai{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23B5A89A'%3E%3Cpath d='M9.5 2c-.7 0-1.3.5-1.5 1.2L6.3 8H2.1c-.8 0-1.3.9-.8 1.5L6 14l-1.7 5c-.3.8.5 1.5 1.3 1L12 16l6.4 4c.8.5 1.6-.2 1.3-1L18 14l4.7-4.5c.5-.6 0-1.5-.8-1.5h-4.2L16 3.2c-.2-.7-.8-1.2-1.5-1.2H9.5z'/%3E%3C/svg%3E")}
.ul-tabbar li .icon_match{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23B5A89A'%3E%3Ccircle cx='12' cy='12' r='10' fill='none' stroke='%23B5A89A' stroke-width='1.5'/%3E%3Cpath d='M7 7h2v2H7zm4 0h2v2h-2zm4 0h2v2h-2zM7 11h2v2H7zm4 2h2v2h-2zm4 0h2v2h-2zm-4 4h2v2h-2z'/%3E%3C/svg%3E")}
.ul-tabbar li .icon_market{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23B5A89A'%3E%3Cpath d='M3 13h2v-2H3v2zm0 4h2v-2H3v2zm0-8h2V7H3v2zm4 4h14v-2H7v2zm0 4h14v-2H7v2zM7 7v2h14V7H7z'/%3E%3C/svg%3E")}
.ul-tabbar li .icon_user{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23B5A89A'%3E%3Cpath d='M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z'/%3E%3C/svg%3E")}
.ul-tabbar .on .icon_home{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23FF6B35'%3E%3Cpath d='M10 20v-6h4v6h5v-8h3L12 3 2 12h3v8z'/%3E%3C/svg%3E")}
.ul-tabbar .on .icon_ai{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23FF6B35'%3E%3Cpath d='M9.5 2c-.7 0-1.3.5-1.5 1.2L6.3 8H2.1c-.8 0-1.3.9-.8 1.5L6 14l-1.7 5c-.3.8.5 1.5 1.3 1L12 16l6.4 4c.8.5 1.6-.2 1.3-1L18 14l4.7-4.5c.5-.6 0-1.5-.8-1.5h-4.2L16 3.2c-.2-.7-.8-1.2-1.5-1.2H9.5z'/%3E%3C/svg%3E")}
.ul-tabbar .on .icon_match{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23FF6B35'%3E%3Ccircle cx='12' cy='12' r='10' fill='none' stroke='%23FF6B35' stroke-width='1.5'/%3E%3Cpath d='M7 7h2v2H7zm4 0h2v2h-2zm4 0h2v2h-2zM7 11h2v2H7zm4 2h2v2h-2zm4 0h2v2h-2zm-4 4h2v2h-2z'/%3E%3C/svg%3E")}
.ul-tabbar .on .icon_market{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23FF6B35'%3E%3Cpath d='M3 13h2v-2H3v2zm0 4h2v-2H3v2zm0-8h2V7H3v2zm4 4h14v-2H7v2zm0 4h14v-2H7v2zM7 7v2h14V7H7z'/%3E%3C/svg%3E")}
.ul-tabbar .on .icon_user{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23FF6B35'%3E%3Cpath d='M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z'/%3E%3C/svg%3E")}

/* ===== DIALOGS ===== */
.dialog-overlay{background:rgba(0,0,0,0.3);backdrop-filter:blur(4px)}
.dialog-box{background:var(--surface);border:1px solid var(--border);border-radius:10px;box-shadow:var(--shadow-md)}
.dialog-title{background:linear-gradient(135deg,#FFF8F0,#FFF0E0);border-bottom:1px solid var(--border);color:var(--text)}
.custom-confirm{background:var(--surface);border:1px solid var(--border);color:var(--text);box-shadow:var(--shadow-md)}
.confirm-cancel-btn{background:var(--bg);color:var(--text);border:1px solid var(--border)}
.confirm-cancel-btn:hover{background:var(--border)}
.confirm-ok-btn{background:var(--accent-grad);color:#fff;font-weight:700}
.custom-toast{background:var(--surface);border:1px solid var(--border);color:var(--text);box-shadow:var(--shadow)}

/* ===== BUTTONS ===== */
.bet-btn{background:var(--accent-grad);color:#fff;box-shadow:0 2px 12px rgba(255,107,53,0.25);font-weight:700;border-radius:8px}
.bet-btn:hover{box-shadow:0 4px 20px rgba(255,107,53,0.4);transform:translateY(-1px)}
.bet-champion{background:var(--accent-grad);color:#fff}
.bet-runner-up{background:var(--surface-hover);color:var(--text);border:1px solid var(--border)}

/* ===== INPUTS ===== */
input{background:var(--surface);border:1px solid var(--border);color:var(--text);border-radius:8px}
input::placeholder{color:var(--text-muted)}
input:focus{border-color:var(--accent);box-shadow:0 0 0 3px rgba(255,107,53,0.12)}

/* ===== PROFILE ===== */
.balance-card{background:var(--surface) !important;border:1px solid var(--border);border-radius:8px}
.profile-menu{background:var(--surface);border:1px solid var(--border);border-radius:8px;overflow:hidden}
.profile-menu .menu-item{color:var(--text);border-bottom:1px solid var(--border);padding:14px 16px}
.profile-menu .menu-item:last-child{border-bottom:none}
.profile-menu .menu-item:active{background:var(--surface-hover)}

/* ===== VIP ===== */
.vip-card{
  background:linear-gradient(135deg,#FFF3E0 0%,#FFE0B2 100%) !important;
  border:1px solid rgba(255,107,53,0.12) !important;
}
#vipProgressBar{background:linear-gradient(90deg,#FF6B35,#FFA502) !important}

/* ===== CARDS ===== */
.team-card{background:var(--surface);border:1px solid var(--border);border-radius:8px;box-shadow:var(--shadow-sm)}
.team-card:hover{border-color:var(--accent);box-shadow:var(--shadow)}
.team-card .t-logo{background:var(--bg)}
.recent-bets-section{background:var(--surface);border:1px solid var(--border);border-radius:8px;padding:12px;margin-bottom:12px}

/* ===== RECORDS ===== */
.record-item{padding:12px;border-bottom:1px solid var(--border) !important}
.record-item .record-header{display:flex;justify-content:space-between;margin-bottom:4px}
.record-item .record-label{font-size:12px;color:var(--text-muted)}
.record-item .record-team{font-weight:600;margin-bottom:4px}
.record-item .record-footer{display:flex;justify-content:space-between;align-items:center}
.record-item .record-amount{font-size:13px}
.record-item .record-status{font-size:12px;font-weight:600}
.record-item .cancel-bet-btn{background:none;border:1px solid var(--red);color:var(--red);padding:4px 10px;border-radius:12px;font-size:11px;cursor:pointer}

/* Record pagination */
.pagination-bar{display:flex;justify-content:center;align-items:center;gap:12px;padding:12px;font-size:12px;color:#666}
.pagination-btn{background:var(--accent);color:#fff;border:none;padding:6px 12px;border-radius:4px;cursor:pointer;font-size:11px}
.pagination-btn:hover{opacity:0.9}

/* ===== PROFILE ACTION BUTTONS ===== */
.profile-actions{display:flex;gap:10px;margin-bottom:12px}
.action-btn{flex:1;padding:10px;border-radius:8px;font-size:13px;font-weight:600;cursor:pointer;transition:background-color .2s,color .2s;border:none;text-align:center}
.action-btn:active{opacity:0.8}
.deposit-btn{background:var(--accent-grad);color:#fff;box-shadow:0 2px 8px rgba(255,107,53,0.2)}
.withdraw-btn{background:var(--surface);color:var(--text);border:1px solid var(--border)}
.invite-btn{background:var(--surface);color:var(--accent);border:1px solid var(--border)}

/* ===== LANG MODAL ===== */
.global-lang-modal-content{background:var(--surface);border:1px solid var(--border)}
.global-lang-modal-header{background:linear-gradient(135deg,#FFF8F0,#FFF0E0);border-bottom:1px solid var(--border)}
.global-lang-option{color:var(--text);border-bottom:1px solid var(--border)}
.global-lang-option:active{background:var(--surface-hover)}
.global-lang-option.selected{background:rgba(255,107,53,0.06);color:var(--accent)}

/* ===== ABOUT ===== */
.platform-intro,.official-partners{background:var(--surface);border:1px solid var(--border);border-radius:8px;margin:12px}
.intro-content{background:var(--bg);color:var(--text);border:1px solid var(--border);border-radius:8px}
.section-title{color:var(--text);border-bottom-color:var(--accent)}
.section-title::before{background:var(--accent)}
.partners-grid-dark{display:flex;justify-content:center;align-items:center;gap:8px;flex-wrap:nowrap;background:var(--surface);border:1px solid var(--border);border-radius:8px;padding:8px 10px;margin:12px 0 80px}
.partner-item{flex-shrink:1;min-width:0;text-align:center}
.partner-item img{height:16px;width:auto;max-width:100%;filter:none;opacity:0.55;display:block}

/* ===== FILTERS ===== */
.filter-btn{background:var(--surface);border:1px solid var(--border);color:var(--text-light);border-radius:8px}
.filter-btn.active{background:var(--accent);color:#fff;border-color:var(--accent)}

/* ===== STATUS ===== */
.status-pending{background:rgba(255,107,53,0.08);color:var(--accent)}
.status-won{background:rgba(0,168,107,0.08);color:var(--green)}
.status-lost{background:rgba(255,71,87,0.08);color:var(--red)}

/* ===== QUICK AMOUNTS ===== */
.quick-amount{background:var(--surface);border:1px solid var(--border);color:var(--text-light)}
.quick-amount:hover{background:var(--surface-hover);border-color:var(--accent);color:var(--accent)}

/* ===== SCROLLBAR ===== */
::-webkit-scrollbar-thumb{background:#E0D8D0}
::-webkit-scrollbar-thumb:hover{background:var(--text-light)}

/* ===== EMPTY STATES ===== */
.empty-state,.empty-tips{color:var(--text-muted)}
.empty-state{padding:40px;text-align:center}

/* ===== ODDS ROW (used in match cards) ===== */
.odds-row{display:flex;justify-content:center;gap:12px;padding:4px 0;font-size:11px;border-top:1px solid var(--border);margin-top:4px}

/* ===== BET DIALOG ===== */
.bet-amount-dialog .dialog-box{background:var(--surface)}
.odds-display{background:var(--bg);border:1px solid var(--border);border-radius:8px}
.form-group label{color:var(--text-light)}

/* ===== LOAD MORE ===== */
.load-more-li{list-style:none;margin:12px 0}
.load-more-btn{display:block;text-align:center;padding:14px;color:var(--accent);font-size:14px;font-weight:600;text-decoration:none;background:var(--surface);border:1px dashed var(--border);border-radius:8px;transition:background-color .2s,color .2s}
.load-more-btn:hover{background:var(--accent);color:#fff;border-color:var(--accent)}

/* ===== LEAGUE GROUP HEADER ===== */
.league-group-header{list-style:none;margin:8px 0}
.league-group-header .con{background:rgba(255,107,53,0.06);border:1px solid var(--border);border-radius:6px;padding:4px 0 !important;text-align:center}
.league-group-header .con span{display:inline-block;background:var(--accent);color:#fff;border-radius:4px;font-size:11px;font-weight:700;letter-spacing:1px}

/* ===== SECTION TITLE ===== */
.section-title{font-size:20px;font-weight:bold;color:var(--text);margin-bottom:20px;padding-bottom:12px;border-bottom:3px solid var(--accent);position:relative;padding-left:15px}
.section-title::before{content:'';position:absolute;left:0;top:50%;transform:translateY(-50%);width:5px;height:24px;background:var(--accent-grad);border-radius:3px}

/* ===== SECTION HEADER ===== */
.section-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:15px}
.section-header h4{font-size:14px}

/* ===== RESPONSIVE BREAKPOINTS ===== */
@media (max-width:400px){
  .ul-info li .match-time .time{font-size:28px}
  .ul-info li .team-logo{width:50px;height:50px}
  .ul-info li .team-name{font-size:12px}
  .ul-info li .league-name .p1{font-size:12px}
  .ul-info li .league-name{margin:-12px auto 12px auto;padding:8px 12px;width:40%}
  .ul-info li .con{padding:12px 15px;min-height:120px}
  .wallet-connect{padding:4px 8px}
  .wallet-address{font-size:11px}
}

/* ===== STATS BAR ===== */
.stats-bar{display:flex;gap:0;background:var(--bg-alt);border:1px solid var(--border);border-radius:10px;padding:8px 0;margin:10px 0 6px;overflow:hidden;font-size:11px;text-align:center}
.stats-bar .stat-cell{flex:1;border-right:1px solid var(--border)}
.stats-bar .stat-cell:last-child{border-right:none}
.stats-bar .stat-label{color:var(--text-muted);font-size:10px}
.stats-bar .stat-value{font-weight:700;font-size:14px}
.stats-bar .stat-value.bets{color:var(--accent)}
.stats-bar .stat-value.online{color:var(--green)}
.stats-bar .stat-value.payout{color:#667eea}
.stats-bar .stat-value.users{color:var(--text)}

/* ===== ANNOUNCE BAR ===== */
.announce-bar{display:flex;align-items:center;gap:8px;background:linear-gradient(90deg,var(--bg-alt),#FFE0B2);border-radius:8px;padding:8px 12px;margin-bottom:8px;font-size:11px;color:#E65100;overflow:hidden}
.announce-bar .announce-text{flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;animation:marquee-scroll 15s linear infinite}

@keyframes marquee-scroll {
  0%{transform:translateX(100%)}
  100%{transform:translateX(-100%)}
}
.announce-bar .announce-icon{flex-shrink:0;font-size:14px}

/* ===== AI RECOMMENDATION ===== */
.ai-rec-card{background:linear-gradient(135deg,#667eea,#764ba2);border-radius:10px;padding:14px;margin-bottom:10px}
.ai-rec-card .rec-header{display:flex;justify-content:space-between;align-items:center}
.ai-rec-card .rec-label{font-size:10px;color:rgba(255,255,255,0.7)}
.ai-rec-card .rec-text{font-size:15px;font-weight:700;color:#fff;margin:4px 0}
.ai-rec-card .rec-stars{font-size:12px;color:#FFD700}
.ai-rec-card .rec-btn{background:rgba(255,255,255,0.2);color:#fff;border:1px solid rgba(255,255,255,0.3);padding:8px 16px;border-radius:20px;font-size:12px;font-weight:600;cursor:pointer;white-space:nowrap}
.ai-rec-card .rec-btn:hover{background:rgba(255,255,255,0.3)}

/* ===== TRUST SIGNALS ===== */
.trust-signals{display:flex;gap:6px;margin-bottom:10px;overflow-x:auto;padding-bottom:4px;-webkit-overflow-scrolling:touch}
.trust-signals::-webkit-scrollbar{display:none}
.trust-signal{flex-shrink:0;background:var(--surface);border:1px solid #E8F5E9;border-radius:8px;padding:6px 10px;font-size:10px;color:var(--text-light);min-width:100px;text-align:center}
.trust-signal .signal-title{color:var(--green);font-weight:700;font-size:11px}
.trust-signal .signal-sub{color:var(--text-muted);font-size:9px;margin-top:1px}

/* ===== PAGE TRANSITIONS ===== */
.tab_con{display:none;opacity:0;transition:opacity .25s ease}
.tab_con.show,.tab_con.active{display:block;opacity:1}
.page{opacity:0;transition:opacity .2s ease}
.page.active{opacity:1;animation:pageFadeIn .25s ease}
@keyframes pageFadeIn{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:translateY(0)}}

/* ===== SAFE AREA ===== */
@supports(padding-bottom:env(safe-area-inset-bottom)){
  .ul-tabbar{padding-bottom:calc(10px + env(safe-area-inset-bottom))}
  .main{padding-bottom:calc(70px + env(safe-area-inset-bottom))}
}

/* ===== VIP CARD (Sunshine theme) ===== */
.vip-card-sunshine{background:linear-gradient(135deg,var(--bg-alt),#FFE0B2);border:1px solid rgba(255,107,53,0.12);border-radius:12px;padding:14px 18px;margin-bottom:12px}
.vip-card-sunshine .vip-label{font-size:10px;color:var(--text-muted);margin-bottom:4px}
.vip-card-sunshine .vip-level{font-size:22px;font-weight:800;color:var(--text)}
.vip-card-sunshine .vip-stat{font-size:16px;font-weight:700;color:var(--text)}
.vip-card-sunshine .vip-progress-label{font-size:10px;color:var(--text-muted)}
.vip-card-sunshine .vip-progress-track{height:6px;background:rgba(255,107,53,0.12);border-radius:3px;overflow:hidden}
.vip-card-sunshine .vip-progress-bar{height:100%;background:linear-gradient(90deg,var(--accent),var(--gold));border-radius:3px;width:0%;transition:width .5s}
.vip-card-sunshine .vip-badge{display:inline-block;background:rgba(255,107,53,0.12);color:var(--accent);padding:2px 8px;border-radius:10px;font-size:10px}
.vip-card-sunshine .vip-badge.odds-badge{background:rgba(102,126,234,0.12);color:#667eea}

/* ===== DIALOG STANDARD ===== */
.dialog-overlay{position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,0.3);backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);display:flex;align-items:center;justify-content:center;z-index:100000}
.dialog-box{background:var(--surface);border:1px solid var(--border);border-radius:14px;box-shadow:var(--shadow-md);padding:20px;max-width:340px;width:90%;position:relative}
.dialog-box h3{font-size:16px;color:var(--text);margin:0 0 12px;text-align:center}
.dialog-box input{width:100%;padding:10px;border:1px solid var(--border);border-radius:8px;font-size:15px;text-align:center;font-weight:600;margin-bottom:8px}
.dialog-box input:focus{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-ring)}
.dialog-box .dialog-actions{display:flex;gap:8px;margin-top:12px}
.dialog-btn{flex:1;padding:10px;border:none;border-radius:8px;font-size:13px;font-weight:600;cursor:pointer;text-align:center}
.dialog-btn.primary{background:var(--accent-grad);color:#fff}
.dialog-btn.primary:hover{box-shadow:0 2px 12px rgba(255,107,53,0.3)}
.dialog-btn.secondary{background:var(--bg);color:var(--text);border:1px solid var(--border)}
.dialog-btn.secondary:hover{background:var(--surface-hover)}
.dialog-btn.info{background:var(--accent);color:#fff}

/* ===== QUICK AMOUNTS (dialog + detail page) ===== */
.quick-amounts{display:flex;gap:8px;margin-bottom:12px}
.quick-amount{flex:1;padding:10px 6px;border:2px solid var(--border);border-radius:10px;background:var(--bg);font-size:14px;font-weight:700;cursor:pointer;color:var(--text);text-align:center;transition:background-color .15s,color .15s,border-color .15s,transform .15s}
.quick-amount:hover{border-color:var(--accent);color:var(--accent);transform:translateY(-1px)}
.quick-amount.active,.quick-amount[style*="var(--accent)"]{background:var(--accent);color:#fff;border-color:var(--accent)}

/* ===== PROFILE HEADER ===== */
.profile-header{display:flex;align-items:center;gap:12px;padding:12px 0}
.profile-header .avatar{width:48px;height:48px;border-radius:50%;overflow:hidden;border:2px solid var(--border-light);flex-shrink:0}
.profile-header .avatar img{width:100%;height:100%;object-fit:cover}
.profile-header .user-info{flex:1;min-width:0}
.profile-header .nickname{font-size:15px;font-weight:600;color:var(--text)}
.profile-header .wallet-addr{font-size:11px;color:var(--text-muted);word-break:break-all}

/* ===== PNL PANEL ===== */
.pnl-panel{display:grid;grid-template-columns:1fr 1fr;gap:8px;padding:12px;background:var(--surface);border:1px solid var(--border);border-radius:8px;margin-bottom:12px}
.pnl-item{text-align:center}
.pnl-label{display:block;font-size:10px;color:var(--text-muted);margin-bottom:2px}
.pnl-value{font-size:16px;font-weight:700;color:var(--text)}

/* ===== INVITE MODAL (sunshine) ===== */
.invite-code-display{font-size:20px;font-weight:700;color:var(--accent);text-align:center;padding:10px;background:var(--bg-alt);border-radius:8px;margin-bottom:8px}
.invite-stats{font-size:13px;color:var(--text-light);text-align:center;padding:8px;background:var(--bg);border-radius:6px;margin-bottom:8px}
.invite-full-btn{width:100%;padding:8px;border:none;border-radius:6px;font-size:13px;cursor:pointer;font-weight:600}
.invite-full-btn.primary{background:var(--accent-grad);color:#fff}
.invite-full-btn.green{background:var(--green);color:#fff}
.invite-full-btn.gold{background:var(--gold);color:#fff}
.invite-full-btn.gray{background:var(--bg);color:var(--text-light);border:1px solid var(--border)}
.invite-full-btn:hover{opacity:.9}

/* ===== SCORE BET GRID ===== */
.score-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;margin-bottom:12px}
.score-cell{background:var(--surface);border:1px solid var(--border);border-radius:8px;padding:12px 4px;text-align:center;cursor:pointer;transition:background-color .15s,color .15s}
.score-cell:hover{border-color:var(--accent);background:var(--accent-glow)}
.score-cell.selected{border-color:var(--accent);background:linear-gradient(135deg,var(--accent-glow),rgba(255,107,53,0.12));box-shadow:0 0 0 2px var(--accent-ring)}
.score-cell .score-label{font-size:11px;color:var(--text-light)}
.score-cell .score-odds{font-size:13px;font-weight:700;color:var(--accent)}

/* ===== MATCH DETAIL ===== */
.match-detail-header{text-align:center;padding:16px 0;border-bottom:1px solid var(--border);margin-bottom:16px}
.match-teams{display:flex;justify-content:center;align-items:center;gap:16px;margin-bottom:8px}
.match-teams .team{font-size:16px;font-weight:600;color:var(--text)}
.match-teams .vs{font-size:14px;color:var(--text-muted);font-weight:700}
.match-meta{font-size:12px;color:var(--text-muted)}
.match-meta span{margin:0 8px}

/* ===== SECTION HEADER ===== */
.section-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px}
.section-header h4{font-size:14px;color:var(--text);margin:0}

/* ===== FILTER TABS (records) ===== */
.filter-tabs{display:flex;gap:4px}
.filter-btn{background:var(--surface);border:1px solid var(--border);color:var(--text-light);border-radius:8px;padding:4px 10px;font-size:11px;cursor:pointer;transition:background-color .15s,color .15s}
.filter-btn.active{background:var(--accent);color:#fff;border-color:var(--accent)}
.filter-btn:hover:not(.active){border-color:var(--accent);color:var(--accent)}

/* ===== BETS LIST ===== */
.bets-list{min-height:120px}
.record-item{padding:12px;border-bottom:1px solid var(--border)}
.record-item:last-child{border-bottom:none}
.record-header{display:flex;justify-content:space-between;margin-bottom:4px}
.record-label{font-size:11px;color:var(--text-muted)}
.record-team{font-weight:600;color:var(--text);margin-bottom:4px;font-size:13px}
.record-footer{display:flex;justify-content:space-between;align-items:center}
.record-amount{font-size:13px;font-weight:600}
.record-status{font-size:11px;font-weight:600}
.cancel-bet-btn{background:none;border:1px solid var(--red);color:var(--red);padding:4px 10px;border-radius:12px;font-size:11px;cursor:pointer}
.cancel-bet-btn:hover{background:var(--red-soft)}

/* ===== MARKET PAGE ===== */
.market-page{padding:12px}

/* ===== LOADING STATES ===== */
.loading-text{text-align:center;padding:40px;color:var(--text-muted)}

/* ===== SKELETON LOADING ===== */
@keyframes skeleton-pulse{0%{opacity:.6}50%{opacity:.2}100%{opacity:.6}}
.skeleton-loading{display:flex;flex-direction:column;gap:12px;padding:16px;list-style:none}
.skeleton-row{height:72px;background:var(--surface);border:1px solid var(--border);border-radius:8px;animation:skeleton-pulse 1.5s ease-in-out infinite}
.skeleton-row:nth-child(2){animation-delay:.2s}
.skeleton-row:nth-child(3){animation-delay:.4s}
.skeleton-row:nth-child(4){animation-delay:.6s}
.skeleton-row:nth-child(5){animation-delay:.8s}

/* Skeleton for market page (kline + orderbook) */
.skeleton-market{display:flex;flex-direction:column;gap:12px;padding:16px}
.skeleton-kline{height:280px;background:var(--surface);border:1px solid var(--border);border-radius:10px;animation:skeleton-pulse 1.5s ease-in-out infinite}
.skeleton-orderbook{height:200px;background:var(--surface);border:1px solid var(--border);border-radius:10px;animation:skeleton-pulse 1.5s ease-in-out infinite;animation-delay:.3s}

/* Skeleton for records */
.skeleton-record{height:80px;background:var(--surface);border:1px solid var(--border);border-radius:8px;animation:skeleton-pulse 1.5s ease-in-out infinite}

/* Skeleton for invite modal */
.skeleton-invite-row{height:20px;background:#f0f0f0;border-radius:4px;animation:skeleton-pulse 1.5s ease-in-out infinite}

/* ===== MOBILE TOUCH OPTIMIZATION ===== */
button, a, .quick-amount, .score-cell, .filter-btn, .action-btn, .load-more-btn, .partner-item {
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

/* ===== ACCESSIBILITY: FOCUS INDICATORS ===== */
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: 4px;
}

/* ===== MICRO-INTERACTIONS ===== */
.match-card:active, .team-card:active {
  transform: scale(0.98);
  transition: transform .1s ease;
}
.bet-btn:active, .action-btn:active, .quick-amount:active, .score-cell:active {
  transform: scale(0.95);
  transition: transform .1s ease;
}
.footer .ul-tabbar li a:active {
  transform: scale(0.92);
  transition: transform .1s ease;
}

/* ===== DIALOG ANIMATIONS ===== */
.dialog-overlay {
  opacity: 0;
  transition: opacity .2s ease;
  pointer-events: none;
}
.dialog-box {
  transform: translateY(20px) scale(0.96);
  transition: transform .25s cubic-bezier(.34,1.56,.64,1);
}
.dialog-overlay.show .dialog-box {
  transform: translateY(0) scale(1);
}

/* ===== TOAST ANIMATION ===== */
.custom-toast {
  animation: toastIn .3s cubic-bezier(.34,1.56,.64,1);
}
@keyframes toastIn {
  from { opacity: 0; transform: translateY(-12px) scale(0.95); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

/* ===== CARD HOVER ELEVATION ===== */
.match-card:hover, .team-card:hover {
  box-shadow: 0 4px 12px rgba(0,0,0,0.08);
  transition: box-shadow .2s ease;
}
.match-card, .team-card {
  transition: box-shadow .2s ease, transform .1s ease;
}

/* ===== SHIMMER SKELETON ENHANCEMENT ===== */
.skeleton-row, .skeleton-kline, .skeleton-orderbook, .skeleton-record {
  position: relative;
  overflow: hidden;
}
.skeleton-row::after, .skeleton-kline::after, .skeleton-orderbook::after, .skeleton-record::after {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,0.5) 50%, transparent 100%);
  animation: shimmer 2s infinite;
}
@keyframes shimmer {
  0% { transform: translateX(-100%); }
  100% { transform: translateX(100%); }
}
.skeleton-row:nth-child(2)::after, .skeleton-record:nth-child(2)::after { animation-delay: .15s; }
.skeleton-row:nth-child(3)::after { animation-delay: .3s; }
.skeleton-row:nth-child(4)::after { animation-delay: .45s; }

/* ===== DIALOG ANIMATIONS (class-based) ===== */
.dialog-overlay.show {
  opacity: 1;
  pointer-events: auto;
}
.dialog-overlay .dialog-box {
  transform: translateY(20px) scale(0.96);
  transition: transform .25s cubic-bezier(.34,1.56,.64,1);
}
.dialog-overlay.show .dialog-box {
  transform: translateY(0) scale(1);
}

/* ===== CONFIRM DIALOG ===== */
.custom-confirm-overlay.show {
  opacity: 1;
  pointer-events: auto;
}
.custom-confirm.show {
  transform: translateY(0) scale(1);
}
.custom-confirm {
  transform: translateY(20px) scale(0.96);
  transition: transform .25s cubic-bezier(.34,1.56,.64,1);
}

/* ===== LANGUAGE BAR ===== */
.lang-bar {
  display: flex;
  justify-content: center;
  gap: 6px;
  padding: 5px 10px;
  background: var(--bg);
  border-bottom: 1px solid var(--border);
  font-size: 11px;
}
.lang-item {
  padding: 2px 8px;
  border-radius: 10px;
  cursor: pointer;
  color: var(--text-muted);
  transition: background-color .15s, color .15s;
  user-select: none;
}
.lang-item:hover {
  background: var(--surface-hover);
  color: var(--text);
}
.lang-item.active {
  background: var(--accent);
  color: #fff;
  font-weight: 600;
}

/* ===== PROFILE MENU ICONS ===== */
.menu-icon{display:inline-block;width:20px;height:20px;background-size:contain;background-repeat:no-repeat;background-position:center;flex-shrink:0;margin-right:10px}
.icon-transactions{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%238B7E74'%3E%3Cpath d='M19 3H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zM9 17H7v-7h2v7zm4 0h-2V7h2v10zm4 0h-2v-4h2v4z'/%3E%3C/svg%3E")}
.icon-bets{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%238B7E74'%3E%3Cpath d='M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z'/%3E%3Cpath d='M11 17h2v-6h-2v6zm1-9c-.6 0-1 .4-1 1s.4 1 1 1 1-.4 1-1-.4-1-1-1z'/%3E%3C/svg%3E")}
.icon-about{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%238B7E74'%3E%3Cpath d='M11 17h2v-6h-2v6zm1-15C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8zM11 9h2V7h-2v2z'/%3E%3C/svg%3E")}
.icon-vip{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%238B7E74'%3E%3Cpath d='M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z'/%3E%3C/svg%3E")}

/* ===== BOTTOM NAV AI icon → sparkle ===== */
.ul-tabbar li .icon_ai{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23B5A89A'%3E%3Cpath d='M12 2l1.5 5h5l-4 3 1.5 5L12 12l-4 3 1.5-5-4-3h5z'/%3E%3Ccircle cx='12' cy='5' r='1.5'/%3E%3Ccircle cx='9' cy='17' r='1'/%3E%3Ccircle cx='18' cy='9' r='1'/%3E%3C/svg%3E")}
.ul-tabbar .on .icon_ai{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23FF6B35'%3E%3Cpath d='M12 2l1.5 5h5l-4 3 1.5 5L12 12l-4 3 1.5-5-4-3h5z'/%3E%3Ccircle cx='12' cy='5' r='1.5'/%3E%3Ccircle cx='9' cy='17' r='1'/%3E%3Ccircle cx='18' cy='9' r='1'/%3E%3C/svg%3E")}

/* ===== Match icon → soccer ===== */
.ul-tabbar li .icon_match{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23B5A89A'%3E%3Ccircle cx='12' cy='12' r='10' fill='none' stroke='%23B5A89A' stroke-width='1.5'/%3E%3Cpath d='M8 8l3 3-3 3m8-6l-3 3 3 3M12 5v3m0 8v3M5 12h3m8 0h3' stroke='%23B5A89A' stroke-width='1.2' fill='none'/%3E%3C/svg%3E")}
.ul-tabbar .on .icon_match{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23FF6B35'%3E%3Ccircle cx='12' cy='12' r='10' fill='none' stroke='%23FF6B35' stroke-width='1.5'/%3E%3Cpath d='M8 8l3 3-3 3m8-6l-3 3 3 3M12 5v3m0 8v3M5 12h3m8 0h3' stroke='%23FF6B35' stroke-width='1.2' fill='none'/%3E%3C/svg%3E")}

/* ===== SECTION ICONS ===== */
/* Top tab icons */
.icon-recommend{display:inline-block;width:16px;height:16px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23FF6B35'%3E%3Cpath d='M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z'/%3E%3C/svg%3E") no-repeat center/contain;vertical-align:middle;margin-right:4px}
.icon-champion{display:inline-block;width:16px;height:16px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23FFA502'%3E%3Cpath d='M19 5h-2V3H7v2H5c-1.1 0-2 .9-2 2v1c0 2.55 1.92 4.63 4.39 4.94.63 1.5 1.98 2.63 3.61 2.96V19H7v2h10v-2h-4v-3.1c1.63-.33 2.98-1.46 3.61-2.96C19.08 12.63 21 10.55 21 8V7c0-1.1-.9-2-2-2zM5 8V7h2v3.82C5.84 10.4 5 9.3 5 8zm14 0c0 1.3-.84 2.4-2 2.82V7h2v1z'/%3E%3C/svg%3E") no-repeat center/contain;vertical-align:middle;margin-right:4px}
.icon-info{display:inline-block;width:16px;height:16px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%238B7E74'%3E%3Cpath d='M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-6h2v6zm0-8h-2V7h2v2z'/%3E%3C/svg%3E") no-repeat center/contain;vertical-align:middle;margin-right:4px}

/* Profile action icons */
.icon-deposit{display:inline-block;width:16px;height:16px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23fff'%3E%3Cpath d='M11 17h2v-4h4v-2h-4V7h-2v4H7v2h4v4zm1 5c-5.52 0-10-4.48-10-10S6.48 2 12 2s10 4.48 10 10-4.48 10-10 10zm0-18c-4.41 0-8 3.59-8 8s3.59 8 8 8 8-3.59 8-8-3.59-8-8-8z'/%3E%3C/svg%3E") no-repeat center/contain;vertical-align:middle;margin-right:6px}
.icon-withdraw{display:inline-block;width:16px;height:16px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23fff'%3E%3Cpath d='M11 7h2v6h-2V7zm1 10c.55 0 1-.45 1-1s-.45-1-1-1-1 .45-1 1 .45 1 1 1zm0-15C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8z'/%3E%3C/svg%3E") no-repeat center/contain;vertical-align:middle;margin-right:6px}

/* VIP icon */
.icon-crown{display:inline-block;width:16px;height:16px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23FFA502'%3E%3Cpath d='M5 16L3 5l5.5 5L12 4l3.5 6L21 5l-2 11H5zm14 2v2H5v-2h14z'/%3E%3C/svg%3E") no-repeat center/contain;vertical-align:middle;margin-right:4px}

/* Pool/treasury icon */
.icon-pool{display:inline-block;width:16px;height:16px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23667eea'%3E%3Cpath d='M21 18v1c0 1.1-.9 2-2 2H5c-1.11 0-2-.9-2-2V5c0-1.1.89-2 2-2h14c1.1 0 2 .9 2 2v1h-9c-1.11 0-2 .9-2 2v8c0 1.1.89 2 2 2h9zm-9-2h10V8H12v8zm4-2.5c-.83 0-1.5-.67-1.5-1.5s.67-1.5 1.5-1.5 1.5.67 1.5 1.5-.67 1.5-1.5 1.5z'/%3E%3C/svg%3E") no-repeat center/contain;vertical-align:middle;margin-right:4px}

/* ===== BETTING UI ===== */
.quick-bet-section{padding:12px 0;text-align:center}
.place-bet-btn{
  width:100%;padding:12px;margin-top:10px;
  background:linear-gradient(135deg,#FF6B35,#FFA502);
  color:#fff;border:none;border-radius:10px;
  font-size:14px;font-weight:700;cursor:pointer;
  box-shadow:0 2px 12px rgba(255,107,53,0.35);
  transition:transform .15s,box-shadow .15s;
}
.place-bet-btn:hover{transform:translateY(-1px);box-shadow:0 4px 18px rgba(255,107,53,0.5)}
.place-bet-btn:active{transform:scale(0.97)}

/* ===== TOP BALANCE BAR ===== */
.balance-bar{
  display:flex;justify-content:center;align-items:center;gap:12px;
  padding:5px 16px;background:#1a1a2e;color:#FFD700;
  font-size:12px;font-weight:600;
}
.balance-bar span{display:flex;align-items:center;gap:4px}

/* ===== SPONSOR BAR (fixed above tabbar) ===== */
/* spacer to prevent content overlap */

/* ============================================================
   UI OPTIMIZATION PASS — 2026-06-13
   ============================================================ */

/* Smooth scrolling + selection */
html{scroll-behavior:smooth}
::selection{background:var(--accent);color:#fff}
::placeholder{color:var(--text-muted);opacity:1}

/* Consistent focus ring */
:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:4px}
button:focus-visible:not(:active){outline-offset:2px}

/* Card uniformity */
.card, .dialog-box, .team-card, .champion-bet-section .team-card,
.profile-header, .balance-card, .pnl-card, .recent-bets-section{
  background:var(--surface);border-radius:12px;
  box-shadow:var(--shadow-sm);overflow:hidden
}

/* Button system */
button, .btn{
  font-family:inherit;cursor:pointer;border:none;border-radius:8px;
  font-weight:600;transition:transform .15s,box-shadow .15s,background .2s;
  -webkit-tap-highlight-color:transparent
}
button:active{transform:scale(0.97)}
button:disabled{opacity:0.5;cursor:not-allowed;transform:none}

/* Input uniformity */
input, select, textarea{
  font-family:inherit;font-size:14px;border:1px solid var(--border);
  border-radius:8px;padding:10px 12px;background:var(--surface);
  color:var(--text);transition:border-color .15s;width:100%
}
input:focus, select:focus, textarea:focus{
  border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-ring)
}

/* Touch target minimum */
.touch-target, .quick-amount, .bet-btn, .score-cell,
.action-btn, .menu-item, .filter-btn, .bottom-nav a{
  min-height:44px;min-width:44px;display:flex;align-items:center;justify-content:center
}

/* Skeleton shimmer uniformity */
@keyframes shimmer{
  from{background-position:-200% 0}to{background-position:200% 0}
}
.skeleton-row, .skeleton-card{
  height:80px;border-radius:10px;
  background:linear-gradient(90deg,var(--surface) 25%,var(--border) 37%,var(--surface) 63%);
  background-size:200% 100%;animation:shimmer 1.5s ease infinite
}

/* Empty state */
.empty-state{
  text-align:center;padding:40px 20px;color:var(--text-muted)
}
.empty-state .empty-icon{font-size:48px;margin-bottom:12px}
.empty-state .empty-text{font-size:13px;line-height:1.6}

/* ===== CHAMPION BET TEAM CARDS ===== */
.champion-bet-section .team-card{
  display:flex;flex-direction:column;align-items:center;gap:8px;
  padding:16px 10px;text-align:center;min-width:120px
}
.team-card .team-logo{margin-bottom:4px}
.team-card .team-name{font-size:13px;font-weight:600;color:var(--text)}
.team-card .odds-group{display:flex;gap:8px;width:100%}
.team-card .odds-item{flex:1;text-align:center;padding:4px 0}
.team-card .odds-label{font-size:10px;color:var(--text-muted);display:block}
.team-card .odds-value{font-size:16px;font-weight:700;color:var(--accent)}
.team-card .bet-buttons{display:flex;gap:4px;width:100%}
.team-card .bet-btn{flex:1;padding:6px 4px;font-size:11px;font-weight:700;border-radius:6px}
.team-card .bet-btn.bet-champion{background:linear-gradient(135deg,var(--gold),#FFC107);color:#fff}
.team-card .bet-btn.bet-runner-up{background:var(--surface);color:var(--accent);border:1px solid var(--accent)}
.team-card .bet-btn:hover{opacity:0.9}

/* ===== TEAMS GRID (champion) ===== */
#teamsGrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:8px;padding:8px 0}

/* ===== FOOTER LINKS BAR ===== */
.footer-links-bar{
  position:fixed;bottom:5px;left:0;right:0;z-index:49;
  display:flex;justify-content:center;align-items:center;gap:4px;
  padding:4px 12px;background:var(--surface);
  border-top:1px solid var(--border);font-size:10px;
}
.footer-links-bar a{color:var(--text-muted);text-decoration:none;transition:color .15s}
.footer-links-bar a:hover{color:var(--accent)}
.footer-links-bar span{color:var(--border)}

/* ===== CENTER TOAST (wallet alerts etc) ===== */
.toast-center{
  position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);
  background:#DBEBFF;color:#1A5CA8;border:1px solid #B8D4F0;
  border-radius:12px;padding:16px 24px;font-size:14px;font-weight:600;
  text-align:center;z-index:99999;max-width:320px;
  box-shadow:0 8px 32px rgba(26,92,168,0.15);
  animation:toastCenterIn .35s cubic-bezier(.34,1.56,.64,1);
  line-height:1.6;
}
.toast-center a{color:#1A5CA8;text-decoration:underline;font-weight:700}
.toast-center.fade-out{animation:toastCenterOut .3s ease forwards}
@keyframes toastCenterIn{from{opacity:0;transform:translate(-50%,-50%) scale(.9)}to{opacity:1;transform:translate(-50%,-50%) scale(1)}}
@keyframes toastCenterOut{from{opacity:1;transform:translate(-50%,-50%) scale(1)}to{opacity:0;transform:translate(-50%,-45%) scale(.95)}}

/* ===== GENERAL TOAST (enhanced) ===== */
.custom-toast{
  position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);
  background:var(--surface);border:1px solid var(--border);
  color:var(--text);box-shadow:var(--shadow-md);
  border-radius:10px;padding:14px 24px;font-size:13px;font-weight:600;
  text-align:center;z-index:99998;max-width:300px;
  opacity:0;pointer-events:none;
  transition:opacity .25s ease,transform .25s ease;
}
.custom-toast.show{opacity:1;pointer-events:auto}

/* ============================================================
   UI HARMONY PASS — Natural/Smooth/Centered/Coordinated
   ============================================================ */

/* --- Centering --- */
.lang-bar{justify-content:center;text-align:center}
.header .wp{display:flex;align-items:center;justify-content:space-between}
.header .logo{display:flex;align-items:center}
.stats-bar{justify-content:center;text-align:center}
.ai-rec-card{text-align:center}
.trust-signals{justify-content:center}
.announce-bar{justify-content:center;text-align:center}

/* --- Cohesive transitions --- */
.match-content, .team-card, .dialog-box, .stats-bar, 
.announce-bar, .ai-rec-card, .trust-signals{
  transition:transform .2s ease,box-shadow .2s ease,opacity .2s ease
}

/* --- Natural spacing (8px grid) --- */
.card, .dialog-box, .match-card, .team-card, .bet-panel,
.profile-section, .section-block{padding:16px;gap:8px}
.panel-header{padding:12px 16px}
.action-row{gap:8px}

/* --- Coordinated shadows --- */
.match-card, .team-card, .dialog-box, .bet-panel{
  box-shadow:0 1px 3px rgba(0,0,0,0.04),0 2px 8px rgba(0,0,0,0.04)
}
.match-card:hover, .team-card:hover{
  box-shadow:0 2px 6px rgba(0,0,0,0.06),0 4px 16px rgba(0,0,0,0.06)
}

/* --- Country icon refinement --- */
.team-logo img{
  border-radius:50%;object-fit:contain;background:var(--bg);
  border:2px solid var(--border-light);transition:border-color .2s
}
.team-logo:hover img{border-color:var(--accent)}
.team-name{font-size:13px;font-weight:600;text-align:center;max-width:80px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* --- Page transitions --- */
.tab_con.active{animation:tabSlideIn .2s ease}
@keyframes tabSlideIn{from{opacity:0;transform:translateY(3px)}to{opacity:1;transform:translateY(0)}}

/* --- Language bar active state --- */
.lang-item.active{background:var(--accent);color:#fff;border-radius:4px;padding:2px 6px}
.lang-item{transition:background .2s,color .2s;padding:2px 6px;border-radius:4px;cursor:pointer}
.lang-item:hover{background:var(--accent-glow)}

/* ============================================================
   TEXT / IMAGE / ICON OPTIMIZATION PASS
   ============================================================ */

/* --- Text readability baseline --- */
body{line-height:1.6}
p,li,span,a,div{line-height:inherit}
small,.text-sm{font-size:11px;line-height:1.5}
.text-xs{font-size:10px;line-height:1.4}
h1,h2,h3,h4{line-height:1.3}

/* --- Minimum readable sizes (kill 9px) --- */
.stat-label,.odds-label,.pnl-label{font-size:10px !important}
.footer-links-bar,.footer-links-bar a{font-size:10px}
.match-time .date{font-size:10px}

/* --- Team logo fallback polish --- */
.team-logo img{
  border-radius:50%;object-fit:contain;
  background:linear-gradient(135deg,#F5F0EB 0%,#EDE4D8 100%);
  border:2px solid var(--border);transition:border-color .2s,transform .2s
}
.team-logo img:hover{transform:scale(1.05)}

/* --- Bottom nav icon sizing --- */
.ul-tabbar li i{width:22px;height:22px;margin-bottom:3px}
.ul-tabbar p{font-size:10px;font-weight:500;margin-top:1px}

/* --- Menu icon polish --- */
.menu-icon{width:22px;height:22px;margin-right:10px;opacity:0.8}
.menu-item:hover .menu-icon{opacity:1}

/* --- Section icon consistency --- */
.icon-recommend,.icon-champion,.icon-info,
.icon-deposit,.icon-withdraw,.icon-crown{
  width:18px;height:18px;margin-right:5px;vertical-align:middle
}

/* --- Image quality --- */
img{image-rendering:auto;-webkit-backface-visibility:hidden}
img[loading="lazy"]{content-visibility:auto}

/* ============================================================
   PREMIUM UPGRADE — World-class sports betting aesthetics
   ============================================================ */

/* --- Global polish --- */
a:hover{color:var(--primary-dark)}
body{letter-spacing:-.01em} /* slight tightening for premium feel */
h1,h2,h3{font-weight:600;letter-spacing:-.02em;line-height:1.2}

/* --- Header --- */
.header{
  background:var(--surface);border-bottom:1px solid var(--border);
  box-shadow:var(--shadow-sm);backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px)
}

/* --- Cards (Stripe-style depth) --- */
.match-card,.team-card,.dialog-box,.bet-panel,.profile-section,.section-block{
  background:var(--surface);border:1px solid var(--border);
  border-radius:var(--radius);box-shadow:var(--shadow);
  transition:box-shadow .2s ease,transform .15s ease,border-color .2s ease
}
.match-card:hover,.team-card:hover{
  box-shadow:var(--shadow-md);border-color:var(--primary-light);
  transform:translateY(-1px)
}

/* --- Buttons --- */
.bet-btn,.place-bet-btn,.dialog-btn.primary{
  background:var(--accent-grad);color:#fff;
  border-radius:var(--radius-sm);font-weight:600;
  padding:10px 20px;font-size:14px;letter-spacing:-.01em;
  border:none;transition:transform .1s,box-shadow .15s,opacity .15s
}
.bet-btn:hover{box-shadow:var(--shadow-md);transform:translateY(-1px)}
.bet-btn:active{transform:scale(.97)}

/* --- Wallet --- */
.wallet-connect{
  background:var(--accent-grad);color:#fff;
  border-radius:var(--radius-sm);padding:8px 16px;
  font-weight:600;font-size:13px;letter-spacing:-.01em;
  box-shadow:var(--shadow-sm);transition:box-shadow .2s,transform .2s
}
.wallet-connect:hover{box-shadow:var(--shadow);transform:translateY(-1px)}

/* --- Quick amounts --- */
.quick-amount{
  background:var(--surface);border:1.5px solid var(--border);
  border-radius:var(--radius);padding:10px 8px;font-size:13px;
  font-weight:600;color:var(--text-light);transition:border-color .15s,background .15s
}
.quick-amount.active{
  background:var(--primary);color:#fff;border-color:var(--primary);
  box-shadow:var(--shadow-sm)
}
.quick-amount:hover:not(.active){border-color:var(--primary-light);background:var(--accent-glow)}

/* --- Bottom nav --- */
.ul-tabbar{
  background:var(--surface);border-top:1px solid var(--border);
  box-shadow:rgba(50,50,93,0.06) 0px -2px 8px -2px
}
.ul-tabbar li a{color:var(--text-muted);font-size:10px;transition:color .15s}
.ul-tabbar li.on a,.ul-tabbar li a:hover{color:var(--primary)}

/* --- Stats bar --- */
.stats-bar{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow-sm)}
.stats-bar .stat-value{font-weight:700;color:var(--text)}
.stats-bar .stat-value.up{color:var(--green)}
.stats-bar .stat-value.down{color:var(--red)}
.stats-bar .stat-value.payout{color:var(--primary)}
.stats-bar .stat-label{color:var(--text-muted);font-size:10px;text-transform:uppercase;letter-spacing:.05em}

/* --- Odds display --- */
.odds-display{font-weight:700;letter-spacing:-.02em;font-size:15px}

/* --- Footer links --- */
.footer-links-bar{background:var(--surface);border-top:1px solid var(--border)}
.footer-links-bar a:hover{color:var(--primary)}

/* ============================================================
   WORLD-CLASS POLISH — Skeleton / Empty / Confetti / Pulse
   ============================================================ */

/* --- Skeleton loading --- */
@keyframes shimmer{0%{background-position:-400px 0}100%{background-position:400px 0}}
.skeleton{
  background:linear-gradient(90deg,var(--border) 25%,var(--border-light) 50%,var(--border) 75%);
  background-size:800px 100%;animation:shimmer 1.5s infinite;border-radius:4px
}
.skeleton-text{height:14px;margin:8px 0;width:80%}
.skeleton-title{height:18px;width:60%}
.skeleton-avatar{width:44px;height:44px;border-radius:50%}

/* --- Empty state --- */
.empty-state{text-align:center;padding:var(--space-xl);color:var(--text-muted)}
.empty-state svg{width:64px;height:64px;margin-bottom:var(--space-md);opacity:.3}
.empty-state h3{font-size:16px;margin:0 0 8px;color:var(--text-light)}
.empty-state p{font-size:13px;margin:0}

/* --- Live odds pulse --- */
@keyframes oddsPulse{0%,100%{transform:scale(1)}50%{transform:scale(1.08);color:var(--green)}}
.odds-live{animation:oddsPulse .6s ease;display:inline-block;font-weight:700}
.odds-up{color:var(--green)}
.odds-down{color:var(--red)}

/* --- Match countdown --- */
.countdown{font-size:20px;font-weight:700;color:var(--text);letter-spacing:-.02em}
.countdown span{font-size:10px;color:var(--text-muted);font-weight:400}

/* --- Champion bet card --- */
.team-card{
  background:var(--surface);border:1px solid var(--border);
  border-radius:var(--radius);box-shadow:var(--shadow-sm);
  padding:var(--space-md);text-align:center;transition:box-shadow .2s,border-color .2s
}
.team-card:hover{border-color:var(--primary-light);box-shadow:var(--shadow)}
.team-card .team-name{font-size:14px;font-weight:600;margin:8px 0 4px;color:var(--text)}
.team-card .team-odds{font-size:13px;color:var(--text-light)}
.team-card .team-odds em{font-style:normal;font-weight:700;color:var(--primary);font-size:15px}
.team-card .action-btn{margin-top:8px}

/* --- Winning confetti trigger (CSS only) --- */
@keyframes confettiFall{0%{transform:translateY(-100px) rotate(0deg);opacity:1}100%{transform:translateY(100vh) rotate(720deg);opacity:0}}
.confetti-piece{
  position:fixed;width:8px;height:8px;border-radius:2px;
  animation:confettiFall 2s ease-in forwards;pointer-events:none;z-index:9999
}

/* --- Priority team highlight --- */
.team-card.featured{border-color:var(--gold);background:var(--gold-light)}

/* --- Micro-interaction feedback --- */
.tap-feedback:active{transform:scale(.96);transition:transform .1s}

/* ============================================================
   DARK MODE + ACCESSIBILITY
   ============================================================ */
@media(prefers-color-scheme:dark){
  :root{
    --bg:#0F172A;--bg-alt:#1E293B;--surface:#1E293B;
    --surface-hover:#334155;--text:#F8FAFC;--text-light:#94A3B8;
    --text-muted:#64748B;--border:#334155;--border-light:#1E293B;
    --shadow-sm:rgba(0,0,0,0.3) 0px 2px 5px -1px;
    --shadow:rgba(0,0,0,0.4) 0px 8px 20px -6px;
    --shadow-md:rgba(0,0,0,0.5) 0px 16px 32px -12px;
  }
  .header{background:var(--surface);backdrop-filter:blur(12px)}
  .team-logo img{background:var(--bg)}
  .balance-bar{background:#1E293B}
  img{opacity:.9}
}

/* --- A11y: ARIA + focus + reduced motion --- */
:focus-visible{outline:2px solid var(--primary);outline-offset:2px;border-radius:2px}
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms !important;transition-duration:.01ms !important}
}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}
[role="button"]{cursor:pointer}

/* ============================================================
   DAPP UX — Network badge / Tx toast / Wallet hints
   ============================================================ */
#networkBadge{backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
#txToast{backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px)}
#txToast a:hover{text-decoration:underline}