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

:root {
  --bg:#f5f3ef; --surface:#ffffff; --surface2:#f0ede8; --surface3:#e8e4dd;
  --border:#ddd8d0; --border2:#c8c2b8;
  --red:#c0392b; --red-l:#e74c3c;
  --green:#27ae60; --green-d:#1e8449;
  --blue:#2980b9; --blue-l:#3498db;
  --amber:#e67e22; --amber-l:#f39c12;
  --ink:#1a1a1a; --ink-mid:#444; --ink-muted:#777; --ink-faint:#aaa;
  --accent:#c0392b; --accent-l:#e74c3c;
  --radius:10px; --radius-sm:6px;
}

html{scroll-behavior:smooth}
body{
  font-family:"Be Vietnam Pro",system-ui,sans-serif;
  background:var(--bg);color:var(--ink);
  min-height:100vh;overflow-x:hidden;line-height:1.6;
}

.app-wrapper{max-width:1340px;margin:0 auto;padding:0 24px 80px}

/* Header */
.site-header{
  display:flex;align-items:center;gap:14px;
  padding:22px 0 16px;border-bottom:2px solid var(--ink);margin-bottom:20px;
}
.logo-mark{display:flex;align-items:baseline;gap:1px;flex-shrink:0}
.logo-ball{
  width:38px;height:38px;border-radius:50%;
  background:var(--accent);color:#fff;
  display:inline-flex;align-items:center;justify-content:center;
  font-weight:800;font-size:1rem;
}
.logo-ball-2{background:var(--ink);font-size:0.8rem;width:34px;height:34px}
.logo-slash{color:var(--ink-muted);font-size:1.2rem;margin:0 2px}
.header-text h1{font-size:1.4rem;font-weight:800;letter-spacing:-0.02em;color:var(--ink)}
.header-text h1 span{color:var(--accent)}
.header-sub{color:var(--ink-muted);font-size:0.78rem;margin-top:1px}
.header-actions{margin-left:auto}

.saved-toggle-btn{
  display:flex;align-items:center;gap:8px;
  padding:7px 16px;border-radius:4px;
  background:var(--surface);border:1.5px solid var(--border2);
  color:var(--ink-mid);font-size:0.82rem;font-weight:600;
  cursor:pointer;font-family:inherit;transition:all 0.15s;
}
.saved-toggle-btn:hover{border-color:var(--ink);color:var(--ink)}
.saved-count{
  background:var(--accent);color:#fff;
  border-radius:10px;padding:1px 7px;font-size:0.72rem;display:none;
}
.saved-count.visible{display:inline}

