/* ═══ components.css ═══ */

/* ── Кнопки ── */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.4rem;
  padding:.65rem 1.5rem;border-radius:var(--r-sm);font-family:var(--font);font-weight:700;
  font-size:.88rem;cursor:pointer;border:none;transition:all .18s;white-space:nowrap}
.btn-primary{background:var(--cyan);color:#06080f}
.btn-primary:hover{background:#00bbee;transform:translateY(-2px);box-shadow:var(--glow-cyan)}
.btn-outline{background:transparent;border:1px solid var(--border2);color:var(--text)}
.btn-outline:hover{border-color:var(--cyan);color:var(--cyan)}
.btn-ghost{background:none;border:none;color:var(--muted);cursor:pointer;font-family:var(--font);font-size:.85rem;padding:.4rem .7rem}
.btn-ghost:hover{color:var(--text)}
.btn-danger{background:var(--red-dim);border:1px solid rgba(255,53,96,.3);color:var(--red)}
.btn-danger:hover{background:rgba(255,53,96,.2)}
.btn:disabled{opacity:.38;pointer-events:none}

.btn-sm{display:inline-flex;align-items:center;gap:.3rem;padding:.32rem .8rem;border-radius:var(--r-sm);
  font-size:.76rem;font-family:var(--font);font-weight:600;cursor:pointer;
  border:1px solid var(--border2);background:none;color:var(--muted);transition:all .15s}
.btn-sm:hover{border-color:var(--cyan);color:var(--cyan)}
.btn-sm.ok{border-color:rgba(16,240,144,.3);color:var(--green)}
.btn-sm.ok:hover{background:var(--green-dim)}
.btn-sm.bad{border-color:rgba(255,53,96,.3);color:var(--red)}
.btn-sm.bad:hover{background:var(--red-dim)}

/* ── Бейджи статуса ── */
.badge{display:inline-flex;align-items:center;gap:.32rem;padding:.18rem .65rem;
  border-radius:50px;font-size:.68rem;font-family:var(--mono);font-weight:700;letter-spacing:.04em;white-space:nowrap}
.badge::before{content:'';width:5px;height:5px;border-radius:50%;background:currentColor;flex-shrink:0}
.b-running {background:var(--green-dim);color:var(--green);border:1px solid rgba(16,240,144,.25)}
.b-stopped {background:rgba(86,104,126,.1);color:var(--muted);border:1px solid var(--border)}
.b-creating{background:var(--yellow-dim);color:var(--yellow);border:1px solid rgba(251,191,36,.25)}
.b-error   {background:var(--red-dim);color:var(--red);border:1px solid rgba(255,53,96,.25)}
.b-admin   {background:var(--cyan-dim);color:var(--cyan);border:1px solid rgba(0,212,255,.25)}
.b-user    {background:rgba(86,104,126,.1);color:var(--muted);border:1px solid var(--border)}
.b-active  {background:var(--green-dim);color:var(--green);border:1px solid rgba(16,240,144,.25)}
.b-blocked {background:var(--red-dim);color:var(--red);border:1px solid rgba(255,53,96,.25)}
.b-deposit {background:var(--green-dim);color:var(--green);border:1px solid rgba(16,240,144,.25)}
.b-debit   {background:var(--red-dim);color:var(--red);border:1px solid rgba(255,53,96,.25)}
.b-refund  {background:var(--yellow-dim);color:var(--yellow);border:1px solid rgba(251,191,36,.25)}

/* ── Формы ── */
.fg{margin-bottom:1rem}
.fg label{display:block;font-size:.7rem;color:var(--muted);text-transform:uppercase;letter-spacing:.07em;margin-bottom:.38rem;font-weight:600}
.fg input,.fg select,.fg textarea{width:100%;background:var(--bg2);border:1px solid var(--border2);color:var(--text);
  padding:.65rem .95rem;border-radius:var(--r-sm);font-family:var(--font);font-size:.88rem;outline:none;transition:border-color .18s,box-shadow .18s}
.fg input:focus,.fg select:focus,.fg textarea:focus{border-color:var(--cyan);box-shadow:0 0 0 3px rgba(0,212,255,.07)}
.fg select option{background:var(--surface)}
.ferr{color:var(--red);font-size:.78rem;margin-top:.6rem;padding:.55rem .9rem;
  background:var(--red-dim);border-radius:var(--r-sm);border-left:3px solid var(--red);display:none}
.ferr.show{display:block}

/* ── Модалки ── */
.modal-overlay{display:none;position:fixed;inset:0;background:rgba(6,8,15,.9);
  backdrop-filter:blur(8px);z-index:200;align-items:center;justify-content:center;padding:1rem}
.modal-overlay.open{display:flex}
.modal{background:var(--surface);border:1px solid var(--border2);border-radius:var(--r-xl);
  padding:2rem;width:100%;max-width:440px;animation:fadeUp .22s ease;position:relative}
.modal-wide{max-width:540px}
.modal h2{font-size:1.2rem;font-weight:800;margin-bottom:1.4rem;letter-spacing:-.3px}
.modal-x{position:absolute;top:1rem;right:1rem;background:none;border:none;
  color:var(--muted);font-size:1.2rem;cursor:pointer;line-height:1;padding:.2rem}
.modal-x:hover{color:var(--text)}
.modal-foot{display:flex;gap:.7rem;margin-top:1.4rem}
.modal-foot .btn{flex:1}

/* ── Тосты ── */
#toasts{position:fixed;bottom:1.4rem;right:1.4rem;z-index:9999;display:flex;flex-direction:column;gap:.45rem;pointer-events:none}
.toast{background:var(--surface2);border:1px solid var(--border2);border-radius:var(--r-md);
  padding:.75rem 1.1rem;font-size:.84rem;min-width:240px;max-width:340px;
  animation:fadeUp .25s ease;display:flex;align-items:center;gap:.5rem;pointer-events:all}
.toast.success{border-left:3px solid var(--green)}
.toast.error  {border-left:3px solid var(--red)}
.toast.info   {border-left:3px solid var(--cyan)}
.toast.warn   {border-left:3px solid var(--yellow)}

/* ── Прогресс ── */
.bar{height:3px;background:var(--border);border-radius:2px;overflow:hidden;margin-top:.3rem}
.bar-fill{height:100%;border-radius:2px;transition:width .5s;background:var(--cyan)}
.bar-fill.warn  {background:var(--yellow)}
.bar-fill.danger{background:var(--red)}

/* ── Таблицы ── */
.tbl-wrap{overflow-x:auto;border:1px solid var(--border);border-radius:var(--r-md)}
table{width:100%;border-collapse:collapse;font-size:.85rem}
thead tr{border-bottom:1px solid var(--border2)}
th{text-align:left;padding:.75rem 1rem;font-size:.68rem;text-transform:uppercase;letter-spacing:.07em;color:var(--muted);font-weight:600}
tbody tr{border-bottom:1px solid rgba(28,36,56,.7);transition:background .12s}
tbody tr:last-child{border-bottom:none}
tbody tr:hover{background:rgba(255,255,255,.016)}
td{padding:.82rem 1rem;vertical-align:middle}

/* ── Стат-карточки ── */
.stats-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(155px,1fr));gap:.9rem;margin-bottom:2rem}
.stat-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-md);padding:1.1rem 1.2rem}
.stat-v{font-size:1.75rem;font-weight:800;font-family:var(--mono);color:var(--cyan);line-height:1}
.stat-l{font-size:.68rem;color:var(--muted);text-transform:uppercase;letter-spacing:.06em;margin-top:.28rem}

