/* ==================== 易算AI - 表单组件系统 (ys-form) ==================== */
/* 版本: 1.0.0 | 用途: 统一表单控件样式，支持多种控件类型和交互状态 */
/* 独立: 不依赖任何设计令牌，所有值为字面量 */
/* 命名规范: BEM (ys-form / ys-input / ys-radio / ys-checkbox 前缀避免与 Layui 冲突) */
/* 设计原则: 8px 圆角 · 1px 描边 · 四态交互 (默认/悬停/聚焦/禁用) */
/* 主色调: #1e9fff */

/* ==================== 相关组件说明 ==================== */
/* 日期选择器、时间选择器已独立为 datetime-picker.css
 * 如需使用，请在 forms.css 之后引入：
 * <link rel="stylesheet" href="/static/css/css-components/datetime-picker.css">
 * 
 * 原因：
 * 1. 保持 forms.css 职责单一（基础表单控件）
 * 2. 日期/时间选择器作为复杂组件独立管理，便于按需加载
 * 3. 符合 ITCSS 分层架构思想
 * 
 * 依赖关系：
 * datetime-picker.css 依赖 forms.css 中的 .ys-input 基础样式
 * datetime-picker.css 依赖 01-design-tokens.css 中的 CSS 变量
 */

/* ==================== 颜色常量 ==================== */
/* 主色 - 品牌蓝 */
/* --primary: #1e9fff */
/* --primary-hover: #4db3ff */
/* --primary-active: #0084e8 */
/* --primary-light: #e6f4ff */

/* 功能色 */
/* --success: #52c41a */
/* --error: #ff4d4f */
/* --warning: #faad14 */

/* 灰度 */
/* --gray-50: #f9fafb */
/* --gray-100: #f3f4f6 */
/* --gray-200: #e5e7eb */
/* --gray-300: #d1d5db */
/* --gray-400: #9ca3af */
/* --gray-500: #6b7280 */
/* --gray-600: #4b5563 */
/* --gray-700: #374151 */
/* --gray-800: #1f2937 */

/* ==================== 表单容器 ==================== */
.ys-form {
    width: 100%;
    box-sizing: border-box;
}

.ys-form__row {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 20px;
}

.ys-form__row:last-child {
    margin-bottom: 0;
}

.ys-form__row--horizontal {
    flex-direction: row;
    align-items: flex-start;
    gap: 16px;
}

.ys-form__row--horizontal .ys-form__label {
    min-width: 100px;
    padding-top: 10px;
}

.ys-form__row--horizontal .ys-form__control {
    flex: 1;
}

/* 多列布局 */
.ys-form__grid {
    display: grid;
    gap: 20px;
}

.ys-form__grid--2col {
    grid-template-columns: repeat(2, 1fr);
}

.ys-form__grid--3col {
    grid-template-columns: repeat(3, 1fr);
}

@media (max-width: 767px) {

    .ys-form__grid--2col,
    .ys-form__grid--3col {
        grid-template-columns: 1fr;
    }
}

