/* Vendor Sales Engine — Precision UI refresh · 2026-10-22
   A restrained, Resend-inspired product finish (not a copy of Resend).
   Keep PrimeClientFlow branding, Roboto/Manrope, existing behaviour and
   the user's compact Expert Services link and nav placement intact.
   Loaded LAST, after the accessibility/readability styles. */

/* 01 — Quiet, neutral canvas; strong typography; one restrained brand accent */
:root{
  --bg:#F7F9FC;--surface:#FFFFFF;--surface-2:#FAFBFD;
  --surface-3:#F1F4F8;--surface-sunken:#F6F8FB;
  --border:#E2E7EE;--border-strong:#CAD3DE;--divider:#E9EDF2;
  --text:#142033;--text-2:#4A596E;--text-3:#607089;
  --accent:#0E787C;--accent-hover:#0B666A;--accent-press:#09565A;
  --accent-soft:#EBF7F6;--accent-soft-2:#D9F0ED;--accent-text:#0D6B70;
  --nav-bg:#0C1526;--nav-border:#192235;
  --nav-text:#C3CDDE;--nav-muted:#9BA9BE;--nav-hover:#172337;
  --nav-active:#1C2B41;--nav-divider:#283346;
  --shadow-xs:0 1px 2px rgba(15,29,50,.025);
  --shadow-sm:0 1px 3px rgba(15,29,50,.055);
  --shadow-md:0 6px 18px rgba(15,29,50,.075);
  --shadow-lg:0 20px 56px rgba(10,20,36,.16);
  --r-md:9px;--r-lg:12px;--r-xl:16px;
  --sidebar-w:264px;--topbar-h:64px;--content-max:1200px;
}
:root[data-theme="dark"]{
  --bg:#0B1018;--surface:#121922;--surface-2:#161E29;
  --surface-3:#1D2836;--surface-sunken:#111822;
  --border:#2A3543;--border-strong:#405064;--divider:#26323F;
  --text:#EFF3F8;--text-2:#BFCCDB;--text-3:#A0AEC2;
  --accent:#54C9BE;--accent-hover:#70D8CF;--accent-press:#83E2D9;
  --accent-soft:rgba(84,201,190,.13);--accent-soft-2:rgba(84,201,190,.23);
  --accent-text:#85E0D7;
  --nav-bg:#080E17;--nav-border:#1E2939;
  --nav-text:#CBD4E2;--nav-muted:#9EACC0;--nav-hover:#151F2E;
  --nav-active:#1B2B3B;--nav-divider:#283445;
  --shadow-xs:0 1px 2px rgba(0,0,0,.16);
  --shadow-sm:0 2px 8px rgba(0,0,0,.19);
  --shadow-md:0 8px 24px rgba(0,0,0,.24);
  --shadow-lg:0 22px 54px rgba(0,0,0,.42);
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]):not([data-theme="dark"]){
    --bg:#0B1018;--surface:#121922;--surface-2:#161E29;
    --surface-3:#1D2836;--surface-sunken:#111822;
    --border:#2A3543;--border-strong:#405064;--divider:#26323F;
    --text:#EFF3F8;--text-2:#BFCCDB;--text-3:#A0AEC2;
    --accent:#54C9BE;--accent-hover:#70D8CF;--accent-press:#83E2D9;
    --accent-soft:rgba(84,201,190,.13);--accent-soft-2:rgba(84,201,190,.23);
    --accent-text:#85E0D7;
    --nav-bg:#080E17;--nav-border:#1E2939;
    --nav-text:#CBD4E2;--nav-muted:#9EACC0;--nav-hover:#151F2E;
    --nav-active:#1B2B3B;--nav-divider:#283445;
    --shadow-xs:0 1px 2px rgba(0,0,0,.16);--shadow-sm:0 2px 8px rgba(0,0,0,.19);
    --shadow-md:0 8px 24px rgba(0,0,0,.24);--shadow-lg:0 22px 54px rgba(0,0,0,.42);
  }
}
html{scroll-behavior:smooth}
body{letter-spacing:0;line-height:1.58}
h1,h2,h3,h4{letter-spacing:-.02em}
h1{font-weight:750;letter-spacing:-.035em}
h2{font-weight:700}
small,.micro,.hint,.help{color:var(--text-3)}

