:root {
  --radius: 0.25rem;
  --bg: #0c111d;
  --bg-deep: #080d18;
  --panel: #111827;
  --panel-2: #181f2f;
  --line: #252d41;
  --muted: #7b879d;
  --text: #e4e9f1;
  --blue: #0073ff;
  --cyan: #00c785;
  --gold: #ffb000;
  --green: #25b15f;
  --red: #e83d30;
  --shadow: 0 18px 52px rgba(0, 0, 0, 0.32);
  --font-body: "Inter", ui-sans-serif, system-ui, sans-serif;
  --font-display: "Inter", ui-sans-serif, system-ui, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  --trade-bg: #0c111d;
  --trade-panel: #111827;
  --trade-panel-soft: #181f2f;
  --trade-chart: #131722;
  --trade-chart-grid: rgba(42, 46, 57, 0.82);
  --trade-border: #252d41;
  --trade-muted: #7b879d;
  --trade-buy: #25b15f;
  --trade-sell: #e83d30;
  color-scheme: dark;
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  min-height: 100vh;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  line-height: 1.5;
}

button,
input,
select {
  font: inherit;
}

button {
  cursor: pointer;
}

.is-hidden {
  display: none !important;
}

.update-banner {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 999;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  padding: 0.6rem 1rem;
  background: var(--blue);
  color: #fff;
  font-size: 0.85rem;
  font-weight: 600;
  box-shadow: 0 0.25rem 0.75rem rgba(0, 0, 0, 0.25);
}

.update-banner button {
  border: 0;
  border-radius: 999px;
  padding: 0.3rem 0.9rem;
  background: #fff;
  color: var(--blue);
  font-weight: 700;
  font-size: 0.8rem;
  cursor: pointer;
}

.inner {
  width: min(76rem, calc(100% - 3rem));
  margin: 0 auto;
}

.home-shell {
  min-height: 100vh;
  background: var(--bg);
}

.home-header {
  position: sticky;
  top: 0;
  z-index: 20;
  border-bottom: 1px solid rgba(37, 45, 65, 0.9);
  background: rgba(17, 24, 39, 0.94);
  backdrop-filter: blur(18px);
}

.home-nav {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 1.5rem;
  min-height: 3.75rem;
}

.home-logo {
  display: grid;
  gap: 0.05rem;
  border: 0;
  background: transparent;
  color: var(--text);
  font-family: var(--font-display);
  text-align: left;
  text-transform: uppercase;
}

.home-logo span {
  color: #4d9cdb;
  font-size: 1.95rem;
  font-weight: 800;
  line-height: 0.9;
}

.home-logo small {
  color: white;
  font-size: 0.57rem;
  font-weight: 800;
  letter-spacing: 0.14em;
}

.home-nav nav {
  display: flex;
  justify-content: center;
  gap: clamp(1rem, 3vw, 2.5rem);
}

.home-nav a,
.footer-grid a {
  color: var(--muted);
  font-size: 0.86rem;
  font-weight: 800;
  text-decoration: none;
}

.home-nav a:hover,
.footer-grid a:hover {
  color: var(--blue);
}

.home-auth,
.hero-actions {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.home-menu-button {
  display: none;
  gap: 0.24rem;
  width: 2.75rem;
  height: 2.75rem;
  place-items: center;
  border: 1px solid rgba(37, 45, 65, 0.8);
  border-radius: var(--radius);
  background: rgba(24, 31, 47, 0.82);
  padding: 0.55rem;
}

.home-menu-button span {
  display: block;
  width: 1.15rem;
  height: 2px;
  border-radius: 999px;
  background: var(--text);
}

.mini-action {
  min-height: 2.35rem;
  border-radius: var(--radius);
  padding: 0.55rem 1.1rem;
  color: white;
  font-weight: 900;
}

.mini-action.primary {
  border: 0;
  background: var(--blue);
}

.mini-action.secondary {
  border: 1px solid var(--line);
  background: var(--panel);
}

.quote-strip {
  display: flex;
  gap: 2rem;
  overflow: auto;
  padding: 0.45rem max(1.5rem, calc((100vw - 76rem) / 2));
  border-top: 1px solid rgba(37, 45, 65, 0.65);
  background: var(--panel-2);
  color: var(--muted);
  font-size: 0.75rem;
  white-space: nowrap;
}

.quote-strip strong {
  color: var(--text);
  margin-left: 0.25rem;
}

.quote-strip em {
  color: var(--green);
  font-style: normal;
  font-weight: 900;
  margin-left: 0.25rem;
}

.quote-strip .down {
  color: var(--red);
}

.home-hero {
  position: relative;
  overflow: hidden;
  background:
    linear-gradient(135deg, rgba(12, 17, 29, 0.92), rgba(8, 13, 24, 0.98)),
    repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.03) 0 1px, transparent 1px 74px);
}

.home-hero::after {
  position: absolute;
  inset: auto -7rem -12rem auto;
  width: 35rem;
  height: 35rem;
  border: 1px solid rgba(0, 115, 255, 0.14);
  border-radius: 50%;
  content: "";
}

.hero-grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 2rem;
  align-items: center;
  min-height: 29rem;
  padding: 5rem 0;
}

.hero-copy h1 {
  max-width: 13ch;
  font-size: clamp(2.8rem, 5vw, 4.25rem);
  line-height: 1.04;
}

.hero-copy p:not(.eyebrow) {
  max-width: 45rem;
  color: var(--muted);
  font-size: 1.06rem;
  line-height: 1.65;
}

.stats-band,
.cta-band {
  background: var(--panel-2);
}

.stats-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1rem;
  padding: 2rem 0;
  text-align: center;
}

.stats-grid strong {
  display: block;
  color: var(--blue);
  font-family: var(--font-display);
  font-size: clamp(1.8rem, 3vw, 2.55rem);
}

.stats-grid span {
  color: var(--muted);
  font-weight: 800;
}

.home-section {
  padding: clamp(4rem, 8vw, 7rem) 0;
  background: var(--bg);
}

.home-section.alt {
  background: var(--panel);
}

.section-heading {
  max-width: 46rem;
  margin: 0 auto 3rem;
  text-align: center;
}

.section-heading h2,
.trust-grid-home h2,
.cta-band h2 {
  font-size: clamp(2rem, 4vw, 3.05rem);
}

.section-heading p:not(.eyebrow),
.trust-grid-home > div > p,
.cta-band p {
  color: var(--muted);
  line-height: 1.65;
}

.feature-grid,
.market-grid,
.testimonial-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.5rem;
}

.feature-grid article,
.market-grid article,
.testimonial-grid article,
.trust-card-grid article {
  border: 1px solid var(--line);
  border-top-color: var(--blue);
  border-radius: 0.5rem;
  background: linear-gradient(180deg, rgba(17, 24, 39, 0.96), rgba(12, 17, 29, 0.96));
  padding: 1.45rem;
}

.feature-grid h3,
.market-grid h3,
.trust-card-grid h3 {
  margin-top: 1.1rem;
  font-size: 1rem;
}

.feature-grid p,
.market-grid p,
.trust-card-grid p,
.testimonial-grid p {
  color: var(--muted);
  line-height: 1.55;
}

.market-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.market-grid article {
  min-height: 15rem;
}

.market-grid article > span {
  font-size: 1.7rem;
}

.market-grid strong {
  color: var(--blue);
}

.market-grid button {
  border: 0;
  background: transparent;
  color: var(--blue);
  padding: 0;
  font-weight: 900;
}

.trust-section {
  background: var(--bg);
}

.trust-grid-home {
  display: grid;
  grid-template-columns: minmax(0, 0.95fr) minmax(22rem, 1fr);
  gap: 4rem;
  align-items: center;
}

.home-checks {
  display: grid;
  gap: 0.7rem;
  margin: 1.5rem 0;
}

.home-checks span {
  color: var(--text);
  font-weight: 800;
}

.trust-card-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
}

.testimonial-grid strong {
  color: var(--gold);
  letter-spacing: 0.1em;
}

.testimonial-grid span {
  color: var(--muted);
  font-weight: 900;
}

.cta-band {
  padding: 4.5rem 0;
  text-align: center;
}

.hero-actions.centered {
  justify-content: center;
}

.home-footer {
  background: var(--bg);
}

.contact-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
  padding: 4rem 0;
  text-align: center;
}

.contact-grid div {
  display: grid;
  justify-items: center;
  gap: 0.45rem;
}

.contact-grid small {
  color: var(--muted);
}

.footer-grid {
  display: grid;
  grid-template-columns: minmax(16rem, 1.4fr) repeat(3, minmax(8rem, 1fr));
  gap: 2rem;
  padding: 3rem 0;
  border-top: 1px solid var(--line);
}

.footer-grid > div:not(.footer-logo) {
  display: grid;
  align-content: start;
  gap: 0.8rem;
}

.footer-grid h3 {
  font-size: 0.95rem;
}

.footer-logo p,
.risk-note {
  color: var(--muted);
  line-height: 1.6;
}

.risk-note {
  border-top: 1px solid var(--line);
  padding: 1.5rem 0 2rem;
  font-size: 0.78rem;
  text-align: center;
}

.login-shell {
  display: grid;
  min-height: 100vh;
  grid-template-columns: minmax(320px, 1fr) minmax(360px, 1fr);
}

.brand-panel {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  overflow: hidden;
  padding: clamp(2rem, 4vw, 3.5rem);
  background:
    linear-gradient(140deg, rgba(12, 17, 29, 0.96), rgba(8, 13, 24, 0.98)),
    repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.04) 0 1px, transparent 1px 72px);
}

.brand-panel::after {
  position: absolute;
  right: -7rem;
  bottom: -9rem;
  width: 26rem;
  height: 26rem;
  border: 1px solid rgba(0, 115, 255, 0.22);
  border-radius: 50%;
  content: "";
}

.register-brand {
  background:
    linear-gradient(140deg, rgba(12, 17, 29, 0.98), rgba(8, 13, 24, 0.99)),
    repeating-linear-gradient(90deg, rgba(0, 199, 133, 0.05) 0 1px, transparent 1px 72px);
}

.register-brand::after {
  border-color: rgba(0, 199, 133, 0.18);
}

.brand-mark {
  position: relative;
  z-index: 1;
  display: grid;
  gap: 0.1rem;
  width: max-content;
  font-family: var(--font-display);
  text-transform: uppercase;
}

.brand-mark span {
  color: #4d9cdb;
  font-size: clamp(2rem, 4vw, 3.2rem);
  font-weight: 800;
  line-height: 0.9;
}

.brand-mark small {
  color: white;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.16em;
}

.brand-mark.compact span {
  font-size: 1.75rem;
}

.brand-mark.compact small {
  color: var(--muted);
  letter-spacing: 0.08em;
}

.welcome-copy {
  position: relative;
  z-index: 1;
  max-width: 38rem;
}

.eyebrow {
  margin: 0 0 0.55rem;
  color: var(--blue);
  font-size: 0.74rem;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

h1,
h2,
h3 {
  margin: 0;
  font-family: var(--font-display);
  letter-spacing: 0;
}

h1 {
  max-width: 11ch;
  font-size: clamp(2.3rem, 5vw, 4.35rem);
  line-height: 1.04;
}

h1 strong {
  display: block;
  color: var(--cyan);
}

.welcome-copy p:last-child,
.signin-card p {
  color: var(--muted);
  font-size: 1.05rem;
  line-height: 1.65;
}

.trust-list {
  position: relative;
  z-index: 1;
  display: grid;
  gap: 1rem;
  margin: 2rem 0;
}

.trust-list div {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  font-weight: 800;
}

.benefit-list {
  position: relative;
  z-index: 1;
  display: grid;
  gap: 1rem;
  margin: 2rem 0;
  max-width: 45rem;
}

.benefit-list div {
  display: flex;
  align-items: flex-start;
  gap: 0.8rem;
  color: var(--text);
  font-weight: 800;
  line-height: 1.45;
}

.benefit-list span {
  display: grid;
  flex: 0 0 auto;
  width: 1.25rem;
  height: 1.25rem;
  place-items: center;
  border: 2px solid var(--cyan);
  border-radius: 50%;
  color: var(--cyan);
  font-size: 0.75rem;
  line-height: 1;
}

.icon {
  display: grid;
  width: 2rem;
  height: 2rem;
  place-items: center;
  border-radius: var(--radius);
  background: rgba(0, 115, 255, 0.18);
  color: var(--blue);
}

.copyright {
  color: var(--muted);
  font-size: 0.8rem;
}

.signin-panel {
  display: grid;
  place-items: center;
  padding: clamp(1.2rem, 5vw, 4rem);
  background: var(--bg);
}

.signin-card {
  display: grid;
  gap: 1.35rem;
  width: min(100%, 32rem);
}

.auth-form-logo {
  display: none;
  justify-self: center;
  margin-bottom: 0.5rem;
}

.signin-card h2 {
  font-size: 1.8rem;
}

label {
  display: grid;
  gap: 0.6rem;
  color: var(--text);
  font-weight: 800;
}

input,
select {
  width: 100%;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--panel-2);
  color: var(--text);
  outline: none;
  padding: 0.92rem 1rem;
}

input:focus,
select:focus {
  border-color: var(--blue);
  box-shadow: 0 0 0 3px rgba(0, 115, 255, 0.16);
}

.password-line {
  position: relative;
}

.ghost-icon {
  position: absolute;
  top: 50%;
  right: 0.7rem;
  border: 0;
  background: transparent;
  color: var(--muted);
  transform: translateY(-50%);
}

.password-line:has(.otp-send-button) {
  display: flex;
  align-items: stretch;
  gap: 0.5rem;
}

.password-line:has(.otp-send-button) input {
  flex: 1;
  min-width: 0;
}

.otp-send-button {
  position: static;
  flex-shrink: 0;
  border-radius: var(--radius);
  padding: 0 1.1rem;
  background: var(--blue);
  color: white;
  font-weight: 700;
  font-size: 0.85rem;
  white-space: nowrap;
  cursor: pointer;
  transform: none;
}

.otp-send-button:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

.otp-status {
  margin: -0.5rem 0 0;
  font-size: 0.8rem;
  color: var(--muted);
}

.otp-status.is-error {
  color: var(--red);
}

.otp-status.is-success {
  color: var(--green);
}

.primary-action,
.secondary-action,
.demo-action {
  min-height: 2.75rem;
  border: 0;
  border-radius: var(--radius);
  padding: 0.75rem 1.1rem;
  color: white;
  font-weight: 900;
}

.primary-action {
  background: var(--blue);
}

.primary-action:disabled {
  background: var(--panel-2);
  color: var(--muted);
  cursor: not-allowed;
}

.secondary-action {
  border: 1px solid var(--line);
  background: var(--panel-2);
}

.demo-action {
  border: 1px solid rgba(255, 176, 0, 0.6);
  background: rgba(255, 176, 0, 0.11);
  color: var(--gold);
}

.account-row {
  display: flex;
  justify-content: center;
  gap: 0.35rem;
  color: var(--muted);
}

.account-row button {
  border: 0;
  background: transparent;
  color: var(--blue);
  font-weight: 900;
}

.forgot-link {
  justify-self: end;
  margin-top: -0.75rem;
  border: 0;
  background: transparent;
  color: var(--blue);
  padding: 0;
  font-size: 0.76rem;
  font-weight: 800;
}

.demo-note {
  margin: -0.95rem 0 0;
  color: var(--muted);
  font-size: 0.72rem !important;
  line-height: 1.4 !important;
  text-align: center;
}

.legal-note {
  margin: -0.15rem 0 0;
  color: var(--muted);
  font-size: 0.83rem !important;
  line-height: 1.5 !important;
  text-align: center;
}

.legal-note button,
.back-link {
  border: 0;
  background: transparent;
  color: var(--muted);
}

.legal-note button {
  display: inline;
  padding: 0;
  color: #9bb3d0;
  text-decoration: underline;
  text-decoration-color: rgba(155, 179, 208, 0.4);
  text-underline-offset: 0.18rem;
}

.back-link {
  justify-self: center;
  padding: 0.15rem 0.35rem;
}

.back-link:hover,
.legal-note button:hover {
  color: var(--blue);
}

.field-optional {
  color: var(--muted);
  font-weight: 400;
  font-size: 0.85em;
}

.form-error {
  min-height: 1.25rem;
  margin: -0.35rem 0;
  color: var(--red) !important;
  font-size: 0.86rem !important;
  font-weight: 800;
  line-height: 1.35 !important;
}

.divider {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 0.9rem;
  color: var(--muted);
}

.divider::before,
.divider::after {
  height: 1px;
  background: var(--line);
  content: "";
}

.app-shell {
  display: flex;
  flex-direction: column;
  height: 100vh;
  min-height: 100vh;
  overflow: hidden;
  background: var(--bg);
}

.app-header {
  position: relative;
  z-index: 30;
  display: flex;
  flex: 0 0 3rem;
  align-items: center;
  justify-content: space-between;
  min-height: 3rem;
  padding: 0 1.25rem;
  border-bottom: 1px solid var(--line);
  background: var(--panel);
}

