/* ==============================================
   LottoAI — Premium Glassmorphism UI
   ============================================== */

:root {
  --bg-gradient: linear-gradient(135deg, #e8f5e9 0%, #f3e5f5 30%, #e3f2fd 60%, #fce4ec 100%);
  --card-bg: rgba(255, 255, 255, 0.72);
  --card-border: rgba(255, 255, 255, 0.5);
  --card-shadow: 0 8px 32px rgba(0, 0, 0, 0.06);
  --text-primary: #1a1a2e;
  --text-secondary: #666;
  --text-muted: #999;
  --accent-green: #4caf50;
  --accent-green-light: #e8f5e9;
  --accent-pink: #e91e63;
  --accent-blue: #2196f3;
  --accent-orange: #ff9800;
  --accent-gold: #ffd700;
  --accent-purple: #9c27b0;
  --btn-primary: linear-gradient(135deg, #66bb6a 0%, #43a047 100%);
  --btn-primary-hover: linear-gradient(135deg, #43a047 0%, #2e7d32 100%);
  --radius: 16px;
  --radius-sm: 10px;
  --radius-xs: 6px;
  --font-main: 'Prompt', sans-serif;
  --font-mono: 'JetBrains Mono', monospace;
}

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

body {
  font-family: var(--font-main);
  background: var(--bg-gradient);
  background-attachment: fixed;
  min-height: 100vh;
  color: var(--text-primary);
  -webkit-font-smoothing: antialiased;
}

/* ====== Header ====== */
.header {
  background: linear-gradient(135deg, rgba(232,245,233,0.9), rgba(243,229,245,0.9), rgba(227,242,253,0.9));
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-bottom: 1px solid rgba(255,255,255,0.4);
  padding: 12px 16px;
  position: sticky;
  top: 0;
  z-index: 100;
}

.header-inner {
  max-width: 600px;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.logo {
  display: flex;
  align-items: center;
  gap: 10px;
}

.logo-icon {
  font-size: 28px;
}

.logo h1 {
  font-size: 22px;
  font-weight: 700;
  letter-spacing: 2px;
  background: linear-gradient(135deg, #2e7d32, #1565c0);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.logo p {
  font-size: 11px;
  color: var(--text-secondary);
  font-weight: 300;
}

.header-badges {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: nowrap;
}

.badge {
  font-size: 11px;
  padding: 4px 10px;
  border-radius: 20px;
  font-weight: 500;
}

.badge-ai {
  background: var(--accent-green-light);
  color: var(--accent-green);
  border: 1px solid rgba(76, 175, 80, 0.3);
}

.badge-active {
  background: #e8f5e9;
  color: #2e7d32;
  border: 1px solid rgba(76,175,80,0.3);
}

.badge-free {
  background: #e3f2fd;
  color: #1565c0;
  border: 1px solid rgba(21,101,192,0.3);
}

/* ====== Navigation Tabs ====== */
.nav-tabs {
  display: flex;
  overflow-x: auto;
  gap: 4px;
  padding: 8px 12px;
  max-width: 600px;
  margin: 0 auto;
  scrollbar-width: none;
}

.nav-tabs::-webkit-scrollbar { display: none; }

.tab {
  flex-shrink: 0;
  border: none;
  background: var(--card-bg);
  backdrop-filter: blur(10px);
  padding: 8px 14px;
  border-radius: var(--radius-sm);
  font-family: var(--font-main);
  font-size: 13px;
  font-weight: 500;
  color: var(--text-secondary);
  cursor: pointer;
  transition: all 0.25s ease;
  border: 1px solid transparent;
  white-space: nowrap;
}

.tab:hover {
  background: rgba(255,255,255,0.85);
  color: var(--text-primary);
}

.tab.active {
  background: white;
  color: var(--accent-green);
  border-color: rgba(76,175,80,0.3);
  box-shadow: 0 2px 8px rgba(76,175,80,0.1);
  font-weight: 600;
}

/* ====== Main Content ====== */
.main-content {
  max-width: 600px;
  margin: 0 auto;
  padding: 8px 12px 80px;
}

.tab-panel {
  display: none;
  animation: fadeIn 0.3s ease;
}

.tab-panel.active { display: block; }

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

/* ====== Cards ====== */
.card {
  background: var(--card-bg);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid var(--card-border);
  border-radius: var(--radius);
  padding: 18px;
  margin-bottom: 12px;
  box-shadow: var(--card-shadow);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.card:hover {
  box-shadow: 0 12px 40px rgba(0,0,0,0.08);
}

.card-select {
  position: relative;
  z-index: 20;
}

.card-label {
  font-size: 14px;
  font-weight: 500;
  color: var(--text-primary);
  margin-bottom: 10px;
}

.card-sublabel {
  font-size: 12px;
  color: var(--text-muted);
  margin-bottom: 12px;
}

.card-title {
  font-size: 18px;
  font-weight: 600;
  margin-bottom: 8px;
}

.label-icon {
  font-size: 14px;
}

/* ====== Select Dropdown ====== */
.select-wrapper {
  position: relative;
  z-index: 50;
}

.select-btn {
  width: 100%;
  padding: 12px 16px;
  background: white;
  border: 2px solid #e0e0e0;
  border-radius: var(--radius-sm);
  font-family: var(--font-main);
  font-size: 16px;
  font-weight: 500;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  transition: border-color 0.2s;
}

.select-btn:hover, .select-btn:focus {
  border-color: var(--accent-green);
  outline: none;
}

.select-arrow {
  font-size: 14px;
  color: var(--text-muted);
}

.select-dropdown {
  display: none;
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  background: white;
  border-radius: var(--radius-sm);
  box-shadow: 0 12px 40px rgba(0,0,0,0.15);
  z-index: 999;
  max-height: 350px;
  overflow-y: auto;
  border: 1px solid #e0e0e0;
}

.select-dropdown.open { display: block; }

.select-dropdown-label {
  padding: 10px 16px;
  font-size: 13px;
  color: var(--text-muted);
  text-align: center;
  background: #f5f5f5;
  font-weight: 500;
}

.select-option {
  padding: 12px 16px;
  cursor: pointer;
  font-size: 15px;
  transition: background 0.15s;
  display: flex;
  align-items: center;
  gap: 8px;
}

.select-option:hover {
  background: var(--accent-green-light);
}

.select-option.selected {
  background: var(--accent-green-light);
  color: var(--accent-green);
  font-weight: 600;
}

.select-option .option-check {
  opacity: 0;
  transition: opacity 0.15s;
}

.select-option.selected .option-check {
  opacity: 1;
}

/* ====== Result Card ====== */
.result-card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
}

.result-date {
  font-size: 12px;
  color: var(--text-muted);
  font-weight: 500;
  background: #f5f5f5;
  padding: 3px 10px;
  border-radius: 12px;
}

.prize-row {
  display: flex;
  align-items: center;
  padding: 10px 12px;
  margin-bottom: 6px;
  background: linear-gradient(135deg, rgba(232,245,233,0.4), rgba(255,255,255,0.7));
  border-radius: var(--radius-sm);
  border: 1px solid rgba(76,175,80,0.08);
}

.prize-row.prize-first {
  background: linear-gradient(135deg, rgba(255,215,0,0.12), rgba(255,235,59,0.08));
  border-color: rgba(255,193,7,0.2);
  padding: 14px 12px;
}

.prize-label {
  font-size: 11px;
  color: var(--text-muted);
  font-weight: 500;
  min-width: 70px;
  flex-shrink: 0;
}

.prize-digits {
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
  flex: 1;
  justify-content: center;
}

.prize-digit {
  width: 32px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-mono);
  font-size: 20px;
  font-weight: 700;
  background: linear-gradient(180deg, #f8f8f8, #fff);
  border: 1.5px solid #e0e0e0;
  border-radius: 5px;
  color: var(--text-primary);
}

.prize-first .prize-digit {
  width: 36px;
  height: 44px;
  font-size: 24px;
  border-color: #ffc107;
  background: linear-gradient(180deg, #fff8e1, #fff);
}

.prize-values {
  font-family: var(--font-mono);
  font-size: 16px;
  font-weight: 700;
  color: var(--text-primary);
  flex: 1;
  text-align: center;
}

.prize-values span {
  display: inline-block;
  margin: 2px 6px;
  padding: 4px 10px;
  background: white;
  border-radius: 6px;
  border: 1px solid #e8e8e8;
}

/* ====== Input ====== */
.input-group {
  display: flex;
  gap: 8px;
  margin-bottom: 12px;
}

.input-group input {
  flex: 1;
  padding: 14px 16px;
  border: 2px solid #e0e0e0;
  border-radius: var(--radius-sm);
  font-family: var(--font-mono);
  font-size: 20px;
  font-weight: 600;
  text-align: center;
  letter-spacing: 4px;
  color: var(--text-primary);
  transition: border-color 0.2s;
  background: white;
}

.input-group input:focus {
  border-color: var(--accent-green);
  outline: none;
  box-shadow: 0 0 0 3px rgba(76,175,80,0.15);
}

.input-group input::placeholder {
  color: #ccc;
  letter-spacing: 1px;
  font-size: 14px;
}

/* ====== Buttons ====== */
.btn {
  border: none;
  border-radius: var(--radius-sm);
  font-family: var(--font-main);
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}

.btn-primary {
  background: var(--btn-primary);
  color: white;
  padding: 14px 32px;
  font-size: 16px;
  box-shadow: 0 4px 15px rgba(76,175,80,0.3);
}

.btn-primary:hover {
  background: var(--btn-primary-hover);
  box-shadow: 0 6px 20px rgba(76,175,80,0.4);
  transform: translateY(-1px);
}

.btn-primary:active { transform: translateY(0); }

.btn-secondary {
  background: #f5f5f5;
  color: var(--text-secondary);
  padding: 14px 24px;
  font-size: 16px;
  border: 1px solid #e0e0e0;
}

.btn-secondary:hover {
  background: #eee;
}

.btn-clear {
  background: #f5f5f5;
  color: var(--text-muted);
  padding: 14px;
  font-size: 16px;
  border: 1px solid #e0e0e0;
  width: 48px;
}

.btn-full { width: 100%; }

.btn-sm {
  padding: 6px 14px;
  font-size: 12px;
  border-radius: var(--radius-xs);
  background: #f5f5f5;
  color: var(--text-secondary);
  border: 1px solid #e0e0e0;
}

.btn-row {
  display: flex;
  gap: 8px;
}

.btn-row .btn-primary { flex: 1; }

.btn-icon { font-size: 18px; }

/* ====== Results ====== */
.results-card { animation: slideUp 0.4s ease; }

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

.results-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
}

.results-header h3 { font-size: 18px; }

.mode-select {
  padding: 6px 10px;
  border: 1.5px solid #e0e0e0;
  border-radius: 8px;
  font-family: var(--font-main);
  font-size: 12px;
  font-weight: 500;
  color: var(--text-primary);
  background: white;
  cursor: pointer;
  outline: none;
  transition: border-color 0.2s;
  width: 100%;
  max-width: 180px;
}

.mode-select:focus {
  border-color: var(--accent-green);
}

.results-tabs {
  display: flex;
  gap: 4px;
  margin-bottom: 16px;
  background: #f5f5f5;
  border-radius: var(--radius-sm);
  padding: 3px;
}

.results-tab {
  flex: 1;
  border: none;
  background: transparent;
  padding: 8px;
  border-radius: 8px;
  font-family: var(--font-main);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  color: var(--text-secondary);
  transition: all 0.2s;
}

.results-tab.active {
  background: white;
  color: var(--accent-green);
  box-shadow: 0 2px 6px rgba(0,0,0,0.06);
  font-weight: 600;
}

.results-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.result-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  background: linear-gradient(135deg, rgba(232,245,233,0.5), rgba(255,255,255,0.8));
  border-radius: var(--radius-sm);
  border: 1px solid rgba(76,175,80,0.1);
  transition: transform 0.2s, box-shadow 0.2s;
}

.result-item:hover {
  transform: translateX(4px);
  box-shadow: 0 4px 12px rgba(76,175,80,0.1);
}

.result-rank {
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  font-size: 14px;
  font-weight: 700;
  flex-shrink: 0;
}

.result-rank.rank-1 { background: linear-gradient(135deg, #ffd700, #ffb300); color: #5d4037; }
.result-rank.rank-2 { background: linear-gradient(135deg, #bdbdbd, #9e9e9e); color: white; }
.result-rank.rank-3 { background: linear-gradient(135deg, #ff8a65, #e64a19); color: white; }
.result-rank.rank-4,
.result-rank.rank-5 { background: #e8e8e8; color: #666; }

.result-number {
  font-family: var(--font-mono);
  font-size: 24px;
  font-weight: 700;
  color: var(--text-primary);
  min-width: 60px;
}

.result-bar-wrapper {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.result-bar {
  height: 6px;
  background: #e8e8e8;
  border-radius: 3px;
  overflow: hidden;
}

.result-bar-fill {
  height: 100%;
  border-radius: 3px;
  background: linear-gradient(90deg, var(--accent-green), #81c784);
  transition: width 0.8s ease;
}

.result-pct {
  font-size: 11px;
  color: var(--text-muted);
  font-weight: 500;
}

.disclaimer {
  font-size: 11px;
  color: var(--text-muted);
  text-align: center;
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid rgba(0,0,0,0.05);
}

/* ====== Data Table ====== */
.table-wrapper { overflow-x: auto; }

.data-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}

.data-table th {
  padding: 10px 8px;
  text-align: center;
  font-weight: 600;
  color: var(--text-secondary);
  border-bottom: 2px solid #e0e0e0;
  font-size: 12px;
  white-space: nowrap;
}

.data-table td {
  padding: 10px 8px;
  text-align: center;
  border-bottom: 1px solid #f0f0f0;
  font-family: var(--font-mono);
  font-size: 13px;
}

.data-table tr:hover td { background: rgba(76,175,80,0.03); }

/* ====== Engine Mode Cards ====== */
.mode-cards {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.mode-card {
  display: block;
  padding: 16px;
  border: 2px solid #e8e8e8;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: all 0.2s;
  position: relative;
}

.mode-card input { display: none; }

.mode-card:hover { border-color: #ccc; }

.mode-card.active {
  border-color: var(--accent-green);
  background: rgba(76,175,80,0.04);
}

.mode-icon {
  font-size: 24px;
  margin-bottom: 6px;
}

.mode-card h4 {
  font-size: 15px;
  font-weight: 600;
  margin-bottom: 4px;
  color: var(--text-primary);
}

.mode-card p {
  font-size: 12px;
  color: var(--text-secondary);
  line-height: 1.5;
}

/* ====== Accuracy Slider ====== */
.slider-group {
  margin-top: 12px;
}

.slider-group label {
  font-size: 14px;
  display: block;
  margin-bottom: 8px;
}

.accuracy-slider {
  width: 100%;
  -webkit-appearance: none;
  height: 8px;
  border-radius: 4px;
  background: linear-gradient(90deg, #e0e0e0, #4caf50);
  outline: none;
}

.accuracy-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 24px;
  height: 24px;
  background: white;
  border: 3px solid var(--accent-green);
  border-radius: 50%;
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(0,0,0,0.15);
}

/* ====== Digit Controls ====== */
.digit-control-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
}

.digit-controls {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 8px;
  margin-top: 8px;
}

.digit-btn {
  aspect-ratio: 1;
  border: 2px solid #e0e0e0;
  border-radius: var(--radius-sm);
  background: white;
  font-family: var(--font-mono);
  font-size: 22px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.2s;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-primary);
  position: relative;
}

.digit-btn:hover { border-color: #bbb; }

.digit-btn.force {
  border-color: var(--accent-green);
  background: var(--accent-green-light);
  color: var(--accent-green);
}

.digit-btn.force::after {
  content: '✔';
  position: absolute;
  top: 2px;
  right: 4px;
  font-size: 10px;
}

.digit-btn.ban {
  border-color: var(--accent-pink);
  background: #fce4ec;
  color: var(--accent-pink);
  text-decoration: line-through;
}

.digit-btn.ban::after {
  content: '✕';
  position: absolute;
  top: 2px;
  right: 4px;
  font-size: 10px;
}

/* ====== Charts ====== */
.chart-container {
  display: flex;
  align-items: flex-end;
  gap: 6px;
  height: 200px;
  padding: 10px 0;
}

.chart-bar-group {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  height: 100%;
  justify-content: flex-end;
}

.chart-bar {
  width: 100%;
  border-radius: 4px 4px 0 0;
  background: linear-gradient(180deg, #66bb6a, #43a047);
  transition: height 0.6s ease;
  min-height: 4px;
}

.chart-bar-label {
  font-size: 12px;
  font-weight: 600;
  margin-top: 6px;
  color: var(--text-secondary);
}

.chart-bar-value {
  font-size: 10px;
  color: var(--text-muted);
  margin-bottom: 4px;
}

/* ====== Hot/Cold Grid ====== */
.hot-cold-grid {
  display: grid;
  grid-template-columns: repeat(10, 1fr);
  gap: 6px;
  margin-top: 10px;
}

.hc-cell {
  aspect-ratio: 1;
  border-radius: var(--radius-xs);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-mono);
  font-size: 14px;
  font-weight: 700;
  transition: transform 0.2s;
}

.hc-cell:hover { transform: scale(1.1); }

.hc-hot { background: linear-gradient(135deg, #ff5252, #ff1744); color: white; }
.hc-warm { background: linear-gradient(135deg, #ff9800, #f57c00); color: white; }
.hc-neutral { background: #e8e8e8; color: #666; }
.hc-cool { background: linear-gradient(135deg, #42a5f5, #1e88e5); color: white; }
.hc-cold { background: linear-gradient(135deg, #78909c, #546e7a); color: white; }

/* ====== Trend Chart ====== */
.trend-chart {
  display: flex;
  align-items: flex-end;
  gap: 3px;
  height: 120px;
  padding: 10px 0;
}

.trend-bar {
  flex: 1;
  background: linear-gradient(180deg, #ce93d8, #9c27b0);
  border-radius: 3px 3px 0 0;
  min-height: 8px;
  transition: height 0.5s ease;
  position: relative;
}

.trend-bar:hover {
  opacity: 0.85;
}

.trend-bar::after {
  content: attr(data-val);
  position: absolute;
  top: -18px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 9px;
  color: var(--text-muted);
  white-space: nowrap;
  opacity: 0;
  transition: opacity 0.2s;
}

.trend-bar:hover::after { opacity: 1; }

/* ====== AI Section ====== */
.ai-result {
  margin-top: 16px;
  padding: 16px;
  background: linear-gradient(135deg, #f3e5f5, #e8eaf6);
  border-radius: var(--radius-sm);
  display: flex;
  gap: 12px;
}

.ai-avatar {
  font-size: 32px;
  flex-shrink: 0;
}

.ai-text {
  font-size: 14px;
  line-height: 1.8;
  color: var(--text-primary);
  white-space: pre-wrap;
}

.ai-loading {
  text-align: center;
  padding: 24px;
  color: var(--text-muted);
}

.spinner {
  width: 32px;
  height: 32px;
  border: 3px solid #e0e0e0;
  border-top-color: var(--accent-green);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
  margin: 0 auto 12px;
}

@keyframes spin { to { transform: rotate(360deg); } }

/* ====== Calendar ====== */
.calendar-nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
}

.calendar-nav span {
  font-size: 16px;
  font-weight: 600;
}

.calendar-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 4px;
}

.cal-header {
  text-align: center;
  font-size: 11px;
  font-weight: 600;
  color: var(--text-muted);
  padding: 6px 0;
}

.cal-day {
  aspect-ratio: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-xs);
  font-size: 13px;
  cursor: default;
  transition: background 0.2s;
}

.cal-day.empty { visibility: hidden; }
.cal-day.has-data { background: var(--accent-green-light); cursor: pointer; }
.cal-day.has-data:hover { background: #c8e6c9; }
.cal-day .cal-num { font-weight: 600; }
.cal-day .cal-result { font-size: 8px; color: var(--accent-green); font-weight: 700; font-family: var(--font-mono); }
.cal-day .cal-result-3 { font-size: 7px; color: var(--accent-pink); font-weight: 600; font-family: var(--font-mono); }
.cal-day .cal-first { font-size: 7px; color: #e65100; font-weight: 700; font-family: var(--font-mono); }

/* ====== Engine Status ====== */
.engine-status {
  margin-bottom: 12px;
}

/* ====== Footer ====== */
.footer {
  max-width: 600px;
  margin: 0 auto;
  padding: 20px 16px 40px;
  text-align: center;
  font-size: 11px;
  color: var(--text-muted);
  line-height: 1.8;
}

.footer-copy {
  margin-top: 8px;
  font-weight: 500;
}

/* ====== Utilities ====== */
.hidden { display: none !important; }

/* ====== Popup ====== */
.popup-overlay {
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  background: rgba(0,0,0,0.5);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  animation: fadeIn 0.2s ease;
}

.popup-overlay.hidden { display: none !important; }

.popup-card {
  background: white;
  border-radius: 20px;
  width: 100%;
  max-width: 400px;
  max-height: 85vh;
  overflow-y: auto;
  box-shadow: 0 24px 80px rgba(0,0,0,0.2);
  position: relative;
  animation: popIn 0.3s ease;
}

@keyframes popIn {
  from { transform: scale(0.9); opacity: 0; }
  to { transform: scale(1); opacity: 1; }
}

.popup-close {
  position: absolute;
  top: 12px;
  right: 14px;
  background: #f0f0f0;
  border: none;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  font-size: 14px;
  cursor: pointer;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s;
}

.popup-close:hover { background: #ddd; }

.popup-header {
  text-align: center;
  padding: 28px 20px 16px;
}

.popup-number {
  font-family: var(--font-mono);
  font-size: 48px;
  font-weight: 700;
  background: linear-gradient(135deg, #2e7d32, #1565c0);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.popup-lottery-name {
  font-size: 13px;
  color: var(--text-muted);
  margin-top: 4px;
}

.popup-body { padding: 0 20px 20px; }

.popup-score-ring {
  width: 140px;
  height: 140px;
  margin: 0 auto 16px;
  position: relative;
}

.popup-score-ring svg {
  width: 100%;
  height: 100%;
  transform: rotate(-90deg);
}

.popup-score-ring .ring-bg {
  fill: none;
  stroke: #e8e8e8;
  stroke-width: 10;
}

.popup-score-ring .ring-fill {
  fill: none;
  stroke-width: 10;
  stroke-linecap: round;
  transition: stroke-dashoffset 1s ease;
}

.popup-score-text {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
}

.popup-score-pct {
  font-family: var(--font-mono);
  font-size: 32px;
  font-weight: 700;
  color: var(--text-primary);
}

.popup-score-label {
  font-size: 11px;
  color: var(--text-muted);
}

.popup-verdict {
  text-align: center;
  font-size: 15px;
  font-weight: 600;
  padding: 10px;
  border-radius: var(--radius-sm);
  margin-bottom: 16px;
}

.popup-verdict.high {
  background: linear-gradient(135deg, rgba(76,175,80,0.1), rgba(129,199,132,0.1));
  color: #2e7d32;
}

.popup-verdict.medium {
  background: linear-gradient(135deg, rgba(255,152,0,0.1), rgba(255,183,77,0.1));
  color: #e65100;
}

.popup-verdict.low {
  background: linear-gradient(135deg, rgba(244,67,54,0.1), rgba(239,154,154,0.1));
  color: #c62828;
}

.popup-stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-bottom: 12px;
}

.popup-stat {
  background: #f8f8f8;
  border-radius: var(--radius-xs);
  padding: 10px;
  text-align: center;
}

.popup-stat-value {
  font-family: var(--font-mono);
  font-size: 18px;
  font-weight: 700;
  color: var(--text-primary);
}

.popup-stat-label {
  font-size: 10px;
  color: var(--text-muted);
  margin-top: 2px;
}

.popup-formula-list {
  font-size: 12px;
  color: var(--text-secondary);
  max-height: 120px;
  overflow-y: auto;
  padding: 8px;
  background: #fafafa;
  border-radius: var(--radius-xs);
}

.popup-formula-item {
  display: flex;
  justify-content: space-between;
  padding: 3px 0;
  border-bottom: 1px solid #f0f0f0;
}

.popup-footer {
  padding: 0 20px 16px;
}

/* ====== Theme Toggle ====== */
.theme-toggle {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 1px solid rgba(0,0,0,0.1);
  background: rgba(255,255,255,0.7);
  backdrop-filter: blur(10px);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  transition: all 0.3s ease;
  margin-left: 8px;
  flex-shrink: 0;
}
.theme-toggle:hover {
  transform: scale(1.1);
  box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}
.theme-toggle:active { transform: scale(0.95); }

/* ====== Buy Lottery Card ====== */
.buy-lottery-card {
  background: linear-gradient(135deg, rgba(255,215,0,0.12), rgba(255,152,0,0.08)) !important;
  border-color: rgba(255,193,7,0.25) !important;
}
.buy-lottery-content {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 14px;
}
.buy-lottery-icon {
  font-size: 36px;
  flex-shrink: 0;
}
.buy-lottery-title {
  font-size: 17px;
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: 2px;
}
.buy-lottery-sub {
  font-size: 13px;
  color: var(--text-secondary);
}
.btn-buy-lottery {
  width: 100%;
  padding: 14px 24px;
  background: linear-gradient(135deg, #ff9800, #f57c00);
  color: white;
  font-size: 17px;
  font-weight: 700;
  border-radius: var(--radius-sm);
  box-shadow: 0 4px 15px rgba(255,152,0,0.35);
  text-decoration: none;
  position: relative;
  overflow: hidden;
}
.btn-buy-lottery::before {
  content: '';
  position: absolute;
  top: 0; left: -100%;
  width: 100%; height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
  animation: shimmerBuy 2.5s ease-in-out infinite;
}
@keyframes shimmerBuy {
  0% { left: -100%; }
  100% { left: 100%; }
}
.btn-buy-lottery:hover {
  box-shadow: 0 6px 20px rgba(255,152,0,0.5);
  transform: translateY(-1px);
}
.btn-buy-lottery:active { transform: translateY(0); }

/* ====== Dark Theme ====== */
[data-theme="dark"] {
  --bg-gradient: linear-gradient(135deg, #0f0f23 0%, #1a1a2e 30%, #16213e 60%, #1a1a2e 100%);
  --card-bg: rgba(26, 26, 46, 0.9);
  --card-border: rgba(255, 255, 255, 0.08);
  --card-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
  --text-primary: #e0e0e0;
  --text-secondary: #aaa;
  --text-muted: #777;
  --accent-green-light: rgba(76, 175, 80, 0.15);
  --btn-primary: linear-gradient(135deg, #4caf50 0%, #2e7d32 100%);
  --btn-primary-hover: linear-gradient(135deg, #66bb6a 0%, #43a047 100%);
}

[data-theme="dark"] body {
  color: var(--text-primary);
}

[data-theme="dark"] .header {
  background: linear-gradient(135deg, rgba(15,15,35,0.95), rgba(26,26,46,0.95), rgba(22,33,62,0.95));
  border-bottom-color: rgba(255,255,255,0.06);
}

[data-theme="dark"] .logo h1 {
  background: linear-gradient(135deg, #66bb6a, #42a5f5);
  -webkit-background-clip: text;
  background-clip: text;
}

[data-theme="dark"] .logo p {
  color: var(--text-secondary);
}

[data-theme="dark"] .tab {
  background: rgba(255,255,255,0.05);
  color: var(--text-secondary);
  border-color: transparent;
}
[data-theme="dark"] .tab:hover {
  background: rgba(255,255,255,0.1);
  color: var(--text-primary);
}
[data-theme="dark"] .tab.active {
  background: rgba(76,175,80,0.15);
  color: #66bb6a;
  border-color: rgba(76,175,80,0.3);
}

[data-theme="dark"] .card {
  background: var(--card-bg);
  border-color: var(--card-border);
}
[data-theme="dark"] .card:hover {
  box-shadow: 0 12px 40px rgba(0,0,0,0.4);
}

[data-theme="dark"] .select-btn {
  background: rgba(255,255,255,0.05);
  border-color: rgba(255,255,255,0.1);
  color: var(--text-primary);
}
[data-theme="dark"] .select-dropdown {
  background: #1a1a2e;
  border-color: rgba(255,255,255,0.1);
}
[data-theme="dark"] .select-dropdown-label {
  background: rgba(255,255,255,0.03);
  color: var(--text-muted);
}
[data-theme="dark"] .select-option {
  color: var(--text-primary);
}
[data-theme="dark"] .select-option:hover {
  background: rgba(76,175,80,0.15);
}
[data-theme="dark"] .select-option.selected {
  background: rgba(76,175,80,0.2);
  color: #66bb6a;
}

[data-theme="dark"] .input-group input {
  background: rgba(255,255,255,0.05);
  border-color: rgba(255,255,255,0.1);
  color: var(--text-primary);
}
[data-theme="dark"] .input-group input:focus {
  border-color: #66bb6a;
  box-shadow: 0 0 0 3px rgba(76,175,80,0.2);
}
[data-theme="dark"] .input-group input::placeholder {
  color: #555;
}

[data-theme="dark"] .btn-secondary,
[data-theme="dark"] .btn-clear,
[data-theme="dark"] .btn-sm {
  background: rgba(255,255,255,0.06);
  border-color: rgba(255,255,255,0.08);
  color: var(--text-secondary);
}

[data-theme="dark"] .prize-row {
  background: linear-gradient(135deg, rgba(76,175,80,0.06), rgba(255,255,255,0.03));
  border-color: rgba(76,175,80,0.1);
}
[data-theme="dark"] .prize-row.prize-first {
  background: linear-gradient(135deg, rgba(255,215,0,0.08), rgba(255,235,59,0.04));
  border-color: rgba(255,193,7,0.15);
}
[data-theme="dark"] .prize-digit {
  background: rgba(255,255,255,0.06);
  border-color: rgba(255,255,255,0.1);
  color: var(--text-primary);
}
[data-theme="dark"] .prize-first .prize-digit {
  border-color: rgba(255,193,7,0.3);
  background: rgba(255,215,0,0.06);
}
[data-theme="dark"] .prize-values span {
  background: rgba(255,255,255,0.06);
  border-color: rgba(255,255,255,0.08);
  color: var(--text-primary);
}

[data-theme="dark"] .result-date {
  background: rgba(255,255,255,0.06);
  color: var(--text-secondary);
}

[data-theme="dark"] .result-item {
  background: linear-gradient(135deg, rgba(76,175,80,0.06), rgba(255,255,255,0.03));
  border-color: rgba(76,175,80,0.1);
}

[data-theme="dark"] .results-tabs {
  background: rgba(255,255,255,0.05);
}
[data-theme="dark"] .results-tab.active {
  background: rgba(76,175,80,0.15);
  color: #66bb6a;
}

[data-theme="dark"] .hc-neutral {
  background: rgba(255,255,255,0.08);
  color: var(--text-secondary);
}

[data-theme="dark"] .data-table th {
  color: var(--text-secondary);
  border-bottom-color: rgba(255,255,255,0.1);
}
[data-theme="dark"] .data-table td {
  border-bottom-color: rgba(255,255,255,0.04);
  color: var(--text-primary);
}
[data-theme="dark"] .data-table tr:hover td {
  background: rgba(76,175,80,0.05);
}

[data-theme="dark"] .mode-card {
  border-color: rgba(255,255,255,0.08);
  background: rgba(255,255,255,0.02);
}
[data-theme="dark"] .mode-card:hover {
  border-color: rgba(255,255,255,0.15);
}
[data-theme="dark"] .mode-card.active {
  border-color: rgba(76,175,80,0.4);
  background: rgba(76,175,80,0.08);
}
[data-theme="dark"] .mode-card h4 { color: var(--text-primary); }
[data-theme="dark"] .mode-card p { color: var(--text-secondary); }

[data-theme="dark"] .accuracy-slider {
  background: linear-gradient(90deg, rgba(255,255,255,0.1), #4caf50);
}
[data-theme="dark"] .accuracy-slider::-webkit-slider-thumb {
  background: #1a1a2e;
  border-color: #66bb6a;
}

[data-theme="dark"] .digit-btn {
  background: rgba(255,255,255,0.05);
  border-color: rgba(255,255,255,0.1);
  color: var(--text-primary);
}
[data-theme="dark"] .digit-btn.force {
  background: rgba(76,175,80,0.15);
  border-color: #4caf50;
  color: #66bb6a;
}
[data-theme="dark"] .digit-btn.ban {
  background: rgba(233,30,99,0.12);
  border-color: #e91e63;
  color: #f06292;
}

[data-theme="dark"] .ai-result {
  background: linear-gradient(135deg, rgba(156,39,176,0.1), rgba(63,81,181,0.1));
}

[data-theme="dark"] .cal-day.has-data {
  background: rgba(76,175,80,0.15);
}
[data-theme="dark"] .cal-day.has-data:hover {
  background: rgba(76,175,80,0.25);
}

[data-theme="dark"] .badge-ai {
  background: rgba(76,175,80,0.15);
  border-color: rgba(76,175,80,0.3);
}
[data-theme="dark"] .badge-active {
  background: rgba(76,175,80,0.15);
  color: #66bb6a;
}
[data-theme="dark"] .badge-free {
  background: rgba(33,150,243,0.15);
  color: #42a5f5;
}

[data-theme="dark"] .theme-toggle {
  background: rgba(255,255,255,0.08);
  border-color: rgba(255,255,255,0.1);
}

[data-theme="dark"] .popup-card {
  background: #1a1a2e;
  color: var(--text-primary);
}
[data-theme="dark"] .popup-close {
  background: rgba(255,255,255,0.08);
  color: var(--text-primary);
}
[data-theme="dark"] .popup-close:hover {
  background: rgba(255,255,255,0.15);
}
[data-theme="dark"] .popup-score-ring .ring-bg {
  stroke: rgba(255,255,255,0.08);
}
[data-theme="dark"] .popup-stat {
  background: rgba(255,255,255,0.05);
}
[data-theme="dark"] .popup-formula-list {
  background: rgba(255,255,255,0.03);
  color: var(--text-secondary);
}
[data-theme="dark"] .popup-formula-item {
  border-bottom-color: rgba(255,255,255,0.05);
}
[data-theme="dark"] .popup-verdict.high {
  background: rgba(76,175,80,0.12);
  color: #66bb6a;
}
[data-theme="dark"] .popup-verdict.medium {
  background: rgba(255,152,0,0.12);
  color: #ffb74d;
}
[data-theme="dark"] .popup-verdict.low {
  background: rgba(244,67,54,0.12);
  color: #ef5350;
}

[data-theme="dark"] .spinner {
  border-color: rgba(255,255,255,0.1);
  border-top-color: #66bb6a;
}

[data-theme="dark"] .footer {
  color: var(--text-muted);
}

[data-theme="dark"] .buy-lottery-card {
  background: linear-gradient(135deg, rgba(255,215,0,0.06), rgba(255,152,0,0.04)) !important;
  border-color: rgba(255,193,7,0.15) !important;
}

[data-theme="dark"] .result-bar {
  background: rgba(255,255,255,0.08);
}

[data-theme="dark"] .mode-select {
  background: rgba(255,255,255,0.08);
  border-color: rgba(255,255,255,0.15);
  color: var(--text-primary);
}
[data-theme="dark"] .mode-select:focus {
  border-color: #66bb6a;
}
[data-theme="dark"] .mode-select option {
  background: #1a1a2e;
  color: #e0e0e0;
}

[data-theme="dark"] .cal-result-3 {
  color: #f48fb1;
}
[data-theme="dark"] .cal-first {
  color: #ffb74d;
}

/* ====== Responsive ====== */
@media (min-width: 768px) {
  .digit-controls { grid-template-columns: repeat(10, 1fr); }
  .result-digit { width: 44px; height: 54px; font-size: 28px; }
}