/* Тело — Geist: в общем чанке темы задано --default-font-family:var(--font-geist-sans).
   Manrope тут не нужен: правило про него завязано на .pptr h1,h2,h3, а в разметке
   Kineiro этого класса нет — заголовок берёт дефолтное семейство и font-semibold. */
@font-face{
  font-family:"Geist";
  src:url("Geist-Regular.woff2") format("woff2");
  font-weight:400; font-style:normal; font-display:swap;
}
@font-face{
  font-family:"Geist";
  src:url("Geist-Medium.woff2") format("woff2");
  font-weight:500; font-style:normal; font-display:swap;
}
@font-face{
  font-family:"Geist";
  src:url("Geist-SemiBold.woff2") format("woff2");
  font-weight:600; font-style:normal; font-display:swap;
}

/* Токены из :root оригинала — как есть. В скобках — sRGB, если lab() неудобен.
   Важно: у --primary альфа .96, поэтому сам токен #2a2a2a, а на фоне страницы
   он даёт #323232 — именно это значение и видно на скриншоте. */
:root{
  --background:lab(97.68% -.0000298023 .0000119209);   /* #f8f8f8 */
  --foreground:lab(2.75381% 0 0);                      /* #0a0a0a */
  --card:lab(100% 0 0);                                /* #ffffff */
  --card-foreground:lab(2.75381% 0 0);
  --popover:lab(100% 0 0);
  --popover-foreground:lab(2.75381% 0 0);
  --primary:lab(17.0136% 0 0 / .96);                   /* #2a2a2a при 96% */
  --primary-foreground:lab(100% 0 0);                  /* #ffffff */
  --secondary:lab(94.2% 0 0);                          /* #eeeeee */
  --secondary-foreground:lab(7.78201% -.0000149012 0);
  --muted:lab(88.4% 0 .0000119209);                    /* #dedede */
  --muted-foreground:lab(60.56% 0 0);                  /* #929292 */
  --accent:lab(95.36% 0 0);                            /* #f2f2f2 */
  --accent-foreground:lab(7.78201% -.0000149012 0);
  --destructive:lab(48.4493% 77.4328 61.5452);         /* #e7000b */
  --destructive-foreground:lab(98.26% 0 0);            /* #fafafa */
  --border:lab(86.08% -.0000298023 0);                 /* #d7d7d7 */
  --input:lab(86.08% -.0000298023 0);                  /* #d7d7d7 */
  --ring:lab(66.128% -.0000298023 .0000119209);        /* #a1a1a1 */

  /* --radius в присланном :root не было. Посчитан по скруглению кнопки:
     подгонка по покрытию пикселей даёт 8.50px, а rounded-md — это
     calc(var(--radius) - 2px), то есть при корне 17px --radius = 0.618rem.
     Ближайшее осмысленное — 0.625rem (даёт 8.62px). */
  --radius:0.625rem;
  --font-sans:"Geist",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  --shadow-xs:0 1px 2px 0 rgb(0 0 0 / .05);
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;border:0 solid}

/* @layer base оригинала:
     *{border-color:var(--border);outline-color:var(--ring)}
     html{font-size:17px}
     @media screen and (max-width:360px){html{font-size:13px}}
     body{background-color:var(--background);color:var(--foreground)} */
*{border-color:var(--border);outline-color:var(--ring)}

html{
  font-size:17px;
  line-height:1.5;
  -webkit-text-size-adjust:100%;
}
@media screen and (max-width:360px){
  html{font-size:13px}
}
body{
  font-family:var(--font-sans);
  color:var(--foreground);
  background:var(--background);
  -webkit-font-smoothing:antialiased;
}

/* grid min-h-screen grid-cols-1 grid-rows-2 lg:grid-cols-2 lg:grid-rows-1 */
.split{
  display:grid;
  min-height:100vh;
  grid-template-columns:1fr;
  grid-template-rows:1fr 1fr;
}

/* bg-primary > relative w-full h-full */
.panel{background:var(--primary)}
.panel-inner{position:relative;width:100%;height:100%}
/* w-full h-full absolute top-0 left-0 touch-none */
.panel-canvas{
  position:absolute;
  top:0;
  left:0;
  width:100%;
  height:100%;
  display:block;
  touch-action:none;
}

/* flex items-center justify-center px-6 py-6 lg:py-12 */
.pane{
  display:flex;
  align-items:center;
  justify-content:center;
  padding:1.5rem;
}
/* w-full max-w-sm */
.card{width:100%;max-width:24rem}

/* в медиазапросах rem считается от 16px независимо от html, так что lg = 1024px */
@media (min-width:64rem){
  .split{
    grid-template-columns:1fr 1fr;
    grid-template-rows:1fr;
  }
  .pane{padding:3rem 1.5rem}
}