/* 02 — Restraint in the persistent product frame */
.sidebar{box-shadow:none}
.sidebar-brand{padding:23px 20px 18px;gap:8px;border-bottom:1px solid var(--nav-divider)}
.sidebar-brand img{width:160px}
.sidebar-brand .product{font-size:14px;font-weight:600;letter-spacing:.002em}
.sidebar-scroll{padding:12px 13px 18px}
.nav-group{margin-top:22px}
.nav-group:first-child{margin-top:4px}
.nav-label{font-size:12px;letter-spacing:.075em;text-transform:uppercase;font-weight:650;padding:0 11px 8px}
.nav-link{min-height:41px;border:1px solid transparent;border-radius:9px;padding:9px 11px;font-weight:500;gap:11px;transition:background 140ms ease,color 140ms ease}
.nav-link svg{opacity:.9;stroke-width:1.85}
.nav-link:hover{background:var(--nav-hover);color:#FFFFFF}
.nav-link[aria-current="page"]{border-color:rgba(255,255,255,.07);background:var(--nav-active);font-weight:650}
.nav-link[aria-current="page"]::before{left:0;top:9px;bottom:9px;width:3px;border-radius:0 4px 4px 0}
.sidebar-foot{background:rgba(0,0,0,.035);border-color:var(--nav-divider)}
.plan-mini{background:transparent;border-color:var(--nav-divider);border-radius:10px}
.plan-mini:hover{background:var(--nav-hover)}
.topbar{background:var(--surface);border-bottom:1px solid var(--border);backdrop-filter:none;-webkit-backdrop-filter:none;padding-inline:30px}
.topbar-title{font-size:15px;gap:8px}
.topbar-title strong{font-weight:650}
.topbar-title .crumb{color:var(--text-3)}
.account-btn{border-radius:10px;height:39px;border-color:var(--border);box-shadow:none;padding-inline:6px 10px}
.account-btn:hover{border-color:var(--border-strong)}
.account-btn .avatar{background:var(--accent-soft);color:var(--accent-text);border:1px solid var(--border);font-size:14px}
.icon-btn{border-radius:9px}
.icon-btn:hover{background:var(--surface-3)}
.env-chip{background:var(--surface-2);color:var(--text-3);border-color:var(--border);border-radius:8px;font-size:12px;font-weight:600}
.env-chip::before{width:6px;height:6px;background:#D59B38}
.content{padding:36px 38px 72px;max-width:calc(var(--content-max) + 60px)}
.page-head{margin-bottom:28px;align-items:center}
.page-head p{margin-top:7px;max-width:73ch}
.section-head{margin:36px 0 15px}
.section-head h2{font-size:20px;font-weight:700;letter-spacing:-.027em}
.card-head{margin-bottom:18px}
.card-head h2{font-size:19px;letter-spacing:-.025em}

/* 03 — Consistent quiet cards, tables, buttons, input fields */
.card,.panel,.subpanel,.service-card,.tool,.free-tier-feature,.free-tier-resource-teaser,
.free-expert-panel,.free-expert-history-row,.free-tier-demo-row{
  border-color:var(--border);border-radius:12px;box-shadow:var(--shadow-xs);
}
.card,.panel{background:var(--surface)}
.card{padding:22px}
.panel{padding:24px}
.card:focus-within,.panel:focus-within{border-color:var(--border-strong)}
.card-section,.card-foot{border-color:var(--divider)}
button,.btn{font-weight:600;border-radius:9px;box-shadow:none;letter-spacing:0;transition:background 140ms ease,border-color 140ms ease,color 140ms ease}
button:hover,.btn:hover{box-shadow:none}
button.secondary,.btn-secondary,button.quiet-action,.vse-btn.vse-secondary{border-color:var(--border-strong);box-shadow:none}
button.secondary:hover,.btn-secondary:hover,button.quiet-action:hover{background:var(--surface-3)}
input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]),select,textarea{border-radius:9px;box-shadow:none;background-color:var(--surface)}
input:hover,select:hover,textarea:hover{border-color:var(--border-strong)}
label{font-weight:600;color:var(--text-2)}
.data-table{border-collapse:separate;border-spacing:0}
.data-table th{background:var(--surface-2);color:var(--text-2);font-weight:650;letter-spacing:0}
.data-table td{border-bottom-color:var(--divider)}
.data-table tbody tr:hover td{background:var(--surface-2)}
.table-wrap{border-radius:10px}
.tabs{border-radius:10px;background:var(--surface-2)}
.tabs a{border-radius:7px}
.badge,.pill,.mini-state,.status-pill{border-radius:7px;letter-spacing:0;font-weight:600}
.note,.notice,.staff-notice,.vse-inline,.member-welcome-note,.callout{border-radius:10px}
.empty-state{border-color:var(--border);background:var(--surface-2);padding:30px 20px}
.kpis>div,.metric,.stat{background:var(--surface);border:1px solid var(--border);border-radius:12px;padding:17px 19px;box-shadow:var(--shadow-xs)}
.kpis>div b,.metric b,.stat strong{letter-spacing:-.038em}