@media (min-width: 768px) and (max-width: 1023px) {
    .ys-form__grid--3col {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* ==================== 表单标签 ==================== */
.ys-form__label {
    display: block;
    font-size: 14px;
    font-weight: 500;
    color: #1f2937;
    line-height: 1.4;
    letter-spacing: 0.02em;
}

.ys-form__label--required::after {
    content: '*';
    color: #ff4d4f;
    margin-left: 4px;
    font-weight: 600;
}

.ys-form__label--optional {
    font-weight: 400;
    color: #9ca3af;
    font-size: 12px;
    margin-left: 4px;
}

/* ==================== 文本输入框 ==================== */
.ys-input {
    display: block;
    width: 100%;
    padding: 10px 14px;
    font-size: 14px;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', sans-serif;
    color: #1f2937;
    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    line-height: 1.5;
    box-sizing: border-box;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}

.ys-input::placeholder {
    color: #9ca3af;
}

/* 悬停态 */
.ys-input:hover:not(:focus):not(:disabled) {
    border-color: #d1d5db;
    background: #f9fafb;
}

/* 聚焦态 */
.ys-input:focus {
    outline: none;
    border-color: #1e9fff;
    background: #ffffff;
}

/* 错误态 */
.ys-input--error {
    border-color: #ff4d4f;
}

.ys-input--error:hover:not(:focus):not(:disabled) {
    border-color: #ff7875;
}

.ys-input--error:focus {
    border-color: #ff4d4f;
}

/* 禁用态 */
.ys-input:disabled,
.ys-input--disabled {
    background: #f3f4f6;
    color: #9ca3af;
    cursor: not-allowed;
    opacity: 0.7;
    pointer-events: none;
}

/* 成功态 */
.ys-input--success {
    border-color: #52c41a;
}

.ys-input--success:focus {
    border-color: #52c41a;
}

/* 尺寸变体 */
.ys-input--sm {
    padding: 6px 10px;
    font-size: 12px;
    border-radius: 8px;
}

.ys-input--lg {
    padding: 14px 16px;
    font-size: 15px;
    border-radius: 8px;
}

/* ==================== 下拉选择框 ==================== */
.ys-select {
    display: block;
    width: 100%;
    padding: 10px 36px 10px 14px;
    font-size: 14px;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', sans-serif;
    color: #1f2937;
    background: #ffffff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E") no-repeat right 12px center;
    background-size: 16px;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    line-height: 1.5;
    box-sizing: border-box;
    cursor: pointer;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}

.ys-select:hover:not(:focus):not(:disabled) {
    border-color: #d1d5db;
    background-color: #f9fafb;
}

.ys-select:focus {
    outline: none;
    border-color: #1e9fff;
}

.ys-select:disabled,
.ys-select--disabled {
    background-color: #f3f4f6;
    color: #9ca3af;
    cursor: not-allowed;
    opacity: 0.7;
    pointer-events: none;
}

.ys-select--error {
    border-color: #ff4d4f;
}

.ys-select--error:focus {
    border-color: #ff4d4f;
}

/* ==================== 文本域 ==================== */
.ys-textarea {
    display: block;
    width: 100%;
    padding: 10px 14px;
    font-size: 14px;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', sans-serif;
    color: #1f2937;
    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    line-height: 1.6;
    box-sizing: border-box;
    resize: vertical;
    min-height: 80px;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}

.ys-textarea::placeholder {
    color: #9ca3af;
}

.ys-textarea:hover:not(:focus):not(:disabled) {
    border-color: #d1d5db;
    background: #f9fafb;
}

.ys-textarea:focus {
    outline: none;
    border-color: #1e9fff;
}

.ys-textarea:disabled,
.ys-textarea--disabled {
    background: #f3f4f6;
    color: #9ca3af;
    cursor: not-allowed;
    opacity: 0.7;
    pointer-events: none;
    resize: none;
}

.ys-textarea--error {
    border-color: #ff4d4f;
}

.ys-textarea--error:focus {
    border-color: #ff4d4f;
}

/* ==================== 日期/时间输入框（原生 <input type="date"|"time"|...>） ==================== */
/* 项目已彻底脱离 layui.laydate，统一使用浏览器原生日期/时间选择器。
   这里保留原生外观、显示选择器图标，并贴合表单基础样式。 */
.ys-input[type="date"],
.ys-input[type="time"],
.ys-input[type="datetime-local"],
.ys-input[type="month"],
.ys-input[type="week"] {
    cursor: pointer;
    /* 不再清除 appearance，保留浏览器原生选择器图标与交互 */
}

.ys-input[type="date"]::-webkit-calendar-picker-indicator,
.ys-input[type="time"]::-webkit-calendar-picker-indicator,
.ys-input[type="datetime-local"]::-webkit-calendar-picker-indicator,
.ys-input[type="month"]::-webkit-calendar-picker-indicator,
.ys-input[type="week"]::-webkit-calendar-picker-indicator {
    cursor: pointer;
    opacity: 0.65;
    filter: invert(35%) sepia(85%) saturate(1500%) hue-rotate(190deg);
    transition: opacity 0.2s ease;
}

.ys-input[type="date"]:hover::-webkit-calendar-picker-indicator,
.ys-input[type="time"]:hover::-webkit-calendar-picker-indicator,
.ys-input[type="datetime-local"]:hover::-webkit-calendar-picker-indicator,
.ys-input[type="month"]:hover::-webkit-calendar-picker-indicator,
.ys-input[type="week"]:hover::-webkit-calendar-picker-indicator {
    opacity: 1;
}

/* 通用原生日期/时间标记类（在多个页面表单上启用） */
.ys-native-date,
.ys-native-time {
    cursor: pointer;
}

.ys-native-date::-webkit-calendar-picker-indicator,
.ys-native-time::-webkit-calendar-picker-indicator {
    cursor: pointer;
    opacity: 0.7;
    filter: invert(35%) sepia(85%) saturate(1500%) hue-rotate(190deg);
}

.ys-native-date:hover::-webkit-calendar-picker-indicator,
.ys-native-time:hover::-webkit-calendar-picker-indicator {
    opacity: 1;
}

/* ==================== 单选框组 (卡片式描边) ==================== */
.ys-radio-group {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

.ys-radio-group--vertical {
    flex-direction: column;
}

.ys-radio-group--horizontal {
    flex-direction: row;
}

/* 单选框卡片 */
.ys-radio-card {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    /* 与 buttons.css .ys-btn--md 中号按钮规格一致 */
    padding: 10px 20px;
    font-size: 13px;
    font-weight: 500;
    line-height: 1.35;
    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    user-select: none;
    flex: 0 0 auto;
}

.ys-radio-card:hover:not(.ys-radio-card--disabled) {
    border-color: #1e9fff;
    background: #f0f8ff;
}

.ys-radio-card input[type="radio"] {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
    pointer-events: none;
}

/* 单选框指示器 */
.ys-radio-card__indicator {
    /* 尺寸与字体高度一致：font-size 13px × line-height 1.35 = 1.35em */
    width: 1.35em;
    height: 1.35em;
    border: 1px solid #d1d5db;
    border-radius: 50%;
    background: #ffffff;
    position: relative;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    flex-shrink: 0;
}

.ys-radio-card__indicator::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0);
    width: 0.55em;
    height: 0.55em;
    border-radius: 50%;
    background: #1e9fff;
    transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

/* 选中态 */
.ys-radio-card input[type="radio"]:checked+.ys-radio-card__indicator {
    border-color: #1e9fff;
}

.ys-radio-card input[type="radio"]:checked+.ys-radio-card__indicator::after {
    transform: translate(-50%, -50%) scale(1);
}

.ys-radio-card input[type="radio"]:checked~.ys-radio-card__label {
    color: #1e9fff;
    font-weight: 500;
}

.ys-radio-card:has(input[type="radio"]:checked) {
    border-color: #1e9fff;
    background: #f0f8ff;
}

/* 禁用态 */
.ys-radio-card--disabled,
.ys-radio-card input[type="radio"]:disabled+.ys-radio-card__indicator {
    opacity: 0.5;
    cursor: not-allowed;
    pointer-events: none;
}

.ys-radio-card--disabled:hover {
    border-color: #e5e7eb;
    background: #ffffff;
}

/* 错误态 */
.ys-radio-card--error {
    border-color: #ff4d4f;
}

/* 仅指示器样式（无卡片背景） */
.ys-radio {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    user-select: none;
    font-size: 14px;
    color: #374151;
}

.ys-radio input[type="radio"] {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
    pointer-events: none;
}

.ys-radio__indicator {
    width: 18px;
    height: 18px;
    border: 1px solid #d1d5db;
    border-radius: 50%;
    background: #ffffff;
    position: relative;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    flex-shrink: 0;
}

.ys-radio__indicator::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0);
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #1e9fff;
    transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.ys-radio:hover .ys-radio__indicator {
    border-color: #1e9fff;
}

.ys-radio input[type="radio"]:checked+.ys-radio__indicator {
    border-color: #1e9fff;
}

.ys-radio input[type="radio"]:checked+.ys-radio__indicator::after {
    transform: translate(-50%, -50%) scale(1);
}

.ys-radio:has(input[type="radio"]:checked) {
    color: #1e9fff;
}

.ys-radio--disabled,
.ys-radio input[type="radio"]:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    pointer-events: none;
}

