/* ==========================================================================
   CCBE.SPACE CYBERPUNK HUD DESIGN SYSTEM
   Fiel al portal oficial ccbe.space · Star Citizen Corporate Aesthetic
   ========================================================================== */

/* Self-contained: no third-party requests on the login page. */
* { box-sizing: border-box; }
body { margin: 0; background: radial-gradient(ellipse at 50% 30%, #042331 0%, #020a12 42%, #000 100%); color: #eafaff; font-family: 'Segoe UI', sans-serif; min-height: 100vh; }
[hidden] { display: none !important; }
a { color: inherit; text-decoration: none; }
button:disabled { opacity: .5; cursor: not-allowed !important; }
:focus-visible { outline: 2px solid #fff; outline-offset: 4px; }
.login-input { padding-left: 14px !important; }
#password { padding-right: 72px; }
.gateway-note { text-align: center; font-size: .8rem; line-height: 1.6; color: #add5dc; margin: 22px 0 0; }
.gateway-note.subdued { color: #89a6af; margin-top: 8px; }
.login-divider { text-align: center; font-size: .75rem; color: #89a6af; margin: 22px 0 14px; }
.migration-note { max-width: 820px; margin: 32px auto; padding: 18px; border: 1px solid #164955; }
.hub-apps-grid { grid-template-columns: repeat(auto-fit,minmax(min(100%,300px),1fr)) !important; }
.crt-overlay { opacity: .25; }
.crt-overlay::after { animation: none !important; }
[aria-disabled="true"] { cursor: not-allowed; opacity: .6; }
@media (max-width: 520px) { .login-hud-card { padding: 28px 22px !important; } .login-main-title { font-size: .95rem !important; } .hub-welcome-banner h2 { font-size: 1.3rem !important; } }
@media (prefers-reduced-motion: reduce) { *,*::before,*::after { animation: none !important; transition: none !important; } }

:root {
  --ccbe-cyan: #06b6d4;
  --ccbe-cyan-glow: rgba(34, 211, 238, 0.5);
  --ccbe-cyan-bright: #22d3ee;
  --ccbe-cyan-dark: #083344;
  --ccbe-dark: #000000;
  --ccbe-void: #020607;
  --ccbe-surface: rgba(2, 6, 7, 0.92);
  --ccbe-white: #ffffff;
  --ccbe-signal: #61f5b0;
  --ccbe-amber: #f59e0b;
  --ccbe-red: #ef4444;

  --ccbe-font-main: 'Orbitron', sans-serif;
  --ccbe-font-tech: 'Michroma', sans-serif;
  --ccbe-font-body: 'Rajdhani', sans-serif;
  --ccbe-font-mono: 'Courier New', monospace;

  --ccbe-neon-shadow: 0 0 10px var(--ccbe-cyan-glow), 0 0 20px var(--ccbe-cyan-glow), 0 0 30px var(--ccbe-cyan);
  --ccbe-glow-red: 0 0 15px rgba(239, 68, 68, 0.4);
  --ccbe-glow-amber: 0 0 15px rgba(245, 158, 11, 0.4);
}

/* ==========================================================================
   CRT SCREEN & SPACE AMBIENCE (FROM CCBE.SPACE)
   ========================================================================== */

.crt-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(rgba(18, 16, 16, 0) 50%, rgba(0, 0, 0, 0.25) 50%), 
              linear-gradient(90deg, rgba(255, 0, 0, 0.04), rgba(0, 255, 0, 0.02), rgba(0, 0, 255, 0.04));
  background-size: 100% 4px, 6px 100%;
  z-index: 99999;
  pointer-events: none;
}

.crt-overlay::after {
  content: " ";
  display: block;
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  background: rgba(18, 16, 16, 0.06);
  opacity: 0;
  z-index: 99999;
  pointer-events: none;
  animation: crt-flicker 0.15s infinite;
}

@keyframes crt-flicker {
  0% { opacity: 0.18; }
  50% { opacity: 0.12; }
  100% { opacity: 0.18; }
}

.bg-grid {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: 
      linear-gradient(rgba(6, 182, 212, 0.04) 1px, transparent 1px),
      linear-gradient(90deg, rgba(6, 182, 212, 0.04) 1px, transparent 1px);
  background-size: 45px 45px;
  z-index: -2;
  pointer-events: none;
}

#star-canvas {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -3;
  background: radial-gradient(circle at center, #020a12 0%, #000000 100%);
}

/* ==========================================================================
   HUD CORNER MARKERS & SOUND TOGGLE
   ========================================================================== */

.ccbe-hud-label {
  font-family: var(--ccbe-font-mono);
  font-size: 0.68rem;
  color: var(--ccbe-cyan);
  opacity: 0.75;
  letter-spacing: 2px;
  text-transform: uppercase;
  position: fixed;
  z-index: 100;
  pointer-events: none;
  background: rgba(0, 10, 14, 0.65);
  padding: 4px 8px;
}

.hud-top-left {
  top: 14px;
  left: 18px;
  border-top: 1px solid var(--ccbe-cyan);
  border-left: 1px solid var(--ccbe-cyan);
}

.hud-top-right {
  top: 14px;
  right: 18px;
  border-top: 1px solid var(--ccbe-cyan);
  border-right: 1px solid var(--ccbe-cyan);
}

.hud-bottom-left {
  bottom: 14px;
  left: 18px;
  border-bottom: 1px solid var(--ccbe-cyan);
  border-left: 1px solid var(--ccbe-cyan);
}

.hud-bottom-right {
  bottom: 14px;
  right: 18px;
  border-bottom: 1px solid var(--ccbe-cyan);
  border-right: 1px solid var(--ccbe-cyan);
}

.hud-sound-btn {
  position: fixed;
  top: 14px;
  right: 240px;
  z-index: 101;
  background: rgba(0, 10, 14, 0.85);
  border: 1px solid var(--ccbe-cyan);
  color: var(--ccbe-cyan-bright);
  font-family: var(--ccbe-font-tech);
  font-size: 0.65rem;
  padding: 6px 12px;
  cursor: pointer;
  letter-spacing: 1px;
  transition: all 0.3s ease;
  clip-path: polygon(0 0, 90% 0, 100% 30%, 100% 100%, 10% 100%, 0 70%);
}

.hud-sound-btn:hover {
  background: var(--ccbe-cyan);
  color: #000;
  box-shadow: 0 0 15px var(--ccbe-cyan-glow);
}

/* ==========================================================================
   VIEW SWITCHING ARCHITECTURE
   ========================================================================== */

.view-container {
  display: none;
  opacity: 0;
  transition: opacity 0.35s ease;
}

.view-container.active {
  display: block;
  opacity: 1;
}

/* ==========================================================================
   VIEW 1: PUBLIC GATEWAY / LOGIN ONLY (ccbe.space style)
   ========================================================================== */

#view-login {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px 20px;
  position: relative;
  z-index: 10;
}

.login-hud-card {
  width: 100%;
  max-width: 480px;
  background: rgba(2, 8, 14, 0.94);
  border: 1px solid var(--ccbe-cyan);
  box-shadow: 0 0 35px rgba(6, 182, 212, 0.28), inset 0 0 25px rgba(6, 182, 212, 0.04);
  clip-path: polygon(0 0, 95% 0, 100% 5%, 100% 100%, 5% 100%, 0 95%);
  padding: 36px 32px;
  position: relative;
  backdrop-filter: blur(12px);
  animation: cardEntrance 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes cardEntrance {
  from { opacity: 0; transform: scale(0.96) translateY(20px); }
  to { opacity: 1; transform: scale(1) translateY(0); }
}

.login-brand-header {
  text-align: center;
  margin-bottom: 24px;
}

.login-holo-logo {
  width: 82px;
  height: 82px;
  object-fit: contain;
  margin: 0 auto 14px auto;
  display: block;
  filter: drop-shadow(0 0 16px var(--ccbe-cyan-glow));
  animation: logoPulse 4s ease-in-out infinite alternate;
}

@keyframes logoPulse {
  0% { transform: scale(1); filter: drop-shadow(0 0 12px var(--ccbe-cyan-glow)); }
  100% { transform: scale(1.05); filter: drop-shadow(0 0 24px var(--ccbe-cyan-bright)); }
}

.login-main-title {
  font-family: var(--ccbe-font-main);
  font-size: 1.15rem;
  font-weight: 700;
  letter-spacing: 3px;
  color: var(--ccbe-white);
  text-transform: uppercase;
  text-shadow: var(--ccbe-neon-shadow);
  margin-bottom: 6px;
}

.login-sub-protocol {
  font-family: var(--ccbe-font-tech);
  font-size: 0.68rem;
  color: var(--ccbe-cyan-bright);
  letter-spacing: 2px;
  text-transform: uppercase;
  opacity: 0.85;
}

/* Form Groups & Inputs */
.login-form-group {
  margin-bottom: 18px;
  position: relative;
}

.login-label {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-family: var(--ccbe-font-tech);
  font-size: 0.72rem;
  color: var(--ccbe-cyan-bright);
  letter-spacing: 1.5px;
  text-transform: uppercase;
  margin-bottom: 7px;
}

.login-input-wrapper {
  position: relative;
  display: flex;
  align-items: center;
}

.login-input-icon {
  position: absolute;
  left: 12px;
  color: var(--ccbe-cyan);
  font-size: 0.95rem;
  pointer-events: none;
  opacity: 0.8;
}

.login-input {
  width: 100%;
  background: rgba(0, 14, 22, 0.85);
  border: 1px solid rgba(6, 182, 212, 0.4);
  color: #fff;
  font-family: var(--ccbe-font-tech);
  font-size: 0.88rem;
  padding: 12px 14px 12px 38px;
  border-radius: 0;
  outline: none;
  transition: all 0.25s ease;
  letter-spacing: 1px;
}

.login-input:focus {
  border-color: var(--ccbe-cyan-bright);
  box-shadow: 0 0 16px rgba(34, 211, 238, 0.35);
  background: rgba(0, 20, 32, 0.95);
}

.login-pw-toggle {
  position: absolute;
  right: 10px;
  background: transparent;
  border: none;
  color: var(--ccbe-cyan);
  cursor: pointer;
  padding: 6px;
  font-size: 0.95rem;
  outline: none;
  transition: color 0.2s;
}

.login-pw-toggle:hover {
  color: var(--ccbe-white);
}

/* Tactical CAPTCHA Box */
.captcha-container {
  background: rgba(0, 10, 16, 0.9);
  border: 1px solid rgba(6, 182, 212, 0.35);
  padding: 10px;
  margin-bottom: 18px;
  clip-path: polygon(0 0, 97% 0, 100% 8%, 100% 100%, 3% 100%, 0 92%);
  transition: all 0.3s ease;
}

.captcha-container.active-warning {
  border-color: rgba(239, 68, 68, 0.6);
  box-shadow: 0 0 16px rgba(239, 68, 68, 0.25);
  animation: captcha-pulse 2.5s infinite ease-in-out;
}

@keyframes captcha-pulse {
  0%, 100% { border-color: rgba(239, 68, 68, 0.6); }
  50% { border-color: rgba(245, 158, 11, 0.8); }
}

.captcha-row {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 10px;
}

.captcha-img-box {
  flex: 1;
  background: #000;
  border: 1px solid rgba(6, 182, 212, 0.4);
  height: 52px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  position: relative;
}

.captcha-img-box img {
  max-height: 100%;
  width: 100%;
  object-fit: cover;
  display: block;
}

.captcha-refresh-btn {
  background: rgba(6, 182, 212, 0.12);
  border: 1px solid var(--ccbe-cyan);
  color: var(--ccbe-cyan-bright);
  font-family: var(--ccbe-font-mono);
  font-size: 0.72rem;
  padding: 10px 14px;
  cursor: pointer;
  text-transform: uppercase;
  letter-spacing: 1px;
  transition: all 0.25s ease;
  white-space: nowrap;
}

.captcha-refresh-btn:hover {
  background: var(--ccbe-cyan);
  color: #000;
  box-shadow: 0 0 14px var(--ccbe-cyan-glow);
}

.captcha-input-field {
  width: 100%;
  background: rgba(0, 14, 22, 0.85);
  border: 1px solid rgba(6, 182, 212, 0.4);
  color: var(--ccbe-cyan-bright);
  font-family: var(--ccbe-font-mono);
  font-size: 0.95rem;
  letter-spacing: 4px;
  text-transform: uppercase;
  text-align: center;
  padding: 10px;
  outline: none;
}

.captcha-input-field:focus {
  border-color: var(--ccbe-cyan-bright);
  box-shadow: 0 0 14px var(--ccbe-cyan-glow);
}

/* Futuristic Submit Button (ccbe.space style) */
.btn-ccbe-scifi {
  width: 100%;
  display: block;
  background: linear-gradient(135deg, rgba(6, 182, 212, 0.2) 0%, rgba(0, 0, 0, 0.9) 100%) !important;
  border: 1px solid var(--ccbe-cyan) !important;
  color: var(--ccbe-white) !important;
  padding: 15px 24px !important;
  font-family: var(--ccbe-font-tech) !important;
  font-size: 0.82rem !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 3px !important;
  cursor: pointer !important;
  transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important;
  position: relative !important;
  overflow: hidden !important;
  clip-path: polygon(8% 0, 100% 0, 100% 75%, 92% 100%, 0 100%, 0 25%) !important;
  box-shadow: 0 0 15px var(--ccbe-cyan-glow) !important;
  margin-top: 8px;
}

.btn-ccbe-scifi::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 2px;
  background: var(--ccbe-cyan-bright);
  animation: scanline 2.5s linear infinite;
  opacity: 0.7;
}

@keyframes scanline {
  0% { left: -100%; }
  100% { left: 100%; }
}

.btn-ccbe-scifi:hover {
  background: var(--ccbe-cyan) !important;
  color: #000 !important;
  box-shadow: 0 0 35px var(--ccbe-cyan-bright) !important;
  transform: translateY(-2px);
  letter-spacing: 4px !important;
}

.btn-ccbe-scifi:active {
  transform: translateY(0);
}

/* Secondary Actions */
.login-actions-row {
  display: flex;
  justify-content: space-between;
  margin-top: 18px;
  padding-top: 14px;
  border-top: 1px solid rgba(6, 182, 212, 0.2);
}

.login-link-btn {
  background: transparent;
  border: none;
  color: rgba(223, 251, 255, 0.7);
  font-family: var(--ccbe-font-tech);
  font-size: 0.68rem;
  letter-spacing: 1px;
  cursor: pointer;
  text-transform: uppercase;
  transition: color 0.2s, text-shadow 0.2s;
  padding: 4px 6px;
}

.login-link-btn:hover {
  color: var(--ccbe-cyan-bright);
  text-shadow: 0 0 8px var(--ccbe-cyan-glow);
}

/* Alert Boxes in Login */
.login-alert {
  padding: 10px 14px;
  margin-bottom: 16px;
  font-family: var(--ccbe-font-tech);
  font-size: 0.74rem;
  letter-spacing: 1px;
  line-height: 1.4;
  display: none;
  animation: fadeIn 0.3s ease;
}

.login-alert.danger {
  display: block;
  background: rgba(239, 68, 68, 0.15);
  border: 1px solid var(--ccbe-red);
  color: #fca5a5;
  box-shadow: var(--ccbe-glow-red);
}

.login-alert.success {
  display: block;
  background: rgba(16, 185, 129, 0.15);
  border: 1px solid #10b981;
  color: #6ee7b7;
}

.login-alert.warning {
  display: block;
  background: rgba(245, 158, 11, 0.15);
  border: 1px solid var(--ccbe-amber);
  color: #fde68a;
  box-shadow: var(--ccbe-glow-amber);
}

/* Quick test badges bar */
.login-quick-bar {
  margin-top: 22px;
  padding: 10px;
  background: rgba(0, 14, 22, 0.6);
  border: 1px dashed rgba(6, 182, 212, 0.3);
  text-align: center;
}

.login-quick-label {
  font-family: var(--ccbe-font-mono);
  font-size: 0.62rem;
  color: var(--ccbe-cyan);
  opacity: 0.75;
  letter-spacing: 1px;
  margin-bottom: 8px;
  text-transform: uppercase;
}

.login-quick-buttons {
  display: flex;
  gap: 8px;
  justify-content: center;
  flex-wrap: wrap;
}

.quick-user-chip {
  background: rgba(6, 182, 212, 0.08);
  border: 1px solid rgba(6, 182, 212, 0.4);
  color: var(--ccbe-cyan-bright);
  font-family: var(--ccbe-font-mono);
  font-size: 0.65rem;
  padding: 5px 10px;
  cursor: pointer;
  letter-spacing: 1px;
  transition: all 0.2s;
}

.quick-user-chip:hover {
  background: var(--ccbe-cyan);
  color: #000;
  box-shadow: 0 0 10px var(--ccbe-cyan-glow);
}

/* ==========================================================================
   VIEW 2: CENTRAL APPLICATIONS HUB (#view-hub)
   ========================================================================== */

#view-hub {
  min-height: 100vh;
  padding-bottom: 60px;
  position: relative;
  z-index: 10;
}

/* Top Universal TACTICAL Bar */
.hub-topbar {
  background: rgba(0, 8, 14, 0.95);
  border-bottom: 1px solid rgba(6, 182, 212, 0.35);
  box-shadow: 0 0 25px rgba(6, 182, 212, 0.15);
  backdrop-filter: blur(12px);
  padding: 14px 28px;
  position: sticky;
  top: 0;
  z-index: 500;
}

.hub-topbar-inner {
  max-width: 1400px;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 16px;
}

.hub-brand-section {
  display: flex;
  align-items: center;
  gap: 14px;
}

.hub-brand-logo {
  width: 44px;
  height: 44px;
  object-fit: contain;
  filter: drop-shadow(0 0 10px var(--ccbe-cyan-glow));
}

.hub-brand-titles h1 {
  font-family: var(--ccbe-font-main);
  font-size: 1.05rem;
  font-weight: 700;
  letter-spacing: 3px;
  color: #fff;
  text-transform: uppercase;
  margin: 0;
  line-height: 1.2;
}

.hub-brand-titles .hub-subtext {
  font-family: var(--ccbe-font-tech);
  font-size: 0.65rem;
  color: var(--ccbe-cyan-bright);
  letter-spacing: 2px;
}

.hub-user-badge-bar {
  display: flex;
  align-items: center;
  gap: 18px;
  flex-wrap: wrap;
}

.hub-user-info-box {
  display: flex;
  align-items: center;
  gap: 10px;
  background: rgba(6, 182, 212, 0.08);
  border: 1px solid rgba(6, 182, 212, 0.3);
  padding: 6px 14px;
  clip-path: polygon(6% 0, 100% 0, 100% 75%, 94% 100%, 0 100%, 0 25%);
}

.hub-avatar-small {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 1px solid var(--ccbe-cyan);
}

.hub-user-texts {
  font-family: var(--ccbe-font-tech);
  line-height: 1.25;
}

.hub-user-handle {
  font-size: 0.78rem;
  font-weight: 700;
  color: #fff;
  letter-spacing: 1px;
}

.hub-user-meta {
  font-size: 0.65rem;
  color: var(--ccbe-cyan-bright);
  letter-spacing: 1px;
}

/* Security clearance badges */
.badge-clearance {
  display: inline-block;
  font-family: var(--ccbe-font-tech);
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 1.5px;
  padding: 5px 12px;
  text-transform: uppercase;
  clip-path: polygon(0 0, 90% 0, 100% 30%, 100% 100%, 10% 100%, 0 70%);
}

.badge-clearance.admin {
  background: rgba(245, 158, 11, 0.15);
  border: 1px solid var(--ccbe-gold);
  color: #fbbf24;
  box-shadow: 0 0 12px rgba(245, 158, 11, 0.3);
}

.badge-clearance.alto_mando {
  background: rgba(6, 182, 212, 0.15);
  border: 1px solid var(--ccbe-cyan);
  color: var(--ccbe-cyan-bright);
  box-shadow: 0 0 12px var(--ccbe-cyan-glow);
}

.badge-clearance.member {
  background: rgba(16, 185, 129, 0.15);
  border: 1px solid var(--ccbe-signal);
  color: var(--ccbe-signal);
  box-shadow: 0 0 12px rgba(97, 245, 176, 0.25);
}

.hub-clock-box {
  font-family: var(--ccbe-font-mono);
  font-size: 0.72rem;
  color: var(--ccbe-cyan-bright);
  letter-spacing: 1px;
}

.hub-logout-btn {
  background: rgba(239, 68, 68, 0.1);
  border: 1px solid rgba(239, 68, 68, 0.5);
  color: #fca5a5;
  font-family: var(--ccbe-font-tech);
  font-size: 0.68rem;
  padding: 8px 14px;
  cursor: pointer;
  letter-spacing: 1px;
  text-transform: uppercase;
  transition: all 0.2s;
  clip-path: polygon(0 0, 90% 0, 100% 30%, 100% 100%, 10% 100%, 0 70%);
}

.hub-logout-btn:hover {
  background: var(--ccbe-red);
  color: #fff;
  box-shadow: var(--ccbe-glow-red);
}

/* Hub Main Content */
.hub-main-content {
  max-width: 1300px;
  margin: 40px auto;
  padding: 0 24px;
}

.hub-welcome-banner {
  text-align: center;
  margin-bottom: 45px;
}

.hub-welcome-banner h2 {
  font-family: var(--ccbe-font-main);
  font-size: 1.8rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 4px;
  color: #fff;
  text-shadow: var(--ccbe-neon-shadow);
  margin-bottom: 10px;
}

.hub-welcome-banner p {
  font-family: var(--ccbe-font-tech);
  font-size: 0.82rem;
  color: var(--ccbe-cyan-bright);
  letter-spacing: 2px;
  text-transform: uppercase;
  opacity: 0.85;
}

.hub-welcome-banner::after {
  content: '';
  display: block;
  width: 140px;
  height: 2px;
  background: var(--ccbe-cyan);
  margin: 20px auto 0 auto;
  box-shadow: 0 0 12px var(--ccbe-cyan);
}

/* APPS GRID */
.hub-apps-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(360px, 1fr));
  gap: 28px;
}

.app-card {
  background: rgba(2, 10, 16, 0.88);
  border: 1px solid rgba(6, 182, 212, 0.35);
  box-shadow: 0 0 25px rgba(6, 182, 212, 0.12);
  clip-path: polygon(0 0, 95% 0, 100% 5%, 100% 100%, 5% 100%, 0 95%);
  padding: 28px 24px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1);
  position: relative;
  backdrop-filter: blur(8px);
}

.app-card:hover:not(.locked) {
  border-color: var(--ccbe-cyan-bright);
  box-shadow: 0 0 35px var(--ccbe-cyan-glow);
  transform: translateY(-5px);
  background: rgba(2, 16, 26, 0.94);
}

.app-card.locked {
  opacity: 0.65;
  border-color: rgba(239, 68, 68, 0.4);
  box-shadow: 0 0 15px rgba(239, 68, 68, 0.1);
  background: rgba(14, 2, 4, 0.85);
}

.app-card-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 18px;
}

