.f-grid{display:grid; grid-template-columns:repeat(12,1fr); gap:var(--space-14) var(--space-16); align-items:start;}

.field{display:flex; flex-direction:column; gap:var(--space-6); min-width:0; grid-column:span 3; position:relative; margin-bottom:var(--field-gap, 0); max-width:var(--field-max-w, none);}
.field.c2{grid-column:span 2;}
.field.c3{grid-column:span 3;}
.field.c4{grid-column:span 4;}
.field.c5{grid-column:span 5;}
.field.c6{grid-column:span 6;}
.f-grid > .full, .field.full{grid-column:1 / -1;}
.field.w-choice2{grid-column:1 / -1; max-width:calc(var(--chk-col) * 2 + var(--chk-gap));}
@media(max-width:1100px){ .field,.field.c2,.field.c3{grid-column:span 4;} .field.c4,.field.c5,.field.c6{grid-column:span 6;} }
@media(max-width:640px){ .field,.field.c2,.field.c3,.field.c4,.field.c5,.field.c6{grid-column:1/-1;} }
.field > label{font-size:var(--fs-body); font-weight:600; color:var(--text-dim);}
.opt{font-weight:400; color:var(--text-dim); opacity:.75;}

.f-input, .f-select{width:100%; height:var(--field-h); font-family:inherit; font-size:var(--fs-body); line-height:var(--line-height-tight); color:var(--text); background:var(--surface); border:1px solid var(--line-strong); border-radius:var(--radius-6); padding:var(--space-6) var(--space-10); outline:none; transition:border-color .16s, box-shadow .16s, background-color .16s, padding .16s;}
.f-input:focus,.f-select:focus{box-shadow:inset 2px 0 0 0 var(--field-focus-edge); background-color:var(--surface-panel-low);}
.f-input:-webkit-autofill:focus{-webkit-box-shadow:inset 2px 0 0 0 var(--field-focus-edge), 0 0 0 1000px var(--surface-panel-low) inset;}
.f-input::placeholder{color:var(--text-muted);}
.f-input.invalid:not(:focus),.f-select.invalid:not(:focus),
.f-input.invalid[data-check-flagged],.f-select.invalid[data-check-flagged]{border-color:var(--invalid); box-shadow:0 0 0 3px color-mix(in srgb, var(--invalid) 14%, transparent);}
.f-input.invalid[data-check-flagged]:focus,.f-select.invalid[data-check-flagged]:focus{box-shadow:inset 2px 0 0 0 var(--field-focus-edge), 0 0 0 3px color-mix(in srgb, var(--invalid) 14%, transparent); background-color:var(--surface-panel-low);}
.f-select{appearance:none; -webkit-appearance:none; padding-right:var(--space-32); cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239ca3b1' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right var(--space-8) center; background-size:1rem;}
.f-hint{font-size:var(--fs-body); color:var(--text);}
.f-hint.is-block{margin-top:var(--space-12);}

.f-input:-webkit-autofill,
.f-input:-webkit-autofill:hover,
.f-input:-webkit-autofill:focus,
.f-input:-webkit-autofill:active,
.f-select:-webkit-autofill{
  -webkit-text-fill-color:var(--text);
  -webkit-box-shadow:0 0 0 1000px var(--surface) inset;
  caret-color:var(--text);
  transition:background-color 9999s ease-out 0s;
}
.f-input:-webkit-autofill::first-line,
.f-select:-webkit-autofill::first-line{
  font-family:var(--font-ui); font-size:var(--fs-body); font-weight:400; color:var(--text);
}

.f-ic{position:relative; display:flex; align-items:center;}
.f-ic > svg{position:absolute; left:var(--space-10); width:var(--ic-16);height:var(--ic-16); color:var(--text-dim); pointer-events:none;}
.f-ic:has(> svg) .f-input{padding-left:var(--space-32);}
.f-ic .eye{position:absolute; right:var(--space-10); cursor:pointer; color:var(--text-muted); display:none;
  border:none; background:none; padding:0; font:inherit;}
.f-ic .eye.is-ready{display:inline-flex;}
.f-ic .eye:hover{color:var(--text);}
.f-ic .eye.is-on{color:var(--text);}
.f-ic .eye:focus-visible{border-radius:var(--radius-6);}
.f-ic .eye svg{width:var(--ic-16); height:var(--ic-16);}
.f-ic:has(.eye) .f-input{padding-right:var(--size-36);}
input[type="password"]::-ms-reveal{display:none;}

.f-errors{list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; align-items:baseline; gap:var(--space-hair) var(--space-6);}
.f-errors li{font-size:var(--fs-body); color:var(--danger);}
.f-errors li:not(:last-child)::after{content:'·'; margin-left:var(--space-6); color:var(--text-muted);}

.f-errors.u-action-errors{width:100%; margin:var(--space-6) 0 0;}

.field:has(input, select, textarea) > .f-errors{
  position:absolute; top:var(--tip-top, 0); right:0; left:auto; z-index:6;
  display:flex; flex-direction:column; flex-wrap:nowrap; align-items:flex-start; gap:var(--space-hair);
  width:max-content; max-width:var(--tip-w); margin:0;
  padding:var(--space-6) var(--space-8) var(--space-6) 1.75rem;
  list-style:none;
  background:var(--tip-bg, var(--surface-overlay)); border-radius:var(--radius-6);
  box-shadow:var(--shadow-tip);
  font-size:var(--fs-body);
  color:var(--tip-fg, var(--text));
  pointer-events:none;
}
.field:has(input, select, textarea) > .f-errors::before{
  content:'!'; position:absolute; left:var(--space-8); top:var(--space-6);
  width:var(--size-14); height:var(--size-14); border-radius:var(--radius-full);
  background:var(--tip-mark, var(--invalid)); color:var(--surface);
  font-size:var(--fs-label); font-weight:800; line-height:var(--line-height-default); text-align:center;
}
.field:has(input, select, textarea) > .f-errors li{color:var(--tip-fg, var(--text)); font-size:var(--fs-body); white-space:normal;}
.field:has(input, select, textarea) > .f-errors li:not(:last-child)::after{content:none; margin-left:0;}
.field:has(input, select, textarea) > .f-errors::after{content:''; position:absolute; right:var(--space-16); left:auto; top:100%; border:6px solid transparent; border-top-color:var(--tip-edge, var(--tip-bg, var(--surface-overlay)));}
.field:has(input, select, textarea) > .f-errors.is-below::after{top:auto; bottom:100%; border-top-color:transparent; border-bottom-color:var(--tip-edge, var(--tip-bg, var(--surface-overlay)));}

[data-errors~="inline"] .field > .f-errors::before,
.field[data-errors~="inline"] > .f-errors::before{content:none;}
[data-errors~="inline"] .field > .f-errors,
.field[data-errors~="inline"] > .f-errors{
  position:static; width:auto; max-width:none; padding:0; margin:0;
  background:none; box-shadow:none; border-radius:0; pointer-events:auto;
  flex-direction:row; flex-wrap:wrap; align-items:baseline; gap:var(--space-hair) var(--space-6);
}
[data-errors~="inline"] .field > .f-errors li,
.field[data-errors~="inline"] > .f-errors li{color:var(--danger); font-size:var(--fs-body);}
[data-errors~="inline"] .field > .f-errors li:not(:last-child)::after,
.field[data-errors~="inline"] > .f-errors li:not(:last-child)::after{content:'·'; margin-left:var(--space-6); color:var(--text-muted);}
[data-errors~="inline"] .field > .f-errors::after,
.field[data-errors~="inline"] > .f-errors::after{content:none;}

.pw-rules{list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(auto-fit, minmax(max(var(--pw-rule-w), 45%), 1fr)); gap:var(--space-4) var(--space-14);}
.pw-rules li{display:flex; align-items:center; gap:var(--space-6); min-width:0; font-size:var(--fs-body-md); color:var(--text); white-space:nowrap; transition:color .16s;}
.pw-rules li::before{content:''; box-sizing:border-box; flex-shrink:0; width:var(--size-14); height:var(--size-14); border-radius:var(--radius-full); border:1px solid var(--line-strong);
  background-repeat:no-repeat; background-position:center; background-size:0.5625rem 0.5625rem; transition:border-color .16s, background-color .16s;}
.pw-rules li.ok{color:var(--success);}
.pw-rules li.ok::before{border-color:var(--success); background-color:var(--success);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230d0f13' stroke-width='3.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");}
.pw-rules li.miss{color:var(--danger);}
.pw-rules li.miss::before{border-color:var(--danger);}
.pw-rules.is-spaced{margin-top:var(--space-12);}
.pw-rules-note{display:block; margin-top:var(--space-6); margin-bottom:var(--pw-note-gap, 0); padding-left:var(--space-20); font-size:var(--fs-body-md);}

.sr-only{position:absolute; width:1px; height:1px; margin:-1px; padding:0; overflow:hidden; clip-path:inset(50%); white-space:nowrap; border:0;}

.f-input:disabled, .f-select:disabled,
.is-locked .f-input, .is-locked .f-select{
  color:var(--text); -webkit-text-fill-color:var(--text); opacity:1; cursor:default;
  background:transparent; border-color:transparent; border-left-width:0; box-shadow:none; padding-left:0;}
.f-select:disabled, .is-locked .f-select{background-image:none;}
.is-locked .opt{display:none;}