:root {
    --ui-font-family: "PingFang SC", "Microsoft YaHei", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --ui-font-size: 14px;
    --ui-font-size-sm: 12px;
    --ui-font-size-lg: 16px;
    --ui-text-color: #1f2937;
    --ui-muted-color: #6b7280;
    --ui-border-color: #d1d5db;
    --ui-border-hover: #9ca3af;
    --ui-focus-color: #4f46e5;
    --ui-bg: #ffffff;
    --ui-bg-soft: #f9fafb;
    --ui-btn-radius: 8px;
    --ui-control-radius: 8px;
    --ui-control-height: 36px;
    --ui-control-height-sm: 32px;
    --ui-shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.06);
    --ui-shadow-focus: 0 0 0 3px rgba(79, 70, 229, 0.12);
}

html,
body {
    font-family: var(--ui-font-family);
    color: var(--ui-text-color);
    font-size: var(--ui-font-size);
}

input,
select,
textarea,
button {
    font-family: inherit;
    font-size: inherit;
}

input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]),
select,
textarea,
.form-control,
.form-select,
.el-input__inner,
.el-textarea__inner {
    border-radius: var(--ui-control-radius);
    border-color: var(--ui-border-color);
    transition: border-color 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease;
}

input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]):hover,
select:hover,
textarea:hover,
.form-control:hover,
.form-select:hover,
.el-input__inner:hover,
.el-textarea__inner:hover {
    border-color: var(--ui-border-hover);
}

input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]):focus,
select:focus,
textarea:focus,
.form-control:focus,
.form-select:focus,
.el-input__inner:focus,
.el-textarea__inner:focus {
    border-color: var(--ui-focus-color) !important;
    box-shadow: var(--ui-shadow-focus) !important;
    outline: none;
}

input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]),
select,
.form-control,
.form-select {
    min-height: var(--ui-control-height);
}

.form-control.form-control-sm,
.form-select.form-select-sm {
    min-height: var(--ui-control-height-sm);
    height: var(--ui-control-height-sm);
}

input::placeholder,
textarea::placeholder,
.form-control::placeholder {
    color: #aaa;
    opacity: 0.8;
}

.form-control.form-control-sm::placeholder,
textarea.form-control.form-control-sm::placeholder {
    font-size: var(--ui-font-size-sm);
}

button,
.btn,
[role="button"],
.el-button {
    border-radius: var(--ui-btn-radius);
    font-weight: 600;
    letter-spacing: 0.1px;
    transition: transform 0.15s ease, box-shadow 0.2s ease, background-color 0.2s ease, border-color 0.2s ease;
}

button:hover,
.btn:hover,
[role="button"]:hover,
.el-button:hover {
    transform: translateY(-1px);
}

button:active,
.btn:active,
[role="button"]:active,
.el-button:active {
    transform: translateY(0);
}

.btn,
.el-button {
    box-shadow: var(--ui-shadow-sm);
}

.btn-primary,
.el-button--primary {
    border-color: #4f46e5;
    background-color: #4f46e5;
}

.btn-primary:hover,
.el-button--primary:hover {
    border-color: #4338ca;
    background-color: #4338ca;
}

.table thead th,
table thead th {
    font-size: 12px;
    letter-spacing: 0.3px;
}

.card,
.el-card,
.modal-content,
.swal2-popup {
    border-radius: 10px;
}

.el-input__wrapper {
    border-radius: var(--ui-control-radius);
}