@import "../../default/css/app.css";

:root {
  /* BlockZen Cyber-Blue Theme */
  --bg:      #05070a; 
  --surface: #0a0e14;
  --panel:   #0d1520;
  --lift:    #121d2d;
  
  --green:      #00d4ff; /* Electric Cyan */
  --green-glow: rgba(0, 212, 255, 0.4);
  --green-bg:   rgba(0, 212, 255, 0.08);
  
  --blue:       #00d4ff;
  --blue-glow:  rgba(0, 212, 255, 0.3);
  
  --yellow:     #fbbf24;
  --amber:      #f59e0b;
  
  --text:       #e2e8f0;
  --text-1:     #f8fafc;
  --text-2:     #94a3b8;
  --text-3:     #64748b;
  
  --border:     rgba(0, 212, 255, 0.08);
  --border2:    rgba(0, 212, 255, 0.15);
  
  --r-sm: 4px; /* Blockier, more industrial */
  --r-md: 4px;
  --r-lg: 6px;

  --font-hero: 'Bebas Neue', cursive;
}

/* Polished UI Elements */
.card {
    border: 1px solid var(--border2) !important;
    border-top: 3px solid var(--green) !important;
    box-shadow: 0 10px 30px -10px rgba(0,0,0,0.5) !important;
    background: linear-gradient(180deg, #0d1520 0%, #05070a 100%) !important;
    border-radius: var(--r-md) !important;
    transition: transform 0.2s ease, border-color 0.2s ease;
}

.card:hover {
    border-color: var(--green-glow) !important;
}

.btn--primary {
    background: var(--green) !important;
    color: #05070a !important;
    font-weight: 800 !important;
    text-transform: uppercase !important;
    letter-spacing: 1px !important;
    box-shadow: 0 4px 0 #008eb3, 0 8px 15px rgba(0, 212, 255, 0.2) !important;
    border: none !important;
    border-radius: var(--r-sm) !important;
    transition: all 0.1s ease !important;
}

.btn--primary:hover {
    transform: translateY(1px) !important;
    box-shadow: 0 2px 0 #008eb3, 0 4px 8px rgba(0, 212, 255, 0.2) !important;
    filter: brightness(1.1);
}

.nav-btn {
    border-radius: 6px !important;
    margin: 4px 0;
    transition: all 0.2s ease;
}

.nav-btn:hover {
    background: rgba(255,255,255,0.03) !important;
    color: var(--green) !important;
}

.nav-btn.active {
    color: var(--green) !important;
    background: var(--green-bg) !important;
    border-right: 2px solid var(--green) !important;
}

.progress-wrap {
    background: #000 !important;
    border: 1px solid var(--border2) !important;
}

.progress-fill {
    background: linear-gradient(90deg, #008eb3, var(--green)) !important;
    box-shadow: 0 0 10px var(--green-glow);
}

/* Scrollbar Polish */
::-webkit-scrollbar { width: 8px; }
::-webkit-scrollbar-track { background: var(--bg); }
::-webkit-scrollbar-thumb { background: var(--panel); border-radius: 4px; border: 2px solid var(--bg); }
::-webkit-scrollbar-thumb:hover { background: var(--text-3); }

.topbar__logo-text {
    text-shadow: 0 0 10px var(--green-glow);
}

.sidebar-ad, .header-ad, .footer-ad {
    background: var(--bg);
    padding: 10px;
    border-radius: var(--r-md);
}