/* ==================== 复选框组 (卡片式描边) ==================== */
.ys-checkbox-group {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

.ys-checkbox-group--vertical {
    flex-direction: column;
}

.ys-checkbox-group--horizontal {
    flex-direction: row;
}

/* 复选框卡片 */
.ys-checkbox-card {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    /* 与 buttons.css .ys-btn--md 中号按钮规格一致 */
    padding: 10px 20px;
    font-size: 13px;
    font-weight: 500;
    line-height: 1.35;
    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    user-select: none;
    flex: 0 0 auto;
}

.ys-checkbox-card:hover:not(.ys-checkbox-card--disabled) {
    border-color: #1e9fff;
    background: #f0f8ff;
}

.ys-checkbox-card input[type="checkbox"] {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
    pointer-events: none;
}

/* 复选框指示器 */
.ys-checkbox-card__indicator {
    /* 尺寸与字体高度一致：font-size 13px × line-height 1.35 = 1.35em */
    width: 1.35em;
    height: 1.35em;
    border: 1px solid #d1d5db;
    border-radius: 4px;
    background: #ffffff;
    position: relative;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    flex-shrink: 0;
}

.ys-checkbox-card__indicator::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) rotate(45deg) scale(0);
    width: 0.28em;
    height: 0.5em;
    border-right: 2px solid #ffffff;
    border-bottom: 2px solid #ffffff;
    transition: transform 0.15s cubic-bezier(0.4, 0, 0.2, 1);
}