.app-icon-wrap {
  width: 58px;
  height: 58px;
  background: rgba(6, 182, 212, 0.1);
  border: 1px solid var(--ccbe-cyan);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.8rem;
  clip-path: polygon(15% 0, 100% 0, 100% 85%, 85% 100%, 0 100%, 0 15%);
  box-shadow: inset 0 0 15px rgba(6, 182, 212, 0.15);
}

.app-card.locked .app-icon-wrap {
  border-color: var(--ccbe-red);
  background: rgba(239, 68, 68, 0.1);
}

.app-status-badge {
  font-family: var(--ccbe-font-mono);
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 1px;
  padding: 4px 8px;
  text-transform: uppercase;
  border: 1px solid;
}

.app-status-badge.active {
  color: var(--ccbe-signal);
  border-color: var(--ccbe-signal);
  background: rgba(97, 245, 176, 0.1);
}

.app-status-badge.restricted {
  color: var(--ccbe-red);
  border-color: var(--ccbe-red);
  background: rgba(239, 68, 68, 0.1);
}

.app-status-badge.profile-mode {
  color: var(--ccbe-cyan-bright);
  border-color: var(--ccbe-cyan-bright);
  background: rgba(34, 211, 238, 0.1);
}

.app-card-title {
  font-family: var(--ccbe-font-main);
  font-size: 1.15rem;
  font-weight: 700;
  letter-spacing: 2px;
  color: #fff;
  text-transform: uppercase;
  margin-bottom: 6px;
}

