/* Butterfly Command visual layer. Loaded after styles.css. */
.war-room-shell {
  --ink: #e8e2d4;
  --muted: #948d7f;
  --line: rgba(181, 137, 91, .22);
  --panel: #12110e;
  --panel-2: #191713;
  --mint: #a8c48a;
  --mint-dim: #637d50;
  --amber: #d0a447;
  --red: #b8332d;
  min-width: 320px;
  color: var(--ink);
  background: #0a0a08;
  font-family: "Manrope", "Microsoft YaHei", Arial, sans-serif;
}

.war-room-shell::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: rgba(61, 23, 18, .12);
}

.war-room-shell .grain {
  opacity: .09;
  mix-blend-mode: screen;
}

.war-room-shell .topbar {
  height: 66px;
  grid-template-columns: minmax(260px, 1fr) auto auto auto;
  border-color: rgba(184, 51, 45, .42);
  background: rgba(14, 13, 10, .96);
  box-shadow: inset 0 -2px 0 rgba(208, 164, 71, .08), 0 12px 32px rgba(0, 0, 0, .32);
  backdrop-filter: blur(12px);
}

.war-room-shell .brand {
  gap: 11px;
  color: #f0eadd;
  font-size: 17px;
}

.war-room-shell .brand > span:last-child {
  display: grid;
  gap: 1px;
}

.war-room-shell .brand strong {
  font-size: 17px;
  line-height: 1.1;
}

.war-room-shell .brand small {
  color: #8d7862;
  font: 8px var(--mono);
}

.war-room-shell .brand-mark {
  width: 34px;
  height: 34px;
  border: 1px solid #c74a3f;
  border-radius: 0;
  color: #f2d7b0;
  background: #6c1f1b;
  box-shadow: inset 0 0 0 3px #241411, 0 0 18px rgba(184, 51, 45, .25);
  font-size: 14px;
  clip-path: polygon(50% 0, 92% 24%, 92% 76%, 50% 100%, 8% 76%, 8% 24%);
}

.war-room-shell .brand-logo {
  display: block;
  flex: 0 0 40px;
  width: 40px;
  height: 40px;
  object-fit: cover;
  border: 1px solid rgba(199, 74, 63, .62);
  background: #202124;
  box-shadow: 0 0 18px rgba(184, 51, 45, .24);
}

.war-room-shell .network {
  color: #b7aa96;
  border-color: rgba(208, 164, 71, .3);
  background: #17140f;
}

.war-room-shell .live-dot,
.war-room-shell .status-chip i {
  background: #b8d39a;
  box-shadow: 0 0 8px rgba(168, 196, 138, .72);
}

.war-room-shell .network-id,
.war-room-shell .mint,
.war-room-shell .status-chip,
.war-room-shell .text-button,
.war-room-shell .source-toggle span:last-child {
  color: #b7d198 !important;
}

.war-room-shell .main-nav a {
  position: relative;
  color: #877f72;
  font-size: 12px;
}

.war-room-shell .main-nav a.active,
.war-room-shell .main-nav a:hover {
  color: #e6d8c3;
}

.war-room-shell .main-nav a.active::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: -23px;
  left: 0;
  height: 2px;
  background: #b8332d;
}

.war-room-shell .wallet-button {
  border-color: rgba(184, 51, 45, .55);
  color: #efddd0;
  background: #451916;
  box-shadow: inset 0 0 0 1px rgba(231, 127, 96, .06);
}

.war-room-shell .wallet-button:hover {
  background: #61201c;
}

.war-room-shell .wallet-icon {
  color: #d8a25b;
}

.war-room-shell .hero {
  min-height: 430px;
  padding: 94px clamp(24px, 8vw, 128px) 48px;
  border-color: rgba(184, 51, 45, .35);
  background: #0b0a08;
}

