:root {
    --primary: #4f46e5;
    --primary-light: #818cf8;
    --text-dark: #1e293b;
    --text-light: #64748b;
    --bg-color: #f8fafc;
    --glass: rgba(255, 255, 255, 0.95);
}

* { box-sizing: border-box; outline: none; }
body {
    margin: 0; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    background: var(--bg-color); color: var(--text-dark);
    display: flex; justify-content: center; align-items: center; min-height: 100vh;
    overflow: hidden;
}

.bg-glow {
    position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    background: radial-gradient(circle at 10% 20%, rgba(79, 70, 229, 0.05) 0%, transparent 50%),
                radial-gradient(circle at 90% 80%, rgba(129, 140, 248, 0.08) 0%, transparent 50%);
    z-index: -1;
}

.app-container { width: 100%; max-width: 550px; padding: 20px; z-index: 1; }

.card {
    background: var(--glass); border-radius: 30px; padding: 40px;
    box-shadow: 0 20px 40px rgba(0,0,0,0.05);
    display: none; transform: translateY(20px); opacity: 0;
    transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

.card.active { display: block; transform: translateY(0); opacity: 1; }

/* 欢迎页 */
.badge { background: #eef2ff; color: var(--primary); padding: 6px 14px; border-radius: 50px; font-size: 12px; font-weight: 700; }
h1 { font-size: 2.2rem; margin: 15px 0; letter-spacing: -1px; }
.hero-image { font-size: 80px; text-align: center; margin: 30px 0; color: var(--primary-light); animation: float 3s infinite ease-in-out; }

/* 题目页 */
.progress-track { background: #e2e8f0; height: 8px; border-radius: 4px; margin: 15px 0 30px; overflow: hidden; }
#progress-fill { background: var(--primary); height: 100%; width: 0; transition: width 0.3s; }
.opt-card {
    background: #fff; border: 2px solid #f1f5f9; padding: 20px; border-radius: 20px;
    margin-bottom: 16px; width: 100%; cursor: pointer; display: flex; align-items: center;
    transition: all 0.2s; text-align: left;
}
.opt-card:hover { border-color: var(--primary-light); transform: scale(1.02); background: #fdfdff; }
.opt-card .label { background: #f1f5f9; width: 32px; height: 32px; display: flex; align-items: center; justify-content: center; border-radius: 8px; margin-right: 15px; font-weight: bold; }

/* 按钮 */
.btn-primary { 
    background: var(--primary); color: white; border: none; width: 100%; 
    padding: 18px; border-radius: 20px; font-size: 1.1rem; font-weight: 600; cursor: pointer;
    box-shadow: 0 10px 20px rgba(79, 70, 229, 0.2);
}

/* 结果页 */
.result-content { text-align: center; }
#res-code { font-size: 5rem; color: var(--primary); margin: 5px 0; }
.tags { display: flex; justify-content: center; gap: 8px; margin: 20px 0; flex-wrap: wrap; }
.tag { background: #f1f5f9; padding: 5px 15px; border-radius: 10px; font-size: 14px; color: var(--text-light); }
.res-description { text-align: left; line-height: 1.6; color: #475569; background: #f8fafc; padding: 20px; border-radius: 20px; margin-bottom: 25px; }

@keyframes float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-15px); } }