.app-card-subtitle {
  font-family: var(--ccbe-font-tech);
  font-size: 0.72rem;
  color: var(--ccbe-cyan-bright);
  letter-spacing: 1px;
  margin-bottom: 14px;
}

.app-card.locked .app-card-subtitle {
  color: #fca5a5;
}

.app-card-desc {
  font-family: var(--ccbe-font-body);
  font-size: 0.88rem;
  color: rgba(248, 250, 252, 0.8);
  line-height: 1.5;
  margin-bottom: 22px;
  flex: 1;
}

.app-action-btn {
  width: 100%;
  display: block;
  font-family: var(--ccbe-font-tech);
  font-size: 0.76rem;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  padding: 12px 18px;
  text-align: center;
  cursor: pointer;
  border: 1px solid;
  transition: all 0.25s ease;
  clip-path: polygon(8% 0, 100% 0, 100% 75%, 92% 100%, 0 100%, 0 25%);
}

.app-action-btn.btn-launch {
  background: rgba(6, 182, 212, 0.15);
  border-color: var(--ccbe-cyan);
  color: var(--ccbe-cyan-bright);
  box-shadow: 0 0 14px rgba(6, 182, 212, 0.2);
}

.app-action-btn.btn-launch:hover {
  background: var(--ccbe-cyan);
  color: #000;
  box-shadow: 0 0 25px var(--ccbe-cyan-glow);
  transform: translateY(-2px);
}