.app-logo {
  display: grid;
  gap: 0.05rem;
  min-width: 14rem;
  border: 0;
  background: transparent;
  color: var(--text);
  padding: 0;
  text-align: left;
  text-transform: uppercase;
}

.app-logo span {
  color: #4d9cdb;
  font-size: 1.9rem;
  font-weight: 900;
  letter-spacing: -0.01em;
  line-height: 0.86;
}

.app-logo small {
  color: var(--text);
  font-size: 0.56rem;
  font-weight: 900;
  letter-spacing: 0.24em;
  line-height: 1;
}

.app-market-bar {
  display: flex;
  align-items: center;
  gap: 1.6rem;
  min-width: 0;
}

.app-body {
  display: grid;
  flex: 1 1 auto;
  grid-template-columns: 14rem minmax(0, 1fr);
  min-height: 0;
  overflow: hidden;
  transition: grid-template-columns 0.2s ease;
}

.sidebar {
  display: flex;
  min-height: 0;
  flex-direction: column;
  padding: 1rem 0.5rem;
  border-right: 1px solid var(--line);
  background: var(--panel);
}

.sidebar-collapse-toggle {
  display: grid;
  width: 2rem;
  height: 2rem;
  margin: 0 0 0.75rem auto;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: var(--panel-2);
  color: var(--muted);
  place-items: center;
  cursor: pointer;
  transition: transform 0.2s ease, color 0.15s ease;
}

.sidebar-collapse-toggle:hover {
  color: var(--blue);
}

.sidebar-collapse-toggle svg {
  width: 0.85rem;
  height: 0.85rem;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 2.4;
}

.sidebar.is-collapsed .sidebar-collapse-toggle {
  margin: 0 auto 0.75rem;
  transform: rotate(180deg);
}

.app-body.is-sidebar-collapsed {
  grid-template-columns: 4.6rem minmax(0, 1fr);
}

.sidebar.is-collapsed .nav-label {
  display: none;
}

.sidebar.is-collapsed .nav-item {
  justify-content: center;
  gap: 0;
  padding: 0.45rem;
}

.dashboard-logo {
  display: none;
}

.nav-stack {
  display: grid;
  gap: 0.55rem;
  margin: 0;
}

.nav-item {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  width: 100%;
  min-height: 0.75rem;
  max-height: 2.75rem;
  border: 1px solid transparent;
  border-radius: 0.75rem;
  background: transparent;
  color: var(--muted);
  padding: 0.45rem 0.55rem;
  text-align: left;
  font-weight: 900;
}

.nav-item.is-active,
.nav-item:hover {
  border-color: rgba(0, 115, 255, 0.75);
  background: rgba(0, 115, 255, 0.18);
  color: var(--blue);
}

.nav-icon {
  position: relative;
  display: grid;
  width: 2.45rem;
  height: 2.45rem;
  flex: 0 0 2.45rem;
  place-items: center;
  border-radius: 999px;
  background: rgba(141, 163, 191, 0.12);
  color: var(--muted);
  font-size: 1.2rem;
}

.nav-badge {
  position: absolute;
  top: -0.15rem;
  right: -0.25rem;
  min-width: 1.05rem;
  height: 1.05rem;
  padding: 0 0.25rem;
  border-radius: 999px;
  background: var(--red);
  color: #fff;
  font-size: 0.6rem;
  font-weight: 700;
  line-height: 1.05rem;
  text-align: center;
  pointer-events: none;
}

.nav-badge[hidden] {
  display: none;
}

.process-chat-launcher .nav-badge {
  top: -0.3rem;
  right: -0.3rem;
}

.nav-icon svg {
  width: 1.1rem;
  height: 1.1rem;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 2;
}

.nav-item.is-active .nav-icon,
.nav-item:hover .nav-icon {
  background: rgba(0, 115, 255, 0.25);
  color: var(--blue);
}

.nav-item.trade-nav.is-active {
  border-color: rgba(0, 115, 255, 0.75);
  background: rgba(0, 115, 255, 0.18);
  color: var(--blue);
}

.nav-item.trade-nav.is-active .nav-icon {
  background: rgba(0, 115, 255, 0.25);
  color: var(--blue);
}

.desk-status {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  border: 1px solid var(--line);
  border-radius: 0.5rem;
  padding: 0.9rem;
  background: rgba(24, 31, 47, 0.72);
}

.desk-status small {
  display: block;
  color: var(--muted);
}

.pulse {
  width: 0.75rem;
  height: 0.75rem;
  border-radius: 50%;
  background: var(--green);
  box-shadow: 0 0 0 0 rgba(37, 177, 95, 0.55);
  animation: pulse 1.6s infinite;
}

@keyframes pulse {
  70% {
    box-shadow: 0 0 0 0.9rem rgba(37, 177, 95, 0);
  }
}

.workspace {
  min-width: 0;
  min-height: 0;
  overflow: auto;
  padding: 0;
}

.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1.35rem;
}

.client-topbar {
  min-height: 3rem;
  margin: 0;
  padding: 0 1.25rem;
  border-bottom: 1px solid var(--line);
  background: var(--panel);
}

.client-ticker,
.client-update,
.client-actions {
  display: flex;
  align-items: center;
  gap: 0.9rem;
}

.client-ticker {
  margin: 0;
}

.client-ticker strong,
.client-ticker span {
  color: var(--text);
  font-weight: 900;
}

.client-ticker em {
  color: var(--red);
  font-style: normal;
  font-weight: 900;
}

.client-ticker em.is-up {
  color: var(--green);
}

.client-update {
  color: var(--muted);
}

.client-update span {
  white-space: nowrap;
}

.compact-action {
  min-height: 1.9rem;
  padding: 0.25rem 0.75rem;
}

.wallet-button {
  min-height: 2rem;
  border: 1px solid var(--line);
  border-radius: 0.25rem;
  background: var(--panel-2);
  color: var(--text);
  padding: 0.35rem 0.8rem;
  font-weight: 900;
  white-space: nowrap;
}

.currency-select {
  min-height: 2rem;
  border: 1px solid var(--line);
  border-radius: 0.25rem;
  background: var(--panel-2);
  color: var(--text);
  padding: 0.35rem 0.6rem;
  font-weight: 900;
}

.visually-hidden {
  position: absolute;
  width: 1px !important;
  height: 1px !important;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.topbar h2 {
  font-size: clamp(1.7rem, 3vw, 2.8rem);
}

.topbar-actions {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.search-box {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  min-width: min(25rem, 42vw);
  border: 1px solid var(--line);
  border-radius: 0.5rem;
  background: var(--panel-2);
  padding-left: 0.9rem;
}

.search-box input {
  border: 0;
  background: transparent;
  box-shadow: none;
}

.icon-button,
.avatar-button {
  display: grid;
  width: 2.75rem;
  height: 2.75rem;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: 0.5rem;
  background: var(--panel-2);
  color: var(--text);
  font-weight: 900;
}

.avatar-button {
  background: linear-gradient(135deg, var(--blue), #003a80);
}

.view-section {
  display: none;
}

.view-section.is-active {
  display: block;
}

.client-dashboard {
  width: min(46rem, calc(100% - 2rem));
  margin: 0 auto;
  padding: 1.45rem 0 2rem;
}

.client-greeting {
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1.25rem;
}

.client-greeting h2 {
  font-size: 1.35rem;
}

.client-greeting h2 strong {
  color: var(--cyan);
}

.client-greeting p {
  margin: 0.25rem 0 0.45rem;
  color: var(--muted);
}

.uid-pill {
  display: inline-flex;
  gap: 0.55rem;
  align-items: center;
  border: 1px solid var(--line);
  border-radius: 0.25rem;
  background: var(--panel-2);
  color: var(--muted);
  padding: 0.35rem 0.7rem;
  font-size: 0.75rem;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.uid-pill strong {
  color: var(--text);
  letter-spacing: 0.12em;
}

.client-avatar {
  display: grid;
  width: 2.75rem;
  height: 2.75rem;
  place-items: center;
  border: 2px solid var(--blue);
  border-radius: 50%;
  background: rgba(0, 115, 255, 0.15);
  color: #4d9cdb;
  font-size: 1.3rem;
  font-weight: 900;
}

.balance-panel {
  border: 1px solid rgba(0, 115, 255, 0.55);
  border-radius: 0.75rem;
  background:
    radial-gradient(circle at 95% 0%, rgba(0, 115, 255, 0.14), transparent 18rem),
    var(--panel);
  padding: 1.4rem;
}

.balance-label,
.block-title {
  color: var(--muted);
  font-size: 0.8rem;
  font-weight: 900;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.balance-panel > strong {
  display: block;
  margin: 0.3rem 0 0.9rem;
  font-family: var(--font-display);
  font-size: 2.25rem;
}

.profit-strip {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  border: 1px solid rgba(37, 177, 95, 0.45);
  border-radius: 0.5rem;
  background: rgba(37, 177, 95, 0.12);
  color: var(--green);
  padding: 0.7rem 0.9rem;
  font-weight: 900;
}

.profit-strip.loss {
  border-color: rgba(232, 61, 48, 0.45);
  background: rgba(232, 61, 48, 0.13);
  color: var(--red);
}

.balance-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.65rem;
  margin-top: 0.8rem;
}

.balance-grid div {
  display: grid;
  gap: 0.25rem;
  border: 1px solid rgba(37, 45, 65, 0.8);
  border-radius: 0.5rem;
  background: rgba(24, 31, 47, 0.55);
  padding: 0.75rem;
}

.balance-grid span {
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.gold-text {
  color: var(--gold);
}

.dashboard-block {
  margin-top: 1.4rem;
}

.block-title {
  margin: 0 0 0.75rem;
  color: var(--muted);
}

.quick-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.75rem;
}

.quick-card {
  display: grid;
  justify-items: center;
  gap: 0.35rem;
  min-height: 8.5rem;
  border: 1px solid rgba(37, 45, 65, 0.9);
  border-radius: 0.75rem;
  background: var(--panel);
  color: var(--text);
  padding: 1.25rem;
  font-weight: 900;
}

.quick-card span {
  display: grid;
  width: 3rem;
  height: 3rem;
  place-items: center;
  border-radius: 0.75rem;
  font-size: 1.5rem;
}

.quick-card small {
  color: var(--muted);
}

.quick-card.deposit {
  border-color: rgba(37, 177, 95, 0.35);
  color: var(--green);
}

.quick-card.deposit span {
  background: rgba(37, 177, 95, 0.2);
}

.quick-card.withdraw {
  border-color: rgba(0, 115, 255, 0.35);
  color: var(--blue);
}

.quick-card.withdraw span {
  background: rgba(0, 115, 255, 0.2);
}

.quick-card.kyc {
  border-color: rgba(255, 176, 0, 0.35);
  color: var(--gold);
}

.quick-card.kyc span {
  background: rgba(255, 176, 0, 0.2);
}

.movers-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.8rem;
}

.mover-panel {
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 0.75rem;
  background: var(--panel);
}

.mover-panel header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.85rem 1rem;
  border-bottom: 1px solid var(--line);
}

.mover-panel header div {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  color: var(--green);
  text-transform: uppercase;
}

.mover-panel header small {
  color: var(--muted);
}

.mover-icon {
  display: grid;
  width: 1.55rem;
  height: 1.55rem;
  place-items: center;
  border-radius: var(--radius);
  background: rgba(37, 177, 95, 0.17);
}

.mover-icon.down {
  background: rgba(232, 61, 48, 0.17);
  color: var(--red);
}

.danger-text {
  color: var(--red);
}

.mover-list {
  display: grid;
  margin: 0;
  padding: 0;
  list-style: none;
}

.mover-list li {
  display: grid;
  grid-template-columns: 1.4rem 1fr auto;
  gap: 0.8rem;
  align-items: center;
  min-height: 3.25rem;
  padding: 0.65rem 1rem;
  border-bottom: 1px solid rgba(37, 45, 65, 0.55);
}

.mover-list li:last-child {
  border-bottom: 0;
}

.mover-list li > span,
.mover-list small {
  color: var(--muted);
  font-size: 0.72rem;
}

.mover-list strong {
  display: block;
}

.mover-list em {
  color: var(--text);
  font-style: normal;
  font-weight: 900;
  text-align: right;
}

.mover-list b {
  color: var(--green);
}

.loser-list b {
  color: var(--red);
}

.ready-panel {
  display: flex;
  gap: 1rem;
  margin-top: 1.25rem;
  border: 1px solid rgba(0, 115, 255, 0.45);
  border-radius: 0.75rem;
  background: rgba(0, 115, 255, 0.08);
  padding: 1.25rem;
}

.ready-icon {
  display: grid;
  flex: 0 0 auto;
  width: 2.7rem;
  height: 2.7rem;
  place-items: center;
  border-radius: 0.75rem;
  background: rgba(0, 115, 255, 0.2);
  color: var(--blue);
  font-size: 1.35rem;
}

.ready-panel h3,
.ready-panel p {
  margin: 0 0 0.4rem;
}

.ready-panel p {
  color: var(--muted);
}

.markets-page {
  min-height: calc(100vh - 3rem);
  padding: 1.1rem 1.35rem 2rem;
}

.markets-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1rem;
}

.markets-header h2 {
  font-size: 1.25rem;
}

.markets-header span {
  border-radius: 999px;
  background: rgba(141, 163, 191, 0.12);
  color: var(--muted);
  padding: 0.25rem 0.65rem;
  font-size: 0.78rem;
  font-weight: 900;
}

.market-search {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  border: 1px solid var(--line);
  border-radius: 0.5rem;
  background: var(--panel-2);
  padding: 0 0.9rem;
}

.market-search span {
  color: var(--muted);
}

.market-search input {
  min-height: 2.85rem;
  border: 0;
  background: transparent;
  box-shadow: none;
  padding: 0;
}

.market-filter-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 0.55rem;
  margin: 0.85rem 0 1.1rem;
}

.market-filter-tabs button {
  min-height: 2rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--panel-2);
  color: var(--muted);
  padding: 0.35rem 0.8rem;
  font-weight: 900;
}

.market-filter-tabs button.is-active {
  border-color: var(--blue);
  background: var(--blue);
  color: white;
}

.market-filter-tabs small {
  margin-left: 0.3rem;
  border-radius: 999px;
  background: rgba(0, 115, 255, 0.18);
  color: #4d9cdb;
  padding: 0.1rem 0.35rem;
}

.instrument-group {
  margin-top: 1.25rem;
}

.instrument-group.is-hidden-by-filter {
  display: none;
}

.instrument-group h3 {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  margin-bottom: 0.6rem;
  color: var(--blue);
  font-size: 0.95rem;
  text-transform: uppercase;
}

.instrument-group h3 span,
.instrument-group h3 small {
  border-radius: 999px;
  background: rgba(141, 163, 191, 0.13);
  color: var(--muted);
  padding: 0.15rem 0.5rem;
  font-family: var(--font-body);
  font-size: 0.68rem;
  text-transform: none;
}

.instrument-group h3 small {
  background: rgba(0, 115, 255, 0.16);
  color: var(--blue);
}

.instrument-table {
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 0.75rem;
  background: var(--panel);
}

.instrument-head,
.instrument-row {
  display: grid;
  grid-template-columns: minmax(16rem, 1fr) minmax(15rem, auto) 4.5rem;
  gap: 1rem;
  align-items: center;
}

