/* Design tokens */
:root {
    --bg-start: #0a0f1a; /* near-black */
    --bg-end: #0b1323;   /* midnight blue */
    --text-primary: #e6e8ec;
    --text-secondary: #b3bcc7; /* space grey */
    --accent: #3b82f6; /* modern blue */
    /* Extended accent scale (missing earlier caused breakage) */
    --accent-400: #3b82f6;
    --accent-500: #2563eb;
    --accent-600: #1d4ed8;
    --accent-rgb: 59,130,246; /* base accent (400) */
    --accent-05: rgba(59, 130, 246, 0.05);
    --accent-10: rgba(59, 130, 246, 0.10);
    --accent-15: rgba(59, 130, 246, 0.15);
    --accent-20: rgba(59, 130, 246, 0.20);
    --accent-25: rgba(59, 130, 246, 0.25);
    --accent-outline: rgba(59,130,246,0.28);
    --focus-ring: rgba(59, 130, 246, 0.55); /* accent-tinted focus */
    --glass-bg: rgba(18, 22, 34, 0.65);
    --glass-border: rgba(255, 255, 255, 0.10);
    --glass-overlay: linear-gradient(145deg, rgba(200, 200, 200, 0.025) 0%, rgba(200, 200, 200, 0.0125) 40%, rgba(255, 255, 255, 0) 100%);
    --radius-lg: 16px;
    --radius-md: 10px;
    --radius-sm: 6px;
    --shadow-elev-1: 0 4px 16px rgba(0,0,0,0.35);
    --shadow-elev-2: 0 6px 24px rgba(0,0,0,0.5);
    --blur-strong: blur(0);
    --blur-soft: blur(0);
    --navbar-height: 72px;

    /* Surfaces */
    --surface-1: #0f1624;
    --surface-2: #111a2b;
    --surface-3: rgba(20,24,36,0.75);
    --blue-1: #2563eb; /* underline start */
    --blue-2: #60a5fa; /* underline end */
    /* Brand gradient utilities */
    --brand-grad: linear-gradient(90deg, var(--blue-1), var(--blue-2));
    --brand-glow: 0 3px 10px -6px rgba(var(--accent-rgb), .22);
    --heading-underline-width: 60%;
    --section-bar-opacity: 0.28;
    /* Accent-tinted haze for section backgrounds */
    --section-haze-weak: var(--accent-05);
    --section-haze-strong: var(--accent-10);
    /* Typography */
    --font-body: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Helvetica Neue', Arial, sans-serif;
    --font-heading: 'Sora', 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Helvetica Neue', Arial, sans-serif;
    /* Enhanced frosted glass tokens (inspired by iOS control center) */
    /* Liquid glass (more transparent, less blur) */
    /* Liquid glass tuning: lowered blur & lighter tints for more clarity */
    --glass-blur: 4px;
    --glass-saturation: 180%;
    --glass-tint: rgba(25,30,42,0.30); /* slightly more transparent */
    --glass-tint-alt: rgba(60,72,90,0.24);
    --glass-stroke: rgba(255,255,255,0.16); /* outer hairline */
    --glass-inner-stroke: rgba(255,255,255,0.55);
    --glass-highlight: rgba(255,255,255,0.28); /* soft top wash */
    --glass-rim: rgba(255,255,255,0.45);
    --glass-shadow: 0 6px 28px -6px rgba(0,0,0,0.55);
    --radius-pill: 48px;
}

/* Unified section surface refinement (about, upcoming, profile) */
.about-section, .upcoming-section, .profile-section {
    background:
        radial-gradient(1100px 700px at 15% 10%, var(--section-haze-weak), transparent 65%),
        radial-gradient(900px 600px at 85% 20%, var(--section-haze-weak), transparent 70%),
        linear-gradient(160deg, var(--surface-1), var(--surface-2));
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-lg);
    box-shadow: var(--glass-shadow);
    position: relative;
    overflow: hidden;
}
.about-page { margin-top: .25rem; }
.social-section { background: radial-gradient(1100px 700px at 85% 6%, var(--section-haze-weak), transparent 65%), radial-gradient(900px 600px at 10% 25%, var(--section-haze-weak), transparent 70%), linear-gradient(160deg, var(--surface-1), var(--surface-2)); border: 1px solid var(--glass-border); border-radius: var(--radius-lg); box-shadow: var(--glass-shadow); position: relative; overflow: hidden; }
.social-section::before { content: ""; position:absolute; inset:0; pointer-events:none; border-radius:inherit; background: linear-gradient(180deg,var(--glass-highlight) 0%,rgba(255,255,255,0) 35%), linear-gradient(140deg,rgba(var(--accent-rgb),0.14),rgba(var(--accent-rgb),0) 55%); mix-blend-mode: overlay; opacity:.55; }
.about-section::before, .upcoming-section::before, .profile-section::before {
    content: ""; position:absolute; inset:0; pointer-events:none; border-radius:inherit;
    background: linear-gradient(180deg,var(--glass-highlight) 0%,rgba(255,255,255,0) 35%),
                            linear-gradient(140deg,rgba(var(--accent-rgb),0.14),rgba(var(--accent-rgb),0) 55%);
    mix-blend-mode: overlay; opacity:.55;
}
/* (Heading styles for about/upcoming/profile rely on shared section heading block further below to avoid conflicting underline metrics) */
.projects-container, .profile-grid { display:flex; flex-wrap:wrap; gap:1.5rem; }
.about-item, .project-item, .profile-card { flex:1 1 280px; min-width:260px; }

/* Modal styling (edit profile) consistent with glass cards */
.modal { position:fixed; inset:0; display:none; align-items:center; justify-content:center; backdrop-filter:blur(6px) saturate(140%); -webkit-backdrop-filter:blur(6px) saturate(140%); background:rgba(10,15,25,0.55); z-index:2000; padding:2rem 1.25rem; }
.modal[aria-hidden="true"] { backdrop-filter:none; -webkit-backdrop-filter:none; }
.modal-content { position:relative; width:100%; max-width:420px; background:linear-gradient(155deg,var(--glass-tint),var(--glass-tint-alt)); border:1px solid var(--glass-stroke); border-radius:28px; padding:1.75rem 1.5rem 1.9rem; box-shadow:0 6px 28px -6px rgba(0,0,0,.55), inset 0 0 0 1px rgba(255,255,255,.05); overflow:hidden; }
.modal-content::after { content:""; position:absolute; inset:0; background:linear-gradient(180deg,var(--glass-highlight) 0%,rgba(255,255,255,0) 42%), radial-gradient(circle at 35% 0%,rgba(255,255,255,.18),transparent 60%); pointer-events:none; mix-blend-mode:overlay; border-radius: inherit; }
.modal-content h3 { margin:0 0 1.25rem; font-size:1.15rem; font-family:var(--font-heading); letter-spacing:-.01em; }
.modal-content .close { position:absolute; top:10px; right:12px; font-size:1.4rem; cursor:pointer; line-height:1; background:transparent; color:var(--text-secondary); }
.modal-content .close:hover { color:var(--text-primary); }
.modal-content input { background:rgba(255,255,255,0.04); border:1px solid var(--glass-border); border-radius:14px; padding:.75rem .85rem; font-size:.9rem; color:var(--text-primary); width:100%; }
.modal-content input:focus { outline:2px solid var(--accent-400); outline-offset:2px; }
.modal-content .auth-btn { margin-top:.5rem; width:100%; }
@media (prefers-color-scheme: light) {
    .modal { background:rgba(230,235,245,0.55); }
    .modal-content input { background:rgba(0,0,0,0.04); }
}


/* Light theme overrides (automatic via system preference) */
@media (prefers-color-scheme: light) {
    :root {
        --bg-start: #f7f9fc; /* white */
        --bg-end: #eef2f7;   /* very light blue-grey */
        --text-primary: #111319;
        --text-secondary: #4a5563; /* slightly deeper for accessibility */
    --accent: #2563eb; /* modern blue */
    --accent-400: #2563eb;
    --accent-500: #1d4ed8;
    --accent-600: #1e40af;
    --accent-rgb: 37,99,235;
        --accent-05: rgba(37, 99, 235, 0.05);
        --accent-10: rgba(37, 99, 235, 0.10);
        --accent-15: rgba(37, 99, 235, 0.15);
        --accent-20: rgba(37, 99, 235, 0.20);
        --accent-25: rgba(37, 99, 235, 0.25);
    --focus-ring: rgba(37, 99, 235, 0.45);
    --glass-bg: rgba(255, 255, 255, 0.72);
    --glass-border: rgba(0, 0, 0, 0.10);
        --surface-1: #ffffff;
        --surface-2: #f3f6fb;
        --surface-3: rgba(255,255,255,0.78);
        --blue-1: #1d4ed8; /* slightly deeper start in light */
    --blue-2: #60a5fa;
    --section-bar-opacity: 0.30;
    --heading-underline-width: 56%;
    --section-haze-weak: var(--accent-10);
    --section-haze-strong: var(--accent-20);
    --accent-sheen: linear-gradient(90deg, rgba(37,99,235,0.18), rgba(96,165,250,0.10) 45%, rgba(37,99,235,0));
    --accent-outline: rgba(37,99,235,0.25);
    --accent-outline-hover: rgba(37,99,235,0.35);
    --glass-tint: rgba(255,255,255,0.62);
    --glass-tint-alt: rgba(255,255,255,0.50);
    --glass-stroke: rgba(0,0,0,0.08);
    --glass-inner-stroke: rgba(255,255,255,0.75);
    --glass-highlight: rgba(255,255,255,0.70);
    --glass-rim: rgba(255,255,255,0.60);
    --glass-shadow: 0 4px 18px -4px rgba(0,0,0,0.15);
    }

    /* Light mode: clearer chip and tab contrast */
    .post-actions .chip { background: rgba(0,0,0,0.04); border-color: rgba(0,0,0,0.12); }
    .post-actions .like[aria-pressed="true"] { background: rgba(var(--accent-rgb),0.14); border-color: var(--accent-outline); }
    .social-switch .tab:hover { background: rgba(0,0,0,0.06); }
    .social-switch .tab.is-active,
    .social-switch .tab[aria-selected="true"] { background: rgba(var(--accent-rgb),0.12); }
}

/* Phase 1: Typography Overhaul - Introduced 'Space Grotesk' for modern futuristic styling */
/* Basic Reset */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* Robust hidden handling (prevents accidental overrides) */
[hidden] { display: none !important; }

/* Prevent horizontal shifting from oversized hover effects */
html, body { overflow-x: hidden; }

/* Visually hidden but accessible to screen readers */
.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }

/* Skip to Main Content Link (for screen readers and keyboard users) */
.skip-link {
    position: absolute;
    top: -40px;
    left: 0;
    background: var(--glass-bg);
    color: var(--text-primary);
    padding: 8px;
    z-index: 100;
    transition: top 0.3s;
}

.skip-link:focus {
    top: 0;
}

/* Body and Basic Styles */
body {
    font-family: var(--font-body);
    line-height: 1.5; /* Slightly tighter line spacing */
    background: linear-gradient(135deg, var(--bg-start), var(--bg-end)); /* Dark, modern background gradient */
    color: var(--text-primary); /* Light gray for primary text */
    -webkit-font-smoothing: antialiased; /* Improve font rendering on macOS */
    -moz-osx-font-smoothing: grayscale; /* Improve font rendering on Firefox macOS */
    caret-color: var(--accent);
}

/* Browser UA adjustments */
@supports (-webkit-appearance: none) {
    /* Safari/WebKit tweaks */
    .navbar { 
        backdrop-filter: saturate(var(--glass-saturation)) blur(var(--glass-blur));
        -webkit-backdrop-filter: saturate(var(--glass-saturation)) blur(var(--glass-blur));
    }
}
@-moz-document url-prefix() {
    /* Firefox: slightly stronger borders for contrast */
    .glass, .navbar, .chip, .social-switch .tab { border-color: rgba(255,255,255,0.16); }
}

/* Consistent focus ring */
a:focus-visible, button:focus-visible, .chip:focus-visible, .social-switch .tab:focus-visible, .auth-form .auth-btn:focus-visible, .composer .auth-btn:focus-visible {
    outline: 2px solid var(--focus-ring);
    outline-offset: 2px;
}

/* Reusable frosted glass utilities */
.glass {
    background: linear-gradient(140deg, var(--glass-tint) 0%, var(--glass-tint-alt) 100%);
    border: 1px solid var(--glass-stroke);
    backdrop-filter: saturate(var(--glass-saturation)) blur(var(--glass-blur));
    -webkit-backdrop-filter: saturate(var(--glass-saturation)) blur(var(--glass-blur));
    position: relative;
}
.glass::after {
    content: '';
    position: absolute;
    inset: 0;
    background:
        linear-gradient(180deg, var(--glass-highlight) 0%, rgba(255,255,255,0) 14%),
        linear-gradient(140deg, rgba(255,255,255,0.10) 0%, rgba(255,255,255,0.02) 60%);
    pointer-events: none;
    border-radius: inherit; /* ensure overlays match rounded corners */
}
.glass-elev-1 { box-shadow: var(--glass-shadow); }
.glass-pill { border-radius: var(--radius-pill); }
.glass-rounded { border-radius: var(--radius-lg); }

/* Subclass for subtle inset border highlight */
.glass-inset {
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.25), 0 4px 20px -4px rgba(0,0,0,0.45);
}

html { color-scheme: dark light; }

/* Cross-browser glass support and fallbacks */
@supports (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)) {
    :root { --blur-strong: blur(12px); --blur-soft: blur(6px); }
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    /* Fallback: slightly more opaque surfaces when backdrop-filter unsupported */
    .glass,
    .navbar,
    .modal,
    .footer,
    .auth-form .auth-btn,
    .chip,
    .social-switch .tab,
    .composer .auth-btn {
        background: rgba(20, 26, 40, 0.92) !important;
        border-color: rgba(255,255,255,0.08) !important;
        box-shadow: 0 8px 22px rgba(0,0,0,0.45);
    }
}

/* Reduced motion: respect user preferences */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation-duration: 1ms !important; animation-iteration-count: 1 !important; transition-duration: 1ms !important; scroll-behavior: auto !important; }
}

/* Performance: let large scrollers skip initial paint until needed */
.feed, .projects-container { content-visibility: auto; contain-intrinsic-size: 600px 800px; }

/* Fluid “liquid glass” hover effects */
/* Reusable shimmer for links, chips, buttons */
.nav-links a, .chip, .auth-form .auth-btn, .composer .auth-btn {
    position: relative;
    overflow: hidden;
    will-change: transform, box-shadow;
    transform: translateZ(0);
}
.nav-links a::before,
.chip::before,
.auth-form .auth-btn::before,
.composer .auth-btn::before {
    content: "";
    position: absolute;
    top: -20%; left: -30%; right: -30%; bottom: -20%;
    background:
      radial-gradient(120px 60px at 0% 50%, rgba(255,255,255,0.22), rgba(255,255,255,0) 60%),
      linear-gradient(140deg, rgba(255,255,255,0.10), rgba(255,255,255,0.02));
    mix-blend-mode: screen;
    filter: blur(0.3px);
    opacity: 0;
    transform: translateX(-35%);
    transition: opacity .35s ease, transform .8s cubic-bezier(.22, .61, .36, 1);
    pointer-events: none;
}
.nav-links a:hover::before,
.chip:hover::before,
.auth-form .auth-btn:hover::before,
.composer .auth-btn:hover::before {
    opacity: .9;
    transform: translateX(60%);
}
/* Subtle lift and inner-glow on hover/active */
.nav-links a:hover, .chip:hover, .auth-form .auth-btn:hover:not([disabled]), .composer .auth-btn:hover:not([disabled]) {
    box-shadow: 0 10px 28px -10px rgba(0,0,0,0.55), inset 0 1px 0 rgba(255,255,255,0.22);
    transform: translateY(-1px);
}
.nav-links a:active, .chip:active, .auth-form .auth-btn:active:not([disabled]), .composer .auth-btn:active:not([disabled]) {
    transform: translateY(0);
}

/* Light mode readability refinements */
@media (prefers-color-scheme: light) {
    .feature-item p,
    .project-item p,
    .about-item p,
    .profile-info p,
    .profile-projects li,
    .hero-content p { color: #2e3640; }
    .nav-links a { color: #3d4a58; }
    .nav-links a.active, .nav-links a:hover { color: #1a2027; background: linear-gradient(150deg, rgba(37,99,235,0.14), rgba(37,99,235,0.06)); box-shadow: inset 0 -2px 0 var(--accent-20), 0 2px 6px -2px rgba(0,0,0,0.18); border-color: var(--accent-outline); }
    .chip { background: rgba(37,99,235,0.08); color: #1d3658; border: 1px solid rgba(37,99,235,0.25); }
    .chip:hover { background: rgba(37,99,235,0.14); }
    .feature-item, .project-item, .about-item, .profile-info, .profile-projects { border: 1px solid rgba(37,99,235,0.14); position: relative; }
    .feature-item::before, .project-item::before, .about-item::before, .profile-info::before, .profile-projects::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: var(--accent-sheen); pointer-events: none; border-top-left-radius: inherit; border-top-right-radius: inherit; }
    .feature-item:hover, .project-item:hover, .about-item:hover, .profile-info:hover, .profile-projects:hover { border-color: var(--accent-outline-hover); }
    .hero-content { border: 1px solid rgba(37,99,235,0.18); }
    .hero-content::after { mix-blend-mode: normal; }
    .navbar { border-color: rgba(37,99,235,0.22); }
    .navbar::before { box-shadow: 0 0 0 1px rgba(255,255,255,0.65), 0 0 0 2px rgba(37,99,235,0.08), 0 2px 8px -2px rgba(0,0,0,0.25); }
    .footer { backdrop-filter: saturate(var(--glass-saturation)) blur(3px); }
    .hero-section { background-blend-mode: normal, overlay; }
}

/* Accent selection to match modern blue */
::selection { background: var(--accent-20); color: var(--text-primary); }
::-moz-selection { background: var(--accent-20); color: var(--text-primary); }

/* Utility: page offset for fixed navbar */
.page-offset {
    padding-top: calc(var(--navbar-height) + 24px);
}

/* Ensure anchored headings don't hide under fixed navbar */
header[id], section[id] { scroll-margin-top: calc(var(--navbar-height) + 16px); }

/* Utility: container */
.container {
    width: min(1200px, 100% - 2rem);
    margin-inline: auto;
}

/* General Navbar Styles (for both mobile and desktop) */
.navbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    padding: 0.65rem 1rem;
    background: linear-gradient(150deg, var(--glass-tint), var(--glass-tint-alt));
    border: 1px solid var(--glass-stroke);
    backdrop-filter: saturate(var(--glass-saturation)) blur(var(--glass-blur));
    -webkit-backdrop-filter: saturate(var(--glass-saturation)) blur(var(--glass-blur));
    border-radius: var(--radius-pill);
    box-shadow: var(--glass-shadow);
    position: fixed;
    left: 1rem;
    right: 1rem;
    top: 1rem;
    z-index: 1000;
    overflow: hidden;
    transition: all 0.35s ease;
    height: var(--navbar-height);
}

/* Removed separate .tab-bar (single adaptive navbar used) */

/* Add shadow effect to navbar on scroll */
.navbar.scrolled {
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4); /* Adjusted shadow on scroll */
    background: var(--glass-bg);
}

/* Improved gradient overlay for the "glass" effect */
.navbar::after {
    content: "";
    position: absolute;
    inset: 0;
    background:
        linear-gradient(180deg, var(--glass-highlight) 0%, rgba(255,255,255,0) 30%),
        radial-gradient(circle at 50% 0%, rgba(255,255,255,0.20), rgba(255,255,255,0) 60%);
    mask: linear-gradient(180deg, rgba(0,0,0,0.85), rgba(0,0,0,0));
    pointer-events: none;
    z-index: 1;
    border-radius: inherit;
}

/* Subtle rim glow */
.navbar::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    pointer-events: none;
    box-shadow: 0 0 0 1px var(--glass-inner-stroke), 0 0 0 2px rgba(255,255,255,0.06), 0 2px 8px -2px rgba(0,0,0,0.45), 0 4px 18px -6px rgba(0,0,0,0.55);
    mix-blend-mode: overlay;
    opacity: .55;
}

/* Logo styling */
.navbar .logo {
    display:inline-flex;
    align-items:center;
    gap:.5rem;
    text-decoration:none;
    color: var(--text-primary);
    font-family: var(--font-heading);
    letter-spacing:-0.01em;
    font-weight:700;
    font-size:1.35rem;
    line-height:1;
    transition: opacity .2s ease;
}
.navbar .logo:hover { opacity:.95; }
.logo-mark { display:grid; place-items:center; width:28px; height:28px; border-radius:10px; background: linear-gradient(155deg, rgba(var(--accent-rgb),.18), rgba(var(--accent-rgb),.06)); box-shadow: inset 0 0 0 1px var(--glass-stroke), 0 2px 8px -4px rgba(0,0,0,.45); }
.logo-glyph { display:block; }
.logo-text { display:inline-flex; align-items:baseline; gap:.15rem; }
.logo-strong { background: var(--brand-grad); -webkit-background-clip:text; background-clip:text; color: transparent; font-weight:800; }

