/*
 * Studio (v9.50): the light look for the CRM and the portal. The navy
 * sidebar stays as it was; everything to the right of it is light.
 *
 * Loaded last on both pages, after workspace-fixes.css, so it settles the
 * earlier layers. Colours come from the tokens below.
 */
:root{
  --f-head:'Inter',ui-sans-serif,system-ui,-apple-system,'Segoe UI',sans-serif;--f-body:'Inter',ui-sans-serif,system-ui,-apple-system,'Segoe UI',sans-serif;
  --canvas:#f7f8fa;--surface:#fff;--surface-2:#fafbfc;--line:#e6e8ec;--line-2:#eef0f3;--ink:#0f172a;--ink-2:#334155;--soft:#64748b;--faint:#94a3b8;
  --accent:#3159e8;--accent-2:#7c5cff;--accent-soft:#eef2ff;--accent-line:#dfe5ff;--hover:#f1f3f6;
  --ok:#0f9f6e;--ok-soft:#e7f7ef;--bad:#d4473b;--bad-soft:#fdecea;--warn:#d97706;
  --shadow-1:0 1px 2px #0f172a0a,0 1px 1px #0f172a05;--shadow-2:0 10px 30px -12px #0f172a26;
}
body.workspace-v2{--f-mono:var(--f-body);font-feature-settings:'cv11','ss01';-webkit-font-smoothing:antialiased;background:var(--canvas)!important;color:var(--ink);font-family:var(--f-body)!important}
body.workspace-v2 :is(h1,h2,h3,h4){font-family:var(--f-head)!important}