.instrument-head {
  min-height: 2rem;
  padding: 0 1rem;
  color: var(--muted);
  font-size: 0.7rem;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.instrument-head span:last-child {
  grid-column: 2 / 4;
  text-align: right;
}

.instrument-row {
  min-height: 3.6rem;
  border-top: 1px solid rgba(37, 45, 65, 0.7);
  padding: 0.55rem 1rem;
}

.instrument-row.is-filtered-out {
  display: none;
}

.instrument-row strong {
  display: block;
}

.instrument-row small {
  color: var(--muted);
  font-size: 0.72rem;
}

.instrument-row em {
  color: var(--text);
  font-style: normal;
  font-weight: 900;
  text-align: right;
}

.instrument-row b {
  margin-left: 0.35rem;
  white-space: nowrap;
}

.instrument-row .up {
  color: var(--green);
}

.instrument-row .down {
  color: var(--red);
}

.instrument-row button {
  min-height: 2.15rem;
  border: 0;
  border-radius: var(--radius);
  background: var(--blue);
  color: white;
  font-size: 0.78rem;
  font-weight: 900;
}

.trade-terminal {
  --watch-width: 16rem;
  --ticket-width: 20rem;
  position: relative;
  display: grid;
  grid-template-columns: var(--watch-width) minmax(0, 1fr) var(--ticket-width);
  height: calc(100vh - 3rem);
  min-height: 40rem;
  overflow: hidden;
  background: var(--trade-bg);
}

.trade-terminal.is-resizing-panel {
  cursor: col-resize;
  user-select: none;
  transition: none;
}

.trade-terminal.is-resizing-panel .watch-panel,
.trade-terminal.is-resizing-panel .order-ticket {
  transition: none;
}

.watch-panel,
.order-ticket {
  min-width: 0;
  border-right: 1px solid var(--trade-border);
  background: var(--trade-panel);
}

@media (min-width: 1051px) {
  .trade-terminal {
    transition: grid-template-columns 0.28s ease;
  }

  .watch-panel,
  .order-ticket {
    /* opacity deliberately NOT transitioned (snaps instantly) - animating
       it over the same window as .trade-terminal's grid-template-columns
       shrink let the panel sit semi-transparent while also still
       partway-collapsed, so its text visibly double-exposed over the
       chart expanding into the same space underneath it (user-reported
       via screenshot, mid-transition). Instantly hiding the content while
       the grid track alone animates its width keeps the same smooth
       sliding motion without any transparency overlap to cause that. */
    transition: border-color 0.28s ease;
  }

  /* A collapsed side keeps a 1.3rem column for its edge button (see
     .panel-toggle), so the button sits beside the chart instead of on top of
     the chart's first/last 20px. */
  .trade-terminal.is-watch-collapsed {
    grid-template-columns: 1.3rem minmax(0, 1fr) 20rem;
  }

  .trade-terminal.is-watch-collapsed .watch-panel {
    padding: 0;
    border-right-width: 0;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
  }

  .trade-terminal.is-ticket-collapsed {
    grid-template-columns: 16rem minmax(0, 1fr) 1.3rem;
  }

  .trade-terminal.is-ticket-collapsed .order-ticket {
    opacity: 0;
    pointer-events: none;
  }

  .trade-terminal.is-watch-collapsed.is-ticket-collapsed {
    grid-template-columns: 1.3rem minmax(0, 1fr) 1.3rem;
  }

  /* Always full-height and flush against the chart, in both the expanded
     and collapsed states - a short, rounded, vertically-centered pill
     (the original styling) had nothing visually anchoring it to either
     panel, so it read as a stray box floating in a seam between them
     (user-flagged via screenshot) regardless of which state it was in.
     Full height + no rounding reads as a docked edge-divider instead,
     the same pattern file-explorer/email-client collapse handles use. */
  .panel-toggle {
    position: absolute;
    top: 0;
    z-index: 5;
    height: 100%;
    width: 1.3rem;
    border: 1px solid var(--trade-border);
    background: var(--trade-panel);
    color: var(--trade-muted);
    font-size: 0.9rem;
    line-height: 1;
    display: grid;
    place-items: center;
    cursor: pointer;
    transition: left 0.28s ease, right 0.28s ease, background 0.15s ease, color 0.15s ease;
  }

  .panel-toggle:hover {
    color: var(--text);
    background: var(--trade-panel-soft);
  }

  .panel-toggle-left {
    left: calc(var(--watch-width) - 1.3rem);
    border-width: 0 1px 0 0;
  }

  .panel-toggle-right {
    right: calc(var(--ticket-width) - 1.3rem);
    border-width: 0 0 0 1px;
  }

  .trade-terminal.is-watch-collapsed .panel-toggle-left {
    left: 0rem;
  }

  .trade-terminal.is-ticket-collapsed .panel-toggle-right {
    right: 0rem;
  }

  .panel-resize-handle {
    position: absolute;
    top: 0;
    bottom: 0;
    z-index: 6;
    width: 0.5rem;
    cursor: col-resize;
    background: transparent;
    touch-action: none;
  }

  .panel-resize-handle::after {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 50%;
    width: 2px;
    transform: translateX(-50%);
    background: transparent;
    content: "";
    transition: background 0.15s ease;
  }

  .panel-resize-handle:hover::after,
  .panel-resize-handle.is-active::after {
    background: var(--blue);
  }

  .panel-resize-handle-left {
    left: calc(var(--watch-width) - 0.25rem);
  }

  .panel-resize-handle-right {
    right: calc(var(--ticket-width) - 0.25rem);
  }

  .trade-terminal.is-watch-collapsed .panel-resize-handle-left,
  .trade-terminal.is-ticket-collapsed .panel-resize-handle-right {
    display: none;
  }
}

@media (max-width: 1050px) {
  .panel-toggle {
    display: none;
  }
}

.watch-panel {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  padding: 0.9rem 0.75rem;
}

.watch-panel h2 {
  margin-bottom: 0.6rem;
  font-size: 0.95rem;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.watch-search {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  border: 1px solid var(--trade-border);
  border-radius: 0.5rem;
  background: var(--trade-panel-soft);
  padding: 0 0.6rem;
}

.watch-search span {
  color: var(--trade-muted);
}

.watch-search input {
  min-height: 2.2rem;
  border: 0;
  background: transparent;
  box-shadow: none;
  padding: 0;
}

.watch-tabs {
  display: flex;
  gap: 0.25rem;
  overflow: auto;
  padding: 0.7rem 0;
  scrollbar-width: thin;
}

.watch-tabs button {
  border: 0;
  border-radius: var(--radius);
  background: transparent;
  color: var(--trade-muted);
  padding: 0.45rem 0.65rem;
  font-weight: 800;
}

.watch-tabs button:hover,
.watch-tabs button.is-active {
  background: var(--blue);
  color: white;
}

.watch-table {
  flex: 1;
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
  /* #toggleWatchPanel sits at the panel's exact right edge (see
     .panel-toggle-left), vertically centered on the whole trade terminal -
     wherever that lands, it was overlapping that row's Chg% text, since
     .watch-panel's own 0.75rem padding doesn't clear the toggle's 1.3rem
     width. This reserves enough extra space that it never does, at any
     panel width (the toggle's position is always "edge minus a constant",
     so a fixed clearance here covers every width). */
  padding-right: 0.75rem;
  border-top: 1px solid var(--trade-border);
  scrollbar-width: thin;
  scrollbar-color: rgba(120, 131, 151, 0.65) transparent;
}

.watch-head,
.watch-row {
  display: grid;
  grid-template-columns: 1fr 4.4rem 3.7rem;
  gap: 0.55rem;
  align-items: center;
}

.watch-head {
  min-height: 1.75rem;
  color: var(--trade-muted);
  font-size: 0.75rem;
  text-transform: uppercase;
}

.watch-row {
  width: 100%;
  min-height: 3rem;
  border: 0;
  border-bottom: 1px solid rgba(37, 45, 65, 0.65);
  background: transparent;
  color: var(--text);
  padding: 0.45rem 0;
  font-variant-numeric: tabular-nums;
  text-align: left;
}

.watch-row:hover {
  background: rgba(0, 115, 255, 0.12);
  margin-inline: -0.75rem;
  padding-inline: 0.75rem;
}

.watch-row.is-selected {
  border-left: 2px solid var(--blue);
  background: rgba(0, 115, 255, 0.22);
  margin-inline: -0.75rem;
  padding-inline: calc(0.75rem - 2px) 0.75rem;
}

.watch-row.is-filtered-out {
  display: none;
}

.watch-row.is-market-closed {
  opacity: 0.55;
}

.watch-closed-tag {
  display: inline-block !important;
  margin-left: 0.3rem;
  border-radius: 0.2rem;
  background: rgba(232, 61, 48, 0.18);
  color: var(--red);
  padding: 0 0.3rem;
  font-size: 0.6rem;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.02em;
}

.product-card.is-filtered-out {
  display: none;
}

.product-filter-tabs {
  padding: 0 0 0.5rem;
}

.watch-empty-state {
  border-top: 1px solid var(--trade-border);
  color: var(--trade-muted);
  padding: 1rem;
  font-size: 0.82rem;
  font-weight: 800;
}

.watch-row strong,
.watch-row small {
  display: block;
}

.watch-row small {
  color: var(--trade-muted);
  font-size: 0.68rem;
}

.watch-row em {
  color: var(--text);
  font-style: normal;
  font-weight: 900;
  overflow: hidden;
  text-align: right;
  text-overflow: ellipsis;
}

.watch-row b {
  font-size: 0.76rem;
  text-align: right;
}

.watch-row .up,
.watch-row b.up {
  color: var(--green);
}

.watch-row .down,
.watch-row b.down {
  color: var(--red);
}

.watch-count {
  display: inline-flex;
  width: fit-content;
  margin-top: 0.65rem;
  border: 1px solid var(--trade-border);
  color: var(--trade-muted);
  padding: 0.25rem 0.6rem;
  font-weight: 900;
}

.chart-terminal {
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
  border-right: 1px solid var(--trade-border);
  background: var(--trade-chart);
}

.chart-symbol-head {
  min-height: 4.25rem;
  padding: 0.8rem 1rem 0.55rem;
  background: var(--trade-chart);
}

.chart-symbol-head h2 {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.65rem;
  font-size: 1.05rem;
}

.chart-symbol-head h2 span {
  border-radius: 0.25rem;
  background: rgba(141, 163, 191, 0.16);
  color: var(--trade-muted);
  padding: 0.2rem 0.45rem;
  font-family: var(--font-body);
  font-size: 0.72rem;
}

.chart-symbol-head h2 em {
  margin-left: auto;
  color: var(--red);
  font-style: normal;
}

.chart-symbol-head p {
  display: flex;
  gap: 1rem;
  margin: 0.65rem 0 0;
  color: var(--trade-muted);
  font-variant-numeric: tabular-nums;
}

.chart-symbol-head b {
  color: var(--text);
}

.stream-status {
  width: 0.55rem !important;
  height: 0.55rem;
  padding: 0 !important;
  border-radius: 50%;
  background: var(--trade-muted) !important;
  transition: background-color 0.25s ease;
}

.stream-status.is-live {
  background: #25b15f !important;
  box-shadow: 0 0 0.4rem rgba(37, 177, 95, 0.7);
}

.stream-status.is-polling {
  background: #ffb000 !important;
  box-shadow: 0 0 0.4rem rgba(255, 176, 0, 0.55);
}

.stream-status.is-offline {
  background: #e83d30 !important;
}

.stream-status.is-closed {
  background: #6c85b3 !important;
  box-shadow: 0 0 0.4rem rgba(108, 133, 179, 0.55);
}

.trade-stats {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 1.2fr;
  border-top: 1px solid var(--trade-border);
  border-bottom: 1px solid var(--trade-border);
  background: var(--trade-chart);
}

/* Bid/Ask/Spread only make sense for the simulated chart - the timeframes
   row is its own sibling grid column so it can stay visible (and usable)
   even when that readout is hidden for the real TradingView chart. */
.trade-price-stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.trade-price-stats.is-hidden {
  display: none;
}

.trade-stats > .timeframes,
.trade-price-stats > div {
  display: grid;
  min-height: 2.8rem;
  place-items: center;
  border-right: 1px solid var(--trade-border);
  color: var(--trade-muted);
  font-size: 0.72rem;
  text-transform: uppercase;
}

.trade-stats strong,
.trade-price-stats strong {
  font-size: 0.9rem;
  font-variant-numeric: tabular-nums;
}

.timeframes {
  display: flex !important;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.35rem;
  row-gap: 0.3rem;
  padding: 0.3rem 0;
  border-right: 0 !important;
  text-transform: none !important;
}

/* .timeframes's own display:flex!important would otherwise beat the
   generic .is-hidden rule on source order (both !important, equal
   specificity) - hidden whenever TradingView (with its own native
   interval switcher) is showing instead of our custom one. */
.timeframes.is-hidden {
  display: none !important;
}

.timeframes button {
  border: 0;
  border-radius: var(--radius);
  background: transparent;
  color: var(--trade-muted);
  padding: 0.35rem 0.5rem;
  font-weight: 900;
}

.timeframes button.is-active {
  background: rgba(255, 176, 0, 0.18);
  color: var(--gold);
}

#tradeTimeframeSelect {
  /* Overrides the global input/select { width: 100% } rule, which was
     stretching this to fill the whole .timeframes row and pushing the
     calendar toggle onto its own line below instead of sitting inline. */
  width: auto;
  min-width: 5.5rem;
  max-width: 8rem;
  border: 1px solid var(--trade-border);
  border-radius: var(--radius);
  background: transparent;
  color: var(--text);
  padding: 0.35rem 0.5rem;
  font-weight: 900;
  font-size: 0.8rem;
}

.calendar-toggle {
  font-size: 0.85rem !important;
  line-height: 1;
}

.calendar-popover {
  position: absolute;
  top: 100%;
  right: 0.5rem;
  z-index: 10;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  min-width: 13.5rem;
  margin-top: 0.3rem;
  padding: 0.75rem;
  background: var(--trade-panel);
  border: 1px solid var(--trade-border);
  border-radius: var(--radius);
  box-shadow: 0 0.5rem 1.5rem rgba(0, 0, 0, 0.4);
}

.calendar-popover.is-hidden {
  display: none;
}

.calendar-popover label {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  color: var(--trade-muted);
  font-size: 0.68rem;
  text-transform: uppercase;
}

.calendar-popover input[type="date"] {
  padding: 0.35rem 0.5rem;
  background: var(--trade-chart);
  border: 1px solid var(--trade-border);
  border-radius: 0.3rem;
  color: var(--text);
  font-family: var(--font-body);
}

.calendar-error {
  margin: 0;
  color: var(--red);
  font-size: 0.68rem;
}

.calendar-error.is-hidden {
  display: none;
}

.calendar-popover-actions {
  display: flex;
  justify-content: flex-end;
  gap: 0.5rem;
}

.calendar-popover-actions button {
  border: 0;
  border-radius: var(--radius);
  padding: 0.35rem 0.7rem;
  background: transparent;
  color: var(--trade-muted);
  font-weight: 700;
  cursor: pointer;
}

.calendar-popover-actions button.calendar-apply {
  background: var(--gold);
  color: #0c1424;
}

.candlestick-chart {
  flex: 1;
  position: relative;
  height: auto;
  min-height: 24rem;
  margin: 0;
  overflow: hidden;
  border: 0;
  border-bottom: 1px solid var(--trade-border);
  background:
    linear-gradient(var(--trade-chart-grid) 1px, transparent 1px),
    linear-gradient(90deg, var(--trade-chart-grid) 1px, transparent 1px),
    var(--trade-chart);
  background-size: 100% 3.65rem, 5.6rem 100%;
}

.tv-widget-container {
  flex: 1;
  position: relative;
  height: auto;
  min-height: 24rem;
  margin: 0;
  overflow: hidden;
  border: 0;
  border-bottom: 1px solid var(--trade-border);
}

.tv-widget-inner {
  width: 100%;
  height: 100%;
}

.tv-widget-error {
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
  color: var(--muted);
  font-size: 0.85rem;
  font-weight: 700;
}

.tv-logo-mask {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 7.5rem;
  height: 5rem;
  background: #0e1626;
  z-index: 3;
}

.tv-widget-spinner {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  background: var(--trade-chart, #0b1120);
  z-index: 2;
}

.tv-spinner-ring {
  width: 2.4rem;
  height: 2.4rem;
  border-radius: 50%;
  border: 3px solid rgba(141, 163, 191, 0.2);
  border-top-color: var(--blue);
  animation: tv-spinner-spin 0.8s linear infinite;
}

@keyframes tv-spinner-spin {
  to {
    transform: rotate(360deg);
  }
}

.trade-candle-canvas {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  min-height: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  cursor: grab;
  touch-action: pan-y;
}

.trade-candle-canvas.is-panning {
  cursor: grabbing;
}

.chart-price-scale {
  position: absolute;
  top: 0.85rem;
  right: 0.45rem;
  bottom: 3.1rem;
  z-index: 3;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  color: var(--trade-muted);
  font-size: 0.68rem;
  font-variant-numeric: tabular-nums;
  cursor: ns-resize;
  touch-action: none;
}

.chart-price-scale.is-dragging {
  color: var(--gold);
}

.chart-price-scale span {
  padding-left: 0.4rem;
  background: rgba(19, 23, 34, 0.82);
}

.price-marker {
  position: absolute;
  top: 2.05rem;
  right: 0;
  z-index: 4;
  background: var(--gold);
  color: #0c1424;
  padding: 0.25rem 0.45rem;
  font-size: 0.72rem;
  font-weight: 900;
  font-variant-numeric: tabular-nums;
  transform: translateY(-50%);
  transition: top 0.12s linear;
}

.price-marker::before {
  position: absolute;
  right: 100%;
  top: 50%;
  width: 31rem;
  border-top: 1px dashed var(--gold);
  content: "";
}

.chart-note {
  position: absolute;
  top: 2.9rem;
  right: 0.8rem;
  color: var(--trade-muted);
  font-size: 0.68rem;
}

.chart-note strong {
  color: var(--gold);
}

.chart-zoom-controls {
  position: absolute;
  left: 0.7rem;
  top: 0.6rem;
  z-index: 4;
  display: flex;
  gap: 0.3rem;
}

.chart-zoom-controls button {
  width: 1.6rem;
  height: 1.6rem;
  border: 1px solid var(--trade-border);
  border-radius: 0.35rem;
  background: rgba(19, 23, 34, 0.85);
  color: var(--trade-muted);
  font-size: 0.85rem;
  line-height: 1;
  display: grid;
  place-items: center;
  cursor: pointer;
}

.chart-zoom-controls button:hover {
  color: var(--text);
  background: var(--trade-panel-soft);
}

.chart-zoom-controls button.is-active {
  background: rgba(255, 176, 0, 0.18);
  color: var(--gold);
  border-color: var(--gold);
}

.candle-layer {
  position: absolute;
  inset: 3.3rem 1.9rem 4.2rem 0.3rem;
}

.candle {
  position: absolute;
  left: calc((var(--x) - 1) * 3.55%);
  top: var(--top);
  width: 0.85rem;
  height: var(--h);
}

.candle::before {
  position: absolute;
  left: 50%;
  top: 0;
  width: 1px;
  height: 100%;
  transform: translateX(-50%);
  background: currentColor;
  content: "";
}

.candle::after {
  position: absolute;
  left: 0;
  top: var(--body-top);
  width: 100%;
  height: var(--body-h);
  background: currentColor;
  content: "";
}

.candle.green {
  color: var(--trade-buy);
}

.candle.red {
  color: var(--trade-sell);
}

.candle.last {
  width: 0.95rem;
  box-shadow: 0 0 12px rgba(37, 177, 95, 0.6);
}

.volume-bars {
  position: absolute;
  left: 0.3rem;
  right: 1.9rem;
  bottom: 1.7rem;
  display: grid;
  grid-template-columns: repeat(27, 1fr);
  align-items: end;
  gap: 0.45rem;
  height: 2.1rem;
}

.volume-bars span {
  display: block;
  background: rgba(37, 177, 95, 0.35);
}

.volume-bars span:nth-child(even) {
  background: rgba(232, 61, 48, 0.32);
}

.chart-times {
  position: absolute;
  right: 1.9rem;
  bottom: 0.55rem;
  left: 0.3rem;
  display: flex;
  justify-content: space-between;
  color: var(--trade-muted);
  font-size: 0.68rem;
  font-variant-numeric: tabular-nums;
}

.order-ticket {
  display: flex;
  min-height: calc(100vh - 3rem);
  flex-direction: column;
  border-right: 0;
  overflow-y: auto;
  /* Mirrors .watch-table's padding-right above: #toggleOrderTicket sits at
     this panel's exact left edge, vertically centered on the whole trade
     terminal, and was overlapping whatever control landed there (e.g. the
     Multiplier select) since the panel's own 0.75rem padding doesn't clear
     the toggle's 1.3rem width. */
  padding: 1rem 0.75rem 1rem 1.5rem;
  scrollbar-width: thin;
  scrollbar-color: rgba(120, 131, 151, 0.65) transparent;
}

.ticket-context {
  margin: 0 0 1rem;
  border: 1px solid rgba(0, 115, 255, 0.22);
  border-radius: 0.5rem;
  background: rgba(0, 115, 255, 0.08);
  color: var(--trade-muted);
  padding: 0.55rem 0.7rem;
  font-size: 0.76rem;
  font-weight: 800;
}

.order-ticket h2 {
  margin-bottom: 1.3rem;
  font-size: 1.25rem;
}

.ticket-funds-banner {
  /* display: flex; */
  /* flex-direction: column; */
  /* align-items: center; */
  /* gap: 0.25rem; */
  /* margin-bottom: 1rem; */
  border-radius: 0.75rem;
  background: linear-gradient(135deg, var(--blue), #0052cc);
  padding: 0.9rem 1rem;
  text-align: center;
}

.ticket-funds-banner span {
  color: rgba(255, 255, 255, 0.85);
  font-size: 1.2rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.ticket-funds-banner strong {
  color: #fff;
  font-family: var(--font-mono);
  font-size: 1.2rem;
  font-weight: 900;
}

.ticket-funds-banner strong span{
  color: #fff;
  font-family: var(--font-mono);
  font-size: 1.2rem;
  font-weight: 900;
}
.ticket-symbol-row {
  /* display: flex; */
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 1rem;
  padding: 0.3rem 0.3rem;
}

.ticket-symbol-row strong {
  font-size: 1rem;
  font-weight: 900;
}

.ticket-symbol-row span {
  color: var(--blue);
  font-family: var(--font-mono);
  font-size: 1.1rem;
  font-weight: 900;
}

.order-ticket label {
  color: var(--trade-muted);
  font-weight: 500;
}

.order-ticket label > button,
.order-ticket label > select,
.lots-control,
.ticket-summary {
  display: flex;
  justify-content: space-between;
  align-items: center;
  /* min-height: 3rem; */
  border: 0;
  border-radius: 0.5rem;
  background: var(--trade-panel-soft);
  color: var(--text);
  padding: 0.45rem 0.75rem;
  text-align: left;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
}

.order-ticket label > select {
  width: 100%;
  cursor: pointer;
  font-family: inherit;
  font-size: 1rem;
}

.risk-block {
  margin-bottom: 1rem;
}

.risk-toggle-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.5rem;
  color: var(--trade-muted);
  font-weight: 900;
}

.risk-toggle {
  border: 0;
  background: transparent;
  padding: 0;
  cursor: pointer;
}

.risk-toggle i {
  position: relative;
  display: block;
  width: 2.25rem;
  height: 1.25rem;
  border-radius: 999px;
  background: var(--trade-bg);
  transition: background 0.15s ease;
}

.risk-toggle i::after {
  position: absolute;
  top: 0.2rem;
  left: 0.2rem;
  width: 0.85rem;
  height: 0.85rem;
  border-radius: 50%;
  background: #273245;
  content: "";
  transition: transform 0.15s ease, background 0.15s ease;
}

.risk-toggle.is-on i {
  background: rgba(0, 115, 255, 0.35);
}

.risk-toggle.is-on i::after {
  background: var(--blue);
  transform: translateX(1rem);
}

.risk-stepper {
  opacity: 0.45;
}

.risk-stepper button {
  pointer-events: none;
}

.risk-stepper.is-enabled {
  opacity: 1;
}

.risk-stepper.is-enabled button {
  pointer-events: auto;
}

.lots-control button {
  border: 0;
  background: transparent;
  color: var(--trade-muted);
  font-size: 1.3rem;
  font-weight: 900;
}

.lots-control input {
  width: 4.5rem;
  border: 0;
  background: transparent;
  color: var(--text);
  font-family: inherit;
  font-size: 1rem;
  font-weight: 900;
  font-variant-numeric: tabular-nums;
  text-align: center;
}

.lots-control input::-webkit-outer-spin-button,
.lots-control input::-webkit-inner-spin-button {
  margin: 0;
  -webkit-appearance: none;
}

.lots-control input[type="number"] {
  -moz-appearance: textfield;
}

.lots-control {
  /* margin-top: 0.45rem; */
  font-family: var(--font-display);
}

.ticket-summary {
  display: grid;
  gap: 0.9rem;
  margin-top: 1.25rem;
  padding: 1rem;
}

.ticket-summary span {
  display: flex;
  justify-content: space-between;
  gap: 0.8rem;
  color: var(--trade-muted);
}

.ticket-summary strong {
  color: var(--text);
  font-variant-numeric: tabular-nums;
}

.trade-actions {
  position: sticky;
  bottom: -1rem;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.75rem;
  margin-top: auto;
  border-top: 1px solid var(--trade-border);
  background: var(--trade-panel);
  padding-top: 1rem;
}

.buy-button,
.sell-button {
  min-height: 2.9rem;
  border: 0;
  border-radius: 999px;
  color: white;
  font-size: 1rem;
  font-weight: 900;
}

.buy-button {
  background: var(--trade-buy);
}

.sell-button {
  background: var(--trade-sell);
}

.buy-button:disabled,
.sell-button:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.trade-terminal button:focus-visible,
.trade-terminal input:focus-visible {
  outline: 2px solid rgba(0, 115, 255, 0.72);
  outline-offset: 2px;
}

.client-ticker span,
.wallet-button,
.instrument-row em,
.watch-row em,
.watch-row b,
.trade-stats strong,
.price-marker,
.chart-times,
.lots-control,
.ticket-summary strong {
  font-family: var(--font-mono);
}

.metric-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1rem;
  margin-bottom: 1rem;
}

.metric-card,
.panel {
  border: 1px solid rgba(37, 45, 65, 0.9);
  border-radius: 0.5rem;
  background: linear-gradient(180deg, rgba(17, 24, 39, 0.98), rgba(12, 17, 29, 0.98));
  box-shadow: var(--shadow);
}

.metric-card {
  display: grid;
  gap: 0.35rem;
  padding: 1.1rem;
}

.metric-card span,
.metric-card small {
  color: var(--muted);
}

.metric-card strong {
  font-family: var(--font-display);
  font-size: clamp(1.4rem, 2vw, 2rem);
}

.positive {
  color: var(--green) !important;
}

.content-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.8fr) minmax(20rem, 0.7fr);
  gap: 1rem;
}

