@import url('https://fonts.googleapis.com/css2?family=Heebo:wght@400;500;600;700;800&display=swap');

:root {
  --header-bg: #003c76;
  --header-solid: #003c76;
  --body-bg: #f6f9fd;
  --sidebar-bg: #ffffff;
  --sidebar-width: 62px;
  --sidebar-active: #003c76;
  --card-bg: #ffffff;
  --text-primary: #334f6e;
  --text-secondary: #62748e;
  --text-muted: #94a3b8;
  --link-color: #003c76;
  --green: #5cb85c;
  --green-light: #66bb6a;
  --gold: #f0ad4e;
  --red: #ef4444;
  --red-dark: #dc2626;
  --blue: #003c76;
  --blue-light: #0f89ff;
  --cyan: #22d3ee;
  --border: #e5e7eb;
  --shadow: 0 1px 3px rgba(0,0,0,.08);
  --shadow-md: 0 4px 12px rgba(0,0,0,.08);
  --radius: 8px;
  --radius-lg: 12px;
  --ticker-bg: #002a54;
  --font: 'Heebo', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

body.dark {
  --header-bg: #131f29;
  --header-solid: #131f29;
  --body-bg: #142330;
  --sidebar-bg: #131f29;
  --sidebar-active: #38bdf8;
  --card-bg: #1b2a38;
  --text-primary: #ffffff;
  --text-secondary: #a0aec0;
  --text-muted: #718096;
  --link-color: #38bdf8;
  --border: #1e3344;
  --ticker-bg: #142330;
  --shadow: 0 1px 3px rgba(0,0,0,.3);
  --shadow-md: 0 4px 12px rgba(0,0,0,.4);
}

* { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior:smooth; }
body {
  font-family: var(--font);
  background: var(--body-bg);
  color: var(--text-primary);
  font-size: 14px;
  line-height: 1.5;
  min-height: 100vh;
}

a { color: var(--link-color); text-decoration:none; }
a:hover { text-decoration:underline; }
button { cursor:pointer; font-family:var(--font); }
input,select,textarea { font-family:var(--font); }

/* ===== HEADER (Public) ===== */
.header {
  background: var(--header-bg);
  padding: 0 24px;
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 1000;
  box-shadow: 0 2px 8px rgba(0,0,0,.2);
}
.header-logo {
  display: flex;
  align-items: center;
  gap: 2px;
  text-decoration: none;
}
.header-logo .logo-icon {
  width: 36px; height: 36px;
  background: #e53e3e;
  border-radius: 50%;
  display: flex; align-items:center; justify-content:center;
  color: white;
  font-weight: 800;
  font-size: 20px;
}
.header-logo .logo-text {
  color: white;
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -0.5px;
}
.header-nav {
  display: flex;
  align-items: center;
  gap: 4px;
}
.header-nav a {
  color: rgba(255,255,255,.85);
  padding: 6px 16px;
  border-radius: 6px;
  font-size: 14px;
  font-weight: 500;
  transition: all .2s;
}
.header-nav a:hover,
.header-nav a.active {
  background: rgba(255,255,255,.12);
  color: white;
  text-decoration: none;
}
.header-actions {
  display: flex;
  align-items: center;
  gap: 10px;
}
.btn { display:inline-flex; align-items:center; gap:6px; padding:8px 20px; border-radius:6px; font-weight:600; font-size:13px; border:none; transition:all .2s; text-decoration:none!important; }
.btn-login { background:transparent; border:2px solid rgba(255,255,255,.5); color:white; }
.btn-login:hover { border-color:white; background:rgba(255,255,255,.1); }
.btn-signup { background:rgba(255,255,255,.15); color:white; border:2px solid transparent; }
.btn-signup:hover { background:rgba(255,255,255,.25); }
.btn-primary { background:var(--blue); color:white; }
.btn-primary:hover { background:#1d4ed8; }
.btn-green { background:var(--green); color:white; }
.btn-green:hover { background:#43a047; }
.btn-gold { background:var(--gold); color:white; }
.btn-gold:hover { background:#c49a3c; }
.btn-cyan { background: #38bdf8; color:white; }
.btn-cyan:hover { background:#0ea5e9; }
.btn-red { background:var(--red); color:white; }
.btn-red:hover { background:var(--red-dark); }
.btn-outline { background:transparent; border:2px solid var(--border); color:var(--text-primary); }
.btn-outline:hover { border-color:var(--blue); color:var(--blue); }
.btn-lg { padding:12px 32px; font-size:15px; border-radius:8px; }
.btn-sm { padding:5px 12px; font-size:12px; }
.btn-block { width:100%; justify-content:center; }

/* ===== MAIN CONTENT ===== */
.main-public { margin-top:56px; }

/* ===== CARDS ===== */
.card {
  background: var(--card-bg);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
  padding: 24px;
}
.card-header {
  display:flex; align-items:center; justify-content:space-between;
  margin-bottom:16px; padding-bottom:12px;
  border-bottom:1px solid var(--border);
}
.card-title { font-size:16px; font-weight:700; }

/* ===== FORMS ===== */
.form-group { margin-bottom:16px; }
.form-label { display:block; font-size:13px; font-weight:600; margin-bottom:6px; color:var(--text-secondary); }
.form-input {
  width:100%; padding:10px 14px; border:2px solid var(--border);
  border-radius:var(--radius); font-size:14px;
  background:#f9fafb; transition:border-color .2s;
}
.form-input:focus { outline:none; border-color:var(--blue-light); background:white; }
.input-icon-wrap {
  position:relative;
}
.input-icon-wrap .icon {
  position:absolute; left:12px; top:50%; transform:translateY(-50%);
  color:var(--text-muted); font-size:16px;
}
.input-icon-wrap .form-input { padding-left:38px; }

/* ===== GAME CONTROLS ===== */
.game-container { display:grid; grid-template-columns:320px 1fr; gap:20px; }
.game-controls { display:flex; flex-direction:column; gap:12px; }
.game-board { min-height:300px; }

.control-group { background:#f9fafb; border-radius:var(--radius); padding:14px; }
.control-label { font-size:11px; font-weight:600; color:var(--text-secondary); text-transform:uppercase; letter-spacing:.5px; margin-bottom:6px; }
.control-input {
  width:100%; padding:10px 12px;
  background:white; border:2px solid var(--border);
  border-radius:6px; font-size:16px; font-weight:600;
  text-align:center;
}
.control-input:focus { outline:none; border-color:var(--blue-light); }
.control-row { display:flex; gap:6px; align-items:center; }
.control-btn {
  padding:6px 12px; border:2px solid var(--border);
  border-radius:6px; background:white; font-weight:700;
  font-size:12px; color:var(--text-secondary);
  transition:all .15s;
}
.control-btn:hover { border-color:var(--blue-light); color:var(--blue); }

.mode-tabs {
  display:flex; border-bottom:2px solid var(--border);
  margin-bottom:16px;
}
.mode-tab {
  flex:1; padding:10px; text-align:center;
  font-weight:600; font-size:13px;
  border:none; background:none;
  color:var(--text-secondary);
  border-bottom:2px solid transparent;
  margin-bottom:-2px; transition:all .2s;
}
.mode-tab.active {
  color:var(--blue);
  border-bottom-color:var(--blue);
}
.mode-tab:hover { color:var(--blue-light); }

.bet-btn {
  width:100%; padding:14px;
  border:none; border-radius:var(--radius);
  font-size:16px; font-weight:700;
  text-transform:uppercase;
  letter-spacing:1px;
  transition:all .2s;
}
.bet-btn.roll { background:var(--green); color:white; }
.bet-btn.roll:hover { background:#43a047; transform:translateY(-1px); box-shadow:0 4px 12px rgba(76,175,80,.3); }
.bet-btn.stop { background:var(--red); color:white; }
.bet-btn.stop:hover { background:var(--red-dark); }

.win-chance-slider {
  width:100%; -webkit-appearance:none; height:6px;
  border-radius:3px; background:linear-gradient(90deg,var(--green) 0%,var(--red) 100%);
  outline:none;
}
.win-chance-slider::-webkit-slider-thumb {
  -webkit-appearance:none; width:20px; height:20px;
  border-radius:50%; background:white;
  border:3px solid var(--blue); cursor:pointer;
  box-shadow:0 2px 6px rgba(0,0,0,.2);
}

.stat-row { display:flex; justify-content:space-between; align-items:center; padding:8px 0; }
.stat-label { font-size:12px; color:var(--text-secondary); }
.stat-value { font-size:14px; font-weight:700; }
.stat-value.win { color:var(--green); }
.stat-value.loss { color:var(--red); }

/* ===== BET HISTORY TABLE ===== */
.history-tabs {
  display:flex; gap:4px; margin-bottom:12px;
}
.history-tab {
  padding:6px 16px; border-radius:20px; border:none;
  font-size:12px; font-weight:600;
  background:#f0f4f8; color:var(--text-secondary);
  transition:all .2s;
}
.history-tab.active { background:var(--blue); color:white; }
.bet-table { width:100%; border-collapse:collapse; }
.bet-table th {
  padding:10px 12px; text-align:left;
  font-size:11px; font-weight:600;
  color:var(--text-secondary); text-transform:uppercase;
  letter-spacing:.5px;
  border-bottom:2px solid var(--border);
}
.bet-table td {
  padding:8px 12px; font-size:13px;
  border-bottom:1px solid var(--border);
}
.bet-table tr:hover td { background:#f9fafb; }

/* ===== PROFILE DROPDOWN ===== */
.profile-dropdown {
  position:absolute; top:48px; right:0;
  background:white; border-radius:var(--radius-lg);
  box-shadow:var(--shadow-md);
  min-width:220px; padding:12px 0;
  display:none; z-index:1001;
}
.profile-dropdown.show { display:block; }
.profile-dropdown .pd-header {
  padding:12px 16px; border-bottom:1px solid var(--border);
  display:flex; align-items:center; gap:10px;
}
.profile-dropdown .pd-item {
  display:flex; align-items:center; gap:10px;
  padding:10px 16px; color:var(--text-primary);
  font-size:14px; transition:background .15s;
}
.profile-dropdown .pd-item:hover { background:#f0f4f8; text-decoration:none; }
.profile-dropdown .pd-item.logout { color:var(--red); }

/* ===== FOOTER ===== */
.footer {
  background: var(--header-bg);
  color: rgba(255,255,255,.8);
  padding: 40px 24px 20px;
  margin-top: 60px;
}
.footer-grid {
  max-width:1100px; margin:0 auto;
  display:grid; grid-template-columns:2fr 1fr 1fr;
  gap:40px;
}
.footer-desc { font-size:13px; line-height:1.7; margin-top:12px; }
.footer h4 { color:white; font-size:14px; margin-bottom:14px; }
.footer-links { list-style:none; }
.footer-links li { margin-bottom:8px; }
.footer-links a { color:rgba(255,255,255,.7); font-size:13px; }
.footer-links a:hover { color:white; }
.footer-bottom {
  border-top:1px solid rgba(255,255,255,.1);
  margin-top:30px; padding-top:16px;
  display:flex; justify-content:space-between;
  font-size:12px; color:rgba(255,255,255,.5);
}

/* ===== MODAL ===== */
.modal-overlay {
  position:fixed; top:0;left:0;right:0;bottom:0;
  background:rgba(0,0,0,.5); z-index:2000;
  display:none; align-items:center; justify-content:center;
}
.modal-overlay.show { display:flex; }
.modal {
  background:white; border-radius:var(--radius-lg);
  padding:24px; max-width:500px; width:90%;
  max-height:80vh; overflow-y:auto;
  box-shadow:0 20px 60px rgba(0,0,0,.2);
}
.modal-title { font-size:18px; font-weight:700; margin-bottom:16px; }

/* ===== UTILITIES ===== */
.text-center { text-align:center; }
.text-green { color:var(--green)!important; }
.text-red { color:var(--red)!important; }
.text-blue { color:var(--blue)!important; }
.text-muted { color:var(--text-muted)!important; }
.fw-700 { font-weight:700; }
.mt-8 { margin-top:8px; }
.mt-16 { margin-top:16px; }
.mt-24 { margin-top:24px; }
.mb-8 { margin-bottom:8px; }
.mb-16 { margin-bottom:16px; }
.gap-8 { gap:8px; }
.flex { display:flex; }
.flex-col { flex-direction:column; }
.items-center { align-items:center; }
.justify-between { justify-content:space-between; }
.hidden { display:none!important; }

/* ===== RESPONSIVE ===== */
@media(max-width:768px){
  .header-nav { display:none; }
  .game-container { grid-template-columns:1fr; }
  .footer-grid { grid-template-columns:1fr; gap:24px; }
}