/* Demo-only presentation layer. The production War Room stylesheet remains untouched. */
.twr[data-demo="true"] {
  --orange: #7c6cff;
  --orange-soft: #a99cff;
  --blue: #62c7ff;
}

.twr[data-demo="true"] .demo-global-banner {
  position: sticky;
  top: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  min-height: 38px;
  padding: 8px 16px;
  border-bottom: 1px solid rgba(124, 108, 255, 0.44);
  background: linear-gradient(90deg, rgba(22, 17, 48, 0.98), rgba(12, 22, 42, 0.98));
  color: #d9eaff;
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.32);
  font-size: 0.75rem;
  letter-spacing: 0.025em;
  text-align: center;
  backdrop-filter: blur(18px);
}

.twr[data-demo="true"] .demo-global-banner b {
  color: #fff;
  font-size: 0.72rem;
  letter-spacing: 0.12em;
}

.twr[data-demo="true"] .demo-pulse {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #65e4ba;
  box-shadow: 0 0 0 5px rgba(101, 228, 186, 0.1), 0 0 18px rgba(101, 228, 186, 0.5);
}

.twr[data-demo="true"] .premium-logo-mark,
.twr[data-demo="true"] .rc-side-mark {
  border-color: #a99cff;
  background: linear-gradient(145deg, #8979ff, #5044c7 72%);
  box-shadow: 0 10px 28px rgba(109, 92, 238, 0.28);
}

.twr[data-demo="true"] .premium-login-shell::before,
.twr[data-demo="true"] .rc-sidebar::after {
  background: linear-gradient(90deg, #7c6cff, #62c7ff, transparent);
  box-shadow: 0 0 28px rgba(124, 108, 255, 0.42);
}

.twr[data-demo="true"] .demo-login-shell {
  width: min(900px, calc(100% - 32px));
  border-color: rgba(124, 108, 255, 0.38);
  background:
    radial-gradient(circle at 100% 0, rgba(98, 199, 255, 0.12), transparent 30rem),
    radial-gradient(circle at 0 70%, rgba(124, 108, 255, 0.12), transparent 32rem),
    linear-gradient(145deg, #111723, #090d14 72%);
}

.twr[data-demo="true"] .demo-login-shell .rc-login-command {
  border-color: rgba(124, 108, 255, 0.33);
  background: linear-gradient(125deg, rgba(39, 31, 79, 0.54), #0e1722);
}

.twr[data-demo="true"] .demo-login-shell .rc-login-features > div::after {
  background: linear-gradient(90deg, #7c6cff, #62c7ff, transparent);
}

.twr[data-demo="true"] .demo-login-shell .rules-hero {
  border-color: rgba(101, 228, 186, 0.27);
  background: linear-gradient(135deg, rgba(28, 65, 59, 0.28), rgba(8, 14, 21, 0.9));
}

.twr[data-demo="true"] .demo-login-shell .rules-grid > div {
  border-color: rgba(101, 228, 186, 0.18);
}

.twr[data-demo="true"] .login-compliance {
  padding: 0;
  overflow: hidden;
  border-color: rgba(124, 108, 255, 0.42);
  background: #0b1019;
}

.twr[data-demo="true"] .demo-credentials-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 15px;
  border-bottom: 1px solid rgba(124, 108, 255, 0.24);
  background: rgba(124, 108, 255, 0.1);
}

.twr[data-demo="true"] .demo-credentials-head span {
  color: #d7d1ff;
  font-size: 0.76rem;
  font-weight: 900;
  letter-spacing: 0.11em;
}

.twr[data-demo="true"] .demo-credentials-head small,
.twr[data-demo="true"] .login-compliance p {
  color: #9aa6b8;
}

.twr[data-demo="true"] .demo-credential-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  padding: 14px 15px 8px;
}

.twr[data-demo="true"] .demo-credential-grid > div {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 14px;
  border: 1px solid #323b4a;
  border-radius: 11px;
  background: #111823;
}

.twr[data-demo="true"] .demo-credential-grid span,
.twr[data-demo="true"] .demo-login-form label > span {
  color: #8390a3;
  font-size: 0.7rem;
  font-weight: 850;
  letter-spacing: 0.1em;
}

.twr[data-demo="true"] .demo-credential-grid b {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  color: #fff;
  letter-spacing: 0.06em;
}

.twr[data-demo="true"] .login-compliance p {
  margin: 4px 15px 14px;
  font-size: 0.82rem;
}

.twr[data-demo="true"] .demo-login-form {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 11px;
  margin: 12px 0 8px;
}

.twr[data-demo="true"] .demo-login-form label {
  display: grid;
  gap: 6px;
}

.twr[data-demo="true"] .demo-login-form input,
.twr[data-demo="true"] .demo-login-form #wr-key {
  min-height: 50px;
  margin: 0;
  border-color: #465269;
  background: #111925;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-weight: 750;
  letter-spacing: 0.045em;
}

.twr[data-demo="true"] #wr-enter {
  border-color: #8173ef;
  background: linear-gradient(180deg, #8a7aff, #5848ce);
  box-shadow: 0 10px 28px rgba(92, 75, 212, 0.26), inset 0 1px rgba(255,255,255,0.18);
}

.twr[data-demo="true"] .demo-mode-badge {
  display: inline-flex;
  margin-top: 4px;
  padding: 4px 8px;
  border: 1px solid rgba(124, 108, 255, 0.46);
  border-radius: 999px;
  background: rgba(124, 108, 255, 0.11);
  color: #bcb4ff;
  font-size: 0.62rem;
  font-weight: 900;
  letter-spacing: 0.12em;
}

.twr[data-demo="true"] .rc-sidebar {
  top: 38px;
  height: calc(100vh - 38px);
}

.twr[data-demo="true"] .rc-side-brand span::after {
  display: block;
  color: #a99cff;
  content: "LOCAL DEMO";
}

.twr[data-demo="true"] .connection-online {
  border-color: rgba(124, 108, 255, 0.48);
  background: rgba(124, 108, 255, 0.11);
  color: #bcb5ff;
}

.twr[data-demo="true"] .demo-intel-note {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
  padding: 11px 13px;
  border: 1px solid rgba(98, 199, 255, 0.26);
  border-radius: 11px;
  background: rgba(98, 199, 255, 0.07);
  color: #cbd8e8;
  font-size: 0.82rem;
}

.twr[data-demo="true"] .demo-intel-note b {
  flex: 0 0 auto;
  color: #89d5ff;
  font-size: 0.72rem;
  letter-spacing: 0.08em;
}

.twr[data-demo="true"] #wr-spy-admin .grid2:has(input.hidden) {
  grid-template-columns: 1fr;
}

.twr[data-demo="true"] .player-link[href^="#demo-player-"] {
  cursor: help;
  text-decoration-style: dotted;
}

@media (max-width: 680px) {
  .twr[data-demo="true"] .demo-global-banner {
    justify-content: flex-start;
    min-height: 42px;
    overflow-x: auto;
    white-space: nowrap;
  }

  .twr[data-demo="true"] .demo-global-banner span:last-child {
    font-size: 0.7rem;
  }

  .twr[data-demo="true"] .demo-login-shell {
    width: min(100% - 16px, 900px);
  }

  .twr[data-demo="true"] .demo-login-form,
  .twr[data-demo="true"] .demo-credential-grid {
    grid-template-columns: 1fr;
  }

  .twr[data-demo="true"] .demo-credentials-head,
  .twr[data-demo="true"] .demo-intel-note {
    align-items: flex-start;
    flex-direction: column;
  }
}

@media (prefers-reduced-motion: reduce) {
  .twr[data-demo="true"] .demo-pulse { box-shadow: none; }
}