/* The owner's Admin page (admin.js). Full screen, under the verify/fix pages (z 60) and the lock (70). */
.adm { position: fixed; inset: 0; z-index: 58; background: var(--bg); display: flex; flex-direction: column; opacity: 0;
  transform: translateY(14px); transition: opacity 220ms var(--ease-out), transform 300ms var(--ease-out); }
.adm[hidden] { display: none; }
.adm.in { opacity: 1; transform: none; }
.adm-head { display: flex; align-items: center; gap: 8px; padding: calc(var(--safe-t) + 12px) 16px 10px; border-bottom: 1px solid var(--line); }
.adm-head h2 { margin: 0 auto 0 0; font-size: 22px; letter-spacing: -.01em; }
.adm-icon { width: 40px; height: 40px; border-radius: 12px; border: 1px solid var(--line-2); background: var(--surface); color: var(--fg);
  font: 600 18px/1 var(--font); cursor: pointer; display: grid; place-items: center; }
.adm-body { flex: 1; overflow-y: auto; overscroll-behavior: contain; padding: 14px 16px calc(var(--safe-b) + 28px); display: grid; gap: 14px; align-content: start; grid-auto-rows: max-content;
  width: 100%; max-width: 720px; margin: 0 auto; box-sizing: border-box; }
.adm-loading { margin: auto; display: grid; gap: 14px; place-items: center; color: var(--fg-2); }
.adm-loading i { width: 34px; height: 34px; border-radius: 50%; border: 3px solid var(--line-2); border-top-color: var(--accent-2); animation: adm-spin .9s linear infinite; }

