/* ========== CSS Variables ========== */
:root {
    --primary: #6C5CE7;
    --primary-light: #A29BFE;
    --secondary: #00CEC9;
    --accent: #FD79A8;
    --warning: #FDCB6E;
    --danger: #E17055;
    --success: #00B894;
    --dark: #2D3436;
    --gray: #636E72;
    --light: #DFE6E9;
    --white: #FFFFFF;
    --bg: #F8F9FE;
    --card-bg: rgba(255,255,255,0.85);
    --glass: rgba(255,255,255,0.6);
    --shadow: 0 8px 32px rgba(108,92,231,0.10);
    --shadow-sm: 0 2px 8px rgba(0,0,0,0.08);
    --radius: 16px;
    --radius-sm: 10px;
    --sidebar-w: 72px;
    --topbar-h: 60px;
    --font: 'Segoe UI', 'PingFang SC', 'Microsoft YaHei', sans-serif;
    /* Rank colors */
    --rank-bronze: #CD7F32;
    --rank-silver: #C0C0C0;
    --rank-gold: #FFD700;
    --rank-king: #E84393;
}

* { 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; }
a { text-decoration:none; color:inherit; }
button { cursor:pointer; border:none; font-family:var(--font); }
input,select,textarea { font-family:var(--font); }

/* ========== Login Page ========== */
.login-page {
    min-height:100vh; display:flex; align-items:center; justify-content:center;
    background: linear-gradient(135deg, #6C5CE7 0%, #A29BFE 40%, #FD79A8 100%);
}
.login-card {
    background:var(--card-bg); backdrop-filter:blur(20px); border-radius:var(--radius);
    padding:48px 40px; text-align:center; box-shadow:var(--shadow); max-width:380px; width:90%;
}
.login-logo { font-size:56px; color:var(--primary); margin-bottom:12px; }
.login-card h1 { font-size:32px; color:var(--primary); margin-bottom:4px; }
.login-subtitle { color:var(--gray); margin-bottom:28px; }
.login-form { display:flex; flex-direction:column; gap:14px; }
.login-form input {
    padding:14px 18px; border:2px solid var(--light); border-radius:var(--radius-sm);
    font-size:16px; outline:none; transition:border .2s;
}
.login-form input:focus { border-color:var(--primary); }
.login-error { color:var(--danger); margin-top:10px; font-size:14px; }

/* ========== Buttons ========== */
.btn {
    display:inline-flex; align-items:center; gap:6px; padding:10px 20px;
    border-radius:var(--radius-sm); font-size:14px; font-weight:600; transition:all .2s;
}
.btn-primary { background:var(--primary); color:#fff; }
.btn-primary:hover { background:#5A4BD1; transform:translateY(-1px); }
.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:7px 14px; font-size:13px; }
.btn-lg { padding:14px 28px; font-size:16px; width:100%; justify-content:center; }
.btn-icon { background:transparent; color:var(--gray); font-size:18px; padding:8px; border-radius:50%; }
.btn-icon:hover { background:var(--light); color:var(--primary); }
.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 20px; background:var(--card-bg); backdrop-filter:blur(16px);
    border-bottom:1px solid var(--light); z-index:100; height:var(--topbar-h);
}
.top-bar-left, .top-bar-right { display:flex; align-items:center; gap:14px; }
.app-title { font-size:20px; color:var(--primary); user-select:none; white-space:nowrap; }
.app-title i { margin-right:4px; }
.class-selector {
    padding:8px 14px; border:2px solid var(--light); border-radius:var(--radius-sm);
    font-size:14px; background:#fff; outline:none; min-width:140px;
}
.mode-badge {
    padding:6px 14px; border-radius:20px; font-size:12px; font-weight:600;
}
.mode-readonly { background:#E8F5E9; color:#2E7D32; }
.mode-teacher { background:#FFF3E0; color:#E65100; }

/* Sidebar */
.sidebar {
    grid-row:2; display:flex; flex-direction:column; align-items:center;
    padding:16px 0; gap:4px; background:var(--card-bg); backdrop-filter:blur(16px);
    border-right:1px solid var(--light); overflow-y:auto;
}
.nav-item {
    display:flex; flex-direction:column; align-items:center; gap:3px;
    padding:10px 6px; border-radius:var(--radius-sm); font-size:10px; color:var(--gray);
    width:60px; text-align:center; transition:all .2s;
}
.nav-item i { font-size:20px; }
.nav-item:hover, .nav-item.active { background:var(--primary); color:#fff; }

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

.page-header { display:flex; align-items:center; justify-content:space-between; margin-bottom:20px; flex-wrap:wrap; gap:10px; }
.page-header h3 { font-size:22px; color:var(--dark); }
.page-actions { display:flex; gap:8px; }

/* ========== Student Grid ========== */
.student-grid {
    display:grid; grid-template-columns:repeat(auto-fill, minmax(150px, 1fr)); gap:14px;
}
.student-card {
    background:var(--card-bg); backdrop-filter:blur(12px); border-radius:var(--radius);
    padding:16px 12px; text-align:center; box-shadow:var(--shadow-sm);
    cursor:pointer; transition:all .25s; position:relative; border:2px solid transparent;
}
.student-card:hover { transform:translateY(-4px); box-shadow:var(--shadow); border-color:var(--primary-light); }
.student-card.selected { border-color:var(--primary); background:rgba(108,92,231,0.08); }
.student-card .checkbox {
    position:absolute; top:8px; left:8px; width:20px; height:20px;
    border-radius:4px; border:2px 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:64px; height:64px; border-radius:50%; margin:0 auto 8px; object-fit:cover;
    border:3px solid var(--light); position:relative;
}
.student-avatar-wrap { position:relative; display:inline-block; }
.streak-fire {
    position:absolute; top:-10px; right:-6px; font-size:20px; 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:14px; font-weight:600; margin-bottom:4px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.student-score { font-size:20px; font-weight:700; color:var(--primary); }
.student-rank {
    display:inline-block; padding:2px 10px; border-radius:10px; font-size:11px; font-weight:700;
    margin-top:4px; 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:linear-gradient(135deg,var(--rank-king),var(--primary)); }

/* ========== Batch Bar ========== */
.batch-bar {
    position:fixed; bottom:0; left:var(--sidebar-w); right:0;
    background:var(--card-bg); backdrop-filter:blur(16px); border-top:2px solid var(--primary-light);
    padding:12px 20px; z-index:200;
}
.batch-bar-inner { display:flex; align-items:center; gap:12px; flex-wrap:wrap; }
.batch-tags { display:flex; gap:6px; flex-wrap:wrap; flex:1; }
.tag-btn {
    padding:6px 14px; border-radius:20px; font-size:12px; font-weight:600;
    border:2px solid transparent; transition:all .2s;
}
.tag-green { background:#E8F5E9; color:#2E7D32; border-color:#A5D6A7; }
.tag-green:hover { background:#2E7D32; color:#fff; }
.tag-red { background:#FFEBEE; color:#C62828; border-color:#EF9A9A; }
.tag-red:hover { background:#C62828; color:#fff; }

/* ========== Modal ========== */
.modal-overlay {
    position:fixed; inset:0; background:rgba(0,0,0,0.45); z-index:1000;
    display:flex; align-items:center; justify-content:center; padding:16px;
}
.modal-content {
    background:#fff; border-radius:var(--radius); padding:28px; max-width:560px; width:100%;
    max-height:90vh; overflow-y:auto; box-shadow:0 16px 48px rgba(0,0,0,0.2);
}
.modal-header { display:flex; align-items:center; justify-content:space-between; margin-bottom:18px; }
.modal-header h3 { font-size:20px; }
.modal-close { background:none; font-size:22px; color:var(--gray); padding:4px; }
.modal-close:hover { color:var(--danger); }

/* ========== Scoring Panel ========== */
.score-tabs { display:flex; gap:0; margin-bottom:16px; }
.score-tab {
    flex:1; padding:10px; text-align:center; font-weight:600; border:2px solid var(--light);
    background:var(--bg); cursor:pointer; transition:all .2s;
}
.score-tab:first-child { border-radius:var(--radius-sm) 0 0 var(--radius-sm); }
.score-tab:last-child { border-radius:0 var(--radius-sm) var(--radius-sm) 0; }
.score-tab.active { background:var(--primary); color:#fff; border-color:var(--primary); }

.score-dimension { margin-bottom:14px; }
.score-dimension label { display:block; font-weight:600; margin-bottom:6px; font-size:14px; }
.score-options { display:flex; gap:6px; flex-wrap:wrap; }
.score-option {
    padding:6px 14px; border-radius:20px; font-size:12px; border:2px solid var(--light);
    background:#fff; cursor:pointer; transition:all .2s;
}
.score-option:hover { border-color:var(--primary-light); }
.score-option.selected { background:var(--primary); color:#fff; border-color:var(--primary); }
.score-total { font-size:28px; font-weight:700; color:var(--primary); text-align:center; padding:12px 0; }

.quick-tags { display:flex; flex-wrap:wrap; gap:6px; margin-top:12px; }
.quick-tag {
    padding:8px 16px; border-radius:20px; font-size:13px; font-weight:600;
    transition:all .2s; border:2px solid transparent;
}
.quick-tag-green { background:#E8F5E9; color:#2E7D32; border-color:#A5D6A7; }
.quick-tag-green:hover { background:#2E7D32; color:#fff; transform:scale(1.05); }
.quick-tag-red { background:#FFEBEE; color:#C62828; border-color:#EF9A9A; }
.quick-tag-red:hover { background:#C62828; color:#fff; transform:scale(1.05); }

/* ========== Shop Grid ========== */
.shop-grid {
    display:grid; grid-template-columns:repeat(auto-fill, minmax(200px,1fr)); gap:16px;
}
.shop-card {
    background:var(--card-bg); border-radius:var(--radius); padding:16px; text-align:center;
    box-shadow:var(--shadow-sm); transition:all .25s;
}
.shop-card:hover { transform:translateY(-3px); box-shadow:var(--shadow); }
.shop-card-img { width:80px; height:80px; margin:0 auto 10px; font-size:48px; line-height:80px; }
.shop-card h4 { margin-bottom:4px; }
.shop-card .price { font-size:18px; font-weight:700; color:var(--primary); }
.shop-card .stock { font-size:12px; color:var(--gray); margin-bottom:8px; }

/* ========== Gacha ========== */
.gacha-container { text-align:center; padding:40px 20px; }
.gacha-machine {
    width:220px; height:260px; margin:0 auto 24px; background:linear-gradient(135deg,var(--primary),var(--accent));
    border-radius:var(--radius); display:flex; align-items:center; justify-content:center;
    font-size:80px; color:rgba(255,255,255,0.9); box-shadow:var(--shadow); cursor:pointer;
    transition:transform .3s; position:relative;
}
.gacha-machine:hover { transform:scale(1.05); }
.gacha-cost { font-size:18px; font-weight:700; color:var(--primary); margin-bottom:16px; }
.gacha-box {
    width:200px; height:200px; cursor:pointer; position:relative;
    perspective:600px; margin:0 auto;
}
.gacha-box-front, .gacha-box-back {
    position:absolute; inset:0; border-radius:var(--radius); display:flex; flex-direction:column;
    align-items:center; justify-content:center; backface-visibility:hidden; transition:transform .6s;
}
.gacha-box-front {
    background:linear-gradient(135deg,var(--primary),var(--accent)); color:#fff; font-size:60px;
}
.gacha-box-front p { font-size:16px; margin-top:8px; }
.gacha-box-back {
    background:#fff; transform:rotateY(180deg); box-shadow:var(--shadow); padding:20px;
}
.gacha-box.opened .gacha-box-front { transform:rotateY(180deg); }
.gacha-box.opened .gacha-box-back { transform:rotateY(0); }

/* ========== Orders ========== */
.order-list { display:flex; flex-direction:column; gap:10px; }
.order-card {
    display:flex; align-items:center; justify-content:space-between; gap:12px;
    background:var(--card-bg); border-radius:var(--radius-sm); padding:14px 18px;
    box-shadow:var(--shadow-sm); flex-wrap:wrap;
}
.order-info { flex:1; min-width:200px; }
.order-info h4 { font-size:15px; margin-bottom:2px; }
.order-info p { font-size:12px; color:var(--gray); }
.order-status { padding:4px 12px; border-radius:12px; font-size:12px; font-weight:600; }
.status-pending { background:#FFF3E0; color:#E65100; }
.status-delivered { background:#E8F5E9; color:#2E7D32; }

/* ========== Badge Grid ========== */
.badge-grid {
    display:grid; grid-template-columns:repeat(auto-fill, minmax(140px,1fr)); gap:14px;
}
.badge-card {
    background:var(--card-bg); border-radius:var(--radius); padding:20px 12px; text-align:center;
    box-shadow:var(--shadow-sm); transition:all .3s;
}
.badge-card.locked { opacity:0.4; filter:grayscale(1); }
.badge-icon { font-size:40px; margin-bottom:8px; }
.badge-card h4 { font-size:13px; }
.badge-card p { font-size:11px; color:var(--gray); margin-top:4px; }

/* ========== Big Screen ========== */
.page-fullscreen { padding:0!important; }
.bigscreen-content {
    min-height:calc(100vh - var(--topbar-h)); padding:30px;
    background:linear-gradient(135deg, #0F0C29, #302B63, #24243E); color:#fff;
}
.bs-title { text-align:center; font-size:32px; margin-bottom:24px; }
.bs-hero-list { display:flex; flex-wrap:wrap; gap:16px; justify-content:center; margin-bottom:30px; }
.bs-hero-card {
    background:rgba(255,255,255,0.08); backdrop-filter:blur(10px); border-radius:var(--radius);
    padding:16px; text-align:center; width:120px; border:1px solid rgba(255,255,255,0.15);
}
.bs-hero-card .rank-num { font-size:28px; font-weight:800; color:var(--warning); }
.bs-hero-card .hero-name { font-size:14px; margin:6px 0; }
.bs-hero-card .hero-score { font-size:20px; font-weight:700; color:var(--secondary); }
.bs-monster {
    background:rgba(255,255,255,0.05); border-radius:var(--radius); padding:24px; margin-bottom:20px;
}
.bs-monster h3 { margin-bottom:12px; }
.monster-hp-bar {
    height:32px; background:rgba(255,255,255,0.1); border-radius:16px; overflow:hidden; position:relative;
}
.monster-hp-fill {
    height:100%; background:linear-gradient(90deg, var(--danger), #E84393); border-radius:16px;
    transition:width .6s ease; display:flex; align-items:center; justify-content:flex-end; padding-right:12px;
    font-weight:700; font-size:14px;
}
.bs-stats { display:flex; gap:20px; flex-wrap:wrap; justify-content:center; margin-top:16px; }
.bs-stat { text-align:center; }
.bs-stat .val { font-size:28px; font-weight:800; color:var(--warning); }
.bs-stat .label { font-size:12px; color:rgba(255,255,255,0.6); }
.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:rgba(253,203,110,0.2); color:var(--warning); border:1px solid rgba(253,203,110,0.4);
}

/* ========== 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;
        border-right:none; border-top:1px solid var(--light); padding:6px 8px; gap:2px;
    }
    .nav-item { width:auto; min-width:56px; padding:6px 8px; font-size:9px; }
    .nav-item i { font-size:18px; }
    .main-content { grid-column:1; padding:14px; }
    .batch-bar { left:0; }
    .student-grid { grid-template-columns:repeat(auto-fill, minmax(120px,1fr)); gap:10px; }
    .student-avatar { width:50px; height:50px; }
    .top-bar { padding:0 12px; }
    .app-title { font-size:16px; }
    .class-selector { min-width:100px; font-size:13px; }
    .bs-title { font-size:24px; }
}

/* ========== Responsive - Small Phone ========== */
@media (max-width:480px) {
    .student-grid { grid-template-columns:repeat(auto-fill, minmax(100px,1fr)); gap:8px; }
    .student-card { padding:12px 8px; }
    .student-avatar { width:44px; height:44px; }
    .modal-content { padding:20px 16px; }
    .shop-grid { grid-template-columns:repeat(auto-fill, minmax(160px,1fr)); }
}

/* ========== 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:16px; }
.scoring-card-grid {
    display:grid; grid-template-columns:repeat(auto-fill, minmax(280px,1fr)); gap:10px;
    margin-bottom:16px;
}
.scoring-card {
    display:flex; align-items:center; gap:12px; padding:12px 16px;
    background:var(--card-bg); border-radius:var(--radius-sm); box-shadow:var(--shadow-sm);
    cursor:pointer; transition:all .2s; border:2px solid transparent;
}
.scoring-card:hover { border-color:var(--primary-light); transform:translateY(-2px); }
.scoring-card-pending { border-left:4px solid var(--danger); }
.scoring-card-done { border-left:4px solid var(--success); opacity:0.75; cursor:default; }
.scoring-card-done:hover { transform:none; }
.scoring-card-info { flex:1; min-width:0; }