/* ==========================================================
   BITNEX — Shared Stylesheet
   Loaded by both layouts/guest.blade.php and layouts/app.blade.php
   ========================================================== */

:root{
  --navy:#050A1A;
  --cobalt:#0047FF;
  --cyan:#00E5FF;
  --white:#E8F4FF;
  --muted:rgba(232,244,255,0.45);
  --glass:rgba(8,18,48,0.65);
  --border:rgba(0,229,255,0.12);
  --sidebar-w:260px;
  --topbar-h:64px;
}

/* ---------- RESET ---------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html, body { width: 100%; min-height: 100%; background: var(--navy); overflow-x: hidden; }
a { text-decoration: none; }
button { cursor: pointer; border: none; background: none; }
input, button { font-family: inherit; }
ul { list-style: none; }

body{
  font-family:'Inter',sans-serif;
  color:var(--white);
  position:relative;
}

/* ---------- GUEST LAYOUT CENTERING ---------- */
body.guest-body{
  min-height:100vh;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
}

.guest-content{
  position:relative;
  z-index:2;
  width:100%;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  padding:24px;
}

/* ---------- BACKGROUND BLOBS ---------- */
.bg-blob{
  position:fixed;
  border-radius:50%;
  filter:blur(130px);
  opacity:0.10;
  z-index:0;
  animation:driftBlob 16s ease-in-out infinite alternate;
  pointer-events:none;
}
.blob-1{ width:480px; height:480px; top:-120px; left:-100px; background:#0047FF; }
.blob-2{ width:520px; height:520px; bottom:-160px; right:-120px; background:#00b8d9; animation-delay:-5s; }
.blob-3{ width:420px; height:420px; top:40%; left:60%; background:#4b00ff; animation-delay:-10s; }

@keyframes driftBlob{
  from{ transform:translate(0,0) scale(1); }
  to{ transform:translate(40px,-30px) scale(1.15); }
}

/* ---------- SCANLINES ---------- */
.scanlines{
  position:fixed;
  inset:0;
  z-index:1;
  pointer-events:none;
  background:repeating-linear-gradient(
    to bottom,
    rgba(0,229,255,0.012) 0px,
    rgba(0,229,255,0.012) 1px,
    transparent 1px,
    transparent 3px
  );
}

canvas#stars{
  position:fixed;
  inset:0;
  z-index:0;
  pointer-events:none;
}

/* ---------- BRAND / LOGO DOT ---------- */
.blink-dot{
  width:8px;
  height:8px;
  border-radius:50%;
  background:var(--cyan);
  box-shadow:0 0 8px var(--cyan);
  animation:blinkDot 1.6s ease-in-out infinite;
}

@keyframes blinkDot{
  0%, 100%{ opacity:1; }
  50%{ opacity:0.2; }
}

/* ---------- GLASS CARD (base) ---------- */
.glass-card{
  background:rgba(8,18,48,0.60);
  border:1px solid rgba(0,229,255,0.10);
  border-radius:18px;
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
}

.card-pad{
  padding:24px;
}

.card-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin-bottom:20px;
}

.card-title{
  font-family:'Orbitron',sans-serif;
  font-weight:700;
  font-size:0.8rem;
  color:var(--cyan);
  text-transform:uppercase;
  letter-spacing:0.08em;
}

/* ---------- AVATAR ---------- */
.avatar-circle{
  border-radius:50%;
  background:var(--cobalt);
  border:1.5px solid var(--cyan);
  display:flex;
  align-items:center;
  justify-content:center;
  font-family:'Inter',sans-serif;
  font-weight:600;
  color:var(--white);
  flex-shrink:0;
}

/* ---------- FORM FIELDS (auth pages) ---------- */
.field-group{
  margin-bottom:20px;
}

.field-label{
  display:block;
  font-size:0.78rem;
  font-weight:500;
  color:var(--muted);
  margin-bottom:8px;
  letter-spacing:0.02em;
}

.field-input-wrap{
  position:relative;
}

.field-input{
  width:100%;
  background:rgba(255,255,255,0.04);
  border:1px solid rgba(0,229,255,0.18);
  border-radius:10px;
  padding:13px 16px;
  color:var(--white);
  font-size:0.9rem;
  outline:none;
  transition:box-shadow 0.2s ease, border-color 0.2s ease;
}

.field-input::placeholder{
  color:var(--muted);
}

.field-input:focus{
  box-shadow:0 0 0 2px rgba(0,229,255,0.28);
  border-color:rgba(0,229,255,0.3);
}

.field-input.has-toggle{
  padding-right:46px;
}

.toggle-eye{
  position:absolute;
  right:14px;
  top:50%;
  transform:translateY(-50%);
  color:var(--muted);
  display:flex;
  align-items:center;
  justify-content:center;
  padding:2px;
}

.toggle-eye:hover{
  color:var(--cyan);
}

.toggle-eye svg{
  width:18px;
  height:18px;
  stroke:currentColor;
  fill:none;
  stroke-width:1.5;
}

/* ---------- BUTTONS ---------- */
.btn-primary{
  width:100%;
  background:linear-gradient(135deg, var(--cobalt), var(--cyan));
  border-radius:12px;
  padding:14px;
  color:var(--white);
  font-family:'Orbitron',sans-serif;
  font-weight:700;
  letter-spacing:0.1em;
  font-size:0.8rem;
  text-transform:uppercase;
  transition:filter 0.25s ease, transform 0.25s ease;
}

.btn-primary:hover{
  filter:brightness(1.15);
  transform:translateY(-2px);
}

/* ---------- BADGES ---------- */
.trend-badge{
  font-size:0.72rem;
  font-weight:600;
  padding:4px 10px;
  border-radius:100px;
}
.trend-up{ background:rgba(0,255,136,0.10); color:#00ff88; }
.trend-down{ background:rgba(255,107,107,0.10); color:#ff6b6b; }

.type-badge{
  font-size:0.75rem;
  font-weight:500;
  padding:3px 12px;
  border-radius:100px;
}
.type-buy{ background:rgba(0,229,255,0.10); color:var(--cyan); }
.type-sell{ background:rgba(255,107,107,0.10); color:#ff6b6b; }

.status-cell{
  display:flex;
  align-items:center;
  gap:7px;
}
.status-dot{
  width:6px;
  height:6px;
  border-radius:50%;
  flex-shrink:0;
}
.status-completed{ color:#00ff88; }
.status-completed .status-dot{ background:#00ff88; }
.status-pending{ color:#FFB800; }
.status-pending .status-dot{ background:#FFB800; }
.status-failed{ color:#ff6b6b; }
.status-failed .status-dot{ background:#ff6b6b; }

/* ---------- SHARED ANIMATIONS ---------- */
@keyframes fadeInUp{
  from{ opacity:0; transform:translateY(20px); }
  to{ opacity:1; transform:translateY(0); }
}

/* ---------- REDUCED MOTION ---------- */
@media (prefers-reduced-motion: reduce){
  .bg-blob{ animation:none; }
  .blink-dot{ animation:none; }
}