/* ============================================================
   LeadGuard — админка учётных записей. Дизайн-система «Точность».
   Базовый слой (токены, топбар, .btn, .seg, .toast, фон-сетка,
   скроллбар, фокус-кольца) — в base.css. Здесь — экран админки:
   вкладки «Создать учётку / Сбросить пароль» и одиночная форма.
   ============================================================ */

/* ── рабочая область ── */
.adm-scroll { flex:1; overflow:auto; padding:34px 18px 56px; position:relative; z-index:1; }
.adm-wrap { width:100%; max-width:540px; margin:0 auto; display:flex; flex-direction:column; gap:16px; }

/* кто вошёл (конкретный логин), справа в топбаре */
.whoami { display:inline-flex; align-items:center; gap:7px; height:34px; padding:0 12px; border-radius:999px;
  background:var(--field); border:1px solid var(--line); font-size:13px; font-weight:500; color:var(--muted);
  white-space:nowrap; max-width:220px; overflow:hidden; }
.whoami::before { content:""; width:7px; height:7px; border-radius:50%; flex:none;
  background:var(--ok); box-shadow:0 0 0 3px color-mix(in oklch, var(--ok) 22%, transparent); }
.whoami b { color:var(--text); font-weight:600; font-family:'JetBrains Mono',monospace; overflow:hidden; text-overflow:ellipsis; }
.whoami .empty { color:var(--ph); }

/* ── вкладки действий ── */
.seg-full { display:flex; gap:3px; padding:4px; border-radius:12px; background:var(--field); border:1px solid var(--line); }
.seg-full button { flex:1; height:40px; border-radius:8px; background:transparent; font-size:14px; font-weight:600;
  color:var(--faint); transition:background-color .2s, color .2s, box-shadow .2s; }
.seg-full button:hover { color:var(--muted); }
.seg-full button[data-on="true"] { background:var(--surface); color:var(--text); box-shadow:0 2px 6px -2px rgba(20,24,32,.12), 0 1px 2px rgba(20,24,32,.06); }
[data-theme="dark"] .seg-full button[data-on="true"] { background:#2A2F38; color:var(--accent); box-shadow:0 2px 8px -2px rgba(0,0,0,.5); }

/* ── карточка формы ── */
.card { position:relative; background:var(--surface); border:1px solid var(--line); border-radius:18px;
  padding:26px 26px 24px; box-shadow:0 1px 2px rgba(20,24,32,.05), 0 12px 32px -20px rgba(20,24,32,.22);
  display:flex; flex-direction:column; gap:18px; animation:cardIn .34s cubic-bezier(.2,.7,.2,1) both; }
.card::before { content:""; position:absolute; inset:0; border-radius:18px; pointer-events:none;
  background:radial-gradient(120% 90% at 100% 0%, var(--accent-soft), transparent 55%); opacity:.7; }
.card > * { position:relative; }
@keyframes cardIn { from { opacity:0; transform:translateY(10px); } to { opacity:1; transform:translateY(0); } }

.field { display:flex; flex-direction:column; gap:8px; animation:fieldIn .4s ease both; }
.card .field:nth-child(1) { animation-delay:.03s; }
.card .field:nth-child(2) { animation-delay:.07s; }
.card .field:nth-child(3) { animation-delay:.11s; }
@keyframes fieldIn { from { opacity:0; transform:translateY(6px); } to { opacity:1; transform:translateY(0); } }

.lbl2 { font-size:13px; font-weight:600; color:var(--muted); letter-spacing:-.01em; }

.text-in { width:100%; height:42px; padding:0 13px; border:1px solid var(--line-strong); border-radius:10px;
  background:var(--field); color:var(--text); font-size:14.5px; outline:none; transition:border-color .18s,box-shadow .18s,background-color .18s; }
.text-in::placeholder { color:var(--ph); }
.text-in:focus { border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-ring); background:var(--surface); }
select.text-in { cursor:pointer; appearance:none;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23888' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'><path d='M6 9l6 6 6-6'/></svg>");
  background-repeat:no-repeat; background-position:right 13px center; padding-right:38px; }

/* ── строка пароля: поле + «Сгенерировать» + копировать ── */
.pwrow { display:flex; gap:8px; align-items:stretch; }
.pwrow .text-in { flex:1; min-width:0; font-family:'JetBrains Mono',monospace; letter-spacing:.02em; }
.pwrow .btn { height:42px; white-space:nowrap; flex:none; }
.pwrow .iconbtn { width:42px; height:42px; flex:none; }
.pwrow .iconbtn.done { color:var(--ok); border-color:var(--ok); }

.btn.wide { width:100%; justify-content:center; height:44px; font-size:15px; margin-top:2px; }

/* ── блок результата (учётка создана / пароль сброшен) ── */
.res:empty { display:none; }
.res-card { border:1px solid var(--accent); border-radius:14px; overflow:hidden; background:var(--accent-soft);
  animation:cardIn .3s ease both; }