.war-room-shell .hero-backdrop {
  background: url("assets/butterfly-war-room-bg-cloudflare-v2.png") center 45% / cover no-repeat;
  opacity: .56;
  filter: saturate(.78) contrast(1.08);
}

.war-room-shell .hero::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: rgba(8, 8, 6, .36);
  box-shadow: inset 0 -120px 120px rgba(8, 8, 6, .78), inset 0 0 150px rgba(0, 0, 0, .5);
}

.war-room-shell .hero-copy,
.war-room-shell .hero-hud {
  position: relative;
  z-index: 2;
}

.war-room-shell .hero-hud {
  position: absolute;
  top: 22px;
  right: clamp(24px, 8vw, 128px);
  left: clamp(24px, 8vw, 128px);
  display: flex;
  justify-content: space-between;
  padding-bottom: 10px;
  border-bottom: 1px solid rgba(208, 164, 71, .28);
  color: #9c8e78;
  font: 8px var(--mono);
}

.war-room-shell .eyebrow {
  color: #d0a447;
  font-size: 9px;
}

.war-room-shell .pulse-ring {
  width: 7px;
  height: 7px;
  border-radius: 0;
  background: #b8332d;
  box-shadow: 0 0 0 4px rgba(184, 51, 45, .15), 0 0 12px rgba(184, 51, 45, .8);
  transform: rotate(45deg);
}

.war-room-shell .hero h1 {
  max-width: 760px;
  color: #f2eadc;
  font-size: clamp(42px, 6vw, 76px);
  line-height: 1;
  text-shadow: 0 4px 28px rgba(0, 0, 0, .9);
}

.war-room-shell .hero-command {
  margin: 14px 0 0;
  color: #e0b872;
  font-size: 18px;
  font-weight: 700;
}

.war-room-shell .hero-description {
  width: min(520px, 100%);
  margin: 9px 0 24px;
  color: #b9b0a2;
}

.war-room-shell .hero-stats {
  gap: 0;
}

.war-room-shell .hero-stats div {
  min-width: 130px;
  padding: 8px 20px 8px 0;
  margin-right: 20px;
  border-right: 1px solid rgba(208, 164, 71, .24);
}

.war-room-shell .hero-stats span,
.war-room-shell .token-metrics span,
.war-room-shell .activity-strip span {
  color: #8f887c;
}

.war-room-shell .hero-stats strong {
  color: #d9c6a4;
  font-size: 17px;
}

.war-room-shell .market-glance {
  position: absolute;
  z-index: 2;
  right: clamp(24px, 7vw, 108px);
  bottom: 45px;
  width: 270px;
  padding: 14px;
  border: 1px solid rgba(184, 51, 45, .46);
  background: rgba(18, 15, 11, .88);
  box-shadow: inset 0 0 0 3px rgba(8, 7, 5, .7), 0 18px 40px rgba(0, 0, 0, .45);
  backdrop-filter: blur(8px);
}

.war-room-shell .glance-head {
  color: #d3b06f;
  border-color: rgba(208, 164, 71, .2);
}

.war-room-shell .radar-scope {
  position: relative;
  width: 94px;
  height: 94px;
  margin: 13px auto 4px;
  overflow: hidden;
  border: 1px solid #657b54;
  border-radius: 50%;
  background: #10160f;
  box-shadow: inset 0 0 22px rgba(145, 176, 119, .12);
}

.war-room-shell .radar-scope::before,
.war-room-shell .radar-scope::after {
  content: "";
  position: absolute;
  background: rgba(158, 188, 132, .28);
}

.war-room-shell .radar-scope::before {
  top: 46px;
  left: 0;
  width: 100%;
  height: 1px;
}

.war-room-shell .radar-scope::after {
  top: 0;
  left: 46px;
  width: 1px;
  height: 100%;
}

.war-room-shell .radar-scope i,
.war-room-shell .radar-scope b {
  position: absolute;
  inset: 20px;
  border: 1px solid rgba(158, 188, 132, .25);
  border-radius: 50%;
}

