/* ============================================================
   YourLife RP — Site Vitrine | global.css
   ============================================================ */

:root {
  --c1:   #4bd6ff;
  --c2:   #8a4bff;
  --c3:   #ff7b00;
  --c4:   #ffd000;
  --grad: linear-gradient(90deg, #4bd6ff, #8a4bff, #ff7b00, #ffd000);
  --bg:   #050509;
  --panel: rgba(20,20,30,.65);
  --border: rgba(255,255,255,.07);
}

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

html { scroll-behavior: smooth; }

body {
  min-height: 100vh;
  font-family: 'Orbitron', sans-serif;
  background: radial-gradient(circle at top, #0d1b3f, #050509);
  color: white;
  overflow-x: hidden;
}

/* ── BACKGROUND ── */
.bg-grid {
  position: fixed; inset:0; z-index:0;
  background-image:
    linear-gradient(rgba(75,214,255,.022) 1px, transparent 1px),
    linear-gradient(90deg, rgba(75,214,255,.022) 1px, transparent 1px);
  background-size: 60px 60px;
  animation: gridMove 28s linear infinite;
  pointer-events: none;
}
@keyframes gridMove { from{background-position:0 0} to{background-position:60px 60px} }

.bg-overlay {
  position: fixed; inset:0; z-index:1; pointer-events:none;
  background:
    radial-gradient(ellipse 70% 55% at 50% 0%,  rgba(138,75,255,.12) 0%, transparent 65%),
    radial-gradient(ellipse 45% 40% at 85% 85%, rgba(255,123,0,.07)  0%, transparent 55%),
    radial-gradient(ellipse 45% 40% at 15% 85%, rgba(75,214,255,.07) 0%, transparent 55%);
}

.orb { position:fixed; border-radius:50%; filter:blur(90px); animation:orbFloat ease-in-out infinite alternate; z-index:0; pointer-events:none; }
.orb-1 { width:520px; height:520px; top:-180px; left:-120px; background:radial-gradient(circle,rgba(138,75,255,.12) 0%,transparent 70%); animation-duration:9s; }
.orb-2 { width:420px; height:420px; bottom:-120px; right:-100px; background:radial-gradient(circle,rgba(75,214,255,.09) 0%,transparent 70%); animation-duration:11s; }
.orb-3 { width:300px; height:300px; bottom:25%; left:35%; background:radial-gradient(circle,rgba(255,123,0,.08) 0%,transparent 70%); animation-duration:7s; }
@keyframes orbFloat { from{transform:translate(0,0) scale(1)} to{transform:translate(28px,38px) scale(1.08)} }

.particles { position:fixed; inset:0; z-index:1; pointer-events:none; }
.particle  { position:absolute; border-radius:50%; animation:pFloat linear infinite; opacity:0; }
@keyframes pFloat { 0%{transform:translateY(100vh);opacity:0} 8%{opacity:1} 90%{opacity:.3} 100%{transform:translateY(-8vh);opacity:0} }

.corner { position:fixed; width:44px; height:44px; z-index:20; pointer-events:none; opacity:.4; }
.c-tl { top:18px; left:18px;   border-top:1px solid var(--c1); border-left:1px solid var(--c1); }
.c-tr { top:18px; right:18px;  border-top:1px solid var(--c2); border-right:1px solid var(--c2); }
.c-bl { bottom:18px; left:18px;  border-bottom:1px solid var(--c3); border-left:1px solid var(--c3); }
.c-br { bottom:18px; right:18px; border-bottom:1px solid var(--c4); border-right:1px solid var(--c4); }

/* ── NAVBAR ── */
.navbar {
  position: fixed; top:0; left:0; right:0; z-index:100;
  display: flex; align-items:center; justify-content:space-between;
  padding: 0 52px;
  height: 70px;
  background: rgba(5,5,9,.8);
  backdrop-filter: blur(16px);
  border-bottom: 1px solid var(--border);
}

.nav-brand { display:flex; align-items:baseline; gap:6px; position:relative; }
.nav-logo {
  font-size: 24px; font-weight:700; letter-spacing:3px;
  background: var(--grad); background-size:300% 100%;
  -webkit-background-clip:text; -webkit-text-fill-color:transparent;
  animation: gradShift 5s linear infinite;
  position:relative; z-index:1;
}
.nav-logo-glow {
  position:absolute; top:0; left:0;
  font-size:24px; font-weight:700; letter-spacing:3px;
  background: var(--grad); background-size:300% 100%;
  -webkit-background-clip:text; -webkit-text-fill-color:transparent;
  filter:blur(12px); opacity:.5; z-index:0;
  animation: gradShift 5s linear infinite;
}
.nav-sub {
  font-family:'Rajdhani',sans-serif; font-size:11px; letter-spacing:4px;
  color:rgba(255,255,255,.35); text-transform:uppercase;
}
.nav-links { display:flex; gap:4px; }
.nav-link {
  padding:8px 18px; border-radius:6px;
  font-size:11px; letter-spacing:2px; text-transform:uppercase;
  text-decoration:none; color:rgba(255,255,255,.45);
  transition:all .2s;
}
.nav-link:hover, .nav-link.active {
  color:white; background:rgba(255,255,255,.06);
}
.nav-link.active { color:var(--c1); }

.btn-nav {
  display:inline-flex; align-items:center;
  padding:9px 22px; border-radius:7px; border:none; cursor:pointer;
  font-family:'Orbitron',sans-serif; font-size:10px; font-weight:600; letter-spacing:2px; text-transform:uppercase;
  color:white; text-decoration:none;
  background: linear-gradient(90deg,var(--c1),var(--c2));
  box-shadow:0 0 12px rgba(75,214,255,.3);
  transition:transform .2s, box-shadow .2s;
}
.btn-nav:hover { transform:scale(1.04); box-shadow:0 0 20px rgba(75,214,255,.5); }

/* ── UTILITY ── */
.grad-text {
  background: var(--grad); background-size:300% 100%;
  -webkit-background-clip:text; -webkit-text-fill-color:transparent;
  animation: gradShift 5s linear infinite;
}
@keyframes gradShift { 0%{background-position:0% 50%} 50%{background-position:100% 50%} 100%{background-position:0% 50%} }

.btn-primary {
  display:inline-flex; align-items:center; gap:8px;
  padding:14px 32px; border-radius:8px; border:none; cursor:pointer;
  font-family:'Orbitron',sans-serif; font-size:11px; font-weight:600; letter-spacing:2px; text-transform:uppercase;
  color:white; text-decoration:none;
  background: linear-gradient(90deg,var(--c1),var(--c2));
  box-shadow:0 0 14px rgba(75,214,255,.35), 0 0 28px rgba(138,75,255,.2);
  transition:transform .25s, box-shadow .25s;
}
.btn-primary:hover { transform:scale(1.04); box-shadow:0 0 24px rgba(75,214,255,.55),0 0 45px rgba(138,75,255,.35); }

.btn-ghost {
  display:inline-flex; align-items:center; gap:8px;
  padding:13px 28px; border-radius:8px; cursor:pointer;
  font-family:'Orbitron',sans-serif; font-size:11px; font-weight:600; letter-spacing:2px; text-transform:uppercase;
  color:rgba(255,255,255,.55); text-decoration:none;
  background:transparent; border:1px solid rgba(255,255,255,.12);
  transition:all .25s;
}
.btn-ghost:hover { border-color:rgba(75,214,255,.4); color:white; box-shadow:0 0 14px rgba(75,214,255,.15); }

.btn-discord-login {
  display:inline-flex; align-items:center; gap:10px;
  padding:15px 36px; border-radius:8px; border:none; cursor:pointer;
  font-family:'Orbitron',sans-serif; font-size:11px; font-weight:600; letter-spacing:2px; text-transform:uppercase;
  color:white;
  background: linear-gradient(90deg,var(--c1),var(--c2));
  box-shadow:0 0 12px rgba(75,214,255,.4),0 0 28px rgba(138,75,255,.25);
  transition:transform .25s, box-shadow .25s;
}
.btn-discord-login:hover { transform:scale(1.05); box-shadow:0 0 22px rgba(75,214,255,.6),0 0 45px rgba(138,75,255,.4); }

/* ── CARD ── */
.card {
  background: var(--panel);
  border-radius:15px;
  border:1px solid var(--border);
  box-shadow:0 0 30px rgba(138,75,255,.2);
  padding:40px;
  transition: box-shadow 2.5s ease, border-color 2.5s ease;
}
.card-header { display:flex; align-items:flex-start; gap:18px; margin-bottom:32px; }
.card-icon {
  width:48px; height:48px; border-radius:10px; flex-shrink:0;
  display:flex; align-items:center; justify-content:center;
  font-size:22px;
  background:rgba(75,214,255,.08); border:1px solid rgba(75,214,255,.15);
}
.card-title { font-size:18px; font-weight:700; letter-spacing:2px; color:white; margin-bottom:5px; }
.card-desc { font-family:'Rajdhani',sans-serif; font-size:14px; color:rgba(255,255,255,.45); letter-spacing:1px; }

/* ── PAGE HEADER ── */
.page-header {
  position:relative; z-index:10;
  text-align:center;
  padding: 120px 20px 48px;
}
.page-eyebrow {
  font-family:'Rajdhani',sans-serif; font-size:12px; letter-spacing:6px; text-transform:uppercase;
  color:var(--c1); margin-bottom:12px; opacity:.8;
}
.page-title { font-size:42px; font-weight:900; letter-spacing:4px; line-height:1.1; margin-bottom:16px; }
.page-sub {
  font-family:'Rajdhani',sans-serif; font-size:15px; color:rgba(255,255,255,.45);
  max-width:560px; margin:0 auto; letter-spacing:1px; line-height:1.7;
}

/* ── DIVIDER ── */
.divider { display:flex; align-items:center; gap:14px; }
.divider-line { flex:1; height:1px; background:linear-gradient(90deg,transparent,rgba(138,75,255,.45),transparent); }
.divider-gem { width:6px; height:6px; transform:rotate(45deg); background:var(--grad); background-size:300% 100%; animation:gradShift 5s linear infinite; box-shadow:0 0 8px rgba(138,75,255,.5); }

/* ── FOOTER ── */
.footer {
  position:relative; z-index:10;
  display:flex; flex-direction:column; align-items:center; gap:16px;
  padding:40px 52px;
  margin-top:80px;
  border-top:1px solid var(--border);
}
.footer-brand { display:flex; flex-direction:column; align-items:center; gap:4px; }
.footer-links { display:flex; gap:28px; }
.footer-links a { font-family:'Rajdhani',sans-serif; font-size:12px; letter-spacing:2px; text-transform:uppercase; color:rgba(255,255,255,.35); text-decoration:none; transition:color .2s; }
.footer-links a:hover { color:var(--c1); }
.footer-copy { font-family:'Rajdhani',sans-serif; font-size:10px; letter-spacing:3px; text-transform:uppercase; color:rgba(255,255,255,.2); }

/* ── FORM ── */
.field { display:flex; flex-direction:column; gap:7px; }
.field.full { grid-column:1/-1; }
.field label {
  font-size:10px; letter-spacing:3px; text-transform:uppercase;
  color:rgba(255,255,255,.5);
}
.required { color:var(--c3); }
.field input, .field select, .field textarea {
  background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.1);
  border-radius:8px;
  padding:12px 16px;
  color:white;
  font-family:'Rajdhani',sans-serif; font-size:15px; letter-spacing:1px;
  outline:none;
  transition:border-color .2s, box-shadow .2s;
  resize:vertical;
}
.field input:focus, .field select:focus, .field textarea:focus {
  border-color:rgba(75,214,255,.45);
  box-shadow:0 0 12px rgba(75,214,255,.12);
}
.field input::placeholder, .field textarea::placeholder { color:rgba(255,255,255,.2); }
.field select option { background:#0d0d18; }
.field-hint { font-family:'Rajdhani',sans-serif; font-size:12px; color:rgba(255,255,255,.3); letter-spacing:1px; }

.form-grid { display:grid; grid-template-columns:1fr 1fr; gap:22px; }

.form-actions { display:flex; justify-content:space-between; align-items:center; margin-top:32px; padding-top:24px; border-top:1px solid var(--border); }

/* ── BADGE ── */
.badge { display:inline-block; padding:6px 16px; border-radius:30px; background:linear-gradient(90deg,var(--c3),var(--c4)); color:black; font-size:10px; font-weight:700; letter-spacing:3px; text-transform:uppercase; }

/* ── RADIO / CHECKBOX ── */
.radio-group { display:flex; flex-direction:column; gap:10px; }
.radio-opt, .checkbox-opt {
  display:flex; align-items:flex-start; gap:12px; cursor:pointer;
  font-family:'Rajdhani',sans-serif; font-size:14px; color:rgba(255,255,255,.7); letter-spacing:1px;
}
.radio-opt input, .checkbox-opt input { margin-top:3px; accent-color:var(--c1); cursor:pointer; }

/* ── TAGS INPUT ── */
.tags-input {
  display:flex; flex-wrap:wrap; gap:8px;
  background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.1);
  border-radius:8px; padding:10px 12px;
  min-height:48px;
  transition:border-color .2s;
}
.tags-input:focus-within { border-color:rgba(75,214,255,.45); }
.tags-input input { background:transparent; border:none; outline:none; color:white; font-family:'Rajdhani',sans-serif; font-size:15px; flex:1; min-width:140px; }
.tag {
  display:inline-flex; align-items:center; gap:6px;
  padding:4px 12px; border-radius:20px;
  background:rgba(75,214,255,.12); border:1px solid rgba(75,214,255,.25);
  font-family:'Rajdhani',sans-serif; font-size:13px; color:var(--c1);
}
.tag-remove { cursor:pointer; opacity:.6; font-size:14px; line-height:1; }
.tag-remove:hover { opacity:1; }

/* ── CHAR COUNTER ── */
.char-counter { font-family:'Rajdhani',sans-serif; font-size:12px; color:rgba(255,255,255,.3); text-align:right; letter-spacing:1px; }

/* ── NO DATA ── */
.no-data { text-align:center; padding:48px 20px; font-family:'Rajdhani',sans-serif; font-size:15px; color:rgba(255,255,255,.4); letter-spacing:1px; }

/* ── TOGGLE ── */
.toggle {
  width:44px; height:24px; border-radius:12px; background:rgba(255,255,255,.1);
  position:relative; cursor:pointer; flex-shrink:0; transition:background .3s;
}
.toggle::after { content:''; position:absolute; top:3px; left:3px; width:18px; height:18px; border-radius:50%; background:rgba(255,255,255,.4); transition:all .3s; }
.toggle.active { background:linear-gradient(90deg,var(--c1),var(--c2)); }
.toggle.active::after { left:23px; background:white; }

/* Scrollbar */
::-webkit-scrollbar { width:5px; }
::-webkit-scrollbar-track { background:transparent; }
::-webkit-scrollbar-thumb { background:rgba(138,75,255,.4); border-radius:3px; }