/* Brand utilities */
.u-brand-text { background: var(--brand-grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.u-brand-bg { background: var(--brand-grad); color: #fff; }
.u-brand-border { border-color: var(--accent-400) !important; }
.u-brand-shadow { box-shadow: 0 2px 8px -4px rgba(var(--accent-rgb), .18); }

/* Optional: text-only logo toggles */
/* Per-element toggle */
.logo.logo--text-only .logo-mark { display: none !important; }
.logo.logo--text-only { gap: .25rem; }
/* Global toggle via body attribute */
body[data-logo='text'] .navbar .logo .logo-mark { display: none !important; }
body[data-logo='text'] .navbar .logo { gap: .25rem; }

/* Removed menu-toggle (no collapsible nav needed) */

/* Theme toggle styles removed: auto theming is now based on system preference */

/* (burger icon removed) */

/* Nav Links - Common Styles */
.nav-links {
    display: flex;
    list-style: none;
    gap: 1.5rem;
    align-items: center; /* Ensure items are vertically centered */
}

.nav-links li {
        margin: 0;
}
/* If an inner link is hidden (e.g., auth gating), hide the parent li to prevent dead space */
.nav-links li:has(> a[style*="display: none"]) { display: none; }
@supports not(selector(:has(*))) {
    .nav-links a[style*="display: none"] { display: none; }
}

/* Link Styles */
.nav-links a {
    background: transparent;
    color: var(--text-secondary);
    text-shadow: none;
    font-weight: 600;
    text-decoration: none;
    font-size: 0.95rem;
    padding: 0.5rem 1rem;
    border-radius: var(--radius-sm);
    font-family: inherit;
    transition: all 0.22s ease;
    position: relative;
    z-index: 1;
    border: 1px solid transparent;
        display: inline-flex;
        align-items: center;
        gap: 0.55rem;
}
.nav-links a:hover, .nav-links a.active {
    background: linear-gradient(150deg, rgba(var(--accent-rgb),0.18), rgba(var(--accent-rgb),0.06));
    border-color: var(--accent-outline);
}

/* Glassy chips and tabs */
.chip, .social-switch .tab {
    background: linear-gradient(150deg, var(--glass-tint), var(--glass-tint-alt));
    border: 1px solid var(--glass-stroke);
    backdrop-filter: saturate(var(--glass-saturation)) blur(calc(var(--glass-blur) * 0.75));
    -webkit-backdrop-filter: saturate(var(--glass-saturation)) blur(calc(var(--glass-blur) * 0.75));
}
.social-switch .tab:hover { background: linear-gradient(150deg, rgba(var(--accent-rgb),0.16), rgba(var(--accent-rgb),0.06)); }
.social-switch .tab.is-active, .social-switch .tab[aria-selected="true"] { background: rgba(var(--accent-rgb),0.12); border-color: var(--accent-outline); }

/* Composer/auth primary buttons */
.composer .auth-btn, .auth-form .auth-btn {
    background: linear-gradient(180deg, rgba(var(--accent-rgb),0.35), rgba(var(--accent-rgb),0.20));
    color: #fff;
}
.composer .auth-btn[disabled], .auth-form .auth-btn[disabled] {
    background: linear-gradient(180deg, rgba(120,130,150,0.35), rgba(120,130,150,0.20));
    color: rgba(255,255,255,0.8);
}

.nav-links a .nav-icon { display: inline-flex; line-height: 0; opacity: .85; }
.nav-links a .nav-icon svg { display: block; width: 18px; height: 18px; }
.nav-links a.active .nav-icon, .nav-links a:hover .nav-icon { opacity: 1; }
/* Allow status dot inside nav-icon to anchor bottom-right */
.nav-links a .nav-icon { position: relative; display:inline-flex; align-items:center; justify-content:center; }

/* Themed avatar chip */
.nav-avatar {
    display:inline-flex; align-items:center; justify-content:center; font-weight:600; font-size:.8rem;
    width:36px; height:36px; border-radius:50%;
    background:linear-gradient(155deg,var(--glass-tint),var(--glass-tint-alt));
    border:1px solid var(--glass-stroke); box-shadow:inset 0 1px 0 rgba(255,255,255,0.15),0 2px 6px -2px rgba(0,0,0,0.45);
    backdrop-filter:saturate(var(--glass-saturation)) blur(var(--glass-blur));
    -webkit-backdrop-filter:saturate(var(--glass-saturation)) blur(var(--glass-blur));
    letter-spacing:.5px; user-select:none; cursor:pointer;
    position:relative; transition: box-shadow .25s ease, transform .25s ease;
}
.nav-avatar:hover { box-shadow:0 0 0 1px var(--glass-inner-stroke),0 4px 14px -4px rgba(0,0,0,.55),inset 0 1px 0 rgba(255,255,255,.25); }
.nav-avatar:active { transform: scale(.92); }
.nav-avatar-icon { display:block; width:18px; height:18px; }
.nav-avatar-badge { display:none; }
/* Tiny status dot for avatar (dev/user/pro) */
.nav-status-dot { position:absolute; bottom:-1px; right:-1px; width:9px; height:9px; border-radius:50%; pointer-events:none; z-index:1; border:2px solid rgba(255,255,255,0.9); box-shadow:0 0 0 1px rgba(0,0,0,0.2), 0 0 6px rgba(0,0,0,0.18); }
@media (prefers-color-scheme: dark){ .nav-status-dot { border-color: rgba(0,0,0,0.75); box-shadow:0 0 0 1px rgba(255,255,255,0.15), 0 0 6px rgba(255,255,255,0.08); } }
.nav-status-dot[data-status="dev"] { background: #facc15; } /* yellow */
.nav-status-dot[data-status="user"] { background: #3b82f6; } /* blue */
.nav-status-dot[data-status="pro"] { background: #eab308; } /* gold */
@media (max-width:820px){ .nav-avatar { width:34px; height:34px; font-size:.7rem; } }

@media (max-width: 820px) {
    /* Selective no-scroll panels: elements marked with data-noscroll-mobile fill viewport; others scroll normally */
    [data-noscroll-mobile] {
        min-height: calc(100dvh - 120px); /* account for top + bottom spacing/nav */
        display: flex;
        flex-direction: column;
        justify-content: center;
    }
    /* Prevent inner extra offset for those panels since we vertically center */
    [data-noscroll-mobile].page-offset { padding-top: 0; }
    .nav-links a { flex-direction: column; gap: 0.25rem; padding: 0.4rem 0.55rem; }
    .nav-links a .nav-label { font-size: 0.6rem; letter-spacing: .05em; }
    .nav-links a .nav-icon svg { width: 20px; height: 20px; }
    /* Compact cluster for avatar + logout button */
    .nav-links li:has(.nav-avatar) { margin-left:.2rem; }
    .nav-links #logoutBtn { padding:0.4rem 0.6rem; }
    .nav-links li:has(#logoutBtn) { margin-right:.15rem; }
    .nav-links li.nav-utility { flex:0 0 auto; }
    .nav-links li.nav-avatar-item { order:98; }
    .nav-links li.nav-logout-item { order:99; }
    /* Even spacing recalibration: distribute remaining items */
    .nav-links { justify-content: space-between; }
        /* Dev unlocked badge */
        .nav-dev-badge { margin-left: .5rem; padding: .35rem .6rem; font-size: .68rem; border-radius: 999px; background: rgba(34,197,94,0.16); border:1px solid rgba(34,197,94,0.35); color: #b7f7c4; box-shadow: 0 2px 8px -4px rgba(0,0,0,0.3); }
}

/* Adaptive tab bar refinements for varied phone widths */
@media (max-width: 600px) {
    .navbar { height:62px; }
    .nav-links { gap:0.35rem; }
    .nav-links a { font-size:0.72rem; padding:0.45rem 0.65rem; }
    .nav-links a .nav-icon svg { width:20px; height:20px; }
    .nav-links li.nav-utility { margin-left:.25rem; }
}
@media (max-width: 480px) {
    .navbar { height:60px; padding:0.45rem 0.6rem; width: min(560px, calc(100% - 1.25rem)); bottom: calc(0.65rem + env(safe-area-inset-bottom, 0)); }
    .nav-links { gap:0.2rem; }
    .nav-links a { font-size:0.66rem; padding:0.45rem 0.5rem; min-width:48px; }
    .nav-links a .nav-icon svg { width:20px; height:20px; }
    .nav-links li.nav-utility { flex:0 0 50px; }
    .nav-avatar { width:32px; height:32px; }
}
/* Icon-only mode sooner to avoid crowding on common phone widths */
@media (max-width: 500px) {
    .nav-links a .nav-label { display:none; }
    .nav-links a { padding:0.48rem 0.5rem; min-width:auto; width:auto; }
    .nav-links a .nav-icon svg { width:22px; height:22px; }
    .nav-links { justify-content:space-between; }
    .nav-links li.nav-utility { width:48px; }
}
@media (max-width: 370px) {
    .navbar { height:58px; padding:0.4rem 0.5rem; width: min(520px, calc(100% - 1rem)); bottom: calc(0.5rem + env(safe-area-inset-bottom, 0)); }
    .nav-links a { width:48px; padding:0.45rem 0.5rem; }
    .nav-links a .nav-icon svg { width:20px; height:20px; }
    .nav-avatar { width:30px; height:30px; }
}
/* Extra large phones (landscape or wide foldables) widen spacing slightly */
@media (max-width: 820px) and (min-width: 621px) {
    .nav-links { gap:0.6rem; }
    .nav-links a { font-size:0.8rem; }
}

.nav-links a.active {
    background: linear-gradient(155deg, var(--glass-tint), var(--glass-tint-alt));
    box-shadow: inset 0 -2px 0 var(--accent-20), 0 2px 10px rgba(0,0,0,0.25), inset 0 1px 0 rgba(255,255,255,0.12);
    color: var(--text-primary);
    border-color: var(--glass-stroke);
}

.nav-links a:hover {
    color: var(--text-primary);
    background: linear-gradient(155deg, var(--glass-tint), var(--glass-tint-alt));
    box-shadow: inset 0 -2px 0 var(--accent-10), 0 2px 10px rgba(0,0,0,0.25), inset 0 1px 0 rgba(255,255,255,0.12);
    border-color: var(--glass-stroke);
}

.nav-links a:hover::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    /* Removed hover specific pseudo element - see global hover effect below */
}

/* Shorts-only: collapsible navbar on desktop with a left handle */
@media (min-width: 821px) {
    /* Fade/scale hide to avoid layout shift */
    body[data-shorts] .navbar {
        transition: opacity .22s ease, transform .22s ease;
    }
    body[data-shorts]:not([data-nav-open]) .navbar {
        opacity: 0;
        transform: scale(0.98);
        pointer-events: none;
    }
    body[data-shorts][data-nav-open] .navbar {
        opacity: 1;
        transform: none;
        pointer-events: auto;
    }

    .nav-handle {
        position: fixed;
        top: 1rem;
        left: 1rem;
        width: 36px;
        height: 36px;
        border-radius: 50%;
        border: 1px solid var(--glass-stroke);
        background: linear-gradient(150deg, var(--glass-tint), var(--glass-tint-alt));
            color: var(--text-secondary);
        cursor: pointer;
        z-index: 1100; /* above navbar */
        box-shadow: var(--glass-shadow);
        backdrop-filter: saturate(var(--glass-saturation)) blur(var(--glass-blur));
        -webkit-backdrop-filter: saturate(var(--glass-saturation)) blur(var(--glass-blur));
    }
        .nav-handle svg { display:block; margin:auto; }
        .nav-handle:hover { color: var(--text-primary); }
        .nav-handle.coach { box-shadow: 0 0 0 0 rgba(var(--accent-rgb), .3); animation: ccPulse 1.2s ease-out 3; }
        @keyframes ccPulse { to { box-shadow: 0 0 0 14px rgba(var(--accent-rgb), 0); } }
    .nav-handle::after {
        content: '';
        position: absolute;
        inset: 0;
        background: linear-gradient(180deg, var(--glass-highlight) 0%, rgba(255,255,255,0) 45%);
        border-radius: inherit;
        pointer-events: none;
    }
    body:not([data-shorts]) .nav-handle { display: none !important; }
        body[data-nav-open] .nav-handle { display: none !important; }
}

    /* Coachmark text bubble */
    @media (min-width: 821px) {
        .nav-coach {
            position: fixed;
            top: 1rem;
            left: 3.5rem;
            background: linear-gradient(150deg, var(--glass-tint), var(--glass-tint-alt));
            border: 1px solid var(--glass-stroke);
            color: var(--text-primary);
            padding: .45rem .7rem;
            border-radius: 12px;
            box-shadow: var(--glass-shadow);
            z-index: 1100;
            font-size: .8rem;
            pointer-events: none;
            opacity: .98;
        }
    }

@media (max-width: 820px) {
    /* Single-view mode: sections hidden inline via JS; animations handled by view classes */
    [data-view] { /* Transition removed to avoid conflict with animations */ }
    [data-view][style*='display: none'] { opacity: 0; }
    .navbar {
        top: auto;
        left: 50%;
        right: auto;
        transform: translateX(-50%);
        width: min(620px, calc(100% - 1.5rem));
        bottom: calc(0.75rem + env(safe-area-inset-bottom, 0));
        height: 64px;
        padding: 0.5rem 0.75rem;
        justify-content: center;
        gap: 0.5rem;
        /* Removed margin-bottom in favor of safe-area adjusted bottom */
        /* Lighter effects for mobile performance */
        backdrop-filter: saturate(1.1) blur(8px);
        -webkit-backdrop-filter: saturate(1.1) blur(8px);
        box-shadow: 0 6px 16px rgba(0,0,0,0.3);
    }
    .navbar .logo { display: none; }
    .nav-links { flex: 1; justify-content: space-around; gap: clamp(0.15rem, 2.2vw, 0.35rem); flex-wrap: nowrap; }
    .nav-links li { flex: 1 1 0; min-width: 0; }
    .nav-links a {
        padding: 0.55rem 0.9rem;
        width: 100%;
        min-width: 48px;
        text-align: center;
        border-radius: calc(var(--radius-pill) - 32px);
        font-size: clamp(0.64rem, 2.3vw, 0.8rem);
        line-height: 1.1;
        min-height: 48px; /* ensure finger target */
        -webkit-tap-highlight-color: transparent;
        touch-action: manipulation;
    }
    .nav-links a .nav-icon svg { width: clamp(18px, 4.5vw, 22px); height: clamp(18px, 4.5vw, 22px); }
    /* Reduce top offset since navbar lives at bottom on mobile */
    .page-offset { padding-top: 0.75rem; }
    body { padding-bottom: calc(96px + env(safe-area-inset-bottom, 0)); }
    /* Tighter container side padding for very small screens */
    .container { width: min(1200px, 100% - 1.25rem); }
    /* Hero adjustments */
    .hero-section { background-position: center top; }
    .hero-content { padding: 1.5rem 1.25rem; }
    .hero-content h1 { font-size: 2.2rem; line-height: 1.1; }
    .hero-content p { font-size: 1.05rem; }
    .hero-content button { width: 100%; font-size: 1rem; padding: 0.9rem 1.25rem; }
    /* Section vertical rhythm */
    .features-section, .about-section, .upcoming-section, .profile-section, .social-section { padding: 3rem 1.25rem; }
    /* Cards full width stacking */
    .projects-container, .profile-container { flex-direction: column; }
    .feature-item, .project-item, .about-item, .profile-info, .profile-projects { width: 100%; margin-inline: auto; }
    /* Reduce heavy shadow for less visual noise */
    .feature-item, .project-item, .about-item, .profile-info, .profile-projects, .hero-content { box-shadow: 0 4px 18px -4px rgba(0,0,0,0.55); }
    /* Horizontal project scroller usability */
    .projects-container { -webkit-overflow-scrolling: touch; scroll-snap-type: x proximity; }
    .projects-container::-webkit-scrollbar { display: none; }
    /* Chips tighter but tappable */
    .chip { padding: 0.4rem 0.65rem; font-size: 0.7rem; }
    /* Footer spacing */
    .footer { padding-bottom: calc(2rem + env(safe-area-inset-bottom, 0)); }
}

/* Shorts-mode page tweaks */
body[data-shorts] .profile-header { display: none !important; }
.shorts-banner { display: none !important; }

/* Additional mobile refinements */
@media (max-width: 600px) {
    /* Utility classes */
    .mobile-hidden { display: none !important; }
    .mobile-only { display: initial !important; }
    body { font-size: 15px; }
    .hero-section { height: auto; padding-top: 5.5rem; padding-bottom: 4.5rem; }
    .hero-content { padding: 1.25rem 1rem 1.4rem; }
    .hero-content h1 { font-size: 1.85rem; }
    .hero-content p { font-size: 0.92rem; line-height: 1.35; }
    .features-section, .about-section, .upcoming-section, .profile-section, .social-section { padding: 2.5rem 1.25rem; margin-bottom: 2.5rem; }
    .feature-item, .project-item, .about-item, .profile-info, .profile-projects { padding: 1.35rem 1.1rem 1.4rem; }
    .chip { font-size: 0.62rem; padding: 0.3rem 0.5rem; }
    .auth-form { padding: 1.5rem 1.25rem; margin: 1.25rem auto; }
    .auth-form input { padding: 0.65rem 0.7rem; font-size: 0.95rem; }
    .auth-form .auth-btn { padding: 0.8rem 1rem; font-size: 0.95rem; }
        .footer { margin: 1.75rem 1rem 0.85rem; padding: 1.25rem 1rem 1.1rem; gap: 0.75rem; }
        .footer p { font-size: 0.76rem; }
        .footer.compact { margin: 1rem 0.75rem 0.5rem; padding: 0.9rem 0.85rem 0.85rem; }
}

/* View transition animations (mobile) */
@media (max-width: 820px) {
    [data-view] { will-change: opacity, transform; }
    .view-active { display: block !important; }
    .view-enter { animation: ccViewIn 280ms both cubic-bezier(.4,0,.2,1); }
    .view-exit { animation: ccViewOut 200ms both cubic-bezier(.4,0,.2,1); }
    @keyframes ccViewIn { from { opacity:0; transform: translateX(12px); } to { opacity:1; transform: translateX(0); } }
    @keyframes ccViewOut { from { opacity:1; transform: translateX(0);} to { opacity:0; transform: translateX(-8px);} }
    @media (prefers-reduced-motion: reduce) { .view-enter, .view-exit { animation: none !important; } }
}

/* Offline / online banner */
.network-banner { position: fixed; top: 0; left: 50%; transform: translateX(-50%); background: linear-gradient(135deg, var(--glass-tint), var(--glass-tint-alt)); backdrop-filter: saturate(var(--glass-saturation)) blur(var(--glass-blur)); -webkit-backdrop-filter: saturate(var(--glass-saturation)) blur(var(--glass-blur)); color: var(--text-primary); padding: .55rem .9rem; border: 1px solid var(--glass-stroke); border-radius: var(--radius-pill); font-size: .75rem; display: flex; align-items: center; gap: .75rem; z-index: 1200; box-shadow: var(--glass-shadow); }
.network-banner button { padding: .4rem .75rem; font-size: .65rem; border-radius: 999px; }
.network-banner.offline { background: linear-gradient(150deg, rgba(200,50,50,0.25), rgba(200,50,50,0.15)), linear-gradient(135deg, var(--glass-tint), var(--glass-tint-alt)); }
.network-banner.online { background: linear-gradient(135deg, var(--accent-20), var(--accent-05)); }

/* Install button (secondary) */
.install-btn { margin-left: .75rem; background: linear-gradient(155deg, var(--accent-20), var(--accent-05)); border: 1px solid var(--accent-20); color: var(--text-primary); padding: .7rem 1.1rem; font-size: .85rem; border-radius: 14px; cursor:pointer; box-shadow: 0 4px 14px -4px rgba(0,0,0,0.45), inset 0 1px 0 rgba(255,255,255,0.18); }
.install-btn:hover { box-shadow: 0 6px 16px -4px rgba(0,0,0,0.55), inset 0 1px 0 rgba(255,255,255,0.25); }
@media (max-width: 600px){ .install-btn { width:100%; margin: .75rem 0 0; text-align:center; } }

@media (max-width: 480px) {
    .hero-content h1 { font-size: 1.65rem; }
    .hero-content p { font-size: 0.85rem; }
    .nav-links a .nav-icon svg { width: 18px; height: 18px; }
    .nav-links a { min-height: 44px; }
    .feature-item h3, .project-item h3, .about-item h3, .profile-info h3, .profile-projects h3 { font-size: 1.15rem; }
    .feature-item p, .project-item p, .about-item p, .profile-info p, .profile-projects li { font-size: 0.85rem; }
    .auth-form { max-width: 340px; }
    .auth-form label { font-size: 0.75rem; }
    .auth-form input { font-size: 0.85rem; }
    .auth-form .auth-btn { font-size: 0.9rem; }
    .chip { font-size: 0.58rem; }
}

/* Mobile Social splash overlay */
.mobile-splash { position: fixed; inset: 0; display: grid; place-items: center; background: radial-gradient(1200px 800px at 50% -10%, var(--section-haze-strong), transparent 65%), linear-gradient(160deg, var(--surface-1), var(--surface-2)); z-index: 2000; padding: 1.25rem; }
.mobile-splash[hidden] { display: none !important; }
.mobile-splash-card { width: min(520px, 100%); background: linear-gradient(150deg, var(--glass-tint), var(--glass-tint-alt)); border: 1px solid var(--glass-stroke); border-radius: 20px; box-shadow: var(--glass-shadow); padding: 1.25rem 1.1rem 1.1rem; text-align: center; color: var(--text-primary); position: relative; overflow: hidden; }
.mobile-splash-card::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, var(--glass-highlight) 0%, rgba(255,255,255,0) 40%), radial-gradient(circle at 50% 0%, rgba(255,255,255,0.18), transparent 60%); pointer-events: none; mix-blend-mode: overlay; border-radius: inherit; }
.mobile-splash-brand { display: inline-flex; align-items: center; gap: .5rem; margin-bottom: .5rem; font-family: var(--font-heading); font-weight: 700; letter-spacing: -0.01em; }
.mobile-splash .logo-mark { width: 28px; height: 28px; border-radius: 10px; background: linear-gradient(155deg, rgba(var(--accent-rgb),.18), rgba(var(--accent-rgb),.06)); box-shadow: inset 0 0 0 1px var(--glass-stroke), 0 2px 8px -4px rgba(0,0,0,.45); display: grid; place-items: center; }
.mobile-splash h2 { font-size: clamp(1.1rem, 4.5vw, 1.35rem); margin: .35rem 0 .35rem; font-family: var(--font-heading); }
.mobile-splash-desc { color: var(--text-secondary); font-size: .95rem; line-height: 1.35; margin: 0 auto .85rem; max-width: 48ch; }
.mobile-splash-actions { display: flex; justify-content: center; gap: .6rem; margin-top: .2rem; }
.mobile-splash .btn.primary { background: linear-gradient(155deg, var(--accent-20), var(--accent-05)); border: 1px solid var(--accent-20); color: var(--text-primary); padding: .7rem 1.1rem; font-size: .95rem; border-radius: 14px; cursor: pointer; box-shadow: 0 4px 14px -4px rgba(0,0,0,0.45), inset 0 1px 0 rgba(255,255,255,0.18); }
.mobile-splash .btn.primary:hover { box-shadow: 0 6px 16px -4px rgba(0,0,0,0.55), inset 0 1px 0 rgba(255,255,255,0.25); }
.mobile-splash-foot { margin-top: .75rem; font-size: .8rem; color: var(--text-secondary); }
@media (min-width: 821px) { .mobile-splash { display: none !important; } }

/* Role chips */
.role-chip { display:inline-block; padding:.3rem .6rem; border-radius:999px; font-size:.72rem; font-weight:700; letter-spacing:.03em; border:1px solid var(--glass-border); background: rgba(255,255,255,0.06); color: var(--text-secondary); }
.role-chip.admin { background: rgba(59,130,246,0.16); border-color: rgba(59,130,246,0.35); color: #bfdbfe; }
.role-chip.dev, .chip.dev { background: rgba(250,204,21,0.16); border-color: rgba(250,204,21,0.40); color: #fde68a; }
@media (prefers-color-scheme: light){ .role-chip.dev, .chip.dev { color:#92400e; background: rgba(250,204,21,0.22); border-color: rgba(250,204,21,0.45); } }

/* Dev-only access on mobile splash */
.mobile-splash-dev { margin-top: 1rem; padding-top: .75rem; border-top: 1px dashed var(--glass-border); }
.mobile-splash-dev .dev-badge { display: inline-block; padding: .25rem .6rem; border-radius: 999px; font-size: .7rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; background: rgba(var(--accent-rgb),0.14); border: 1px solid var(--accent-outline); color: var(--text-primary); box-shadow: 0 2px 8px -4px rgba(0,0,0,0.3); }
.mobile-splash-dev .dev-form { display: flex; gap: .5rem; justify-content: center; align-items: center; margin-top: .6rem; }
.mobile-splash-dev .dev-form input { background: rgba(255,255,255,0.04); border: 1px solid var(--glass-border); border-radius: 12px; color: var(--text-primary); padding: .55rem .7rem; min-width: 180px; }
.mobile-splash-dev .dev-hint { margin-top: .35rem; font-size: .8rem; color: var(--text-secondary); }
.mobile-splash-dev .dev-error { margin-top: .35rem; font-size: .82rem; color: #ef4444; }

@media (max-width: 360px) {
    /* Hide less-critical hero paragraph to save space; developer can remove this if keeping copy is critical */
    .hero-content p { display: none; }
    .hero-content h1 { font-size: 1.5rem; }
}

/* Very small devices: extra fine-tuning */
@media (max-width: 420px) {
    .hero-content h1 { font-size: 1.95rem; }
    /* TikTok-like snap for Videos tab */
    .center-scroll.videos-mode { scroll-snap-type: y mandatory; }
    .center-scroll.videos-mode .feed-item { scroll-snap-align: start; }
    .hero-content p { font-size: 0.95rem; }
    .nav-links a { font-size: 0.7rem; padding: 0.5rem 0.65rem; }
    .chip { font-size: 0.66rem; }
}

/* Landscape phone: reduce hero height to reveal content below */
@media (max-height: 540px) and (orientation: landscape) {
    .hero-section { height: auto; padding-top: 5.5rem; padding-bottom: 5rem; }
    .hero-content { margin-block: 2rem; }
}

@media (min-width: 821px) {
    .nav-links { display: flex; }
}

/* Hero Section Styles */
.hero-section {
    position: relative;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    color: white;
    text-align: center;
    background: url('background.webp') no-repeat center center/cover;
    background-color: rgba(0, 0, 0, 0.3);
    background-blend-mode: overlay;
    overflow: hidden;
}

.hero-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background:
        radial-gradient(1000px 600px at 15% 10%, var(--section-haze-weak), transparent 65%),
        radial-gradient(900px 600px at 85% 15%, var(--section-haze-weak), transparent 65%),
        linear-gradient(180deg, rgba(0,0,0,0.55), rgba(0,0,0,0.45));
    z-index: 1;
    /* No backdrop blur to avoid any perceived motion */
}

.hero-content {
    position: relative;
    z-index: 2;
    background: linear-gradient(155deg, var(--glass-tint), var(--glass-tint-alt));
    backdrop-filter: saturate(var(--glass-saturation)) blur(var(--glass-blur));
    -webkit-backdrop-filter: saturate(var(--glass-saturation)) blur(var(--glass-blur));
    border-radius: var(--radius-lg);
    padding: 2rem;
    border: 1px solid var(--glass-stroke);
    box-shadow: var(--glass-shadow);
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    overflow: hidden;
}

.hero-content::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, var(--glass-highlight) 0%, rgba(255,255,255,0) 38%), radial-gradient(circle at 50% 0%, rgba(255,255,255,0.18), transparent 60%);
    pointer-events: none;
    z-index: 1;
    border-radius: inherit; /* ensure rounded highlight */
    mix-blend-mode: overlay;
}

.hero-content h1 {
    font-size: 3.5rem;
    margin-bottom: 1rem;
    font-weight: bold;
    color: var(--text-primary);
    text-shadow: none;
    font-family: var(--font-heading);
    letter-spacing: -0.015em;
}

/* Mobile hero brand (appears only on small screens) */
.mobile-hero-brand {
    display: none;
    font-family: var(--font-heading);
    font-weight: 600;
    font-size: 0.85rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    background: linear-gradient(135deg, var(--accent-20), var(--accent-05));
    padding: 0.4rem 0.85rem;
    border-radius: 32px;
    border: 1px solid var(--glass-stroke);
    margin-bottom: 0.75rem;
    color: var(--text-secondary);
    position: relative;
    overflow: hidden;
}
.mobile-hero-brand::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, var(--glass-highlight) 0%, rgba(255,255,255,0) 55%);
    pointer-events: none;
    mix-blend-mode: overlay;
}

@media (max-width: 820px) {
    .mobile-hero-brand { display: inline-block; }
    .hero-content h1 { margin-top: 0; }
}

.hero-content p {
    font-size: 1.5rem;
    margin-bottom: 1.5rem;
    color: var(--text-secondary);
    text-shadow: none;
}

.hero-content button {
    position: relative;
    background: linear-gradient(180deg, rgba(var(--accent-rgb),0.35), rgba(var(--accent-rgb),0.20));
    backdrop-filter: saturate(var(--glass-saturation)) blur(var(--glass-blur));
    -webkit-backdrop-filter: saturate(var(--glass-saturation)) blur(var(--glass-blur));
    color: #fff;
    padding: 1rem 2rem;
    border: 1px solid var(--glass-stroke);
    border-radius: 14px;
    font-size: 1.2rem;
    font-weight: 600;
    box-shadow: var(--glass-shadow), inset 0 1px 0 rgba(255,255,255,0.18);
    cursor: pointer;
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), background-color 0.3s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    overflow: hidden;
}

.hero-content button::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, var(--glass-highlight) 0%, rgba(255,255,255,0) 38%), radial-gradient(circle at 50% 0%, rgba(255,255,255,0.18), transparent 60%);
    pointer-events: none;
    z-index: 1;
    border-radius: inherit;
    mix-blend-mode: overlay;
}

.hero-content button:hover { box-shadow: 0 10px 28px -10px rgba(0,0,0,0.55), inset 0 1px 0 rgba(255,255,255,0.22); transform: translateY(-1px); }
.hero-content button:active { transform: translateY(0); }

@media (max-width: 768px) {
    .hero-content h1 {
        font-size: 2rem;
    }
    .hero-content p {
        font-size: 1rem;
    }
    .hero-content button {
        padding: 0.75rem 1.5rem;
        font-size: 1rem;
    }
}
/* Removed unused .glass-box styles */

/* Features Section */
.features-section {
    padding: 4rem 2rem;
    text-align: center;
    background:
        radial-gradient(1200px 800px at 20% -10%, var(--section-haze-strong), transparent 60%),
        radial-gradient(900px 600px at 110% 10%, var(--section-haze-weak), transparent 65%),
        linear-gradient(to bottom, var(--surface-1), var(--surface-2));
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-elev-2);
    position: relative;
    overflow: hidden;
    backdrop-filter: var(--blur-soft);
    -webkit-backdrop-filter: var(--blur-soft);
}

/* Subtle accent top bar for sections */
.features-section::after,
.upcoming-section::after,
.about-section::after,
.profile-section::after,
.social-section::after,
.login-section::after,
.signup-section::after {
    content: '';
    position: absolute;
    top: 0.5rem;
    left: 1.25rem;
    right: 1.25rem;
    height: 2px;
    background: linear-gradient(90deg, var(--blue-1), var(--blue-2));
    opacity: var(--section-bar-opacity);
    pointer-events: none;
    border-radius: 999px; /* soft ends: avoids square overlay on rounded sections */
}

/* Social feed */
.composer-card { margin: 1rem 0 1.25rem; padding: 1rem; border: 1px solid var(--glass-stroke); border-radius: 20px; background: linear-gradient(150deg, var(--glass-tint), var(--glass-tint-alt)); box-shadow: var(--glass-shadow); overflow: hidden; }
.composer { display:grid; grid-template-columns: 44px 1fr auto; align-items: start; gap: .75rem; }
.composer-avatar .avatar { width: 44px; height: 44px; border-radius: 50%; display:inline-flex; align-items:center; justify-content:center; font-weight:700; color:#fff; background: hsl(210 70% 45%); box-shadow: inset 0 1px 0 rgba(255,255,255,.25), 0 2px 8px rgba(0,0,0,.25); }
.composer-field { display:flex; flex-direction: column; gap: .35rem; }
.composer textarea { width: 100%; resize: vertical; min-height: 72px; border-radius: 14px; border: 1px solid var(--glass-border); background: rgba(255,255,255,0.04); color: var(--text-primary); padding: .75rem .9rem; font: inherit; }
.composer textarea:focus { outline: 2px solid var(--accent-400); outline-offset: 2px; }
.composer .composer-meta { display:flex; justify-content: flex-end; font-size: .75rem; color: var(--text-secondary); }
.composer .composer-actions { display:flex; align-items: start; }
.composer .auth-btn[disabled] { opacity: .5; cursor: not-allowed; }
.auth-btn.sm { padding: .5rem .75rem; font-size: .85rem; }

/* Social composer Post button – glass style */
.composer .auth-btn {
        position: relative;
        background: linear-gradient(155deg, var(--glass-tint), var(--glass-tint-alt));
        color: var(--text-primary);
        border: 1px solid var(--glass-stroke);
        border-radius: 14px;
        padding: .7rem 1rem;
        font-weight: 600;
        line-height: 1;
        min-height: 40px;
        box-shadow: 0 2px 6px -2px rgba(0,0,0,0.22), inset 0 1px 0 rgba(255,255,255,0.14);
        backdrop-filter: saturate(var(--glass-saturation)) blur(var(--glass-blur));
        -webkit-backdrop-filter: saturate(var(--glass-saturation)) blur(var(--glass-blur));
        transition: box-shadow .2s ease, background-color .2s ease, transform .06s ease;
}
.composer .auth-btn::after {
        content: "";
        position: absolute;
        inset: 0;
        border-radius: inherit;
        pointer-events: none;
        background: linear-gradient(180deg, var(--glass-highlight) 0%, rgba(255,255,255,0) 42%);
        mix-blend-mode: overlay;
}
.composer .auth-btn:hover:not([disabled]) { box-shadow: 0 3px 10px -4px rgba(0,0,0,0.28), inset 0 1px 0 rgba(255,255,255,0.18); }
.composer .auth-btn:active:not([disabled]) { transform: translateY(1px); }
.composer .auth-btn:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; }

@media (max-width: 600px){
    .composer .auth-btn { padding: .65rem .9rem; min-height: 38px; }
}

.feed { display: grid; gap: 1.25rem; }
.feed #feed-static { display: grid; gap: 1.1rem; }
.post-card { border: 1px solid var(--glass-stroke); border-radius: 20px; background: linear-gradient(150deg, var(--glass-tint), var(--glass-tint-alt)); box-shadow: var(--glass-shadow); padding: 1.05rem 1.1rem; overflow: hidden; }
.post-card::before, .post-card::after { border-radius: inherit; }
.post-card.post--video .post-text { margin-bottom: .6rem; }
.post-card.post--video .video-media { position: relative; border-radius: 14px; overflow: hidden; border: 1px solid var(--glass-border); background: #0d1320; }
.post-card.post--video .video-media::after { content:""; position:absolute; inset:0; border-radius: inherit; pointer-events:none; }
.post-card.post--video .video-media::before { content: ""; display:block; width:100%; aspect-ratio: 16/9; }
.post-card.post--video .video-poster { position: absolute; inset:0; width:100%; height:100%; object-fit: cover; filter: saturate(0.9) contrast(1.02); }
.post-card.post--video .video-placeholder { position: absolute; left: 10px; bottom: 10px; padding: .35rem .65rem; border-radius: 999px; font-size: .8rem; color: var(--text-secondary); background: rgba(255,255,255,0.06); border:1px solid var(--glass-border); box-shadow: 0 4px 14px -6px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.12); }
.post-header { display:flex; align-items: center; gap: .75rem; }
.post-header .avatar { width: 36px; height: 36px; border-radius: 50%; display:inline-flex; align-items:center; justify-content:center; font-weight:700; color:#fff; background: hsl(var(--h) 70% 45%); box-shadow: inset 0 1px 0 rgba(255,255,255,.25), 0 2px 8px rgba(0,0,0,.25); }
.post-header .meta { display:flex; flex-direction: column; line-height: 1.15; }
.post-header .author { font-size: .95rem; font-weight: 600; }
.post-header .time { font-size: .75rem; color: var(--text-secondary); }
.post-header .icon-btn.delete { margin-left: auto; background: transparent; border: none; color: var(--text-secondary); font-size: 1.2rem; cursor: pointer; padding: .25rem .4rem; border-radius: 8px; }
.post-header .icon-btn.delete:hover { background: rgba(255,255,255,0.06); color: var(--text-primary); }

.post-text { margin: .65rem 0 .5rem; color: var(--text-primary); }
.post-text a { color: var(--accent-400); text-decoration: underline; }

.post-actions { display:flex; gap: .6rem; align-items: center; flex-wrap: wrap; }
.post-actions .chip { display:inline-flex; align-items:center; gap:.45rem; cursor:pointer; user-select:none; line-height:1; padding:.4rem .65rem; border-radius:999px; text-transform:none; letter-spacing:0; border:1px solid var(--glass-border); background: rgba(255,255,255,0.04); }
.post-actions .like[aria-pressed="true"] { background: rgba(var(--accent-rgb),0.20); border-color: var(--accent-400); }
.post-actions .chip .count { font-variant-numeric: tabular-nums; }

.comments { margin-top: .5rem; border-top: 1px dashed var(--glass-border); padding-top: .5rem; }
.comment-list { list-style: none; display: grid; gap: .5rem; margin: 0; padding: 0; }
.comment { display:flex; gap: .5rem; }
.comment .avatar { width: 24px; height: 24px; border-radius: 50%; display:inline-flex; align-items:center; justify-content:center; font-weight:700; color:#fff; background: hsl(var(--h) 70% 45%); font-size:.75rem; }
.comment .bubble { background: rgba(255,255,255,0.04); border:1px solid var(--glass-border); border-radius: 12px; padding: .4rem .6rem; flex:1; }
.comment .c-meta { font-size: .72rem; color: var(--text-secondary); margin-bottom: .1rem; }
.comment .c-author { font-weight: 600; }
.comment .c-text { font-size: .9rem; }
.comment-form { display:flex; gap: .5rem; margin-top: .5rem; }
.comment-form input { flex:1; background: rgba(255,255,255,0.04); border:1px solid var(--glass-border); border-radius: 999px; color: var(--text-primary); padding: .55rem .8rem; }
.empty-feed { text-align: center; color: var(--text-secondary); padding: 1rem 0; }

@media (max-width: 600px) {
    .post-header .author { font-size: .9rem; }
    .post-text { font-size: .95rem; }
}

/* Poll and Board post types */
.post-card.post--poll .post-text { margin-bottom: .65rem; font-weight: 600; }
.poll-options { display:grid; gap:.4rem; }
.poll-option { display:flex; justify-content: space-between; align-items:center; border:1px solid var(--glass-border); border-radius: 12px; padding:.5rem .65rem; background: rgba(255,255,255,0.04); cursor:pointer; }
.poll-option .label { font-weight:600; opacity:.95; }
.poll-option .votes { font-size:.85rem; color: var(--text-secondary); }
.poll-option[aria-pressed="true"] { background: rgba(var(--accent-rgb),0.16); border-color: var(--accent-400); }

.post-card.post--board .post-text { font-weight: 700; margin-bottom: .6rem; }
.post-card.post--board .board-mini { display: grid; grid-template-columns: repeat(3, 1fr); gap: .6rem; padding: .25rem 0 .5rem; }
.post-card.post--board .board-col h4 { font-size: .85rem; opacity: .9; margin-bottom: .35rem; }
.post-card.post--board .board-item { background: rgba(255,255,255,0.04); border: 1px solid var(--glass-border); border-radius: 10px; padding: .5rem .6rem; }
.board-mini { display:grid; grid-template-columns: repeat(3, 1fr); gap:.5rem; }
.board-col { background: rgba(255,255,255,0.04); border:1px solid var(--glass-border); border-radius: 12px; padding:.5rem; }
.board-col h4 { font-size:.82rem; font-weight:700; margin-bottom:.35rem; color: var(--text-secondary); }
.board-item { background: linear-gradient(150deg, rgba(255,255,255,0.05), rgba(255,255,255,0.02)); border:1px solid var(--glass-border); border-radius:10px; padding:.4rem .5rem; font-size:.9rem; }

/* Feed/Shorts switch — iOS-inspired liquid glass */
.social-switch { display:inline-flex; gap:.35rem; padding:.35rem; border-radius:999px; border:1px solid var(--glass-stroke); background: linear-gradient(150deg, var(--glass-tint), var(--glass-tint-alt)); box-shadow: var(--glass-shadow); margin: .25rem 0 1rem; }
.social-switch .tab {
    appearance: none;
    border: 1px solid transparent;
    background: transparent;
    color: var(--text-secondary);
    font-weight: 600;
    padding: .5rem 1.2rem;
    border-radius: 999px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    transition: color .22s cubic-bezier(.4,0,.2,1), background-color .35s cubic-bezier(.4,0,.2,1), box-shadow .35s cubic-bezier(.4,0,.2,1), transform .28s cubic-bezier(.34,1.56,.64,1);
    will-change: transform;
}
.social-switch .tab::before {
    content: "";
    position: absolute;
    inset: -50% -30%;
    background: linear-gradient(135deg, rgba(255,255,255,0.4) 0%, rgba(255,255,255,0.08) 45%, transparent 70%);
    transform: translateX(-120%) rotate(25deg);
    opacity: 0;
    mix-blend-mode: overlay;
    pointer-events: none;
    border-radius: inherit;
    transition: transform .6s cubic-bezier(.34,1.2,.64,1), opacity .35s ease;
}
.social-switch .tab::after {
    content: "";
    position: absolute;
    inset: -10%;
    background: radial-gradient(ellipse at 40% 30%, rgba(var(--accent-rgb),0.25), rgba(var(--accent-rgb),0.08) 35%, transparent 60%);
    filter: blur(12px);
    opacity: 0;
    pointer-events: none;
    border-radius: inherit;
    transition: opacity .4s ease, filter .4s cubic-bezier(.4,0,.2,1);
}

.social-switch .tab:hover,
.social-switch .tab:focus-visible {
    color: var(--text-primary);
    background: linear-gradient(155deg, rgba(var(--accent-rgb),0.18), rgba(var(--accent-rgb),0.10));
    border-color: rgba(var(--accent-rgb),0.25);
    box-shadow: inset 0 0 0 1px rgba(var(--accent-rgb),0.15), 0 8px 24px -10px rgba(0,0,0,0.4), 0 2px 8px -2px rgba(var(--accent-rgb),0.3);
    transform: scale(1.04);
}
.social-switch .tab:hover::before,
.social-switch .tab:focus-visible::before {
    opacity: 1;
    transform: translateX(80%) rotate(25deg);
}
.social-switch .tab:hover::after,
.social-switch .tab:focus-visible::after {
    opacity: 1;
    filter: blur(16px);
}

.social-switch .tab.is-active,
.social-switch .tab[aria-selected="true"] {
    color: var(--text-primary);
    background: linear-gradient(150deg, rgba(var(--accent-rgb),0.24), rgba(var(--accent-rgb),0.14));
    border-color: rgba(var(--accent-rgb),0.35);
    box-shadow: inset 0 0 0 1px rgba(var(--accent-rgb),0.25), 0 10px 28px -12px rgba(0,0,0,0.5), 0 2px 10px -2px rgba(var(--accent-rgb),0.4);
}
.social-switch .tab.is-active::before,
.social-switch .tab[aria-selected="true"]::before {
    opacity: .85;
    transform: translateX(60%) rotate(20deg);
}
.social-switch .tab.is-active::after,
.social-switch .tab[aria-selected="true"]::after {
    opacity: 1;
    filter: blur(14px);
}

.social-switch .tab:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; }

@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    .social-switch .tab:hover,
    .social-switch .tab:focus-visible,
    .social-switch .tab.is-active,
    .social-switch .tab[aria-selected="true"] {
        backdrop-filter: saturate(180%) blur(20px);
        -webkit-backdrop-filter: saturate(180%) blur(20px);
    }
}

/* Mobile Social polish */
@media (max-width: 820px) {
    /* Hide desktop-only sidebars and composer */
    .social-layout .s-left,
    .social-layout .s-right { display: none !important; }
    .composer-card { display: none !important; }
    .s-center { width: 100%; max-width: 680px; margin-inline: auto; }
    .center-scroll { padding-bottom: 5.5rem; }
    /* Sticky tabs like Twitter */
    .shorts-header { position: sticky; top: 0; z-index: 10; background: transparent; border: none; border-radius: 0; padding: .2rem 0; box-shadow: none; backdrop-filter: none; -webkit-backdrop-filter: none; margin-bottom: .65rem; overflow: visible; }
    .social-switch { margin: 0; box-shadow: none; background: transparent; border: none; padding: 0; }
    .social-switch .tab { padding: .5rem .85rem; }
    /* Floating action button */
    .composer-fab { position: fixed; right: 1rem; bottom: calc(84px + env(safe-area-inset-bottom, 0)); width: 56px; height: 56px; border-radius: 50%; border: 1px solid var(--glass-stroke); background: linear-gradient(150deg, var(--glass-tint), var(--glass-tint-alt)); color: var(--text-primary); font-size: 1.6rem; line-height: 1; display: grid; place-items: center; box-shadow: 0 8px 20px rgba(0,0,0,0.45); backdrop-filter: saturate(var(--glass-saturation)) blur(var(--glass-blur)); -webkit-backdrop-filter: saturate(var(--glass-saturation)) blur(var(--glass-blur)); z-index: 1001; }
    .composer-fab::after { content: ""; position: absolute; inset: 0; border-radius: inherit; background: linear-gradient(180deg, var(--glass-highlight) 0%, rgba(255,255,255,0) 45%); pointer-events: none; }
    .composer-fab:active { transform: translateY(1px) scale(.98); }
    .composer-fab[hidden] { display: none !important; }
    /* Modal tweaks already themed; ensure size for phones */
    .modal .modal-content { width: min(560px, 92vw); }
}

/* Shorts reels */
.shorts { display: flex; flex-direction: column; align-items: center; gap: 0.5rem; height: 100%; max-height: calc(100vh - 220px); overflow-y: auto; overflow-x: hidden; scroll-snap-type: y mandatory; border-radius: 16px; padding: 0.25rem; }
.reel { position: relative; aspect-ratio: 9/16; background: #0d1320; border: 1px solid var(--glass-stroke); border-radius: 16px; overflow: hidden; scroll-snap-align: start; box-shadow: var(--glass-shadow); width: auto; height: clamp(320px, 42vh, 440px); max-height: none; }
.reel > img, .reel > video, .reel > .r-video { width: 100%; height: 100%; object-fit: cover; display: block; }
/* Ensure demo posters are fully visible in Shorts mode */
.social-layout[data-mode="shorts"] .reel > video { object-fit: contain; background: #0d1320; }
/* Placeholder overlay (not used) */
/* AI demo placeholder */
.r-ai { width: 100%; height: 100%; display: grid; place-items: center; background: linear-gradient(135deg, hsl(220 60% 20% / .9), hsl(260 60% 18% / .9)), radial-gradient(60% 80% at 70% 30%, hsl(210 80% 60% / .25), transparent), radial-gradient(60% 80% at 30% 70%, hsl(280 80% 60% / .25), transparent); background-blend-mode: overlay, normal; position: relative; }
.r-ai::after { content: ""; position: absolute; inset: -50% -50%; background: conic-gradient(from 0deg, hsl(210 80% 60% / .2), hsl(280 80% 60% / .2), hsl(210 80% 60% / .2)); filter: blur(40px); animation: rGlow 12s linear infinite; pointer-events: none; }
@keyframes rGlow { to { transform: rotate(1turn); } }
.r-badge { position: absolute; top: 10px; left: 10px; background: hsl(210 90% 55% / .9); color: white; font-size: 12px; padding: 4px 8px; border-radius: 999px; box-shadow: 0 4px 16px hsl(210 90% 20% / .35); }
.r-meta { position: absolute; left: .75rem; bottom: .75rem; right: .75rem; display: grid; gap: .35rem; color: #fff; text-shadow: 0 1px 8px rgba(0,0,0,0.45); }
.r-user { display: inline-grid; grid-auto-flow: column; gap: .4rem; align-items: center; }
.r-user .avatar { width: 28px; height: 28px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: rgba(255,255,255,0.15); border: 1px solid rgba(255,255,255,0.35); font-weight: 700; }
.r-user .name { font-weight: 700; }
.r-caption { font-size: .95rem; opacity: .95; }

/* Shorts layout mode: center column, hide sidebars to prevent overlap */
.social-layout[data-mode="shorts"] { grid-template-columns: minmax(0, 1fr); }
.social-layout[data-mode="shorts"] .s-left,
.social-layout[data-mode="shorts"] .s-right,
.social-layout[data-mode="shorts"] #feedView { display: none !important; }
.social-layout[data-mode="shorts"] .s-center { width: 100%; max-width: none; margin-inline: auto; }

/* Hide Shorts on small screens; desktop gets vertical TikTok-like feed */
@media (max-width: 899px) {
    .social-switch [data-view="shorts"] { display: none !important; }
    #shorts { display: none !important; }
}
.social-layout[data-mode="shorts"] .shorts { height: calc(100dvh - (var(--navbar-height, 64px) + 80px)); max-height: none; gap: 0; padding: 0; align-items: center; }

/* Sticky centered Shorts header (tabs + tools) */
@media (min-width: 821px) {
    .shorts-header { position: sticky; top: calc(var(--navbar-height) + 8px); z-index: 6; display:grid; justify-content:center; gap:.4rem; margin-bottom:.25rem; padding-bottom:.25rem; border-bottom: none; background: transparent; }
    .social-layout[data-mode="shorts"] .shorts-header { width: clamp(320px, 45vw, 560px); margin-inline: auto; }
    .shorts-counter { border: 1px solid var(--glass-stroke); background: linear-gradient(150deg, var(--glass-tint), var(--glass-tint-alt)); color: var(--text-secondary); font-weight: 700; font-size: .8rem; padding: .3rem .55rem; border-radius: 999px; box-shadow: var(--glass-shadow); }
    .shorts-kbd { display:inline-flex; align-items:center; gap:.35rem; opacity:.8; font-size:.78rem; padding:.28rem .55rem; border-radius:999px; border:1px solid var(--glass-stroke); background: linear-gradient(150deg, var(--glass-tint), var(--glass-tint-alt)); box-shadow: var(--glass-shadow); }
    .shorts-tools { display:flex; gap:.5rem; align-items:center; justify-content:flex-start; }
    /* Offset handle slightly lower so it doesn't clash with sticky bar */
    body[data-shorts] .nav-handle { top: calc(var(--navbar-height) + 10px); }
}

/* Desktop clamp for reels so they don’t appear huge or stacked optically */
@media (min-width: 921px) {
    .social-layout[data-mode="shorts"] .reel { width: auto; height: clamp(280px, 62vh, 420px); margin-inline: auto; margin-block: auto; scroll-snap-align: center; scroll-snap-stop: always; }
}

/* Stronger Shorts mode layout overrides */
.social-layout[data-mode="shorts"] { min-height: calc(100vh - (var(--navbar-height) + 60px)); }
.social-layout[data-mode="shorts"] .s-center { min-height: inherit; }
.social-layout[data-mode="shorts"] .shorts {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .75rem;
    height: 100%;
    max-height: none;
    overflow: auto;
    scroll-snap-type: y mandatory;
    scroll-padding-top: 12vh;
}
.social-layout[data-mode="shorts"] .reel {
    width: clamp(320px, 45vw, 560px);
    max-height: none;
    scroll-snap-align: center;
    box-shadow: 0 8px 24px -12px rgba(0,0,0,.35);
}

@media (max-width: 920px) {
    .shorts { max-height: calc(100dvh - 200px); }
    .reel { max-height: calc(100dvh - 240px); }
}

/* Right-side action column for reels */
.r-actions { position: absolute; right: 10px; bottom: 14px; display: grid; gap: .5rem; opacity: 0; transform: translateY(4px); transition: opacity .2s ease, transform .2s ease; }
.reel:hover .r-actions { opacity: 1; transform: none; }
.ra-btn { appearance:none; border:none; width: 38px; height: 38px; display:grid; place-items:center; border-radius: 50%; cursor:pointer; color: var(--text-secondary); background: linear-gradient(150deg, rgba(255,255,255,0.06), rgba(255,255,255,0.02)); border:1px solid var(--glass-border); box-shadow: 0 4px 14px -6px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.12); }
.ra-btn:hover { color: var(--text-primary); }
.ra-btn.like[aria-pressed="true"] { color: hsl(0 80% 60%); background: linear-gradient(150deg, rgba(220,80,80,0.15), rgba(220,80,80,0.08)); border-color: rgba(220,80,80,0.35); }
/* Wrap for like button + count */
.r-actions .ra-item { display: flex; flex-direction: column; align-items: center; gap: .2rem; }
.r-actions .ra-count { font-size: 11px; line-height: 1; color: var(--text-secondary); }

/* Inline video card style when reels are inside the unified feed */
#feed .reel {
    display: flex;
    flex-direction: column;
    background: linear-gradient(150deg, var(--glass-tint), var(--glass-tint-alt));
    border: 1px solid var(--glass-stroke);
    border-radius: 20px;
    box-shadow: var(--glass-shadow);
    height: auto;
    aspect-ratio: auto;
    overflow: hidden;
}
#feed .reel > .r-video {
    width: 100%;
    height: auto;
    aspect-ratio: 16/9;
    object-fit: cover;
    display: block;
}
#feed .reel .r-meta {
    position: static;
    padding: .55rem .9rem .6rem;
    color: var(--text-primary);
    text-shadow: none;
    order: 2;
}
#feed .reel .r-actions {
    position: static;
    display: flex;
    gap: .6rem;
    padding: .45rem .9rem .35rem;
    opacity: 1;
    transform: none;
    order: 3;
}
#feed .reel .r-actions .ra-item { flex-direction: row; align-items: center; gap: .35rem; }
#feed .reel .ra-btn { width: 34px; height: 34px; }