.panel {
  min-width: 0;
  padding: 1rem;
}

.panel-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1rem;
}

.panel-heading h3 {
  font-size: 1.05rem;
}

.metal-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
}

.metal-tabs button,
.room {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--panel-2);
  color: var(--muted);
  padding: 0.55rem 0.75rem;
  font-weight: 800;
}

.metal-tabs button.is-active,
.room.is-active {
  border-color: rgba(0, 115, 255, 0.55);
  background: rgba(0, 115, 255, 0.16);
  color: var(--text);
}

canvas {
  display: block;
  width: 100%;
  min-height: 18rem;
  border: 1px solid rgba(37, 45, 65, 0.75);
  border-radius: 0.5rem;
  background: var(--bg);
}

#wideChart {
  min-height: 25rem;
}

.ticker-row,
.book-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.75rem;
  margin-top: 0.85rem;
}

.ticker,
.book-card {
  border: 1px solid var(--line);
  border-radius: 0.4rem;
  background: rgba(20, 32, 51, 0.72);
  padding: 0.85rem;
}

.ticker span,
.book-card span {
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 800;
  text-transform: uppercase;
}

.ticker strong,
.book-card strong {
  display: block;
  margin-top: 0.2rem;
  font-family: var(--font-display);
}

.activity-feed,
.people-list,
.permission-list,
.settings-list {
  display: grid;
  gap: 0.75rem;
}

.activity-item,
.person-card,
.permission-list label,
.settings-list label {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  border: 1px solid var(--line);
  border-radius: 0.4rem;
  background: rgba(20, 32, 51, 0.58);
  padding: 0.85rem;
}

.activity-item div,
.person-card div {
  display: grid;
  gap: 0.1rem;
}

.activity-item small,
.person-card small {
  color: var(--muted);
}

.management-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(20rem, 0.8fr);
  gap: 1rem;
}

.user-management-page {
  width: min(68rem, calc(100% - 2rem));
  margin: 0 auto;
  padding: 1.45rem 0 2rem;
}

.user-management-head {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1rem;
}

.user-management-head span {
  color: var(--blue);
  font-size: 0.72rem;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.user-management-head h2 {
  margin-top: 0.25rem;
  font-size: 1.35rem;
}

.user-management-head p,
.managed-table-head p,
.managed-user-message {
  color: var(--muted);
}

.user-management-metrics {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.75rem;
  margin-bottom: 1rem;
}

.user-management-metrics article {
  border: 1px solid rgba(0, 115, 255, 0.32);
  border-radius: 0.5rem;
  background: linear-gradient(180deg, rgba(17, 24, 39, 0.98), rgba(9, 22, 42, 0.98));
  padding: 0.9rem;
}

.user-management-metrics span {
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 900;
  text-transform: uppercase;
}

.user-management-metrics strong {
  display: block;
  margin-top: 0.25rem;
  font-family: var(--font-display);
  font-size: 1.35rem;
  color: var(--blue);
}

.users-management-grid,
.products-grid,
.logs-grid {
  grid-template-columns: 1fr;
}

.request-detail-messages {
  flex: 1;
  min-height: 14rem;
  max-height: 24rem;
  overflow-y: auto;
}

.request-detail-actions {
  display: flex;
  gap: 0.4rem;
}

.request-detail-actions button {
  border: 0;
  border-radius: var(--radius);
  padding: 0.4rem 0.7rem;
  font-weight: 800;
  font-size: 0.75rem;
  cursor: pointer;
}

.request-detail-actions .approve-btn {
  background: var(--green);
  color: white;
}

.request-detail-actions .reject-btn {
  background: var(--red);
  color: white;
}

.request-detail-actions .resolve-btn {
  background: var(--panel-2);
  color: var(--text);
  border: 1px solid var(--line);
}

.managed-form-card h3,
.managed-table-head h3 {
  font-size: 1rem;
}

.managed-form-card label {
  display: grid;
  gap: 0.35rem;
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 900;
}

.managed-form-card input,
.managed-form-card select,
.managed-table-head input,
.managed-user-table input,
.managed-user-table select {
  width: 100%;
  border: 1px solid var(--line);
  border-radius: 0.35rem;
  background: var(--panel-2);
  color: var(--text);
  padding: 0.7rem 0.8rem;
  font-weight: 800;
}

.managed-form-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.65rem;
}

.managed-user-message {
  min-height: 1.2rem;
  font-size: 0.78rem;
  font-weight: 800;
}

.managed-user-message.is-success {
  color: var(--green);
}

.managed-user-message.is-error {
  color: var(--red);
}

.managed-table-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(12rem, 0.42fr);
  gap: 1rem;
  align-items: center;
  margin-bottom: 0.85rem;
}

.managed-user-table {
  min-width: 52rem;
}

.managed-user-table td {
  vertical-align: middle;
}

.managed-user-table strong {
  display: block;
}

.managed-user-table small {
  color: var(--muted);
}

.managed-user-table input {
  max-width: 8rem;
  font-family: var(--font-mono);
}

.managed-instrument-card {
  grid-column: 1 / -1;
}

.managed-instrument-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(21rem, 1fr));
  gap: 0.85rem;
  align-items: start;
}

.product-card {
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
  border: 1px solid var(--line);
  border-radius: 0.65rem;
  background: rgba(20, 32, 51, 0.62);
  padding: 0.95rem 1rem;
  transition: border-color 0.15s ease;
}

.product-card:hover {
  border-color: rgba(0, 115, 255, 0.35);
}

.product-card-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.75rem;
}

.product-card-identity {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}

.product-symbol {
  font-size: 1rem;
  font-weight: 900;
  letter-spacing: 0.02em;
}

.product-category-pill {
  display: inline-flex;
  width: fit-content;
  border-radius: 999px;
  padding: 0.15rem 0.55rem;
  font-size: 0.62rem;
  font-weight: 900;
  letter-spacing: 0.04em;
  background: rgba(141, 163, 191, 0.14);
  color: var(--muted);
}

.product-category-pill.cat-forex {
  background: rgba(0, 115, 255, 0.14);
  color: var(--blue);
}

.product-category-pill.cat-crypto {
  background: rgba(0, 199, 133, 0.14);
  color: var(--cyan);
}

.product-category-pill.cat-commodities {
  background: rgba(255, 176, 0, 0.14);
  color: var(--gold);
}

.product-category-pill.cat-stocks {
  background: rgba(37, 177, 95, 0.14);
  color: var(--green);
}

.product-card-name {
  margin: -0.2rem 0 0;
  color: var(--muted);
  font-size: 0.78rem;
}

.product-live-price {
  margin: 0;
  color: var(--text);
  font-size: 0.74rem;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}

.trade-toggle {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 0.2rem;
  cursor: pointer;
  flex: 0 0 auto;
}

.trade-toggle input {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
}

.trade-toggle-track {
  display: block;
  width: 2.1rem;
  height: 1.15rem;
  border-radius: 999px;
  background: rgba(141, 163, 191, 0.25);
  position: relative;
  transition: background 0.15s ease;
}

.trade-toggle-thumb {
  position: absolute;
  top: 0.15rem;
  left: 0.15rem;
  width: 0.85rem;
  height: 0.85rem;
  border-radius: 50%;
  background: var(--text);
  transition: transform 0.15s ease;
}

.trade-toggle input:checked + .trade-toggle-track {
  background: var(--green);
}

.trade-toggle input:checked + .trade-toggle-track .trade-toggle-thumb {
  transform: translateX(0.95rem);
  background: #fff;
}

.trade-toggle input:disabled + .trade-toggle-track {
  opacity: 0.5;
  cursor: not-allowed;
}

.trade-toggle-label {
  font-size: 0.62rem;
  font-weight: 900;
  color: var(--muted);
  letter-spacing: 0.03em;
}

.product-sim-section {
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
  margin-top: 0.2rem;
  padding-top: 0.6rem;
  border-top: 1px solid var(--line);
}

.product-sim-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
}

