/* ============================================================
   VISORA ATELIER — editorial visual studio
   A distinctive identity built around premium typography,
   crystalline glass surfaces, and editorial composition.
   ============================================================ */
*,*::before,*::after{box-sizing:border-box}
html,body{margin:0;padding:0;height:100%}

:root{
  /* ---- Visora Atelier color system ---- */
  --vx-ink:        #07080d;
  --vx-obsidian:   #0c0d14;
  --vx-graphite:   #14151e;
  --vx-slate:      #1a1c27;
  --vx-fog:        #242635;
  --vx-mist:       #34374a;
  --vx-ash:        #6b6f85;
  --vx-paper:      #e8e7ea;
  --vx-paper-pure: #fafaf7;

  /* signature accents — distinct from napkin's coral/orange */
  --vx-indigo:     #6366f1;
  --vx-iris:       #818cf8;
  --vx-azure:      #38bdf8;
  --vx-emerald:    #34d399;
  --vx-amber:      #f6c560;
  --vx-blush:      #fb7299;
  --vx-violet:     #a78bfa;

  /* signature gradient lines */
  --vx-grad-aurora: linear-gradient(110deg, #6366f1 0%, #38bdf8 45%, #f6c560 95%);
  --vx-grad-ink:    linear-gradient(180deg, #14151e 0%, #07080d 100%);
  --vx-grad-glass:  linear-gradient(180deg, rgba(255,255,255,.045) 0%, rgba(255,255,255,.012) 100%);

  /* type */
  --vx-serif:      'Fraunces', 'Source Serif Pro', Georgia, serif;
  --vx-sans:       'Source Sans 3', 'Inter', system-ui, -apple-system, sans-serif;
  --vx-mono:       'JetBrains Mono', 'SFMono-Regular', ui-monospace, monospace;

  /* motion */
  --spring:        cubic-bezier(.34, 1.56, .64, 1);
  --silk:          cubic-bezier(.22, .61, .36, 1);
  --quick:         cubic-bezier(.4, 0, .2, 1);

  /* elevation system */
  --vx-shadow-1:   0 1px 0 rgba(255,255,255,.04), 0 1px 2px rgba(0,0,0,.30);
  --vx-shadow-2:   0 8px 24px -10px rgba(0,0,0,.55), 0 0 0 1px rgba(255,255,255,.04);
  --vx-shadow-3:   0 24px 60px -16px rgba(0,0,0,.65), 0 0 0 1px rgba(255,255,255,.06), inset 0 1px 0 rgba(255,255,255,.08);
  --vx-shadow-4:   0 40px 90px -20px rgba(0,0,0,.75), 0 0 0 1px rgba(255,255,255,.08), inset 0 1px 0 rgba(255,255,255,.10);
}

body{
  font-family:var(--vx-sans);
  background:var(--vx-ink);
  color:var(--vx-paper);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  overflow:hidden;
  font-size:14px;
  letter-spacing:.005em;
}

/* Signature ambient wash — aurora glow that distinguishes from napkin's mesh */
body::before{
  content:'';position:fixed;inset:0;z-index:0;pointer-events:none;
  background:
    radial-gradient(1100px 700px at 8% -8%, rgba(99,102,241,.16), transparent 60%),
    radial-gradient(900px 700px at 100% 110%, rgba(56,189,248,.13), transparent 60%),
    radial-gradient(800px 600px at 50% 50%, rgba(246,197,96,.04), transparent 70%);
}
/* Subtle film grain — adds editorial paper texture */
body::after{
  content:'';position:fixed;inset:0;z-index:0;pointer-events:none;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .25 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  opacity:.6;mix-blend-mode:overlay;
}

button{font-family:inherit;cursor:pointer;border:none;background:none;color:inherit}
input,textarea,select{font-family:inherit;color:inherit}

/* Diagrams in Source Sans, headings in Fraunces serif */
.diagram-host svg{font-family:var(--vx-sans) !important;}
.doc,.doc-name,.topbar,.va-menu,.va-sub,.ai-modal-card,.cz-panel,.ai-panel,.cat-panel,.toast,.cmdk-modal{
  font-family:var(--vx-sans);
}
.doc h1,.doc h2,.doc h3{font-family:var(--vx-serif);letter-spacing:-.018em}
.lib-modal-head h3,.brand-modal-head h3,.ai-modal-head h3{font-family:var(--vx-serif);font-weight:800}

/* ============================================================
   LAYERED CANVAS — luminous depth, distinct from napkin's flat mesh
   ============================================================ */
.canvas-area{
  position:relative;
  overflow:auto;
  background:
    radial-gradient(1400px 800px at 18% 0%, rgba(99,102,241,.14), transparent 55%),
    radial-gradient(1100px 700px at 100% 100%, rgba(56,189,248,.12), transparent 55%),
    radial-gradient(700px 500px at 50% 50%, rgba(246,197,96,.03), transparent 70%),
    linear-gradient(180deg, #0a0b13 0%, #07080d 100%);
  padding:88px 96px 180px;            /* spacious pro workspace */
  min-height:0;
  display:flex;align-items:flex-start;justify-content:center;
}
.canvas-area.has-custom-bg{ background:var(--canvas-bg, var(--vx-grad-ink)); }

.canvas-area::-webkit-scrollbar{width:10px;height:10px}
.canvas-area::-webkit-scrollbar-track{background:transparent}
.canvas-area::-webkit-scrollbar-thumb{
  background:linear-gradient(180deg, rgba(129,140,248,.32), rgba(56,189,248,.28));
  border-radius:6px;border:2px solid rgba(0,0,0,.3);
}
.canvas-area::-webkit-scrollbar-thumb:hover{background:linear-gradient(180deg, var(--vx-iris), var(--vx-azure))}

/* Editorial baseline grid — etched rules, not dots */
.canvas-grid{
  position:absolute;inset:0;pointer-events:none;z-index:0;
  background-image:
    linear-gradient(rgba(255,255,255,.02) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.02) 1px, transparent 1px),
    radial-gradient(circle, rgba(129,140,248,.05) 1px, transparent 1px);
  background-size:60px 60px, 60px 60px, 22px 22px;
  mask-image:radial-gradient(ellipse 80% 75% at 50% 50%, #000 35%, transparent 95%);
}

/* Animated aurora overlay — slow, sophisticated, ambient */
.canvas-area .canvas-dots{
  position:absolute;inset:0;pointer-events:none;z-index:0;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='600' height='600'><defs><radialGradient id='a' cx='50%25' cy='50%25' r='50%25'><stop offset='0' stop-color='%236366f1' stop-opacity='.10'/><stop offset='1' stop-color='%236366f1' stop-opacity='0'/></radialGradient><radialGradient id='b' cx='50%25' cy='50%25' r='50%25'><stop offset='0' stop-color='%2338bdf8' stop-opacity='.10'/><stop offset='1' stop-color='%2338bdf8' stop-opacity='0'/></radialGradient></defs><circle cx='100' cy='100' r='90' fill='url(%23a)'/><circle cx='500' cy='500' r='110' fill='url(%23b)'/></svg>");
  background-size:1200px 1200px;
  animation: aurora 40s linear infinite;
  opacity:.7;
}
@keyframes aurora {
  0%   { background-position: 0% 0%; }
  100% { background-position: 100% 100%; }
}

.canvas-area > *:not(.canvas-dots){ position:relative; z-index:1; }

.diagram-host{
  position:relative;z-index:1;
  width:100%;max-width:4800px;        /* expanded pro workspace */
  min-height:1700px;                  /* taller default canvas */
  margin:0 auto;
  display:block;
  text-align:center;
  transform:scale(var(--zoom,1));transform-origin:center top;
  transition:transform .35s var(--silk), background .4s ease;
  background-image:radial-gradient(480px circle at var(--mx,50%) var(--my,50%),
    rgba(129,140,248,.08), transparent 55%);
  --hue:0deg;
}
.diagram-host svg{
  max-width:100%;
  filter:hue-rotate(var(--hue)) drop-shadow(0 24px 60px rgba(0,0,0,.55)) drop-shadow(0 0 32px rgba(99,102,241,.08));
  display:block;margin:0 auto;
  transition:filter .35s var(--silk);
}

/* ============================================================
   ATELIER TOPBAR — glass rail with branded gradient ring
   ============================================================ */
.topbar{
  position:fixed;top:0;left:0;right:0;height:58px;z-index:50;
  display:flex;align-items:center;justify-content:space-between;
  padding:0 22px;
  background:linear-gradient(180deg, rgba(12,13,20,.85), rgba(12,13,20,.55) 80%, transparent);
  backdrop-filter:blur(20px) saturate(160%);
  -webkit-backdrop-filter:blur(20px) saturate(160%);
  border-bottom:1px solid rgba(255,255,255,.045);
}
.tb-left,.tb-right{display:flex;align-items:center;gap:8px}
.tb-center{flex:1;display:flex;justify-content:center;padding:0 24px}

/* Signature gradient ring — V mark in topbar */
.topbar::before{
  content:'';position:absolute;left:22px;top:50%;width:32px;height:32px;
  transform:translateY(-50%);
  background:var(--vx-grad-aurora);
  -webkit-mask:radial-gradient(circle, transparent 11px, #000 11px, #000 14.5px, transparent 14.5px);
          mask:radial-gradient(circle, transparent 11px, #000 11px, #000 14.5px, transparent 14.5px);
  border-radius:50%;
  pointer-events:none;
  opacity:.9;
}
.topbar::after{
  content:'V';position:absolute;left:22px;top:50%;width:32px;height:32px;
  transform:translateY(-50%);
  display:flex;align-items:center;justify-content:center;
  font-family:var(--vx-serif);font-weight:800;font-size:15px;
  color:var(--vx-paper);
  letter-spacing:-.02em;
  pointer-events:none;
}
.tb-left{padding-left:46px}

.iconbtn{
  display:inline-flex;align-items:center;gap:7px;
  background:transparent;color:rgba(232,231,234,.78);
  padding:7px 12px;border-radius:10px;
  font-size:13px;font-weight:500;letter-spacing:.005em;
  transition:background .15s var(--quick), color .15s, transform .15s var(--spring);
  position:relative;
}
.iconbtn::before{
  content:'';position:absolute;inset:0;border-radius:10px;
  background:linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,0));
  opacity:0;transition:opacity .15s;
}
.iconbtn:hover{color:#fff;transform:translateY(-1px)}
.iconbtn:hover::before{opacity:1}
.iconbtn-square{padding:8px;width:34px;height:34px;justify-content:center}

.newbtn{
  display:inline-flex;align-items:center;gap:8px;
  background:var(--vx-paper-pure);color:var(--vx-ink);
  border-radius:10px;padding:8px 16px;
  font-weight:600;font-size:13px;letter-spacing:.005em;
  box-shadow:0 2px 0 rgba(0,0,0,.18), inset 0 1px 0 rgba(255,255,255,.6);
  transition:transform .15s var(--spring), box-shadow .2s;
}
.newbtn:hover{transform:translateY(-1px);box-shadow:0 6px 18px -4px rgba(255,255,255,.18), inset 0 1px 0 rgba(255,255,255,.6)}
.newbtn span{font-size:14px;font-weight:300;opacity:.65}

.doc-name{
  background:rgba(255,255,255,.02);border:1px solid rgba(255,255,255,.04);outline:none;
  color:rgba(232,231,234,.78);font-size:13px;text-align:center;
  width:380px;padding:7px 14px;border-radius:8px;
  transition:background .15s, color .15s, border-color .15s;
  font-family:var(--vx-serif);font-weight:600;letter-spacing:-.005em;
}
.doc-name:hover{background:rgba(255,255,255,.04);color:#fff;border-color:rgba(255,255,255,.08)}
.doc-name:focus{background:rgba(255,255,255,.06);color:#fff;border-color:rgba(129,140,248,.4)}

/* AI status pill — refined indigo/azure */
.ai-status-pill{
  display:inline-flex;align-items:center;gap:8px;
  background:linear-gradient(135deg, rgba(99,102,241,.15), rgba(56,189,248,.12));
  border:1px solid rgba(129,140,248,.28);
  color:var(--vx-paper);
  padding:7px 13px;border-radius:999px;
  font-size:12px;font-weight:600;letter-spacing:.02em;
  cursor:pointer;
  transition:transform .15s var(--spring), box-shadow .2s, background .2s, border-color .2s;
}
.ai-status-pill:hover{
  transform:translateY(-1px);
  border-color:rgba(129,140,248,.55);
  box-shadow:0 8px 22px -8px rgba(99,102,241,.45);
  background:linear-gradient(135deg, rgba(99,102,241,.22), rgba(56,189,248,.18));
}
.ai-status-pill svg{color:var(--vx-iris)}
.ai-pill-dot{
  width:7px;height:7px;border-radius:50%;background:var(--vx-ash);
  box-shadow:0 0 0 2px rgba(107,111,133,.18);
}
.ai-status-pill.connected{
  background:linear-gradient(135deg, rgba(52,211,153,.18), rgba(99,102,241,.14));
  border-color:rgba(52,211,153,.4);
}
.ai-status-pill.connected .ai-pill-dot{
  background:var(--vx-emerald);box-shadow:0 0 0 3px rgba(52,211,153,.22);animation:dotPulse 2s ease-in-out infinite;
}
@keyframes dotPulse{0%,100%{box-shadow:0 0 0 3px rgba(52,211,153,.22)}50%{box-shadow:0 0 0 6px rgba(52,211,153,.08)}}

.user-pill{
  width:32px;height:32px;border-radius:50%;
  background:conic-gradient(from 220deg, #6366f1, #38bdf8, #f6c560, #fb7299, #6366f1);
  display:flex;align-items:center;justify-content:center;
  color:#fff;font-weight:700;font-size:12.5px;
  letter-spacing:.02em;
  box-shadow:inset 0 0 0 2px var(--vx-ink), 0 0 0 1px rgba(255,255,255,.08);
  border:none;cursor:pointer;
  transition:transform .15s var(--spring), box-shadow .2s;
}
.user-pill:hover{transform:scale(1.08);box-shadow:inset 0 0 0 2px var(--vx-ink), 0 0 0 2px rgba(129,140,248,.6)}

/* ============================================================
   USER MENU DROPDOWN — Stripe-style account menu
   ============================================================ */
.user-menu{
  position:fixed;top:60px;right:18px;z-index:120;
  width:300px;
  background:linear-gradient(180deg, rgba(24,26,38,.98), rgba(15,16,24,.98));
  backdrop-filter:blur(24px) saturate(150%);
  -webkit-backdrop-filter:blur(24px) saturate(150%);
  border:1px solid rgba(255,255,255,.10);
  border-radius:14px;
  box-shadow:var(--vx-shadow-4);
  padding:10px;
  transition:opacity .22s var(--silk), transform .25s var(--spring);
  transform-origin:top right;
}
.user-menu.hidden{opacity:0;transform:translateY(-6px) scale(.97);pointer-events:none}
.user-menu::before{
  content:'';position:absolute;top:0;left:14px;right:14px;height:1px;
  background:linear-gradient(90deg, transparent, rgba(129,140,248,.5), rgba(56,189,248,.4), transparent);
}
.um-head{display:flex;align-items:center;gap:12px;padding:10px 8px 14px}
.um-avatar{
  width:38px;height:38px;border-radius:50%;
  background:conic-gradient(from 220deg, #6366f1, #38bdf8, #f6c560, #fb7299, #6366f1);
  display:flex;align-items:center;justify-content:center;
  color:#fff;font-weight:700;font-size:15px;
  box-shadow:inset 0 0 0 2px var(--vx-ink);
  flex:0 0 auto;
}
.um-info{flex:1;min-width:0}
.um-name{font-size:14px;font-weight:700;color:#fff;letter-spacing:-.005em;line-height:1.2}
.um-email{font-size:12px;color:rgba(255,255,255,.55);margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

.um-plan-card{
  margin:0 4px 8px;padding:14px;border-radius:11px;
  background:linear-gradient(135deg, rgba(99,102,241,.10), rgba(56,189,248,.06));
  border:1px solid rgba(129,140,248,.22);
}
.um-plan-row{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px}
.um-plan-tag{font-family:var(--vx-mono);font-size:10px;font-weight:700;color:rgba(255,255,255,.5);letter-spacing:.12em;text-transform:uppercase}
.um-plan-name{font-family:var(--vx-serif);font-size:17px;font-weight:800;letter-spacing:-.014em;color:#fff}
.um-usage-bar{height:5px;border-radius:3px;background:rgba(255,255,255,.08);overflow:hidden}
.um-usage-bar span{display:block;height:100%;background:var(--vx-grad-aurora);border-radius:3px;transition:width .35s var(--silk)}
.um-usage-text{font-size:11px;color:rgba(255,255,255,.55);font-weight:500;margin-top:6px;font-variant-numeric:tabular-nums}
.um-upgrade{
  display:block;margin-top:12px;padding:8px 10px;
  font-family:var(--vx-mono);font-size:11px;font-weight:700;letter-spacing:.04em;
  color:#0a0b13;background:var(--vx-grad-aurora);
  border-radius:8px;text-align:center;text-transform:uppercase;
  text-decoration:none;
  transition:transform .15s var(--spring), box-shadow .2s, filter .15s;
}
.um-upgrade:hover{transform:translateY(-1px);filter:brightness(1.06);box-shadow:0 8px 18px -4px rgba(56,189,248,.55)}

.um-sep{height:1px;background:rgba(255,255,255,.06);margin:6px 4px}

.um-item{
  display:flex;align-items:center;gap:11px;
  padding:9px 10px;border-radius:8px;
  font-size:13px;color:rgba(232,231,234,.85);font-weight:500;
  text-decoration:none;
  transition:background .12s, color .12s, transform .12s var(--spring);
}
.um-item:hover{background:rgba(129,140,248,.12);color:#fff;transform:translateX(2px)}
.um-item svg{flex:0 0 14px;color:rgba(255,255,255,.55)}
.um-item:hover svg{color:var(--vx-iris)}
.um-item .um-meta{margin-left:auto;font-family:var(--vx-mono);font-size:10.5px;color:rgba(255,255,255,.35);font-weight:500;letter-spacing:.04em}
.um-item.um-danger{color:#fda4af}
.um-item.um-danger:hover{background:rgba(244,63,94,.10);color:#fff}
.um-item.um-danger svg{color:#fda4af}
.um-item.um-danger:hover svg{color:#fff}

/* ============================================================
   COMMAND PALETTE (⌘K) — signature Visora pro feature
   Not present in napkin.ai — distinctive Visora differentiator
   ============================================================ */
.cmdk-modal{
  position:fixed;inset:0;z-index:300;
  display:flex;align-items:flex-start;justify-content:center;
  padding-top:14vh;
  background:rgba(7,8,13,.65);
  backdrop-filter:blur(12px) saturate(110%);
  -webkit-backdrop-filter:blur(12px) saturate(110%);
  animation:fadein .18s var(--quick);
}
.cmdk-modal.hidden{display:none}
.cmdk-card{
  width:min(640px, 92vw);
  background:linear-gradient(180deg, rgba(24,26,38,.96), rgba(15,16,24,.96));
  border:1px solid rgba(255,255,255,.10);
  border-radius:16px;
  box-shadow:var(--vx-shadow-4);
  overflow:hidden;
  animation:cmdkRise .26s var(--spring);
}
@keyframes cmdkRise{
  from{opacity:0;transform:translateY(-12px) scale(.96)}
  to  {opacity:1;transform:none}
}
.cmdk-search{
  display:flex;align-items:center;gap:12px;
  padding:18px 22px;border-bottom:1px solid rgba(255,255,255,.06);
}
.cmdk-search svg{color:rgba(255,255,255,.4);flex:0 0 auto}
.cmdk-search input{
  flex:1;background:transparent;border:none;outline:none;
  color:#fff;font-size:16px;font-weight:500;letter-spacing:-.01em;
}
.cmdk-search input::placeholder{color:rgba(255,255,255,.32);font-weight:400}
.cmdk-kbd{
  display:inline-flex;align-items:center;gap:3px;
  font-family:var(--vx-mono);font-size:11px;font-weight:500;
  color:rgba(255,255,255,.45);
  background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.08);
  padding:3px 7px;border-radius:5px;
}
.cmdk-list{max-height:50vh;overflow-y:auto;padding:8px}
.cmdk-list::-webkit-scrollbar{width:6px}
.cmdk-list::-webkit-scrollbar-thumb{background:rgba(255,255,255,.08);border-radius:3px}
.cmdk-section{font-size:10.5px;font-weight:700;letter-spacing:1.2px;text-transform:uppercase;color:rgba(255,255,255,.32);padding:14px 12px 6px}
.cmdk-item{
  display:flex;align-items:center;gap:12px;padding:10px 12px;border-radius:8px;
  font-size:13.5px;color:rgba(255,255,255,.85);cursor:pointer;
  transition:background .12s, color .12s, transform .12s var(--spring);
}
.cmdk-item:hover, .cmdk-item.active{
  background:linear-gradient(90deg, rgba(99,102,241,.18), rgba(56,189,248,.08));
  color:#fff;transform:translateX(2px);
}
.cmdk-item svg{flex:0 0 16px;color:rgba(255,255,255,.5)}
.cmdk-item:hover svg, .cmdk-item.active svg{color:var(--vx-iris)}
.cmdk-item .cmdk-meta{margin-left:auto;font-size:11px;color:rgba(255,255,255,.35)}
.cmdk-foot{
  display:flex;align-items:center;justify-content:space-between;
  padding:10px 18px;border-top:1px solid rgba(255,255,255,.06);
  font-size:11px;color:rgba(255,255,255,.4);
  background:rgba(255,255,255,.015);
}
.cmdk-foot .cmdk-hints{display:flex;gap:14px}
.cmdk-foot .cmdk-hints span{display:flex;align-items:center;gap:6px}

/* ============================================================
   FLOATING PROMPT BAR — Visora's signature centerpiece
   ============================================================ */
.prompt-bar{
  position:fixed;left:50%;bottom:32px;transform:translateX(-50%);z-index:40;
  width:min(640px, 78vw);
  background:linear-gradient(180deg, rgba(26,28,39,.85), rgba(18,19,28,.92));
  backdrop-filter:blur(24px) saturate(150%);
  -webkit-backdrop-filter:blur(24px) saturate(150%);
  border:1px solid rgba(255,255,255,.10);
  border-radius:18px;
  padding:8px 8px 8px 14px;
  display:flex;align-items:center;gap:8px;
  box-shadow:var(--vx-shadow-3);
  transition:transform .25s var(--spring), box-shadow .25s, border-color .25s;
}
.prompt-bar:hover{
  border-color:rgba(129,140,248,.32);
  box-shadow:var(--vx-shadow-4), 0 0 60px -10px rgba(99,102,241,.3);
}
.prompt-bar.hidden{display:none}
.prompt-bar::before{
  content:'';position:absolute;inset:-1px;border-radius:19px;
  background:linear-gradient(110deg, rgba(99,102,241,.25), rgba(56,189,248,.25), rgba(246,197,96,.18));
  z-index:-1;opacity:0;transition:opacity .3s;
  filter:blur(8px);
}
.prompt-bar.focused::before{opacity:.8}
.prompt-bar .pb-tag{
  display:inline-flex;align-items:center;gap:5px;
  padding:5px 10px;border-radius:8px;
  background:linear-gradient(135deg, rgba(99,102,241,.18), rgba(56,189,248,.14));
  border:1px solid rgba(129,140,248,.25);
  font-size:11px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;
  color:var(--vx-iris);
}
.prompt-bar input{
  flex:1;background:transparent;border:none;outline:none;
  color:#fff;font-size:14.5px;padding:8px 4px;font-weight:500;letter-spacing:-.005em;
}
.prompt-bar input::placeholder{color:rgba(255,255,255,.35);font-weight:400}
.prompt-bar .pb-send{
  display:inline-flex;align-items:center;gap:5px;
  padding:8px 16px;border-radius:11px;
  background:var(--vx-grad-aurora);
  color:#0a0b13;font-weight:700;font-size:13px;letter-spacing:.01em;
  transition:transform .15s var(--spring), box-shadow .2s, filter .2s;
  position:relative;overflow:hidden;
}
.prompt-bar .pb-send:hover{transform:translateY(-1px);filter:brightness(1.06);box-shadow:0 8px 22px -6px rgba(56,189,248,.55)}
.prompt-bar .pb-send:active{transform:translateY(0)}
.prompt-bar .pb-quick{
  display:inline-flex;align-items:center;justify-content:center;
  width:34px;height:34px;border-radius:9px;
  color:rgba(255,255,255,.65);
  transition:background .15s, color .15s;
}
.prompt-bar .pb-quick:hover{background:rgba(255,255,255,.06);color:#fff}

/* ============================================================
   DIRECT-MANIPULATION CANVAS TOOLBAR
   ============================================================ */
.vs-canvas-toolbar{
  position:fixed;left:50%;bottom:110px;transform:translateX(-50%);
  z-index:55;
  display:flex;align-items:center;gap:4px;padding:6px;
  background:linear-gradient(180deg, rgba(26,28,39,.94), rgba(18,19,28,.96));
  backdrop-filter:blur(18px);
  border:1px solid rgba(255,255,255,.10);
  border-radius:14px;
  box-shadow:var(--vx-shadow-3);
  animation: tbIn .35s var(--spring);
}
@keyframes tbIn { from{opacity:0;transform:translate(-50%,12px)} to{opacity:1;transform:translate(-50%,0)} }
.vs-canvas-toolbar button{
  width:36px;height:36px;border-radius:9px;
  background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.06);
  color:var(--vx-paper);font-size:14px;font-weight:700;
  display:inline-flex;align-items:center;justify-content:center;
  transition:transform .15s var(--spring), background .15s, border-color .15s;
}
.vs-canvas-toolbar button:hover{
  background:rgba(129,140,248,.18);
  border-color:rgba(129,140,248,.45);color:#fff;
  transform:translateY(-2px);
}
.vs-canvas-toolbar button[data-act="delete"]{ color:#fca5a5 }
.vs-canvas-toolbar button[data-act="delete"]:hover{
  background:rgba(220,38,38,.18);border-color:rgba(220,38,38,.45);color:#fff;
}
.vs-tb-sep{width:1px;height:22px;background:rgba(255,255,255,.10);margin:0 4px}

.diagram-host svg [data-vs-id]:hover{cursor:move}
.diagram-host svg .vs-selected{filter:drop-shadow(0 0 6px rgba(129,140,248,.7))}

/* ============================================================
   MODALS — library, brand, AI
   ============================================================ */
.lib-modal,.brand-modal{
  position:fixed;inset:0;z-index:200;
  display:flex;align-items:center;justify-content:center;
  background:rgba(7,8,13,.70);backdrop-filter:blur(8px);
  animation:fadein .22s ease;
}
.lib-modal.hidden,.brand-modal.hidden{display:none}
.lib-modal-card,.brand-modal-card{
  width:min(880px, 92vw);max-height:84vh;
  background:linear-gradient(180deg, rgba(24,26,38,.98), rgba(16,17,25,.98));
  border:1px solid rgba(255,255,255,.10);
  border-radius:20px;
  padding:24px 24px 18px;
  box-shadow:var(--vx-shadow-4);
  animation:liftIn .35s var(--spring) both;
  overflow:hidden;display:flex;flex-direction:column;gap:14px;
}
@keyframes liftIn{from{opacity:0;transform:translateY(20px) scale(.96)}to{opacity:1;transform:none}}
.lib-modal-head,.brand-modal-head{
  display:flex;align-items:flex-start;justify-content:space-between;gap:12px;
}
.lib-modal-head h3,.brand-modal-head h3{
  margin:0;font-size:24px;font-weight:800;color:#fff;
  font-family:var(--vx-serif);letter-spacing:-.02em;
  background:var(--vx-grad-aurora);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.lib-modal-sub,.brand-modal-sub{margin:6px 0 0;font-size:13px;color:rgba(255,255,255,.55)}

.lib-tabs{display:flex;gap:4px;padding:4px;background:rgba(255,255,255,.04);border-radius:10px;width:fit-content}
.lib-tab{
  background:transparent;color:rgba(255,255,255,.55);
  padding:6px 16px;border-radius:8px;font-size:12.5px;font-weight:600;cursor:pointer;
  transition:background .15s, color .15s;
}
.lib-tab:hover{color:#fff}
.lib-tab.active{background:linear-gradient(135deg, rgba(99,102,241,.32), rgba(56,189,248,.22));color:#fff}

.lib-grid,.brand-grid{
  display:grid;grid-template-columns:repeat(3,1fr);gap:12px;
  overflow-y:auto;padding-right:4px;
}
.lib-grid::-webkit-scrollbar,.brand-grid::-webkit-scrollbar{width:6px}
.lib-grid::-webkit-scrollbar-thumb,.brand-grid::-webkit-scrollbar-thumb{background:rgba(255,255,255,.12);border-radius:3px}

.lib-card,.brand-card{
  background:rgba(255,255,255,.025);
  border:1px solid rgba(255,255,255,.07);
  border-radius:14px;padding:12px;cursor:pointer;
  transition:transform .2s var(--spring), border-color .15s, background .15s, box-shadow .2s;
  display:flex;flex-direction:column;gap:8px;
  animation:rise .42s var(--spring) both;
  position:relative;
}
.lib-card::before, .brand-card::before{
  content:'';position:absolute;inset:0;border-radius:14px;pointer-events:none;
  background:linear-gradient(180deg, rgba(255,255,255,.04), transparent 30%);
  opacity:.5;
}
@keyframes rise{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.lib-card:nth-child(1){animation-delay:.04s} .lib-card:nth-child(2){animation-delay:.07s}
.lib-card:nth-child(3){animation-delay:.10s} .lib-card:nth-child(4){animation-delay:.13s}
.lib-card:nth-child(5){animation-delay:.16s} .lib-card:nth-child(6){animation-delay:.19s}
.lib-card:nth-child(n+7){animation-delay:.22s}
.brand-card:nth-child(1){animation-delay:.04s} .brand-card:nth-child(2){animation-delay:.08s}
.brand-card:nth-child(3){animation-delay:.12s} .brand-card:nth-child(n+4){animation-delay:.16s}
.lib-card:hover,.brand-card:hover{
  transform:translateY(-4px);
  border-color:var(--vx-iris);
  background:rgba(255,255,255,.04);
  box-shadow:0 18px 40px -12px rgba(99,102,241,.5);
}
.lib-card-thumb{
  aspect-ratio:5/3;border-radius:10px;overflow:hidden;
  background:linear-gradient(135deg, #1a1c27, #0f1019);
  display:flex;align-items:center;justify-content:center;
  position:relative;
}
.lib-card-thumb::after{
  content:'';position:absolute;inset:0;
  background:linear-gradient(180deg, transparent 50%, rgba(0,0,0,.35));
  pointer-events:none;
}
.lib-card-thumb svg{width:100%;height:100%;display:block;position:relative;z-index:1}
.lib-card-name{font-size:13.5px;font-weight:700;color:#fff;letter-spacing:-.005em}
.lib-card-meta{font-size:11px;color:rgba(255,255,255,.45);font-weight:500}

.brand-card-strip{display:flex;height:56px;border-radius:10px;overflow:hidden;box-shadow:inset 0 0 0 1px rgba(255,255,255,.06)}
.brand-card-strip span{flex:1}
.brand-card-name{font-size:14px;font-weight:700;color:#fff}
.brand-card-meta{font-size:11px;color:rgba(255,255,255,.5)}

/* ============================================================
   LEFT DOCK — Categories panel
   ============================================================ */
.cat-panel{
  position:fixed;left:18px;top:78px;
  width:280px;max-height:calc(100vh - 110px);
  background:linear-gradient(180deg, rgba(26,28,39,.78), rgba(18,19,28,.86));
  backdrop-filter:blur(24px) saturate(150%);
  -webkit-backdrop-filter:blur(24px) saturate(150%);
  border:1px solid rgba(255,255,255,.08);
  border-radius:18px;z-index:30;
  box-shadow:var(--vx-shadow-3);
  display:flex;flex-direction:column;overflow:hidden;
}
.cat-panel::before{
  content:'';position:absolute;top:0;left:14px;right:14px;height:1px;
  background:linear-gradient(90deg, transparent, rgba(129,140,248,.5), rgba(56,189,248,.4), transparent);
  border-radius:1px;
}
.cat-head{display:flex;align-items:center;justify-content:space-between;padding:14px 16px 10px}
.cat-head h3{
  margin:0;display:flex;align-items:center;gap:9px;
  font-size:14px;font-weight:700;color:#fff;letter-spacing:-.005em;
}
.cat-head h3 svg{color:var(--vx-iris)}
.cat-head-actions{display:flex;gap:4px}
.iconbtn-sm{
  background:transparent;color:rgba(255,255,255,.55);
  width:26px;height:26px;border-radius:7px;
  display:flex;align-items:center;justify-content:center;
  transition:background .15s,color .15s;
}
.iconbtn-sm:hover{background:rgba(255,255,255,.06);color:#fff}

.cat-search{position:relative;margin:0 16px 10px}
.cat-search svg{position:absolute;left:11px;top:50%;transform:translateY(-50%);color:rgba(255,255,255,.4)}
.cat-search input{
  width:100%;background:rgba(255,255,255,.03);
  border:1px solid rgba(255,255,255,.06);
  color:#fff;padding:9px 12px 9px 32px;
  border-radius:9px;font-size:13px;outline:none;
  transition:border-color .15s, background .15s;
}
.cat-search input::placeholder{color:rgba(255,255,255,.4)}
.cat-search input:focus{border-color:rgba(129,140,248,.5);background:rgba(255,255,255,.05)}

.cat-list{flex:1;overflow-y:auto;padding:4px 10px 14px}
.cat-list::-webkit-scrollbar{width:6px}
.cat-list::-webkit-scrollbar-thumb{background:rgba(255,255,255,.10);border-radius:3px}

.cat-section{margin:0 0 2px}
.cat-section-head{
  display:flex;align-items:center;justify-content:space-between;
  padding:11px 12px;cursor:pointer;border-radius:9px;
  font-size:13px;font-weight:600;color:rgba(255,255,255,.78);letter-spacing:.005em;
  transition:background .15s, color .15s;
}
.cat-section-head:hover{background:rgba(255,255,255,.04);color:#fff}
.cat-section-head .chev{color:rgba(255,255,255,.4);transition:transform .2s ease}
.cat-section.open .chev{transform:rotate(90deg);color:var(--vx-iris)}
.cat-section.open .cat-section-head{color:#fff}

.cat-icons{display:none;grid-template-columns:repeat(5,1fr);gap:5px;padding:6px 8px 10px}
.cat-section.open .cat-icons{display:grid}
.cat-icon{
  aspect-ratio:1;border-radius:8px;
  display:flex;align-items:center;justify-content:center;
  background:rgba(255,255,255,.03);
  border:1px solid rgba(255,255,255,.05);
  color:rgba(255,255,255,.65);cursor:pointer;
  transition:transform .2s var(--spring), background .15s, border-color .15s, color .15s, box-shadow .25s;
}
.cat-icon:hover{
  background:rgba(255,255,255,.06);
  border-color:rgba(129,140,248,.35);
  color:#fff;transform:translateY(-2px) scale(1.05);
  box-shadow:0 8px 22px -8px rgba(99,102,241,.4);
}
.cat-icon.active{
  background:linear-gradient(135deg, rgba(99,102,241,.18), rgba(56,189,248,.12));
  border-color:rgba(129,140,248,.55);
  color:var(--vx-iris);
  box-shadow:0 0 0 1px rgba(129,140,248,.4), 0 8px 22px -8px rgba(99,102,241,.45);
}
.cat-icon svg{width:18px;height:18px}

/* Tier-lock badges on category icons */
.cat-icon[data-tier]{position:relative}
.cat-icon[data-tier]::after{
  content:attr(data-tier-label);
  position:absolute;top:-3px;right:-3px;
  font-family:var(--vx-mono);font-size:8px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
  padding:2px 5px;border-radius:5px;
  background:linear-gradient(135deg, #818cf8, #38bdf8);
  color:#0a0b13;
  box-shadow:0 2px 6px rgba(99,102,241,.4);
  pointer-events:none;
}
.cat-icon[data-tier="ultra"]::after{
  background:linear-gradient(135deg, #f6c560, #fb7299);
  box-shadow:0 2px 6px rgba(246,197,96,.45);
}
.cat-icon[data-tier]:hover::after{transform:scale(1.05)}

/* Locked feature subtle dim until upgraded */
.cat-icon.locked{opacity:.78}
.cat-icon.locked:hover{opacity:1}

/* ============================================================
   UPSELL MODAL — appears when clicking a locked feature
   ============================================================ */
.upsell-modal{
  position:fixed;inset:0;z-index:250;
  display:flex;align-items:center;justify-content:center;
  background:rgba(7,8,13,.72);backdrop-filter:blur(12px);
  animation:fadein .2s ease;
}
.upsell-modal.hidden{display:none}
.upsell-card{
  width:min(520px,92vw);
  background:linear-gradient(180deg, rgba(24,26,38,.98), rgba(15,16,24,.98));
  border:1px solid rgba(255,255,255,.10);
  border-radius:20px;
  padding:32px;
  box-shadow:var(--vx-shadow-4);
  position:relative;overflow:hidden;
  animation:upsellRise .28s var(--spring) both;
}
@keyframes upsellRise{from{opacity:0;transform:translateY(20px) scale(.95)}to{opacity:1;transform:none}}
.upsell-card.tier-pro::before{
  content:'';position:absolute;inset:-2px;border-radius:22px;
  background:var(--vx-grad-aurora);z-index:-1;
  filter:blur(14px);opacity:.32;
}
.upsell-card.tier-ultra::before{
  content:'';position:absolute;inset:-2px;border-radius:22px;
  background:linear-gradient(135deg, #f6c560, #fb7299, #f6c560);z-index:-1;
  filter:blur(14px);opacity:.36;
}
.upsell-close{
  position:absolute;top:14px;right:14px;
  width:32px;height:32px;border-radius:8px;
  background:rgba(255,255,255,.04);color:rgba(255,255,255,.65);
  display:flex;align-items:center;justify-content:center;
  transition:background .15s, color .15s;
}
.upsell-close:hover{background:rgba(255,255,255,.10);color:#fff}
.upsell-tag{
  display:inline-flex;align-items:center;gap:7px;
  font-family:var(--vx-mono);font-size:10.5px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;
  background:linear-gradient(135deg, rgba(99,102,241,.18), rgba(56,189,248,.10));
  color:var(--vx-iris);
  padding:5px 11px;border-radius:999px;
  border:1px solid rgba(129,140,248,.3);
  margin-bottom:18px;
}
.upsell-card.tier-ultra .upsell-tag{
  background:linear-gradient(135deg, rgba(246,197,96,.18), rgba(251,114,153,.10));
  color:#f6c560;border-color:rgba(246,197,96,.4);
}
.upsell-card h2{
  font-family:var(--vx-serif);font-size:30px;font-weight:800;letter-spacing:-.022em;line-height:1.08;
  color:#fff;margin:0 0 12px;
}
.upsell-card h2 em{
  font-style:italic;font-weight:600;
  background:var(--vx-grad-aurora);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.upsell-card.tier-ultra h2 em{
  background:linear-gradient(135deg, #fef3c7, #f6c560, #fb7299);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.upsell-card p{font-size:14.5px;color:rgba(255,255,255,.65);line-height:1.55;margin:0 0 22px}
.upsell-features{
  list-style:none;padding:18px;margin:0 0 24px;
  border:1px solid rgba(255,255,255,.08);border-radius:12px;
  background:rgba(255,255,255,.025);
  display:flex;flex-direction:column;gap:10px;
}
.upsell-features li{
  display:flex;align-items:flex-start;gap:10px;
  font-size:13.5px;color:rgba(255,255,255,.85);line-height:1.45;
}
.upsell-features li svg{flex:0 0 14px;color:var(--vx-iris);margin-top:3px}
.upsell-card.tier-ultra .upsell-features li svg{color:#f6c560}
.upsell-features li b{color:#fff;font-weight:700}
.upsell-cta-row{display:flex;align-items:center;gap:10px}
.upsell-primary{
  display:inline-flex;align-items:center;justify-content:center;gap:7px;
  flex:1;padding:13px 18px;border-radius:11px;
  background:var(--vx-grad-aurora);color:#0a0b13;font-weight:700;font-size:14px;letter-spacing:-.005em;
  transition:transform .15s var(--spring), box-shadow .2s, filter .15s;
}
.upsell-card.tier-ultra .upsell-primary{
  background:linear-gradient(135deg, #f6c560, #fb7299);
}
.upsell-primary:hover{transform:translateY(-1px);filter:brightness(1.06);box-shadow:0 12px 28px -8px rgba(56,189,248,.5)}
.upsell-secondary{
  display:inline-flex;align-items:center;gap:6px;
  padding:13px 16px;border-radius:11px;
  background:transparent;color:rgba(255,255,255,.65);
  border:1px solid rgba(255,255,255,.10);
  font-size:14px;font-weight:600;
  transition:background .15s, border-color .15s, color .15s;
}
.upsell-secondary:hover{background:rgba(255,255,255,.05);color:#fff;border-color:rgba(255,255,255,.2)}
.upsell-price{
  display:inline-flex;align-items:baseline;gap:4px;
  font-family:var(--vx-serif);font-weight:800;letter-spacing:-.018em;
  margin-bottom:18px;
}
.upsell-price .num{font-size:34px;background:var(--vx-grad-aurora);-webkit-background-clip:text;background-clip:text;color:transparent}
.upsell-card.tier-ultra .upsell-price .num{
  background:linear-gradient(135deg, #fef3c7, #f6c560, #fb7299);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.upsell-price .unit{font-size:14px;color:rgba(255,255,255,.55);font-weight:500;font-family:var(--vx-sans)}
.upsell-foot{
  text-align:center;font-size:11.5px;color:rgba(255,255,255,.4);
  margin-top:14px;line-height:1.5;
}

/* Mini mode */
.cat-panel.mini{width:56px;cursor:pointer}
.cat-panel.mini .cat-search,
.cat-panel.mini .cat-head h3 span,
.cat-panel.mini .cat-head-actions .iconbtn-sm:not(#cat-mini),
.cat-panel.mini .cat-section-head,
.cat-panel.mini .cat-icon[data-style] [data-name]{display:none !important}
.cat-panel.mini .cat-head{padding:10px 6px;justify-content:center}
.cat-panel.mini .cat-head h3{justify-content:center}
.cat-panel.mini .cat-head h3 svg{margin:0}
.cat-panel.mini #cat-mini svg{transform:rotate(180deg)}
.cat-panel.mini .cat-list{padding:4px;display:flex;flex-direction:column;gap:6px;align-items:center}
.cat-panel.mini .cat-section{margin:0;width:100%}
.cat-panel.mini .cat-icons{display:grid !important;grid-template-columns:1fr;gap:4px;padding:0}
.cat-panel.mini .cat-icon{width:40px;height:40px;aspect-ratio:auto;margin:0 auto}

/* Peek tab */
.cat-peek{
  position:fixed;left:18px;top:88px;z-index:35;
  width:40px;height:40px;border-radius:11px;
  background:linear-gradient(180deg, rgba(26,28,39,.95), rgba(18,19,28,.98));
  border:1px solid rgba(255,255,255,.10);
  color:var(--vx-paper);display:flex;align-items:center;justify-content:center;
  cursor:pointer;box-shadow:var(--vx-shadow-2);
  transition:transform .2s var(--spring), background .2s, color .2s, border-color .2s;
}
.cat-peek:hover{
  transform:translateX(3px) scale(1.06);
  color:var(--vx-iris);
  border-color:rgba(129,140,248,.4);
}
.cat-peek.hidden{display:none}

/* ============================================================
   WORKSPACE — asymmetric atelier layout
   ============================================================ */
.workspace{
  position:absolute;top:58px;left:0;right:0;bottom:0;
  display:grid;grid-template-columns:1fr 440px;gap:0;
}

/* ============================================================
   RIGHT DOCK — Document pane (editorial typography)
   ============================================================ */
.doc-pane{
  background:linear-gradient(180deg, rgba(16,17,25,.65), rgba(12,13,20,.85));
  border-left:1px solid rgba(255,255,255,.06);
  display:flex;flex-direction:column;position:relative;
  backdrop-filter:blur(20px);
}
.doc-pane::before{
  content:'';position:absolute;top:0;left:0;bottom:0;width:1px;
  background:linear-gradient(180deg, transparent, rgba(129,140,248,.18), rgba(56,189,248,.10), transparent);
  pointer-events:none;
}
.doc-toolbar{
  display:flex;align-items:center;gap:6px;
  padding:10px 18px;height:46px;
  border-bottom:1px solid rgba(255,255,255,.04);
}
.doc-tool{
  background:transparent;color:rgba(255,255,255,.55);
  padding:6px 10px;border-radius:7px;font-size:12.5px;
  display:inline-flex;align-items:center;gap:6px;
  transition:background .15s,color .15s;
}
.doc-tool:hover{background:rgba(255,255,255,.06);color:#fff}
.doc-tool.active{background:rgba(129,140,248,.15);color:var(--vx-iris)}
.doc-tool-sep{width:1px;height:20px;background:rgba(255,255,255,.08);margin:0 4px}
#btn-visualize{
  margin-left:auto;
  background:linear-gradient(135deg, rgba(99,102,241,.18), rgba(56,189,248,.14));
  border:1px solid rgba(129,140,248,.3);
  color:var(--vx-iris);
}
#btn-visualize:hover{
  background:linear-gradient(135deg, rgba(99,102,241,.28), rgba(56,189,248,.22));
  color:#fff;border-color:rgba(129,140,248,.55);
}

.doc{
  flex:1;overflow-y:auto;
  padding:40px 44px 140px;
  font-family:var(--vx-serif);
  font-size:16px;line-height:1.65;
  color:rgba(232,231,234,.85);
  outline:none;
  font-weight:400;letter-spacing:-.003em;
}
.doc h1{
  font-size:32px;font-weight:800;color:#fff;margin:30px 0 14px;
  font-family:var(--vx-serif);letter-spacing:-.024em;line-height:1.1;
}
.doc h2{
  font-size:21px;font-weight:700;color:#fff;margin:28px 0 10px;
  font-family:var(--vx-serif);letter-spacing:-.014em;
}
.doc h3{font-size:17px;font-weight:600;color:#fff;margin:20px 0 8px;font-family:var(--vx-serif)}
.doc p{margin:0 0 14px}
.doc ul{padding-left:24px;margin:10px 0 18px}
.doc li{margin:6px 0;list-style:none;position:relative}
.doc li::before{
  content:'';position:absolute;left:-18px;top:.65em;
  width:6px;height:6px;border-radius:50%;
  background:var(--vx-grad-aurora);
}
.doc b,.doc strong{color:#fff;font-weight:700}
.doc::-webkit-scrollbar{width:8px}
.doc::-webkit-scrollbar-thumb{background:rgba(255,255,255,.08);border-radius:4px}
.doc::selection{background:rgba(129,140,248,.32)}
.doc *::selection{background:rgba(129,140,248,.32)}

/* ============================================================
   FLOATING TOOLS — bottom-right zoom/export cluster
   ============================================================ */
.floating-tools{
  position:absolute;bottom:160px;right:24px;left:auto;transform:none;
  z-index:10;display:flex;flex-direction:column;gap:4px;
  background:linear-gradient(180deg, rgba(26,28,39,.85), rgba(18,19,28,.92));
  backdrop-filter:blur(16px);
  border:1px solid rgba(255,255,255,.08);
  border-radius:11px;padding:5px;
  box-shadow:var(--vx-shadow-2);
}
.floating-tools .iconbtn-sm{width:34px;height:34px;color:rgba(255,255,255,.7)}
.floating-tools .iconbtn-sm:hover{background:rgba(129,140,248,.15);color:#fff}

/* ============================================================
   CUSTOMIZE PANEL — right floating
   ============================================================ */
.cz-panel{
  position:fixed;right:18px;top:78px;
  width:300px;max-height:calc(100vh - 110px);
  background:linear-gradient(180deg, rgba(26,28,39,.78), rgba(18,19,28,.86));
  backdrop-filter:blur(24px) saturate(150%);
  -webkit-backdrop-filter:blur(24px) saturate(150%);
  border:1px solid rgba(255,255,255,.08);
  border-radius:18px;z-index:25;
  box-shadow:var(--vx-shadow-3);
  display:flex;flex-direction:column;overflow:hidden;
}
.cz-panel::before{
  content:'';position:absolute;top:0;left:14px;right:14px;height:1px;
  background:linear-gradient(90deg, transparent, rgba(246,197,96,.5), rgba(251,114,153,.4), transparent);
  border-radius:1px;
}
.cz-panel.hidden{display:none}
.cz-head{display:flex;align-items:center;justify-content:space-between;padding:14px 16px}
.cz-title{
  display:flex;align-items:center;gap:9px;
  color:var(--vx-amber);font-size:13.5px;font-weight:700;letter-spacing:-.005em;
}
.cz-body{padding:0 16px 16px;overflow-y:auto;display:flex;flex-direction:column;gap:16px}
.cz-body::-webkit-scrollbar{width:6px}
.cz-body::-webkit-scrollbar-thumb{background:rgba(255,255,255,.10);border-radius:3px}
.cz-group label{
  display:block;font-size:10px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;
  color:rgba(255,255,255,.4);margin-bottom:8px;
}
.cz-row{display:flex;align-items:center;justify-content:space-between}
.cz-row label{margin-bottom:0}
.cz-swatches{display:flex;flex-wrap:wrap;gap:5px}
.cz-swatch{
  width:32px;height:32px;border-radius:8px;cursor:pointer;
  border:2px solid transparent;transition:transform .12s var(--spring),border-color .15s, box-shadow .2s;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.08);
}
.cz-swatch:hover{transform:scale(1.1);box-shadow:0 6px 14px -4px rgba(0,0,0,.6), inset 0 0 0 1px rgba(255,255,255,.2)}
.cz-swatch.active{border-color:#fff;box-shadow:0 0 0 2px rgba(255,255,255,.2), 0 6px 14px -4px rgba(0,0,0,.6)}
.cz-select{
  width:100%;background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.08);
  color:#fff;padding:8px 11px;border-radius:9px;font-size:13px;outline:none;
}
.cz-select:focus{border-color:rgba(246,197,96,.45)}
.cz-toggle{position:relative;width:36px;height:20px;display:inline-block}
.cz-toggle input{opacity:0;width:0;height:0}
.cz-toggle span{
  position:absolute;inset:0;border-radius:999px;background:rgba(255,255,255,.1);
  cursor:pointer;transition:background .15s;
}
.cz-toggle span:before{
  content:'';position:absolute;left:2px;top:2px;width:16px;height:16px;
  border-radius:50%;background:#fff;transition:transform .2s var(--spring);
}
.cz-toggle input:checked + span{background:var(--vx-amber)}
.cz-toggle input:checked + span:before{transform:translateX(16px)}
.cz-export-grid{display:grid;grid-template-columns:1fr 1fr;gap:6px}
.cz-btn{
  background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08);
  color:var(--vx-paper);padding:9px 11px;border-radius:9px;font-size:12px;font-weight:600;
  transition:all .15s;cursor:pointer;
}
.cz-btn:hover{border-color:rgba(246,197,96,.4);background:rgba(246,197,96,.06);color:#fff}
.cz-btn-wide{
  grid-column:span 2;
  background:var(--vx-grad-aurora);
  border-color:transparent;color:#0a0b13;font-weight:700;
}
.cz-btn-wide:hover{transform:translateY(-1px);box-shadow:0 8px 18px -6px rgba(56,189,248,.55);background:var(--vx-grad-aurora);color:#0a0b13}
.cz-hint{font-size:11px;color:rgba(255,255,255,.4);margin:8px 0 0;line-height:1.5}
.cz-show-btn{
  position:fixed;right:18px;bottom:120px;
  background:linear-gradient(180deg, rgba(26,28,39,.95), rgba(18,19,28,.98));
  border:1px solid rgba(246,197,96,.3);
  color:var(--vx-amber);padding:9px 16px;border-radius:11px;
  display:flex;align-items:center;gap:7px;
  font-size:12.5px;font-weight:600;z-index:30;
  box-shadow:var(--vx-shadow-2);
}
.cz-show-btn:hover{background:linear-gradient(180deg, rgba(36,38,49,.95), rgba(28,29,38,.98));border-color:rgba(246,197,96,.55)}

/* ============================================================
   AI SUGGESTIONS panel
   ============================================================ */
.ai-panel{
  position:fixed;left:316px;top:78px;
  width:320px;max-height:calc(100vh - 110px);
  background:linear-gradient(180deg, rgba(26,28,39,.78), rgba(18,19,28,.86));
  backdrop-filter:blur(24px) saturate(150%);
  -webkit-backdrop-filter:blur(24px) saturate(150%);
  border:1px solid rgba(255,255,255,.08);
  border-radius:18px;z-index:25;
  box-shadow:var(--vx-shadow-3);
  display:flex;flex-direction:column;overflow:hidden;
}
.ai-panel::before{
  content:'';position:absolute;top:0;left:14px;right:14px;height:1px;
  background:linear-gradient(90deg, transparent, rgba(56,189,248,.5), rgba(99,102,241,.4), transparent);
  border-radius:1px;
}
.ai-panel.hidden{display:none}
.ai-head{display:flex;align-items:center;justify-content:space-between;padding:14px 16px 10px}
.ai-title{
  display:flex;align-items:center;gap:9px;
  color:var(--vx-azure);font-size:13.5px;font-weight:700;letter-spacing:-.005em;
}
.ai-analysis{display:flex;flex-wrap:wrap;gap:4px;padding:0 16px 12px}
.ai-chip{
  padding:4px 10px;border-radius:999px;
  font-size:10.5px;font-weight:600;
  background:rgba(255,255,255,.04);
  color:rgba(255,255,255,.55);
  border:1px solid rgba(255,255,255,.06);
  letter-spacing:.02em;
}
.ai-chip.intent{background:rgba(56,189,248,.12);color:#67e8f9;border-color:rgba(56,189,248,.28)}
.ai-chip.confidence{background:rgba(52,211,153,.12);color:#86efac;border-color:rgba(52,211,153,.28)}
.ai-chip.data{background:rgba(246,197,96,.12);color:var(--vx-amber);border-color:rgba(246,197,96,.28)}

.ai-grid{display:grid;grid-template-columns:1fr 1fr;gap:7px;padding:8px 14px 16px;overflow-y:auto}
.ai-grid::-webkit-scrollbar{width:6px}
.ai-grid::-webkit-scrollbar-thumb{background:rgba(255,255,255,.10);border-radius:3px}
.ai-card{
  aspect-ratio:1.25;background:rgba(255,255,255,.025);
  border:1px solid rgba(255,255,255,.07);
  border-radius:10px;cursor:pointer;
  display:flex;flex-direction:column;padding:7px;
  transition:transform .2s var(--spring), border-color .15s, background .15s, box-shadow .2s;
  position:relative;overflow:hidden;
}
.ai-card:hover{
  border-color:rgba(56,189,248,.5);
  transform:translateY(-2px);
  background:rgba(56,189,248,.04);
  box-shadow:0 8px 22px -8px rgba(56,189,248,.4);
}
.ai-card.active{
  border-color:var(--vx-azure);
  background:rgba(56,189,248,.08);
  box-shadow:0 0 0 1px rgba(56,189,248,.5), 0 8px 22px -8px rgba(56,189,248,.5);
}
.ai-card svg{flex:1;width:100%;height:auto;min-height:0}
.ai-card .ai-name{
  font-size:9.5px;color:rgba(255,255,255,.55);text-align:center;
  text-transform:uppercase;letter-spacing:.06em;font-weight:700;
  margin-top:3px;
}
.ai-card.active .ai-name{color:var(--vx-azure)}
.ai-card .score-pill{
  position:absolute;top:5px;right:5px;
  padding:2px 6px;border-radius:999px;
  font-size:9px;font-weight:700;
  background:rgba(56,189,248,.18);color:#67e8f9;
}
.ai-show-btn{
  position:fixed;left:18px;bottom:120px;
  background:linear-gradient(180deg, rgba(26,28,39,.95), rgba(18,19,28,.98));
  border:1px solid rgba(56,189,248,.3);
  color:var(--vx-azure);padding:9px 16px;border-radius:11px;
  display:flex;align-items:center;gap:7px;
  font-size:12.5px;font-weight:600;z-index:30;
  box-shadow:var(--vx-shadow-2);
}
.ai-show-btn:hover{background:linear-gradient(180deg, rgba(36,38,49,.95), rgba(28,29,38,.98));border-color:rgba(56,189,248,.55)}

/* ============================================================
   AI MODAL
   ============================================================ */
.ai-modal{
  position:fixed;inset:0;z-index:200;
  display:flex;align-items:center;justify-content:center;
  background:rgba(7,8,13,.70);backdrop-filter:blur(8px);
  animation:fadein .2s ease;
}
@keyframes fadein{from{opacity:0}to{opacity:1}}
.ai-modal.hidden{display:none}
.ai-modal-card{
  width:min(560px, 92vw);
  background:linear-gradient(180deg, rgba(24,26,38,.98), rgba(16,17,25,.98));
  border:1px solid rgba(255,255,255,.10);
  border-radius:18px;padding:24px 24px 20px;
  box-shadow:var(--vx-shadow-4);
}
.ai-modal-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px}
.ai-modal-head h3{
  margin:0;font-size:22px;font-weight:800;
  font-family:var(--vx-serif);letter-spacing:-.02em;
  background:var(--vx-grad-aurora);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.ai-modal-sub{color:rgba(255,255,255,.55);font-size:13px;line-height:1.55;margin:0 0 18px}
.ai-modal-row{display:flex;flex-direction:column;gap:6px;margin-bottom:14px}
.ai-modal-row label{font-size:10.5px;font-weight:700;color:rgba(255,255,255,.5);text-transform:uppercase;letter-spacing:.6px}
.ai-modal-row input,.ai-modal-row select{
  background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.08);
  color:#fff;padding:10px 13px;border-radius:9px;font-size:13px;outline:none;
  transition:border-color .15s, background .15s;
}
.ai-modal-row input:focus,.ai-modal-row select:focus{border-color:var(--vx-iris);background:rgba(255,255,255,.05)}
.ai-modal-actions{display:flex;gap:8px;margin-top:8px}
.ai-modal-result{
  margin-top:16px;padding:14px;border-radius:11px;
  background:rgba(99,102,241,.08);border:1px solid rgba(99,102,241,.2);
  font-size:12.5px;color:var(--vx-paper);line-height:1.6;display:none;
}
.ai-modal-result.show{display:block;animation:fadein .2s}
.ai-regen-btn{
  background:var(--vx-grad-aurora) !important;
  color:#0a0b13 !important;font-weight:700 !important;
  border:none !important;position:relative;overflow:hidden;
  transition:transform .2s var(--spring), box-shadow .2s;
}
.ai-regen-btn:hover{transform:translateY(-2px);box-shadow:0 12px 30px -8px rgba(56,189,248,.55)}
.ai-regen-btn::after{
  content:'';position:absolute;inset:0;
  background:linear-gradient(120deg,transparent 30%,rgba(255,255,255,.4) 50%,transparent 70%);
  transform:translateX(-100%);
}
.ai-regen-btn:hover::after{animation:shine .9s ease forwards}
@keyframes shine{to{transform:translateX(100%)}}

.ai-progress{display:none;margin-top:14px}
.ai-progress.show{display:block;animation:fadein .2s}
.ai-prog-bar{height:6px;border-radius:3px;background:rgba(255,255,255,.06);overflow:hidden}
.ai-prog-bar span{
  display:block;height:100%;width:0;
  background:var(--vx-grad-aurora);background-size:200% 100%;
  transition:width .5s var(--spring);
  animation:progFlow 2s linear infinite;
}
@keyframes progFlow{0%{background-position:0 0}100%{background-position:200% 0}}
.ai-prog-msg{font-size:12px;color:rgba(255,255,255,.55);font-weight:500}
.ai-prog-row{display:flex;align-items:center;gap:10px;margin-bottom:8px}
.ai-modal-result code{
  background:rgba(0,0,0,.35);padding:1px 6px;border-radius:4px;
  font-family:var(--vx-mono);font-size:11.5px;
}

/* AI quick-connect grid */
.ai-quick{display:grid;grid-template-columns:repeat(2,1fr);gap:8px;margin-bottom:16px}
.ai-quick-btn{
  display:flex;align-items:center;gap:10px;
  background:rgba(255,255,255,.025);border:1px solid rgba(255,255,255,.07);
  color:#fff;padding:11px 13px;border-radius:11px;
  font-size:12.5px;text-align:left;cursor:pointer;
  transition:transform .15s var(--spring), border-color .15s, background .15s;
}
.ai-quick-btn:hover{
  transform:translateY(-2px);
  border-color:var(--vx-iris);
  background:rgba(99,102,241,.06);
  box-shadow:0 8px 22px -8px rgba(99,102,241,.4);
}
.ai-quick-btn svg{color:var(--vx-iris);flex:0 0 auto}
.ai-quick-btn span{display:flex;flex-direction:column;gap:2px;line-height:1.2}
.ai-quick-btn b{font-size:13px;font-weight:700}
.ai-quick-btn small{font-size:11px;color:rgba(255,255,255,.5);font-weight:400}
.ai-quick-btn.active{border-color:var(--vx-emerald);background:rgba(52,211,153,.06)}

/* Blue dots loader */
.bluedots{display:inline-flex;gap:6px;align-items:center}
.bluedots span{
  width:8px;height:8px;border-radius:50%;
  background:var(--vx-iris);
  animation:blueBounce 1.2s ease-in-out infinite;
}
.bluedots span:nth-child(2){animation-delay:.15s;background:var(--vx-azure)}
.bluedots span:nth-child(3){animation-delay:.30s;background:var(--vx-amber)}
@keyframes blueBounce{0%,80%,100%{transform:scale(.6);opacity:.4}40%{transform:scale(1.1);opacity:1}}

/* ============================================================
   FLOATING VISUAL ACTION MENU (right-click context menu)
   ============================================================ */
.va-menu{
  position:fixed;z-index:60;width:220px;
  background:linear-gradient(180deg, rgba(38,40,52,.92), rgba(24,26,38,.96));
  backdrop-filter:blur(28px) saturate(150%);
  -webkit-backdrop-filter:blur(28px) saturate(150%);
  border:1px solid rgba(255,255,255,.10);
  border-radius:16px;
  box-shadow:var(--vx-shadow-4);
  padding:8px;display:flex;flex-direction:column;gap:2px;
  animation:va-pop .22s var(--spring);
}
@keyframes va-pop{from{opacity:0;transform:translateX(8px) scale(.96)}to{opacity:1;transform:none}}
.va-menu.hidden{display:none}
.va-item{
  display:flex;align-items:center;gap:10px;
  background:transparent;color:rgba(232,231,234,.85);
  padding:9px 11px;border-radius:9px;
  font-size:13px;font-weight:500;text-align:left;
  transition:background .15s, color .15s, transform .12s var(--spring);
}
.va-item:hover{background:linear-gradient(90deg, rgba(99,102,241,.14), rgba(56,189,248,.06));color:#fff;transform:translateX(2px)}
.va-item:active{transform:scale(.98)}
.va-item svg{flex:0 0 14px;color:rgba(255,255,255,.55)}
.va-item:hover svg{color:var(--vx-iris)}
.va-item span{flex:1}
.va-item .va-chev{flex:0 0 auto;color:rgba(255,255,255,.35);font-size:13px;font-weight:400}
.va-item.va-export{background:linear-gradient(135deg, rgba(99,102,241,.16), rgba(56,189,248,.10));color:#fff}
.va-item.va-export svg{color:var(--vx-iris)}
.va-badge{
  flex:0 0 auto;font-size:9px;font-weight:700;letter-spacing:.5px;
  background:var(--vx-iris);color:#fff;padding:2px 6px;border-radius:5px;
}
.va-badge-ai{background:var(--vx-grad-aurora);color:#0a0b13}

/* Submenu flyout */
.va-sub{
  position:fixed;z-index:61;
  min-width:220px;max-width:340px;width:340px;
  max-height:min(78vh, 720px);overflow-y:auto;
  background:linear-gradient(180deg, rgba(24,26,38,.98), rgba(16,17,25,.98));
  backdrop-filter:blur(16px);
  border:1px solid rgba(255,255,255,.10);
  border-radius:14px;
  box-shadow:var(--vx-shadow-4);
  padding:8px;
  animation:va-pop .18s ease-out both;
}
.va-sub.hidden{display:none}
.va-sub::-webkit-scrollbar{width:6px}
.va-sub::-webkit-scrollbar-thumb{background:rgba(255,255,255,.12);border-radius:3px}
.va-sub-title{
  font-size:10.5px;font-weight:700;color:rgba(255,255,255,.5);text-transform:uppercase;letter-spacing:.8px;
  padding:6px 10px 10px;
}
.va-sub button.va-sub-item{
  display:flex;align-items:center;gap:9px;width:100%;
  background:transparent;color:rgba(232,231,234,.85);
  padding:8px 11px;border-radius:8px;
  font-size:13px;font-weight:500;text-align:left;
  transition:background .12s;
}
.va-sub button.va-sub-item:hover{background:rgba(129,140,248,.12);color:#fff}
.va-sub-swatches{display:grid;grid-template-columns:repeat(5,1fr);gap:6px;padding:4px 6px}
.va-sub-sw{
  aspect-ratio:1;border-radius:8px;cursor:pointer;
  border:2px solid rgba(255,255,255,.06);
  transition:transform .15s var(--spring), border-color .12s;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.08);
}
.va-sub-sw:hover{transform:scale(1.08);border-color:#fff}
.va-sub-info{font-size:12.5px;color:rgba(232,231,234,.85);line-height:1.55;padding:4px 10px 8px}
.va-sub-info b{color:#fff}
.va-pal-search{padding:0 4px 8px}
.va-pal-q{
  width:100%;background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.08);
  color:var(--vx-paper);padding:7px 10px;border-radius:8px;font-size:12px;outline:none;
}
.va-pal-q:focus{border-color:var(--vx-iris)}
.va-pal-list,.va-font-list{display:flex;flex-direction:column;gap:1px;max-height:220px;overflow-y:auto;padding:2px 0}
.va-pal-list::-webkit-scrollbar,.va-font-list::-webkit-scrollbar,.va-sub::-webkit-scrollbar{width:5px}
.va-pal-list::-webkit-scrollbar-thumb,.va-font-list::-webkit-scrollbar-thumb,.va-sub::-webkit-scrollbar-thumb{background:rgba(255,255,255,.10);border-radius:3px}
.va-pal-row{justify-content:flex-start !important;gap:10px}
.va-pal-strip{display:inline-flex;gap:2px;flex:0 0 auto}
.va-pal-strip span{width:14px;height:14px;border-radius:3px}
.va-pal-name{flex:1;text-align:left}
.va-font-row{display:flex;justify-content:space-between !important;align-items:baseline}
.va-font-name{font-size:13px;color:#fff;font-weight:600}
.va-font-prev{font-size:13px;color:rgba(255,255,255,.55);letter-spacing:.5px}
.va-bg-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:5px;padding:4px 6px}
.va-bg-tile{
  aspect-ratio:1;border-radius:8px;border:2px solid rgba(255,255,255,.08);
  cursor:pointer;transition:transform .18s var(--spring),border-color .18s;
}
.va-bg-tile:hover{transform:scale(1.1) rotate(-2deg);border-color:#fff}
.va-range{
  width:calc(100% - 12px);margin:6px;
  -webkit-appearance:none;appearance:none;
  height:6px;border-radius:3px;
  background:var(--vx-grad-aurora);
  outline:none;
}
.va-range::-webkit-slider-thumb{
  -webkit-appearance:none;appearance:none;
  width:16px;height:16px;border-radius:50%;
  background:#fff;border:2px solid var(--vx-ink);
  box-shadow:0 2px 6px rgba(0,0,0,.5);cursor:grab;
}
.va-range::-webkit-slider-thumb:active{cursor:grabbing}

/* Size controls — expanded for pro workspace */
.size-s  .diagram-host svg{max-width:72%}
.size-m  .diagram-host svg{max-width:88%}
.size-l  .diagram-host svg{max-width:100%}
.size-xl .diagram-host svg{max-width:100%}
.size-s  .diagram-host{max-width:1800px}
.size-m  .diagram-host{max-width:2800px}
.size-l  .diagram-host{max-width:3800px}
.size-xl .diagram-host{max-width:4800px}

/* ============================================================
   PER-ELEMENT INLINE EDITOR
   ============================================================ */
.el-edit{
  position:fixed;z-index:80;
  width:280px;padding:14px;
  background:linear-gradient(180deg, rgba(24,26,38,.98), rgba(16,17,25,.98));
  backdrop-filter:blur(16px);
  border:1px solid rgba(255,255,255,.10);
  border-radius:14px;
  box-shadow:var(--vx-shadow-4);
  animation:el-pop .22s var(--spring);
  transform-origin:top left;
}
.el-edit.hidden{display:none}
@keyframes el-pop{0%{opacity:0;transform:scale(.9) translateY(-4px)}100%{opacity:1;transform:scale(1) translateY(0)}}
.el-edit-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px}
.el-edit-tag{
  font-size:10px;font-weight:700;letter-spacing:.6px;text-transform:uppercase;
  background:var(--vx-grad-aurora);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.el-edit-row{display:flex;flex-direction:column;gap:6px;margin-bottom:11px}
.el-edit-row label{font-size:10px;font-weight:700;color:rgba(255,255,255,.5);text-transform:uppercase;letter-spacing:.6px}
.el-edit-row input[type="text"],.el-edit-row input:not([type]),.el-edit-row select{
  background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.08);
  color:#fff;padding:7px 11px;border-radius:8px;font-size:12px;outline:none;
}
.el-edit-row input:focus,.el-edit-row select:focus{border-color:var(--vx-iris)}
.el-edit-row input[type="range"]{
  -webkit-appearance:none;appearance:none;height:4px;border-radius:2px;
  background:rgba(255,255,255,.10);outline:none;
}
.el-edit-row input[type="range"]::-webkit-slider-thumb{
  -webkit-appearance:none;appearance:none;width:14px;height:14px;border-radius:50%;
  background:#fff;border:2px solid var(--vx-ink);box-shadow:0 2px 6px rgba(0,0,0,.4);cursor:grab;
}
.el-edit-row input[type="color"]{
  height:32px;border:1px solid rgba(255,255,255,.08);border-radius:8px;padding:2px;
  background:rgba(255,255,255,.03);cursor:pointer;
}
.el-edit-swatches{display:flex;gap:4px;flex-wrap:wrap}
.el-edit-swatches button{
  width:22px;height:22px;border-radius:6px;cursor:pointer;
  border:1.5px solid rgba(255,255,255,.10);
  transition:transform .18s var(--spring), border-color .15s;
}
.el-edit-swatches button:hover{transform:scale(1.1);border-color:#fff}
.el-edit-row #el-edit-size-val{font-size:11px;color:rgba(255,255,255,.55);align-self:flex-end}

/* Highlight selected element */
.diagram-host svg [data-vs-selected]{outline:2px dashed var(--vx-iris);outline-offset:3px}

/* Element hover */
.diagram-host svg [data-vs-pickable]{cursor:pointer;transition:filter .15s ease}
.diagram-host svg [data-vs-pickable]:hover{filter:brightness(1.15) drop-shadow(0 0 6px rgba(129,140,248,.6))}

/* ============================================================
   EFFECTS — refined Atelier palette
   ============================================================ */
.fx-glow .diagram-host svg{filter:hue-rotate(var(--hue)) drop-shadow(0 0 24px rgba(129,140,248,.45)) drop-shadow(0 12px 30px rgba(0,0,0,.4))}
.fx-vivid .diagram-host svg{filter:hue-rotate(var(--hue)) saturate(1.35) contrast(1.08) drop-shadow(0 16px 44px rgba(0,0,0,.5))}
.fx-mono .diagram-host svg{filter:hue-rotate(var(--hue)) grayscale(.9) brightness(1.1)}
.fx-soft .diagram-host svg{filter:hue-rotate(var(--hue)) blur(.3px) brightness(1.02) drop-shadow(0 12px 36px rgba(0,0,0,.35))}
.fx-neon .diagram-host svg{filter:hue-rotate(var(--hue)) drop-shadow(0 0 8px #ff00ff) drop-shadow(0 0 16px #00ffff) saturate(1.4)}
.fx-holo .diagram-host svg{filter:hue-rotate(var(--hue)) saturate(1.3) drop-shadow(0 0 10px rgba(255,0,255,.4)) drop-shadow(0 0 18px rgba(0,255,255,.4))}
.fx-frost .diagram-host{backdrop-filter:blur(8px)}
.fx-frost .diagram-host svg{filter:hue-rotate(var(--hue)) blur(.4px) brightness(1.05) drop-shadow(0 0 18px rgba(255,255,255,.18))}
.fx-paper .diagram-host svg{filter:hue-rotate(var(--hue)) sepia(.15) contrast(.96) brightness(1.02) drop-shadow(0 4px 12px rgba(0,0,0,.18))}
.fx-blueprint .diagram-host svg{filter:hue-rotate(190deg) saturate(2) brightness(1.1) drop-shadow(0 0 12px rgba(0,180,255,.5))}
.fx-blueprint .canvas-area{background:repeating-linear-gradient(0deg,#003566,#003566 1px,#001d3d 1px,#001d3d 30px),repeating-linear-gradient(90deg,#003566,#003566 1px,#001d3d 1px,#001d3d 30px) !important}
.fx-sketch .diagram-host svg{filter:hue-rotate(var(--hue)) contrast(1.1) drop-shadow(1px 1px 0 rgba(0,0,0,.2)) drop-shadow(-1px -1px 0 rgba(0,0,0,.1))}
.fx-retro .diagram-host svg{filter:hue-rotate(var(--hue)) saturate(1.5) contrast(1.15) drop-shadow(2px 0 0 rgba(255,0,0,.5)) drop-shadow(-2px 0 0 rgba(0,255,255,.5))}
.fx-noir .diagram-host svg{filter:hue-rotate(var(--hue)) grayscale(1) contrast(1.4) brightness(.85) drop-shadow(0 12px 30px rgba(0,0,0,.7))}
.fx-dream .diagram-host svg{filter:hue-rotate(var(--hue)) blur(.5px) saturate(1.15) brightness(1.06) drop-shadow(0 0 30px rgba(251,114,153,.45))}
.fx-3d .diagram-host svg{
  filter:hue-rotate(var(--hue))
    drop-shadow(2px 2px 0 #6366f1)
    drop-shadow(4px 4px 0 #38bdf8)
    drop-shadow(6px 6px 0 #f6c560)
    drop-shadow(0 18px 40px rgba(0,0,0,.4));
}

/* Animated mesh background */
.canvas-area.mesh-anim{
  background:radial-gradient(at 20% 20%, rgba(129,140,248,.28), transparent 50%),
             radial-gradient(at 80% 60%, rgba(56,189,248,.26), transparent 50%),
             radial-gradient(at 50% 90%, rgba(246,197,96,.16), transparent 50%),
             var(--vx-ink) !important;
  animation:meshShift 18s ease-in-out infinite;
  background-size:200% 200%;
}
@keyframes meshShift{0%,100%{background-position:0 0}50%{background-position:100% 100%}}

/* ============================================================
   STATUS BAR — bottom-left, shows live workspace state
   Ultra-pro touch: persistent context indicator like Figma's bottom bar
   ============================================================ */
.statusbar{
  position:fixed;left:18px;bottom:18px;z-index:38;
  display:flex;align-items:center;gap:0;
  background:linear-gradient(180deg, rgba(26,28,39,.85), rgba(18,19,28,.92));
  backdrop-filter:blur(18px) saturate(140%);
  -webkit-backdrop-filter:blur(18px) saturate(140%);
  border:1px solid rgba(255,255,255,.10);
  border-radius:12px;
  box-shadow:var(--vx-shadow-2);
  font-family:var(--vx-mono);
  font-size:11px;font-weight:500;letter-spacing:.02em;
  color:rgba(255,255,255,.7);
  overflow:hidden;
  transition:opacity .25s var(--silk), transform .25s var(--spring);
}
.statusbar.hidden{opacity:0;transform:translateY(6px);pointer-events:none}
.statusbar-cell{
  display:inline-flex;align-items:center;gap:6px;
  padding:8px 12px;
  border-right:1px solid rgba(255,255,255,.06);
  white-space:nowrap;
}
.statusbar-cell:last-child{border-right:none}
.statusbar-cell .dot{
  width:6px;height:6px;border-radius:50%;
  background:var(--vx-emerald);box-shadow:0 0 6px rgba(52,211,153,.6);
}
.statusbar-cell .dot.idle{background:var(--vx-ash);box-shadow:none}
.statusbar-cell .dot.warn{background:var(--vx-amber);box-shadow:0 0 6px rgba(246,197,96,.6)}
.statusbar-cell.layout{color:var(--vx-iris)}
.statusbar-cell.palette{display:inline-flex;align-items:center;gap:5px}
.statusbar-cell.palette .strip{display:inline-flex;gap:1.5px;margin-right:4px}
.statusbar-cell.palette .strip span{width:8px;height:8px;border-radius:2px}
.statusbar-cell.zoom{color:rgba(255,255,255,.6);font-variant-numeric:tabular-nums}
.statusbar-cell.save{color:var(--vx-emerald)}
.statusbar-cell.save.saving{color:var(--vx-amber)}
.statusbar-cell.save.saving .dot{background:var(--vx-amber);box-shadow:0 0 6px rgba(246,197,96,.6);animation:savePulse 1s ease-in-out infinite}
@keyframes savePulse{0%,100%{opacity:1}50%{opacity:.4}}

/* ============================================================
   MINIMAP — anchored to canvas-area's right side
   (doc-pane is 440px wide on viewport-right, so we offset past it)
   ============================================================ */
.minimap{
  position:fixed;right:464px;bottom:18px;z-index:38;
  width:200px;height:128px;
  background:linear-gradient(180deg, rgba(26,28,39,.85), rgba(18,19,28,.92));
  backdrop-filter:blur(18px);
  border:1px solid rgba(255,255,255,.10);
  border-radius:12px;
  box-shadow:var(--vx-shadow-2);
  padding:8px;
  display:flex;flex-direction:column;
  transition:opacity .25s var(--silk), transform .25s var(--spring);
}
.minimap.hidden{opacity:0;transform:translateY(6px);pointer-events:none}
.minimap-head{
  display:flex;align-items:center;justify-content:space-between;
  font-family:var(--vx-mono);font-size:9px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  color:rgba(255,255,255,.45);
  margin-bottom:6px;padding:0 4px;
}
.minimap-head svg{color:rgba(255,255,255,.4);width:11px;height:11px}
.minimap-frame{
  flex:1;position:relative;
  background:rgba(255,255,255,.02);
  border:1px solid rgba(255,255,255,.06);
  border-radius:7px;overflow:hidden;
  display:flex;align-items:center;justify-content:center;
}
.minimap-frame svg{
  max-width:90%;max-height:90%;
  filter:brightness(.92);
  display:block;
}
.minimap-frame::after{
  content:'';position:absolute;
  border:1.5px solid var(--vx-iris);
  border-radius:3px;
  pointer-events:none;
  /* Position computed by JS — defaults to full */
  left:8%;top:8%;right:8%;bottom:8%;
  box-shadow:0 0 0 9999px rgba(7,8,13,.45);
}
@media (max-width:980px){.minimap{display:none}}

/* ============================================================
   AUTO-SAVE INDICATOR — slim pill in topbar
   ============================================================ */
.autosave-pill{
  display:inline-flex;align-items:center;gap:6px;
  font-family:var(--vx-mono);font-size:11px;font-weight:500;letter-spacing:.04em;
  color:rgba(255,255,255,.5);
  padding:5px 10px;border-radius:7px;
  background:rgba(255,255,255,.02);
  border:1px solid rgba(255,255,255,.05);
  transition:color .2s, background .2s, border-color .2s;
}
.autosave-pill.saving{color:var(--vx-amber);border-color:rgba(246,197,96,.25);background:rgba(246,197,96,.04)}
.autosave-pill.saved{color:var(--vx-emerald);border-color:rgba(52,211,153,.25);background:rgba(52,211,153,.04)}
.autosave-pill .as-dot{width:5px;height:5px;border-radius:50%;background:currentColor}
.autosave-pill.saving .as-dot{animation:savePulse 1s ease-in-out infinite}

/* ============================================================
   ONBOARDING PULSE — first-run halo on prompt bar
   ============================================================ */
.prompt-bar.onboarding::after{
  content:'';position:absolute;inset:-4px;border-radius:22px;
  border:2px solid rgba(129,140,248,.5);
  animation:onboardPulse 2s ease-in-out infinite;
  pointer-events:none;
}
@keyframes onboardPulse{
  0%,100%{box-shadow:0 0 0 0 rgba(129,140,248,.4);opacity:1}
  50%{box-shadow:0 0 0 14px rgba(129,140,248,0);opacity:.6}
}

/* ============================================================
   TOOLTIPS — minimal, slot-locked
   ============================================================ */
[data-tip]{position:relative}
[data-tip]:hover::after{
  content:attr(data-tip);
  position:absolute;left:50%;bottom:calc(100% + 8px);transform:translateX(-50%);
  background:rgba(12,13,20,.98);
  color:#fff;font-size:11px;font-weight:500;letter-spacing:.005em;
  padding:5px 9px;border-radius:6px;white-space:nowrap;
  pointer-events:none;z-index:200;
  border:1px solid rgba(255,255,255,.08);
  box-shadow:0 6px 16px -4px rgba(0,0,0,.6);
  animation:tip-in .18s var(--quick) both;
}
[data-tip]:hover::before{
  content:'';position:absolute;left:50%;bottom:calc(100% + 4px);transform:translateX(-50%);
  border:4px solid transparent;border-top-color:rgba(12,13,20,.98);
  pointer-events:none;z-index:200;
  animation:tip-in .18s var(--quick) both;
}
@keyframes tip-in{from{opacity:0;transform:translate(-50%, 3px)}to{opacity:1;transform:translate(-50%, 0)}}
[data-tip-side="right"]:hover::after{left:calc(100% + 10px);bottom:auto;top:50%;transform:translateY(-50%)}
[data-tip-side="right"]:hover::before{left:calc(100% + 6px);bottom:auto;top:50%;transform:translateY(-50%);border-color:transparent;border-right-color:rgba(12,13,20,.98)}

/* ============================================================
   TOAST
   ============================================================ */
.toast{
  position:fixed;bottom:120px;left:50%;transform:translateX(-50%) translateY(20px);
  background:linear-gradient(180deg, rgba(38,40,52,.96), rgba(24,26,38,.98));
  border:1px solid rgba(255,255,255,.10);
  color:#fff;padding:11px 18px;border-radius:11px;
  font-size:13px;font-weight:500;
  opacity:0;pointer-events:none;
  transition:opacity .2s, transform .25s var(--spring);
  z-index:100;
  box-shadow:var(--vx-shadow-3);
}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0)}

/* ============================================================
   PREMIUM MOTION SYSTEM
   ============================================================ */
.cat-panel,.ai-panel,.cz-panel,.va-menu,.va-sub,.ai-modal-card{
  transition:opacity .28s var(--silk), transform .35s var(--spring);
}
.cat-panel.hidden{display:flex !important;opacity:0;transform:translateX(-12px) scale(.98);pointer-events:none}
.ai-panel.hidden{display:flex !important;opacity:0;transform:translateX(12px) scale(.98);pointer-events:none}
.cz-panel.hidden{display:flex !important;opacity:0;transform:translateY(8px) scale(.98);pointer-events:none}

/* Stagger category icons */
.cat-section.open .cat-icon{animation:ic-in .42s var(--spring) both}
.cat-section.open .cat-icon:nth-child(1){animation-delay:.02s}
.cat-section.open .cat-icon:nth-child(2){animation-delay:.05s}
.cat-section.open .cat-icon:nth-child(3){animation-delay:.08s}
.cat-section.open .cat-icon:nth-child(4){animation-delay:.11s}
.cat-section.open .cat-icon:nth-child(5){animation-delay:.14s}
.cat-section.open .cat-icon:nth-child(6){animation-delay:.17s}
.cat-section.open .cat-icon:nth-child(7){animation-delay:.20s}
.cat-section.open .cat-icon:nth-child(8){animation-delay:.23s}
.cat-section.open .cat-icon:nth-child(9){animation-delay:.26s}
.cat-section.open .cat-icon:nth-child(10){animation-delay:.29s}
@keyframes ic-in{0%{opacity:0;transform:translateY(6px) scale(.85)}60%{opacity:1;transform:translateY(-1px) scale(1.04)}100%{opacity:1;transform:translateY(0) scale(1)}}

/* Stagger AI cards */
.ai-card{animation:ic-in .5s var(--spring) both}
.ai-card:nth-child(1){animation-delay:.04s}
.ai-card:nth-child(2){animation-delay:.08s}
.ai-card:nth-child(3){animation-delay:.12s}
.ai-card:nth-child(4){animation-delay:.16s}
.ai-card:nth-child(5){animation-delay:.20s}
.ai-card:nth-child(6){animation-delay:.24s}
.ai-card:nth-child(n+7){animation-delay:.28s}

/* Document subtle entry */
.doc h1,.doc h2,.doc p,.doc ul{animation:doc-rise .55s var(--silk) both}
.doc h1{animation-delay:.05s}
.doc h2{animation-delay:.10s}
.doc p{animation-delay:.15s}
.doc ul{animation-delay:.20s}
@keyframes doc-rise{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

/* Top bar fade-in */
.topbar{animation:top-in .5s var(--silk) both}
@keyframes top-in{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}

/* Diagram swap */
.diagram-host.swapping{opacity:0;transform:scale(.985)}

/* Stagger entrance for diagram primitives */
.diagram-host svg > g,
.diagram-host svg > rect,
.diagram-host svg > path,
.diagram-host svg > circle,
.diagram-host svg > polygon,
.diagram-host svg > ellipse,
.diagram-host svg > text,
.diagram-host svg > line{
  animation:el-rise .55s var(--spring) both;
}
.diagram-host svg > *:nth-child(1){animation-delay:.02s}
.diagram-host svg > *:nth-child(2){animation-delay:.05s}
.diagram-host svg > *:nth-child(3){animation-delay:.08s}
.diagram-host svg > *:nth-child(4){animation-delay:.11s}
.diagram-host svg > *:nth-child(5){animation-delay:.14s}
.diagram-host svg > *:nth-child(6){animation-delay:.17s}
.diagram-host svg > *:nth-child(7){animation-delay:.20s}
.diagram-host svg > *:nth-child(8){animation-delay:.23s}
.diagram-host svg > *:nth-child(9){animation-delay:.26s}
.diagram-host svg > *:nth-child(10){animation-delay:.29s}
.diagram-host svg > *:nth-child(n+11){animation-delay:.32s}
@keyframes el-rise{from{opacity:0;transform:translateY(8px) scale(.985)}to{opacity:1;transform:none}}

/* Legacy variants strip — hidden */
.variants{display:none}

/* ============================================================
   MOBILE FALLBACK
   ============================================================ */
@media (max-width:980px){
  .workspace{grid-template-columns:1fr}
  .doc-pane{display:none}
  .cat-panel{width:240px}
  .ai-panel{left:268px;width:280px}
  .prompt-bar{width:92vw}
}
@media (max-width:640px){
  .topbar{padding:0 14px}
  .tb-left{padding-left:38px}
  .doc-name{width:200px}
  .cat-panel,.ai-panel,.cz-panel{display:none}
}