/* Social page layout */
.social-page { margin-top: calc(var(--navbar-height) + 14px); }
.social-layout { display:grid; grid-template-columns: 300px minmax(0, 1fr) 320px; gap: 1.1rem; align-items: start; }
.s-center { min-width: 0; }
.center-scroll { max-height: calc(100dvh - (var(--navbar-height) + 120px)); overflow: auto; padding-right: .3rem; }
.center-scroll::-webkit-scrollbar { width: 10px; }
.center-scroll::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.12); border-radius: 8px; }
.center-scroll::-webkit-scrollbar-track { background: transparent; }
.projects-page { margin-top: calc(var(--navbar-height) + 12px); }
.projects-layout { display:grid; grid-template-columns: 300px minmax(0, 1fr) 320px; gap: 1rem; align-items: start; }
.profile-page { margin-top: calc(var(--navbar-height) + 12px); }
.s-card { background: linear-gradient(150deg, var(--glass-tint), var(--glass-tint-alt)); border: 1px solid var(--glass-stroke); border-radius: 20px; box-shadow: var(--glass-shadow); padding: 1rem; position: sticky; top: calc(var(--navbar-height) + 16px); overflow: hidden; isolation:isolate; }
.s-left { position: sticky; }
.s-right { position: sticky; }
.s-profile { display:flex; gap:.75rem; align-items:center; margin-bottom: .75rem; }
.s-profile .avatar { width: 44px; height: 44px; border-radius: 50%; display:inline-flex; align-items:center; justify-content:center; color:#fff; font-weight:700; background: hsl(210 70% 45%); box-shadow: inset 0 1px 0 rgba(255,255,255,.25), 0 2px 8px rgba(0,0,0,.25); }
.s-name { font-weight: 700; }
.s-email { font-size: .8rem; color: var(--text-secondary); }
.s-role { margin-top: .35rem; display:inline-block; }
.s-meta { list-style:none; padding:0; margin:.5rem 0 0; display:grid; gap:.4rem; }
.s-meta li { display:flex; align-items:center; justify-content: space-between; font-size:.9rem; }
.s-block { margin-bottom: .95rem; position: relative; overflow: hidden; border-radius: 14px; }
.s-title { font-size: 1rem; margin-bottom: .5rem; }
.s-list { list-style:none; padding:0; margin:0; display:grid; gap:.35rem; }
.s-list li { display:flex; align-items:center; justify-content: space-between; font-size:.9rem; padding:.4rem .5rem; border:1px dashed var(--glass-border); border-radius:10px; }
.s-list .tag { opacity:.9; }
.s-list .count { color: var(--text-secondary); font-size:.85rem; }
.s-people { list-style:none; padding:0; margin:0; display:grid; gap:.5rem; }
.s-people li { display:grid; grid-template-columns: 28px 1fr auto; gap:.5rem; align-items:center; }
.s-people .avatar { width:28px; height:28px; display:inline-flex; align-items:center; justify-content:center; border-radius:50%; color:#fff; background:hsl(var(--h,210) 70% 45%); font-weight:700; }
.s-people .p-name { font-weight:600; font-size:.9rem; }
.s-people .p-role { font-size:.75rem; color: var(--text-secondary); }

/* Feed filtering (global): Projects = posts + boards; Videos = videos only */
#feed[data-mode="projects"] .feed-item:not([data-kind="project"], [data-kind="board"]) { display: none !important; }
#feed[data-mode="videos"] .feed-item:not([data-kind="video"]) { display: none !important; }

@media (max-width: 1100px) {
    .social-layout, .projects-layout { grid-template-columns: 240px minmax(0, 1fr) 280px; gap: 1rem; }
}
@media (max-width: 920px) {
    .social-layout, .projects-layout { grid-template-columns: minmax(0, 1fr); gap: .9rem; }
    .s-left, .s-right { position:static; }
}

.features-section::before {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(1200px 1200px at -10% -10%, rgba(255,255,255,0.03), transparent 50%),
                linear-gradient(145deg, rgba(255,255,255,0.03), rgba(255,255,255,0));
    pointer-events: none;
    z-index: 0;
}

.features-section h2,
.upcoming-section h2,
.profile-section h2,
.about-section h2,
.login-section h2,
.signup-section h2 {
    position: relative;
    display: inline-block;
    padding: 0 0 0.25rem 0;
    font-family: var(--font-heading);
    letter-spacing: -0.012em;
}

.features-section h2::after,
.upcoming-section h2::after,
.profile-section h2::after,
.about-section h2::after,
.login-section h2::after,
.signup-section h2::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -0.1rem;
    width: var(--heading-underline-width);
    height: 2px;
    background: linear-gradient(90deg, var(--blue-1), var(--blue-2));
    border-radius: 2px;
}

/* Accent utilities */
.text-accent { color: var(--accent) !important; }
.border-accent { border-color: var(--accent-20) !important; }

.feature-item {
    padding: 2rem;
    background: linear-gradient(155deg, var(--glass-tint), var(--glass-tint-alt));
    color: var(--text-primary);
    backdrop-filter: saturate(var(--glass-saturation)) blur(var(--glass-blur));
    -webkit-backdrop-filter: saturate(var(--glass-saturation)) blur(var(--glass-blur));
    box-shadow: var(--glass-shadow);
    border-radius: var(--radius-lg);
}
/* Ensure media queries are top-level (not nested in a ruleset) */
/* FINAL MOBILE OVERRIDE: center navbar and show icon + text on all phones */
@media (max-width: 820px) {
    .navbar {
        top: auto !important;
        left: 50% !important;
        right: auto !important;
        transform: translateX(-50%) !important;
        bottom: calc(0.75rem + env(safe-area-inset-bottom, 0)) !important;
        width: min(620px, calc(100% - 1.5rem)) !important;
        height: 64px;
        padding: 0.5rem 0.75rem;
    }
    .navbar .logo { display: none !important; }
    .nav-links { flex: 1 1 auto; justify-content: space-around; gap: clamp(0.15rem, 2.2vw, 0.35rem); flex-wrap: nowrap; }
    .nav-links > li { flex: 1 1 0; min-width: 0; }
    .nav-links a {
        display: inline-flex; flex-direction: column; align-items: center; justify-content: center;
        width: 100% !important; min-width: 44px; text-align: center;
        border-radius: calc(var(--radius-pill) - 32px);
        font-size: clamp(0.64rem, 2.3vw, 0.8rem);
        line-height: 1.1; min-height: 48px;
        -webkit-tap-highlight-color: transparent; touch-action: manipulation;
        padding: 0.5rem 0.65rem;
    }
    /* Ensure labels are always visible (override any icon-only mode) */
        .nav-links a .nav-label { display: inline !important; font-size: clamp(0.58rem, 2.1vw, 0.72rem); letter-spacing: .05em; white-space: nowrap; }
    .nav-links a .nav-icon svg { width: clamp(18px, 4.5vw, 22px); height: clamp(18px, 4.5vw, 22px); }
}

    /* Ultra-small phones (e.g., iPhone SE 320px wide) */
    @media (max-width: 360px) {
        .navbar { height: 60px; bottom: calc(0.5rem + env(safe-area-inset-bottom, 0)) !important; }
        .nav-links { gap: 0.15rem; }
        .nav-links a { padding: 0.45rem 0.5rem; }
        .nav-links a .nav-icon svg { width: clamp(16px, 4.2vw, 20px); height: clamp(16px, 4.2vw, 20px); }
        .nav-links a .nav-label { font-size: clamp(0.54rem, 1.9vw, 0.66rem) !important; }
    }

    /* Icon-only on compact phones; icon + text on larger phones */
    @media (max-width: 390px) {
        .nav-links a .nav-label { display: none !important; }
        .nav-links a { padding: 0.45rem 0.5rem; }
        .nav-links { gap: 0.15rem; }
        .nav-links a .nav-icon svg { width: clamp(18px, 5vw, 22px); height: clamp(18px, 5vw, 22px); }
    }
    @media (min-width: 391px) and (max-width: 820px) {
        .nav-links a .nav-label { display: inline !important; }
    }

/* Continue feature-item styles after media queries */
.feature-item {
    border: 1px solid var(--glass-stroke);
    transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
}

/* Mobile navbar fit fix: avoid squish on phones by enabling horizontal scroll and icon-only below 500px */
@media (max-width: 500px) {
    .navbar { width: min(620px, calc(100% - 1.1rem)); height: 60px; padding: 0.45rem 0.55rem; }
    .nav-links { flex-wrap: nowrap; justify-content: flex-start; gap: 0.35rem; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
    .nav-links::-webkit-scrollbar { display: none; }
    .nav-links > li { flex: 0 0 auto !important; min-width: auto; }
    .nav-links a { width: auto !important; min-width: 56px; padding: 0.45rem 0.5rem; }
    .nav-links a .nav-label { display: none !important; }
}

/* --- Section Spacing & Layout Normalization Overrides --- */
:root { --section-pad-block: 4rem; --section-pad-inline: 2rem; --section-gap-vertical: 3.5rem; }
@media (max-width: 820px){ :root { --section-pad-block: 3rem; --section-pad-inline: 1.25rem; --section-gap-vertical: 2.75rem; } }
@media (max-width: 600px){ :root { --section-pad-block: 2.5rem; --section-gap-vertical: 2.25rem; } }

/* Apply unified width + margin rhythm */
.features-section,
.about-section,
.upcoming-section,
.profile-section,
.login-section,
.signup-section {
        width: min(1200px, 100% - 2rem);
        margin-left: auto; margin-right: auto;
}

/* Mobile tab icon alignment fix: consistent icon box + centered SVGs */
@media (max-width: 820px) {
    .navbar .nav-links a { display: inline-flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.25rem; }
    .navbar .nav-links a .nav-icon { display: inline-grid; place-items: center; width: clamp(20px, 4.8vw, 24px); height: clamp(20px, 4.8vw, 24px); line-height: 0; }
    .navbar .nav-links a .nav-icon svg { width: 100% !important; height: 100% !important; display: block; }
}

@media (max-width: 390px) {
    .navbar .nav-links a .nav-icon { width: clamp(18px, 5vw, 22px); height: clamp(18px, 5vw, 22px); }
}
/* Apply spacing/padding for these sections */
.features-section,
.about-section,
.upcoming-section,
.profile-section,
.login-section,
.signup-section {
    margin-bottom: var(--section-gap-vertical);
    padding: var(--section-pad-block) var(--section-pad-inline);
}
/* Add top margin except when first after hero */
.hero-section + .features-section { margin-top: 2.75rem; }
.features-section:not(.first),
.about-section:not(.first),
.upcoming-section:not(.first),
.profile-section:not(.first) { margin-top: var(--section-gap-vertical); }

/* Ensure section headings have consistent spacing from content */
.features-section h2,
.about-section h2,
.upcoming-section h2,
.profile-section h2,
.login-section h2,
.signup-section h2 { margin: 0 0 2.1rem; font-weight:600; }

/* Space below section intro paragraph (About) already handled; ensure upcoming heading separation if intro text added later */
.upcoming-section h2 { margin-bottom: 1.85rem; }

/* Extra breathing room at bottom of cards vs container border */
.features-section { padding-bottom: calc(var(--section-pad-block) + .5rem); }
.upcoming-section { padding-top: calc(var(--section-pad-block) - .5rem); }

/* Tighten stacked section junctions if any accidental negative collapse */
.features-section + .upcoming-section,
.about-section + .upcoming-section,
.features-section + .about-section { margin-top: var(--section-gap-vertical); }

.feature-item::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, var(--glass-highlight) 0%, rgba(255,255,255,0) 38%), radial-gradient(circle at 50% 0%, rgba(255,255,255,0.18), transparent 60%);
    pointer-events: none;
    z-index: 1;
    mix-blend-mode: overlay;
    border-radius: inherit;
}

.feature-item h3 {
    margin-bottom: 1rem;
    font-size: 1.5rem;
    color: var(--text-primary);
    text-shadow: none;
    font-family: var(--font-heading);
    letter-spacing: -0.01em;
}

.feature-item p {
    font-size: 1rem;
    color: var(--text-secondary);
    text-shadow: none;
}

/* Shared glass card styling for About + Upcoming project items (restored after duplicate purge) */
.about-item, .project-item {
    /* Match feature-item padding & surface for parity */
    padding: 2rem;
    background: linear-gradient(155deg, var(--glass-tint), var(--glass-tint-alt));
    color: var(--text-primary);
    backdrop-filter: saturate(var(--glass-saturation)) blur(var(--glass-blur));
    -webkit-backdrop-filter: saturate(var(--glass-saturation)) blur(var(--glass-blur));
    box-shadow: var(--glass-shadow);
    border-radius: var(--radius-lg);
    border: 1px solid var(--glass-stroke);
    position: relative;
    overflow: hidden;
    flex: 1 1 320px;
    transition: box-shadow .25s cubic-bezier(.4,0,.2,1), transform .25s cubic-bezier(.4,0,.2,1);
}
.about-item::after, .project-item::after { /* sheen */
    content:""; position:absolute; inset:0; pointer-events:none; mix-blend-mode:overlay; border-radius:inherit;
    background: linear-gradient(180deg,var(--glass-highlight) 0%,rgba(255,255,255,0) 42%), radial-gradient(circle at 50% 0%,rgba(255,255,255,.18),transparent 60%);
    -webkit-clip-path: inset(0 round var(--radius-lg));
            clip-path: inset(0 round var(--radius-lg));
}
.about-item h3, .project-item h3 {
    margin:0 0 .85rem; font-family: var(--font-heading); letter-spacing:-.01em; font-size:1.3rem; color: var(--text-primary);
}
.about-item p, .project-item p { margin:0 0 1.1rem; font-size:.95rem; line-height:1.5; color: var(--text-secondary); }
.about-item:hover, .project-item:hover { box-shadow: 0 6px 20px -4px rgba(0,0,0,.55), inset 0 1px 0 rgba(255,255,255,.18); transform: translateY(-3px); }

/* Unified hover elevation across all glass cards (features/about/projects/profile) */
.feature-item:hover, .about-item:hover, .project-item:hover, .profile-info:hover, .profile-projects:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 26px -6px rgba(0,0,0,0.6), inset 0 1px 0 rgba(255,255,255,0.18);
}

@media (prefers-reduced-motion: reduce) {
    .feature-item:hover, .about-item:hover, .project-item:hover, .profile-info:hover, .profile-projects:hover { transform: none !important; }
}

/* About section heading paragraph refinement */
.about-section > p { max-width: 760px; margin: 1.25rem auto 2.5rem; font-size: 1.05rem; line-height:1.55; color: var(--text-secondary); text-align:center; }
/* Heading underline consistency override (handles lingering duplicated legacy blocks below) */
.features-section h2::after,
.about-section h2::after,
.upcoming-section h2::after,
.profile-section h2::after,
.login-section h2::after,
.signup-section h2::after { height:3px !important; border-radius:3px !important; bottom:-0.35rem !important; }

/* Horizontal projects scroller polish */
.projects-container { gap:1.5rem !important; padding: .5rem .25rem 1.25rem .25rem; position:relative; 
    /* Use a mask to create non-intrusive edge fades that adapt to any theme without painting white */
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 28px, #000 calc(100% - 28px), transparent 100%);
            mask-image: linear-gradient(90deg, transparent, #000 28px, #000 calc(100% - 28px), transparent 100%);
}
.projects-container::-webkit-scrollbar { height: 10px; }
.projects-container::-webkit-scrollbar-track { background: transparent; }
.projects-container::-webkit-scrollbar-thumb { background: var(--accent-20); border-radius: 20px; }
/* Disable painted edge overlays; mask above handles the fade without introducing white in light theme */
.projects-container::before, .projects-container::after { content:none; }

/* Chip row + chip base (base styles were only in light-mode overrides before) */
.chip-row { display:flex; flex-wrap:wrap; gap:.5rem; }
.chip { display:inline-block; padding:.45rem .75rem .5rem; font-size:.65rem; letter-spacing:.5px; font-weight:600; border-radius:999px; text-transform:uppercase; background:rgba(var(--accent-rgb),0.10); color:var(--text-primary); border:1px solid rgba(var(--accent-rgb),0.22); backdrop-filter:saturate(140%) blur(4px); -webkit-backdrop-filter:saturate(140%) blur(4px); box-shadow: 0 2px 6px -2px rgba(0,0,0,0.22); }
.chip:hover { background:rgba(var(--accent-rgb),0.18); }

@media (prefers-color-scheme: light) {
    .about-item, .project-item { border:1px solid var(--accent-outline); }
    /* No painted overlays in light mode either; the mask remains theme-agnostic */
    .projects-container::before, .projects-container::after { content:none; }
    .chip { background:rgba(var(--accent-rgb),0.10); color:#1d2e46; }
    .chip:hover { background:rgba(var(--accent-rgb),0.16); }
}

@media (max-width: 820px) {
    .about-item, .project-item { flex:1 1 auto; }
    .projects-container { gap:1rem !important; }
    .projects-container::before, .projects-container::after { display:none; }
}

/* Responsive Design for Features Section handled in consolidated block below */

/* Removed placeholder styles (unused) */

/* Footer */
/* Footer - Improved contrast and visibility */
.footer {
    padding: 2.75rem 2rem 2.5rem;
    background: linear-gradient(155deg, var(--glass-tint), var(--glass-tint-alt));
    border: 1px solid var(--glass-stroke);
    border-radius: var(--radius-lg);
    box-shadow: var(--glass-shadow);
    color: var(--text-primary);
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.25rem;
    position: relative;
    overflow: hidden; /* ensure overlays are clipped to rounded corners */
    margin: 3rem auto 2rem;
    width: min(1200px, 100% - 2rem);
}

.footer::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, var(--glass-highlight) 0%, rgba(255,255,255,0) 38%), radial-gradient(circle at 50% 0%, rgba(255,255,255,0.18), transparent 60%);
    pointer-events: none;
    mix-blend-mode: overlay;
    z-index: 0;
    border-radius: inherit;
    -webkit-clip-path: inset(0 round var(--radius-lg));
    clip-path: inset(0 round var(--radius-lg));
}

.footer p,
.social-links a {
    color: var(--text-secondary);
    text-shadow: none;
}

.footer p {
    margin-bottom: 0.25rem;
    font-size: 0.95rem;
    font-weight: 500;
    letter-spacing: 0.4px;
}

.social-links {
    list-style: none;
    display: flex;
    justify-content: center;
    gap: 1rem;
    margin-top: 1rem;
}

.social-links a {
    text-decoration: none;
    font-size: 1rem;
}

.social-links a:hover {
    color: var(--accent);
    text-shadow: none;
}

@media (max-width: 768px) {
    .social-links {
        flex-direction: column;
    }
}

/* Responsive footer refinements */
@media (max-width: 820px) {
    .footer {
        padding: 1.75rem 1.25rem calc(1.5rem + env(safe-area-inset-bottom,0));
        gap: 1rem;
        margin: 2.5rem 1rem 1.25rem;
        width: auto;
    }
    .footer p { font-size: 0.85rem; line-height: 1.4; }
    .social-links { flex-direction: row; flex-wrap: wrap; gap: 0.6rem; }
    .social-links a.chip { font-size: 0.65rem; padding: 0.35rem 0.55rem; }
}

@media (prefers-color-scheme: light) {
    .footer { border-color: var(--accent-outline); }
}


/* Animations */

@keyframes fadeUp {
    from {
        opacity: 0;
        transform: translateY(50px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* --- Performance optimizations (mobile + general) --- */
/* Reduce heavy blur/shadow on phones and pin key UI to its own layer to avoid flicker */
@media (max-width: 600px) {
    :root {
        --glass-blur: 3px; /* lighter blur for smoother scroll */
        --glass-saturation: 140%;
        --glass-shadow: 0 4px 14px -6px rgba(0,0,0,0.35);
    }
    .navbar, .footer {
        will-change: transform, opacity;
        transform: translateZ(0);
        -webkit-backface-visibility: hidden;
        backface-visibility: hidden;
        contain: layout paint; /* contain repaint area */
        isolation: isolate; /* avoid blend bleeding */
    }
    .navbar::before, .navbar::after, .footer::after { will-change: opacity; }
}

/* Virtualize large blocks to cut initial paint cost; browsers that don't support will ignore */
.feature-item,
.project-item,
.about-item,
.profile-info,
.profile-projects,
.feed .post-card,
.s-card {
    content-visibility: auto;
    contain-intrinsic-size: 220px; /* reserve space to prevent jumps */
}

/* Respect reduced motion to eliminate transition jank */
@media (prefers-reduced-motion: reduce) {
    * { animation: none !important; transition: none !important; }
    html:focus-within { scroll-behavior: auto; }
}

/* Responsive Design */
@media (max-width: 768px) {
    .hero-section h1 {
        font-size: 2rem;
    }

    .projects-container {
        flex-direction: column;
        align-items: center;
    }

    .feature-item, .project-item {
        width: 80%;
        margin-bottom: 2rem;
    }

    /* nav layout handled by mobile rules above */
}
/* (Duplicate legacy section styles removed above for maintainability) */

/* Reduced Motion: suppress large transforms & animations */
@media (prefers-reduced-motion: reduce) {
    .feature-item, .about-item, .project-item, .profile-info, .profile-projects, .hero-content, .auth-form { transition: none !important; }
    .feature-item:hover, .about-item:hover, .project-item:hover, .profile-info:hover, .profile-projects:hover { transform: none !important; }
    .view-enter, .view-exit { animation: none !important; }
}

/* Authentication Forms */
/* Auth Form Styles */
/* Improved contrast and readability for Auth Form */
.auth-form {
    background: linear-gradient(155deg, var(--glass-tint), var(--glass-tint-alt));
    border: 1px solid var(--glass-stroke);
    backdrop-filter: saturate(var(--glass-saturation)) blur(var(--glass-blur));
    -webkit-backdrop-filter: saturate(var(--glass-saturation)) blur(var(--glass-blur));
    border-radius: var(--radius-lg);
    padding: 2rem;
    max-width: 400px;
    margin: 2rem auto;
    color: var(--text-primary);
    position: relative;
    overflow: hidden;
    box-shadow: var(--glass-shadow);
}

/* Auth wrapper: centers heading + form and constrains width */
.auth-wrap {
        width: min(760px, 100%);
        margin: 0 auto;
        text-align: center;
}
.auth-wrap .page-title { font-size: clamp(1.6rem, 3vw, 2rem); margin: 0 0 .35rem; }
.auth-wrap .page-lead { margin: 0 0 1rem; font-size: .98rem; }

/* Glass variant: extra rim and backdrop polish on auth forms */
.auth-form.glass {
        background: linear-gradient(155deg, var(--glass-tint), var(--glass-tint-alt));
        border: 1px solid var(--glass-stroke);
        box-shadow: var(--glass-shadow), inset 0 1px 0 rgba(255,255,255,0.08);
}

/* Unified header spacing on pages using profile-header wrapper */
.profile-header { margin: 0 0 1.25rem; }
.profile-header .page-title { font-size: clamp(1.5rem, 2.6vw, 2rem); margin: 0; }
.profile-header .page-lead { margin-top: .25rem; }

/* Auth helper link */
.auth-link { color: var(--accent-400); text-decoration: underline; }
.auth-link:hover { color: var(--accent-500); }

@media (max-width: 600px){
    .auth-wrap { width: min(520px, 100%); }
    .auth-wrap .page-title { font-size: 1.45rem; }
}

.auth-form::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, var(--glass-highlight) 0%, rgba(255,255,255,0) 38%), radial-gradient(circle at 50% 0%, rgba(255,255,255,0.18), transparent 60%);
    pointer-events: none;
    z-index: 1;
    border-radius: inherit;
    mix-blend-mode: overlay;
}

/* Improve visibility of auth-form labels */
.auth-form label {
    color: var(--text-secondary);
    font-weight: 600;
    text-shadow: none;
    margin-bottom: 0.5rem;
}

.auth-form input {
    background: var(--glass-bg);
    color: var(--text-primary);
    border: 1px solid var(--glass-border);
    border-radius: 12px;
    padding: 0.75rem;
    margin-bottom: 1rem;
    font-size: 1rem;
    backdrop-filter: var(--blur-soft);
    -webkit-backdrop-filter: var(--blur-soft);
    box-shadow: none;
    width: 100%;
}
/* Centering the Signup Section */
.signup-section, .login-section {
    display: flex;
    flex-direction: column;
    align-items: center;  /* Center the form */
    justify-content: center;  /* Center vertically if needed */
    min-height: 100vh; /* Ensure the section fills the screen height */
    background:
        radial-gradient(1000px 700px at 15% 85%, var(--section-haze-weak), transparent 65%),
        radial-gradient(900px 600px at 85% 15%, var(--section-haze-weak), transparent 65%),
        linear-gradient(to bottom, var(--surface-1), var(--surface-2));
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-elev-2);
    position: relative;
    overflow: hidden;
    backdrop-filter: var(--blur-soft);
    -webkit-backdrop-filter: var(--blur-soft);
}
/* Form grouping */
.auth-form .form-group {
    margin-bottom: 1rem;
}

/* Submit button */
.auth-form .auth-btn {
    width: 100%;
    padding: 1rem;
    background: linear-gradient(155deg, var(--glass-tint), var(--glass-tint-alt));
    backdrop-filter: saturate(var(--glass-saturation)) blur(var(--glass-blur));
    -webkit-backdrop-filter: saturate(var(--glass-saturation)) blur(var(--glass-blur));
    color: var(--text-primary);
    border: 1px solid var(--glass-stroke);
    border-radius: 14px;
    cursor: pointer;
    font-size: 1rem;
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), background-color 0.3s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: var(--glass-shadow), inset 0 1px 0 rgba(255,255,255,0.18);
    overflow: hidden;
}

.auth-form .auth-btn::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, var(--glass-highlight) 0%, rgba(255,255,255,0) 38%), radial-gradient(circle at 50% 0%, rgba(255,255,255,0.18), transparent 60%);
    pointer-events: none;
    z-index: 1;
    border-radius: inherit;
    mix-blend-mode: overlay;
}

.auth-form .auth-btn:hover {
    transform: none;
    box-shadow: 0 8px 20px rgba(0,0,0,0.55), inset 0 1px 0 rgba(255,255,255,0.25);
}

/* --- Duplicated legacy blocks removed below to reduce file size and confusion --- */

/* Add shadow effect to navbar on scroll */
.navbar.scrolled {
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4); /* Adjusted shadow on scroll */
    background: var(--glass-bg);
}

/* Improved gradient overlay for the "glass" effect */
.navbar::after {
    content: "";
    position: absolute;
    inset: 0;
    background:
        linear-gradient(180deg, var(--glass-highlight) 0%, rgba(255,255,255,0) 30%),
        radial-gradient(circle at 50% 0%, rgba(255,255,255,0.20), rgba(255,255,255,0) 60%);
    mask: linear-gradient(180deg, rgba(0,0,0,0.85), rgba(0,0,0,0));
    pointer-events: none;
    z-index: 1;
}

/* Subtle rim glow */
.navbar::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    pointer-events: none;
    box-shadow: 0 0 0 1px var(--glass-inner-stroke), 0 0 0 2px rgba(255,255,255,0.06), 0 2px 8px -2px rgba(0,0,0,0.45), 0 4px 18px -6px rgba(0,0,0,0.55);
    mix-blend-mode: overlay;
    opacity: .55;
}

/* Logo styling */
.navbar .logo {
    font-size: 1.8rem;
    font-weight: 700;
    color: var(--text-primary); /* Lighter text color */
    font-family: var(--font-heading);
    letter-spacing: -0.01em;
    transition: color 0.3s ease;
}

/* Removed menu-toggle (no collapsible nav needed) */

/* Theme toggle styles removed: auto theming is now based on system preference */

/* (burger icon removed) */

/* Nav Links - Common Styles */
.nav-links {
    display: flex;
    list-style: none;
    gap: 1.5rem;
    align-items: center; /* Ensure items are vertically centered */
}

.nav-links li {
    margin: 0;
}

/* Link Styles */
.nav-links a {
    background: transparent;
    color: var(--text-secondary);
    text-shadow: none;
    font-weight: 600;
    text-decoration: none;
    font-size: 0.95rem;
    padding: 0.5rem 1rem;
    border-radius: var(--radius-sm);
    font-family: inherit;
    transition: all 0.2s ease; /* Faster transition */
    position: relative;
    z-index: 1;
    border: 1px solid transparent;
        display: inline-flex;
        align-items: center;
        gap: 0.55rem;
}

.nav-links a .nav-icon { display: inline-flex; line-height: 0; opacity: .85; }
.nav-links a .nav-icon svg { display: block; width: 18px; height: 18px; }
.nav-links a.active .nav-icon, .nav-links a:hover .nav-icon { opacity: 1; }

@media (max-width: 820px) {
    /* Selective no-scroll panels: elements marked with data-noscroll-mobile fill viewport; others scroll normally */
    [data-noscroll-mobile] {
        min-height: calc(100dvh - 120px); /* account for top + bottom spacing/nav */
        display: flex;
        flex-direction: column;
        justify-content: center;
    }
    /* Prevent inner extra offset for those panels since we vertically center */
    [data-noscroll-mobile].page-offset { padding-top: 0; }
    .nav-links a { flex-direction: column; gap: 0.25rem; padding: 0.4rem 0.55rem; }
    .nav-links a .nav-label { font-size: 0.6rem; letter-spacing: .05em; }
    .nav-links a .nav-icon svg { width: 20px; height: 20px; }
}

.nav-links a.active {
    background: linear-gradient(155deg, var(--glass-tint), var(--glass-tint-alt));
    box-shadow: inset 0 -2px 0 var(--accent-20), 0 2px 10px rgba(0,0,0,0.25), inset 0 1px 0 rgba(255,255,255,0.12);
    color: var(--text-primary);
    border-color: var(--glass-stroke);
}

.nav-links a:hover {
    color: var(--text-primary);
    background: linear-gradient(155deg, var(--glass-tint), var(--glass-tint-alt));
    box-shadow: inset 0 -2px 0 var(--accent-10), 0 2px 10px rgba(0,0,0,0.25), inset 0 1px 0 rgba(255,255,255,0.12);
    border-color: var(--glass-stroke);
}

.nav-links a:hover::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    /* Removed hover specific pseudo element - see global hover effect below */
}

@media (max-width: 820px) {
    /* Single-view mode: sections hidden inline via JS; fade transitions */
    [data-view] { transition: opacity 0.28s ease; }
    [data-view][style*='display: none'] { opacity: 0; }
    .navbar {
        top: auto;
        left: 50%;
        right: auto;
        transform: translateX(-50%);
        width: min(620px, calc(100% - 1.5rem));
        bottom: calc(0.75rem + env(safe-area-inset-bottom, 0));
        height: 64px;
        padding: 0.5rem 0.75rem;
        justify-content: center;
        gap: 0.5rem;
    }
    .navbar .logo { display: none; }
    .nav-links { flex: 1; justify-content: space-around; gap: clamp(0.15rem, 2.2vw, 0.35rem); flex-wrap: nowrap; }
    .nav-links li { flex: 1 1 0; min-width: 0; }
    .nav-links a {
        padding: 0.55rem 0.9rem;
        width: 100%;
        min-width: 48px;
        text-align: center;
        border-radius: calc(var(--radius-pill) - 32px);
        font-size: clamp(0.64rem, 2.3vw, 0.8rem);
        line-height: 1.1;
        min-height: 48px; /* ensure finger target */
        -webkit-tap-highlight-color: transparent;
        touch-action: manipulation;
    }
    .nav-links a .nav-icon svg { width: clamp(18px, 4.5vw, 22px); height: clamp(18px, 4.5vw, 22px); }
    body { padding-bottom: calc(96px + env(safe-area-inset-bottom, 0)); }
    /* Tighter container side padding for very small screens */
    .container { width: min(1200px, 100% - 1.25rem); }
    /* Hero adjustments */
    .hero-section { background-position: center top; }
    .hero-content { padding: 1.5rem 1.25rem; }
    .hero-content h1 { font-size: 2.2rem; line-height: 1.1; }
    .hero-content p { font-size: 1.05rem; }
    .hero-content button { width: 100%; font-size: 1rem; padding: 0.9rem 1.25rem; }
    /* Section vertical rhythm */
    .features-section, .about-section, .upcoming-section, .profile-section, .social-section { padding: 3rem 1.25rem; }
    /* Cards full width stacking */
    .projects-container, .profile-container { flex-direction: column; }
    .feature-item, .project-item, .about-item, .profile-info, .profile-projects { width: 100%; margin-inline: auto; }
    /* Reduce heavy shadow for less visual noise */
    .feature-item, .project-item, .about-item, .profile-info, .profile-projects, .hero-content { box-shadow: 0 4px 18px -4px rgba(0,0,0,0.55); }
    /* Horizontal project scroller usability */
    .projects-container { -webkit-overflow-scrolling: touch; scroll-snap-type: x proximity; }
    .projects-container::-webkit-scrollbar { display: none; }
    /* Chips tighter but tappable */
    .chip { padding: 0.4rem 0.65rem; font-size: 0.7rem; }
    /* Footer spacing */
    .footer { padding-bottom: calc(2rem + env(safe-area-inset-bottom, 0)); }
}

