/* ==========================================================================
   Global Markets — overlay dialogs + the slim inline notice
   The deposit gate, the bot gate and the bot-token gate all read as
   institutional dialogs, not promotions: one flat elevated surface, hairline
   borders, a single thin gold rule above the headline, quiet line icons.
   No gradients, no inset glows, no neon shadows, no blurred scrims.
   ========================================================================== */

/* ==========================================================================
   Scrim
   ========================================================================== */
.opt-modal-backdrop{
  position:fixed;inset:0;z-index:200;
  /* A plain dark scrim — deliberately unblurred: a full-screen blur re-samples
     every frame and tears the compositor on mobile GPUs as the dialog opens. */
  background:rgba(7,9,11,0.80);
  display:flex;align-items:center;justify-content:center;
  padding:24px;
  animation:optFadeIn 160ms var(--ease);
}
.bot-opt-backdrop{background:rgba(7,9,11,0.84)}

@keyframes optFadeIn{from{opacity:0}to{opacity:1}}
@keyframes optRise{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}

/* ==========================================================================
   Dialog shell
   ========================================================================== */
.opt-modal{
  position:relative;
  width:100%;max-width:520px;
  background:var(--surface-2);
  border:1px solid var(--border-2);
  border-radius:var(--r-lg);
  padding:30px 26px 22px;
  box-shadow:var(--shadow-3);
  animation:optRise 200ms var(--ease);
  max-height:calc(100vh - 48px);overflow-y:auto;
}

.opt-modal-close{
  position:absolute;top:12px;right:12px;
  width:32px;height:32px;border-radius:var(--r-btn);
  background:transparent;border:1px solid var(--border);
  color:var(--text-mute);cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  transition:color var(--t-fast),border-color var(--t-fast),background var(--t-fast),transform var(--t-fast);
}
.opt-modal-close:hover{color:var(--text);border-color:var(--border-3);background:var(--surface-3)}
.opt-modal-close:active{transform:scale(0.985)}

/* A small squared tile with a quiet line icon — never a large filled medallion. */
.opt-modal-icon,
.bot-opt-icon{
  width:40px;height:40px;border-radius:var(--r-sm);
  background:var(--surface-3);border:1px solid var(--border);
  color:var(--green-quiet);
  display:flex;align-items:center;justify-content:center;
  margin:0 auto 16px;
}
/* The token gate is a lock, not an invitation — amber is the warning tint. */
.bot-opt-icon.warn{
  color:var(--amber);background:var(--amber-soft);
  border-color:rgba(201,162,39,0.26);
}

/* Headline. The one thin gold hairline above it is the dialog's only ornament. */
.opt-modal h2{
  margin:0 0 8px;text-align:center;
  font-size:21px;font-weight:620;letter-spacing:-0.022em;color:var(--text);
}
.opt-modal h2::before{
  content:'';display:block;width:52px;height:1px;margin:0 auto 14px;
  background:linear-gradient(90deg,transparent,var(--gold-line),transparent);
}
.opt-accent{color:var(--green)}

.opt-modal-sub,
.bot-opt-sub{
  color:var(--text-dim);text-align:center;
  font-size:13.5px;line-height:1.6;margin:0 0 20px;
}

/* ==========================================================================
   Deposit gate — current vs. optimum target
   ========================================================================== */
.opt-modal-stats{
  display:flex;align-items:center;justify-content:center;gap:10px;
  margin:0 0 12px;
}
.opt-stat{
  flex:1;min-width:0;
  background:var(--surface);border:1px solid var(--border);
  border-radius:var(--r-sm);padding:12px 14px;text-align:center;
}
/* The target is the only tinted block in the dialog. */
.opt-stat.target{background:var(--green-soft);border-color:rgba(32,216,137,0.22)}
.opt-stat .l{
  font-size:10.5px;color:var(--text-mute);font-weight:560;
  text-transform:uppercase;letter-spacing:0.07em;margin-bottom:5px;
}
.opt-stat .v{
  font-size:19px;font-weight:620;letter-spacing:-0.024em;color:var(--text);
  font-variant-numeric:tabular-nums;font-feature-settings:"tnum" 1;
}
.opt-stat.target .v{color:var(--green)}
.opt-arrow{color:var(--text-mute);flex-shrink:0}

