/* ═══════════════════════════════════════
   reality.solution — global styles
═══════════════════════════════════════ */
@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@300;400;500;600;700&family=Space+Grotesk:wght@300;400;500;600;700&display=swap');

:root {
  --bg:    #030712;
  --bg2:   #0f172a;
  --bg3:   #1e293b;
  --bg4:   #334155;
  --border:  rgba(255, 255, 255, 0.06);
  --border2: rgba(255, 255, 255, 0.1);
  --accent:   #6366f1;
  --accent-h: #818cf8;
  --blue:   #3b82f6;
  --purple: #a855f7;
  --green:  #10b981;
  --yellow: #f59e0b;
  --red:    #ef4444;
  --text:   #f9fafb;
  --text2:  #e5e7eb;
  --muted:  #9ca3af;
  --mono:   'JetBrains Mono', monospace;
  --sans:   'Inter', sans-serif;
  --r:  12px;
  --r2: 16px;
}

*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }
html, body { height:100%; }
body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--sans);
  overflow-x: hidden;
  min-height: 100vh;
}

/* scanline overlay */
body::before {
  content: '';
  position: fixed; inset: 0;
  pointer-events: none; z-index: 9999;
  background: repeating-linear-gradient(
    0deg, transparent, transparent 2px,
    rgba(0,0,0,.022) 2px, rgba(0,0,0,.022) 4px
  );
}

/* ── ANIMATIONS ── */
@keyframes fadeUp  { from{opacity:0;transform:translateY(18px)} to{opacity:1;transform:translateY(0)} }
@keyframes fadeIn  { from{opacity:0} to{opacity:1} }
@keyframes slideIn { from{opacity:0;transform:translateX(-12px)} to{opacity:1;transform:translateX(0)} }