/* Additional mobile refinements */
@media (max-width: 600px) {
    /* Utility classes */
    .mobile-hidden { display: none !important; }
    .mobile-only { display: initial !important; }
    body { font-size: 15px; }
    .hero-section { height: auto; padding-top: 5.5rem; padding-bottom: 4.5rem; }
    .hero-content { padding: 1.25rem 1rem 1.4rem; }
    .hero-content h1 { font-size: 1.85rem; }
    .hero-content p { font-size: 0.92rem; line-height: 1.35; }
    .features-section, .about-section, .upcoming-section, .profile-section, .social-section { padding: 2.5rem 1.25rem; margin-bottom: 2.5rem; }
    .feature-item, .project-item, .about-item, .profile-info, .profile-projects { padding: 1.35rem 1.1rem 1.4rem; }
    .chip { font-size: 0.62rem; padding: 0.3rem 0.5rem; }
    .auth-form { padding: 1.5rem 1.25rem; margin: 1.25rem auto; }
    .auth-form input { padding: 0.65rem 0.7rem; font-size: 0.95rem; }
    .auth-form .auth-btn { padding: 0.8rem 1rem; font-size: 0.95rem; }
        .footer { margin: 1.75rem 1rem 0.85rem; padding: 1.25rem 1rem 1.1rem; gap: 0.75rem; }
        .footer p { font-size: 0.76rem; }
        .footer.compact { margin: 1rem 0.75rem 0.5rem; padding: 0.9rem 0.85rem 0.85rem; }
}

/* View transition animations (mobile) */
@media (max-width: 820px) {
    [data-view] { will-change: opacity, transform; }
    .view-active { display: block !important; }
    .view-enter { animation: ccViewIn 280ms both cubic-bezier(.4,0,.2,1); }
    .view-exit { animation: ccViewOut 200ms both cubic-bezier(.4,0,.2,1); }
    @keyframes ccViewIn { from { opacity:0; transform: translateX(12px); } to { opacity:1; transform: translateX(0); } }
    @keyframes ccViewOut { from { opacity:1; transform: translateX(0);} to { opacity:0; transform: translateX(-8px);} }
    @media (prefers-reduced-motion: reduce) { .view-enter, .view-exit { animation: none !important; } }
}

/* Offline / online banner */
.network-banner { position: fixed; top: 0; left: 50%; transform: translateX(-50%); background: linear-gradient(135deg, var(--glass-tint), var(--glass-tint-alt)); backdrop-filter: saturate(var(--glass-saturation)) blur(var(--glass-blur)); -webkit-backdrop-filter: saturate(var(--glass-saturation)) blur(var(--glass-blur)); color: var(--text-primary); padding: .55rem .9rem; border: 1px solid var(--glass-stroke); border-radius: var(--radius-pill); font-size: .75rem; display: flex; align-items: center; gap: .75rem; z-index: 1200; box-shadow: var(--glass-shadow); }
.network-banner button { padding: .4rem .75rem; font-size: .65rem; border-radius: 999px; }
.network-banner.offline { background: linear-gradient(150deg, rgba(200,50,50,0.25), rgba(200,50,50,0.15)), linear-gradient(135deg, var(--glass-tint), var(--glass-tint-alt)); }
.network-banner.online { background: linear-gradient(135deg, var(--accent-20), var(--accent-05)); }

/* Install button (secondary) */
.install-btn { margin-left: .75rem; background: linear-gradient(155deg, var(--accent-20), var(--accent-05)); border: 1px solid var(--accent-20); color: var(--text-primary); padding: .7rem 1.1rem; font-size: .85rem; border-radius: 14px; cursor:pointer; box-shadow: 0 4px 14px -4px rgba(0,0,0,0.45), inset 0 1px 0 rgba(255,255,255,0.18); }
.install-btn:hover { box-shadow: 0 6px 16px -4px rgba(0,0,0,0.55), inset 0 1px 0 rgba(255,255,255,0.25); }
@media (max-width: 600px){ .install-btn { width:100%; margin: .75rem 0 0; text-align:center; } }

@media (max-width: 480px) {
    .hero-content h1 { font-size: 1.65rem; }
    .hero-content p { font-size: 0.85rem; }
    .nav-links a .nav-icon svg { width: 18px; height: 18px; }
    .nav-links a { min-height: 44px; }
    .feature-item h3, .project-item h3, .about-item h3, .profile-info h3, .profile-projects h3 { font-size: 1.15rem; }
    .feature-item p, .project-item p, .about-item p, .profile-info p, .profile-projects li { font-size: 0.85rem; }
    .auth-form { max-width: 340px; }
    .auth-form label { font-size: 0.75rem; }
    .auth-form input { font-size: 0.85rem; }
    .auth-form .auth-btn { font-size: 0.9rem; }
    .chip { font-size: 0.58rem; }
}

@media (max-width: 360px) {
    /* Hide less-critical hero paragraph to save space; developer can remove this if keeping copy is critical */
    .hero-content p { display: none; }
    .hero-content h1 { font-size: 1.5rem; }
}

/* Very small devices: extra fine-tuning */
@media (max-width: 420px) {
    .hero-content h1 { font-size: 1.95rem; }
    .hero-content p { font-size: 0.95rem; }
    .nav-links a { font-size: 0.7rem; padding: 0.5rem 0.65rem; }
    .chip { font-size: 0.66rem; }
}

/* Landscape phone: reduce hero height to reveal content below */
@media (max-height: 540px) and (orientation: landscape) {
    .hero-section { height: auto; padding-top: 5.5rem; padding-bottom: 5rem; }
    .hero-content { margin-block: 2rem; }
}

@media (min-width: 821px) {
    .nav-links { display: flex; }
}

/* Hero Section Styles */
.hero-section {
    position: relative;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    color: white;
    text-align: center;
    background: url('background.webp') no-repeat center center/cover;
    background-color: rgba(0, 0, 0, 0.3);
    background-blend-mode: overlay;
    overflow: hidden;
}

.hero-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background:
        radial-gradient(1000px 600px at 15% 10%, var(--section-haze-weak), transparent 65%),
        radial-gradient(900px 600px at 85% 15%, var(--section-haze-weak), transparent 65%),
        linear-gradient(180deg, rgba(0,0,0,0.55), rgba(0,0,0,0.45));
    z-index: 1;
    /* No backdrop blur to avoid any perceived motion */
}

.hero-content {
    position: relative;
    z-index: 2;
    background: linear-gradient(155deg, var(--glass-tint), var(--glass-tint-alt));
    backdrop-filter: saturate(var(--glass-saturation)) blur(var(--glass-blur));
    -webkit-backdrop-filter: saturate(var(--glass-saturation)) blur(var(--glass-blur));
    border-radius: var(--radius-lg);
    padding: 2rem;
    border: 1px solid var(--glass-stroke);
    box-shadow: var(--glass-shadow);
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    overflow: hidden;
}

.hero-content::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, var(--glass-highlight) 0%, rgba(255,255,255,0) 38%), radial-gradient(circle at 50% 0%, rgba(255,255,255,0.18), transparent 60%);
    pointer-events: none;
    z-index: 1;
    border-radius: inherit; /* ensure rounded highlight */
    mix-blend-mode: overlay;
}

.hero-content h1 {
    font-size: 3.5rem;
    margin-bottom: 1rem;
    font-weight: bold;
    color: var(--text-primary);
    text-shadow: none;
    font-family: var(--font-heading);
    letter-spacing: -0.015em;
}

/* Mobile hero brand (appears only on small screens) */
.mobile-hero-brand {
    display: none;
    font-family: var(--font-heading);
    font-weight: 600;
    font-size: 0.85rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    background: linear-gradient(135deg, var(--accent-20), var(--accent-05));
    padding: 0.4rem 0.85rem;
    border-radius: 32px;
    border: 1px solid var(--glass-stroke);
    margin-bottom: 0.75rem;
    color: var(--text-secondary);
    position: relative;
    overflow: hidden;
}
.mobile-hero-brand::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, var(--glass-highlight) 0%, rgba(255,255,255,0) 55%);
    pointer-events: none;
    mix-blend-mode: overlay;
}

@media (max-width: 820px) {
    .mobile-hero-brand { display: inline-block; }
    .hero-content h1 { margin-top: 0; }
}

.hero-content p {
    font-size: 1.5rem;
    margin-bottom: 1.5rem;
    color: var(--text-secondary);
    text-shadow: none;
}

.hero-content button {
    position: relative;
    background: linear-gradient(155deg, var(--glass-tint), var(--glass-tint-alt));
    backdrop-filter: saturate(var(--glass-saturation)) blur(var(--glass-blur));
    -webkit-backdrop-filter: saturate(var(--glass-saturation)) blur(var(--glass-blur));
    color: var(--text-primary);
    padding: 1rem 2rem;
    border: 1px solid var(--glass-stroke);
    border-radius: 14px;
    font-size: 1.2rem;
    font-weight: 600;
    box-shadow: var(--glass-shadow), inset 0 1px 0 rgba(255,255,255,0.18);
    cursor: pointer;
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), background-color 0.3s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    overflow: hidden;
}

.hero-content button::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, var(--glass-highlight) 0%, rgba(255,255,255,0) 38%), radial-gradient(circle at 50% 0%, rgba(255,255,255,0.18), transparent 60%);
    pointer-events: none;
    z-index: 1;
    border-radius: inherit;
    mix-blend-mode: overlay;
}

.hero-content button:hover {
    background-color: var(--glass-bg);
    transform: none;
    box-shadow: 0 8px 16px rgba(255, 255, 255, 0.05);
}

@media (max-width: 768px) {
    .hero-content h1 {
        font-size: 2rem;
    }
    .hero-content p {
        font-size: 1rem;
    }
    .hero-content button {
        padding: 0.75rem 1.5rem;
        font-size: 1rem;
    }
}
/* Removed unused .glass-box styles */

/* Features Section */
.features-section {
    padding: 4rem 2rem;
    text-align: center;
    background:
        radial-gradient(1200px 800px at 20% -10%, var(--section-haze-strong), transparent 60%),
        radial-gradient(900px 600px at 110% 10%, var(--section-haze-weak), transparent 65%),
        linear-gradient(to bottom, var(--surface-1), var(--surface-2));
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-elev-2);
    position: relative;
    overflow: hidden;
    backdrop-filter: var(--blur-soft);
    -webkit-backdrop-filter: var(--blur-soft);
}

/* Subtle accent top bar for sections */
.features-section::after,
.upcoming-section::after,
.about-section::after,
.profile-section::after,
.login-section::after,
.signup-section::after {
    content: '';
    position: absolute;
    top: 0.5rem;
    left: 1.25rem;
    right: 1.25rem;
    height: 2px;
    background: linear-gradient(90deg, var(--blue-1), var(--blue-2));
    opacity: var(--section-bar-opacity);
    pointer-events: none;
}

.features-section::before {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(1200px 1200px at -10% -10%, rgba(255,255,255,0.03), transparent 50%),
                linear-gradient(145deg, rgba(255,255,255,0.03), rgba(255,255,255,0));
    pointer-events: none;
    z-index: 0;
}

.features-section h2,
.upcoming-section h2,
.profile-section h2,
.about-section h2,
.login-section h2,
.signup-section h2 {
    position: relative;
    display: inline-block;
    padding: 0 0 0.25rem 0;
    font-family: var(--font-heading);
    letter-spacing: -0.012em;
}

.features-section h2::after,
.upcoming-section h2::after,
.profile-section h2::after,
.about-section h2::after,
.login-section h2::after,
.signup-section h2::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -0.1rem;
    width: var(--heading-underline-width);
    height: 2px;
    background: linear-gradient(90deg, var(--blue-1), var(--blue-2));
    border-radius: 2px;
}

/* Accent utilities */
.text-accent { color: var(--accent) !important; }
.border-accent { border-color: var(--accent-20) !important; }

.feature-item {
    padding: 2rem;
    background: linear-gradient(155deg, var(--glass-tint), var(--glass-tint-alt));
    color: var(--text-primary);
    backdrop-filter: saturate(var(--glass-saturation)) blur(var(--glass-blur));
    -webkit-backdrop-filter: saturate(var(--glass-saturation)) blur(var(--glass-blur));
    box-shadow: var(--glass-shadow);
    border-radius: var(--radius-lg);
    border: 1px solid var(--glass-stroke);
    transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
}

.feature-item::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, var(--glass-highlight) 0%, rgba(255,255,255,0) 38%), radial-gradient(circle at 50% 0%, rgba(255,255,255,0.18), transparent 60%);
    pointer-events: none;
    z-index: 1;
    mix-blend-mode: overlay;
}

.feature-item h3 {
    margin-bottom: 1rem;
    font-size: 1.5rem;
    color: var(--text-primary);
    text-shadow: none;
    font-family: var(--font-heading);
    letter-spacing: -0.01em;
}

.feature-item p {
    font-size: 1rem;
    color: var(--text-secondary);
    text-shadow: none;
}

/* Responsive Design for Features Section handled in consolidated block below */

/* Removed placeholder styles (unused) */

/* Footer */
/* Footer - Improved contrast and visibility */
.footer {
    padding: 2.75rem 2rem 2.5rem;
    background: linear-gradient(155deg, var(--glass-tint), var(--glass-tint-alt));
    border: 1px solid var(--glass-stroke);
    border-radius: var(--radius-lg);
    box-shadow: var(--glass-shadow);
    color: var(--text-primary);
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.25rem;
    position: relative;
    overflow: hidden;
    margin: 3rem auto 2rem;
    width: min(1200px, 100% - 2rem);
}

.footer::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, var(--glass-highlight) 0%, rgba(255,255,255,0) 38%), radial-gradient(circle at 50% 0%, rgba(255,255,255,0.18), transparent 60%);
    pointer-events: none;
    mix-blend-mode: overlay;
    z-index: 0;
    border-radius: inherit;
    -webkit-clip-path: inset(0 round var(--radius-lg));
    clip-path: inset(0 round var(--radius-lg));
}

.footer p,
.social-links a {
    color: var(--text-secondary);
    text-shadow: none;
}

.footer p {
    margin-bottom: 0.25rem;
    font-size: 0.95rem;
    font-weight: 500;
    letter-spacing: 0.4px;
}

.social-links {
    list-style: none;
    display: flex;
    justify-content: center;
    gap: 1rem;
    margin-top: 1rem;
}

.social-links a {
    text-decoration: none;
    font-size: 1rem;
}

.social-links a:hover {
    color: var(--accent);
    text-shadow: none;
}

@media (max-width: 768px) {
    .social-links {
        flex-direction: column;
    }
}

/* Responsive footer refinements */
@media (max-width: 820px) {
    .footer {
        padding: 1.75rem 1.25rem calc(1.5rem + env(safe-area-inset-bottom,0));
        gap: 1rem;
        margin: 2.5rem 1rem 1.25rem;
        width: auto;
    }
    .footer p { font-size: 0.85rem; line-height: 1.4; }
    .social-links { flex-direction: row; flex-wrap: wrap; gap: 0.6rem; }
    .social-links a.chip { font-size: 0.65rem; padding: 0.35rem 0.55rem; }
}

@media (prefers-color-scheme: light) {
    .footer { border-color: var(--accent-outline); }
}


/* Animations */

@keyframes fadeUp {
    from {
        opacity: 0;
        transform: translateY(50px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Responsive Design */
@media (max-width: 768px) {
    .hero-section h1 {
        font-size: 2rem;
    }

    .projects-container {
        flex-direction: column;
        align-items: center;
    }

    .feature-item, .project-item {
        width: 80%;
        margin-bottom: 2rem;
    }

    /* nav layout handled by mobile rules above */
}
/* Existing Styles for Home, About, Features, etc. */

/* === Unified button hover/focus enhancements ===
   Provide consistent, smooth, "liquid" hover for buttons/tabs/chips on social page.
   Added at end so it overrides earlier fragmented rules without editing them.
*/
.auth-btn,
.tab,
.chip,
.btn.subtle,
.ra-btn,
.composer-fab,
.install-btn,
.theme-toggle {
    border-radius: 12px;
    transition: transform .22s cubic-bezier(.2,.9,.2,1), box-shadow .28s cubic-bezier(.2,.9,.2,1), background-color .18s ease, color .12s ease;
    position: relative;
    overflow: hidden;
    -webkit-tap-highlight-color: transparent;
}

/* subtle sheen pseudo element reused across interactive elements */
.auth-btn::before,
.tab::before,
.chip::before,
.btn.subtle::before,
.ra-btn::before,
.composer-fab::before,
.install-btn::before,
.theme-toggle::before {
    content: "";
    position: absolute;
    left: var(--gx,50%);
    top: var(--gy,50%);
    width: 200px;
    height: 200px;
    border-radius: 50%;
    clip-path: circle(50% at 50% 50%);
    pointer-events: none;
    mix-blend-mode: screen;
    background: radial-gradient(circle at center, rgba(255,255,255,0.16), rgba(255,255,255,0.06) 30%, rgba(255,255,255,0) 65%);
    opacity: 0;
    transform: translate(-50%,-50%) scale(1);
    transition: opacity .28s ease, transform .36s cubic-bezier(.2,.9,.2,1);
}

/* Accent bloom to add soft colored glow */
.auth-btn::after,
.tab::after,
.chip::after,
.btn.subtle::after,
.ra-btn::after,
.composer-fab::after,
.install-btn::after,
.theme-toggle::after {
    content: "";
    position: absolute;
    left: var(--bx,50%);
    top: var(--by,50%);
    width: 300px;
    height: 300px;
    border-radius: 50%;
    clip-path: circle(50% at 50% 50%);
    pointer-events: none;
    mix-blend-mode: overlay;
    background: radial-gradient(circle at center, rgba(var(--accent-rgb),0.08), rgba(var(--accent-rgb),0.03) 36%, rgba(0,0,0,0) 68%);
    filter: blur(20px);
    opacity: 0;
    transform: translate(-50%,-50%) scale(1);
    transition: opacity .36s ease, transform .36s cubic-bezier(.2,.9,.2,1);
}

/* Hover & focus states */
.auth-btn:not([disabled]):hover,
.tab:hover,
.chip:hover,
.btn.subtle:hover,
.ra-btn:hover,
.composer-fab:hover,
.install-btn:hover,
.theme-toggle:hover,
.auth-btn:focus,
.tab:focus,
.chip:focus,
.btn.subtle:focus,
.ra-btn:focus,
.composer-fab:focus,
.install-btn:focus,
.theme-toggle:focus {
    transform: translateY(-3px);
    box-shadow: 0 10px 26px -10px rgba(0,0,0,0.5), inset 0 1px 0 rgba(255,255,255,0.06);
}
.auth-btn:not([disabled]):hover::before,
.tab:hover::before,
.chip:hover::before,
.btn.subtle:hover::before,
.ra-btn:hover::before,
.composer-fab:hover::before,
.install-btn:hover::before,
.theme-toggle:hover::before,
.auth-btn:focus::before,
.tab:focus::before,
.chip:focus::before {
    opacity: 1;
    transform: translate(-50%,-50%) scale(1.06);
}
.auth-btn:not([disabled]):hover::after,
.tab:hover::after,
.chip:hover::after,
.btn.subtle:hover::after,
.ra-btn:hover::after,
.composer-fab:hover::after,
.install-btn:hover::after,
.theme-toggle:hover::after,
.auth-btn:focus::after,
.tab:focus::after,
.chip:focus::after {
    opacity: 1;
    transform: translate(-50%,-50%) scale(1.06);
}

/* Focus visible for keyboard users */
.auth-btn:focus-visible,
.tab:focus-visible,
.chip:focus-visible,
.btn.subtle:focus-visible,
.ra-btn:focus-visible,
.composer-fab:focus-visible,
.install-btn:focus-visible,
.theme-toggle:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px var(--focus-ring), 0 8px 24px -8px rgba(0,0,0,0.6);
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce) {
    .auth-btn::before, .auth-btn::after, .tab::before, .tab::after, .chip::before, .chip::after { transition: none !important; }
    .auth-btn, .tab, .chip, .btn.subtle, .nav-links a { transition: none !important; }
}


/* Authentication Forms */
/* Auth Form Styles */
/* Improved contrast and readability for Auth Form */
.auth-form {
    background: linear-gradient(155deg, var(--glass-tint), var(--glass-tint-alt));
    border: 1px solid var(--glass-stroke);
    backdrop-filter: saturate(var(--glass-saturation)) blur(var(--glass-blur));
    -webkit-backdrop-filter: saturate(var(--glass-saturation)) blur(var(--glass-blur));
    border-radius: var(--radius-lg);
    padding: 2rem;
    max-width: 400px;
    margin: 2rem auto;
    color: var(--text-primary);
    position: relative;
    overflow: hidden;
    box-shadow: var(--glass-shadow);
}

.auth-form::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, var(--glass-highlight) 0%, rgba(255,255,255,0) 38%), radial-gradient(circle at 50% 0%, rgba(255,255,255,0.18), transparent 60%);
    pointer-events: none;
    z-index: 1;
    border-radius: inherit;
    mix-blend-mode: overlay;
}

/* Improve visibility of auth-form labels */
.auth-form label {
    color: var(--text-secondary);
    font-weight: 600;
    text-shadow: none;
    margin-bottom: 0.5rem;
}

.auth-form input {
    background: var(--glass-bg);
    color: var(--text-primary);
    border: 1px solid var(--glass-border);
    border-radius: 12px;
    padding: 0.75rem;
    margin-bottom: 1rem;
    font-size: 1rem;
    backdrop-filter: var(--blur-soft);
    -webkit-backdrop-filter: var(--blur-soft);
    box-shadow: none;
    width: 100%;
}
/* Centering the Signup Section */
.signup-section, .login-section {
    display: flex;
    flex-direction: column;
    align-items: center;  /* Center the form */
    justify-content: center;  /* Center vertically if needed */
    min-height: 100vh; /* Ensure the section fills the screen height */
    background:
        radial-gradient(1000px 700px at 15% 85%, var(--section-haze-weak), transparent 65%),
        radial-gradient(900px 600px at 85% 15%, var(--section-haze-weak), transparent 65%),
        linear-gradient(to bottom, var(--surface-1), var(--surface-2));
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-elev-2);
    position: relative;
    overflow: hidden;
    backdrop-filter: var(--blur-soft);
    -webkit-backdrop-filter: var(--blur-soft);
}
/* Form grouping */
.auth-form .form-group {
    margin-bottom: 1rem;
}

/* Submit button */
.auth-form .auth-btn {
    width: 100%;
    padding: 1rem;
    background: linear-gradient(155deg, var(--glass-tint), var(--glass-tint-alt));
    backdrop-filter: saturate(var(--glass-saturation)) blur(var(--glass-blur));
    -webkit-backdrop-filter: saturate(var(--glass-saturation)) blur(var(--glass-blur));
    color: var(--text-primary);
    border: 1px solid var(--glass-stroke);
    border-radius: 14px;
    cursor: pointer;
    font-size: 1rem;
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), background-color 0.3s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: var(--glass-shadow), inset 0 1px 0 rgba(255,255,255,0.18);
    overflow: hidden;
}

.auth-form .auth-btn::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, var(--glass-highlight) 0%, rgba(255,255,255,0) 38%), radial-gradient(circle at 50% 0%, rgba(255,255,255,0.18), transparent 60%);
    pointer-events: none;
    z-index: 1;
    border-radius: inherit;
    mix-blend-mode: overlay;
}

.auth-form .auth-btn:hover {
    transform: none;
    box-shadow: 0 8px 20px rgba(0,0,0,0.55), inset 0 1px 0 rgba(255,255,255,0.25);
}

/* Profile Section */
.profile-section {margin-top:4rem;}
.profile-header {display:flex; gap:1rem; align-items:center; margin-bottom:2rem;}
.profile-heading-icon {width:56px;height:56px;display:grid;place-items:center;border-radius:24px;background:linear-gradient(160deg,var(--glass-bg-accent),var(--glass-bg-fade));box-shadow:inset 0 0 0 1px var(--glass-border-strong),0 4px 12px -4px rgba(0,0,0,.4);} 
.profile-heading-icon svg {stroke:var(--accent-400);}
.profile-sub {font-size:.9rem; opacity:.7; margin-top:.25rem;}

/* Consistent page titles */
.page-title { font-family: var(--font-heading); font-weight:700; letter-spacing:-.01em; color: var(--text-primary); }
.page-lead { color: var(--text-secondary); }
.profile-grid {display:grid; gap:1.5rem; grid-template-columns:repeat(auto-fit,minmax(260px,1fr));}
.profile-card {position:relative; padding:1.25rem 1.25rem 1.5rem; border-radius:28px; background:var(--glass-bg); backdrop-filter:blur(var(--glass-blur)); -webkit-backdrop-filter:blur(var(--glass-blur)); box-shadow:0 1px 2px rgba(0,0,0,.4),0 4px 18px -6px rgba(0,0,0,.55),inset 0 0 0 1px var(--glass-border),inset 0 0 0 1.5px var(--glass-border-soft),inset 0 0 0 2px rgba(255,255,255,.03);} 
.profile-card::before {content:""; position:absolute; inset:0; border-radius:inherit; background:linear-gradient(160deg,rgba(var(--accent-rgb),.18),rgba(var(--accent-rgb),0) 55%); mix-blend-mode:overlay; pointer-events:none;}
.card-title {font-size:1rem; font-weight:600; letter-spacing:.5px; display:flex; align-items:center; gap:.5rem; margin:0 0 1rem;}
.badge {display:inline-block; background:linear-gradient(145deg,var(--accent-600),var(--accent-400)); color:#fff; font-size:.65rem; font-weight:600; padding:4px 8px 5px; border-radius:10px; letter-spacing:.5px; box-shadow:0 0 0 1px var(--glass-border-strong),0 2px 4px rgba(0,0,0,.4);} 
.profile-meta {list-style:none; margin:0 0 1rem; padding:0; display:flex; flex-direction:column; gap:.65rem;}
.profile-meta li {display:flex; justify-content:space-between; gap:1rem; font-size:.85rem;}
.field-label {font-weight:500; opacity:.75;}
.field-value {font-weight:600; font-feature-settings:"case" 1;}
.profile-actions {display:flex; gap:.5rem;}
.btn.subtle {background:rgba(var(--accent-rgb),.06); border:1px solid var(--glass-border); color:var(--accent-400); padding:.55rem .9rem; font-size:.75rem; border-radius:12px; font-weight:600; letter-spacing:.5px; backdrop-filter:blur(var(--glass-blur)); -webkit-backdrop-filter:blur(var(--glass-blur)); position:relative; box-shadow: 0 2px 6px -2px rgba(0,0,0,0.18);} 
.btn.subtle:hover {background:rgba(var(--accent-rgb),.10);} 
.btn.subtle:focus-visible {outline:2px solid var(--accent-400); outline-offset:2px;}
.projects-list {list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:.6rem; max-height:260px; overflow:auto; scrollbar-width:thin;}
.projects-list::-webkit-scrollbar {width:6px;}
.projects-list::-webkit-scrollbar-thumb {background:linear-gradient(var(--accent-500),var(--accent-400)); border-radius:4px;}
.proj-row {display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:.6rem; padding:.55rem .7rem; border-radius:14px; background:linear-gradient(140deg,rgba(var(--accent-rgb),.07),rgba(var(--accent-rgb),.03)); position:relative; box-shadow:inset 0 0 0 1px var(--glass-border),0 1px 1.5px rgba(0,0,0,.45);} 
.proj-row::after {content:""; position:absolute; inset:0; border-radius:inherit; background:radial-gradient(circle at 30% 25%,rgba(255,255,255,.14),transparent 65%); mix-blend-mode:overlay; pointer-events:none;}
.proj-row:hover {background:linear-gradient(140deg,rgba(var(--accent-rgb),.12),rgba(var(--accent-rgb),.05));}
.proj-dot {width:10px; height:10px; border-radius:50%; background:linear-gradient(145deg,var(--accent-400),var(--accent-600)); box-shadow:0 0 0 1px var(--glass-border-strong),0 0 0 3px rgba(var(--accent-rgb),.25);} 
.proj-name {font-size:.8rem; font-weight:500; letter-spacing:.3px;}
.proj-tag {font-size:.6rem; font-weight:600; text-transform:uppercase; letter-spacing:1px; padding:4px 6px 5px; border-radius:8px; background:linear-gradient(145deg,var(--accent-600),var(--accent-400)); color:#fff; box-shadow:0 0 0 1px var(--glass-border-strong);}
#profile-role {text-transform:capitalize;}
@media (max-width:600px){
  .profile-grid {grid-template-columns:1fr;}
  .profile-card {border-radius:24px;}
  .profile-heading-icon {width:48px; height:48px; border-radius:20px;}
}

/* Profile nav auth visibility refinement */


/* Light theme overrides (automatic via system preference) */
@media (prefers-color-scheme: light) {
    :root {
        --bg-start: #f7f9fc; /* white */
        --bg-end: #eef2f7;   /* very light blue-grey */
        --text-primary: #111319;
        --text-secondary: #4a5563; /* slightly deeper for accessibility */
        --accent: #2563eb; /* modern blue */
        --accent-05: rgba(37, 99, 235, 0.05);
        --accent-10: rgba(37, 99, 235, 0.10);
        --accent-15: rgba(37, 99, 235, 0.15);
        --accent-20: rgba(37, 99, 235, 0.20);
        --accent-25: rgba(37, 99, 235, 0.25);
    --focus-ring: rgba(37, 99, 235, 0.45);
    --glass-bg: rgba(255, 255, 255, 0.72);
    --glass-border: rgba(0, 0, 0, 0.10);
        --surface-1: #ffffff;
        --surface-2: #f3f6fb;
        --surface-3: rgba(255,255,255,0.78);
        --blue-1: #1d4ed8; /* slightly deeper start in light */
    --blue-2: #60a5fa;
    --section-bar-opacity: 0.30;
    --heading-underline-width: 56%;
    --section-haze-weak: var(--accent-10);
    --section-haze-strong: var(--accent-20);
    --accent-sheen: linear-gradient(90deg, rgba(37,99,235,0.18), rgba(96,165,250,0.10) 45%, rgba(37,99,235,0));
    --accent-outline: rgba(37,99,235,0.25);
    --accent-outline-hover: rgba(37,99,235,0.35);
    --glass-tint: rgba(255,255,255,0.62);
    --glass-tint-alt: rgba(255,255,255,0.50);
    --glass-stroke: rgba(0,0,0,0.08);
    --glass-inner-stroke: rgba(255,255,255,0.75);
    --glass-highlight: rgba(255,255,255,0.70);
    --glass-rim: rgba(255,255,255,0.60);
    --glass-shadow: 0 4px 18px -4px rgba(0,0,0,0.15);
    }
}

/* Phase 1: Typography Overhaul - Introduced 'Space Grotesk' for modern futuristic styling */
/* Basic Reset */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* Prevent horizontal shifting from oversized hover effects */
html, body { overflow-x: hidden; }

/* Skip to Main Content Link (for screen readers and keyboard users) */
.skip-link {
    position: absolute;
    top: -40px;
    left: 0;
    background: var(--glass-bg);
    color: var(--text-primary);
    padding: 8px;
    z-index: 100;
    transition: top 0.3s;
}

.skip-link:focus {
    top: 0;
}

/* Body and Basic Styles */
body {
    font-family: var(--font-body);
    line-height: 1.5; /* Slightly tighter line spacing */
    background: linear-gradient(135deg, var(--bg-start), var(--bg-end)); /* Dark, modern background gradient */
    color: var(--text-primary); /* Light gray for primary text */
    -webkit-font-smoothing: antialiased; /* Improve font rendering on macOS */
    -moz-osx-font-smoothing: grayscale; /* Improve font rendering on Firefox macOS */
    caret-color: var(--accent);
}

/* Reusable frosted glass utilities */
.glass {
    background: linear-gradient(140deg, var(--glass-tint) 0%, var(--glass-tint-alt) 100%);
    border: 1px solid var(--glass-stroke);
    backdrop-filter: saturate(var(--glass-saturation)) blur(var(--glass-blur));
    -webkit-backdrop-filter: saturate(var(--glass-saturation)) blur(var(--glass-blur));
    position: relative;
}
.glass::after {
    content: '';
    position: absolute;
    inset: 0;
    background:
        linear-gradient(180deg, var(--glass-highlight) 0%, rgba(255,255,255,0) 14%),
        linear-gradient(140deg, rgba(255,255,255,0.10) 0%, rgba(255,255,255,0.02) 60%);
    pointer-events: none;
}
.glass-elev-1 { box-shadow: var(--glass-shadow); }
.glass-pill { border-radius: var(--radius-pill); }
.glass-rounded { border-radius: var(--radius-lg); }

/* Subclass for subtle inset border highlight */
.glass-inset {
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.25), 0 4px 20px -4px rgba(0,0,0,0.45);
}

html { color-scheme: dark light; }

/* Light mode readability refinements */
@media (prefers-color-scheme: light) {
    .feature-item p,
    .project-item p,
    .about-item p,
    .profile-info p,
    .profile-projects li,
    .hero-content p { color: #2e3640; }
    .nav-links a { color: #3d4a58; }
    .nav-links a.active, .nav-links a:hover { color: #1a2027; background: linear-gradient(150deg, rgba(37,99,235,0.18), rgba(37,99,235,0.08)); box-shadow: inset 0 -2px 0 var(--accent-20), 0 2px 6px rgba(30,64,175,0.15); border-color: var(--accent-outline); }
    .chip { background: rgba(37,99,235,0.08); color: #1d3658; border: 1px solid rgba(37,99,235,0.25); }
    .chip:hover { background: rgba(37,99,235,0.14); }
    .feature-item, .project-item, .about-item, .profile-info, .profile-projects { border: 1px solid rgba(37,99,235,0.14); position: relative; }
    .feature-item::before, .project-item::before, .about-item::before, .profile-info::before, .profile-projects::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: var(--accent-sheen); pointer-events: none; border-top-left-radius: inherit; border-top-right-radius: inherit; }
    .feature-item:hover, .project-item:hover, .about-item:hover, .profile-info:hover, .profile-projects:hover { border-color: var(--accent-outline-hover); }
    .hero-content { border: 1px solid rgba(37,99,235,0.18); }
    .hero-content::after { mix-blend-mode: normal; }
    .navbar { border-color: rgba(37,99,235,0.22); }
    .navbar::before { box-shadow: 0 0 0 1px rgba(255,255,255,0.65), 0 0 0 2px rgba(37,99,235,0.08), 0 2px 8px -2px rgba(0,0,0,0.25); }
    .footer { backdrop-filter: saturate(var(--glass-saturation)) blur(3px); }
    .hero-section { background-blend-mode: normal, overlay; }
}

/* Accent selection to match modern blue */
::selection { background: var(--accent-20); color: var(--text-primary); }
::-moz-selection { background: var(--accent-20); color: var(--text-primary); }

/* Utility: page offset for fixed navbar */
.page-offset {
    padding-top: calc(var(--navbar-height) + 24px);
}

/* Ensure anchored headings don't hide under fixed navbar */
header[id], section[id] { scroll-margin-top: calc(var(--navbar-height) + 16px); }

/* Utility: container */
.container {
    width: min(1200px, 100% - 2rem);
    margin-inline: auto;
}

/* General Navbar Styles (for both mobile and desktop) */
.navbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    padding: 0.65rem 1rem;
    background: linear-gradient(150deg, var(--glass-tint), var(--glass-tint-alt));
    border: 1px solid var(--glass-stroke);
    backdrop-filter: saturate(var(--glass-saturation)) blur(var(--glass-blur));
    -webkit-backdrop-filter: saturate(var(--glass-saturation)) blur(var(--glass-blur));
    border-radius: var(--radius-pill);
    box-shadow: var(--glass-shadow);
    position: fixed;
    left: 1rem;
    right: 1rem;
    top: 1rem;
    z-index: 1000;
    overflow: hidden;
    transition: all 0.35s ease;
    height: var(--navbar-height);
}

/* Removed separate .tab-bar (single adaptive navbar used) */

/* Add shadow effect to navbar on scroll */
.navbar.scrolled {
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4); /* Adjusted shadow on scroll */
    background: var(--glass-bg);
}

/* Improved gradient overlay for the "glass" effect */
.navbar::after {
    content: "";
    position: absolute;
    inset: 0;
    background:
        linear-gradient(180deg, var(--glass-highlight) 0%, rgba(255,255,255,0) 30%),
        radial-gradient(circle at 50% 0%, rgba(255,255,255,0.20), rgba(255,255,255,0) 60%);
    mask: linear-gradient(180deg, rgba(0,0,0,0.85), rgba(0,0,0,0));
    pointer-events: none;
    z-index: 1;
}

/* Subtle rim glow */
.navbar::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    pointer-events: none;
    box-shadow: 0 0 0 1px var(--glass-inner-stroke), 0 0 0 2px rgba(255,255,255,0.06), 0 2px 8px -2px rgba(0,0,0,0.45), 0 4px 18px -6px rgba(0,0,0,0.55);
    mix-blend-mode: overlay;
    opacity: .55;
}

/* Logo styling */
.navbar .logo {
    font-size: 1.8rem;
    font-weight: 700;
    color: var(--text-primary); /* Lighter text color */
    font-family: var(--font-heading);
    letter-spacing: -0.01em;
    transition: color 0.3s ease;
}

/* Removed menu-toggle (no collapsible nav needed) */

/* Theme toggle styles removed: auto theming is now based on system preference */

/* (burger icon removed) */

/* Nav Links - Common Styles */
.nav-links {
    display: flex;
    list-style: none;
    gap: 1.5rem;
    align-items: center; /* Ensure items are vertically centered */
}

.nav-links li {
    margin: 0;
}

/* Link Styles */
.nav-links a {
    background: transparent;
    color: var(--text-secondary);
    text-shadow: none;
    font-weight: 600;
    text-decoration: none;
    font-size: 0.95rem;
    padding: 0.5rem 1rem;
    border-radius: var(--radius-sm);
    font-family: inherit;
    transition: all 0.2s ease; /* Faster transition */
    position: relative;
    z-index: 1;
    border: 1px solid transparent;
        display: inline-flex;
        align-items: center;
        gap: 0.55rem;
}

.nav-links a .nav-icon { display: inline-flex; line-height: 0; opacity: .85; }
.nav-links a .nav-icon svg { display: block; width: 18px; height: 18px; }
.nav-links a.active .nav-icon, .nav-links a:hover .nav-icon { opacity: 1; }

@media (max-width: 820px) {
    /* Selective no-scroll panels: elements marked with data-noscroll-mobile fill viewport; others scroll normally */
    [data-noscroll-mobile] {
        min-height: calc(100dvh - 120px); /* account for top + bottom spacing/nav */
        display: flex;
        flex-direction: column;
        justify-content: center;
    }
    /* Prevent inner extra offset for those panels since we vertically center */
    [data-noscroll-mobile].page-offset { padding-top: 0; }
    .nav-links a { flex-direction: column; gap: 0.25rem; padding: 0.4rem 0.55rem; }
    .nav-links a .nav-label { font-size: 0.6rem; letter-spacing: .05em; }
    .nav-links a .nav-icon svg { width: 20px; height: 20px; }
}

.nav-links a.active {
    background: linear-gradient(155deg, var(--glass-tint), var(--glass-tint-alt));
    box-shadow: inset 0 -2px 0 var(--accent-20), 0 2px 10px rgba(0,0,0,0.25), inset 0 1px 0 rgba(255,255,255,0.12);
    color: var(--text-primary);
    border-color: var(--glass-stroke);
}

.nav-links a:hover {
    color: var(--text-primary);
    background: linear-gradient(155deg, var(--glass-tint), var(--glass-tint-alt));
    box-shadow: inset 0 -2px 0 var(--accent-10), 0 2px 10px rgba(0,0,0,0.25), inset 0 1px 0 rgba(255,255,255,0.12);
    border-color: var(--glass-stroke);
}

.nav-links a:hover::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    /* Removed hover specific pseudo element - see global hover effect below */
}

