@import url("/css/readability.css?v=1");
/* NyxPrism buttons: a coloured fill and a light tracing around the border.
   One button per step is the main action (bright purple, glowing); everything else is a dark outline with
   a dim tracer, so the next thing to press is always obvious.
   Loaded last on every page except the dashboard and signing page (they carry the same look in
   their own styles), so it wins over each page's older button rules; hence the !important. */
@property --trace{syntax:'<angle>';initial-value:0deg;inherits:false}
@keyframes trace{to{--trace:360deg}}

/* Plain buttons (e.g. admin tables): violet. */
.btn,
.btn-primary,.btn.primary,.submit-btn,.session-btn-primary,.pricing-cta,.nav-trial,.top nav a.cta,
.btn-secondary,.btn.secondary,.session-btn-secondary,.nav-login,
.btn-danger,.btn.danger,.btn-success{
  --btn-fill:linear-gradient(135deg,#2a1850,#171031);--btn-edge:#3b1d6e;--btn-glint:#a78bfa;--btn-glow:rgba(124,58,237,.25);
  border:2px solid transparent!important;
  background:var(--btn-fill) padding-box,conic-gradient(from var(--trace),var(--btn-edge) 0 50%,var(--btn-glint) 64%,var(--btn-spark,#fff) 72%,var(--btn-glint) 80%,var(--btn-edge) 94%) border-box!important;
  box-shadow:0 0 16px var(--btn-glow)!important;
  color:#ede9fe!important;
  animation:trace 3s linear infinite;
  transition:filter .15s,transform .1s;
}
/* Main action (the next step): bright purple with a glow. */
.btn-primary,.btn.primary,.btn-add-saved,.submit-btn,.session-btn-primary,.pricing-cta.cta-pro,.nav-trial,.top nav a.cta{
  --btn-fill:linear-gradient(135deg,#6d28d9,#5b21b6);--btn-edge:#3b0f86;--btn-glint:#c4b5fd;--btn-glow:rgba(139,92,246,.55);color:#fff!important}
/* Secondary actions (back, clear, save as draft, page through): a dark outline that stays out of the way. */
.btn-secondary,.btn.secondary,.session-btn-secondary{
  --btn-fill:linear-gradient(135deg,#1b1733,#110e22);--btn-edge:#2e2850;--btn-glint:#7c6fb8;--btn-spark:#a99ce0;--btn-glow:transparent;color:#ddd6fe!important}
/* Ghost actions (cancel, later, start over): quieter still. */
.btn-ghost{
  --btn-fill:linear-gradient(135deg,#141226,#0e0c1c);--btn-edge:#221e3a;--btn-glint:#4f4680;--btn-spark:#6f64a6;--btn-glow:transparent;color:#b8b2d6!important}
/* Marketing-page secondary buttons keep their blue. */
.pricing-cta.cta-free,.pricing-cta.cta-ent,.nav-login{
  --btn-fill:linear-gradient(135deg,#1d4ed8,#1e3a8a);--btn-edge:#0b1d4d;--btn-glint:#67e8f9;--btn-spark:#fff;--btn-glow:rgba(37,99,235,.4);color:#fff!important}
/* Light mode (dashboard): white outlines with violet text. */
body.light :is(.btn-secondary,.btn.secondary,.session-btn-secondary){
  --btn-fill:linear-gradient(#fff,#faf8ff);--btn-edge:#d8cffc;--btn-glint:#a78bfa;--btn-spark:#7c3aed;color:#5b21b6!important}
body.light .btn-ghost{
  --btn-fill:linear-gradient(#fff,#fff);--btn-edge:#e5e7eb;--btn-glint:#c4b5fd;--btn-spark:#a78bfa;color:#4b5563!important}
/* Success / download results: green. */
.btn-success{
  --btn-fill:linear-gradient(135deg,#047857,#065f46);--btn-edge:#022c22;--btn-glint:#6ee7b7;--btn-glow:rgba(16,185,129,.4);color:#fff!important}
/* Destructive actions: red. */
.btn-danger,.btn.danger{
  --btn-fill:linear-gradient(135deg,#b91c1c,#7f1d1d);--btn-edge:#450a0a;--btn-glint:#fca5a5;--btn-glow:rgba(220,38,38,.35);color:#fff!important}

:is(.btn,.submit-btn,.session-btn-primary,.session-btn-secondary,.pricing-cta,.nav-trial,.nav-login,.top nav a.cta):hover:not(:disabled){filter:brightness(1.05)}
:is(.btn,.submit-btn,.session-btn-primary,.session-btn-secondary,.pricing-cta,.nav-trial,.nav-login,.top nav a.cta):focus-visible{outline:2px solid #fff;outline-offset:3px}
:is(.btn,.submit-btn,.session-btn-primary,.session-btn-secondary,.pricing-cta):disabled{animation:none;box-shadow:none!important}
/* Text-style links that happen to share the class stay plain. */
.btn-link{border:0!important;background:none!important;box-shadow:none!important;animation:none;color:#a78bfa!important}

@media(prefers-reduced-motion:reduce){
  :is(.btn,.submit-btn,.session-btn-primary,.session-btn-secondary,.pricing-cta,.nav-trial,.nav-login,.top nav a.cta){animation:none}
}

/* Phones: header buttons stay on one line and shrink instead of wrapping ("Log / In"). */
.nav-login,.nav-trial,.top nav a.cta{white-space:nowrap}
@media(max-width:580px){
  .nav-actions{gap:.45rem}
  .nav-login,.nav-trial{font-size:.875rem!important;padding:.38rem .7rem!important}
  .top .wrap{flex-wrap:nowrap}
  .top nav{gap:.75rem;flex-wrap:nowrap;align-items:center}
  .top nav a:not(.cta):not([href*="login"]){display:none}
  .top nav a{white-space:nowrap}
}
@media(max-width:370px){
  .nav-brand-name,.nyx-brand-name{font-size:.95rem}
  .nav-login,.nav-trial{font-size:.875rem!important;padding:.34rem .55rem!important}
}
@media(max-width:480px){.nav-free{display:none}}
@media(max-width:370px){.nav-brand .nyx-brand-copy{display:none}}

/* ── Button effect preferences (set by nyx-fx.js from Account > Appearance) ── */
/* Effect colour: the travelling light / glow in one colour instead of each button's own. */
html[data-btncolor="gold"] :is(.btn,.submit-btn,.session-btn-primary,.session-btn-secondary,.pricing-cta,.nav-trial,.nav-login,.top nav a.cta):not(.btn-secondary,.secondary,.session-btn-secondary,.btn-ghost){--btn-glint:#fde047;--btn-glow:rgba(250,204,21,.45)}
html[data-btncolor="cyan"] :is(.btn,.submit-btn,.session-btn-primary,.session-btn-secondary,.pricing-cta,.nav-trial,.nav-login,.top nav a.cta):not(.btn-secondary,.secondary,.session-btn-secondary,.btn-ghost){--btn-glint:#67e8f9;--btn-glow:rgba(34,211,238,.45)}
html[data-btncolor="pink"] :is(.btn,.submit-btn,.session-btn-primary,.session-btn-secondary,.pricing-cta,.nav-trial,.nav-login,.top nav a.cta):not(.btn-secondary,.secondary,.session-btn-secondary,.btn-ghost){--btn-glint:#f9a8d4;--btn-glow:rgba(236,72,153,.45)}
html[data-btncolor="green"] :is(.btn,.submit-btn,.session-btn-primary,.session-btn-secondary,.pricing-cta,.nav-trial,.nav-login,.top nav a.cta):not(.btn-secondary,.secondary,.session-btn-secondary,.btn-ghost){--btn-glint:#86efac;--btn-glow:rgba(34,197,94,.45)}
html[data-btncolor="white"] :is(.btn,.submit-btn,.session-btn-primary,.session-btn-secondary,.pricing-cta,.nav-trial,.nav-login,.top nav a.cta):not(.btn-secondary,.secondary,.session-btn-secondary,.btn-ghost){--btn-glint:#ffffff;--btn-glow:rgba(255,255,255,.35)}
html[data-btncolor="rainbow"] :is(.btn,.submit-btn,.session-btn-primary,.session-btn-secondary,.pricing-cta,.nav-trial,.nav-login,.top nav a.cta):not(.btn-secondary,.secondary,.session-btn-secondary,.btn-ghost){--btn-glow:rgba(217,70,239,.4)}
html[data-btncolor="rainbow"][data-btnfx="tracer"] :is(.btn,.submit-btn,.session-btn-primary,.session-btn-secondary,.pricing-cta,.nav-trial,.nav-login,.top nav a.cta):not(.btn-secondary,.secondary,.session-btn-secondary,.btn-ghost){background:var(--btn-fill) padding-box,conic-gradient(from var(--trace),#f43f5e,#f59e0b,#facc15,#22c55e,#06b6d4,#6366f1,#d946ef,#f43f5e) border-box!important}
/* Glow: a steady lit border and halo, no movement. */
html[data-btnfx="glow"] :is(.btn,.submit-btn,.session-btn-primary,.session-btn-secondary,.pricing-cta,.nav-trial,.nav-login,.top nav a.cta){animation:none!important;background:var(--btn-fill) padding-box,linear-gradient(135deg,var(--btn-glint),var(--btn-edge) 55%,var(--btn-glint)) border-box!important;box-shadow:0 0 22px var(--btn-glow),0 0 2px var(--btn-glint)!important}
html[data-btnfx="glow"][data-btncolor="rainbow"] :is(.btn,.submit-btn,.session-btn-primary,.session-btn-secondary,.pricing-cta,.nav-trial,.nav-login,.top nav a.cta):not(.btn-secondary,.secondary,.session-btn-secondary,.btn-ghost){background:var(--btn-fill) padding-box,linear-gradient(135deg,#f43f5e,#facc15,#22c55e,#06b6d4,#6366f1,#d946ef) border-box!important}
/* Off: plain coloured buttons. */
html[data-btnfx="off"] :is(.btn,.submit-btn,.session-btn-primary,.session-btn-secondary,.pricing-cta,.nav-trial,.nav-login,.top nav a.cta){animation:none!important;background:var(--btn-fill) padding-box,linear-gradient(var(--btn-edge),var(--btn-edge)) border-box!important;box-shadow:none!important}

/* ── Logo: the diamond on its own, a little larger in the header ── */
.nav-brand .nyx-brand-icon,.nav-brand-logo.nyx-brand-icon{width:44px!important;height:44px!important;flex:0 0 44px!important}
.nav-brand .nyx-prism-mark,.nav-brand-logo .nyx-prism-mark{width:44px!important;height:44px!important}
/* Tool pages use a plain image: the same diamond, tilting toward the pointer. */
.top .brand img{width:38px!important;height:38px!important;object-fit:contain;border:0!important;border-radius:0!important;background:none!important;
  filter:drop-shadow(0 2px 4px rgba(0,0,0,.5)) drop-shadow(0 0 10px rgba(167,139,250,.28));transition:transform .35s cubic-bezier(.2,.8,.2,1)}
.top .brand img.tilting{transform:perspective(260px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg))}
@media(max-width:480px){.nav-brand .nyx-brand-icon{width:38px!important;height:38px!important;flex-basis:38px!important}.nav-brand .nyx-prism-mark{width:38px!important;height:38px!important}}
/* Public tool pages on very narrow phones: the header links shrink instead of pushing the page sideways. */
@media(max-width:380px){header.top .wrap{gap:.5rem}.top nav{gap:.5rem}.top nav a{font-size:.875rem}.top nav a.cta{padding:.4rem .6rem}.top .brand span{display:none}}
