/* The same brand tokens and Cairo typography as alhakimfx.com; isolated from the website layout. */
:root {
  --bg: #061b2a;
  --surface: #082235;
  --text: #e9fbff;
  --muted: #a9c9d1;
  --brand: #29c8b6;
  --gold: #e7c46a;
  --line: rgba(148, 226, 232, 0.18);
  --good: #52d89a;
  --bad: #ff6b78;
  font-family: "Cairo", "Segoe UI", Tahoma, Arial, sans-serif;
}
:root[data-theme="light"] {
  color-scheme: light;
  --bg: #f4fbfc;
  --surface: #ffffff;
  --text: #0a2a3c;
  --muted: #476777;
  --brand: #087f76;
  --line: #d4e5ea;
  --good: #087742;
  --bad: #ba2639;
}
.brand img {
  background: transparent;
  width: 46px;
  height: 46px;
}
.brand b,
.eyebrow {
  color: var(--gold);
}
:root[data-theme="light"] .brand b,
:root[data-theme="light"] .eyebrow {
  color: #8e6a20;
}
.quote-card,
.wallet-card {
  color: #e9fbff;
  background: linear-gradient(135deg, #082235, #10445a);
}
.quote-card .muted,
.wallet-card small {
  color: #a9c9d1;
}
.quote-card .price.up {
  color: #52d89a;
}
.quote-card .price.down {
  color: #ff8793;
}
.wallet-card {
  border-top: 3px solid #e7c46a;
}
.wallet-card > strong {
  color: #e7c46a;
}
.primary {
  background: linear-gradient(110deg, #29c8b6, #41e3d1);
  color: #03131e;
}
.feature-icon {
  display: grid;
  place-items: center;
  width: 50px;
  height: 50px;
  flex-shrink: 0;
  border: 1px solid var(--line);
  border-radius: 16px;
}
.message.own {
  color: #e9fbff;
}
.bottom-nav {
  padding-bottom: calc(
    8px +
      max(
        env(safe-area-inset-bottom),
        var(--tg-content-safe-area-inset-bottom, 0px)
      )
  );
}
main {
  padding-inline: max(16px, var(--tg-content-safe-area-inset-left, 0px))
    max(16px, var(--tg-content-safe-area-inset-right, 0px));
}
.quote-card .price {
  transition: color 140ms ease;
}
.level-map {
  display: grid;
  gap: 4px;
  margin: 12px 0;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 12px;
}
.map-line {
  border-bottom: 1px dashed currentColor;
  display: flex;
  justify-content: space-between;
  gap: 10px;
  padding: 7px 0;
  font-size: 12px;
}
.map-line.entry {
  color: var(--brand);
  border-bottom-style: solid;
}
.admin-list {
  overflow-wrap: anywhere;
}
.admin-card .actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 10px;
}
.admin-card small {
  display: block;
}
.admin-card .three-col {
  margin-top: 14px;
}
#notice {
  color: #e9fbff;
}
/* One complete visual identity across tools, membership, support and account. */
body { background: var(--bg); }
.topbar { background: var(--bg); flex-wrap: wrap; }
.top-actions { gap: 6px; }
.top-actions button { min-height: 40px; padding: 7px 10px; }
.logout-btn, #logout { color: var(--bad); border-color: #ff6b7840; }
.panel { background: linear-gradient(140deg, #0b293d, #082235); }
.panel h1, .panel h2, .panel h3, summary { color: var(--text); }
input, select, textarea { background: #061b2a; color: #e9fbff; }
input::placeholder, textarea::placeholder { color: #91b7c2; opacity: 1; }
option { background: #082235; color: #e9fbff; }
.message { border: 1px solid var(--line); }
.message.own { background: #114b51; border-color: #29c8b645; }
.bottom-nav { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.bottom-nav button { min-height: 54px; }
.bottom-nav button.active { box-shadow: inset 0 2px var(--brand); }
#chart { height: clamp(370px, 62vh, 540px); border: 1px solid var(--line); border-radius: 14px; overflow: hidden; }
#chartStatus:empty { display: none; }
.member-card { border-top: 3px solid var(--gold); }
.member-status { font-size: 25px; color: var(--gold); }
.member-card .actions, .channel-toolbar, .channel-actions { display: flex; flex-wrap: wrap; gap: 9px; align-items: center; }
.channel-toolbar input { flex: 1; width: auto; }
.channel-actions button { flex: 1 1 100px; min-height: 44px; }
.channel-actions .danger { color: var(--bad); border-color: #ff6b7855; }
.channel-admin-card h3 { margin-bottom: 4px; }
.channel-admin-card small { display: block; }
.channel-metrics { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 10px; }
.channel-metrics > div { padding: 13px; border: 1px solid var(--line); border-radius: 14px; }
.channel-metrics strong { display: block; font-size: 25px; color: var(--brand); }
.channel-identity { overflow-wrap: anywhere; }
#channelAdmin { margin-top: 24px; }
.trial-popup { width: min(440px, calc(100% - 28px)); max-height: 88vh; max-height: 88dvh; overflow-y: auto; overscroll-behavior: contain; margin: auto; padding: 22px; border: 1px solid var(--line); border-top: 3px solid var(--gold); border-radius: 22px; color: var(--text); background: #082235; font: inherit; }
.trial-popup::backdrop { background: #020e1dd9; }
.trial-popup h2 { color: var(--gold); font-size: 23px; margin-top: 14px; }
.trial-popup .trial-close { font-size: 24px; line-height: 1; min-width: 40px; min-height: 40px; }
.trial-popup .stack { gap: 9px; }
.trial-popup input { padding: 9px 11px; }
.trial-popup .trial-error { margin: 0; font-size: 13px; }
@media (max-width: 390px) {
  .topbar { gap: 8px; padding: 12px; }
  .brand { gap: 6px; font-size: 14px; }
  .brand img { width: 38px; height: 38px; }
  .top-actions button { padding: 7px; font-size: 12px; }
  .panel { padding: 15px; }
}
@media (prefers-reduced-motion: reduce) {
  .quote-card .price {
    transition: none;
  }
}