/* 选中态 */
.ys-checkbox-card input[type="checkbox"]:checked+.ys-checkbox-card__indicator {
    background: #1e9fff;
    border-color: #1e9fff;
}

.ys-checkbox-card input[type="checkbox"]:checked+.ys-checkbox-card__indicator::after {
    transform: translate(-50%, -50%) rotate(45deg) scale(1);
}

.ys-checkbox-card input[type="checkbox"]:checked~.ys-checkbox-card__label {
    color: #1e9fff;
    font-weight: 500;
}

.ys-checkbox-card:has(input[type="checkbox"]:checked) {
    border-color: #1e9fff;
    background: #f0f8ff;
}

/* 半选态 */
.ys-checkbox-card__indicator--indeterminate::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 10px;
    height: 2px;
    background: #1e9fff;
    border-radius: 1px;
}

.ys-checkbox-card input[type="checkbox"]:indeterminate+.ys-checkbox-card__indicator {
    background: #1e9fff;
    border-color: #1e9fff;
}

/* 禁用态 */
.ys-checkbox-card--disabled,
.ys-checkbox-card input[type="checkbox"]:disabled+.ys-checkbox-card__indicator {
    opacity: 0.5;
    cursor: not-allowed;
    pointer-events: none;
}

.ys-checkbox-card--disabled:hover {
    border-color: #e5e7eb;
    background: #ffffff;
}

/* 错误态 */
.ys-checkbox-card--error {
    border-color: #ff4d4f;
}

/* 仅指示器样式（无卡片背景） */
.ys-checkbox {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    user-select: none;
    font-size: 14px;
    color: #374151;
}

.ys-checkbox input[type="checkbox"] {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
    pointer-events: none;
}

