:root {
    --bg-black: #020004;
    --panel-bg: rgba(14, 6, 24, 0.82);
    --panel-border: rgba(139, 92, 246, 0.28);
    --purple-primary: #8b5cf6;
    --neon-magenta: #d946ef;
    --text-bright: #f3e8ff;
    --text-dim: #b8a6db;
}

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

body {
    background-color: var(--bg-black);
    color: var(--text-bright);
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    height: 100vh;
    overflow: hidden;
    position: relative;
}

/* --- BACKGROUNDS --- */
.dark-bg-base {
    position: fixed;
    top: 0; left: 0; width: 100vw; height: 100vh;
    z-index: -4;
    background: radial-gradient(circle at 50% 25%, #10041f 0%, #05010a 60%, #020004 100%);
}

.cyber-grid {
    position: fixed;
    top: 0; left: 0; width: 100vw; height: 100vh;
    z-index: -3;
    background-image: 
        linear-gradient(rgba(139, 92, 246, 0.05) 1px, transparent 1px),
        linear-gradient(90deg, rgba(139, 92, 246, 0.05) 1px, transparent 1px);
    background-size: 45px 45px;
}

/* --- WORKSTATION VIEWPORT --- */
.dashboard-viewport {
    max-width: 1300px;
    height: 100vh;
    margin: 0 auto;
    padding: 1rem 1.5rem;
    display: flex;
    flex-direction: column;
}

.shortcut-nav {
    display: flex;
    justify-content: center;
    gap: 1rem;
    margin-bottom: 1rem;
    flex-shrink: 0;
}

.nav-btn {
    background: rgba(139, 92, 246, 0.1);
    border: 1px solid var(--panel-border);
    color: var(--text-bright);
    padding: 0.4rem 1.2rem;
    border-radius: 8px;
    font-size: 0.8rem;
    cursor: pointer;
    transition: all 0.25s ease;
}

.nav-btn:hover { background: rgba(139, 92, 246, 0.28); border-color: var(--neon-magenta); }

/* --- GRID LAYOUT --- */
.dashboard-grid {
    display: grid;
    grid-template-columns: 4fr 6fr;
    gap: 1rem;
    height: calc(100vh - 80px);
}

.col-left { display: flex; flex-direction: column; gap: 0.8rem; }
.col-right { display: flex; flex-direction: column; min-width: 0; }

.content-panel {
    background: var(--panel-bg);
    border: 1px solid var(--panel-border);
    border-radius: 14px;
    padding: 1rem;
    backdrop-filter: blur(16px);
}

/* --- BIO & CONNECT --- */
.bio-card { display: flex; flex-direction: column; justify-content: center; }
.bio-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 0.8rem; }
.role-badge { color: var(--neon-magenta); font-size: 0.7rem; text-transform: uppercase; }
.bio-description { color: var(--text-dim); font-size: 0.85rem; line-height: 1.4; }

.neon-garlic {
    font-weight: 800; color: #f0abfc;
    text-shadow: 0 0 5px #d946ef, 0 0 12px #d946ef, 0 0 22px #8b5cf6;
}

.logo-ring-frame {
    width: 90px; height: 90px; border-radius: 50%;
    border: 2px solid var(--purple-primary);
    display: flex; align-items: center; justify-content: center;
}
.profile-logo { width: 95%; height: 95%; border-radius: 50%; object-fit: cover; }

.connect-card { display: flex; flex-direction: column; justify-content: space-around; flex-grow: 1; gap: 0.5rem; }
.streaming-links { display: grid; grid-template-columns: 1fr 1fr; gap: 0.5rem; }
.platform-pill { padding: 0.5rem; border-radius: 8px; font-size: 0.8rem; text-decoration: none; color: var(--text-bright); display: flex; align-items: center; gap: 0.5rem; border: 1px solid var(--panel-border); }

.email-display { display: flex; align-items: center; gap: 0.5rem; padding: 0.5rem; border: 1px solid var(--panel-border); border-radius: 8px; font-family: monospace; font-size: 0.85rem; }

/* --- SHOWCASE & VIDEOS --- */
.showcase-card { display: flex; flex-direction: column; height: 100%; overflow: hidden; }
.panel-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 0.8rem; }

.media-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.6rem;
    margin-bottom: 0.6rem;
}

.video-frame {
    position: relative;
    width: 100%;
    padding-bottom: 48%; /* Optimized horizontal ratio */
    border-radius: 6px;
    overflow: hidden;
    background: #000;
}
.video-frame iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: 0; }

.visualizer-panel {
    margin-top: auto;
    background: rgba(5, 2, 10, 0.85);
    border: 1px solid rgba(217, 70, 239, 0.25);
    border-radius: 10px;
    padding: 0.4rem 0.8rem;
    flex-shrink: 0;
}
#purple-visualizer { width: 100%; height: 50px; display: block; }