/* text-2xl font-semibold; .pptr сюда не применяется, поэтому без Manrope и tracking */
.form h3{
  font-size:1.5rem;
  line-height:2rem;
  font-weight:600;
}

/* flex flex-col gap-6 m-2 + margin-top от space-y-6 у формы:
   селектор space-y специфичнее, поэтому сверху 1.5rem, а не 0.5rem */
.fields{
  display:flex;
  flex-direction:column;
  gap:1.5rem;
  margin:0.5rem;
  margin-top:1.5rem;
}

/* grid gap-2 */
.form-item{display:grid;gap:0.5rem}

/* flex items-center gap-2 text-sm leading-none font-medium select-none */
.form-item label{
  display:flex;
  align-items:center;
  gap:0.5rem;
  font-size:0.875rem;
  line-height:1;
  font-weight:500;
  user-select:none;
}

/* h-9 w-full min-w-0 rounded-md border bg-transparent px-3 text-base shadow-xs md:text-sm */
.form-item input{
  height:2.25rem;
  width:100%;
  min-width:0;
  padding:0 0.75rem;
  font-family:inherit;
  font-size:1rem;
  color:inherit;
  background:transparent;
  border:1px solid var(--input);
  border-radius:calc(var(--radius) - 2px);
  box-shadow:var(--shadow-xs);
  outline:none;
  transition:color .15s, box-shadow .15s;
}
@media (min-width:48rem){
  .form-item input{font-size:0.875rem}
}
/* focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] */
.form-item input:focus-visible{
  border-color:var(--ring);
  box-shadow:0 0 0 3px color-mix(in oklab, var(--ring) 50%, transparent);
}

/* Чекбокса в оригинале нет — собран по образцу shadcn Checkbox:
   size-4 shrink-0 rounded-[4px] border shadow-xs, при checked — bg-primary
   и иконка Check из lucide. */
.check-item{
  display:flex;
  align-items:center;
  gap:0.5rem;
}
.check-item label{
  font-size:0.875rem;
  line-height:1;
  font-weight:500;
  user-select:none;
  cursor:pointer;
}
.checkbox{
  appearance:none;
  -webkit-appearance:none;
  flex-shrink:0;
  display:grid;
  place-content:center;
  width:1rem;
  height:1rem;
  background:transparent;
  border:1px solid var(--input);
  border-radius:4px;
  box-shadow:var(--shadow-xs);
  outline:none;
  cursor:pointer;
  transition:background .15s, border-color .15s, box-shadow .15s;
}
.checkbox:checked{
  background:var(--primary);
  border-color:var(--primary);
}
.checkbox::after{
  content:"";
  width:0.875rem;
  height:0.875rem;
  transform:scale(0);
  transition:transform .1s ease-out;
  background:var(--primary-foreground);
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / contain no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / contain no-repeat;
}
.checkbox:checked::after{transform:scale(1)}
.checkbox:focus-visible{
  border-color:var(--ring);
  box-shadow:0 0 0 3px color-mix(in oklab, var(--ring) 50%, transparent);
}

/* h-9 px-4 py-2 w-full flex items-center justify-center gap-4 rounded-md
   text-sm font-medium bg-primary text-primary-foreground shadow-xs */
.btn{
  height:2.25rem;
  width:100%;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:1rem;
  padding:0.5rem 1rem;
  font-family:inherit;
  font-size:0.875rem;
  font-weight:500;
  white-space:nowrap;
  color:var(--primary-foreground);
  background:var(--primary);
  border-radius:calc(var(--radius) - 2px);
  box-shadow:var(--shadow-xs);
  cursor:pointer;
  transition:all .15s;
}
.btn:hover{background:color-mix(in oklab, var(--primary) 90%, transparent)}
.btn:focus-visible{
  outline:none;
  border-color:var(--ring);
  box-shadow:0 0 0 3px color-mix(in oklab, var(--ring) 50%, transparent);
}

/* Блока ошибки в оригинале нет — по образцу shadcn FormMessage.
   Кнопка и сообщение в общей обёртке с gap-2, как метка с полем. */
.submit-item{display:grid;gap:0.5rem}
.error{
  font-size:0.875rem;
  line-height:1.25rem;
  color:var(--destructive);
}
.error[hidden]{display:none}

/* p-2 text-sm text-muted-foreground */
.note{
  padding:0.5rem;
  font-size:0.875rem;
  color:var(--muted-foreground);
}
.note a{
  color:inherit;
  text-decoration:underline;
}

/* Сообщение об успехе (восстановление пароля) — как .error, но цветом текста */
.success{
  font-size:0.875rem;
  line-height:1.25rem;
  color:var(--foreground);
}