/* ============================================================
   NUVEX APP THEME — the landing page's look for the app
   (results canvas + dashboard). Loaded LAST on both pages so one
   set of tokens and one set of controls drives everything:
   warm paper, flat colour, Geist, violet pills, mono eyebrows,
   one ease. Change the look here, never per page.
   ============================================================ */
:root{
  /* palette comes from design-system.css (v6); these are local aliases */
  --nx-white:var(--nx-surface);
  --nx-near:var(--nx-text-2);
  --nx-line-dark:var(--nx-line-strong);
  --nx-violet-deep:var(--nx-violet-hover);
  --nx-violet-soft:var(--nx-field);   /* no pale lilac fills: quiet states use the neutral field */
  --nx-violet-band:var(--nx-line);
  --nx-coral:var(--nx-red);
  --nx-ease:cubic-bezier(.16,1,.3,1);
  --nx-sans:'Geist',-apple-system,BlinkMacSystemFont,'Segoe UI',system-ui,sans-serif;
  --nx-mono:'Geist Mono',ui-monospace,Menlo,monospace;
  --nx-shadow-1:0 1px 2px rgba(16,16,20,.05);
  --nx-shadow-2:0 1px 2px rgba(16,16,20,.04),0 14px 34px -22px rgba(16,16,20,.32);
  --nx-shadow-3:0 1px 2px rgba(16,16,20,.05),0 28px 64px -30px rgba(16,16,20,.42);

  /* design-system.css tokens, remapped */
  --paper:var(--nx-white);
  --paper-warm:var(--nx-paper);
  --paper-deep:var(--nx-field);
  --paper-edge:rgba(16,16,20,.10);
  --ink:var(--nx-ink);
  --ink-soft:var(--nx-near);
  --ink-mute:var(--nx-sub);
  --ink-faint:var(--nx-mute);
  --line:var(--nx-line);
  --line-strong:var(--nx-line-dark);
  --lav:var(--nx-violet);
  --lav-deep:var(--nx-violet-deep);
  --lav-soft:var(--nx-violet);
  --lav-mist:var(--nx-violet-soft);
  --lav-glow:rgba(110,86,207,.16);
  --font-display:var(--nx-sans);
  --font-body:var(--nx-sans);
  --ease:var(--nx-ease);
  --shadow-1:var(--nx-shadow-1);
  --shadow-2:var(--nx-shadow-2);
  --shadow-3:var(--nx-shadow-3);
  --shadow-lav:0 0 0 1px var(--nx-violet);

  /* dashboard's own token family, remapped */
  --bg:var(--nx-paper);--sf:var(--nx-white);--sf2:var(--nx-paper);--sf3:var(--nx-field);
  --tx:var(--nx-ink);--tx2:var(--nx-sub);--tx3:var(--nx-mute);
  --bd:var(--nx-line);--bd2:var(--nx-line-dark);
  --ac:var(--nx-violet);--ac-h:var(--nx-violet-deep);--ac-l:var(--nx-violet);--ac-ll:var(--nx-violet-soft);
  --ez:var(--nx-ease);
  --sh-ring:0 0 0 1px var(--nx-line);
  --sh-md:var(--nx-shadow-2);
  --sh-lg:var(--nx-shadow-3);
}
[data-theme="dark"]{
  --nx-paper:#111113;--nx-field:#1F1F23;--nx-surface:#18181B;
  --nx-ink:#F4F4F5;--nx-text-2:#D9D9DE;--nx-sub:#A1A1AA;--nx-mute:#8E8E97;
  --nx-line:#2A2A2F;--nx-line-strong:#3F3F46;
  --nx-shadow-card:0 1px 2px rgba(0,0,0,.3),0 10px 30px -16px rgba(0,0,0,.5);
  --nx-violet:#8B74E8;--nx-violet-hover:#9B87EE;--nx-violet-tint:rgba(139,116,232,.18);
  --nx-action:#7A62D9;--nx-action-hover:#8B74E8;
  --paper-edge:rgba(255,255,255,.10);
}

/* ---------- base ---------- */
body.in-fig,body.dash{
  font-family:var(--nx-sans);
  color:var(--nx-ink);
  background:var(--nx-paper);
  letter-spacing:-.011em;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
}
body.in-fig :is(button,input,textarea,select),body.dash :is(button,input,textarea,select){font-family:inherit}
body.in-fig ::selection,body.dash ::selection{background:var(--nx-violet-band);color:var(--nx-ink)}
body.in-fig :focus-visible,body.dash :focus-visible{outline:2px solid var(--nx-violet);outline-offset:3px}
/* translate, not transform: the rail and dock centre themselves with transform */
@keyframes nxRise{from{opacity:0;translate:0 10px}to{opacity:1;translate:0 0}}
@keyframes nxPop{from{opacity:0;translate:0 -4px}to{opacity:1;translate:0 0}}

/* one eyebrow style everywhere (the landing's mono labels) */
.nx-eyebrow,body.dash .cmp-eyebrow,body.dash .sb-label,body.in-fig .fig-left-eyebrow{
  font-family:var(--nx-mono)!important;font-size:10.5px!important;font-weight:400!important;
  letter-spacing:.13em!important;text-transform:uppercase;color:var(--nx-mute)!important;
}

/* ============================================================
   RESULTS — the canvas
   ============================================================ */
body.in-fig .fig-canvas-wrap{
  background-color:var(--nx-field);
  background-image:radial-gradient(rgba(16,16,20,.10) 1px,transparent 1.2px);
  background-size:22px 22px;
}

/* floating chrome: white, hairline, one soft shadow */
body.in-fig .fig-glass{
  background:color-mix(in srgb,var(--nx-white) 94%,transparent);
  -webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);
  border:1px solid var(--nx-line);
  box-shadow:var(--nx-shadow-2);
}
body.in-fig .fig-top,body.in-fig .fig-tools,body.in-fig .fig-left,body.in-fig .fig-prompt{animation:nxRise .7s var(--nx-ease) both}
body.in-fig .fig-tools{animation-delay:.08s}
body.in-fig .fig-left{animation-delay:.04s}
body.in-fig .fig-prompt{animation-delay:.12s}