.product-sim-controls {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.sim-control-group {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  min-width: 0;
}

.sim-control-label {
  font-size: 0.62rem;
  font-weight: 900;
  color: var(--muted);
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

.sim-time-pair,
.sim-target-pair {
  display: flex;
  align-items: center;
  gap: 0.3rem;
}

.sim-time-pair .sim-time-input {
  flex: 1 1 0;
  width: auto;
}

.sim-target-pair .sim-target-input {
  flex: 1 1 auto;
  width: auto;
}

.sim-target-pair .sim-target-unit {
  flex: 0 0 auto;
  width: auto;
}

.product-sim-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}

.product-sim-actions button {
  flex: 1 1 auto;
  border: 1px solid var(--line);
  border-radius: 0.4rem;
  background: var(--panel-2);
  color: var(--text);
  padding: 0.4rem 0.6rem;
  font-size: 0.72rem;
  font-weight: 800;
  cursor: pointer;
}

.sim-error-message {
  margin: 0;
  font-size: 0.68rem;
  font-weight: 700;
  color: var(--red);
}

.sim-error-message:empty {
  display: none;
}

.sim-up-btn:hover {
  border-color: rgba(37, 177, 95, 0.5);
  color: var(--green);
}

.sim-down-btn:hover {
  border-color: rgba(232, 61, 48, 0.5);
  color: var(--red);
}

.sim-stop-btn {
  color: var(--muted);
}

.instrument-sim-badge.is-up {
  background: rgba(37, 177, 95, 0.14);
  color: var(--green);
}

.instrument-sim-badge.is-down {
  background: rgba(232, 61, 48, 0.14);
  color: var(--red);
}

.chart-symbol-head #tradeSimulationBadge {
  margin-left: 0.4rem;
  font-size: 0.7rem;
  vertical-align: middle;
}

.sim-time-input {
  border: 1px solid var(--line);
  border-radius: 0.35rem;
  background: var(--panel-2);
  color: var(--text);
  padding: 0.25rem 0.4rem;
  font-size: 0.68rem;
  font-weight: 700;
  cursor: pointer;
  min-width: 5.5rem;
  color-scheme: dark;
}

.sim-time-sep {
  font-size: 0.68rem;
  color: var(--muted);
}

.sim-target-input {
  border: 1px solid var(--line);
  border-radius: 0.35rem;
  background: var(--panel-2);
  color: var(--text);
  padding: 0.25rem 0.4rem;
  font-size: 0.68rem;
  font-weight: 700;
  width: 6rem;
}

.sim-target-unit {
  border: 1px solid var(--line);
  border-radius: 0.35rem;
  background: var(--panel-2);
  color: var(--text);
  padding: 0.25rem 0.3rem;
  font-size: 0.68rem;
  font-weight: 700;
  cursor: pointer;
  color-scheme: dark;
}

.instrument-schedule-badge {
  background: rgba(255, 191, 0, 0.14);
  color: var(--gold, #ffbf00);
}

.audit-log-list {
  display: flex;
  flex-direction: column;
  max-height: 34rem;
  overflow-y: auto;
}

.audit-log-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  padding: 0.7rem 1rem;
  border-bottom: 1px solid var(--line);
}

.audit-log-row:last-child {
  border-bottom: none;
}

.audit-log-row-main {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  min-width: 0;
}

.audit-log-desc {
  color: var(--text);
  font-size: 0.78rem;
  font-weight: 700;
}

.audit-log-badge {
  display: inline-flex;
  flex: 0 0 auto;
  border-radius: 999px;
  padding: 0.2rem 0.55rem;
  font-size: 0.6rem;
  font-weight: 900;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  background: rgba(141, 163, 191, 0.14);
  color: var(--muted);
}

.audit-log-badge.cat-order {
  background: rgba(0, 115, 255, 0.14);
  color: var(--blue);
}

.audit-log-badge.cat-chart {
  background: rgba(255, 176, 0, 0.14);
  color: var(--gold);
}

.audit-log-badge.cat-admin {
  background: rgba(232, 61, 48, 0.14);
  color: var(--red);
}

.audit-log-row-meta {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  flex: 0 0 auto;
  color: var(--muted);
  font-size: 0.7rem;
}

.audit-log-actor {
  font-weight: 800;
}

.managed-save-button {
  border: 1px solid rgba(0, 115, 255, 0.6);
  border-radius: 0.35rem;
  background: var(--blue);
  color: #fff;
  padding: 0.55rem 0.8rem;
  font-weight: 900;
}

.managed-user-hint {
  color: var(--muted);
  font-size: 0.74rem;
}

.balance-cell {
  min-width: 11rem;
}

.balance-cell strong {
  display: block;
  margin-bottom: 0.35rem;
  font-family: var(--font-mono);
}

.wallet-kyc-hint {
  color: var(--muted);
  font-size: 0.68rem;
}

.wallet-action-row {
  display: flex;
  gap: 0.3rem;
}

.wallet-amount-input {
  width: 5rem;
  border: 1px solid var(--line);
  border-radius: 0.3rem;
  background: var(--panel-2);
  color: var(--text);
  padding: 0.35rem 0.4rem;
  font-size: 0.72rem;
}

.wallet-deposit-btn,
.wallet-withdraw-btn {
  border: 0;
  border-radius: 0.3rem;
  padding: 0.35rem 0.5rem;
  font-size: 0.68rem;
  font-weight: 800;
  color: #fff;
  white-space: nowrap;
}

.wallet-deposit-btn {
  background: var(--green);
}

.wallet-withdraw-btn {
  background: var(--red);
}

.status-pill.is-pending {
  background: rgba(255, 176, 0, 0.13);
  color: var(--gold);
}

.status-pill.is-suspended,
.status-pill.is-rejected {
  background: rgba(232, 61, 48, 0.13);
  color: var(--red);
}

.compact-form,
.inline-form,
.chat-form {
  display: grid;
  gap: 0.65rem;
  margin-bottom: 1rem;
}

.inline-form {
  grid-template-columns: minmax(10rem, 1fr) minmax(12rem, 1fr) auto;
  margin: 0;
}

.table-wrap {
  overflow: auto;
}

table {
  width: 100%;
  min-width: 48rem;
  border-collapse: collapse;
}

th,
td {
  border-bottom: 1px solid var(--line);
  padding: 0.95rem;
  text-align: left;
}

th {
  color: var(--muted);
  font-size: 0.78rem;
  text-transform: uppercase;
}

.status-pill {
  display: inline-flex;
  border-radius: 999px;
  padding: 0.25rem 0.6rem;
  background: rgba(37, 177, 95, 0.12);
  color: var(--green);
  font-weight: 900;
}

.danger-button {
  border: 1px solid rgba(232, 61, 48, 0.35);
  border-radius: var(--radius);
  background: rgba(232, 61, 48, 0.12);
  color: var(--red);
  padding: 0.5rem 0.65rem;
  font-weight: 900;
}

.chat-panel {
  display: grid;
  grid-template-columns: 13rem 1fr;
  min-height: calc(100vh - 8rem);
  padding: 0;
  overflow: hidden;
}

.room-list {
  display: grid;
  align-content: start;
  gap: 0.5rem;
  border-right: 1px solid var(--line);
  padding: 1rem;
  background: rgba(5, 9, 20, 0.36);
}

.room {
  width: 100%;
  text-align: left;
}

.chat-room {
  display: grid;
  grid-template-rows: auto 1fr auto;
  min-height: 30rem;
  padding: 1rem;
}

.chat-messages {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  overflow: auto;
  padding: 0.25rem 0 1rem;
}

.message {
  max-width: min(34rem, 85%);
  border: 1px solid var(--line);
  border-radius: 0.5rem;
  background: rgba(20, 32, 51, 0.72);
  padding: 0.85rem;
}

.message.self {
  align-self: flex-end;
  border-color: rgba(0, 115, 255, 0.45);
  background: rgba(0, 115, 255, 0.16);
}

.message strong {
  display: block;
  margin-bottom: 0.25rem;
}

.message small {
  color: var(--muted);
}

.chat-form {
  grid-template-columns: 1fr auto;
  margin: 0;
}

input[type="checkbox"] {
  width: 1.1rem;
  height: 1.1rem;
  accent-color: var(--blue);
}

.client-page {
  width: min(100% - 2rem, 54rem);
  margin: 0 auto;
  padding: 1.5rem 0 5rem;
}

.client-page-header {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  margin-bottom: 1.15rem;
}

.client-page-header h2 {
  margin: 0;
  color: var(--text);
  font-family: var(--font-display);
  font-size: clamp(1.35rem, 2vw, 1.85rem);
  letter-spacing: 0;
}

.client-page-header p {
  margin: 0.15rem 0 0;
  color: var(--muted);
  font-size: 0.92rem;
}

.page-icon {
  display: grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  border: 1px solid rgba(0, 115, 255, 0.35);
  border-radius: 0.75rem;
  background: rgba(0, 115, 255, 0.12);
  color: var(--blue);
  font-size: 1.1rem;
  font-weight: 900;
}

.portal-stat-strip {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.75rem;
  margin-bottom: 1rem;
}

.copy-stat-strip {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  border-bottom: 1px solid var(--line);
  background: rgba(0, 115, 255, 0.05);
  margin-bottom: 0;
  padding: 0.75rem 1rem;
}

.portal-stat-strip div,
.portal-card {
  border: 1px solid var(--line);
  border-radius: 0.75rem;
  background: linear-gradient(180deg, rgba(19, 31, 50, 0.95), rgba(11, 18, 32, 0.95));
  box-shadow: 0 1.25rem 2.5rem rgba(0, 0, 0, 0.18);
}

.portal-stat-strip div {
  display: grid;
  gap: 0.3rem;
  min-height: 5rem;
  padding: 0.95rem;
}

.copy-stat-strip div {
  min-height: auto;
  justify-items: center;
  border: 0;
  background: transparent;
  box-shadow: none;
  padding: 0;
  text-align: center;
}

.sun-button {
  color: var(--gold);
}

.portal-stat-strip span,
.portal-card small,
.portal-card dt {
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 800;
}

.portal-stat-strip span {
  text-transform: uppercase;
}

.portal-stat-strip strong,
.portal-card dd {
  color: var(--text);
  font-family: var(--font-display);
}

.portal-card {
  padding: 1rem;
}

.portal-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1rem;
}

.portal-toolbar h3 {
  margin: 0;
  color: var(--text);
  font-family: var(--font-display);
  font-size: 1rem;
}

.portal-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}

.portal-tabs button,
.support-topics button {
  border: 1px solid var(--line);
  border-radius: 999px;
  background: rgba(20, 32, 51, 0.8);
  color: var(--muted);
  padding: 0.45rem 0.7rem;
  font-weight: 900;
}

.portal-tabs button.is-active,
.support-topics button:hover {
  border-color: rgba(0, 115, 255, 0.48);
  background: var(--blue);
  color: #fff;
}

.order-list,
.profile-info-list,
.service-list,
.support-messages {
  display: grid;
  gap: 0.65rem;
}

.order-row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) minmax(8rem, auto) minmax(7rem, auto) auto;
  align-items: center;
  gap: 0.85rem;
  border: 1px solid rgba(37, 45, 65, 0.75);
  border-radius: 0.65rem;
  background: rgba(15, 25, 41, 0.72);
  padding: 0.85rem;
}

.order-row strong,
.copy-card strong,
.profile-hero-card h3,
.service-list strong,
.support-card strong,
.support-message strong {
  color: var(--text);
  font-family: var(--font-display);
}

.order-row small {
  display: block;
  margin-top: 0.15rem;
  color: var(--muted);
}

.order-row em {
  color: var(--text);
  font-style: normal;
  text-align: right;
}

.order-row b {
  color: var(--text);
  font-family: var(--font-display);
  text-align: right;
}

.order-row i {
  border: 1px solid rgba(37, 177, 95, 0.25);
  border-radius: 999px;
  background: rgba(37, 177, 95, 0.1);
  color: var(--green);
  font-style: normal;
  padding: 0.25rem 0.55rem;
  font-size: 0.72rem;
  font-weight: 900;
}

.order-symbol {
  display: grid;
  place-items: center;
  width: 2.2rem;
  height: 2.2rem;
  border-radius: 0.55rem;
  color: #fff;
  font-weight: 1000;
}

.order-symbol.buy {
  background: rgba(37, 177, 95, 0.85);
}

.order-symbol.sell {
  background: rgba(232, 61, 48, 0.85);
}

.order-symbol.pending {
  background: rgba(255, 176, 0, 0.82);
}

.loss-row b {
  color: var(--red);
}

.win-row b {
  color: var(--green);
}

.empty-state {
  display: grid;
  place-items: center;
  min-height: 24rem;
  text-align: center;
  color: var(--muted);
}

.empty-state span {
  display: grid;
  place-items: center;
  width: 4rem;
  height: 4rem;
  margin-bottom: 0.8rem;
  border-radius: 1rem;
  background: rgba(0, 115, 255, 0.1);
  color: var(--blue);
  font-size: 2rem;
}

.empty-state h3 {
  margin: 0;
  color: var(--text);
  font-family: var(--font-display);
}

.empty-state p {
  max-width: 24rem;
  margin: 0.5rem 0 0;
}

.copy-grid,
.support-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.85rem;
}

.copy-card {
  display: grid;
  gap: 0.85rem;
  padding: 1rem;
  border: 1px solid var(--line);
  border-radius: 0.75rem;
  background: linear-gradient(180deg, rgba(19, 31, 50, 0.92), rgba(11, 18, 32, 0.92));
}

.trader-avatar {
  display: grid;
  place-items: center;
  width: 3rem;
  height: 3rem;
  border-radius: 999px;
  background: rgba(37, 177, 95, 0.16);
  color: var(--green);
  font-weight: 1000;
}

.trader-avatar.blue {
  background: rgba(0, 115, 255, 0.16);
  color: var(--blue);
}

.trader-avatar.gold {
  background: rgba(255, 176, 0, 0.16);
  color: var(--gold);
}

.copy-card dl {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.5rem;
  margin: 0;
}

.copy-card dt,
.copy-card dd {
  margin: 0;
}

.copy-card dd {
  margin-top: 0.15rem;
}

.profile-layout {
  display: grid;
  grid-template-columns: minmax(17rem, 0.8fr) minmax(0, 1.2fr);
  gap: 0.85rem;
}

.profile-hero-card {
  display: grid;
  place-items: center;
  align-content: center;
  min-height: 23rem;
  text-align: center;
}

.client-avatar.large {
  width: 5rem;
  height: 5rem;
  margin-bottom: 0.9rem;
  font-size: 1.8rem;
}

.profile-hero-card h3 {
  margin: 0;
}

.profile-hero-card p {
  margin: 0.25rem 0 0.8rem;
  color: var(--muted);
}

.verified-badge {
  margin-top: 0.7rem;
  border: 1px solid rgba(37, 177, 95, 0.35);
  border-radius: 999px;
  background: rgba(37, 177, 95, 0.1);
  color: var(--green);
  padding: 0.35rem 0.65rem;
  font-weight: 900;
}

.profile-info-list label {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  border-bottom: 1px solid rgba(37, 45, 65, 0.75);
  padding: 0.8rem 0;
}

.profile-info-list label:last-child {
  border-bottom: 0;
}

.profile-info-list span {
  color: var(--muted);
}

.account-wallet-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.account-wallet-card span,
.account-wallet-card small {
  display: block;
  color: var(--muted);
}

.account-wallet-card strong {
  display: block;
  margin: 0.25rem 0;
  color: var(--text);
  font-family: var(--font-display);
  font-size: 1.8rem;
}

.wallet-actions {
  display: flex;
  gap: 0.55rem;
}

.service-list button {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.75rem;
  width: 100%;
  border: 1px solid rgba(37, 45, 65, 0.75);
  border-radius: 0.65rem;
  background: rgba(15, 25, 41, 0.72);
  color: var(--text);
  padding: 0.85rem;
  text-align: left;
}

.service-list button > span,
.support-card > span {
  display: grid;
  place-items: center;
  width: 2.3rem;
  height: 2.3rem;
  border-radius: 0.65rem;
  background: rgba(0, 115, 255, 0.14);
  color: var(--blue);
  font-weight: 1000;
}

.service-list em {
  color: var(--green);
  font-style: normal;
  font-weight: 900;
}

.support-card {
  display: grid;
  gap: 0.5rem;
  min-height: 8rem;
}

.support-chat {
  margin-top: 0.85rem;
}

.support-messages {
  min-height: 18rem;
  align-content: start;
}

.support-message {
  max-width: min(31rem, 88%);
  border: 1px solid var(--line);
  border-radius: 0.75rem;
  background: rgba(15, 25, 41, 0.72);
  padding: 0.85rem;
}

.support-message.self {
  justify-self: end;
  border-color: rgba(0, 115, 255, 0.45);
  background: rgba(0, 115, 255, 0.15);
}

.support-message p {
  margin: 0.35rem 0;
  color: var(--text);
}

.support-topics {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: 1rem 0;
}

.support-input {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 0.65rem;
}

.orders-clone-page,
.account-clone-page {
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 0;
  overflow: hidden;
  background: var(--bg);
}

.orders-blue-head {
  flex: 0 0 auto;
  background: var(--blue);
  padding: 1rem 1.25rem 0.8rem;
}

