/* Trendbot Dashboard — 3D UI layer (sharp text, depth without blur) */

@import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@500;700;900&family=Rajdhani:wght@500;600;700&display=swap');

:root {
  --3d-glass: rgba(14, 16, 24, 0.94);
  --3d-glass-border: rgba(212, 175, 55, 0.22);
  --3d-depth: 0 16px 40px rgba(0, 0, 0, 0.45), 0 4px 12px rgba(0, 0, 0, 0.3);
}

/* ---- Global sharp rendering (fixes fuzzy text) ---- */
body.dash-3d-ui {
  font-family: 'Rajdhani', 'Segoe UI', system-ui, sans-serif;
  background: #030508 !important;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

body.dash-3d-ui * {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Override LED/dot-matrix blur from base dashboard.css */
.cc-hero-pnl,
.cc-num-big,
.cc-ring-num,
.cc-winstack-stat,
.cc-market-price,
.cc-last-settle .val,
.cc-stat-box .cc-stat-num,
.cc-wrap .cc-num,
.cc-clock,
.cc-step-ms {
  font-family: 'Orbitron', 'Rajdhani', sans-serif !important;
  font-weight: 700 !important;
  -webkit-font-smoothing: antialiased !important;
  -moz-osx-font-smoothing: grayscale !important;
  text-shadow: none !important;
  letter-spacing: 0.04em !important;
}

.cc-hero-pnl {
  font-size: clamp(2rem, 4.5vw, 3rem) !important;
  color: var(--gold-light) !important;
  font-family: 'Orbitron', 'Rajdhani', 'Segoe UI', sans-serif !important;
}

/* ---- Background scene (subtle, no heavy blur) ---- */
#dash-3d-scene {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}

#dash-3d-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0.35;
}

.dash-orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(32px);
  opacity: 0.22;
  animation: dashOrbFloat 22s ease-in-out infinite;
}

.dash-orb-1 {
  width: 320px;
  height: 320px;
  top: -6%;
  right: -4%;
  background: radial-gradient(circle, rgba(212, 175, 55, 0.5), transparent 70%);
}

.dash-orb-2 {
  width: 260px;
  height: 260px;
  bottom: 8%;
  left: -6%;
  background: radial-gradient(circle, rgba(94, 231, 255, 0.35), transparent 72%);
  animation-delay: -8s;
}

.dash-orb-3 {
  width: 200px;
  height: 200px;
  top: 45%;
  left: 40%;
  background: radial-gradient(circle, rgba(167, 139, 250, 0.3), transparent 74%);
  animation-delay: -14s;
}

.grid-floor {
  position: absolute;
  left: -15%;
  right: -15%;
  bottom: -30%;
  height: 50%;
  transform: rotateX(68deg);
  transform-origin: center top;
  background:
    linear-gradient(rgba(94, 231, 255, 0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(94, 231, 255, 0.05) 1px, transparent 1px);
  background-size: 40px 40px;
  mask-image: linear-gradient(to top, black 15%, transparent 100%);
  opacity: 0.35;
}

@keyframes dashOrbFloat {
  0%, 100% { transform: translate3d(0, 0, 0); }
  50% { transform: translate3d(12px, -10px, 0); }
}

#header-logged-out,
#header-logged-in,
#dashboard-content {
  position: relative;
  z-index: 2;
}

/* ---- Header: solid glass (no backdrop-filter blur) ---- */
#header-logged-in.header {
  margin: 0.75rem 1rem 0;
  border-radius: 16px;
  border: 1px solid var(--3d-glass-border);
  background: var(--3d-glass) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  box-shadow: var(--3d-depth);
}

.brand-copy h1,
.header-left h1 {
  font-family: 'Orbitron', sans-serif !important;
  letter-spacing: 0.12em !important;
  color: var(--gold-light) !important;
  background: none !important;
  -webkit-background-clip: unset !important;
  background-clip: unset !important;
}

.brand-mark {
  animation: none;
}

/* ---- Command center ---- */
.cc-wrap {
  position: relative;
  padding: 0.5rem;
  border-radius: 20px;
  border: 1px solid rgba(212, 175, 55, 0.16);
  background: linear-gradient(160deg, rgba(16, 18, 26, 0.98), rgba(8, 9, 14, 0.99));
  box-shadow: var(--3d-depth);
}

.cc-statusbar {
  border-radius: 12px !important;
  border: 1px solid rgba(212, 175, 55, 0.22) !important;
  background: rgba(12, 12, 14, 0.95) !important;
}

.cc-panel,
.card {
  border-radius: 14px !important;
  border: 1px solid rgba(212, 175, 55, 0.18) !important;
  background: linear-gradient(160deg, rgba(18, 20, 28, 0.98), rgba(10, 11, 16, 0.99)) !important;
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.35) !important;
  transition: box-shadow 0.25s ease, border-color 0.25s ease;
}

.cc-panel:hover,
.card:hover,
.cc-bot-action-card:hover {
  transform: none !important;
  border-color: rgba(212, 175, 55, 0.32) !important;
  box-shadow: 0 14px 36px rgba(0, 0, 0, 0.42), 0 0 0 1px rgba(212, 175, 55, 0.08) !important;
}

.cc-panel-title,
.cc-wrap h3 {
  font-family: 'Orbitron', sans-serif !important;
  letter-spacing: 0.08em !important;
}

