/* ========== CSS Variables ========== */
@import url("https://fonts.googleapis.com/css2?family=Nunito:wght@700;800;900&family=ZCOOL+KuaiLe&family=Noto+Sans+SC:wght@400;500;700;900&display=swap");
:root {
    --primary: #2B4C9B;
    --primary-light: #5B7AD1;
    --secondary: #EFA642; 
    --accent: #E03131; 
    --warning: #FFD13B;
    --danger: #E03131;
    --success: #4CAF50;
    --dark: #12214C;
    --gray: #8F9EC2;
    --light: #EBF0FA;
    --white: #FFFFFF;
    --bg: #F5F7FA;
    --card-bg: #FFFFFF;
    --glass: rgba(255,255,255,0.85);
    
    --shadow: 4px 6px 0px rgba(43, 76, 155, 0.12);
    --shadow-sm: 2px 3px 0px rgba(43, 76, 155, 0.08);
    --shadow-hover: 6px 8px 0px rgba(43, 76, 155, 0.2);
    
    --radius: 20px;
    --radius-sm: 12px;
    --radius-pill: 999px;
    
    --sidebar-w: 100px;
    --topbar-h: 74px;
    
    --font: "Nunito", "Noto Sans SC", 'PingFang SC', 'Microsoft YaHei', sans-serif;
    --font-hand: "ZCOOL KuaiLe", "Noto Sans SC", 'PingFang SC', sans-serif;
    --font-brand: "ZCOOL KuaiLe", "Nunito", sans-serif;
    --font-heading: "ZCOOL KuaiLe", "Nunito", sans-serif;
    --font-score: "Nunito", monospace;
    
    --rank-bronze: #A0785A;
    --rank-silver: #A8B4BC;
    --rank-gold: #FFD13B;
    --rank-king: #E03131;
}

