/* VEXO redesign layer (visual only). Loaded last; overrides tokens and component visuals.
   No markup, IDs, data attributes or behaviour depend on this file. Remove the <link> to roll back. */
:root{
 --bg:#04060c;--panel:#0a101b;--raised:#0f1726;--border:#1a2436;--border-strong:#26344b;
 --blue:#1f6bff;--blue-hi:#3d84ff;--cyan:#43b6ff;--text:#f3f6fc;--muted:#8c9ab3;--radius:14px;
 --glow:0 0 0 1px rgba(31,107,255,.45),0 8px 28px rgba(31,107,255,.28);
 --font:Inter,'Inter var',ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
}
html{background:var(--bg)}
body{background:radial-gradient(1200px 600px at 75% -10%,rgba(31,107,255,.10),transparent 60%),var(--bg)!important;color:var(--text);font-family:var(--font)!important;letter-spacing:-.005em}
h1,h2,h3{letter-spacing:-.02em;font-family:var(--font)}
h1{font-weight:750}
::selection{background:rgba(31,107,255,.45)}

/* Top navigation: compact, logo + links + search + actions */
.topbar{height:64px!important;background:rgba(4,6,12,.82)!important;border-bottom:1px solid var(--border)!important;backdrop-filter:blur(18px) saturate(140%)}
.vexo-brand{font-weight:800;letter-spacing:.14em}
.global-nav a{font-size:13px!important;color:var(--muted)!important;border-radius:8px!important;padding:8px 12px!important}
.global-nav a:hover{color:var(--text)!important;background:var(--raised)!important}
.global-nav a[aria-current]{color:#fff!important;background:var(--raised)!important;box-shadow:inset 0 0 0 1px var(--border)}
.top-search input,.top-search{border-radius:10px!important}
.top-search input{background:var(--panel)!important;border:1px solid var(--border)!important;color:var(--text)!important;height:36px}
.top-search input:focus{border-color:var(--blue)!important;box-shadow:0 0 0 3px rgba(31,107,255,.2)}

/* Buttons */
.button{border-radius:10px!important;border:1px solid var(--border-strong)!important;background:var(--raised)!important;color:var(--text)!important;font-weight:600!important;transition:background .15s,border-color .15s,box-shadow .15s,transform .05s}
.button:hover{border-color:#34486a!important;background:#131e31!important}
.button:active{transform:translateY(1px)}
.button.primary{background:linear-gradient(180deg,var(--blue-hi),var(--blue))!important;border-color:transparent!important;color:#fff!important;box-shadow:0 6px 18px rgba(31,107,255,.35)}
.button.primary:hover{box-shadow:var(--glow)}
.button.danger,.button.destructive{background:rgba(255,77,94,.1)!important;border-color:rgba(255,77,94,.4)!important;color:#ff8a96!important}
.icon-button{border-radius:10px!important}

/* Surfaces */
.panel,.listing-card,.creator-card,.portfolio-card,.friend-card,.job-row,.notification-item,.build-card,.settings-nav,.chat-inbox,.chat-main,.empty-state{
 background:linear-gradient(180deg,var(--panel),#080d17)!important;border:1px solid var(--border)!important;border-radius:var(--radius)!important}
.listing-card,.creator-card,.portfolio-card,.job-row,.build-card,.friend-card{transition:border-color .15s,transform .15s,box-shadow .15s}
.listing-card:hover,.creator-card:hover,.portfolio-card:hover,.job-row:hover,.build-card:hover,.friend-card:hover{border-color:var(--border-strong)!important;transform:translateY(-2px);box-shadow:0 14px 36px rgba(0,0,0,.45)}
.eyebrow{color:var(--cyan)!important;letter-spacing:.12em!important;font-weight:700}
.muted,.help{color:var(--muted)!important}
.pill,.chip{border-radius:999px!important;border:1px solid var(--border)!important;background:var(--raised)!important}
.notice{border-radius:12px!important;border:1px solid rgba(31,107,255,.35)!important;background:rgba(31,107,255,.08)!important}

/* Page heading */
.page-heading h1{font-size:clamp(26px,3vw,36px)!important;font-weight:750}
.page-heading p{color:var(--muted)}
.breadcrumb{color:var(--muted);font-size:12px}

/* Filter pills (marketplace, jobs, friends, notifications) */
.filter-tabs,.friend-tabs{gap:6px!important;padding:4px;border-radius:12px;background:var(--panel);border:1px solid var(--border);width:max-content;max-width:100%;overflow-x:auto}
.filter-tabs a,.filter-tabs button,.friend-tabs a,.friend-tabs button{border-radius:9px!important;border:0!important;background:transparent!important;color:var(--muted)!important;padding:7px 14px!important;font-weight:600}
.filter-tabs [aria-current],.filter-tabs .active,.filter-tabs [aria-pressed="true"],.friend-tabs [aria-current],.friend-tabs .active{background:var(--blue)!important;color:#fff!important}
.directory-filters{border-radius:var(--radius)}

/* Forms */
input:not([type=checkbox]):not([type=radio]):not([type=file]):not([type=color]),select,textarea{
 background:#070c15!important;border:1px solid var(--border)!important;border-radius:10px!important;color:var(--text)!important;font-family:var(--font)}
input:focus,select:focus,textarea:focus{outline:none!important;border-color:var(--blue)!important;box-shadow:0 0 0 3px rgba(31,107,255,.2)!important}
label{color:#c3cde0}

/* Home landing hero */
.landing-hero{border-radius:22px!important;overflow:hidden;border:1px solid var(--border);box-shadow:0 30px 80px rgba(0,0,0,.55)}
.landing-copy h1{font-size:clamp(44px,7vw,84px)!important;line-height:.95!important;font-weight:850!important;letter-spacing:-.03em!important}
.landing-copy h1 span{color:var(--blue-hi)!important;text-shadow:0 0 40px rgba(31,107,255,.45)}
.hero-kicker{border-radius:999px!important;border:1px solid rgba(31,107,255,.4)!important;background:rgba(31,107,255,.1)!important;padding:5px 12px!important}
.landing-paths{gap:12px!important}
.landing-paths a{background:var(--panel)!important;border:1px solid var(--border)!important;border-radius:var(--radius)!important;transition:border-color .15s}
.landing-paths a:hover{border-color:var(--blue)!important}
.path-icon{border-radius:12px!important;background:rgba(31,107,255,.14)!important;color:var(--blue-hi)!important}

/* Marketplace & listing */
.listing-grid,.creator-grid,.build-grid{gap:16px!important}
.listing-card-body h3,.listing-card h3{font-weight:650}
.price-label{color:#fff!important;font-weight:750}
.listing-detail-grid .panel{border-radius:18px!important}

/* Jobs */
.job-row{padding:14px 16px!important}
.job-glyph{border-radius:12px!important;background:rgba(31,107,255,.14)!important;color:var(--blue-hi)!important}

/* Profile */
.profile-shell{border-radius:20px!important;overflow:hidden;border:1px solid var(--border);background:var(--panel)}
.profile-cover{min-height:180px;background:linear-gradient(120deg,#0b1b3a,#06101f 60%,#0d2350)!important}
.profile-avatar{border-radius:50%!important;box-shadow:0 0 0 4px var(--bg),0 0 0 6px var(--blue)!important}
.profile-tabs{border-top:1px solid var(--border);gap:4px!important;padding:8px!important}
.profile-tabs a{border-radius:9px!important;padding:8px 14px!important;color:var(--muted)!important}
.profile-tabs a[aria-current]{background:var(--blue)!important;color:#fff!important}

/* Messages */
.chat-inbox,.chat-main{overflow:hidden}
.chat-person{border-radius:12px!important}
.chat-person[aria-current],.chat-person.active{background:rgba(31,107,255,.12)!important;box-shadow:inset 2px 0 0 var(--blue)}
.chat-history article,.chat-history .message{border-radius:14px!important}

/* Notifications */
.notification-item{padding:14px 16px!important}
.notification-item.is-unread{border-color:rgba(31,107,255,.45)!important;box-shadow:inset 3px 0 0 var(--blue)}

/* Settings */
.settings-nav{padding:8px!important}
.settings-nav a,.settings-nav button{border-radius:10px!important;color:var(--muted)!important}
.settings-nav [aria-current],.settings-nav .active{background:var(--blue)!important;color:#fff!important}

/* Sidebar drawer */
.sidebar{background:#060a12!important;border-right:1px solid var(--border)!important}
.nav-item{border-radius:10px!important}
.nav-item.active{background:rgba(31,107,255,.14)!important;color:#fff!important;box-shadow:inset 2px 0 0 var(--blue)}

/* Footer */
.app-footer{border-top:1px solid var(--border)!important;color:var(--muted)}

/* Dialogs & toast */
dialog{border-radius:18px!important;border:1px solid var(--border)!important;background:var(--panel)!important;color:var(--text)}
dialog::backdrop{background:rgba(2,4,8,.7);backdrop-filter:blur(4px)}
#toast{border-radius:12px!important;border:1px solid var(--border)!important;background:var(--raised)!important}

/* Auth pages (auth.html / account.html) */
.account-panel{border-radius:20px!important;border:1px solid var(--border)!important;background:linear-gradient(180deg,var(--panel),#080d17)!important;box-shadow:0 30px 80px rgba(0,0,0,.5)}
.header{background:rgba(4,6,12,.82)!important;border-bottom:1px solid var(--border)!important}

@media (max-width:760px){.landing-copy h1{font-size:44px!important}.topbar{height:58px!important}.filter-tabs,.friend-tabs{width:100%}}
@media (prefers-reduced-motion:reduce){.listing-card,.creator-card,.portfolio-card,.job-row,.build-card,.friend-card,.button{transition:none!important}.listing-card:hover,.creator-card:hover,.portfolio-card:hover,.job-row:hover,.build-card:hover,.friend-card:hover{transform:none}}