.mcp-form {
max-width: 38rem;
padding: var(--mcpui-space-5);
border: 1px solid var(--mcpui-border);
border-radius: var(--mcpui-radius-card);
background: var(--mcpui-surface);
box-shadow: var(--mcpui-shadow-card);
}
.form-field + .form-field {
margin-top: var(--mcpui-space-4);
}
.form-label {
display: block;
margin-bottom: var(--mcpui-space-2);
color: var(--mcpui-ink-dim);
font-size: var(--mcpui-text-xs);
font-weight: 600;
letter-spacing: var(--mcpui-tracking-wide);
text-transform: uppercase;
}
.required-mark {
margin-left: 0.15em;
color: var(--mcpui-danger);
}
.form-input {
width: 100%;
padding: var(--mcpui-space-3);
border: 1px solid var(--mcpui-border);
border-radius: var(--mcpui-radius-inner);
background: var(--mcpui-surface-sunken);
color: var(--mcpui-ink);
font-size: var(--mcpui-text-md);
transition: border-color var(--mcpui-duration) var(--mcpui-ease),
box-shadow var(--mcpui-duration) var(--mcpui-ease);
}
.form-input::placeholder {
color: var(--mcpui-ink-faint);
}
.form-input:focus {
outline: none;
border-color: var(--mcpui-accent);
box-shadow: 0 0 0 3px var(--mcpui-accent-wash);
}
textarea.form-input {
min-height: 6.25rem;
resize: vertical;
}
select.form-input {
cursor: pointer;
}
.form-checkbox {
width: auto;
margin-right: var(--mcpui-space-2);
accent-color: var(--mcpui-accent);
}
.form-actions {
display: flex;
gap: var(--mcpui-space-3);
margin-top: var(--mcpui-space-6);
}
.submit-btn,
.reset-btn {
padding: var(--mcpui-space-3) var(--mcpui-space-5);
border-radius: var(--mcpui-radius-inner);
font-size: var(--mcpui-text-md);
font-weight: 500;
cursor: pointer;
transition: border-color var(--mcpui-duration) var(--mcpui-ease),
background var(--mcpui-duration) var(--mcpui-ease);
}
.submit-btn {
border: 1px solid var(--mcpui-accent);
background: var(--mcpui-accent);
color: var(--mcpui-accent-ink);
}
.submit-btn:hover {
background: color-mix(in oklab, var(--mcpui-accent) 86%, var(--mcpui-ink));
}
.reset-btn {
border: 1px solid var(--mcpui-border-strong);
background: var(--mcpui-surface);
color: var(--mcpui-ink-dim);
}
.reset-btn:hover {
border-color: var(--mcpui-accent-rim);
background: var(--mcpui-accent-wash);
color: var(--mcpui-ink);
}
.form-message {
margin-top: var(--mcpui-space-4);
padding: var(--mcpui-space-3) var(--mcpui-space-4);
border: 1px solid var(--mcpui-border);
border-left-width: 3px;
border-radius: var(--mcpui-radius-inner);
color: var(--mcpui-ink);
}
.form-message.success {
border-left-color: var(--mcpui-success);
background: var(--mcpui-success-wash);
}
.form-message.error {
border-left-color: var(--mcpui-danger);
background: var(--mcpui-danger-wash);
}
.form-message.info {
border-left-color: var(--mcpui-info);
background: var(--mcpui-info-wash);
}
.form-field-inline {
display: flex;
align-items: center;
gap: var(--mcpui-space-2);
}
.form-label-inline {
margin: 0;
text-transform: none;
letter-spacing: normal;
}
.form-actions {
flex-wrap: wrap;
}
.submit-btn:disabled {
opacity: 0.6;
cursor: progress;
}