:root {
    --background: 218 30% 8%;
    --foreground: 210 16% 82%;
    --card: 218 30% 10%;
    --card-foreground: 210 16% 82%;
    --popover: 218 30% 10%;
    --popover-foreground: 210 16% 82%;
    --primary: 200 100% 75%;
    --primary-foreground: 218 30% 8%;
    --secondary: 190 100% 50%;
    --secondary-foreground: 218 30% 8%;
    --muted: 218 30% 12%;
    --muted-foreground: 210 16% 60%;
    --accent: 190 100% 50%;
    --accent-foreground: 218 30% 8%;
    --destructive: 0 75% 65%;
    --destructive-foreground: 210 16% 82%;
    --success: 155 100% 55%;
    --success-foreground: 218 30% 8%;
    --border: 218 30% 15%;
    --input: 218 30% 15%;
    --ring: 200 100% 75%;
    --radius: 0.5rem;
}

/* Global layout */
html { scroll-behavior: smooth; }
.container {
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 1rem;
}
@media (min-width: 1024px) {
    .container { padding: 0 2rem; }
}

/* Shared header styles */
.header {
    border-bottom: 1px solid hsl(var(--border));
    background: hsl(var(--card) / 0.5);
    backdrop-filter: blur(12px);
    position: sticky;
    top: 0;
    z-index: 50;
}
.header-content {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 4rem;
}
.logo-section {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}
.logo {
    width: 2rem;
    height: 2rem;
    background: linear-gradient(135deg, hsl(var(--primary)), hsl(var(--secondary)));
    border-radius: 0.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
}
.status-pill {
    background: hsl(var(--success));
    color: hsl(var(--success-foreground));
    padding: 0.25rem 0.75rem;
    border-radius: 9999px;
    font-size: 0.75rem;
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}
.status-dot {
    width: 0.5rem;
    height: 0.5rem;
    background: hsl(var(--success-foreground));
    border-radius: 50%;
}

.glow-primary { box-shadow: 0 0 20px hsl(var(--primary) / 0.3); }