/* status */
.adm-status { background: var(--surface); border: 1px solid var(--line-2); border-radius: var(--r-card); padding: 14px; display: grid; gap: 12px; }
.adm-cap { display: grid; grid-template-columns: auto 1fr; gap: 4px 10px; align-items: baseline; }
.adm-cap b { font-size: 30px; line-height: 1; color: var(--accent); font-variant-numeric: tabular-nums; }
.adm-cap span { color: var(--fg-2); font-size: 14px; }
.adm-bar { grid-column: 1 / -1; height: 6px; border-radius: 6px; background: var(--bg-sunk); overflow: hidden; }
.adm-bar i { display: block; height: 100%; border-radius: 6px; background: linear-gradient(90deg, var(--accent-2), var(--accent)); }
.adm-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.adm-chip { display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px; border-radius: var(--r-pill); font-size: 12.5px; border: 1px solid var(--line-2); color: var(--fg-2); }
.adm-chip i { width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.adm-chip.ok { color: #9FE3AE; border-color: rgba(63, 185, 80, .35); background: rgba(63, 185, 80, .07); }
.adm-chip.bad { color: #FFB4AE; border-color: rgba(217, 68, 58, .45); background: rgba(217, 68, 58, .08); }

/* quick actions, search, tabs */
.adm-quick { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
@media (max-width: 520px) { .adm-quick { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.adm-quick button { display: grid; gap: 4px; justify-items: center; padding: 12px 6px; border-radius: 12px; border: 1px solid var(--line-2); background: var(--surface);
  color: var(--fg); font: 500 13px/1.2 var(--font); cursor: pointer; text-align: center; }
.adm-quick b { font-size: 20px; }
.adm-search { width: 100%; box-sizing: border-box; height: 46px; padding: 0 14px; border-radius: 12px; border: 1px solid var(--line-2); background: var(--bg-sunk);
  color: var(--fg); font: 500 16px var(--font); outline: none; }
.adm-search:focus { border-color: rgba(201, 204, 209, .7); box-shadow: 0 0 0 3px var(--accent-glow); }
.adm-tabs { display: flex; flex-wrap: wrap; gap: 6px; flex: none; min-height: 38px; }
.adm-tabs button { flex: none; padding: 8px 12px; border-radius: var(--r-pill); border: 1px solid var(--line-2); background: none; color: var(--fg-2); font: 500 14px var(--font); cursor: pointer; }
.adm-tabs button.on { background: var(--accent-2); color: var(--accent-ink); border-color: var(--accent-2); }
.adm-tabs em { font-style: normal; margin-left: 4px; opacity: .75; }
.adm-tabs em.hot { color: #FFB4AE; opacity: 1; font-weight: 700; }
.adm-tabs button.on em.hot { color: #7A1E17; }

/* client list */
.adm-list { display: grid; gap: 10px; }
.adm-empty, .adm-none { color: var(--muted); text-align: center; margin: 18px 0; }
.adm-none { text-align: left; margin: 4px 0 0; font-size: 14px; }
.adm-client { all: unset; box-sizing: border-box; display: grid; gap: 10px; padding: 14px; border-radius: var(--r-card); background: var(--surface);
  border: 1px solid var(--line-2); cursor: pointer; transition: border-color var(--t-base), transform var(--t-fast); }
.adm-client:hover { border-color: rgba(201, 204, 209, .45); }
.adm-client:active { transform: scale(.99); }
.adm-client:focus-visible { outline: 2px solid var(--accent-2); outline-offset: 2px; }
.adm-who { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; min-width: 0; }
.adm-who b { font-size: 16px; overflow-wrap: anywhere; }
.adm-who small { flex-basis: 100%; color: var(--muted); font-size: 12.5px; overflow-wrap: anywhere; }
.adm-tick { color: #9FE3AE; font-weight: 700; }
.adm-acct { display: grid; gap: 8px; padding-top: 10px; border-top: 1px solid var(--line); }
.adm-acct-top { display: flex; align-items: center; gap: 8px; font-variant-numeric: tabular-nums; }
.adm-srv { color: var(--muted); font-size: 12.5px; margin-right: auto; }
.adm-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--muted); }
.adm-dot.ok { background: var(--good); box-shadow: 0 0 8px rgba(63, 185, 80, .6); }
.adm-dot.bad { background: var(--danger); box-shadow: 0 0 8px rgba(217, 68, 58, .6); }
.adm-dot.wait { background: var(--warn); }
.adm-money { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.adm-money span { display: grid; gap: 2px; font: 600 17px/1.15 var(--font); font-variant-numeric: tabular-nums; }
.adm-money small { font: 500 11.5px var(--font); color: var(--muted); text-transform: uppercase; letter-spacing: .06em; }
.adm-skel { display: inline-block; width: 70px; height: 16px; border-radius: 5px; background: linear-gradient(90deg, var(--surface-2), #262b33, var(--surface-2));
  background-size: 200% 100%; animation: adm-sh 1.2s linear infinite; }
.adm-badges { display: flex; flex-wrap: wrap; gap: 6px; }
.adm-b { padding: 3px 9px; border-radius: var(--r-pill); font-size: 12px; font-weight: 500; border: 1px solid var(--line-2); color: var(--fg-2); }
.adm-b.ok { color: #9FE3AE; border-color: rgba(63, 185, 80, .35); }
.adm-b.bad { color: #FFB4AE; border-color: rgba(217, 68, 58, .45); background: rgba(217, 68, 58, .08); }
.adm-b.wait { color: #E9EAEC; border-color: rgba(201, 204, 209, .4); }
.adm-b.off { color: var(--muted); }

/* a client's card (slides over the list) */
.adm-card-wrap { position: absolute; inset: 0; background: var(--bg); overflow-y: auto; overscroll-behavior: contain; transform: translateX(100%);
  transition: transform 280ms var(--ease-out); }
.adm-card-wrap.in { transform: none; }
.adm-card-wrap[hidden] { display: none; }
.adm-card { width: 100%; max-width: 720px; margin: 0 auto; box-sizing: border-box; padding: calc(var(--safe-t) + 12px) 16px calc(var(--safe-b) + 32px); display: grid; gap: 14px; }
.adm-card header { display: flex; align-items: center; gap: 10px; }
.adm-card h3 { margin: 0; font-size: 20px; overflow-wrap: anywhere; }
.adm-sub { margin: 0; color: var(--fg-2); font-size: 14px; line-height: 1.5; overflow-wrap: anywhere; }
.adm-why { margin: 0; padding: 10px 12px; border-radius: 10px; font-size: 13.5px; line-height: 1.45; color: #E9EAEC; background: rgba(201, 204, 209, .08); border: 1px solid rgba(201, 204, 209, .3); }
.adm-why.bad { color: #FFB4AE; background: rgba(217, 68, 58, .08); border-color: rgba(217, 68, 58, .4); }
.adm-sec { display: grid; gap: 10px; padding: 14px; border-radius: var(--r-card); background: var(--surface); border: 1px solid var(--line-2); }
.adm-sec h4 { margin: 0; font-size: 16px; font-variant-numeric: tabular-nums; }
.adm-sec h4 small { color: var(--muted); font-weight: 500; margin-left: 6px; }
.adm-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin: 0; }
.adm-grid div { display: grid; gap: 2px; min-width: 0; }
.adm-grid dt { font-size: 11.5px; color: var(--muted); text-transform: uppercase; letter-spacing: .05em; }
.adm-grid dd { margin: 0; font: 600 15px/1.2 var(--font); font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.adm-grid dd.strong { color: var(--accent); }
.adm-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.adm-actions button, .adm-btn { flex: 1 1 auto; min-height: 44px; padding: 0 14px; border-radius: 12px; border: 1px solid var(--line-2); background: var(--surface-2);
  color: var(--fg); font: 600 14px var(--font); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; text-decoration: none; }
.adm-actions button.prime { background: linear-gradient(180deg, var(--accent), var(--accent-2)); color: var(--accent-ink); border-color: transparent; }
.adm-actions button.danger { color: #FFB4AE; border-color: rgba(217, 68, 58, .5); background: rgba(217, 68, 58, .08); }
.adm-actions button:disabled { opacity: .5; cursor: wait; }
.adm-actions.wide button, .adm-actions.wide .adm-btn { flex-basis: 100%; }
.adm-confirm { display: grid; gap: 10px; padding: 14px; border-radius: var(--r-card); border: 1px solid rgba(217, 68, 58, .45); background: rgba(217, 68, 58, .06); }
.adm-confirm label, .adm-field { display: grid; gap: 6px; font-size: 13px; color: var(--fg-2); }
.adm-confirm p { margin: 0; font-size: 13.5px; color: var(--fg-2); line-height: 1.45; }
.adm-confirm textarea, .adm-field input { box-sizing: border-box; width: 100%; padding: 12px; border-radius: 12px; border: 1px solid var(--line-2); background: var(--bg-sunk);
  color: var(--fg); font: 500 16px/1.4 var(--font); outline: none; resize: vertical; }
@keyframes adm-spin { to { transform: rotate(360deg); } }
@keyframes adm-sh { to { background-position: -200% 0; } }
@media (prefers-reduced-motion: reduce) { .adm, .adm-card-wrap { transition: none; } .adm-skel, .adm-loading i { animation: none; } }
/* the app's own sheets (MT5 Key, Unlock) open from the Admin page: above it while it's open */
body.adm-open .sheet-wrap { z-index: 59; }

/* capacity: spots used, clients left, the VPS's live load */
.adm-cap em { grid-column: 1 / -1; font-style: normal; font-weight: 600; color: #9FE3AE; font-size: 14px; }
.adm-cap em.full { color: #FFB4AE; }
.adm-cap small { grid-column: 1 / -1; color: var(--muted); font-size: 12.5px; }
.adm-bar i.hot { background: linear-gradient(90deg, #E5733A, var(--danger)); }
.adm-link { all: unset; color: var(--accent); font-weight: 600; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
.adm-link:focus-visible { outline: 2px solid var(--accent-2); outline-offset: 2px; border-radius: 4px; }
.adm-load { display: grid; gap: 8px; padding-top: 10px; border-top: 1px solid var(--line); }
.adm-load > div { display: grid; grid-template-columns: 38px 1fr auto; gap: 10px; align-items: center; font-size: 13px; color: var(--fg-2); }
.adm-load > div .adm-bar { grid-column: auto; }
.adm-load b { font-variant-numeric: tabular-nums; color: var(--fg); font-size: 13px; }
.adm-load p { margin: 0; font-size: 12.5px; color: var(--muted); }

/* totals across clients */
.adm-totals { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; padding: 14px; border-radius: var(--r-card);
  background: var(--surface); border: 1px solid var(--line-2); }
@media (max-width: 520px) { .adm-totals { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.adm-totals div { display: grid; gap: 2px; min-width: 0; }
.adm-totals small { font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: .05em; }
.adm-totals b { font: 600 16px/1.2 var(--font); font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.adm-totals b.strong { color: var(--accent); }
.adm-export { grid-column: 1 / -1; min-height: 42px; border-radius: 12px; border: 1px solid var(--line-2); background: var(--surface-2);
  color: var(--fg); font: 600 14px var(--font); cursor: pointer; }
.pos { color: #9FE3AE; }
.neg { color: #FFB4AE; }

/* live trades on a client row */
.adm-trades { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--fg-2); font-variant-numeric: tabular-nums; }
.adm-trades i { width: 8px; height: 8px; border-radius: 50%; background: var(--muted); }
.adm-trades.on i { background: var(--good); box-shadow: 0 0 8px rgba(63, 185, 80, .7); animation: adm-pulse 1.6s ease-in-out infinite; }
.adm-trades b { margin-left: auto; }
@keyframes adm-pulse { 50% { opacity: .35; } }
@media (prefers-reduced-motion: reduce) { .adm-trades.on i { animation: none; } }

/* "Trading now": a live board, one row per MT5 with open trades, the client's Telegram first */
.adm-board { display: grid; gap: 8px; }
.adm-live { all: unset; box-sizing: border-box; display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 14px; cursor: pointer;
  background: var(--surface); border: 1px solid var(--line-2); transition: border-color var(--t-base); }
.adm-live:hover { border-color: rgba(201, 204, 209, .45); }
.adm-live:focus-visible { outline: 2px solid var(--accent-2); outline-offset: 2px; }
.adm-live-who { display: grid; gap: 2px; min-width: 0; flex: 1; }
.adm-live-who b { font-size: 15.5px; overflow-wrap: anywhere; }
.adm-live-who b::before { content: ''; display: inline-block; width: 8px; height: 8px; margin-right: 8px; border-radius: 50%; vertical-align: 2px;
  background: var(--good); box-shadow: 0 0 8px rgba(63, 185, 80, .7); animation: adm-pulse 1.6s ease-in-out infinite; }
.adm-live-who small, .adm-live-num small { font-size: 12px; color: var(--muted); overflow-wrap: anywhere; }
.adm-live-num { display: grid; gap: 2px; justify-items: end; text-align: right; font-variant-numeric: tabular-nums; }
.adm-live-num b { font-size: 16px; }
@media (prefers-reduced-motion: reduce) { .adm-live-who b::before { animation: none; } }

/* Admin tools: My access, Partners */
.adm-code { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 14px; background: var(--surface); border: 1px solid var(--line-2); }
.adm-code div { display: grid; gap: 2px; min-width: 0; flex: 1; }
.adm-code small { font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: .06em; }
.adm-code b { font: 600 18px/1.3 var(--mono, ui-monospace, monospace); letter-spacing: .08em; overflow-wrap: anywhere; }
.adm-code b.url { font-size: 13px; letter-spacing: 0; }
.adm-code button, .adm-prow > button:last-child { min-height: 44px; padding: 0 14px; border-radius: 12px; border: 1px solid var(--line-2);
  background: var(--surface-2); color: var(--fg); font: 600 13px var(--font); cursor: pointer; white-space: nowrap; }
.adm-broker { margin: 0; padding: 12px 14px 14px; border-radius: 14px; border: 1px solid var(--line-2); display: grid; gap: 10px; }
.adm-broker legend { padding: 0 6px; font-weight: 600; }
.adm-broker legend label, .adm-check { display: flex; align-items: center; gap: 8px; min-height: 44px; cursor: pointer; }
.adm-field textarea { box-sizing: border-box; width: 100%; padding: 12px; border-radius: 12px; border: 1px solid var(--line-2); background: var(--bg-sunk);
  color: var(--fg); font: 16px/1.4 var(--font); resize: vertical; }
.adm-prow { display: flex; gap: 8px; align-items: stretch; }
.adm-prow > button:first-child { all: unset; box-sizing: border-box; flex: 1; display: grid; gap: 2px; padding: 12px 14px; border-radius: 14px; cursor: pointer;
  background: var(--surface); border: 1px solid var(--line-2); min-width: 0; }
.adm-prow small { color: var(--muted); font-size: 12px; overflow-wrap: anywhere; }
.adm-prow.off { opacity: .55; }
.adm-empty { padding: 18px; border-radius: 16px; border: 1px dashed var(--line-2); display: grid; gap: 6px; }
.adm-empty p { margin: 0; color: var(--fg-2); font-size: 14px; line-height: 1.5; }
.adm-guide { margin: 0; padding-left: 20px; display: grid; gap: 8px; color: var(--fg-2); font-size: 14px; line-height: 1.5; }
.adm-guide code, .adm-sub code { font: 12.5px var(--mono, ui-monospace, monospace); padding: 1px 6px; border-radius: 6px; background: var(--bg-sunk); }
.adm-sub.warn { color: var(--fg); }

/* Lessons list (Admin tools › Learn tab) and the group picker */
.adm-prow > div:first-child { flex: 1; min-width: 0; display: grid; gap: 2px; padding: 10px 0; }
.adm-prow > div:first-child b { overflow-wrap: anywhere; }
.adm-field select { box-sizing: border-box; width: 100%; min-height: 46px; padding: 0 12px; border-radius: 12px; border: 1px solid var(--line-2);
  background: var(--bg-sunk); color: var(--fg); font: 500 16px var(--font); }