.ys-checkbox__indicator {
    width: 18px;
    height: 18px;
    border: 1px solid #d1d5db;
    border-radius: 4px;
    background: #ffffff;
    position: relative;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    flex-shrink: 0;
}

.ys-checkbox__indicator::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) rotate(45deg) scale(0);
    width: 5px;
    height: 9px;
    border-right: 2px solid #ffffff;
    border-bottom: 2px solid #ffffff;
    transition: transform 0.15s cubic-bezier(0.4, 0, 0.2, 1);
}

.ys-checkbox:hover .ys-checkbox__indicator {
    border-color: #1e9fff;
}

.ys-checkbox input[type="checkbox"]:checked+.ys-checkbox__indicator {
    background: #1e9fff;
    border-color: #1e9fff;
}

.ys-checkbox input[type="checkbox"]:checked+.ys-checkbox__indicator::after {
    transform: translate(-50%, -50%) rotate(45deg) scale(1);
}

.ys-checkbox:has(input[type="checkbox"]:checked) {
    color: #1e9fff;
}

.ys-checkbox--disabled,
.ys-checkbox input[type="checkbox"]:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    pointer-events: none;
}

/* ==================== 开关控件 ==================== */
.ys-switch {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    user-select: none;
    font-size: 14px;
    color: #374151;
}

.ys-switch input[type="checkbox"] {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
    pointer-events: none;
}

.ys-switch__track {
    width: 44px;
    height: 24px;
    background: #d1d5db;
    border-radius: 12px;
    position: relative;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    flex-shrink: 0;
}

.ys-switch__track::after {
    content: '';
    position: absolute;
    top: 2px;
    left: 2px;
    width: 20px;
    height: 20px;
    background: #ffffff;
    border-radius: 50%;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

.ys-switch:hover .ys-switch__track {
    background: #9ca3af;
}

.ys-switch input[type="checkbox"]:checked+.ys-switch__track {
    background: #1e9fff;
}

.ys-switch input[type="checkbox"]:checked+.ys-switch__track::after {
    left: 22px;
}

.ys-switch:hover input[type="checkbox"]:checked+.ys-switch__track {
    background: #4db3ff;
}

.ys-switch--disabled,
.ys-switch input[type="checkbox"]:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    pointer-events: none;
}

/* 尺寸变体 */
.ys-switch--sm .ys-switch__track {
    width: 36px;
    height: 20px;
    border-radius: 10px;
}

.ys-switch--sm .ys-switch__track::after {
    width: 16px;
    height: 16px;
}

.ys-switch--sm input[type="checkbox"]:checked+.ys-switch__track::after {
    left: 18px;
}

.ys-switch--lg .ys-switch__track {
    width: 52px;
    height: 28px;
    border-radius: 14px;
}

.ys-switch--lg .ys-switch__track::after {
    width: 24px;
    height: 24px;
}

.ys-switch--lg input[type="checkbox"]:checked+.ys-switch__track::after {
    left: 26px;
}

/* ==================== 表单帮助文本 ==================== */
.ys-form__help {
    font-size: 12px;
    color: #6b7280;
    margin-top: 4px;
    line-height: 1.4;
}

.ys-form__help--error {
    color: #ff4d4f;
}

.ys-form__help--success {
    color: #52c41a;
}

/* ==================== 表单错误状态 ==================== */
.ys-form__row--error .ys-input,
.ys-form__row--error .ys-select,
.ys-form__row--error .ys-textarea {
    border-color: #ff4d4f;
}

.ys-form__row--error .ys-input:focus,
.ys-form__row--error .ys-select:focus,
.ys-form__row--error .ys-textarea:focus {
    border-color: #ff4d4f;
}

/* ==================== 表单字段组 ==================== */
.ys-form__fieldset {
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    padding: 20px;
    margin-bottom: 20px;
}

.ys-form__legend {
    font-size: 15px;
    font-weight: 600;
    color: #1f2937;
    padding: 0 8px;
    margin-bottom: 16px;
}