.orders-blue-head h2 {
  margin: 0 0 0.8rem;
  color: #fff;
  font-family: var(--font-display);
  font-size: 1.25rem;
  font-weight: 1000;
}

.orders-tabs {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.25rem;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.25);
  padding: 0.25rem;
}

.orders-tabs button {
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: rgba(255, 255, 255, 0.75);
  padding: 0.6rem 0.8rem;
  font-size: 0.78rem;
  font-weight: 900;
}

.orders-tabs button.is-active {
  background: #fff;
  color: var(--blue);
}

.orders-subbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  border-bottom: 1px solid var(--line);
  background: var(--panel);
  padding: 0.55rem 1rem;
}

.orders-subbar p {
  margin: 0;
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 700;
}

.orders-subbar strong {
  color: var(--text);
}

.clone-history-list {
  flex: 1 1 auto;
  min-height: 0;
  overflow: auto;
  border-top: 0;
}

.orders-tab-panel {
  display: none;
}

.orders-tab-panel.is-active {
  display: block;
}

.history-row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 0.75rem;
  width: 100%;
  border-bottom: 1px solid rgba(37, 45, 65, 0.55);
  padding: 0.78rem 1rem;
  text-align: left;
}

.history-row > span {
  display: grid;
  place-items: center;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 0.75rem;
  font-weight: 1000;
}

.history-row.sell > span {
  background: rgba(232, 61, 48, 0.14);
  color: #f87171;
}

.history-row.buy > span {
  background: rgba(37, 177, 95, 0.14);
  color: #34d399;
}

.history-row strong {
  display: block;
  color: var(--text);
  font-family: var(--font-display);
  font-size: 0.86rem;
}

.history-row small {
  display: block;
  color: var(--muted);
  font-size: 0.68rem;
  line-height: 1.45;
}

.history-row small b {
  border-radius: 0.25rem;
  margin-right: 0.35rem;
  padding: 0.1rem 0.35rem;
  font-size: 0.63rem;
}

.history-row.buy small b {
  background: rgba(37, 177, 95, 0.14);
  color: #34d399;
}

.history-row.sell small b {
  background: rgba(232, 61, 48, 0.14);
  color: #f87171;
}

.history-row em {
  display: grid;
  justify-items: end;
  font-style: normal;
}

.history-row em strong {
  font-size: 0.86rem;
}

.history-row em strong.positive {
  color: var(--green);
}

.history-row em strong.danger-text {
  color: var(--red);
}

.history-row em i {
  color: var(--muted);
  font-style: normal;
  font-size: 0.68rem;
}

.history-row button,
.load-more {
  border: 0;
  background: transparent;
  color: var(--muted);
  font-weight: 900;
}

.close-position-btn {
  border: 1px solid rgba(232, 61, 48, 0.5) !important;
  border-radius: 0.35rem;
  background: rgba(232, 61, 48, 0.12) !important;
  color: #f87171 !important;
  padding: 0.4rem 0.7rem;
  font-size: 0.72rem;
}

.close-position-btn:disabled {
  opacity: 0.6;
}

.load-more {
  display: block;
  margin: 0.8rem auto;
  padding: 0.5rem 0.8rem;
}

.orders-empty-state {
  display: grid;
  place-items: center;
  align-content: center;
  min-height: 20rem;
  gap: 0.45rem;
  color: var(--muted);
  text-align: center;
}

.orders-empty-state span {
  display: grid;
  place-items: center;
  width: 3rem;
  height: 3rem;
  border-radius: 999px;
  background: rgba(25, 35, 54, 0.9);
  color: var(--muted);
  font-size: 1.4rem;
}

.orders-empty-state strong {
  color: var(--text);
  font-size: 0.9rem;
}

.orders-empty-state small {
  color: var(--muted);
  font-size: 0.72rem;
}

.copy-empty-panel {
  border-top: 1px solid var(--line);
  padding: 1rem;
}

.copy-empty-panel h3 {
  margin: 0;
  color: var(--muted);
  font-size: 0.76rem;
  font-weight: 1000;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.account-clone-page {
  overflow: auto;
}

.account-titlebar {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  border-bottom: 1px solid var(--line);
  background: var(--panel);
  padding: 1rem;
  color: var(--text);
  font-size: 0.75rem;
  font-weight: 1000;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.account-stack {
  display: grid;
  gap: 1rem;
  width: min(100% - 2rem, 46rem);
  margin: 0 auto;
  padding: 1rem 0 5rem;
}

.clone-card {
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 0.5rem;
  background: var(--panel);
}

.clone-card > h3 {
  margin: 0;
  border-bottom: 1px solid var(--line);
  background: rgba(25, 35, 54, 0.8);
  color: var(--text);
  padding: 0.8rem 1rem;
  font-size: 0.76rem;
  font-weight: 1000;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.clone-list {
  display: grid;
}

.clone-info-row,
.transaction-row,
.invited-friend-row,
.clone-service-list button {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.75rem;
  border-bottom: 1px solid var(--line);
  padding: 0.8rem 1rem;
}

.clone-info-row:last-child,
.clone-service-list button:last-child {
  border-bottom: 0;
}

.clone-info-row > span,
.clone-service-list button > span,
.invited-friend-row > span,
.transaction-row > span {
  display: grid;
  place-items: center;
  width: 1.8rem;
  height: 1.8rem;
  border-radius: 0.55rem;
  color: var(--muted);
  font-weight: 900;
}

.clone-info-row small,
.clone-service-list small,
.invited-friend-row small,
.transaction-row small,
.account-balance-row small {
  display: block;
  color: var(--muted);
  font-size: 0.64rem;
  font-weight: 800;
}

.clone-info-row strong,
.clone-service-list strong,
.invited-friend-row strong,
.transaction-row strong {
  display: block;
  color: var(--text);
  font-size: 0.78rem;
  font-weight: 900;
}

.clone-info-row strong em {
  color: var(--muted);
  font-style: italic;
  font-weight: 700;
}

.clone-info-row button {
  border: 0;
  background: transparent;
  color: var(--muted);
}

.account-balance-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1rem;
}

.account-balance-row strong {
  display: block;
  color: var(--text);
  font-family: var(--font-display);
  font-size: 1.55rem;
}

.deposit-btn,
.withdraw-btn {
  border-radius: 0.4rem;
  padding: 0.65rem 0.8rem;
  font-size: 0.76rem;
  font-weight: 1000;
}

.deposit-btn {
  border: 0;
  background: var(--green);
  color: #fff;
}

.withdraw-btn {
  border: 1px solid var(--line);
  background: transparent;
  color: var(--text);
}

.transaction-row {
  border-bottom: 0;
}

.transaction-row > span {
  background: rgba(37, 177, 95, 0.14);
  color: #34d399;
}

.transaction-row em {
  display: grid;
  justify-items: end;
  color: #34d399;
  font-style: normal;
  font-size: 0.76rem;
  font-weight: 1000;
}

.transaction-row.is-debit > span {
  background: rgba(232, 61, 48, 0.14);
  color: var(--red);
}

.transaction-row.is-debit em {
  color: var(--red);
}

.transaction-empty-state {
  padding: 1rem;
  color: var(--muted);
  font-size: 0.8rem;
  text-align: center;
}

.referral-summary-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr)) auto;
  align-items: center;
  gap: 0.75rem;
  border-bottom: 1px solid var(--line);
  padding: 0.85rem 1rem;
}

.referral-summary-row small {
  display: block;
  color: var(--muted);
  font-size: 0.64rem;
  font-weight: 800;
}

.referral-summary-row strong {
  display: block;
  color: var(--text);
  font-family: var(--font-display);
  font-size: 0.92rem;
}

.referral-summary-row button {
  border: 1px solid rgba(0, 115, 255, 0.45);
  border-radius: 0.45rem;
  background: rgba(0, 115, 255, 0.14);
  color: var(--blue);
  padding: 0.55rem 0.7rem;
  font-size: 0.72rem;
  font-weight: 1000;
}

.invited-modal-trigger {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.75rem;
  width: 100%;
  border: 0;
  background: transparent;
  color: var(--text);
  padding: 0.85rem 1rem;
  text-align: left;
}

.invited-modal-trigger > span {
  display: grid;
  place-items: center;
  width: 1.8rem;
  height: 1.8rem;
  border-radius: 0.55rem;
  background: rgba(0, 115, 255, 0.14);
  color: var(--blue);
  font-weight: 900;
}

.invited-modal-trigger strong,
.invited-modal-trigger small {
  display: block;
}

.invited-modal-trigger small {
  margin-top: 0.15rem;
  color: var(--muted);
  font-size: 0.64rem;
  font-weight: 800;
}

.invited-modal-trigger i {
  color: var(--muted);
  font-style: normal;
}

.modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: 110;
  display: grid;
  place-items: center;
  background: rgba(5, 10, 20, 0.72);
  padding: 1rem;
}

.modal-backdrop.is-hidden {
  display: none;
}

.friends-modal {
  display: flex;
  flex-direction: column;
  width: min(34rem, 100%);
  max-height: min(40rem, calc(100vh - 2rem));
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 0.75rem;
  background: var(--panel);
  box-shadow: 0 1.5rem 4rem rgba(0, 0, 0, 0.45);
}

.friends-modal header,
.friends-modal footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  border-bottom: 1px solid var(--line);
  background: rgba(25, 35, 54, 0.88);
  padding: 0.9rem 1rem;
}

.friends-modal header h3 {
  margin: 0;
  color: var(--text);
  font-family: var(--font-display);
  font-size: 1rem;
}

.friends-modal header p {
  margin: 0.2rem 0 0;
  color: var(--muted);
  font-size: 0.7rem;
  font-weight: 800;
}

.friends-modal header button {
  display: grid;
  place-items: center;
  width: 2rem;
  height: 2rem;
  border: 1px solid var(--line);
  border-radius: 0.5rem;
  background: transparent;
  color: var(--text);
  font-size: 1.1rem;
}

.friends-modal .invited-friends-list {
  overflow-y: auto;
}

.friends-modal footer {
  border-top: 1px solid var(--line);
  border-bottom: 0;
}

.friends-modal footer button {
  border: 1px solid rgba(0, 115, 255, 0.35);
  border-radius: 0.45rem;
  background: rgba(0, 115, 255, 0.14);
  color: var(--blue);
  padding: 0.55rem 0.75rem;
  font-size: 0.72rem;
  font-weight: 1000;
}

.friends-modal footer button:disabled {
  opacity: 0.45;
}

.friends-modal footer span {
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 900;
}

.invited-friends-list .invited-friend-row:last-child {
  border-bottom: 0;
}

.invited-friend-row > span {
  background: rgba(0, 115, 255, 0.14);
  color: var(--blue);
}

.invited-friend-row em {
  color: var(--muted);
  font-size: 0.72rem;
  font-style: normal;
  font-weight: 1000;
}

.invited-friend-row em.positive {
  color: var(--green);
}

.clone-service-list button {
  width: 100%;
  border-inline: 0;
  border-top: 0;
  background: transparent;
  color: var(--text);
  text-align: left;
}

.clone-service-list button > span.green {
  color: var(--green);
}

.clone-service-list button > span.purple {
  color: #995cd6;
}

.clone-service-list b {
  border-radius: 999px;
  margin-left: 0.25rem;
  color: var(--green);
  font-size: 0.56rem;
}

/* ---------- Profile modal ("My Account") ---------- */

.profile-modal {
  position: relative;
  display: flex;
  width: min(64rem, 100%);
  height: min(38rem, calc(100vh - 2rem));
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 0.75rem;
  background: var(--panel);
  box-shadow: 0 1.5rem 4rem rgba(0, 0, 0, 0.45);
}

.profile-modal-x,
.user-detail-modal .profile-modal-x {
  position: absolute;
  top: 0.75rem;
  right: 0.9rem;
  z-index: 5;
  border: 0;
  background: transparent;
  color: var(--muted);
  font-size: 1.1rem;
  cursor: pointer;
}

.profile-modal-side {
  display: flex;
  flex-direction: column;
  width: 15rem;
  flex-shrink: 0;
  overflow-y: auto;
  border-right: 1px solid var(--line);
  background: var(--panel-2);
  padding: 1.4rem 0.85rem;
}

.profile-modal-user {
  margin-bottom: 0.9rem;
  text-align: center;
}

.profile-modal-avatar {
  display: grid;
  place-items: center;
  width: 3.4rem;
  height: 3.4rem;
  margin: 0 auto 0.5rem;
  border-radius: 50%;
  background: var(--blue);
  color: #fff;
  font-family: var(--font-display);
  font-size: 1.35rem;
  font-weight: 900;
}

.profile-modal-name {
  display: block;
  color: var(--text);
  font-size: 0.86rem;
}

.profile-modal-email {
  overflow: hidden;
  color: var(--muted);
  font-size: 0.7rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.profile-modal-uid {
  margin: 0.2rem 0 0.6rem;
  color: var(--muted);
  font-size: 0.68rem;
}

.profile-modal-kyc-badge {
  display: inline-flex;
}

.profile-modal-menu {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  flex: 1;
  overflow-y: auto;
}

.profile-modal-menu button {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  border: 0;
  border-radius: 0.5rem;
  background: transparent;
  color: var(--muted);
  padding: 0.6rem 0.7rem;
  font-size: 0.78rem;
  font-weight: 800;
  text-align: left;
  cursor: pointer;
}

.profile-modal-menu button:hover {
  background: var(--line);
  color: var(--text);
}

.profile-modal-menu button.is-active {
  background: rgba(0, 115, 255, 0.16);
  color: var(--blue);
}

.profile-modal-logout {
  margin-top: 0.4rem;
  border-top: 1px solid var(--line);
  padding-top: 0.75rem !important;
  color: var(--red) !important;
}

.profile-modal-content {
  flex: 1;
  overflow-y: auto;
  padding: 1.5rem 1.6rem;
}

/* Back bar for the phone layout only (see the max-width: 680px rules). */
.profile-mobile-bar {
  display: none;
}

.profile-pane {
  display: none;
}

.profile-pane.is-active {
  display: block;
}

.profile-pane h3 {
  margin: 0 0 0.4rem;
  color: var(--text);
  font-size: 1.05rem;
}

.profile-pane-hint {
  margin: 0 0 1rem;
  color: var(--muted);
  font-size: 0.8rem;
  line-height: 1.5;
}

.profile-form label {
  display: grid;
  gap: 0.35rem;
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 900;
}

.profile-form input,
.profile-form select {
  width: 100%;
  border: 1px solid var(--line);
  border-radius: 0.35rem;
  background: var(--panel-2);
  color: var(--text);
  padding: 0.65rem 0.75rem;
  font-weight: 800;
}

.document-type-options {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.6rem;
  margin-bottom: 0.4rem;
}

.document-option {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.35rem;
  border: 1px solid var(--line);
  border-radius: 0.5rem;
  background: var(--panel-2);
  padding: 0.7rem 0.4rem;
  color: var(--muted);
  font-size: 0.68rem;
  font-weight: 800;
  text-align: center;
  cursor: pointer;
}

.document-option input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.document-option:has(input:checked) {
  border-color: var(--blue);
  background: rgba(0, 115, 255, 0.14);
  color: var(--blue);
}

.profile-empty-state {
  display: grid;
  place-items: center;
  gap: 0.4rem;
  padding: 3rem 0;
  text-align: center;
}

.profile-empty-state span {
  font-size: 2.2rem;
}

.profile-empty-state strong {
  color: var(--text);
  font-size: 0.9rem;
}

.profile-empty-state small {
  color: var(--muted);
  font-size: 0.76rem;
}

.faq-item {
  display: grid;
  gap: 0.3rem;
  border-bottom: 1px solid var(--line);
  padding: 0.9rem 0;
}

.faq-item:last-child {
  border-bottom: 0;
}

.faq-item strong {
  color: var(--text);
  font-size: 0.82rem;
}

.faq-item small {
  color: var(--muted);
  font-size: 0.76rem;
  line-height: 1.5;
}

.kyc-submission-card {
  display: grid;
  gap: 0.5rem;
  border: 1px solid var(--line);
  border-radius: 0.5rem;
  background: var(--panel-2);
  padding: 0.9rem;
  margin-bottom: 1rem;
  font-size: 0.78rem;
}

.kyc-submission-card img {
  max-width: 100%;
  max-height: 12rem;
  border-radius: 0.4rem;
  object-fit: contain;
}

.kyc-submission-card dl {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.3rem 0.75rem;
  margin: 0;
}

.kyc-submission-card dt {
  color: var(--muted);
  font-weight: 800;
}

.kyc-submission-card dd {
  margin: 0;
  color: var(--text);
  font-weight: 700;
}

/* ---------- Order confirm modal ---------- */

.order-confirm-modal {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
  width: min(24rem, 100%);
  border: 1px solid var(--trade-border);
  border-radius: 0.75rem;
  background: var(--trade-panel);
  padding: 1.5rem 1.25rem 1.25rem;
  box-shadow: 0 1.5rem 4rem rgba(0, 0, 0, 0.45);
}

.order-confirm-modal h3 {
  margin: 0;
  color: var(--text);
  font-size: 1.05rem;
}

.order-confirm-price-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  border-radius: 0.5rem;
  background: var(--trade-panel-soft);
  padding: 0.75rem 0.9rem;
}