.war-room-shell .radar-scope b {
  inset: 34px;
}

.war-room-shell .radar-scope span {
  position: absolute;
  top: 45px;
  left: 45px;
  width: 40px;
  height: 2px;
  background: #a8c48a;
  transform-origin: 1px 1px;
  animation: radarSweep 4s linear infinite;
  box-shadow: 0 0 8px rgba(168, 196, 138, .6);
}

@keyframes radarSweep { to { transform: rotate(360deg); } }

.war-room-shell .workspace {
  grid-template-columns: 236px minmax(490px, 1fr) 350px;
  border-color: rgba(181, 137, 91, .2);
  box-shadow: 0 30px 80px rgba(0, 0, 0, .35);
}

.war-room-shell .filter-panel,
.war-room-shell .trade-panel {
  background: #100f0c;
}

.war-room-shell .feed-panel {
  background: #14120f;
}

.war-room-shell .filter-panel,
.war-room-shell .trade-panel,
.war-room-shell .feed-panel,
.war-room-shell .token-row,
.war-room-shell .table-labels {
  border-color: rgba(181, 137, 91, .16);
}

.war-room-shell .panel-heading,
.war-room-shell .feed-header h2 {
  color: #e9dfce;
}

.war-room-shell .search,
.war-room-shell .segmented,
.war-room-shell .source-toggle,
.war-room-shell .filter-note,
.war-room-shell .icon-button,
.war-room-shell .sort-button,
.war-room-shell .amount-box,
.war-room-shell .quick-amounts button {
  border-color: rgba(181, 137, 91, .22);
  background: #191713;
}

.war-room-shell .source-toggle.selected {
  color: #e2d8c8;
  border-color: rgba(184, 51, 45, .54);
  background: #2d1512;
}

.war-room-shell .segmented button.selected {
  color: #f0dfc6;
  background: #4a1b17;
}

.war-room-shell input[type="range"],
.war-room-shell input[type="checkbox"] {
  accent-color: #b8332d;
}

.war-room-shell .table-labels {
  color: #776d60;
  background: #0e0d0b;
}

.war-room-shell .token-row:hover,
.war-room-shell .token-row.selected {
  background: #261512;
  box-shadow: inset 3px 0 0 #b8332d;
}

.war-room-shell .token-icon,
.war-room-shell .detail-token-icon {
  border-radius: 0;
  box-shadow: inset 0 0 0 2px rgba(0, 0, 0, .24);
}

.war-room-shell .verified-badge {
  color: #b7d198;
  border-color: rgba(168, 196, 138, .35);
}

.war-room-shell .chart-wrap {
  background: #0c0d0a;
  border: 1px solid rgba(181, 137, 91, .14);
}

.war-room-shell .trade-tabs button[data-mode="buy"].active {
  color: #b7d198;
  border-color: #8ba76f;
}

.war-room-shell .primary-trade {
  color: #f6e7d8;
  background: #8f2c27;
  box-shadow: inset 0 0 0 1px #bd4a40;
}

.war-room-shell .primary-trade:hover {
  background: #aa3932;
}

.war-room-shell .activity-strip {
  border-color: rgba(184, 51, 45, .35);
  background: #0f0e0c;
}

.war-room-shell .toast {
  color: #eadfcd;
  border-color: rgba(184, 51, 45, .55);
  background: #271310;
}

.war-room-shell.detail-page {
  background: #0a0908 url("assets/butterfly-war-room-bg-cloudflare-v2.png") center top / cover fixed no-repeat;
}

.war-room-shell.detail-page::after {
  content: "";
  position: fixed;
  inset: 66px 0 0;
  z-index: -1;
  background: rgba(8, 8, 6, .84);
}