/* ── OS выбор ── */
.os-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:.6rem;margin-top:.4rem}
.os-opt{border:1px solid var(--border2);border-radius:var(--r-sm);padding:.75rem .4rem;
  text-align:center;cursor:pointer;transition:all .18s;font-size:.78rem;color:var(--muted)}
.os-opt .oi{font-size:1.35rem;display:block;margin-bottom:.25rem}
.os-opt:hover{border-color:var(--cyan);color:var(--text)}
.os-opt.sel{border-color:var(--cyan);background:var(--cyan-dim);color:var(--cyan)}

/* ── Карточки ── */
.card{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-lg);padding:1.4rem;transition:border-color .2s}
.card:hover{border-color:var(--border2)}
.card-ttl{font-size:.68rem;font-weight:600;text-transform:uppercase;letter-spacing:.08em;color:var(--cyan);margin-bottom:1rem}

/* ── Кошелёк ── */
.wallet-chip{display:flex;align-items:center;gap:.45rem;font-family:var(--mono);font-size:.84rem;
  color:var(--green);background:var(--green-dim);border:1px solid rgba(16,240,144,.22);
  padding:.3rem .85rem;border-radius:50px;cursor:pointer;transition:all .18s}
.wallet-chip:hover{background:rgba(16,240,144,.18)}
.wallet-chip::before{content:'₽';font-weight:700}

.creds{background:var(--bg);border:1px solid var(--border2);border-radius:var(--r-sm);
  padding:.95rem;font-family:var(--mono);font-size:.8rem;line-height:2}
.creds .k{color:var(--muted2)}.creds .v{color:var(--cyan)}

/* ── Responsive ── */
@media(max-width:640px){
  .modal{padding:1.4rem}.btn{padding:.6rem 1.1rem}
  .stats-row{grid-template-columns:repeat(2,1fr)}
  .os-grid{grid-template-columns:repeat(3,1fr)}
}