/* css/style.css */

/* 基础设置 */
body { font-family: system-ui, -apple-system, sans-serif; }

/* 磨砂玻璃 */
.glass {
    background: rgba(255, 255, 255, 0.85);
    backdrop-filter: blur(12px);
}

/* 加载中动画 */
.loader {
    border: 4px solid #f3f3f3;
    border-top: 4px solid #3498db;
    border-radius: 50%;
    width: 40px;
    height: 40px;
    animation: spin 1s linear infinite;
    margin: 0 auto;
}
@keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }

/* Vue 加载完成前隐藏 {{ }} */
[v-cloak] { display: none !important; }

/* 提取的组件类 (利用 Tailwind @apply 的思想，但这里用原生 CSS 写) */
.input-field {
    width: 100%;
    padding: 0.75rem 1rem; /* px-4 py-3 */
    border-radius: 0.75rem; /* rounded-xl */
    border: 1px solid #e5e7eb; /* border-gray-200 */
    background-color: #f9fafb; /* bg-gray-50 */
    transition: all 0.2s;
    outline: none;
}
.input-field:focus {
    background-color: white;
    box-shadow: 0 0 0 2px #6366f1; /* ring-indigo-500 */
}

.btn-primary {
    background-color: #4f46e5; /* bg-indigo-600 */
    color: white;
    font-weight: 700;
    border-radius: 0.75rem;
    transition: all 0.2s;
}
.btn-primary:hover {
    background-color: #4338ca;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
    transform: scale(0.98);
}

.tab-btn {
    /* padding: 0.5rem 1.5rem;  <-- 原来的可能有点大 */
    padding: 0.5rem 0; /* 手机上不要左右内边距，靠 grid 分配宽度 */
    width: 100%;       /* 撑满格子 */
    border-radius: 0.5rem;
    font-size: 0.875rem;
    transition: all 0.2s;
    /* 只有在电脑上才需要左右 padding */
}

@media (min-width: 768px) {
    .tab-btn {
        padding: 0.5rem 1.5rem;
        width: auto;
    }
}
.tab-inactive {
    color: #6b7280;
}
.tab-active {
    background-color: #eef2ff;
    color: #4f46e5;
    font-weight: 700;
}

.card {
    background-color: white;
    border-radius: 1rem;
    border: 1px solid #f3f4f6;
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
    transition: all 0.3s;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}
.card:hover {
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1);
    transform: translateY(-4px);
}