@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;700&family=Rajdhani:wght@300;400;500;600;700&display=swap');

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

body.skin-dark{
  --bg:#080c10;--bg2:#0d1117;--bg3:#111820;--bg4:#161e28;
  --border:#1e2d3d;--border2:#243447;
  --accent:#00d4ff;--accent2:#0099cc;
  --green:#00ff9d;--red:#ff3366;--yellow:#ffd700;--orange:#ff8c00;
  --text:#c8d8e8;--text2:#7a9ab8;--text3:#4a6a88;
  --chart-bg:#0d1117;--scanline:rgba(0,212,255,0.012);
}
body.skin-light{
  --bg:#f0f4f8;--bg2:#ffffff;--bg3:#e8eef4;--bg4:#dde5ed;
  --border:#c8d8e8;--border2:#b0c4d8;
  --accent:#0077aa;--accent2:#005588;
  --green:#007744;--red:#cc1144;--yellow:#996600;--orange:#cc5500;
  --text:#1a2a3a;--text2:#3a5a7a;--text3:#7a9ab8;
  --chart-bg:#ffffff;--scanline:rgba(0,0,0,0);
}
body.skin-bloomberg{
  --bg:#0a0a00;--bg2:#111100;--bg3:#1a1a00;--bg4:#222200;
  --border:#333300;--border2:#444400;
  --accent:#ff6600;--accent2:#cc5500;
  --green:#aaff00;--red:#ff2200;--yellow:#ffcc00;--orange:#ff8800;
  --text:#ffeeaa;--text2:#ccaa66;--text3:#886644;
  --chart-bg:#111100;--scanline:rgba(255,102,0,0.012);
}
body.skin-matrix{
  --bg:#000800;--bg2:#001000;--bg3:#001800;--bg4:#002000;
  --border:#003300;--border2:#004400;
  --accent:#00ff41;--accent2:#00cc33;
  --green:#00ff41;--red:#ff0000;--yellow:#ffff00;--orange:#ff8800;
  --text:#00ff41;--text2:#00cc33;--text3:#008822;
  --chart-bg:#001000;--scanline:rgba(0,255,65,0.015);
}

body{
  background:var(--bg);color:var(--text);
  font-family:'Rajdhani',sans-serif;font-size:14px;
  min-height:100vh;overflow:hidden;
  transition:background 0.3s,color 0.3s;
}
body::before{
  content:'';position:fixed;inset:0;
  background:repeating-linear-gradient(0deg,transparent,transparent 2px,var(--scanline) 2px,var(--scanline) 4px);
  pointer-events:none;z-index:9999;
}

/* SCROLLBARS */
::-webkit-scrollbar{width:4px;height:4px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:var(--border2);border-radius:2px}

/* SPINNER */
.spinner{width:18px;height:18px;border:2px solid var(--border2);border-top-color:var(--accent);border-radius:50%;animation:spin 0.8s linear infinite;margin:20px auto}
@keyframes spin{to{transform:rotate(360deg)}}

/* TOAST */
.toast{position:fixed;bottom:20px;right:20px;background:var(--bg4);border:1px solid var(--border2);color:var(--text);font-family:'JetBrains Mono',monospace;font-size:11px;padding:10px 16px;z-index:9999;animation:slideIn 0.3s ease;letter-spacing:1px}
@keyframes slideIn{from{transform:translateY(20px);opacity:0}to{transform:translateY(0);opacity:1}}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:0.3}}

/* VERSION BADGE */
.version-badge{position:fixed;bottom:8px;left:12px;font-family:'JetBrains Mono',monospace;font-size:10px;color:var(--text3);letter-spacing:1px;cursor:pointer;z-index:100;opacity:0.6;transition:opacity 0.2s}
.version-badge:hover{opacity:1;color:var(--accent)}

/* FORMS */
.form-group{margin-bottom:16px}
.form-label{font-family:'JetBrains Mono',monospace;font-size:10px;color:var(--text3);letter-spacing:2px;margin-bottom:6px;display:block}
.form-input{width:100%;background:var(--bg3);border:1px solid var(--border2);color:var(--text);font-family:'JetBrains Mono',monospace;font-size:12px;padding:8px 10px;outline:none;transition:border-color 0.2s}
.form-input:focus{border-color:var(--accent)}
.form-input::placeholder{color:var(--text3)}
.form-select{width:100%;background:var(--bg3);border:1px solid var(--border2);color:var(--text);font-family:'JetBrains Mono',monospace;font-size:12px;padding:8px 10px;outline:none;cursor:pointer}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.form-hint{font-family:'JetBrains Mono',monospace;font-size:10px;color:var(--text3);margin-top:4px}
.section-divider{border:none;border-top:1px solid var(--border);margin:20px 0}

/* BUTTONS */
.btn-primary{background:var(--accent);border:none;color:var(--bg);font-family:'JetBrains Mono',monospace;font-size:11px;font-weight:700;padding:9px 18px;cursor:pointer;letter-spacing:2px;transition:background 0.2s}
.btn-primary:hover{background:var(--accent2)}
.btn-danger{background:none;border:1px solid var(--red);color:var(--red);font-family:'JetBrains Mono',monospace;font-size:11px;padding:8px 14px;cursor:pointer;letter-spacing:1px;transition:all 0.2s}
.btn-danger:hover{background:var(--red);color:var(--bg)}
.btn-secondary{background:none;border:1px solid var(--border2);color:var(--text2);font-family:'JetBrains Mono',monospace;font-size:11px;padding:8px 14px;cursor:pointer;letter-spacing:1px;transition:all 0.2s}
.btn-secondary:hover{border-color:var(--accent);color:var(--accent)}
.btn-warning{background:none;border:1px solid var(--orange);color:var(--orange);font-family:'JetBrains Mono',monospace;font-size:11px;padding:8px 14px;cursor:pointer;letter-spacing:1px;transition:all 0.2s}
.btn-warning:hover{background:var(--orange);color:var(--bg)}

/* AUTH ERRORS/SUCCESS */
.auth-error{font-family:'JetBrains Mono',monospace;font-size:11px;color:var(--red);margin-top:8px;display:none}
.auth-success{font-family:'JetBrains Mono',monospace;font-size:11px;color:var(--green);margin-top:8px;display:none}
