:root{
  --bg:#fafafa;
  --panel:#ffffff;
  --text:#111111;
  --muted:#6b7280;
  --border:#e5e7eb;
  --accent:#f15a24;
  --accent-weak: rgba(241,90,36,.12);
  --radius:0px;
  --shadow: 0 12px 28px rgba(0,0,0,.08);
}

*{ box-sizing:border-box; }
html,body{ height:100%; }
body{
  margin:0;
  font:14px/1.45 system-ui, -apple-system, Segoe UI, Roboto, Arial;
  color:var(--text);
  background:var(--bg);
  display:grid;
  place-items:center;
  padding:16px;
}

.stage{ width:min(420px, 100%); position:relative; }

.form{
  background:var(--panel);
  border:1px solid var(--border);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  overflow:hidden;
}

.form__head{ padding:14px 16px; border-bottom:1px solid var(--border); }
.form__title{ font-weight:700; font-size:16px; }

.form__body{ padding:14px 16px; }
.form__foot{
  padding:12px 16px;
  border-top:1px solid var(--border);
  display:flex;
  gap:12px;
  align-items:center;
  justify-content:space-between;
  flex-wrap:wrap;
}

.field{ margin-bottom:10px; }
.field__label{ display:block; font-size:12px; color:var(--muted); margin-bottom:6px; }
.field__row{ display:flex; gap:10px; align-items:center; }

.field__input{
  width:100%;
  height:40px;
  border-radius:var(--radius);
  border:1px solid var(--border);
  padding:0 12px;
  outline:none;
  background:#fff;
}
.field__input:focus{
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-weak);
}

.field__hint{
  display:none;
  min-height:16px; font-size:12px; color:var(--muted); margin-top:6px; }
[data-field].is-invalid .field__input{ border-color: rgba(185,28,28,.55); background: rgba(185,28,28,.04); }
[data-field].is-invalid .field__hint{
  display:block;
  color:#7f1d1d; }

.btn{
  height:38px;
  padding:0 12px;
  border-radius:var(--radius);
  border:1px solid var(--border);
  background:#fff;
  cursor:pointer;
}
.btn--primary{
  background:var(--accent);
  border-color:transparent;
  color:#fff;
}
.btn--ghost{ background:#fff; }

.btn.is-busy{ opacity:.75; pointer-events:none; }

.link{
  border:0;
  background:transparent;
  padding:0;
  color:var(--accent);
  cursor:pointer;
}

.result{
  margin-top:8px;
  padding:10px 12px;
  border:1px solid var(--border);
  background:#fff;
  color:var(--muted);
  min-height:42px;
  white-space:pre-line;
  display:none;
}
.result.is-err{
  display:block;
  border-color: rgba(185,28,28,.25); background: rgba(185,28,28,.06); color:#7f1d1d; }
.result.is-ok{
display:block;
  border-color: rgba(15,118,110,.22); background: rgba(15,118,110,.06); color:#065f46; }

/* Loader overlay */
.loader{
  position:fixed;
  inset:0;
  display:none;
  place-items:center;
  background: rgba(255,255,255,.72);
  z-index:9999;
}
.loader.is-visible{ display:grid; }
.loader__box{
  width:min(360px, calc(100% - 24px));
  background:#fff;
  border:1px solid var(--border);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  padding:16px;
  display:flex;
  gap:12px;
  align-items:center;
}
.loader__spin{
  width:22px; height:22px;
  border-radius:999px;
  border:3px solid var(--accent);
  border-top-color:transparent;
  animation:spin .9s linear infinite;
}
.loader__text{ color:var(--muted); font-size:13px; }

@keyframes spin{ to{ transform:rotate(360deg); } }

/* Анимация pane (под anim-engine) */
.pane.is-prep{ opacity:0; transform:translateX(10px); }
.pane.is-in{ animation:in .24s ease forwards; }
.pane.is-out{ position:absolute !important; inset:0; animation:out .22s ease forwards; }
@keyframes in{ from{ opacity:0; transform:translateX(10px); } to{ opacity:1; transform:none; } }
@keyframes out{ from{ opacity:1; transform:none; } to{ opacity:0; transform:translateX(-8px); } }