/* The shortfall is a debit, so it reads quietly in red — not as a celebration. */
.opt-modal-needed{
  background:var(--surface);
  border:1px solid rgba(232,93,104,0.20);
  color:var(--text-dim);
  text-align:center;padding:10px 14px;border-radius:var(--r-sm);
  margin-bottom:18px;font-size:13.5px;line-height:1.5;
}
.opt-modal-needed strong{
  color:var(--red-quiet);font-weight:620;font-size:15px;
  font-variant-numeric:tabular-nums;font-feature-settings:"tnum" 1;
}

.opt-benefits{
  list-style:none;padding:0;margin:0 0 20px;
  display:flex;flex-direction:column;gap:9px;
}
.opt-benefits li{
  display:flex;align-items:center;gap:10px;
  color:var(--text-dim);font-size:13px;
}
.opt-benefits li svg{color:var(--green-quiet);flex-shrink:0}

.opt-modal-cta{display:flex;gap:9px;flex-wrap:wrap}
.opt-btn-primary{flex:1;min-width:200px;justify-content:center;padding:11px 18px}
.opt-btn-later{flex:0 0 auto;padding:11px 16px}

.opt-fine{
  color:var(--text-mute);text-align:center;font-size:11.5px;
  margin:14px 0 0;line-height:1.5;
}
.opt-fine strong{color:var(--text-dim);font-weight:600}

@media (max-width:480px){
  .opt-modal{padding:24px 18px 18px}
  .opt-modal h2{font-size:19px}
  .opt-modal-stats{flex-direction:column;gap:8px}
  .opt-modal-stats .opt-stat{width:100%}
  .opt-arrow{transform:rotate(90deg)}
  .opt-modal-cta{flex-direction:column}
  .opt-btn-primary,.opt-btn-later{width:100%;min-width:0}
}

/* ==========================================================================
   Bot variant — "Minimum Trading Balance Required" / "Bot Token Required"
   ========================================================================== */
.bot-opt-modal{max-width:440px;padding:30px 24px 20px;text-align:center}
.bot-opt-brand{color:var(--green-quiet);font-weight:600}

.bot-opt-rows{display:flex;flex-direction:column;gap:8px;margin:0 0 16px}
.bot-opt-row{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:12px 14px;text-align:left;
  background:var(--surface);border:1px solid var(--border);
  border-radius:var(--r-sm);
}
.bot-opt-row.needed{background:var(--red-soft);border-color:rgba(232,93,104,0.24)}
.bot-opt-row .lbl{color:var(--text-dim);font-size:13px}
.bot-opt-row .val{
  font-size:18px;font-weight:620;letter-spacing:-0.022em;color:var(--text);
  font-variant-numeric:tabular-nums;font-feature-settings:"tnum" 1;
}
.bot-opt-row .val.pos{color:var(--green-quiet)}
.bot-opt-row .val.neg{color:var(--red-quiet)}

.bot-opt-foot{color:var(--text-dim);font-size:13px;margin:0 0 16px;line-height:1.55}
.bot-opt-foot.fine{color:var(--text-mute);font-size:11.5px;margin:12px 0 0}
.bot-opt-foot strong{color:var(--text-dim);font-weight:600}