@media (max-width: 820px) {
    /* Single-view mode: sections hidden inline via JS; fade transitions */
    [data-view] { transition: opacity 0.28s ease; }
    [data-view][style*='display: none'] { opacity: 0; }
    .navbar {
        top: auto;
        bottom: 1rem;
        height: 64px;
        padding: 0.5rem 0.75rem;
        justify-content: center;
        gap: 0.5rem;
        /* Lift nav slightly if device has a home indicator */
        margin-bottom: env(safe-area-inset-bottom, 0);
    }
    .navbar .logo { display: none; }
    .nav-links { flex: 1; justify-content: space-around; gap: 0.25rem; }
    .nav-links a {
        padding: 0.55rem 0.9rem;
        min-width: 48px;
        text-align: center;
        border-radius: calc(var(--radius-pill) - 32px);
        font-size: 0.78rem;
        line-height: 1.1;
        min-height: 48px; /* ensure finger target */
    }
    body { padding-bottom: calc(96px + env(safe-area-inset-bottom, 0)); }
    /* Tighter container side padding for very small screens */
    .container { width: min(1200px, 100% - 1.25rem); }
    /* Hero adjustments */
    .hero-section { background-position: center top; }
    .hero-content { padding: 1.5rem 1.25rem; }
    .hero-content h1 { font-size: 2.2rem; line-height: 1.1; }
    .hero-content p { font-size: 1.05rem; }
    .hero-content button { width: 100%; font-size: 1rem; padding: 0.9rem 1.25rem; }
}
/* Section vertical rhythm (duplicate truncated line removed) */

/* Final mobile tab bar centering + sizing override (wins last in cascade) */
@media (max-width: 820px) {
    nav.navbar[aria-label="Primary Navigation"] {
        position: fixed;
        top: auto !important;
        left: 0 !important;
        right: 0 !important;
        margin-left: auto;
        margin-right: auto;
        bottom: calc(0.75rem + env(safe-area-inset-bottom, 0)) !important;
        width: min(620px, calc(100% - 1.5rem)) !important;
        transform: none !important;
    }
    nav.navbar[aria-label="Primary Navigation"] .nav-links {
        display: flex;
        flex-wrap: nowrap;
        justify-content: space-around;
        gap: clamp(0.15rem, 2.2vw, 0.35rem);
    }
    nav.navbar[aria-label="Primary Navigation"] .nav-links > li { flex: 1 1 0; min-width: 0; }
    nav.navbar[aria-label="Primary Navigation"] .nav-links a {
        width: 100%;
        min-width: 44px;
        text-align: center;
        border-radius: calc(var(--radius-pill) - 32px);
        font-size: clamp(0.64rem, 2.3vw, 0.8rem);
        line-height: 1.1;
        min-height: 48px;
        -webkit-tap-highlight-color: transparent;
        touch-action: manipulation;
    }
    nav.navbar[aria-label="Primary Navigation"] .nav-links a .nav-icon svg { width: clamp(18px, 4.5vw, 22px); height: clamp(18px, 4.5vw, 22px); }
}

/* Phase 1 UI/UX Redesign: Metallic luxe core-page overrides */
:root {
    /* Semantic palette: dark-first metallic + sapphire */
    --color-canvas-0: #05070c;
    --color-canvas-1: #090e16;
    --color-canvas-2: #0f1622;
    --color-canvas-3: #141d2d;
    --color-surface-1: rgba(15, 21, 32, 0.76);
    --color-surface-2: rgba(20, 27, 41, 0.84);
    --color-surface-3: rgba(28, 37, 55, 0.88);
    --color-surface-4: rgba(12, 17, 27, 0.94);
    --metal-line: rgba(233, 241, 252, 0.10);
    --metal-line-strong: rgba(233, 241, 252, 0.18);
    --metal-rim: rgba(255, 255, 255, 0.26);
    --metal-sheen: rgba(255, 255, 255, 0.08);
    --metal-highlight: rgba(255, 255, 255, 0.24);
    --gem-sapphire-300: #78adff;
    --gem-sapphire-400: #5b96ff;
    --gem-sapphire-500: #2f6fe8;
    --gem-sapphire-600: #1f56c9;
    --gem-sapphire-rgb: 91, 150, 255;
    --text-primary-strong: #eff3fa;
    --text-secondary-muted: #c5cedc;
    --text-tertiary-muted: #95a3b8;
    --elevation-metal-1: 0 8px 24px -16px rgba(0, 0, 0, 0.55);
    --elevation-metal-2: 0 18px 44px -22px rgba(0, 0, 0, 0.62);
    --elevation-metal-3: 0 24px 60px -26px rgba(0, 0, 0, 0.72);
    --focus-ring-metal: rgba(120, 173, 255, 0.55);
    --motion-fast: 140ms;
    --motion-med: 220ms;
    --space-1: 0.5rem;
    --space-2: 0.75rem;
    --space-3: 1rem;
    --space-4: 1.25rem;
    --space-5: 1.5rem;
    --space-6: 2rem;
    --space-7: 2.5rem;
    --radius-card: 20px;
    --radius-panel: 24px;

    /* Compatibility aliases for existing rules */
    --bg-start: var(--color-canvas-0);
    --bg-end: var(--color-canvas-2);
    --surface-1: #101721;
    --surface-2: #151e2d;
    --surface-3: rgba(19, 26, 39, 0.84);
    --text-primary: var(--text-primary-strong);
    --text-secondary: var(--text-secondary-muted);
    --accent: var(--gem-sapphire-400);
    --accent-400: var(--gem-sapphire-400);
    --accent-500: var(--gem-sapphire-500);
    --accent-600: var(--gem-sapphire-600);
    --accent-rgb: var(--gem-sapphire-rgb);
    --accent-outline: rgba(var(--gem-sapphire-rgb), 0.30);
    --focus-ring: var(--focus-ring-metal);
    --glass-tint: rgba(18, 24, 36, 0.64);
    --glass-tint-alt: rgba(27, 36, 53, 0.58);
    --glass-bg: rgba(15, 21, 32, 0.78);
    --glass-border: var(--metal-line);
    --glass-stroke: var(--metal-line-strong);
    --glass-inner-stroke: rgba(255, 255, 255, 0.34);
    --glass-highlight: rgba(255, 255, 255, 0.22);
    --glass-rim: var(--metal-rim);
    --glass-shadow: var(--elevation-metal-2);
    --glass-blur: 10px;
    --glass-saturation: 150%;
    --brand-grad: linear-gradient(90deg, var(--gem-sapphire-400), #c7dbff);
    --blue-1: var(--gem-sapphire-500);
    --blue-2: var(--gem-sapphire-300);
}

@media (prefers-color-scheme: light) {
    :root {
        --color-canvas-0: #eef2f8;
        --color-canvas-1: #f4f7fb;
        --color-canvas-2: #fbfdff;
        --color-canvas-3: #ffffff;
        --color-surface-1: rgba(255, 255, 255, 0.90);
        --color-surface-2: rgba(247, 250, 255, 0.96);
        --color-surface-3: rgba(240, 245, 252, 0.98);
        --color-surface-4: rgba(255, 255, 255, 0.99);
        --metal-line: rgba(17, 24, 39, 0.08);
        --metal-line-strong: rgba(17, 24, 39, 0.15);
        --metal-rim: rgba(255, 255, 255, 0.75);
        --metal-sheen: rgba(255, 255, 255, 0.66);
        --metal-highlight: rgba(255, 255, 255, 0.86);
        --gem-sapphire-300: #7bb1ff;
        --gem-sapphire-400: #4a86f5;
        --gem-sapphire-500: #2d65db;
        --gem-sapphire-600: #1f4fb4;
        --gem-sapphire-rgb: 74, 134, 245;
        --text-primary-strong: #0f1726;
        --text-secondary-muted: #405066;
        --text-tertiary-muted: #64748b;
        --elevation-metal-1: 0 10px 24px -20px rgba(15, 23, 42, 0.35);
        --elevation-metal-2: 0 16px 38px -24px rgba(15, 23, 42, 0.28);
        --elevation-metal-3: 0 22px 46px -26px rgba(15, 23, 42, 0.24);
        --focus-ring-metal: rgba(74, 134, 245, 0.42);

        --surface-1: #ffffff;
        --surface-2: #f6f9fe;
        --surface-3: rgba(248, 251, 255, 0.95);
        --glass-tint: rgba(255, 255, 255, 0.76);
        --glass-tint-alt: rgba(244, 248, 255, 0.84);
        --glass-bg: rgba(255, 255, 255, 0.88);
        --glass-border: var(--metal-line);
        --glass-stroke: var(--metal-line-strong);
        --glass-inner-stroke: rgba(255, 255, 255, 0.92);
        --glass-highlight: rgba(255, 255, 255, 0.75);
        --glass-rim: rgba(255, 255, 255, 0.70);
        --glass-shadow: var(--elevation-metal-2);
        --glass-blur: 4px;
        --glass-saturation: 120%;
    }
}

body {
    background:
        radial-gradient(1200px 900px at 10% -10%, rgba(var(--accent-rgb), 0.12), transparent 65%),
        radial-gradient(950px 700px at 95% 8%, rgba(255, 255, 255, 0.05), transparent 75%),
        linear-gradient(155deg, var(--color-canvas-0), var(--color-canvas-1) 38%, var(--color-canvas-2));
    color: var(--text-primary);
}

@media (prefers-color-scheme: light) {
    body {
        background:
            radial-gradient(1200px 900px at 10% -10%, rgba(var(--accent-rgb), 0.08), transparent 65%),
            radial-gradient(1000px 800px at 95% 8%, rgba(110, 124, 160, 0.08), transparent 72%),
            linear-gradient(160deg, var(--color-canvas-0), var(--color-canvas-1) 45%, var(--color-canvas-2));
    }
}

a:focus-visible,
button:focus-visible,
textarea:focus-visible,
input:focus-visible,
.chip:focus-visible,
.social-switch .tab:focus-visible,
.nav-links a:focus-visible {
    outline: 2px solid var(--focus-ring-metal);
    outline-offset: 2px;
}

/* Shared metallic surfaces */
.glass,
.s-card,
.composer-card,
.post-card,
.project-item,
.about-item,
.feature-item,
.profile-card,
.modal-content,
.footer {
    background: linear-gradient(155deg, var(--glass-tint), var(--glass-tint-alt));
    border: 1px solid var(--glass-stroke);
    box-shadow: var(--glass-shadow);
}

.s-card,
.composer-card,
.post-card,
.project-item,
.modal-content,
.footer {
    position: relative;
    overflow: hidden;
}

.s-card::before,
.composer-card::before,
.post-card::before,
.modal-content::before,
.footer::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    border-radius: inherit;
    background:
        linear-gradient(180deg, var(--metal-highlight) 0%, rgba(255, 255, 255, 0) 28%),
        linear-gradient(135deg, rgba(var(--accent-rgb), 0.08), rgba(var(--accent-rgb), 0) 55%);
    opacity: 0.9;
    mix-blend-mode: overlay;
}

.s-card > *,
.composer-card > *,
.post-card > *,
.modal-content > *,
.footer > * {
    position: relative;
    z-index: 1;
}

/* Navbar */
.navbar {
    background: linear-gradient(150deg, rgba(18, 23, 34, 0.82), rgba(28, 36, 52, 0.72));
    border: 1px solid var(--glass-stroke);
    box-shadow: var(--elevation-metal-2), inset 0 1px 0 rgba(255, 255, 255, 0.06);
    transition: transform var(--motion-med) ease, box-shadow var(--motion-med) ease, background-color var(--motion-med) ease;
}

.navbar::before {
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.10),
        inset 0 0 0 1px rgba(255, 255, 255, 0.03),
        0 0 0 1px rgba(var(--accent-rgb), 0.06),
        0 14px 34px -24px rgba(0, 0, 0, 0.9);
    opacity: 0.8;
}

.navbar::after {
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.18) 0%, rgba(255, 255, 255, 0) 42%),
        radial-gradient(55% 90% at 50% 0%, rgba(var(--accent-rgb), 0.18), transparent 70%);
    mask: none;
    opacity: 0.75;
}

.navbar.scrolled {
    background: linear-gradient(150deg, rgba(14, 19, 28, 0.90), rgba(23, 31, 46, 0.82));
    box-shadow: var(--elevation-metal-3);
}

@media (prefers-color-scheme: light) {
    .navbar {
        background: linear-gradient(150deg, rgba(255, 255, 255, 0.88), rgba(246, 249, 255, 0.92));
        box-shadow: var(--elevation-metal-2), inset 0 1px 0 rgba(255, 255, 255, 0.9);
    }

    .navbar.scrolled {
        background: linear-gradient(150deg, rgba(255, 255, 255, 0.94), rgba(242, 246, 253, 0.98));
    }
}

.navbar .logo {
    color: var(--text-primary);
    font-size: 1.25rem;
    letter-spacing: -0.02em;
    font-weight: 700;
}

.logo-strong {
    background: linear-gradient(90deg, #d8e7ff 0%, var(--gem-sapphire-300) 45%, var(--gem-sapphire-400) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

@media (prefers-color-scheme: light) {
    .logo-strong {
        background: linear-gradient(90deg, var(--gem-sapphire-500), var(--gem-sapphire-300));
        -webkit-background-clip: text;
        background-clip: text;
    }
}

.nav-links {
    gap: 0.55rem;
}

.nav-links a {
    color: var(--text-tertiary-muted);
    border-radius: 14px;
    border: 1px solid transparent;
    padding: 0.55rem 0.85rem;
    font-size: 0.9rem;
    font-weight: 600;
    transition: color var(--motion-fast) ease, background-color var(--motion-fast) ease, border-color var(--motion-fast) ease, box-shadow var(--motion-fast) ease, transform var(--motion-fast) ease;
}

.nav-links a:hover {
    color: var(--text-primary);
    border-color: rgba(var(--accent-rgb), 0.20);
    background: linear-gradient(145deg, rgba(var(--accent-rgb), 0.12), rgba(255, 255, 255, 0.02));
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

.nav-links a.active,
.nav-links a[aria-current="page"] {
    color: var(--text-primary);
    border-color: rgba(var(--accent-rgb), 0.26);
    background:
        linear-gradient(155deg, rgba(var(--accent-rgb), 0.18), rgba(var(--accent-rgb), 0.08)),
        linear-gradient(155deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0));
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.10), 0 6px 14px -10px rgba(var(--accent-rgb), 0.50);
}

.nav-links a .nav-icon {
    opacity: 0.95;
}

.nav-links a .nav-label {
    letter-spacing: 0.01em;
}

/* Buttons and chips */
.btn.subtle,
.auth-btn,
.chip,
.hero-btn {
    border-radius: 14px;
    border: 1px solid var(--glass-stroke);
    transition: transform var(--motion-fast) ease, box-shadow var(--motion-fast) ease, border-color var(--motion-fast) ease, background-color var(--motion-fast) ease, color var(--motion-fast) ease;
}

.btn.subtle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
    padding: 0.5rem 0.8rem;
    background: linear-gradient(150deg, rgba(255, 255, 255, 0.03), rgba(var(--accent-rgb), 0.08));
    color: var(--text-secondary);
    cursor: pointer;
    box-shadow: var(--elevation-metal-1);
}

.btn.subtle:hover {
    color: var(--text-primary);
    border-color: rgba(var(--accent-rgb), 0.28);
    background: linear-gradient(150deg, rgba(var(--accent-rgb), 0.16), rgba(var(--accent-rgb), 0.06));
    transform: translateY(-1px);
}

.chip {
    border-radius: 999px;
    font-size: 0.72rem;
    letter-spacing: 0.06em;
    padding: 0.45rem 0.75rem;
    text-transform: uppercase;
    font-weight: 600;
    color: var(--text-secondary);
    background: linear-gradient(150deg, rgba(255, 255, 255, 0.03), rgba(var(--accent-rgb), 0.08));
    border-color: rgba(var(--accent-rgb), 0.18);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06), var(--elevation-metal-1);
}

.chip:hover {
    color: var(--text-primary);
    background: linear-gradient(150deg, rgba(var(--accent-rgb), 0.16), rgba(var(--accent-rgb), 0.06));
    border-color: rgba(var(--accent-rgb), 0.24);
}

.chip[aria-pressed="true"] {
    color: var(--text-primary);
    border-color: rgba(var(--accent-rgb), 0.34);
    background: linear-gradient(150deg, rgba(var(--accent-rgb), 0.24), rgba(var(--accent-rgb), 0.11));
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 8px 18px -14px rgba(var(--accent-rgb), 0.55);
}

.auth-btn {
    background: linear-gradient(155deg, rgba(var(--accent-rgb), 0.22), rgba(var(--accent-rgb), 0.12));
    border-color: rgba(var(--accent-rgb), 0.28);
    color: var(--text-primary);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12), 0 12px 24px -18px rgba(var(--accent-rgb), 0.6);
}

.auth-btn:hover:not([disabled]) {
    border-color: rgba(var(--accent-rgb), 0.40);
    background: linear-gradient(155deg, rgba(var(--accent-rgb), 0.28), rgba(var(--accent-rgb), 0.14));
    transform: translateY(-1px);
}

.auth-btn:active:not([disabled]) {
    transform: translateY(0);
}

.auth-btn[disabled] {
    opacity: 0.55;
}

/* Page shell header */
.page-shell-header,
.profile-header {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: 0.9rem 1rem;
    align-items: center;
    margin: 0 0 1.1rem;
    padding: 0.9rem 1rem;
    border-radius: 18px;
    background: linear-gradient(150deg, rgba(255, 255, 255, 0.02), rgba(var(--accent-rgb), 0.06));
    border: 1px solid rgba(var(--accent-rgb), 0.10);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.03);
}

.profile-heading-icon {
    width: 44px;
    height: 44px;
    border-radius: 14px;
    display: grid;
    place-items: center;
    color: var(--text-primary);
    background:
        linear-gradient(145deg, rgba(var(--accent-rgb), 0.16), rgba(var(--accent-rgb), 0.05)),
        linear-gradient(145deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0));
    border: 1px solid rgba(var(--accent-rgb), 0.20);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.10), 0 12px 20px -16px rgba(var(--accent-rgb), 0.45);
}

.page-heading-copy {
    min-width: 0;
}

.page-kicker {
    margin: 0 0 0.2rem;
    color: var(--text-tertiary-muted);
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    font-weight: 700;
}

.page-title {
    font-family: var(--font-heading);
    font-size: clamp(1.5rem, 2vw, 2.05rem);
    font-weight: 700;
    letter-spacing: -0.02em;
    line-height: 1.1;
    color: var(--text-primary);
    margin: 0;
}

.page-lead {
    margin: 0.3rem 0 0;
    color: var(--text-secondary);
    font-size: 0.96rem;
    line-height: 1.45;
    max-width: 64ch;
}

.page-header-chip {
    justify-self: end;
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    white-space: nowrap;
    padding: 0.45rem 0.8rem;
    border-radius: 999px;
    font-size: 0.72rem;
    letter-spacing: 0.10em;
    text-transform: uppercase;
    color: var(--text-secondary);
    border: 1px solid rgba(var(--accent-rgb), 0.18);
    background: linear-gradient(145deg, rgba(var(--accent-rgb), 0.12), rgba(var(--accent-rgb), 0.04));
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

/* Home hero */
.hero-section {
    min-height: 100vh;
    padding: calc(var(--navbar-height) + 2rem) 1rem 2rem;
    align-items: flex-start;
    background:
        radial-gradient(1100px 800px at 10% 5%, rgba(var(--accent-rgb), 0.22), transparent 70%),
        radial-gradient(900px 700px at 95% 15%, rgba(255, 255, 255, 0.08), transparent 72%),
        linear-gradient(180deg, rgba(5, 8, 14, 0.65), rgba(5, 8, 14, 0.78)),
        url("background.webp") no-repeat center center / cover;
}

.hero-overlay {
    background:
        radial-gradient(1100px 700px at 12% 8%, rgba(var(--accent-rgb), 0.18), transparent 68%),
        radial-gradient(900px 650px at 88% 12%, rgba(255, 255, 255, 0.05), transparent 72%),
        linear-gradient(180deg, rgba(6, 8, 13, 0.56), rgba(8, 11, 19, 0.72));
}

.hero-content {
    width: min(760px, calc(100% - 1.25rem));
    margin-inline: auto;
    padding: clamp(1.25rem, 2vw, 1.75rem);
    border-radius: var(--radius-panel);
    border: 1px solid rgba(255, 255, 255, 0.12);
    background:
        linear-gradient(160deg, rgba(19, 25, 38, 0.80), rgba(29, 37, 54, 0.70)),
        linear-gradient(145deg, rgba(var(--accent-rgb), 0.09), rgba(var(--accent-rgb), 0));
    box-shadow: var(--elevation-metal-3), inset 0 1px 0 rgba(255, 255, 255, 0.06);
    backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturation));
    -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturation));
    text-align: left;
    display: grid;
    gap: 0.95rem;
}

.hero-content::after {
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.17) 0%, rgba(255, 255, 255, 0) 32%),
        radial-gradient(60% 90% at 50% 0%, rgba(var(--accent-rgb), 0.18), transparent 75%);
    opacity: 0.9;
}

.hero-content > * {
    position: relative;
    z-index: 1;
}

.hero-intro {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    flex-wrap: wrap;
}

.hero-eyebrow {
    display: inline-flex;
    align-items: center;
    padding: 0.4rem 0.75rem;
    border-radius: 999px;
    font-size: 0.74rem;
    letter-spacing: 0.10em;
    text-transform: uppercase;
    color: var(--text-secondary);
    border: 1px solid rgba(var(--accent-rgb), 0.18);
    background: linear-gradient(145deg, rgba(var(--accent-rgb), 0.10), rgba(255, 255, 255, 0.02));
}

.hero-content h1 {
    font-size: clamp(2rem, 4vw, 3.15rem);
    line-height: 1.02;
    margin: 0;
    letter-spacing: -0.03em;
    max-width: 14ch;
}

.hero-content .hero-subtext,
.hero-content p.hero-subtext {
    margin: 0;
    font-size: 1.04rem;
    line-height: 1.52;
    color: var(--text-secondary);
    max-width: 56ch;
}

.hero-actions {
    display: flex;
    gap: 0.75rem;
    flex-wrap: wrap;
    align-items: center;
}

.hero-content button.hero-btn,
.hero-content .hero-btn {
    min-height: 46px;
    padding: 0.8rem 1rem;
    font-size: 0.95rem;
    font-weight: 600;
    line-height: 1;
    border-radius: 14px;
    cursor: pointer;
}

.hero-btn-primary {
    background: linear-gradient(155deg, rgba(var(--accent-rgb), 0.28), rgba(var(--accent-rgb), 0.16));
    border: 1px solid rgba(var(--accent-rgb), 0.36);
    color: var(--text-primary);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.14), 0 18px 26px -22px rgba(var(--accent-rgb), 0.9);
}

.hero-btn-primary:hover {
    transform: translateY(-1px);
    border-color: rgba(var(--accent-rgb), 0.48);
    background: linear-gradient(155deg, rgba(var(--accent-rgb), 0.34), rgba(var(--accent-rgb), 0.18));
}

.hero-btn-secondary {
    background: linear-gradient(155deg, rgba(255, 255, 255, 0.04), rgba(var(--accent-rgb), 0.07));
    border: 1px solid rgba(255, 255, 255, 0.14);
    color: var(--text-secondary);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

.hero-btn-secondary:hover {
    color: var(--text-primary);
    border-color: rgba(var(--accent-rgb), 0.24);
    background: linear-gradient(155deg, rgba(255, 255, 255, 0.06), rgba(var(--accent-rgb), 0.10));
}

.hero-metrics {
    list-style: none;
    margin: 0.2rem 0 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.65rem;
}

.hero-metrics li {
    padding: 0.7rem 0.8rem;
    border-radius: 14px;
    border: 1px solid rgba(255, 255, 255, 0.09);
    background:
        linear-gradient(155deg, rgba(255, 255, 255, 0.03), rgba(var(--accent-rgb), 0.05)),
        linear-gradient(155deg, rgba(0, 0, 0, 0.10), rgba(0, 0, 0, 0));
    display: grid;
    gap: 0.2rem;
    min-height: 66px;
    align-content: center;
}

.hero-metrics li span {
    font-size: 0.68rem;
    text-transform: uppercase;
    letter-spacing: 0.10em;
    color: var(--text-tertiary-muted);
}

.hero-metrics li strong {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--text-primary);
}

@media (prefers-color-scheme: light) {
    .hero-section {
        background:
            radial-gradient(1100px 800px at 10% 5%, rgba(var(--accent-rgb), 0.14), transparent 70%),
            radial-gradient(900px 700px at 95% 15%, rgba(15, 23, 42, 0.05), transparent 72%),
            linear-gradient(180deg, rgba(255, 255, 255, 0.55), rgba(244, 248, 255, 0.76)),
            url("background.webp") no-repeat center center / cover;
        background-blend-mode: normal, normal, screen, normal;
    }

    .hero-overlay {
        background:
            radial-gradient(1100px 700px at 12% 8%, rgba(var(--accent-rgb), 0.10), transparent 68%),
            radial-gradient(900px 650px at 88% 12%, rgba(255, 255, 255, 0.26), transparent 72%),
            linear-gradient(180deg, rgba(255, 255, 255, 0.25), rgba(243, 247, 253, 0.46));
    }

    .hero-content {
        background:
            linear-gradient(160deg, rgba(255, 255, 255, 0.82), rgba(244, 249, 255, 0.90)),
            linear-gradient(145deg, rgba(var(--accent-rgb), 0.05), rgba(var(--accent-rgb), 0));
        border-color: rgba(17, 24, 39, 0.09);
    }

    .hero-eyebrow,
    .page-header-chip {
        color: #34465f;
    }
}

/* Social + Projects layouts */
.social-page,
.projects-page {
    margin-top: calc(var(--navbar-height) + 16px);
}

.social-layout,
.projects-layout {
    gap: 1rem;
    align-items: start;
}

.social-layout {
    grid-template-columns: 270px minmax(0, 1fr) 300px;
}

.projects-layout {
    grid-template-columns: 270px minmax(0, 1fr) 300px;
}

.s-center {
    min-width: 0;
}

.center-scroll {
    border-radius: 20px;
    padding: 0.2rem 0.25rem 0.4rem;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.01), rgba(var(--accent-rgb), 0.03));
    border: 1px solid rgba(255, 255, 255, 0.04);
}

.center-scroll::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, rgba(var(--accent-rgb), 0.20), rgba(var(--accent-rgb), 0.30));
    border: 2px solid transparent;
    background-clip: padding-box;
}

.s-card {
    top: calc(var(--navbar-height) + 18px);
    border-radius: var(--radius-card);
    padding: 0.95rem;
    background:
        linear-gradient(160deg, rgba(19, 25, 38, 0.72), rgba(28, 35, 50, 0.64)),
        linear-gradient(145deg, rgba(var(--accent-rgb), 0.06), rgba(var(--accent-rgb), 0));
    border: 1px solid rgba(255, 255, 255, 0.10);
    box-shadow: var(--elevation-metal-2);
}

.s-profile {
    gap: 0.85rem;
    margin-bottom: 0.95rem;
    padding-bottom: 0.85rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.s-profile .avatar,
.composer-avatar .avatar,
.post-header .avatar {
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.20),
        0 8px 18px -14px rgba(0, 0, 0, 0.85),
        0 0 0 1px rgba(255, 255, 255, 0.05);
}

.s-name {
    font-weight: 700;
    letter-spacing: -0.01em;
}

.s-email {
    color: var(--text-tertiary-muted);
}

.s-meta {
    gap: 0.5rem;
}

.s-meta li {
    padding: 0.55rem 0.65rem;
    border-radius: 12px;
    background: linear-gradient(145deg, rgba(255, 255, 255, 0.02), rgba(var(--accent-rgb), 0.05));
    border: 1px solid rgba(255, 255, 255, 0.06);
}

.s-meta li strong {
    color: var(--text-primary);
    font-variant-numeric: tabular-nums;
}

.s-caption {
    margin: 0.45rem 0 0;
    font-size: 0.78rem;
    line-height: 1.4;
    color: var(--text-tertiary-muted);
}

.s-block {
    margin-bottom: 0.75rem;
    padding: 0.75rem;
    border-radius: 14px;
    border: 1px solid rgba(255, 255, 255, 0.06);
    background: linear-gradient(145deg, rgba(255, 255, 255, 0.015), rgba(var(--accent-rgb), 0.04));
}

.s-title {
    margin: 0;
    font-size: 0.92rem;
    font-weight: 700;
    letter-spacing: -0.01em;
    color: var(--text-primary);
}

.s-block .s-caption {
    margin-bottom: 0.55rem;
}

.s-list {
    gap: 0.45rem;
}

.s-list li {
    border-radius: 12px;
    border-style: solid;
    border-color: rgba(255, 255, 255, 0.06);
    background: rgba(255, 255, 255, 0.02);
    padding: 0.45rem 0.6rem;
    color: var(--text-secondary);
}

.s-list .tag {
    color: var(--text-primary);
}

.s-list .count {
    color: var(--text-tertiary-muted);
}

.s-people {
    gap: 0.55rem;
}

.s-people li {
    grid-template-columns: 30px minmax(0, 1fr) auto;
    border-radius: 12px;
    padding: 0.35rem;
    border: 1px solid rgba(255, 255, 255, 0.05);
    background: rgba(255, 255, 255, 0.015);
}

.s-people .p-name {
    color: var(--text-primary);
}

.s-people .p-role {
    color: var(--text-tertiary-muted);
}

/* Composer and social feed */
.composer-card {
    margin: 0.25rem 0 0.95rem;
    padding: 0.95rem;
    border-radius: var(--radius-card);
}

.composer {
    gap: 0.7rem;
}

.composer textarea {
    min-height: 88px;
    border-radius: 14px;
    border: 1px solid rgba(255, 255, 255, 0.09);
    background:
        linear-gradient(155deg, rgba(255, 255, 255, 0.02), rgba(var(--accent-rgb), 0.04)),
        rgba(10, 14, 22, 0.35);
    color: var(--text-primary);
    line-height: 1.45;
}

.composer textarea::placeholder {
    color: var(--text-tertiary-muted);
}

.composer textarea:focus {
    border-color: rgba(var(--accent-rgb), 0.35);
    box-shadow: 0 0 0 3px rgba(var(--accent-rgb), 0.13);
    outline: none;
}

.composer .composer-meta {
    color: var(--text-tertiary-muted);
}

.composer .auth-btn {
    min-width: 88px;
    padding-inline: 0.95rem;
}

.feed {
    gap: 0.9rem;
}

.post-card {
    border-radius: var(--radius-card);
    border-color: rgba(255, 255, 255, 0.09);
    padding: 1rem;
    box-shadow: var(--elevation-metal-2);
    transition: transform var(--motion-fast) ease, box-shadow var(--motion-fast) ease, border-color var(--motion-fast) ease;
}

.post-card:hover {
    transform: translateY(-1px);
    border-color: rgba(var(--accent-rgb), 0.20);
    box-shadow: var(--elevation-metal-3);
}

.post-card .post-header {
    gap: 0.7rem;
}

.post-header .author {
    color: var(--text-primary);
    font-size: 0.93rem;
    letter-spacing: -0.01em;
}

.post-header .time {
    color: var(--text-tertiary-muted);
}

.post-header .icon-btn.delete {
    border: 1px solid transparent;
    border-radius: 10px;
    color: var(--text-tertiary-muted);
}

.post-header .icon-btn.delete:hover {
    color: var(--text-primary);
    background: rgba(var(--accent-rgb), 0.08);
    border-color: rgba(var(--accent-rgb), 0.16);
}

.post-text {
    color: var(--text-secondary);
    line-height: 1.45;
}

.post-text a {
    color: var(--gem-sapphire-300);
    text-decoration-thickness: 1px;
}

.post-card.post--video .video-media,
.post-card.post--video .video-placeholder,
.post-card.post--board .board-item {
    border-color: rgba(255, 255, 255, 0.08);
}

.post-card.post--video .video-media {
    background: linear-gradient(160deg, rgba(8, 11, 18, 0.95), rgba(14, 19, 28, 0.95));
}

.post-card.post--video .video-placeholder {
    color: var(--text-secondary);
    background: linear-gradient(145deg, rgba(255, 255, 255, 0.05), rgba(var(--accent-rgb), 0.08));
}

.post-card.post--board .board-col h4 {
    color: var(--text-secondary);
    letter-spacing: -0.01em;
}

.post-actions {
    margin-top: 0.1rem;
}

.post-actions .chip {
    text-transform: none;
    letter-spacing: 0;
    font-size: 0.82rem;
    padding: 0.45rem 0.65rem;
    color: var(--text-secondary);
    border-color: rgba(255, 255, 255, 0.08);
    background: linear-gradient(145deg, rgba(255, 255, 255, 0.03), rgba(var(--accent-rgb), 0.06));
}

.post-actions .chip:hover {
    color: var(--text-primary);
    border-color: rgba(var(--accent-rgb), 0.22);
}