.app-action-btn.btn-locked {
  background: rgba(239, 68, 68, 0.08);
  border-color: rgba(239, 68, 68, 0.4);
  color: #fca5a5;
  cursor: not-allowed;
  opacity: 0.7;
}

/* ==========================================================================
   PERSISTENT APP NAV HEADER (TO RETURN TO HUB)
   ========================================================================== */

.app-view-header {
  background: rgba(0, 8, 14, 0.95);
  border-bottom: 1px solid rgba(6, 182, 212, 0.35);
  padding: 12px 24px;
  position: sticky;
  top: 0;
  z-index: 450;
  backdrop-filter: blur(10px);
}

.app-view-header-inner {
  max-width: 1400px;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 14px;
}

.btn-back-hub {
  background: rgba(6, 182, 212, 0.12);
  border: 1px solid var(--ccbe-cyan);
  color: var(--ccbe-cyan-bright);
  font-family: var(--ccbe-font-tech);
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 1.5px;
  padding: 8px 16px;
  cursor: pointer;
  text-transform: uppercase;
  display: flex;
  align-items: center;
  gap: 8px;
  transition: all 0.25s;
  clip-path: polygon(0 0, 90% 0, 100% 30%, 100% 100%, 10% 100%, 0 70%);
}

.btn-back-hub:hover {
  background: var(--ccbe-cyan);
  color: #000;
  box-shadow: 0 0 16px var(--ccbe-cyan-glow);
}

