/* Vudio design system — tokens + components (atoms, molecules, organisms).
   Light-only product UI. Neutral shell; brand is graphite black (from the logo tile);
   color lives only in tool hues, status tags and automation node types.
   Fonts: Inter (UI), JetBrains Mono (variables, IDs). */

/* =============== 1. TOKENS =============== */
:root{
  color-scheme:light;

  /* Neutrals — cool grey */
  --n-0:#FFFFFF; --n-25:#FAFAFB; --n-50:#F4F4F6; --n-100:#EEEEF1; --n-150:#E7E7EB;
  --n-200:#DFDFE4; --n-300:#CCCCD3; --n-400:#A3A3AD; --n-500:#7D7D88; --n-600:#5C5C66;
  --n-700:#3F3F47; --n-800:#2A2A30; --n-900:#1D1F23; --n-950:#121214;

  /* Brand — graphite, taken from the logo tile */
  --brand-top:#515151; --brand-bottom:#101010;
  --brand:linear-gradient(180deg,var(--brand-top),var(--brand-bottom));
  --brand-edge:linear-gradient(200deg,#E0E0E0,#353535 70%);   /* logo tile stroke */
  --brand-spark:#D9D9D9;                                       /* logo sparkle */

  /* Tool hues — one per product area */
  --violet:#7C5CFF; --violet-50:#F2EFFF; --violet-700:#5B3FDB;   /* AI Video */
  --blue:#2F7BFF;   --blue-50:#EAF2FF;   --blue-700:#1F5FD1;     /* Single Post */
  --orange:#FF7A1A; --orange-50:#FFF1E6; --orange-700:#C25200;   /* Auto-Post */
  --green:#1FA855;  --green-50:#E8F7EE;  --green-700:#14803F;    /* DM Automation */

  /* Status — tag text colors; fills and edges are mixed from these */
  --st-pending:#D98200; --st-scheduled:#2456E0; --st-success:#119A37; --st-failed:#D02A2A; --st-draft:#3F3F47;

  /* Automation node types */
  --node-trigger:#E5486F; --node-condition:#FF7A1A; --node-message:#1FA855;
  --node-wait:#E0A100;    --node-action:#7C5CFF;    --node-end:#7D7D88;

  /* Channels */
  --ch-ig:#E1306C; --ch-tt:#121214; --ch-yt:#FF0000; --ch-fb:#1877F2; --ch-li:#0A66C2; --ch-x:#121214;

  /* Surface roles */
  --shell:var(--n-100); --panel:var(--n-0); --surface:var(--n-25); --sunken:var(--n-50);
  --line:var(--n-150); --line-2:var(--n-200);
  --ink:var(--n-950); --ink-2:var(--n-600); --ink-3:var(--n-400);

  /* Type */
  --font:"Inter",system-ui,-apple-system,"Segoe UI",sans-serif;
  --mono:"JetBrains Mono",ui-monospace,"SFMono-Regular",Menlo,monospace;
  --t-xs:12px; --t-sm:13px; --t-md:14px; --t-lg:16px; --t-xl:18px; --t-2xl:24px; --t-3xl:32px;

  /* Space (4pt) */
  --s-1:4px; --s-2:8px; --s-3:12px; --s-4:16px; --s-5:20px; --s-6:24px; --s-8:32px; --s-10:40px; --s-14:56px;

  /* Radius */
  --r-xs:6px; --r-sm:8px; --r-md:10px; --r-lg:12px; --r-xl:18px; --r-2xl:22px; --r-3xl:24px; --r-full:999px;

  /* Elevation */
  --e-0:0 0 0 1px var(--line);
  --e-1:0 1px 2px rgba(18,18,20,.04),0 0 0 1px var(--line);
  --e-2:0 1px 2px rgba(18,18,20,.05),0 8px 24px -8px rgba(18,18,20,.10),0 0 0 1px var(--line);
  --e-3:0 0 0 1px var(--line),0 4px 10px rgba(18,18,20,.05),0 24px 48px -12px rgba(18,18,20,.18);
  --e-soft:inset 0 1px 0 #fff,0 0 0 1px rgba(18,18,20,.06),0 8px 20px -6px rgba(18,18,20,.16);

  --focus:0 0 0 3px rgba(47,123,255,.35);
  --ease:cubic-bezier(.2,.7,.2,1);

  /* Layout */
  --sidebar-w:256px; --topbar-h:60px; --content-max:1000px; --section-gap:56px;
}

/* =============== 2. ATOMS =============== */

/* Button */
.v-btn{--h:36px;display:inline-flex;align-items:center;justify-content:center;gap:8px;height:var(--h);padding:0 14px;
  border:0;border-radius:var(--r-md);font:500 var(--t-md)/1 var(--font);white-space:nowrap;cursor:pointer;color:var(--ink);
  transition:transform .12s var(--ease),box-shadow .12s var(--ease),filter .12s var(--ease)}
.v-btn svg{width:16px;height:16px}
.v-btn:focus-visible{outline:none;box-shadow:var(--focus)}
.v-btn:active{transform:translateY(1px)}
.v-btn[disabled]{opacity:.45;pointer-events:none}
.v-btn--sm{--h:30px;padding:0 10px;font-size:var(--t-sm);border-radius:var(--r-sm)}
.v-btn--lg{--h:44px;padding:0 18px;font-size:var(--t-lg);border-radius:var(--r-lg)}
.v-btn--block{width:100%}

/* Primary: dark glass. #1D1F23, white 15%→0 gloss, 1.5px top highlight, 1.5px black ring, 0 4 7 shadow */
.v-btn--primary{color:#fff;text-shadow:0 1px 2px rgba(0,0,0,.4);
  background:linear-gradient(180deg,rgba(255,255,255,.15),rgba(255,255,255,0)),var(--n-900);
  box-shadow:inset 0 1.5px 0 rgba(255,255,255,.15),0 0 0 1.5px #000,0 4px 7px rgba(0,0,0,.2)}
.v-btn--primary:hover{filter:brightness(1.18)}
.v-btn--primary:active{box-shadow:inset 0 1.5px 0 rgba(255,255,255,.1),0 0 0 1.5px #000,0 1px 2px rgba(0,0,0,.2)}
.v-btn--primary:focus-visible{box-shadow:inset 0 1.5px 0 rgba(255,255,255,.15),0 0 0 1.5px #000,var(--focus)}

/* Upgrade: logo tile. Graphite gradient, silver edge, sparkle. Plans and trial only. */
.v-btn--upgrade{color:#fff;text-shadow:0 1px 2px rgba(0,0,0,.5);border:1.5px solid transparent;
  background:linear-gradient(180deg,#555,#141414) padding-box,var(--brand-edge) border-box;
  box-shadow:0 4px 10px -2px rgba(0,0,0,.35),0 1px 2px rgba(0,0,0,.2)}
.v-btn--upgrade svg{color:var(--brand-spark)}
.v-btn--upgrade:hover{filter:brightness(1.15)}

/* Secondary: soft white */
.v-btn--secondary{background:linear-gradient(180deg,#fff,var(--n-25));
  box-shadow:inset 0 1px 0 #fff,0 0 0 1px var(--line-2),0 1px 2px rgba(18,18,20,.06),0 3px 6px -2px rgba(18,18,20,.06)}
.v-btn--secondary:hover{background:var(--n-25)}
.v-btn--secondary:active{box-shadow:0 0 0 1px var(--line-2),inset 0 1px 2px rgba(18,18,20,.06)}

.v-btn--ghost{color:var(--ink-2);background:transparent}
.v-btn--ghost:hover{background:var(--sunken);color:var(--ink)}
.v-btn--danger{color:#B4232A;background:#fff;box-shadow:0 0 0 1px #F4B5B7}
.v-btn--danger:hover{background:#FDECEC}

/* Icon button + count badge */
.v-icon-btn{position:relative;width:38px;height:38px;border-radius:50%;border:0;display:grid;place-items:center;cursor:pointer;
  background:linear-gradient(180deg,#fff,var(--n-25));box-shadow:var(--e-soft);color:var(--n-700)}
.v-icon-btn svg{width:18px;height:18px}
.v-icon-btn--sq{border-radius:var(--r-md);width:34px;height:34px;box-shadow:var(--e-1)}
.v-icon-btn:focus-visible{outline:none;box-shadow:var(--focus)}
.v-badge-count{position:absolute;top:-5px;right:-6px;min-width:19px;height:19px;padding:0 5px;border-radius:var(--r-full);
  display:grid;place-items:center;font:700 10.5px/1 var(--font);color:#fff;
  background:radial-gradient(circle at 50% 25%,#FF6B8A,#F0244F 60%,#D0103C);box-shadow:0 0 0 2px #fff,0 2px 6px rgba(240,36,79,.4)}

/* Input */
.v-input{height:38px;padding:0 12px;border-radius:var(--r-md);border:0;background:#fff;font:var(--t-md) var(--font);color:var(--ink);
  box-shadow:0 0 0 1px var(--line-2),0 1px 2px rgba(18,18,20,.04);width:100%}
.v-input::placeholder{color:var(--ink-3)}
.v-input:focus{outline:none;box-shadow:0 0 0 1px var(--n-900),var(--focus)}
.v-input--error{box-shadow:0 0 0 1px var(--st-failed),0 0 0 3px rgba(208,42,42,.12)}
textarea.v-input{height:auto;min-height:84px;padding:10px 12px;resize:vertical;line-height:1.45}

/* Switch, checkbox */
.v-switch{appearance:none;width:36px;height:20px;border-radius:999px;background:var(--n-300);position:relative;cursor:pointer;transition:background .15s;flex:none;margin:0}
.v-switch:after{content:"";position:absolute;top:2px;left:2px;width:16px;height:16px;border-radius:50%;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.25);transition:transform .15s var(--ease)}
.v-switch:checked{background:var(--n-900)}
.v-switch:checked:after{transform:translateX(16px)}
.v-check{appearance:none;width:18px;height:18px;border-radius:5px;background:#fff;box-shadow:0 0 0 1px var(--n-300);cursor:pointer;display:grid;place-items:center;flex:none;margin:0}
.v-check:checked{background:var(--n-900);box-shadow:0 0 0 1px #000}
.v-check:checked:after{content:"";width:9px;height:5px;border:2px solid #fff;border-top:0;border-right:0;transform:rotate(-45deg) translate(1px,-1px)}
.v-switch:focus-visible,.v-check:focus-visible{outline:none;box-shadow:var(--focus)}

/* Status tag — glossy pill: tinted fill, deeper edge, top highlight, circled icon */
.v-st{--t:var(--st-pending);display:inline-flex;align-items:center;gap:5px;height:24px;padding:0 10px 0 5px;border-radius:var(--r-full);
  font:500 var(--t-xs)/1 var(--font);color:var(--t);white-space:nowrap;
  background:color-mix(in srgb,var(--t) 22%,#fff);border:1px solid color-mix(in srgb,var(--t) 42%,#fff);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.75),0 1px 2px rgba(0,0,0,.08)}
.v-st svg{width:15px;height:15px;stroke-width:1.9}
.v-st--pending{--t:var(--st-pending)} .v-st--scheduled{--t:var(--st-scheduled)} .v-st--success{--t:var(--st-success)}
.v-st--failed{--t:var(--st-failed)} .v-st--draft{--t:var(--st-draft);background:#E4E4E7;border-color:#C4C4CA}
.v-st--lg{height:30px;padding:0 13px 0 7px;font-size:var(--t-md);gap:6px}
.v-st--lg svg{width:18px;height:18px}

/* Small labels */
.v-dot{width:7px;height:7px;border-radius:50%;display:inline-block;flex:none;background:currentColor}
.v-chip{display:inline-flex;align-items:center;gap:6px;height:28px;padding:0 10px;border-radius:var(--r-full);font:500 var(--t-xs) var(--font);background:#fff;box-shadow:var(--e-1);color:var(--ink-2)}
.v-tag{display:inline-flex;align-items:center;height:22px;padding:0 8px;border-radius:var(--r-xs);font:500 11px var(--font);border:1px solid currentColor;background:#fff}
.v-count{font:500 11px var(--font);padding:1px 7px;border-radius:var(--r-full);background:#fff;box-shadow:var(--e-1);color:var(--ink-2)}
.v-best{font:600 11px var(--font);padding:3px 8px;border-radius:var(--r-full);background:var(--ink);color:#fff}
.v-kbd{font:500 11px var(--font);background:#fff;border-radius:5px;padding:2px 6px;color:var(--ink-2);box-shadow:var(--e-1)}
.v-ch{width:22px;height:22px;border-radius:50%!important;display:inline-grid;place-items:center;font:700 9px var(--font);color:transparent!important;flex:none;background:center/cover no-repeat;box-shadow:0 2px 6px rgba(0,0,0,.12);overflow:hidden}
.v-ch--ig{background-image:url(assets/logo-ig.png)} .v-ch--fb{background-image:url(assets/logo-fb.png)} .v-ch--tt{background-image:url(assets/logo-tt.png)}
.v-ch--yt{background-image:url(assets/logo-yt.png)} .v-ch--li{background-image:url(assets/logo-li.png)} .v-ch--pin{background-image:url(assets/logo-pin.png)}
.v-ch--x{background:var(--ch-x);color:#fff!important}

/* Icon chip — tinted square holding a tool icon */
.v-ic{width:28px;height:28px;border-radius:var(--r-sm);display:inline-grid;place-items:center;flex:none;color:var(--c,var(--ink-2));background:color-mix(in srgb,var(--c,var(--ink-2)) 11%,#fff)}
.v-ic svg{width:16px;height:16px}
.v-ic--lg{width:38px;height:38px;border-radius:var(--r-md)}
.v-ic--lg svg{width:18px;height:18px}

/* Avatar */
.v-avatar{width:34px;height:34px;border-radius:50%;background:var(--n-200) center 20%/cover;flex:none;box-shadow:0 0 0 2px #fff,0 0 0 3.5px var(--n-800)}
.v-avatar--lg{width:44px;height:44px}
.v-avatar-stack{display:flex}
.v-avatar-stack .v-avatar{box-shadow:0 0 0 2px #fff;margin-left:-8px}
.v-avatar-stack .v-avatar:first-child{margin-left:0}


/* =============== 3. MOLECULES =============== */

.v-field{display:flex;flex-direction:column;gap:6px}
.v-label{font:500 var(--t-sm) var(--font);color:var(--ink)}
.v-hint{font-size:var(--t-xs);color:var(--ink-3)}
.v-field--error .v-hint{color:var(--st-failed)}

.v-search{display:flex;align-items:center;gap:8px;height:38px;padding:0 10px;border-radius:var(--r-md);background:var(--n-150);color:var(--ink-3)}
.v-search .v-kbd{margin-left:auto}

.v-seg{display:inline-flex;padding:3px;border-radius:var(--r-md);background:var(--n-100);gap:2px}
.v-seg button{height:28px;padding:0 12px;border:0;border-radius:var(--r-sm);background:none;font:500 var(--t-sm) var(--font);color:var(--ink-2);cursor:pointer}
.v-seg button[aria-pressed="true"]{background:#fff;color:var(--ink);box-shadow:0 1px 2px rgba(0,0,0,.08),0 0 0 1px rgba(0,0,0,.03)}

/* Keyword tokens (DM triggers) */
.v-tokens{display:flex;flex-wrap:wrap;gap:6px;padding:6px;border-radius:var(--r-md);background:#fff;box-shadow:0 0 0 1px var(--line-2)}
.v-token{display:inline-flex;align-items:center;gap:6px;height:26px;padding:0 6px 0 10px;border-radius:var(--r-sm);background:var(--sunken);font:500 var(--t-sm) var(--font)}
.v-token i{font-style:normal;color:var(--ink-3);cursor:pointer}

/* Nav item + tree */
.v-nav{display:flex;flex-direction:column;gap:2px}
.v-nav-item{display:flex;align-items:center;gap:10px;height:40px;padding:0 10px;border-radius:var(--r-md);color:var(--ink-2);font:500 var(--t-md) var(--font);text-decoration:none}
.v-nav-item svg{width:18px;height:18px}
.v-nav-item .end{margin-left:auto;color:var(--ink-3)}
.v-nav-item:hover{background:rgba(255,255,255,.6);color:var(--ink)}
.v-nav-item[aria-current="page"]{background:#fff;color:var(--ink);box-shadow:var(--e-2)}
.v-nav-tree{margin-left:19px;border-left:1px solid var(--line-2);display:flex;flex-direction:column}
.v-nav-tree .v-nav-item{position:relative;height:34px;padding-left:22px;color:var(--ink-3)}
.v-nav-tree .v-nav-item:before{content:"";position:absolute;left:-1px;top:0;width:12px;height:17px;border-bottom:1px solid var(--line-2);border-bottom-left-radius:8px}
.v-nav-tree .v-nav-item[aria-current="page"]{color:var(--ink);background:none;box-shadow:none}

/* Account row */
.v-account{display:flex;align-items:center;gap:10px;padding:8px;border-radius:var(--r-lg);font-size:var(--t-md)}
.v-account b{display:block;font-weight:600}
.v-account small{display:block;color:var(--ink-3);font-size:var(--t-xs)}
.v-account .end{margin-left:auto;color:var(--ink-3)}

/* Menu */
.v-menu{width:260px;background:#FCFCFC;border-radius:18px;padding:8px;box-shadow:var(--e-3)}
.v-menu__item{display:flex;align-items:center;gap:12px;height:40px;padding:0 12px;border-radius:var(--r-md);font:500 var(--t-md) var(--font);color:var(--ink)}
.v-menu__item svg{width:18px;height:18px}
.v-menu__item:hover,.v-menu__item[aria-selected="true"]{background:var(--n-100)}
.v-menu hr{border:0;border-top:1px solid var(--line);margin:6px 0}

/* Toast */
.v-toast{display:inline-flex;align-items:center;gap:14px;padding:8px 22px 8px 8px;border-radius:var(--r-full);background:linear-gradient(180deg,#fff,var(--n-50));box-shadow:var(--e-soft)}
.v-toast__ic{width:42px;height:42px;border-radius:50%;display:grid;place-items:center;flex:none;background:radial-gradient(circle at 50% 30%,#FBF0C4,#F3D98A);color:#B86A00;box-shadow:0 0 0 3px #fff,0 2px 6px rgba(0,0,0,.08)}
.v-toast__ic--ok{background:radial-gradient(circle at 50% 30%,#D8F6E2,#A9E8BF);color:var(--green-700)}
.v-toast b{display:block;font:600 var(--t-md) var(--font)}
.v-toast small{color:var(--ink-2);font-size:var(--t-sm)}

/* Tool tile — white card, preview with hue glow, colored title */
.v-tile{--c:var(--violet);display:flex;flex-direction:column;gap:12px;background:#fff;border-radius:var(--r-2xl);padding:10px 10px 18px;box-shadow:var(--e-2);color:var(--ink);text-decoration:none;position:relative;overflow:hidden}
.v-tile__pv{height:176px;border-radius:var(--r-xl);position:relative;overflow:hidden;background:color-mix(in srgb,var(--c) 4%,#fff)}
.v-tile__pv:before{content:"";position:absolute;inset:-45% -25% auto 30%;height:190px;background:radial-gradient(closest-side,var(--c),transparent);opacity:.32;filter:blur(10px)}
.v-tile__pv:after{content:"✦";position:absolute;right:18px;top:14px;color:#fff;font-size:13px;text-shadow:0 0 8px color-mix(in srgb,var(--c) 60%,transparent)}
.v-tile__pv>*{position:absolute;z-index:1}
.v-tile h3{display:flex;align-items:center;gap:8px;margin:0;padding:0 8px;font:600 15px var(--font);color:var(--c)}
.v-tile h3 .arr{margin-left:auto;color:var(--ink-3);width:16px;height:16px;transition:transform .15s var(--ease)}
.v-tile:hover h3 .arr{transform:translateX(3px)}
.v-tile p{margin:-4px 0 0;padding:0 8px;font-size:var(--t-sm);color:var(--ink-2)}

/* Post thumbnail */
.v-thumb{aspect-ratio:3/4.4;border-radius:14px;background:var(--n-200) center/cover;position:relative;overflow:hidden;box-shadow:0 0 0 1px rgba(0,0,0,.04);max-width:100%}
.v-thumb:after{content:"";position:absolute;inset:55% 0 0;background:linear-gradient(transparent,rgba(0,0,0,.6))}
.v-thumb .v-st{position:absolute;left:8px;top:8px;z-index:1}
.v-thumb__meta{position:absolute;left:10px;right:10px;bottom:9px;z-index:1;color:#fff;font-size:var(--t-xs);display:flex;flex-direction:column;gap:1px}
.v-thumb__meta b{font-weight:600;font-size:12.5px}
.v-thumb__meta span{opacity:.85}
.v-thumb--new{background:var(--surface);box-shadow:inset 0 0 0 1.5px var(--line-2);display:grid;place-items:center;color:var(--ink-3);font-weight:500;text-align:center}
.v-thumb--new:after{display:none}

/* Plan card */
.v-plan{background:#fff;border-radius:var(--r-xl);padding:24px;box-shadow:var(--e-1);display:flex;flex-direction:column;gap:6px}
.v-plan--best{box-shadow:0 0 0 1.5px var(--ink),0 12px 30px -12px rgba(0,0,0,.2)}
.v-plan__name{display:flex;align-items:center;gap:8px;font:600 17px var(--font)}
.v-plan__name .v-best{margin-left:auto}
.v-plan__for{color:var(--ink-3);font-size:var(--t-sm)}
.v-plan__price{font:600 34px/1 var(--font);letter-spacing:-.03em;margin:14px 0 4px;font-variant-numeric:tabular-nums}
.v-plan__price small{font:400 var(--t-md) var(--font);color:var(--ink-2);letter-spacing:0}
.v-plan ul{list-style:none;padding:0;margin:12px 0 20px;display:flex;flex-direction:column;gap:8px;color:var(--ink-2);font-size:var(--t-sm)}
.v-plan li{display:flex;align-items:center;gap:8px}
.v-plan li svg{width:16px;height:16px;color:var(--green)}
.v-plan .v-btn{margin-top:auto}

/* Section header */
.v-shd{display:flex;align-items:center;gap:16px;margin-bottom:20px}
.v-shd h2{margin:0;font:600 var(--t-xl) var(--font);letter-spacing:-.01em}
.v-shd .more{margin-left:auto;color:var(--ink-2);font-weight:500;display:flex;align-items:center;gap:6px;text-decoration:none}

/* Automation: node, port, diamond, branch label, add-step */
.v-node{--c:var(--node-action);position:absolute;width:240px;background:#fff;border-radius:14px;box-shadow:var(--e-2)}
.v-node__hd{display:flex;align-items:center;gap:8px;padding:10px 12px;border-radius:14px 14px 0 0;background:color-mix(in srgb,var(--c) 9%,#fff);border-bottom:1px solid color-mix(in srgb,var(--c) 18%,#fff);color:color-mix(in srgb,var(--c) 70%,#000);font:600 var(--t-sm) var(--font)}
.v-node__hd svg{width:16px;height:16px}
.v-node__hd .v-tag{margin-left:auto;color:inherit;background:transparent}
.v-node__bd{padding:10px 12px 12px;display:flex;flex-direction:column;gap:8px}
.v-node__field{padding:8px 10px;border-radius:var(--r-sm);background:#fff;box-shadow:0 0 0 1px var(--line-2),0 1px 2px rgba(18,18,20,.04);font-size:var(--t-sm)}
.v-node__meta{display:flex;align-items:center;gap:6px;font-size:var(--t-xs);color:var(--ink-3)}
.v-node--solo .v-node__hd{border-radius:14px;border:0}
.v-node[aria-selected="true"]{box-shadow:0 0 0 1.5px var(--c),0 0 0 6px color-mix(in srgb,var(--c) 14%,transparent),0 8px 24px -8px rgba(18,18,20,.12)}
.v-node--trigger{--c:var(--node-trigger)} .v-node--condition{--c:var(--node-condition)} .v-node--message{--c:var(--node-message)}
.v-node--wait{--c:var(--node-wait)} .v-node--action{--c:var(--node-action)} .v-node--end{--c:var(--node-end)}
.v-port{position:absolute;width:10px;height:10px;border-radius:50%;background:#fff;box-shadow:0 0 0 1.5px var(--n-400);transform:translate(-50%,-50%)}
.v-diamond{position:absolute;width:36px;height:36px;transform:translate(-50%,-50%);display:grid;place-items:center;color:var(--node-condition)}
.v-diamond:before{content:"";position:absolute;inset:4px;transform:rotate(45deg);border-radius:6px;background:#fff;box-shadow:0 0 0 1.5px var(--node-condition),0 2px 6px rgba(255,122,26,.25)}
.v-diamond svg{position:relative;width:16px;height:16px}
.v-branch{position:absolute;transform:translate(-50%,-50%)}
.v-add{position:absolute;width:28px;height:28px;border-radius:50%;transform:translate(-50%,-50%);display:grid;place-items:center;background:#fff;border:1.5px dashed var(--n-400);color:var(--ink-2)}
.v-add svg{width:14px;height:14px}

/* =============== 4. ORGANISMS =============== */

.v-sidebar{width:var(--sidebar-w);flex:none;padding:16px;display:flex;flex-direction:column;gap:18px;background:var(--shell)}
.v-sidebar .logo{height:30px;width:auto;display:block;align-self:flex-start;margin:4px}
.v-sidebar .v-account{margin-top:auto}

.v-topbar{height:var(--topbar-h);display:flex;align-items:center;gap:10px;padding:0 24px;border-bottom:1px solid var(--line);background:#fff}
.v-topbar__title{font-weight:500}
.v-topbar__trial{margin-left:auto;color:var(--ink-2);font-size:var(--t-sm);margin-right:4px}

.v-pricing{border-radius:var(--r-3xl);background:var(--surface);box-shadow:var(--e-1);padding:40px}
.v-pricing__hd{display:flex;align-items:flex-end;flex-wrap:wrap;gap:16px;margin-bottom:28px}
.v-pricing__hd h2{margin:0;font:600 var(--t-xl) var(--font)}
.v-pricing__hd p{margin:6px 0 0;color:var(--ink-2)}
.v-pricing__hd .v-seg{margin-left:auto}
.v-plans{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:16px}

.v-canvas{position:relative;background-color:var(--n-25);background-image:radial-gradient(var(--n-300) 1px,transparent 1.2px);background-size:16px 16px;overflow:hidden}
.v-toolbar{display:inline-flex;align-items:center;gap:6px;padding:6px;border-radius:var(--r-xl);background:#fff;box-shadow:var(--e-3)}
.v-toolbar .sep{width:1px;height:22px;background:var(--line-2)}
.v-panel{background:#fff;border-radius:var(--r-2xl);box-shadow:var(--e-2);display:flex;flex-direction:column}
.v-panel__hd{display:flex;align-items:center;justify-content:space-between;padding:14px 18px;border-bottom:1px solid var(--line);font:600 var(--t-lg) var(--font)}
.v-panel__bd{padding:16px 18px;display:flex;flex-direction:column;gap:16px}
.v-panel__ft{display:flex;gap:8px;padding:14px 18px;border-top:1px solid var(--line);margin-top:auto}
.v-row-item{display:flex;align-items:center;gap:8px;padding:10px;border-radius:var(--r-lg);background:var(--surface);box-shadow:var(--e-1)}


@media (prefers-reduced-motion:reduce){.v-btn,.v-switch,.v-switch:after,.v-tile h3 .arr{transition:none}}

/* =============== ONBOARDING COMPONENTS =============== */

/* Coach mark — guided-tour tooltip. Ink bubble, arrow, step count, Back/Next, skip. */
.v-coach{position:absolute;z-index:20;width:300px;padding:16px;border-radius:16px;color:#fff;
  background:linear-gradient(180deg,rgba(255,255,255,.08),rgba(255,255,255,0)),var(--n-900);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.1),0 0 0 1px #000,0 18px 40px -10px rgba(0,0,0,.45)}
.v-coach:before{content:"";position:absolute;width:12px;height:12px;background:var(--n-900);transform:rotate(45deg);border-radius:2px}
.v-coach--left:before{left:-6px;top:28px} .v-coach--right:before{right:-6px;top:28px}
.v-coach--top:before{top:-6px;left:32px} .v-coach--bottom:before{bottom:-6px;left:32px}
.v-coach__eyebrow{display:flex;align-items:center;gap:8px;font:500 var(--t-xs) var(--font);color:var(--n-400);margin-bottom:6px}
.v-coach__eyebrow .x{margin-left:auto;color:var(--n-400);cursor:pointer}
.v-coach b{display:block;font:600 15px/1.35 var(--font);margin-bottom:4px}
.v-coach p{margin:0;font-size:var(--t-sm);line-height:1.5;color:#CFCFD6}
.v-coach__ft{display:flex;align-items:center;gap:8px;margin-top:14px}
.v-coach__dots{display:flex;gap:4px;margin-right:auto}
.v-coach__dots i{width:6px;height:6px;border-radius:50%;background:var(--n-700)}
.v-coach__dots i.on{background:#fff;width:16px;border-radius:3px}
.v-coach .v-btn--next{background:#fff;color:var(--ink);box-shadow:0 1px 2px rgba(0,0,0,.3)}
.v-coach .v-btn--back{color:var(--n-400);background:transparent}

/* Spotlight — lifts the target above a dim scrim (parent must clip overflow) */
.v-spot{position:relative;z-index:10;border-radius:inherit;box-shadow:0 0 0 4px rgba(255,255,255,.95),0 0 0 9999px rgba(18,18,20,.5)}

/* Scrim for modals */
.v-scrim{position:absolute;inset:0;background:rgba(18,18,20,.45);backdrop-filter:blur(2px);z-index:5}

/* Modal */
.v-modal{position:relative;z-index:6;width:600px;max-width:100%;background:#fff;border-radius:var(--r-3xl);box-shadow:var(--e-3);overflow:hidden}
.v-modal__hd{padding:24px 24px 0}
.v-modal__hd h2{margin:0;font:600 var(--t-2xl)/1.25 var(--font);letter-spacing:-.02em}
.v-modal__hd p{margin:6px 0 0;color:var(--ink-2)}
.v-modal__close{position:absolute;right:16px;top:16px}
.v-modal__bd{padding:20px 24px 24px}
.v-modal__ft{display:flex;align-items:center;gap:8px;padding:14px 24px;border-top:1px solid var(--line);background:var(--surface)}
.v-modal__ft .grow{flex:1}

/* Segmented step progress (Step 1 of 4) */
.v-steps{display:flex;align-items:center;gap:10px;margin-top:16px;font:500 var(--t-xs) var(--font);color:var(--ink-3)}
.v-steps__bar{flex:1;display:grid;grid-auto-flow:column;gap:4px}
.v-steps__bar i{height:4px;border-radius:2px;background:var(--n-150)}
.v-steps__bar i.on{background:var(--n-900)}

/* Progress ring — set --p (0–100) */
.v-ring{--p:0;--size:64px;width:var(--size);height:var(--size);border-radius:50%;flex:none;display:grid;place-items:center;
  background:radial-gradient(closest-side,#fff 78%,transparent 80%),conic-gradient(var(--n-900) calc(var(--p)*1%),var(--n-150) 0);
  font:600 var(--t-md) var(--font);font-variant-numeric:tabular-nums}

/* Selectable option card (platform, account type, template) */
.v-option{position:relative;display:flex;flex-direction:column;gap:6px;padding:16px;border-radius:var(--r-xl);background:#fff;box-shadow:var(--e-1);cursor:pointer;text-align:left}
.v-option:hover{box-shadow:var(--e-2)}
.v-option[aria-checked="true"]{box-shadow:0 0 0 1.5px var(--n-900),0 8px 20px -10px rgba(0,0,0,.25)}
.v-option__tick{position:absolute;right:12px;top:12px;width:20px;height:20px;border-radius:50%;box-shadow:inset 0 0 0 1.5px var(--n-300);display:grid;place-items:center;color:#fff}
.v-option[aria-checked="true"] .v-option__tick{background:var(--n-900);box-shadow:none}
.v-option__tick svg{width:12px;height:12px;stroke-width:2.5}
.v-option b{font:600 var(--t-md) var(--font)}
.v-option small{color:var(--ink-2);font-size:var(--t-xs);line-height:1.4}

/* Path step (activation checklist row) */
.v-path{display:flex;flex-direction:column}
.v-path__step{display:grid;grid-template-columns:32px 1fr;gap:16px;position:relative;padding-bottom:12px}
.v-path__step:not(:last-child):before{content:"";position:absolute;left:15px;top:36px;bottom:0;width:2px;background:var(--line-2);border-radius:1px}
.v-path__step.done:not(:last-child):before{background:var(--n-900)}
.v-path__num{width:32px;height:32px;border-radius:50%;display:grid;place-items:center;font:600 var(--t-sm) var(--font);background:#fff;box-shadow:inset 0 0 0 1.5px var(--n-300);color:var(--ink-2)}
.v-path__step.done .v-path__num{background:var(--n-900);color:#fff;box-shadow:none}
.v-path__step.current .v-path__num{background:#fff;color:var(--ink);box-shadow:inset 0 0 0 2px var(--n-900),0 0 0 4px rgba(18,18,20,.08)}
.v-path__body{padding:4px 0 8px}
.v-path__body h3{margin:0;display:flex;align-items:center;gap:10px;font:600 var(--t-lg) var(--font)}
.v-path__body h3 .time{font:500 var(--t-xs) var(--font);color:var(--ink-3)}
.v-path__body p{margin:4px 0 0;color:var(--ink-2);font-size:var(--t-sm)}
.v-path__step.upcoming .v-path__body h3{color:var(--ink-2)}
.v-path__card{margin-top:14px;padding:20px;border-radius:var(--r-xl);background:#fff;box-shadow:var(--e-2)}

/* Tool hue helpers — last so they override component defaults */
.hue-video{--c:var(--violet)} .hue-post{--c:var(--blue)} .hue-auto{--c:var(--orange)} .hue-dm{--c:var(--green)}