/* Form fields */
.field{display:grid;gap:var(--sp-8)}
.label{font-size:var(--fs-300);color:var(--color-text-soft)}
.input{
  height:48px;
  padding:0 var(--sp-12);
  border-radius:var(--radius-md);
  border:1px solid var(--color-stroke);
  background:var(--color-surface);
  transition:border-color var(--tr-base), box-shadow var(--tr-base), background var(--tr-base);
}
.input:hover{border-color:var(--color-line)}
.input:focus{outline:none;border-color:var(--color-accent);box-shadow:0 0 0 3px color-mix(in srgb, var(--color-accent) 20%, transparent)}
.input[aria-invalid="true"]{border-color:var(--color-danger)}
.field__error{min-height:1em;color:var(--color-danger);font-size:var(--fs-300)}

/* Buttons */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  height:44px;
  padding:0 var(--sp-16);
  border-radius:var(--radius-md);
  border:1px solid transparent;
  background:transparent;
  gap:var(--sp-8);
  font-weight:600;
  font-size:var(--fs-300);
  transition:all var(--tr-base);
  cursor:pointer;
}
.btn--lg{
  height:56px;
  border-radius:var(--radius-lg);
  padding:0 var(--sp-24);
  font-size:var(--fs-400);
}
.btn--primary{
  background:var(--color-text);
  color:var(--color-surface);
  box-shadow:0 1px 3px rgba(0,0,0,0.08);
}
.btn--primary:hover{
  box-shadow:0 4px 12px rgba(0,0,0,0.15);
  transform:translateY(-2px);
}
.btn--primary:active{
  transform:translateY(0);
  box-shadow:0 1px 3px rgba(0,0,0,0.08);
}
.btn:disabled{
  opacity:.6;
  cursor:not-allowed;
}
.btn--link{
  height:auto;
  padding:0;
  border:none;
  background:none;
  color:var(--color-accent);
}
.btn--link:hover{
  text-decoration:underline;
}

/* Notice */
.notice{border-radius:var(--radius-md);padding:var(--sp-12) var(--sp-16);border:1px solid var(--color-stroke)}
.notice--soft{background:var(--color-label-bg)}
.notice--success{background:color-mix(in srgb, var(--color-success) 8%, var(--color-surface));border-color:color-mix(in srgb, var(--color-success) 30%, var(--color-stroke))}

/* Code input grid */
.code-grid{--code-size:56px;display:grid;grid-template-columns:repeat(6, var(--code-size));gap:var(--sp-12);justify-content:center;margin-left:auto;margin-right:auto}
.code-grid .code{width:var(--code-size);height:56px;padding:0;text-align:center;font-weight:600;font-size:20px;letter-spacing:2px}

@media (max-width: 420px){
  .code-grid{--code-size:44px;gap:var(--sp-10)}
  .code-grid .code{height:48px;font-size:18px}
}

/* Toast */
.toast{position:fixed;left:50%;bottom:24px;transform:translateX(-50%) translateY(16px);background:var(--color-text);color:var(--color-surface);padding:10px 14px;border-radius:10px;opacity:0;pointer-events:none;transition:opacity var(--tr-base), transform var(--tr-base);box-shadow:var(--shadow-lg)}
.toast.is-open{opacity:1;transform:translateX(-50%) translateY(0)}