.res-head { display:flex; align-items:center; gap:8px; padding:12px 16px; font-weight:600; font-size:14px; color:var(--text);
  border-bottom:1px solid color-mix(in oklch, var(--accent) 25%, transparent); }
.res-head svg { width:18px; height:18px; color:var(--accent); flex:none; }
.res-body { padding:14px 16px; display:flex; flex-direction:column; gap:12px; background:var(--surface); }
.res-row { display:flex; align-items:center; gap:10px; }
.res-k { width:74px; flex:none; font-size:12px; font-weight:600; text-transform:uppercase; letter-spacing:.04em; color:var(--faint); }
.res-v { flex:1; min-width:0; font-family:'JetBrains Mono',monospace; font-size:15px; color:var(--text); word-break:break-all;
  padding:9px 12px; background:var(--field); border:1px solid var(--line); border-radius:9px; }
.res-v.big { font-size:18px; letter-spacing:.01em; }
.res-note { padding:0 16px 14px; background:var(--surface); font-size:12.5px; color:var(--faint); line-height:1.5; }
.res-err { border:1px solid oklch(0.62 0.19 25); border-radius:13px; background:oklch(0.62 0.19 25 / .08);
  padding:13px 16px; display:flex; align-items:center; gap:9px; font-size:14px; color:var(--text); animation:cardIn .3s ease both; }
.res-err svg { width:18px; height:18px; color:oklch(0.62 0.19 25); flex:none; }

/* копировать (квадратная) */
.copybtn { width:42px; height:42px; flex:none; border:1px solid var(--line-strong); border-radius:9px; background:var(--surface);
  color:var(--faint); display:grid; place-items:center; transition:color .15s,border-color .15s,transform .08s; }
.copybtn:hover { color:var(--accent); border-color:var(--accent); }
.copybtn:active { transform:scale(.95); }
.copybtn.done { color:var(--ok); border-color:var(--ok); }

.note { font-size:12.5px; color:var(--faint); line-height:1.55; }
.note .mono { font-family:'JetBrains Mono',monospace; font-size:12.5px; color:var(--muted); }
.hidden { display:none !important; }

/* ── Окно входа ── */
.auth { position:fixed; inset:0; z-index:200; display:none; align-items:center; justify-content:center;
  padding:24px; background:radial-gradient(58% 46% at 50% 32%, var(--accent-soft), transparent 70%), var(--bg); }
body.locked .auth { display:flex; }
body.locked .app { display:none; }
.auth::before { content:""; position:absolute; inset:0; pointer-events:none;
  background-image:linear-gradient(var(--grid) 1px, transparent 1px), linear-gradient(90deg, var(--grid) 1px, transparent 1px);
  background-size:34px 34px; mask-image:radial-gradient(120% 80% at 50% 0%, #000 30%, transparent 75%); }
.auth-card { position:relative; width:100%; max-width:368px; background:var(--surface); border:1px solid var(--line);
  border-radius:18px; padding:32px 30px; box-shadow:var(--shadow-pop); text-align:center;
  animation:cardIn .4s cubic-bezier(.2,.7,.2,1) both; }
.auth-logo { width:52px; height:52px; border-radius:15px; background:linear-gradient(150deg, var(--accent-hover), var(--accent));
  display:grid; place-items:center; margin:0 auto 16px; box-shadow:0 12px 28px -8px var(--accent-ring); }
.auth-logo svg { width:25px; height:25px; }
.auth-card h1 { font-size:22px; font-weight:700; letter-spacing:-.02em; margin-bottom:5px; }
.auth-card p { font-size:13.5px; color:var(--faint); line-height:1.5; margin-bottom:22px; }
.auth-field { display:flex; flex-direction:column; gap:10px; }
.auth-field input { height:46px; padding:0 14px; border:1px solid var(--line-strong); border-radius:11px;
  background:var(--field); color:var(--text); font-size:15px; outline:none; transition:border-color .18s,box-shadow .18s; }
.auth-field input:focus { border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-ring); background:var(--surface); }
.auth-field .btn { width:100%; height:46px; justify-content:center; font-size:15px; margin-top:2px; }
.pass-wrap { position:relative; }
.pass-wrap input { width:100%; padding-right:44px; }
.eye { position:absolute; right:7px; top:50%; transform:translateY(-50%); width:34px; height:34px; border-radius:9px;
  display:grid; place-items:center; color:var(--faint); background:transparent; transition:color .15s,background-color .15s; }
.eye svg { width:18px; height:18px; }
.eye:hover { color:var(--text); background:var(--hover); }
.eye[data-on="true"] { color:var(--accent); }
.auth-err { min-height:18px; margin-top:12px; font-size:13px; font-weight:500; color:var(--accent); }
.auth-shake { animation:shake .38s; }
@keyframes shake { 0%,100% { transform:translateX(0); } 20%,60% { transform:translateX(-6px); } 40%,80% { transform:translateX(6px); } }