/* ===== Vegas Vault 777 — user app theme (gold & black, USA/Vegas) ===== */
:root {
  --vv-gold: #d4af37;
  --vv-gold-2: #f5d97a;
  --vv-dark: #0c0913;
  --vv-dark-2: #08060f;
  --vv-card: #17121f;
  --vv-red: #e11d48;
}
* { -webkit-tap-highlight-color: transparent; box-sizing: border-box; }
body { margin: 0; font-family: 'Segoe UI', system-ui, -apple-system, sans-serif; }

/* Phone shell centered on desktop, full screen on mobile */
.app-shell {
  max-width: 430px;
  margin: 0 auto;
  min-height: 100vh;
  background: var(--vv-dark);
  position: relative;
  overflow-x: hidden;
  box-shadow: 0 0 40px rgba(0,0,0,.6);
}

/* Vegas gold-on-black gradients */
.grad-green { background: radial-gradient(120% 90% at 50% 0%, #1c1430 0%, #0c0913 55%, #050309 100%); }
.grad-card  { background: linear-gradient(135deg, #f5d97a 0%, #d4af37 55%, #b8860b 100%); }

/* Gold shimmer text for the brand name */
.gold-text {
  background: linear-gradient(92deg, #f5d97a 0%, #d4af37 40%, #fff3c4 60%, #d4af37 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: var(--vv-gold);
  font-weight: 900; letter-spacing: .3px;
}

.field-input {
  background: transparent;
  border: none;
  border-bottom: 1.5px solid rgba(212,175,55,.4);
  color: #fff;
  width: 100%;
  padding: 10px 6px 10px 38px;
  outline: none;
  font-size: 15px;
}
.field-input::placeholder { color: rgba(255,255,255,.45); }
.field-input:focus { border-bottom-color: var(--vv-gold); }
select.field-input option { background: #120d22; color: #fff; }

.btn-green {
  background: linear-gradient(135deg, #f5d97a, #d4af37);
  color: #1a1305; font-weight: 800;
  border-radius: 14px; padding: 14px; width: 100%; border: none;
  font-size: 16px; cursor: pointer; transition: .15s;
  box-shadow: 0 4px 14px rgba(212,175,55,.3);
}
.btn-green:active { transform: scale(.98); }
.btn-outline {
  background: transparent; color: var(--vv-gold); border: 1.5px solid var(--vv-gold);
  border-radius: 14px; padding: 12px; width: 100%; font-weight: 700; cursor: pointer;
}

.nav-bar {
  position: sticky; bottom: 0; left: 0; right: 0;
  background: var(--vv-dark-2); border-top: 1px solid rgba(212,175,55,.22);
  display: flex; justify-content: space-around; padding: 8px 0;
}
.nav-item { flex:1; text-align:center; color:#7a6f52; font-size:11px; cursor:pointer; }
.nav-item.active { color: var(--vv-gold); }
.nav-item i { font-size: 18px; display:block; margin-bottom:3px; }

.marquee { overflow:hidden; white-space:nowrap; }
.marquee span { display:inline-block; padding-left:100%; animation: scroll 18s linear infinite; }
@keyframes scroll { 0%{transform:translateX(0)} 100%{transform:translateX(-100%)} }

.easy-action {
  background: var(--vv-card); border:1px solid rgba(212,175,55,.18); border-radius:16px;
  padding:16px 6px; text-align:center; cursor:pointer; transition:.15s;
}
.easy-action:active { transform: scale(.96); }
.easy-action i { color: var(--vv-gold); font-size:22px; }

.sheet-bg { position:fixed; inset:0; background:rgba(0,0,0,.7); display:flex; align-items:flex-end; z-index:50; }
.sheet { background: var(--vv-dark); width:100%; max-width:430px; margin:0 auto; border-radius:22px 22px 0 0; padding:20px; max-height:92vh; overflow-y:auto; border-top:1px solid rgba(212,175,55,.25); }

.toast { position:fixed; top:20px; left:50%; transform:translateX(-50%); z-index:100;
  background: var(--vv-card); color:#fff; padding:12px 20px; border-radius:12px; border:1px solid var(--vv-gold); font-size:14px; max-width:90%; }

.splash-logo { width:110px;height:110px;border-radius:50%; background:rgba(212,175,55,.10); display:flex;align-items:center;justify-content:center; box-shadow:0 0 40px rgba(212,175,55,.2); }
.spin { animation: sp 1s linear infinite; } @keyframes sp { to { transform: rotate(360deg) } }