/**
 * 现代浏览器增强样式
 * 适配桌面浏览器（Chrome/Firefox/Safari/Edge）
 * - 渐变按钮、卡片阴影、微交互动画
 * - 配合 Alpine.js 实现响应式交互
 */

/* 现代化按钮 */
button, .btn, input[type="submit"] {
    border-radius: 6px;
    transition: all 200ms ease;
}
button:hover, .btn:hover {
    box-shadow: 0 2px 8px rgba(0,0,0,0.15);
}
button:active, .btn:active {
    transform: scale(0.97);
}

/* 现代化卡片 */
.card, .inf, .inf1, .inf2 {
    box-shadow: 0 2px 12px rgba(0,0,0,0.08);
    transition: transform 200ms ease, box-shadow 200ms ease;
}
.card:hover, .inf:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 16px rgba(0,0,0,0.12);
}

/* 现代化输入框 */
input[type="text"]:focus,
input[type="password"]:focus,
input[type="tel"]:focus,
input[type="email"]:focus,
input[type="number"]:focus,
select:focus,
textarea:focus {
    border-color: #1677ff;
    box-shadow: 0 0 0 2px rgba(22,119,255,0.2);
    outline: none;
    transition: all 200ms ease;
}

/* 现代化标签 */
.tag, span[class*="tag"] {
    border-radius: 12px;
    padding: 2px 10px;
    font-size: 12px;
}

/* 列表项hover过渡 */
.list-item, .u2, tr:hover {
    transition: background-color 200ms ease;
}

/* 平滑滚动 */
html {
    scroll-behavior: smooth;
}