/* =============================================================================
   ui.css – Valuecase interface, rebuilt for animation
   -----------------------------------------------------------------------------
   Hand-built (so every element can be animated, restyled and re-content-ed),
   but NOT eyeballed. Every number below was measured off the real app:

     tokens      packages/tailwind-shared-config + seller-frontend/src/main.css
     geometry    getComputedStyle()/getBoundingClientRect() on the SingleFile
                 captures in ../sources/  – see ../screens/ for those verbatim

   Measured, and worth writing down because I'd guessed several of them wrong:
     page tabs        12px / 500, 56px tall, 0 16px padding, active #007dfc
     content card     944px wide, radius 8px, padding 40px, NO shadow
     block title      24px / 800, line-height 36
     milestone title  16px / 700
     task row         40px tall, radius 8px, padding 6px 6px 6px 8px
     task title       14px / 400, grey-s5
     assignee name    10px / 400, grey-s5
     progress track   6px tall, grey-s2, fully rounded
     CTA button       12px / 600, 28px tall, radius 7px, brand fill
     overdue badge    10px, WHITE on warning-s4, radius 4px

   Design canvas is 1440 x 900. Scale the .vc-screen wrapper to fit.

   BRANDING is three custom properties on .vc-screen:
     --brand       highlight: active tab, buttons, links
     --brand-ink   text on --brand
     --band        the page-header backdrop (colour, gradient or url())
   ========================================================================== */

:root {
  --primary-s1:#f4f6ff; --primary-s2:#e9edff; --primary-s3:#d1dbff;
  --primary-s4:#7793ff; --primary-s5:#2a4cfa; --primary-s6:#0a1cd3;
  --grey-s1:#f3f5f8; --grey-s2:#e0e2e7; --grey-s3:#c9ccd4;
  --grey-s4:#9fa2ab; --grey-s5:#767880; --grey-s6:#31333a;
  --success-s1:#f2fdfa; --success-s3:#c2eee1; --success-s4:#70d8b9;
  --success-s5:#33c79b; --success-s6:#0eab7c;
  --warning-s1:#fff6f6; --warning-s3:#fccbcd; --warning-s4:#f8868a;
  --warning-s5:#f45359; --warning-s6:#d3242a;
  --orange-s5:#fb923c; --orange-s1:#fff7ed;
  --brand-dark-blue:#151d39;
  --app-bg:#e5e9f6;
  --text-grey:#5f6068;
  --shadow-box:0 1px 3px 0 rgba(0,0,0,.10), 0 1px 2px -1px rgba(0,0,0,.10);
  --shadow-floating:0 6px 16px -4px rgba(0,0,0,.2), 0 2px 6px -2px rgba(0,0,0,.06);
}

*,*::before,*::after { box-sizing:border-box; }
body { margin:0; -webkit-font-smoothing:antialiased; }

/* The app names its face "Open Sans Variable". Alias it onto Google's Open Sans
   so a standalone file renders in the right type instead of falling back to
   Helvetica – which is exactly what went wrong in the extracted screens. */
.vc-screen, .vc-screen * {
  font-family:'Open Sans Variable','Open Sans',-apple-system,BlinkMacSystemFont,sans-serif;
}

.vc-screen {
  --brand:#007dfc;
  --brand-ink:#fff;
  --band:url("assets/space-background.jpg");
  position:relative; width:1440px; height:900px; overflow:hidden;
  background:#f3f4f5; color:var(--grey-s6);
}

/* ==========================================================================
   CUSTOMER-FACING SPACE
   ========================================================================== */

.vc-topbar {
  position:relative; z-index:3;
  height:56px; display:flex; align-items:stretch;
  background:#fff;
}
.vc-brand { flex:0 0 351.7px; display:flex; align-items:center; padding-left:40px; }
.vc-brand img { display:block; width:120px; height:40px; object-fit:contain; object-position:left center; }
.vc-tabs { display:flex; align-items:stretch; }
.vc-screen[data-screen="space-welcome"]:not([data-pages-unlocked]) .vc-tabs,
.vc-screen[data-screen="space-form"]:not([data-pages-unlocked]) .vc-tabs {
  position:absolute; top:0; bottom:0; left:50%; transform:translateX(-50%);
}
.vc-tab { display:flex; align-items:center; padding:0 16px; font-size:12px; font-weight:500;
          color:var(--grey-s6); white-space:nowrap; text-decoration:none; }
