/* styles.css - unified theme + simulator */

:root{
  --bg-1: #0b0f14;
  --card: rgba(17,20,24,0.72);
  --accent: #f25b3a;
  --muted: #9aa3aa;
  --text: #eef6f7;
}

/* base */
body { margin:0; font-family: Inter, system-ui, -apple-system, "Segoe UI", Roboto, Arial; color:var(--text); -webkit-font-smoothing:antialiased; }

/* Auth */
.bg-auth{ min-height:100vh; background: radial-gradient(1000px 500px at 50% 10%, rgba(242,91,58,0.06), transparent 8%), linear-gradient(180deg,#0b0f14 0%,#071014 45%,#031018 100%); display:flex; align-items:center; justify-content:center; padding:40px 20px; }
.auth-wrap { width:100%; max-width:900px; display:flex; justify-content:center; }
.auth-card{ width:100%; max-width:760px; border-radius:28px; padding:32px; display:grid; gap:18px; backdrop-filter: blur(6px); background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(0,0,0,0.2)); border:1px solid rgba(255,255,255,0.03); }
.auth-top { text-align:center; padding-top:8px; }
.auth-logo { width:84px; height:84px; border-radius:18px; object-fit:cover; box-shadow: 0 8px 30px rgba(242,91,58,0.16); border:1px solid rgba(255,255,255,0.04); }
.auth-title { font-size:48px; margin:14px 0 0; font-weight:800; }
.guard { color:var(--accent); }

/* Tabs + forms */
.tabs { display:flex; gap:18px; justify-content:center; margin-top:8px; }
.tab { padding:14px 44px; border-radius:40px; background: rgba(255,255,255,0.02); color:var(--muted); font-weight:700; cursor:pointer; border:1px solid rgba(255,255,255,0.03); }
.tab.active { color:#041014; background: linear-gradient(90deg,var(--accent),#ff8a5f); transform: translateY(-2px); }
.forms { display:flex; gap:24px; justify-content:center; align-items:flex-start; padding-top:6px; }
.form { width:100%; max-width:520px; display:none; flex-direction:column; gap:10px; padding:18px; border-radius:16px; background: linear-gradient(180deg, rgba(255,255,255,0.01), rgba(255,255,255,0.005)); border:1px solid rgba(255,255,255,0.02); }
.form.active { display:flex; }
.form input { width:100%; padding:14px; border-radius:12px; border:1px solid rgba(255,255,255,0.03); background: rgba(0,0,0,0.35); color:var(--text); }

/* CTA */
.cta { width:100%; padding:14px; border-radius:32px; border:none; background: linear-gradient(90deg,var(--accent),#ff8a5f); color:#031218; font-weight:800; }

/* Dashboard base */
.app-bg { min-height:100vh; background: linear-gradient(180deg,#020406 0%, #041016 50%, #071013 100%); }
.topbar { display:flex; justify-content:space-between; padding:12px 20px; align-items:center; }
.brand .logo { color:var(--accent); font-weight:800; font-size:22px; }

/* Center layout */
.center-container { max-width:440px; margin: 20px auto; text-align:center; padding: 8px; }
.simulator-box { width: 100%; max-width: 420px; margin: 18px auto; padding: 18px; background: radial-gradient(circle at 20% 20%, rgba(0,255,0,0.02), rgba(0,0,0,0.6)); color: #0f0; font-family: monospace; border-radius: 18px; border: 3px solid rgba(0,200,80,0.9); min-height: 220px; overflow-y:auto; box-shadow: 0 20px 40px rgba(0,0,0,0.6); }
.sim-line { margin: 6px 0; color: #7ffb7f; }
.sim-result { font-size: 36px; font-weight:900; color: #fff; text-align:center; background: rgba(255,255,255,0.06); padding:8px 12px; border-radius:10px; margin-top:12px; display:inline-block; }

/* Start btn & vip status */
.btn { padding:12px 22px; border-radius:40px; border:none; background: linear-gradient(90deg,var(--accent),#ff8a5f); color:#fff; font-weight:800; cursor:pointer; }
.btn.big { font-size:20px; padding:14px 30px; }
.vip-status { margin-top:12px; font-weight:800; padding:8px 12px; border-radius:8px; display:inline-block; }
.vip-true { background: #4caf50; color:#fff; }
.vip-false { background: #f44336; color:#fff; }

/* Floating dock */
.floating-dock { position: fixed; bottom: 18px; left: 50%; transform: translateX(-50%); display:flex; gap:18px; z-index:9999; }
.floating-dock .social { padding:12px 24px; border-radius:28px; color:#fff; text-decoration:none; font-weight:800; }
.floating-dock .social:nth-child(1) { background:#25D366; } /* whatsapp */
.floating-dock .social:nth-child(2) { background:#FF3B30; } /* youtube red */
.floating-dock .social:nth-child(3) { background:#00C2FF; } /* telegram */
.floating-dock .signup { background:#7A0F0F; border:2px solid rgba(255,255,255,0.06); }

/* Modal */
.modal { position:fixed; inset:0; display:none; align-items:center; justify-content:center; background:rgba(0,0,0,0.6); z-index:10000; }
.modal-content { width:320px; padding:18px; border-radius:12px; background: #0f1720; text-align:center; border:1px solid rgba(255,255,255,0.03); }

/* Admin */
.admin-card { width:760px; margin:40px auto; }

/* Responsive */
@media (max-width:480px) {
  .center-container { padding:12px; max-width:420px; }
  .simulator-box { min-height:220px; padding:12px; }
  .sim-result { font-size:28px; }
  .floating-dock { gap:12px; bottom:12px; }
}