/* ===================================================
   PLEXUS — Demo banner overlay
   Sits above the mounted Plexus app.
   =================================================== */

:root {
  --demo-bg:     rgba(7, 7, 12, 0.92);
  --demo-red:    #ff003c;
  --demo-glow:   #ff2d5e;
  --demo-text:   #e8e8f0;
  --demo-dim:    #8a8a98;
  --demo-border: rgba(255, 0, 60, 0.4);
}

html, body {
  height: 100%;
  margin: 0;
  padding: 0;
  background: #07070c;
  overflow: hidden;
}

body.plexus-demo {
  display: flex;
  flex-direction: column;
}

/* === Banner === */
.demo-banner {
  flex: 0 0 auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  padding: 0.55rem 1rem;
  background: var(--demo-bg);
  border-bottom: 1px solid var(--demo-border);
  font-family: 'Share Tech Mono', monospace;
  font-size: 0.74rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  z-index: 10000;
  backdrop-filter: blur(8px);
}

.demo-banner-left,
.demo-banner-right {
  display: flex;
  align-items: center;
  gap: 0.8rem;
}

.demo-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--demo-red);
  box-shadow: 0 0 10px var(--demo-red);
  animation: demoPulse 1.6s ease-in-out infinite;
  flex-shrink: 0;
}

@keyframes demoPulse {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.4; }
}

.demo-label {
  color: var(--demo-red);
  font-weight: 700;
  letter-spacing: 0.18em;
}

.demo-fine {
  color: var(--demo-dim);
  font-size: 0.7rem;
  letter-spacing: 0.08em;
  text-transform: none;
}

.demo-link,
.demo-buy {
  text-decoration: none;
  color: var(--demo-text);
  padding: 0.35rem 0.8rem;
  border: 1px solid var(--demo-border);
  transition: all 0.18s ease;
  font-size: 0.74rem;
  letter-spacing: 0.14em;
  white-space: nowrap;
  /* Reset native <button> chrome so the trigger looks like the <a> links */
  background: transparent;
  -webkit-appearance: none;
  appearance: none;
  font-family: inherit;
}

.demo-link:hover {
  color: var(--demo-red);
  border-color: var(--demo-red);
}

.demo-buy {
  background: var(--demo-red);
  color: #07070c;
  border-color: var(--demo-red);
  box-shadow: 0 0 12px rgba(255, 0, 60, 0.4);
  font-weight: 700;
}

.demo-buy:hover {
  background: var(--demo-glow);
  box-shadow: 0 0 20px rgba(255, 0, 60, 0.6);
}

/* === Stage = remaining viewport === */
.demo-stage {
  flex: 1 1 auto;
  position: relative;
  overflow: hidden;
}

/* === Banner state visibility (anon | account | active) === */

/* Hide all state-specific labels by default */
.demo-banner .lbl-anon,
.demo-banner .lbl-account,
.demo-banner .lbl-active { display: none; }

/* Show only the labels matching the current state */
.demo-banner.anon    .lbl-anon    { display: inline-flex; align-items: center; gap: 0.4rem; }
.demo-banner.account .lbl-account { display: inline-flex; align-items: center; gap: 0.4rem; }
.demo-banner.active  .lbl-active  { display: inline-flex; align-items: center; gap: 0.4rem; }

/* Buy button only when not active */
.demo-banner.active .demo-buy { display: none; }

/* Label color shifts per state for visual differentiation */
.demo-banner.account .demo-label.lbl-account,
.demo-banner.active  .demo-label.lbl-active {
  color: var(--demo-glow);
  font-weight: 700;
}

/* The license trigger shows different text per state — handled via lbl-* spans.
   Heavy reset on the <button> element specifically so it stops looking like
   a native form button (which would hide our label until hover). */
button#license-trigger.demo-link {
  background: transparent !important;
  color: var(--demo-text) !important;
  -webkit-appearance: none;
  appearance: none;
  font-family: inherit;
  cursor: pointer;
  line-height: inherit;
}
button#license-trigger.demo-link:hover {
  color: var(--demo-red) !important;
}
#license-trigger .lbl-unlicensed,
#license-trigger .lbl-licensed { display: none; }
.demo-banner.unlicensed #license-trigger .lbl-unlicensed { display: inline; }
.demo-banner.licensed   #license-trigger .lbl-licensed   { display: inline; }