* { margin:0; padding:0; box-sizing:border-box; }
html,body { height:100%; font-family:var(--font); background:var(--bg); color:var(--dark); overflow-x:hidden; }
h1, h2, h3 { font-family: var(--font-heading); font-weight: 800; letter-spacing: 0.5px; }
.app-title { font-family: var(--font-brand); font-weight: 900; letter-spacing: 1px; color: var(--primary); }
.login-card h1 { font-family: var(--font-brand); letter-spacing:2px; font-weight: 900; color: var(--primary); }
.icon-gold { color:#FFD13B; }
.icon-silver { color:#A8B4BC; }
.icon-bronze { color:#A0785A; }
a { text-decoration:none; color:inherit; }
button { cursor:pointer; border:none; font-family:var(--font); font-weight: 800; }
input,select,textarea { font-family:var(--font); font-weight: 700; color:var(--dark); }

/* ========== Rain Animation ========== */
@keyframes rainDrop {
    0% { transform:translateY(-10vh) rotate(15deg); opacity:0; }
    10% { opacity:0.6; }
    90% { opacity:0.3; }
    100% { transform:translateY(110vh) rotate(15deg); opacity:0; }
}
.rain-container {
    position:fixed; inset:0; pointer-events:none; overflow:hidden; z-index:0;
}
.rain-drop {
    position:absolute; top:-20px; width:1px; height:18px;
    background:linear-gradient(to bottom, transparent, var(--primary-light));
    opacity:0; animation:rainDrop linear infinite;
}

/* ========== Login Page ========== */
.login-page {
    min-height:100vh; display:flex; align-items:center; justify-content:center;
    background: var(--bg); position:relative; overflow:hidden;
}
.login-page::before {
    content:''; position:absolute; inset:0; pointer-events:none;
    background-image: radial-gradient(var(--light) 20%, transparent 20%);
    background-size: 24px 24px;
    opacity: 0.6;
}
.login-card {
    background:var(--card-bg); border-radius:var(--radius); border: 3px solid var(--primary);
    padding:48px 40px; text-align:center; box-shadow:var(--shadow-hover); max-width:380px; width:90%; position:relative;
}
.login-logo { font-size:64px; color:var(--primary); margin-bottom:12px; }
.login-card h1 { font-size:40px; color:var(--primary); margin-bottom:28px; line-height:1.2; text-shadow: 2px 2px 0 var(--light); }
.login-subtitle { display: none; }
.login-form { display:flex; flex-direction:column; gap:16px; }
.login-form input {
    padding:16px 20px; border:3px solid var(--light); border-radius:var(--radius-pill);
    font-size:16px; outline:none; transition:border .2s; background: var(--bg);
}
.login-form input:focus { border-color:var(--primary); background: var(--white); }
.login-error { color:var(--danger); margin-top:10px; font-size:14px; font-weight:800; }

/* ========== Buttons ========== */
.btn {
    display:inline-flex; align-items:center; gap:8px; padding:12px 24px;
    border-radius:var(--radius-pill); font-size:15px; font-weight:800; transition:all .2s;
    border: 3px solid transparent; letter-spacing: 0.5px; position:relative;
}
.btn-primary { background:var(--primary); color:var(--white); }
.btn-primary:hover { background:var(--primary-light); color:var(--white); transform:translateY(-2px); box-shadow: var(--shadow-sm); }
.btn-success { background:var(--success); color:#fff; }
.btn-danger { background:var(--danger); color:#fff; }
.btn-warning { background:var(--warning); color:var(--dark); }
.btn-sm { padding:8px 18px; font-size:13px; }
.btn-lg { padding:16px 32px; font-size:18px; width:100%; justify-content:center; }
.btn-icon { background:transparent; color:var(--primary); font-size:20px; padding:10px; border-radius:50%; }
.btn-icon:hover { background:var(--light); color:var(--primary); transform:rotate(5deg); }
.btn:disabled, .btn.disabled { opacity:0.5; cursor:not-allowed; pointer-events:none; }

/* ========== App Layout ========== */
.app-container { display:grid; grid-template-columns:var(--sidebar-w) 1fr; grid-template-rows:var(--topbar-h) 1fr; min-height:100vh; }
.top-bar {
    grid-column:1/-1; display:flex; align-items:center; justify-content:space-between;
    padding:0 30px; background:var(--bg); border-bottom: none; z-index:100; height:var(--topbar-h);
}
.top-bar-left, .top-bar-right { display:flex; align-items:center; gap:16px; }
.app-title { font-size:26px; color:var(--primary); user-select:none; white-space:nowrap; letter-spacing:1px; }
.app-title svg { stroke:var(--primary); }
.page-header h3 { font-family:var(--font-heading); font-size: 28px; color: var(--primary); }
.class-selector {
    padding:10px 18px; border:3px solid var(--light); border-radius:var(--radius-pill);
    font-size:15px; background:var(--white); outline:none; min-width:160px; font-weight:800;
}
.mode-badge {
    padding:8px 18px; border-radius:var(--radius-pill); font-size:13px; font-weight:800; border: 2px solid;
}
.mode-readonly { background:var(--light); color:var(--primary); border-color: var(--primary-light); }
.mode-teacher { background:#FFF3E0; color:#E65100; border-color: #FFB74D; }

/* Sidebar */
.sidebar {
    grid-row:2; display:flex; flex-direction:column; align-items:center;
    padding:30px 0; gap:12px; background:var(--primary);
    border-right:none; overflow-y:auto; 
    border-top-right-radius: 40px; border-bottom-right-radius: 40px;
    box-shadow: 4px 0 20px rgba(43,76,155,0.1); margin-right: 12px;
}
.nav-item {
    display:flex; flex-direction:column; align-items:center; gap:6px;
    padding:16px 8px; border-radius:var(--radius-sm); font-size:12px; font-weight: 800; color:rgba(255,255,255,0.7);
    width:80px; text-align:center; transition:all .2s; border: 2px solid transparent; text-decoration: none;
}
.nav-item i { font-size:24px; margin-bottom: 2px; }
.nav-item:hover { color:var(--white); transform: translateY(-2px); }
.nav-item.active { background:var(--white); color:var(--primary); box-shadow: var(--shadow-sm); border-radius: var(--radius); }

/* Main Content */
.main-content {
    grid-row:2; grid-column:2; padding:30px; overflow-y:auto; position:relative;
}
.page { display:none; }
.page.active { display:block; animation:fadeUp .3s ease; }
@keyframes fadeUp { from{opacity:0;transform:translateY(15px)} to{opacity:1;transform:none} }

.page-header { display:flex; align-items:center; justify-content:space-between; margin-bottom:24px; flex-wrap:wrap; gap:12px; }
.page-actions { display:flex; gap:12px; }

/* ========== Student Grid ========== */
.student-grid {
    display:grid; grid-template-columns:repeat(auto-fill, minmax(180px, 1fr)); gap:20px;
}
.student-card {
    background:var(--card-bg); border-radius:var(--radius); border: 3px solid var(--light);
    padding:20px 16px; text-align:center; box-shadow:var(--shadow-sm);
    cursor:pointer; transition:all .3s cubic-bezier(0.25, 0.8, 0.25, 1); position:relative;
}
.student-card:hover { transform:translateY(-6px); box-shadow:var(--shadow-hover); border-color:var(--primary-light); }
.student-card.selected { border-color:var(--primary); background:#F2F6FF; box-shadow: 0 0 0 2px var(--primary), var(--shadow); }
.student-card .checkbox {
    position:absolute; top:12px; left:12px; width:24px; height:24px;
    border-radius:6px; border:3px solid var(--light); display:none; align-items:center; justify-content:center;
}
.batch-mode .student-card .checkbox { display:flex; }
.student-card.selected .checkbox { background:var(--primary); border-color:var(--primary); color:#fff; }
.student-avatar {
    width:72px; height:72px; border-radius:50%; margin:0 auto 12px; object-fit:cover;
    border:4px solid var(--light); position:relative;
}
.student-avatar-wrap { position:relative; display:inline-block; }
.streak-fire {
    position:absolute; top:-12px; right:-8px; font-size:24px; animation:flicker 0.6s infinite alternate;
}
@keyframes flicker { from{transform:scale(1) rotate(-5deg)} to{transform:scale(1.15) rotate(5deg)} }
.student-name { font-size:15px; font-weight:700; margin-bottom:6px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; font-family: var(--font-hand); }
.student-score { font-size:24px; font-weight:900; color:var(--primary); font-family:var(--font-score); }
.student-rank {
    display:inline-block; padding:4px 12px; border-radius:var(--radius-pill); font-size:12px; font-weight:800;
    margin-top:6px; color:#fff;
}
.rank-bronze { background:var(--rank-bronze); }
.rank-silver { background:var(--rank-silver); color:#333; }
.rank-gold { background:var(--rank-gold); color:#333; }
.rank-king { background:var(--rank-king); }

/* ========== Batch Bar ========== */
.batch-bar {
    position:fixed; bottom:0; left:calc(var(--sidebar-w) + 12px); right:0;
    background:var(--card-bg); border-top:3px solid var(--primary);
    padding:20px 30px; z-index:200; box-shadow: 0 -8px 24px rgba(43,76,155,0.1);
    border-top-left-radius: 30px; border-top-right-radius: 30px;
}
.batch-bar-inner { display:flex; align-items:center; gap:20px; flex-wrap:wrap; }
#batch-count { font-weight:900; color:var(--primary); font-size: 16px; }
.batch-tags { display:flex; gap:10px; flex-wrap:wrap; flex:1; }
.tag-btn {
    padding:10px 20px; border-radius:var(--radius-pill); font-size:14px; font-weight:800; font-family:var(--font);
    border:2px solid transparent; transition:all .2s; cursor:pointer;
}
.tag-green { background:#E2F0CB; color:#4CAF50; border:2px solid #C5E1A5; }
.tag-green:hover { background:#4CAF50; color:#fff; transform: translateY(-2px); }
.tag-red { background:#FFEBEE; color:#E03131; border:2px solid #FFCDD2; }
.tag-red:hover { background:#E03131; color:#fff; transform: translateY(-2px); }

/* ========== Modal ========== */
.modal-overlay {
    position:fixed; inset:0; background:rgba(18, 33, 76, 0.7); z-index:1000;
    display:flex; align-items:center; justify-content:center; padding:16px;
    backdrop-filter: blur(8px);
}
.modal-content {
    background:#fff; border-radius:var(--radius); border: 4px solid var(--primary); padding:40px; max-width:560px; width:100%;
    max-height:90vh; overflow-y:auto; box-shadow: 8px 12px 0px rgba(43, 76, 155, 0.3);
}
.modal-header { display:flex; align-items:center; justify-content:space-between; margin-bottom:30px; }
.modal-header h3 { font-size:28px; font-family:var(--font-heading); color:var(--primary); font-weight:800; }
.modal-close { background:none; font-size:26px; color:var(--gray); padding:8px; border-radius:50%; transition:all .2s; }
.modal-close:hover { color:var(--white); background:var(--danger); transform:rotate(90deg); }

/* ========== Scoring Panel ========== */
.score-tabs { display:flex; gap:8px; margin-bottom:20px; }
.score-tab {
    flex:1; padding:12px; text-align:center; font-weight:800; border:3px solid var(--light);
    background:var(--white); cursor:pointer; transition:all .2s; border-radius:var(--radius-pill);
}
.score-tab.active { background:var(--primary); color:#fff; border-color:var(--primary); box-shadow: var(--shadow-sm); transform: translateY(-2px); }

.score-dimension { margin-bottom:16px; }
.score-dimension label { display:block; font-weight:800; margin-bottom:10px; font-size:15px; color:var(--primary); }
.score-options { display:flex; gap:10px; flex-wrap:wrap; }
.score-option {
    padding:8px 18px; border-radius:var(--radius-pill); font-size:13px; border:2px solid var(--light);
    background:#fff; cursor:pointer; transition:all .2s; font-weight:700;
}
.score-option:hover { border-color:var(--primary-light); transform: translateY(-2px); }
.score-option.selected { background:var(--primary); color:#fff; border-color:var(--primary); box-shadow: 0 4px 10px rgba(43,76,155,0.2); }
.score-total { font-size:36px; font-weight:900; color:var(--primary); text-align:center; padding:16px 0; font-family:var(--font-score); }

.quick-tags { display:flex; flex-wrap:wrap; gap:10px; margin-top:16px; }
.quick-tag {
    padding:10px 20px; border-radius:var(--radius-pill); font-size:14px; font-weight:800;
    transition:all .2s; border:2px solid transparent; cursor: pointer;
}
.quick-tag-green { background:#E2F0CB; color:#4CAF50; border-color:#C5E1A5; }
.quick-tag-green:hover { background:#4CAF50; color:#fff; transform:scale(1.05) translateY(-2px); box-shadow: 0 4px 10px rgba(76,175,80,0.3); }
.quick-tag-red { background:#FFEBEE; color:#E03131; border-color:#FFCDD2; }
.quick-tag-red:hover { background:#E03131; color:#fff; transform:scale(1.05) translateY(-2px); box-shadow: 0 4px 10px rgba(224,49,49,0.3); }

/* ========== Shop Grid ========== */
.shop-grid {
    display:grid; grid-template-columns:repeat(auto-fill, minmax(220px,1fr)); gap:24px;
}
.shop-card {
    background:var(--card-bg); border-radius:var(--radius); padding:24px 16px; text-align:center;
    box-shadow:var(--shadow-sm); transition:all .3s cubic-bezier(0.25, 0.8, 0.25, 1);
    border: 3px solid var(--light);
}
.shop-card:hover { transform:translateY(-6px); box-shadow:var(--shadow-hover); border-color:var(--primary-light); }
.shop-card-img { width:64px; height:64px; margin:0 auto 12px; display:flex; align-items:center; justify-content:center; }
.shop-card h4 { margin-bottom:8px; font-size: 18px; font-weight: 800; }
.shop-card .price { font-size:22px; font-weight:900; color:var(--primary); font-family:var(--font-score); }
.shop-card .stock { font-size:13px; color:var(--gray); margin-bottom:12px; font-weight: 700; }

/* ========== Painting Lightbox ========== */
.painting-lightbox {
    position:fixed; inset:0; z-index:2000; background:rgba(0,0,0,0.92);
    display:flex; flex-direction:column; align-items:center; justify-content:center;
    cursor:zoom-out; animation:lbFadeIn .3s ease;
}
@keyframes lbFadeIn { from{opacity:0} to{opacity:1} }
.lightbox-close {
    position:absolute; top:20px; right:24px; font-size:28px; color:#fff; cursor:pointer;
    width:48px; height:48px; display:flex; align-items:center; justify-content:center;
    border-radius:50%; background:rgba(255,255,255,0.15); transition:all .2s;
}
.lightbox-close:hover { background:var(--danger); transform:rotate(90deg); }
.lightbox-img {
    max-width:90vw; max-height:78vh; object-fit:contain; border-radius:var(--radius);
    box-shadow:0 8px 40px rgba(0,0,0,0.5); cursor:default;
    animation:lbZoomIn .4s cubic-bezier(.2,.8,.3,1);
}
@keyframes lbZoomIn { from{transform:scale(0.7);opacity:0} to{transform:scale(1);opacity:1} }
.lightbox-caption {
    margin-top:20px; text-align:center; color:#fff; max-width:600px; cursor:default;
}
.lightbox-caption h3 { font-size:22px; font-family:var(--font-heading); margin-bottom:6px; }
.lightbox-caption p { font-size:14px; opacity:0.7; }

/* ========== Gacha ========== */
.gacha-container { text-align:center; padding:40px 20px; }

/* === 卡通扭蛋机 === */
.gashapon-machine {
    width:220px; margin:0 auto 24px; cursor:pointer; position:relative;
    transition:transform .3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
.gashapon-machine:hover { transform:scale(1.04) rotate(-2deg); }
.gashapon-machine:active { transform:scale(0.98); }
/* 机器球体部分 */
.gm-dome {
    width:200px; height:160px; margin:0 auto; background:var(--white);
    border:5px solid var(--primary); border-bottom:none;
    border-radius:100px 100px 0 0; position:relative; overflow:hidden;
    box-shadow:inset 0 -20px 30px rgba(43,76,155,0.08);
}
.gm-dome::before {
    content:''; position:absolute; top:12px; left:12px; right:12px; bottom:12px;
    border:3px dashed var(--light); border-radius:90px 90px 0 0; pointer-events:none;
}
/* 内部扭蛋 */
.gm-capsules {
    position:absolute; bottom:8px; left:50%; transform:translateX(-50%);
    display:flex; gap:4px; flex-wrap:wrap; justify-content:center; width:160px;
}
.gm-mini-capsule {
    width:28px; height:36px; border-radius:50%; position:relative;
}
.gm-mini-capsule::before {
    content:''; position:absolute; top:0; left:0; right:0; height:50%;
    border-radius:14px 14px 0 0;
}
.gm-mini-capsule::after {
    content:''; position:absolute; bottom:0; left:0; right:0; height:50%;
    border-radius:0 0 14px 14px;
}
.gm-mini-capsule.mc-red::before { background:#FF6B6B; }
.gm-mini-capsule.mc-red::after { background:#FFB4B4; }
.gm-mini-capsule.mc-blue::before { background:var(--primary); }
.gm-mini-capsule.mc-blue::after { background:var(--primary-light); }
.gm-mini-capsule.mc-yellow::before { background:var(--secondary); }
.gm-mini-capsule.mc-yellow::after { background:#FFE0A0; }
.gm-mini-capsule.mc-green::before { background:var(--success); }
.gm-mini-capsule.mc-green::after { background:#A5D6A7; }
.gm-mini-capsule.mc-pink::before { background:#E91E63; }
.gm-mini-capsule.mc-pink::after { background:#F8BBD0; }
/* 机器身体 */
.gm-body {
    width:220px; background:var(--primary); border-radius:0 0 var(--radius) var(--radius);
    padding:16px 0 12px; text-align:center; position:relative;
    border:5px solid var(--primary); box-shadow:var(--shadow);
}
.gm-body::before {
    content:''; position:absolute; top:0; left:30px; right:30px; height:4px;
    background:var(--secondary); border-radius:0 0 4px 4px;
}
.gm-label {
    font-family:var(--font-brand); font-size:16px; font-weight:900; color:var(--white);
    letter-spacing:2px; margin-bottom:8px; text-shadow:1px 1px 0 rgba(0,0,0,0.2);
}
/* 扭蛋旋钮 */
.gm-knob-wrap { display:flex; justify-content:center; margin-top:4px; }
.gm-knob {
    width:44px; height:44px; border-radius:50%; background:var(--secondary);
    border:4px solid var(--white); box-shadow:2px 3px 0 rgba(0,0,0,0.15);
    display:flex; align-items:center; justify-content:center;
    animation:knobPulse 2s ease-in-out infinite;
}
.gm-knob i { font-size:16px; color:var(--white); }
@keyframes knobPulse { 0%,100%{transform:scale(1)} 50%{transform:scale(1.12)} }
/* 出球口 */
.gm-slot {
    width:60px; height:24px; background:var(--dark); border-radius:0 0 12px 12px;
    margin:8px auto 0; border:3px solid var(--primary-light); border-top:none;
}

.gacha-cost {
    font-size:18px; font-weight:900; font-family:var(--font-score); color:var(--primary);
    margin-bottom:16px; padding:8px 24px; display:inline-block;
    background:var(--light); border-radius:var(--radius-pill); border:2px solid var(--primary-light);
}
.gacha-cost i { color:var(--secondary); }

/* === 奖池预览（游戏风） === */
.prize-pool-section {
    max-width:480px; margin:24px auto 0; text-align:left;
}
.prize-pool-title {
    display:flex; align-items:center; gap:8px; margin-bottom:14px;
    font-family:var(--font-heading); font-size:20px; color:var(--primary);
}
.prize-pool-title i { color:var(--secondary); }
.prize-pool-grid {
    display:grid; grid-template-columns:repeat(auto-fill, minmax(130px,1fr)); gap:10px;
}
.prize-pool-card {
    background:var(--card-bg); border-radius:var(--radius-sm); padding:14px 10px;
    text-align:center; border:3px solid var(--light); transition:all .2s;
    position:relative; overflow:hidden;
}
.prize-pool-card:hover { transform:translateY(-3px); border-color:var(--primary-light); box-shadow:var(--shadow-sm); }
.prize-pool-card .pp-icon { font-size:36px; margin-bottom:8px; display:flex; justify-content:center; }
.prize-pool-card .pp-name { font-size:13px; font-weight:800; color:var(--dark); margin-bottom:4px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.prize-pool-card .pp-stock { font-size:11px; color:var(--gray); font-weight:700; }
/* 稀有度标记 */
.pp-rarity {
    position:absolute; top:6px; right:6px; font-size:10px; font-weight:900;
    padding:2px 8px; border-radius:var(--radius-pill); color:#fff;
}
.pp-rarity-ssr { background:linear-gradient(135deg,#FFD700,#FF8C00); animation:rarityGlow 1.5s ease-in-out infinite alternate; }
.pp-rarity-sr { background:linear-gradient(135deg,#9C27B0,#E040FB); }
.pp-rarity-r { background:var(--primary); }
.pp-rarity-n { background:var(--gray); }
@keyframes rarityGlow { from{box-shadow:0 0 4px rgba(255,215,0,0.5)} to{box-shadow:0 0 12px rgba(255,215,0,0.8)} }
/* 卡片稀有度边框 */
.prize-pool-card.card-ssr { border-color:#FFD700; background:linear-gradient(135deg,#FFFDE7,#FFF8E1); }
.prize-pool-card.card-sr { border-color:#CE93D8; background:linear-gradient(135deg,#F3E5F5,#FCE4EC); }

/* === 扭蛋动画 === */
.gashapon-anim { text-align:center; position:relative; }
.capsule-drop {
    width:120px; height:160px; margin:0 auto; position:relative;
}
.capsule {
    width:100px; height:130px; margin:0 auto; position:relative;
    animation:capsuleBounceIn .6s cubic-bezier(.2,.8,.3,1);
    cursor:pointer; transition:transform .2s;
}
.capsule:hover { transform:scale(1.06); }
@keyframes capsuleBounceIn {
    0% { transform:translateY(-200px) scale(0.5); opacity:0; }
    60% { transform:translateY(20px) scale(1.05); opacity:1; }
    80% { transform:translateY(-8px) scale(0.98); }
    100% { transform:translateY(0) scale(1); }
}
.capsule-top {
    width:100px; height:65px; border-radius:50px 50px 0 0;
    background:linear-gradient(135deg, var(--secondary), #FF8C00);
    border:4px solid rgba(0,0,0,0.1); border-bottom:none;
    position:relative; box-shadow:inset 0 10px 20px rgba(255,255,255,0.4);
}
.capsule-top::after {
    content:''; position:absolute; top:12px; left:18px; width:22px; height:14px;
    background:rgba(255,255,255,0.45); border-radius:50%; transform:rotate(-20deg);
}
.capsule-bottom {
    width:100px; height:65px; border-radius:0 0 50px 50px;
    background:linear-gradient(135deg, #f5f5f5, #e0e0e0);
    border:4px solid rgba(0,0,0,0.1); border-top:2px solid rgba(0,0,0,0.08);
    box-shadow:inset 0 -8px 16px rgba(0,0,0,0.06);
}
.capsule-hint {
    margin-top:16px; font-size:16px; font-weight:800; color:var(--white);
    font-family:var(--font-heading); animation:hintPulse 1.5s ease-in-out infinite;
}
@keyframes hintPulse { 0%,100%{opacity:1} 50%{opacity:0.5} }
/* 扭蛋打开动画 */
.capsule.capsule-opening {
    animation:capsuleOpen .5s ease forwards;
}
@keyframes capsuleOpen {
    0% { transform:rotate(0) scale(1); }
    30% { transform:rotate(-15deg) scale(1.1); }
    60% { transform:rotate(10deg) scale(1.15); }
    100% { transform:scale(0) rotate(20deg); opacity:0; }
}
.capsule-result {
    background:var(--white); border-radius:var(--radius); padding:30px 24px;
    border:4px solid var(--primary); box-shadow:var(--shadow-hover);
    text-align:center; min-width:220px;
    animation:resultPopIn .5s cubic-bezier(.2,.8,.3,1);
}
@keyframes resultPopIn {
    0% { transform:scale(0) rotate(-10deg); opacity:0; }
    70% { transform:scale(1.08) rotate(2deg); }
    100% { transform:scale(1) rotate(0); opacity:1; }
}
.capsule-result h3 { font-family:var(--font-heading); color:var(--primary); margin-top:10px; font-size:20px; }
.capsule-result p { color:var(--gray); font-size:13px; margin-top:6px; }

/* ========== Orders ========== */
.order-list { display:flex; flex-direction:column; gap:16px; }
.order-card {
    display:flex; align-items:center; justify-content:space-between; gap:16px;
    background:var(--card-bg); border-radius:var(--radius); padding:20px 24px;
    box-shadow:var(--shadow-sm); flex-wrap:wrap; border: 3px solid var(--light);
    transition: all .2s;
}
.order-card:hover { transform:translateY(-2px); box-shadow:var(--shadow); border-color:var(--primary-light); }
.order-info { flex:1; min-width:200px; }
.order-info h4 { font-size:16px; margin-bottom:4px; font-weight: 800; }
.order-info p { font-size:13px; color:var(--gray); font-weight: 700; }
.order-status { padding:8px 16px; border-radius:var(--radius-pill); font-size:13px; font-weight:800; }
.status-pending { background:#FFF3E0; color:#E65100; border: 2px solid #FFB74D; }
.status-delivered { background:#E2F0CB; color:#4CAF50; border: 2px solid #C5E1A5; }

/* ========== Badge Grid ========== */
.badge-grid {
    display:grid; grid-template-columns:repeat(auto-fill, minmax(160px,1fr)); gap:20px;
}
.badge-card {
    background:var(--card-bg); border-radius:var(--radius); padding:24px 16px; text-align:center;
    box-shadow:var(--shadow-sm); transition:all .3s; border: 3px solid var(--light);
}
.badge-card:hover { transform:translateY(-6px); box-shadow:var(--shadow-hover); border-color:var(--primary); }
.badge-card.locked { opacity:0.5; filter:grayscale(1); border: 3px dashed var(--gray); background: var(--bg); }
.badge-icon { font-size:48px; margin-bottom:16px; display:flex; justify-content:center; align-items:center; color: var(--primary); }
.badge-icon svg { width: 56px; height: 56px; }
.badge-card h4 { font-size:16px; font-family:var(--font-heading); color:var(--dark); font-weight: 800; }
.badge-card p { font-size:12px; color:var(--gray); margin-top:6px; font-weight: 700; }

/* ========== Big Screen / Gallery ========== */
.page-fullscreen { padding:0!important; }
.bigscreen-content {
    min-height:calc(100vh - var(--topbar-h)); padding:30px;
    background: var(--bg); color:var(--dark);
    position:relative;
}
.bs-title { text-align:center; font-size:32px; margin-bottom:20px; font-family:var(--font-heading); letter-spacing:2px; color:var(--primary); }
.bs-section-title { text-align:center; margin:28px 0 16px; font-size:22px; color:var(--primary); }

/* Stats bar */
.bs-stats-bar {
    display:flex; gap:20px; flex-wrap:wrap; justify-content:center; margin-bottom:24px; padding:16px;
    background:var(--card-bg); border-radius:var(--radius); box-shadow:var(--shadow-sm); border:3px solid var(--light);
}
.bs-stat { text-align:center; min-width:80px; }
.bs-stat .val { font-size:28px; font-weight:800; color:var(--primary); font-family:var(--font-score); }
.bs-stat .label { font-size:12px; color:var(--gray); margin-top:2px; }
.bs-stat-clickable { cursor:pointer; transition:transform .2s; }
.bs-stat-clickable:hover { transform:scale(1.1); }

/* Painting info & progress */
.bs-painting-info {
    background:var(--card-bg); border-radius:var(--radius); padding:16px 20px; margin-bottom:20px;
    box-shadow:var(--shadow-sm); border:3px solid var(--light);
}
.painting-meta { display:flex; align-items:center; gap:12px; margin-bottom:10px; flex-wrap:wrap; }
.painting-num { font-size:16px; font-weight:700; color:var(--accent); }
.painting-hint { font-size:13px; color:var(--gray); }
.pigment-bar { height:24px; background:var(--light); border-radius:12px; overflow:hidden; }
.pigment-fill {
    height:100%; border-radius:12px; transition:width .8s cubic-bezier(.4,0,.2,1);
    background:linear-gradient(90deg, var(--primary-light), var(--primary), var(--secondary));
    display:flex; align-items:center; justify-content:flex-end; padding-right:10px;
    font-weight:700; font-size:12px; color:#fff; min-width:36px;
}

/* Mosaic grid */
.mosaic-wrapper { display:flex; justify-content:center; margin-bottom:28px; }
.mosaic-grid {
    display:grid; grid-template-columns:repeat(10, 1fr); grid-template-rows:repeat(10, 1fr);
    width:min(500px, 90vw); height:min(500px, 90vw);
    border-radius:var(--radius); overflow:hidden; position:relative;
    background-size:cover; background-position:center;
    box-shadow:var(--shadow); border:4px solid var(--primary);
}
.mosaic-tile {
    position:relative; background:var(--primary); border:1px solid rgba(91,122,209,0.3);
    transition:all .6s cubic-bezier(.4,0,.2,1); transform-style:preserve-3d;
    cursor:default;
}
.mosaic-tile::before {
    content:''; position:absolute; inset:0;
    background:linear-gradient(135deg, rgba(255,255,255,0.08) 0%, transparent 50%);
    pointer-events:none;
}
.mosaic-tile.tile-revealed {
    background:transparent; border-color:transparent;
    animation:tileReveal .6s ease forwards;
}
.mosaic-tile.tile-revealed::before { display:none; }
@keyframes tileReveal {
    0% { transform:rotateY(0deg) scale(1); opacity:1; }
    50% { transform:rotateY(90deg) scale(0.8); opacity:0.5; }
    100% { transform:rotateY(0deg) scale(1); opacity:0; background:transparent; }
}
/* After animation, tile stays transparent */
.mosaic-tile.tile-revealed { background:transparent !important; opacity:0; }

/* All complete */
.bs-all-complete { text-align:center; padding:60px 20px; }
.all-complete-icon { font-size:64px; margin-bottom:16px; color:var(--primary); }
.bs-all-complete h2 { font-size:28px; margin-bottom:12px; color:var(--primary); }
.bs-all-complete p { font-size:16px; color:var(--gray); margin-bottom:20px; }

/* Unlock notice */
.bs-unlock-notice {
    text-align:center; margin:16px 0; padding:16px;
    background:#FFF3E0; border-radius:var(--radius); font-size:18px; color:#E65100;
    border:2px solid #FFB74D;
}

/* Hero list */
.bs-hero-list { display:flex; flex-wrap:wrap; gap:16px; justify-content:center; margin-bottom:30px; }
.bs-hero-card {
    background:var(--card-bg); border-radius:var(--radius);
    padding:16px; text-align:center; width:120px; border:3px solid var(--light);
    box-shadow:var(--shadow-sm); transition:all .2s;
}
.bs-hero-card:hover { transform:translateY(-4px); box-shadow:var(--shadow); border-color:var(--primary-light); }
.bs-hero-top { border-color:var(--secondary); background:#FFFBF0; }
.bs-hero-card .rank-num { font-size:28px; font-weight:800; color:var(--secondary); }
.bs-hero-card .hero-name { font-size:14px; margin:6px 0; color:var(--dark); font-weight:700; }
.bs-hero-card .hero-score { font-size:20px; font-weight:700; color:var(--primary); font-family:var(--font-score); }
.hero-avatar { width:48px; height:48px; border-radius:50%; margin:6px 0; border:3px solid var(--light); }

/* Streak */
.bs-streak-list { display:flex; flex-wrap:wrap; gap:10px; justify-content:center; margin-top:20px; }
.bs-streak-tag {
    padding:6px 16px; border-radius:20px; font-size:14px; font-weight:600;
    background:#FFF3E0; color:#E65100; border:2px solid #FFB74D;
}

/* Gallery modal */
.gallery-grid {
    display:grid; grid-template-columns:repeat(auto-fill, minmax(180px,1fr)); gap:16px;
    padding:16px 0; max-height:60vh; overflow-y:auto;
}
.gallery-card {
    border-radius:var(--radius); overflow:hidden; cursor:pointer;
    background:var(--card-bg); box-shadow:var(--shadow); transition:all .2s;
    border:3px solid var(--light);
}
.gallery-card:hover { transform:translateY(-4px); box-shadow:var(--shadow-hover); border-color:var(--primary-light); }
.gallery-img {
    width:100%; height:160px; background-size:cover; background-position:center;
    border-bottom:2px solid var(--light); position:relative;
}
.gallery-card:hover .gallery-img::after {
    content:'\f065'; font-family:'Font Awesome 6 Free'; font-weight:900;
    position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
    background:rgba(0,0,0,0.35); color:#fff; font-size:24px;
}
.gallery-card-body { padding:10px 12px; }
.gallery-card-title { font-size:15px; font-weight:700; color:var(--dark); }
.gallery-card-artist { font-size:12px; color:var(--gray); margin-top:4px; }
.gallery-footer {
    text-align:center; padding:12px 0; font-size:14px; color:var(--gray);
    border-top:1px solid var(--light); margin-top:12px;
}

/* Artist detail modal */
.artist-detail { padding:8px 0; }
.artist-img {
    width:100%; height:280px; background-size:cover; background-position:center;
    border-radius:var(--radius); margin-bottom:16px; cursor:zoom-in; position:relative;
    overflow:hidden; transition:all .2s;
}
.artist-img:hover { box-shadow:0 4px 20px rgba(43,76,155,0.2); }
.artist-img-zoom {
    position:absolute; bottom:0; left:0; right:0; padding:10px;
    background:linear-gradient(transparent, rgba(0,0,0,0.6));
    color:#fff; font-size:13px; font-weight:700; text-align:center;
    opacity:0; transition:opacity .2s;
}
.artist-img:hover .artist-img-zoom { opacity:1; }
.artist-info-body { padding:0 4px; }
.artist-title { font-size:22px; font-weight:700; color:var(--dark); margin-bottom:12px; }
.artist-meta { display:flex; gap:16px; margin-bottom:12px; flex-wrap:wrap; }
.artist-name { font-size:15px; font-weight:600; color:var(--primary); }
.artist-year { font-size:14px; color:var(--gray); }
.artist-desc { font-size:14px; line-height:1.7; color:#444; }

/* ========== Log List ========== */
.log-filters { display:flex; gap:8px; }
.filter-select { padding:6px 12px; border:2px solid var(--light); border-radius:var(--radius-sm); font-size:13px; }
.log-list { display:flex; flex-direction:column; gap:6px; }
.log-item {
    display:flex; align-items:center; gap:12px; padding:10px 16px;
    background:var(--card-bg); border-radius:var(--radius-sm); box-shadow:var(--shadow-sm); font-size:13px;
}
.log-item .log-time { color:var(--gray); font-size:11px; white-space:nowrap; }
.log-item .log-amount { font-weight:700; min-width:50px; text-align:right; }
.log-amount.positive { color:var(--success); }
.log-amount.negative { color:var(--danger); }

/* ========== Manage ========== */
.manage-tabs { display:flex; gap:0; margin-bottom:20px; border-bottom:2px solid var(--light); }
.manage-tab {
    padding:10px 20px; font-weight:600; color:var(--gray); background:none; border-bottom:3px solid transparent;
    transition:all .2s;
}
.manage-tab.active { color:var(--primary); border-bottom-color:var(--primary); }
.manage-panel { display:none; }
.manage-panel.active { display:block; }
.manage-list { display:flex; flex-direction:column; gap:8px; }
.manage-item {
    display:flex; align-items:center; justify-content:space-between; gap:12px;
    background:var(--card-bg); border-radius:var(--radius-sm); padding:12px 16px; box-shadow:var(--shadow-sm);
}
.manage-item-actions { display:flex; gap:6px; }

/* ========== Pattern Lock ========== */
.pattern-lock-wrapper {
    background:#fff; border-radius:var(--radius); padding:30px; text-align:center; max-width:360px; width:90%;
}
.pattern-lock-wrapper h3 { margin-bottom:16px; color:var(--primary); }
.pattern-msg { margin-top:12px; font-size:14px; color:var(--gray); }

/* ========== Toast ========== */
.toast-container { position:fixed; top:20px; right:20px; z-index:9999; display:flex; flex-direction:column; gap:8px; }
.toast {
    padding:12px 20px; border-radius:var(--radius-sm); color:#fff; font-size:14px; font-weight:600;
    animation:slideIn .3s ease; min-width:200px; box-shadow:var(--shadow);
}
.toast-success { background:var(--success); }
.toast-error { background:var(--danger); }
.toast-info { background:var(--primary); }
@keyframes slideIn { from{transform:translateX(100%);opacity:0} to{transform:none;opacity:1} }

/* ========== Form Elements ========== */
.form-group { margin-bottom:14px; }
.form-group label { display:block; font-weight:600; margin-bottom:4px; font-size:14px; }
.form-input {
    width:100%; padding:10px 14px; border:2px solid var(--light); border-radius:var(--radius-sm);
    font-size:14px; outline:none; transition:border .2s;
}
.form-input:focus { border-color:var(--primary); }
.form-row { display:flex; gap:12px; }
.form-row .form-group { flex:1; }
.form-actions { display:flex; gap:8px; justify-content:flex-end; margin-top:16px; }

/* ========== Privilege Card ========== */
.privilege-card {
    display:inline-flex; align-items:center; gap:8px; padding:8px 16px;
    border-radius:var(--radius-sm); background:linear-gradient(135deg,#FFECD2,#FCB69F);
    font-size:13px; font-weight:600; color:#8B4513;
}
.privilege-card.used { opacity:0.4; text-decoration:line-through; }

/* ========== Teacher Only ========== */
body.readonly-mode .teacher-only { display:none!important; }

/* ========== Responsive - iPad ========== */
@media (max-width:768px) {
    .app-container { grid-template-columns:1fr; grid-template-rows:var(--topbar-h) 1fr auto; }
    .sidebar {
        grid-row:3; grid-column:1; flex-direction:row; overflow-x:auto; justify-content: space-around;
        border-right:none; padding:8px 8px; gap:2px;
        border-radius: 20px 20px 0 0; margin-right: 0;
        box-shadow: 0 -4px 20px rgba(43,76,155,0.15);
        padding-bottom: calc(8px + env(safe-area-inset-bottom));
        background: var(--primary);
    }
    .nav-item { width:auto; min-width:48px; padding:8px 6px; font-size:10px; border-radius: var(--radius-pill); }
    .nav-item i { font-size:18px; margin-bottom:1px; }
    .nav-item span { display:none; }
    .nav-item.active { border-radius: var(--radius-pill); transform: translateY(-2px); }
    .main-content { grid-column:1; padding:16px; padding-bottom: 80px; }
    .batch-bar { left:0; border-radius: 20px 20px 0 0; bottom:60px; }
    .student-grid { grid-template-columns:repeat(auto-fill, minmax(130px,1fr)); gap:12px; }
    .student-avatar { width:56px; height:56px; }
    .top-bar { padding:0 12px; gap:8px; }
    .top-bar-left { gap:8px; }
    .top-bar-right { gap:6px; }
    .app-title { font-size:18px; }
    .app-title svg { width:20px; height:20px; }
    .class-selector { min-width:100px; font-size:13px; padding:8px 12px; }
    .mode-badge { padding:6px 10px; font-size:11px; }
    .bs-title { font-size:24px; }
    .page-header { flex-direction:column; align-items:flex-start; gap:8px; }
    .page-header h3 { font-size:22px; }
    .page-actions { width:100%; flex-wrap:wrap; gap:6px; }
    .modal-content { padding:24px 16px; max-width:95vw; border-width:3px; }
    .modal-header h3 { font-size:20px; }
    .quick-tags { gap:6px; }
    .quick-tag { padding:8px 14px; font-size:12px; }
    .score-tabs { flex-direction:column; }
    .shop-grid { grid-template-columns:repeat(auto-fill, minmax(150px,1fr)); gap:14px; }
    .shop-card { padding:16px 12px; }
    .shop-card-img { width:64px; height:64px; font-size:40px; line-height:64px; }
    .gashapon-machine { width:180px; }
    .gm-dome { width:160px; height:130px; }
    .gm-body { width:180px; }
    .gm-mini-capsule { width:22px; height:28px; }
    .prize-pool-grid { grid-template-columns:repeat(auto-fill, minmax(110px,1fr)); }
    .scoring-card-grid { grid-template-columns:1fr; }
    .badge-grid { grid-template-columns:repeat(auto-fill, minmax(120px,1fr)); gap:12px; }
    .order-card { padding:14px 16px; }
    .log-item { flex-wrap:wrap; gap:6px; padding:8px 12px; font-size:12px; }
    .log-filters { flex-wrap:wrap; width:100%; }
    .filter-select { flex:1; min-width:0; }
    .manage-tabs { flex-wrap:wrap; gap:0; }
    .manage-tab { padding:8px 12px; font-size:13px; }
    .manage-item { flex-direction:column; align-items:flex-start; gap:8px; }
    .manage-item span { font-size:13px; word-break:break-all; }
    .form-row { flex-direction:column; gap:8px; }
    .detail-section { margin-bottom:12px; }
    .batch-bar-inner { gap:8px; }
    .batch-tags { gap:6px; }
    .tag-btn { padding:8px 14px; font-size:12px; }
    .student-detail-header { flex-direction:column; text-align:center; }
    .bs-stats-bar { gap:10px; padding:10px; }
    .bs-stat .val { font-size:22px; }
    .bs-hero-list { gap:8px; }
    .bs-hero-card { width:90px; padding:10px; }
    .bs-hero-card .rank-num { font-size:22px; }
    .bs-hero-card .hero-score { font-size:16px; }
    .hero-avatar { width:36px; height:36px; }
    .search-box input { width:140px; }
    .search-box input:focus { width:160px; }
    .bigscreen-content { padding:16px; }
    .pigment-bar { height:18px; }
    .btn-sm { padding:6px 10px; font-size:12px; }
}

/* ========== Responsive - Small Phone ========== */
@media (max-width:380px) {
    .student-grid { grid-template-columns:repeat(auto-fill, minmax(100px,1fr)); gap:6px; }
    .student-card { padding:10px 6px; }
    .student-avatar { width:40px; height:40px; border-width:2px; }
    .student-name { font-size:12px; }
    .student-score { font-size:18px; }
    .shop-grid { grid-template-columns:repeat(auto-fill, minmax(130px,1fr)); }
    .app-title { font-size:16px; }
    .modal-content { padding:16px 12px; }
    .top-bar { height:60px; }
    :root { --topbar-h: 60px; }
}

/* ========== Scrollbar ========== */
::-webkit-scrollbar { width:6px; height:6px; }
::-webkit-scrollbar-track { background:transparent; }
::-webkit-scrollbar-thumb { background:var(--light); border-radius:3px; }
::-webkit-scrollbar-thumb:hover { background:var(--gray); }

/* ========== Student detail in modal ========== */
.student-detail-header { display:flex; align-items:center; gap:16px; margin-bottom:20px; }
.student-detail-header img { width:72px; height:72px; border-radius:50%; border:3px solid var(--primary-light); }
.student-detail-info h3 { font-size:18px; }
.student-detail-info .detail-score { font-size:24px; font-weight:700; color:var(--primary); }
.detail-section { margin-bottom:16px; }
.detail-section h4 { font-size:15px; margin-bottom:8px; padding-bottom:4px; border-bottom:1px solid var(--light); }

/* ========== Search Box ========== */
.search-box {
    position:relative; display:inline-flex; align-items:center;
}
.search-box i {
    position:absolute; left:12px; color:var(--gray); font-size:14px;
}
.search-box input {
    padding:8px 14px 8px 34px; border:2px solid var(--light); border-radius:var(--radius-sm);
    font-size:13px; outline:none; width:180px; transition:border .2s;
}
.search-box input:focus { border-color:var(--primary); width:220px; }

/* ========== Scoring Page ========== */
.scoring-stats { margin-bottom:20px; }
.scoring-card-grid {
    display:grid; grid-template-columns:repeat(auto-fill, minmax(300px,1fr)); gap:16px;
    margin-bottom:20px;
}
.scoring-card {
    display:flex; align-items:center; gap:16px; padding:16px 20px;
    background:var(--card-bg); border-radius:var(--radius); box-shadow:var(--shadow-sm);
    cursor:pointer; transition:all .2s; border:3px solid var(--light);
}
.scoring-card:hover { border-color:var(--primary); transform:translateY(-4px); box-shadow:var(--shadow); }
.scoring-card-pending { border-left:6px solid var(--danger); }
.scoring-card-done { border-left:6px solid var(--success); opacity:0.8; cursor:default; background:var(--bg); }
.scoring-card-done:hover { transform:none; border-color:var(--light); border-left-color:var(--success); box-shadow:var(--shadow-sm); }
.scoring-card-info { flex:1; min-width:0; }