/* ============================================================
   Visora editor — napkin.ai-faithful UI
   ============================================================ */
*,*::before,*::after{box-sizing:border-box}
html,body{margin:0;padding:0;height:100%}
body{
  font-family:'Source Sans 3','Source Sans Pro','Inter',system-ui,-apple-system,sans-serif;
  background:#1a1a1d;
  color:#e7e7ea;
  -webkit-font-smoothing:antialiased;
  overflow:hidden;
  font-size:14px;
  letter-spacing:.01em;
}
/* Apply Source Sans across editor + diagram surfaces */
.diagram-host svg{font-family:'Source Sans 3','Source Sans Pro','Inter',system-ui,sans-serif !important;}
.doc, .doc-name, .topbar, .va-menu, .va-sub, .ai-modal-card, .cz-panel, .ai-panel, .cat-panel, .toast{
  font-family:'Source Sans 3','Source Sans Pro','Inter',system-ui,sans-serif !important;
}
.doc h1, .doc h2 { font-family:'Source Sans 3','Source Sans Pro',serif; letter-spacing:-.01em; }

/* ============================================================
   LUXE CANVAS — premium gradient mesh + ambient lighting
   ============================================================ */
.canvas-area{
  background:
    radial-gradient(1200px 600px at 12% -10%, rgba(167,139,250,.18), transparent 60%),
    radial-gradient(900px 500px at 100% 100%, rgba(34,211,238,.16), transparent 65%),
    radial-gradient(700px 500px at 50% 50%, rgba(244,114,182,.07), transparent 70%),
    linear-gradient(180deg, #0d0d12 0%, #14141a 100%);
}
/* When a brand background is selected, use it instead — but keep the mesh overlay */
.canvas-area.has-custom-bg{
  background: var(--canvas-bg, linear-gradient(180deg, #0d0d12, #14141a));
}
/* Gradient mesh blobs that drift slowly behind the diagram */
.canvas-area::before{
  content:'';position:absolute;inset:-15%;pointer-events:none;z-index:0;
  background:
    radial-gradient(360px circle at 22% 22%, rgba(167,139,250,.25), transparent 60%),
    radial-gradient(280px circle at 78% 30%, rgba(34,211,238,.22), transparent 60%),
    radial-gradient(420px circle at 50% 92%, rgba(244,114,182,.18), transparent 60%),
    radial-gradient(320px circle at 88% 76%, rgba(251,191,36,.15), transparent 60%);
  filter:blur(40px);
  animation: meshDrift 18s ease-in-out infinite alternate;
}
@keyframes meshDrift{
  0%   { transform:translate(0,0) scale(1) }
  50%  { transform:translate(-20px,10px) scale(1.05) }
  100% { transform:translate(15px,-12px) scale(.98) }
}

/* Animated canvas dot pattern (napkin.ai style) — overlay layer that survives inline background changes */
.canvas-area .canvas-dots,
.canvas-area::before{
  /* fallback handled below */
}
.canvas-area{ position:relative; }
/* Insert a dedicated dot overlay via separate element handled in JS,
   but also provide a fallback ::before so it works without JS. */
.canvas-area .canvas-dots{
  content:'';position:absolute;inset:0;pointer-events:none;
  background-image:radial-gradient(rgba(255,255,255,.10) 1.4px, transparent 1.4px);
  background-size:22px 22px;
  animation: dotDrift 60s linear infinite;
  z-index:0;
}
.canvas-area > *:not(.canvas-dots){ position:relative; z-index:1; }
@keyframes dotDrift {
  0%   { background-position: 0 0; }
  100% { background-position: 44px 44px; }
}
/* Subtle pulsing layer behind diagram */
.canvas-area::after{
  content:'';position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(800px circle at 50% 50%, rgba(167,139,250,.05), transparent 60%);
  animation: pulseGlow 8s ease-in-out infinite;
}
@keyframes pulseGlow {
  0%,100% { opacity:.55 } 50% { opacity:1 }
}

/* Blue-dots progress (napkin-style) */
.bluedots{
  display:inline-flex;gap:6px;align-items:center;
}
.bluedots span{
  width:8px;height:8px;border-radius:50%;
  background:#3b82f6;
  animation: blueBounce 1.2s ease-in-out infinite;
}
.bluedots span:nth-child(2){ animation-delay:.15s; background:#60a5fa; }
.bluedots span:nth-child(3){ animation-delay:.30s; background:#93c5fd; }
@keyframes blueBounce {
  0%,80%,100% { transform: scale(.6); opacity:.4; }
  40%         { transform: scale(1.1); opacity:1;  }
}
button{font-family:inherit;cursor:pointer}
input,textarea{font-family:inherit}

/* ---------- Top bar ---------- */
.topbar{
  position:fixed;top:0;left:0;right:0;height:54px;z-index:50;
  display:flex;align-items:center;justify-content:space-between;
  padding:0 16px;background:transparent;
}
.tb-left,.tb-right{display:flex;align-items:center;gap:8px}
.tb-center{flex:1;display:flex;justify-content:center}
.iconbtn{
  display:inline-flex;align-items:center;gap:6px;
  background:transparent;border:none;color:#cfcfd2;
  padding:7px 10px;border-radius:8px;font-size:13.5px;font-weight:500;
  transition:background .15s,color .15s;
}
.iconbtn:hover{background:rgba(255,255,255,.06);color:#fff}
.iconbtn-square{padding:7px;width:32px;height:32px;justify-content:center}
.newbtn{
  display:inline-flex;align-items:center;gap:8px;
  background:#fff;color:#1a1a1d;
  border:none;border-radius:10px;padding:8px 14px;
  font-weight:600;font-size:13.5px;
  box-shadow:0 1px 0 rgba(0,0,0,.05);
}
.newbtn:hover{background:#f5f5f5}
.newbtn span{font-size:16px;line-height:1;font-weight:500;opacity:.7}
.doc-name{
  background:transparent;border:none;outline:none;
  color:#9a9a9f;font-size:13px;text-align:center;
  width:340px;padding:6px 10px;border-radius:6px;
  transition:background .15s,color .15s;
}
.doc-name:hover{background:rgba(255,255,255,.04);color:#cfcfd2}
.doc-name:focus{background:rgba(255,255,255,.06);color:#fff}
/* ---------- Direct-manipulation canvas editor ---------- */
.vs-canvas-toolbar{
  position:fixed;left:50%;bottom:80px;transform:translateX(-50%);
  z-index:55;
  display:flex;align-items:center;gap:4px;padding:6px;
  background:rgba(28,28,32,.96);
  backdrop-filter:blur(14px);
  border:1px solid rgba(255,255,255,.10);
  border-radius:14px;
  box-shadow:0 18px 44px -10px rgba(0,0,0,.55);
  animation: tbIn .35s var(--spring,cubic-bezier(.34,1.56,.64,1));
}
@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:#e7e7ea;font-size:14px;font-weight:700;cursor:pointer;
  display:inline-flex;align-items:center;justify-content:center;
  transition:transform .15s var(--spring,ease), background .15s, border-color .15s;
}
.vs-canvas-toolbar button:hover{
  background:rgba(167,139,250,.18);
  border-color:rgba(167,139,250,.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}

/* Selection cursor signal in SVG */
.diagram-host svg [data-vs-id]:hover{
  cursor:move;
}
.diagram-host svg .vs-selected{
  filter:drop-shadow(0 0 6px rgba(167,139,250,.7));
}

/* ---------- Library + Brand Studio modals ---------- */
.lib-modal, .brand-modal{
  position:fixed;inset:0;z-index:200;
  display:flex;align-items:center;justify-content:center;
  background:rgba(0,0,0,.55);backdrop-filter:blur(6px);
  animation: fadein .22s ease;
}
.lib-modal.hidden, .brand-modal.hidden{display:none}
.lib-modal-card, .brand-modal-card{
  width:min(820px,92vw);max-height:84vh;
  background:#1e1e22;
  border:1px solid rgba(255,255,255,.08);
  border-radius:18px;
  padding:22px 22px 16px;
  box-shadow:0 30px 80px rgba(0,0,0,.55);
  animation: liftIn .35s var(--spring,ease) both;
  overflow:hidden;display:flex;flex-direction:column;gap:12px;
}
@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:20px;font-weight:800;color:#fff;
  background:linear-gradient(135deg,#a78bfa,#22d3ee);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.lib-modal-sub, .brand-modal-sub{
  margin:4px 0 0;font-size:13px;color:#a1a1aa;
}
.lib-tabs{display:flex;gap:4px;padding:4px;background:rgba(255,255,255,.04);border-radius:9px;width:fit-content}
.lib-tab{
  background:transparent;border:none;color:#a1a1aa;
  padding:6px 14px;border-radius:7px;font-size:12.5px;font-weight:600;cursor:pointer;
  transition:background .15s, color .15s;
}
.lib-tab:hover{color:#fff}
.lib-tab.active{background:rgba(167,139,250,.18);color:#fff}

.lib-grid, .brand-grid{
  display:grid;grid-template-columns:repeat(3,1fr);gap:10px;
  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,.10);border-radius:3px}

.lib-card, .brand-card{
  background:rgba(255,255,255,.03);
  border:1px solid rgba(255,255,255,.08);
  border-radius:12px;padding:10px;cursor:pointer;
  transition:transform .18s var(--spring,ease), border-color .15s, background .15s, box-shadow .2s;
  display:flex;flex-direction:column;gap:6px;
  animation: rise .45s var(--spring,ease) both;
}
.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}
@keyframes rise{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.lib-card:hover, .brand-card:hover{
  transform:translateY(-3px);
  border-color:#a78bfa;
  background:rgba(255,255,255,.05);
  box-shadow:0 12px 30px -8px rgba(167,139,250,.4);
}
.lib-card-thumb{
  aspect-ratio:5/3;border-radius:8px;overflow:hidden;
  background:linear-gradient(135deg,#262830,#1c1d22);
  display:flex;align-items:center;justify-content:center;
}
.lib-card-thumb svg{width:100%;height:100%;display:block}
.lib-card-name{font-size:13px;font-weight:700;color:#fff}
.lib-card-meta{font-size:11px;color:#a1a1aa}

.brand-card-strip{display:flex;height:52px;border-radius:8px;overflow:hidden}
.brand-card-strip span{flex:1}
.brand-card-name{font-size:14px;font-weight:700;color:#fff}
.brand-card-meta{font-size:11px;color:#a1a1aa}

/* ---------- AI status pill in topbar ---------- */
.ai-status-pill{
  display:inline-flex;align-items:center;gap:8px;
  background:linear-gradient(135deg,rgba(167,139,250,.20),rgba(34,211,238,.18));
  border:1px solid rgba(167,139,250,.35);
  color:#fff;
  padding:6px 12px;border-radius:999px;
  font-size:12.5px;font-weight:600;letter-spacing:.2px;
  cursor:pointer;
  transition:transform .15s var(--spring,ease), box-shadow .2s, background .2s;
}
.ai-status-pill:hover{
  transform:translateY(-1px);
  box-shadow:0 8px 22px -8px rgba(167,139,250,.45);
  background:linear-gradient(135deg,rgba(167,139,250,.32),rgba(34,211,238,.30));
}
.ai-status-pill svg{color:#a78bfa}
.ai-pill-dot{
  width:8px;height:8px;border-radius:50%;background:#71717a;
  box-shadow:0 0 0 2px rgba(113,113,122,.18);
}
.ai-status-pill.connected{
  background:linear-gradient(135deg,rgba(34,197,94,.22),rgba(167,139,250,.20));
  border-color:rgba(34,197,94,.45);
}
.ai-status-pill.connected .ai-pill-dot{
  background:#22c55e;box-shadow:0 0 0 3px rgba(34,197,94,.25);animation:dotPulse 2s ease-in-out infinite;
}
@keyframes dotPulse{0%,100%{box-shadow:0 0 0 3px rgba(34,197,94,.25)}50%{box-shadow:0 0 0 6px rgba(34,197,94,.10)}}

/* Categories minimize behavior — icons-only column */
.cat-panel.mini{
  width:54px;
  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 4px 12px;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:38px;height:38px;aspect-ratio:auto;
  margin:0 auto;
}
.cat-panel.mini .cat-icon[title]:hover::after{
  content:attr(data-label);
  position:absolute;left:46px;top:50%;transform:translateY(-50%);
  background:rgba(28,28,32,.95);border:1px solid rgba(255,255,255,.10);
  color:#fff;padding:4px 8px;border-radius:6px;font-size:11px;white-space:nowrap;
  pointer-events:none;
}

/* Peek tab visible only when panel fully closed */
.cat-peek{
  position:fixed;left:18px;top:84px;z-index:35;
  width:38px;height:38px;border-radius:10px;
  background:rgba(38,38,42,.95);
  border:1px solid rgba(255,255,255,.10);
  color:#cfcfd2;display:flex;align-items:center;justify-content:center;
  cursor:pointer;
  box-shadow:0 12px 30px -8px rgba(0,0,0,.5);
  transition:transform .18s var(--spring,ease), background .2s, color .2s;
}
.cat-peek:hover{transform:translateX(2px) scale(1.05);color:#fff;background:rgba(48,48,54,.98)}
.cat-peek.hidden{display:none}

/* AI quick-connect grid */
.ai-quick{
  display:grid;grid-template-columns:repeat(2,1fr);gap:8px;margin-bottom:14px;
}
.ai-quick-btn{
  display:flex;align-items:center;gap:10px;
  background:#1e1e22;border:1px solid rgba(255,255,255,.08);
  color:#fff;padding:10px 12px;border-radius:10px;
  font-size:12.5px;text-align:left;cursor:pointer;
  transition:transform .15s var(--spring,ease), border-color .15s, background .15s;
}
.ai-quick-btn:hover{
  transform:translateY(-2px);
  border-color:#a78bfa;
  background:#26262c;
  box-shadow:0 8px 22px -8px rgba(167,139,250,.4);
}
.ai-quick-btn svg{color:#a78bfa;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:#a1a1aa;font-weight:400}
.ai-quick-btn.active{
  border-color:#22c55e;background:rgba(34,197,94,.06);
}

.user-pill{
  width:30px;height:30px;border-radius:50%;
  background:linear-gradient(135deg,#f97316,#ec4899);
  display:flex;align-items:center;justify-content:center;
  color:#fff;font-weight:600;font-size:13px;
}

/* ---------- Categories panel ---------- */
.cat-panel{
  position:fixed;left:18px;top:74px;
  width:264px;max-height:calc(100vh - 100px);
  background:linear-gradient(180deg, rgba(36,36,42,.78), rgba(28,28,34,.85));
  backdrop-filter:blur(22px) saturate(140%);
  -webkit-backdrop-filter:blur(22px) saturate(140%);
  border:1px solid rgba(255,255,255,.10);
  border-radius:18px;z-index:30;
  box-shadow:
    0 32px 60px -16px rgba(0,0,0,.55),
    0 0 0 1px rgba(255,255,255,.04),
    inset 0 1px 0 rgba(255,255,255,.06);
  display:flex;flex-direction:column;
  overflow:hidden;
}
.cat-head{
  display:flex;align-items:center;justify-content:space-between;
  padding:12px 14px 10px;
}
.cat-head h3{
  margin:0;display:flex;align-items:center;gap:8px;
  font-size:14px;font-weight:600;color:#fff;
}
.cat-head-actions{display:flex;gap:4px}
.iconbtn-sm{
  background:transparent;border:none;color:#9a9a9f;
  width:26px;height:26px;border-radius:6px;
  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 14px 8px;
}
.cat-search svg{
  position:absolute;left:10px;top:50%;transform:translateY(-50%);
  color:#71717a;
}
.cat-search input{
  width:100%;background:#1c1c20;
  border:1px solid rgba(255,255,255,.06);
  color:#e7e7ea;padding:8px 12px 8px 32px;
  border-radius:8px;font-size:13px;outline:none;
}
.cat-search input::placeholder{color:#71717a}
.cat-search input:focus{border-color:rgba(249,115,22,.35)}

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

.cat-section{margin:0 0 2px}
.cat-section-head{
  display:flex;align-items:center;justify-content:space-between;
  padding:10px 12px;cursor:pointer;border-radius:8px;
  font-size:13.5px;font-weight:500;color:#e7e7ea;
  transition:background .15s;
}
.cat-section-head:hover{background:rgba(255,255,255,.04)}
.cat-section-head .chev{
  color:#71717a;transition:transform .2s ease;
}
.cat-section.open .chev{transform:rotate(90deg)}
.cat-section.open .cat-section-head{color:#fff}
.cat-icons{
  display:none;
  grid-template-columns:repeat(5,1fr);
  gap:4px;padding:4px 8px 10px;
}
.cat-section.open .cat-icons{display:grid}
.cat-icon{
  aspect-ratio:1;border-radius:7px;
  display:flex;align-items:center;justify-content:center;
  background:rgba(255,255,255,.02);
  border:1px solid rgba(255,255,255,.04);
  color:#9a9a9f;cursor:pointer;
  transition:all .15s ease;
}
.cat-icon:hover{
  background:rgba(255,255,255,.06);
  border-color:rgba(249,115,22,.35);
  color:#fff;transform:translateY(-1px);
}
.cat-icon.active{
  background:rgba(249,115,22,.12);
  border-color:rgba(249,115,22,.5);
  color:#fb923c;
}
.cat-icon svg{width:18px;height:18px}

/* ---------- Workspace ---------- */
.workspace{
  position:absolute;top:54px;left:0;right:0;bottom:0;
  display:grid;grid-template-columns:1fr 420px;
  gap:0;
}

/* ---------- Canvas ---------- */
.canvas-area{
  position:relative;
  overflow:auto;          /* scrollable when content exceeds viewport */
  background:#1a1a1d;
  padding:48px 56px;
  min-height:0;
  display:flex;align-items:flex-start;justify-content:center;
}
/* Custom scrollbar for canvas */
.canvas-area::-webkit-scrollbar{ width:10px;height:10px }
.canvas-area::-webkit-scrollbar-track{ background:transparent }
.canvas-area::-webkit-scrollbar-thumb{
  background:rgba(255,255,255,.10);border-radius:5px;
}
.canvas-area::-webkit-scrollbar-thumb:hover{ background:rgba(167,139,250,.45) }
.canvas-grid{
  position:absolute;inset:0;
  background-image:radial-gradient(circle,rgba(255,255,255,.06) 1px,transparent 1px);
  background-size:18px 18px;
  pointer-events:none;
  mask-image:radial-gradient(ellipse 80% 70% at 50% 50%,#000 50%,transparent 100%);
}
.diagram-host{
  position:relative;z-index:1;
  width:100%;max-width:3200px;    /* 300% — massive workspace */
  min-height:1200px;
  margin:0 auto;
  display:block;
  text-align:center;
  transform:scale(var(--zoom,1));transform-origin:center top;
  transition:transform .25s var(--smooth,ease);
}
.diagram-host svg{
  /* width/height come from sizeSvgToHost() in editor.js as element attributes.
     Avoid max-height with vh units — they resolve to 0 in some embed contexts. */
  max-width:100%;
  filter:drop-shadow(0 4px 20px rgba(0,0,0,.4));
  display:block;
  margin:0 auto;
}

.floating-tools{
  position:absolute;bottom:24px;left:50%;transform:translateX(-50%);
  z-index:10;display:flex;gap:4px;
  background:#26262a;
  border:1px solid rgba(255,255,255,.06);
  border-radius:10px;padding:4px;
  box-shadow:0 8px 24px -6px rgba(0,0,0,.4);
}
.floating-tools .iconbtn-sm{width:32px;height:32px}

/* ---------- Document pane ---------- */
.doc-pane{
  background:#1a1a1d;
  border-left:1px solid rgba(255,255,255,.06);
  display:flex;flex-direction:column;
  position:relative;
}
.doc-toolbar{
  display:flex;align-items:center;gap:4px;
  padding:8px 14px;height:42px;
  border-bottom:1px solid rgba(255,255,255,.04);
}
.doc-tool{
  background:transparent;border:none;color:#9a9a9f;
  padding:5px 9px;border-radius:6px;font-size:12.5px;
  display:inline-flex;align-items:center;gap:5px;
  transition:background .15s,color .15s;
}
.doc-tool:hover{background:rgba(255,255,255,.06);color:#fff}
.doc-tool.active{background:rgba(249,115,22,.15);color:#fb923c}
.doc-tool-sep{width:1px;height:18px;background:rgba(255,255,255,.08);margin:0 4px}
#btn-visualize{margin-left:auto;color:#fb923c}
#btn-visualize:hover{background:rgba(249,115,22,.12);color:#fdba74}

.doc{
  flex:1;overflow-y:auto;
  padding:32px 40px 80px;
  font-family:'Lora',Georgia,serif;
  font-size:15px;line-height:1.65;
  color:#cfcfd2;
  outline:none;
}
.doc h1{font-size:26px;font-weight:600;color:#fff;margin:24px 0 12px}
.doc h2{font-size:19px;font-weight:600;color:#fff;margin:24px 0 8px;font-family:'Inter',sans-serif}
.doc p{margin:0 0 12px}
.doc ul{padding-left:20px;margin:8px 0 16px}
.doc li{margin:4px 0;list-style:disc}
.doc li::marker{color:#71717a}
.doc b,.doc strong{color:#fff;font-weight:600}
.doc::-webkit-scrollbar{width:8px}
.doc::-webkit-scrollbar-thumb{background:rgba(255,255,255,.06);border-radius:4px}
.doc::selection{background:rgba(249,115,22,.3)}
.doc *::selection{background:rgba(249,115,22,.3)}

/* ---------- Customize panel ---------- */
.cz-panel{
  position:fixed;right:18px;top:62px;
  width:280px;max-height:calc(100vh - 90px);
  background:linear-gradient(180deg, rgba(36,36,42,.78), rgba(28,28,34,.85));
  backdrop-filter:blur(22px) saturate(140%);
  -webkit-backdrop-filter:blur(22px) saturate(140%);
  border:1px solid rgba(255,255,255,.10);
  border-radius:18px;z-index:25;
  box-shadow:
    0 32px 60px -16px rgba(0,0,0,.55),
    0 0 0 1px rgba(255,255,255,.04),
    inset 0 1px 0 rgba(255,255,255,.06);
  display:flex;flex-direction:column;overflow:hidden;
}
.cz-panel.hidden{display:none}
.cz-head{display:flex;align-items:center;justify-content:space-between;padding:12px 14px}
.cz-title{display:flex;align-items:center;gap:8px;color:#fbbf24;font-size:13.5px;font-weight:600}
.cz-body{padding:0 14px 14px;overflow-y:auto;display:flex;flex-direction:column;gap:14px}
.cz-body::-webkit-scrollbar{width:6px}
.cz-body::-webkit-scrollbar-thumb{background:rgba(255,255,255,.08);border-radius:3px}
.cz-group label{display:block;font-size:10.5px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:#71717a;margin-bottom:6px}
.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:4px}
.cz-swatch{
  width:30px;height:30px;border-radius:7px;cursor:pointer;
  border:2px solid transparent;transition:transform .12s,border-color .15s;
}
.cz-swatch:hover{transform:scale(1.08)}
.cz-swatch.active{border-color:#fff}
.cz-select{
  width:100%;background:#1c1c20;border:1px solid rgba(255,255,255,.08);
  color:#e7e7ea;padding:7px 10px;border-radius:8px;font-size:13px;outline:none;
  font-family:inherit;
}
.cz-select:focus{border-color:rgba(251,191,36,.4)}
.cz-toggle{position:relative;width:34px;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 .15s;
}
.cz-toggle input:checked + span{background:#fbbf24}
.cz-toggle input:checked + span:before{transform:translateX(14px)}
.cz-export-grid{display:grid;grid-template-columns:1fr 1fr;gap:5px}
.cz-btn{
  background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08);
  color:#e7e7ea;padding:8px 10px;border-radius:8px;font-size:12px;font-weight:500;
  transition:all .15s;cursor:pointer;
}
.cz-btn:hover{border-color:rgba(251,191,36,.4);background:rgba(251,191,36,.06);color:#fff}
.cz-btn-wide{grid-column:span 2;background:linear-gradient(135deg,#f97316,#fb7185);border-color:transparent;color:#fff;font-weight:600}
.cz-btn-wide:hover{transform:translateY(-1px);box-shadow:0 6px 16px -4px rgba(249,115,22,.5)}
.cz-hint{font-size:10.5px;color:#71717a;margin:6px 0 0;line-height:1.4}
.cz-show-btn{
  position:fixed;right:18px;bottom:24px;
  background:#26262a;border:1px solid rgba(251,191,36,.3);
  color:#fbbf24;padding:8px 14px;border-radius:10px;
  display:flex;align-items:center;gap:6px;
  font-size:12.5px;font-weight:600;z-index:30;
  box-shadow:0 8px 20px -6px rgba(0,0,0,.4);
}
.cz-show-btn:hover{background:#2c2c30}

/* ---------- AI Suggestions panel (right of categories, left of canvas) ---------- */
.ai-panel{
  position:fixed;left:300px;top:74px;
  width:300px;max-height:calc(100vh - 100px);
  background:linear-gradient(180deg, rgba(36,36,42,.78), rgba(28,28,34,.85));
  backdrop-filter:blur(22px) saturate(140%);
  -webkit-backdrop-filter:blur(22px) saturate(140%);
  border:1px solid rgba(255,255,255,.10);
  border-radius:18px;z-index:25;
  box-shadow:
    0 32px 60px -16px rgba(0,0,0,.55),
    0 0 0 1px rgba(255,255,255,.04),
    inset 0 1px 0 rgba(255,255,255,.06);
  display:flex;flex-direction:column;overflow:hidden;
}
.ai-panel.hidden{display:none}
.ai-head{
  display:flex;align-items:center;justify-content:space-between;
  padding:12px 14px 8px;
}
.ai-title{
  display:flex;align-items:center;gap:8px;
  color:#22d3ee;font-size:13.5px;font-weight:600;
}
.ai-analysis{
  display:flex;flex-wrap:wrap;gap:4px;
  padding:0 14px 10px;
}
.ai-chip{
  padding:3px 8px;border-radius:999px;
  font-size:10.5px;font-weight:500;
  background:rgba(255,255,255,.05);
  color:#9a9a9f;
  border:1px solid rgba(255,255,255,.06);
  letter-spacing:.02em;
}
.ai-chip.intent{background:rgba(34,211,238,.12);color:#67e8f9;border-color:rgba(34,211,238,.25)}
.ai-chip.confidence{background:rgba(34,197,94,.12);color:#86efac;border-color:rgba(34,197,94,.25)}
.ai-chip.data{background:rgba(249,115,22,.12);color:#fdba74;border-color:rgba(249,115,22,.25)}
.ai-grid{
  display:grid;grid-template-columns:1fr 1fr;gap:6px;
  padding:6px 12px 14px;overflow-y:auto;
}
.ai-grid::-webkit-scrollbar{width:6px}
.ai-grid::-webkit-scrollbar-thumb{background:rgba(255,255,255,.08);border-radius:3px}
.ai-card{
  aspect-ratio:1.2;
  background:#1c1c20;
  border:1px solid rgba(255,255,255,.06);
  border-radius:8px;cursor:pointer;
  display:flex;flex-direction:column;
  padding:6px;
  transition:all .15s ease;
  position:relative;overflow:hidden;
}
.ai-card:hover{border-color:rgba(34,211,238,.4);transform:translateY(-1px)}
.ai-card.active{border-color:#22d3ee;box-shadow:0 0 0 2px rgba(34,211,238,.2)}
.ai-card svg{flex:1;width:100%;height:auto;min-height:0}
.ai-card .ai-name{
  font-size:9.5px;color:#9a9a9f;text-align:center;
  text-transform:uppercase;letter-spacing:.05em;font-weight:600;
  margin-top:2px;
}
.ai-card.active .ai-name{color:#22d3ee}
.ai-card .score-pill{
  position:absolute;top:4px;right:4px;
  padding:1px 6px;border-radius:999px;
  font-size:9px;font-weight:700;
  background:rgba(34,211,238,.15);color:#67e8f9;
}
.ai-show-btn{
  position:fixed;left:18px;bottom:24px;
  background:#26262a;border:1px solid rgba(34,211,238,.3);
  color:#67e8f9;padding:8px 14px;border-radius:10px;
  display:flex;align-items:center;gap:6px;
  font-size:12.5px;font-weight:600;z-index:30;
  box-shadow:0 8px 20px -6px rgba(0,0,0,.4);
}
.ai-show-btn:hover{background:#2c2c30;border-color:rgba(34,211,238,.5)}

/* ---------- Variants strip (legacy — kept for fallback) ---------- */
.variants{
  position:fixed;bottom:0;left:0;right:420px;
  background:linear-gradient(180deg,transparent,rgba(26,26,29,.95) 30%);
  padding:32px 24px 20px;z-index:5;
  pointer-events:none;
  display:none;
}
.variants-label{
  font-size:11px;font-weight:600;color:#71717a;
  text-transform:uppercase;letter-spacing:.08em;
  margin-bottom:8px;text-align:center;
}
.variants-row{
  display:flex;gap:8px;justify-content:center;
  flex-wrap:nowrap;overflow-x:auto;pointer-events:auto;
  padding:0 8px 4px;
}
.variants-row::-webkit-scrollbar{height:4px}
.variants-row::-webkit-scrollbar-thumb{background:rgba(255,255,255,.1);border-radius:2px}
.variant-thumb{
  flex:0 0 auto;
  width:96px;height:64px;
  background:#26262a;
  border:1px solid rgba(255,255,255,.06);
  border-radius:8px;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  padding:6px;transition:all .15s ease;
  position:relative;
}
.variant-thumb:hover{border-color:rgba(249,115,22,.4);transform:translateY(-2px)}
.variant-thumb.active{border-color:#f97316;box-shadow:0 0 0 2px rgba(249,115,22,.2)}
.variant-thumb svg{width:100%;height:100%}
.variant-thumb .vname{
  position:absolute;bottom:-18px;left:0;right:0;text-align:center;
  font-size:10px;color:#71717a;
}

/* ---------- Premium motion system ---------- */
:root{
  --spring: cubic-bezier(.34,1.56,.64,1);
  --smooth: cubic-bezier(.22,.61,.36,1);
  --quick:  cubic-bezier(.4,0,.2,1);
}
.cat-panel,.ai-panel,.cz-panel,.va-menu,.va-sub,.ai-modal-card{
  transition: opacity .28s var(--smooth), transform .35s var(--spring);
}
/* Override display:none so panels animate in/out instead of popping */
.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 animation for 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); }
}

/* Premium hover micro-interaction on icons */
.cat-icon{transition:transform .25s var(--spring), background .15s, border-color .15s, box-shadow .25s}
.cat-icon:hover{
  transform:translateY(-2px) scale(1.05);
  box-shadow:0 8px 22px -8px rgba(167,139,250,.45), 0 0 0 1px rgba(167,139,250,.4);
}
.cat-icon.active{
  box-shadow:0 0 0 1px rgba(249,115,22,.55), 0 8px 22px -8px rgba(249,115,22,.45);
}

/* Stagger AI suggestion 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(--smooth) 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(--smooth) both}
@keyframes top-in { from{opacity:0; transform:translateY(-6px)} to{opacity:1; transform:none} }

/* Smooth diagram swap */
.diagram-host{transition: opacity .25s var(--quick), transform .35s var(--spring)}
.diagram-host.swapping{opacity:0; transform:scale(.985)}

/* Cursor-aware glow — applied to diagram-host so it doesn't fight the canvas mesh */
.diagram-host{
  background-image:radial-gradient(400px circle at var(--mx,50%) var(--my,50%),
    rgba(167,139,250,.08), transparent 60%);
  transition:background .4s ease;
}

/* Floating Visual Action Menu ---------- */
.va-menu{
  position:fixed;z-index:60;
  width:212px;
  background:linear-gradient(180deg, rgba(40,40,48,.85), rgba(28,28,34,.92));
  backdrop-filter:blur(28px) saturate(140%);
  -webkit-backdrop-filter:blur(28px) saturate(140%);
  border:1px solid rgba(255,255,255,.12);
  border-radius:16px;
  box-shadow:
    0 32px 70px -18px rgba(0,0,0,.7),
    0 0 0 1px rgba(255,255,255,.04),
    inset 0 1px 0 rgba(255,255,255,.08);
  padding:8px;
  display:flex;flex-direction:column;gap:2px;
  animation:va-pop .22s cubic-bezier(.34,1.56,.64,1) both;
}
@keyframes va-pop {
  from { opacity:0; transform:translateX(8px) scale(.96); }
  to   { opacity:1; transform:translateX(0)   scale(1); }
}
.va-menu.hidden{display:none}
.va-item{
  display:flex;align-items:center;gap:10px;
  background:transparent;border:none;color:#d4d4dc;
  padding:8px 10px;border-radius:8px;
  font-size:13px;font-weight:500;text-align:left;
  transition:background .15s,color .15s,transform .12s;
  cursor:pointer;
}
.va-item:hover{background:rgba(255,255,255,.06);color:#fff}
.va-item:active{transform:scale(.98)}
.va-item svg{flex:0 0 14px;color:#a1a1aa}
.va-item:hover svg{color:#fff}
.va-item span{flex:1}
.va-item .va-chev{flex:0 0 auto;color:#71717a;font-size:13px;font-weight:400}
.va-item.va-export{
  background:rgba(255,255,255,.05);
  color:#fff;
}
.va-item.va-export svg{color:#fff}
.va-badge{
  flex:0 0 auto;font-size:9px;font-weight:700;letter-spacing:.5px;
  background:#3b82f6;color:#fff;padding:2px 5px;border-radius:4px;
}
.va-badge-ai{background:linear-gradient(135deg,#a78bfa,#22d3ee)}

/* Submenu flyout */
.va-sub{
  position:fixed;z-index:61;
  min-width:200px;max-width:280px;
  background:rgba(38,38,42,.97);
  backdrop-filter:blur(14px);
  border:1px solid rgba(255,255,255,.08);
  border-radius:12px;
  box-shadow:0 24px 60px -10px rgba(0,0,0,.6);
  padding:8px;
  animation:va-pop .18s ease-out both;
}
.va-sub.hidden{display:none}
.va-sub-title{
  font-size:11px;font-weight:600;color:#a1a1aa;text-transform:uppercase;letter-spacing:.6px;
  padding:6px 8px 8px;
}
.va-sub button.va-sub-item{
  display:flex;align-items:center;gap:8px;width:100%;
  background:transparent;border:none;color:#d4d4dc;
  padding:7px 10px;border-radius:7px;
  font-size:13px;font-weight:500;text-align:left;cursor:pointer;
  transition:background .12s;
}
.va-sub button.va-sub-item:hover{background:rgba(255,255,255,.07);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 .12s,border-color .12s;
}
.va-sub-sw:hover{transform:scale(1.07);border-color:#fff}
.va-sub-info{
  font-size:12px;color:#d4d4dc;line-height:1.5;padding:4px 8px 6px;
}
.va-sub-info b{color:#fff}

/* ---------- AI modal ---------- */
.ai-modal{
  position:fixed;inset:0;z-index:200;
  display:flex;align-items:center;justify-content:center;
  background:rgba(0,0,0,.55);backdrop-filter:blur(6px);
  animation:fadein .2s ease;
}
@keyframes fadein { from{opacity:0} to{opacity:1} }
.ai-modal.hidden{display:none}
.ai-modal-card{
  width:min(520px,92vw);
  background:#1e1e22;
  border:1px solid rgba(255,255,255,.08);
  border-radius:16px;padding:22px 22px 18px;
  box-shadow:0 30px 80px rgba(0,0,0,.5);
}
.ai-modal-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:6px}
.ai-modal-head h3{margin:0;font-size:18px;font-weight:700;color:#fff;
  background:linear-gradient(135deg,#a78bfa,#22d3ee);-webkit-background-clip:text;background-clip:text;color:transparent;
}
.ai-modal-sub{color:#a1a1aa;font-size:13px;line-height:1.5;margin:0 0 16px}
.ai-modal-row{display:flex;flex-direction:column;gap:6px;margin-bottom:12px}
.ai-modal-row label{font-size:11px;font-weight:600;color:#a1a1aa;text-transform:uppercase;letter-spacing:.5px}
.ai-modal-row input,.ai-modal-row select{
  background:#26262a;border:1px solid rgba(255,255,255,.08);
  color:#fff;padding:9px 12px;border-radius:8px;font-size:13px;outline:none;
}
.ai-modal-row input:focus,.ai-modal-row select:focus{border-color:#a78bfa}
.ai-modal-actions{display:flex;gap:8px;margin-top:6px}
.ai-modal-result{
  margin-top:14px;padding:12px;border-radius:10px;
  background:rgba(167,139,250,.08);border:1px solid rgba(167,139,250,.18);
  font-size:12.5px;color:#e7e7ea;line-height:1.55;
  display:none;
}
.ai-modal-result.show{display:block;animation:fadein .2s}
.ai-regen-btn{
  background:linear-gradient(135deg,#a78bfa,#22d3ee) !important;
  color:#0e0e12 !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(167,139,250,.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:12px}
.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:linear-gradient(90deg,#a78bfa,#22d3ee,#fbbf24,#f472b6);
  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:#a1a1aa;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,.3);padding:1px 6px;border-radius:4px;
  font-family:ui-monospace,monospace;font-size:11.5px;
}

/* ---------- Diagram canvas extra polish ---------- */
.diagram-host svg{
  filter:drop-shadow(0 16px 44px rgba(0,0,0,.45));
  transition:filter .3s ease;
}
.diagram-host{--hue:0deg}
.diagram-host svg{filter:hue-rotate(var(--hue)) drop-shadow(0 16px 44px rgba(0,0,0,.45));transition:filter .35s ease}
.fx-glow .diagram-host svg{filter:hue-rotate(var(--hue)) drop-shadow(0 0 24px rgba(167,139,250,.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(244,114,182,.45))}
.fx-3d    .diagram-host svg{
  filter:hue-rotate(var(--hue))
    drop-shadow(2px 2px 0 #ff006e)
    drop-shadow(4px 4px 0 #fb5607)
    drop-shadow(6px 6px 0 #ffbe0b)
    drop-shadow(0 18px 40px rgba(0,0,0,.4));
}
/* Animated mesh background option */
.canvas-area.mesh-anim{
  background:radial-gradient(at 20% 20%,#a78bfa44,transparent 50%),
             radial-gradient(at 80% 60%,#22d3ee44,transparent 50%),
             radial-gradient(at 50% 90%,#f472b633,transparent 50%),
             #0e0e12 !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%}}

/* Submenu rich elements */
.va-sub{
  width:320px;
  max-height: min(78vh, 720px);
  overflow-y:auto;
  z-index:75; /* above va-menu */
  background:rgba(28,28,32,.98);
  box-shadow:0 30px 80px -10px rgba(0,0,0,.7), 0 0 0 1px rgba(255,255,255,.06);
}
.va-sub::-webkit-scrollbar{width:6px}
.va-sub::-webkit-scrollbar-thumb{background:rgba(255,255,255,.12);border-radius:3px}

/* Per-element inline editor */
.el-edit{
  position:fixed; z-index:80;
  width:260px; padding:12px;
  background:rgba(28,28,32,.98);
  backdrop-filter:blur(14px);
  border:1px solid rgba(255,255,255,.10);
  border-radius:14px;
  box-shadow:0 24px 60px -10px rgba(0,0,0,.7), 0 0 0 1px rgba(0,0,0,.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:8px}
.el-edit-tag{
  font-size:10px;font-weight:700;letter-spacing:.6px;text-transform:uppercase;
  background:linear-gradient(135deg,#a78bfa,#22d3ee);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.el-edit-row{display:flex;flex-direction:column;gap:6px;margin-bottom:10px}
.el-edit-row label{font-size:10px;font-weight:600;color:#a1a1aa;text-transform:uppercase;letter-spacing:.5px}
.el-edit-row input[type="text"], .el-edit-row input:not([type]),
.el-edit-row select{
  background:#1c1c20;border:1px solid rgba(255,255,255,.08);
  color:#fff;padding:6px 10px;border-radius:7px;font-size:12px;outline:none;
}
.el-edit-row input:focus,.el-edit-row select:focus{border-color:#a78bfa}
.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 #18181b;box-shadow:0 2px 6px rgba(0,0,0,.4);cursor:grab;
}
.el-edit-row input[type="color"]{
  height:30px;border:1px solid rgba(255,255,255,.08);border-radius:7px;padding:2px;
  background:#1c1c20;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:#a1a1aa;align-self:flex-end}

/* Highlight the selected element with a soft outline */
.diagram-host svg [data-vs-selected]{
  outline:2px dashed #a78bfa;outline-offset:2px;
}

/* 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; }
}

/* Element hover signal so user knows things are clickable */
.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(167,139,250,.6)) }
.va-pal-search{padding:0 4px 6px}
.va-pal-q{
  width:100%;background:#1c1c20;border:1px solid rgba(255,255,255,.08);
  color:#e7e7ea;padding:6px 10px;border-radius:7px;font-size:12px;outline:none;
}
.va-pal-q:focus{border-color:#a78bfa}
.va-pal-list,.va-font-list{display:flex;flex-direction:column;gap:1px;max-height:200px;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,.08);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:#a1a1aa;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:7px;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:linear-gradient(90deg,#ef4444,#f59e0b,#84cc16,#06b6d4,#a78bfa,#ec4899,#ef4444);
  outline:none;
}
.va-range::-webkit-slider-thumb{
  -webkit-appearance:none; appearance:none;
  width:16px;height:16px;border-radius:50%;
  background:#fff;border:2px solid #18181b;box-shadow:0 2px 6px rgba(0,0,0,.4);
  cursor:grab;
}
.va-range::-webkit-slider-thumb:active{cursor:grabbing}

.size-s  .diagram-host svg{max-width:70%}
.size-m  .diagram-host svg{max-width:88%}
.size-l  .diagram-host svg{max-width:100%}
.size-xl .diagram-host svg{max-width:100%}
/* 300% canvas — let the host expand wide */
.size-s  .diagram-host{ max-width: 1200px; }
.size-m  .diagram-host{ max-width: 2000px; }
.size-l  .diagram-host{ max-width: 2800px; }
.size-xl .diagram-host{ max-width: 3200px; }

/* ---------- Toast ---------- */
.toast{
  position:fixed;bottom:24px;left:50%;transform:translateX(-50%) translateY(20px);
  background:#26262a;border:1px solid rgba(255,255,255,.08);
  color:#fff;padding:10px 16px;border-radius:8px;
  font-size:13px;font-weight:500;
  opacity:0;pointer-events:none;
  transition:opacity .2s,transform .2s;
  z-index:100;
}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0)}

/* ---------- Mobile fallback ---------- */
@media (max-width:980px){
  .workspace{grid-template-columns:1fr}
  .doc-pane{display:none}
  .cat-panel{width:240px}
  .variants{right:0}
}