src/styles/main.css

/* Global Styles - Darkmedia-x Brand - STRICT BLACK & RED & GREY */
:root {
  --bg-deep: #000000;
  --bg-panel: #050505;
  --bg-card: #080808;
  --accent-red: #cc0000; /* Blood Red */
  --accent-red-bright: #ff0000;
  --accent-red-glow: rgba(204, 0, 0, 0.4);
  --accent-red-dark: #220000;
  --text-main: #e0e0e0; /* Brighter grey for better readability */
  --text-secondary: #aaaaaa;
  --text-muted: #666666;
  --border-color: #1a1a1a; /* Subtle dark border */
  --border-accent: #330000; /* Red-tinted border */
  --border-hover: #cc0000;
  --success: #00cc66; /* Green for success */
  --warning: #ffcc00; /* Yellow for warning */
  --error: #ff3333; /* Brighter red for error */
  --info: #0099ff; /* Blue for info */
  
  --glass-bg: rgba(10, 10, 10, 0.7);
  --glass-border: rgba(255, 255, 255, 0.05);
  --glass-blur: blur(12px);
}

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

html, body {
  height: 100%;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  background: #000000;
  color: var(--text-main);
  overflow: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Scrollbar - Minimal & Sharp */
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: rgba(0, 0, 0, 0.2); }
::-webkit-scrollbar-thumb { background: #333; border-radius: 10px; border: 2px solid transparent; background-clip: content-box; }
::-webkit-scrollbar-thumb:hover { background: var(--accent-red); border: 2px solid transparent; background-clip: content-box; }

/* Glassmorphism Utilities */
.glass-panel {
  background: var(--glass-bg);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border: 1px solid var(--glass-border);
}

/* Global PrimeVue overrides */
.p-button.p-button-primary {
    background: var(--accent-red);
    border-color: var(--accent-red);
    color: #fff !important; /* Changed from black to white for better contrast on red */
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05rem;
    box-shadow: 0 4px 15px rgba(204, 0, 0, 0.2);
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.p-button.p-button-primary:hover {
    background: var(--accent-red-bright);
    border-color: var(--accent-red-bright);
    box-shadow: 0 6px 20px rgba(204, 0, 0, 0.4);
    transform: translateY(-1px);
}

.p-button.p-button-secondary {
    background: rgba(255, 255, 255, 0.03) !important;
    border-color: var(--border-color) !important;
    color: var(--text-main) !important;
}

.p-button.p-button-secondary:hover {
    background: rgba(255, 255, 255, 0.07) !important;
    border-color: var(--text-muted) !important;
}

.p-inputtext {
    background: #080808 !important;
    border: 1px solid var(--border-color) !important;
    color: #ffffff !important;
    padding: 0.6rem 0.9rem;
    border-radius: 6px;
    transition: all 0.2s ease;
}

.p-inputtext:focus {
    border-color: var(--accent-red) !important;
    box-shadow: 0 0 0 2px var(--accent-red-glow) !important;
}

.p-card {
    background: var(--bg-card) !important;
    border: 1px solid var(--border-color) !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5) !important;
    border-radius: 12px !important;
    overflow: hidden;
}

.p-card .p-card-body {
    padding: 2rem !important;
}

.p-card-title {
    color: var(--text-main) !important;
    font-weight: 700 !important;
    font-size: 1.1rem !important;
}

.p-dialog {
    background: #0a0a0a !important;
    border: 1px solid var(--border-color) !important;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5) !important;
    border-radius: 16px !important;
}

.p-dialog-header, .p-dialog-content, .p-dialog-footer {
    background: transparent !important;
}

.p-dialog-header {
    border-bottom: 1px solid var(--border-color) !important;
    padding: 1.5rem !important;
}

.p-dialog-content {
    padding: 1.5rem !important;
}

.p-dialog-footer {
    border-top: 1px solid var(--border-color) !important;
    padding: 1rem 1.5rem !important;
}


.p-dialog .p-dialog-header .p-dialog-title {
    font-weight: 900 !important;
    text-transform: uppercase;
    letter-spacing: 0.2rem;
}

.p-dialog .p-dialog-header-icons .p-dialog-header-icon {
    color: var(--text-muted) !important;
}

