
:where(
    select,
    textarea,
    input[type="text"],
    input[type="password"],
    input[type="number"],
    input[type="search"],
    input[type="url"],
    input[type="email"],
    input[type="date"]
) {
    width: 100%;
    padding: 9px 12px;
    background: var(--bg-secondary);
    color: var(--text-primary);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    font-family: var(--font-sans);
    font-size: 0.82rem;
    resize: none;
    -webkit-appearance: none;
    appearance: none;
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

input[type="number"] {
    -moz-appearance: textfield;
}

input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    appearance: none;
    margin: 0;
}

input[type="search"]::-webkit-search-decoration,
input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-results-button,
input[type="search"]::-webkit-search-results-decoration {
    -webkit-appearance: none;
    appearance: none;
}

:where(select, textarea, input[type="text"], input[type="password"], input[type="number"], input[type="search"], input[type="url"], input[type="email"], input[type="date"]):focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 3px var(--accent-glow);
}

:where(select, textarea, input[type="text"], input[type="password"], input[type="number"], input[type="search"], input[type="url"], input[type="email"], input[type="date"]):hover {
    border-color: var(--border-light);
}

:where(select, textarea, input):disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

@media (max-width: 640px) {
    :where(
        select,
        textarea,
        input[type="text"],
        input[type="password"],
        input[type="search"],
        input[type="url"],
        input[type="email"],
        input[type="number"],
        input[type="date"]
    ) {
        font-size: 16px;
        line-height: 1.2;
        max-width: 100%;
    }
}