.war-room-shell .flap-panel,
.war-room-shell .detail-card,
.war-room-shell .side-trade-shell,
.war-room-shell .actor-card,
.war-room-shell .rpc-config,
.war-room-shell .quick-trade-panel {
  border-color: rgba(181, 137, 91, .24);
  background: rgba(17, 15, 12, .96);
}

.war-room-shell .trade-sidebar,
.war-room-shell .side-trade-shell,
.war-room-shell .trade-topline,
.war-room-shell .trade-mode-tabs,
.war-room-shell .sidebar-actor-strip,
.war-room-shell .actor-tabs,
.war-room-shell .actor-card,
.war-room-shell .rpc-config,
.war-room-shell .balance-strip,
.war-room-shell .detail-amount-box,
.war-room-shell .side-quick-grid,
.war-room-shell .side-trade-stats {
  min-width: 0;
  width: 100%;
}

.war-room-shell .side-trade-shell {
  overflow: hidden;
}

.war-room-shell .actor-row > *,
.war-room-shell .detail-amount-box > div,
.war-room-shell .detail-amount-box input {
  min-width: 0;
}

.war-room-shell .flap-frame-shell,
.war-room-shell .balance-strip div,
.war-room-shell .trade-stats div,
.war-room-shell .quick-shortcut-section,
.war-room-shell .quick-balance-strip div {
  background: #0d0d0a;
}

.war-room-shell .detail-search button,
.war-room-shell .actor-tabs button.active,
.war-room-shell .quick-trade-dock {
  color: #f4e4d5;
  background: #8f2c27;
}

@media (max-width: 1130px) {
  .war-room-shell .workspace { grid-template-columns: 220px 1fr; }
  .war-room-shell .market-glance { display: none; }
}

@media (max-width: 770px) {
  .war-room-shell .topbar { height: 62px; grid-template-columns: 1fr auto; }
  .war-room-shell .brand small { display: none; }
  .war-room-shell .brand strong { font-size: 15px; }
  .war-room-shell .brand-mark { width: 30px; height: 30px; }
  .war-room-shell .brand-logo { flex-basis: 34px; width: 34px; height: 34px; }
  .war-room-shell .hero { min-height: 430px; padding: 86px 20px 36px; }
  .war-room-shell .hero-hud { right: 20px; left: 20px; }
  .war-room-shell .hero-hud span:nth-child(2) { display: none; }
  .war-room-shell .hero h1 { font-size: 43px; }
  .war-room-shell .hero-command { font-size: 16px; }
  .war-room-shell .hero-stats { gap: 12px; }
  .war-room-shell .hero-stats div { min-width: 0; padding-right: 12px; margin-right: 0; }
  .war-room-shell .activity-strip { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  .war-room-shell .radar-scope span { animation: none; transform: rotate(35deg); }
}
.official-social-cta { display:inline-grid; grid-template-columns:auto auto 24px; align-items:center; gap:12px; min-height:46px; margin:0 0 24px; padding:0 10px 0 16px; color:#fff4d6; border:1px solid rgba(220,177,92,.72); background:linear-gradient(180deg,rgba(126,29,25,.96),rgba(67,17,15,.98)); box-shadow:0 12px 30px rgba(0,0,0,.35),inset 0 0 0 1px rgba(255,222,146,.08); text-decoration:none; }
.official-social-cta:hover { color:#fff; border-color:#f0c66f; background:linear-gradient(180deg,#9b2b25,#591714); }
.official-social-cta-label { font-weight:800; }
.official-social-cta strong { color:#eac873; font:11px var(--mono); font-weight:500; }
.official-social-cta-arrow { display:grid; place-items:center; width:24px; height:24px; color:#210906; background:#e2b85c; font-size:15px; font-weight:900; }
@media (max-width:770px) { .official-social-cta { grid-template-columns:1fr 24px; width:min(100%,330px); gap:8px; } .official-social-cta strong { grid-column:1; grid-row:2; padding-bottom:8px; } .official-social-cta-arrow { grid-column:2; grid-row:1 / span 2; } }