/* assets/css/app.css — shared across all pages */
:root {
  --bg:      #05050f;
  --panel:   rgba(11,11,26,0.92);
  --card:    rgba(255,255,255,0.035);
  --border:  rgba(255,255,255,0.07);
  --bhi:     rgba(255,255,255,0.13);
  --v1: #7B5EFF;
  --v2: #00D4FF;
  --v3: #FF4F8B;
  --v4: #00FFB2;
  --text:  #EEEEFF;
  --muted: rgba(220,220,255,0.42);
  --r:  20px;
  --rs: 12px;
}
*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }
html, body { height:100%; background:var(--bg); color:var(--text); font-family:'DM Sans',sans-serif; overflow-x:hidden; }
body::after { content:''; position:fixed; inset:0; z-index:1; pointer-events:none;
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.03'/%3E%3C/svg%3E"); opacity:.6; }
a { color:inherit; text-decoration:none; }
::-webkit-scrollbar { width:5px; }
::-webkit-scrollbar-track { background:transparent; }
::-webkit-scrollbar-thumb { background:rgba(255,255,255,.1); border-radius:99px; }

/* animations */
@keyframes fadeUp   { from{opacity:0;transform:translateY(16px)} to{opacity:1;transform:translateY(0)} }
@keyframes fadeIn   { from{opacity:0} to{opacity:1} }
@keyframes bobble   { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-8px)} }
@keyframes slideL   { from{opacity:0;transform:translateX(-22px)} to{opacity:1;transform:translateX(0)} }
.fade-up   { animation:fadeUp .45s ease both; }
.fade-in   { animation:fadeIn .3s ease both; }
.d1{animation-delay:.08s}.d2{animation-delay:.16s}.d3{animation-delay:.24s}.d4{animation-delay:.32s}

/* common buttons */
.btn {
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:12px 22px; border:none; border-radius:var(--rs);
  font-family:'DM Sans',sans-serif; font-size:14px; font-weight:500;
  cursor:pointer; transition:all .22s; text-decoration:none;
}
.btn-grad {
  background:linear-gradient(135deg,var(--v1),var(--v2));
  color:#fff; box-shadow:0 8px 24px rgba(123,94,255,.35);
}
.btn-grad:hover { transform:translateY(-2px); box-shadow:0 12px 32px rgba(123,94,255,.5); }
.btn-ghost {
  background:var(--card); border:1px solid var(--border); color:var(--muted);
}
.btn-ghost:hover { background:rgba(255,255,255,.07); color:var(--text); border-color:var(--bhi); }
.btn-danger { background:rgba(255,79,139,.12); border:1px solid rgba(255,79,139,.25); color:var(--v3); }
.btn-danger:hover { background:rgba(255,79,139,.22); }

/* form elements */
.f-group { margin-bottom:15px; position:relative; }
.f-label { display:block; font-size:11px; font-weight:500; letter-spacing:.09em; text-transform:uppercase; color:var(--muted); margin-bottom:7px; }
.i-wrap  { position:relative; display:flex; align-items:center; }
.i-icon  { position:absolute; left:14px; font-size:16px; pointer-events:none; opacity:.5; }
.f-input {
  width:100%; padding:13px 14px 13px 42px;
  background:rgba(255,255,255,.04); border:1px solid var(--border);
  border-radius:var(--rs); color:var(--text);
  font-family:'DM Sans',sans-serif; font-size:14px;
  outline:none; transition:all .2s;
}
.f-input:focus { border-color:var(--v1); background:rgba(123,94,255,.06); box-shadow:0 0 0 3px rgba(123,94,255,.13); }
.f-input::placeholder { color:rgba(220,220,255,.28); }
.f-input.valid   { border-color:rgba(0,255,178,.5); }
.f-input.invalid { border-color:rgba(255,79,139,.45); }
.f-input.no-icon { padding-left:14px; }
.f-err { font-size:11px; color:var(--v3); margin-top:4px; display:none; }
.f-err.show { display:block; }
.toggle-pw { position:absolute; right:13px; background:none; border:none; color:var(--muted); cursor:pointer; font-size:16px; transition:color .2s; }
.toggle-pw:hover { color:var(--text); }

/* alerts */
.alert { padding:12px 15px; border-radius:var(--rs); font-size:13px; margin-bottom:16px;
  display:flex; align-items:flex-start; gap:9px; animation:fadeUp .3s ease; }
.alert.ok  { background:rgba(0,255,178,.07); border:1px solid rgba(0,255,178,.2); color:var(--v4); }
.alert.err { background:rgba(255,79,139,.07); border:1px solid rgba(255,79,139,.2); color:var(--v3); }
.alert.info{ background:rgba(0,212,255,.07);  border:1px solid rgba(0,212,255,.2);  color:var(--v2); }
.alert a { color:inherit; text-decoration:underline; }

/* modals */
.modal-wrap { display:none; position:fixed; inset:0; z-index:9000;
  background:rgba(0,0,0,.65); backdrop-filter:blur(6px);
  align-items:center; justify-content:center; padding:20px; }
.modal-wrap.open { display:flex; }
.modal { background:#0c0c1e; border:1px solid var(--border); border-radius:22px;
  padding:32px; width:100%; max-width:400px; animation:fadeUp .25s ease; }
.modal h3 { font-family:'Syne',sans-serif; font-size:18px; font-weight:700; margin-bottom:20px; }

/* flash msg from redirect */
.flash-bar { padding:14px 18px; border-radius:var(--rs); font-size:13px; margin-bottom:20px;
  display:flex; align-items:center; gap:10px; }
.flash-bar.ok  { background:rgba(0,255,178,.08); border:1px solid rgba(0,255,178,.22); color:var(--v4); }
.flash-bar.err { background:rgba(255,79,139,.08); border:1px solid rgba(255,79,139,.22); color:var(--v3); }