/* ===== RESET & BASE ===== */
*{margin:0;padding:0;box-sizing:border-box}
body{font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Microsoft YaHei",sans-serif;background:#FAF7F5;color:#333;line-height:1.6;min-height:100vh}
/* 点点背景 */
body::before{content:'';position:fixed;top:0;left:0;right:0;bottom:0;background-image:radial-gradient(circle,#e8d5d5 1px,transparent 1px);background-size:28px 28px;pointer-events:none;z-index:0;opacity:.5}
body > *{position:relative;z-index:1}
a{color:#FF6B8A;text-decoration:none}
a:hover{opacity:.85}
::-webkit-scrollbar{width:6px;height:6px}
::-webkit-scrollbar-thumb{background:#FFB6C1;border-radius:3px}

/* ===== LOGIN PAGE ===== */
.login-body{background:#FFF8F0;display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:100vh}
.login-top-bar{position:fixed;top:0;left:0;right:0;height:50px;background:linear-gradient(135deg,#FF6B8A,#FF8FA3);color:#fff;display:flex;align-items:center;justify-content:center;font-size:16px;font-weight:600;z-index:100}
.login-container{display:flex;align-items:center;justify-content:center;flex:1;padding-top:50px}
.login-card{background:#fff;border-radius:20px;padding:40px 36px;width:380px;box-shadow:0 8px 30px rgba(255,107,138,.15);text-align:center}
.login-avatar{font-size:72px;margin-bottom:12px}
.login-title{font-size:22px;color:#333;font-weight:700;margin-bottom:24px}
.login-field{display:flex;align-items:center;background:#FFF0F3;border-radius:12px;padding:0 14px;margin-bottom:14px;border:2px solid transparent;transition:border-color .2s}
.login-field:focus-within{border-color:#FF6B8A}
.field-icon{font-size:18px;margin-right:10px;opacity:.6}
.login-field input{flex:1;border:none;background:transparent;padding:14px 0;font-size:15px;outline:none}
.remember-me{display:flex;align-items:center;gap:6px;font-size:13px;color:#999;margin-bottom:18px;cursor:pointer}
.login-btn{width:100%;padding:14px;background:linear-gradient(135deg,#FF6B8A,#FF8FA3);color:#fff;border:none;border-radius:12px;font-size:16px;font-weight:600;cursor:pointer;transition:transform .15s,box-shadow .15s}
.login-btn:hover{transform:translateY(-1px);box-shadow:0 6px 20px rgba(255,107,138,.35)}
.login-links{display:flex;justify-content:center;gap:20px;margin-top:16px;font-size:13px}
.login-links a{color:#FF6B8A}
.login-hint{margin-top:12px;font-size:12px;color:#ccc}

/* ===== TOP NAVIGATION ===== */
.top-nav{display:flex;align-items:center;justify-content:space-between;padding:0 20px;height:60px;background:#fff;border-bottom:1px solid #F0E8E8;position:sticky;top:0;z-index:100;box-shadow:0 2px 12px rgba(255,107,138,.08)}
.nav-left{display:flex;align-items:center;gap:10px;flex-shrink:0}
.nav-logo{width:36px;height:36px;background:linear-gradient(135deg,#FF6B8A,#FF8FA3);border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:18px;color:#fff;flex-shrink:0}
.nav-brand{display:flex;flex-direction:column;line-height:1.1}
.nav-title{font-size:13px;font-weight:700;color:#333}
.nav-class-name{font-size:13px;color:#FF6B8A;font-weight:600;max-width:130px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.class-selector{position:relative}
.class-selector select{border:none;background:transparent;font-size:12px;color:#999;outline:none;cursor:pointer;padding:0 16px 0 2px;appearance:none;-webkit-appearance:none}
.class-selector::after{content:'▾';position:absolute;right:0;top:50%;transform:translateY(-50%);font-size:11px;color:#ccc;pointer-events:none}
.nav-center{display:flex;align-items:center;gap:2px}
.nav-btn{display:flex;align-items:center;gap:3px;padding:6px 10px;border-radius:8px;font-size:13px;color:#666;transition:all .2s;white-space:nowrap;cursor:pointer}
.nav-btn:hover,.nav-btn.active{background:#FFF0F3;color:#FF6B8A}
.nav-icon{font-size:14px}
.nav-search{display:flex;align-items:center;gap:4px;background:#F5F5F5;border-radius:18px;padding:5px 12px}
.nav-search input{border:none;background:transparent;font-size:13px;width:70px;outline:none;color:#333}
.nav-search input::placeholder{color:#bbb}
.nav-right{display:flex;align-items:center;gap:10px;flex-shrink:0}
.user-name{font-size:13px;color:#999}
.nav-btn-sm{font-size:12px;color:#FF6B8A;padding:4px 10px;border:1px solid #FFD1DC;border-radius:6px}

/* ===== MAIN PAGE ===== */
.main-page{padding:16px 24px;min-height:calc(100vh - 60px)}
.page-toolbar{display:flex;align-items:center;justify-content:space-between;margin-bottom:16px}
.student-count{font-size:13px;color:#999}
.toolbar-right{display:flex;align-items:center;gap:8px}

/* 筛选按钮组 */
.filter-tabs{display:flex;gap:6px;align-items:center}
.filter-tab{padding:6px 14px;border-radius:20px;border:none;background:#fff;color:#666;font-size:13px;cursor:pointer;transition:all .2s;box-shadow:0 1px 4px rgba(0,0,0,.06)}
.filter-tab.active{background:#1a1a1a;color:#fff}
.filter-tab.green{background:linear-gradient(135deg,#4CAF50,#66BB6A);color:#fff}
.tool-btn{display:flex;align-items:center;gap:4px;padding:6px 12px;border:1px solid #E8E0E0;border-radius:8px;background:#fff;color:#555;font-size:13px;cursor:pointer;transition:all .2s}
.tool-btn:hover{border-color:#FF6B8A;color:#FF6B8A}
.tool-btn-icon{font-size:14px}
.tool-select{border:1px solid #E8E0E0;border-radius:8px;padding:6px 10px;font-size:13px;color:#666;background:#fff;outline:none}

/* ===== STUDENT CARDS ===== */
.student-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:16px}
.student-card{background:#fff;border-radius:20px;padding:16px 14px 14px;cursor:pointer;transition:all .2s;border:2px solid #FFE0E8;position:relative;overflow:visible}
.student-card:hover{transform:translateY(-3px);box-shadow:0 10px 28px rgba(255,107,138,.18);border-color:#FF6B8A}
.student-card.selected{border-color:#FF6B8A;background:#FFF5F7;box-shadow:0 0 0 3px rgba(255,107,138,.2)}

/* 卡片顶部：等级 + info图标 */
.card-top-row{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px}
.card-level-badge{display:flex;align-items:center;gap:4px;font-size:12px;font-weight:700;color:#555}
.card-level-dot{width:8px;height:8px;border-radius:50%;background:#4CAF50}
.card-info-icon{width:20px;height:20px;border-radius:50%;border:1.5px solid #ddd;display:flex;align-items:center;justify-content:center;font-size:11px;color:#ccc;cursor:pointer;flex-shrink:0}
.card-info-icon:hover{border-color:#FF6B8A;color:#FF6B8A}

/* 宠物区域 */
.card-pet-area{text-align:center;margin-bottom:10px;min-height:110px;display:flex;align-items:center;justify-content:center}
.pet-img{width:100px;height:100px;object-fit:contain;display:block;margin:0 auto}
.pet-egg{width:90px;height:100px;display:flex;align-items:center;justify-content:center;margin:0 auto}
.pet-egg svg{width:100%;height:100%}
.pet-emoji-big{font-size:72px;display:block;line-height:1;margin:0 auto}

/* 宠物灰化 */
.pet-greyed .card-pet-area{filter:grayscale(100%);opacity:.6}
.pet-grey-hint{font-size:11px;color:#e05050;text-align:center;margin-top:-6px;margin-bottom:4px;font-weight:600}

/* 学生名 + 宠物类型 */
.card-name-row{display:flex;align-items:baseline;justify-content:space-between;margin-bottom:4px}
.card-name{font-size:17px;font-weight:700;color:#E83A5A}
.card-pet-type{font-size:12px;color:#999}

/* 分组下拉标签 */
.card-group-row{margin-bottom:8px}
.card-group-tag{display:inline-flex;align-items:center;gap:4px;padding:3px 10px;border-radius:12px;border:1px solid #E0E0E0;font-size:12px;color:#555;cursor:pointer;background:#fff;transition:all .15s}
.card-group-tag:hover{border-color:#FF6B8A}
.card-group-tag .group-dot-sm{width:6px;height:6px;border-radius:50%;background:#ccc}
.card-group-tag .group-arrow{font-size:10px;color:#bbb}

/* 进度行 */
.card-progress-row{display:flex;align-items:center;justify-content:space-between;margin-bottom:6px;font-size:12px;color:#999}
.card-progress-label{color:#555;font-size:12px}
.card-progress-diff{display:flex;align-items:center;gap:3px;color:#FF6B8A;font-weight:600;font-size:12px}
.card-progress-diff .meat-icon{font-size:13px}
.progress-bar{height:5px;background:#F0E8E8;border-radius:3px;overflow:hidden;margin-bottom:8px}
.progress-fill{height:100%;background:linear-gradient(90deg,#FF6B8A,#FFB6C1);border-radius:3px;transition:width .4s}

/* 孵化提示 */
.card-hatch-row{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px;font-size:12px}
.card-hatch-wait{color:#bbb}
.card-hatch-btn{color:#8B6CF6;font-weight:600;cursor:pointer}
.card-hatch-btn:hover{text-decoration:underline}

/* 底部积分 */
.card-stats{display:flex;align-items:center;justify-content:space-between;font-size:13px;padding-top:6px;border-top:1px solid #FAF0F0}
.card-food{display:flex;align-items:center;gap:3px;color:#555;font-weight:600}
.card-food-icon{font-size:15px}
.card-badges-count{display:flex;align-items:center;gap:3px;color:#999}
.card-badges-icon{font-size:14px}

/* 收集徽章按钮 */
.btn-collect{display:block;width:100%;margin-top:8px;padding:6px;background:linear-gradient(135deg,#8B5CF6,#A78BFA);color:#fff;border:none;border-radius:10px;font-size:12px;font-weight:600;cursor:pointer;transition:all .15s}
.btn-collect:hover{transform:scale(1.03);box-shadow:0 3px 10px rgba(139,92,246,.3)}

/* Batch toolbar */
.batch-toolbar{position:fixed;bottom:80px;left:50%;transform:translateX(-50%);background:#fff;border-radius:16px;padding:12px 20px;box-shadow:0 8px 30px rgba(0,0,0,.15);display:flex;align-items:center;gap:12px;z-index:95;animation:slideUp .3s}
.batch-count{font-size:14px;font-weight:600;color:#8B5CF6;white-space:nowrap}
.batch-actions{display:flex;gap:8px;flex-wrap:wrap}

/* ===== MODALS ===== */
.modal-overlay{position:fixed;top:0;left:0;right:0;bottom:0;background:rgba(0,0,0,.4);display:flex;align-items:center;justify-content:center;z-index:1000;animation:fadeIn .2s}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
@keyframes slideUp{from{transform:translateY(30px);opacity:0}to{transform:translateY(0);opacity:1}}
.modal{background:#fff;border-radius:20px;width:90%;max-width:520px;max-height:85vh;overflow:hidden;animation:slideUp .25s;display:flex;flex-direction:column}
.modal-sm{max-width:400px}
.modal-pets{max-width:680px}
.modal-pet-detail{max-width:600px}
.modal-header{padding:16px 20px;display:flex;align-items:center;justify-content:space-between;font-size:16px;font-weight:600;color:#fff}
.pink-header{background:linear-gradient(135deg,#FF6B8A,#FF8FA3)}
.purple-header{background:linear-gradient(135deg,#8B5CF6,#A78BFA)}
.modal-close{background:none;border:none;color:#fff;font-size:20px;cursor:pointer;padding:0 4px;opacity:.8}
.modal-close:hover{opacity:1}
.modal-body{padding:20px;overflow-y:auto;flex:1}

/* ===== POINTS MODAL ===== */
.points-tabs{display:flex;gap:0;margin-bottom:16px;background:#FFF5F7;border-radius:10px;padding:3px}
.points-tab{flex:1;padding:8px;border:none;background:transparent;border-radius:8px;font-size:14px;cursor:pointer;color:#999;font-weight:500;transition:all .2s}
.points-tab.active{background:#FF6B8A;color:#fff}
.rules-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:8px;margin-bottom:16px}
.rule-btn{padding:10px 8px;border:2px solid #FFE8ED;border-radius:12px;background:#fff;cursor:pointer;text-align:center;transition:all .15s;font-size:13px}
.rule-btn:hover{border-color:#FF6B8A;transform:translateY(-1px);box-shadow:0 4px 12px rgba(255,107,138,.15)}
.rule-btn .rule-icon{font-size:20px;display:block;margin-bottom:4px}
.rule-btn .rule-name{display:block;color:#555}
.rule-btn .rule-pts{display:block;font-weight:700;margin-top:2px}
.rule-btn .rule-pts.positive{color:#10b981}
.rule-btn .rule-pts.negative{color:#ef4444}
.custom-points-row{display:flex;gap:8px;align-items:center;padding-top:12px;border-top:1px solid #FFE8ED}
.custom-points-row input{flex:1;padding:8px 12px;border:1px solid #FFD1DC;border-radius:8px;font-size:13px;outline:none}
.custom-points-row input:focus{border-color:#FF6B8A}

/* ===== PET SELECTION MODAL ===== */
.pet-search{margin-bottom:12px}
.pet-search input{width:100%;padding:10px 14px;border:2px solid #E9D5FF;border-radius:10px;font-size:14px;outline:none}
.pet-search input:focus{border-color:#8B5CF6}
.pets-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(80px,1fr));gap:8px;max-height:400px;overflow-y:auto}
.pet-pick{display:flex;flex-direction:column;align-items:center;gap:4px;padding:10px 4px;border:2px solid #F3E8FF;border-radius:12px;cursor:pointer;transition:all .15s;background:#FAFAFF}
.pet-pick:hover{border-color:#8B5CF6;background:#F3E8FF;transform:scale(1.05)}
.pet-pick .pick-emoji{font-size:36px}
.pet-pick .pick-name{font-size:11px;color:#666}

/* ===== LEVEL UP MODAL ===== */
.modal-levelup{max-width:380px;background:linear-gradient(180deg,#FF6B8A 0%,#FF8FA3 40%,#FFDEE5 100%);border-radius:24px}
.levelup-content{padding:40px 30px;text-align:center;color:#fff;position:relative;overflow:hidden}
.levelup-stars{position:absolute;top:0;left:0;right:0;bottom:0;pointer-events:none}
.levelup-stars .star{position:absolute;animation:twinkle 1.5s infinite alternate}
@keyframes twinkle{0%{opacity:.3;transform:scale(.5)}100%{opacity:1;transform:scale(1.2)}}
.levelup-pet{font-size:80px;margin:10px 0;animation:bounce 1s infinite}
@keyframes bounce{0%,100%{transform:translateY(0)}50%{transform:translateY(-15px)}}
.levelup-title{font-size:28px;font-weight:800;margin:8px 0;text-shadow:0 2px 8px rgba(0,0,0,.15)}
.levelup-subtitle{font-size:18px;margin-bottom:12px;opacity:.9}
.levelup-info{font-size:14px;margin-bottom:20px;opacity:.8}
.btn-levelup{padding:12px 40px;background:#fff;color:#FF6B8A;border:none;border-radius:30px;font-size:16px;font-weight:700;cursor:pointer;box-shadow:0 4px 15px rgba(0,0,0,.15);transition:transform .15s}
.btn-levelup:hover{transform:scale(1.05)}

/* ===== PET DETAIL MODAL ===== */
.pet-detail-header{padding:20px}
.pet-detail-top{display:flex;align-items:center;gap:12px;width:100%}
.pet-detail-emoji{font-size:48px}
.pet-detail-info{flex:1}
.pet-detail-info h3{font-size:18px;margin-bottom:2px}
.pet-detail-info span{font-size:13px;opacity:.9;margin-right:8px}
.pet-detail-points{font-weight:700}
.pet-detail-actions{display:flex;gap:6px;flex-wrap:wrap}
.btn-sm{padding:4px 10px;border:1px solid rgba(255,255,255,.5);border-radius:6px;background:rgba(255,255,255,.2);color:#fff;font-size:12px;cursor:pointer;white-space:nowrap}
.btn-sm:hover{background:rgba(255,255,255,.35)}
.detail-tabs{display:flex;border-bottom:2px solid #FFE8ED;margin-bottom:16px}
.detail-tab{padding:10px 16px;border:none;background:transparent;font-size:14px;color:#999;cursor:pointer;border-bottom:2px solid transparent;margin-bottom:-2px;transition:all .2s}
.detail-tab.active{color:#FF6B8A;border-bottom-color:#FF6B8A}
.badges-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(80px,1fr));gap:10px}
.badge-item{text-align:center;padding:12px 6px;background:#FFF5F7;border-radius:12px}
.badge-item .badge-emoji{font-size:28px;display:block;margin-bottom:4px}
.badge-item .badge-name{font-size:11px;color:#666}
.growth-list{display:flex;flex-direction:column;gap:0}
.growth-row{display:flex;align-items:center;gap:10px;padding:10px 0;border-bottom:1px solid #FFF0F3;font-size:13px}
.growth-icon{font-size:18px;width:30px;text-align:center}
.growth-text{flex:1;color:#555}
.growth-pts{font-weight:600}
.growth-pts.positive{color:#10b981}
.growth-pts.negative{color:#ef4444}
.growth-time{color:#ccc;font-size:12px}

/* ===== SHOP PAGE ===== */
.shop-layout{display:flex;gap:20px}
.shop-sidebar{width:280px;flex-shrink:0;display:flex;flex-direction:column;gap:16px}
.sidebar-card{background:#fff;border-radius:16px;padding:18px;box-shadow:0 2px 8px rgba(255,107,138,.06)}
.sidebar-title{font-size:15px;font-weight:600;margin-bottom:8px;display:flex;align-items:center;justify-content:space-between}
.sidebar-hint{font-size:12px;color:#ccc;margin-bottom:10px}
.edit-icon{cursor:pointer;font-size:14px}
.category-list{display:flex;flex-direction:column;gap:4px}
.cat-btn{display:block;width:100%;padding:10px 14px;border:none;border-radius:10px;text-align:left;font-size:13px;cursor:pointer;transition:all .15s;color:#666;background:transparent}
.cat-btn.active,.cat-btn:hover{background:linear-gradient(135deg,#FF6B8A,#FF8FA3);color:#fff}
.create-cat{text-align:center;color:#FF6B8A;font-size:13px;cursor:pointer;margin-top:8px;padding:6px}
.create-cat:hover{text-decoration:underline}
.empty-state{text-align:center;padding:30px 0;color:#ccc}
.empty-icon{font-size:36px;margin-bottom:8px}
.record-list{max-height:200px;overflow-y:auto}
.record-row{display:flex;align-items:center;gap:6px;padding:6px 0;border-bottom:1px solid #FFF5F7;font-size:12px}
.record-name{font-weight:500;color:#333}
.record-item{color:#FF6B8A}
.record-cost{color:#ef4444;font-weight:600}
.record-time{color:#ccc;margin-left:auto}
.shop-main{flex:1}
.shop-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:16px;padding:12px 18px;background:#fff;border-radius:14px;border:1px solid #FFE8ED}
.shop-title-row{display:flex;align-items:center;gap:8px}
.shop-icon{font-size:22px}
.shop-title-row h2{font-size:18px;font-weight:700;color:#333}
.shop-subtitle{font-size:13px;color:#ccc}
.shop-items-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:16px}
.shop-card{background:#fff;border-radius:16px;padding:16px;text-align:center;border:2px solid #F0F0F0;transition:all .2s;position:relative}
.shop-card:hover{border-color:#FF6B8A;transform:translateY(-2px);box-shadow:0 6px 20px rgba(255,107,138,.12)}
.shop-card-badges{display:flex;justify-content:space-between;margin-bottom:6px}
.shop-badge-crown{font-size:12px;color:#F59E0B;background:#FEF3C7;padding:2px 8px;border-radius:8px}
.shop-badge-new{font-size:11px;color:#3B82F6;background:#DBEAFE;padding:2px 8px;border-radius:8px}
.shop-card-emoji{font-size:64px;margin:8px 0}
.shop-card-name{font-size:15px;font-weight:600;margin-bottom:4px}
.shop-card-price{font-size:13px;color:#F59E0B;margin-bottom:10px}
.btn-exchange{width:100%;padding:10px;background:linear-gradient(135deg,#FF6B8A,#FF8FA3);color:#fff;border:none;border-radius:10px;font-size:14px;font-weight:600;cursor:pointer;transition:all .15s}
.btn-exchange:hover{transform:translateY(-1px);box-shadow:0 4px 12px rgba(255,107,138,.3)}

/* ===== HONOR BOARD (RANK) PAGE ===== */
.rank-header-section{display:flex;align-items:flex-start;justify-content:space-between;margin-bottom:24px;padding:20px 24px;background:#fff;border-radius:20px;border:1px solid #FFE8ED}
.rank-header-left{display:flex;align-items:center;gap:16px}
.rank-header-icon{width:56px;height:56px;background:linear-gradient(135deg,#FFD700,#FFA500);border-radius:16px;display:flex;align-items:center;justify-content:center;font-size:28px}
.rank-page-title{font-size:24px;font-weight:800;color:#FF6B8A;margin-bottom:4px}
.rank-tabs-inline{display:flex;gap:12px}
.rank-tab-link{font-size:14px;color:#999;cursor:pointer;padding-bottom:2px;border-bottom:2px solid transparent;transition:all .2s}
.rank-tab-link.active{color:#FF6B8A;border-bottom-color:#FF6B8A;font-weight:600}
.rank-tab-link:hover{color:#FF6B8A}
.rank-export-btn{display:flex;align-items:center;gap:6px;padding:10px 20px;border:1.5px solid #10B981;border-radius:12px;color:#10B981;font-size:14px;font-weight:600;background:#fff;text-decoration:none;transition:all .15s;white-space:nowrap}
.rank-export-btn:hover{background:#F0FDF4}
.rank-stats-row{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-bottom:24px}
.rank-stat-card{background:#fff;border-radius:16px;padding:20px 24px;border:1px solid #F0E8E8}
.rank-stat-label{font-size:13px;color:#999;margin-bottom:4px}
.rank-stat-value{font-size:32px;font-weight:800;margin-bottom:2px}
.rank-stat-sub{font-size:12px;color:#bbb}
.rank-filter-section{display:grid;grid-template-columns:1fr 1fr 1fr 1.5fr;gap:16px;margin-bottom:24px;background:#fff;border-radius:20px;padding:20px 24px;border:1px solid #F0E8E8}
.rank-filter-col{display:flex;flex-direction:column;gap:8px}
.rank-filter-label{font-size:13px;color:#999;font-weight:600;margin-bottom:4px}
.rank-filter-option{padding:10px 14px;border-radius:10px;cursor:pointer;transition:all .15s;border:1px solid #F0E8E8}
.rank-filter-option:hover{background:#FFF5F7;border-color:#FFD1DC}
.rank-filter-option.active{border-color:transparent}
.rank-leader-col{background:#FFF5F7;border-radius:14px;padding:16px}
.rank-leader-card{margin-top:4px}
.rank-leader-sub{font-size:12px;color:#999;margin-bottom:8px}
.rank-leader-row{display:flex;align-items:center;justify-content:space-between;gap:12px}
.rank-leader-name{font-size:22px;font-weight:800;color:#10B981}
.rank-leader-pet{font-size:13px;color:#666;margin-top:2px}
.rank-leader-pts{font-size:28px;font-weight:800;color:#FF6B8A}
.rank-leader-score{text-align:right}
.rank-list-section{background:#fff;border-radius:16px;overflow:hidden;border:1px solid #F0E8E8}
.rank-list-header{display:grid;grid-template-columns:60px 1fr 60px 80px 100px;padding:12px 20px;background:#FAFAFA;font-size:12px;color:#999;font-weight:600;border-bottom:1px solid #F0E8E8}
.rank-list-row{display:grid;grid-template-columns:60px 1fr 60px 80px 100px;padding:14px 20px;border-bottom:1px solid #FFF5F7;align-items:center;transition:background .15s}
.rank-list-row:hover{background:#FFF8FA}
.rank-list-row.rank-top{background:#FFF8F0}
.rank-list-num{font-size:18px;font-weight:700;text-align:center}
.rank-list-name{font-weight:600;color:#333}
.rank-list-pet{font-size:24px;text-align:center}
.rank-list-level{color:#8B5CF6;font-size:13px;font-weight:600}
.rank-list-score{text-align:right;font-weight:700;color:#FF6B8A;font-size:15px}

/* ===== SETTINGS ===== */
.settings-container{max-width:800px;margin:0 auto}
.section-title{font-size:20px;color:#FF6B8A;margin-bottom:20px}
.settings-grid{display:flex;flex-direction:column;gap:16px}
.settings-card{background:#fff;border-radius:16px;padding:20px;box-shadow:0 2px 8px rgba(255,107,138,.06)}
.settings-card h3{font-size:16px;margin-bottom:12px;color:#333}
.rules-section{margin-bottom:16px}
.rules-section h4{font-size:14px;color:#999;margin-bottom:8px}
.rule-row{display:flex;align-items:center;justify-content:space-between;padding:8px 0;border-bottom:1px solid #FFF5F7;font-size:14px}
.add-rule-form{display:flex;gap:8px;align-items:center;margin-top:12px;flex-wrap:wrap}
.add-rule-form input,.add-rule-form select{padding:7px 12px;border:1px solid #FFD1DC;border-radius:8px;font-size:13px;outline:none}
.add-rule-form input:focus{border-color:#FF6B8A}

/* ===== BUTTONS ===== */
.btn-pink{padding:8px 20px;background:linear-gradient(135deg,#FF6B8A,#FF8FA3);color:#fff;border:none;border-radius:10px;font-size:14px;font-weight:600;cursor:pointer;transition:all .15s}
.btn-pink:hover{transform:translateY(-1px);box-shadow:0 4px 12px rgba(255,107,138,.3)}
.btn-pink-sm{padding:6px 14px;background:linear-gradient(135deg,#FF6B8A,#FF8FA3);color:#fff;border:none;border-radius:8px;font-size:13px;cursor:pointer}
.btn-block{width:100%;padding:12px;font-size:15px}
.btn-icon{background:none;border:none;font-size:16px;cursor:pointer;padding:4px;opacity:.6}
.btn-icon:hover{opacity:1}

/* ===== FORMS ===== */
.form-field{margin-bottom:14px}
.form-field label{display:block;font-size:13px;color:#666;margin-bottom:5px;font-weight:500}
.form-field input,.form-field select{width:100%;padding:10px 14px;border:2px solid #FFE8ED;border-radius:10px;font-size:14px;outline:none;transition:border-color .2s}
.form-field input:focus,.form-field select:focus{border-color:#FF6B8A}

/* ===== TOAST ===== */
.toast{padding:10px 16px;border-radius:10px;font-size:13px;margin-bottom:16px;text-align:center}
.toast-error{background:#FEE2E2;color:#991B1B}
.toast-success{background:#D1FAE5;color:#065F46}

/* ===== PAW FAB ===== */
.paw-fab{position:fixed;bottom:24px;right:24px;width:52px;height:52px;background:linear-gradient(135deg,#FF6B8A,#FF8FA3);border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:24px;cursor:pointer;box-shadow:0 4px 16px rgba(255,107,138,.35);transition:transform .2s;z-index:90}
.paw-fab:hover{transform:scale(1.1)}

/* ===== GROUPS ===== */
.group-list{display:flex;flex-direction:column;gap:6px;margin-bottom:14px}
.group-item{display:flex;align-items:center;gap:8px;padding:8px;background:#FFF5F7;border-radius:8px}
.group-dot{width:14px;height:14px;border-radius:50%}
.add-group-row{display:flex;gap:6px;align-items:center}
.add-group-row input[type="text"]{flex:1;padding:8px 12px;border:1px solid #FFD1DC;border-radius:8px;font-size:13px;outline:none}
.add-group-row input[type="color"]{width:36px;height:36px;border:none;border-radius:8px;cursor:pointer}

/* ===== STUDENT PICK ===== */
.student-pick-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(130px,1fr));gap:8px;max-height:300px;overflow-y:auto}
.student-pick-btn{padding:10px;border:2px solid #FFE8ED;border-radius:10px;background:#fff;cursor:pointer;font-size:13px;transition:all .15s}
.student-pick-btn:hover{border-color:#FF6B8A;background:#FFF5F7}
.exchange-info{text-align:center;margin-bottom:12px;color:#666;font-size:14px}

/* ===== ROLL CALL ===== */
.roll-call-result{font-size:48px;font-weight:800;color:#FF6B8A;animation:bounce 1s infinite}

/* ===== ERROR PAGE ===== */
.error-page{display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:100vh;text-align:center}
.error-emoji{font-size:72px;margin-bottom:16px}
.error-page h1{font-size:24px;margin-bottom:8px;color:#FF6B8A}
.error-page p{color:#999;margin-bottom:20px}

/* ===== SETTINGS PAGE ===== */
.settings-layout{display:flex;gap:24px;max-width:1100px;margin:0 auto}
.settings-sidebar{width:260px;flex-shrink:0}
.settings-nav{background:#fff;border-radius:16px;overflow:hidden;box-shadow:0 2px 8px rgba(0,0,0,.04)}
.settings-nav-item{display:flex;align-items:center;gap:12px;padding:16px 18px;border-left:4px solid transparent;transition:all .15s;color:#333;cursor:pointer}
.settings-nav-item:hover{background:#F0F9FF;color:#0EA5E9}
.settings-nav-item.active{background:linear-gradient(135deg,#E0F2FE,#BAE6FD);border-left-color:#0EA5E9;color:#0EA5E9}
.snav-icon{font-size:28px;width:40px;height:40px;display:flex;align-items:center;justify-content:center;background:#F8FAFC;border-radius:10px}
.settings-nav-item.active .snav-icon{background:#DBEAFE}
.snav-text{flex:1;min-width:0}
.snav-title{font-size:14px;font-weight:600}
.snav-desc{font-size:11px;color:#999;margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.snav-arrow{color:#ccc;font-size:18px}
.settings-content{flex:1;min-width:0}
.settings-panel{display:flex;flex-direction:column;gap:16px}
.s-card{background:#fff;border-radius:16px;padding:20px 24px;box-shadow:0 2px 8px rgba(0,0,0,.04)}
.s-card-title{font-size:15px;font-weight:600;margin-bottom:4px}
.s-card-desc{font-size:13px;color:#999;margin-bottom:12px}
.s-section-title{font-size:16px;font-weight:700;color:#333}
.s-section-desc{font-size:13px;color:#999;margin-top:2px}
.s-section-desc-right{font-size:13px;color:#999;margin-left:auto}
.s-text{font-size:14px;color:#555;line-height:1.8}
.s-row{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:8px 0}
.s-row-left{flex:1;min-width:0}
.s-row-title{font-size:14px;font-weight:600;color:#333}
.s-row-desc{font-size:12px;color:#999;margin-top:2px}
.s-field-row{display:flex;align-items:center;gap:10px}
.s-input{padding:8px 14px;border:2px solid #E5E7EB;border-radius:10px;font-size:14px;outline:none;transition:border-color .2s}
.s-input:focus{border-color:#0EA5E9}
.s-btn{padding:8px 18px;border:1px solid #E5E7EB;border-radius:10px;background:#fff;font-size:13px;cursor:pointer;color:#333;transition:all .15s}
.s-btn:hover{border-color:#0EA5E9;color:#0EA5E9}
.s-btn-primary{padding:8px 20px;background:#0EA5E9;color:#fff;border:none;border-radius:10px;font-size:13px;font-weight:500;cursor:pointer;transition:all .15s}
.s-btn-primary:hover{background:#0284C7}
.s-indent-card{background:#F8FAFC;border-radius:12px;padding:16px 20px;margin-top:12px;border:1px solid #E5E7EB}
.toggle{position:relative;display:inline-block;width:48px;height:26px;flex-shrink:0}
.toggle input{opacity:0;width:0;height:0}
.toggle-slider{position:absolute;cursor:pointer;top:0;left:0;right:0;bottom:0;background:#D1D5DB;border-radius:26px;transition:.3s}
.toggle-slider:before{content:'';position:absolute;height:22px;width:22px;left:2px;bottom:2px;background:#fff;border-radius:50%;transition:.3s;box-shadow:0 1px 3px rgba(0,0,0,.15)}
.toggle input:checked + .toggle-slider{background:#0EA5E9}
.toggle input:checked + .toggle-slider:before{transform:translateX(22px)}
.level-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:12px;margin-top:14px}
.level-field{display:flex;flex-direction:column;gap:4px}
.level-field label{font-size:13px;color:#999;font-weight:500}
.level-field input{width:100%;padding:8px 12px;border:2px solid #E5E7EB;border-radius:10px;font-size:14px;outline:none}
.level-field input:focus{border-color:#0EA5E9}
.rules-list{display:flex;flex-direction:column;gap:2px;margin-top:8px}

.nav-class-selector{position:relative;display:flex;align-items:center;gap:4px;margin-left:6px;padding:5px 10px;border-radius:8px;background:#FFF0F3;transition:all .2s}
.nav-class-selector:hover{background:#FFE0E8}
.nav-class-name{font-size:13px;color:#FF6B8A;font-weight:600;max-width:130px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.nav-class-arrow{font-size:11px;color:#FF8FA3}
.nav-class-dropdown-menu{position:absolute;top:calc(100% + 6px);left:0;background:#fff;border-radius:12px;box-shadow:0 8px 28px rgba(0,0,0,.12);padding:6px 0;min-width:160px;z-index:999}
.nav-class-option{display:block;padding:9px 16px;font-size:13px;color:#333;cursor:pointer;transition:background .15s;white-space:nowrap;text-decoration:none}
.nav-class-option:hover{background:#FFF5F7;color:#FF6B8A}
.nav-class-option.active{color:#FF6B8A;font-weight:600;background:#FFF0F3}
.nav-class-manage{border-top:1px solid #F0E8E8;margin-top:4px;padding-top:10px;color:#999;font-size:12px}
.nav-class-manage:hover{color:#FF6B8A}

/* ===== COLLECT BADGE MODAL ===== */
.modal-collect{border-radius:20px;overflow:hidden}
.collect-header{background:linear-gradient(135deg,#F59E0B,#FF6B8A);padding:28px 24px 20px;text-align:center;color:#fff;position:relative}
.collect-title{font-size:22px;font-weight:800;margin-bottom:6px}
.collect-subtitle{font-size:14px;opacity:.9}
.collect-pet-circle{width:110px;height:110px;border-radius:50%;background:#FFF8EE;border:4px solid #F59E0B;display:flex;align-items:center;justify-content:center;margin:0 auto 14px;box-shadow:0 4px 20px rgba(245,158,11,.25)}
.collect-pet-name{font-size:26px;font-weight:800;color:#333;margin-bottom:8px}
.collect-tag{display:inline-block;background:linear-gradient(135deg,#FEF3C7,#FDE68A);color:#B45309;font-size:13px;font-weight:600;padding:5px 18px;border-radius:20px;margin-bottom:14px}
.collect-desc{font-size:14px;color:#777;line-height:1.7;margin-bottom:16px}
.collect-badge-tip{font-size:15px;font-weight:700;color:#333;margin-bottom:4px}
.collect-btn-later{padding:11px 28px;border-radius:30px;border:1.5px solid #E0E0E0;background:#fff;color:#666;font-size:14px;cursor:pointer;transition:all .15s}
.collect-btn-later:hover{border-color:#999}
.collect-btn-confirm{padding:11px 32px;border-radius:30px;border:none;background:linear-gradient(135deg,#F59E0B,#FF6B8A);color:#fff;font-size:14px;font-weight:700;cursor:pointer;transition:all .15s;box-shadow:0 4px 14px rgba(245,158,11,.35)}
.collect-btn-confirm:hover{transform:translateY(-1px);box-shadow:0 6px 18px rgba(245,158,11,.45)}

/* ===== FLOAT ANIMATION ===== */
.float-text{position:fixed;pointer-events:none;font-size:20px;font-weight:800;z-index:9999;animation:floatUp 1.2s ease-out forwards}
.float-text.positive{color:#10B981}
.float-text.negative{color:#EF4444}
@keyframes floatUp{0%{opacity:1;transform:translateY(0) scale(1)}50%{opacity:1;transform:translateY(-40px) scale(1.2)}100%{opacity:0;transform:translateY(-80px) scale(0.8)}}

/* ===== STAR BURST ===== */
.star-burst{position:fixed;pointer-events:none;z-index:9998}
.star-particle{position:absolute;font-size:16px;animation:starFly 0.8s ease-out forwards}
@keyframes starFly{0%{opacity:1;transform:translate(0,0) scale(1)}100%{opacity:0;transform:translate(var(--tx),var(--ty)) scale(0.3)}}

/* ===== CLASS MANAGER MODAL ===== */
.modal-class-mgr{max-width:820px;width:95%;border-radius:20px;overflow:hidden;display:flex;flex-direction:column}
.cmgr-header{display:flex;align-items:center;justify-content:space-between;padding:18px 24px;border-bottom:1px solid #F0E8E8;background:#fff}
.cmgr-header-left{display:flex;align-items:center;gap:12px}
.cmgr-icon{width:40px;height:40px;background:linear-gradient(135deg,#FF6B8A,#FF8FA3);border-radius:10px;display:flex;align-items:center;justify-content:center;font-size:20px;color:#fff}
.cmgr-title{font-size:16px;font-weight:700;color:#333}
.cmgr-subtitle{font-size:12px;color:#999;margin-top:2px}
.cmgr-body{display:flex;min-height:480px;max-height:65vh;overflow:hidden}
.cmgr-left{width:220px;flex-shrink:0;border-right:1px solid #F0E8E8;display:flex;flex-direction:column;background:#FAFAFA}
.cmgr-right{flex:1;display:flex;flex-direction:column;overflow:hidden}
.cmgr-section-title{font-size:13px;font-weight:700;color:#555;padding:14px 16px 8px;display:flex;align-items:center;gap:6px}
.cmgr-class-list{flex:1;overflow-y:auto;padding:0 8px 8px}
.cmgr-class-item{display:flex;align-items:center;justify-content:space-between;padding:10px 12px;border-radius:10px;cursor:pointer;transition:all .15s;margin-bottom:4px}
.cmgr-class-item:hover{background:#FFE8ED}
.cmgr-class-item.active{background:linear-gradient(135deg,#FF6B8A,#FF8FA3);color:#fff}
.cmgr-class-item.active .cmgr-class-del{color:rgba(255,255,255,.7)}
.cmgr-class-name{font-size:13px;font-weight:500;flex:1}
.cmgr-class-del{background:none;border:none;color:#ccc;cursor:pointer;font-size:13px;padding:2px 4px;border-radius:4px;transition:color .15s}
.cmgr-class-del:hover{color:#ef4444}
.cmgr-add-btn{margin:8px;padding:10px;border:2px dashed #FFB6C1;border-radius:10px;background:transparent;color:#FF6B8A;font-size:13px;font-weight:600;cursor:pointer;transition:all .15s;width:calc(100% - 16px)}
.cmgr-add-btn:hover{background:#FFF0F3;border-color:#FF6B8A}
.cmgr-right-header{display:flex;align-items:center;justify-content:space-between;padding:14px 16px 10px;border-bottom:1px solid #F5F0F0;flex-shrink:0}
.cmgr-btn-pink{padding:7px 16px;background:linear-gradient(135deg,#FF6B8A,#FF8FA3);color:#fff;border:none;border-radius:8px;font-size:13px;font-weight:600;cursor:pointer;white-space:nowrap}
.cmgr-btn-pink:hover{opacity:.9}
.cmgr-btn-ghost{padding:7px 14px;border:1.5px solid #E0E0E0;border-radius:8px;background:#fff;color:#666;font-size:13px;cursor:pointer;white-space:nowrap;transition:all .15s}
.cmgr-btn-ghost:hover{border-color:#FF6B8A;color:#FF6B8A}
.cmgr-student-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(110px,1fr));gap:10px;padding:14px 16px;overflow-y:auto;flex:1;align-content:start}
.cmgr-student-card{background:#fff;border:2px solid #F0E8E8;border-radius:12px;padding:10px 8px;text-align:center;cursor:pointer;transition:all .15s;position:relative}
.cmgr-student-card:hover{border-color:#FF6B8A;box-shadow:0 3px 10px rgba(255,107,138,.15)}
.cmgr-student-card.selected{border-color:#FF6B8A;background:#FFF5F7}
.cmgr-s-avatar{font-size:28px;margin-bottom:4px}
.cmgr-s-name{font-size:12px;font-weight:600;color:#333;margin-bottom:4px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cmgr-s-actions{display:flex;justify-content:center;gap:6px;opacity:0;transition:opacity .15s}
.cmgr-student-card:hover .cmgr-s-actions{opacity:1}
.cmgr-s-edit,.cmgr-s-del{cursor:pointer;font-size:14px;padding:2px}

/* ===== GROUP MANAGER MODAL ===== */
.modal-group-mgr{max-width:920px;width:95%;border-radius:20px;overflow:hidden;display:flex;flex-direction:column;max-height:90vh}
.grp-header{display:flex;align-items:center;justify-content:space-between;padding:16px 24px;border-bottom:1px solid #F0E8E8;background:#fff}
.grp-header-left{display:flex;align-items:center;gap:12px}
.grp-header-icon{font-size:22px}
.grp-title{font-size:17px;font-weight:700;color:#333}
.grp-subtitle{font-size:12px;color:#999;margin-top:2px;max-width:400px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.grp-close-btn{padding:6px 18px;border:1.5px solid #E0E0E0;border-radius:8px;background:#fff;color:#555;font-size:13px;cursor:pointer;transition:all .15s}
.grp-close-btn:hover{border-color:#FF6B8A;color:#FF6B8A}

.grp-quick-banner{display:flex;align-items:center;justify-content:space-between;padding:14px 24px;background:#FFFBEB;border-bottom:1px solid #FEF3C7;gap:12px}
.grp-quick-left{flex:1;min-width:0}
.grp-quick-title{font-size:14px;font-weight:700;color:#B45309;margin-bottom:2px}
.grp-quick-desc{font-size:12px;color:#D97706;line-height:1.4}
.grp-enter-mode-btn{padding:8px 16px;background:linear-gradient(135deg,#10B981,#34D399);color:#fff;border:none;border-radius:8px;font-size:13px;font-weight:600;cursor:pointer;white-space:nowrap;transition:all .15s}
.grp-enter-mode-btn:hover{transform:translateY(-1px);box-shadow:0 3px 10px rgba(16,185,129,.3)}

.grp-body{display:flex;flex:1;overflow:hidden;min-height:0}
.grp-left{width:260px;flex-shrink:0;border-right:1px solid #F0E8E8;overflow-y:auto;padding:16px;display:flex;flex-direction:column;gap:16px;background:#FAFAFA}
.grp-right{flex:1;overflow-y:auto;padding:16px;display:flex;flex-direction:column;gap:14px}

.grp-section{background:#fff;border:1px solid #F0E8E8;border-radius:12px;padding:14px 16px}
.grp-section-title{font-size:14px;font-weight:700;color:#333;margin-bottom:8px}
.grp-group-list{display:flex;flex-direction:column;gap:4px}
.grp-group-item{display:flex;align-items:center;gap:8px;padding:9px 12px;border-radius:8px;cursor:pointer;transition:all .15s;font-size:13px}
.grp-group-item:hover{background:#F0FDF4}
.grp-group-item.active{background:#DCFCE7;font-weight:600}
.grp-dot{width:10px;height:10px;border-radius:50%;flex-shrink:0}
.grp-group-name{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.grp-group-cnt{font-size:12px;color:#999;flex-shrink:0}

.grp-new-group-row{display:flex;gap:6px;align-items:center;flex-wrap:wrap}
.grp-input{padding:7px 12px;border:1.5px solid #E5E7EB;border-radius:8px;font-size:13px;outline:none;transition:border-color .2s;min-width:0;flex:1}
.grp-input:focus{border-color:#10B981}
.grp-color-input{width:34px;height:34px;border:none;border-radius:8px;cursor:pointer;padding:0}
.grp-btn-add{padding:7px 14px;background:#fff;border:1.5px solid #10B981;color:#10B981;border-radius:8px;font-size:13px;font-weight:600;cursor:pointer;white-space:nowrap;transition:all .15s;flex-shrink:0}
.grp-btn-add:hover{background:#F0FDF4}

.grp-random-form{display:flex;flex-direction:column;gap:6px}
.grp-checkbox{display:flex;align-items:center;gap:6px;font-size:13px;color:#555;cursor:pointer;padding:2px 0}
.grp-checkbox input[type="checkbox"]{accent-color:#EF4444;width:16px;height:16px}
.grp-btn-random{padding:9px 16px;background:linear-gradient(135deg,#EF4444,#F87171);color:#fff;border:none;border-radius:8px;font-size:13px;font-weight:600;cursor:pointer;transition:all .15s;margin-top:4px}
.grp-btn-random:hover{transform:translateY(-1px);box-shadow:0 3px 10px rgba(239,68,68,.25)}

.grp-settings-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px}
.grp-group-badge{display:inline-block;padding:3px 12px;border-radius:6px;color:#fff;font-size:12px;font-weight:600}
.grp-settings-row{display:flex;gap:8px;align-items:center}
.grp-btn-rename{padding:7px 14px;border:1.5px solid #E5E7EB;border-radius:8px;background:#fff;color:#555;font-size:13px;cursor:pointer;white-space:nowrap;transition:all .15s}
.grp-btn-rename:hover{border-color:#3B82F6;color:#3B82F6}
.grp-btn-delete{padding:7px 14px;border:1.5px solid #FCA5A5;border-radius:8px;background:#FEF2F2;color:#EF4444;font-size:13px;font-weight:600;cursor:pointer;white-space:nowrap;transition:all .15s}
.grp-btn-delete:hover{background:#FEE2E2;border-color:#EF4444}

.grp-member-actions-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px;flex-wrap:wrap;gap:4px}
.grp-member-stats{font-size:12px;color:#999}
.grp-member-actions{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:6px}
.grp-btn-action{padding:7px 14px;border-radius:8px;font-size:13px;font-weight:600;cursor:pointer;border:none;transition:all .15s;white-space:nowrap}
.grp-btn-action-green{background:linear-gradient(135deg,#10B981,#34D399);color:#fff}
.grp-btn-action-green:hover{box-shadow:0 3px 10px rgba(16,185,129,.25)}
.grp-btn-action-gray{background:#F3F4F6;color:#555;border:1px solid #E5E7EB}
.grp-btn-action-gray:hover{border-color:#9CA3AF}
.grp-btn-action-link{background:none;color:#999;text-decoration:underline;padding:7px 8px}
.grp-hint{font-size:12px;color:#bbb;line-height:1.4}

.grp-pools{display:grid;grid-template-columns:1fr 1fr;gap:12px;flex:1;min-height:0}
.grp-pool{display:flex;flex-direction:column;background:#fff;border:1px solid #F0E8E8;border-radius:12px;overflow:hidden}
.grp-pool-header{padding:10px 14px;font-size:13px;font-weight:700;color:#333;border-bottom:1px solid #F5F0F0;display:flex;align-items:center;gap:6px;background:#FAFAFA}
.grp-pool-count{font-size:12px;color:#999;font-weight:500;margin-left:auto}
.grp-pool-list{flex:1;overflow-y:auto;padding:8px 10px;max-height:220px;min-height:80px}
.grp-pool-empty{color:#ccc;text-align:center;padding:20px;font-size:13px;margin:0}
.grp-student-item{display:flex;align-items:center;gap:6px;padding:6px 8px;border-radius:6px;cursor:pointer;font-size:13px;color:#333;transition:background .1s}
.grp-student-item:hover{background:#F0FDF4}
.grp-student-item input[type="checkbox"]{accent-color:#10B981;width:15px;height:15px;flex-shrink:0}
.grp-student-dot{width:6px;height:6px;border-radius:50%;flex-shrink:0}

/* ===== TOOLS DROPDOWN ===== */
.tools-dropdown{position:absolute;top:100%;left:50%;transform:translateX(-50%);background:#fff;border-radius:12px;box-shadow:0 8px 24px rgba(0,0,0,.12);padding:6px 0;min-width:140px;z-index:999}
.tools-dropdown a{display:block;padding:10px 18px;font-size:14px;color:#333;cursor:pointer;transition:background .15s;white-space:nowrap}
.tools-dropdown a:hover{background:#FFF5F7;color:#FF6B8A}

/* ===== COUNTDOWN ===== */
.countdown-display{font-size:64px;font-weight:800;color:#FF6B8A;font-variant-numeric:tabular-nums}

/* ===== RANDOM GROUP ===== */
.rg-group{background:#FFF5F7;border-radius:12px;padding:12px 16px;margin-bottom:10px}
.rg-title{font-weight:700;font-size:15px;margin-bottom:8px}
.rg-members{display:flex;flex-wrap:wrap;gap:6px}
.rg-member{background:#fff;padding:4px 10px;border-radius:16px;font-size:13px;box-shadow:0 1px 3px rgba(0,0,0,.06)}

/* ===== MESSAGE WALL ===== */
.msg-input-row{display:flex;gap:8px}
.msg-card{background:#FFF5F7;border-radius:12px;padding:12px 16px;margin-bottom:8px}
.msg-header{display:flex;justify-content:space-between;margin-bottom:6px}
.msg-author{font-weight:600;font-size:13px;color:#FF6B8A}
.msg-time{font-size:12px;color:#aaa}
.msg-text{font-size:14px;line-height:1.5}

/* ===== TOOLS PAGE ===== */
.tools-page-header{text-align:center;padding:20px 0 28px}
.tools-page-icon{width:48px;height:48px;background:linear-gradient(135deg,#8B5CF6,#A78BFA);border-radius:14px;display:inline-flex;align-items:center;justify-content:center;font-size:24px;margin-bottom:10px;color:#fff}
.tools-page-title{font-size:24px;font-weight:800;color:#333;margin-bottom:4px}
.tools-page-subtitle{font-size:14px;color:#999}

.tools-card-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:20px;max-width:1060px;margin:0 auto}
.tool-card{display:flex;align-items:center;gap:14px;padding:22px 20px;border-radius:18px;cursor:pointer;transition:all .25s;border:2px solid transparent;position:relative}
.tool-card:hover{transform:translateY(-3px);box-shadow:0 8px 28px rgba(0,0,0,.08)}
.tool-card-purple{background:#F5F3FF;border-color:#EDE9FE}
.tool-card-purple:hover{border-color:#C4B5FD}
.tool-card-orange{background:#FFFBEB;border-color:#FEF3C7}
.tool-card-orange:hover{border-color:#FCD34D}
.tool-card-green{background:#ECFDF5;border-color:#D1FAE5}
.tool-card-green:hover{border-color:#6EE7B7}
.tool-card-red{background:#FFF1F2;border-color:#FFE4E6}
.tool-card-red:hover{border-color:#FCA5A5}

.tool-card-icon{width:48px;height:48px;border-radius:14px;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.tool-card-body{flex:1;min-width:0}
.tool-card-name{font-size:17px;font-weight:700;margin-bottom:2px}
.tool-card-en{font-size:12px;font-weight:500}
.tool-card-arrow{font-size:22px;color:#ccc;font-weight:300;flex-shrink:0}

/* ===== LUCKY WHEEL ===== */
.wheel-container{position:relative;display:inline-block;margin-bottom:16px}
.wheel-pointer{position:absolute;top:-6px;left:50%;transform:translateX(-50%);font-size:32px;color:#EF4444;z-index:10;filter:drop-shadow(0 2px 3px rgba(0,0,0,.2));line-height:1}
.wheel-result{margin:12px 0;animation:fadeIn .4s}
.wheel-result-label{font-size:14px;color:#999;margin-bottom:4px}
.wheel-result-name{font-size:32px;font-weight:800;color:#EF4444;animation:bounce 1s infinite}
.wheel-spin-btn{padding:12px 48px;background:linear-gradient(135deg,#EF4444,#F97316);color:#fff;border:none;border-radius:30px;font-size:16px;font-weight:700;cursor:pointer;transition:all .2s;box-shadow:0 4px 16px rgba(239,68,68,.3)}
.wheel-spin-btn:hover:not(:disabled){transform:translateY(-2px);box-shadow:0 6px 20px rgba(239,68,68,.4)}
.wheel-spin-btn:disabled{opacity:.6;cursor:not-allowed}

/* ===== SEAT ARRANGEMENT ===== */
.seat-grid{display:grid;gap:6px;max-height:50vh;overflow:auto;padding:4px}
.seat-cell{background:#fff;border:2px dashed #E5E7EB;border-radius:10px;min-height:60px;display:flex;align-items:center;justify-content:center;transition:all .2s;position:relative}
.seat-cell.occupied{border-color:#3B82F6;border-style:solid;background:#F0F7FF}
.seat-cell:hover{border-color:#60A5FA;box-shadow:0 2px 8px rgba(59,130,246,.15)}
.seat-student{display:flex;align-items:center;gap:4px;padding:6px 8px;cursor:grab;position:relative;width:100%}
.seat-student:active{cursor:grabbing}
.seat-pet{font-size:18px}
.seat-name{font-size:12px;font-weight:600;color:#333;flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.seat-remove{position:absolute;top:2px;right:4px;font-size:10px;color:#ccc;cursor:pointer;opacity:0;transition:opacity .2s}
.seat-cell:hover .seat-remove{opacity:1}
.seat-remove:hover{color:#EF4444}
.seat-empty{font-size:12px;color:#D1D5DB;font-weight:500}
.seat-unassigned{display:flex;flex-wrap:wrap;gap:8px;min-height:40px;padding:8px;background:#F9FAFB;border-radius:10px}
.seat-tag{display:inline-flex;align-items:center;gap:4px;padding:6px 12px;background:#fff;border:1px solid #E5E7EB;border-radius:20px;font-size:12px;font-weight:500;cursor:grab;transition:all .2s}
.seat-tag:hover{border-color:#3B82F6;background:#F0F7FF}
.seat-tag:active{cursor:grabbing}

/* ===== MESSAGE WALL PAGE ===== */
.mw-back-link{display:inline-flex;align-items:center;gap:4px;color:#FF6B8A;font-size:14px;margin-bottom:16px;font-weight:500}
.mw-back-link:hover{opacity:.8}
.mw-board{min-height:calc(100vh - 220px);background:#E8EAF6;border-radius:20px;padding:30px;display:flex;flex-wrap:wrap;gap:20px;align-content:flex-start;position:relative;overflow:hidden}
.mw-empty{width:100%;text-align:center;color:#999;font-size:16px;padding:60px 0}
.mw-note{width:260px;min-height:160px;padding:24px 20px 16px;border-radius:4px;box-shadow:2px 4px 12px rgba(0,0,0,.1);display:flex;flex-direction:column;justify-content:space-between;transition:transform .2s,box-shadow .2s}
.mw-note:hover{transform:rotate(0deg) scale(1.03)!important;box-shadow:4px 8px 20px rgba(0,0,0,.15);z-index:2}
.mw-note-content{font-size:18px;font-weight:700;color:#333;line-height:1.5;flex:1;margin-bottom:12px;word-break:break-word}
.mw-note-footer{display:flex;align-items:center;gap:8px;font-size:13px}
.mw-note-author{font-weight:700;color:#555}
.mw-note-date{color:#999;font-size:12px}
.mw-note-deco{color:#FF6B8A;margin-left:auto;font-size:16px;opacity:.6}
.mw-bottom-bar{position:fixed;bottom:0;left:0;right:0;background:#fff;border-top:1px solid #F0E8E8;padding:14px 24px;display:flex;align-items:center;gap:12px;z-index:100}
.mw-colors{display:flex;gap:8px;flex-shrink:0}
.mw-color-dot{width:32px;height:32px;border-radius:50%;cursor:pointer;transition:transform .15s;border:3px solid transparent}
.mw-color-dot.active{border-color:#FF6B8A;transform:scale(1.1)}
.mw-color-dot:hover{transform:scale(1.15)}
.mw-input{flex:1;padding:12px 18px;border:2px solid #F0E8E8;border-radius:14px;font-size:15px;outline:none}
.mw-input:focus{border-color:#FF6B8A}
.mw-author-input{width:100px;padding:12px 14px;border:2px solid #F0E8E8;border-radius:14px;font-size:14px;outline:none;flex-shrink:0}
.mw-author-input:focus{border-color:#FF6B8A}
.mw-send-btn{width:48px;height:48px;border-radius:50%;background:linear-gradient(135deg,#FF6B8A,#FF8FA3);color:#fff;border:none;font-size:20px;cursor:pointer;display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:transform .15s}
.mw-send-btn:hover{transform:scale(1.1)}

/* ===== EMOJI PICKER ===== */
.emoji-picker-area{border:2px solid #FFE8ED;border-radius:10px;padding:10px;max-height:200px;overflow-y:auto}
.emoji-grid{display:flex;flex-wrap:wrap;gap:4px}
.emoji-pick{width:36px;height:36px;display:flex;align-items:center;justify-content:center;font-size:22px;cursor:pointer;border-radius:8px;transition:background .15s}
.emoji-pick:hover{background:#FFF0F3}
.form-select{width:100%;padding:10px 14px;border:2px solid #FFE8ED;border-radius:10px;font-size:14px;outline:none;appearance:none;background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath d='M2 4l4 4 4-4' fill='none' stroke='%23999' stroke-width='2'/%3E%3C/svg%3E") right 12px center no-repeat}
.form-select:focus{border-color:#FF6B8A}

/* ===== RESPONSIVE ===== */

/* Hamburger menu button (hidden on desktop) */
.nav-hamburger{display:none;background:none;border:none;color:#fff;font-size:24px;cursor:pointer;padding:4px 8px;line-height:1}

@media(max-width:768px){
  /* Nav: hamburger menu */
  .top-nav{flex-wrap:wrap;padding:8px 12px}
  .nav-hamburger{display:block}
  .nav-center{display:none;width:100%;flex-direction:column;gap:4px;padding:8px 0 4px}
  .nav-center.open{display:flex}
  .nav-btn{padding:10px 14px;font-size:14px;border-radius:10px;justify-content:flex-start}
  .nav-btn.active{background:rgba(255,255,255,.2)}
  .nav-search{width:100%;margin:4px 0}
  .nav-search input{width:100%;font-size:14px}
  .nav-right{margin-left:auto}
  .nav-title{font-size:14px}
  .nav-class-selector{max-width:120px}
  .nav-class-name{font-size:12px;max-width:80px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

  /* Student grid: 2 columns on mobile */
  .student-grid{grid-template-columns:repeat(2,1fr);gap:8px;padding:8px}
  .student-card{padding:10px;border-radius:12px}
  .card-pet-area{margin:4px 0}
  .pet-emoji-big{font-size:36px}
  .pet-image-big{width:48px;height:48px}
  .card-name{font-size:13px}

  /* Shop layout */
  .shop-layout{flex-direction:column}
  .shop-sidebar{width:100%;max-height:200px;overflow-y:auto}
  .shop-items-grid{grid-template-columns:repeat(2,1fr);gap:8px}
  .shop-card{padding:10px}

  /* Settings */
  .settings-layout{flex-direction:column}
  .settings-sidebar{width:100%}
  .settings-nav{display:flex;flex-wrap:wrap;gap:4px}
  .settings-nav-item{padding:8px 12px;font-size:13px}
  .level-grid{grid-template-columns:repeat(3,1fr)}

  /* Rank podium */
  .podium-item{width:80px}
  .podium-item .podium-emoji{font-size:28px}

  /* Tools */
  .tools-card-grid{grid-template-columns:1fr}

  /* Groups */
  .grp-body{flex-direction:column}
  .grp-left{width:100%;border-right:none;border-bottom:1px solid #F0E8E8}
  .grp-pools{grid-template-columns:1fr}
  .grp-quick-banner{flex-direction:column;align-items:flex-start}

  /* Modals: full screen on mobile */
  .modal-overlay{padding:0}
  .modal,.modal-sm{width:100% !important;max-width:100% !important;max-height:100vh;border-radius:0;margin:0}
  .modal-body{max-height:calc(100vh - 60px);overflow-y:auto;-webkit-overflow-scrolling:touch}

  /* Batch toolbar */
  .batch-toolbar{flex-wrap:wrap;gap:6px}
  .batch-toolbar button{padding:8px 12px;font-size:13px}

  /* Pet level upload grid */
  #petLevelGrid{grid-template-columns:repeat(3,1fr) !important;gap:8px !important}

  /* Touch-friendly buttons */
  button,.btn-pink,.s-btn,.s-btn-primary,.btn-exchange{min-height:40px;font-size:14px}
  .cat-btn{padding:8px 12px}
  .rule-btn{padding:10px}

  /* Main page padding */
  .main-page{padding:8px}

  /* FAB */
  .paw-fab{bottom:16px;right:16px;width:48px;height:48px;font-size:22px}
}

/* Extra small screens */
@media(max-width:400px){
  .student-grid{grid-template-columns:repeat(2,1fr);gap:6px}
  .shop-items-grid{grid-template-columns:1fr}
  #petLevelGrid{grid-template-columns:repeat(2,1fr) !important}
}

/* ===== Pet Level Image Upload ===== */
.pet-level-cell{background:#F9FAFB;border-radius:12px;padding:12px;text-align:center;transition:border-color .2s,background .2s;border:2px solid transparent}
.pet-level-cell.drag-over{border-color:#FF6B8A;background:#FFF0F3}
.pet-level-preview:hover{border-color:#FF6B8A !important}

/* ===== Pet Image in Student Card ===== */
.pet-image-big{width:64px;height:64px;object-fit:contain;border-radius:8px}