/* Nexus 0.5.1 reusable design tokens and motion primitives.
   Existing screens keep their approved appearance; new tools should consume
   these tokens instead of introducing another isolated palette or animation. */
:root{
  --nexus-foundation-red:#ff294f;
  --nexus-foundation-pink:#ff3f91;
  --nexus-foundation-purple:#7d35e8;
  --nexus-passion-pink:#ff2aa6;
  --nexus-passion-magenta:#d943ff;
  --nexus-passion-purple:#5419c7;
  --nexus-ignite-powder:#b8e9ff;
  --nexus-ignite-blue:#4da8ff;
  --nexus-ignite-electric:#2450e8;
  --nexus-ignite-violet:#5634d8;
  --nexus-success:#48e39b;
  --nexus-warning:#ffb74d;
  --nexus-danger:#ff5f7d;
  --nexus-muted:#918d9b;
  --nexus-card-radius:18px;
  --nexus-control-radius:12px;
  --nexus-attention-duration:2.1s;
  --nexus-pulse-duration:1.55s;
  --nexus-transition-fast:.2s;
}

@property --nexus-attention-angle{syntax:"<angle>";inherits:false;initial-value:0deg}
@keyframes nexusAttentionOrbit{to{--nexus-attention-angle:360deg}}
@keyframes nexusSoftPulse{from{opacity:.72}to{opacity:1}}

