/* VEXO UI v2 (visual layer, loaded last). Navy surfaces, blue accent, persistent sidebar on desktop.
   Remove the <link> to vexo-shell.css and the vexo-shell.js <script> to roll back. */
:root{--bg:#0b1220;--panel:#111a2b;--raised:#16213a;--border:#1d2940;--border-strong:#2a3a58;--blue:#2f7bff;--blue-hi:#4a8dff;--cyan:#5aa8ff;
 --text:#eef3fb;--muted:#8d9bb5;--radius:12px;--vx-side:248px;--font:Inter,'Inter var',ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif}
html{background:var(--bg)}
body{background:var(--bg)!important;color:var(--text)}
/* Surfaces */
.panel,.listing-card,.creator-card,.portfolio-card,.friend-card,.job-row,.notification-item,.build-card,.settings-nav,.chat-inbox,.chat-main,.empty-state,.cm-card,.hb-card{
 background:var(--panel)!important;border:1px solid var(--border)!important;border-radius:var(--radius)!important;box-shadow:none}
.listing-card:hover,.creator-card:hover,.portfolio-card:hover,.job-row:hover,.build-card:hover,.friend-card:hover,.hb-card:hover{border-color:var(--border-strong)!important;box-shadow:0 10px 28px rgba(0,0,0,.35)}
.button.primary{background:var(--blue)!important;box-shadow:0 4px 14px rgba(47,123,255,.3)}
.button.primary:hover{background:var(--blue-hi)!important}
.button{border-radius:10px!important}
input:not([type=checkbox]):not([type=radio]):not([type=file]):not([type=color]),select,textarea{background:#0e1626!important;border-color:var(--border)!important}
:focus-visible{outline:2px solid var(--blue-hi)!important;outline-offset:2px}

/* Top bar */
.topbar{height:64px!important;background:rgba(11,18,32,.9)!important;border-bottom:1px solid var(--border)!important}
.top-search{flex:1;max-width:520px;position:relative}
.top-search input{width:100%!important;height:40px!important;padding-left:38px!important;padding-right:64px!important;background:var(--panel)!important;border-radius:10px!important}
.top-search kbd{position:absolute;right:10px;top:50%;transform:translateY(-50%);font:600 11px var(--font);color:var(--muted);background:var(--raised);border:1px solid var(--border);border-radius:6px;padding:2px 7px}
.header-action{background:transparent!important;border-color:transparent!important;border-radius:10px!important}
.header-action:hover{background:var(--raised)!important}
#header-unread{background:#ff4d5e!important;color:#fff}
.session-avatar{background:linear-gradient(135deg,#2f7bff,#5aa8ff)!important}

/* Sidebar */
.sidebar{background:#0a1120!important;border-right:1px solid var(--border)!important;padding:18px 12px 12px!important;scrollbar-width:thin;scrollbar-color:#22314d transparent}
.sidebar .wordmark{display:flex!important;align-items:center;gap:10px;font-size:24px!important;font-weight:800;letter-spacing:.02em!important;padding:4px 10px 18px!important;color:#fff}
.sidebar .wordmark svg{width:34px;height:24px;color:var(--blue)}
.sidebar .wordmark>span{display:inline!important;font-size:24px!important;letter-spacing:.04em!important;margin:0!important;color:#fff!important;font-weight:800}
.workspace-label,.community-note{display:none!important}
.nav-label{font-size:11px!important;font-weight:600;letter-spacing:.08em!important;color:#7183a2!important;padding:18px 12px 8px!important;display:flex;align-items:center;justify-content:space-between}
.nav-item{min-height:38px!important;padding:8px 12px!important;font-size:13.5px!important;color:#b3c0d6!important;border-radius:10px!important;gap:12px!important}
.nav-item svg{width:18px!important;height:18px!important}
.nav-item:hover{background:#121c30!important;color:#fff!important}
.nav-item.active{background:#15284a!important;color:#fff!important;box-shadow:none!important;border-color:transparent!important}
.nav-item.active svg{color:#fff!important}
.notification-count{background:#ff4d5e!important;color:#fff!important;border-radius:6px!important;margin-left:auto;font-size:11px!important;padding:1px 6px}
details.nav-group summary{cursor:pointer;list-style:none;border-radius:8px}
details.nav-group summary::-webkit-details-marker{display:none}
details.nav-group summary::after{content:'▸';font-size:10px;transition:transform .15s}
details.nav-group[open] summary::after{transform:rotate(90deg)}
details.nav-group summary:hover{color:#c9d5ea!important}
/* Your hubs */
#vx-hubs{display:flex;flex-direction:column;gap:2px}
.vx-hubs-head a{color:#9fb3d6;font-size:16px;line-height:1;text-decoration:none;width:22px;height:22px;display:grid;place-items:center;border-radius:6px}
.vx-hubs-head a:hover{background:var(--raised);color:#fff}
.vx-hub{display:flex;align-items:center;gap:10px;padding:7px 10px;border-radius:10px;border:1px solid transparent;color:#dbe4f3;text-decoration:none}
.vx-hub:hover{background:#121c30}
.vx-hub.active{background:#13233f;border-color:#2f7bff66}
.vx-hub-icon{width:34px;height:34px;border-radius:9px;overflow:hidden;flex:none;display:grid;place-items:center;background:linear-gradient(135deg,#1c3566,#2f7bff);font-weight:700;color:#fff}
.vx-hub-icon img{width:100%;height:100%;object-fit:cover}
.vx-hub-text{display:flex;flex-direction:column;min-width:0}
.vx-hub-text b{font-size:13px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.vx-hub-text small{font-size:11.5px;color:var(--muted)}
.vx-hub-more{font-size:12px;color:var(--cyan);padding:6px 12px}
/* User chip */
.side-bottom{padding-top:16px!important;border-top:1px solid var(--border);margin-top:16px!important}
#vx-user{display:flex;align-items:center;gap:6px}
.vx-user-link{display:flex;align-items:center;gap:10px;flex:1;min-width:0;padding:6px;border-radius:10px;color:#fff;text-decoration:none}
.vx-user-link:hover{background:#121c30}
.vx-user-link .session-avatar{width:36px;height:36px;border-radius:50%;display:grid;place-items:center;font-weight:700;flex:none}
.vx-user-name{display:flex;flex-direction:column;font-size:13px;font-weight:600;min-width:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.vx-user-name small{font-weight:400;color:var(--muted);font-size:11.5px}
.vx-user-settings{width:30px;height:30px;display:grid;place-items:center;border-radius:8px;color:var(--muted);text-decoration:none;font-size:18px}
.vx-user-settings:hover{background:var(--raised);color:#fff}
.vx-signed-in .join-link{display:none!important}

/* Desktop: persistent sidebar */
@media(min-width:1100px){
 .sidebar{transform:none!important;top:0!important;bottom:0;width:var(--vx-side)!important;box-shadow:none!important;z-index:45}
 .app{margin-left:var(--vx-side)!important}
 .topbar .vexo-brand,.topbar .global-nav,.topbar .mobile-menu,.topbar .agency-top{display:none!important}
 .topbar{justify-content:flex-start!important;padding:0 28px!important}
 .top-links{margin-left:auto}
 .drawer-scrim{display:none!important}
 main{padding:24px 28px 48px!important}
}
@media(max-width:1099px){
 .sidebar .wordmark{display:none!important}
 .sidebar{top:64px!important;width:280px!important}
}

/* Page headings and tabs */
.page-heading h1{font-size:clamp(24px,2.6vw,32px)!important}
.breadcrumb{color:#6f82a3}
.filter-tabs,.friend-tabs,.xp-tabs,.cm-tabs,.hb-tabs{background:transparent!important;border:0!important;border-bottom:1px solid var(--border)!important;border-radius:0!important;padding:0!important;gap:4px!important}
.filter-tabs a,.filter-tabs button,.friend-tabs a,.friend-tabs button{border-radius:0!important;padding:10px 14px!important;border-bottom:2px solid transparent!important}
.filter-tabs [aria-current],.filter-tabs .active,.filter-tabs [aria-pressed="true"],.friend-tabs [aria-current],.friend-tabs .active{background:transparent!important;color:#fff!important;border-bottom-color:var(--blue)!important}
.pill,.chip{background:#14203a!important;border-color:#22345a!important;color:#c7d5ee}

/* Hub hero (real fields only: banner, icon, name, description, category, visibility, member and channel counts) */
.hb-hero{position:relative;border:1px solid var(--border);border-radius:14px;overflow:hidden;background:var(--panel);margin-bottom:16px}
.hb-banner{height:150px;background:radial-gradient(600px 200px at 80% 0,rgba(47,123,255,.45),transparent 70%),linear-gradient(120deg,#0f1d3a,#132a55 55%,#0d1830)}
.hb-banner img{width:100%;height:100%;object-fit:cover;display:block}
.hb-hero-body{display:flex;gap:18px;align-items:flex-end;padding:0 22px 18px;margin-top:-46px;position:relative}
.hb-hero-icon{width:96px!important;height:96px!important;border-radius:18px!important;border:3px solid var(--panel);font-size:40px!important;flex:none;background:linear-gradient(135deg,#1c3566,#2f7bff);display:grid;place-items:center;object-fit:cover}
.hb-hero-text{min-width:0}
.hb-hero-text h1{margin:0 0 4px;font-size:26px}
.hb-hero-text p{margin:0 0 10px;color:#b9c6dc;max-width:70ch}
.hb-hero-meta{display:flex;flex-wrap:wrap;gap:8px;align-items:center;color:#b9c6dc;font-size:13px}
.hb-hero-meta>span:first-child{display:inline-flex;gap:6px;align-items:center}
.hb-hero-meta svg{width:16px;height:16px}
.hb-joined{color:#9fc1ff!important;border-color:#2f7bff66!important}
.hb-stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:12px;margin:0;padding:0 22px 20px}
.hb-stats div{background:#0e1626;border:1px solid var(--border);border-radius:12px;padding:12px 14px}
.hb-stats dt{font-size:12px;color:var(--muted)}
.hb-stats dd{margin:4px 0 0;font-size:22px;font-weight:700}
.hb-app{border:1px solid var(--border);border-radius:14px;overflow:hidden;background:var(--panel)}
.hb-hubhead{display:none!important}
.hb-chan.is-active{background:#15284a!important;color:#fff!important}
@media(max-width:700px){.hb-banner{height:110px}.hb-hero-body{flex-direction:column;align-items:flex-start;margin-top:-40px;padding:0 16px 14px}.hb-hero-icon{width:72px!important;height:72px!important;font-size:30px!important}.hb-stats{padding:0 16px 16px;grid-template-columns:repeat(2,1fr)}}
.top-search{background:none!important;border:0!important;box-shadow:none!important;padding:0!important;display:flex!important;align-items:center}
.top-search>[data-icon],.top-search>svg{position:absolute;left:13px;z-index:1;color:var(--muted);width:16px;height:16px}
.top-search kbd{display:inline-block!important}
@media(max-width:700px){.top-search kbd{display:none!important}.top-search input{padding-right:12px!important}}
@media(min-width:1100px){.top-search{width:auto!important;max-width:520px!important;margin-left:0!important}}
/* Avatar image inside the session/user card + online status */
.session-avatar{overflow:hidden}.session-avatar img{width:100%;height:100%;object-fit:cover;display:block;border-radius:inherit}
.vx-presence{display:inline-flex;align-items:center;gap:6px;font-size:12px;color:#8592ad}.vx-presence:empty{display:none}
.vx-presence i{width:8px;height:8px;border-radius:50%;background:#56607a}.vx-presence.is-online i{background:#22c55e;box-shadow:0 0 0 3px rgba(34,197,94,.18)}.vx-presence.is-online{color:#86efac}
.nav-top{padding-top:6px}.nav-group[hidden]{display:none}#primary-nav .nav-item[hidden]{display:none!important}