/* Hero */
.cc-hero {
  border-radius: 16px !important;
  background: linear-gradient(135deg, rgba(16, 18, 26, 0.99), rgba(9, 10, 14, 0.99)) !important;
  grid-template-columns: minmax(0, 1.35fr) minmax(90px, 0.5fr) minmax(110px, 0.4fr) !important;
  gap: 1rem !important;
  align-items: center !important;
}

.cc-hero::after {
  display: none;
}

/* 3D chip — gentle float only (spin causes blur) */
.cc-hero-3d-chip {
  position: relative;
  width: 96px;
  height: 96px;
  margin: 0 auto;
  animation: chipFloat 5s ease-in-out infinite;
}

.chip-layer {
  position: absolute;
  inset: 0;
  border-radius: 14px;
  border: 1px solid rgba(212, 175, 55, 0.4);
}

.chip-layer-back {
  transform: translateY(4px) scale(0.94);
  background: rgba(80, 60, 10, 0.35);
  filter: none;
}

.chip-layer-mid {
  transform: translateY(2px) scale(0.97);
  background: linear-gradient(135deg, #2a2e3a, #14161e);
}

.chip-layer-front {
  display: grid;
  place-items: center;
  background: linear-gradient(145deg, #f0d060, #c9a227 50%, #8a6910);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.4);
}

.chip-icon {
  font-size: 1.75rem;
  filter: none;
}

@keyframes chipFloat {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-6px); }
}

/* Win ring — flat (no 3D tilt = sharp text) */
.cc-ring-wrap {
  text-align: center;
}

.cc-ring {
  transform: none !important;
  box-shadow: 0 0 0 3px rgba(212, 175, 55, 0.12);
  border: 2px solid rgba(212, 175, 55, 0.35);
}

.cc-ring-inner {
  transform: none !important;
}

/* Bot cards */
.cc-bot-action-card {
  border-radius: 12px !important;
  background: linear-gradient(180deg, rgba(22, 26, 36, 0.98), rgba(12, 14, 20, 0.99)) !important;
  border: 1px solid rgba(212, 175, 55, 0.2) !important;
  box-shadow: 0 6px 0 rgba(0, 0, 0, 0.28), 0 8px 20px rgba(0, 0, 0, 0.3) !important;
}

.cc-bot-action-card strong {
  font-family: 'Orbitron', sans-serif;
  letter-spacing: 0.06em;
}

/* Buttons — crisp 3D edge without transform blur */
button:not(.secondary):not(.danger):not(.cc-setup-toggle) {
  border-radius: 10px !important;
  transform: none !important;
  box-shadow: 0 4px 0 #7a5c0a, 0 6px 16px rgba(212, 175, 55, 0.25) !important;
}

button:not(.secondary):not(.danger):not(.cc-setup-toggle):hover:not(:disabled) {
  transform: translateY(-1px) !important;
  box-shadow: 0 5px 0 #7a5c0a, 0 8px 20px rgba(212, 175, 55, 0.32) !important;
}

button:not(.secondary):not(.danger):not(.cc-setup-toggle):active:not(:disabled) {
  transform: translateY(2px) !important;
  box-shadow: 0 2px 0 #7a5c0a !important;
}

.cc-setup-step {
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

.login-page .auth-form {
  transform: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  background: rgba(14, 14, 18, 0.96) !important;
}

#royal-popup {
  transform: none !important;
  backdrop-filter: none !important;
}

@media (max-width: 1100px) {
  .cc-hero {
    grid-template-columns: minmax(0, 1fr) auto auto !important;
    gap: 0.75rem !important;
  }
}

@media (max-width: 900px) {
  #header-logged-in.header {
    margin: 0.5rem 0.65rem 0 !important;
    padding: 0.75rem 0.85rem !important;
  }
  #dashboard-content.dashboard-shell {
    padding-left: 0.65rem !important;
    padding-right: 0.65rem !important;
  }
  .cc-wrap {
    padding: 0.4rem !important;
    border-radius: 16px !important;
  }
}

@media (max-width: 768px) {
  .cc-hero {
    grid-template-columns: 1fr !important;
    text-align: center !important;
  }
  .cc-hero-3d-chip {
    width: 80px;
    height: 80px;
  }
  .cc-panel,
  .card {
    border-radius: 12px !important;
  }
  .cc-bot-action-card {
    box-shadow: 0 4px 0 rgba(0, 0, 0, 0.28), 0 6px 16px rgba(0, 0, 0, 0.28) !important;
  }
}

@media (max-width: 480px) {
  #header-logged-in.header {
    margin: 0.4rem 0.45rem 0 !important;
    border-radius: 12px !important;
  }
  .brand-copy h1,
  .header-left h1 {
    font-size: 0.95rem !important;
    letter-spacing: 0.08em !important;
  }
  .cc-wrap {
    padding: 0.25rem !important;
    border-radius: 12px !important;
  }
  .cc-statusbar {
    font-size: 0.65rem !important;
    padding: 0.45rem 0.6rem !important;
  }
  .cc-tag {
    font-size: 0.62rem !important;
    padding: 0.15rem 0.4rem !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .dash-orb,
  .cc-hero-3d-chip { animation: none !important; }
}