/* ==================== 输入框前缀/后缀 ==================== */
.ys-input-wrapper {
    display: flex;
    align-items: stretch;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    overflow: hidden;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    background: #ffffff;
}

.ys-input-wrapper:hover:not(:focus-within):not(.ys-input-wrapper--disabled) {
    border-color: #d1d5db;
}

.ys-input-wrapper:focus-within {
    border-color: #1e9fff;
}

.ys-input-wrapper--error {
    border-color: #ff4d4f;
}

.ys-input-wrapper--error:focus-within {
    border-color: #ff4d4f;
}

.ys-input-wrapper--disabled {
    background: #f3f4f6;
    opacity: 0.7;
    pointer-events: none;
}

.ys-input__addon {
    display: inline-flex;
    align-items: center;
    padding: 0 12px;
    background: #f9fafb;
    color: #6b7280;
    font-size: 14px;
    border-right: 1px solid #e5e7eb;
    white-space: nowrap;
}

.ys-input__addon--suffix {
    border-right: none;
    border-left: 1px solid #e5e7eb;
}

.ys-input-wrapper .ys-input {
    border: none;
    border-radius: 0;
    box-shadow: none;
}

.ys-input-wrapper .ys-input:focus {
    box-shadow: none;
}

/* ==================== 数字输入框 ==================== */
.ys-input[type="number"] {
    -moz-appearance: textfield;
}

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

/* ==================== 搜索输入框 ==================== */
.ys-input--search {
    padding-left: 36px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%239ca3af' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'%3E%3C/circle%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'%3E%3C/line%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: left 12px center;
    background-size: 16px;
}

/* ==================== 密码输入框 ==================== */
.ys-input--password {
    padding-right: 40px;
}

/* ==================== 文件上传 ==================== */
.ys-file {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 16px;
    background: #ffffff;
    border: 1px dashed #d1d5db;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    font-size: 14px;
    color: #6b7280;
}

.ys-file:hover {
    border-color: #1e9fff;
    background: #f0f8ff;
    color: #1e9fff;
}

.ys-file input[type="file"] {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
    pointer-events: none;
}

/* ==================== 范围滑块 ==================== */
.ys-range {
    width: 100%;
    height: 6px;
    background: #e5e7eb;
    border-radius: 3px;
    outline: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    cursor: pointer;
}

.ys-range::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 18px;
    height: 18px;
    background: #1e9fff;
    border-radius: 50%;
    cursor: pointer;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
    transition: all 0.2s;
}

.ys-range::-webkit-slider-thumb:hover {
    background: #4db3ff;
    transform: scale(1.1);
}

.ys-range::-moz-range-thumb {
    width: 18px;
    height: 18px;
    background: #1e9fff;
    border: none;
    border-radius: 50%;
    cursor: pointer;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
}

.ys-range:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* ==================== 焦点状态 (无障碍) ==================== */
/* 边框变色已提供足够视觉反馈，无需额外 outline */

/* ==================== 响应式 ==================== */
@media (max-width: 767px) {

    .ys-input,
    .ys-select,
    .ys-textarea {
        font-size: 16px;
        padding: 12px 14px;
        min-height: 44px;
    }

    .ys-radio-group,
    .ys-checkbox-group {
        flex-direction: column;
    }

    .ys-form__row--horizontal {
        flex-direction: column;
        gap: 8px;
    }

    .ys-form__row--horizontal .ys-form__label {
        min-width: auto;
        padding-top: 0;
    }
}

/* ==================== 浏览器兼容前缀 ==================== */
.ys-input::-moz-focus-inner,
.ys-select::-moz-focus-inner,
.ys-textarea::-moz-focus-inner {
    border: 0;
    padding: 0;
}

.ys-input::-webkit-search-decoration,
.ys-input::-webkit-search-cancel-button,
.ys-input::-webkit-search-results-button,
.ys-input::-webkit-search-results-decoration {
    display: none;
}