.post-actions .like[aria-pressed="true"] {
    border-color: rgba(var(--accent-rgb), 0.34);
    background: linear-gradient(145deg, rgba(var(--accent-rgb), 0.22), rgba(var(--accent-rgb), 0.10));
}

.comments {
    border-top-color: rgba(255, 255, 255, 0.08);
    margin-top: 0.6rem;
    padding-top: 0.6rem;
}

.comment .bubble {
    background: linear-gradient(145deg, rgba(255, 255, 255, 0.03), rgba(var(--accent-rgb), 0.05));
    border-color: rgba(255, 255, 255, 0.08);
}

.comment .c-meta {
    color: var(--text-tertiary-muted);
}

.comment-form input {
    border-color: rgba(255, 255, 255, 0.09);
    background: linear-gradient(145deg, rgba(255, 255, 255, 0.02), rgba(var(--accent-rgb), 0.04));
}

.comment-form input::placeholder {
    color: var(--text-tertiary-muted);
}

.comment-form input:focus {
    outline: none;
    border-color: rgba(var(--accent-rgb), 0.28);
    box-shadow: 0 0 0 3px rgba(var(--accent-rgb), 0.12);
}

.empty-feed {
    border-radius: 16px;
    border: 1px dashed rgba(var(--accent-rgb), 0.18);
    background: linear-gradient(145deg, rgba(255, 255, 255, 0.02), rgba(var(--accent-rgb), 0.05));
    padding: 1rem;
}

/* Tabs */
.social-switch {
    margin: 0.15rem 0 0.7rem;
    padding: 0.3rem;
    border-radius: 999px;
    border-color: rgba(255, 255, 255, 0.08);
    background:
        linear-gradient(150deg, rgba(255, 255, 255, 0.03), rgba(var(--accent-rgb), 0.05)),
        linear-gradient(150deg, rgba(0, 0, 0, 0.12), rgba(0, 0, 0, 0));
    box-shadow: var(--elevation-metal-1);
}

.social-switch .tab {
    border-radius: 999px;
    color: var(--text-secondary);
    border: 1px solid transparent;
    min-height: 38px;
}

.social-switch .tab:hover,
.social-switch .tab:focus-visible {
    color: var(--text-primary);
    border-color: rgba(var(--accent-rgb), 0.18);
    background: linear-gradient(150deg, rgba(var(--accent-rgb), 0.15), rgba(var(--accent-rgb), 0.06));
}

.social-switch .tab.is-active,
.social-switch .tab[aria-selected="true"] {
    color: var(--text-primary);
    border-color: rgba(var(--accent-rgb), 0.26);
    background: linear-gradient(150deg, rgba(var(--accent-rgb), 0.22), rgba(var(--accent-rgb), 0.09));
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 8px 14px -12px rgba(var(--accent-rgb), 0.50);
}

.social-switch .tab::before,
.social-switch .tab::after {
    opacity: 0.45;
}

/* Footer */
.footer {
    margin: 2.2rem auto 1.2rem;
    padding: 1.35rem 1rem 1.2rem;
    gap: 0.8rem;
    border-radius: var(--radius-panel);
    border-color: rgba(255, 255, 255, 0.10);
    background:
        linear-gradient(160deg, rgba(14, 19, 28, 0.80), rgba(22, 29, 42, 0.70)),
        linear-gradient(145deg, rgba(var(--accent-rgb), 0.07), rgba(var(--accent-rgb), 0));
}

.footer::before {
    border-radius: inherit;
}

.footer::after {
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.13) 0%, rgba(255, 255, 255, 0) 35%),
        radial-gradient(65% 100% at 50% 0%, rgba(var(--accent-rgb), 0.12), transparent 75%);
    opacity: 0.6;
}

.footer p {
    color: var(--text-tertiary-muted);
    margin: 0;
    font-size: 0.84rem;
    letter-spacing: 0.02em;
}

.social-links {
    margin-top: 0.1rem;
    gap: 0.55rem;
    flex-wrap: wrap;
}

.social-links .chip {
    font-size: 0.64rem;
    padding: 0.4rem 0.65rem;
}

/* Mobile and tablet refinements */
@media (max-width: 920px) {
    .social-layout,
    .projects-layout {
        grid-template-columns: minmax(0, 1fr);
        gap: 0.9rem;
    }

    .s-left,
    .s-right {
        position: static;
        top: auto;
    }

    .center-scroll {
        max-height: none;
        overflow: visible;
        padding: 0;
        border: none;
        background: transparent;
    }
}

@media (max-width: 820px) {
    .hero-section {
        min-height: auto;
        padding-top: 5.8rem;
        padding-bottom: 4.3rem;
    }

    .hero-content {
        width: min(680px, calc(100% - 0.5rem));
        text-align: center;
        justify-items: center;
        gap: 0.85rem;
    }

    .hero-content h1 {
        max-width: 12ch;
    }

    .hero-content .hero-subtext {
        max-width: 34ch;
    }

    .hero-actions {
        width: 100%;
        justify-content: center;
    }

    .hero-content .hero-btn {
        flex: 1 1 220px;
        max-width: 100%;
    }

    .hero-metrics {
        width: 100%;
        grid-template-columns: 1fr;
    }

    .hero-metrics li {
        min-height: 0;
        text-align: left;
    }

    .page-shell-header,
    .profile-header {
        grid-template-columns: auto minmax(0, 1fr);
        padding: 0.85rem 0.9rem;
    }

    .page-header-chip {
        grid-column: 1 / -1;
        justify-self: start;
    }

    nav.navbar[aria-label="Primary Navigation"] {
        background: linear-gradient(160deg, rgba(15, 21, 31, 0.90), rgba(24, 31, 46, 0.84)) !important;
        border: 1px solid rgba(255, 255, 255, 0.12) !important;
        box-shadow: var(--elevation-metal-3), inset 0 1px 0 rgba(255, 255, 255, 0.05) !important;
    }

    nav.navbar[aria-label="Primary Navigation"] .nav-links a {
        border-radius: 12px;
    }

    nav.navbar[aria-label="Primary Navigation"] .nav-links a.active,
    nav.navbar[aria-label="Primary Navigation"] .nav-links a[aria-current="page"] {
        background: linear-gradient(155deg, rgba(var(--accent-rgb), 0.20), rgba(var(--accent-rgb), 0.08)) !important;
        border-color: rgba(var(--accent-rgb), 0.25) !important;
    }
}

@media (max-width: 560px) {
    .page-kicker {
        font-size: 0.66rem;
    }

    .page-title {
        font-size: 1.32rem;
    }

    .page-lead {
        font-size: 0.9rem;
    }

    .hero-content h1 {
        font-size: clamp(1.7rem, 7vw, 2.1rem);
    }

    .hero-content .hero-subtext {
        font-size: 0.95rem;
    }

    .composer {
        grid-template-columns: 1fr;
    }

    .composer-avatar {
        display: none;
    }

    .composer .composer-actions {
        justify-content: flex-end;
    }

    .post-card.post--board .board-mini {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 390px) {
    .hero-actions {
        gap: 0.55rem;
    }

    .hero-content .hero-btn {
        min-height: 44px;
        padding: 0.72rem 0.9rem;
        font-size: 0.9rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    .navbar,
    .nav-links a,
    .chip,
    .btn.subtle,
    .auth-btn,
    .hero-btn,
    .post-card {
        transition: none !important;
    }

    .post-card:hover,
    .btn.subtle:hover,
    .auth-btn:hover:not([disabled]),
    .hero-btn-primary:hover {
        transform: none !important;
    }
}

/* Phase 1 follow-up: readability + compatibility polish (about/profile/auth) */
@media (prefers-color-scheme: light) {
    :root {
        --text-secondary-muted: #334155;
        --text-tertiary-muted: #5b6b82;
    }

    body {
        color: #0f172a;
    }

    .nav-links a {
        color: #52637d;
    }

    .nav-links a:hover {
        color: #0f172a;
        background: linear-gradient(145deg, rgba(var(--accent-rgb), 0.10), rgba(74, 134, 245, 0.03));
        border-color: rgba(var(--accent-rgb), 0.18);
    }

    .nav-links a.active,
    .nav-links a[aria-current="page"] {
        color: #0f172a;
        background: linear-gradient(145deg, rgba(var(--accent-rgb), 0.16), rgba(74, 134, 245, 0.05));
        border-color: rgba(var(--accent-rgb), 0.24);
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9), 0 8px 18px -16px rgba(var(--accent-rgb), 0.45);
    }

    .hero-section {
        background:
            radial-gradient(1000px 700px at 12% 7%, rgba(var(--accent-rgb), 0.08), transparent 68%),
            radial-gradient(850px 700px at 95% 12%, rgba(15, 23, 42, 0.05), transparent 72%),
            linear-gradient(180deg, rgba(240, 245, 252, 0.35), rgba(237, 242, 249, 0.52)),
            url("background.webp") no-repeat center center / cover;
        background-blend-mode: normal, normal, multiply, normal;
    }

    .hero-overlay {
        background:
            radial-gradient(1000px 680px at 12% 8%, rgba(var(--accent-rgb), 0.08), transparent 70%),
            linear-gradient(180deg, rgba(245, 248, 253, 0.22), rgba(235, 240, 248, 0.40));
    }

    .hero-content {
        background:
            linear-gradient(160deg, rgba(255, 255, 255, 0.92), rgba(248, 251, 255, 0.95)),
            linear-gradient(145deg, rgba(var(--accent-rgb), 0.035), rgba(var(--accent-rgb), 0));
        border-color: rgba(15, 23, 42, 0.08);
        box-shadow: 0 30px 50px -34px rgba(15, 23, 42, 0.22), inset 0 1px 0 rgba(255, 255, 255, 0.95);
    }

    .hero-content::after {
        opacity: 0.45;
    }

    .hero-content h1 {
        color: #0f172a;
    }

    .hero-content .hero-subtext {
        color: #344256;
    }

    .hero-eyebrow {
        color: #3f5068;
        border-color: rgba(var(--accent-rgb), 0.16);
        background: linear-gradient(145deg, rgba(var(--accent-rgb), 0.08), rgba(255, 255, 255, 0.65));
    }

    .hero-btn-primary {
        color: #0f172a;
        background: linear-gradient(155deg, rgba(var(--accent-rgb), 0.20), rgba(var(--accent-rgb), 0.10));
        border-color: rgba(var(--accent-rgb), 0.28);
    }

    .hero-btn-secondary {
        color: #334155;
        background: linear-gradient(155deg, rgba(255, 255, 255, 0.85), rgba(244, 248, 255, 0.92));
        border-color: rgba(15, 23, 42, 0.10);
    }

    .hero-metrics li {
        border-color: rgba(15, 23, 42, 0.07);
        background:
            linear-gradient(155deg, rgba(255, 255, 255, 0.88), rgba(243, 247, 253, 0.92)),
            linear-gradient(155deg, rgba(var(--accent-rgb), 0.03), rgba(var(--accent-rgb), 0));
        box-shadow: 0 12px 20px -18px rgba(15, 23, 42, 0.20);
    }

    .footer {
        background:
            linear-gradient(160deg, rgba(255, 255, 255, 0.92), rgba(244, 248, 255, 0.96)),
            linear-gradient(145deg, rgba(var(--accent-rgb), 0.04), rgba(var(--accent-rgb), 0));
        border-color: rgba(15, 23, 42, 0.08);
        box-shadow: 0 24px 38px -30px rgba(15, 23, 42, 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.95);
    }

    .footer::after {
        opacity: 0.35;
    }

    .footer p {
        color: #415066;
    }

    .social-links .chip {
        color: #324257;
        border-color: rgba(var(--accent-rgb), 0.18);
        background: linear-gradient(145deg, rgba(var(--accent-rgb), 0.09), rgba(255, 255, 255, 0.72));
    }

    .social-links .chip:hover {
        color: #14233a;
        background: linear-gradient(145deg, rgba(var(--accent-rgb), 0.15), rgba(255, 255, 255, 0.78));
    }

    .s-card,
    .composer-card,
    .post-card,
    .projects-page .project-item {
        border-color: rgba(15, 23, 42, 0.08);
    }

    .s-list li,
    .s-block,
    .comment .bubble,
    .comment-form input,
    .composer textarea {
        border-color: rgba(15, 23, 42, 0.08);
    }
}

/* About page compatibility */
.about-page .about-section {
    padding: 1rem;
}

.about-page .page-shell-header {
    margin-bottom: 1rem;
}

.about-page .about-intro {
    margin: 0 0 1.15rem;
    color: var(--text-secondary);
    line-height: 1.55;
    max-width: 70ch;
}

.about-page .about-item {
    padding: 1rem;
    border-radius: var(--radius-card);
}

.about-page .about-item h3 {
    font-size: 1.05rem;
}

.about-page .about-item p {
    color: var(--text-secondary);
}

/* Profile page compatibility */
.profile-page .profile-grid {
    gap: 1rem;
}

.profile-page .profile-card {
    border-radius: var(--radius-card);
    padding: 1rem;
    border: 1px solid rgba(255, 255, 255, 0.09);
    background:
        linear-gradient(160deg, rgba(19, 25, 38, 0.72), rgba(28, 36, 52, 0.66)),
        linear-gradient(145deg, rgba(var(--accent-rgb), 0.07), rgba(var(--accent-rgb), 0));
    box-shadow: var(--elevation-metal-2);
    position: relative;
    overflow: hidden;
}

.profile-page .profile-card::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    border-radius: inherit;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.14) 0%, rgba(255, 255, 255, 0) 28%),
        linear-gradient(135deg, rgba(var(--accent-rgb), 0.06), rgba(var(--accent-rgb), 0) 55%);
    mix-blend-mode: overlay;
}

.profile-page .profile-card > * {
    position: relative;
    z-index: 1;
}

.profile-page .card-title {
    margin: 0 0 0.8rem;
    font-family: var(--font-heading);
    letter-spacing: -0.01em;
    color: var(--text-primary);
}

.profile-page .profile-meta,
.profile-page .projects-list {
    margin: 0;
    padding: 0;
    list-style: none;
}

.profile-page .profile-meta {
    display: grid;
    gap: 0.55rem;
}

.profile-page .profile-meta li {
    display: grid;
    grid-template-columns: 92px minmax(0, 1fr);
    gap: 0.5rem;
    align-items: center;
    padding: 0.6rem 0.65rem;
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.06);
    background: rgba(255, 255, 255, 0.02);
}

.profile-page .field-label {
    color: var(--text-tertiary-muted);
    font-size: 0.8rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.profile-page .field-value {
    color: var(--text-primary);
    font-weight: 500;
    min-width: 0;
    overflow-wrap: anywhere;
}

.profile-page .profile-actions {
    margin-top: 0.9rem;
    display: flex;
    justify-content: flex-end;
}

.profile-page .badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.5rem;
    padding: 0.1rem 0.4rem;
    border-radius: 999px;
    border: 1px solid rgba(var(--accent-rgb), 0.22);
    background: rgba(var(--accent-rgb), 0.12);
    color: var(--text-primary);
    font-size: 0.75rem;
    vertical-align: middle;
}

.profile-page .projects-list {
    display: grid;
    gap: 0.55rem;
}

.profile-page .proj-row {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 0.5rem;
    padding: 0.6rem 0.65rem;
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.06);
    background: rgba(255, 255, 255, 0.02);
}

.profile-page .proj-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: linear-gradient(180deg, var(--gem-sapphire-300), var(--gem-sapphire-500));
    box-shadow: 0 0 0 3px rgba(var(--accent-rgb), 0.12);
}

.profile-page .proj-name {
    color: var(--text-primary);
    font-weight: 500;
}

.profile-page .proj-tag {
    color: var(--text-secondary);
    font-size: 0.74rem;
    border: 1px solid rgba(var(--accent-rgb), 0.16);
    border-radius: 999px;
    padding: 0.2rem 0.5rem;
    background: rgba(var(--accent-rgb), 0.06);
}

@media (prefers-color-scheme: light) {
    .profile-page .profile-card,
    .profile-page .profile-meta li,
    .profile-page .proj-row {
        border-color: rgba(15, 23, 42, 0.08);
    }

    .profile-page .profile-card {
        background:
            linear-gradient(160deg, rgba(255, 255, 255, 0.90), rgba(244, 248, 255, 0.96)),
            linear-gradient(145deg, rgba(var(--accent-rgb), 0.03), rgba(var(--accent-rgb), 0));
    }
}

/* Auth pages compatibility */
.login-section,
.signup-section {
    position: relative;
}

.auth-wrap {
    width: min(560px, 100%);
    margin-inline: auto;
    padding: 1rem;
    border-radius: var(--radius-panel);
    border: 1px solid rgba(255, 255, 255, 0.08);
    background:
        linear-gradient(160deg, rgba(16, 22, 33, 0.72), rgba(25, 32, 48, 0.66)),
        linear-gradient(145deg, rgba(var(--accent-rgb), 0.06), rgba(var(--accent-rgb), 0));
    box-shadow: var(--elevation-metal-2);
}

.auth-wrap .page-kicker {
    margin-bottom: 0.3rem;
}

.auth-wrap .page-title {
    margin-bottom: 0.15rem;
}

.auth-wrap .page-lead {
    margin-bottom: 0.9rem;
}

.auth-form {
    border-radius: var(--radius-card);
    border: 1px solid rgba(255, 255, 255, 0.08);
    background:
        linear-gradient(160deg, rgba(18, 24, 37, 0.74), rgba(26, 34, 50, 0.68)),
        linear-gradient(145deg, rgba(var(--accent-rgb), 0.05), rgba(var(--accent-rgb), 0));
    box-shadow: var(--elevation-metal-1);
}

.auth-form label {
    color: var(--text-secondary);
    font-weight: 600;
}

.auth-form input {
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.10);
    background: linear-gradient(145deg, rgba(255, 255, 255, 0.02), rgba(var(--accent-rgb), 0.04));
    color: var(--text-primary);
}

.auth-form input::placeholder {
    color: var(--text-tertiary-muted);
}

.auth-form input:focus {
    border-color: rgba(var(--accent-rgb), 0.28);
    outline: none;
    box-shadow: 0 0 0 3px rgba(var(--accent-rgb), 0.12);
}

.form-info {
    color: #bfdcff;
    background: rgba(var(--accent-rgb), 0.10);
    border: 1px solid rgba(var(--accent-rgb), 0.18);
    border-radius: 12px;
    padding: 0.55rem 0.7rem;
}

.auth-support {
    margin-top: 1rem;
    color: var(--text-secondary);
    font-size: 0.9rem;
}

.auth-support p {
    margin: 0;
}

.auth-link {
    font-weight: 600;
}

@media (prefers-color-scheme: light) {
    .auth-wrap {
        border-color: rgba(15, 23, 42, 0.08);
        background:
            linear-gradient(160deg, rgba(255, 255, 255, 0.90), rgba(244, 248, 255, 0.96)),
            linear-gradient(145deg, rgba(var(--accent-rgb), 0.03), rgba(var(--accent-rgb), 0));
        box-shadow: 0 24px 40px -30px rgba(15, 23, 42, 0.20);
    }

    .auth-form {
        border-color: rgba(15, 23, 42, 0.08);
        background:
            linear-gradient(160deg, rgba(255, 255, 255, 0.94), rgba(246, 249, 255, 0.98)),
            linear-gradient(145deg, rgba(var(--accent-rgb), 0.03), rgba(var(--accent-rgb), 0));
    }

    .auth-form label {
        color: #334155;
    }

    .auth-form input {
        border-color: rgba(15, 23, 42, 0.10);
        background: rgba(255, 255, 255, 0.85);
        color: #0f172a;
    }

    .form-info {
        color: #1d4f95;
        background: rgba(var(--accent-rgb), 0.08);
        border-color: rgba(var(--accent-rgb), 0.14);
    }

    .auth-support {
        color: #4b5c73;
    }
}

@media (max-width: 820px) {
    .about-page .about-section {
        padding: 0.85rem;
    }

    .auth-wrap {
        padding: 0.9rem;
    }
}

/* Feedback pass: desktop nav + hero spacing */
@media (min-width: 821px) {
    .navbar {
        top: 1.15rem;
        left: 1.2rem;
        right: 1.2rem;
        height: 84px;
        padding: 0.8rem 1.3rem;
    }

    .navbar .logo {
        font-size: 1.65rem;
        font-weight: 700;
        letter-spacing: -0.022em;
    }

    .nav-links {
        gap: 0.7rem;
    }

    .nav-links a {
        min-height: 46px;
        padding: 0.7rem 1rem;
        border-radius: 14px;
        font-size: 0.95rem;
    }

    .nav-links a.active,
    .nav-links a[aria-current="page"] {
        box-shadow:
            inset 0 1px 0 rgba(255, 255, 255, 0.12),
            0 10px 18px -16px rgba(var(--accent-rgb), 0.45);
    }

    .hero-section {
        align-items: center;
        padding-top: calc(var(--navbar-height) + 5rem);
        padding-bottom: 3rem;
    }

    .hero-content {
        width: min(960px, calc(100% - 4rem));
        margin-top: 0.75rem;
        padding: 2.1rem 2rem 1.9rem;
        gap: 1.05rem;
        text-align: center;
        justify-items: center;
    }

    .hero-intro {
        justify-content: center;
    }

    .hero-content h1 {
        max-width: none;
        font-size: clamp(3rem, 4.6vw, 4.25rem);
        line-height: 0.98;
        letter-spacing: -0.035em;
    }

    .hero-content .hero-subtext,
    .hero-content p.hero-subtext {
        max-width: 36ch;
        text-align: center;
        font-size: 1.06rem;
    }

    .hero-actions {
        justify-content: center;
        gap: 0.85rem;
        margin-top: 0.1rem;
    }

    .hero-content .hero-btn {
        min-width: 190px;
        min-height: 50px;
        padding: 0.9rem 1.1rem;
        font-size: 0.98rem;
    }

    .hero-metrics {
        width: 100%;
        gap: 0.75rem;
        margin-top: 0.2rem;
    }

    .hero-metrics li {
        min-height: 78px;
        padding: 0.85rem 0.95rem;
        text-align: left;
    }
}

@media (prefers-color-scheme: light) and (min-width: 821px) {
    .nav-links a {
        color: #566781;
    }

    .nav-links a.active,
    .nav-links a[aria-current="page"] {
        background: linear-gradient(145deg, rgba(var(--accent-rgb), 0.14), rgba(255, 255, 255, 0.72));
        border-color: rgba(var(--accent-rgb), 0.20);
    }

    .hero-content {
        background:
            linear-gradient(160deg, rgba(255, 255, 255, 0.94), rgba(247, 250, 255, 0.96)),
            linear-gradient(145deg, rgba(var(--accent-rgb), 0.025), rgba(var(--accent-rgb), 0));
    }
}

/* Fix nav hover "square glass" artifact: clip blended sheen to tab shape */
.nav-links a {
    isolation: isolate;
}

.nav-links a::before {
    border-radius: inherit;
}

/* Unified default design: social-first metallic system (light + dark parity) */
:root {
    --cc-midnight: #0a0f18;
    --cc-spacegray: #151d2b;
    --cc-titanium: #9ca8bb;
    --cc-silver: #e8edf5;
    --cc-shell-bg: linear-gradient(160deg, rgba(16, 22, 33, 0.86), rgba(24, 32, 48, 0.82));
    --cc-panel-bg: linear-gradient(160deg, rgba(18, 24, 37, 0.84), rgba(27, 35, 52, 0.80));
    --cc-card-bg: linear-gradient(160deg, rgba(20, 27, 41, 0.82), rgba(28, 37, 55, 0.78));
    --cc-field-bg: linear-gradient(150deg, rgba(255, 255, 255, 0.02), rgba(var(--accent-rgb), 0.05));
    --cc-border: rgba(255, 255, 255, 0.09);
    --cc-border-strong: rgba(255, 255, 255, 0.15);
    --cc-divider: rgba(255, 255, 255, 0.06);
    --cc-text: #eef3fb;
    --cc-text-muted: #c7d0df;
    --cc-text-subtle: #98a6bb;
    --cc-shell-shadow: 0 20px 46px -28px rgba(0, 0, 0, 0.65);
    --cc-card-shadow: 0 16px 34px -24px rgba(0, 0, 0, 0.56);
    --cc-interactive-shadow: 0 10px 22px -16px rgba(var(--accent-rgb), 0.48);
    --cc-glow-soft: linear-gradient(145deg, rgba(var(--accent-rgb), 0.08), rgba(var(--accent-rgb), 0));
}

@media (prefers-color-scheme: light) {
    :root {
        --cc-midnight: #edf2f8;
        --cc-spacegray: #f4f7fb;
        --cc-titanium: #6f7f96;
        --cc-silver: #ffffff;
        --cc-shell-bg: linear-gradient(160deg, rgba(255, 255, 255, 0.92), rgba(245, 249, 255, 0.94));
        --cc-panel-bg: linear-gradient(160deg, rgba(255, 255, 255, 0.94), rgba(247, 250, 255, 0.97));
        --cc-card-bg: linear-gradient(160deg, rgba(255, 255, 255, 0.92), rgba(243, 247, 253, 0.95));
        --cc-field-bg: linear-gradient(150deg, rgba(255, 255, 255, 0.84), rgba(var(--accent-rgb), 0.04));
        --cc-border: rgba(15, 23, 42, 0.08);
        --cc-border-strong: rgba(15, 23, 42, 0.14);
        --cc-divider: rgba(15, 23, 42, 0.06);
        --cc-text: #0f172a;
        --cc-text-muted: #354458;
        --cc-text-subtle: #61728a;
        --cc-shell-shadow: 0 20px 42px -32px rgba(15, 23, 42, 0.22);
        --cc-card-shadow: 0 16px 28px -24px rgba(15, 23, 42, 0.18);
        --cc-interactive-shadow: 0 10px 20px -18px rgba(var(--accent-rgb), 0.32);
        --cc-glow-soft: linear-gradient(145deg, rgba(var(--accent-rgb), 0.05), rgba(var(--accent-rgb), 0));
    }
}

body {
    color: var(--cc-text);
    background:
        radial-gradient(1200px 800px at 12% -8%, rgba(var(--accent-rgb), 0.12), transparent 68%),
        radial-gradient(1000px 700px at 92% 10%, rgba(255, 255, 255, 0.05), transparent 75%),
        linear-gradient(160deg, var(--cc-midnight), var(--cc-spacegray));
}

@media (prefers-color-scheme: light) {
    body {
        background:
            radial-gradient(1200px 800px at 12% -8%, rgba(var(--accent-rgb), 0.08), transparent 68%),
            radial-gradient(1000px 700px at 92% 10%, rgba(15, 23, 42, 0.05), transparent 75%),
            linear-gradient(160deg, var(--cc-midnight), var(--cc-spacegray));
    }
}

/* Social media app shell feel across pages */
.navbar,
.footer,
.page-shell-header,
.about-section,
.features-section,
.social-section,
.profile-section,
.login-section,
.signup-section,
.s-card,
.composer-card,
.post-card,
.project-item,
.profile-card,
.auth-wrap,
.auth-form,
.hero-content {
    border-color: var(--cc-border) !important;
}

.navbar,
.footer,
.page-shell-header,
.auth-wrap,
.hero-content {
    background: var(--cc-shell-bg) !important;
    box-shadow: var(--cc-shell-shadow) !important;
}

.s-card,
.composer-card,
.post-card,
.project-item,
.profile-card,
.auth-form {
    background:
        var(--cc-card-bg),
        var(--cc-glow-soft) !important;
    box-shadow: var(--cc-card-shadow) !important;
}

.about-section,
.features-section,
.social-section,
.profile-section,
.login-section,
.signup-section {
    background:
        radial-gradient(900px 600px at 10% 0%, rgba(var(--accent-rgb), 0.06), transparent 70%),
        radial-gradient(900px 600px at 90% 10%, rgba(255, 255, 255, 0.03), transparent 72%),
        var(--cc-panel-bg) !important;
    box-shadow: var(--cc-shell-shadow) !important;
}

/* Typography/readability parity */
body,
.page-lead,
.hero-content .hero-subtext,
.post-text,
.about-page .about-intro,
.auth-support,
.s-email,
.s-caption,
.post-header .time,
.comment .c-meta,
.field-label,
.proj-tag {
    color: var(--cc-text-muted);
}

.page-title,
.hero-content h1,
.post-header .author,
.s-title,
.s-name,
.projects-page .project-item h3,
.profile-page .card-title,
.profile-page .field-value,
.profile-page .proj-name {
    color: var(--cc-text) !important;
}

.page-kicker,
.hero-eyebrow,
.page-header-chip,
.hero-metrics li span,
.s-list .count,
.auth-form input::placeholder,
.comment-form input::placeholder,
.composer textarea::placeholder {
    color: var(--cc-text-subtle) !important;
}

/* Unified desktop app navigation (less mobile-tab feeling on desktop) */
@media (min-width: 821px) {
    .navbar {
        background:
            linear-gradient(160deg, rgba(20, 26, 37, 0.86), rgba(30, 38, 53, 0.80)),
            var(--cc-glow-soft) !important;
        border: 1px solid var(--cc-border-strong) !important;
    }

    .nav-links {
        gap: 0.75rem;
    }

    .nav-links a {
        color: var(--cc-text-muted);
        border: 1px solid transparent;
        background: transparent;
        min-height: 46px;
        padding: 0.68rem 1rem;
        border-radius: 14px;
        box-shadow: none;
    }

    .nav-links a:hover {
        color: var(--cc-text);
        border-color: var(--cc-border);
        background:
            linear-gradient(145deg, rgba(255, 255, 255, 0.03), rgba(var(--accent-rgb), 0.08)),
            linear-gradient(145deg, rgba(0, 0, 0, 0.10), rgba(0, 0, 0, 0));
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
    }

    .nav-links a.active,
    .nav-links a[aria-current="page"] {
        color: var(--cc-text);
        border-color: rgba(var(--accent-rgb), 0.22);
        background:
            linear-gradient(145deg, rgba(var(--accent-rgb), 0.16), rgba(var(--accent-rgb), 0.06)),
            linear-gradient(145deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0));
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), var(--cc-interactive-shadow);
    }

    .navbar .logo {
        color: var(--cc-text);
        font-size: 1.8rem;
    }

    .logo-text {
        align-items: center;
        gap: 0.2rem;
    }
}

@media (prefers-color-scheme: light) and (min-width: 821px) {
    .navbar {
        background:
            linear-gradient(160deg, rgba(255, 255, 255, 0.93), rgba(246, 250, 255, 0.95)),
            var(--cc-glow-soft) !important;
    }

    .nav-links a:hover {
        background:
            linear-gradient(145deg, rgba(var(--accent-rgb), 0.07), rgba(255, 255, 255, 0.72)),
            linear-gradient(145deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0));
    }

    .nav-links a.active,
    .nav-links a[aria-current="page"] {
        background:
            linear-gradient(145deg, rgba(var(--accent-rgb), 0.12), rgba(255, 255, 255, 0.78)),
            linear-gradient(145deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0));
    }
}

/* Unified hero = social-platform "entry card" */
.hero-section {
    background:
        radial-gradient(1100px 700px at 12% 8%, rgba(var(--accent-rgb), 0.14), transparent 72%),
        radial-gradient(1000px 700px at 88% 10%, rgba(255, 255, 255, 0.05), transparent 75%),
        linear-gradient(180deg, rgba(8, 12, 18, 0.45), rgba(8, 12, 18, 0.65)),
        url("background.webp") no-repeat center center / cover !important;
    background-blend-mode: normal, normal, multiply, normal;
}

.hero-overlay {
    background:
        radial-gradient(900px 650px at 14% 8%, rgba(var(--accent-rgb), 0.09), transparent 72%),
        linear-gradient(180deg, rgba(8, 12, 18, 0.18), rgba(8, 12, 18, 0.28)) !important;
}

.hero-content {
    background:
        linear-gradient(165deg, rgba(19, 25, 37, 0.88), rgba(29, 37, 53, 0.82)),
        linear-gradient(145deg, rgba(var(--accent-rgb), 0.06), rgba(var(--accent-rgb), 0)) !important;
    border: 1px solid var(--cc-border-strong) !important;
}

.hero-content .hero-subtext {
    color: var(--cc-text-muted) !important;
}

.hero-metrics li {
    border: 1px solid var(--cc-border) !important;
    background:
        linear-gradient(155deg, rgba(255, 255, 255, 0.02), rgba(var(--accent-rgb), 0.05)),
        linear-gradient(155deg, rgba(0, 0, 0, 0.10), rgba(0, 0, 0, 0)) !important;
}

@media (prefers-color-scheme: light) {
    .hero-section {
        background:
            radial-gradient(1100px 700px at 12% 8%, rgba(var(--accent-rgb), 0.08), transparent 72%),
            radial-gradient(1000px 700px at 88% 10%, rgba(15, 23, 42, 0.05), transparent 75%),
            linear-gradient(180deg, rgba(242, 246, 252, 0.32), rgba(236, 241, 248, 0.50)),
            url("background.webp") no-repeat center center / cover !important;
        background-blend-mode: normal, normal, multiply, normal;
    }

    .hero-overlay {
        background:
            radial-gradient(900px 650px at 14% 8%, rgba(var(--accent-rgb), 0.05), transparent 72%),
            linear-gradient(180deg, rgba(240, 244, 250, 0.14), rgba(231, 236, 245, 0.28)) !important;
    }

    .hero-content {
        background:
            linear-gradient(165deg, rgba(255, 255, 255, 0.95), rgba(246, 250, 255, 0.96)),
            linear-gradient(145deg, rgba(var(--accent-rgb), 0.03), rgba(var(--accent-rgb), 0)) !important;
    }

    .hero-metrics li {
        background:
            linear-gradient(155deg, rgba(255, 255, 255, 0.88), rgba(245, 249, 255, 0.92)),
            linear-gradient(155deg, rgba(var(--accent-rgb), 0.025), rgba(var(--accent-rgb), 0)) !important;
    }
}

/* Unified social-app cards/controls */
.social-switch {
    border-color: var(--cc-border) !important;
    background:
        linear-gradient(150deg, rgba(255, 255, 255, 0.02), rgba(var(--accent-rgb), 0.05)),
        linear-gradient(150deg, rgba(0, 0, 0, 0.08), rgba(0, 0, 0, 0)) !important;
}

.social-switch .tab {
    color: var(--cc-text-muted);
    border-color: transparent;
}

.social-switch .tab:hover,
.social-switch .tab:focus-visible {
    color: var(--cc-text);
    border-color: var(--cc-border);
    background: linear-gradient(150deg, rgba(var(--accent-rgb), 0.11), rgba(var(--accent-rgb), 0.04)) !important;
}

.social-switch .tab.is-active,
.social-switch .tab[aria-selected="true"] {
    color: var(--cc-text) !important;
    border-color: rgba(var(--accent-rgb), 0.22) !important;
    background: linear-gradient(150deg, rgba(var(--accent-rgb), 0.17), rgba(var(--accent-rgb), 0.07)) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06), var(--cc-interactive-shadow) !important;
}

.chip,
.btn.subtle,
.auth-btn,
.hero-btn {
    border-color: var(--cc-border) !important;
}

.chip,
.btn.subtle {
    color: var(--cc-text-muted) !important;
    background: linear-gradient(145deg, rgba(255, 255, 255, 0.02), rgba(var(--accent-rgb), 0.05)) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

.chip:hover,
.btn.subtle:hover {
    color: var(--cc-text) !important;
    border-color: rgba(var(--accent-rgb), 0.18) !important;
    background: linear-gradient(145deg, rgba(var(--accent-rgb), 0.12), rgba(var(--accent-rgb), 0.04)) !important;
}

.auth-btn,
.hero-btn-primary {
    color: var(--cc-text) !important;
    background: linear-gradient(155deg, rgba(var(--accent-rgb), 0.20), rgba(var(--accent-rgb), 0.09)) !important;
    border-color: rgba(var(--accent-rgb), 0.24) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), var(--cc-interactive-shadow) !important;
}

.hero-btn-secondary {
    color: var(--cc-text-muted) !important;
    background: linear-gradient(155deg, rgba(255, 255, 255, 0.03), rgba(var(--accent-rgb), 0.05)) !important;
    border-color: var(--cc-border) !important;
}