/* ---------- Sidebar: navy as before, a user card at the foot ---------- */
.workspace-v2.crm-shell .nav-item{border-radius:10px!important}
.workspace-v2.crm-shell .sidebar-foot{border-top:1px solid #ffffff14!important;padding:12px 14px!important}
.vq-user{display:flex;align-items:center;gap:10px;width:100%}
.vq-user .t{min-width:0;flex:1}
.vq-user .t strong{display:block;font-size:13px;color:#fff;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.vq-user .t small{display:block;font-size:11.5px;color:#9fb0d0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.vq-user .vq-avatar{width:30px;height:30px;font-size:11.5px;box-shadow:none}
.vq-user .vq-icon-btn{width:30px;height:30px;background:#ffffff10;border-color:#ffffff22;color:#c9d6f2;box-shadow:none}
.vq-user .vq-icon-btn:hover{color:#fff;border-color:#ffffff44}
.workspace-v2.crm-shell .sidebar-foot .vq-meta{margin-top:8px;font-size:11px;color:#7f90b0}
.workspace-v2.portal-shell .portal-navigation .tab{min-height:34px!important;height:auto!important;padding:6px 10px!important;margin:1px 0!important;font-size:13px!important;border-radius:10px!important}
.workspace-v2.portal-shell .workspace-nav-section{padding:12px 11px 4px!important}
.workspace-v2.portal-shell .workspace-nav-glyph{width:24px!important;height:24px!important}

/* ---------- Page header: breadcrumb, title, tools ---------- */
.workspace-v2.crm-shell .main{background:radial-gradient(1200px 380px at 70% -120px,#e9edff 0,transparent 70%),var(--canvas)!important}
.workspace-v2.crm-shell .topbar{flex-shrink:0!important;min-height:0!important;height:auto!important;padding:22px 32px 14px!important;background:transparent!important;backdrop-filter:none!important;-webkit-backdrop-filter:none!important;border-bottom:0!important;position:static!important;align-items:center!important;box-shadow:none!important}
.workspace-v2.crm-shell .topbar h1{font-size:24px!important;letter-spacing:-.02em!important;font-weight:650!important;color:var(--ink)!important;margin:2px 0 4px!important;line-height:1.25!important}
.workspace-v2 .portal-view-heading h1{font-size:22px!important;letter-spacing:-.02em!important;font-weight:650!important;color:var(--ink)!important}
.workspace-v2 .topbar-sub{font-size:13px!important;color:var(--soft)!important}
.workspace-v2.crm-shell .topbar .workspace-eyebrow{display:flex;gap:6px;align-items:center;font-size:12px!important;letter-spacing:0!important;text-transform:none!important;color:var(--faint)!important;font-weight:500!important;margin:0!important}
.workspace-v2.crm-shell .topbar .workspace-eyebrow b{color:var(--soft);font-weight:500}
.workspace-v2.crm-shell .content{padding:14px 32px 48px!important;max-width:1480px}
.workspace-v2 .workspace-jump-trigger{border-radius:8px!important;background:var(--surface)!important;border:1px solid var(--line)!important;box-shadow:var(--shadow-1)!important;min-height:36px!important;padding:6px 12px!important;font-size:13px!important;color:var(--faint)!important;gap:8px!important}
@media(min-width:1201px){.workspace-v2.crm-shell .workspace-jump-trigger{min-width:240px!important;justify-content:flex-start!important}.workspace-v2.crm-shell .workspace-jump-trigger span{margin-right:auto}}
.workspace-v2 .workspace-jump-trigger span{color:var(--faint)!important;font-weight:400!important}
.workspace-v2 .workspace-jump-trigger kbd{background:var(--surface-2)!important;border:1px solid var(--line)!important;color:var(--soft)!important;border-radius:5px!important;font-family:var(--f-body)!important}
.vq-tools{display:flex;align-items:center;gap:6px}
.vq-icon-btn{width:36px;height:36px;border-radius:9px;border:1px solid var(--line);background:var(--surface);color:var(--ink-2);display:grid;place-items:center;cursor:pointer;position:relative;box-shadow:var(--shadow-1);padding:0;flex:0 0 auto}
.vq-icon-btn:hover{border-color:var(--accent-line);color:var(--accent)}
.vq-icon-btn:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.vq-icon-btn .dot{position:absolute;top:7px;right:8px;width:7px;height:7px;border-radius:50%;background:#f04438;box-shadow:0 0 0 2px var(--surface)}
.vq-avatar{width:34px;height:34px;border-radius:50%;display:grid;place-items:center;font-size:12.5px;font-weight:650;color:#fff;background:linear-gradient(135deg,var(--accent),var(--accent-2));box-shadow:0 0 0 2px var(--surface),0 0 0 3px var(--line);flex:0 0 auto}
.vq-sep{width:1px;height:22px;background:var(--line);margin:0 4px}
.vq-bell-wrap{position:relative}
.vq-pop{position:absolute;right:0;top:44px;width:320px;background:var(--surface);border:1px solid var(--line);border-radius:12px;box-shadow:var(--shadow-2);padding:6px;z-index:60}
.vq-pop h4{margin:6px 10px;font-size:12px;color:var(--soft);font-weight:600}
.vq-pop button{display:flex;gap:10px;align-items:flex-start;width:100%;text-align:left;background:none;border:0;border-radius:8px;padding:9px 10px;color:var(--ink-2);font:inherit;font-size:13px;cursor:pointer}
.vq-pop button:hover{background:var(--hover)}
.vq-pop button i{flex:0 0 8px;height:8px;border-radius:50%;margin-top:5px;background:var(--accent)}
.vq-pop button i.warn{background:var(--warn)}.vq-pop button i.bad{background:var(--bad)}.vq-pop button i.ok{background:var(--ok)}
.vq-pop .none{padding:14px 10px;color:var(--soft);font-size:13px}
@media(max-width:860px){.vq-tools .vq-avatar,.vq-tools .vq-sep{display:none}.vq-pop{position:fixed;left:12px;right:12px;top:72px;width:auto}}

/* ---------- Dashboard: a greeting, then the figures ---------- */
.vq-greet-meta{display:flex;gap:8px;margin-top:8px;flex-wrap:wrap}
.vq-greet-meta button{font:inherit;font-size:12.5px;color:var(--ink-2);background:var(--surface);border:1px solid var(--line);border-radius:999px;padding:3px 10px;box-shadow:var(--shadow-1);cursor:pointer}
.vq-greet-meta button:hover{border-color:var(--accent-line)}
.vq-greet-meta i{display:inline-block;width:6px;height:6px;border-radius:50%;margin-right:6px;vertical-align:1px;background:var(--accent)}
.vq-greet-meta i.warn{background:var(--warn)}.vq-greet-meta i.ok{background:var(--ok)}
.workspace-v2.crm-shell .dashboard-summary{background:transparent!important;border:0!important;box-shadow:none!important;gap:14px!important;padding:0!important;color:var(--ink)!important}
.workspace-v2.crm-shell .dashboard-summary:before,.workspace-v2.crm-shell .dashboard-summary:after{display:none!important}
.workspace-v2.crm-shell .dashboard-summary .kpi{background:var(--surface)!important;border:1px solid var(--line)!important;border-radius:14px!important;box-shadow:var(--shadow-1)!important;padding:16px 18px 12px!important;position:relative;overflow:hidden;transition:box-shadow .2s,transform .2s;display:flex!important;flex-direction:column;min-height:0!important}
.workspace-v2.crm-shell .dashboard-summary .kpi:hover{box-shadow:var(--shadow-2)!important;transform:translateY(-1px)}
.workspace-v2.crm-shell .dashboard-summary .kpi .label{color:var(--soft)!important;font-size:12.5px!important;font-weight:500!important;letter-spacing:0!important;text-transform:none!important}
.workspace-v2.crm-shell .dashboard-summary .kpi .label svg{color:var(--faint)!important}
.workspace-v2.crm-shell .dashboard-summary .kpi .value{color:var(--ink)!important;font-size:clamp(20px,1.75vw,26px)!important;font-weight:650!important;letter-spacing:-.02em!important;display:flex;flex-wrap:wrap;align-items:center;row-gap:6px;white-space:nowrap;margin:10px 0 4px!important}
.workspace-v2.crm-shell .dashboard-summary .kpi .value[data-live-net-monthly]{color:var(--ok)!important}
.workspace-v2.crm-shell .dashboard-summary .kpi .delta{color:var(--soft)!important;font-size:12px!important}
.vq-chip{display:inline-flex;align-items:center;gap:3px;font-size:11.5px;font-weight:600;letter-spacing:0;border-radius:999px;padding:1px 7px;margin-left:8px;background:var(--ok-soft);color:var(--ok)}
.vq-chip.bad{background:var(--bad-soft);color:var(--bad)}.vq-chip.flat{background:var(--line-2);color:var(--soft)}
.vq-spark{display:block;width:100%;height:44px;margin-top:auto;padding-top:10px}
.vq-spark .ln{stroke:var(--accent)}.vq-spark .ar{fill:var(--accent)}
.vq-spark.bad .ln{stroke:var(--bad)}.vq-spark.bad .ar{fill:var(--bad)}

/* the portal's headline stays, smaller and on the page rather than in a banner */
.workspace-v2 :is(.workspace-intro,.workspace-hero){padding:0 0 18px!important;min-height:0!important;background:transparent!important;border:0!important;box-shadow:none!important;color:var(--ink)!important}
.workspace-v2 :is(.workspace-intro,.workspace-hero):before,.workspace-v2 :is(.workspace-intro,.workspace-hero):after{display:none!important}
.workspace-v2 :is(.workspace-intro,.workspace-hero) h2{font-size:26px!important;letter-spacing:-.025em!important;color:var(--ink)!important;margin:2px 0 4px!important;font-weight:650!important}
.workspace-v2 :is(.workspace-intro,.workspace-hero) h2 br{display:none}
.workspace-v2 :is(.workspace-intro,.workspace-hero) h2 em{color:var(--accent)!important;font-style:normal}
.workspace-v2 :is(.workspace-intro,.workspace-hero) p{font-size:13.5px!important;color:var(--soft)!important}
.workspace-v2 :is(.workspace-intro,.workspace-hero) .workspace-eyebrow{font-size:11.5px!important;letter-spacing:.02em!important;color:var(--soft)!important}

/* ---------- Buttons and fields ---------- */
.workspace-v2 .btn{border-radius:8px!important;font-weight:600!important;font-size:13px!important;box-shadow:none!important}
.workspace-v2 .btn-primary{background:var(--ink)!important;border-color:var(--ink)!important;color:#fff!important}
.workspace-v2 .btn-primary:hover{background:#1e293b!important}
.workspace-v2 .btn-ghost{background:var(--surface)!important;border:1px solid var(--line)!important;color:var(--ink-2)!important}
.workspace-v2 .btn-ghost:hover{border-color:var(--accent-line)!important;color:var(--ink)!important}
.workspace-v2 :is(input,select,textarea):focus{border-color:var(--accent)!important;box-shadow:0 0 0 3px var(--accent-soft)!important;outline:0}

/* ---------- Cards, panels, tables ---------- */
.workspace-v2 :is(.card,.insight-card,.vqa-card,.vqs-card,.table-wrap,.chart-card){background:var(--surface)!important;border:1px solid var(--line)!important;border-radius:12px!important;box-shadow:var(--shadow-1)!important;color:var(--ink)}
.workspace-v2 :is(.insight-card,.vqa-card,.chart-card){transition:box-shadow .2s}
.workspace-v2 :is(.insight-card,.vqa-card,.chart-card):hover{box-shadow:var(--shadow-2)!important}
.workspace-v2 .insight-trend{background:var(--surface)!important;border-color:var(--line)!important;color:var(--ink)!important}
.workspace-v2 .insight-trend h3{color:var(--ink)!important}
.workspace-v2 .insight-trend :is(.insight-card-head p,.insight-footnote,.insight-overline,.insight-empty,.insight-empty *){color:var(--soft)!important}
.workspace-v2 .insight-trend .insight-badge{background:var(--surface-2)!important;border-color:var(--line)!important;color:var(--soft)!important}
.workspace-v2 .insight-metrics{background:transparent!important;border:0!important;box-shadow:none!important;gap:14px!important}
.workspace-v2 .insight-metric{background:var(--surface)!important;border:1px solid var(--line)!important;border-radius:14px!important;box-shadow:var(--shadow-1)!important;color:var(--ink)!important}
.workspace-v2 .insight-metric>strong{font-size:28px!important;font-weight:650!important;color:var(--ink)!important}
.workspace-v2 .insight-metric:first-child>strong{color:var(--accent)!important}
.workspace-v2 :is(.insight-metric-top,.insight-metric p){color:var(--soft)!important}
.workspace-v2 :is(.insight-head h2,.section-title h2){font-size:17px!important;letter-spacing:-.015em!important;font-weight:650!important;color:var(--ink)!important}
.workspace-v2 .insight-overline{letter-spacing:.02em!important}
.workspace-v2 .insight-focus{background:var(--accent-soft)!important;border-color:var(--accent-line)!important}
.workspace-v2 table th{background:var(--surface-2)!important;color:var(--soft)!important;font-weight:600!important;letter-spacing:0!important;text-transform:none!important;padding:10px 16px!important;border-bottom:1px solid var(--line)!important}
.workspace-v2 table td{padding:11px 16px!important;border-bottom:1px solid var(--line-2)!important}
.workspace-v2 table tbody tr:hover td{background:#fafbff!important}
.workspace-v2 .pill{font-size:12px!important;font-weight:500!important;border-radius:6px!important;padding:2px 8px!important;font-family:var(--f-body)!important}
.workspace-v2 .tag{font-family:var(--f-body)!important;border-radius:6px!important}
.vq-co{display:inline-flex;align-items:center;gap:10px}
.vq-ini{flex:0 0 auto;width:24px;height:24px;border-radius:50%;display:inline-grid;place-items:center;font-size:10px;font-weight:650;color:#fff;letter-spacing:0}
.vq-co .vq-ini{width:28px;height:28px;border-radius:8px;font-size:11px}

/* ---------- Pipeline ---------- */
.workspace-v2 .stage-tabs{background:var(--surface)!important;border:1px solid var(--line)!important;border-radius:10px!important;padding:4px!important;box-shadow:none!important}
.workspace-v2 .stage-tab{border-radius:7px!important;font-size:13px!important;font-weight:500!important;padding:6px 12px!important}
.workspace-v2 .stage-tab.active{background:var(--ink)!important;color:#fff!important}
.workspace-v2 .kanban-col:not([style*="F4E7E4"]){background:#f0f2f5!important}
.workspace-v2 .kanban-col{border:0!important;border-radius:12px!important}
.workspace-v2 .kanban-col-head{font-size:13px!important;font-weight:600!important;padding:4px 6px 10px!important;align-items:flex-start!important}
.workspace-v2 .kanban-col-head .n{font-family:var(--f-body)!important;background:var(--surface);border-radius:6px;padding:1px 7px}
.vq-stage-dot{display:inline-block;width:8px;height:8px;border-radius:50%;margin-right:8px}
.vq-col-sum{display:block;font-size:11.5px;color:var(--soft);font-weight:500;margin-top:2px}
.workspace-v2 .kcard{border:1px solid var(--line)!important;border-radius:10px!important;box-shadow:var(--shadow-1)!important}
.workspace-v2 .kcard:hover{border-color:#c9d3f7!important;box-shadow:0 4px 14px -6px #3159e833!important}
.workspace-v2 .kcard .name{display:flex;align-items:center;gap:8px;font-weight:600!important}
.workspace-v2 .kcard .co{margin-left:32px}
.workspace-v2 .kcard .meta{padding-top:10px;border-top:1px dashed var(--line)}

/* ---------- Portal ---------- */
.workspace-v2.portal-shell .topbar{background:var(--surface)!important;border:1px solid var(--line)!important;box-shadow:var(--shadow-1)!important;border-radius:12px!important;padding:12px 20px!important}
.workspace-v2.portal-shell .portal-header-actions{align-items:center}
.workspace-v2 .vqa .vqa-hero{background:var(--surface)!important;border:1px solid var(--line)!important;box-shadow:none!important;padding:18px 22px!important;min-height:0!important;color:var(--ink)!important}
.workspace-v2 .vqa .vqa-hero:before,.workspace-v2 .vqa .vqa-hero:after{display:none!important}
.workspace-v2 .vqa .vqa-hero h2{color:var(--ink)!important;font-size:20px!important}
.workspace-v2 .vqa .vqa-hero p{color:var(--soft)!important}
.workspace-v2 .vqa .vqa-hero .vqa-eyebrow{color:var(--accent)!important}
.workspace-v2 .vqa .vqa-hero-mark{background:var(--accent-soft)!important;color:var(--accent)!important;box-shadow:none!important;border-color:var(--accent-line)!important}
.workspace-v2 .vqa .vqa-hero :is(.vqa-badge,.insight-badge,span[class*=badge],.vqa-range){background:var(--surface-2)!important;border:1px solid var(--line)!important;color:var(--soft)!important}

/* ---------- The older navy bands inside pages, made light ---------- */
.workspace-v2 .stat-strip{background:var(--surface)!important;border:1px solid var(--line)!important;box-shadow:var(--shadow-1)!important;color:var(--ink)!important}
.workspace-v2 .stat-strip .s-item .l{color:var(--soft)!important;text-transform:none!important;letter-spacing:0!important;font-size:12px!important}
.workspace-v2 .stat-strip .s-item .v{color:var(--ink)}
.workspace-v2 .vqc-directory-title{background:var(--surface-2)!important;border-bottom:1px solid var(--line)!important;color:var(--ink)!important}
.workspace-v2 .vqc-directory-title h3{color:var(--ink)!important}.workspace-v2 .vqc-directory-title>span{color:var(--soft)!important}
.workspace-v2 .kpi-mini:first-child{background:var(--accent-soft)!important;border-color:var(--accent-line)!important;color:var(--ink)!important}
.workspace-v2 .kpi-mini:first-child :is(.l,.d){color:var(--soft)!important}
.workspace-v2 .kpi-mini:first-child .v{color:var(--accent)!important}