/* Reusable building blocks for new and extracted Nexus surfaces. */
.nexus-component-card{border-radius:var(--nexus-card-radius)}
.nexus-status-pill{display:inline-flex;align-items:center;justify-content:center;min-height:26px;padding:5px 9px;border:1px solid rgba(255,255,255,.12);border-radius:999px;font-size:.72rem;font-weight:850;letter-spacing:.04em;text-transform:uppercase}
.nexus-status-pill.is-success{color:#9ae7c4;border-color:rgba(72,227,155,.38);background:rgba(72,227,155,.08)}
.nexus-status-pill.is-warning{color:#ffd18d;border-color:rgba(255,183,77,.38);background:rgba(255,183,77,.08)}
.nexus-status-pill.is-danger{color:#ffafbd;border-color:rgba(255,95,125,.42);background:rgba(255,95,125,.09)}
.nexus-status-pill.is-muted{color:#b8b4c1;background:rgba(255,255,255,.035)}
.nexus-progress-track{overflow:hidden;border-radius:999px;background:rgba(255,255,255,.08)}
.nexus-progress-track>span{display:block;height:100%;border-radius:inherit}
.nexus-loading-copy{color:#b9b5c2}

@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{scroll-behavior:auto!important}
}

/* Nexus 0.6.5 universal step status colors and reusable section context labels. */
:root{
  --nexus-status-locked:#ff6b79;
  --nexus-status-coming-soon:#a8dcff;
  --nexus-status-available:#f6d979;
  --nexus-status-complete:#9ae7c4;
}
.tool-status.status-locked{
  color:var(--nexus-status-locked)!important;
  border-color:rgba(255,80,99,.38)!important;
  background:rgba(255,62,82,.1)!important;
}
.tool-status.status-coming-soon{
  color:var(--nexus-status-coming-soon)!important;
  border-color:rgba(168,220,255,.3)!important;
  background:rgba(125,196,244,.09)!important;
}
.tool-status.status-available{
  color:var(--nexus-status-available)!important;
  border-color:rgba(244,203,79,.38)!important;
  background:rgba(244,203,79,.1)!important;
}
.tool-status.status-complete{
  color:var(--nexus-status-complete)!important;
  border-color:rgba(76,214,155,.32)!important;
  background:rgba(76,214,155,.09)!important;
}
.nexus-section-label{
  display:inline-flex;
  align-items:center;
  min-height:28px;
  margin:0!important;
  padding:6px 11px;
  border:1px solid currentColor;
  border-radius:999px;
  background:rgba(255,255,255,.025);
  font-size:.67rem!important;
  font-weight:900!important;
  letter-spacing:.13em!important;
  line-height:1;
  text-transform:uppercase;
}
.nexus-section-label-passion-path{
  color:var(--nexus-passion-magenta)!important;
  border-color:color-mix(in srgb,var(--nexus-passion-magenta) 58%,transparent)!important;
  background:linear-gradient(90deg,rgba(255,42,166,.08),rgba(84,25,199,.08));
  box-shadow:0 0 18px rgba(217,67,255,.08);
}

/* Nexus 0.6.6: saturated universal statuses, reusable sliders, and lock guidance. */
:root{
  --nexus-status-locked:#ff425f;
  --nexus-status-coming-soon:#62caff;
  --nexus-status-available:#ffd83f;
  --nexus-status-complete:#45e69a;
}
.tool-status.status-locked,
.nexus-status-pill.status-locked{
  color:#ff7186!important;
  border-color:rgba(255,66,95,.62)!important;
  background:rgba(255,45,78,.16)!important;
  box-shadow:inset 0 0 16px rgba(255,45,78,.08),0 0 12px rgba(255,45,78,.08)
}
.tool-status.status-coming-soon,
.nexus-status-pill.status-coming-soon{
  color:#8bdcff!important;
  border-color:rgba(98,202,255,.56)!important;
  background:rgba(48,166,255,.15)!important;
  box-shadow:inset 0 0 16px rgba(48,166,255,.07),0 0 12px rgba(48,166,255,.07)
}
.tool-status.status-available,
.nexus-status-pill.status-available{
  color:#ffe46f!important;
  border-color:rgba(255,216,63,.58)!important;
  background:rgba(255,199,35,.15)!important;
  box-shadow:inset 0 0 16px rgba(255,199,35,.07),0 0 12px rgba(255,199,35,.07)
}
.tool-status.status-complete,
.nexus-status-pill.status-complete{
  color:#72f0b3!important;
  border-color:rgba(69,230,154,.55)!important;
  background:rgba(42,205,126,.14)!important;
  box-shadow:inset 0 0 16px rgba(42,205,126,.07),0 0 12px rgba(42,205,126,.07)
}

[data-lock-requirement]{cursor:help!important}
.nexus-lock-tooltip{
  position:fixed;
  z-index:10000;
  width:max-content;
  max-width:min(330px,calc(100vw - 24px));
  padding:11px 14px;
  border:1px solid rgba(98,202,255,.58);
  border-radius:14px;
  color:#e8f8ff;
  background:
    radial-gradient(circle at 18% 0,rgba(184,233,255,.18),transparent 48%),
    linear-gradient(135deg,rgba(31,89,199,.96),rgba(50,36,136,.97));
  box-shadow:0 0 0 1px rgba(116,211,255,.08),0 0 24px rgba(54,154,255,.32),0 16px 38px rgba(0,0,0,.42);
  font-size:.79rem;
  font-weight:750;
  line-height:1.45;
  letter-spacing:.005em;
  pointer-events:none;
  animation:nexusLockTooltipGlow 1.65s ease-in-out infinite alternate
}
.nexus-lock-tooltip::after{
  content:"";
  position:absolute;
  left:50%;
  bottom:-6px;
  width:11px;
  height:11px;
  border-right:1px solid rgba(98,202,255,.55);
  border-bottom:1px solid rgba(98,202,255,.55);
  background:#30268a;
  transform:translateX(-50%) rotate(45deg)
}
.nexus-lock-tooltip[hidden]{display:none!important}
@keyframes nexusLockTooltipGlow{
  from{filter:brightness(.96);box-shadow:0 0 0 1px rgba(116,211,255,.07),0 0 18px rgba(54,154,255,.22),0 14px 34px rgba(0,0,0,.38)}
  to{filter:brightness(1.08);box-shadow:0 0 0 1px rgba(116,211,255,.16),0 0 31px rgba(91,185,255,.43),0 18px 42px rgba(0,0,0,.46)}
}

.nexus-range{
  --nexus-range-fill:0%;
  --nexus-range-start:var(--nexus-foundation-red);
  --nexus-range-mid:var(--nexus-foundation-pink);
  --nexus-range-end:var(--nexus-foundation-purple);
  width:100%;
  height:8px;
  margin:0;
  border:0;
  border-radius:999px;
  -webkit-appearance:none;
  appearance:none;
  cursor:pointer;
  background-image:
    linear-gradient(90deg,transparent 0 var(--nexus-range-fill),rgba(43,40,53,.97) var(--nexus-range-fill) 100%),
    linear-gradient(90deg,var(--nexus-range-start),var(--nexus-range-mid) 48%,var(--nexus-range-end));
  background-size:100% 100%,100% 100%;
  background-repeat:no-repeat;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.045),0 0 14px rgba(255,63,145,.08)
}
.nexus-range-passion{
  --nexus-range-start:var(--nexus-passion-pink);
  --nexus-range-mid:var(--nexus-passion-magenta);
  --nexus-range-end:var(--nexus-passion-purple)
}
.nexus-range::-webkit-slider-runnable-track{height:8px;border-radius:999px;background:transparent}
.nexus-range::-moz-range-track{height:8px;border-radius:999px;background:transparent}
.nexus-range::-moz-range-progress{height:8px;border-radius:999px;background:transparent}
.nexus-range::-webkit-slider-thumb{
  width:20px;height:20px;margin-top:-6px;border:2px solid #fff;border-radius:50%;
  -webkit-appearance:none;appearance:none;background:#fff;
  box-shadow:0 0 0 3px rgba(255,63,145,.36),0 0 18px rgba(255,255,255,.5)
}
.nexus-range::-moz-range-thumb{
  width:17px;height:17px;border:2px solid #fff;border-radius:50%;background:#fff;
  box-shadow:0 0 0 3px rgba(255,63,145,.36),0 0 18px rgba(255,255,255,.5)
}
@media(prefers-reduced-motion:reduce){.nexus-lock-tooltip{animation:none}}
[data-lock-requirement] button:disabled{cursor:help!important;pointer-events:none}

/* Nexus 0.6.8: fixed-gradient range reveal. The gradient keeps its full-width
   color positions while progress only uncovers more of it. */
.nexus-range-reveal{
  --nexus-range-fill:0%;
  --nexus-range-start:var(--nexus-foundation-red);
  --nexus-range-mid:var(--nexus-foundation-pink);
  --nexus-range-end:var(--nexus-foundation-purple);
  position:relative;
  display:flex;
  align-items:center;
  width:100%;
  min-width:0;
  height:21px;
}
.nexus-range-reveal-passion{
  --nexus-range-start:var(--nexus-passion-pink);
  --nexus-range-mid:var(--nexus-passion-magenta);
  --nexus-range-end:var(--nexus-passion-purple);
}
.nexus-range-reveal::before,
.nexus-range-reveal::after{
  content:"";
  position:absolute;
  left:0;
  right:0;
  top:50%;
  height:7px;
  border-radius:999px;
  transform:translateY(-50%);
  pointer-events:none;
}
.nexus-range-reveal::before{
  background:rgba(43,40,53,.97);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.045),0 0 14px rgba(255,63,145,.08);
}
.nexus-range-reveal::after{
  background:linear-gradient(90deg,var(--nexus-range-start) 0%,var(--nexus-range-mid) 48%,var(--nexus-range-end) 100%);
  clip-path:inset(0 calc(100% - var(--nexus-range-fill)) 0 0 round 999px);
  box-shadow:0 0 13px rgba(221,67,243,.12);
}
.nexus-range-reveal>.nexus-range{
  position:relative;
  z-index:2;
  width:100%!important;
  background:transparent!important;
  background-image:none!important;
  box-shadow:none!important;
}