/* ============================================
   GRIMZ CLOUD PC — Base Stylesheet
   Shared across all pages
   ============================================ */

/* ===== VARIABLES ===== */
:root {
  --bg:#09080f; --bg2:#100e1a; --bg3:#161323; --bg4:#1c1830;
  --accent:#7c5cbf; --accent2:#9b7fe8; --accent3:#5a3fa0;
  --green:#4ade80; --red:#f87171; --yellow:#fbbf24;
  --text:#e4e0f0; --muted:#8a84a0; --border:rgba(124,92,191,0.15);
  --glow:0 0 30px rgba(124,92,191,0.2);
  --glow:0 0 30px rgba(124,92,191,0.2);
}

/* ===== RESET ===== */
*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior:smooth; }

/* ===== GRID BACKGROUND ===== */
body::before {
  content:''; position:fixed; inset:0;
  background-image:
    linear-gradient(rgba(124,92,191,0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(124,92,191,0.04) 1px, transparent 1px);
  background-size:44px 44px;
  pointer-events:none; z-index:0;
}

/* ===== SCANLINE ===== */
.scanline {
  position:fixed; top:0; left:0; right:0; height:1px;
  background:linear-gradient(90deg,transparent,rgba(124,92,191,0.15),transparent);
  animation:scan 6s linear infinite;
  pointer-events:none; z-index:1;
}
@keyframes scan { 0%{transform:translateY(-1px)} 100%{transform:translateY(100vh)} }

/* ===== GLOW ORBS ===== */
.glow-orb { position:fixed; border-radius:50%; pointer-events:none; z-index:0; filter:blur(80px); }
.glow-orb-1 { width:500px; height:500px; background:rgba(124,92,191,0.07); top:-150px; right:-150px; animation:orbFloat 8s ease-in-out infinite; }
.glow-orb-2 { width:400px; height:400px; background:rgba(90,63,160,0.05); bottom:-100px; left:-100px; animation:orbFloat 10s ease-in-out infinite reverse; }
@keyframes orbFloat { 0%,100%{transform:translate(0,0)} 50%{transform:translate(20px,-20px)} }

/* ===== COMMON ANIMATIONS ===== */
@keyframes pulse    { 0%,100%{transform:scale(1);opacity:1} 50%{transform:scale(1.1);opacity:0.7} }
@keyframes blink    { 0%,100%{opacity:1} 50%{opacity:0.3} }
@keyframes float    { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-8px)} }
@keyframes rotateBg { from{transform:rotate(0deg)} to{transform:rotate(360deg)} }
@keyframes pulseGlow{ 0%{box-shadow:0 0 0 0 rgba(74,222,128,0.7)} 70%{box-shadow:0 0 10px 5px rgba(74,222,128,0)} 100%{box-shadow:0 0 0 0 rgba(74,222,128,0)} }
@keyframes fadeIn   { from{opacity:0;transform:translateY(8px)} to{opacity:1;transform:translateY(0)} }

/* ===== TOAST ===== */
.toast {
  position:fixed; bottom:2rem; right:2rem;
  background:var(--bg3); border:1px solid var(--accent);
  color:var(--accent2); font-family:'JetBrains Mono',monospace;
  font-size:0.75rem; letter-spacing:0.1em;
  padding:0.6rem 1.25rem; z-index:9999;
  opacity:0; transform:translateY(10px);
  transition:all 0.3s; pointer-events:none;
}
.toast.show        { opacity:1; transform:translateY(0); }
.toast.toast-success { border-color:rgba(74,222,128,0.5); color:var(--green); }
.toast.toast-warn  { border-color:rgba(251,191,36,0.5); color:var(--yellow); }
.toast.toast-error { border-color:rgba(248,113,113,0.5); color:var(--red); }

/* ===== SCROLLBAR ===== */
::-webkit-scrollbar       { width:5px; height:5px; }
::-webkit-scrollbar-track { background:var(--bg); }
::-webkit-scrollbar-thumb { background:var(--bg4); border-radius:2px; }
::-webkit-scrollbar-thumb:hover { background:var(--accent3); }

/* ===== STATUS DOT ===== */
.status-dot-wrap {
  display:flex; align-items:center; gap:0.5rem;
  font-family:'JetBrains Mono',monospace; font-size:0.65rem;
  color:var(--green); letter-spacing:0.1em;
}
.status-dot-wrap::before {
  content:''; width:7px; height:7px; border-radius:50%;
  background:var(--green); animation:pulseGlow 1.5s infinite; flex-shrink:0;
}

/* ===== DIVIDER ===== */
.divider { height:1px; background:var(--border); margin:1rem 0; }

/* ===== BADGE ===== */
.badge { display:inline-flex; align-items:center; gap:0.4rem; padding:0.3rem 0.75rem; font-family:'JetBrains Mono',monospace; font-size:0.65rem; letter-spacing:0.15em; text-transform:uppercase; }
.badge-online  { background:rgba(74,222,128,0.1); border:1px solid rgba(74,222,128,0.25); color:var(--green); }
.badge-online::before { content:''; width:5px; height:5px; border-radius:50%; background:var(--green); box-shadow:0 0 6px var(--green); animation:blink 1.5s infinite; }
.badge-offline { background:rgba(90,84,112,0.2); border:1px solid var(--border); color:var(--muted); }

/* ===== CLIP-PATH CORNERS (shared utility) ===== */
.clip-corner-sm  { clip-path:polygon(0 0,calc(100% - 8px) 0,100% 8px,100% 100%,0 100%); }
.clip-corner-md  { clip-path:polygon(0 0,calc(100% - 12px) 0,100% 12px,100% 100%,0 100%); }
.clip-corner-lg  { clip-path:polygon(0 0,calc(100% - 16px) 0,100% 16px,100% 100%,0 100%); }
.clip-corner-both-sm { clip-path:polygon(0 0,calc(100% - 8px) 0,100% 8px,100% 100%,8px 100%,0 calc(100% - 8px)); }