/* ---------- top bar: the site header's look (site-chrome.css), carrying the editor's actions ---------- */
body.in-fig .fig-top{
  top:0;left:0;right:0;height:var(--chrome-h,68px);padding:0 20px;gap:16px;
  background:var(--nx-paper);border-bottom:1px solid var(--nx-line);pointer-events:auto;animation:none;
}
body.in-fig .fig-top-left.fig-glass,body.in-fig .fig-top-right.fig-glass{
  height:auto;padding:0;gap:4px;border:0;border-radius:0;background:transparent;box-shadow:none;
  -webkit-backdrop-filter:none;backdrop-filter:none;
}
body.in-fig .fig-top-left{min-width:0}
body.in-fig .fig-brand{
  display:inline-flex;align-items:center;gap:9px;flex:none;margin:0 10px 0 0;
  font-size:19px;font-weight:600;letter-spacing:-.035em;color:var(--nx-ink);text-decoration:none;
}
body.in-fig .fig-brand img{width:28px!important;height:28px!important;border-radius:0;display:block}
body.in-fig .fig-burger{width:38px;height:38px;border-radius:50%;color:var(--nx-sub);transition:background-color .16s ease,color .16s ease}
body.in-fig .fig-burger:hover{background:var(--nx-field);color:var(--nx-ink)}
body.in-fig .fig-top-back{
  display:inline-flex;align-items:center;gap:5px;height:38px;padding:0 12px;border-radius:999px;
  font-size:15px;font-weight:400;letter-spacing:-.012em;color:var(--nx-text-2);box-shadow:none;background:none;
  transition:background-color .16s ease,color .16s ease;
}
body.in-fig .fig-top-back svg{display:none}
body.in-fig .fig-top-back:hover{background:var(--nx-field);color:var(--nx-ink);box-shadow:none}
body.in-fig .fig-crumb-sep{color:var(--nx-line-strong);opacity:1}
body.in-fig .fig-project-crumb{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;padding-left:6px;font-size:15px;font-weight:500;letter-spacing:-.015em;color:var(--nx-ink)}
body.in-fig .fig-project-crumb .em-i{font-family:var(--nx-sans);font-style:normal;font-weight:500;color:var(--nx-ink);font-size:15px}

