/* Investor cabinet — extends /partner/partner.css */

.how-card{margin-bottom:22px}
.how-steps{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin:8px 0 6px}
@media(max-width:720px){.how-steps{grid-template-columns:1fr}}
.how-step{display:flex;gap:12px;align-items:flex-start}
.how-step p{margin:4px 0 0}
.how-n{flex:none;width:30px;height:30px;border-radius:9px;display:grid;place-items:center;font-weight:800;
  background:rgba(34,168,240,.14);color:var(--blue-2);border:1px solid rgba(34,168,240,.3)}
.how-step b{font-size:14.5px}
.how-note{margin-top:10px}

.inv-flow{margin-top:8px}
.inv-flow b{color:var(--text)}
.inv-price{margin-top:6px}
.inv-min{margin-top:4px}
.inv-min b{color:var(--text)}
.inv-locked{font-size:13px;color:var(--muted);border:1px solid rgba(245,179,0,.3);background:rgba(245,179,0,.07);border-radius:10px;padding:9px 12px}
.inv-locked b{color:var(--amber);font-variant-numeric:tabular-nums}
.inv-broken{font-size:13px;color:var(--muted);border:1px solid rgba(237,66,69,.3);background:rgba(237,66,69,.07);border-radius:10px;padding:9px 12px}
.inv-broken b{color:#ff9a9c;font-variant-numeric:tabular-nums}

.inv-mine{margin-top:12px;border:1px solid var(--stroke);border-radius:12px;padding:12px 14px;background:rgba(87,242,135,.05)}
.inv-mine-h{font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:var(--green);margin-bottom:8px}
.inv-mine-grid{display:flex;flex-wrap:wrap;gap:6px 18px}
.inv-mine-grid b{font-size:15px;font-variant-numeric:tabular-nums}
.inv-mine-win{margin-top:8px}

/* auto-payout / disabled buttons in the topbar */
.top-right .btn[disabled]{opacity:.45;cursor:not-allowed}
.top-right{flex-wrap:wrap}

/* custom number-input modal (replaces the browser prompt) */
.iv-overlay{ position:fixed; inset:0; z-index:100; display:grid; place-items:center; padding:20px; background:rgba(4,7,12,.66); -webkit-backdrop-filter:blur(3px); backdrop-filter:blur(3px); }
.iv-overlay[hidden]{ display:none; }
.iv-modal{ width:100%; max-width:420px; background:var(--panel); border:1px solid var(--stroke-2); border-radius:16px; padding:22px; box-shadow:0 30px 80px -30px rgba(0,0,0,.85); animation:ivIn .16s ease-out; }
@keyframes ivIn{ from{ opacity:0; transform:translateY(8px) scale(.98) } to{ opacity:1; transform:none } }
.iv-modal h3{ margin:0 0 6px; font-size:18px; }
.iv-m-info{ color:var(--muted); font-size:13px; line-height:1.5; white-space:pre-line; margin-bottom:12px; }
.iv-m-info[hidden]{ display:none; }
.iv-modal input{ width:100%; background:var(--bg); border:1px solid var(--stroke-2); color:var(--text); font:inherit; font-size:16px; padding:12px 14px; border-radius:10px; -moz-appearance:textfield; appearance:textfield; }
.iv-modal input:focus{ outline:none; border-color:var(--blue); }
.iv-modal input::-webkit-outer-spin-button,
.iv-modal input::-webkit-inner-spin-button{ -webkit-appearance:none; margin:0; }
.iv-m-err{ color:#ff8a8d; font-size:13px; margin-top:8px; }
.iv-m-actions{ display:flex; justify-content:flex-end; gap:10px; margin-top:18px; }

/* ===================================================================
   MOBILE RESPONSIVE — investor cabinet
   Supplements partner.css responsive rules for investor-specific elements.
   =================================================================== */

@media(max-width:600px){
  /* Number-input modal: less padding, touch-friendly actions */
  .iv-overlay{padding:12px}
  .iv-modal{padding:16px}
  .iv-m-actions{gap:8px}
  .iv-m-actions .btn{min-height:40px}

  /* "Your invites" stat grid: tighter gaps */
  .inv-mine-grid{gap:4px 12px}

  /* Server-card action area: buy button full width on phone */
  .vcard .vcard-actions .btn.ghost{width:100%;justify-content:center;min-height:40px}

  /* Investor topbar action buttons: stay comfortable when wrapped */
  #inv-topup,#inv-withdraw{min-height:36px}
}

@media(max-width:400px){
  /* how-it-works note: slightly smaller so it breathes */
  .how-note{font-size:12px;line-height:1.5}
}