.p-dialog .p-dialog-header-icons .p-dialog-header-icon:hover {
    color: var(--accent-red) !important;
    background: rgba(255, 255, 255, 0.05) !important;
}

/* --- STRICT GRID SYSTEM & LAYOUT UTILITIES --- */
.flex { display: flex !important; }
.d-flex { display: flex !important; }
.d-none { display: none !important; }
.flex-column { flex-direction: column !important; }
.flex-grow-1 { flex-grow: 1 !important; }

.items-center { align-items: center !important; }
.items-start { align-items: flex-start !important; }
.items-end { align-items: flex-end !important; }

.align-center { align-items: center !important; }
.align-start { align-items: flex-start !important; }
.align-end { align-items: flex-end !important; }
.align-baseline { align-items: baseline !important; }

.justify-center { justify-content: center !important; }
.justify-start { justify-content: flex-start !important; }
.justify-end { justify-content: flex-end !important; }
.justify-between { justify-content: space-between !important; }

.fill-height { height: 100% !important; }
.w-full { width: 100% !important; }

/* Spacing System (Symmetric & Constant) */
.pa-1 { padding: 0.25rem !important; }
.pa-2 { padding: 0.5rem !important; }
.pa-3 { padding: 0.75rem !important; }
.pa-4 { padding: 1rem !important; }
.pa-6 { padding: 1.5rem !important; }
.pa-8 { padding: 2rem !important; }
.pa-10 { padding: 2.5rem !important; }
.pa-12 { padding: 3rem !important; }
.pa-16 { padding: 4rem !important; }
.pa-20 { padding: 5rem !important; }

.ma-1 { margin: 0.25rem !important; }
.ma-2 { margin: 0.5rem !important; }
.ma-4 { margin: 1rem !important; }
.ma-8 { margin: 2rem !important; }

.mb-1 { margin-bottom: 0.25rem !important; }
.mb-2 { margin-bottom: 0.5rem !important; }
.mb-4 { margin-bottom: 1rem !important; }
.mb-6 { margin-bottom: 1.5rem !important; }
.mb-8 { margin-bottom: 2rem !important; }
.mb-10 { margin-bottom: 2.5rem !important; }
.mb-12 { margin-bottom: 3rem !important; }
.mb-20 { margin-bottom: 5rem !important; }

.mt-1 { margin-top: 0.25rem !important; }
.mt-2 { margin-top: 0.5rem !important; }
.mt-4 { margin-top: 1rem !important; }
.mt-8 { margin-top: 2rem !important; }
.mt-12 { margin-top: 3rem !important; }
.mt-20 { margin-top: 5rem !important; }

.gap-1 { gap: 0.25rem !important; }
.gap-2 { gap: 0.5rem !important; }
.gap-3 { gap: 0.75rem !important; }
.gap-4 { gap: 1rem !important; }
.gap-6 { gap: 1.5rem !important; }
.gap-8 { gap: 2rem !important; }
.gap-12 { gap: 3rem !important; }

.ml-auto { margin-left: auto !important; }
.mr-auto { margin-right: auto !important; }

/* Text Utilities */
.text-center { text-align: center !important; }
.text-right { text-align: right !important; }
.text-uppercase { text-transform: uppercase !important; }
.font-bold { font-weight: 700 !important; }
.font-black { font-weight: 900 !important; }
.tracking-widest { letter-spacing: 0.4rem !important; }

.text-primary { color: var(--text-main) !important; }
.text-secondary { color: var(--text-secondary) !important; }
.text-muted { color: var(--text-muted) !important; }
.text-red { color: var(--accent-red) !important; }
.text-success { color: var(--success) !important; }
.text-tiny { font-size: 0.65rem !important; }

/* --- COMPOSITION --- */
.stack { display: flex; flex-direction: column; gap: 0.75rem; }

/* Animations */
.fade-enter-active, .fade-leave-active { transition: opacity 0.3s ease; }
.fade-enter-from, .fade-leave-to { opacity: 0; }
.slide-enter-active, .slide-leave-active { transition: transform 0.3s ease; }
.slide-enter-from { transform: translateX(-100%); }
.slide-leave-to { transform: translateX(100%); }

/* Global Entry Animation */
@keyframes fadeIn {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}

[data-composition="step-container"] {
  animation: fadeIn 0.6s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.flex-center {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.truncate {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}