/* 04 — Scannable tools with gentle hover and no noisy gradients */
#overview .tools-grid{gap:14px}
#overview .tool{min-height:116px;padding:19px;box-shadow:none;border-radius:12px}
#overview .tool:hover{border-color:var(--border-strong);background:var(--surface-2);box-shadow:var(--shadow-sm);transform:none}
#overview .tool .ic{background:var(--accent-soft);color:var(--accent-text);border:1px solid transparent;border-radius:10px}
#overview .tool strong{font-weight:650;letter-spacing:-.01em;font-size:16px}
#overview .tool>span:last-child>span{font-size:14px;line-height:1.55}
#overview .tools-footer{padding:2px 0}
.free-tier-feature{padding:21px!important;gap:12px;min-height:222px}
.free-tier-feature:hover{transform:none;border-color:var(--border-strong);box-shadow:var(--shadow-sm)}
.free-tier-feature h3{font-size:19px;font-weight:680;letter-spacing:-.02em}
.free-tier-feature p{color:var(--text-2)!important;line-height:1.62}
.free-tier-icon{background:var(--accent-soft);color:var(--accent-text);border:1px solid var(--border);border-radius:10px}
.free-tier-page-head h1{font-weight:750;letter-spacing:-.038em}
.free-tier-page-head p{color:var(--text-2)}
.free-tier-section-title{font-weight:730;letter-spacing:-.028em;margin:30px 0 14px}
.free-tier-banner{border:1px solid var(--border);border-left:3px solid var(--accent);background:var(--surface);border-radius:11px;box-shadow:none;padding:15px 20px}
.free-tier-banner strong{color:var(--text);font-weight:700}
.free-tier-banner span{color:var(--text-2)}
.free-tier-welcome{border:1px solid var(--border);border-radius:15px;background:var(--surface);color:var(--text);padding:clamp(24px,3.5vw,36px);box-shadow:var(--shadow-xs);position:relative;overflow:hidden}
.free-tier-welcome::before{content:"";position:absolute;top:0;left:0;right:0;height:3px;background:var(--accent)}
.free-tier-welcome h2{color:var(--text);font-size:clamp(23px,2.3vw,30px);letter-spacing:-.035em;font-weight:720}
.free-tier-welcome p{color:var(--text-2);max-width:70ch}
.free-tier-welcome .btn-secondary{background:var(--surface);color:var(--text);border:1px solid var(--border-strong)}
.free-tier-welcome .btn-secondary:hover{background:var(--surface-3)}
.free-tier-upgrade,.free-tier-actions .free-tier-upgrade{border-radius:9px}
.free-tier-learning{gap:26px}
.free-tier-resource-teaser{padding:25px!important}
.free-tier-sample{background:var(--surface-2);color:var(--text);border:1px dashed var(--border-strong)}
.free-tier-sample p{color:var(--text-2)!important}
.free-tier-locked{background:var(--surface);border:1px solid var(--border);border-radius:14px}

