:root {
  --bg: #090303;
  --bg2: #1b0507;
  --panel: rgba(25, 8, 10, .82);
  --line: rgba(255, 204, 92, .22);
  --text: #fff8e6;
  --muted: #c6a986;
  --green: #1ee084;
  --red: #d3192b;
  --gold: #ffd166;
  --casino-red: #8d0710;
  --casino-black: #050203;
  --felt: #063f24;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background:
    radial-gradient(circle at 18% 4%, rgba(255, 209, 102, .13), transparent 30%),
    radial-gradient(circle at 82% 12%, rgba(211, 25, 43, .18), transparent 28%),
    linear-gradient(135deg, #050101, #180307 48%, #03160d);
  color: var(--text);
  font-family: Inter, Segoe UI, Arial, sans-serif;
  letter-spacing: 0;
}

a { color: #ffd166; text-decoration: none; }
.container { max-width: 1180px; }

.glass-nav {
  background: rgba(8, 1, 3, .9);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--line);
}

.brand-logo-link {
  display: inline-flex !important;
  align-items: center;
  gap: 10px;
}

.brand-logo {
  width: 38px;
  height: 38px;
  object-fit: cover;
  object-position: center;
  border-radius: 10px;
  box-shadow: 0 0 0 1px rgba(255, 209, 102, .35), 0 10px 28px rgba(211, 25, 43, .18);
}

.sidebar-logo {
  width: 34px;
  height: 34px;
}

.market-ticker {
  height: 34px;
  overflow: hidden;
  background: #030000;
  border-bottom: 1px solid var(--line);
  white-space: nowrap;
}

.market-ticker div {
  display: inline-flex;
  gap: 44px;
  animation: ticker 24s linear infinite;
  padding: 7px 0;
}

.market-ticker span:nth-child(odd) { color: var(--gold); }
.market-ticker span:nth-child(even) { color: #ff6b72; }

@keyframes ticker {
  from { transform: translateX(100vw); }
  to { transform: translateX(-100%); }
}

.hero {
  min-height: calc(100vh - 96px);
  display: grid;
  align-items: center;
  padding: 72px 0 34px;
}

.hero h1 {
  font-size: clamp(2.5rem, 5vw, 5.7rem);
  line-height: .95;
  font-weight: 850;
}

.text-gradient {
  background: linear-gradient(90deg, #fff, #65ffb7, #55a6ff);
  -webkit-background-clip: text;
  color: transparent;
}

.glass-card {
  background: var(--panel);
  border: 1px solid var(--line);
  box-shadow: 0 20px 70px rgba(0, 0, 0, .3);
  border-radius: 8px;
}

.bot-orbit {
  position: relative;
  min-height: 420px;
  overflow: hidden;
}

.bot-orbit:before {
  content: "";
  position: absolute;
  inset: 28px;
  border: 1px solid rgba(25, 229, 140, .26);
  border-radius: 50%;
  box-shadow: 0 0 80px rgba(25, 229, 140, .12);
}

.chart-bars {
  position: absolute;
  inset: 70px 28px 30px;
  display: flex;
  align-items: end;
  gap: 9px;
}

.chart-bars i {
  flex: 1;
  background: linear-gradient(180deg, #23f3a1, #0a7d52);
  border-radius: 5px 5px 0 0;
  min-height: 40px;
  animation: bar 2.4s ease-in-out infinite;
}

.chart-bars i:nth-child(2n) {
  background: linear-gradient(180deg, #ff6b72, #8d1f2d);
  animation-delay: .4s;
}

.chart-bars i:nth-child(3n) { animation-delay: .8s; }
@keyframes bar { 50% { transform: scaleY(.55); } }

.robot-core {
  position: absolute;
  left: 50%;
  top: 40%;
  transform: translate(-50%, -50%);
  width: 160px;
  height: 160px;
  border-radius: 50%;
  background: radial-gradient(circle, #b8ffe1, #23f3a1 42%, #06472d);
  display: grid;
  place-items: center;
  font-size: 54px;
  color: #03110b;
  box-shadow: 0 0 80px rgba(25, 229, 140, .55);
}

.section-pad { padding: 76px 0; }

.risk-strip {
  background: rgba(255, 209, 102, .1);
  border: 1px solid rgba(255, 209, 102, .34);
  border-radius: 8px;
  padding: 16px;
}

.card-hover { transition: .25s; }
.card-hover:hover { transform: translateY(-6px); border-color: rgba(25, 229, 140, .5); }
.btn-success { background: linear-gradient(135deg, #14ce80, #0c9c61); border: 0; }
.pulse-btn { box-shadow: 0 0 0 rgba(25, 229, 140, .4); animation: pulse 2s infinite; }
@keyframes pulse { 70% { box-shadow: 0 0 0 14px rgba(25, 229, 140, 0); } }

.metric {
  padding: 18px;
  border-radius: 8px;
  background: rgba(255, 255, 255, .045);
  border: 1px solid var(--line);
}

.metric small { color: var(--muted); }
.metric b { display: block; font-size: 1.4rem; }

.hero-premium {
  position: relative;
  overflow: hidden;
  padding: 54px 0 34px;
}

.hero-bg-grid {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(rgba(85, 166, 255, .035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(85, 166, 255, .035) 1px, transparent 1px);
  background-size: 56px 56px;
  mask-image: linear-gradient(to bottom, #000, transparent 88%);
  animation: gridDrift 18s linear infinite;
}

.hero-premium:before {
  content: "";
  position: absolute;
  inset: auto -18% -30% 48%;
  height: 70%;
  background: radial-gradient(circle, rgba(25, 229, 140, .18), transparent 62%);
}

@keyframes gridDrift { to { background-position: 56px 56px; } }

.hero-slider {
  position: relative;
  min-height: 610px;
}

.hero-slide {
  position: absolute;
  inset: 0;
  display: grid;
  align-items: center;
  opacity: 0;
  transform: translateY(18px) scale(.985);
  transition: opacity .8s ease, transform .8s ease;
  pointer-events: none;
}

.hero-slide.active {
  opacity: 1;
  transform: none;
  pointer-events: auto;
}

.hero-status {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  color: #bffff0;
  border: 1px solid rgba(25, 229, 140, .24);
  background: rgba(25, 229, 140, .08);
  border-radius: 999px;
  padding: 8px 13px;
  font-size: .86rem;
  margin-bottom: 22px;
}

.hero-status span {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--green);
  box-shadow: 0 0 18px var(--green);
  animation: blink 1.5s infinite;
}

@keyframes blink { 50% { opacity: .35; } }

.hero-controls {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 18px;
}

.hero-controls button {
  background: rgba(255, 255, 255, .05);
  border: 1px solid var(--line);
  color: #dff;
  border-radius: 8px;
  padding: 10px 14px;
  min-width: 128px;
  text-align: left;
}

.hero-controls button span {
  display: block;
  color: var(--green);
  font-size: .72rem;
}

.hero-controls button.active {
  background: linear-gradient(135deg, rgba(25, 229, 140, .22), rgba(85, 166, 255, .14));
  border-color: rgba(25, 229, 140, .5);
}

.trade-terminal { overflow: hidden; }

.terminal-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 14px 16px;
  border-bottom: 1px solid var(--line);
  background: rgba(255, 255, 255, .045);
  font-size: .92rem;
  color: #dff;
}

.terminal-head div { display: flex; gap: 7px; }
.terminal-head i { display: block; width: 10px; height: 10px; border-radius: 50%; background: var(--green); }
.terminal-head i:nth-child(2) { background: var(--gold); }
.terminal-head i:nth-child(3) { background: var(--red); }

.bot-orbit.elevated {
  min-height: 476px;
  border-radius: 0;
  box-shadow: inset 0 -90px 120px rgba(5, 8, 12, .68);
}

.bot-orbit.elevated:after {
  content: "";
  position: absolute;
  left: 8%;
  right: 8%;
  bottom: 40px;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--green), transparent);
  box-shadow: 0 0 40px var(--green);
}

.signal-card {
  position: absolute;
  z-index: 3;
  background: rgba(5, 14, 24, .82);
  border: 1px solid rgba(85, 166, 255, .22);
  border-radius: 8px;
  padding: 12px 14px;
  box-shadow: 0 18px 40px rgba(0, 0, 0, .28);
  animation: floatCard 4s ease-in-out infinite;
}

.signal-card small { display: block; color: var(--muted); }
.signal-card b { display: block; color: #fff; }
.signal-card span { font-size: .78rem; color: #9fffd2; }
.signal-card-a { left: 24px; top: 70px; }
.signal-card-b { right: 22px; bottom: 78px; animation-delay: 1.2s; }
@keyframes floatCard { 50% { transform: translateY(-10px); } }

.hero-metrics {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin-top: 24px;
}

.hero-metrics div,
.preview-row div {
  background: rgba(255, 255, 255, .055);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 14px;
}

.hero-metrics small,
.preview-row small {
  display: block;
  color: var(--muted);
  font-size: .8rem;
}

.hero-metrics b,
.preview-row b {
  display: block;
  font-size: 1.05rem;
}

.dashboard-preview {
  display: grid;
  grid-template-columns: 92px 1fr;
  gap: 18px;
  min-height: 410px;
  padding: 18px;
  overflow: hidden;
}

.preview-sidebar {
  border-radius: 8px;
  background: linear-gradient(180deg, rgba(85, 166, 255, .2), rgba(25, 229, 140, .08));
  position: relative;
}

.preview-sidebar:before {
  content: "";
  position: absolute;
  inset: 18px;
  background: repeating-linear-gradient(to bottom, rgba(255, 255, 255, .18) 0 10px, transparent 10px 33px);
}

.preview-main { display: grid; gap: 16px; }
.preview-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }

.preview-chart {
  min-height: 210px;
  border-radius: 8px;
  border: 1px solid var(--line);
  background: linear-gradient(180deg, rgba(85, 166, 255, .08), rgba(25, 229, 140, .04));
  display: flex;
  align-items: end;
  gap: 14px;
  padding: 22px;
}

.preview-chart span {
  flex: 1;
  border-radius: 8px 8px 0 0;
  background: linear-gradient(180deg, #55a6ff, #19e58c);
  animation: bar 2.8s ease-in-out infinite;
}

.preview-chart span:nth-child(2n) { animation-delay: .5s; }
.preview-progress { height: 13px; border-radius: 99px; background: #0c2031; overflow: hidden; }
.preview-progress i { display: block; width: 66%; height: 100%; background: linear-gradient(90deg, var(--green), #55a6ff); animation: flow 2.2s infinite; }

.reward-badges { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 22px; }
.reward-badges b { border: 1px solid rgba(255, 209, 102, .28); background: rgba(255, 209, 102, .08); border-radius: 8px; padding: 10px 12px; color: #ffe7a3; }

.reward-showcase {
  min-height: 390px;
  display: grid;
  place-items: center;
  text-align: center;
  padding: 38px;
  position: relative;
  overflow: hidden;
}

.reward-showcase:before {
  content: "";
  position: absolute;
  width: 360px;
  height: 360px;
  border-radius: 50%;
  border: 1px solid rgba(255, 209, 102, .22);
  box-shadow: 0 0 80px rgba(255, 209, 102, .1);
}

.reward-showcase > * { position: relative; }
.reward-showcase .rank-badge { width: 116px; height: 116px; font-size: 42px; }
.reward-lines { display: grid; gap: 10px; width: min(320px, 90%); margin-top: 14px; }
.reward-lines span { height: 9px; border-radius: 30px; background: linear-gradient(90deg, var(--gold), var(--green)); animation: linePulse 2.2s ease-in-out infinite; }
.reward-lines span:nth-child(2) { width: 86%; animation-delay: .3s; }
.reward-lines span:nth-child(3) { width: 72%; animation-delay: .6s; }
.reward-lines span:nth-child(4) { width: 92%; animation-delay: .9s; }
@keyframes linePulse { 50% { filter: brightness(1.4); transform: scaleX(.92); } }

.market-section { padding-top: 48px; }
.metric-glow { position: relative; overflow: hidden; }
.metric-glow:after { content: ""; position: absolute; inset: 0; background: linear-gradient(120deg, transparent, rgba(25, 229, 140, .13), transparent); transform: translateX(-100%); animation: shine 4s infinite; }
@keyframes shine { 45%, 100% { transform: translateX(100%); } }

.section-title-row { display: flex; justify-content: space-between; gap: 20px; align-items: end; margin-bottom: 24px; }

.package-rail {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(270px, 1fr);
  gap: 18px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding: 4px 2px 18px;
}

.package-rail::-webkit-scrollbar { height: 8px; }
.package-rail::-webkit-scrollbar-thumb { background: rgba(25, 229, 140, .38); border-radius: 99px; }

.package-slide {
  scroll-snap-align: start;
  padding: 22px;
  min-height: 372px;
  display: flex;
  flex-direction: column;
}

.package-top { display: flex; justify-content: space-between; gap: 14px; color: #9fffd2; margin-bottom: 18px; }
.package-top i { font-size: 24px; color: var(--green); }
.package-top span { font-size: .82rem; color: var(--muted); text-align: right; }
.package-slide h2 { color: var(--green); font-size: 2.4rem; }
.package-cap { background: rgba(85, 166, 255, .1); border: 1px solid rgba(85, 166, 255, .22); border-radius: 8px; padding: 10px; margin: 8px 0 12px; color: #cfe7ff; }
.package-slide .btn { margin-top: auto; }
.calculator-card { background: linear-gradient(145deg, rgba(17, 31, 47, .88), rgba(14, 38, 43, .72)); }

.income-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
.income-grid div { display: flex; align-items: center; gap: 10px; background: rgba(255, 255, 255, .05); border: 1px solid var(--line); border-radius: 8px; padding: 14px; }
.income-grid i { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 8px; background: rgba(25, 229, 140, .1); color: var(--green); }
.faq-panel { background: linear-gradient(135deg, rgba(17, 31, 47, .8), rgba(10, 20, 32, .86)); }
.accordion-button { background: rgba(255, 255, 255, .035); color: #fff; border-radius: 8px !important; }
.accordion-button:not(.collapsed) { background: rgba(25, 229, 140, .12); color: #fff; }
.accordion-button:focus { box-shadow: none; }

.app-body { background: #071018; }
.app-shell { display: flex; min-height: 100vh; }
.sidebar { width: 270px; position: fixed; inset: 0 auto 0 0; background: #07111c; border-right: 1px solid var(--line); padding: 18px; overflow-y: auto; z-index: 50; }
.sidebar a { display: flex; gap: 10px; align-items: center; color: #cfe4e8; padding: 10px 12px; border-radius: 8px; margin-bottom: 3px; }
.sidebar a:hover { background: rgba(25, 229, 140, .09); color: #fff; }
.sidebar .brand { font-weight: 800; color: #fff; font-size: 1.1rem; margin-bottom: 14px; }
.app-main { margin-left: 270px; flex: 1; padding: 20px; }
.topbar { display: flex; gap: 18px; align-items: center; justify-content: space-between; margin-bottom: 20px; background: rgba(255, 255, 255, .035); border: 1px solid var(--line); border-radius: 8px; padding: 16px; }
.topbar h1 { font-size: 1.5rem; margin: 0; }
.topbar p { margin: 0; color: var(--muted); font-size: .9rem; }
.menu-toggle { display: none; }
.impersonation-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 16px;
  padding: 12px 14px;
  border-radius: 8px;
  background: linear-gradient(135deg, rgba(255, 209, 102, .18), rgba(25, 229, 140, .1));
  border: 1px solid rgba(255, 209, 102, .42);
  color: #fff6d6;
  font-weight: 700;
}
.admin-actions {
  min-width: 420px;
}
.finance-action-form {
  display: grid;
  grid-template-columns: minmax(140px, 1fr) minmax(140px, 1fr) minmax(150px, 1fr) auto;
  gap: 8px;
  align-items: center;
  min-width: 560px;
}
.finance-action-form input[type="file"] {
  min-width: 190px;
}
.table { --bs-table-bg: transparent; --bs-table-color: #eafff8; --bs-table-border-color: rgba(255, 255, 255, .09); }
.form-control,
.form-select {
  background: #0a1723;
  border-color: rgba(255, 255, 255, .18);
  color: #f4fff9;
}
.form-control::placeholder {
  color: #c6d7d5;
  opacity: 1;
}
.form-control:focus,
.form-select:focus {
  background: #0a1723;
  color: #fff;
  border-color: var(--green);
  box-shadow: 0 0 0 .18rem rgba(25, 229, 140, .14);
}
.form-select option {
  background: #0a1723;
  color: #f4fff9;
}
.form-control[type="file"] {
  color: #f4fff9;
}
.form-control::file-selector-button {
  background: #f4fff9;
  color: #0a1723;
  border: 0;
  border-right: 1px solid rgba(255, 255, 255, .18);
  margin: -.375rem .75rem -.375rem -.75rem;
  padding: .375rem .75rem;
}
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus {
  -webkit-text-fill-color: #f4fff9;
  -webkit-box-shadow: 0 0 0 1000px #0a1723 inset;
}

.floating-whatsapp, .floating-chat { position: fixed; right: 18px; width: 52px; height: 52px; border-radius: 50%; border: 0; display: grid; place-items: center; font-size: 24px; z-index: 90; }
.floating-whatsapp { bottom: 84px; background: #25d366; color: #fff; }
.floating-chat { bottom: 20px; background: #19e58c; color: #04100b; }
.chatbot-panel { position: fixed; right: 18px; bottom: 86px; width: min(360px, calc(100vw - 32px)); background: #09131e; border: 1px solid var(--line); border-radius: 8px; box-shadow: 0 30px 80px #000; display: none; z-index: 100; }
.chatbot-panel.open { display: block; }
.chat-head { display: flex; justify-content: space-between; padding: 13px 15px; border-bottom: 1px solid var(--line); }
.chat-head button { background: none; border: 0; color: #fff; font-size: 24px; }
.chat-body { height: 260px; overflow: auto; padding: 14px; }
.chat-body p { padding: 10px; border-radius: 8px; background: rgba(255, 255, 255, .06); }
.chat-body .me { background: rgba(25, 229, 140, .14); }
.quick-qs { display: flex; gap: 6px; flex-wrap: wrap; padding: 0 12px 10px; }
.quick-qs button { font-size: .75rem; background: #102538; color: #dff; border: 1px solid var(--line); border-radius: 8px; padding: 6px; }
.chat-input { display: flex; gap: 6px; padding: 12px; border-top: 1px solid var(--line); }
.chat-input input { flex: 1; background: #071018; border: 1px solid var(--line); color: #fff; border-radius: 8px; padding: 10px; }
.chat-input button { border: 0; border-radius: 8px; background: #19e58c; color: #06130d; padding: 0 12px; }
.rank-badge { height: 70px; width: 70px; border-radius: 50%; display: grid; place-items: center; background: linear-gradient(135deg, #ffd166, #19e58c); color: #081018; font-weight: 900; }
.qr-box {
  width: 170px;
  min-height: 170px;
  display: grid;
  place-items: center;
  background: #fff;
  border: 8px solid #fff;
  border-radius: 8px;
  box-shadow: 0 16px 40px rgba(0, 0, 0, .26);
}
.qr-box img {
  display: block;
  width: 100%;
  height: auto;
}
.qr-box small {
  display: none;
  color: #132016;
  padding: 10px;
  text-align: center;
}
.mini-qr {
  width: 74px;
  height: 74px;
  background: #fff;
  border-radius: 8px;
  padding: 4px;
  margin-top: 6px;
}
.finance-panel h4,
.finance-panel h5 {
  color: #fff;
}
.quick-amounts {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}
.quick-amounts button {
  border: 1px solid rgba(25, 229, 140, .26);
  background: rgba(25, 229, 140, .08);
  color: #dffff0;
  border-radius: 8px;
  padding: 8px 10px;
  font-weight: 800;
}
.quick-amounts button:hover {
  background: rgba(25, 229, 140, .18);
}
.status-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  padding: 5px 10px;
  font-size: .75rem;
  font-weight: 900;
  border: 1px solid rgba(255, 255, 255, .15);
  background: rgba(255, 255, 255, .08);
  color: #fff;
  white-space: nowrap;
}
.status-pending,
.status-approved {
  background: rgba(255, 209, 102, .14);
  border-color: rgba(255, 209, 102, .36);
  color: #ffe7a3;
}
.status-paid,
.status-success {
  background: rgba(25, 229, 140, .14);
  border-color: rgba(25, 229, 140, .36);
  color: #9fffd2;
}
.status-rejected,
.status-danger {
  background: rgba(255, 88, 100, .14);
  border-color: rgba(255, 88, 100, .36);
  color: #ffb6bd;
}
.finance-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.finance-tabs a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 12px;
  border-radius: 8px;
  border: 1px solid var(--line);
  color: #eafff8;
  background: rgba(255, 255, 255, .04);
  font-weight: 800;
}
.finance-tabs a.active {
  background: linear-gradient(135deg, rgba(25, 229, 140, .26), rgba(85, 166, 255, .12));
  border-color: rgba(25, 229, 140, .52);
}
.finance-tabs span {
  min-width: 24px;
  text-align: center;
  padding: 2px 7px;
  border-radius: 999px;
  background: rgba(0, 0, 0, .28);
  color: #fff;
}
.finance-stack-form {
  display: grid;
  gap: 8px;
  min-width: 220px;
}
.finance-detail-box {
  padding: 12px;
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, .12);
  background: rgba(0, 0, 0, .18);
  color: #eafff8;
  word-break: break-word;
}
.withdraw-preview {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
}
.withdraw-preview div {
  padding: 12px;
  border-radius: 8px;
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, .05);
}
.withdraw-preview small {
  display: block;
  color: var(--muted);
}
.withdraw-preview b {
  display: block;
  color: #9fffd2;
  font-size: 1.25rem;
}
.payout-card {
  overflow: hidden;
}
.dashboard-hero-card {
  position: relative;
  overflow: hidden;
}
.dashboard-hero-card:after {
  content: "";
  position: absolute;
  inset: auto 20px 18px auto;
  width: 150px;
  height: 60px;
  background: linear-gradient(90deg, transparent, rgba(25, 229, 140, .28), transparent);
  transform: skewX(-22deg);
  animation: shine 3.8s infinite;
}
.investment-empty {
  display: grid;
  grid-template-columns: 54px 1fr auto;
  gap: 16px;
  align-items: center;
  padding: 18px;
  border: 1px solid rgba(255, 209, 102, .3);
  background: rgba(255, 209, 102, .08);
  border-radius: 8px;
}
.investment-empty i {
  width: 54px;
  height: 54px;
  display: grid;
  place-items: center;
  border-radius: 8px;
  background: rgba(25, 229, 140, .12);
  color: var(--green);
  font-size: 24px;
}
.investment-empty b,
.investment-empty span {
  display: block;
}
.investment-empty span {
  color: var(--muted);
}
.dashboard-investment-strip {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 12px;
}
.dashboard-investment-card {
  display: grid;
  gap: 5px;
  padding: 16px;
  border-radius: 8px;
  border: 1px solid rgba(25, 229, 140, .2);
  background: rgba(255, 255, 255, .05);
}
.dashboard-investment-card b {
  color: #fff;
}
.dashboard-investment-card em {
  color: #9fffd2;
  font-style: normal;
  font-weight: 800;
}
.trading-floor-section {
  padding: 86px 0;
  background:
    linear-gradient(rgba(25, 229, 140, .035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(25, 229, 140, .035) 1px, transparent 1px),
    #06150f;
  background-size: 42px 42px;
}
.trading-floor-head h2 {
  color: #fff;
  font-size: clamp(2rem, 4vw, 4rem);
  line-height: 1;
  font-weight: 900;
}
.trading-floor-head p {
  color: #b8c9c0;
}
.trading-floor-head a {
  color: #9fffd2;
  font-weight: 900;
}
.trading-floor-grid {
  display: grid;
  grid-template-columns: 1.25fr .75fr;
  gap: 20px;
}
.live-market-board,
.roi-radar-card {
  border: 1px solid rgba(25, 229, 140, .18);
  background: rgba(4, 14, 10, .76);
  border-radius: 8px;
  box-shadow: 0 25px 80px rgba(0, 0, 0, .25);
  overflow: hidden;
}
.market-board-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 18px;
  border-bottom: 1px solid rgba(255, 255, 255, .08);
  color: #fff;
}
.market-board-head span {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: #9fffd2;
  font-weight: 900;
}
.market-board-head i {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--green);
  box-shadow: 0 0 18px var(--green);
}
.market-row {
  display: grid;
  grid-template-columns: 140px 1fr 90px;
  gap: 16px;
  align-items: center;
  padding: 15px 18px;
  border-bottom: 1px solid rgba(255, 255, 255, .065);
}
.market-row:last-child {
  border-bottom: 0;
}
.market-row strong,
.market-row b {
  color: #fff;
}
.market-row small {
  display: block;
  color: #93a9a0;
}
.market-row.up b {
  color: var(--green);
}
.market-row.down b {
  color: var(--red);
}
.sparkline {
  height: 70px;
  display: flex;
  align-items: end;
  gap: 5px;
}
.sparkline i {
  flex: 1;
  border-radius: 4px 4px 0 0;
  background: linear-gradient(180deg, #23f3a1, #0a7d52);
  animation: bar 2.6s ease-in-out infinite;
}
.market-row.down .sparkline i {
  background: linear-gradient(180deg, #ff6b72, #8d1f2d);
}
.sparkline i:nth-child(2n) { animation-delay: .25s; }
.sparkline i:nth-child(3n) { animation-delay: .55s; }
.roi-radar-card {
  padding: 26px;
}
.roi-radar-card h3 {
  color: #fff;
  margin-top: 24px;
}
.roi-radar-card p {
  color: #b8c9c0;
}
.radar-ring {
  position: relative;
  width: min(260px, 90%);
  aspect-ratio: 1;
  margin: 0 auto;
  display: grid;
  place-items: center;
}
.radar-ring i {
  position: absolute;
  inset: 12%;
  border: 1px solid rgba(25, 229, 140, .26);
  border-radius: 50%;
  animation: radarPulse 3s infinite;
}
.radar-ring i:nth-child(2) { inset: 24%; animation-delay: .5s; }
.radar-ring i:nth-child(3) { inset: 36%; animation-delay: 1s; }
.radar-ring strong {
  position: relative;
  width: 82px;
  height: 82px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--green), #55a6ff);
  color: #05130d;
  font-size: 1.4rem;
  box-shadow: 0 0 50px rgba(25, 229, 140, .35);
}
@keyframes radarPulse {
  50% { transform: scale(1.08); opacity: .5; }
}
.investment-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 16px;
}
.investment-card {
  width: 100%;
  text-align: left;
  border: 1px solid rgba(25, 229, 140, .18);
  background:
    linear-gradient(135deg, rgba(25, 229, 140, .08), rgba(85, 166, 255, .06)),
    rgba(8, 19, 31, .9);
  color: #eafff8;
  border-radius: 8px;
  padding: 18px;
  box-shadow: 0 20px 55px rgba(0, 0, 0, .28);
  transition: transform .2s ease, border-color .2s ease;
}
.investment-card:hover {
  transform: translateY(-4px);
  border-color: rgba(25, 229, 140, .55);
}
.investment-card.active-trade-card {
  border-color: rgba(32, 232, 139, .6);
  box-shadow: 0 18px 54px rgba(0,0,0,.35), 0 0 0 1px rgba(32,232,139,.15), 0 0 32px rgba(32,232,139,.12);
}
.investment-card-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
}
.trade-pair {
  font-size: 1.35rem;
  font-weight: 900;
  color: #fff;
}
.trade-exchange {
  color: #a7c7c8;
  font-size: .9rem;
  margin-bottom: 16px;
}
.trade-rotation-note {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin: -7px 0 14px;
  padding: 7px 10px;
  border-radius: 999px;
  color: #9fffd2;
  background: rgba(32, 232, 139, .09);
  border: 1px solid rgba(32, 232, 139, .18);
  font-size: .76rem;
  font-weight: 800;
}
.trade-price-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}
.trade-price-row div {
  background: rgba(255, 255, 255, .055);
  border: 1px solid rgba(255, 255, 255, .08);
  border-radius: 8px;
  padding: 10px;
}
.trade-price-row small,
.trade-side-panel small {
  display: block;
  color: var(--muted);
}
.trade-price-row b,
.trade-side-panel b {
  display: block;
  color: #9fffd2;
}
.trade-open-hint {
  margin-top: 14px;
  color: #9fffd2;
  font-weight: 800;
  font-size: .9rem;
}
.trade-modal {
  background: #071018;
  color: #eafff8;
  border: 1px solid rgba(25, 229, 140, .24);
  border-radius: 8px;
}
.trade-chart-shell {
  position: relative;
  height: min(58vh, 430px);
  min-height: 360px;
  border-radius: 8px;
  overflow: hidden;
  border: 1px solid rgba(25, 229, 140, .18);
  background: #06110d;
  isolation: isolate;
}
.trade-chart-shell canvas {
  width: 100%;
  height: 100%;
  display: block;
  position: relative;
  z-index: 1;
}
.trade-live-badge {
  position: absolute;
  right: 14px;
  top: 14px;
  display: inline-flex;
  gap: 8px;
  align-items: center;
  background: rgba(0, 0, 0, .52);
  border: 1px solid rgba(25, 229, 140, .32);
  border-radius: 999px;
  padding: 7px 10px;
  color: #cffff0;
  font-size: .8rem;
  font-weight: 800;
  z-index: 3;
}
.trade-chart-stats {
  position: absolute;
  left: 14px;
  top: 14px;
  display: grid;
  gap: 2px;
  min-width: 132px;
  padding: 10px 12px;
  border-radius: 8px;
  background: rgba(4, 13, 10, .72);
  border: 1px solid rgba(25, 229, 140, .22);
  backdrop-filter: blur(10px);
  z-index: 3;
  pointer-events: none;
}
.trade-chart-stats small {
  color: #9db7b2;
  font-weight: 800;
}
.trade-chart-stats b {
  color: #fff;
  font-size: 1.25rem;
  line-height: 1.1;
}
.trade-chart-stats em {
  font-style: normal;
  font-weight: 900;
}
.trade-chart-stats em.up {
  color: var(--green);
}
.trade-chart-stats em.down {
  color: var(--red);
}
.trade-live-badge span {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--green);
  box-shadow: 0 0 15px var(--green);
}
.trade-side-panel {
  display: grid;
  gap: 12px;
}
.trade-side-panel > div {
  padding: 13px;
  border-radius: 8px;
  background: rgba(255, 255, 255, .055);
  border: 1px solid rgba(255, 255, 255, .08);
}
.bot-status { height: 12px; background: #102333; border-radius: 40px; overflow: hidden; }
.bot-status span { display: block; width: 68%; height: 100%; background: linear-gradient(90deg, #19e58c, #55a6ff); animation: flow 2s infinite; }
@keyframes flow { 50% { width: 88%; } }

@media (max-width: 900px) {
  .sidebar { transform: translateX(-105%); transition: .25s; }
  .sidebar.open { transform: none; }
  .app-main { margin-left: 0; padding: 12px; }
  .menu-toggle { display: inline-grid; background: #13283b; color: #fff; border: 1px solid var(--line); border-radius: 8px; padding: 10px; }
  .impersonation-banner { display: grid; }
  .admin-actions, .finance-action-form { min-width: 0; }
  .finance-action-form { grid-template-columns: 1fr; }
  .hero { padding-top: 46px; }
  .hero-slider { min-height: 880px; }
  .hero-slide { align-items: start; }
  .hero-controls button { flex: 1; min-width: 96px; }
  .bot-orbit { min-height: 300px; }
  .bot-orbit.elevated { min-height: 360px; }
  .robot-core { width: 112px; height: 112px; font-size: 42px; }
  .signal-card { position: relative; left: auto; right: auto; top: auto; bottom: auto; margin: 10px 16px; }
  .hero-metrics, .preview-row, .income-grid { grid-template-columns: 1fr; }
  .dashboard-preview { grid-template-columns: 1fr; }
  .preview-sidebar { display: none; }
  .section-title-row { display: block; }
  .package-rail { grid-auto-columns: 86%; }
  .investment-empty { grid-template-columns: 1fr; }
  .trading-floor-grid { grid-template-columns: 1fr; }
  .market-row { grid-template-columns: 1fr; }
  .trade-chart-shell {
    height: 360px;
    min-height: 360px;
  }
  .trade-chart-stats {
    left: 10px;
    top: 10px;
    min-width: 112px;
    padding: 8px 10px;
  }
  .trade-live-badge {
    right: 10px;
    top: 10px;
    font-size: .72rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  *, *:before, *:after { animation: none !important; transition: none !important; }
}

body:has(.broker-hero) {
  background: #f5f8f4;
  color: #101b15;
}

body:has(.broker-hero) .glass-nav {
  background: rgba(4, 18, 12, .94);
}

.broker-hero {
  position: relative;
  overflow: hidden;
  min-height: calc(100vh - 34px);
  display: grid;
  align-items: center;
  padding: 82px 0 68px;
  background:
    radial-gradient(circle at 78% 24%, rgba(32, 231, 134, .2), transparent 28%),
    linear-gradient(135deg, #06160f 0%, #082318 63%, #eef8ed 63.2%, #f7fbf5 100%);
}

.broker-hero-bg {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255, 255, 255, .035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, .035) 1px, transparent 1px);
  background-size: 54px 54px;
  animation: gridDrift 18s linear infinite;
}

.broker-label {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  color: #c9ffe3;
  background: rgba(255, 255, 255, .08);
  border: 1px solid rgba(255, 255, 255, .12);
  border-radius: 999px;
  padding: 9px 13px;
  margin-bottom: 22px;
  font-weight: 700;
}

.broker-label span {
  width: 9px;
  height: 9px;
  background: var(--green);
  border-radius: 50%;
  box-shadow: 0 0 18px var(--green);
}

.broker-slider {
  position: relative;
  min-height: 360px;
  max-width: 720px;
}

.broker-slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  transform: translateY(18px);
  transition: opacity .75s ease, transform .75s ease;
  pointer-events: none;
}

.broker-slide.active {
  opacity: 1;
  transform: none;
  pointer-events: auto;
}

.broker-slide h1 {
  max-width: 680px;
  font-size: clamp(3rem, 5vw, 5.15rem);
  line-height: .98;
  font-weight: 900;
  color: #fff;
  margin: 0;
  overflow-wrap: anywhere;
}

.broker-slide p {
  color: #c4d7cd;
  font-size: 1.08rem;
  line-height: 1.65;
  max-width: 610px;
  margin: 20px 0 0;
}

.hero-actions {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  margin: 18px 0 18px;
}

.hero-actions .btn {
  min-width: 160px;
  border-radius: 8px;
  font-weight: 800;
}

.broker-risk {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  max-width: 660px;
  background: rgba(255, 255, 255, .08);
  color: #dceee4;
  border: 1px solid rgba(255, 255, 255, .14);
  backdrop-filter: blur(10px);
  border-radius: 8px;
  padding: 13px 14px;
  font-size: .92rem;
}

.broker-risk i {
  color: #ffde7a;
  margin-top: 2px;
}

.slide-tabs {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 20px;
}

.slide-tabs button {
  border: 1px solid rgba(255, 255, 255, .14);
  background: rgba(255, 255, 255, .08);
  color: #e9fff4;
  border-radius: 8px;
  padding: 10px 16px;
  font-weight: 800;
}

.slide-tabs button.active {
  background: #fff;
  color: #072015;
}

.platform-visual {
  position: relative;
  min-height: 620px;
}

.desktop-terminal {
  position: absolute;
  top: 22px;
  right: 0;
  width: min(680px, 100%);
  min-height: 430px;
  background: #06100c;
  border: 1px solid rgba(16, 99, 59, .28);
  border-radius: 26px;
  box-shadow: 0 35px 90px rgba(4, 12, 8, .42);
  overflow: hidden;
}

.terminal-toolbar {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 18px 20px;
  color: #fff;
  border-bottom: 1px solid rgba(255, 255, 255, .08);
}

.terminal-toolbar b {
  margin-right: auto;
}

.terminal-toolbar span {
  width: 11px;
  height: 11px;
  background: var(--green);
  border-radius: 50%;
}

.terminal-toolbar span:nth-child(3) {
  background: var(--gold);
}

.terminal-toolbar span:nth-child(4) {
  background: var(--red);
}

.terminal-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
  padding: 20px;
}

.terminal-card {
  background: linear-gradient(145deg, rgba(255, 255, 255, .09), rgba(255, 255, 255, .03));
  border: 1px solid rgba(255, 255, 255, .1);
  border-radius: 18px;
  padding: 18px;
  color: #fff;
}

.terminal-card small,
.terminal-card em {
  display: block;
  color: #93a9a0;
  font-style: normal;
}

.terminal-card strong {
  display: block;
  font-size: 2rem;
  margin: 8px 0;
}

.terminal-card.green strong {
  color: var(--green);
}

.terminal-chart {
  grid-column: 1 / -1;
  height: 218px;
  display: flex;
  align-items: end;
  gap: 9px;
  padding: 18px;
  border-radius: 18px;
  background:
    linear-gradient(rgba(255, 255, 255, .035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, .035) 1px, transparent 1px),
    rgba(7, 29, 20, .9);
  background-size: 32px 32px;
}

.terminal-chart i {
  flex: 1;
  min-height: 26px;
  background: linear-gradient(180deg, #35f3a1, #087647);
  border-radius: 8px 8px 0 0;
  animation: bar 2.8s ease-in-out infinite;
}

.terminal-chart i:nth-child(3n) {
  background: linear-gradient(180deg, #ff6d75, #942634);
}

.phone-mockup {
  position: absolute;
  right: 28px;
  bottom: 0;
  width: 210px;
  height: 396px;
  border-radius: 34px;
  background: linear-gradient(180deg, #101b17, #050b08);
  border: 10px solid #151f1a;
  box-shadow: 0 28px 70px rgba(0, 0, 0, .46);
  color: #fff;
  padding: 42px 18px 22px;
}

.phone-notch {
  position: absolute;
  top: 13px;
  left: 50%;
  transform: translateX(-50%);
  width: 76px;
  height: 8px;
  border-radius: 999px;
  background: #2f3a35;
}

.phone-mockup small {
  color: #9eb4a9;
}

.phone-mockup b {
  display: block;
  font-size: 2rem;
  margin: 5px 0 18px;
}

.phone-line {
  height: 112px;
  border-radius: 18px;
  background: linear-gradient(135deg, rgba(25, 229, 140, .3), rgba(60, 155, 255, .14));
  margin-bottom: 14px;
  position: relative;
  overflow: hidden;
}

.phone-line:after {
  content: "";
  position: absolute;
  inset: auto 12px 24px;
  height: 48px;
  border-bottom: 3px solid var(--green);
  border-radius: 50%;
}

.phone-row {
  display: flex;
  justify-content: space-between;
  padding: 10px 0;
  border-bottom: 1px solid rgba(255, 255, 255, .08);
  font-size: .86rem;
}

.phone-row strong {
  color: var(--green);
}

.phone-nav {
  display: flex;
  justify-content: space-around;
  position: absolute;
  left: 18px;
  right: 18px;
  bottom: 18px;
}

.phone-nav i {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #728278;
}

.phone-nav i:first-child {
  background: var(--green);
}

.offer-band {
  background: #f5f8f4;
  margin-top: -34px;
  position: relative;
  z-index: 3;
}

.offer-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  background: #fff;
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 25px 80px rgba(14, 39, 25, .12);
}

.offer-grid div {
  padding: 24px;
  border-right: 1px solid #e1ece5;
}

.offer-grid div:last-child {
  border-right: 0;
}

.offer-grid small,
.offer-grid span {
  display: block;
  color: #607169;
}

.offer-grid strong {
  display: block;
  color: #07180f;
  font-size: 1.65rem;
  margin: 6px 0;
}

.clean-section {
  padding: 86px 0;
  background: #f5f8f4;
}

.clean-section h2 {
  color: #07180f;
  font-size: clamp(2rem, 4vw, 3.8rem);
  line-height: 1;
  font-weight: 900;
}

.clean-section p {
  color: #52635b;
  font-size: 1.05rem;
  line-height: 1.7;
}

.section-split {
  display: flex;
  justify-content: space-between;
  align-items: end;
  gap: 28px;
  margin-bottom: 28px;
}

.section-split p {
  max-width: 690px;
}

.section-split a {
  color: #082116;
  font-weight: 900;
}

.plan-strip {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
}

.plan-tile {
  background: #fff;
  border-radius: 18px;
  padding: 26px;
  border: 1px solid #dfeae3;
  box-shadow: 0 18px 50px rgba(14, 39, 25, .07);
  min-height: 262px;
}

.plan-tile i {
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  border-radius: 14px;
  background: #eafff3;
  color: #0c9c61;
  margin-bottom: 22px;
}

.plan-tile h3 {
  color: #07180f;
}

.plan-tile strong {
  display: block;
  color: #0c9c61;
  font-size: 1.9rem;
}

.plan-tile span {
  color: #607169;
}

.surface-section {
  background: #07150f;
}

.surface-section h2,
.surface-section h3,
.surface-section h4 {
  color: #fff;
}

.surface-section p {
  color: #b7c8bf;
}

.surface-section .broker-risk {
  color: #dceee4;
}

.feature-cards {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 18px;
}

.feature-cards div {
  background: rgba(255, 255, 255, .07);
  border: 1px solid rgba(255, 255, 255, .12);
  border-radius: 18px;
  padding: 24px;
}

.feature-cards i {
  color: var(--green);
  font-size: 30px;
  margin-bottom: 20px;
}

.why-panel {
  display: grid;
  grid-template-columns: .95fr 1.05fr;
  gap: 30px;
  align-items: center;
  background: #fff;
  border-radius: 28px;
  padding: clamp(28px, 5vw, 58px);
  box-shadow: 0 22px 80px rgba(14, 39, 25, .1);
}

.why-list {
  display: grid;
  gap: 14px;
}

.why-list div {
  display: grid;
  grid-template-columns: 58px 1fr;
  align-items: center;
  gap: 18px;
  padding: 18px;
  border: 1px solid #dfeae3;
  border-radius: 18px;
}

.why-list b {
  color: #0c9c61;
  font-size: 1.5rem;
}

.why-list span {
  color: #28382f;
  font-weight: 700;
}

.app-access {
  background: linear-gradient(135deg, #e9f8ee, #f8fbf7);
}

.store-buttons {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 24px;
}

.store-buttons a {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: #07150f;
  color: #fff;
  border-radius: 10px;
  padding: 14px 18px;
  font-weight: 900;
}

.steps-card {
  background: #fff;
  border-radius: 24px;
  padding: 34px;
  box-shadow: 0 22px 70px rgba(14, 39, 25, .1);
}

.steps-card h3 {
  color: #07180f;
  margin-bottom: 22px;
}

.step-row {
  display: flex;
  gap: 16px;
  align-items: center;
  padding: 18px 0;
  border-bottom: 1px solid #dfeae3;
  color: #314039;
  font-weight: 800;
}

.step-row:last-child {
  border-bottom: 0;
}

.step-row b {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: #eafff3;
  color: #0c9c61;
}

.calculator-wide {
  display: grid;
  grid-template-columns: .8fr 1.2fr;
  gap: 24px;
  align-items: center;
  background: #07150f;
  border-radius: 28px;
  padding: clamp(26px, 5vw, 56px);
}

.calculator-wide h2,
.calculator-wide p {
  color: #fff;
}

.calc-inline {
  display: grid;
  gap: 14px;
}

@media (max-width: 991px) {
  .broker-hero {
    background: linear-gradient(180deg, #06160f 0%, #082318 64%, #f5f8f4 64.2%, #f5f8f4 100%);
    padding-top: 54px;
  }

  .broker-slider {
    min-height: 390px;
  }

  .broker-slide h1 {
    font-size: clamp(2.55rem, 10vw, 4rem);
    line-height: 1;
  }

  .platform-visual {
    min-height: 520px;
  }

  .desktop-terminal {
    position: relative;
    width: 100%;
    min-height: 390px;
  }

  .phone-mockup {
    right: 12px;
  }

  .offer-grid,
  .plan-strip,
  .feature-cards,
  .why-panel,
  .calculator-wide {
    grid-template-columns: 1fr;
  }

  .offer-grid div {
    border-right: 0;
    border-bottom: 1px solid #e1ece5;
  }

  .section-split {
    display: block;
  }
}

/* Reference-style responsive app shell and dashboard */
.app-body {
  --app-bg: #050817;
  --app-panel: #0b1225;
  --app-line: rgba(139, 111, 255, .16);
  --app-purple: #6d4dff;
  --app-blue: #1f8bff;
  --app-green: #20e88b;
  --app-pink: #ff3f8d;
  --app-amber: #ff9f1a;
  background: radial-gradient(circle at 18% -10%, rgba(109,77,255,.22), transparent 35%), radial-gradient(circle at 80% 8%, rgba(0,197,255,.11), transparent 32%), #050817;
  color: #edf5ff;
  overflow-x: hidden;
}
.app-body .app-shell { display: flex; min-height: 100vh; }
.app-body .sidebar {
  width: 245px;
  position: fixed;
  inset: 0 auto 0 0;
  background: linear-gradient(180deg, rgba(8, 10, 30, .98), rgba(5, 8, 21, .98));
  border-right: 1px solid var(--app-line);
  padding: 14px 12px;
  overflow-y: auto;
  z-index: 60;
  scrollbar-width: thin;
}
.app-body .sidebar .brand { height: 56px; color: #fff; margin: 0 0 12px; padding: 8px 10px; }
.app-body .sidebar .brand span { display: grid; line-height: 1.05; }
.app-body .sidebar .brand b { font-size: .98rem; }
.app-body .sidebar .brand small { color: #7e8ba8; font-size: .66rem; font-weight: 700; }
.app-body .sidebar-logo { width: 32px; height: 32px; border-radius: 8px; }
.app-body .sidebar a { display: flex; align-items: center; gap: 11px; min-height: 39px; color: #cbd7f4; padding: 9px 11px; border-radius: 8px; margin-bottom: 4px; font-size: .9rem; font-weight: 650; transition: .18s ease; }
.app-body .sidebar a i { width: 18px; text-align: center; color: #8fa0c8; }
.app-body .sidebar a:hover, .app-body .sidebar a.active { background: linear-gradient(135deg, rgba(109,77,255,.95), rgba(82,37,218,.82)); color: #fff; box-shadow: 0 10px 28px rgba(109,77,255,.24); }
.app-body .sidebar a:hover i, .app-body .sidebar a.active i { color: #fff; }
.app-body .sidebar-backdrop { display: none; }
.app-body .app-main { margin-left: 245px; width: calc(100% - 245px); min-height: 100vh; padding: 14px; }
.app-body .topbar { min-height: 58px; display: grid; grid-template-columns: minmax(230px, 1fr) minmax(260px, 420px) auto; gap: 14px; align-items: center; margin-bottom: 14px; background: rgba(7, 12, 28, .72); border: 1px solid var(--app-line); border-radius: 8px; padding: 9px 12px; box-shadow: 0 18px 55px rgba(0,0,0,.18); }
.app-body .topbar-left { display: flex; align-items: center; gap: 12px; min-width: 0; }
.app-body .topbar small { color: #8793b4; display: block; font-size: .72rem; }
.app-body .topbar h1 { margin: 0; font-size: 1.05rem; line-height: 1.15; }
.app-body .topbar p { margin: 1px 0 0; color: #96a4c8; font-size: .75rem; }
.app-body .topbar-search { position: relative; height: 38px; display: flex; align-items: center; gap: 10px; padding: 0 12px; border-radius: 8px; background: #080d1d; border: 1px solid rgba(255,255,255,.06); }
.app-body .topbar-search input { min-width: 0; flex: 1; border: 0; outline: 0; background: transparent; color: #eaf2ff; font-size: .78rem; }
.app-body .topbar-search kbd { background: #111832; color: #99a8cd; border: 1px solid rgba(255,255,255,.08); font-size: .65rem; }
.topbar-search-results { position: absolute; top: calc(100% + 8px); left: 0; right: 0; z-index: 80; display: none; max-height: 330px; overflow: auto; padding: 8px; border-radius: 12px; background: linear-gradient(145deg, rgba(7, 13, 34, .98), rgba(6, 21, 31, .98)); border: 1px solid rgba(99, 124, 255, .2); box-shadow: 0 20px 60px rgba(0,0,0,.42); }
.topbar-search.search-open .topbar-search-results { display: grid; gap: 6px; }
.topbar-search-results a, .topbar-search-results .search-empty { display: grid; grid-template-columns: 28px 1fr auto; align-items: center; gap: 9px; padding: 10px; border-radius: 9px; color: #eaf2ff; text-decoration: none; }
.topbar-search-results a:hover, .topbar-search-results a.active { background: linear-gradient(135deg, rgba(109,77,255,.28), rgba(32,232,139,.13)); }
.topbar-search-results i { color: #9fffd2; }
.topbar-search-results small { color: #8d9cc2; font-size: .68rem; }
.topbar-search-results .search-empty { grid-template-columns: 1fr; color: #9aa8c8; }
.app-body .topbar-actions { display: flex; align-items: center; justify-content: end; gap: 8px; }
.app-body .topbar-actions > a:not(.topbar-avatar) { width: 38px; height: 38px; display: grid; place-items: center; border-radius: 8px; color: #dce7ff; background: #0a1021; border: 1px solid rgba(255,255,255,.07); }
.app-body .topbar-avatar { display: flex; align-items: center; gap: 8px; color: #fff; padding-left: 6px; }
.app-body .topbar-avatar span { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 50%; background: linear-gradient(135deg, #34e79b, #6d4dff); font-weight: 900; }
.app-body .topbar-avatar b { max-width: 110px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .78rem; }
.app-body .menu-toggle { display: none; width: 38px; height: 38px; place-items: center; background: #101832; color: #fff; border: 1px solid rgba(255,255,255,.08); border-radius: 8px; }
.app-body .glass-card, .dash-panel, .app-body .metric { background: linear-gradient(180deg, rgba(16, 27, 51, .96), rgba(9, 16, 34, .96)); border: 1px solid var(--app-line); box-shadow: 0 16px 44px rgba(0,0,0,.2); border-radius: 8px; }
.app-body .impersonation-banner { border-radius: 8px; margin-bottom: 14px; background: linear-gradient(90deg, rgba(255,193,7,.2), rgba(25,229,140,.08)); border-color: rgba(255,193,7,.34); }
.dash-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 10px; }
.kpi-strip { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; }
.kpi-card { position: relative; min-height: 92px; padding: 14px 14px 12px 58px; border-radius: 8px; border: 1px solid rgba(255,255,255,.06); background: linear-gradient(135deg, rgba(15,26,52,.95), rgba(8,14,30,.95)); overflow: hidden; }
.kpi-card:after { content: ""; position: absolute; inset: 0 0 auto auto; width: 42%; height: 100%; opacity: .22; background: radial-gradient(circle, currentColor, transparent 68%); }
.kpi-card span { position: absolute; left: 14px; top: 18px; width: 34px; height: 34px; display: grid; place-items: center; border-radius: 8px; background: rgba(255,255,255,.08); }
.kpi-card small, .dash-panel small { color: #8f9dbc; font-size: .72rem; }
.kpi-card b { display: block; color: #fff; font-size: 1.28rem; line-height: 1.1; margin-top: 4px; }
.kpi-card em { color: var(--app-green); font-style: normal; font-size: .72rem; font-weight: 800; }
.kpi-card.purple { color: var(--app-purple); } .kpi-card.green { color: var(--app-green); } .kpi-card.amber { color: var(--app-amber); } .kpi-card.blue { color: var(--app-blue); } .kpi-card.pink { color: var(--app-pink); }
.dash-panel { padding: 12px; min-height: 154px; overflow: hidden; }
.panel-head { display: flex; align-items: start; justify-content: space-between; gap: 10px; margin-bottom: 10px; }
.panel-head h5 { margin: 0 0 4px; font-size: .88rem; font-weight: 850; }
.panel-head strong { display: block; font-size: 1.05rem; color: #fff; }
.panel-head span, .panel-head a { color: #8c7bff; font-size: .72rem; font-weight: 800; }
.income-chart { grid-column: span 3; } .bar-chart-panel { grid-column: span 3; } .donut-panel { grid-column: span 3; } .tree-panel { grid-column: span 4; min-height: 280px; } .referral-panel { grid-column: span 3; } .rank-panel { grid-column: span 3; } .wallet-panel { grid-column: span 3; } .recent-panel { grid-column: span 3; } .investment-panel { grid-column: span 5; } .transaction-panel { grid-column: span 7; }
.line-chart { height: 100px; display: flex; align-items: end; gap: 9%; padding: 10px 4px 4px; background: linear-gradient(180deg, transparent, rgba(109,77,255,.08)); }
.line-chart i { flex: 1; height: var(--h); border-radius: 8px 8px 0 0; background: linear-gradient(180deg, #8c7bff, #5f39ff); box-shadow: 0 0 18px rgba(109,77,255,.35); }
.mini-bars { height: 102px; display: flex; align-items: end; gap: 6px; padding-top: 12px; }
.mini-bars i { flex: 1; height: var(--h); border-radius: 4px 4px 0 0; background: linear-gradient(180deg, #1f8bff, #2450ff); }
.donut-wrap { display: grid; grid-template-columns: 118px 1fr; align-items: center; gap: 12px; }
.donut { width: 112px; height: 112px; display: grid; place-items: center; border-radius: 50%; background: conic-gradient(#1f8bff 0 30%, #20e88b 30% 55%, #ff9f1a 55% 75%, #ff3f8d 75% 100%); position: relative; }
.donut:after { content: ""; position: absolute; inset: 20px; border-radius: 50%; background: #0b1225; }
.donut b,.donut small { position: relative; z-index: 1; grid-area: 1/1; align-self: center; } .donut b { margin-top: -8px; font-size: .9rem; } .donut small { margin-top: 22px; }
.donut-wrap ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 7px; font-size: .75rem; color: #c7d4f4; }
.donut-wrap li i { display: inline-block; width: 9px; height: 9px; border-radius: 3px; background: #1f8bff; margin-right: 6px; }
.tree-visual { text-align: center; }
.root-avatar { width: 58px; height: 58px; margin: 0 auto 14px; display: grid; place-items: center; border-radius: 50%; background: linear-gradient(135deg, #20e88b, #6d4dff); border: 3px solid rgba(255,255,255,.18); font-weight: 900; font-size: 1.35rem; }
.tree-branch { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 12px; }
.tree-branch div,.tree-stats span { padding: 12px; border-radius: 8px; background: rgba(109,77,255,.14); border: 1px solid rgba(109,77,255,.25); }
.tree-branch b,.tree-stats b { display: block; color: #fff; }
.tree-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; color: #92a0bf; font-size: .72rem; }
.ref-copy { display: flex; gap: 8px; }
.ref-copy input { min-width: 0; flex: 1; background: #070d1e; color: #dce8ff; border: 1px solid rgba(255,255,255,.08); border-radius: 8px; padding: 10px; font-size: .75rem; }
.ref-copy button,.rank-panel .btn,.compact-empty .btn { border: 0; border-radius: 8px; background: linear-gradient(135deg, #6d4dff, #4c2dcc); color: #fff; padding: 0 15px; font-weight: 850; }
.qr-box.compact { margin-top: 10px; width: 92px; height: 92px; background: #fff; border-radius: 8px; padding: 6px; }
.qr-box.compact img { width: 100%; height: 100%; display: block; }
.rank-row { display: flex; gap: 12px; align-items: center; margin: 12px 0; }
.rank-row i { width: 44px; height: 44px; display: grid; place-items: center; border-radius: 50%; background: rgba(255,159,26,.18); color: #ffcf6e; font-size: 1.5rem; }
.rank-row b,.rank-row span { display: block; }
.rank-progress { height: 10px; background: #111a33; border-radius: 999px; overflow: hidden; margin: 12px 0; }
.rank-progress i { display: block; height: 100%; background: linear-gradient(90deg, #6d4dff, #20e88b); border-radius: inherit; }
.wallet-row { display: flex; align-items: center; gap: 11px; padding: 10px; border-radius: 8px; background: rgba(255,255,255,.035); border: 1px solid rgba(255,255,255,.055); color: #dce8ff; margin-bottom: 8px; }
.wallet-row i { width: 31px; height: 31px; display: grid; place-items: center; border-radius: 8px; background: rgba(109,77,255,.2); color: #a99cff; }
.wallet-row span,.wallet-row b { display: block; } .wallet-row b { color: #fff; font-size: .82rem; }
.activity-row { display: grid; grid-template-columns: 36px 1fr 8px; align-items: center; gap: 10px; padding: 8px 0; border-bottom: 1px solid rgba(255,255,255,.055); }
.activity-row > span { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 50%; background: linear-gradient(135deg, #6d4dff, #20e88b); font-weight: 900; }
.activity-row b,.activity-row small { display: block; } .activity-row b { font-size: .78rem; color: #fff; } .activity-row small { color: #8d9abb; font-size: .68rem; } .activity-row i { width: 7px; height: 7px; border-radius: 50%; background: var(--app-green); }
.compact-investments { grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); }
.dashboard-investment-card { background: rgba(255,255,255,.04); border-color: rgba(109,77,255,.18); }
.compact-table { --bs-table-bg: transparent; --bs-table-color: #dce8ff; --bs-table-border-color: rgba(255,255,255,.06); font-size: .75rem; margin-bottom: 0; }
.compact-table th { color: #8f9dbc; font-weight: 800; }
.status-pill { border-radius: 999px; padding: 4px 9px; font-size: .7rem; }
@media (max-width: 1280px) { .kpi-strip { grid-template-columns: repeat(3, 1fr); } .income-chart,.bar-chart-panel,.donut-panel,.referral-panel,.rank-panel,.wallet-panel,.recent-panel { grid-column: span 4; } .tree-panel,.investment-panel,.transaction-panel { grid-column: span 6; } }
@media (max-width: 991px) {
  .app-body .sidebar { width: 280px; transform: translateX(-105%); transition: transform .24s ease; }
  .app-body .sidebar.open { transform: translateX(0); }
  body:has(.sidebar.open) .sidebar-backdrop { display: block; position: fixed; inset: 0 0 0 280px; background: rgba(0,0,0,.55); z-index: 55; }
  .app-body .app-main { margin-left: 0; width: 100%; padding: 10px; }
  .app-body .menu-toggle { display: grid; }
  .app-body .topbar { grid-template-columns: 1fr auto; }
  .app-body .topbar-search { grid-column: 1 / -1; order: 3; }
  .app-body .topbar-actions { gap: 6px; }
  .app-body .topbar-avatar b { display: none; }
  .app-body .impersonation-banner { display: grid; gap: 10px; }
}
@media (max-width: 767px) {
  .app-body .app-main { padding: 8px; }
  .app-body .topbar { padding: 9px; margin-bottom: 10px; gap: 8px; }
  .app-body .topbar h1 { font-size: .98rem; }
  .app-body .topbar p { max-width: 190px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .app-body .topbar-actions > a:not(.topbar-avatar) { width: 34px; height: 34px; }
  .app-body .topbar-search { height: 36px; }
  .app-body .topbar-search kbd { display: none; }
  .dash-grid { gap: 8px; }
  .kpi-strip { grid-template-columns: 1fr; gap: 8px; }
  .kpi-card { min-height: 84px; padding-top: 12px; padding-bottom: 10px; }
  .dash-panel,.income-chart,.bar-chart-panel,.donut-panel,.tree-panel,.referral-panel,.rank-panel,.wallet-panel,.recent-panel,.investment-panel,.transaction-panel { grid-column: 1 / -1; }
  .dash-panel { padding: 11px; min-height: auto; }
  .donut-wrap { grid-template-columns: 100px 1fr; }
  .donut { width: 96px; height: 96px; }
  .tree-stats,.tree-branch { grid-template-columns: 1fr; }
  .ref-copy { display: grid; }
  .ref-copy button { min-height: 38px; }
  .compact-table { min-width: 560px; }
  .glass-card.p-4 { padding: 1rem !important; }
  .row.g-3,.row.g-4 { --bs-gutter-x: .65rem; --bs-gutter-y: .65rem; }
}

/* Alerts and support chat */
.nav-badge,
.alert-icon em {
  min-width: 18px;
  height: 18px;
  display: inline-grid;
  place-items: center;
  border-radius: 999px;
  background: #ff3f8d;
  color: #fff;
  font-size: .62rem;
  font-style: normal;
  font-weight: 900;
  margin-left: auto;
  padding: 0 5px;
}
.nav-badge.danger { background: #ff9f1a; color: #141006; }
.alert-icon { position: relative; }
.alert-icon em { position: absolute; right: -5px; top: -6px; margin: 0; }
.admin-alert-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 10px; }
.admin-alert-card { display: flex; align-items: center; gap: 12px; padding: 14px; border-radius: 8px; color: #fff; border: 1px solid rgba(255,255,255,.08); background: linear-gradient(135deg, rgba(255,63,141,.18), rgba(9,16,34,.98)); }
.admin-alert-card.withdrawal { background: linear-gradient(135deg, rgba(255,159,26,.2), rgba(9,16,34,.98)); }
.admin-alert-card i { width: 40px; height: 40px; display: grid; place-items: center; border-radius: 8px; background: rgba(255,255,255,.08); }
.admin-alert-card b,.admin-alert-card span { display: block; }
.admin-alert-card span { color: #9fabca; font-size: .8rem; }
.admin-alert-card em { margin-left: auto; font-style: normal; color: #fff; background: rgba(255,255,255,.12); border-radius: 999px; padding: 5px 10px; font-size: .72rem; font-weight: 900; }
.support-layout { display: grid; grid-template-columns: 330px minmax(0, 1fr); gap: 12px; min-height: calc(100vh - 110px); }
.support-list { min-height: 540px; }
.support-new-btn { width: 100%; border: 0; border-radius: 8px; background: linear-gradient(135deg, #6d4dff, #4c2dcc); color: #fff; padding: 11px; font-weight: 900; margin-bottom: 12px; }
.support-thread { display: grid; grid-template-columns: 38px 1fr auto; align-items: center; gap: 10px; padding: 10px; border-radius: 8px; color: #dce8ff; background: rgba(255,255,255,.035); border: 1px solid rgba(255,255,255,.06); margin-bottom: 8px; }
.support-thread.active { background: linear-gradient(135deg, rgba(109,77,255,.35), rgba(31,139,255,.12)); border-color: rgba(109,77,255,.45); }
.support-thread > span { width: 36px; height: 36px; display: grid; place-items: center; border-radius: 50%; background: linear-gradient(135deg, #20e88b, #6d4dff); font-weight: 900; }
.support-thread b,.support-thread small { display: block; }
.support-thread small { color: #8f9dbc; font-size: .72rem; }
.support-thread em { font-style: normal; background: #ff3f8d; color: #fff; border-radius: 999px; padding: 3px 7px; font-size: .62rem; font-weight: 900; }
.support-chat-panel { display: grid; grid-template-rows: auto 1fr auto; min-height: 540px; }
.chat-titlebar { display: flex; justify-content: space-between; gap: 12px; align-items: center; padding-bottom: 12px; border-bottom: 1px solid rgba(255,255,255,.07); }
.chat-titlebar h4 { margin: 0; font-size: 1rem; }
.chat-titlebar span { color: #8f9dbc; font-size: .78rem; }
.support-chat-window { padding: 14px 4px; overflow-y: auto; max-height: 58vh; display: grid; align-content: start; gap: 10px; }
.support-bubble { max-width: min(76%, 620px); padding: 10px 12px; border-radius: 12px; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.07); }
.support-bubble.user { justify-self: end; background: linear-gradient(135deg, rgba(109,77,255,.55), rgba(31,139,255,.18)); }
.support-bubble.admin { justify-self: start; background: linear-gradient(135deg, rgba(32,232,139,.2), rgba(255,255,255,.05)); }
.support-bubble small { display: block; color: #aeb9d4; margin-bottom: 4px; }
.support-bubble p { margin: 0; color: #fff; }
.support-compose { display: grid; grid-template-columns: 1fr 50px; gap: 8px; border-top: 1px solid rgba(255,255,255,.07); padding-top: 12px; }
.support-compose textarea { resize: none; border-radius: 8px; background: #080d1d; border: 1px solid rgba(255,255,255,.08); color: #fff; padding: 10px; }
.support-compose button { border: 0; border-radius: 8px; background: linear-gradient(135deg, #20e88b, #1f8bff); color: #04100b; font-weight: 900; }
.support-empty { min-height: 360px; display: grid; place-items: center; text-align: center; color: #8f9dbc; }
.support-empty i { font-size: 3rem; color: #6d4dff; }
@media (max-width: 991px) { .support-layout { grid-template-columns: 1fr; } .support-list, .support-chat-panel { min-height: auto; } .support-chat-window { max-height: 56vh; } }
@media (max-width: 767px) { .support-bubble { max-width: 92%; } .support-compose { grid-template-columns: 1fr 44px; } .chat-titlebar { align-items: start; } }

/* Crypto-only wallet, meeting, popups, team levels and trade history */
.qr-box.compact {
  width: 150px;
  height: 150px;
  padding: 10px;
  box-shadow: 0 16px 34px rgba(0,0,0,.28);
}
.referral-panel .qr-box.compact { margin-top: 12px; }
.ref-copy input { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.team-level-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 12px; }
.team-level-card { min-height: 225px; }
.team-level-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 10px; }
.team-level-stats div { padding: 10px; border-radius: 8px; background: rgba(109,77,255,.12); border: 1px solid rgba(109,77,255,.2); }
.team-level-stats b { display: block; color: #fff; }
.team-mini-list { display: grid; gap: 8px; }
.team-mini-list div { display: flex; gap: 9px; align-items: center; padding: 8px; border-radius: 8px; background: rgba(255,255,255,.035); }
.team-mini-list span { width: 30px; height: 30px; display: grid; place-items: center; border-radius: 50%; background: linear-gradient(135deg, #20e88b, #6d4dff); font-weight: 900; }
.team-mini-list p,.team-mini-list b,.team-mini-list small { margin: 0; display: block; }
.meeting-float { position: fixed; left: 275px; bottom: 22px; z-index: 45; width: min(380px, calc(100vw - 32px)); padding: 14px; border-radius: 12px; background: linear-gradient(135deg, rgba(109,77,255,.94), rgba(10,18,39,.96)); border: 1px solid rgba(255,255,255,.14); box-shadow: 0 22px 60px rgba(0,0,0,.4); color: #fff; }
.meeting-float > div { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 8px; }
.meeting-float button { border: 0; width: 28px; height: 28px; border-radius: 50%; background: rgba(255,255,255,.12); color: #fff; }
.meeting-float a { display: flex; justify-content: space-between; gap: 12px; padding: 9px 10px; border-radius: 8px; color: #fff; background: rgba(255,255,255,.08); margin-top: 7px; }
.meeting-float small { color: #cdd7ff; }
.demo-activity-toast { position: fixed; right: 22px; bottom: 92px; z-index: 1200; width: min(390px, calc(100vw - 28px)); display: grid; grid-template-columns: 42px 1fr 28px; gap: 10px; align-items: center; padding: 13px; border-radius: 12px; background: linear-gradient(135deg, rgba(9,16,34,.98), rgba(109,77,255,.9)); border: 1px solid rgba(255,255,255,.14); color: #fff; box-shadow: 0 20px 50px rgba(0,0,0,.42); animation: toastIn .28s ease; }
.demo-activity-toast i { width: 40px; height: 40px; display: grid; place-items: center; border-radius: 10px; background: rgba(32,232,139,.16); color: #20e88b; }
.demo-activity-toast.withdrawal i { color: #ff9f1a; background: rgba(255,159,26,.16); }
.demo-activity-toast.registration i { color: #1f8bff; background: rgba(31,139,255,.16); }
.demo-activity-toast b,.demo-activity-toast small { display: block; }
.demo-activity-toast small { color: #b7c2df; }
.demo-activity-toast button { border: 0; background: transparent; color: #fff; font-size: 1.3rem; }
@keyframes toastIn { from { transform: translateY(20px); opacity: 0; } to { transform: none; opacity: 1; } }
.trade-history-panel { padding: 14px; border-radius: 8px; border: 1px solid rgba(109,77,255,.18); background: rgba(255,255,255,.035); }
.trade-history-panel .compact-table { min-width: 720px; }
@media (max-width: 991px) { .meeting-float { left: 14px; bottom: 82px; } }
@media (max-width: 767px) { .qr-box.compact { width: 132px; height: 132px; } .demo-activity-toast { right: 14px; bottom: 78px; } .team-level-grid { grid-template-columns: 1fr; } }

/* Casino platform conversion */
.broker-hero,
.clean-section,
.surface-section {
  background:
    radial-gradient(circle at 78% 8%, rgba(255, 209, 102, .12), transparent 34%),
    radial-gradient(circle at 16% 36%, rgba(179, 8, 22, .2), transparent 30%);
}

.broker-label,
.section-split a,
.package-top,
.panel-head strong,
.topbar-left small {
  color: var(--gold) !important;
}

.btn-success,
.pulse-btn,
.floating-chat {
  background: linear-gradient(135deg, #ffd166, #b98218) !important;
  border-color: rgba(255, 209, 102, .75) !important;
  color: #170606 !important;
}

.btn-light,
.btn-warning {
  background: linear-gradient(135deg, #ffcf66, #f0a51f);
  border: 0;
  color: #160505;
  font-weight: 800;
}

.glass-card,
.terminal-card,
.plan-tile,
.feature-cards > div,
.why-panel,
.steps-card,
.calculator-wide,
.app-body .topbar,
.app-card,
.dashboard-card,
.kpi-card {
  border-color: rgba(255, 209, 102, .18) !important;
  background: linear-gradient(145deg, rgba(28, 5, 8, .86), rgba(4, 2, 3, .88)) !important;
  box-shadow: 0 20px 70px rgba(0, 0, 0, .35);
}

.sidebar {
  background:
    linear-gradient(180deg, rgba(18, 2, 4, .98), rgba(4, 1, 2, .98)),
    radial-gradient(circle at 50% 0, rgba(255, 209, 102, .14), transparent 34%);
  border-right-color: rgba(255, 209, 102, .18) !important;
}

.sidebar a.active,
.sidebar a:hover {
  background: linear-gradient(135deg, rgba(141, 7, 16, .88), rgba(35, 4, 7, .9)) !important;
  color: #fff8e6 !important;
  box-shadow: inset 3px 0 0 var(--gold);
}

.platform-visual:before {
  background: radial-gradient(circle, rgba(255, 209, 102, .16), transparent 60%);
}

.roulette-page {
  display: grid;
  gap: 18px;
}

.casino-hero-panel {
  min-height: 178px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: clamp(20px, 4vw, 34px);
  border-radius: 8px;
  border: 1px solid rgba(255, 209, 102, .22);
  background:
    linear-gradient(120deg, rgba(45, 4, 8, .96), rgba(4, 2, 3, .92)),
    radial-gradient(circle at 82% 20%, rgba(255, 209, 102, .22), transparent 34%);
  box-shadow: 0 28px 80px rgba(0, 0, 0, .42);
}

.casino-hero-panel small {
  color: var(--gold);
  font-weight: 800;
  text-transform: uppercase;
  font-size: .78rem;
}

.casino-hero-panel h2 {
  margin: 5px 0 8px;
  font-size: clamp(2rem, 4vw, 3.7rem);
  font-weight: 900;
  color: #fff6d9;
}

.casino-hero-panel p {
  max-width: 720px;
  margin: 0;
  color: #e5cab0;
}

.casino-room {
  min-width: 240px;
  display: grid;
  gap: 2px;
  padding: 16px;
  border-radius: 8px;
  border: 1px solid rgba(255, 209, 102, .28);
  background: rgba(0, 0, 0, .34);
}

.casino-room i,
.casino-kpi-grid i {
  color: var(--gold);
}

.casino-room span,
.casino-kpi-grid span {
  color: var(--muted);
  font-size: .78rem;
}

.casino-room b {
  color: #fff;
}

.casino-kpi-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}

.casino-kpi-grid > div {
  display: grid;
  gap: 4px;
  padding: 17px;
  border-radius: 8px;
  border: 1px solid rgba(255, 209, 102, .18);
  background: linear-gradient(145deg, rgba(24, 5, 7, .9), rgba(3, 2, 2, .86));
}

.casino-kpi-grid b {
  font-size: 1.35rem;
  color: #fff8e6;
}

.roulette-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 360px;
  gap: 18px;
}

.roulette-table-card,
.casino-bot-card {
  border: 1px solid rgba(255, 209, 102, .2);
  border-radius: 8px;
  background: linear-gradient(145deg, rgba(28, 4, 7, .9), rgba(3, 2, 2, .92));
  box-shadow: 0 24px 72px rgba(0,0,0,.38);
  padding: 16px;
}

.roulette-toolbar,
.roulette-controls,
.casino-bot-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.roulette-toolbar b {
  color: #fff4d0;
  display: block;
  font-size: 1.2rem;
}

.roulette-toolbar small,
.roulette-controls small {
  color: var(--muted);
}

.roulette-history {
  display: flex;
  gap: 7px;
  flex-wrap: wrap;
  justify-content: end;
}

.roulette-history span {
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  background: #111;
  color: #fff;
  border: 1px solid rgba(255,255,255,.14);
  font-weight: 800;
}

.roulette-stage {
  display: grid;
  grid-template-columns: minmax(260px, 420px) 1fr;
  gap: 18px;
  align-items: center;
  margin: 18px 0;
}

.roulette-wheel {
  position: relative;
  aspect-ratio: 1;
  width: 100%;
  max-width: 420px;
  margin: auto;
  border-radius: 50%;
  background:
    repeating-conic-gradient(from -4deg, #a90513 0 5deg, #080305 5deg 10deg, #0b7b38 10deg 11deg),
    radial-gradient(circle, #391504 0 28%, transparent 30%);
  border: 14px solid #5f2f10;
  box-shadow: inset 0 0 0 12px rgba(255, 209, 102, .28), 0 30px 70px rgba(0,0,0,.52);
  transition: transform 3.6s cubic-bezier(.16,.78,.18,1);
}

.roulette-wheel:before {
  content: "";
  position: absolute;
  inset: 12%;
  border-radius: 50%;
  border: 2px dashed rgba(255, 209, 102, .45);
}

.roulette-wheel:after {
  content: "";
  position: absolute;
  top: -22px;
  left: calc(50% - 12px);
  width: 0;
  height: 0;
  border-left: 12px solid transparent;
  border-right: 12px solid transparent;
  border-top: 28px solid var(--gold);
  filter: drop-shadow(0 4px 8px #000);
}

.roulette-hub {
  position: absolute;
  inset: 34%;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: radial-gradient(circle, #ffd166, #6f3508);
  color: #160604;
  box-shadow: 0 0 0 8px rgba(0,0,0,.38);
}

.roulette-hub b {
  font-size: clamp(2rem, 4vw, 3.4rem);
  line-height: 1;
}

.roulette-board {
  display: grid;
  grid-template-columns: repeat(6, minmax(48px, 1fr));
  gap: 6px;
  padding: 14px;
  border-radius: 8px;
  background: linear-gradient(145deg, #074126, #022212);
  border: 1px solid rgba(255, 209, 102, .24);
}

.roulette-board button {
  min-height: 42px;
  border-radius: 6px;
  border: 1px solid rgba(255,255,255,.16);
  background: #151515;
  color: #fff;
  font-weight: 800;
}

.roulette-board button.red {
  background: linear-gradient(145deg, #ca1022, #65060d);
}

.roulette-board button.black {
  background: linear-gradient(145deg, #161616, #020202);
}

.roulette-board button.active,
.chip-row button.active {
  outline: 2px solid var(--gold);
  box-shadow: 0 0 0 4px rgba(255, 209, 102, .16);
}

.chip-row {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.chip-row button {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  border: 5px dashed rgba(255,255,255,.75);
  background: radial-gradient(circle, #fff 0 22%, #d3192b 23% 58%, #71070d 60%);
  color: #170505;
  font-weight: 900;
}

.roulette-controls {
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid rgba(255, 209, 102, .14);
  flex-wrap: wrap;
}

.roulette-controls b {
  color: #fff;
}

.casino-bot-card .panel-head {
  margin-bottom: 12px;
}

.casino-bot-row {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr) auto;
  padding: 11px 0;
  border-bottom: 1px solid rgba(255,255,255,.08);
}

.casino-bot-row > i {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: var(--gold);
  background: rgba(255, 209, 102, .1);
}

.casino-bot-row div {
  min-width: 0;
}

.casino-bot-row b,
.casino-bot-row span,
.casino-bot-row em {
  display: block;
}

.casino-bot-row span,
.casino-bot-row em {
  color: var(--muted);
  font-size: .78rem;
}

.casino-bot-row em {
  grid-column: 2 / 3;
  font-style: normal;
}

.casino-bot-row strong {
  grid-row: 1 / span 2;
  grid-column: 3;
  align-self: center;
  color: var(--green);
}

.bot-room-note {
  margin-top: 14px;
  padding: 12px;
  border-radius: 8px;
  color: #f8ddb0;
  background: rgba(255, 209, 102, .08);
}

@media (max-width: 1100px) {
  .roulette-layout,
  .roulette-stage {
    grid-template-columns: 1fr;
  }
  .casino-kpi-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 640px) {
  .casino-hero-panel,
  .roulette-toolbar,
  .roulette-controls {
    align-items: stretch;
    flex-direction: column;
  }
  .casino-kpi-grid {
    grid-template-columns: 1fr;
  }
  .roulette-board {
    grid-template-columns: repeat(3, minmax(54px, 1fr));
  }
}

/* Dashboard polish: organized rows, subtle motion, and cleaner card hierarchy */
.app-body .app-main {
  background:
    radial-gradient(circle at 28% 14%, rgba(109, 77, 255, .09), transparent 24%),
    radial-gradient(circle at 78% 16%, rgba(31, 139, 255, .08), transparent 22%);
}
.dash-grid {
  align-items: stretch;
  grid-auto-flow: row dense;
}
.dash-panel,
.kpi-card {
  isolation: isolate;
  transform: translateY(0);
  transition: transform .22s ease, border-color .22s ease, box-shadow .22s ease;
  animation: dashFadeUp .42s ease both;
}
.dash-panel:hover,
.kpi-card:hover {
  transform: translateY(-3px);
  border-color: rgba(32, 232, 139, .28);
  box-shadow: 0 20px 55px rgba(0, 0, 0, .28), 0 0 28px rgba(109, 77, 255, .12);
}
.kpi-card:before,
.dash-panel:before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0;
  background: linear-gradient(120deg, transparent, rgba(255,255,255,.08), transparent);
  transform: translateX(-120%);
}
.kpi-card:hover:before,
.dash-panel:hover:before {
  opacity: 1;
  animation: cardSweep 1.2s ease;
}
.income-chart,
.bar-chart-panel,
.donut-panel {
  grid-column: span 4;
}
.tree-panel,
.referral-panel,
.rank-panel,
.wallet-panel,
.recent-panel,
.investment-panel {
  grid-column: span 4;
  min-height: 300px;
}
.transaction-panel {
  grid-column: 1 / -1;
}
.dash-panel {
  position: relative;
  display: flex;
  flex-direction: column;
}
.line-chart,
.mini-bars,
.donut-wrap,
.tree-visual,
.referral-panel,
.rank-panel,
.wallet-panel,
.recent-panel,
.investment-panel {
  flex: 1;
}
.line-chart i,
.mini-bars i {
  transform-origin: bottom;
  animation: barGrow .8s cubic-bezier(.2,.8,.2,1) both, chartPulse 3.6s ease-in-out infinite;
  animation-delay: calc(var(--h) * 8ms);
}
.mini-bars i:nth-child(2n),
.line-chart i:nth-child(2n) {
  animation-delay: .14s;
}
.mini-bars i:nth-child(3n),
.line-chart i:nth-child(3n) {
  animation-delay: .24s;
}
.donut {
  animation: donutPop .55s ease both;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.08), 0 0 26px rgba(31,139,255,.12);
}
.root-avatar,
.topbar-avatar span {
  animation: avatarFloat 3.8s ease-in-out infinite;
}
.rank-progress i {
  animation: progressFlow 2.4s linear infinite;
  background-size: 180% 100%;
}
.referral-panel .qr-box.compact {
  width: 160px;
  height: 160px;
  margin: 14px auto 0;
  padding: 10px;
  border-radius: 12px;
  box-shadow: 0 14px 36px rgba(0,0,0,.28), 0 0 0 1px rgba(255,255,255,.18);
}
.ref-copy input {
  min-height: 42px;
}
.ref-copy button {
  min-height: 42px;
}
.dashboard-investment-strip.compact-investments {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
}
.dashboard-investment-card {
  min-height: 82px;
  border-radius: 10px;
}
.wallet-panel,
.recent-panel,
.investment-panel {
  max-height: 360px;
}
.recent-panel {
  overflow-y: auto;
}
.activity-row:last-child,
.wallet-row:last-child {
  margin-bottom: 0;
  border-bottom: 0;
}
.tree-visual {
  display: grid;
  align-content: center;
}
.dash-panel:nth-of-type(2) { animation-delay: .04s; }
.dash-panel:nth-of-type(3) { animation-delay: .08s; }
.dash-panel:nth-of-type(4) { animation-delay: .12s; }
.dash-panel:nth-of-type(5) { animation-delay: .16s; }
.dash-panel:nth-of-type(6) { animation-delay: .20s; }
.dash-panel:nth-of-type(7) { animation-delay: .24s; }
.dash-panel:nth-of-type(8) { animation-delay: .28s; }
.dash-panel:nth-of-type(9) { animation-delay: .32s; }
.dash-panel:nth-of-type(10) { animation-delay: .36s; }
@keyframes dashFadeUp {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes cardSweep {
  to { transform: translateX(120%); }
}
@keyframes barGrow {
  from { transform: scaleY(.08); opacity: .35; }
  to { transform: scaleY(1); opacity: 1; }
}
@keyframes chartPulse {
  0%, 100% { filter: brightness(1); }
  50% { filter: brightness(1.18); }
}
@keyframes donutPop {
  from { transform: scale(.86) rotate(-18deg); opacity: .4; }
  to { transform: scale(1) rotate(0); opacity: 1; }
}
@keyframes avatarFloat {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-4px); }
}
@keyframes progressFlow {
  0% { background-position: 0 0; }
  100% { background-position: 180% 0; }
}
@media (min-width: 1121px) {
  .kpi-strip {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }
  .income-chart,
  .bar-chart-panel,
  .donut-panel,
  .tree-panel,
  .referral-panel,
  .rank-panel,
  .wallet-panel,
  .recent-panel,
  .investment-panel {
    grid-column: span 4;
  }
  .transaction-panel {
    grid-column: 1 / -1;
  }
}
@media (max-width: 1120px) {
  .income-chart,
  .bar-chart-panel,
  .donut-panel,
  .tree-panel,
  .referral-panel,
  .rank-panel,
  .wallet-panel,
  .recent-panel,
  .investment-panel {
    grid-column: span 6;
  }
  .transaction-panel {
    grid-column: 1 / -1;
  }
}
@media (max-width: 767px) {
  .income-chart,
  .bar-chart-panel,
  .donut-panel,
  .tree-panel,
  .referral-panel,
  .rank-panel,
  .wallet-panel,
  .recent-panel,
  .investment-panel,
  .transaction-panel {
    grid-column: 1 / -1;
    min-height: auto;
  }
  .wallet-panel,
  .recent-panel,
  .investment-panel {
    max-height: none;
  }
  .referral-panel .qr-box.compact {
    width: 150px;
    height: 150px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .dash-panel,
  .kpi-card,
  .line-chart i,
  .mini-bars i,
  .donut,
  .root-avatar,
  .topbar-avatar span,
  .rank-progress i {
    animation: none !important;
    transition: none !important;
  }
}

/* Deposit investment calculator */
.investment-calc-card {
  padding: 14px;
  border-radius: 12px;
  background:
    radial-gradient(circle at 86% 0%, rgba(32,232,139,.14), transparent 34%),
    linear-gradient(145deg, rgba(11, 24, 42, .96), rgba(10, 14, 33, .96));
  border: 1px solid rgba(32,232,139,.2);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.05), 0 16px 42px rgba(0,0,0,.18);
}
.investment-calc-card .calc-head {
  display: flex;
  justify-content: space-between;
  align-items: start;
  gap: 14px;
  margin-bottom: 12px;
}
.investment-calc-card h5 {
  margin: 0 0 2px;
  font-size: 1rem;
  font-weight: 900;
}
.investment-calc-card .calc-head span,
.investment-calc-card p,
.investment-calc-card small {
  color: #91a4c6;
}
.investment-calc-card .calc-head i {
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border-radius: 10px;
  color: #20e88b;
  background: rgba(32,232,139,.13);
}
.calc-result-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 9px;
}
.calc-result-grid div {
  padding: 10px;
  border-radius: 10px;
  background: rgba(255,255,255,.045);
  border: 1px solid rgba(255,255,255,.07);
}
.calc-result-grid b,
.calc-result-grid small {
  display: block;
}
.calc-result-grid b {
  margin-top: 4px;
  color: #9fffd1;
  font-size: .98rem;
}
.calc-progress {
  height: 9px;
  margin: 13px 0 10px;
  border-radius: 999px;
  background: rgba(255,255,255,.08);
  overflow: hidden;
}
.calc-progress i {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #20e88b, #6d4dff, #1f8bff);
  background-size: 160% 100%;
  transition: width .24s ease;
  animation: progressFlow 2.4s linear infinite;
}
.investment-calc-card p {
  margin: 0;
  font-size: .78rem;
  line-height: 1.45;
}
@media (max-width: 575px) {
  .calc-result-grid {
    grid-template-columns: 1fr;
  }
}

/* User business plan */
.business-plan-page {
  display: grid;
  gap: 18px;
}
.plan-action-bar,
.plan-hero,
.plan-section-card {
  border: 1px solid rgba(83, 103, 255, .18);
  background:
    radial-gradient(circle at 10% 0%, rgba(109,77,255,.15), transparent 34%),
    radial-gradient(circle at 90% 8%, rgba(32,232,139,.13), transparent 30%),
    linear-gradient(145deg, rgba(11, 17, 42, .96), rgba(5, 10, 25, .98));
  border-radius: 12px;
  box-shadow: 0 18px 48px rgba(0,0,0,.24);
}
.plan-action-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 14px;
  padding: 14px;
}
.plan-action-bar span,
.plan-action-bar b {
  display: block;
}
.plan-action-bar span {
  color: #9fffd2;
  font-size: .8rem;
}
.plan-action-bar b {
  margin-top: 2px;
  font-size: 1.05rem;
}
.plan-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: flex-end;
}
.plan-actions button {
  border: 1px solid rgba(255,255,255,.13);
  color: #eef6ff;
  background: rgba(255,255,255,.07);
  border-radius: 10px;
  padding: 9px 12px;
  font-weight: 800;
}
.plan-actions button:last-child {
  color: #06110e;
  background: linear-gradient(135deg, #20e88b, #ffd43b);
}
.plan-hero {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(320px, .92fr);
  gap: 24px;
  padding: clamp(22px, 4vw, 44px);
  overflow: hidden;
}
.plan-hero:before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255,255,255,.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.04) 1px, transparent 1px);
  background-size: 44px 44px;
  mask-image: linear-gradient(90deg, #000, transparent 78%);
  pointer-events: none;
}
.plan-hero-copy,
.plan-market-graphic {
  position: relative;
  z-index: 1;
}
.plan-kicker {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border-radius: 999px;
  color: #9fffd2;
  background: rgba(32,232,139,.12);
  border: 1px solid rgba(32,232,139,.2);
  font-weight: 900;
}
.plan-hero h2 {
  max-width: 760px;
  margin: 18px 0 10px;
  font-size: clamp(2rem, 5vw, 4.5rem);
  line-height: .96;
  font-weight: 1000;
  letter-spacing: 0;
}
.plan-hero p {
  max-width: 680px;
  color: #aab7d3;
  font-size: 1rem;
  line-height: 1.65;
}
.plan-hero-stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin: 20px 0;
}
.plan-hero-stats div,
.plan-package-grid article,
.plan-flow div,
.reward-grid div,
.contact-strip div,
.example-row,
.wallet-flow span {
  border: 1px solid rgba(255,255,255,.08);
  background: rgba(255,255,255,.055);
  border-radius: 10px;
}
.plan-hero-stats div {
  padding: 13px;
}
.plan-hero-stats b,
.plan-hero-stats span {
  display: block;
}
.plan-hero-stats b {
  color: #9fffd2;
  font-size: 1.1rem;
}
.plan-hero-stats span {
  color: #98a8c8;
  font-size: .78rem;
}
.plan-risk-line,
.mini-risk {
  padding: 12px;
  border: 1px solid rgba(255,212,59,.26);
  background: rgba(255,212,59,.09);
  border-radius: 10px;
  color: #fff1a8 !important;
}
.plan-market-graphic {
  min-height: 360px;
  padding: 18px;
  border-radius: 18px;
  background: linear-gradient(145deg, rgba(1,14,11,.95), rgba(5,8,23,.95));
  border: 1px solid rgba(32,232,139,.18);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.07), 0 28px 70px rgba(0,0,0,.36);
}
.market-card-head,
.market-orbit {
  display: flex;
  justify-content: space-between;
  gap: 10px;
}
.market-card-head span {
  color: #20e88b;
}
.market-chart-grid {
  height: 230px;
  display: flex;
  align-items: end;
  gap: 12px;
  margin: 28px 0;
  padding: 14px;
  border-radius: 12px;
  background-image:
    linear-gradient(rgba(255,255,255,.055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.055) 1px, transparent 1px);
  background-size: 100% 25%, 12.5% 100%;
}
.market-chart-grid i {
  flex: 1;
  height: var(--h);
  min-width: 10px;
  border-radius: 7px 7px 0 0;
  background: linear-gradient(#30f0a0, #0d7651);
  animation: planBars 2.6s ease-in-out infinite alternate;
}
.market-chart-grid i.red {
  background: linear-gradient(#ff6674, #8d2432);
  animation-delay: .4s;
}
.market-orbit {
  flex-wrap: wrap;
}
.market-orbit span {
  padding: 7px 10px;
  border-radius: 999px;
  color: #bdfde1;
  background: rgba(32,232,139,.1);
}
@keyframes planBars {
  from { transform: scaleY(.76); opacity: .72; }
  to { transform: scaleY(1); opacity: 1; }
}
.plan-section-card {
  padding: clamp(16px, 3vw, 24px);
}
.plan-section-head {
  display: flex;
  gap: 13px;
  align-items: flex-start;
  margin-bottom: 18px;
}
.plan-section-head > i {
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  color: #9fffd2;
  border-radius: 12px;
  background: rgba(32,232,139,.12);
}
.plan-section-head h3 {
  margin: 0 0 4px;
  font-size: 1.35rem;
  font-weight: 1000;
}
.plan-section-head p {
  margin: 0;
  color: #95a7c7;
}
.plan-flow,
.plan-package-grid,
.reward-grid,
.contact-strip {
  display: grid;
  gap: 12px;
}
.plan-flow {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}
.plan-flow div {
  padding: 14px;
}
.plan-flow b {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  margin-bottom: 12px;
  border-radius: 10px;
  color: #06110e;
  background: linear-gradient(135deg, #20e88b, #7b61ff);
}
.plan-flow h4,
.plan-package-grid h4,
.royalty-tables h4 {
  font-weight: 1000;
}
.plan-flow p,
.plan-package-grid small,
.plan-package-grid span {
  color: #9caccb;
}
.plan-package-grid {
  grid-template-columns: repeat(7, minmax(170px, 1fr));
  overflow-x: auto;
  padding-bottom: 4px;
}
.plan-package-grid article {
  padding: 15px;
  min-height: 210px;
}
.plan-package-grid article > span {
  display: block;
  margin-bottom: 8px;
  font-size: .78rem;
}
.plan-package-grid article div {
  margin: 10px 0;
}
.plan-package-grid b,
.plan-package-grid small {
  display: block;
}
.plan-package-grid b {
  color: #9fffd2;
}
.plan-package-grid em {
  display: inline-block;
  margin-top: 8px;
  color: #ffe789;
  font-style: normal;
  font-size: .82rem;
}
.plan-two-col {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
}
.cap-stack {
  display: grid;
  gap: 12px;
}
.cap-stack div {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 8px;
  align-items: center;
}
.cap-stack i,
.level-bars i {
  display: block;
  grid-column: 1 / -1;
  height: 10px;
  border-radius: 999px;
  background: linear-gradient(90deg, #20e88b, #46a8ff, #7b61ff);
}
.cap-stack b,
.level-bars b {
  color: #9fffd2;
}
.level-bars {
  display: grid;
  gap: 8px;
}
.level-bars div {
  display: grid;
  grid-template-columns: 74px 1fr 42px;
  gap: 9px;
  align-items: center;
}
.royalty-tables {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}
.royalty-tables table {
  width: 100%;
  overflow: hidden;
  border-radius: 10px;
}
.royalty-tables th,
.royalty-tables td {
  padding: 10px;
  border-bottom: 1px solid rgba(255,255,255,.08);
}
.royalty-tables th {
  color: #9fffd2;
  background: rgba(32,232,139,.08);
}
.reward-grid {
  grid-template-columns: repeat(5, minmax(0, 1fr));
}
.reward-grid div {
  display: flex;
  gap: 9px;
  align-items: center;
  padding: 12px;
  font-weight: 800;
}
.reward-grid i {
  color: #20e88b;
}
.example-row {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 12px;
  margin-bottom: 10px;
}
.example-row span {
  color: #9caccb;
}
.example-row b {
  color: #9fffd2;
}
.wallet-flow {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
}
.wallet-flow span {
  padding: 12px;
  color: #eef6ff;
}
.wallet-flow i {
  color: #20e88b;
}
.terms-card ul {
  color: #dfe7f8;
  line-height: 1.7;
}
.contact-strip {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.contact-strip div {
  padding: 13px;
}
.contact-strip i,
.contact-strip span,
.contact-strip b {
  display: block;
}
.contact-strip i {
  color: #20e88b;
  margin-bottom: 8px;
}
.contact-strip span {
  color: #9caccb;
}
@media (max-width: 1100px) {
  .plan-hero,
  .plan-two-col,
  .royalty-tables {
    grid-template-columns: 1fr;
  }
  .plan-flow,
  .reward-grid,
  .contact-strip {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 640px) {
  .plan-action-bar,
  .plan-hero-stats,
  .plan-flow,
  .reward-grid,
  .contact-strip {
    grid-template-columns: 1fr;
  }
  .plan-action-bar {
    display: grid;
  }
  .plan-actions {
    justify-content: stretch;
  }
  .plan-actions button {
    flex: 1 1 140px;
  }
  .plan-market-graphic {
    min-height: 280px;
  }
  .market-chart-grid {
    height: 170px;
    gap: 7px;
  }
  .example-row {
    display: grid;
  }
}
@media print {
  @page {
    size: A4 landscape;
    margin: 7mm;
  }
  body,
  .app-body,
  .app-main {
    background: #ffffff !important;
    color: #08111f !important;
  }
  .sidebar,
  .sidebar-backdrop,
  .topbar,
  .floating-chat,
  .chatbot-panel,
  .meeting-float,
  .demo-activity-toast,
  .impersonation-banner,
  .alert,
  .plan-no-print {
    display: none !important;
  }
  .app-shell,
  .app-main {
    display: block !important;
    margin: 0 !important;
    padding: 0 !important;
  }
  .plan-print-area * {
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }
  .plan-hero,
  .plan-section-card {
    break-inside: avoid;
    page-break-inside: avoid;
    box-shadow: none !important;
    border-color: #c9d3e8 !important;
  }
  .business-plan-page {
    display: block !important;
    gap: 0;
    width: 100% !important;
  }
  .plan-slide {
    width: 100% !important;
    min-height: 190mm !important;
    height: 190mm !important;
    margin: 0 !important;
    padding: 10mm !important;
    overflow: hidden !important;
    page-break-after: always;
    break-after: page;
  }
  .plan-slide:last-of-type {
    page-break-after: auto;
    break-after: auto;
  }
  .plan-hero.plan-slide {
    display: grid !important;
    grid-template-columns: 1fr .95fr !important;
    gap: 10mm !important;
  }
  .plan-section-card.plan-slide,
  .plan-two-col.plan-slide {
    display: grid !important;
    align-content: start !important;
  }
  .plan-two-col.plan-slide {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 8mm !important;
  }
  .plan-two-col.plan-slide .plan-section-card {
    height: 100% !important;
    padding: 8mm !important;
  }
  .plan-hero h2 {
    font-size: 30pt !important;
  }
  .plan-hero p,
  .plan-flow p,
  .terms-card li,
  .mini-risk {
    font-size: 9pt !important;
    line-height: 1.45 !important;
  }
  .plan-market-graphic {
    min-height: 0 !important;
    height: 100% !important;
  }
  .market-chart-grid {
    height: 112mm !important;
  }
  .plan-section-head h3 {
    font-size: 18pt !important;
  }
  .plan-flow {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  }
  .plan-package-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    overflow: visible !important;
  }
  .plan-package-grid article {
    min-height: 0 !important;
    padding: 6mm !important;
  }
  .royalty-tables {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
  .royalty-tables th,
  .royalty-tables td {
    padding: 5px 7px !important;
    font-size: 8.5pt !important;
  }
  .reward-grid {
    grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
  }
  .contact-strip {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }
}

/* Admin protected settings and clearer grouped forms */
.protected-settings-card {
  text-align: center;
  max-width: 520px;
  margin: 40px auto;
}
.protected-icon {
  width: 62px;
  height: 62px;
  display: grid;
  place-items: center;
  margin: 0 auto 16px;
  border-radius: 18px;
  color: #9fffd2;
  background: linear-gradient(135deg, rgba(32,232,139,.18), rgba(109,77,255,.2));
  border: 1px solid rgba(255,255,255,.1);
  font-size: 1.5rem;
}
.settings-section-card {
  position: relative;
}
.settings-section-head {
  display: flex;
  align-items: flex-start;
  gap: 13px;
  margin-bottom: 18px;
  padding-bottom: 14px;
  border-bottom: 1px solid rgba(255,255,255,.08);
}
.settings-section-head > i {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border-radius: 12px;
  color: #9fffd2;
  background: rgba(32,232,139,.12);
  border: 1px solid rgba(32,232,139,.18);
}
.settings-section-head h5 {
  margin: 0 0 3px;
  font-weight: 900;
}
.settings-section-head p {
  margin: 0;
  color: #93a4c8;
  font-size: .86rem;
}
.settings-help-item {
  padding: 12px;
  border-radius: 10px;
  background: rgba(255,255,255,.045);
  border: 1px solid rgba(255,255,255,.07);
}
.settings-help-item b,
.settings-help-item span {
  display: block;
}
.settings-help-item span {
  margin-top: 4px;
  color: #94a4c8;
  font-size: .78rem;
  line-height: 1.35;
}
.settings-sticky-save {
  position: sticky;
  bottom: 12px;
  z-index: 12;
  padding: 12px;
  border-radius: 12px;
  background: rgba(5, 8, 23, .78);
  border: 1px solid rgba(32,232,139,.18);
  backdrop-filter: blur(14px);
  box-shadow: 0 18px 52px rgba(0,0,0,.34);
}

/* Dashboard user-visible admin settings */
.user-info-panel {
  grid-column: span 4;
  min-height: 190px;
}
.user-link-grid {
  display: grid;
  gap: 10px;
}
.user-link-grid a,
.withdrawal-rule-box div,
.announcement-card,
.info-empty {
  border: 1px solid rgba(255,255,255,.08);
  background: rgba(255,255,255,.055);
  border-radius: 10px;
}
.user-link-grid a {
  display: grid;
  grid-template-columns: 36px 1fr auto;
  gap: 10px;
  align-items: center;
  padding: 11px;
  color: #eaf2ff;
  text-decoration: none;
}
.user-link-grid a:hover {
  background: linear-gradient(135deg, rgba(32,232,139,.14), rgba(109,77,255,.18));
}
.user-link-grid i,
.withdrawal-rule-box i,
.announcement-card i,
.info-empty i {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  border-radius: 10px;
  color: #9fffd2;
  background: rgba(32,232,139,.12);
}
.user-link-grid span,
.withdrawal-rule-box span {
  display: block;
  color: #dbe7ff;
  font-weight: 800;
}
.user-link-grid b,
.withdrawal-rule-box b {
  display: block;
  margin-top: 2px;
  color: #93a4c8;
  font-size: .76rem;
  font-weight: 700;
}
.user-link-grid small[data-meeting-countdown] {
  display: inline-flex;
  width: fit-content;
  margin-top: 7px;
  padding: 4px 8px;
  border-radius: 999px;
  color: #06110e;
  background: linear-gradient(135deg, #20e88b, #ffd43b);
  font-size: .68rem;
  font-weight: 1000;
  letter-spacing: 0;
}
.user-link-grid em {
  color: #9fffd2;
  font-style: normal;
  font-size: .74rem;
  font-weight: 900;
}
.withdrawal-rule-box {
  display: grid;
  gap: 10px;
}
.withdrawal-rule-box div {
  display: flex;
  gap: 10px;
  align-items: center;
  padding: 11px;
}
.announcement-card {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  padding: 14px;
  color: #fff3bd;
  background: linear-gradient(135deg, rgba(255,193,7,.13), rgba(109,77,255,.14));
  border-color: rgba(255,193,7,.24);
}
.announcement-card p {
  margin: 0;
  line-height: 1.55;
}
.info-empty {
  min-height: 112px;
  display: grid;
  place-items: center;
  gap: 10px;
  text-align: center;
  padding: 16px;
  color: #98a8c8;
}
@media (max-width: 1280px) {
  .user-info-panel {
    grid-column: span 6;
  }
}
@media (max-width: 767px) {
  .user-info-panel {
    grid-column: 1 / -1;
    min-height: auto;
  }
}

/* Mobile app bottom trading navigation */
.mobile-bottom-nav,
.mobile-more-sheet,
.mobile-bottom-backdrop {
  display: none;
}
@media (max-width: 991px) {
  .app-body {
    padding-bottom: 88px;
  }
  .app-body .app-main {
    padding-bottom: 94px;
  }
  .mobile-bottom-nav {
    position: fixed;
    left: 10px;
    right: 10px;
    bottom: 10px;
    z-index: 220;
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 5px;
    min-height: 70px;
    padding: 7px;
    border-radius: 22px;
    background:
      radial-gradient(circle at 18% 0%, rgba(32,232,139,.22), transparent 32%),
      radial-gradient(circle at 88% 12%, rgba(109,77,255,.28), transparent 36%),
      rgba(4, 9, 24, .94);
    border: 1px solid rgba(255,255,255,.12);
    box-shadow: 0 22px 60px rgba(0,0,0,.48), inset 0 1px 0 rgba(255,255,255,.08);
    backdrop-filter: blur(18px);
  }
  .mobile-bottom-nav a,
  .mobile-bottom-nav button {
    position: relative;
    min-width: 0;
    border: 0;
    display: grid;
    place-items: center;
    align-content: center;
    gap: 4px;
    border-radius: 16px;
    color: #91a4c8;
    background: transparent;
    text-decoration: none;
    font-size: .66rem;
    font-weight: 900;
    line-height: 1;
  }
  .mobile-bottom-nav i {
    width: 30px;
    height: 30px;
    display: grid;
    place-items: center;
    border-radius: 12px;
    color: #dce8ff;
    background: rgba(255,255,255,.06);
    font-size: .95rem;
  }
  .mobile-bottom-nav span {
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .mobile-bottom-nav a.active,
  .mobile-bottom-nav button.active {
    color: #ffffff;
    background: linear-gradient(135deg, rgba(32,232,139,.17), rgba(109,77,255,.25));
  }
  .mobile-bottom-nav a.active i,
  .mobile-bottom-nav button.active i {
    color: #06110e;
    background: linear-gradient(135deg, #20e88b, #55a6ff);
    box-shadow: 0 0 20px rgba(32,232,139,.34);
  }
  .mobile-bottom-backdrop.open {
    display: block;
    position: fixed;
    inset: 0;
    z-index: 205;
    background: rgba(0,0,0,.55);
    backdrop-filter: blur(4px);
  }
  .mobile-more-sheet {
    position: fixed;
    left: 10px;
    right: 10px;
    bottom: 88px;
    z-index: 230;
    display: block;
    transform: translateY(118%);
    opacity: 0;
    pointer-events: none;
    padding: 14px;
    border-radius: 24px;
    background:
      radial-gradient(circle at 12% 0%, rgba(32,232,139,.16), transparent 34%),
      linear-gradient(145deg, rgba(10, 17, 39, .98), rgba(4, 10, 26, .98));
    border: 1px solid rgba(255,255,255,.12);
    box-shadow: 0 28px 80px rgba(0,0,0,.56);
    transition: transform .24s ease, opacity .24s ease;
  }
  .mobile-more-sheet.open {
    transform: translateY(0);
    opacity: 1;
    pointer-events: auto;
  }
  .mobile-sheet-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    margin-bottom: 12px;
    color: #fff;
  }
  .mobile-sheet-head b {
    font-size: 1rem;
  }
  .mobile-sheet-head button {
    width: 34px;
    height: 34px;
    border: 0;
    border-radius: 50%;
    color: #dfe8ff;
    background: rgba(255,255,255,.09);
    font-size: 1.35rem;
    line-height: 1;
  }
  .mobile-more-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
  }
  .mobile-more-grid a {
    position: relative;
    min-height: 78px;
    display: grid;
    place-items: center;
    align-content: center;
    gap: 7px;
    padding: 10px 6px;
    text-align: center;
    color: #dce8ff;
    text-decoration: none;
    border-radius: 16px;
    background: rgba(255,255,255,.055);
    border: 1px solid rgba(255,255,255,.07);
    font-size: .72rem;
    font-weight: 850;
  }
  .mobile-more-grid a.active {
    background: linear-gradient(135deg, rgba(109,77,255,.36), rgba(32,232,139,.13));
    border-color: rgba(32,232,139,.22);
  }
  .mobile-more-grid i {
    color: #9fffd2;
    font-size: 1rem;
  }
  .mobile-more-grid em {
    position: absolute;
    top: 7px;
    right: 8px;
    min-width: 20px;
    height: 20px;
    display: grid;
    place-items: center;
    border-radius: 999px;
    background: #ff3f86;
    color: #fff;
    font-style: normal;
    font-size: .66rem;
  }
  .floating-chat {
    right: 18px;
    bottom: 96px;
  }
  .chatbot-panel {
    bottom: 154px;
  }
  .meeting-float {
    bottom: 96px !important;
  }
  .demo-activity-toast {
    bottom: 162px !important;
  }
}
@media (max-width: 420px) {
  .mobile-bottom-nav {
    left: 6px;
    right: 6px;
    bottom: 6px;
    gap: 3px;
    padding: 6px;
  }
  .mobile-bottom-nav span {
    font-size: .6rem;
  }
  .mobile-bottom-nav i {
    width: 28px;
    height: 28px;
  }
  .mobile-more-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* Casino panel skin for Build Trading AutoBot ROI Platform */
:root {
  --bg: #030101;
  --bg2: #130304;
  --panel: rgba(22, 4, 6, .9);
  --line: rgba(245, 196, 95, .22);
  --text: #fff7df;
  --muted: #c7ad83;
  --green: #17e66f;
  --red: #b41120;
  --gold: #f5c45f;
  --app-bg: #030101;
  --app-panel: rgba(22, 4, 6, .92);
  --app-line: rgba(245, 196, 95, .2);
}

body,
.app-body {
  background:
    radial-gradient(circle at 82% 4%, rgba(157, 16, 27, .24), transparent 31%),
    radial-gradient(circle at 18% 14%, rgba(245, 196, 95, .12), transparent 28%),
    linear-gradient(135deg, #030101, #080103 48%, #03130b) !important;
  color: #fff7df;
}

.glass-nav,
.market-ticker,
.app-body .sidebar,
.sidebar {
  background: linear-gradient(180deg, #050101, #020101) !important;
  border-color: rgba(245, 196, 95, .22) !important;
}

.market-ticker span:nth-child(odd),
.navbar-brand,
.brand-logo-link,
.sidebar .brand b,
.app-body .sidebar .brand b {
  color: #f5c45f !important;
}

.brand-logo,
.sidebar-logo {
  border-radius: 50%;
  box-shadow: 0 0 0 1px rgba(245,196,95,.45), 0 14px 34px rgba(157,16,27,.28);
}

.app-body .sidebar a,
.sidebar a {
  color: #eadac1 !important;
  border-radius: 7px !important;
}

.app-body .sidebar a i,
.sidebar a i,
.mobile-bottom-nav i,
.mobile-more-grid i {
  color: #f5c45f !important;
}

.app-body .sidebar a.active,
.app-body .sidebar a:hover,
.sidebar a.active,
.sidebar a:hover {
  background: linear-gradient(100deg, #a4131d, #33070a) !important;
  color: #fff !important;
  box-shadow: inset 0 0 0 1px rgba(245,196,95,.24), inset 3px 0 0 #f5c45f !important;
}

.app-body .topbar,
.topbar {
  background:
    linear-gradient(100deg, rgba(36, 5, 8, .94), rgba(4, 2, 2, .96)),
    radial-gradient(circle at 90% 0, rgba(245,196,95,.14), transparent 32%) !important;
  border: 1px solid rgba(245, 196, 95, .2) !important;
  box-shadow: 0 20px 65px rgba(0,0,0,.35) !important;
}

.topbar-left small,
.panel-head strong,
.plan-action-bar span,
.plan-kicker,
.package-top,
.text-success {
  color: #f5c45f !important;
}

.topbar-left h1,
.plan-hero h2,
.plan-section-head h3,
.glass-card h1,
.glass-card h2,
.glass-card h3,
.glass-card h4,
.panel-head h5,
.metric b,
.kpi-card b {
  color: #fff7df !important;
  text-shadow: 0 2px 18px rgba(0,0,0,.35);
}

.topbar-search,
.topbar-actions a,
.topbar-avatar,
.glass-card,
.app-card,
.dashboard-card,
.kpi-card,
.metric,
.plan-action-bar,
.plan-hero,
.plan-section-card,
.plan-package-grid article,
.trade-side-panel,
.trade-history-panel,
.investment-card,
.wallet-row,
.support-thread,
.chat-panel,
.table,
.form-control,
.form-select {
  background: linear-gradient(145deg, rgba(24, 5, 7, .94), rgba(4, 2, 2, .92)) !important;
  border-color: rgba(245, 196, 95, .2) !important;
  color: #fff7df !important;
}

.form-control::placeholder,
.topbar-search input::placeholder {
  color: #9f8765 !important;
}

.btn-success,
.btn-primary,
.pulse-btn,
.support-new-btn,
.floating-chat,
.plan-actions button,
.store-buttons a,
.plan-section-card button {
  background: linear-gradient(135deg, #ffd56b, #b87918) !important;
  border-color: rgba(245,196,95,.65) !important;
  color: #170503 !important;
  font-weight: 900;
}

.btn-outline-light,
.btn-outline-success,
.btn-outline-danger {
  border-color: rgba(245,196,95,.42) !important;
  color: #f5c45f !important;
}

.risk-strip {
  background: linear-gradient(135deg, rgba(245,196,95,.13), rgba(96, 14, 8, .35)) !important;
  border: 1px solid rgba(245,196,95,.35) !important;
  color: #ffe7a3 !important;
}

.plan-hero {
  background:
    linear-gradient(110deg, rgba(12, 9, 44, .88), rgba(4, 24, 17, .88)),
    radial-gradient(circle at 85% 10%, rgba(157,16,27,.22), transparent 34%) !important;
  overflow: hidden;
}

.plan-market-graphic,
.trade-chart-shell,
.roi-radar-card,
.live-market-board {
  background:
    radial-gradient(circle at 25% 15%, rgba(245,196,95,.1), transparent 30%),
    linear-gradient(145deg, #020908, #030101) !important;
  border: 1px solid rgba(23, 230, 111, .16) !important;
}

.market-chart-grid i.green,
.chart-bars i,
.bot-status span,
.cap-stack i,
.level-bars i {
  background: linear-gradient(180deg, #23e28d, #0b6738) !important;
}

.market-chart-grid i.red,
.chart-bars i:nth-child(2n) {
  background: linear-gradient(180deg, #d94b55, #721018) !important;
}

.plan-market-graphic .market-orbit span,
.status-pill,
.nav-badge {
  background: rgba(245,196,95,.1) !important;
  border-color: rgba(245,196,95,.25) !important;
  color: #f5c45f !important;
}

.table > :not(caption) > * > * {
  background: transparent !important;
  color: #fff7df !important;
  border-color: rgba(245,196,95,.12) !important;
}

.datatable,
.compact-table {
  --bs-table-bg: transparent;
  --bs-table-color: #fff7df;
  --bs-table-border-color: rgba(245,196,95,.14);
}

.mobile-bottom-nav,
.mobile-more-sheet,
.chatbot-panel,
.meeting-float,
.demo-activity-toast {
  background: linear-gradient(145deg, rgba(24,5,7,.98), rgba(4,2,2,.98)) !important;
  border-color: rgba(245,196,95,.22) !important;
}

.mobile-bottom-nav a.active,
.mobile-bottom-nav button.active,
.mobile-more-grid a.active {
  background: linear-gradient(135deg, rgba(164,19,29,.76), rgba(245,196,95,.16)) !important;
}

/* Casino motion layer: shared public, user and admin panels */
body,
.app-body {
  background:
    radial-gradient(circle at 18% 12%, rgba(245, 196, 95, .11), transparent 25%),
    radial-gradient(circle at 88% 8%, rgba(157, 16, 27, .20), transparent 30%),
    radial-gradient(circle at 62% 88%, rgba(23, 230, 111, .08), transparent 28%),
    #030101 !important;
}

.app-body,
body:has(.glass-card),
body:has(.app-shell) {
  position: relative;
  overflow-x: hidden;
}

body::before,
.app-body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background:
    linear-gradient(115deg, transparent 0 38%, rgba(245, 196, 95, .08) 45%, transparent 53% 100%),
    radial-gradient(circle at 30% 40%, rgba(245, 196, 95, .10), transparent 2px),
    radial-gradient(circle at 70% 70%, rgba(255, 239, 177, .08), transparent 2px);
  background-size: 220% 220%, 130px 130px, 180px 180px;
  opacity: .72;
}

body::after,
.app-body::after {
  content: "";
  position: fixed;
  inset: -20%;
  pointer-events: none;
  z-index: 0;
  background:
    repeating-conic-gradient(from 0deg, rgba(245, 196, 95, .08) 0 8deg, transparent 8deg 20deg),
    radial-gradient(circle, rgba(245, 196, 95, .09), transparent 38%);
  opacity: .12;
}

.app-shell,
.app-main,
.sidebar,
.glass-nav,
.market-ticker,
main,
nav,
footer {
  position: relative;
  z-index: 1;
}

.glass-card,
.dashboard-card,
.dash-panel,
.app-body .metric,
.stat-card,
.plan-card,
.package-card,
.roi-card,
.income-card,
.transaction-card,
.wallet-card,
.support-card,
.profile-card,
.table-responsive,
.auth-card,
.modal-content {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}

.glass-card::before,
.dashboard-card::before,
.dash-panel::before,
.app-body .metric::before,
.stat-card::before,
.plan-card::before,
.package-card::before,
.roi-card::before,
.income-card::before,
.transaction-card::before,
.wallet-card::before,
.support-card::before,
.profile-card::before,
.table-responsive::before,
.auth-card::before,
.modal-content::before {
  content: "";
  position: absolute;
  inset: -2px;
  pointer-events: none;
  z-index: -1;
  border-radius: inherit;
  background:
    linear-gradient(115deg, transparent 0 28%, rgba(255, 229, 141, .20) 42%, transparent 56% 100%),
    radial-gradient(circle at var(--casino-glow-x, 18%) 0, rgba(245, 196, 95, .20), transparent 34%);
  background-size: 240% 100%, 100% 100%;
}

.glass-card::after,
.dashboard-card::after,
.dash-panel::after,
.app-body .metric::after,
.plan-card::after,
.package-card::after,
.auth-card::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  box-shadow: inset 0 0 0 1px rgba(245, 196, 95, .16), inset 0 0 38px rgba(245, 196, 95, .045);
}

.sidebar::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 3px;
  background: linear-gradient(180deg, transparent, rgba(245, 196, 95, .9), transparent);
  box-shadow: 0 0 22px rgba(245, 196, 95, .65);
  pointer-events: none;
}

.sidebar-logo,
.app-body .sidebar-logo,
.topbar-avatar span,
.brand i,
.brand .sidebar-logo {
  box-shadow: 0 0 0 1px rgba(245, 196, 95, .34), 0 0 22px rgba(245, 196, 95, .18);
}

.btn,
button,
.sidebar a,
.mobile-bottom-nav a,
.mobile-bottom-nav button,
.deposit-card,
.manage-btn,
.plan-actions a,
.plan-actions button {
  position: relative;
  overflow: hidden;
}

.btn::after,
button::after,
.deposit-card::after,
.manage-btn::after,
.plan-actions a::after,
.plan-actions button::after {
  content: "";
  position: absolute;
  inset: -30% auto -30% -80%;
  width: 45%;
  pointer-events: none;
  transform: skewX(-22deg);
  background: linear-gradient(90deg, transparent, rgba(255, 236, 174, .36), transparent);
}

.bot-status span,
.status-pill,
.nav-badge,
.badge,
.active-dot,
.online-dot {
  box-shadow: 0 0 0 rgba(23, 230, 111, .36);
}

.market-chart-grid i,
.chart-bars i,
.level-bars i,
.cap-stack i {
  transform-origin: bottom center;
}

.plan-market-graphic,
.trade-chart-shell,
.roi-radar-card,
.live-market-board {
  position: relative;
  overflow: hidden;
}

.plan-market-graphic::after,
.trade-chart-shell::after,
.roi-radar-card::after,
.live-market-board::after {
  content: "";
  position: absolute;
  inset: -55%;
  pointer-events: none;
  background: conic-gradient(from 0deg, transparent, rgba(245, 196, 95, .18), transparent 28%);
  opacity: .45;
}

@media (prefers-reduced-motion: no-preference) {
  body::before,
  .app-body::before {
    animation: casinoLightSweep 10s linear infinite;
  }

  body::after,
  .app-body::after {
    animation: casinoSlowSpin 28s linear infinite;
  }

  .glass-card,
  .dashboard-card,
  .dash-panel,
  .app-body .metric,
  .stat-card,
  .plan-card,
  .package-card,
  .roi-card,
  .income-card,
  .transaction-card,
  .wallet-card,
  .support-card,
  .profile-card,
  .auth-card {
    animation: casinoPanelRise .58s ease both;
  }

  .glass-card::before,
  .dashboard-card::before,
  .dash-panel::before,
  .app-body .metric::before,
  .stat-card::before,
  .plan-card::before,
  .package-card::before,
  .roi-card::before,
  .income-card::before,
  .transaction-card::before,
  .wallet-card::before,
  .support-card::before,
  .profile-card::before,
  .table-responsive::before,
  .auth-card::before,
  .modal-content::before {
    animation: casinoPanelShine 6.5s ease-in-out infinite;
  }

  .sidebar::before {
    animation: casinoSidebarPulse 3.8s ease-in-out infinite;
  }

  .sidebar-logo,
  .app-body .sidebar-logo,
  .topbar-avatar span,
  .brand i,
  .brand .sidebar-logo {
    animation: casinoChipPulse 2.7s ease-in-out infinite;
  }

  .btn::after,
  button::after,
  .deposit-card::after,
  .manage-btn::after,
  .plan-actions a::after,
  .plan-actions button::after {
    animation: casinoButtonShine 4.2s ease-in-out infinite;
  }

  .bot-status span,
  .status-pill,
  .nav-badge,
  .badge,
  .active-dot,
  .online-dot {
    animation: casinoLivePulse 1.9s ease-in-out infinite;
  }

  .market-chart-grid i,
  .chart-bars i,
  .level-bars i,
  .cap-stack i {
    animation: casinoBarBounce 2.8s ease-in-out infinite;
  }

  .market-chart-grid i:nth-child(2n),
  .chart-bars i:nth-child(2n),
  .level-bars i:nth-child(2n),
  .cap-stack i:nth-child(2n) {
    animation-delay: .35s;
  }

  .market-chart-grid i:nth-child(3n),
  .chart-bars i:nth-child(3n),
  .level-bars i:nth-child(3n),
  .cap-stack i:nth-child(3n) {
    animation-delay: .7s;
  }

  .plan-market-graphic::after,
  .trade-chart-shell::after,
  .roi-radar-card::after,
  .live-market-board::after {
    animation: casinoSlowSpin 18s linear infinite;
  }

  .floating-chat,
  .meeting-float,
  .chatbot-toggle {
    animation: casinoFloat 3.4s ease-in-out infinite;
  }
}

@keyframes casinoLightSweep {
  0% { background-position: 0% 50%, 0 0, 0 0; }
  100% { background-position: 220% 50%, 130px 130px, -180px 180px; }
}

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

@keyframes casinoPanelRise {
  from { opacity: .72; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes casinoPanelShine {
  0%, 42% { background-position: -180% 0, 0 0; }
  72%, 100% { background-position: 180% 0, 0 0; }
}

@keyframes casinoSidebarPulse {
  0%, 100% { opacity: .35; }
  50% { opacity: .95; }
}

@keyframes casinoChipPulse {
  0%, 100% { transform: translateY(0) scale(1); filter: drop-shadow(0 0 0 rgba(245, 196, 95, 0)); }
  50% { transform: translateY(-1px) scale(1.04); filter: drop-shadow(0 0 12px rgba(245, 196, 95, .38)); }
}

@keyframes casinoButtonShine {
  0%, 45% { left: -80%; }
  70%, 100% { left: 135%; }
}

@keyframes casinoLivePulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(23, 230, 111, .34); }
  55% { box-shadow: 0 0 0 7px rgba(23, 230, 111, 0); }
}

@keyframes casinoBarBounce {
  0%, 100% { transform: scaleY(.88); filter: brightness(.92); }
  50% { transform: scaleY(1.08); filter: brightness(1.16); }
}

@keyframes casinoFloat {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-7px); }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
  }
}