/* ============================================
   全局磨砂玻璃气泡效果
   覆盖：按钮、输入框、卡片、弹窗、表格、菜单等
   ============================================ */

/* 全局按钮 - 磨砂玻璃气泡 */
button,
.btn,
.layui-btn,
input[type="submit"],
input[type="button"],
a.btn,
button[type="submit"],
.install-btn,
.goto-btn,
.slider-btn,
.verify-btn {
    background: rgba(255, 255, 255, 0.18) !important;
    backdrop-filter: blur(14px) !important;
    -webkit-backdrop-filter: blur(14px) !important;
    border: 1px solid rgba(255, 255, 255, 0.28) !important;
    border-radius: 14px !important;
    box-shadow: 0 4px 18px rgba(0, 0, 0, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.3) !important;
    transition: all 0.3s ease !important;
    color: inherit !important;
}
button:hover,
.btn:hover,
.layui-btn:hover,
input[type="submit"]:hover,
input[type="button"]:hover,
a.btn:hover,
.install-btn:hover,
.goto-btn:hover {
    background: rgba(255, 255, 255, 0.28) !important;
    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.4) !important;
    transform: translateY(-1px) !important;
}
button:active,
.btn:active,
.layui-btn:active {
    transform: translateY(0) !important;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1) !important;
}

/* 主按钮/确认按钮 - 带渐变磨砂 */
.btn-primary,
.layui-btn-normal,
.layui-btn-primary,
button.primary,
.submit-btn {
    background: linear-gradient(135deg, rgba(102, 126, 234, 0.35), rgba(118, 75, 162, 0.35)) !important;
    border: 1px solid rgba(255, 255, 255, 0.35) !important;
    color: #fff !important;
}
.btn-primary:hover,
.layui-btn-normal:hover {
    background: linear-gradient(135deg, rgba(102, 126, 234, 0.5), rgba(118, 75, 162, 0.5)) !important;
}

/* 危险/删除按钮 */
.btn-danger,
.layui-btn-danger,
button.danger {
    background: linear-gradient(135deg, rgba(255, 77, 79, 0.35), rgba(255, 107, 107, 0.35)) !important;
    border: 1px solid rgba(255, 255, 255, 0.3) !important;
    color: #fff !important;
}

/* 全局输入框 - 磨砂玻璃气泡 */
input[type="text"],
input[type="password"],
input[type="email"],
input[type="number"],
input[type="tel"],
input[type="url"],
input[type="date"],
input[type="search"],
textarea,
select,
.form-input,
.layui-input,
.layui-textarea,
.layui-select {
    background: rgba(255, 255, 255, 0.15) !important;
    backdrop-filter: blur(10px) !important;
    -webkit-backdrop-filter: blur(10px) !important;
    border: 1px solid rgba(255, 255, 255, 0.25) !important;
    border-radius: 12px !important;
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.05), 0 2px 8px rgba(0, 0, 0, 0.04) !important;
    transition: all 0.3s ease !important;
    color: inherit !important;
}
input:focus,
textarea:focus,
select:focus,
.form-input:focus,
.layui-input:focus,
.layui-textarea:focus {
    background: rgba(255, 255, 255, 0.25) !important;
    border-color: rgba(102, 126, 234, 0.5) !important;
    box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1), inset 0 1px 3px rgba(0, 0, 0, 0.05) !important;
    outline: none !important;
}

/* 卡片/面板/容器 - 磨砂玻璃气泡 */
.card,
.panel,
.layui-card,
.layui-card-body,
.stat-card,
.stats-box,
.info-card,
.form-card,
.content-box,
.box,
.widget,
.module,
.tip-box,
.success-box,
.error-box,
.warning-box,
.license-box,
.form-group,
.preview-box,
.upload-box,
.phone-frame {
    background: rgba(255, 255, 255, 0.16) !important;
    backdrop-filter: blur(16px) !important;
    -webkit-backdrop-filter: blur(16px) !important;
    border: 1px solid rgba(255, 255, 255, 0.22) !important;
    border-radius: 18px !important;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.25) !important;
}

/* 弹窗/模态框 - 磨砂玻璃气泡 */
.layui-layer,
.layui-layer-content,
.modal,
.modal-content,
.dialog,
.popup,
.layui-form,
.layui-tab-content,
.layui-tab-item {
    background: rgba(255, 255, 255, 0.18) !important;
    backdrop-filter: blur(20px) !important;
    -webkit-backdrop-filter: blur(20px) !important;
    border: 1px solid rgba(255, 255, 255, 0.25) !important;
}
.layui-layer {
    border-radius: 20px !important;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.15) !important;
}
.layui-layer-title {
    background: rgba(255, 255, 255, 0.1) !important;
    backdrop-filter: blur(10px) !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.15) !important;
    border-radius: 20px 20px 0 0 !important;
}

/* 表格 - 磨砂玻璃 */
table,
.layui-table,
.layui-table-view,
.layui-table-header,
.layui-table-tool,
.data-table {
    background: rgba(255, 255, 255, 0.12) !important;
    backdrop-filter: blur(10px) !important;
    -webkit-backdrop-filter: blur(10px) !important;
    border-radius: 14px !important;
    border: 1px solid rgba(255, 255, 255, 0.18) !important;
}
.layui-table th,
.layui-table-header,
table th {
    background: rgba(255, 255, 255, 0.15) !important;
    backdrop-filter: blur(8px) !important;
}
.layui-table tr:hover,
table tr:hover {
    background: rgba(255, 255, 255, 0.1) !important;
}

