*{margin:0;padding:0;box-sizing:border-box}
:root{
  --accent:#E60012;--accent-light:#FFF0F1;
  --text-primary:#1A1A1A;--text-secondary:#666;--text-tertiary:#999;
  --bg-page:#F5F5F5;--bg-card:#FFF;--bg-sidebar:#FAFAFA;--bg-row-alt:#FAFAFA;
  --border:#EBEBEB;--streak-bg:#FFF1F0;--streak-text:#E60012;
  --anomaly-bg:#FFF7E6;--anomaly-text:#D46B08;
  --font-body:-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Hiragino Sans GB","Microsoft YaHei",sans-serif;
  --font-mono:"SF Mono","Geist Mono","Cascadia Code",monospace;
}
body{font-family:var(--font-body);background:var(--bg-page);color:var(--text-primary);min-height:100vh}

/* Bottom nav */
.mobile-bottom-nav{display:none;position:fixed;bottom:0;left:0;right:0;background:#fff;border-top:1px solid var(--border);z-index:100;padding:6px 0 env(safe-area-inset-bottom);-webkit-transform:translateZ(0);transform:translateZ(0)}
.mobile-bottom-nav-inner{display:flex;align-items:center;justify-content:space-around}
.mobile-bottom-nav a{display:flex;flex-direction:column;align-items:center;gap:3px;text-decoration:none;font-size:10px;color:var(--text-tertiary);padding:2px 12px;min-width:0;transition:color .15s}
.mobile-bottom-nav a svg{width:22px;height:22px}
.mobile-bottom-nav a.active{color:var(--accent)}
.mobile-bottom-nav a.loading{color:var(--accent);pointer-events:none}

/* Page loading overlay */
.page-loading-overlay{display:none;position:fixed;inset:0;background:rgba(255,255,255,.8);z-index:200;align-items:center;justify-content:center;flex-direction:column;gap:12px}
.page-loading-overlay.show{display:flex}
.page-loading-spinner{width:32px;height:32px;border:3px solid var(--border);border-top-color:var(--accent);border-radius:50%;animation:spin .6s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}

/* Nav */
.nav-allstar{background:#fff;border-bottom:1px solid var(--border);position:sticky;top:0;z-index:100;height:56px}
.nav-allstar-inner{max-width:1400px;margin:0 auto;padding:0 16px;height:100%;display:flex;align-items:center;gap:16px}
.nav-allstar-logo{text-decoration:none;flex-shrink:0}
.nav-allstar-logo .brand{font-size:16px;font-weight:700;color:var(--text-primary);white-space:nowrap}
.nav-allstar-links{display:flex;gap:20px;flex:1}
.nav-allstar-links a{font-size:14px;color:var(--text-secondary);text-decoration:none;font-weight:400;transition:color .15s;white-space:nowrap}
.nav-allstar-links a:hover,.nav-allstar-links a.active{color:var(--accent);font-weight:600}
.nav-allstar-actions{display:flex;align-items:center;gap:16px;flex-shrink:0}
.nav-allstar-avatar{width:32px;height:32px;border-radius:50%;border:1px solid #D9D9D9;background:#F0F0F0}
.nav-allstar-user{font-size:12px;color:var(--text-primary)}
.nav-allstar-search{margin-left:auto;display:flex;align-items:center}
.nav-allstar-search-input{width:180px;height:36px;padding:0 12px;border:1px solid #D9D9D9;border-radius:18px;font-size:13px;color:var(--text-primary);outline:none;font-family:var(--font-body);background:#F5F5F5;transition:border-color .15s}
.nav-allstar-search-input::placeholder{color:var(--text-tertiary)}
.nav-allstar-search-input:focus{border-color:var(--accent);background:#fff}
.nav-allstar-search-btn{height:36px;padding:0 18px;border:none;border-radius:18px;background:var(--accent);color:#fff;font-size:13px;font-weight:600;cursor:pointer;font-family:var(--font-body);margin-left:6px;flex-shrink:0}
.nav-allstar-search-btn:hover{background:#C5000E}
.nav-allstar-search-btn:active{transform:scale(.97)}

/* Layout */
.allstar-layout{max-width:1400px;margin:0 auto;display:flex;min-height:calc(100vh - 56px)}

/* Sidebar */
.allstar-sidebar{width:200px;flex-shrink:0;background:var(--bg-sidebar);border-right:1px solid var(--border);padding:20px 16px;display:flex;flex-direction:column;gap:4px}
.allstar-sidebar-title{font-size:12px;font-weight:600;color:var(--text-tertiary);padding:0 4px;margin-top:8px}
.allstar-sidebar-spacer{height:6px}
.allstar-sidebar-cat{display:flex;align-items:center;justify-content:space-between;padding:10px 12px;border-radius:8px;font-size:13px;cursor:pointer;transition:all .15s;color:var(--text-secondary);border:none;background:none;width:100%;text-align:left;font-family:var(--font-body)}
.allstar-sidebar-cat:hover{background:#F0F0F0;color:var(--text-primary)}
.allstar-sidebar-cat.active{background:var(--accent);color:#fff;font-weight:600}
.allstar-sidebar-cat .count{font-size:12px;font-family:var(--font-mono)}
.allstar-sidebar-cat.active .count{color:rgba(255,255,255,.7)}
.allstar-sidebar-cat:not(.active) .count{color:var(--text-tertiary)}

/* Main */
.allstar-main{flex:1;min-width:0;padding:20px 24px 24px;display:flex;flex-direction:column;gap:14px}

/* Page header */
.allstar-page-header{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:12px}
.allstar-page-header-left{display:flex;flex-direction:column;gap:2px}
.allstar-page-title{font-size:20px;font-weight:700;color:var(--text-primary)}
.allstar-page-subtitle{font-size:12px;color:var(--text-tertiary)}

/* Time filters */
.allstar-time-filters{display:flex;align-items:center;gap:8px}
.allstar-time-group{display:flex;gap:0;background:#F0F0F0;border-radius:8px;padding:3px}
.allstar-time-btn{padding:7px 14px;border:none;background:transparent;border-radius:6px;font-size:12px;color:var(--text-secondary);cursor:pointer;transition:all .15s;font-family:var(--font-body)}
.allstar-time-btn:hover{color:var(--text-primary)}
.allstar-time-btn.active{background:#fff;color:var(--accent);font-weight:600;box-shadow:0 1px 3px rgba(0,0,0,.08)}

/* Stats */
.allstar-stats-bar{display:flex;gap:6px;flex-wrap:wrap}
.allstar-stat-card{background:#fff;border:1px solid var(--border);border-radius:6px;padding:8px 16px;flex:1;min-width:60px;text-align:center}
.allstar-stat-card .num{font-size:18px;font-weight:700;color:var(--text-primary);font-family:var(--font-mono)}
.allstar-stat-card .label{font-size:10px;color:var(--text-tertiary)}

/* Table */
.allstar-table-wrapper{background:var(--bg-card);border-radius:6px;overflow:hidden}
.allstar-table-header{display:flex;align-items:center;gap:6px;padding:10px 0;background:#FAFAFA;border-bottom:1px solid var(--border)}
.allstar-table-header-cell{padding:4px 6px;font-size:11px;font-weight:500;color:var(--text-tertiary)}
.allstar-col-rank{width:44px;text-align:center;flex-shrink:0}
.allstar-col-expert{flex:1;min-width:0}
.allstar-col-hitrate{width:65px;text-align:center;flex-shrink:0}
.allstar-col-return{width:75px;text-align:center;flex-shrink:0}
.allstar-col-bets{width:50px;text-align:center;flex-shrink:0}

/* Rows */
.allstar-table-body{display:flex;flex-direction:column}
.allstar-row{display:flex;align-items:center;gap:6px;padding:0;height:54px;cursor:pointer;text-decoration:none;color:inherit;transition:background .1s;border-bottom:1px solid var(--border)}
.allstar-row:last-child{border-bottom:none}
.allstar-row:hover{background:var(--accent-light)}
.allstar-row.alt{background:var(--bg-row-alt)}
.allstar-row.alt:hover{background:var(--accent-light)}

/* Rank */
.allstar-rank-col{width:44px;text-align:center;flex-shrink:0;display:flex;justify-content:center}
.rank-medal{width:28px;height:28px;flex-shrink:0}
.rank-number{width:24px;height:24px;border-radius:12px;background:#F0F0F0;color:var(--text-tertiary);font-size:11px;font-weight:600;display:flex;align-items:center;justify-content:center}

/* Expert */
.allstar-expert-info{flex:1;min-width:0;display:flex;align-items:center;gap:12px;padding:0 6px}
.allstar-avatar{width:38px;height:38px;border-radius:50%;flex-shrink:0;display:flex;align-items:center;justify-content:center;overflow:hidden}
.allstar-avatar img{width:100%;height:100%;object-fit:cover;border-radius:50%}
.allstar-avatar-text{color:#fff;font-size:14px;font-weight:700}
.allstar-expert-detail{display:flex;flex-direction:column;gap:2px;min-width:0}
.allstar-expert-name{font-size:14px;font-weight:600;color:var(--text-primary);display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.allstar-expert-bio{font-size:11px;color:var(--text-tertiary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:280px}

/* Tags */
.allstar-sport-tag{font-size:10px;padding:1px 6px;border-radius:8px;font-weight:500;flex-shrink:0}
.allstar-sport-tag.football{background:#E8F5E9;color:#2E7D32}
.allstar-sport-tag.basketball{background:#FFF3E0;color:#E65100}

.allstar-streak-badge{display:inline-flex;align-items:center;padding:1px 7px;border-radius:8px;font-size:10px;font-weight:600;background:var(--streak-bg);color:var(--streak-text);white-space:nowrap;flex-shrink:0}
.allstar-new-badge{display:inline-flex;align-items:center;padding:1px 7px;border-radius:8px;font-size:10px;font-weight:600;background:#E8F5E9;color:#2E7D32;white-space:nowrap;flex-shrink:0}
.allstar-no-new-badge{display:inline-flex;align-items:center;padding:1px 7px;border-radius:8px;font-size:10px;font-weight:600;background:#F5F5F5;color:#999;white-space:nowrap;flex-shrink:0}
.allstar-anomaly-badge{display:inline-flex;align-items:center;padding:1px 7px;border-radius:8px;font-size:10px;font-weight:600;background:var(--anomaly-bg);color:var(--anomaly-text);white-space:nowrap;flex-shrink:0;cursor:help}

.allstar-platform-tags{display:flex;gap:3px;flex-wrap:wrap}
.allstar-platform-tag{padding:1px 7px;border-radius:8px;font-size:10px;font-weight:500;color:#fff;white-space:nowrap}

/* Stats columns */
.allstar-hitrate{width:65px;text-align:center;flex-shrink:0;font-size:15px;font-weight:700;font-family:var(--font-mono)}
.allstar-hitrate.high{color:var(--accent)}
.allstar-return{width:75px;text-align:center;flex-shrink:0;font-size:15px;font-weight:700;font-family:var(--font-mono)}
.allstar-return.positive{color:var(--accent)}
.allstar-return.negative{color:var(--text-tertiary)}
.allstar-bets{width:50px;text-align:center;flex-shrink:0;font-size:13px;font-weight:600;font-family:var(--font-mono);color:var(--text-secondary)}

/* Mobile stat labels - hidden on desktop */
.allstar-stat-mobile-label{display:none}

.allstar-empty-state{justify-content:center;padding:60px 20px;color:var(--text-tertiary);text-align:center;border-bottom:none}
.allstar-footer{text-align:center;padding:28px 20px;color:var(--text-tertiary);font-size:12px;margin-top:auto}
.allstar-footer p{margin:4px 0}

/* Pagination */
.allstar-pagination{display:flex;align-items:center;justify-content:center;gap:2px;padding:4px 0}
.allstar-pagination .ap-btn{
  width:32px;height:32px;border-radius:6px;
  display:flex;align-items:center;justify-content:center;
  font-size:12px;font-family:var(--font-mono);cursor:pointer;
  background:var(--bg-card);border:1px solid var(--border);color:var(--text-secondary);
  transition:all .15s
}
.allstar-pagination .ap-btn:hover{background:#F0F0F0}
.allstar-pagination .ap-btn.active{background:var(--accent);color:#fff;border-color:var(--accent);font-weight:600}
.allstar-pagination .ap-nav{font-size:12px;color:var(--text-tertiary);background:none;border:none;cursor:pointer;font-family:var(--font-body);padding:0 6px;transition:color .15s}
.allstar-pagination .ap-nav.next{color:var(--accent)}
.allstar-pagination .ap-nav:hover{color:var(--text-primary)}

/* Mobile filter bar (horizontal scroll) */
.mobile-filter-bar{display:none;overflow-x:auto;overflow-y:hidden;white-space:nowrap;-webkit-overflow-scrolling:touch;padding:8px 16px;gap:8px;flex-shrink:0;scrollbar-width:none}
.mobile-filter-bar::-webkit-scrollbar{display:none}
.mobile-filter-btn{display:inline-flex;align-items:center;padding:7px 16px;border-radius:18px;font-size:13px;font-weight:500;border:1px solid var(--border);background:#fff;color:var(--text-secondary);cursor:pointer;font-family:var(--font-body);white-space:nowrap;transition:all .15s;flex-shrink:0}
.mobile-filter-btn .count{font-size:11px;margin-left:4px;color:var(--text-tertiary)}
.mobile-filter-btn.active{background:var(--accent);color:#fff;border-color:var(--accent)}
.mobile-filter-btn.active .count{color:rgba(255,255,255,.7)}

/* ===== MOBILE (max-width:900px) ===== */
@media(max-width:900px){
  /* Nav */
  .nav-allstar-inner{padding:0 12px;gap:12px}
  .nav-allstar-logo .brand{font-size:15px}
  .nav-allstar-links{display:none}
  .nav-allstar-user{display:none}
  .nav-allstar-search{margin-left:0;flex:1}
  .nav-allstar-search-input{width:100%;height:34px;font-size:12px}
  .nav-allstar-search-btn{height:34px;padding:0 14px;font-size:12px}
  .mobile-bottom-nav{display:block}

  /* Layout */
  .allstar-layout{flex-direction:column;min-height:0}
  .allstar-sidebar{display:none}
  .allstar-main{padding:12px;padding-bottom:68px;gap:10px}

  /* Mobile filter bar */
  .mobile-filter-bar{display:flex}

  /* Stats - hide on mobile */
  .allstar-stats-bar{display:none}
  .allstar-stat-card{padding:10px 12px}
  .allstar-stat-card .num{font-size:20px}
  .allstar-stat-card .label{font-size:11px}

  /* Page header */
  .allstar-page-header{flex-direction:column;align-items:flex-start}
  .allstar-page-title{font-size:18px}
  .allstar-time-filters{width:100%}
  .allstar-time-group{width:100%;display:flex}
  .allstar-time-btn{flex:1;text-align:center;padding:9px 12px;font-size:13px}

  /* Table header - hide on mobile, card layout */
  .allstar-table-header{display:none}
  .allstar-table-body{display:flex;flex-direction:column;gap:8px;padding:8px}
  .allstar-table-wrapper{background:transparent;border-radius:0;overflow:visible}

  /* Card rows */
  .allstar-row{display:flex;flex-wrap:wrap;height:auto;min-height:56px;padding:10px;background:#fff;border-radius:10px;border:1px solid var(--border);gap:0;align-items:flex-start;margin:0}
  .allstar-row.alt{background:#fff}
  .allstar-row:hover{background:var(--accent-light);border-color:var(--accent)}

  /* Rank - top-left */
  .allstar-rank-col{width:36px;height:36px;margin-right:8px}
  .rank-medal{width:28px;height:28px}
  .rank-number{width:24px;height:24px;font-size:11px}

  /* Expert info - takes most width */
  .allstar-expert-info{flex:1;min-width:0;gap:10px;padding:0}
  .allstar-avatar{width:40px;height:40px}
  .allstar-avatar-text{font-size:15px}
  .allstar-expert-detail{flex:1;min-width:0}
  .allstar-expert-name{font-size:14px;gap:5px;flex-wrap:wrap}
  .allstar-expert-bio{display:none}

  /* Tags in mobile */
  .allstar-sport-tag{display:none}
  .allstar-streak-badge{font-size:10px;padding:1px 6px}
  .allstar-new-badge,.allstar-no-new-badge{font-size:10px;padding:1px 6px}
  .allstar-anomaly-badge{font-size:10px;padding:1px 6px}
  .allstar-platform-tags{gap:2px}
  .allstar-platform-tag{padding:1px 6px;font-size:9px}

  /* Stats - inline on same row, label above value */
  .allstar-hitrate,.allstar-return,.allstar-bets{
    height:auto;
    padding:2px 6px;
    font-size:14px;
    font-weight:700;
    font-family:var(--font-mono);
    width:auto;
    min-width:0;
    display:flex;
    flex-direction:column;
    align-items:center;
    white-space:nowrap;
  }

  /* Mobile stat labels */
  .allstar-stat-mobile-label{
    display:inline;
    font-size:10px;
    font-weight:400;
    color:var(--text-tertiary);
    font-family:var(--font-body);
    white-space:nowrap;
  }

  .allstar-row{position:relative}
  .allstar-hitrate{margin-left:auto;order:10}
  .allstar-return{margin-left:0;order:11}
  .allstar-bets{margin-left:0;order:12}

  .allstar-empty-state{padding:40px 20px}

  /* Footer */
  .allstar-footer{padding:20px 12px;font-size:11px}

  /* Pagination */
  .allstar-pagination{flex-wrap:wrap;gap:4px}
  .allstar-pagination .ap-btn{width:36px;height:36px;font-size:13px}
}

/* ===== Extra small (max-width:480px) ===== */
@media(max-width:480px){
  .nav-allstar-logo .brand{font-size:14px}
  .allstar-main{padding:8px;padding-bottom:68px}
  .mobile-filter-bar{padding:8px 12px;gap:6px}
  .mobile-filter-btn{padding:6px 12px;font-size:12px}
  .allstar-row{padding:10px;min-height:52px}
  .allstar-avatar{width:36px;height:36px}
  .allstar-expert-name{font-size:13px}
  .allstar-hitrate,.allstar-return,.allstar-bets{font-size:12px;min-width:50px;padding:4px 6px}
  .rank-medal{width:24px;height:24px}
}