/* ── BUTTONS ── */
.btn {
  display: inline-flex; align-items: center; gap: .45rem;
  padding: .48rem 1.15rem; border-radius: var(--r);
  font-size: .83rem; font-weight: 600; font-family: var(--sans);
  cursor: pointer; transition: all .18s; border: none;
  text-decoration: none; white-space: nowrap;
}
.btn-primary  { background:var(--accent); color:#fff; }
.btn-primary:hover { background:var(--accent-h); transform:translateY(-1px); }
.btn-ghost    { background:transparent; color:var(--muted); border:1px solid var(--border2); }
.btn-ghost:hover { color:var(--text); border-color:var(--muted); }
.btn-outline  { background:transparent; color:var(--text); border:1px solid var(--border2); }
.btn-outline:hover { border-color:var(--accent); color:var(--accent); }
.btn-discord  { background:#5865f2; color:#fff; }
.btn-discord:hover { background:#4752c4; }
.btn-green    { background:var(--green); color:#fff; }
.btn-green:hover { opacity:.85; }
.btn-danger   { background:var(--red); color:#fff; }
.btn-danger:hover { opacity:.85; }
.btn-sm { padding:.28rem .65rem; font-size:.72rem; }
.btn-lg { padding:.65rem 1.6rem; font-size:.92rem; }
.btn-full { width:100%; justify-content:center; }

/* ── INPUTS ── */
.inp {
  background:var(--bg3); border:1px solid var(--border2); border-radius:var(--r);
  padding:.55rem .85rem; color:var(--text); font-size:.83rem; font-family:var(--sans);
  outline:none; transition:border-color .2s; width:100%;
}
.inp:focus { border-color:var(--accent); }
.inp::placeholder { color:var(--muted); }

.field { margin-bottom:1.1rem; }
.field label {
  display:block; font-size:.73rem; font-weight:600;
  color:var(--text2); margin-bottom:.4rem; letter-spacing:.03em;
}

/* ── ALERTS ── */
.alert { border-radius:var(--r); padding:.6rem .9rem; font-size:.78rem; margin-bottom:1rem; display:none; }
.alert.show { display:block; }
.alert-err  { background:rgba(239,68,68,.1);  border:1px solid rgba(239,68,68,.3);  color:#f87171; }
.alert-ok   { background:rgba(34,197,94,.1);  border:1px solid rgba(34,197,94,.3);  color:#4ade80; }
.alert-info { background:rgba(59,130,246,.1); border:1px solid rgba(59,130,246,.3); color:#93c5fd; }

/* ── CARD ── */
.card {
  background:var(--bg2); border:1px solid var(--border);
  border-radius:var(--r2); padding:1.5rem;
}

/* ── TOAST ── */
#toast {
  position: fixed; bottom:1.5rem; right:1.5rem;
  background:var(--bg2); border:1px solid var(--border);
  border-radius:var(--r); padding:.75rem 1.1rem;
  font-size:.82rem; display:flex; align-items:center; gap:.6rem;
  box-shadow:0 8px 30px rgba(0,0,0,.5);
  z-index:9000; transform:translateY(20px); opacity:0; transition:all .3s;
  pointer-events:none;
}
#toast.show    { transform:translateY(0); opacity:1; }
#toast.success { border-color:rgba(34,197,94,.4); }
#toast.error   { border-color:rgba(239,68,68,.4); }
#toast.info    { border-color:rgba(59,130,246,.4); }

/* ── MODAL ── */
.modal-overlay {
  position:fixed; inset:0;
  background:rgba(0,0,0,.75); backdrop-filter:blur(5px);
  z-index:500; display:none; align-items:center; justify-content:center; padding:1rem;
}
.modal-overlay.open { display:flex; }
.modal {
  background:var(--bg2); border:1px solid var(--border);
  border-radius:var(--r2); padding:2rem; width:100%; max-width:460px;
  box-shadow:0 12px 60px rgba(0,0,0,.6); animation:fadeUp .25s ease;
}
.modal-title { font-size:1.05rem; font-weight:700; margin-bottom:1.25rem; display:flex; align-items:center; gap:.5rem; }
.modal-actions { display:flex; justify-content:flex-end; gap:.75rem; margin-top:1.5rem; }

/* ── LOGO ── */
.logo { 
    font-size: 1.6rem; 
    font-weight: 850; 
    letter-spacing: -0.05em; 
    cursor: pointer; 
    display: inline-block;
}
.logo span { 
    color: var(--accent); 
    text-transform: uppercase; 
    font-size: 0.85em; 
    font-weight: 900;
}

/* ── PAGE HEADER ── */
.pg-header { margin-bottom:1.75rem; }
.pg-header h2 { font-size:1.3rem; font-weight:700; margin-bottom:.25rem; }
.pg-header p  { font-size:.82rem; color:var(--muted); }

/* ── SECTION TITLE ── */
.section-title { font-size:1rem; font-weight:700; display:flex; align-items:center; gap:.5rem; margin-bottom:1rem; }
.section-title .acc { color:var(--accent); }

/* ── BADGE ── */
.badge {
  background:var(--bg4); color:var(--muted);
  font-size:.62rem; padding:.1rem .4rem; border-radius:10px; font-family:var(--mono);
}

/* ── TOGGLE ── */
.toggle {
  width:38px; height:20px; background:var(--bg3); border-radius:10px;
  cursor:pointer; position:relative; transition:background .2s; flex-shrink:0;
  border:1px solid var(--border2);
}
.toggle::after {
  content:''; position:absolute; width:14px; height:14px;
  background:var(--muted); border-radius:50%; top:2px; left:2px; transition:all .2s;
}
.toggle.on { background:var(--accent); border-color:var(--accent); }
.toggle.on::after { left:20px; background:#fff; }

/* ── MISC ── */
.sep { height:1px; background:var(--border); margin:1rem 0; }
.muted { color:var(--muted); }
.mono  { font-family:var(--mono); }

/* ── CHAT BUBBLE ── */
.chat-bubble {
  position:fixed; bottom:1.5rem; right:1.5rem;
  width:48px; height:48px; background:var(--purple); border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  font-size:1.2rem; cursor:pointer;
  box-shadow:0 4px 20px rgba(168,85,247,.4);
  z-index:400; transition:transform .2s;
}
.chat-bubble:hover { transform:scale(1.1); }

/* ── RESPONSIVE ── */
@media (max-width:700px) {
  .sidebar { display:none !important; }
  .hide-mobile { display:none !important; }
}