/* 标签页 - 磨砂玻璃 */
.layui-tab-title,
.tabs,
.tab-nav {
    background: rgba(255, 255, 255, 0.12) !important;
    backdrop-filter: blur(10px) !important;
    -webkit-backdrop-filter: blur(10px) !important;
    border-radius: 14px !important;
    border: 1px solid rgba(255, 255, 255, 0.18) !important;
}
.layui-tab-title li,
.tab-item {
    border-radius: 10px !important;
    margin: 4px !important;
}
.layui-tab-title .layui-this,
.tab-item.active {
    background: rgba(255, 255, 255, 0.25) !important;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08) !important;
}

/* 下拉菜单 - 磨砂玻璃 */
.layui-nav,
.layui-nav-child,
.dropdown-menu,
.select-dropdown,
.layui-form-select dl {
    background: rgba(255, 255, 255, 0.18) !important;
    backdrop-filter: blur(16px) !important;
    -webkit-backdrop-filter: blur(16px) !important;
    border: 1px solid rgba(255, 255, 255, 0.22) !important;
    border-radius: 14px !important;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.12) !important;
}
.layui-nav .layui-nav-item a:hover,
.layui-nav .layui-this,
.dropdown-menu li:hover {
    background: rgba(255, 255, 255, 0.2) !important;
    border-radius: 10px !important;
}

/* 侧边栏 - 磨砂玻璃 */
.layui-side,
.sidebar,
.left-menu {
    background: rgba(255, 255, 255, 0.14) !important;
    backdrop-filter: blur(18px) !important;
    -webkit-backdrop-filter: blur(18px) !important;
    border-right: 1px solid rgba(255, 255, 255, 0.2) !important;
}

/* 顶部栏 - 磨砂玻璃 */
.layui-header,
.header,
.topbar,
.navbar {
    background: rgba(255, 255, 255, 0.16) !important;
    backdrop-filter: blur(16px) !important;
    -webkit-backdrop-filter: blur(16px) !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.2) !important;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06) !important;
}

/* 主内容区 - 磨砂玻璃 */
.layui-body,
.main-content,
.content-area {
    background: rgba(255, 255, 255, 0.08) !important;
    backdrop-filter: blur(8px) !important;
    -webkit-backdrop-filter: blur(8px) !important;
}

/* 分页 - 磨砂玻璃 */
.layui-laypage a,
.layui-laypage span,
.pagination a,
.pagination span {
    background: rgba(255, 255, 255, 0.15) !important;
    backdrop-filter: blur(8px) !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
    border-radius: 10px !important;
    margin: 0 3px !important;
}
.layui-laypage .layui-laypage-curr .layui-laypage-em,
.pagination .active {
    background: linear-gradient(135deg, rgba(102, 126, 234, 0.5), rgba(118, 75, 162, 0.5)) !important;
    border-radius: 10px !important;
}

/* 徽章/标签 - 磨砂玻璃气泡 */
.badge,
.tag,
.label,
.layui-badge,
.status-tag {
    background: rgba(255, 255, 255, 0.2) !important;
    backdrop-filter: blur(8px) !important;
    -webkit-backdrop-filter: blur(8px) !important;
    border: 1px solid rgba(255, 255, 255, 0.25) !important;
    border-radius: 20px !important;
    padding: 2px 10px !important;
}

/* 开关/复选框/单选框 - 磨砂玻璃 */
.layui-form-switch,
.layui-form-checkbox,
.layui-form-radio,
.switch,
.checkbox,
.radio {
    background: rgba(255, 255, 255, 0.15) !important;
    backdrop-filter: blur(8px) !important;
    -webkit-backdrop-filter: blur(8px) !important;
    border: 1px solid rgba(255, 255, 255, 0.25) !important;
    border-radius: 12px !important;
}

/* 进度条 - 磨砂玻璃 */
.layui-progress,
.progress-bar,
.progress {
    background: rgba(255, 255, 255, 0.15) !important;
    backdrop-filter: blur(8px) !important;
    border-radius: 10px !important;
    overflow: hidden !important;
}
.layui-progress-bar,
.progress-fill {
    background: linear-gradient(90deg, rgba(102, 126, 234, 0.6), rgba(118, 75, 162, 0.6)) !important;
    border-radius: 10px !important;
}

/* 提示框/消息 - 磨砂玻璃 */
.layui-layer-tips,
.toast,
.alert,
.notification,
.layui-layer-msg {
    background: rgba(255, 255, 255, 0.22) !important;
    backdrop-filter: blur(16px) !important;
    -webkit-backdrop-filter: blur(16px) !important;
    border: 1px solid rgba(255, 255, 255, 0.3) !important;
    border-radius: 14px !important;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.12) !important;
}

/* 滚动条 - 磨砂风格 */
::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}
::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.05);
    border-radius: 4px;
}
::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.25);
    backdrop-filter: blur(4px);
    border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 255, 255, 0.4);
}

/* 通用容器增强 */
div[class*="card"],
div[class*="panel"],
div[class*="box"],
div[class*="container"] {
    border-radius: 16px !important;
}