.order-confirm-price-row span {
  color: var(--trade-muted);
  font-weight: 800;
}

.order-confirm-price-row strong {
  font-family: var(--font-mono);
  font-size: 1.25rem;
  font-weight: 900;
  transition: color 0.15s ease;
}

.order-confirm-price-row strong.tick-up {
  color: var(--green);
}

.order-confirm-price-row strong.tick-down {
  color: var(--red);
}

.order-confirm-summary {
  margin-top: 0;
}

.order-confirm-summary span[hidden] {
  display: none;
}

.order-confirm-modal .trade-actions {
  position: static;
  border-top: 0;
  background: transparent;
  padding-top: 0;
}

#orderConfirmCancel {
  min-height: 2.9rem;
  border: 1px solid var(--trade-border);
  border-radius: 999px;
  background: transparent;
  color: var(--text);
  font-size: 1rem;
  font-weight: 900;
}

/* ---------- Admin user-detail modal ---------- */

.user-detail-modal {
  position: relative;
  display: flex;
  flex-direction: column;
  width: min(46rem, 100%);
  max-height: min(38rem, calc(100vh - 2rem));
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 0.75rem;
  background: var(--panel);
  box-shadow: 0 1.5rem 4rem rgba(0, 0, 0, 0.45);
}

.user-detail-head {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  border-bottom: 1px solid var(--line);
  background: rgba(25, 35, 54, 0.88);
  padding: 1rem 2.4rem 1rem 1.2rem;
}

.user-detail-avatar {
  display: grid;
  place-items: center;
  width: 2.6rem;
  height: 2.6rem;
  flex-shrink: 0;
  border-radius: 50%;
  background: var(--blue);
  color: #fff;
  font-family: var(--font-display);
  font-weight: 900;
}

.user-detail-head-info {
  display: grid;
  gap: 0.15rem;
  flex: 1;
  min-width: 0;
}

.user-detail-head-info strong {
  color: var(--text);
  font-size: 0.86rem;
}

.user-detail-head-info small {
  overflow: hidden;
  color: var(--muted);
  font-size: 0.7rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.user-detail-badges {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  align-items: flex-end;
}

.user-detail-tabs {
  display: flex;
  gap: 0.3rem;
  border-bottom: 1px solid var(--line);
  padding: 0.6rem 1.2rem 0;
}

.user-detail-tabs button {
  border: 0;
  border-bottom: 2px solid transparent;
  background: transparent;
  color: var(--muted);
  padding: 0.5rem 0.7rem;
  font-size: 0.76rem;
  font-weight: 900;
  cursor: pointer;
}

.user-detail-tabs button.is-active {
  border-bottom-color: var(--blue);
  color: var(--blue);
}

.user-detail-body {
  flex: 1;
  overflow-y: auto;
  padding: 1.1rem 1.2rem;
}

.user-detail-pane {
  display: none;
}

.user-detail-pane.is-active {
  display: block;
}

.request-badge {
  display: inline-block;
  width: 0.5rem;
  height: 0.5rem;
  margin-left: 0.4rem;
  border-radius: 50%;
  background: var(--red);
  vertical-align: middle;
}

.user-detail-requests-list {
  display: grid;
  gap: 0.5rem;
  margin-bottom: 1rem;
}

.user-detail-request-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.6rem;
  border: 1px solid var(--line);
  border-radius: 0.5rem;
  background: var(--panel-2);
  color: var(--text);
  padding: 0.55rem 0.75rem;
  font-size: 0.78rem;
  font-weight: 700;
  text-align: left;
  cursor: pointer;
}

.user-detail-request-row small {
  color: var(--muted);
  font-weight: 600;
}

.user-detail-request-row.is-selected-request {
  border-color: var(--blue);
  background: rgba(0, 115, 255, 0.1);
}

.user-detail-request-thread {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  border-top: 1px solid var(--line);
  padding-top: 1rem;
}

.user-detail-request-thread .request-detail-messages {
  min-height: 8rem;
  max-height: 14rem;
}

.clone-service-list i {
  color: var(--muted);
  font-style: normal;
}

.signout-clone-button {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  width: 100%;
  height: 2.5rem;
  border: 1px solid rgba(232, 61, 48, 0.3);
  border-radius: 0.45rem;
  background: transparent;
  color: var(--red);
  font-weight: 900;
}

.service-clone-page {
  position: relative;
  min-height: 100%;
}

.service-history-card {
  max-width: 30rem;
}

.service-history-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 0.9rem;
}

.service-history-head h3 {
  margin: 0;
  color: var(--text);
  font-family: var(--font-display);
  font-size: 1rem;
}

.service-history-head p {
  margin: 0.2rem 0 0;
  color: var(--muted);
  font-size: 0.76rem;
  font-weight: 800;
}

.service-history-head button {
  border: 1px solid rgba(0, 115, 255, 0.45);
  border-radius: 0.45rem;
  background: var(--blue);
  color: #fff;
  padding: 0.62rem 0.85rem;
  font-family: var(--font-display);
  font-size: 0.76rem;
  font-weight: 900;
}

#serviceInboxList {
  display: grid;
  gap: 0.6rem;
}

.chat-history-row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.8rem;
  width: 100%;
  border: 1px solid rgba(37, 45, 65, 0.85);
  border-radius: 0.65rem;
  background: rgba(15, 25, 41, 0.72);
  color: var(--text);
  padding: 0.85rem;
  text-align: left;
}

.chat-history-row > span {
  display: grid;
  place-items: center;
  width: 2.35rem;
  height: 2.35rem;
  border-radius: 999px;
  background: rgba(0, 115, 255, 0.18);
  color: var(--blue);
  font-weight: 900;
}

.chat-history-row strong,
.chat-history-row small {
  display: block;
}

.chat-history-row small {
  margin-top: 0.2rem;
  overflow: hidden;
  color: var(--muted);
  font-size: 0.72rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.chat-history-row i {
  color: var(--muted);
  font-style: normal;
}

.support-window {
  position: absolute;
  right: 1.5rem;
  bottom: 1.5rem;
  z-index: 4;
  display: flex;
  flex-direction: column;
  width: min(24rem, calc(100% - 2rem));
  height: 30rem;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 1rem;
  background: var(--panel);
  box-shadow: 0 1.5rem 4rem rgba(0, 0, 0, 0.35);
}

.support-window header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  background: #0060d6;
  padding: 0.85rem 1rem;
}

.support-window header div {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  column-gap: 0.6rem;
}

.support-window header span {
  grid-row: span 2;
  display: grid;
  place-items: center;
  width: 2rem;
  height: 2rem;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.18);
  color: #fff;
}

.support-window header strong {
  color: #fff;
  line-height: 1;
}

.support-window header small {
  color: rgba(255, 255, 255, 0.7);
  font-size: 0.64rem;
}

.support-window nav {
  display: flex;
  gap: 0.25rem;
}

.support-window nav button {
  display: grid;
  place-items: center;
  width: 1.75rem;
  height: 1.75rem;
  border: 0;
  border-radius: 0.55rem;
  background: transparent;
  color: #fff;
}

.support-body {
  flex: 1 1 auto;
  padding: 0.75rem;
}

.support-bubble {
  display: flex;
  align-items: flex-start;
  gap: 0.4rem;
}

.support-bubble span {
  display: grid;
  place-items: center;
  width: 1.5rem;
  height: 1.5rem;
  border-radius: 999px;
  background: var(--blue);
  color: #fff;
  font-size: 0.7rem;
}

.support-bubble p {
  max-width: 78%;
  margin: 0;
  border-radius: 1rem 1rem 1rem 0.25rem;
  background: var(--muted-bg, rgba(25, 35, 54, 0.95));
  color: var(--text);
  padding: 0.65rem 0.75rem;
  font-size: 0.76rem;
  line-height: 1.55;
}

.support-window footer {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 0.5rem;
  border-top: 1px solid var(--line);
  padding: 0.75rem;
}

.support-window footer button {
  display: grid;
  place-items: center;
  width: 2.25rem;
  height: 2.25rem;
  border: 0;
  border-radius: 0.75rem;
  background: var(--blue);
  color: #fff;
}

.support-window footer button:first-child {
  background: transparent;
  color: var(--muted);
}

.support-window footer input {
  border-radius: 0.75rem;
  padding: 0 0.8rem;
  font-size: 0.78rem;
}

.process-chat-window {
  position: fixed;
  right: 1.5rem;
  bottom: 1.5rem;
  z-index: 90;
}

.process-chat-window.is-hidden {
  display: none;
}

.process-chat-launcher {
  position: fixed;
  right: 1.5rem;
  bottom: 1.5rem;
  z-index: 89;
  display: grid;
  place-items: center;
  width: 3.35rem;
  height: 3.35rem;
  border: 1px solid rgba(0, 115, 255, 0.45);
  border-radius: 999px;
  background: var(--blue);
  color: #fff;
  box-shadow: 0 1rem 2.5rem rgba(0, 115, 255, 0.34);
  font-size: 1.2rem;
  font-weight: 900;
}

.process-chat-launcher::before,
.process-chat-launcher::after {
  content: "";
  position: absolute;
  inset: -0.45rem;
  border: 1px solid rgba(0, 115, 255, 0.45);
  border-radius: inherit;
  animation: chatRipple 1.9s ease-out infinite;
}

.process-chat-launcher::after {
  animation-delay: 0.75s;
}

.process-chat-launcher.is-hidden {
  display: none;
}

@keyframes chatRipple {
  0% {
    opacity: 0.9;
    transform: scale(0.75);
  }

  100% {
    opacity: 0;
    transform: scale(1.45);
  }
}

.process-chat-body {
  overflow-y: auto;
}

.process-chat-form {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 0.5rem;
  border-top: 1px solid var(--line);
  padding: 0.75rem;
}

.upload-chat-image,
.process-chat-form button {
  display: grid;
  place-items: center;
  width: 2.25rem;
  height: 2.25rem;
  border: 0;
  border-radius: 0.75rem;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  font-weight: 900;
}

.upload-chat-image input {
  display: none;
}

.process-chat-form button {
  background: var(--blue);
  color: #fff;
}

.process-chat-form input[type="text"] {
  border-radius: 0.75rem;
  padding: 0 0.8rem;
  font-size: 0.78rem;
}

.support-bubble.self {
  justify-content: flex-end;
}

.support-bubble.self span {
  display: none;
}

.support-bubble.self p {
  border-radius: 1rem 1rem 0.25rem 1rem;
  background: rgba(0, 115, 255, 0.18);
  border: 1px solid rgba(0, 115, 255, 0.35);
}

.support-bubble img {
  display: block;
  max-width: 12rem;
  max-height: 9rem;
  margin-top: 0.45rem;
  border: 1px solid var(--line);
  border-radius: 0.6rem;
  object-fit: cover;
  cursor: zoom-in;
}

.chat-image-lightbox-inner {
  position: relative;
  max-width: 90vw;
  max-height: 90vh;
}

.chat-image-lightbox-inner img {
  display: block;
  max-width: 90vw;
  max-height: 90vh;
  border-radius: 0.75rem;
  border: 1px solid var(--line);
}

.chat-image-lightbox-inner button {
  position: absolute;
  top: -0.75rem;
  right: -0.75rem;
  width: 2rem;
  height: 2rem;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 999px;
  background: var(--panel);
  color: var(--text);
  font-size: 1.1rem;
  line-height: 1;
  cursor: pointer;
  box-shadow: 0 0.25rem 0.75rem rgba(0, 0, 0, 0.35);
}

.support-bubble + .support-bubble {
  margin-top: 0.65rem;
}

.mobile-app-nav {
  display: none;
}

@media (min-width: 1051px) and (max-width: 1279px) {
  .app-logo {
    min-width: 4rem;
  }

  .app-logo small {
    display: none;
  }

  .app-body {
    grid-template-columns: 4rem minmax(0, 1fr);
  }

  .sidebar {
    padding: 1rem 0.45rem;
  }

  .nav-item {
    justify-content: center;
    min-height: 3.25rem;
    padding: 0.35rem;
  }

  .nav-label {
    display: none;
  }
}

@media (max-width: 1050px) {
  .login-shell,
  .hero-grid,
  .trade-terminal,
  .content-grid,
  .management-grid,
  .chat-panel,
  .trust-grid-home {
    grid-template-columns: 1fr;
  }

  .login-shell {
    background: var(--bg);
  }

  .login-shell .brand-panel {
    display: none;
  }

  .auth-form-logo {
    display: grid;
  }

  .signin-panel {
    min-height: 100vh;
    place-items: start center;
    padding-top: clamp(4rem, 12vh, 7rem);
  }

  .app-header {
    /* Grow with the wrapped rows - a fixed 3rem basis let them spill over
       the page below (the Market Watch heading). */
    flex: 0 0 auto;
    flex-wrap: wrap;
    align-content: center;
    height: auto;
    min-height: 4.1rem;
    gap: 0.55rem;
    padding: 0.55rem 0.75rem;
  }

  .app-logo {
    min-width: auto;
  }

  .app-logo span {
    font-size: 1.6rem;
  }

  .app-logo small {
    font-size: 0.48rem;
  }

  .app-market-bar {
    order: 3;
    width: 100%;
    justify-content: center;
    gap: 0.75rem;
  }

  .app-body {
    display: block;
    flex: 1 1 auto;
    min-height: 0;
    overflow: hidden;
  }

  .trade-terminal {
    height: auto;
    min-height: calc(100vh - 3rem);
    overflow: visible;
  }

  .home-nav {
    grid-template-columns: auto auto;
    justify-content: space-between;
    min-height: 3.5rem;
    padding: 0.35rem 0;
  }

  .sidebar {
    display: none;
  }

  .client-topbar {
    flex-wrap: nowrap;
    justify-content: center;
    padding: 0.55rem 0.75rem;
  }

  .app-header.client-topbar {
    flex-wrap: wrap;
    justify-content: space-between;
  }

  .client-ticker {
    margin: 0;
  }

  .watch-panel,
  .chart-terminal {
    border-right: 0;
    border-bottom: 1px solid var(--trade-border);
  }

  .watch-panel {
    max-height: 32rem;
  }

  /* Stacked layout's watch list: the price column sizes to its number
     (a fixed 4.4rem cut BTC to "82899.…"), and a selected/hovered row is
     highlighted in place - the desktop version widens the row with negative
     margins, which here pushed its numbers out of line with the others. */
  .watch-table {
    padding-right: 0; /* the desktop panel toggle it clears is hidden here */
  }

  .watch-head,
  .watch-row {
    grid-template-columns: minmax(0, 1fr) auto 4.4rem;
    gap: 0.6rem;
    padding-inline: 0.5rem;
  }

  .watch-head span:not(:first-child) {
    text-align: right;
  }

  .watch-row {
    min-height: 2.9rem;
    padding-block: 0.35rem;
  }

  .watch-row:hover,
  .watch-row.is-selected {
    margin-inline: 0;
    padding-inline: 0.5rem;
  }

  .watch-row.is-selected {
    border-left: 0;
    box-shadow: inset 2px 0 var(--blue);
  }

  .order-ticket {
    min-height: auto;
    overflow: visible;
  }

  .workspace {
    height: 100%;
    overflow: auto;
    padding-bottom: 4.5rem;
  }

  .mobile-app-nav {
    position: fixed;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 40;
    display: flex;
    /* A grid sized for a fixed item count (5 columns) squeezed every item
       unreadably thin once the admin-only and previously-unreachable items
       (Home, Users, Products, Logs, Online Service - see mobile-app-nav's
       HTML) were added, taking it to 6-9 items depending on role. Scrolling
       keeps every item a consistent, tappable size regardless of how many
       are visible, the same pattern .watch-tabs already uses for its own
       variable-length row. */
    overflow-x: auto;
    min-height: 4rem;
    border-top: 1px solid var(--line);
    background: var(--panel);
    padding: 0.35rem;
    scrollbar-width: none;
  }

  .mobile-app-nav::-webkit-scrollbar {
    display: none;
  }

  .mobile-app-nav .nav-item {
    flex: 0 0 4.1rem;
    min-height: 3.2rem;
    justify-content: center;
    gap: 0.25rem;
    border-radius: 0.4rem;
    padding: 0.25rem;
    text-align: center;
  }

  .mobile-app-nav .nav-icon {
    width: 1.85rem;
    height: 1.85rem;
    flex-basis: 1.85rem;
    font-size: 0.95rem;
  }

  .mobile-app-nav .nav-label {
    white-space: normal;
    line-height: 1.15;
    font-size: 0.62rem;
  }

  .metric-grid,
  .ticker-row,
  .book-grid,
  .balance-grid,
  .movers-grid,
  .portal-stat-strip,
  .profile-layout,
  .feature-grid,
  .market-grid,
  .copy-grid,
  .support-grid,
  .testimonial-grid,
  .trust-card-grid,
  .contact-grid,
  .footer-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .room-list {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    border-right: 0;
    border-bottom: 1px solid var(--line);
  }

  .process-chat-window,
  .process-chat-launcher {
    bottom: 5.75rem;
  }

  .managed-table-head,
  .managed-instrument-list {
    grid-template-columns: 1fr;
  }

  .user-management-page {
    width: min(100% - 1rem, 68rem);
  }
}