.app-active-tag {
  font-family: var(--ccbe-font-main);
  font-size: 0.95rem;
  font-weight: 700;
  letter-spacing: 2px;
  color: #fff;
  text-transform: uppercase;
}

/* ==========================================================================
   CCBE-CARGO STYLES
   ========================================================================== */

.cargo-dashboard-metrics {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 18px;
  margin-bottom: 30px;
}

.cargo-metric-card {
  background: rgba(2, 10, 18, 0.85);
  border: 1px solid rgba(6, 182, 212, 0.25);
  padding: 18px;
  clip-path: polygon(0 0, 95% 0, 100% 10%, 100% 100%, 5% 100%, 0 90%);
  display: flex;
  align-items: center;
  gap: 14px;
}

.cargo-metric-icon {
  font-size: 2rem;
  color: var(--ccbe-cyan-bright);
}

.cargo-metric-num {
  font-family: var(--ccbe-font-main);
  font-size: 1.5rem;
  font-weight: 800;
  color: #fff;
  line-height: 1.1;
}

.cargo-metric-label {
  font-family: var(--ccbe-font-tech);
  font-size: 0.65rem;
  color: var(--ccbe-cyan);
  letter-spacing: 1px;
  text-transform: uppercase;
}

/* Cargo Tabs */
.cargo-nav-tabs {
  display: flex;
  gap: 10px;
  border-bottom: 1px solid rgba(6, 182, 212, 0.25);
  margin-bottom: 24px;
  overflow-x: auto;
}