/* === License modal === */
.license-modal {
  position: fixed;
  inset: 0;
  z-index: 99999;
  background: rgba(7, 7, 12, 0.85);
  backdrop-filter: blur(8px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
}
.license-modal[hidden] { display: none; }

/* Modal state visibility — same pattern as the banner */
.license-modal .lbl-anon,
.license-modal .lbl-account,
.license-modal .lbl-active { display: none; }

.license-modal.anon    .lbl-anon    { display: block; }
.license-modal.account .lbl-account { display: block; }
.license-modal.active  .lbl-active  { display: block; }

/* Buttons need different display value when shown */
.license-modal.anon    button.lbl-anon    { display: inline-block; }
.license-modal.account button.lbl-account { display: inline-block; }
.license-modal.active  button.lbl-active  { display: inline-block; }

/* Modal sections + dividers + helpers */
.modal-section { margin-bottom: 1.4rem; }
.modal-section-title {
  font-family: 'Orbitron', sans-serif;
  font-size: 0.78rem;
  letter-spacing: 0.22em;
  color: var(--demo-glow);
  text-transform: uppercase;
  margin-bottom: 0.8rem;
}
.modal-divider {
  height: 1px;
  background: var(--demo-border);
  margin: 1.6rem 0 1.4rem;
}
.modal-text {
  color: var(--demo-text);
  font-size: 0.85rem;
  letter-spacing: 0.05em;
  text-transform: none;
  margin-bottom: 1rem;
  line-height: 1.55;
}
.modal-text strong { color: var(--demo-glow); font-weight: 700; }
.modal-error {
  color: var(--demo-red);
  font-size: 0.78rem;
  letter-spacing: 0.06em;
  margin-top: 0.5rem;
  text-transform: none;
}
.modal-success {
  color: var(--demo-glow);
  font-size: 0.82rem;
  letter-spacing: 0.05em;
  margin-top: 0.5rem;
  text-transform: none;
  line-height: 1.5;
  padding: 0.6rem 0.8rem;
  border: 1px solid var(--demo-border);
  background: rgba(255, 0, 60, 0.06);
}
.modal-actions {
  display: flex;
  gap: 0.5rem;
  margin-top: 1rem;
  flex-wrap: wrap;
}
.modal-actions .lic-btn { flex: 1 1 auto; min-width: 0; }
.modal-fine {
  text-align: center;
  margin-top: 1rem;
  color: var(--demo-dim);
  font-size: 0.74rem;
  letter-spacing: 0.08em;
  text-transform: none;
}
.modal-fine a { color: var(--demo-red); text-decoration: none; }
.modal-fine a:hover { text-shadow: 0 0 8px rgba(255, 0, 60, 0.5); }
.modal-footer {
  margin-top: 1.6rem;
  padding-top: 1.2rem;
  border-top: 1px solid var(--demo-border);
  display: flex;
  justify-content: flex-end;
}

.license-panel {
  position: relative;
  background: #0a0a12;
  border: 1px solid var(--demo-border);
  padding: 2rem 1.8rem;
  max-width: 460px;
  width: 100%;
  font-family: 'Share Tech Mono', monospace;
  letter-spacing: 0.06em;
  box-shadow: 0 0 32px rgba(255, 0, 60, 0.22);
  color: var(--demo-text);
}

.license-panel .corner {
  position: absolute;
  width: 14px;
  height: 14px;
  border: 1px solid var(--demo-red);
  pointer-events: none;
}
.license-panel .corner.tl { top: -1px; left: -1px;     border-right: none; border-bottom: none; }
.license-panel .corner.tr { top: -1px; right: -1px;    border-left: none;  border-bottom: none; }
.license-panel .corner.bl { bottom: -1px; left: -1px;  border-right: none; border-top: none; }
.license-panel .corner.br { bottom: -1px; right: -1px; border-left: none;  border-top: none; }

.license-panel h2 {
  font-family: 'Orbitron', sans-serif;
  font-size: 1.05rem;
  font-weight: 700;
  letter-spacing: 0.22em;
  color: var(--demo-red);
  margin-bottom: 1.2rem;
  text-transform: uppercase;
}

.license-status {
  color: var(--demo-text);
  font-size: 0.85rem;
  letter-spacing: 0.08em;
  text-transform: none;
  margin-bottom: 1.4rem;
  line-height: 1.5;
}

.license-label {
  display: block;
  margin-bottom: 0.6rem;
}

.license-label > span {
  display: block;
  font-size: 0.7rem;
  letter-spacing: 0.2em;
  color: var(--demo-dim);
  margin-bottom: 0.4rem;
  text-transform: uppercase;
}

#license-input {
  width: 100%;
  background: rgba(7, 7, 12, 0.6);
  border: 1px solid var(--demo-border);
  color: var(--demo-text);
  font-family: 'Share Tech Mono', monospace;
  padding: 0.8rem 0.9rem;
  font-size: 0.92rem;
  letter-spacing: 0.12em;
  outline: none;
  transition: border-color 0.18s, box-shadow 0.18s;
}
#license-input:focus {
  border-color: var(--demo-red);
  box-shadow: 0 0 14px rgba(255, 0, 60, 0.3);
}

