:root {--input-color: #919bb0;--input-border: #c3cddd;--input-background: #fff;--input-placeholder: #cbd1dc;--input-border-focus: #4c1246;--group-color: var(--input-color);--group-border: var(--input-border);--group-background: #ededed;--group-color-focus: #fff;--group-border-focus: var(--input-border-focus);--group-background-focus: #b175af;}.form-field {display: block;width: 100%;padding: 8px 16px;line-height: 25px;font-size: 14px;font-weight: 500;font-family: inherit;border-radius: 6px;-webkit-appearance: none;color: var(--input-color);border: 1px solid var(--input-border);background: var(--input-background);transition: border 0.3s ease;}.form-field::placeholder {color: var(--input-placeholder);}.form-field:focus {outline: none;border-color: var(--input-border-focus);}.form-group {position: relative;display: flex;width: 100%;}.form-group > span, .form-group .form-field {white-space: nowrap;display: block;}.form-group > span:not(:first-child):not(:last-child), .form-group .form-field:not(:first-child):not(:last-child) {border-radius: 0;}.form-group > span:first-child, .form-group .form-field:first-child {border-radius: 6px 0 0 6px;}.form-group > span:last-child, .form-group .form-field:last-child {border-radius: 0 6px 6px 0;}.form-group > span:not(:first-child), .form-group .form-field:not(:first-child) {margin-left: -1px;}.form-group .form-field {position: relative;z-index: 1;flex: 1 1 auto;width: 1%;margin-top: 0;margin-bottom: 0;}.form-group > span {text-align: center;padding: 8px 12px;font-size: 14px;line-height: 25px;color: var(--group-color);background: var(--group-background);border: 1px solid var(--group-border);transition: background 0.3s ease, border 0.3s ease, color 0.3s ease;font-weight:700;}.form-group:focus-within > span {color: var(--group-color-focus);background: var(--group-background-focus);border-color: var(--group-border-focus);}