@media (max-width: 680px) {
  .inner {
    width: min(100% - 2rem, 76rem);
  }

  /* .client-ticker and .client-update are each a single nowrap flex row
     (see their base rules) - fine on desktop, but their combined width
     easily exceeds a phone screen. .app-shell's overflow: hidden then
     clips the excess silently instead of causing a visible page scrollbar,
     so this went unnoticed rather than erroring - visually the "Updated"
     timestamp and the Refresh button were pushed off-screen and
     untappable. Letting every level wrap turns the one unbreakable row
     into as many short lines as needed. */
  .app-market-bar {
    flex-wrap: wrap;
    row-gap: 0.35rem;
  }

  .client-ticker,
  .client-update {
    flex-wrap: wrap;
    justify-content: center;
    row-gap: 0.3rem;
  }

  /* Same unwrapped-flex-row pattern as .client-ticker/.client-update above:
     the O/H/L/C readout is one nowrap row with ~1rem gaps between each of
     its 8 items (the "O"/"H"/"L"/"C" labels are bare text nodes, each an
     anonymous flex item in their own right) - comfortably wider than a
     phone screen, so the C value was clipped off-screen. */
  .chart-symbol-head p {
    flex-wrap: wrap;
    row-gap: 0.3rem;
  }

  .brand-panel {
    min-height: 44rem;
  }

  .topbar,
  .panel-heading {
    align-items: stretch;
    flex-direction: column;
  }

  .topbar-actions,
  .account-row,
  .hero-actions {
    align-items: stretch;
    flex-direction: column;
  }

  .app-header .topbar-actions {
    align-items: center;
    flex-direction: row;
  }

  .user-management-head,
  .managed-form-row {
    grid-template-columns: 1fr;
    align-items: stretch;
    flex-direction: column;
  }

  .user-management-metrics {
    grid-template-columns: 1fr;
  }

  .home-nav nav,
  .home-auth {
    display: none;
  }

  .home-menu-button {
    display: grid;
  }

  .home-logo {
    justify-items: start;
    text-align: left;
  }

  .hero-grid {
    grid-template-columns: 1fr;
    min-height: auto;
    padding: 3rem 0;
  }

  .hero-copy h1 {
    max-width: 12ch;
    font-size: clamp(2.1rem, 9vw, 3.2rem);
  }

  .hero-copy p:not(.eyebrow) {
    font-size: 0.96rem;
  }

  .quote-strip {
    gap: 1.5rem;
    padding: 0.5rem 1rem;
  }

  .search-box {
    min-width: 100%;
  }

  .metric-grid,
  .ticker-row,
  .book-grid,
  .balance-grid,
  .quick-grid,
  .movers-grid,
  .portal-stat-strip,
  .profile-layout,
  .copy-grid,
  .support-grid,
  .feature-grid,
  .market-grid,
  .testimonial-grid,
  .trust-card-grid,
  .contact-grid,
  .footer-grid,
  .inline-form,
  .chat-form,
  .nav-stack,
  .room-list {
    grid-template-columns: 1fr;
  }

  /* On a phone the account modal becomes a full-screen, two-step page like a
     native app's account screen: first the profile card and a list of
     every option (each a full-width row with its icon and a chevron, Logout
     last), then - once a row is tapped - that page on its own with a Back
     bar at the top (.is-pane-open, set by openProfilePane in app.js). */
  .profile-modal-open {
    overflow: hidden;
  }

  #profileModal {
    padding: 0;
    place-items: stretch;
  }

  .profile-modal {
    flex-direction: column;
    width: 100%;
    height: 100vh;
    height: 100dvh;
    border: 0;
    border-radius: 0;
  }

  #profileModal .profile-modal-x {
    top: 0.7rem;
    z-index: 6;
    right: 0.75rem;
    display: grid;
    place-items: center;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 50%;
    background: var(--line) !important;
    color: var(--text) !important;
    font-size: 1.35rem !important;
  }

  .profile-modal-side {
    flex: 1;
    width: 100%;
    border-right: 0;
    padding: 1rem 1rem calc(1.25rem + env(safe-area-inset-bottom));
    -webkit-overflow-scrolling: touch;
  }

  .profile-modal.is-pane-open .profile-modal-side {
    display: none;
  }

  /* Title bar of the menu screen - stays put while the list scrolls, and
     holds the close button, like the Back bar on each page. */
  .profile-modal-side::before {
    content: "My Account";
    position: sticky;
    top: -1rem;
    z-index: 3;
    display: flex;
    flex-shrink: 0;
    align-items: center;
    min-height: 3.9rem;
    margin: -1rem -1rem 1rem;
    border-bottom: 1px solid var(--line);
    background: var(--panel-2);
    color: var(--text);
    padding: 0 1rem;
    font-size: 1rem;
    font-weight: 800;
  }

  .profile-modal-user {
    display: grid;
    grid-template-columns: auto 1fr;
    column-gap: 0.85rem;
    align-items: center;
    margin: 0 0 1.1rem;
    text-align: left;
  }

  .profile-modal-avatar {
    grid-row: span 4;
    width: 3.6rem;
    height: 3.6rem;
    margin: 0;
  }

  .profile-modal-name {
    font-size: 1.05rem;
  }

  .profile-modal-email {
    font-size: 0.82rem;
  }

  .profile-modal-uid {
    margin: 0.15rem 0 0.35rem;
    font-size: 0.76rem;
  }

  .profile-modal-kyc-badge {
    justify-self: start;
  }

  .profile-modal-menu {
    flex: 0 0 auto;
    gap: 0;
    overflow: visible;
    border: 1px solid var(--line);
    border-radius: 0.85rem;
    background: var(--panel);
  }

  .profile-modal-menu button {
    min-height: 3.4rem;
    gap: 0.85rem;
    border-radius: 0;
    border-bottom: 1px solid var(--line);
    color: var(--text);
    padding: 0.7rem 0.95rem;
    font-size: 0.95rem;
  }

  .profile-modal-menu button:first-child {
    border-radius: 0.85rem 0.85rem 0 0;
  }

  .profile-modal-menu button > span:first-child {
    display: grid;
    place-items: center;
    flex-shrink: 0;
    width: 2.1rem;
    height: 2.1rem;
    border-radius: 0.6rem;
    background: var(--panel-2);
    font-size: 1rem;
  }

  .profile-modal-menu button > span:last-child {
    flex: 1;
  }

  .profile-modal-menu button:not(.profile-modal-logout)::after {
    content: "›";
    color: var(--muted);
    font-size: 1.4rem;
    line-height: 1;
  }

  /* Nothing is "selected" in a list - the active pane is a desktop idea. */
  .profile-modal-menu button.is-active {
    background: transparent;
    color: var(--text);
  }

  .profile-modal-menu button:hover {
    background: transparent;
    color: var(--text);
  }

  .profile-modal-menu button:active {
    background: var(--line);
  }

  .profile-modal-menu .profile-modal-logout:hover {
    color: var(--red);
  }

  .profile-modal-logout {
    margin-top: 0;
    border-top: 0;
    border-bottom: 0 !important;
    border-radius: 0 0 0.85rem 0.85rem !important;
    padding-top: 0.7rem !important;
  }

  .profile-modal-content {
    display: none;
    padding: 0 1rem calc(1.5rem + env(safe-area-inset-bottom));
    -webkit-overflow-scrolling: touch;
  }

  .profile-modal.is-pane-open .profile-modal-content {
    display: block;
  }

  .profile-mobile-bar {
    position: sticky;
    top: 0;
    z-index: 4;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    min-height: 3.9rem;
    margin: 0 -1rem 1rem;
    border-bottom: 1px solid var(--line);
    background: var(--panel);
    padding: 0 3.6rem 0 0.5rem;
  }

  .profile-mobile-bar button {
    min-height: 2.6rem;
    border: 0;
    border-radius: 0.6rem;
    background: transparent;
    color: var(--blue);
    padding: 0 0.6rem;
    font-size: 1rem;
    font-weight: 800;
    cursor: pointer;
  }

  .profile-mobile-bar strong {
    overflow: hidden;
    color: var(--text);
    font-size: 1rem;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  /* The bar already names the page. */
  #profileModal .profile-pane h3 {
    display: none;
  }

  .profile-form input,
  .profile-form select,
  .profile-form textarea {
    font-size: 16px; /* below 16px iOS zooms the page in on focus */
  }

  .process-chat-window {
    right: 0.75rem;
    width: min(24rem, calc(100% - 1.5rem));
  }

  .process-chat-launcher {
    right: 0.9rem;
  }

  .stats-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .client-dashboard {
    width: min(100% - 1rem, 46rem);
  }

  .client-page {
    width: min(100% - 1rem, 46rem);
    padding-top: 1rem;
  }

  .portal-toolbar,
  .account-wallet-card,
  .profile-info-list label {
    align-items: stretch;
    flex-direction: column;
  }

  .portal-toolbar {
    align-items: flex-start;
  }

  .order-row {
    grid-template-columns: auto minmax(0, 1fr);
  }

  .order-row em,
  .order-row b,
  .order-row i {
    grid-column: 2;
    text-align: left;
  }

  .copy-card dl {
    grid-template-columns: 1fr;
  }

  .wallet-actions,
  .support-input {
    grid-template-columns: 1fr;
    display: grid;
    width: 100%;
  }

  .client-greeting,
  .profit-strip,
  .ready-panel {
    align-items: stretch;
    flex-direction: column;
  }

  .mover-list li {
    grid-template-columns: 1rem 1fr;
  }

  .mover-list em {
    grid-column: 2;
    text-align: left;
  }

  .markets-page {
    padding: 1rem 0.75rem 2rem;
  }

  .trade-stats,
  .trade-price-stats,
  .watch-head,
  .watch-row {
    grid-template-columns: 1fr;
  }

  .trade-stats > div,
  .trade-price-stats > div {
    border-right: 0;
    border-bottom: 1px solid var(--trade-border);
  }

  .timeframes {
    flex-wrap: wrap;
    padding: 0.5rem;
  }

  .candlestick-chart {
    height: 22rem;
    min-height: 22rem;
    margin-inline: 0;
  }

  .watch-row em,
  .watch-row b {
    text-align: left;
  }

  .instrument-head {
    display: none;
  }

  .instrument-row {
    grid-template-columns: 1fr;
    gap: 0.45rem;
    padding: 0.85rem;
  }

  .instrument-row em {
    text-align: left;
  }

  .instrument-row button {
    width: 100%;
  }

  /* ---------- App chrome and the Trade page on a phone ---------- */
  /* Top bar: logo and account actions on one line, the ticker, update time
     and a Refresh icon on the second. */
  .app-header.client-topbar {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    gap: 0.45rem 0.5rem;
    padding: 0.5rem 0.75rem;
  }

  .client-topbar .app-logo {
    grid-row: 1;
    grid-column: 1;
  }

  .client-topbar .app-logo span {
    font-size: 1.3rem;
  }

  .client-topbar .app-logo small {
    display: none;
  }

  .client-topbar .client-actions {
    grid-row: 1;
    grid-column: 2;
    justify-self: end;
    flex-wrap: nowrap;
    gap: 0.35rem;
  }

  .client-topbar .app-market-bar {
    grid-row: 2;
    grid-column: 1 / -1;
    flex-wrap: nowrap;
    justify-content: space-between;
    gap: 0.5rem;
    width: 100%;
    min-width: 0;
  }

  .client-topbar .client-ticker,
  .client-topbar .client-update {
    flex-wrap: nowrap;
    gap: 0.4rem;
    white-space: nowrap;
  }

  .client-topbar .client-ticker {
    justify-content: flex-start;
    min-width: 0;
    overflow: hidden;
    font-size: 0.8rem;
  }

  /* The ticker needs the width more than the last-refresh time does. */
  .client-topbar .client-update > span {
    display: none;
  }

  /* Just the ⟳ - the word doesn't fit beside the ticker. */
  .client-topbar #refreshDashboard {
    display: grid;
    place-items: center;
    width: 2rem;
    min-width: 2rem;
    height: 2rem;
    min-height: 2rem;
    overflow: hidden;
    padding: 0;
    font-size: 0;
  }

  .client-topbar #refreshDashboard::before {
    content: "⟳";
    font-size: 1rem;
  }

  /* Market Watch: one compact line per product (name | price | change), so
     several fit on screen instead of one cell per line. */
  .watch-panel {
    max-height: none;
    padding: 0.75rem;
  }

  .watch-panel h2 {
    font-size: 0.85rem;
  }

  .watch-table {
    flex: none;
    max-height: 19rem;
  }

  /* Undoes the one-column rule above for the watch list (see the
     max-width: 1050px rules for the rest of its stacked layout). */
  .watch-head,
  .watch-row {
    grid-template-columns: minmax(0, 1fr) auto 4.4rem;
  }

  .watch-head span:not(:first-child),
  .watch-row em,
  .watch-row b {
    text-align: right;
  }

  /* Price header: O/H/L/C as two tidy rows of label + value. */
  .chart-symbol-head p {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto minmax(0, 1fr);
    align-items: baseline;
    gap: 0.25rem 0.5rem;
    font-size: 0.8rem;
  }

  /* Order ticket: room between each control and the next label. */
  .order-ticket .risk-toggle-row {
    margin-top: 0.6rem;
  }

  /* Bottom bar: icon over label, sharing the width evenly (scrolls only
     when there are more items than fit, as for admins). */
  .mobile-app-nav {
    gap: 0.15rem;
    padding: 0.3rem 0.25rem calc(0.3rem + env(safe-area-inset-bottom));
  }

  .mobile-app-nav .nav-item {
    flex: 1 0 3.6rem;
    flex-direction: column;
    min-height: 3.3rem;
    gap: 0.15rem;
    padding: 0.2rem;
  }

  .mobile-app-nav .nav-icon {
    flex: none;
    width: 1.6rem;
    height: 1.6rem;
  }

  .mobile-app-nav .nav-label {
    white-space: normal;
    line-height: 1.1;
    font-size: 0.62rem;
  }
}

/* Account Details page (all sizes). */
.account-details-card {
  margin-bottom: 1.1rem;
}

.account-detail-hero {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.8rem;
  border: 1px solid var(--line);
  border-radius: 0.8rem;
  background: var(--panel-2);
  padding: 0.9rem 1rem;
}

.account-detail-avatar {
  display: grid;
  place-items: center;
  width: 2.8rem;
  height: 2.8rem;
  border-radius: 50%;
  background: var(--blue);
  color: #fff;
  font-size: 1.1rem;
  font-weight: 900;
}

.account-detail-hero strong,
.account-detail-hero small {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.account-detail-hero strong {
  color: var(--text);
  font-size: 0.95rem;
}

.account-detail-hero small {
  margin-top: 0.1rem;
  color: var(--muted);
  font-size: 0.78rem;
}

.account-detail-list {
  margin: 0.4rem 0 0;
}

.account-detail-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  border-bottom: 1px solid var(--line);
  padding: 0.75rem 0.15rem;
  font-size: 0.85rem;
}

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

.account-detail-row dt {
  color: var(--muted);
  font-weight: 700;
}

.account-detail-row dd {
  margin: 0;
  color: var(--text);
  font-weight: 800;
  text-align: right;
  word-break: break-word;
}

/* Header icon in the account window (phones and tablets only). */
.profile-modal-icon {
  display: none;
}

/* ---------- Profile page on desktop (sidebar layout, 1051px and wider) ----------
   The account window's markup sits in the #profile page: menu on the left,
   the chosen section on the right. Tablets and phones keep the window. */
@media (min-width: 1051px) {
  .profile-page {
    padding: 1.25rem 1.5rem 2rem;
  }

  .profile-page .profile-modal {
    position: relative;
    display: flex;
    flex-direction: row;
    width: 100%;
    max-width: 78rem;
    height: auto;
    min-height: calc(100vh - 8rem);
    margin: 0 auto;
    border-radius: 0.9rem;
    box-shadow: none;
  }

  .profile-page .profile-modal-x,
  .profile-page .profile-mobile-bar {
    display: none;
  }

  .profile-page .profile-modal-side {
    width: 17rem;
    padding: 1.6rem 1rem;
  }

  .profile-page .profile-modal-content {
    padding: 2rem 2.4rem 2.4rem;
  }

  .profile-page .profile-modal-menu button {
    padding: 0.7rem 0.85rem;
    font-size: 0.9rem;
  }

  .profile-page .profile-modal-name {
    font-size: 0.95rem;
  }

  .profile-page .profile-pane {
    max-width: 46rem;
  }

  .profile-page .profile-pane h3 {
    font-size: 1.3rem;
  }
}