.composer textarea,
.comment-form input,
.auth-form input,
.modal-content input {
    background: var(--cc-field-bg) !important;
    border-color: var(--cc-border) !important;
    color: var(--cc-text) !important;
}

.composer textarea:focus,
.comment-form input:focus,
.auth-form input:focus,
.modal-content input:focus {
    border-color: rgba(var(--accent-rgb), 0.26) !important;
    box-shadow: 0 0 0 3px rgba(var(--accent-rgb), 0.10);
}

.post-actions .chip {
    color: var(--cc-text-muted) !important;
    border-color: var(--cc-border) !important;
    background: linear-gradient(145deg, rgba(255, 255, 255, 0.02), rgba(var(--accent-rgb), 0.05)) !important;
}

.post-actions .chip:hover,
.post-actions .like[aria-pressed="true"] {
    color: var(--cc-text) !important;
}

.comment .bubble,
.s-list li,
.s-block,
.profile-page .profile-meta li,
.profile-page .proj-row {
    border-color: var(--cc-divider) !important;
}

.s-meta li {
    border-color: var(--cc-divider) !important;
    background: linear-gradient(145deg, rgba(255, 255, 255, 0.015), rgba(var(--accent-rgb), 0.04)) !important;
}

/* Wide-screen social-first layout proportions */
@media (min-width: 1180px) {
    .social-page.container,
    .projects-page.container {
        width: min(1360px, calc(100% - 2.2rem));
    }

    .social-layout {
        grid-template-columns: 260px minmax(0, 760px) 280px;
        justify-content: center;
        gap: 1rem;
    }

    .projects-layout {
        grid-template-columns: 250px minmax(0, 780px) 260px;
        justify-content: center;
        gap: 1rem;
    }

    .s-center {
        min-width: 0;
    }

    .center-scroll {
        max-height: calc(100dvh - (var(--navbar-height) + 136px));
    }
}

/* Mobile keeps the same language, just simpler */
@media (max-width: 820px) {
    nav.navbar[aria-label="Primary Navigation"] {
        background:
            linear-gradient(160deg, rgba(18, 24, 36, 0.92), rgba(27, 35, 51, 0.88)),
            var(--cc-glow-soft) !important;
        border-color: var(--cc-border-strong) !important;
    }

    .hero-content {
        text-align: center;
        justify-items: center;
    }

    .hero-metrics {
        grid-template-columns: 1fr;
    }
}

@media (prefers-color-scheme: light) and (max-width: 820px) {
    nav.navbar[aria-label="Primary Navigation"] {
        background:
            linear-gradient(160deg, rgba(255, 255, 255, 0.94), rgba(247, 250, 255, 0.96)),
            var(--cc-glow-soft) !important;
    }
}

/* Keep layout offsets in sync with final navbar heights across breakpoints */
@media (min-width: 821px) {
    :root { --navbar-height: 84px; }
}

@media (max-width: 820px) {
    :root { --navbar-height: 64px; }
}

@media (max-width: 500px) {
    :root { --navbar-height: 60px; }
}

/* Interaction refresh: less glass sheen, more modern metallic */
:root {
    --cc-metal-hover-edge: rgba(var(--accent-rgb), 0.18);
    --cc-metal-hover-fill: linear-gradient(155deg, rgba(255, 255, 255, 0.03), rgba(var(--accent-rgb), 0.07));
    --cc-metal-active-fill: linear-gradient(155deg, rgba(var(--accent-rgb), 0.14), rgba(var(--accent-rgb), 0.06));
    --cc-metal-hover-shadow: 0 10px 20px -16px rgba(0, 0, 0, 0.5), 0 8px 18px -18px rgba(var(--accent-rgb), 0.35);
    --cc-metal-rim-top: inset 0 1px 0 rgba(255, 255, 255, 0.07);
}

@media (prefers-color-scheme: light) {
    :root {
        --cc-metal-hover-edge: rgba(var(--accent-rgb), 0.20);
        --cc-metal-hover-fill: linear-gradient(155deg, rgba(255, 255, 255, 0.82), rgba(var(--accent-rgb), 0.06));
        --cc-metal-active-fill: linear-gradient(155deg, rgba(var(--accent-rgb), 0.10), rgba(255, 255, 255, 0.75));
        --cc-metal-hover-shadow: 0 10px 18px -16px rgba(15, 23, 42, 0.22), 0 8px 16px -20px rgba(var(--accent-rgb), 0.28);
        --cc-metal-rim-top: inset 0 1px 0 rgba(255, 255, 255, 0.82);
    }
}

/* Remove sweeping "glass panel" pseudo effects on interactive controls */
.nav-links a::before,
.nav-links a::after,
.social-switch .tab::before,
.social-switch .tab::after,
.chip::before,
.chip::after,
.btn.subtle::before,
.btn.subtle::after,
.auth-btn::before,
.auth-btn::after,
.hero-btn::before,
.hero-btn::after,
.install-btn::before,
.install-btn::after,
.composer-fab::before,
.composer-fab::after {
    opacity: 0 !important;
    transform: none !important;
    filter: none !important;
    mix-blend-mode: normal !important;
    background: none !important;
    clip-path: none !important;
    content: none !important;
}

/* Base metallic interaction surface */
.nav-links a,
.social-switch .tab,
.chip,
.btn.subtle,
.auth-btn,
.hero-btn,
.install-btn,
.composer-fab {
    isolation: isolate;
    overflow: hidden;
    box-shadow: var(--cc-metal-rim-top);
}

/* Hover/focus: minimal lift + metallic edge instead of glassy bloom */
.nav-links a:hover,
.social-switch .tab:hover,
.chip:hover,
.btn.subtle:hover,
.auth-btn:hover:not([disabled]),
.hero-btn:hover,
.install-btn:hover,
.composer-fab:hover,
.nav-links a:focus-visible,
.social-switch .tab:focus-visible,
.chip:focus-visible,
.btn.subtle:focus-visible,
.auth-btn:focus-visible,
.hero-btn:focus-visible,
.install-btn:focus-visible,
.composer-fab:focus-visible {
    transform: translateY(-1px) !important;
    background: var(--cc-metal-hover-fill) !important;
    border-color: var(--cc-metal-hover-edge) !important;
    box-shadow: var(--cc-metal-rim-top), var(--cc-metal-hover-shadow) !important;
}

/* Keep active/selected states crisp and metallic */
.nav-links a.active,
.nav-links a[aria-current="page"],
.social-switch .tab.is-active,
.social-switch .tab[aria-selected="true"],
.chip[aria-pressed="true"],
.post-actions .like[aria-pressed="true"] {
    background: var(--cc-metal-active-fill) !important;
    border-color: rgba(var(--accent-rgb), 0.24) !important;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.08),
        0 10px 18px -18px rgba(var(--accent-rgb), 0.36) !important;
}

.nav-links a:active,
.social-switch .tab:active,
.chip:active,
.btn.subtle:active,
.auth-btn:active:not([disabled]),
.hero-btn:active,
.install-btn:active,
.composer-fab:active {
    transform: translateY(0) !important;
}

/* Button-specific metallic tuning */
.auth-btn,
.hero-btn-primary {
    background: linear-gradient(155deg, rgba(var(--accent-rgb), 0.16), rgba(var(--accent-rgb), 0.07)) !important;
    border-color: rgba(var(--accent-rgb), 0.20) !important;
}

.auth-btn:hover:not([disabled]),
.hero-btn-primary:hover {
    background: linear-gradient(155deg, rgba(var(--accent-rgb), 0.20), rgba(var(--accent-rgb), 0.09)) !important;
    border-color: rgba(var(--accent-rgb), 0.24) !important;
}

.hero-btn-secondary,
.btn.subtle {
    background: linear-gradient(155deg, rgba(255, 255, 255, 0.02), rgba(var(--accent-rgb), 0.04)) !important;
}

@media (prefers-color-scheme: light) {
    .nav-links a,
    .social-switch .tab,
    .chip,
    .btn.subtle,
    .auth-btn,
    .hero-btn,
    .install-btn {
        box-shadow: var(--cc-metal-rim-top), inset 0 0 0 1px rgba(255, 255, 255, 0.18);
    }

    .hero-btn-secondary,
    .btn.subtle {
        background: linear-gradient(155deg, rgba(255, 255, 255, 0.88), rgba(245, 249, 255, 0.92)) !important;
    }
}

/* Social feed actions feel less "glass chips", more modern metal controls */
.post-actions .chip {
    background: linear-gradient(145deg, rgba(255, 255, 255, 0.015), rgba(var(--accent-rgb), 0.04)) !important;
    border-color: rgba(255, 255, 255, 0.06) !important;
}

.post-actions .chip:hover {
    border-color: rgba(var(--accent-rgb), 0.18) !important;
}

@media (prefers-color-scheme: light) {
    .post-actions .chip {
        border-color: rgba(15, 23, 42, 0.08) !important;
        background: linear-gradient(145deg, rgba(255, 255, 255, 0.84), rgba(var(--accent-rgb), 0.04)) !important;
    }
}

/* v1.6.0 About page redesign (scoped, additive) */
.about-page {
    max-width: 1220px;
}

.about-page .about-stage {
    padding: clamp(1rem, 1.4vw, 1.25rem);
}

.about-page .page-shell-header {
    margin-bottom: clamp(1rem, 2vw, 1.4rem);
}

.about-page .page-shell-header .page-title {
    max-width: 18ch;
    line-height: 1.04;
    text-wrap: balance;
}

.about-page .page-shell-header .page-lead {
    max-width: 64ch;
}

.about-page .about-hero-panel {
    position: relative;
    overflow: hidden;
    border-radius: calc(var(--radius-card) + 4px);
    border: 1px solid var(--cc-border);
    background:
        radial-gradient(900px 380px at 8% -12%, rgba(var(--accent-rgb), 0.10), transparent 62%),
        radial-gradient(700px 300px at 100% 0%, rgba(255, 255, 255, 0.05), transparent 72%),
        linear-gradient(160deg, rgba(18, 24, 36, 0.76), rgba(28, 36, 52, 0.68));
    box-shadow: var(--cc-shell-shadow);
    padding: clamp(1.1rem, 2vw, 1.6rem);
    margin-bottom: clamp(1.35rem, 2.4vw, 2rem);
}

.about-page .about-hero-panel::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    border-radius: inherit;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.05), transparent 30%),
        linear-gradient(120deg, rgba(255, 255, 255, 0.03), transparent 58%);
}

.about-page .about-hero-copy {
    position: relative;
    z-index: 1;
    display: grid;
    gap: .9rem;
    justify-items: start;
}

.about-page .about-kicker {
    margin: 0;
    color: var(--cc-text-subtle);
    font-size: .78rem;
    letter-spacing: .18em;
    text-transform: uppercase;
    font-weight: 600;
}

.about-page .about-hero-panel h2 {
    margin: 0;
    font-family: var(--font-heading);
    font-weight: 700;
    letter-spacing: -.02em;
    line-height: 1.08;
    color: var(--cc-text);
    font-size: clamp(1.35rem, 2.8vw, 2.1rem);
    max-width: 20ch;
    text-wrap: balance;
}

.about-page .about-intro {
    margin: 0;
    color: var(--cc-text-muted);
    line-height: 1.6;
    max-width: 67ch;
    text-wrap: pretty;
}

.about-page .about-actions {
    margin-top: .1rem;
    display: flex;
    flex-wrap: wrap;
    gap: .75rem;
    align-items: center;
}

.about-page .about-actions .hero-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 46px;
    padding: .78rem 1rem;
    border-radius: 14px;
    line-height: 1;
    font-size: .95rem;
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
}

.about-page .about-chip-row {
    margin-top: .1rem;
}

.about-page .about-sections {
    display: grid;
    gap: clamp(1.4rem, 2.8vw, 2.2rem);
}

.about-page .about-block {
    border-radius: calc(var(--radius-card) + 2px);
    border: 1px solid var(--cc-border);
    background:
        radial-gradient(900px 420px at 8% 0%, rgba(var(--accent-rgb), 0.05), transparent 70%),
        var(--cc-panel-bg);
    box-shadow: var(--cc-shell-shadow);
    padding: clamp(1rem, 1.9vw, 1.35rem);
}

.about-page .about-block-head {
    display: grid;
    gap: .45rem;
    margin-bottom: clamp(.95rem, 1.5vw, 1.15rem);
}

.about-page .about-block-head h2 {
    margin: 0;
    font-family: var(--font-heading);
    font-size: clamp(1.18rem, 2vw, 1.55rem);
    line-height: 1.15;
    letter-spacing: -.02em;
    color: var(--cc-text);
    text-wrap: balance;
}

.about-page .about-copy-limit {
    margin: 0;
    max-width: 68ch;
    line-height: 1.58;
    color: var(--cc-text-muted);
    text-wrap: pretty;
}

.about-page .about-grid {
    display: grid;
    gap: 1rem;
}

.about-page .about-grid-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.about-page .about-grid-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.about-page .about-card {
    border-radius: var(--radius-card);
    border: 1px solid var(--cc-border);
    background:
        linear-gradient(160deg, rgba(255, 255, 255, 0.02), rgba(var(--accent-rgb), 0.03)),
        var(--cc-card-bg);
    box-shadow: var(--cc-card-shadow);
    padding: 1rem;
    display: grid;
    gap: .65rem;
    align-content: start;
    min-width: 0;
}

.about-page .about-card h3 {
    margin: 0;
    color: var(--cc-text);
    font-size: 1.02rem;
    line-height: 1.2;
}

.about-page .about-card p {
    margin: 0;
    color: var(--cc-text-muted);
    line-height: 1.55;
    text-wrap: pretty;
}

.about-page .about-card .chip-row {
    margin-top: .1rem;
}

.about-page .about-card-emphasis {
    border-color: rgba(var(--accent-rgb), 0.18);
    background:
        radial-gradient(700px 240px at 10% 0%, rgba(var(--accent-rgb), 0.10), transparent 65%),
        linear-gradient(160deg, rgba(255, 255, 255, 0.02), rgba(var(--accent-rgb), 0.04)),
        var(--cc-card-bg);
}

.about-page .about-compare {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
}

.about-page .about-compare-column {
    border-radius: var(--radius-card);
    border: 1px solid var(--cc-border);
    background:
        linear-gradient(160deg, rgba(255, 255, 255, 0.01), rgba(255, 255, 255, 0)),
        var(--cc-card-bg);
    box-shadow: var(--cc-card-shadow);
    padding: 1rem;
}

.about-page .about-compare-column h3 {
    margin: 0 0 .75rem;
    font-size: 1rem;
    line-height: 1.25;
    color: var(--cc-text);
}

.about-page .about-compare-column-focus {
    border-color: rgba(var(--accent-rgb), 0.18);
    background:
        radial-gradient(700px 260px at 12% 0%, rgba(var(--accent-rgb), 0.08), transparent 68%),
        linear-gradient(160deg, rgba(255, 255, 255, 0.015), rgba(var(--accent-rgb), 0.025)),
        var(--cc-card-bg);
}

.about-page .about-compare-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: .6rem;
}

.about-page .about-compare-list li {
    display: grid;
    gap: .18rem;
    align-content: start;
    padding: .72rem .78rem;
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.05);
    background: linear-gradient(160deg, rgba(255, 255, 255, 0.015), rgba(255, 255, 255, 0));
}

.about-page .compare-label {
    color: var(--cc-text);
    font-size: .82rem;
    font-weight: 600;
    letter-spacing: .05em;
    text-transform: uppercase;
}

.about-page .compare-copy {
    color: var(--cc-text-muted);
    line-height: 1.45;
    text-wrap: pretty;
}

.about-page .about-usecases .about-card {
    gap: .55rem;
}

.about-page .about-outcome {
    padding-top: .25rem;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
    font-size: .95rem;
}

.about-page .about-outcome strong {
    color: var(--cc-text);
}

.about-page .about-values-block {
    background:
        radial-gradient(900px 420px at 88% 0%, rgba(var(--accent-rgb), 0.05), transparent 70%),
        var(--cc-panel-bg);
}

.about-page .about-values {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .9rem;
}

.about-page .about-value-item {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: .75rem;
    align-items: start;
    border-radius: 14px;
    border: 1px solid var(--cc-border);
    background:
        linear-gradient(160deg, rgba(255, 255, 255, 0.01), rgba(var(--accent-rgb), 0.02)),
        var(--cc-card-bg);
    box-shadow: var(--cc-card-shadow);
    padding: .9rem;
}

.about-page .about-value-item h3 {
    margin: 0 0 .3rem;
    font-size: .98rem;
    color: var(--cc-text);
}

.about-page .about-value-item p {
    margin: 0;
    color: var(--cc-text-muted);
    line-height: 1.5;
    text-wrap: pretty;
}

.about-page .about-value-icon {
    width: 1.7rem;
    height: 1.7rem;
    display: grid;
    place-items: center;
    border-radius: 999px;
    font-size: .8rem;
    font-weight: 700;
    color: var(--cc-text);
    border: 1px solid rgba(var(--accent-rgb), 0.20);
    background: linear-gradient(155deg, rgba(var(--accent-rgb), 0.12), rgba(var(--accent-rgb), 0.04));
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.about-page .about-cta {
    margin-top: .1rem;
}

.about-page .about-cta-shell {
    border-radius: calc(var(--radius-card) + 6px);
    border: 1px solid rgba(var(--accent-rgb), 0.18);
    background:
        radial-gradient(900px 420px at 8% -6%, rgba(var(--accent-rgb), 0.10), transparent 65%),
        linear-gradient(160deg, rgba(20, 27, 40, 0.84), rgba(29, 37, 53, 0.78));
    box-shadow: var(--cc-shell-shadow);
    padding: clamp(1.1rem, 2vw, 1.5rem);
    display: grid;
    gap: .75rem;
}

.about-page .about-cta-shell h2 {
    margin: 0;
    color: var(--cc-text);
    font-family: var(--font-heading);
    font-size: clamp(1.2rem, 2.2vw, 1.7rem);
    line-height: 1.12;
    letter-spacing: -.02em;
    max-width: 28ch;
    text-wrap: balance;
}

.about-page .about-cta .about-copy-limit {
    max-width: 66ch;
}

.about-page .about-cta .about-actions {
    margin-top: .15rem;
}

/* Desktop spacing/readability */
@media (min-width: 1024px) {
    .about-page .about-stage {
        padding: 1.2rem;
    }

    .about-page .about-card {
        padding: 1.05rem;
    }

    .about-page .about-block {
        padding: 1.2rem;
    }
}

/* Tablet */
@media (max-width: 980px) {
    .about-page .about-grid-3 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .about-page .about-compare {
        grid-template-columns: 1fr;
    }
}

/* Mobile */
@media (max-width: 640px) {
    .about-page {
        max-width: 100%;
    }

    .about-page .about-stage {
        padding: .85rem;
    }

    .about-page .page-shell-header .page-title {
        max-width: none;
    }

    .about-page .about-grid-2,
    .about-page .about-grid-3,
    .about-page .about-values {
        grid-template-columns: 1fr;
    }

    .about-page .about-card,
    .about-page .about-compare-column,
    .about-page .about-value-item {
        padding: .9rem;
    }

    .about-page .about-hero-copy {
        gap: .75rem;
    }

    .about-page .about-hero-panel h2 {
        max-width: none;
    }

    .about-page .about-actions {
        width: 100%;
    }

    .about-page .about-actions .hero-btn {
        display: flex;
        width: 100%;
        justify-content: center;
        text-align: center;
        white-space: normal;
    }
}

@media (prefers-color-scheme: light) {
    .about-page .about-hero-panel {
        border-color: rgba(15, 23, 42, 0.10);
        background:
            radial-gradient(900px 380px at 8% -12%, rgba(var(--accent-rgb), 0.08), transparent 62%),
            radial-gradient(700px 300px at 100% 0%, rgba(15, 23, 42, 0.03), transparent 72%),
            linear-gradient(160deg, rgba(255, 255, 255, 0.92), rgba(245, 249, 255, 0.94));
        box-shadow: 0 18px 34px -28px rgba(15, 23, 42, 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.92);
    }

    .about-page .about-hero-panel::before {
        background:
            linear-gradient(180deg, rgba(255, 255, 255, 0.55), transparent 34%),
            linear-gradient(120deg, rgba(255, 255, 255, 0.25), transparent 58%);
    }

    .about-page .about-block {
        border-color: rgba(15, 23, 42, 0.09);
        background:
            radial-gradient(900px 420px at 8% 0%, rgba(var(--accent-rgb), 0.04), transparent 70%),
            linear-gradient(160deg, rgba(255, 255, 255, 0.92), rgba(247, 250, 255, 0.95));
        box-shadow: 0 18px 34px -30px rgba(15, 23, 42, 0.14), inset 0 1px 0 rgba(255, 255, 255, 0.8);
    }

    .about-page .about-card,
    .about-page .about-compare-column,
    .about-page .about-value-item {
        border-color: rgba(15, 23, 42, 0.08);
        background:
            linear-gradient(160deg, rgba(255, 255, 255, 0.88), rgba(247, 250, 255, 0.94)),
            rgba(255, 255, 255, 0.9);
        box-shadow: 0 12px 20px -18px rgba(15, 23, 42, 0.15), inset 0 1px 0 rgba(255, 255, 255, 0.9);
    }

    .about-page .about-card-emphasis,
    .about-page .about-compare-column-focus {
        border-color: rgba(var(--accent-rgb), 0.18);
        background:
            radial-gradient(700px 260px at 10% 0%, rgba(var(--accent-rgb), 0.07), transparent 68%),
            linear-gradient(160deg, rgba(255, 255, 255, 0.9), rgba(244, 248, 255, 0.94));
    }

    .about-page .about-compare-list li {
        border-color: rgba(15, 23, 42, 0.06);
        background: linear-gradient(160deg, rgba(255, 255, 255, 0.75), rgba(248, 250, 255, 0.85));
    }

    .about-page .about-outcome {
        border-top-color: rgba(15, 23, 42, 0.07);
    }

    .about-page .about-cta-shell {
        border-color: rgba(var(--accent-rgb), 0.18);
        background:
            radial-gradient(900px 420px at 8% -6%, rgba(var(--accent-rgb), 0.08), transparent 65%),
            linear-gradient(160deg, rgba(255, 255, 255, 0.94), rgba(243, 248, 255, 0.96));
        box-shadow: 0 20px 34px -28px rgba(15, 23, 42, 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.94);
    }
}

@media (prefers-reduced-motion: reduce) {
    .about-page .about-card,
    .about-page .about-compare-column,
    .about-page .about-value-item {
        transition: none !important;
    }
}

/* v1.6.0 Features page redesign (scoped, additive) */
.features-page {
    max-width: 1220px;
}

.features-page .features-stage {
    padding: clamp(1rem, 1.4vw, 1.25rem);
}

.features-page .page-shell-header {
    margin-bottom: clamp(1rem, 2vw, 1.4rem);
}

.features-page .page-shell-header .page-heading-copy {
    text-align: left;
    justify-items: start;
}

.features-page .page-shell-header .page-kicker {
    margin-inline: 0;
    text-align: left;
}

.features-page .page-shell-header .page-title {
    max-width: 22ch;
    line-height: 1.04;
    text-wrap: balance;
    margin-inline: 0;
    text-align: left;
}

.features-page .page-shell-header .page-lead {
    max-width: 66ch;
    text-wrap: pretty;
    margin-inline: 0;
    text-align: left;
}

.features-page .features-hero-panel {
    position: relative;
    overflow: hidden;
    border-radius: calc(var(--radius-card) + 4px);
    border: 1px solid var(--cc-border);
    background:
        radial-gradient(900px 360px at 10% -10%, rgba(var(--accent-rgb), 0.10), transparent 64%),
        radial-gradient(760px 300px at 100% 2%, rgba(255, 255, 255, 0.04), transparent 72%),
        linear-gradient(160deg, rgba(18, 24, 36, 0.74), rgba(28, 36, 52, 0.68));
    box-shadow: var(--cc-shell-shadow);
    padding: clamp(1.1rem, 2vw, 1.6rem);
    margin-bottom: clamp(1.35rem, 2.4vw, 2rem);
}

.features-page .features-hero-panel::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    border-radius: inherit;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.05), transparent 32%),
        linear-gradient(120deg, rgba(255, 255, 255, 0.02), transparent 58%);
}

.features-page .features-hero-copy {
    position: relative;
    z-index: 1;
    display: grid;
    gap: .9rem;
    justify-items: start;
    text-align: left;
}

.features-page .features-kicker {
    margin: 0;
    color: var(--cc-text-subtle);
    font-size: .78rem;
    letter-spacing: .18em;
    text-transform: uppercase;
    font-weight: 600;
}

.features-page .features-hero-panel h2 {
    margin: 0;
    font-family: var(--font-heading);
    font-weight: 700;
    letter-spacing: -.02em;
    line-height: 1.08;
    color: var(--cc-text);
    font-size: clamp(1.35rem, 2.8vw, 2.05rem);
    max-width: 26ch;
    text-wrap: balance;
    text-align: left;
    margin-inline: 0;
}

.features-page .features-hero-panel h2::after {
    content: none !important;
}

.features-page .features-intro {
    margin: 0;
    color: var(--cc-text-muted);
    line-height: 1.6;
    max-width: 68ch;
    text-wrap: pretty;
    text-align: left;
    margin-inline: 0;
}

.features-page .features-actions {
    margin-top: .1rem;
    display: flex;
    flex-wrap: wrap;
    gap: .75rem;
    align-items: center;
    justify-content: flex-start;
}

.features-page .features-actions .hero-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 46px;
    padding: .78rem 1rem;
    border-radius: 14px;
    line-height: 1;
    font-size: .95rem;
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
}

.features-page .features-chip-row {
    margin-top: .1rem;
}

.features-page .features-sections {
    display: grid;
    gap: clamp(1.4rem, 2.8vw, 2.2rem);
}

.features-page .features-block {
    border-radius: calc(var(--radius-card) + 2px);
    border: 1px solid var(--cc-border);
    background:
        radial-gradient(900px 420px at 8% 0%, rgba(var(--accent-rgb), 0.05), transparent 70%),
        var(--cc-panel-bg);
    box-shadow: var(--cc-shell-shadow);
    padding: clamp(1rem, 1.9vw, 1.35rem);
}

.features-page .features-block-head {
    display: grid;
    gap: .45rem;
    margin-bottom: clamp(.95rem, 1.5vw, 1.15rem);
    justify-items: start;
    text-align: left;
}

.features-page .features-block-head h2 {
    margin: 0;
    font-family: var(--font-heading);
    font-size: clamp(1.18rem, 2vw, 1.55rem);
    line-height: 1.15;
    letter-spacing: -.02em;
    color: var(--cc-text);
    text-wrap: balance;
    margin-inline: 0;
    text-align: left;
}

.features-page .features-block-head h2::after,
.features-page .features-cta-shell h2::after {
    content: none !important;
}

.features-page .features-copy-limit {
    margin: 0;
    max-width: 68ch;
    line-height: 1.58;
    color: var(--cc-text-muted);
    text-wrap: pretty;
    margin-inline: 0;
    text-align: left;
}

.features-page .features-grid {
    display: grid;
    gap: 1rem;
}

.features-page .features-grid-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.features-page .features-grid-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.features-page .features-card {
    border-radius: var(--radius-card);
    border: 1px solid var(--cc-border);
    background:
        linear-gradient(160deg, rgba(255, 255, 255, 0.02), rgba(var(--accent-rgb), 0.03)),
        var(--cc-card-bg);
    box-shadow: var(--cc-card-shadow);
    padding: 1rem;
    display: grid;
    gap: .65rem;
    align-content: start;
    min-width: 0;
}

.features-page .features-card h3 {
    margin: 0;
    color: var(--cc-text);
    font-size: 1.02rem;
    line-height: 1.2;
    text-wrap: balance;
}

.features-page .features-card p {
    margin: 0;
    color: var(--cc-text-muted);
    line-height: 1.55;
    text-wrap: pretty;
}

.features-page .features-card .chip-row {
    margin-top: .1rem;
}

.features-page .features-card-emphasis {
    border-color: rgba(var(--accent-rgb), 0.18);
    background:
        radial-gradient(700px 240px at 12% 0%, rgba(var(--accent-rgb), 0.09), transparent 66%),
        linear-gradient(160deg, rgba(255, 255, 255, 0.02), rgba(var(--accent-rgb), 0.04)),
        var(--cc-card-bg);
}

.features-page .features-outcome {
    padding-top: .25rem;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
    font-size: .95rem;
}

.features-page .features-outcome strong {
    color: var(--cc-text);
}

.features-page .features-flow {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: .9rem;
    counter-reset: feature-flow;
}

.features-page .features-flow-item {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: .8rem;
    align-items: start;
    border-radius: 14px;
    border: 1px solid var(--cc-border);
    background:
        linear-gradient(160deg, rgba(255, 255, 255, 0.01), rgba(var(--accent-rgb), 0.02)),
        var(--cc-card-bg);
    box-shadow: var(--cc-card-shadow);
    padding: .95rem;
}

.features-page .features-flow-item h3 {
    margin: 0 0 .3rem;
    color: var(--cc-text);
    font-size: .98rem;
    line-height: 1.25;
}

.features-page .features-flow-item p {
    margin: 0;
    color: var(--cc-text-muted);
    line-height: 1.5;
    text-wrap: pretty;
}

