input:not([type]),
input[type="search"],
input[type="url"],
input[type="time"],
input[type="week"],
input[type="month"],
input[type="datetime-local"] {
  background: var(--surface2);
  border: 1px solid var(--sf-line, var(--line));
  border-radius: 11px;
  padding: 12px 14px;
  font: inherit;
  font-size: calc(14px * var(--fz-form, 1));
  color: var(--ink);
  outline: 0;
  width: 100%;
  transition: border-color .18s, box-shadow .18s;
}
input:not([type]):focus,
input[type="search"]:focus,
input[type="url"]:focus,
input[type="time"]:focus,
input[type="week"]:focus,
input[type="month"]:focus,
input[type="datetime-local"]:focus {
  border-color: var(--green);
  box-shadow: var(--sf-ring, 0 0 0 3px color-mix(in oklch, var(--green), transparent 86%));
}
input:not([type])::placeholder { color: var(--muted); opacity: .75 }
input:not([type]):disabled,
textarea:disabled,
select:disabled { opacity: .6; cursor: not-allowed }

input[dir="ltr"], textarea[dir="ltr"] { text-align: left; letter-spacing: .02em }

select {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  padding-inline-end: 38px;
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5l5-5' fill='none' stroke='%237a8699' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: left 14px center;
  background-size: 12px 8px;
  cursor: pointer;
}
[dir="ltr"] select { background-position: right 14px center }
select::-ms-expand { display: none }

input[type="file"] {
  width: 100%;
  background: var(--surface2);
  border: 1px dashed var(--sf-line, var(--line));
  border-radius: 11px;
  padding: 9px 11px;
  font: inherit;
  font-size: calc(11.5px * var(--fz-form, 1));
  color: var(--muted);
  cursor: pointer;
  transition: border-color .18s, background .18s;
}
input[type="file"]:hover { border-color: var(--green) }
input[type="file"]:focus-visible {
  outline: 0;
  border-color: var(--green);
  box-shadow: var(--sf-ring, 0 0 0 3px color-mix(in oklch, var(--green), transparent 86%));
}
input[type="file"]::file-selector-button {
  font: inherit;
  font-weight: 800;
  font-size: calc(11.5px * var(--fz-btn, 1));
  background: var(--green);
  color: #fff;
  border: 0;
  border-radius: 9px;
  padding: 8px 15px;
  margin-inline-end: 11px;
  cursor: pointer;
  transition: background .18s;
}
input[type="file"]::-webkit-file-upload-button {
  font: inherit;
  font-weight: 800;
  background: var(--green);
  color: #fff;
  border: 0;
  border-radius: 9px;
  padding: 8px 15px;
  margin-inline-end: 11px;
  cursor: pointer;
}
input[type="file"]::file-selector-button:hover { background: var(--green2) }

.form-group > input,
.form-group > select,
.field > input,
.field > select { min-height: 46px }
.form-group > textarea { min-height: 104px; resize: vertical }
.form-group > small,
.form-group > .hint {
  display: block;
  font-size: calc(10.5px * var(--fz-form, 1));
  color: var(--muted);
  line-height: 1.8;
}
.form-group > label { display: block; line-height: 1.7 }

.co-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr);
  gap: 20px;
  align-items: start;
  margin-bottom: 28px;
}
.co-layout > * { min-width: 0 }
@media (max-width: 1000px) {
  .co-layout { grid-template-columns: minmax(0, 1fr); gap: 16px }
}

.co-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 22px 14px;
  align-items: stretch;
}
.co-grid .co-f {
  flex: 1 1 calc(50% - 7px);
  margin: 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  position: relative;
}
.co-grid .co-f.co-w-full { flex-basis: 100% }

.co-f > label {
  display: block;
  margin: 0 0 6px;
  font-weight: 800;
  line-height: 1.7;
  font-size: calc(11.5px * var(--fz-form, 1));
  color: var(--muted);
}
.co-f > input,
.co-f > select,
.co-f > textarea {
  margin-top: auto;
  width: 100%;
}
.co-f > input,
.co-f > select { min-height: 46px }
.co-f > textarea { min-height: 96px; resize: vertical }

.co-f > .co-hint {
  position: absolute;
  top: 100%;
  inset-inline-start: 2px;
  inset-inline-end: 2px;
  margin-top: 3px;
  font-size: calc(10.5px * var(--fz-form, 1));
  font-weight: 700;
  line-height: 1.5;
  color: var(--muted);
  pointer-events: none;
}
.co-f > .co-hint:empty { display: none }
.co-req {
  font-style: normal;
  font-weight: 900;
  color: var(--pl-danger, var(--red));
  margin-inline-start: 2px;
}

.co-addr-list { display: grid; gap: 9px }
.co-addr {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  border: 1px solid var(--sf-line, var(--line));
  border-radius: 13px;
  padding: 12px 13px;
  cursor: pointer;
  font-weight: 600;
  font-size: calc(12.5px * var(--fz-base, 1));
  line-height: 1.9;
  transition: border-color .18s, background .18s, box-shadow .18s;
}
.co-addr:hover { border-color: var(--green) }
.co-addr > input { margin: 4px 0 0; accent-color: var(--green); flex: none }
.co-addr > span { min-width: 0; flex: 1 1 auto; overflow-wrap: anywhere }
.co-addr > span b { display: block; font-size: calc(13px * var(--fz-card, 1)) }
.co-addr > span i {
  font-style: normal;
  display: block;
  color: var(--muted);
  font-weight: 500;
  font-size: calc(11.5px * var(--fz-card, 1));
}
.co-addr.is-on,
.co-addr:has(> input:checked) {
  border-color: var(--green);
  background: color-mix(in oklch, var(--green) 7%, transparent);
  box-shadow: inset 0 0 0 1px var(--green);
}

@media (max-width: 640px) {
  .co-grid { gap: 20px 12px }
  .co-grid .co-f { flex-basis: 100% }
  .co-f > input,
  .co-f > select { min-height: 44px }
}

.notice {
  background: var(--surface2);
  border: 1px solid var(--sf-line, var(--line));
  border-inline-start: 3px solid var(--green);
  border-radius: 12px;
  padding: 12px 15px;
  margin-bottom: 14px;
  font-size: calc(12.5px * var(--fz-base, 1));
  line-height: 1.95;
  color: var(--ink);
}
.notice:last-child { margin-bottom: 0 }
.notice b { font-weight: 800 }
.notice.error { border-inline-start-color: var(--pl-danger, var(--red)) }
.notice.warning { border-inline-start-color: var(--gold) }
.notice.success { border-inline-start-color: var(--pl-success, var(--green)) }

.sf-chip.on {
  background: var(--green);
  border-color: var(--green);
  color: #fff;
}
.sf-chip.on:hover {
  background: var(--green2);
  border-color: var(--green2);
  color: #fff;
}

.mv-scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
@media (max-width: 760px) {
  .mv-scroll > table { min-width: 560px }
}

.sf-tag {
  background: var(--surface2);
  color: var(--muted);
}