body.in-fig .fig-top-action{
  height:38px;padding:0 13px;border-radius:999px;gap:7px;border:0;
  background:transparent;color:var(--nx-text-2);
  font-size:15px;font-weight:400;letter-spacing:-.012em;
  transition:background-color .16s ease,color .16s ease;
}
body.in-fig .fig-top-action svg{width:16px;height:16px;stroke-width:1.8}
body.in-fig .fig-top-action:hover:not(:disabled){background:var(--nx-field);color:var(--nx-ink)}
body.in-fig .fig-top-action[aria-pressed="true"]{background:var(--nx-field);color:var(--nx-ink);font-weight:500}
body.in-fig .fig-top-action.primary{background:var(--nx-action);color:#fff;padding:0 18px;font-weight:500;margin-left:4px}
body.in-fig .fig-top-action.primary:hover:not(:disabled){background:var(--nx-action-hover);color:#fff}
body.in-fig .fig-top-action:active:not(:disabled){transform:scale(.98)}
body.in-fig .fig-top-action:disabled{opacity:.45}
body.in-fig .fig-top-divider{width:1px;height:22px;background:var(--nx-line);margin:0 6px}
/* credits and account circle: identical to the header on every other page */
body.in-fig .fig-top-credits{
  display:inline-flex;align-items:center;gap:6px;height:36px;padding:0 14px 0 12px;border-radius:999px;border:0;
  background:var(--nx-field);color:var(--nx-ink);font-size:14px;font-weight:400;font-variant-numeric:tabular-nums;
}
body.in-fig .fig-top-credits:hover{background:var(--nx-line);color:var(--nx-ink)}
body.in-fig .fig-top-credits svg{width:14px;height:14px;color:var(--nx-brand)}
body.in-fig .fig-top-credits b{font-weight:600;color:inherit}
body.in-fig .fig-top-credits-unit{color:var(--nx-sub)}
body.in-fig .fig-avatar{
  width:36px;height:36px;border-radius:50%;border:0;padding:0;
  background:var(--nx-field);color:var(--nx-ink);font-size:14px;font-weight:500;box-shadow:inset 0 0 0 1px var(--nx-line-strong);
  transition:background-color .16s ease;
}
body.in-fig .fig-avatar:hover{background:var(--nx-line);transform:none}
body.in-fig .fig-avatar[aria-expanded="true"]{outline:2px solid var(--nx-violet);outline-offset:2px}

/* everything that floated under the old pill bar moves down by the bar's height */
body.in-fig .fig-canvas-wrap{top:var(--chrome-h,68px)}
body.in-fig .fig-left,body.in-fig .fig-left-toggle{top:calc(var(--chrome-h,68px) + 14px)}
body.in-fig .fig-tools{top:calc(50% + var(--chrome-h,68px) / 2)}
body.in-fig .fig-err-banner{top:calc(var(--chrome-h,68px) + 12px)}

/* menus: avatar, frame context, quality */
body.in-fig .fig-avatar-menu,body.in-fig .fig-ctx,body.in-fig .fig-quality-pop{
  background:var(--nx-white);border:1px solid var(--nx-line);border-radius:16px;
  box-shadow:var(--nx-shadow-3);padding:6px;
  -webkit-backdrop-filter:none;backdrop-filter:none;
}
body.in-fig .fig-avatar-menu .item,body.in-fig .fig-ctx-item,body.in-fig .fig-quality-opt{
  border-radius:10px;font-size:14px;font-weight:500;color:var(--nx-near);
  transition:background-color .15s ease,color .15s ease;
}
body.in-fig .fig-avatar-menu .item:hover,body.in-fig .fig-ctx-item:hover:not(:disabled),body.in-fig .fig-quality-opt:hover{
  background:var(--nx-field);color:var(--nx-ink);
}
body.in-fig .fig-ctx-item svg{stroke-width:1.8}
body.in-fig .fig-avatar-menu .sep,body.in-fig .fig-ctx-sep{background:var(--nx-line)}
body.in-fig .fig-avatar-menu{min-width:248px;top:calc(100% + 10px)}
body.in-fig .fig-avatar-menu .nav-menu-who{padding:10px 12px 12px;margin-bottom:4px;border-bottom:1px solid var(--nx-line)}
body.in-fig .fig-avatar-menu .nav-menu-who span{display:block;font-size:12.5px;color:var(--nx-mute)}
body.in-fig .fig-avatar-menu .nav-menu-who b{display:block;margin-top:3px;font-size:14px;font-weight:500;color:var(--nx-ink);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
body.in-fig .fig-avatar-menu .item{display:flex;align-items:center;gap:10px;padding:9px 12px;font-size:14.5px;font-weight:400;color:var(--nx-text-2)}
body.in-fig .fig-avatar-menu .item svg{width:16px;height:16px;flex:none;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;opacity:.7}
body.in-fig .fig-avatar-menu .item.danger,body.in-fig .fig-avatar-menu .item.danger:hover{color:var(--nx-red)}

/* ---------- tool rail (right) ---------- */
body.in-fig .fig-tools{
  right:16px;padding:6px;gap:4px;border-radius:999px;
}
body.in-fig .fig-tool{
  width:40px;height:40px;border-radius:50%;
  color:var(--nx-sub);background:transparent;
  transition:background-color .2s ease,color .2s ease,transform .25s var(--nx-ease);
}
body.in-fig .fig-tool svg{width:19px;height:19px;stroke-width:1.75}
body.in-fig .fig-tool:hover{background:var(--nx-field);color:var(--nx-ink)}
body.in-fig .fig-tool:active{transform:scale(.92)}
body.in-fig .fig-tool.active{background:var(--nx-action);color:#fff;box-shadow:0 6px 16px -8px rgba(16,16,20,0.18)}
body.in-fig .fig-tool.active:hover{background:var(--nx-action-hover);color:#fff}
body.in-fig .fig-tool-sep{width:20px;height:1px;margin:4px auto;background:var(--nx-line)}
body.in-fig .fig-zoom-readout{
  width:40px;height:26px;border-radius:999px;font-size:11.5px;font-weight:500;
  font-family:var(--nx-mono);letter-spacing:-.02em;color:var(--nx-sub);
}
body.in-fig .fig-zoom-readout:hover{color:var(--nx-violet-deep);background:var(--nx-violet-soft)}
/* tooltip: name + shortcut, slides in from the rail */
body.in-fig .fig-tool::after{
  content:attr(data-label);
  right:calc(100% + 14px);
  padding:7px 10px;border-radius:10px;
  background:var(--nx-ink);color:var(--nx-paper);
  font-family:var(--nx-sans);font-size:12.5px;font-weight:500;letter-spacing:-.01em;
  transform:translate(6px,-50%);
  transition:opacity .18s ease,transform .3s var(--nx-ease);
  box-shadow:0 10px 24px -12px rgba(16,16,20,.6);
}
body.in-fig .fig-tool:hover::after{opacity:1;transform:translate(0,-50%)}

/* ---------- frames ---------- */
body.in-fig .fig-frame{
  border-radius:20px;
  box-shadow:0 0 0 1px var(--nx-line);
  transition:transform .45s var(--nx-ease),box-shadow .2s ease;
}
body.in-fig .fig-frame:hover{transform:translateY(-4px);box-shadow:0 0 0 1px var(--nx-line-strong)}
body.in-fig .fig-frame.selected{
  box-shadow:0 0 0 2px var(--nx-paper),0 0 0 4px var(--nx-violet);
}
body.in-fig .fig-frame-label{
  font-family:var(--nx-sans);font-size:13px;font-weight:500;color:var(--nx-sub);letter-spacing:-.012em;
}
body.in-fig .fig-frame-label .name .num{
  font-family:var(--nx-mono);font-size:11px;letter-spacing:.06em;color:var(--nx-mute);
  background:none;padding:0;box-shadow:none;
}
body.in-fig .fig-frame-label .role-chip{
  font-family:var(--nx-mono);font-size:10px;font-weight:400;letter-spacing:.12em;text-transform:uppercase;
  color:var(--nx-sub);background:var(--nx-white);box-shadow:inset 0 0 0 1px var(--nx-line);
  border-radius:999px;padding:4px 9px;
}
body.in-fig .fig-frame-label .role-chip.is-failed{color:#C2410C;background:#FFF1EC;box-shadow:inset 0 0 0 1px #F8D3C6}

/* failed frame: three short lines and one action, generous air */
body.in-fig .fig-frame.failed{background:var(--nx-white);box-shadow:0 0 0 1px var(--nx-line)}
body.in-fig .fig-frame.failed::after{inset:12px;border-radius:14px;border:1.5px dashed var(--nx-line)}
body.in-fig .fig-frame .fig-frame-fail{padding:0 28px;gap:0}
body.in-fig .fig-frame-fail .ff-icon{
  width:48px;height:48px;border-radius:50%;margin-bottom:18px;
  box-shadow:none;background:color-mix(in srgb,var(--fail-tint) 12%,var(--nx-white));
}
body.in-fig .fig-frame-fail .ff-icon svg{width:22px;height:22px}
body.in-fig .fig-frame-fail .ff-title{font-size:17px;font-weight:500;letter-spacing:-.025em;line-height:1.2;color:var(--nx-ink)}
body.in-fig .fig-frame-fail .ff-body{margin-top:8px;max-width:24ch;font-size:13.5px;line-height:1.45;color:var(--nx-sub)}
body.in-fig .fig-frame-fail .ff-actions{margin-top:24px;gap:0}
body.in-fig .fig-frame-fail .ff-meta{
  margin-top:14px;display:flex;align-items:center;justify-content:center;gap:8px;flex-wrap:wrap;
  font-size:12px;color:var(--nx-mute);
}
body.in-fig .fig-frame-fail .ff-meta .ok{display:inline-flex;align-items:center;gap:4px;color:var(--nx-green)}
body.in-fig .fig-frame-fail .ff-meta .ok svg{width:12px;height:12px;stroke-width:2.6}
body.in-fig .fig-frame-fail .ff-meta .dot{width:3px;height:3px;border-radius:50%;background:var(--nx-line-dark)}
body.in-fig .fig-frame-fail .ff-link{
  padding:0;font-size:12px;font-weight:500;color:var(--nx-violet-deep);
  text-decoration:none;
}
body.in-fig .fig-frame-fail .ff-link:hover{text-decoration:underline;text-underline-offset:3px}
body.in-fig .fig-frame-fail .ff-queued{font-size:13px;font-weight:500;color:var(--nx-sub);text-align:left}
body.in-fig .fig-frame-fail-btn{
  height:40px;padding:0 20px;border-radius:999px;gap:8px;
  background:var(--nx-action);color:#fff;
  font-size:14px;font-weight:500;letter-spacing:-.012em;
  box-shadow:none;
  transition:background-color .2s ease,transform .25s var(--nx-ease);
}
body.in-fig .fig-frame-fail-btn:hover:not(:disabled){background:var(--nx-action-hover);transform:translateY(-1px)}
body.in-fig .fig-frame-fail-btn .ff-cost{background:rgba(255,255,255,.2);font-weight:500}

/* ---------- one loader for every frame (2026-10-11) ----------
   Painting, waiting in the queue, and a finished image still downloading
   share one shimmer: a mid-grey card, clearly DARKER than the light grey
   canvas (--nx-field #EFEFF2), with a lighter grey band gliding across it.
   The gradient starts and ends on the same colour and repeats, and each
   loop moves exactly one tile, so there is no visible jump.
   Every frame animates, the queued ones too: still frames read as blank
   boxes. (Owner rejected, in order: phone/headline outline, see-through
   card, violet glow, grey wave blending into the canvas, white card with a
   lavender wave, and still white queued frames.) */
body .fig-frame.painting,body .fig-frame.painting:not(.queued-frame),body .fig-frame.painting.queued-frame{
  --sk-1:#DADADF;--sk-2:#E8E8EC;
  background:var(--sk-1);outline-color:transparent;opacity:1;animation:none;
  box-shadow:0 0 0 1px rgba(16,16,20,.05);
}
body .fig-frame.painting::before,body .fig-frame.painting::after{display:none}
body .fig-frame.painting:hover{transform:none}
body .fig-frame .fig-frame-skel,body .fig-frame.painting .fig-frame-skel{
  --sk-1:#DADADF;--sk-2:#E8E8EC;
  position:absolute;inset:0;overflow:hidden;border-radius:inherit;background:var(--sk-1);
}
body .fig-frame .fig-frame-skel::before,body .fig-frame.painting .fig-frame-skel::before,
body .fig-frame .fig-frame-skel.queued::before{
  content:"";display:block;position:absolute;inset:0;z-index:2;opacity:1;pointer-events:none;
  background-image:linear-gradient(90deg,var(--sk-1) 0%,var(--sk-1) 30%,var(--sk-2) 50%,var(--sk-1) 70%,var(--sk-1) 100%);
  background-size:200% 100%;background-repeat:repeat;
  animation:nxSkelWave 1.8s linear infinite;
}
body .fig-frame .fig-frame-skel::after,body .fig-frame.painting .fig-frame-skel::after{display:none}
@keyframes nxSkelWave{from{background-position:200% 0}to{background-position:0% 0}}
[data-theme="dark"] body .fig-frame.painting,[data-theme="dark"] body .fig-frame .fig-frame-skel{--sk-1:#2E2E34;--sk-2:#3B3B42}
[data-theme="dark"] body .fig-frame.painting{box-shadow:0 0 0 1px rgba(255,255,255,.06)}
/* the old extras, retired: progress line, boot lines, spinner, violet finish glow */
.fig-frame-skel .paintbar,.fig-frame-skel .boot-line,.fig-frame-skel .boot-bar,#canvasWrap .boot-indicator{display:none}
body .fig-frame.just-painted{animation:none}
/* the frame name stays plain text; it no longer pulses */
body.in-fig .fig-frame-wrap:has(.fig-frame.painting:not(.queued-frame)) .fig-frame-label .name{
  background:none;-webkit-text-fill-color:currentColor;color:var(--nx-ink);animation:none;
}
@media (prefers-reduced-motion:reduce){body .fig-frame .fig-frame-skel::before{animation:none;opacity:0}}

/* ---------- left panel ---------- */
body.in-fig .fig-left{border-radius:22px}
body.in-fig .fig-left-project .icon,body.in-fig #lpIcon{
  border-radius:12px;background:var(--nx-violet-soft);color:var(--nx-violet-deep);font-weight:600;
}
body.in-fig .fig-left-project .name{font-size:15px;font-weight:500;letter-spacing:-.02em;color:var(--nx-ink)}
body.in-fig .fig-left .btn{
  border-radius:999px;font-weight:500;letter-spacing:-.012em;
  transition:background-color .2s ease,color .2s ease,transform .25s var(--nx-ease);
}
body.in-fig .fig-left .btn-ink{background:var(--nx-action);border-color:var(--nx-action);color:#fff}
body.in-fig .fig-left .btn-ink:hover:not(:disabled){background:var(--nx-action-hover);border-color:var(--nx-action-hover);transform:translateY(-1px)}
body.in-fig .fig-left-retry{border-radius:16px;padding:14px 16px;gap:10px;background:var(--nx-paper);border-color:var(--nx-line)}
body.in-fig .fig-left-retry-head{font-size:14px;font-weight:500}
body.in-fig .fig-left-retry-sub{font-size:13px;color:var(--nx-sub)}
body.in-fig .fig-left-collapse,body.in-fig .fig-left-toggle{border-radius:999px}

/* ---------- prompt dock (the landing's composer) ---------- */
body.in-fig .fig-prompt-bar{
  border-radius:22px;padding:10px 10px 10px 18px;
  background:var(--nx-white);
  border:1px solid var(--nx-line);
  box-shadow:var(--nx-shadow-2);
  transition:border-color .25s ease,box-shadow .25s ease;
}
/* Focus matches the dashboard composer: a calm grey ring, never a violet frame (owner, 2026-10-14). */
body.in-fig .fig-prompt-bar:focus-within{border-color:var(--nx-line-strong);box-shadow:0 0 0 4px rgba(16,16,20,.035),var(--nx-shadow-2)}
body.in-fig .fig-prompt-input{font-size:15px;letter-spacing:-.012em;color:var(--nx-ink)}
/* The typing box itself never gets the site-wide violet focus outline; the bar's grey ring shows focus (like the dashboard). */
body.in-fig .fig-prompt-input:focus,body.in-fig .fig-prompt-input:focus-visible{outline:none;box-shadow:none}
body.in-fig .fig-prompt-input::placeholder{color:var(--nx-sub)}
body.in-fig .fig-prompt-action{width:34px;height:34px;border-radius:50%;color:var(--nx-sub)}
body.in-fig .fig-prompt-action:hover{background:var(--nx-field);color:var(--nx-ink)}
body.in-fig .fig-prompt-quality{
  height:34px;padding:0 12px;border-radius:999px;background:var(--nx-field);color:var(--nx-near);
  font-size:13px;font-weight:500;
}
body.in-fig .fig-prompt-quality:hover,body.in-fig .fig-prompt-quality.open{background:var(--nx-violet-soft);color:var(--nx-violet-deep)}
body.in-fig .fig-prompt-send{
  width:36px;height:36px;border-radius:50%;background:var(--nx-action);color:#fff;
  transition:background-color .2s ease,transform .25s var(--nx-ease);
}
body.in-fig .fig-prompt-send:hover:not(:disabled){background:var(--nx-action-hover);transform:translateY(-1px)}
body.in-fig .fig-prompt-send:disabled{background:var(--nx-field);color:var(--nx-mute)}
body.in-fig .dock-card{border-radius:20px}
/* Working status ("Reading your edit", "Previewing 1/2…"): one quiet neutral
   line above the prompt, never a violet card (owner, 2026-10-14). */
body.in-fig .fig-prompt-selchips.dock-status{
  background:transparent;border:0;box-shadow:none;
  -webkit-backdrop-filter:none;backdrop-filter:none;
  padding:2px 4px 4px;
}
body.in-fig .fig-prompt-selchips.dock-status.is-working{gap:3px 10px}
body.in-fig .fig-prompt-selchips.dock-status .dock-confirm-msg{font-size:13px;font-weight:550;letter-spacing:-.01em;color:var(--nx-ink)}
body.in-fig .dock-status-spinner{
  width:12px;height:12px;border-width:1.5px;
  border-color:color-mix(in srgb,var(--nx-ink) 14%,transparent);
  border-top-color:var(--nx-ink);
}
body.in-fig .dock-status-time{font-size:12px;font-weight:500;color:var(--nx-mute)}
body.in-fig .dock-status-detail{font-size:12px;font-weight:450;color:var(--nx-sub)}
body.in-fig .dock-status-progress{height:2px;background:color-mix(in srgb,var(--nx-ink) 7%,transparent)}
body.in-fig .dock-status-progress > span,body.in-fig .dock-status-progress span{background:var(--nx-ink);opacity:.55}
body.in-fig .dock-card-primary{border-radius:999px;background:var(--nx-action);color:#fff}
body.in-fig .dock-card-primary:hover{background:var(--nx-action-hover);opacity:1}
body.in-fig .dock-card-ghost,body.in-fig .dock-card-opt{border-radius:999px}
body.in-fig .dock-card-opt:hover{background:var(--nx-violet-soft);border-color:var(--nx-violet);color:var(--nx-violet-deep)}

/* ---------- status, toast, banners, dialog ---------- */
body.in-fig .fig-status-pill{border-radius:999px;font-family:var(--nx-sans);font-weight:500}
body.in-fig .toast{border-radius:999px;padding:11px 20px 11px 16px;font-size:14px;background:var(--nx-ink)}
body.in-fig .fig-err-banner{border-radius:18px;border:1px solid var(--nx-line);box-shadow:var(--nx-shadow-3)}
body.in-fig .fig-err-banner-actions :is(a,button){border-radius:999px;background:var(--nx-action)}
body.in-fig .fig-err-banner-actions :is(a,button):hover{background:var(--nx-action-hover)}
body.in-fig .confirm-card{border-radius:24px}
body.in-fig .confirm-title{font-weight:500;font-size:20px;letter-spacing:-.03em}
body.in-fig .confirm-icon{border-radius:50%;background:var(--nx-violet-soft);color:var(--nx-violet-deep)}
body.in-fig .confirm-btn{height:42px;padding:0 20px;font-weight:500}
body.in-fig .confirm-btn.primary{background:var(--nx-action)}
body.in-fig .confirm-btn.primary:hover{background:var(--nx-action-hover)}
body.in-fig .confirm-cost{border-radius:14px;background:var(--nx-paper);border:1px solid var(--nx-line)}

/* ============================================================
   DASHBOARD (v7, 2026-10-09): the shared site header, then one
   quiet column: a single question, the composer (a white card
   lifted off the grey page), then your projects as a gallery.
   One strong colour: the ink Generate button.
   ============================================================ */
body.dash .app{display:block;min-height:calc(100vh - var(--chrome-h,68px))}
body.dash .main{display:block;min-width:0}
body.dash .content-composer{
  width:100%;max-width:1140px;margin:0 auto;
  padding:clamp(56px,12vh,128px) var(--nx-gutter) 112px;
  display:flex;flex-direction:column;align-items:stretch;gap:0;
}

/* the question */
body.dash .cmp-head{display:flex;flex-direction:column;align-items:center;text-align:center;gap:0;margin:0 0 28px}
body.dash .cmp-hello{display:none}
body.dash .cmp-greet{
  max-width:none;margin:0;font-size:clamp(30px,3.4vw,44px)!important;font-weight:500!important;line-height:1.08;
  letter-spacing:-.045em!important;color:var(--nx-ink);text-wrap:balance;
}
body.dash .cmp-head,body.dash .cmp-box,body.dash .cmp-foothint,body.dash .cmp-rail{animation:nxRise .9s var(--nx-ease) both}
body.dash .cmp-box{animation-delay:.07s}
body.dash .cmp-foothint{animation-delay:.14s}
body.dash .cmp-rail{animation-delay:.2s}

/* the composer: the same box the landing page shows signed-out */
body.dash .cmp-box{
  max-width:720px;width:100%;margin:0 auto;
  background:var(--nx-surface);border:1px solid var(--nx-line);border-radius:24px;
  box-shadow:var(--nx-shadow-card);
  transition:border-color .2s ease,box-shadow .3s ease;
}
body.dash .cmp-box:hover{border-color:var(--nx-line-strong);box-shadow:var(--nx-shadow-card)}
body.dash .cmp-box:focus-within{border-color:var(--nx-line-strong);box-shadow:0 0 0 4px rgba(16,16,20,.035),var(--nx-shadow-card)}
body.dash .cmp-box.dragging{border-color:var(--nx-violet);box-shadow:0 0 0 4px var(--nx-violet-tint),var(--nx-shadow-card)}
/* one border only: the box shows focus, the text area inside does not */
body.dash .cmp-textarea:focus,body.dash .cmp-textarea:focus-visible{outline:none;box-shadow:none}
body.dash .cmp-writezone{padding:22px 24px 6px;min-height:0;background:none;border:0;border-radius:0}
body.dash .cmp-writezone-label{display:none}
body.dash .cmp-textarea{
  font-size:16.5px;font-weight:400;line-height:1.55;letter-spacing:-.014em;
  color:var(--nx-ink);background:transparent;min-height:76px;
}
body.dash .cmp-textarea::placeholder{color:var(--nx-mute);font-weight:400;opacity:1}
body.dash .cmp-thumbs{padding:0 24px}
/* screenshots beyond the design count: kept, but greyed out and not sent */
body.dash .cmp-thumb.is-unused img{opacity:.32;filter:grayscale(1)}
body.dash .cmp-thumb.is-unused{border-style:dashed}
body.dash .cmp-actions{display:flex;align-items:center;gap:6px;padding:10px 12px 12px 14px;background:transparent;border:0;border-radius:0}
body.dash .cmp-actions-l{display:flex;align-items:center;flex-wrap:wrap;gap:2px;min-width:0}
body.dash .cmp-attach-primary{
  height:36px;padding:0 14px 0 11px;margin-right:4px;border-radius:999px;gap:7px;
  background:var(--nx-field);border:0;color:var(--nx-ink);font-size:14px;font-weight:500;box-shadow:none;
  transition:background-color .16s ease;
}
body.dash .cmp-attach-primary:hover{background:var(--nx-line);transform:none;box-shadow:none}
body.dash .cmp-attach-primary svg{width:15px;height:15px}
body.dash .cmp-attach-primary .count{background:var(--nx-surface);color:var(--nx-ink);font-size:11px;font-weight:600}
/* the settings read as quiet text until touched */
body.dash .cmp-chip-btn,body.dash .cmp-ref-info{
  height:36px;padding:0 11px;border-radius:999px;gap:6px;
  background:transparent;border:0;color:var(--nx-sub);
  font-size:14px;font-weight:400;box-shadow:none;
  transition:background-color .16s ease,color .16s ease;
}
body.dash .cmp-ref-info{width:36px;padding:0;justify-content:center}
/* reference images: one small icon beside Add screenshots. Hover names it,
   a click opens a small card (title, Optional tag, an (i) for one line of help) */
body.dash .cmp-ref-btn{
  position:relative;display:inline-grid;place-items:center;width:36px;height:36px;padding:0;margin:0 2px 0 0;
  border:0;border-radius:999px;background:transparent;color:var(--nx-sub);cursor:pointer;
  transition:background-color .16s ease,color .16s ease;
}
body.dash .cmp-ref-btn:hover,body.dash .cmp-ref-btn[aria-expanded="true"]{background:var(--nx-field);color:var(--nx-ink)}
body.dash .cmp-ref-btn:focus-visible{outline:2px solid var(--nx-violet);outline-offset:2px}
body.dash .cmp-ref-btn svg{width:17px;height:17px}
body.dash .cmp-ref-btn::after{
  content:attr(data-tip);position:absolute;bottom:calc(100% + 8px);left:50%;translate:-50% 4px;
  padding:6px 10px;border-radius:8px;background:var(--nx-ink);color:var(--nx-paper);
  font-size:12.5px;font-weight:400;white-space:nowrap;pointer-events:none;opacity:0;
  transition:opacity .15s ease .25s,translate .2s var(--nx-ease) .25s;z-index:5;
}
body.dash .cmp-ref-btn:hover::after{opacity:1;translate:-50% 0}
body.dash .cmp-ref-btn[aria-expanded="true"]::after{opacity:0;transition-delay:0s}
body.dash .cmp-ref-btn .count{
  display:none;position:absolute;top:1px;right:0;min-width:16px;height:16px;padding:0 4px;border-radius:999px;
  background:var(--nx-ink);color:var(--nx-paper);font-size:10.5px;font-weight:600;line-height:16px;text-align:center;
}
body.dash .cmp-ref-btn[data-empty="false"]{color:var(--nx-ink)}
body.dash .cmp-ref-btn[data-empty="false"] .count{display:block}

body.dash .cmp-refcard{width:260px;padding:12px}
body.dash .cmp-refcard-head{display:flex;align-items:center;gap:8px}
body.dash .cmp-refcard-head b{font-size:14px;font-weight:500;color:var(--nx-ink)}
body.dash .cmp-opt-tag{height:20px;padding:0 8px;border-radius:999px;background:var(--nx-field);color:var(--nx-mute);font-size:11.5px;line-height:20px}
body.dash .cmp-refcard-help{
  margin-left:auto;width:26px;height:26px;display:grid;place-items:center;padding:0;
  border:0;border-radius:999px;background:transparent;color:var(--nx-mute);cursor:pointer;
}
body.dash .cmp-refcard-help:hover,body.dash .cmp-refcard-help[aria-expanded="true"]{background:var(--nx-field);color:var(--nx-ink)}
body.dash .cmp-refcard-help svg{width:16px;height:16px}
body.dash .cmp-refcard-help-txt{margin:8px 2px 0;font-size:13px;line-height:1.45;color:var(--nx-sub)}
body.dash .cmp-refcard-drop{
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;width:100%;height:84px;margin-top:10px;
  border:1px dashed var(--nx-line-strong);border-radius:12px;background:transparent;color:var(--nx-sub);
  font:inherit;font-size:13.5px;cursor:pointer;transition:background-color .16s ease,color .16s ease,border-color .16s ease;
}
body.dash .cmp-refcard-drop:hover{background:var(--nx-field);color:var(--nx-ink);border-color:var(--nx-sub)}
body.dash .cmp-refcard-drop svg{width:18px;height:18px}

/* Add screenshots shows its limit up front: 0/3, 2/3 … */
body.dash .cmp-attach-primary .count,body.dash .cmp-attach-primary[data-empty="true"] .count{
  display:inline-block;min-width:0;height:auto;padding:0;background:none;color:var(--nx-mute);
  font-size:12.5px;font-weight:400;font-variant-numeric:tabular-nums;
}
body.dash .cmp-chip-btn b{font-weight:500;font-size:14px;color:var(--nx-ink)}
body.dash .cmp-chip-btn .cmp-chip-lbl{font-weight:400;color:var(--nx-sub)}
body.dash .cmp-chip-btn .cmp-caret{opacity:.55}
body.dash .cmp-chip-btn:hover,body.dash .cmp-chip-btn.open,body.dash .cmp-ref-info:hover{background:var(--nx-field);border:0;color:var(--nx-ink)}
/* Generate: a row, never a stack (dashboard-premium.css made it a grid, which put the arrow under the word) */
body.dash .cmp-send{
  display:inline-flex;flex-direction:row;align-items:center;justify-content:center;gap:8px;
  width:auto;height:40px;margin-left:auto;padding:0 18px 0 20px;border-radius:999px;flex:none;
  background:var(--nx-action);color:#fff;border:0;box-shadow:none;
  font-size:14.5px;font-weight:500;letter-spacing:-.012em;white-space:nowrap;
  transition:background-color .16s ease,transform .25s var(--nx-ease);
}
body.dash .cmp-send::before{content:'Generate'}
body.dash .cmp-send svg{width:14px;height:14px;transform:rotate(90deg);transition:translate .25s var(--nx-ease)}
body.dash .cmp-send:not(:disabled):not(.blocked):hover{background:var(--nx-action-hover);transform:none;box-shadow:none}
body.dash .cmp-send:not(:disabled):not(.blocked):hover svg{translate:2px 0}
body.dash .cmp-send:not(:disabled):active{transform:scale(.98)}
body.dash .cmp-send:disabled,body.dash .cmp-send.blocked{background:var(--nx-field);color:var(--nx-mute);border:0}
/* not ready yet: hovering must not turn it dark, or the grey label disappears */
body.dash .cmp-send.blocked:hover,body.dash .cmp-send:disabled:hover{background:var(--nx-field);color:var(--nx-mute);transform:none;box-shadow:none}
body.dash .cmp-send.blocked:hover svg{translate:0 0}
body.dash .cmp-send.busy{background:var(--nx-action);color:#fff}
body.dash .cmp-send.busy::before{content:'Starting'}
body.dash .cmp-send.busy svg{transform:none;animation:nxSpin .8s linear infinite}
@keyframes nxSpin{to{transform:rotate(360deg)}}
body.dash .cmp-pop{background:var(--nx-surface);border:1px solid var(--nx-line);border-radius:16px;box-shadow:var(--nx-shadow-pop);padding:6px;animation:nxPop .2s var(--nx-ease)}
body.dash .cmp-pop-head{font-family:var(--nx-sans);font-size:12.5px;font-weight:400;letter-spacing:0;text-transform:none;color:var(--nx-mute)}
body.dash .cmp-pop-opt{border-radius:10px;font-size:14px}
body.dash .cmp-pop-opt:hover{background:var(--nx-field)}
body.dash .cmp-pop-opt.selected{background:var(--nx-field);color:var(--nx-ink);font-weight:500}
body.dash .cmp-foothint{text-align:center;color:var(--nx-mute);font-size:13px;margin-top:14px;min-height:20px}
body.dash .cmp-dropmask{background:color-mix(in srgb,var(--nx-surface) 94%,transparent);border-radius:24px}

/* your projects: a gallery of portrait cards that show the top of each set */
body.dash .cmp-rail{width:100%;max-width:none;margin:clamp(72px,11vh,112px) 0 0;padding:0;box-shadow:none;display:block}
body.dash .cmp-rail-head{display:flex;align-items:baseline;justify-content:flex-start;gap:8px;margin:0 0 20px;padding:0}
body.dash .cmp-rail-title{font-size:17px;font-weight:500;letter-spacing:-.025em;color:var(--nx-ink)}
body.dash .cmp-rail-count{font-family:var(--nx-mono);font-size:12.5px;letter-spacing:0;color:var(--nx-mute);background:none;border:0;padding:0}
body.dash .cmp-rail-track{display:grid;grid-template-columns:repeat(auto-fill,minmax(184px,1fr));gap:32px 18px;padding:0}
body.dash .cmp-rcard{
  position:relative;display:flex;flex-direction:column;overflow:visible;
  background:transparent;border:0;border-radius:0;box-shadow:none;transform:none;cursor:pointer;
}
body.dash .cmp-rcard:hover{border:0;box-shadow:none;transform:none}
body.dash .cmp-rcard:focus-visible{outline:none}
body.dash .cmp-rcard:focus-visible .cmp-rcard-thumb{outline:2px solid var(--nx-violet);outline-offset:3px}
body.dash .cmp-rcard-thumb{
  aspect-ratio:4/5;border-radius:16px;overflow:hidden;
  background:var(--nx-field);border:0;box-shadow:0 0 0 1px rgba(16,16,20,.06);
  transition:box-shadow .35s ease,transform .5s var(--nx-ease);
}
body.dash .cmp-rcard:hover .cmp-rcard-thumb{transform:translateY(-4px);box-shadow:0 0 0 1px rgba(16,16,20,.06),0 18px 36px -20px rgba(16,16,20,.28)}
body.dash .cmp-rcard-thumb img{width:100%;height:100%;object-fit:cover;object-position:top center;transition:transform .8s var(--nx-ease)}
body.dash .cmp-rcard:hover .cmp-rcard-thumb img{transform:scale(1.02)}
body.dash .cmp-rcard-thumb .thumb-placeholder{background:var(--nx-field);animation:none}
body.dash .cmp-rcard-thumb .thumb-empty{background:var(--nx-field)}
body.dash .cmp-rcard-thumb .thumb-empty svg{color:var(--nx-mute);opacity:.45}
body.dash .cmp-rcard-body{padding:12px 2px 0;gap:2px}
body.dash .cmp-rcard-badge{display:none}
body.dash .cmp-rcard-name{
  min-height:0;font-size:14.5px;font-weight:500;letter-spacing:-.015em;color:var(--nx-ink);
  -webkit-line-clamp:1;line-clamp:1;
}
body.dash .cmp-rcard-meta{margin:0;font-size:13px;font-weight:400;color:var(--nx-mute)}
body.dash .cmp-rcard-meta .dot{background:currentColor;opacity:.6}
body.dash .cmp-rcard-del,body.dash .cmp-rcard-rename{
  top:10px;height:30px;border-radius:999px;border:0;
  background:var(--nx-surface);color:var(--nx-text-2);box-shadow:0 1px 2px rgba(16,16,20,.08),0 0 0 1px rgba(16,16,20,.06);
  -webkit-backdrop-filter:none;backdrop-filter:none;
}
body.dash .cmp-rcard-del{right:10px;width:30px}
body.dash .cmp-rcard-rename{right:46px;padding:0 11px;font-family:var(--nx-sans);font-size:12.5px;font-weight:500}
body.dash .cmp-rcard-del:hover{color:var(--nx-red);background:var(--nx-surface)}
body.dash .cmp-rcard-rename:hover{color:var(--nx-ink);background:var(--nx-surface)}
body.dash .sk-card{background:transparent;border:0;border-radius:0;box-shadow:none;padding:0}
body.dash .sk-thumb{aspect-ratio:4/5;border-radius:16px;border:0;box-shadow:0 0 0 1px rgba(16,16,20,.05);background:var(--nx-field);animation:none}
body.dash .sk-body{padding:12px 2px 0}
body.dash .sk-line{background:var(--nx-field);animation:none}
body.dash .cmp-rail-sentinel{color:var(--nx-mute);font-size:13px;font-weight:400}

/* command palette + toasts */
body.dash .cmd{background:var(--nx-white);border:1px solid var(--nx-line);border-radius:22px;box-shadow:var(--nx-shadow-3)}
body.dash .cmd-search input{font-size:16px}
body.dash .toast-wrap .toast,body.dash .toast{border-radius:999px;background:var(--nx-ink);color:var(--nx-paper);font-size:14px}

@media (max-width:560px){
  body.in-fig .fig-brand span,body.in-fig .fig-top-back,body.in-fig .fig-crumb-sep{display:none}
  body.in-fig .fig-top{padding:0 12px;gap:8px}
  body.dash .cmp-send{width:38px;padding:0;justify-content:center}
  body.dash .cmp-send::before{content:none}
  body.dash .content-composer{padding-top:40px}
  body.dash .cmp-greet{font-size:28px!important}
  body.dash .cmp-writezone{padding:18px 18px 4px}
  body.dash .cmp-rail{margin-top:64px}
  body.dash .cmp-rail-track{grid-template-columns:repeat(2,minmax(0,1fr));gap:24px 12px}
  body.in-fig .fig-top-left,body.in-fig .fig-top-right{height:46px}
}
@media (prefers-reduced-motion:reduce){
  body.in-fig *,body.dash *{animation-duration:.001s!important;transition-duration:.001s!important}
}

/* ============================================================
   EMPTY DASHBOARD + ONE-TIME WELCOME (2026-10-10, v3)
   No projects yet: nothing extra, the composer simply sits in the
   middle of the screen. The welcome is a small ink bubble under the
   header's credits pill, shown once per account after sign-up.
   ============================================================ */
body.dash .content-composer.is-empty{
  min-height:calc(100vh - var(--chrome-h,68px));min-height:calc(100dvh - var(--chrome-h,68px));
  justify-content:center;padding-top:32px;padding-bottom:clamp(72px,14vh,160px);
}

body.dash .nx-tip{
  position:fixed;z-index:80;width:236px;padding:14px 14px 12px 16px;
  background:var(--nx-ink);color:var(--nx-paper);border-radius:16px;
  box-shadow:0 16px 36px -18px rgba(16,16,20,.45);
  animation:nxTipIn .45s var(--nx-ease) .15s both;
}
body.dash .nx-tip.closing{animation:nxTipOut .18s ease forwards}
@keyframes nxTipIn{from{opacity:0;translate:0 -6px}to{opacity:1;translate:0 0}}
@keyframes nxTipOut{to{opacity:0;translate:0 -4px}}
body.dash .nx-tip-arrow{
  position:absolute;top:-5px;left:var(--arrow-x,50%);width:12px;height:12px;margin-left:-6px;
  background:var(--nx-ink);border-radius:2px;transform:rotate(45deg);
}
body.dash .nx-tip-title{margin:0;font-size:15px;font-weight:500;letter-spacing:-.015em;color:var(--nx-paper)}
body.dash .nx-tip-sub{margin:3px 0 12px;font-size:13px;line-height:1.45;color:var(--nx-paper);opacity:.68}
body.dash .nx-tip-ok{
  height:32px;padding:0 16px;border:0;border-radius:999px;cursor:pointer;
  background:var(--nx-paper);color:var(--nx-ink);font:inherit;font-size:13px;font-weight:500;
  transition:opacity .16s ease;
}
body.dash .nx-tip-ok:hover{opacity:.88}
body.dash .nx-tip-ok:focus-visible{outline:2px solid var(--nx-violet);outline-offset:2px}
/* the pill it points at gets a soft ring while the bubble is open */
.nav-credits.nx-tip-target{box-shadow:0 0 0 3px var(--nx-violet-tint);animation:nxTipRing 1.8s ease-in-out .5s 2}
@keyframes nxTipRing{50%{box-shadow:0 0 0 6px var(--nx-violet-tint)}}

@media (prefers-reduced-motion:reduce){
  body.dash .nx-tip,.nav-credits.nx-tip-target{animation:none}
}

/* results page: the same reference-images icon + card as the dashboard */
body.in-fig .fig-ref-wrap{position:relative;display:inline-flex}
body.in-fig .fig-ref-btn{position:relative}
body.in-fig .fig-ref-btn[aria-expanded="true"]{background:var(--nx-field);color:var(--nx-ink)}
body.in-fig .fig-ref-btn::after{
  content:attr(data-tip);position:absolute;bottom:calc(100% + 8px);left:50%;translate:-50% 4px;
  padding:6px 10px;border-radius:8px;background:var(--nx-ink);color:var(--nx-paper);
  font-size:12.5px;font-weight:400;white-space:nowrap;pointer-events:none;opacity:0;
  transition:opacity .15s ease .25s,translate .2s var(--nx-ease) .25s;z-index:5;
}
body.in-fig .fig-ref-btn:hover::after{opacity:1;translate:-50% 0}
body.in-fig .fig-ref-btn[aria-expanded="true"]::after{opacity:0;transition-delay:0s}
body.in-fig .fig-refcard{
  position:absolute;bottom:calc(100% + 10px);left:0;z-index:30;width:260px;padding:12px;
  background:var(--nx-surface);border:1px solid var(--nx-line);border-radius:16px;box-shadow:var(--nx-shadow-pop);
  animation:nxPop .2s var(--nx-ease);
}
body.in-fig .fig-refcard[hidden]{display:none}
body.in-fig .fig-refcard-head{display:flex;align-items:center;gap:8px}
body.in-fig .fig-refcard-head b{font-size:14px;font-weight:500;color:var(--nx-ink)}
body.in-fig .fig-opt-tag{height:20px;padding:0 8px;border-radius:999px;background:var(--nx-field);color:var(--nx-mute);font-size:11.5px;line-height:20px}
body.in-fig .fig-refcard-help{
  margin-left:auto;width:26px;height:26px;display:grid;place-items:center;padding:0;
  border:0;border-radius:999px;background:transparent;color:var(--nx-mute);cursor:pointer;
}
body.in-fig .fig-refcard-help:hover,body.in-fig .fig-refcard-help[aria-expanded="true"]{background:var(--nx-field);color:var(--nx-ink)}
body.in-fig .fig-refcard svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
body.in-fig .fig-refcard-help-txt{margin:8px 2px 0;font-size:13px;line-height:1.45;color:var(--nx-sub)}
body.in-fig .fig-refcard-drop{
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;width:100%;height:84px;margin-top:10px;
  border:1px dashed var(--nx-line-strong);border-radius:12px;background:transparent;color:var(--nx-sub);
  font:inherit;font-size:13.5px;cursor:pointer;transition:background-color .16s ease,color .16s ease,border-color .16s ease;
}
body.in-fig .fig-refcard-drop:hover{background:var(--nx-field);color:var(--nx-ink);border-color:var(--nx-sub)}
body.in-fig .fig-refcard-drop svg{width:18px;height:18px}