.vc-tab[data-page-tab="welcome"] { width:80.5px; }
.vc-tab[data-page-tab="form"] { width:124px; }
.vc-tab[data-page-tab="plan"] { width:210.8px; }
.vc-tab[data-active] { background:var(--brand); color:var(--brand-ink); }
.vc-topbar-right { margin-left:auto; display:flex; align-items:center; gap:24px; padding-right:40px; }
.vc-icon { display:flex; color:var(--grey-s6); }
.vc-contact { display:flex; align-items:center; gap:8px; width:147px; height:40px;
              background:#e7e7e8; border-radius:8px; padding:4px 10px 4px 6px; }
.vc-contact .ph { width:32px; height:32px; border-radius:6px; object-fit:cover; flex:0 0 auto; }
.vc-contact b { font-size:11px; font-weight:700; line-height:1.35; display:block; }
.vc-contact span { font-size:11px; color:var(--grey-s5); line-height:1.35; }

/* --- page header band --- */
.vc-band { position:absolute; left:0; right:0; top:0; height:720px; background:var(--band);
           background-size:cover; background-position:center bottom; z-index:0; }
.vc-pagehead { position:relative; z-index:1; padding:80px 248px 0; display:flex; align-items:flex-start; }
.vc-screen[data-screen="space-plan"] .vc-pagehead,
.vc-screen[data-screen="space-plan"] .vc-card { will-change:transform; }
.vc-pagehead h1 { margin:0; font-size:32px; font-weight:800; letter-spacing:0;
                  line-height:44px; color:var(--grey-s6); }
.vc-pagehead p { margin:4px 0 0; font-size:16px; line-height:22px; color:var(--grey-s6); }
.vc-customer-logo { margin-left:auto; width:80px; height:80px; border-radius:14px; flex:0 0 auto;
                    display:block; object-fit:cover; overflow:hidden; }

/* --- the white content card --- */
.vc-card { position:relative; z-index:1; width:944px; margin:64px auto 0;
           background:#fff; border-radius:8px; padding:40px; }
.vc-card h2 { margin:0; font-size:24px; font-weight:800; line-height:36px; color:var(--grey-s6); }
.vc-card .desc { margin:12px 0 0; font-size:16px; line-height:24.8px; color:var(--text-grey); }

/* --- progress panel --- */
.vc-progress { height:60px; background:#f6f8fc; border-radius:8px; padding:8px 16px;
               margin:28px 0 20px; }
.vc-progress-row { height:28px; display:flex; align-items:center; gap:8px; }
.vc-track { flex:1; height:6px; border-radius:9999px; background:var(--grey-s2); overflow:hidden; }
.vc-track > i { display:block; height:100%; border-radius:9999px; background:var(--success-s4); }
.vc-track > i { transition:width .34s cubic-bezier(.2,.8,.2,1); }
.vc-pct { font-size:12px; line-height:16px; color:var(--grey-s5); font-variant-numeric:tabular-nums;
          width:34px; text-align:right; }
.vc-progress .label { font-size:12px; line-height:16px; color:var(--grey-s5); margin:0; }

/* --- milestones + tasks --- */
.vc-milestone { position:relative; }
.vc-milestone + .vc-milestone { border-top:1px solid var(--grey-s2); }
.vc-ms-head { display:flex; align-items:center; gap:10px; height:56px; padding:0 8px; }
.vc-ms-head .title { height:32px; padding:4px; font-size:16px; font-weight:700; line-height:24px; }
.vc-ring { flex:0 0 18px; width:18px; height:18px; }
.vc-ring svg { display:block; transform:rotate(-90deg); }
.vc-badge { font-size:10px; line-height:14px; color:#fff; background:var(--warning-s4);
            border-radius:4px; padding:2px 4px; margin-left:auto; font-weight:600; }
.vc-ms-right { display:flex; align-items:center; gap:12px; margin-left:12px; color:var(--grey-s4); }
.vc-chev { font-size:10px; }

.vc-task-list { display:flex; flex-direction:column; gap:4px; margin-bottom:8px; }
.vc-task { display:flex; align-items:flex-start; justify-content:space-between; gap:16px;
           min-height:40px; padding:6px 6px 6px 8px; border-radius:8px; }
.vc-task[data-action] { height:72px; overflow:hidden; transition:height .45s ease; }
.vc-task[data-action][data-done] { height:40px; }
.vc-task:hover { background:var(--grey-s1); }
.vc-task-main { display:flex; align-items:flex-start; gap:8px; min-width:0; }
.vc-task-copy { display:flex; flex-direction:column; align-items:flex-start; gap:4px; min-width:0; }
.vc-check { flex:0 0 16px; width:16px; height:16px; }
.vc-check rect.box { fill:#fff; stroke:var(--grey-s3); }
.vc-check path.tick { opacity:0; }
.vc-task[data-done] .vc-check rect.box { fill:var(--success-s5); stroke:var(--success-s5); }
.vc-task[data-done] .vc-check path.tick { opacity:1; }
.vc-task .title { margin-top:-4px; padding:4px; font-size:14px; font-weight:400;
                  line-height:20px; color:var(--grey-s5); }
.vc-task a.title { text-decoration:none; }
.vc-task[data-done] .title { text-decoration:line-through; color:var(--grey-s4); }
.vc-task[data-done] .vc-cta { opacity:0; visibility:hidden; }
.vc-task[data-done] {
  transition:background .22s ease,color .22s ease;
}
.vc-screen[data-plan-complete] .vc-progress {
  box-shadow:inset 0 0 0 1px var(--success-s3);
}
.vc-screen[data-plan-complete] .vc-badge {
  border-color:var(--success-s3); background:var(--success-s1); color:var(--success-s6);
}
.vc-task-right { margin-left:auto; min-height:28px; display:flex; align-items:center; gap:10px; }
.vc-cta { background:var(--brand); color:var(--brand-ink); font-size:12px; font-weight:600;
          border-radius:7px; padding:6px 8px; height:28px; display:flex; align-items:center;
          white-space:nowrap; text-decoration:none; transition:opacity .3s ease,visibility .3s ease; }
.vc-assignee { display:flex; align-items:center; gap:6px; font-size:10px; line-height:12px;
               color:var(--grey-s5); white-space:nowrap; }
.vc-avatar { width:20px; height:20px; border-radius:50%; display:flex; align-items:center;
             justify-content:center; color:#fff; font-size:8px; font-weight:700; flex:0 0 auto; }
.vc-due { font-size:10px; line-height:12px; color:var(--grey-s5); white-space:nowrap; }
.vc-due[data-late] { color:var(--warning-s5); }
.vc-sep { width:1px; height:16px; background:var(--grey-s2); }
.vc-comment-count {
  min-width:20px; height:20px; display:flex; align-items:center; justify-content:center;
  border-radius:10px; background:#eaf4ff; color:var(--brand); font-size:9px; font-weight:700;
}
.vc-new-task { height:40px; display:flex; align-items:center; gap:12px; padding:0 8px;
               color:var(--grey-s4); font-size:14px; line-height:20px; }

/* --- welcome page: a scrollable stack of independently animatable blocks --- */
.vc-screen[data-screen="space-welcome"] { background:#f6f6f6; }
.vc-screen[data-screen="space-welcome"] .vc-topbar {
  position:absolute; z-index:50; top:0; right:0; left:0; isolation:isolate;
}
.vc-space-scroll {
  position:absolute; z-index:1; top:56px; right:0; bottom:0; left:0;
  overflow-y:auto; overflow-x:hidden; scrollbar-width:none;
}
.vc-space-scroll::-webkit-scrollbar { display:none; }
.vc-page-rail {
  position:absolute; z-index:5; top:72px; left:16px; width:24px; min-height:52px;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:4px;
  padding:6px 5px; border-radius:6px; background:#fff;
  box-shadow:0 2px 6px rgba(49,51,58,.08);
}
.vc-page-rail a {
  width:14px; height:9px; display:flex; align-items:center; justify-content:center;
  border-radius:3px; text-decoration:none;
}
.vc-page-rail a span { width:10px; height:2px; border-radius:999px; background:#c9ccd4; }
.vc-page-rail a[data-active] { background:#eaf4ff; }
.vc-page-rail a[data-active] span { background:var(--brand); }

.vc-welcome-hero {
  width:944px; height:241.6px; margin:48px auto 0; padding-top:32px; text-align:center;
}
.vc-welcome-logo {
  display:block; width:80px; height:80px; margin:0 auto; border-radius:14px; object-fit:cover;
}
.vc-welcome-hero h1 {
  width:900px; margin:20px auto 0; color:var(--grey-s6);
  font-size:32px; font-weight:800; line-height:49.6px; white-space:nowrap;
}
.vc-welcome-hero p {
  margin:5px 0 0; color:var(--grey-s6); font-size:16px; line-height:22px;
}
.vc-welcome-stack { position:relative; width:100%; padding-bottom:48px; }
.vc-welcome-card,
.vc-support-block,
.vc-up-next-block {
  position:relative; width:944px; margin:32px auto 0; padding:40px;
  background:#fff; border-radius:8px;
}
.vc-welcome-card { height:674.8px; }
.vc-welcome-card h2,
.vc-next-task-block h2,
.vc-support-block h2 {
  margin:0; color:var(--grey-s6); font-size:24px; font-weight:800; line-height:36px;
}
.vc-welcome-copy {
  height:36.8px; margin:16px 0 0; color:var(--grey-s6);
  font-size:16px; line-height:24.8px;
}
.vc-welcome-copy strong { color:var(--brand); font-weight:700; }

/* The original page embeds a heavy remote recording. This poster is a tiny,
   layerable DOM reconstruction of that recording's first frame. */
.vc-video-poster {
  position:relative; width:864px; height:486px; margin-top:20px; overflow:hidden;
  background:#8d8e99; border-radius:1px; isolation:isolate;
}
.vc-video-media {
  position:absolute; z-index:3; inset:0; overflow:hidden; background:#101a3c;
  opacity:0; transition:opacity .45s ease; pointer-events:none;
}
.vc-video-media.on { opacity:1; }
.vc-video-media video,
.vc-video-media iframe {
  display:block; width:100%; height:100%; border:0; object-fit:cover;
}
.vc-video-loading {
  position:absolute; z-index:5; inset:0; display:flex; align-items:center; justify-content:center;
  background:rgba(11,16,32,.38); opacity:0; transition:opacity .25s ease; pointer-events:none;
}
.vc-video-loading.on { opacity:1; }
.vc-video-loading span {
  width:36px; height:36px; border:3px solid rgba(255,255,255,.35); border-top-color:#fff;
  border-radius:50%; animation:vc-video-spin .8s linear infinite;
}
@keyframes vc-video-spin { to { transform:rotate(360deg); } }
.vc-video-browser {
  position:absolute; top:20px; left:48px; width:768px; height:466px; overflow:hidden;
  border-radius:8px 8px 0 0; background:#fff;
  box-shadow:0 12px 34px rgba(14,17,29,.24);
}
.vc-video-browserbar {
  height:26px; display:flex; align-items:center; gap:5px; padding:0 10px;
  background:#26272b; color:#9a9ba1; font:8px/1 -apple-system,BlinkMacSystemFont,sans-serif;
}
.vc-video-browserbar i {
  display:block; width:6px; height:6px; border-radius:50%; background:#ff5f57;
}
.vc-video-browserbar i:nth-child(2) { background:#febc2e; }
.vc-video-browserbar i:nth-child(3) { background:#28c840; }
.vc-video-browserbar span {
  width:245px; height:13px; margin-left:101px; padding:3px 8px;
  overflow:hidden; border-radius:4px; background:#3a3b3f; text-align:center; color:#aaa;
}
.vc-video-mini-nav {
  height:29px; display:flex; align-items:center; gap:20px; padding:0 18px;
  background:#fff; color:#242732; font-size:7px; line-height:10px;
}
.vc-video-mini-brand { margin-right:auto; font-size:8px; font-weight:800; letter-spacing:.02em; }
.vc-video-mini-brand b { font-size:11px; color:#0b0c10; }
.vc-video-mini-nav em {
  padding:4px 7px; border-radius:4px; background:#e8e8e9; font-style:normal; font-weight:700;
}
.vc-video-mini-hero {
  height:179px; display:flex; flex-direction:column; align-items:center; padding-top:31px;
  color:#fff; background:
    radial-gradient(circle at 84% 16%,rgba(52,69,116,.55),transparent 27%),
    linear-gradient(145deg,#050713 10%,#11162d 100%);
}
.vc-video-knot {
  width:48px; height:48px; display:flex; align-items:center; justify-content:center;
  margin-bottom:10px; border-radius:3px; background:#050505; font-size:30px; line-height:48px;
}
.vc-video-mini-hero b { font-size:15px; font-weight:800; line-height:21px; }
.vc-video-mini-hero small { margin-top:3px; color:#ced2e2; font-size:8px; line-height:12px; }
.vc-video-mini-card {
  position:absolute; top:193px; left:80px; width:608px; height:248px; padding:25px;
  border-radius:5px 5px 0 0; background:#fff; color:#31333a;
}
.vc-video-mini-card b { display:block; font-size:13px; line-height:18px; }
.vc-video-mini-card span { display:block; margin-top:5px; color:#767880; font-size:8px; }
.vc-video-mini-card i {
  display:block; width:558px; height:138px; margin-top:18px; border-radius:3px;
  background:linear-gradient(135deg,#dce9f5,#f7eee5 55%,#dce2ef);
}
.vc-video-speaker {
  position:absolute; z-index:6; right:30px; bottom:24px; width:120px; height:120px;
  padding:5px; overflow:hidden; border:2px solid rgba(255,255,255,.92); border-radius:50%;
  background:#fff; box-shadow:0 8px 22px rgba(21,29,57,.28);
}
.vc-video-speaker img { width:100%; height:100%; border-radius:50%; object-fit:cover; transform:scale(1.7); }
.vc-video-play {
  position:absolute; z-index:6; top:50%; left:50%; width:66px; height:66px;
  display:flex; align-items:center; justify-content:center; padding:0;
  transform:translate(-50%,-50%); border:3px solid rgba(255,255,255,.92); border-radius:50%;
  background:rgba(17,18,25,.48); box-shadow:0 3px 16px rgba(0,0,0,.28); cursor:pointer;
  transition:opacity .3s ease;
}
.vc-video-media.on ~ .vc-video-play { opacity:0; pointer-events:none; }
.vc-video-play span {
  width:0; height:0; margin-left:5px;
  border-top:10px solid transparent; border-bottom:10px solid transparent; border-left:16px solid #fff;
}

.vc-next-task-block {
  width:944px; height:278px; margin:32px auto 0; padding:40px;
  border-radius:8px; background:var(--brand); color:#fff;
}
.vc-next-task-block h2 { color:#fff; }
.vc-next-task-head { height:36px; display:flex; align-items:center; }
.vc-next-task-head a {
  margin-left:auto; display:flex; align-items:center; gap:8px; color:#fff;
  font-size:12px; font-weight:700; line-height:16px; text-decoration:none;
}
.vc-next-task-card {
  height:142px; margin-top:20px; padding:24px; display:flex; align-items:flex-start;
  border-radius:8px; background:#fff; color:var(--grey-s6);
}
.vc-next-task-check {
  width:28px; height:28px; flex:0 0 28px; display:flex; align-items:center; justify-content:center;
  margin-right:14px; border-radius:7px; background:#eaf4ff; color:var(--brand);
}
.vc-next-task-card b { display:block; font-size:16px; font-weight:700; line-height:22px; }
.vc-next-task-card p {
  margin:4px 0 11px; color:var(--text-grey); font-size:16px; line-height:24.8px;
}
.vc-next-assignee {
  display:flex; align-items:center; gap:7px; color:var(--grey-s5); font-size:10px; line-height:20px;
}
.vc-next-assignee i {
  width:20px; height:20px; display:flex; align-items:center; justify-content:center;
  border:1px solid #bfdbfe; border-radius:50%; background:#eff6fe; color:#3b82f6;
  font-size:8px; font-style:normal; font-weight:700;
}
.vc-next-open {
  margin:8px 0 0 auto; display:flex; align-items:center; gap:6px;
  color:var(--brand); font-size:12px; font-weight:700; text-decoration:none;
}

.vc-support-block { min-height:482px; }
.vc-block-controls {
  position:absolute; top:34px; right:40px; display:flex; align-items:center; gap:6px;
  padding:5px; border:1px solid var(--grey-s2); border-radius:8px; background:#fff;
  box-shadow:var(--shadow-floating); opacity:0; pointer-events:none;
}
.vc-screen[data-editing] .vc-block-controls { opacity:1; pointer-events:auto; }
.vc-block-controls > span { padding:0 6px; color:var(--grey-s5); font-size:10px; font-weight:600; }
.vc-block-controls button {
  height:28px; padding:0 9px; border:0; border-radius:6px; background:transparent;
  color:var(--grey-s5); font-size:10px; font-weight:600;
}
.vc-block-controls button[data-active] { background:var(--primary-s2); color:var(--primary-s5); }
.vc-team-grid {
  display:grid; grid-template-columns:1fr 1fr; gap:28px; margin-top:28px;
  transition:grid-template-columns .48s cubic-bezier(.2,.8,.2,1),gap .48s cubic-bezier(.2,.8,.2,1);
}
.vc-team-card {
  position:relative; min-width:0; min-height:346px; overflow:hidden;
  padding:30px 28px; text-align:center; border:1px solid var(--grey-s2);
  border-radius:8px; background:#fff; box-shadow:0 5px 16px rgba(21,29,57,.08);
  transition:opacity .36s ease,transform .48s ease,padding .48s ease,border-width .48s ease;
  will-change:transform,opacity;
}
.vc-team-remove {
  position:absolute; top:12px; right:12px; width:28px; height:28px;
  display:flex; align-items:center; justify-content:center; padding:0;
  border:1px solid var(--grey-s2); border-radius:7px; background:#fff;
  color:var(--grey-s5); font:400 20px/1 Arial,sans-serif;
  box-shadow:0 1px 3px rgba(16,24,40,.08); opacity:0; pointer-events:none;
  transition:opacity .2s ease,background .2s ease;
}
.vc-screen[data-card-editing] .vc-team-remove { opacity:1; pointer-events:auto; }
.vc-screen[data-team-technical-only] .vc-team-remove { opacity:0; }
.vc-team-card img {
  width:96px; height:96px; display:block; margin:0 auto 22px; border-radius:50%; object-fit:cover;
}
.vc-team-card h3 {
  margin:0; color:var(--grey-s6); font-size:16px; font-weight:700; line-height:23px;
}
.vc-team-card > span {
  display:block; margin-top:10px; color:var(--grey-s4); font-size:12px; line-height:18px;
}
.vc-team-card p {
  margin:18px auto 0; color:var(--text-grey); font-size:16px; line-height:24.8px;
}
.vc-screen[data-team-technical-only] .vc-team-card[data-team-card="onboarding"] {
  height:0; min-height:0; padding:0; border-width:0; opacity:0;
  transform:scale(.96) translateX(-14px); pointer-events:none;
}
.vc-screen[data-team-technical-only] .vc-team-grid {
  grid-template-columns:0fr 1fr; gap:0;
}
.vc-screen[data-team-technical-only] .vc-team-card[data-team-card="technical"] {
  transform:none;
}
.vc-up-next-block {
  display:flex; align-items:center; min-height:56px; padding:0; background:transparent;
}
.vc-up-next-block > span {
  display:none;
}
.vc-up-next-block a {
  margin-left:auto; display:flex; align-items:center; gap:10px; color:var(--grey-s6);
  font-size:18px; font-weight:700; text-decoration:none;
}
.vc-space-footer {
  width:944px; height:92px; margin:32px auto 0; display:flex; align-items:center;
  justify-content:space-between; padding:0 40px; color:var(--grey-s4); font-size:11px;
}
.vc-space-footer img { width:90px; height:30px; object-fit:contain; object-position:left center; opacity:.7; }

/* --- standalone data-collection page + automation success state --- */
.vc-screen[data-screen="space-form"] { background:#f6f6f6; }
.vc-screen[data-screen="space-form"] .vc-topbar {
  position:absolute; z-index:50; top:0; right:0; left:0; isolation:isolate;
}
.vc-screen[data-screen="space-welcome"]:not([data-pages-unlocked]) [data-unlock-page],
.vc-screen[data-screen="space-form"]:not([data-pages-unlocked]) [data-unlock-page] {
  width:0; padding-right:0; padding-left:0; overflow:hidden; opacity:0;
}
.vc-form-pagehead {
  width:944px; height:120px; margin:48px auto 0; display:flex; align-items:center;
}
.vc-form-pagehead h1 {
  margin:0; color:var(--grey-s6); font-size:32px; font-weight:800; line-height:44px;
}
.vc-form-pagehead p {
  margin:4px 0 0; color:var(--grey-s6); font-size:16px; line-height:22px;
}
.vc-form-pagehead img {
  width:80px; height:80px; margin-left:auto; border-radius:14px; object-fit:cover;
}
.vc-form-card {
  position:relative; width:944px; margin:32px auto 0; padding:40px;
  border-radius:8px; background:#fff;
}
.vc-form-card h2 {
  margin:0; color:var(--grey-s6); font-size:24px; font-weight:800; line-height:36px;
}
.vc-form-intro {
  margin:8px 0 30px; color:var(--grey-s5); font-size:14px; line-height:20px;
}
.vc-form-field { width:420px; display:block; margin-bottom:26px; }
.vc-form-field > span,
.vc-form-contacts h3,
.vc-file-field h3 {
  display:block; margin:0; color:var(--grey-s6); font-size:14px; font-style:normal;
  font-weight:700; line-height:20px;
}
.vc-form-field small,
.vc-contact-head small,
.vc-file-field h3 small {
  margin-left:5px; color:var(--grey-s4); font-size:9px; font-weight:600;
}
.vc-form-field > em {
  display:block; margin:5px 0 10px; color:var(--grey-s5); font-size:12px;
  font-style:normal; line-height:16px;
}
.vc-form-field input,
.vc-contact-row input {
  width:100%; height:44px; padding:0 14px; border:1px solid var(--grey-s2);
  border-radius:8px; outline:0; background:#fff; color:var(--grey-s6);
  font-size:13px; line-height:20px;
}
.vc-form-select {
  width:100%; height:44px; display:flex; align-items:center; justify-content:space-between;
  padding:0 14px; border:1px solid var(--grey-s2); border-radius:8px; background:#fff;
  color:var(--grey-s6); font-size:13px; text-align:left;
}
.vc-form-select b { color:var(--grey-s4); font-size:13px; font-weight:400; }
.vc-form-contacts { margin-top:8px; }
.vc-contact-table {
  margin-top:12px; overflow:hidden; border:1px solid var(--grey-s2); border-radius:8px;
}
.vc-contact-row {
  min-height:52px; display:grid; grid-template-columns:1.1fr 1fr 1fr 36px;
  align-items:center; gap:8px; padding:8px;
}
.vc-contact-row + .vc-contact-row { border-top:1px solid var(--grey-s2); }
.vc-contact-head {
  min-height:40px; padding:0 14px; background:#fafafa; color:var(--grey-s6);
  font-size:10px; font-weight:600; line-height:14px;
}
.vc-contact-row input { height:36px; border-radius:6px; font-size:13px; }
.vc-contact-row input[data-form-active] {
  border-color:var(--brand); box-shadow:0 0 0 3px rgba(0,125,252,.12);
}
.vc-contact-row > button {
  height:32px; border:0; background:transparent; color:var(--grey-s4); font-size:15px;
}
.vc-add-row {
  height:36px; margin-top:12px; padding:0 12px; border:0; border-radius:7px;
  background:#e2f1ff; color:#1878d1; font-size:11px; font-weight:700;
}
.vc-file-field { margin-top:30px; }
.vc-file-field > p {
  margin:5px 0 12px; color:var(--grey-s5); font-size:12px; line-height:16px;
}
.vc-file-drop {
  width:100%; height:190px; display:flex; flex-direction:column; align-items:center;
  justify-content:center; border:1px dashed var(--grey-s3); border-radius:8px;
  background:#fff; color:#68b7ef;
  transition:border-color .2s ease,background .2s ease,box-shadow .2s ease,transform .2s ease;
}
.vc-screen[data-file-dragging] .vc-file-drop {
  border-color:var(--brand); background:#f4f9ff;
  box-shadow:0 0 0 4px rgba(0,125,252,.09); transform:scale(.995);
}
.vc-file-drop b { margin-top:8px; color:var(--grey-s6); font-size:11px; line-height:16px; }
.vc-file-drop b span { color:var(--brand); }
.vc-file-drop small { margin-top:13px; color:var(--grey-s4); font-size:10px; }
.vc-uploaded-file {
  height:64px; display:none; align-items:center; margin-top:10px; padding:10px 12px;
  border:1px solid #c2eee1; border-radius:8px; background:#f2fdfa;
}
.vc-screen[data-file-uploaded] .vc-uploaded-file { display:flex; }
.vc-uploaded-file > span {
  width:36px; height:36px; display:flex; align-items:center; justify-content:center;
  border-radius:6px; background:#fff; color:#f45359; font-size:9px; font-weight:800;
}
.vc-uploaded-file > div { margin-left:10px; }
.vc-uploaded-file b { display:block; color:var(--grey-s6); font-size:11px; line-height:15px; }
.vc-uploaded-file small { display:block; color:var(--grey-s5); font-size:9px; line-height:13px; }
.vc-uploaded-file i { margin-left:auto; color:#0eab7c; font-style:normal; }
.vc-submit-form {
  height:38px; display:flex; align-items:center; gap:7px; margin-top:24px; padding:0 14px;
  border:0; border-radius:7px; background:var(--brand); color:#fff;
  font-size:12px; font-weight:700;
}
.vc-form-nav {
  width:944px; height:142px; margin:32px auto 0; display:flex; align-items:center;
  justify-content:space-between; padding:0 20px;
}
.vc-form-nav a { color:var(--grey-s6); text-decoration:none; }
.vc-form-nav a:last-child { text-align:right; }
.vc-form-nav span {
  display:block; margin-bottom:4px; color:var(--grey-s4); font-size:11px; font-weight:600;
  text-transform:uppercase; letter-spacing:.04em;
}
.vc-form-nav b { font-size:13px; font-weight:700; }
.vc-form-success-layer {
  position:absolute; z-index:70; inset:0; display:flex; align-items:center; justify-content:center;
  background:rgba(21,29,57,.42); opacity:0; visibility:hidden; pointer-events:none;
  transition:opacity .28s ease,visibility 0s linear .28s;
}
.vc-screen[data-form-success] .vc-form-success-layer {
  opacity:1; visibility:visible; pointer-events:auto;
  transition-delay:0s;
}
.vc-form-success {
  width:550px; padding:42px 48px 46px; text-align:center;
  border-radius:12px; background:#fff; box-shadow:0 24px 60px rgba(21,29,57,.25);
  opacity:0; transform:translateY(14px) scale(.97);
  transition:opacity .32s ease,transform .4s cubic-bezier(.2,.8,.2,1);
}
.vc-screen[data-form-success] .vc-form-success {
  opacity:1; transform:translateY(0) scale(1);
}
.vc-success-check {
  width:66px; height:66px; display:flex; align-items:center; justify-content:center;
  margin:0 auto 22px; border-radius:50%; background:#e7faf3; color:#0eab7c;
}
.vc-form-success h2 {
  margin:0; color:var(--grey-s6); font-size:26px; font-weight:800; line-height:36px;
}
.vc-form-success p {
  margin:10px auto 22px; color:var(--grey-s5); font-size:14px; line-height:21px;
}
.vc-form-success > a {
  height:40px; display:inline-flex; align-items:center; gap:8px; padding:0 16px;
  border-radius:7px; background:var(--brand); color:#fff; font-size:12px;
  font-weight:700; text-decoration:none;
}

/* --- task detail modal with customer communication --- */
.vc-screen[data-screen="space-task"] { background:#f6f6f6; }
.vc-task-bg-page { position:absolute; z-index:1; inset:56px 0 0; }
.vc-task-bg-head {
  width:944px; height:198px; margin:0 auto; padding-top:64px; display:flex; align-items:flex-start;
}
.vc-task-bg-head h1 {
  margin:0; color:var(--grey-s6); font-size:32px; font-weight:800; line-height:44px;
}
.vc-task-bg-head p { margin:4px 0 0; color:var(--grey-s6); font-size:16px; line-height:22px; }
.vc-task-bg-head img { width:80px; height:80px; margin-left:auto; border-radius:14px; }
.vc-task-bg-card {
  width:944px; min-height:480px; margin:0 auto; padding:40px; border-radius:8px; background:#fff;
}
.vc-task-bg-card h2 { margin:0; font-size:24px; line-height:36px; }
.vc-task-bg-card > p { margin:8px 0 24px; color:var(--grey-s5); font-size:14px; }
.vc-task-bg-progress { height:48px; display:flex; align-items:center; gap:10px; padding:0 14px; background:#f6f8fc; }
.vc-task-bg-progress > i { height:6px; flex:1; border-radius:99px; background:linear-gradient(90deg,#70d8b9 50%,#e0e2e7 50%); }
.vc-task-bg-progress span { font-size:11px; color:var(--grey-s5); }
.vc-task-bg-row {
  height:48px; display:flex; align-items:center; gap:10px; margin-top:5px; padding:0 12px;
  border-radius:7px; color:var(--grey-s5); font-size:13px;
}
.vc-task-bg-row > span { width:16px; height:16px; border:1px solid var(--grey-s3); border-radius:4px; text-align:center; }
.vc-task-bg-row[data-selected] { background:#f3f5f8; color:var(--grey-s6); }
.vc-task-backdrop {
  position:absolute; z-index:40; inset:0; background:rgba(28,31,40,.43); backdrop-filter:blur(.5px);
}
.vc-task-modal {
  position:absolute; z-index:50; top:52px; left:230px; width:980px; height:680px;
  overflow:hidden; border-radius:9px; background:#fff; box-shadow:0 18px 54px rgba(21,29,57,.28);
}
.vc-task-modal-head {
  height:62px; display:flex; align-items:center; padding:0 24px;
  border-bottom:1px solid var(--grey-s2); background:#fff;
}
.vc-modal-check {
  width:18px; height:18px; flex:0 0 18px; display:flex; align-items:center;
  justify-content:center; padding:0; border:1px solid var(--grey-s3);
  border-radius:5px; background:#fff; color:#fff;
}
.vc-modal-check svg { opacity:0; transform:scale(.7); transition:opacity .18s ease,transform .22s ease; }
.vc-screen[data-task-completed] .vc-modal-check {
  border-color:var(--success-s5); background:var(--success-s5);
}
.vc-screen[data-task-completed] .vc-modal-check svg { opacity:1; transform:scale(1); }
.vc-task-crumb { margin-left:13px; color:var(--grey-s4); font-size:14px; line-height:20px; }
.vc-task-crumb b { margin-left:8px; font-size:15px; font-weight:400; }
.vc-task-modal-head h1 {
  margin:0 0 0 9px; color:var(--grey-s6); font-size:17px; font-weight:700; line-height:23px;
}
.vc-task-modal-actions {
  margin-left:auto; color:var(--grey-s5); font-size:14px; line-height:20px;
}
.vc-task-modal-actions b { color:var(--grey-s5); font-size:10px; font-weight:600; }
.vc-task-modal-head > a { display:flex; margin-left:22px; color:var(--grey-s5); }
.vc-task-modal-body { height:618px; display:grid; grid-template-columns:63% 37%; }
.vc-task-detail-pane { overflow:hidden; padding:24px 24px 28px; background:#fff; }
.vc-task-properties { margin:0; }
.vc-task-properties > div {
  min-height:48px; display:grid; grid-template-columns:122px 1fr; align-items:center;
}
.vc-task-properties dt { color:var(--grey-s5); font-size:14px; }
.vc-task-properties dd { margin:0; display:flex; align-items:center; gap:8px; }
.vc-property-add,
.vc-property-edit {
  height:30px; padding:0 9px; border:0; border-radius:6px; background:#eaf4ff;
  color:#1878d1; font-size:13px;
}
.vc-property-person,
.vc-property-pill {
  height:30px; display:inline-flex; align-items:center; gap:7px; padding:0 9px;
  border-radius:6px; background:#f3f5f8; color:var(--grey-s5); font-size:13px;
}
.vc-property-person i {
  width:22px; height:22px; display:flex; align-items:center; justify-content:center;
  border:1px solid #bfdbfe; border-radius:50%; background:#eff6fe; color:#3b82f6;
  font-size:8px; font-style:normal; font-weight:700;
}
.vc-property-person b { color:var(--grey-s4); font-size:12px; font-weight:400; }
.vc-property-action {
  height:30px; display:flex; align-items:center; padding:0 10px; border-radius:6px;
  background:var(--brand); color:#fff; font-size:13px; font-weight:600;
}
.vc-task-description,
.vc-task-attachments { margin-top:26px; }
.vc-task-description h2,
.vc-task-attachments h2 {
  margin:0 0 10px; color:var(--grey-s5); font-size:14px; font-weight:600; line-height:20px;
}
.vc-task-description > div {
  min-height:210px; padding:18px 20px; border:1px solid var(--grey-s2);
  border-radius:7px; color:var(--grey-s6); font-size:15px; line-height:24px;
}
.vc-task-description p { margin:0 0 18px; }
.vc-task-description ul { margin:0; padding-left:22px; }
.vc-task-attachments > button {
  height:30px; padding:0 10px; border:0; border-radius:6px; background:#eaf4ff;
  color:#1878d1; font-size:13px; font-weight:600;
}
.vc-task-file {
  height:58px; display:flex; align-items:center; margin-top:10px; padding:9px 10px;
  border:1px solid var(--grey-s2); border-radius:7px;
}
.vc-task-file > span {
  width:36px; height:36px; display:flex; align-items:center; justify-content:center;
  border-radius:6px; background:#fff1f2; color:#f45359;
}
.vc-task-file > div { margin-left:10px; }
.vc-task-file b { display:block; font-size:13px; line-height:17px; }
.vc-task-file small { display:block; color:var(--grey-s4); font-size:10px; line-height:14px; }
.vc-task-file > i { margin-left:auto; color:var(--grey-s4); font-style:normal; }
.vc-task-chat-pane {
  position:relative; display:flex; flex-direction:column; padding:20px 16px 16px;
  border-left:1px solid var(--grey-s2); background:#f3f5f8;
}
.vc-comment-list { min-height:0; flex:1; overflow:hidden; }
.vc-comment {
  margin-bottom:12px; padding:14px 16px; border-radius:8px; background:#fff;
  box-shadow:0 1px 2px rgba(21,29,57,.05);
  transition:opacity .3s ease,transform .38s cubic-bezier(.2,.8,.2,1);
}
.vc-screen[data-task-animation] .vc-comment {
  opacity:0; transform:translateY(10px) scale(.985);
}
.vc-screen[data-task-animation][data-question-sent] .vc-comment[data-author="customer"],
.vc-screen[data-task-animation][data-reply-arrived] .vc-comment[data-new-reply] {
  opacity:1; transform:translateY(0) scale(1);
}
.vc-ai-loading { display:none; }
.vc-screen[data-task-animation][data-ai-loading] .vc-ai-loading {
  display:block; opacity:1; transform:translateY(0) scale(1);
}
.vc-ai-loading .vc-comment-meta time { display:none; }
.vc-ai-thinking {
  display:flex; align-items:center; gap:8px; margin:10px 0 0;
  color:var(--grey-s5); font-size:12px; line-height:18px;
}
.vc-ai-dots { display:inline-flex; align-items:center; gap:4px; }
.vc-ai-dots i {
  width:5px; height:5px; border-radius:50%; background:var(--primary-s5);
  animation:vc-ai-dot 1s ease-in-out infinite;
}
.vc-ai-dots i:nth-child(2) { animation-delay:.14s; }
.vc-ai-dots i:nth-child(3) { animation-delay:.28s; }
@keyframes vc-ai-dot {
  0%,60%,100% { opacity:.28; transform:translateY(0); }
  30% { opacity:1; transform:translateY(-3px); }
}
.vc-comment-meta { display:flex; align-items:center; gap:8px; }
.vc-comment-avatar {
  width:26px; height:26px; display:flex; align-items:center; justify-content:center;
  border-radius:50%; color:#fff; font-size:9px; font-weight:700;
}
.vc-comment-avatar.customer { background:#0eab7c; }
.vc-comment-avatar.owner { background:var(--primary-s5); }
.vc-comment-avatar.assistant {
  background:linear-gradient(135deg,var(--primary-s5),#7c3aed);
  font-size:14px;
}
.vc-comment-meta b { color:var(--grey-s6); font-size:13px; line-height:18px; }
.vc-ai-badge {
  height:18px; display:inline-flex; align-items:center; padding:0 6px;
  border-radius:5px; background:var(--primary-s2); color:var(--primary-s5);
  font-size:9px; font-weight:700; line-height:12px;
}
.vc-comment-meta time { margin-left:auto; color:var(--grey-s4); font-size:10px; }
.vc-comment > p { margin:10px 0 0; color:var(--grey-s6); font-size:14px; line-height:21px; }
.vc-comment-file {
  height:50px; display:flex; align-items:center; margin-top:12px; padding:7px 9px;
  border:1px solid var(--grey-s2); border-radius:6px; color:var(--grey-s6); text-decoration:none;
}
.vc-comment-file > span {
  width:32px; height:32px; display:flex; align-items:center; justify-content:center;
  border-radius:5px; background:#fff1f2; color:#f45359; font-size:8px; font-weight:800;
}
.vc-comment-file b { margin-left:8px; font-size:12px; }
.vc-comment-file small { margin-left:auto; color:var(--grey-s4); font-size:9px; }
.vc-comment-composer {
  min-height:116px; padding:10px 12px; border:1px solid var(--grey-s2);
  border-radius:7px; background:#fff;
}
.vc-comment-tools { height:22px; display:flex; align-items:center; gap:14px; color:var(--grey-s5); font-size:12px; }
.vc-comment-tools i { font-family:serif; }
.vc-comment-input {
  height:48px; padding-top:9px; color:var(--grey-s4); font-size:13px; outline:0;
}
.vc-screen[data-comment-typing] .vc-comment-input { color:var(--grey-s6); }
.vc-screen[data-comment-typing] .vc-comment-composer {
  border-color:var(--brand); box-shadow:0 0 0 3px rgba(0,125,252,.1);
}
.vc-comment-foot { display:flex; align-items:center; color:var(--grey-s5); font-size:9px; }
.vc-comment-foot button {
  width:30px; height:30px; display:flex; align-items:center; justify-content:center;
  margin-left:auto; padding:0; border:0; border-radius:6px; background:#e0e2e7;
  color:#9fa2ab;
}
.vc-screen[data-comment-typing] .vc-comment-foot button {
  background:var(--brand); color:#fff;
}

/* ==========================================================================
   CURSORS – one per participant, so the Space reads as shared
   ========================================================================== */

.vc-cursors { position:absolute; inset:0; z-index:20; pointer-events:none; }
.vc-cursor { position:absolute; top:0; left:0; display:flex; align-items:flex-start; gap:0;
             opacity:0; will-change:transform,opacity; }
.vc-screen[data-show-cursors] .vc-cursor { opacity:1; }
.vc-cursor svg { display:block; filter:drop-shadow(0 2px 4px rgba(21,29,57,.3)); }
.vc-cursor .name { margin:14px 0 0 -4px; font-size:11px; font-weight:600; color:#fff;
                   border-radius:5px; padding:2px 7px; white-space:nowrap; }
.vc-cursor[data-who="you"] .name { background:var(--primary-s5); }
.vc-cursor[data-who="customer"] .name { background:var(--success-s6); }
.vc-cursor[data-who="customer2"] .name { background:#7C3AED; }


/* ==========================================================================
   DASHBOARD – the redesigned Spaces list
   ========================================================================== */

.vc-screen[data-screen="dashboard"] { background:var(--app-bg); display:flex; }

.vc-side { flex:0 0 280px; display:flex; flex-direction:column; min-width:0; }
.vc-logo { height:60px; display:flex; align-items:center; padding:0 20px; }
.vc-logo svg { width:125px; height:22px; display:block; }
.vc-side-actions { display:flex; gap:8px; height:36px; padding:0 20px; margin-bottom:16px; }
.vc-newspace { flex:0 0 111px; display:flex; align-items:center; justify-content:center; gap:8px;
               height:36px; border-radius:8px; background:#383f5b; color:#fff;
               font-size:12px; line-height:16px; font-weight:600; box-shadow:var(--shadow-box); }
.vc-searchbtn { flex:0 0 36px; height:36px; border-radius:8px; background:#fff; color:var(--grey-s5);
                display:flex; align-items:center; justify-content:center; }
.vc-navgroup { display:flex; align-items:center; font-size:12px; font-weight:600;
               line-height:16px; height:16px; color:rgba(29,33,45,.6);
               margin:0 20px 8px; padding:0 12px; }
.vc-navitem + .vc-navgroup { margin-top:23.5px; margin-bottom:10.5px; }
.vc-navgroup .chev { margin-left:auto; font-size:9px; opacity:.7; }
.vc-navitem { display:flex; align-items:center; gap:8px; height:36px; margin:0 20px 2px;
              padding:8px 12px; border-radius:4px; font-size:14px; line-height:20px;
              font-weight:600; color:rgba(24,26,32,.9); }
.vc-navitem svg { flex:0 0 18px; color:var(--grey-s5); }
.vc-navitem[data-active] { background:#fff; font-weight:600; box-shadow:var(--shadow-box); }
.vc-navitem[data-active] svg { color:var(--primary-s5); }
.vc-navitem .count { margin-left:auto; font-size:12px; color:var(--grey-s5); }
.vc-side-foot { margin-top:auto; margin-bottom:16px; }
.vc-side-foot .vc-navitem { margin-bottom:0; }
.vc-user { height:56px; display:flex; align-items:center; gap:12px; padding:8px 20px 12px 32px; }
.vc-user-photo { width:22px; height:22px; border-radius:50%; object-fit:cover; flex:0 0 auto; }
.vc-user b { font-size:14px; font-weight:600; line-height:20px; display:block; color:#1d212e; }
.vc-user span { font-size:12px; font-weight:500; color:#383f5b; line-height:16px; display:block; }

.vc-panel { flex:1; min-width:0; margin:16px 16px 16px 0; background:#fff; border-radius:8px;
            box-shadow:0 4px 6px -1px rgba(0,0,0,.10),0 2px 4px -2px rgba(0,0,0,.10);
            overflow:hidden; display:flex; flex-direction:column; padding:16px 24px 0; }
.vc-panel-head { height:36px; display:flex; align-items:center; margin-bottom:8px; }
.vc-panel-head h1 { margin:0; font-size:20px; font-weight:600; line-height:28px; }
.vc-btn-primary { margin-left:auto; display:flex; align-items:center; gap:7px; height:36px;
                  width:111px; justify-content:center; padding:0 12px; border-radius:8px;
                  background:var(--primary-s5); color:#fff;
                  font-size:12px; line-height:16px; font-weight:600; box-shadow:var(--shadow-box); }
.vc-views { height:36px; display:flex; align-items:center; gap:20px; border-bottom:1px solid var(--grey-s2);
            margin:0 -24px 20px; padding:0 24px; }
.vc-view { display:flex; align-items:center; gap:6px; font-size:13px; color:var(--grey-s5);
           height:36px; padding:0; border-bottom:2px solid transparent; margin-bottom:-1px; }
.vc-view[data-active] { color:var(--primary-s5); font-weight:600; border-bottom-color:var(--primary-s5); }
.vc-toolbar { height:36px; display:flex; align-items:center; gap:8px; margin-bottom:12px; }
.vc-tool { display:flex; align-items:center; gap:8px; height:36px; padding:0 12px;
           border:1px solid var(--grey-s2); border-radius:8px; box-shadow:0 1px 2px rgba(0,0,0,.05);
           font-size:12px; line-height:16px; font-weight:600; color:var(--grey-s5); white-space:nowrap; }
.vc-tool.search { flex:0 0 200px; color:var(--grey-s4); }
.vc-toolbar .vc-tool:nth-child(2) { flex:0 0 136px; }
.vc-toolbar .vc-tool:nth-child(3) { flex:0 0 112px; }
.vc-toolbar .vc-tool:nth-child(4) { flex:0 0 124.31px; }
.vc-tool .chip { background:var(--primary-s2); color:var(--primary-s5); font-weight:600;
                 border-radius:5px; padding:1px 7px; font-size:12px; }
.vc-tool.vc-tool-plain { border-color:transparent; box-shadow:none; padding-left:6px; }

/* --- animation-ready new Space flow --- */
.vc-create-space-layer {
  position:absolute; z-index:80; inset:0; display:none; align-items:center; justify-content:center;
  background:rgba(24,26,32,.42); backdrop-filter:blur(1px);
}
.vc-screen[data-create-space-open] .vc-create-space-layer { display:flex; }
.vc-screen[data-dashboard-state="before-create"] [data-customer="nvidia"] { display:none; }
.vc-create-space-modal {
  width:520px; overflow:hidden; border-radius:10px; background:#fff;
  box-shadow:0 24px 64px rgba(21,29,57,.28);
}
.vc-create-space-modal > header {
  min-height:82px; display:flex; align-items:flex-start; padding:20px 24px;
  border-bottom:1px solid var(--grey-s2);
}
.vc-create-space-modal > header h2 {
  margin:0; color:var(--grey-s6); font-size:18px; font-weight:600; line-height:26px;
}
.vc-create-space-modal > header p {
  margin:3px 0 0; color:var(--grey-s5); font-size:12px; line-height:18px;
}
.vc-create-space-modal > header button {
  width:28px; height:28px; margin:-2px -4px 0 auto; padding:0; border:0;
  border-radius:6px; background:transparent; color:var(--grey-s5);
  font-size:22px; font-weight:300; line-height:26px;
}
.vc-create-space-body { padding:24px; }
.vc-create-field { display:block; }
.vc-create-field + .vc-create-field { margin-top:20px; }
.vc-create-field > span {
  display:block; margin-bottom:8px; color:var(--grey-s6);
  font-size:12px; font-weight:600; line-height:16px;
}
.vc-create-customer {
  position:relative; display:block; margin:0!important;
}
.vc-create-field input {
  width:100%; height:44px; padding:0 126px 0 13px; border:1px solid var(--grey-s2);
  border-radius:8px; outline:0; background:#fff; color:var(--grey-s6);
  font-size:14px; font-weight:400; line-height:20px;
  box-shadow:0 1px 2px rgba(16,24,40,.03);
}
.vc-create-field input::placeholder {
  color:var(--grey-s4); opacity:0; transition:opacity .16s ease;
}
.vc-create-field input:focus {
  border-color:var(--primary-s4); box-shadow:0 0 0 3px var(--primary-s2);
}
.vc-create-customer-value {
  position:absolute; top:12px; left:13px; color:var(--grey-s6);
  font-size:14px; font-weight:500; line-height:20px; pointer-events:none;
}
.vc-create-customer .vc-crm-source {
  position:absolute; top:9px; right:9px; height:26px; display:flex; align-items:center; gap:5px;
  margin:0; padding:0 8px; border-radius:6px; background:#fff4f0; color:#d85b3f;
  font-size:10px; font-weight:600; line-height:14px; white-space:nowrap;
}
.vc-crm-source svg { flex:0 0 14px; }
.vc-create-template {
  position:relative; width:100%; height:58px; display:flex; align-items:center; padding:0 13px;
  border:1px solid var(--grey-s2); border-radius:8px; background:#fff;
  color:var(--grey-s6); text-align:left; box-shadow:0 1px 2px rgba(16,24,40,.03);
}
.vc-create-template-value {
  display:flex; align-items:center; min-width:0;
}
.vc-create-template-value > i {
  width:30px; height:30px; display:flex; align-items:center; justify-content:center;
  margin-right:10px; border-radius:6px; background:var(--primary-s2);
  color:var(--primary-s5); font-size:14px; font-style:normal;
}
.vc-create-template-value > span { min-width:0; }
.vc-create-template b { display:block; font-size:13px; font-weight:600; line-height:18px; }
.vc-create-template small {
  display:block; margin-top:1px; color:var(--grey-s5); font-size:10px; line-height:14px;
}
.vc-create-template-placeholder {
  position:absolute; left:13px; color:var(--grey-s4); opacity:0;
  font-size:14px; font-weight:400; line-height:20px;
}
.vc-create-template em {
  margin-left:auto; color:var(--grey-s4); font-size:13px; font-style:normal;
}
.vc-screen[data-create-animation] .vc-create-customer-value,
.vc-screen[data-create-animation] .vc-create-customer .vc-crm-source,
.vc-screen[data-create-animation] .vc-create-template-value {
  opacity:0; transform:translateY(3px) scale(.97);
  transition:opacity .22s ease,transform .28s cubic-bezier(.2,.8,.2,1);
}
.vc-screen[data-create-animation]:not([data-customer-selected]) .vc-create-field input::placeholder,
.vc-screen[data-create-animation]:not([data-template-selected]) .vc-create-template-placeholder {
  opacity:1;
}
.vc-screen[data-create-animation][data-customer-selected] .vc-create-field input::placeholder {
  opacity:0;
}
.vc-screen[data-create-animation][data-customer-selected] .vc-create-customer-value,
.vc-screen[data-create-animation][data-customer-selected] .vc-create-customer .vc-crm-source,
.vc-screen[data-create-animation][data-template-selected] .vc-create-template-value {
  opacity:1; transform:translateY(0) scale(1);
}
.vc-screen[data-create-animation][data-template-selected] .vc-create-template-placeholder {
  opacity:0;
}
.vc-create-template-placeholder {
  transition:opacity .14s ease;
}
.vc-create-space-modal > footer {
  height:72px; display:flex; align-items:center; justify-content:flex-end; gap:8px;
  padding:0 24px; border-top:1px solid var(--grey-s2); background:#fafbfc;
}
.vc-create-space-modal > footer button {
  height:36px; padding:0 14px; border-radius:8px; font-size:12px;
  font-weight:600; line-height:16px;
}
.vc-create-cancel {
  border:1px solid var(--grey-s2); background:#fff; color:var(--grey-s5);
  box-shadow:0 1px 2px rgba(16,24,40,.03);
}
.vc-create-submit {
  border:1px solid var(--primary-s5); background:var(--primary-s5); color:#fff;
  box-shadow:var(--shadow-box);
}

/* --- Kanban dashboard from the new dashboard design --- */
.vc-kanban {
  min-height:0; flex:1; display:grid; grid-template-columns:repeat(4,minmax(248px,1fr));
  gap:12px; overflow:hidden;
}
.vc-kanban-column { min-width:0; display:flex; flex-direction:column; }
.vc-kanban-column h2 {
  height:32px; margin:0 0 4px; display:flex; align-items:center; gap:5px;
  color:#20232d; font-size:16px; font-weight:600; line-height:22px;
}
.vc-kanban-column h2 span { color:#8d92a3; font-weight:400; }
.vc-kanban-lane {
  min-height:0; flex:1; padding:8px; overflow:hidden; border-radius:8px 8px 0 0;
  background:#f1f4fb;
}
.vc-kanban-card {
  position:relative; min-height:146px; margin-bottom:8px; padding:11px;
  border:0; border-radius:8px; background:#fff;
  box-shadow:0 1px 3px 0 rgba(16,24,40,.10),0 1px 2px 0 rgba(16,24,40,.06);
  color:#383f5b; will-change:transform,opacity;
}
.vc-kanban-card:hover,
.vc-kanban-card-focus {
  box-shadow:
    0 1px 3px 0 rgba(16,24,40,.10),
    0 1px 2px 0 rgba(16,24,40,.06),
    0 0 0 1px rgba(42,76,250,.08);
}
.vc-kanban-card-floating {
  position:absolute!important; z-index:95; margin:0!important; pointer-events:none;
  will-change:transform;
}
.vc-kanban-card-final {
  animation:vc-kanban-card-land .42s cubic-bezier(.2,.8,.2,1);
}
@keyframes vc-kanban-card-land {
  0% { transform:scale(.97); box-shadow:0 12px 28px rgba(42,76,250,.18); }
  100% { transform:scale(1); }
}
.vc-kc-title { height:26px; display:flex; align-items:center; gap:8px; margin-bottom:5px; }
.vc-kc-logo {
  width:26px; height:26px; flex:0 0 26px; display:flex; align-items:center; justify-content:center;
  overflow:hidden; border:1px solid #e0e2e7; border-radius:5px; color:#fff;
  font-size:10px; font-weight:600;
}
.vc-kc-logo img { width:100%; height:100%; object-fit:cover; }
.vc-kc-title b {
  min-width:0; overflow:hidden; color:#20232d; font-size:14px; font-weight:500;
  line-height:19px; text-overflow:ellipsis; white-space:nowrap;
}
.vc-kc-live {
  margin-left:auto; padding:2px 5px; border-radius:5px; background:#e7faf3;
  color:#0eab7c; font-size:8px; font-weight:700; line-height:12px; white-space:nowrap;
}
.vc-kanban-card dl { margin:0; }
.vc-kanban-card dl > div { display:flex; align-items:center; min-height:18px; font-size:11px; line-height:16px; }
.vc-kanban-card dt { width:58px; margin:0; color:#51586f; }
.vc-kanban-card dd { margin:0; color:#383f5b; font-weight:500; }
.vc-kc-status {
  height:16px; display:flex; align-items:center; gap:5px; color:#51586f;
  font-size:11px; line-height:14px;
}
.vc-kc-status i { width:5px; height:5px; border-radius:50%; }
.vc-kc-progress {
  height:20px; display:flex; align-items:center; gap:7px; color:#51586f;
  font-size:11px; line-height:14px;
}
.vc-kc-progress > span { white-space:nowrap; }
.vc-kc-progress em {
  height:6px; flex:1; overflow:hidden; border-radius:999px; background:#e0e4ee; font-style:normal;
}
.vc-kc-progress em i {
  display:block; height:100%; border-radius:inherit; background:#70d8b9;
}
.vc-kc-progress > b { width:27px; color:#8d92a3; font-size:11px; font-weight:500; text-align:right; }
.vc-kanban-complete {
  height:92px; display:flex; flex-direction:column; align-items:center; justify-content:center;
  border:1px dashed #cbd1df; border-radius:8px; color:#9fa5b5; background:rgba(255,255,255,.45);
}
.vc-kanban-complete span {
  width:24px; height:24px; display:flex; align-items:center; justify-content:center;
  margin-bottom:5px; border-radius:50%; background:#e6f8f2; color:#0eab7c; font-size:12px;
}
.vc-kanban-complete b { font-size:10px; line-height:14px; }
.vc-kanban-complete small { font-size:9px; line-height:13px; }
.vc-screen[data-dashboard-view="kanban"] [data-list-view] { display:none; }
.vc-screen[data-dashboard-view="list"] .vc-kanban { display:none; }

.vc-table-scroll { min-width:0; overflow:hidden; }
.vc-table { width:1360px; }
.vc-row { display:grid; grid-template-columns:40px 400px 120px 150px 90px 120px 180px 140px 120px;
          align-items:center; height:60px; border-bottom:1px solid var(--grey-s1);
          font-size:14px; line-height:20px; font-weight:500; }
.vc-row > span { min-width:0; padding:0 8px; }
.vc-row > .vc-cb { padding:0; margin-left:16px; }
.vc-row[data-head] { height:40px; border-bottom-color:var(--grey-s2);
                     font-size:12px; line-height:16px; font-weight:600; color:var(--grey-s5); }
.vc-row[data-head] > span:nth-child(2) { padding-left:16px; }
.vc-cb { width:16px; height:16px; border:1.5px solid var(--grey-s3); border-radius:4px; }
.vc-space-cell { display:flex; align-items:center; gap:10px; min-width:0; padding-left:12px!important; }
.vc-space-logo { width:30px; height:30px; border-radius:5px; display:flex; align-items:center;
                 justify-content:center; overflow:hidden; color:#fff; font-size:12px;
                 font-weight:700; flex:0 0 auto; }
.vc-space-logo img { width:100%; height:100%; object-fit:cover; }
.vc-space-cell b { font-size:14px; font-weight:600; line-height:16px; display:block; }
.vc-space-cell span { font-size:12px; font-weight:500; color:var(--grey-s5); line-height:20px; }
.vc-status { display:inline-flex; align-items:center; gap:7px; border-radius:6px;
             padding:2px 8px; font-size:12px; line-height:16px; font-weight:600; white-space:nowrap; }
.vc-status .dot { width:6px; height:6px; border-radius:50%; background:currentColor; }
.vc-plan-cell { display:flex; align-items:center; gap:10px; }
.vc-plan-cell .vc-track { height:6px; }
.vc-plan-cell .pct { font-size:14px; font-weight:500; color:var(--grey-s4); width:36px;
                     font-variant-numeric:tabular-nums; }
.vc-muted { color:var(--grey-s5); }
.vc-panel-foot { position:relative; display:flex; align-items:center; height:69px; flex:0 0 69px;
                 margin:auto -24px 0; padding:0 64px; border-top:1px solid var(--grey-s2);
                 font-size:12px; line-height:16px; font-weight:600; color:var(--grey-s5); }
.vc-pagination { position:absolute; left:472.9px; display:flex; align-items:center; gap:8px; }
.vc-pagebtn { width:36px; height:36px; border-radius:8px; display:flex; align-items:center;
              justify-content:center; font-size:12.5px; }
.vc-pagebtn[data-active] { background:var(--primary-s2); color:var(--primary-s5); font-weight:600; }
.vc-items-per-page { margin-left:auto; display:flex; align-items:center; gap:8px; }
.vc-items-per-page .select { width:68px; height:36px; display:flex; align-items:center;
                             justify-content:space-between; padding:0 12px; border:1px solid var(--grey-s2);
                             border-radius:8px; box-shadow:0 1px 2px rgba(0,0,0,.05); }


/* ==========================================================================
   INVITE POPOVER – anchored under the share icon in the Space top bar
   --------------------------------------------------------------------------
   Invite-first: the primary action sends the customer an email. Copy-link is
   kept as the secondary route. A popover rather than a centred modal so the
   Space stays visible behind it.

   NOTE: sending the invite by email is ahead of the product as of Jul 2026 -
   today Valuecase gives you the link and you send it yourself. Deliberate call
   for this asset; the feature is planned.

   States: [data-share-open] on .vc-screen  opens it
           [data-sent]   on .vc-share-pop   -> "Invite sent" confirmation
           [data-copied] on .vc-share-pop   -> secondary copy button confirms
   ========================================================================== */

.vc-share-anchor { position:relative; display:flex; }
.vc-share-pop {
  position:absolute; top:34px; right:-8px; width:400px; z-index:40;
  background:#fff; border:1px solid var(--grey-s2); border-radius:12px;
  box-shadow:var(--shadow-floating); padding:20px;
  opacity:0; transform:translateY(-6px) scale(.98); transform-origin:100% 0;
  pointer-events:none; transition:opacity .16s ease, transform .16s ease;
}
.vc-screen[data-share-open] .vc-share-pop { opacity:1; transform:none; pointer-events:auto; }
.vc-share-pop::before {
  content:''; position:absolute; top:-6px; right:22px; width:11px; height:11px;
  background:#fff; border-left:1px solid var(--grey-s2); border-top:1px solid var(--grey-s2);
  transform:rotate(45deg);
}
.vc-share-pop h3 { margin:0; font-size:15px; font-weight:700; line-height:22px; }
.vc-share-pop .sub { margin:4px 0 16px; font-size:12px; line-height:17px; color:var(--grey-s5); }

.vc-invite-label { font-size:11px; font-weight:700; color:var(--grey-s5); margin-bottom:6px; }
.vc-invite-field {
  display:flex; align-items:center; flex-wrap:wrap; gap:6px; min-height:40px;
  border:1px solid var(--grey-s2); border-radius:8px; padding:6px 10px; background:#fff;
}
.vc-invite-chip {
  display:inline-flex; align-items:center; gap:6px; height:26px; padding:0 8px 0 4px;
  background:var(--primary-s1); border:1px solid var(--primary-s3); border-radius:999px;
  font-size:11.5px; font-weight:600; color:var(--primary-s6);
}
.vc-invite-chip .ini { width:18px; height:18px; border-radius:50%; color:#fff;
  font-size:8px; font-weight:700; display:flex; align-items:center; justify-content:center; }
.vc-invite-chip .x { color:var(--primary-s4); font-size:12px; }
.vc-invite-input { font-size:12px; color:var(--grey-s4); }

.vc-invite-send {
  display:flex; align-items:center; justify-content:center; gap:8px;
  width:100%; height:38px; margin-top:12px; border:0; border-radius:8px; cursor:pointer;
  background:var(--brand); color:var(--brand-ink);
  font:600 13px/1 'Open Sans Variable','Open Sans',sans-serif;
}
.vc-share-pop[data-sent] .vc-invite-send { background:var(--success-s6); }
.vc-invite-send .lbl-sent { display:none; }
.vc-share-pop[data-sent] .vc-invite-send .lbl-send { display:none; }
.vc-share-pop[data-sent] .vc-invite-send .lbl-sent { display:inline; }

.vc-invite-note {
  display:flex; align-items:flex-start; gap:7px; margin-top:10px;
  font-size:11.5px; line-height:16px; color:var(--grey-s5);
}
.vc-invite-note svg { flex:0 0 13px; margin-top:2px; color:var(--success-s6); }
.vc-invite-confirm { display:none; }
.vc-share-pop[data-sent] .vc-invite-confirm { display:flex; color:var(--success-s6); font-weight:600; }
.vc-share-pop[data-sent] .vc-invite-note-default { display:none; }

/* secondary: copy the link instead */
.vc-share-or {
  display:flex; align-items:center; gap:10px; margin:16px 0 10px;
  font-size:11px; color:var(--grey-s4);
}
.vc-share-or::before, .vc-share-or::after {
  content:''; flex:1; height:1px; background:var(--grey-s2);
}
.vc-share-field {
  display:flex; align-items:center; gap:8px; height:36px;
  border:1px solid var(--grey-s2); border-radius:8px; padding:0 5px 0 12px; background:var(--grey-s1);
}
.vc-share-link { flex:1; min-width:0; font-size:11.5px; color:var(--grey-s5);
                 white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.vc-share-copy {
  flex:0 0 auto; height:26px; padding:0 10px; border:1px solid var(--grey-s2); border-radius:6px;
  background:#fff; cursor:pointer; color:var(--grey-s6);
  font:600 11.5px/1 'Open Sans Variable','Open Sans',sans-serif; white-space:nowrap;
}
.vc-share-pop[data-copied] .vc-share-copy { color:var(--success-s6); border-color:var(--success-s3); }
.vc-share-copy .lbl-copied { display:none; }
.vc-share-pop[data-copied] .vc-share-copy .lbl-copy { display:none; }
.vc-share-pop[data-copied] .vc-share-copy .lbl-copied { display:inline; }

.vc-share-people { margin-top:16px; padding-top:14px; border-top:1px solid var(--grey-s1); }
.vc-share-people .hd { font-size:11px; font-weight:700; letter-spacing:.02em;
                       text-transform:uppercase; color:var(--grey-s4); margin-bottom:10px; }
.vc-share-person { display:flex; align-items:center; gap:9px; padding:5px 0; }
.vc-share-person .ini { width:26px; height:26px; border-radius:50%; flex:0 0 auto;
  display:flex; align-items:center; justify-content:center; color:#fff; font-size:9px; font-weight:700; }
.vc-share-person b { font-size:12px; font-weight:600; line-height:16px; display:block; }
.vc-share-person span { font-size:11px; color:var(--grey-s5); line-height:15px; }
.vc-share-person .role { margin-left:auto; font-size:11px; color:var(--grey-s5); }