/* ── Today's Picks Banner ─────────────────────────────────────────────────── */
.today-banner {
  background: linear-gradient(135deg, #1a0a08 0%, #2d1009 50%, #1a1a2e 100%);
  border-bottom: 3px solid var(--accent);
  margin-bottom: 20px;
  border-radius: var(--radius);
  overflow: hidden;
  animation: fadeSlideDown 0.4s ease;
}
@keyframes fadeSlideDown {
  from { opacity:0; transform:translateY(-12px); }
  to   { opacity:1; transform:translateY(0); }
}
.today-banner-inner { padding: 20px 28px; }

.today-banner-header {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 16px;
}
.today-banner-label {
  display: flex; align-items: center; gap: 8px;
}
.today-dot {
  width: 10px; height: 10px; border-radius: 50%;
  background: #ff4444;
  box-shadow: 0 0 8px #ff4444, 0 0 18px rgba(255,68,68,0.5);
  animation: pulse-dot 1.5s ease-in-out infinite;
}
@keyframes pulse-dot {
  0%,100% { opacity:1; transform:scale(1); }
  50%      { opacity:0.6; transform:scale(0.85); }
}
.today-label-text {
  font-size: 1rem; font-weight: 800; color: #fff; letter-spacing: 0.01em;
  text-transform: uppercase; letter-spacing: 0.08em;
}
.today-banner-meta { display: flex; align-items: center; gap: 10px; }
.today-game-tag {
  background: rgba(192,57,43,0.35); color: #ffb3aa;
  border: 1px solid rgba(192,57,43,0.5);
  font-size: 0.72rem; font-weight: 700;
  padding: 3px 10px; border-radius: 20px;
  text-transform: uppercase; letter-spacing: 0.06em;
}
.today-draw-date {
  font-size: 0.75rem; color: rgba(255,255,255,0.55);
}

.today-picks-row {
  display: flex; align-items: flex-start; gap: 0;
}
.today-divider {
  width: 1px; background: rgba(255,255,255,0.1);
  margin: 0 24px; align-self: stretch;
}
.today-picks-group {
  flex: 1; min-width: 0;
}
.today-picks-group.today-picks-featured {
  flex: 1.4;
}
.today-picks-title {
  font-size: 0.72rem; font-weight: 700; color: rgba(255,255,255,0.5);
  text-transform: uppercase; letter-spacing: 0.06em;
  margin-bottom: 10px;
}
.today-balls-row {
  display: flex; flex-wrap: wrap; gap: 7px; align-items: center;
}

/* Today balls - base */
.today-ball {
  width: 42px; height: 42px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 0.92rem; font-weight: 800;
  transition: transform 0.15s;
  cursor: default;
}
.today-ball:hover { transform: scale(1.12); }

.today-ball-hot {
  background: radial-gradient(circle at 35% 30%, #ff6b4a, var(--accent));
  color: #fff;
  box-shadow: 0 3px 12px rgba(192,57,43,0.5);
}
.today-ball-overdue {
  background: radial-gradient(circle at 35% 30%, #f9c74f, #e67e22);
  color: #1a0a00;
  box-shadow: 0 3px 12px rgba(230,126,34,0.4);
}
.today-ball-combo {
  background: radial-gradient(circle at 35% 30%, #ffffff, #e8e8e8);
  color: #1a0a08;
  box-shadow: 0 3px 14px rgba(255,255,255,0.3);
  font-size: 1rem;
  width: 46px; height: 46px;
  border: 2px solid rgba(255,255,255,0.6);
}

.today-banner-footer {
  margin-top: 14px; padding-top: 12px;
  border-top: 1px solid rgba(255,255,255,0.08);
  display: flex; align-items: center; justify-content: space-between;
}
.today-banner-footer span {
  font-size: 0.72rem; color: rgba(255,255,255,0.38);
}
.today-banner-footer strong { color: rgba(255,255,255,0.6); }
.today-refresh-btn {
  background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.15);
  color: rgba(255,255,255,0.6); font-size: 0.72rem; font-weight: 600;
  padding: 5px 12px; border-radius: 20px; cursor: pointer;
  font-family: inherit; transition: all 0.15s;
}
.today-refresh-btn:hover {
  background: rgba(255,255,255,0.15); color: #fff;
}

/* Loading skeleton for banner */
.today-ball-skeleton {
  width: 42px; height: 42px; border-radius: 50%;
  background: rgba(255,255,255,0.08);
  animation: shimmer 1.2s ease-in-out infinite;
}
@keyframes shimmer {
  0%,100% { opacity:0.4; } 50% { opacity:0.8; }
}

/* Disclaimer */
#disclaimer{
  display:flex;align-items:flex-start;gap:10px;
  background:#fef9f0;border:1px solid #f5c842;border-left:3px solid var(--amber);
  border-radius:var(--radius-sm);padding:10px 14px;
  margin-bottom:20px;font-size:0.8rem;color:#7d5a00;position:relative;
}
.disc-icon{flex-shrink:0;margin-top:1px;font-weight:700}
#dismiss-disclaimer{position:absolute;top:8px;right:10px;background:none;border:none;color:#7d5a00;cursor:pointer;opacity:0.5;font-size:0.9rem}
#dismiss-disclaimer:hover{opacity:1}

/* Layout */
.main-grid{display:grid;grid-template-columns:300px 1fr;gap:20px;align-items:start}
@media(max-width:860px){.main-grid{grid-template-columns:1fr}}

/* Cards */
.card{
  background:var(--surface);border:1px solid var(--border);
  border-radius:var(--radius);padding:18px;margin-bottom:14px;
}
.card-label{
  font-size:0.68rem;font-weight:700;letter-spacing:0.09em;
  text-transform:uppercase;color:var(--ink-muted);margin-bottom:12px;
}
.card-label-note{font-size:0.65rem;font-weight:400;text-transform:none;letter-spacing:0;color:var(--ink-faint)}

/* Game cards */
.game-cards{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:2px}
.game-card{
  display:flex;flex-direction:column;align-items:center;
  padding:14px 6px;border-radius:var(--radius-sm);
  background:var(--surface2);border:2px solid var(--border);
  cursor:pointer;transition:all 0.15s;font-family:inherit;text-align:center;gap:3px;
}
.game-card:hover{border-color:var(--accent);background:#fff5f5}
.game-card.active{border-color:var(--accent);background:#fff5f5;box-shadow:0 2px 12px rgba(192,57,43,0.15)}
.game-card.loading{opacity:0.6;pointer-events:none}
.game-icon{font-size:1.4rem}
.game-name{font-size:0.88rem;font-weight:800;color:var(--ink)}
.game-meta{font-size:0.67rem;color:var(--ink-muted)}
.game-draws{font-size:0.68rem;color:var(--accent);font-weight:700;margin-top:2px}

/* Status */
.status-msg{font-size:0.8rem;border-radius:var(--radius-sm);padding:8px 12px;margin-top:10px;display:none}
.status-loading{background:#fef3e2;color:#92400e;border:1px solid #fcd34d}
.status-success{background:#f0faf4;color:#1e6b3a;border:1px solid #86efac}
.status-error{background:#fef2f2;color:#991b1b;border:1px solid #fca5a5}

/* Stepper */
.stepper-row{display:flex;align-items:center;justify-content:center;gap:20px}
.stepper-btn{
  width:38px;height:38px;border-radius:50%;
  background:var(--surface2);border:1.5px solid var(--border2);
  color:var(--ink);font-size:1.3rem;font-weight:700;
  cursor:pointer;transition:all 0.15s;display:flex;align-items:center;justify-content:center;
}
.stepper-btn:hover{background:var(--accent);border-color:var(--accent);color:#fff}
.stepper-val{font-size:2rem;font-weight:800;color:var(--accent);min-width:40px;text-align:center}

/* Accordion */
.accordion-toggle{
  width:100%;display:flex;justify-content:space-between;align-items:center;
  background:none;border:none;color:var(--ink-mid);font-family:inherit;
  font-size:0.85rem;font-weight:600;cursor:pointer;padding:0;
}
.accordion-toggle:hover{color:var(--ink)}
.accordion-arrow{transition:transform 0.2s;font-size:0.7rem}
.accordion-arrow.open{transform:rotate(180deg)}
.accordion-body{padding-top:14px}
.form-group{margin-bottom:12px}
.form-group label{display:block;font-size:0.73rem;color:var(--ink-muted);margin-bottom:4px;font-weight:600}
select,input[type="number"]{
  width:100%;padding:7px 10px;
  background:var(--surface2);border:1.5px solid var(--border);
  border-radius:var(--radius-sm);color:var(--ink);
  font-family:inherit;font-size:0.84rem;outline:none;transition:border-color 0.15s;
}
select:focus,input[type="number"]:focus{border-color:var(--accent)}
.two-col{display:grid;grid-template-columns:1fr 1fr;gap:10px}

/* Generate button */
.generate-btn{
  width:100%;padding:13px;
  background:var(--accent);
  border:none;border-radius:var(--radius-sm);
  color:#fff;font-size:0.95rem;font-weight:700;
  cursor:pointer;letter-spacing:0.01em;
  transition:all 0.15s;margin-bottom:14px;font-family:inherit;
}
.generate-btn:hover:not(:disabled){background:var(--red-l);transform:translateY(-1px)}
.generate-btn:disabled{opacity:0.4;cursor:not-allowed;transform:none}
.bao-gen-btn{background:var(--blue)}
.bao-gen-btn:hover:not(:disabled){background:var(--blue-l)}

/* Upload */
.upload-card{padding:14px}
#drop-zone{
  border:2px dashed var(--border2);border-radius:var(--radius-sm);
  padding:16px;text-align:center;cursor:pointer;transition:all 0.15s;
}
#drop-zone:hover{border-color:var(--accent);background:#fff5f5}
#drop-zone.has-file{border-style:solid;border-color:var(--green)}
.drop-icon{font-size:1.3rem;color:var(--ink-muted)}
.drop-label{font-size:0.76rem;color:var(--ink-muted);margin-top:4px}
#file-input{display:none}

/* Empty state */
.empty-state{text-align:center;padding:80px 40px;color:var(--ink-muted)}
.empty-icon{font-size:3.5rem;margin-bottom:16px;color:var(--border2)}
.empty-state h2{font-size:1.2rem;font-weight:700;color:var(--ink-mid);margin-bottom:10px}
.empty-state p{font-size:0.86rem;max-width:360px;margin:0 auto 8px;line-height:1.7}
.empty-note{font-size:0.78rem;color:var(--ink-faint)}

/* Draws table */
.table-wrap{overflow-x:auto}
.draws-table{width:100%;border-collapse:collapse;font-size:0.8rem}
.draws-table th{padding:6px 10px;text-align:left;color:var(--ink-muted);font-weight:700;border-bottom:2px solid var(--border);font-size:0.7rem;text-transform:uppercase;letter-spacing:0.05em}
.draws-table td{padding:7px 10px;border-bottom:1px solid var(--border)}
.draws-table tr:last-child td{border-bottom:none}
.draws-table tr:hover td{background:var(--surface2)}
.draw-ball{
  display:inline-flex;align-items:center;justify-content:center;
  width:27px;height:27px;border-radius:50%;
  background:var(--surface3);font-size:0.73rem;font-weight:700;margin:0 2px;color:var(--ink-mid);
}
.draw-ball.hot-ball{background:var(--accent);color:#fff}
.draw-num{color:var(--ink-muted);font-size:0.73rem;font-weight:600}
.draw-date{color:var(--ink-muted);font-size:0.73rem;white-space:nowrap}

/* Ball stats */
.stats-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
@media(max-width:700px){.stats-grid{grid-template-columns:1fr}}
.stat-label{font-size:0.7rem;font-weight:700;text-transform:uppercase;letter-spacing:0.07em;margin-bottom:8px}
.stat-label.hot{color:var(--red-l)}
.stat-label.cold{color:var(--blue)}
.stat-label.overdue{color:var(--amber)}
.balls-row{display:flex;flex-wrap:wrap;gap:6px}
.ball{
  width:34px;height:34px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  font-size:0.78rem;font-weight:700;cursor:default;transition:transform 0.12s;
}
.ball:hover{transform:scale(1.12)}
.ball.hot{background:var(--accent);color:#fff}
.ball.cold{background:var(--blue);color:#fff}
.ball.overdue{background:var(--amber);color:#fff}
.ball.trending-up{background:var(--green);color:#fff}
.ball.trending-down{background:#bdc3c7;color:var(--ink)}

/* Trending */
.trending-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}
@media(max-width:700px){.trending-grid{grid-template-columns:1fr}}

/* Gap tracker */
.gap-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(155px,1fr));gap:8px}
.gap-item{display:flex;align-items:center;gap:8px}
.gap-ball-num{
  width:30px;height:30px;border-radius:50%;flex-shrink:0;
  display:flex;align-items:center;justify-content:center;
  font-size:0.76rem;font-weight:800;color:#fff;background:var(--ink-mid);
}
.gap-bar-wrap{flex:1}
.gap-label{font-size:0.66rem;color:var(--ink-muted);margin-bottom:3px}
.gap-bar{height:5px;border-radius:3px;background:var(--surface3);overflow:hidden}
.gap-bar-fill{height:100%;border-radius:3px;transition:width 0.8s ease}
.gap-critical .gap-ball-num{background:var(--red-l)}
.gap-critical .gap-bar-fill{background:var(--red-l)}
.gap-high .gap-ball-num{background:var(--amber)}
.gap-high .gap-bar-fill{background:var(--amber)}
.gap-normal .gap-ball-num{background:var(--blue)}
.gap-normal .gap-bar-fill{background:var(--blue)}

/* Chart */
.chart-wrap{height:200px;position:relative;margin-top:6px}
#epoch-progress{font-size:0.72rem;color:var(--ink-muted);margin-top:6px;text-align:center;min-height:18px}

/* Tickets */
.section-title{
  font-size:1rem;font-weight:800;letter-spacing:-0.01em;color:var(--ink);
  margin-bottom:14px;display:flex;align-items:center;gap:10px;
  padding-bottom:10px;border-bottom:2px solid var(--ink);
}
.section-title-row{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px}
.clear-btn{
  font-size:0.73rem;padding:4px 12px;border-radius:4px;
  background:#fef2f2;border:1px solid #fca5a5;color:#991b1b;
  cursor:pointer;font-family:inherit;font-weight:600;transition:all 0.15s;
}
.clear-btn:hover{background:#fee2e2}

.tickets-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(270px,1fr));gap:12px;margin-bottom:24px}

.ticket-card{
  background:var(--surface);border:1.5px solid var(--border);
  border-radius:var(--radius);padding:16px;
  animation:slideUp 0.3s ease both;position:relative;
  transition:transform 0.15s,box-shadow 0.15s;
}
.ticket-card::before{content:"";position:absolute;top:0;left:0;right:0;height:3px;background:var(--ink);border-radius:var(--radius) var(--radius) 0 0}
.ticket-card.tier-gold::before{background:var(--amber)}
.ticket-card.tier-gold{border-color:#f5c842}
.ticket-card.tier-low{opacity:0.75}
.ticket-card:hover{transform:translateY(-2px);box-shadow:0 6px 20px rgba(0,0,0,0.1)}

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

.ticket-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px}
.ticket-num{font-weight:700;font-size:0.83rem;color:var(--ink-mid)}
.ticket-badge{font-size:0.67rem;font-weight:700;padding:2px 8px;border-radius:3px;letter-spacing:0.03em}
.badge-gold{background:#fef3c7;color:#92400e;border:1px solid #f5c842}
.badge-neutral{background:var(--surface2);color:var(--ink-muted);border:1px solid var(--border)}
.badge-low{background:var(--surface2);color:var(--ink-faint);border:1px solid var(--border)}

.ticket-balls{display:flex;gap:5px;flex-wrap:wrap;margin-bottom:10px}
.tball{
  width:38px;height:38px;border-radius:50%;
  background:var(--surface2);border:1.5px solid var(--border2);
  display:flex;align-items:center;justify-content:center;
  font-weight:800;font-size:0.85rem;transition:all 0.15s;color:var(--ink);
}
.tball:hover{transform:scale(1.08)}
.tball-hot{background:var(--accent);border-color:var(--accent);color:#fff}
.tball-overdue{background:var(--amber);border-color:var(--amber);color:#fff}

/* Score */
.score-row{display:flex;align-items:center;gap:8px;margin-bottom:10px}
.score-num{font-size:0.95rem;font-weight:800;min-width:34px}
.score-num.gold{color:var(--amber)}
.score-num.neutral{color:var(--ink-mid)}
.score-num.low{color:var(--ink-muted)}
.score-bar{flex:1;height:5px;background:var(--surface3);border-radius:3px;overflow:hidden}
.score-fill{height:100%;border-radius:3px;transition:width 0.6s ease}
.score-fill.gold{background:var(--amber)}
.score-fill.neutral{background:var(--accent)}
.score-fill.low{background:var(--border2)}
.score-breakdown{font-size:0.67rem;color:var(--ink-muted);margin-bottom:10px;display:flex;gap:6px;flex-wrap:wrap}
.score-breakdown span{background:var(--surface2);padding:2px 6px;border-radius:3px}

.ticket-actions{display:flex;gap:6px}
.copy-btn,.save-btn{
  font-size:0.71rem;padding:5px 11px;border-radius:4px;
  cursor:pointer;font-family:inherit;font-weight:600;transition:all 0.15s;
}
.copy-btn{background:var(--surface2);border:1px solid var(--border2);color:var(--ink-mid)}
.copy-btn:hover{background:var(--surface3)}
.save-btn{background:#fef3c7;border:1px solid #f5c842;color:#92400e}
.save-btn:hover{background:#fde68a}
.save-btn.saved{background:#f0faf4;border-color:#86efac;color:#1e6b3a;cursor:default}
.delete-btn{background:#fef2f2;border:1px solid #fca5a5;color:#991b1b}
.delete-btn:hover{background:#fee2e2}
.saved-at{font-size:0.67rem;color:var(--ink-faint);margin-top:6px}

/* Scrollbar */
::-webkit-scrollbar{width:5px}
::-webkit-scrollbar-track{background:var(--bg)}
::-webkit-scrollbar-thumb{background:var(--border2);border-radius:3px}

/* Bao */
.bao-type-grid{display:grid;grid-template-columns:1fr 1fr;gap:7px;margin-bottom:10px}
.bao-type-btn{
  display:flex;flex-direction:column;align-items:center;gap:2px;
  padding:9px 6px;border-radius:var(--radius-sm);
  background:var(--surface2);border:1.5px solid var(--border);
  color:var(--ink-mid);font-family:inherit;font-size:0.88rem;
  font-weight:700;cursor:pointer;transition:all 0.15s;line-height:1.2;
}
.bao-type-btn span{font-size:0.63rem;font-weight:400;color:var(--ink-faint)}
.bao-type-btn:hover{border-color:var(--blue);color:var(--blue)}
.bao-type-btn.active{border-color:var(--blue);color:var(--blue);background:#eff7ff}
.bao-hint{font-size:0.69rem;color:var(--ink-faint);text-align:center;margin-bottom:4px}

.bao-winrate-card{padding:16px}
.bao-info-row{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:14px}
.bao-info-chip{
  padding:5px 12px;border-radius:4px;font-size:0.76rem;font-weight:700;
  background:var(--surface2);border:1px solid var(--border2);
  display:flex;align-items:center;gap:6px;
}
.bao-info-chip .chip-label{color:var(--ink-muted);font-weight:400;font-size:0.7rem}
.bao-table{width:100%;border-collapse:collapse;font-size:0.8rem}
.bao-table th{padding:7px 10px;text-align:left;font-size:0.7rem;text-transform:uppercase;letter-spacing:0.05em;color:var(--ink-muted);border-bottom:2px solid var(--border);font-weight:700}
.bao-table td{padding:8px 10px;border-bottom:1px solid var(--border);vertical-align:middle}
.bao-table tr:last-child td{border-bottom:none}
.bao-table tr:hover td{background:var(--surface2)}
.bao-match-badge{display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px;border-radius:50%;font-weight:800;font-size:0.78rem}
.bao-match-6{background:var(--amber);color:#fff}
.bao-match-5{background:var(--accent);color:#fff}
.bao-match-4{background:var(--blue);color:#fff}
.bao-match-3{background:var(--surface3);color:var(--ink-mid)}
.bao-prob{font-family:monospace;font-size:0.77rem;color:var(--blue)}
.bao-onein{font-size:0.73rem;color:var(--ink-muted)}
.bao-guarantee{font-size:0.71rem;color:var(--ink-mid)}
.bao-guarantee strong{color:var(--green)}
.bao-meta-badge{
  font-size:0.73rem;font-weight:700;padding:4px 12px;border-radius:4px;
  background:#eff7ff;border:1px solid #bce0fd;color:var(--blue);
}
.bao-pool-row{margin-bottom:8px}
.bao-pool-label{font-size:0.63rem;color:var(--ink-muted);text-transform:uppercase;letter-spacing:0.06em;margin-bottom:4px}
.pool-ball{
  display:inline-flex;align-items:center;justify-content:center;
  width:30px;height:30px;border-radius:50%;
  background:#eff7ff;border:1px solid #bce0fd;
  font-size:0.74rem;font-weight:700;color:var(--blue);margin:2px;
}
.bao-ticket-num{font-size:0.7rem;color:var(--ink-muted);margin-bottom:6px}
/* ══════════════════════════════════════════════════════════════
   DRAW ANALYSIS REPORT — 10 kỳ gần nhất
   ══════════════════════════════════════════════════════════════ */

/* ── Report Header ── */
.analysis-header {
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: 10px; margin-bottom: 18px;
}
.analysis-title {
  font-size: 1rem; font-weight: 800; letter-spacing: -0.01em;
  display: flex; align-items: center; gap: 8px;
}
.analysis-meta-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.meta-chip {
  font-size: 0.72rem; font-weight: 600; padding: 4px 12px;
  border-radius: 20px; background: var(--surface); border: 1px solid var(--border2);
  color: var(--ink-mid);
}
.meta-chip strong { color: var(--blue); }

/* ── Summary Boxes ── */
.analysis-summary-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(155px, 1fr));
  gap: 10px; margin-bottom: 20px;
}
.summary-box {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius-sm); padding: 12px 14px; text-align: center;
}
.summary-box-val {
  font-size: 1.7rem; font-weight: 900; letter-spacing: -0.03em;
  background: linear-gradient(135deg, var(--accent), var(--blue));
  -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
  line-height: 1.1; margin-bottom: 4px;
}
.summary-box-label { font-size: 0.67rem; color: var(--ink-muted); font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; }

/* ── Tab Navigation ── */
.analysis-tabs {
  display: flex; gap: 4px; margin-bottom: 16px;
  border-bottom: 1px solid var(--border); padding-bottom: 0;
}
.analysis-tab {
  padding: 8px 14px; border-radius: 8px 8px 0 0;
  border: 1px solid transparent; border-bottom: none;
  background: none; color: var(--ink-muted);
  font-family: inherit; font-size: 0.78rem; font-weight: 600;
  cursor: pointer; transition: all 0.2s; position: relative; bottom: -1px;
}
.analysis-tab:hover { color: var(--ink); background: var(--surface2); }
.analysis-tab.active {
  color: var(--blue); background: var(--surface);
  border-color: var(--border) var(--border) var(--surface2) var(--border);
}
.analysis-tab-panel { display: none; }
.analysis-tab-panel.active { display: block; }

/* ── Draw-by-draw table ── */
.draw-by-draw-table { width: 100%; border-collapse: collapse; font-size: 0.8rem; }
.draw-by-draw-table th {
  padding: 8px 10px; text-align: left; font-size: 0.7rem;
  text-transform: uppercase; letter-spacing: 0.05em;
  color: var(--ink-muted); border-bottom: 1px solid var(--border); font-weight: 700;
}
.draw-by-draw-table td { padding: 9px 10px; border-bottom: 1px solid var(--border); vertical-align: middle; }
.draw-by-draw-table tr:last-child td { border-bottom: none; }
.draw-by-draw-table tr:hover td { background: var(--surface2); }
.draw-ky { color: var(--blue); font-weight: 800; font-size: 0.82rem; }
.draw-date-cell { color: var(--ink-muted); font-size: 0.75rem; white-space: nowrap; }

/* Mini balls in table */
.mini-ball {
  display: inline-flex; align-items: center; justify-content: center;
  width: 26px; height: 26px; border-radius: 50%;
  font-size: 0.7rem; font-weight: 700; margin: 1px;
}
.mb-hot  { background: var(--accent); color: #fff; }
.mb-cold { background: var(--blue); color: #fff; }
.mb-over { background: var(--amber); color: #fff; }
.mb-neut { background: var(--surface3); color: var(--ink-mid); border: 1px solid var(--border2); }

/* Draw character badge */
.char-badge {
  display: inline-block; font-size: 0.68rem; font-weight: 700; padding: 3px 8px;
  border-radius: 10px; white-space: nowrap;
}
.char-hot      { background: rgba(192,57,43,0.12); color: var(--accent); border: 1px solid rgba(192,57,43,0.12); }
.char-cold     { background: rgba(41,128,185,0.12);  color: var(--blue);   border: 1px solid rgba(41,128,185,0.12); }
.char-rising   { background: rgba(16,185,129,0.12); color: #6ee7b7;         border: 1px solid rgba(16,185,129,0.2); }
.char-balanced { background: rgba(245,158,11,0.12); color: var(--amber);         border: 1px solid rgba(245,158,11,0.2); }
.char-mixed    { background: rgba(100,116,139,0.1); color: var(--ink-muted);border: 1px solid var(--border); }
.hc-pill { font-size: 0.65rem; font-weight: 700; padding: 2px 6px; border-radius: 8px; }
.hc-pill.hp { background: rgba(192,57,43,0.12); color: var(--accent); }
.hc-pill.cp { background: rgba(41,128,185,0.12);  color: var(--blue); }
.hc-pill.rp { background: rgba(16,185,129,0.12); color: #6ee7b7; }
.draw-hc-pills { display: flex; gap: 4px; }

/* ── Per-ball cards ── */
.ball-report-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(330px, 1fr));
  gap: 12px;
}
.ball-report-card {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius-sm); padding: 14px 16px;
  transition: border-color 0.2s, box-shadow 0.2s;
  animation: slideUp 0.3s ease both;
}
.ball-report-card:hover { border-color: var(--border2); box-shadow: 0 4px 20px rgba(0,0,0,0.3); }
.ball-report-card.type-hot-rising   { border-left: 3px solid var(--accent); }
.ball-report-card.type-hot          { border-left: 3px solid rgba(192,57,43,0.12); }
.ball-report-card.type-cold-falling { border-left: 3px solid rgba(41,128,185,0.12); }
.ball-report-card.type-cold         { border-left: 3px solid rgba(41,128,185,0.12); }
.ball-report-card.type-overdue      { border-left: 3px solid var(--amber); }
.ball-report-card.type-neutral      { border-left: 3px solid var(--border2); }

.brc-header { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.brc-ball {
  width: 44px; height: 44px; border-radius: 50%; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 1rem; font-weight: 900;
}
.brc-ball.hot-rising  { background: var(--accent); color: #fff; }
.brc-ball.hot         { background: var(--accent); color: #fff; }
.brc-ball.cold-falling{ background: var(--blue); color: #fff; }
.brc-ball.cold        { background: var(--blue); color: #fff; }
.brc-ball.overdue     { background: var(--amber); color: #fff; }
.brc-ball.neutral     { background: var(--surface3); color: var(--ink-mid); border: 1px solid var(--border2); }
.brc-info { flex: 1; min-width: 0; }
.brc-type-label { font-size: 0.72rem; font-weight: 700; margin-bottom: 2px; }
.brc-appearances { font-size: 1.05rem; font-weight: 800; color: var(--ink); }
.brc-appearances span { font-size: 0.73rem; color: var(--ink-muted); font-weight: 400; }
.brc-trend-label { font-size: 0.71rem; color: var(--ink-mid); margin-top: 1px; }

/* Percentage bars */
.brc-pct-section { margin-bottom: 10px; }
.brc-pct-row { display: flex; align-items: center; gap: 8px; margin-bottom: 5px; }
.brc-pct-label { font-size: 0.67rem; color: var(--ink-muted); min-width: 88px; flex-shrink: 0; }
.brc-pct-bar-wrap { flex: 1; height: 8px; background: var(--surface2); border-radius: 4px; overflow: hidden; position: relative; }
.brc-pct-bar-fill { height: 100%; border-radius: 4px; transition: width 0.8s ease; }
.brc-pct-val { font-size: 0.71rem; font-weight: 700; min-width: 38px; text-align: right; }
.brc-expected-line { position: absolute; top: 0; bottom: 0; width: 2px; background: var(--surface2); border-radius: 1px; }
.bar-recent  { background: linear-gradient(90deg, var(--accent), var(--accent)); }
.bar-alltime { background: linear-gradient(90deg, var(--blue), var(--blue)); }
.val-recent  { color: var(--accent); }
.val-alltime { color: var(--blue); }
.val-expected{ color: var(--ink-muted); }
.dev-badge { font-size: 0.69rem; font-weight: 700; padding: 2px 7px; border-radius: 8px; display: inline-block; margin-left: 4px; }
.dev-pos { background: rgba(192,57,43,0.12); color: var(--accent); }
.dev-neg { background: rgba(41,128,185,0.12);  color: var(--blue); }
.dev-neu { background: rgba(100,116,139,0.1); color: var(--ink-muted); }

/* Stat pills */
.brc-stat-pills { display: flex; flex-wrap: wrap; gap: 5px; margin-bottom: 10px; }
.stat-pill { font-size: 0.64rem; font-weight: 600; padding: 3px 8px; border-radius: 8px; background: var(--surface2); color: var(--ink-muted); border: 1px solid transparent; }
.stat-pill.sig      { background: rgba(245,158,11,0.12); color: var(--amber); border-color: rgba(245,158,11,0.2); }
.stat-pill.gap-ok   { background: rgba(16,185,129,0.1); color: #6ee7b7; border-color: rgba(16,185,129,0.15); }
.stat-pill.gap-warn { background: rgba(239,68,68,0.1);  color: #f87171; border-color: rgba(239,68,68,0.15); }

/* Appeared-in dots */
.brc-draw-dots { display: flex; gap: 3px; flex-wrap: wrap; margin-bottom: 10px; }
.draw-dot {
  width: 20px; height: 20px; border-radius: 4px; font-size: 0.58rem;
  display: flex; align-items: center; justify-content: center; font-weight: 700;
}
.draw-dot.appeared { background: rgba(192,57,43,0.12); color: var(--accent); border: 1px solid rgba(192,57,43,0.12); }
.draw-dot.absent   { background: var(--surface2); color: var(--ink-muted); opacity: 0.35; }

/* Reasons */
.brc-reasons { border-top: 1px solid var(--border); padding-top: 10px; }
.brc-reasons-title { font-size: 0.64rem; text-transform: uppercase; letter-spacing: 0.07em; color: var(--ink-muted); margin-bottom: 6px; font-weight: 700; }
.brc-reason-item { font-size: 0.74rem; color: var(--ink-mid); padding: 4px 0 4px 10px; border-left: 2px solid rgba(192,57,43,0.12); margin-bottom: 4px; line-height: 1.5; }
.brc-reason-item:last-child { margin-bottom: 0; }
.brc-pair { font-size: 0.71rem; color: var(--ink-muted); margin-top: 6px; display: flex; align-items: center; gap: 5px; }
.brc-pair-ball {
  display: inline-flex; align-items: center; justify-content: center;
  width: 22px; height: 22px; border-radius: 50%;
  background: rgba(245,158,11,0.15); border: 1px solid rgba(245,158,11,0.3);
  font-size: 0.65rem; font-weight: 800; color: var(--amber);
}

/* ── Pair table ── */
.pair-table { width: 100%; border-collapse: collapse; font-size: 0.8rem; }
.pair-table th { padding: 7px 12px; text-align: left; font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--ink-muted); border-bottom: 1px solid var(--border); font-weight: 700; }
.pair-table td { padding: 8px 12px; border-bottom: 1px solid var(--border); vertical-align: middle; }
.pair-table tr:last-child td { border-bottom: none; }
.pair-table tr:hover td { background: var(--surface2); }
.pair-balls { display: flex; align-items: center; gap: 4px; }
.pair-cnt-badge { display: inline-flex; align-items: center; justify-content: center; min-width: 28px; height: 22px; border-radius: 6px; padding: 0 6px; font-size: 0.75rem; font-weight: 800; }
.pair-cnt-3 { background: rgba(245,158,11,0.2); color: var(--amber); }
.pair-cnt-2 { background: rgba(192,57,43,0.12); color: var(--accent); }
.lift-bar-wrap { width: 70px; height: 6px; background: var(--surface2); border-radius: 3px; overflow: hidden; display: inline-block; margin-left: 6px; vertical-align: middle; }
.lift-bar-fill { height: 100%; border-radius: 3px; background: linear-gradient(90deg, var(--amber), #fcd34d); }
.lift-val { font-size: 0.71rem; color: var(--amber); font-weight: 700; margin-left: 4px; }
.no-pair-data { text-align: center; padding: 28px; color: var(--ink-muted); font-size: 0.84rem; }

/* ── Controls ── */
.analysis-refresh-btn {
  font-size: 0.76rem; padding: 6px 14px; border-radius: 20px;
  background: rgba(41,128,185,0.12); border: 1px solid rgba(41,128,185,0.12);
  color: var(--blue); font-family: inherit; font-weight: 600;
  cursor: pointer; transition: all 0.2s; display: flex; align-items: center; gap: 5px;
}
.analysis-refresh-btn:hover { background: rgba(41,128,185,0.12); }
.draw-count-toggle { display: flex; gap: 4px; }
.draw-count-btn { padding: 4px 10px; border-radius: 8px; font-size: 0.72rem; font-weight: 700; background: var(--surface); border: 1px solid var(--border); color: var(--ink-muted); cursor: pointer; font-family: inherit; transition: all 0.15s; }
.draw-count-btn.active { background: rgba(41,128,185,0.12); border-color: rgba(41,128,185,0.12); color: var(--blue); }

/* ── Significance alert ── */
.sig-alert { display: flex; align-items: center; gap: 8px; background: rgba(245,158,11,0.07); border: 1px solid rgba(245,158,11,0.2); border-radius: var(--radius-sm); padding: 10px 14px; font-size: 0.77rem; color: var(--amber); margin-bottom: 14px; flex-wrap: wrap; }
.sig-ball-list { display: flex; gap: 4px; flex-wrap: wrap; }
.sig-ball { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; border-radius: 50%; background: rgba(245,158,11,0.2); border: 1px solid rgba(245,158,11,0.35); font-size: 0.7rem; font-weight: 800; color: var(--amber); }

/* ── Giới thiệu & bản quyền ─────────────────────────────────────────
   Đặt cuối trang, dùng lại .section-title của các mục phía trên. */
.site-footer{margin-top:48px}
.about{
  display:grid;grid-template-columns:auto 1fr;gap:10px 20px;
  align-items:baseline;margin:0;
}
.about dt{
  font-size:0.7rem;font-weight:700;text-transform:uppercase;letter-spacing:0.04em;
  color:var(--ink-muted);white-space:nowrap;
}
.about dd{margin:0;font-size:0.85rem;line-height:1.55;color:var(--ink-mid)}
.about a{color:var(--accent);text-decoration:none;border-bottom:1px solid currentColor}
.about a:hover{color:var(--accent-l)}
.about-note{
  margin:18px 0 0;padding-top:12px;border-top:1px solid var(--border);
  font-size:0.72rem;color:var(--ink-faint);
}

@media (max-width:640px){
  .about{grid-template-columns:1fr;gap:4px 0}
  .about dd{margin-bottom:10px}
}