.license-error {
  color: var(--demo-red);
  font-size: 0.78rem;
  letter-spacing: 0.08em;
  margin-top: 0.5rem;
  text-transform: none;
}

.license-actions {
  display: flex;
  gap: 0.5rem;
  margin-top: 1.4rem;
}

.lic-btn {
  flex: 1;
  background: transparent;
  border: 1px solid var(--demo-border);
  color: var(--demo-text);
  padding: 0.7rem 1rem;
  font-family: 'Share Tech Mono', monospace;
  font-size: 0.82rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  cursor: pointer;
  transition: all 0.18s ease;
}
.lic-btn.primary {
  background: var(--demo-red);
  color: #07070c;
  border-color: var(--demo-red);
  box-shadow: 0 0 14px rgba(255, 0, 60, 0.4);
  font-weight: 700;
}
.lic-btn.primary:hover {
  background: var(--demo-glow);
  box-shadow: 0 0 22px rgba(255, 0, 60, 0.6);
}
.lic-btn.ghost { color: var(--demo-dim); }
.lic-btn.ghost:hover { color: var(--demo-text); border-color: var(--demo-text); }
.lic-btn.danger {
  color: var(--demo-red);
  border-color: var(--demo-red);
}
.lic-btn.danger:hover {
  background: rgba(255, 0, 60, 0.1);
  box-shadow: 0 0 12px rgba(255, 0, 60, 0.3);
}

.license-fine {
  text-align: center;
  margin-top: 1.4rem;
  color: var(--demo-dim);
  font-size: 0.74rem;
  letter-spacing: 0.1em;
  text-transform: none;
}
.license-fine a {
  color: var(--demo-red);
  text-decoration: none;
}
.license-fine a:hover { text-shadow: 0 0 8px rgba(255, 0, 60, 0.5); }

/* === Custom cursor (mirrors N.IVEN hub) === */
@media (hover: hover) and (pointer: fine) {
  body, a, button { cursor: none; }
}

.cursor {
  position: fixed;
  top: 0; left: 0;
  width: 30px;
  height: 30px;
  pointer-events: none;
  /* Above absolutely everything (banner = 10000, modal = 99999) */
  z-index: 2147483647;
  transform: translate3d(-50%, -50%, 0);
  will-change: transform, width, height;
  transition: width 0.25s cubic-bezier(0.34, 1.56, 0.64, 1),
              height 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
  mix-blend-mode: plus-lighter;
  opacity: 0;
}

.cur-bracket {
  position: absolute;
  width: 7px;
  height: 7px;
  transition: width 0.25s, height 0.25s, border-color 0.25s;
}
.br-tl { top: 0;    left: 0;    border-top: 1px solid var(--demo-red);    border-left: 1px solid var(--demo-red); }
.br-tr { top: 0;    right: 0;   border-top: 1px solid var(--demo-red);    border-right: 1px solid var(--demo-red); }
.br-bl { bottom: 0; left: 0;    border-bottom: 1px solid var(--demo-red); border-left: 1px solid var(--demo-red); }
.br-br { bottom: 0; right: 0;   border-bottom: 1px solid var(--demo-red); border-right: 1px solid var(--demo-red); }

.cursor-dot {
  position: fixed;
  top: 0; left: 0;
  width: 5px;
  height: 5px;
  background: var(--demo-red);
  border-radius: 50%;
  pointer-events: none;
  z-index: 2147483647;
  transform: translate3d(-50%, -50%, 0);
  box-shadow: 0 0 10px var(--demo-red), 0 0 3px #fff;
  will-change: transform;
  opacity: 0;
}

.cursor.down { width: 22px; height: 22px; }

@media (hover: none), (pointer: coarse) {
  .cursor, .cursor-dot { display: none; }
}

/* === Mobile === */
@media (max-width: 720px) {
  .demo-banner { padding: 0.45rem 0.7rem; gap: 0.5rem; }
  .demo-fine   { display: none; }
  .demo-link, .demo-buy { padding: 0.3rem 0.55rem; font-size: 0.68rem; }
}