.features-page .features-flow-step {
    width: 1.8rem;
    height: 1.8rem;
    border-radius: 999px;
    display: grid;
    place-items: center;
    font-size: .8rem;
    font-weight: 700;
    color: var(--cc-text);
    border: 1px solid rgba(var(--accent-rgb), 0.20);
    background: linear-gradient(155deg, rgba(var(--accent-rgb), 0.12), rgba(var(--accent-rgb), 0.04));
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.features-page .features-cta-shell {
    border-radius: calc(var(--radius-card) + 6px);
    border: 1px solid rgba(var(--accent-rgb), 0.18);
    background:
        radial-gradient(900px 420px at 8% -6%, rgba(var(--accent-rgb), 0.10), transparent 65%),
        linear-gradient(160deg, rgba(20, 27, 40, 0.84), rgba(29, 37, 53, 0.78));
    box-shadow: var(--cc-shell-shadow);
    padding: clamp(1.1rem, 2vw, 1.5rem);
    display: grid;
    gap: .75rem;
}

.features-page .features-cta-shell h2 {
    margin: 0;
    color: var(--cc-text);
    font-family: var(--font-heading);
    font-size: clamp(1.2rem, 2.2vw, 1.7rem);
    line-height: 1.12;
    letter-spacing: -.02em;
    max-width: 30ch;
    text-wrap: balance;
    margin-inline: 0;
    text-align: left;
}

/* Desktop */
@media (min-width: 1024px) {
    .features-page .features-stage {
        padding: 1.2rem;
    }

    .features-page .features-card,
    .features-page .features-flow-item {
        padding: 1.05rem;
    }

    .features-page .features-block {
        padding: 1.2rem;
    }
}

/* Tablet */
@media (max-width: 980px) {
    .features-page .features-grid-3 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* Mobile */
@media (max-width: 640px) {
    .features-page {
        max-width: 100%;
    }

    .features-page .features-stage {
        padding: .85rem;
    }

    .features-page .page-shell-header .page-title {
        max-width: none;
    }

    .features-page .features-grid-2,
    .features-page .features-grid-3 {
        grid-template-columns: 1fr;
    }

    .features-page .features-card,
    .features-page .features-flow-item {
        padding: .9rem;
    }

    .features-page .features-hero-panel h2 {
        max-width: none;
    }

    .features-page .features-actions {
        width: 100%;
    }

    .features-page .features-actions .hero-btn {
        display: flex;
        width: 100%;
        justify-content: center;
        text-align: center;
        white-space: normal;
    }
}

@media (prefers-color-scheme: light) {
    .features-page .features-hero-panel {
        border-color: rgba(15, 23, 42, 0.10);
        background:
            radial-gradient(900px 380px at 8% -12%, rgba(var(--accent-rgb), 0.08), transparent 62%),
            radial-gradient(700px 300px at 100% 0%, rgba(15, 23, 42, 0.03), transparent 72%),
            linear-gradient(160deg, rgba(255, 255, 255, 0.92), rgba(245, 249, 255, 0.94));
        box-shadow: 0 18px 34px -28px rgba(15, 23, 42, 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.92);
    }

    .features-page .features-hero-panel::before {
        background:
            linear-gradient(180deg, rgba(255, 255, 255, 0.55), transparent 34%),
            linear-gradient(120deg, rgba(255, 255, 255, 0.25), transparent 58%);
    }

    .features-page .features-block {
        border-color: rgba(15, 23, 42, 0.09);
        background:
            radial-gradient(900px 420px at 8% 0%, rgba(var(--accent-rgb), 0.04), transparent 70%),
            linear-gradient(160deg, rgba(255, 255, 255, 0.92), rgba(247, 250, 255, 0.95));
        box-shadow: 0 18px 34px -30px rgba(15, 23, 42, 0.14), inset 0 1px 0 rgba(255, 255, 255, 0.8);
    }

    .features-page .features-card,
    .features-page .features-flow-item {
        border-color: rgba(15, 23, 42, 0.08);
        background:
            linear-gradient(160deg, rgba(255, 255, 255, 0.88), rgba(247, 250, 255, 0.94)),
            rgba(255, 255, 255, 0.9);
        box-shadow: 0 12px 20px -18px rgba(15, 23, 42, 0.15), inset 0 1px 0 rgba(255, 255, 255, 0.9);
    }

    .features-page .features-card-emphasis {
        border-color: rgba(var(--accent-rgb), 0.18);
        background:
            radial-gradient(700px 260px at 10% 0%, rgba(var(--accent-rgb), 0.07), transparent 68%),
            linear-gradient(160deg, rgba(255, 255, 255, 0.9), rgba(244, 248, 255, 0.94));
    }

    .features-page .features-outcome {
        border-top-color: rgba(15, 23, 42, 0.07);
    }

    .features-page .features-cta-shell {
        border-color: rgba(var(--accent-rgb), 0.18);
        background:
            radial-gradient(900px 420px at 8% -6%, rgba(var(--accent-rgb), 0.08), transparent 65%),
            linear-gradient(160deg, rgba(255, 255, 255, 0.94), rgba(243, 248, 255, 0.96));
        box-shadow: 0 20px 34px -28px rgba(15, 23, 42, 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.94);
    }
}

@media (prefers-reduced-motion: reduce) {
    .features-page .features-card,
    .features-page .features-flow-item {
        transition: none !important;
    }
}

/* Mobile splash gate: desktop-only experience (phase focus) */
.cc-desktop-only-gate {
    position: fixed;
    inset: 0;
    z-index: 10000;
    display: grid;
    place-items: center;
    padding: 1rem;
    background:
        radial-gradient(800px 520px at 12% -8%, rgba(var(--accent-rgb), 0.14), transparent 68%),
        radial-gradient(700px 480px at 100% 5%, rgba(255, 255, 255, 0.05), transparent 72%),
        linear-gradient(160deg, rgba(11, 16, 25, 0.96), rgba(19, 25, 37, 0.98));
    -webkit-backdrop-filter: blur(14px) saturate(120%);
    backdrop-filter: blur(14px) saturate(120%);
}

.cc-desktop-only-gate[hidden] {
    display: none !important;
}

.cc-desktop-only-shell {
    width: min(560px, 100%);
    border-radius: 22px;
    border: 1px solid rgba(var(--accent-rgb), 0.20);
    background:
        radial-gradient(700px 320px at 10% -8%, rgba(var(--accent-rgb), 0.13), transparent 70%),
        linear-gradient(160deg, rgba(20, 27, 40, 0.92), rgba(30, 38, 54, 0.90));
    box-shadow:
        0 24px 50px -30px rgba(0, 0, 0, 0.85),
        inset 0 1px 0 rgba(255, 255, 255, 0.07);
    padding: 1.15rem 1rem 1rem;
    color: var(--cc-text, #eaf0ff);
    display: grid;
    gap: .8rem;
}

.cc-desktop-only-kicker {
    margin: 0;
    color: var(--cc-text-subtle, rgba(226, 232, 240, 0.72));
    font-size: .78rem;
    font-weight: 700;
    letter-spacing: .18em;
    text-transform: uppercase;
}

.cc-desktop-only-shell h1 {
    margin: 0;
    font-family: var(--font-heading, "Sora", sans-serif);
    font-size: clamp(1.3rem, 5vw, 1.7rem);
    line-height: 1.08;
    letter-spacing: -.02em;
    color: var(--cc-text, #eef4ff);
    text-wrap: balance;
}

.cc-desktop-only-shell h1::after {
    content: none !important;
}

.cc-desktop-only-shell p {
    margin: 0;
    color: var(--cc-text-muted, rgba(226, 232, 240, 0.82));
    line-height: 1.55;
    text-wrap: pretty;
}

.cc-desktop-only-list {
    margin: 0;
    padding: 0;
    list-style: none;
    display: grid;
    gap: .45rem;
}

.cc-desktop-only-list li {
    position: relative;
    padding: .65rem .7rem .65rem 2rem;
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.07);
    background: linear-gradient(155deg, rgba(255, 255, 255, 0.02), rgba(var(--accent-rgb), 0.05));
    color: var(--cc-text, #eef4ff);
    line-height: 1.35;
}

.cc-desktop-only-list li::before {
    content: "";
    position: absolute;
    left: .75rem;
    top: 50%;
    width: .45rem;
    height: .45rem;
    border-radius: 999px;
    transform: translateY(-50%);
    background: rgba(var(--accent-rgb), 0.9);
    box-shadow: 0 0 0 3px rgba(var(--accent-rgb), 0.14);
}

.cc-desktop-only-note {
    font-size: .92rem;
    color: var(--cc-text-subtle, rgba(226, 232, 240, 0.7));
}

body.cc-desktop-only-active {
    overflow: hidden !important;
}

body.cc-desktop-only-active > *:not(.cc-desktop-only-gate) {
    pointer-events: none;
    -webkit-user-select: none;
    user-select: none;
}

@media (prefers-color-scheme: light) {
    .cc-desktop-only-gate {
        background:
            radial-gradient(800px 520px at 12% -8%, rgba(var(--accent-rgb), 0.12), transparent 68%),
            radial-gradient(700px 480px at 100% 5%, rgba(15, 23, 42, 0.04), transparent 72%),
            linear-gradient(160deg, rgba(241, 245, 252, 0.97), rgba(233, 238, 246, 0.98));
    }

    .cc-desktop-only-shell {
        border-color: rgba(var(--accent-rgb), 0.18);
        background:
            radial-gradient(700px 320px at 10% -8%, rgba(var(--accent-rgb), 0.08), transparent 70%),
            linear-gradient(160deg, rgba(255, 255, 255, 0.94), rgba(244, 248, 255, 0.96));
        box-shadow:
            0 24px 42px -30px rgba(15, 23, 42, 0.28),
            inset 0 1px 0 rgba(255, 255, 255, 0.9);
        color: var(--cc-text, #0f172a);
    }

    .cc-desktop-only-kicker {
        color: var(--cc-text-subtle, #64748b);
    }

    .cc-desktop-only-shell p {
        color: var(--cc-text-muted, #475569);
    }

    .cc-desktop-only-list li {
        border-color: rgba(15, 23, 42, 0.08);
        background: linear-gradient(155deg, rgba(255, 255, 255, 0.9), rgba(var(--accent-rgb), 0.04));
        color: var(--cc-text, #0f172a);
    }
}

@media (min-width: 821px) {
    .cc-desktop-only-gate {
        display: none !important;
    }
}

/* v1.9 Projects hub overhaul (desktop-first, demo mode) */
.projects-page-v2 {
    max-width: 1320px;
}

.projects-page-v2 .page-shell-header .page-title {
    max-width: 21ch;
    text-wrap: balance;
}

.projects-page-v2 .page-shell-header .page-lead {
    max-width: 66ch;
    text-wrap: pretty;
}

.projects-page-v2 .projects-v2-layout {
    display: grid;
    grid-template-columns: 284px minmax(0, 1fr) 284px;
    gap: 1.15rem;
    align-items: start;
}

.projects-page-v2 .projects-v2-controls,
.projects-page-v2 .projects-v2-insights {
    position: sticky;
    top: calc(var(--navbar-height) + 18px);
}

.projects-page-v2 .s-card {
    border: 1px solid rgba(255, 255, 255, 0.08);
    background: linear-gradient(160deg, rgba(20, 26, 38, 0.58), rgba(29, 37, 53, 0.54));
    box-shadow: 0 12px 22px -22px rgba(2, 7, 18, 0.62);
    padding: 0.95rem;
}

.projects-page-v2 .s-block {
    margin-bottom: 1rem;
    border-radius: 12px;
}

.projects-page-v2 .s-title {
    font-size: 0.98rem;
    margin-bottom: 0.45rem;
}

.projects-page-v2 .s-caption {
    font-size: 0.83rem;
    line-height: 1.45;
    color: var(--text-tertiary-muted);
}

.projects-page-v2 .s-list {
    gap: 0.45rem;
}

.projects-page-v2 .s-list li {
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 11px;
    padding: 0.5rem 0.58rem;
    background: linear-gradient(160deg, rgba(255, 255, 255, 0.015), rgba(var(--accent-rgb), 0.03));
}

.projects-page-v2 .projects-v2-controls .s-block:last-child {
    display: grid;
    gap: 0.55rem;
}

.projects-page-v2 .projects-archived-shortcut {
    width: 100%;
    margin-top: 0.5rem;
    min-height: 36px;
    font-size: 0.82rem;
}

.projects-page-v2 .projects-archived-shortcut.is-active,
.projects-page-v2 .projects-archived-shortcut[aria-pressed="true"] {
    border-color: rgba(var(--accent-rgb), 0.36);
    background: linear-gradient(150deg, rgba(var(--accent-rgb), 0.22), rgba(var(--accent-rgb), 0.10));
    color: var(--text-primary);
    box-shadow: 0 9px 18px -16px rgba(var(--accent-rgb), 0.46);
}

.projects-page-v2.is-archive-mode .projects-status-block {
    display: none;
}

.projects-page-v2 .projects-view-tabs {
    display: grid;
    gap: 0.45rem;
}

.projects-page-v2 .projects-view-tabs .tab {
    min-height: 40px;
    justify-content: center;
    text-align: center;
    text-transform: none;
    letter-spacing: 0.01em;
    font-size: 0.91rem;
    font-weight: 600;
}

.projects-page-v2 .projects-view-tabs .tab.is-active,
.projects-page-v2 .projects-view-tabs .tab[aria-selected="true"] {
    border-color: rgba(var(--accent-rgb), 0.28) !important;
    background: linear-gradient(150deg, rgba(var(--accent-rgb), 0.16), rgba(var(--accent-rgb), 0.07)) !important;
    color: var(--text-primary) !important;
}

.projects-page-v2 .projects-view-tabs .tab:focus-visible,
.projects-page-v2 .projects-filter-group .chip:focus-visible,
.projects-page-v2 .project-card-actions .btn:focus-visible,
.projects-page-v2 .project-card-actions .auth-btn:focus-visible {
    outline: 2px solid rgba(var(--accent-rgb), 0.42);
    outline-offset: 2px;
}

.projects-page-v2 .projects-search,
.projects-page-v2 .projects-sort {
    width: 100%;
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.10);
    background: linear-gradient(150deg, rgba(255, 255, 255, 0.02), rgba(var(--accent-rgb), 0.05));
    color: var(--text-primary);
    padding: 0.58rem 0.7rem;
    margin: 0.2rem 0;
    font-size: 0.92rem;
}

.projects-page-v2 .projects-search::placeholder {
    color: var(--text-tertiary-muted);
}

.projects-page-v2 .projects-search:focus,
.projects-page-v2 .projects-sort:focus {
    border-color: rgba(var(--accent-rgb), 0.28);
    box-shadow: 0 0 0 3px rgba(var(--accent-rgb), 0.12);
    outline: none;
}

.projects-page-v2 .projects-filter-group .chip {
    text-transform: none !important;
    letter-spacing: 0.01em !important;
    font-size: 0.82rem;
    font-weight: 550;
    padding: 0.42rem 0.66rem;
}

.projects-page-v2 .projects-filter-group .chip[aria-pressed="true"] {
    border-color: rgba(var(--accent-rgb), 0.34) !important;
    background:
        linear-gradient(150deg, rgba(var(--accent-rgb), 0.19), rgba(var(--accent-rgb), 0.09)) !important;
    color: var(--text-primary) !important;
    box-shadow: 0 7px 16px -14px rgba(var(--accent-rgb), 0.42);
}

.projects-page-v2 .projects-new-btn,
.projects-page-v2 .projects-reset-btn {
    width: 100%;
}

.projects-page-v2 .projects-v2-main {
    min-width: 0;
}

.projects-page-v2 .projects-v2-banner {
    border-radius: var(--radius-card);
    border: 1px solid rgba(255, 255, 255, 0.09);
    padding: 1rem 1.05rem;
    margin-bottom: 1rem;
    background:
        radial-gradient(850px 320px at 6% -8%, rgba(var(--accent-rgb), 0.05), transparent 66%),
        linear-gradient(160deg, rgba(19, 25, 38, 0.6), rgba(28, 36, 52, 0.54));
    box-shadow: 0 12px 22px -21px rgba(2, 7, 18, 0.56);
}

.projects-page-v2 .projects-v2-banner-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.7rem;
    margin-bottom: 0.2rem;
}

.projects-page-v2 .projects-v2-banner-head .page-kicker {
    margin: 0;
}

.projects-page-v2 .projects-banner-new-btn {
    min-height: 40px;
    padding: 0.5rem 0.9rem;
    border-radius: 12px;
    white-space: nowrap;
}

.projects-page-v2 .projects-v2-banner h2 {
    margin: 0.08rem 0 0.4rem;
    font-family: var(--font-heading);
    font-size: clamp(1.2rem, 1.9vw, 1.6rem);
    line-height: 1.16;
    color: var(--text-primary);
    text-wrap: balance;
}

.projects-page-v2 .projects-v2-banner h2::after {
    content: none !important;
}

.projects-page-v2 .projects-v2-banner p {
    margin: 0;
    color: var(--text-secondary);
    max-width: 58ch;
    line-height: 1.48;
}

.projects-page-v2 .projects-active-filters {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    margin: 0 0 0.92rem;
    padding: 0.58rem 0.68rem;
    border-radius: 14px;
    border: 1px solid rgba(255, 255, 255, 0.10);
    background:
        radial-gradient(760px 220px at 6% -10%, rgba(var(--accent-rgb), 0.06), transparent 72%),
        linear-gradient(160deg, rgba(18, 24, 36, 0.56), rgba(27, 35, 50, 0.5));
}

.projects-page-v2 .projects-active-label {
    font-size: 0.74rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--text-tertiary-muted);
    font-weight: 650;
}

.projects-page-v2 .projects-active-pills {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 0.45rem;
    align-items: center;
}

.projects-page-v2 .projects-active-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.38rem;
    min-height: 32px;
    border-radius: 999px;
    border: 1px solid rgba(var(--accent-rgb), 0.3) !important;
    background: linear-gradient(150deg, rgba(var(--accent-rgb), 0.2), rgba(var(--accent-rgb), 0.1)) !important;
    color: var(--text-primary) !important;
    padding: 0.36rem 0.66rem;
    box-shadow: 0 7px 14px -14px rgba(var(--accent-rgb), 0.42);
}

.projects-page-v2 .projects-active-pill-key {
    font-size: 0.72rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-tertiary-muted);
}

.projects-page-v2 .projects-active-pill-value {
    font-size: 0.8rem;
    font-weight: 600;
    letter-spacing: 0.01em;
}

.projects-page-v2 .projects-active-pill-close {
    font-size: 0.92rem;
    line-height: 1;
    color: var(--text-primary);
}

.projects-page-v2 .projects-active-clear {
    margin-left: auto;
    min-height: 32px;
    padding: 0.34rem 0.64rem;
    font-size: 0.76rem;
}

.projects-page-v2 .projects-active-pill:focus-visible,
.projects-page-v2 .projects-active-clear:focus-visible {
    outline: 2px solid rgba(var(--accent-rgb), 0.48);
    outline-offset: 2px;
}

.projects-page-v2 .projects-v2-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.95rem;
}

.projects-page-v2 .project-card-v2 {
    position: relative;
    min-width: 0;
    border-radius: var(--radius-card);
    border: 1px solid rgba(255, 255, 255, 0.09);
    padding: 1rem;
    background:
        linear-gradient(160deg, rgba(18, 24, 36, 0.64), rgba(28, 36, 52, 0.6)),
        linear-gradient(145deg, rgba(var(--accent-rgb), 0.04), rgba(var(--accent-rgb), 0));
    box-shadow: 0 12px 22px -22px rgba(2, 7, 18, 0.58);
    transition: transform var(--motion-fast) ease, box-shadow var(--motion-fast) ease, border-color var(--motion-fast) ease;
}

.projects-page-v2 .project-card-v2:hover {
    transform: translateY(-1px);
    border-color: rgba(var(--accent-rgb), 0.18);
    box-shadow: 0 16px 28px -24px rgba(2, 7, 18, 0.68);
}

.projects-page-v2 .project-card-v2 h3 {
    margin: 0.25rem 0 0.42rem;
    color: var(--text-primary);
    line-height: 1.24;
    font-size: 1.02rem;
    text-wrap: balance;
}

.projects-page-v2 .project-card-v2 p {
    margin: 0;
    color: var(--text-secondary);
    line-height: 1.45;
    font-size: 0.96rem;
}

.projects-page-v2 .project-card-top {
    display: flex;
    justify-content: space-between;
    gap: 0.55rem;
    align-items: center;
}

.projects-page-v2 .project-card-meta {
    margin: 0;
    font-size: 0.76rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--text-tertiary-muted);
}

.projects-page-v2 .project-status-badge {
    font-size: 0.68rem;
    padding: 0.3rem 0.55rem;
    border-radius: 999px;
    border: 1px solid rgba(var(--accent-rgb), 0.22);
    background: linear-gradient(145deg, rgba(var(--accent-rgb), 0.14), rgba(var(--accent-rgb), 0.05));
    color: var(--text-primary);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    font-weight: 600;
    white-space: nowrap;
}

.projects-page-v2 .project-card-foot {
    margin-top: 0.7rem;
    display: grid;
    gap: 0.45rem;
}

.projects-page-v2 .project-card-submeta {
    margin: 0;
    font-size: 0.84rem;
    color: var(--text-tertiary-muted);
}

.projects-page-v2 .project-card-v2 .chip-row {
    gap: 0.38rem;
}

.projects-page-v2 .project-card-v2 .chip {
    text-transform: none !important;
    letter-spacing: 0.02em !important;
    font-size: 0.73rem;
    font-weight: 540;
    padding: 0.34rem 0.58rem;
    border-color: rgba(var(--accent-rgb), 0.14);
    background: linear-gradient(150deg, rgba(255, 255, 255, 0.02), rgba(var(--accent-rgb), 0.05));
    box-shadow: none;
}

.projects-page-v2 .project-card-actions {
    margin-top: 0.72rem;
    padding-top: 0.58rem;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    gap: 0.44rem;
}

.projects-page-v2 .project-card-actions .btn,
.projects-page-v2 .project-card-actions .auth-btn {
    min-height: 34px;
    padding: 0.4rem 0.7rem;
    font-size: 0.81rem;
    border-radius: 11px;
    font-weight: 600;
}

.projects-page-v2 .project-card-actions .action-detail {
    border-color: rgba(var(--accent-rgb), 0.26);
}

.projects-page-v2 .project-card-actions .action-share {
    border-color: rgba(var(--accent-rgb), 0.34);
    background: linear-gradient(150deg, rgba(var(--accent-rgb), 0.17), rgba(var(--accent-rgb), 0.08));
    margin-left: auto;
}

.projects-page-v2 .project-card-actions .action-share:hover {
    background: linear-gradient(150deg, rgba(var(--accent-rgb), 0.22), rgba(var(--accent-rgb), 0.1));
}

.projects-page-v2 .project-card-actions .action-delete {
    border-color: rgba(239, 68, 68, 0.35);
    background: linear-gradient(145deg, rgba(239, 68, 68, 0.16), rgba(239, 68, 68, 0.06));
    margin-left: auto;
}

.projects-page-v2 .project-card-actions .action-delete:hover {
    border-color: rgba(239, 68, 68, 0.45);
    background: linear-gradient(145deg, rgba(239, 68, 68, 0.22), rgba(239, 68, 68, 0.08));
}

.projects-page-v2 .project-card-actions .auth-btn {
    margin-left: 0;
}

.projects-page-v2 .project-card-v2.status-archived {
    opacity: 0.9;
    border-style: dashed;
}

.projects-page-v2 .project-card-v2.status-active .project-status-badge {
    border-color: rgba(16, 185, 129, 0.35);
    background: linear-gradient(145deg, rgba(16, 185, 129, 0.20), rgba(16, 185, 129, 0.08));
}

.projects-page-v2 .project-card-v2.status-completed .project-status-badge {
    border-color: rgba(59, 130, 246, 0.35);
    background: linear-gradient(145deg, rgba(59, 130, 246, 0.20), rgba(59, 130, 246, 0.08));
}

.projects-page-v2 .project-card-v2.status-review .project-status-badge {
    border-color: rgba(245, 158, 11, 0.4);
    background: linear-gradient(145deg, rgba(245, 158, 11, 0.24), rgba(245, 158, 11, 0.10));
}

.projects-page-v2 .projects-v2-empty {
    margin-top: 0.75rem;
    display: grid;
    gap: 0.65rem;
    justify-items: start;
}

.projects-page-v2 .projects-v2-empty p {
    margin: 0;
    color: var(--text-secondary);
    max-width: 48ch;
}

.projects-page-v2 .projects-toast {
    position: fixed;
    right: 1rem;
    bottom: 1rem;
    z-index: 2400;
    border-radius: 12px;
    border: 1px solid rgba(var(--accent-rgb), 0.28);
    padding: 0.55rem 0.75rem;
    background: linear-gradient(150deg, rgba(14, 20, 32, 0.92), rgba(27, 35, 50, 0.92));
    color: var(--text-primary);
    box-shadow: 0 16px 24px -20px rgba(0, 0, 0, 0.8);
    font-size: 0.82rem;
    letter-spacing: 0.01em;
}

body.cc-projects-modal-open {
    overflow: hidden;
}

@media (max-width: 1320px) {
    .projects-page-v2 .projects-v2-layout {
        grid-template-columns: 280px minmax(0, 1fr) 280px;
    }
}

@media (max-width: 1150px) {
    .projects-page-v2 .projects-v2-layout {
        grid-template-columns: 280px minmax(0, 1fr);
    }

    .projects-page-v2 .projects-v2-insights {
        position: static;
        top: auto;
        grid-column: 1 / -1;
    }
}

@media (max-width: 980px) {
    .projects-page-v2 .projects-v2-layout {
        grid-template-columns: minmax(0, 1fr);
    }

    .projects-page-v2 .projects-v2-controls,
    .projects-page-v2 .projects-v2-insights {
        position: static;
        top: auto;
    }

    .projects-page-v2 .projects-v2-list {
        grid-template-columns: 1fr;
    }

    .projects-page-v2 .project-card-actions {
        flex-wrap: wrap;
    }

    .projects-page-v2 .projects-active-clear {
        margin-left: 0;
    }

    .projects-page-v2 .projects-v2-banner-head {
        flex-direction: column;
        align-items: flex-start;
    }

    .projects-page-v2 .projects-banner-new-btn {
        width: 100%;
    }
}

@media (prefers-color-scheme: light) {
    .projects-page-v2 .s-card {
        border-color: rgba(15, 23, 42, 0.08);
        background: linear-gradient(160deg, rgba(255, 255, 255, 0.90), rgba(247, 250, 255, 0.93));
        box-shadow: 0 14px 22px -22px rgba(15, 23, 42, 0.2);
    }

    .projects-page-v2 .s-list li {
        border-color: rgba(15, 23, 42, 0.08);
        background: linear-gradient(160deg, rgba(255, 255, 255, 0.86), rgba(247, 250, 255, 0.9));
    }

    .projects-page-v2 .projects-v2-banner {
        border-color: rgba(15, 23, 42, 0.09);
        background:
            radial-gradient(850px 320px at 6% -8%, rgba(var(--accent-rgb), 0.07), transparent 66%),
            linear-gradient(160deg, rgba(255, 255, 255, 0.92), rgba(245, 249, 255, 0.94));
        box-shadow: 0 14px 22px -24px rgba(15, 23, 42, 0.16), inset 0 1px 0 rgba(255, 255, 255, 0.9);
    }

    .projects-page-v2 .projects-v2-banner p {
        color: #475569;
    }

    .projects-page-v2 .projects-active-filters {
        border-color: rgba(15, 23, 42, 0.10);
        background:
            radial-gradient(760px 220px at 6% -10%, rgba(var(--accent-rgb), 0.12), transparent 72%),
            linear-gradient(160deg, rgba(255, 255, 255, 0.92), rgba(244, 248, 255, 0.92));
    }

    .projects-page-v2 .projects-active-pill {
        border-color: rgba(var(--accent-rgb), 0.35) !important;
        background: linear-gradient(150deg, rgba(var(--accent-rgb), 0.22), rgba(var(--accent-rgb), 0.12)) !important;
        color: #0f172a !important;
    }

    .projects-page-v2 .projects-active-pill-key {
        color: #475569;
    }

    .projects-page-v2 .project-card-v2 {
        border-color: rgba(15, 23, 42, 0.08);
        background:
            linear-gradient(160deg, rgba(255, 255, 255, 0.9), rgba(247, 250, 255, 0.94)),
            rgba(255, 255, 255, 0.92);
        box-shadow: 0 12px 20px -22px rgba(15, 23, 42, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.9);
    }

    .projects-page-v2 .project-card-actions .action-share {
        border-color: rgba(var(--accent-rgb), 0.3);
        background: linear-gradient(150deg, rgba(var(--accent-rgb), 0.19), rgba(var(--accent-rgb), 0.1));
        color: #0f172a;
    }

    .projects-page-v2 .project-card-actions .action-delete {
        border-color: rgba(220, 38, 38, 0.28);
        background: linear-gradient(145deg, rgba(239, 68, 68, 0.14), rgba(239, 68, 68, 0.06));
        color: #7f1d1d;
    }

    .projects-page-v2 .project-card-v2 p,
    .projects-page-v2 .project-card-submeta {
        color: #475569;
    }

    .projects-page-v2 .project-card-actions {
        border-top-color: rgba(15, 23, 42, 0.08);
    }

    .projects-page-v2 .project-card-v2 .chip {
        border-color: rgba(15, 23, 42, 0.08);
        background: linear-gradient(160deg, rgba(255, 255, 255, 0.82), rgba(247, 250, 255, 0.9));
        color: #475569;
    }

    .projects-page-v2 .projects-search,
    .projects-page-v2 .projects-sort,
    .projects-page-v2 .project-form input,
    .projects-page-v2 .project-form select,
    .projects-page-v2 .project-form textarea {
        border-color: rgba(15, 23, 42, 0.08);
        background: linear-gradient(155deg, rgba(255, 255, 255, 0.9), rgba(245, 249, 255, 0.94));
    }

    .projects-page-v2 .project-detail-block {
        border-color: rgba(15, 23, 42, 0.07);
        background: linear-gradient(155deg, rgba(255, 255, 255, 0.88), rgba(248, 251, 255, 0.94));
    }

    .projects-page-v2 .projects-toast {
        background: linear-gradient(150deg, rgba(255, 255, 255, 0.95), rgba(243, 247, 255, 0.98));
        border-color: rgba(var(--accent-rgb), 0.22);
        color: #0f172a;
        box-shadow: 0 16px 24px -22px rgba(15, 23, 42, 0.26);
    }
}

@media (prefers-reduced-motion: reduce) {
    .projects-page-v2 .project-card-v2,
    .projects-page-v2 .projects-toast {
        transition: none !important;
    }

    .projects-page-v2 .project-card-v2:hover {
        transform: none !important;
    }
}

/* v1.9 modal usability polish (details + edit/create) */
.project-detail-modal .project-detail-content,
.project-form-modal .project-form-content,
.project-share-modal .project-share-content {
    width: min(92vw, 760px);
    max-height: min(88vh, 920px);
    overflow: auto;
    border-radius: 22px;
    border: 1px solid rgba(var(--accent-rgb), 0.16);
    background:
        radial-gradient(760px 280px at 6% -12%, rgba(var(--accent-rgb), 0.12), transparent 70%),
        linear-gradient(160deg, rgba(17, 23, 34, 0.97), rgba(15, 20, 31, 0.96));
    box-shadow: 0 32px 56px -34px rgba(2, 7, 18, 0.88), inset 0 1px 0 rgba(255, 255, 255, 0.10);
    padding: 1.4rem 1.4rem 1.2rem;
    position: relative;
}

.project-detail-modal .close,
.project-form-modal .close,
.project-share-modal .close {
    position: absolute;
    top: 0.85rem;
    right: 0.9rem;
    width: 1.95rem;
    height: 1.95rem;
    border-radius: 999px;
    border: 1px solid rgba(var(--accent-rgb), 0.28);
    background: linear-gradient(150deg, rgba(255, 255, 255, 0.12), rgba(var(--accent-rgb), 0.10));
    color: var(--text-secondary);
    display: grid;
    place-items: center;
    padding: 0;
    cursor: pointer;
    z-index: 5;
    transition: transform var(--motion-fast) ease, border-color var(--motion-fast) ease, background var(--motion-fast) ease, color var(--motion-fast) ease;
}

.project-detail-modal .close .close-icon,
.project-form-modal .close .close-icon,
.project-share-modal .close .close-icon {
    width: 13px;
    height: 13px;
    display: block;
    stroke: currentColor;
    stroke-width: 2.2;
    stroke-linecap: round;
    fill: none;
    pointer-events: none;
}

.project-detail-modal .close:hover,
.project-form-modal .close:hover,
.project-share-modal .close:hover {
    transform: translateY(-1px);
    border-color: rgba(var(--accent-rgb), 0.44);
    background: linear-gradient(150deg, rgba(var(--accent-rgb), 0.24), rgba(var(--accent-rgb), 0.12));
    color: var(--text-primary);
}

.project-share-modal .project-share-content {
    width: min(92vw, 560px);
    display: grid;
    gap: 0.82rem;
}

.project-share-modal .project-share-lead {
    margin: 0;
    color: var(--text-secondary);
}

.project-share-modal .project-share-options {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.56rem;
}

.project-share-modal .project-share-options .auth-btn,
.project-share-modal .project-share-options .btn {
    min-height: 40px;
}

.project-share-modal .project-share-collab {
    border-radius: 14px;
    border: 1px solid rgba(255, 255, 255, 0.10);
    background: linear-gradient(160deg, rgba(255, 255, 255, 0.03), rgba(var(--accent-rgb), 0.05));
    padding: 0.78rem;
    display: grid;
    gap: 0.52rem;
}

.project-share-modal .project-share-collab label {
    margin: 0;
    font-size: 0.9rem;
    color: var(--text-secondary);
}

.project-share-modal .project-share-collab-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 0.48rem;
}

.project-share-modal .project-share-collab input {
    width: 100%;
    min-height: 40px;
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.16);
    background: linear-gradient(160deg, rgba(255, 255, 255, 0.04), rgba(var(--accent-rgb), 0.07));
    color: var(--text-primary);
    padding: 0.56rem 0.68rem;
    font-family: inherit;
    font-size: 0.95rem;
}

.project-share-modal .project-share-collab input:focus {
    outline: none;
    border-color: rgba(var(--accent-rgb), 0.44);
    box-shadow: 0 0 0 3px rgba(var(--accent-rgb), 0.15);
}

.project-share-modal .project-share-collab .btn {
    min-height: 40px;
}

.project-share-modal .project-share-link-preview {
    margin: 0;
    font-size: 0.78rem;
    color: var(--text-tertiary-muted);
    word-break: break-all;
}

.project-detail-modal .project-detail-content {
    display: grid;
    gap: 0.85rem;
}

.project-detail-modal .project-detail-title,
.project-form-modal .project-form-content h2 {
    margin: 0;
    font-family: var(--font-heading);
    font-size: clamp(1.35rem, 2vw, 1.85rem);
    line-height: 1.12;
    text-wrap: balance;
}

.project-detail-modal .project-detail-title::after,
.project-form-modal .project-form-content h2::after {
    content: none !important;
}

.project-detail-modal .project-detail-summary {
    margin: 0;
    color: var(--text-secondary);
    max-width: 62ch;
}

.project-detail-modal .project-detail-meta {
    margin: 0;
    gap: 0.45rem;
}

.project-detail-modal .project-detail-meta .chip {
    letter-spacing: 0.04em;
}

.project-detail-modal .project-detail-block {
    border-radius: 14px;
    border: 1px solid rgba(255, 255, 255, 0.10);
    background: linear-gradient(160deg, rgba(255, 255, 255, 0.04), rgba(var(--accent-rgb), 0.07));
    padding: 0.85rem 0.9rem;
}

.project-detail-modal .project-detail-block h3 {
    margin: 0 0 0.42rem;
    font-size: 1rem;
    font-weight: 600;
}

.project-detail-modal .project-detail-block p {
    margin: 0;
    color: var(--text-secondary);
}

.project-detail-modal .project-detail-list {
    margin: 0;
    padding: 0;
    list-style: none;
    display: grid;
    gap: 0.4rem;
}

.project-detail-modal .project-detail-list li {
    margin: 0;
    padding-left: 0.7rem;
    border-left: 2px solid rgba(var(--accent-rgb), 0.24);
    color: var(--text-secondary);
    line-height: 1.38;
}

.project-detail-modal .project-detail-actions {
    display: flex;
    gap: 0.55rem;
    justify-content: flex-end;
    flex-wrap: wrap;
    margin-top: 0.2rem;
}

.project-detail-modal .project-detail-actions > * {
    margin-top: 0 !important;
}

.project-detail-modal .project-detail-actions .auth-btn,
.project-detail-modal .project-detail-actions .btn {
    width: fit-content !important;
    max-width: none !important;
    min-width: 0;
    min-height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.56rem 0.95rem;
    flex: 0 0 auto !important;
    white-space: nowrap;
    font-size: 0.92rem;
}

.project-detail-modal .project-share-btn {
    border-color: rgba(var(--accent-rgb), 0.30);
    background:
        linear-gradient(150deg, rgba(var(--accent-rgb), 0.22), rgba(var(--accent-rgb), 0.10)),
        linear-gradient(150deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.03));
    color: var(--text-primary);
    box-shadow: 0 10px 18px -16px rgba(var(--accent-rgb), 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.26);
}

.project-detail-modal .project-share-btn:hover,
.project-detail-modal .project-share-btn:focus-visible {
    border-color: rgba(var(--accent-rgb), 0.42);
    background:
        linear-gradient(150deg, rgba(var(--accent-rgb), 0.30), rgba(var(--accent-rgb), 0.14)),
        linear-gradient(150deg, rgba(255, 255, 255, 0.14), rgba(255, 255, 255, 0.04));
}

.project-form-modal .project-form {
    display: grid;
    gap: 0.8rem;
    margin-top: 0.75rem;
}

.project-form-modal .project-form label {
    display: grid;
    gap: 0.34rem;
    color: var(--text-secondary);
    font-size: 0.9rem;
}

.project-form-modal .project-form input,
.project-form-modal .project-form select,
.project-form-modal .project-form textarea {
    width: 100%;
    border-radius: 13px;
    border: 1px solid rgba(255, 255, 255, 0.16);
    background: linear-gradient(160deg, rgba(255, 255, 255, 0.04), rgba(var(--accent-rgb), 0.07));
    color: var(--text-primary);
    padding: 0.62rem 0.72rem;
    font-family: inherit;
    font-size: 0.98rem;
}

.project-form-modal .project-form textarea {
    resize: vertical;
    min-height: 84px;
}

.project-form-modal .project-form input:focus,
.project-form-modal .project-form select:focus,
.project-form-modal .project-form textarea:focus,
.project-form-modal .project-advanced-toggle:focus {
    outline: none;
    border-color: rgba(var(--accent-rgb), 0.44);
    box-shadow: 0 0 0 3px rgba(var(--accent-rgb), 0.15);
}

.project-form-modal .project-form-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.68rem;
}

.project-form-modal .project-advanced-toggle {
    justify-self: start;
    min-height: 2.25rem;
}

.project-form-modal .project-advanced-fields {
    display: grid;
    gap: 0.72rem;
    padding: 0.85rem;
    border-radius: 14px;
    border: 1px solid rgba(255, 255, 255, 0.10);
    background: linear-gradient(160deg, rgba(255, 255, 255, 0.02), rgba(var(--accent-rgb), 0.04));
}

.project-form-modal .project-form-actions {
    display: flex;
    justify-content: flex-end;
    gap: 0.52rem;
    margin-top: 0.2rem;
}

.project-form-modal .project-form-actions > * {
    margin-top: 0 !important;
}

.project-form-modal .project-form-actions .auth-btn,
.project-form-modal .project-form-actions .btn {
    width: fit-content !important;
    max-width: none !important;
    min-width: 0;
    min-height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.56rem 0.95rem;
    flex: 0 0 auto !important;
    white-space: nowrap;
    font-size: 0.92rem;
}

@media (max-width: 820px) {
    .project-detail-modal .project-detail-content,
    .project-form-modal .project-form-content,
    .project-share-modal .project-share-content {
        width: min(96vw, 96vw);
        padding: 1rem;
        border-radius: 16px;
    }

    .project-form-modal .project-form-grid {
        grid-template-columns: 1fr;
    }

    .project-share-modal .project-share-options {
        grid-template-columns: 1fr;
    }

    .project-share-modal .project-share-collab-row {
        grid-template-columns: 1fr;
    }
}

@media (prefers-color-scheme: light) {
    .project-detail-modal .project-detail-content,
    .project-form-modal .project-form-content,
    .project-share-modal .project-share-content {
        border-color: rgba(15, 23, 42, 0.10);
        background:
            radial-gradient(760px 280px at 6% -12%, rgba(var(--accent-rgb), 0.11), transparent 70%),
            linear-gradient(160deg, rgba(255, 255, 255, 0.96), rgba(244, 248, 255, 0.95));
        box-shadow: 0 28px 44px -36px rgba(15, 23, 42, 0.32), inset 0 1px 0 rgba(255, 255, 255, 0.92);
    }

    .project-detail-modal .project-detail-block,
    .project-form-modal .project-advanced-fields,
    .project-form-modal .project-form input,
    .project-form-modal .project-form select,
    .project-form-modal .project-form textarea,
    .project-share-modal .project-share-collab,
    .project-share-modal .project-share-collab input,
    .project-detail-modal .close,
    .project-form-modal .close,
    .project-share-modal .close {
        border-color: rgba(15, 23, 42, 0.10);
        background: linear-gradient(160deg, rgba(255, 255, 255, 0.88), rgba(245, 249, 255, 0.92));
    }

    .project-detail-modal .project-share-btn {
        border-color: rgba(var(--accent-rgb), 0.34);
        background:
            linear-gradient(150deg, rgba(var(--accent-rgb), 0.24), rgba(var(--accent-rgb), 0.12)),
            linear-gradient(160deg, rgba(255, 255, 255, 0.94), rgba(245, 249, 255, 0.96));
        box-shadow: 0 14px 22px -18px rgba(15, 23, 42, 0.24), inset 0 1px 0 rgba(255, 255, 255, 0.92);
        color: #0f172a;
    }
}

@media (prefers-reduced-motion: reduce) {
    .project-detail-modal .project-detail-content,
    .project-form-modal .project-form-content,
    .project-detail-modal .close,
    .project-form-modal .close,
    .project-share-modal .close {
        transition: none !important;
    }
}

/* v1.9 typography consistency baseline */
:root {
    --font-ui: var(--font-body);
    --font-display: var(--font-heading);
}

html,
body,
button,
input,
select,
textarea {
    font-family: var(--font-ui);
}

h1,
h2,
h3,
.page-title,
.logo-text,
.hero-content h1,
.project-detail-title,
#projectFormTitle,
#projectsMainHeading {
    font-family: var(--font-display);
    letter-spacing: -0.01em;
}

h4,
h5,
h6,
.nav-label,
.page-lead,
.page-kicker,
.s-title,
.s-caption,
.s-list li,
.chip,
.btn.subtle,
.auth-btn,
.hero-btn,
.post-text,
.comment .c-text,
.auth-form label,
.auth-support,
.project-card-meta,
.project-card-submeta,
.field-label,
.field-value {
    font-family: var(--font-ui);
}