/* The one primary action: a solid emerald button with dark text. No glow. */
.bot-opt-deposit{
  display:flex;align-items:center;justify-content:center;gap:9px;
  width:100%;margin-bottom:9px;
  background:var(--green);color:#04150C;
  font-family:inherit;font-weight:620;font-size:14.5px;letter-spacing:-0.005em;
  padding:12px 18px;border-radius:var(--r-btn);
  border:1px solid transparent;text-decoration:none;cursor:pointer;
  line-height:1.3;
  transition:background var(--t-fast),transform var(--t-fast);
}
.bot-opt-deposit:hover{background:#33E296}
.bot-opt-deposit:active{transform:scale(0.985)}
.bot-opt-deposit svg{flex-shrink:0}

.bot-opt-cancel{
  width:100%;background:transparent;border:1px solid var(--border-2);
  color:var(--text-dim);font-family:inherit;font-weight:560;font-size:13.5px;
  padding:11px 16px;border-radius:var(--r-btn);cursor:pointer;
  transition:background var(--t-fast),border-color var(--t-fast),color var(--t-fast),transform var(--t-fast);
}
.bot-opt-cancel:hover{color:var(--text);border-color:var(--border-3);background:rgba(255,255,255,0.03)}
.bot-opt-cancel:active{transform:scale(0.985)}
.bot-opt-cancel:disabled{opacity:0.45;cursor:not-allowed;transform:none}
.bot-opt-cancel + .bot-opt-cancel{margin-top:8px}

@media (max-width:480px){
  .bot-opt-modal{padding:26px 18px 18px}
  .bot-opt-row{padding:11px 13px}
  .bot-opt-row .val{font-size:17px}
}

/* ==========================================================================
   Bot-token gate — price row, divider, token field
   ========================================================================== */
.bot-token-price{
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  background:var(--surface);border:1px solid var(--border);
  border-radius:var(--r-sm);padding:11px 14px;margin:4px 0 14px;
}
.bot-token-price .l{color:var(--text-dim);font-size:12.5px}
.bot-token-price .v{
  font-size:17px;font-weight:620;letter-spacing:-0.022em;color:var(--green);
  font-variant-numeric:tabular-nums;font-feature-settings:"tnum" 1;
}

.bot-token-or{display:flex;align-items:center;gap:10px;margin:16px 0 10px}
.bot-token-or::before,
.bot-token-or::after{content:'';flex:1;height:1px;background:var(--border)}
.bot-token-or span{
  color:var(--text-mute);font-size:10.5px;font-weight:560;
  letter-spacing:0.07em;text-transform:uppercase;
}

.bot-token-input{
  width:100%;margin:0 0 10px;
  background:var(--surface-sunk);border:1px solid var(--border-2);color:var(--text);
  padding:12px 16px;border-radius:var(--r-btn);
  font-family:var(--font-mono);font-size:15px;letter-spacing:0.14em;
  text-transform:uppercase;text-align:center;
  transition:border-color var(--t-fast),background var(--t-fast),box-shadow var(--t-fast);
}
.bot-token-input::placeholder{color:var(--text-mute);letter-spacing:0.03em;text-transform:none}
.bot-token-input:hover{border-color:var(--border-3)}
.bot-token-input:focus{
  outline:none;border-color:rgba(32,216,137,0.5);
  box-shadow:0 0 0 3px var(--green-glow);background:var(--surface-2);
}

/* ==========================================================================
   Inline notice (trade / bot / dashboard) — a quiet strip, not a coloured band
   ========================================================================== */
.opt-banner{
  display:flex;align-items:center;justify-content:space-between;gap:14px;
  flex-wrap:wrap;margin-bottom:16px;padding:11px 14px;
  background:var(--surface-2);border:1px solid var(--border);
  border-radius:var(--r-card);
  transition:border-color var(--t);
}
.opt-banner:hover{border-color:var(--border-2)}
.opt-banner-left{display:flex;align-items:center;gap:11px;flex:1;min-width:240px}
.opt-banner-left > svg{flex-shrink:0;color:var(--green-quiet)}
.opt-banner-ico{
  width:30px;height:30px;flex-shrink:0;border-radius:var(--r-xs);
  background:var(--surface-3);border:1px solid var(--border);
  color:var(--green-quiet);
  display:flex;align-items:center;justify-content:center;
}
.opt-banner strong{
  display:block;font-size:13px;font-weight:600;
  color:var(--text);margin-bottom:2px;
}
.opt-banner .muted{display:block;font-size:12.5px;color:var(--text-dim);line-height:1.5}

/* Required variant: the same strip, amber icon, amber-tinted hairline. */
.opt-banner-required{border-color:rgba(201,162,39,0.22)}
.opt-banner-required .opt-banner-ico{
  color:var(--amber);background:var(--amber-soft);
  border-color:rgba(201,162,39,0.26);
}
.opt-banner-required > .opt-banner-left > svg{color:var(--amber)}

@media (max-width:640px){
  .opt-banner{padding:11px 12px}
  .opt-banner .btn{width:100%}
}

/* ==========================================================================
   Reduced motion
   ========================================================================== */
@media (prefers-reduced-motion: reduce){
  .opt-modal-backdrop,.opt-modal{animation:none}
}