.cargo-tab-btn {
  background: transparent;
  border: 1px solid transparent;
  color: rgba(255, 255, 255, 0.7);
  font-family: var(--ccbe-font-tech);
  font-size: 0.76rem;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  padding: 10px 20px;
  cursor: pointer;
  transition: all 0.2s;
  white-space: nowrap;
}

.cargo-tab-btn:hover, .cargo-tab-btn.active {
  color: var(--ccbe-cyan-bright);
  background: rgba(6, 182, 212, 0.1);
  border-color: rgba(6, 182, 212, 0.35);
  border-bottom-color: transparent;
}

/* ==========================================================================
   CCBE-MANAGER STYLES
   ========================================================================== */

.manager-telemetry-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 18px;
  margin-bottom: 30px;
}

.manager-terminal-window {
  background: #000;
  border: 1px solid var(--ccbe-cyan);
  box-shadow: 0 0 25px rgba(6, 182, 212, 0.15);
  padding: 20px;
  font-family: var(--ccbe-font-mono);
  color: var(--ccbe-cyan-bright);
  font-size: 0.8rem;
  line-height: 1.6;
  max-height: 380px;
  overflow-y: auto;
  margin-top: 20px;
}

/* ==========================================================================
   MEMBER PERSONAL PROFILE / DOSSIER MODE (IN CCBE-REP)
   ========================================================================== */

