:root {
  
  --x8-ink: #2c3e50;
  --x8-ink-2: #5a6674;
  --x8-ink-3: #8a93a6;
  --x8-ink-4: #aab2c0;
  --x8-line: #e4e8ee;
  --x8-line-2: #d3d9e2;
  --x8-surface: #fff;
  --x8-surface-2: #fafbfd;
  --x8-surface-3: #f0f3f8;
  --x8-ground: #eef1f6;

  
  --x8-red-1: #ff7a68;  --x8-red-2: #e02414;  --x8-red-3: #c01508;
  --x8-blue-1: #4f9ee0; --x8-blue-2: #176aae; --x8-blue-3: #0f5490;
  --x8-green-1: #40c273; --x8-green-2: #189249; --x8-green-3: #0f7539;
  --x8-red: var(--x8-red-2);
  --x8-blue: var(--x8-blue-2);
  --x8-green: var(--x8-green-2);

  
  --x8-ok: #2e9e5b;
  --x8-warn: #c47612;
  --x8-danger: #d14343;
  --x8-muted: #8a93a6;

  
  --x8-r-sm: 5px;
  --x8-r-md: 8px;
  --x8-r-lg: 12px;
  --x8-r-pill: 999px;

  
  --x8-ball: 38px;
  --x8-ball-font: 16px;
  --x8-grid-cols: 10;
  --x8-grid-gap: 8px 6px;
  --x8-cell-pad: 8px 2px 6px;
  --x8-hit-min: 32px;                                      
  --x8-cell-font: 15px;
  --x8-odds-font: 12px;

  
  --x8-ball-shadow: inset 0 -3px 5px rgba(0, 0, 0, .22), 0 2px 5px rgba(0, 0, 0, .18);
  --x8-shadow-1: 0 1px 2px rgba(16, 24, 34, .06);
  --x8-shadow-2: 0 4px 16px rgba(16, 24, 34, .10);
  --x8-shadow-up: 0 -6px 24px rgba(0, 0, 0, .18);          

  
  --x8-t-fast: .12s;                                       
  --x8-t-mid: .2s;                                         
  --x8-t-slow: .28s;                                       

  

  --x8-font: PingFangSC-Regular, Tahoma, "微软雅黑", "Microsoft YaHei", sans-serif;

  



  --x8-num: PingFangSC-Regular, Tahoma, "微软雅黑", "Microsoft YaHei", sans-serif;
}


html[data-x8="mobile"] body,
html[data-x8="mobile"] button,
html[data-x8="mobile"] input,
html[data-x8="mobile"] select,
html[data-x8="mobile"] textarea { font-family: var(--x8-font); }



body {
  --x8-main: var(--main-color, #0aa9ff);
  --x8-main-rgb: var(--main-color-rgb, 10, 169, 255);
  --x8-main-on: #fff;                                      
  --x8-main-soft: rgba(var(--x8-main-rgb), .10);            
  --x8-main-softer: rgba(var(--x8-main-rgb), .05);
  --x8-main-line: rgba(var(--x8-main-rgb), .38);
  --x8-main-glow: rgba(var(--x8-main-rgb), .32);            
  

  --x8-main-ink: var(--x8-main);
}

@supports (color: color-mix(in srgb, red, blue)) {
  body { --x8-main-ink: color-mix(in srgb, var(--x8-main) 60%, #0d1620); }
  
}


[data-x8="mobile"] {
  --x8-ball: 0.90667rem;
  --x8-ball-font: 0.37333rem;
  --x8-grid-cols: 7;
  --x8-grid-gap: 0.24rem 0.13333rem;
  --x8-cell-pad: 0.13333rem 0.05333rem;
  --x8-hit-min: 1.17333rem;                                
  --x8-cell-font: 0.37333rem;
  --x8-ball-shadow: inset 0 -0.05333rem 0.08rem rgba(0, 0, 0, .16), 0 1px 0.08rem rgba(0, 0, 0, .16);
  
  --x8-r-sm: 0.13333rem;
  --x8-r-md: 0.21333rem;
  --x8-odds-font: 0.32rem;
  --x8-shadow-1: 0 1px 0.05333rem rgba(16, 24, 34, .06);
  --x8-shadow-up: 0 -0.16rem 0.64rem rgba(0, 0, 0, .18);
}

@media (prefers-reduced-motion: reduce) {
  :root { --x8-t-fast: .01ms; --x8-t-mid: .01ms; --x8-t-slow: .01ms; }
}