@import url('/assets/fonts.css');

:root{
  --bg:#0a0a0b; --bg2:#101012; --ink:#f4f2ee; --muted:rgba(244,242,238,.55);
  --muted2:rgba(244,242,238,.38); --line:rgba(255,255,255,.09); --line2:rgba(255,255,255,.06);
  --card:rgba(255,255,255,.035); --card2:rgba(255,255,255,.02);
  --cream:#f4f2ee; --cream2:#e9e6df; --ok:#9cb08a; --warn:#d8c98f;
  --r:16px; --r-sm:12px; --r-lg:22px;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  /* приятный серый фон — как на лендинге */
  background:
    radial-gradient(95% 48% at 50% 0%, rgba(190,197,208,.11), transparent 72%),
    radial-gradient(80% 42% at 50% 100%, rgba(176,182,193,.06), transparent 74%),
    #101116;
  background-attachment:fixed;
  color:var(--ink);
  font-family:'Manrope',system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
  font-size:14px; line-height:1.5; -webkit-font-smoothing:antialiased;
  min-height:100vh;
}
.uc{font-family:'Unbounded',sans-serif;font-weight:500;letter-spacing:.02em}
a{color:inherit;text-decoration:none}
button{font-family:inherit}
h1,h2,h3{margin:0;font-weight:800}
input,select,textarea{font-family:inherit}

/* декоративный фон */
.bgfx{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.bgfx i{position:absolute;border-radius:50%;filter:blur(90px);display:block}
.bgfx i.a{left:-14%;top:-22%;width:56vw;height:56vw;background:radial-gradient(circle,rgba(88,142,196,.12),transparent 64%)}
.bgfx i.b{right:-16%;bottom:-28%;width:62vw;height:62vw;background:radial-gradient(circle,rgba(122,108,182,.10),transparent 64%)}
.bgfx i.c{left:34%;bottom:-20%;width:44vw;height:44vw;background:radial-gradient(circle,rgba(96,168,140,.08),transparent 64%)}
.wrap{position:relative;z-index:1}

/* карточки */
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:20px}
.card.pad-lg{padding:26px}
.glass{backdrop-filter:blur(28px);-webkit-backdrop-filter:blur(28px)}

/* кнопки */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border:none;border-radius:999px;
  padding:12px 22px;font-size:14px;font-weight:800;cursor:pointer;transition:.2s;white-space:nowrap}
.btn-primary{background:linear-gradient(165deg,#ffffff,var(--cream2));color:#0a0a0b}
.btn-primary:hover{filter:brightness(1.04);transform:translateY(-1px)}
.btn-ghost{background:transparent;color:var(--ink);border:1px solid var(--line)}
.btn-ghost:hover{background:rgba(255,255,255,.06)}
.btn:disabled{opacity:.5;cursor:default;transform:none}
.btn-sm{padding:8px 14px;font-size:12.5px}
.btn-block{width:100%}

/* поля */
.field{display:block;margin-bottom:14px}
.field label{display:block;font-size:11px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--muted);margin-bottom:7px}
.field input,.field select,.field textarea{
  width:100%;background:rgba(255,255,255,.03);border:1px solid var(--line);border-radius:var(--r-sm);
  padding:12px 14px;color:var(--ink);font-size:14px;transition:.2s}
.field input:focus,.field select,.field textarea:focus{outline:none;border-color:rgba(255,255,255,.28);background:rgba(255,255,255,.05)}
.field textarea{resize:vertical;min-height:74px}
.field .hint{font-size:11px;color:var(--muted2);margin-top:5px}

/* бейджи / чипы */
.chip{display:inline-flex;align-items:center;gap:6px;font-size:11px;font-weight:700;padding:4px 10px;border-radius:999px;border:1px solid var(--line);color:var(--muted)}
.dot{width:7px;height:7px;border-radius:50%;display:inline-block}
.pill{display:inline-flex;align-items:center;gap:6px;font-size:11.5px;font-weight:700;padding:5px 11px;border-radius:999px}

/* тосты */
.toast{position:fixed;left:50%;bottom:26px;transform:translateX(-50%) translateY(20px);z-index:9999;
  background:#141416;border:1px solid var(--line);color:var(--ink);padding:12px 20px;border-radius:999px;
  font-size:13px;font-weight:600;opacity:0;transition:.3s;pointer-events:none;box-shadow:0 12px 40px rgba(0,0,0,.5);max-width:88vw;text-align:center}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0)}

/* утилиты */
.muted{color:var(--muted)} .muted2{color:var(--muted2)}
.row{display:flex;gap:12px;align-items:center}
.between{display:flex;justify-content:space-between;align-items:center;gap:12px}
.grid{display:grid;gap:14px}
.mono{font-variant-numeric:tabular-nums}
.big{font-family:'Unbounded',sans-serif;font-weight:500;font-size:26px;letter-spacing:-.01em}
.kicker{font-size:9px;font-weight:800;letter-spacing:.3em;text-transform:uppercase;color:var(--muted2)}
.divider{height:1px;background:var(--line);margin:16px 0;border:0}
.link{color:var(--ink);border-bottom:1px solid rgba(255,255,255,.25);cursor:pointer}
.link:hover{border-color:var(--ink)}
.spinner{width:18px;height:18px;border-radius:50%;border:2px solid rgba(255,255,255,.25);border-top-color:#fff;animation:spin .7s linear infinite;display:inline-block}
@keyframes spin{to{transform:rotate(360deg)}}
.center-page{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:24px}
.logo{height:18px;display:block}
.err{color:#ff9a8a;font-size:12.5px;margin-top:8px;min-height:16px}
.tag{font-size:8.5px;font-weight:800;letter-spacing:.28em;text-transform:uppercase;color:var(--muted2)}