.member-dossier-card {
  background: rgba(2, 10, 18, 0.9);
  border: 1px solid var(--ccbe-cyan);
  box-shadow: 0 0 35px rgba(6, 182, 212, 0.2);
  clip-path: polygon(0 0, 97% 0, 100% 3%, 100% 100%, 3% 100%, 0 97%);
  padding: 30px;
  margin-bottom: 30px;
}

.member-dossier-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid rgba(6, 182, 212, 0.25);
  padding-bottom: 20px;
  margin-bottom: 24px;
  flex-wrap: wrap;
  gap: 16px;
}

.dossier-id-block {
  display: flex;
  align-items: center;
  gap: 18px;
}

.dossier-emblem {
  width: 72px;
  height: 72px;
  object-fit: contain;
  filter: drop-shadow(0 0 10px var(--ccbe-cyan-glow));
}

.dossier-names h2 {
  font-family: var(--ccbe-font-main);
  font-size: 1.4rem;
  font-weight: 800;
  color: #fff;
  letter-spacing: 2px;
  margin: 0;
}

.dossier-names .dossier-rank {
  font-family: var(--ccbe-font-tech);
  font-size: 0.78rem;
  color: var(--ccbe-cyan-bright);
  letter-spacing: 2px;
  text-transform: uppercase;
}

/* ==========================================================================
   MODALS (CCBE.SPACE HUD STYLE)
   ========================================================================== */

.modal-scifi-backdrop {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.85);
  backdrop-filter: blur(8px);
  z-index: 10000;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 20px;
}

.modal-scifi-backdrop.active {
  display: flex;
}

.modal-scifi-card {
  width: 100%;
  max-width: 520px;
  background: rgba(2, 8, 14, 0.98);
  border: 1px solid var(--ccbe-cyan);
  box-shadow: 0 0 45px var(--ccbe-cyan-glow);
  clip-path: polygon(0 0, 95% 0, 100% 5%, 100% 100%, 5% 100%, 0 95%);
  padding: 30px 28px;
  position: relative;
  animation: cardEntrance 0.35s ease;
}

.modal-scifi-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid rgba(6, 182, 212, 0.3);
  padding-bottom: 14px;
  margin-bottom: 20px;
}

.modal-scifi-title {
  font-family: var(--ccbe-font-main);
  font-size: 0.95rem;
  font-weight: 700;
  letter-spacing: 2px;
  color: #fff;
  text-transform: uppercase;
}

.modal-scifi-close {
  background: transparent;
  border: none;
  color: var(--ccbe-cyan);
  font-size: 1.4rem;
  cursor: pointer;
  line-height: 1;
}

.modal-scifi-close:hover {
  color: #fff;
}