/* 05 — Expert Services stays LAST in sidebar, still highlighted. Small top button preserved. */
#sidebar .nav-link[data-nav-id="services"]{
  background:#DDF4EC;color:#075B4C!important;border:1px solid #8FD7BE;
  border-radius:10px;font-weight:750;margin:4px 6px;width:calc(100% - 12px);
}
#sidebar .nav-link[data-nav-id="services"] svg{stroke:#096F5D}
.topbar .vse-expert-top-link{min-height:32px;height:32px;padding:0 9px;gap:5px;box-shadow:none;border-radius:8px;font-size:12px;font-weight:700;letter-spacing:0}
.free-expert-hero,.marketplace-hero{background:#0C2941;box-shadow:none;border:1px solid rgba(255,255,255,.1);border-radius:15px}
.marketplace-hero-aside{border-radius:12px;background:rgba(255,255,255,.045)}
.marketplace-toolbar{background:var(--surface);border-color:var(--border);border-radius:12px;padding:22px;gap:18px}
.marketplace-search-field{border-color:var(--border-strong);border-radius:10px}
.marketplace-grid .marketplace-card{border-radius:12px;box-shadow:var(--shadow-xs);padding:22px}
.marketplace-grid .marketplace-card:hover{border-color:var(--border-strong);box-shadow:var(--shadow-sm)}
.marketplace-grid .marketplace-card h3{font-size:19px;letter-spacing:-.025em;font-weight:730}
.marketplace-card .marketplace-desc{color:var(--text-2)}
button.marketplace-filter{border-radius:8px!important;font-weight:600}
.marketplace-assurance{background:var(--surface);border-radius:11px}

/* 06 — Login screen: simple, restrained enterprise SaaS finish. */
.auth-brand{background:#0C1526}
.auth-brand::before,.auth-brand::after{display:none}
.auth-main{background:var(--bg)}
.auth-card{max-width:440px;background:var(--surface);border:1px solid var(--border);border-radius:16px;box-shadow:var(--shadow-md);padding:32px}
.auth-card h1{letter-spacing:-.03em}
.unified-auth-switch{border:1px solid var(--border);background:var(--surface-2);border-radius:10px;padding:4px;gap:4px}
.auth-switch-btn{border-radius:8px!important}
.auth-switch-btn.is-active{box-shadow:var(--shadow-sm)!important}

/* 07 — dark mode custom overrides for the few legacy fixed-color modules. */
:root[data-theme="dark"] .free-tier-banner{background:var(--surface);border-color:var(--border);border-left-color:var(--accent);color:var(--text)}
:root[data-theme="dark"] .free-tier-banner span{color:var(--text-2)}
:root[data-theme="dark"] .free-tier-welcome{background:var(--surface);border-color:var(--border);color:var(--text)}
:root[data-theme="dark"] .free-tier-welcome h2{color:var(--text)}
:root[data-theme="dark"] .free-tier-welcome p{color:var(--text-2)}
:root[data-theme="dark"] .free-tier-welcome .btn-secondary{background:var(--surface-2);color:var(--text);border-color:var(--border-strong)}
:root[data-theme="dark"] .free-tier-icon{background:var(--accent-soft);color:var(--accent-text)}
:root[data-theme="dark"] #sidebar .nav-link[data-nav-id="services"]{background:#163C37;color:#D7F9EF!important;border-color:#32695D}
:root[data-theme="dark"] #sidebar .nav-link[data-nav-id="services"] svg{stroke:#87E9C9}
:root[data-theme="dark"] .free-tier-sample{background:var(--surface-2);color:var(--text)}
:root[data-theme="dark"] .free-tier-sample p{color:var(--text-2)!important}
:root[data-theme="dark"] .auth-brand{background:#080E17}

/* 08 — responsive. Never sacrifice tap targets or hide core nav for decoration. */
@media(max-width:1023px){
  .topbar{padding-inline:17px}
  .content{padding:26px 22px 50px}
  .sidebar{width:min(322px,90vw)}
}
@media(max-width:760px){
  .topbar{padding-inline:12px;gap:8px}
  .content{padding:20px 16px 42px}
  .page-head{margin-bottom:20px}
  .card,.panel{padding:17px}
  .free-tier-banner{padding:16px}
  .free-tier-welcome{padding:23px}
  .free-tier-feature{min-height:auto;padding:17px!important}
  .marketplace-toolbar{padding:16px}
  .marketplace-grid .marketplace-card{padding:17px}
  .auth-card{padding:24px 20px;border-radius:13px}
  #overview .tool{min-height:90px;padding:15px}
}
@media(max-width:410px){
  #overview .tool{min-height:68px}
  .topbar .vse-expert-top-link{min-width:32px;min-height:32px}
}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.tool,.free-tier-feature,.nav-link{transition:none}}
@media print{.auth-card,.card,.panel{box-shadow:none}.content{padding:0}}