.hub-profile-button{background:transparent;border:1px solid transparent;color:inherit;padding:8px 12px;border-radius:8px;cursor:pointer;text-align:left}
.mfa-secret{background:#081421;border:1px solid #397186;padding:16px;white-space:pre-wrap;overflow-wrap:anywhere;user-select:all;color:#c0f6ff;font-size:14px;line-height:1.8;}
.hub-profile-button:hover,.hub-profile-button:focus-visible{border-color:var(--ccbe-cyan);background:#153043;outline:2px solid transparent}
.hub-profile-button .hub-user-handle,.hub-profile-button .hub-user-meta{display:block}
.profile-dialog{color:#f1f5fc;background:#0c1424;border:1px solid #397186;border-radius:14px;width:min(620px,calc(100% - 28px));max-height:90vh;overflow:auto;padding:24px;box-shadow:0 20px 80px #0008}
.profile-dialog::backdrop{background:#030816cc;backdrop-filter:blur(4px)}
.profile-data>div{display:grid;grid-template-columns:125px minmax(0,1fr);gap:16px;padding:12px 0;border-bottom:1px solid #26354b}
.profile-data dt{color:#9daabc;font-size:12px}.profile-data dd{margin:0;font-size:14px;overflow-wrap:anywhere}.profile-data a{color:#70d1f1}
.profile-password-section{padding-top:20px}.profile-password-section h3{font-size:16px;margin:0 0 10px}.profile-dialog .gateway-note{line-height:1.6}
#profile-dialog .modal-scifi-header{position:sticky;top:-24px;z-index:3;background:#0c1424;padding-top:16px;padding-bottom:16px;margin-top:-16px}
.profile-groups{display:grid;gap:12px;margin-top:16px}
.profile-group{border:1px solid #263d51;border-radius:10px;background:#101e2d;overflow:hidden}
.profile-group>summary{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:17px 18px;cursor:pointer;list-style:none;color:#edf5fb;font-weight:600;font-size:15px}
.profile-group>summary::-webkit-details-marker{display:none}
.profile-group>summary::after{content:'+';color:#46d7ee;font-size:24px;font-weight:400;flex-shrink:0}
.profile-group[open]>summary::after{content:'−'}
.profile-group>summary small{display:block;font-size:12px;color:#98afc3;font-weight:400;line-height:1.5;margin-top:4px}
.profile-group>summary:hover,.profile-group>summary:focus-visible{background:#153044;outline:2px solid #30c7e8;outline-offset:-2px}
.profile-group[open]>summary{border-bottom:1px solid #263d51}
.profile-group-body{padding:18px}
.profile-group-body .profile-data{margin:0}
.profile-group-body .profile-data>div:last-child{border-bottom:0}
.profile-group-body .profile-password-section{padding:0}
.profile-group-body .profile-password-section+.profile-password-section{margin-top:26px;padding-top:22px;border-top:1px solid #263d51}
#open-mail-settings{font-size:22px;line-height:1;letter-spacing:0;padding:5px;width:36px;height:36px;min-height:36px;text-align:center;display:inline-flex;align-items:center;justify-content:center}
#open-mail-settings[hidden]{display:none}
#open-notifications{font-size:22px;line-height:1;padding:5px;width:36px;height:36px;min-height:36px;letter-spacing:0;color:#35c8f1;display:inline-flex;align-items:center;justify-content:center}
.notification-section{padding:18px;margin:16px 0;border:1px solid #254455;border-radius:8px;background:#0a1723}
.notification-section h3{margin-top:0}
.notification-section form{display:grid;gap:14px}
.notification-options{display:grid;gap:14px}
.notification-save{padding:4px 0 8px}
.notification-save p{margin:12px 0 0;line-height:1.5}
.notification-save p:empty{display:none}
.notification-section input[type=checkbox]{accent-color:#35c8f1;margin-right:8px}
.notification-section button{justify-self:start}
.notification-section p{margin:8px 0;text-align:left;line-height:1.5}
.notification-section form>p[role=status]:empty{display:none}
#notification-dialog .modal-scifi-header{position:sticky;top:-24px;background:#0c1626;z-index:3;padding:12px 0}
#mail-settings-dialog .modal-scifi-header{position:sticky;top:-24px;z-index:3;background:#0c1424;padding-top:16px;padding-bottom:16px;margin-top:-16px}
#mail-settings-dialog form{display:grid;gap:14px}
#mail-settings-dialog .login-label{display:block;line-height:1.5;margin:0}
#mail-settings-dialog .login-input{display:block;width:100%;box-sizing:border-box;margin-top:6px}
#mail-settings-dialog form>button{justify-self:start;max-width:100%}
#mail-settings-dialog .profile-password-section+.profile-password-section{margin-top:24px;border-top:1px solid #263d51}
@media(max-width:500px){#mail-settings-dialog .modal-scifi-header{top:-18px}}
#profile-dialog form{display:grid;gap:12px}
#profile-dialog .login-label{display:block;line-height:1.5;margin:0 0 6px}
#profile-dialog .login-input{display:block;width:100%;box-sizing:border-box;margin-top:6px}
#profile-dialog form>.gateway-note{margin:0}
#profile-dialog form>button{justify-self:start;max-width:100%}
@media(max-width:500px){#profile-dialog .modal-scifi-header{top:-18px}.profile-group>summary{padding:14px}.profile-group-body{padding:14px}.profile-group-body .login-form-group>div{flex-wrap:wrap;gap:8px}}
@media(max-width:500px){.profile-dialog{padding:18px}.profile-data>div{grid-template-columns:1fr;gap:5px}}
.login-remember{display:flex;align-items:center;gap:10px;color:#cae9ef;font-size:.9rem;line-height:1.5;margin:0 0 6px;cursor:pointer}.login-remember input{width:18px;height:18px;flex-shrink:0;accent-color:#22d3ee}.login-remember-note{color:#8faebc;font-size:.75rem;line-height:1.5;margin:0 0 18px}