/* Wrap all custom CSS in @layer so Tailwind v4 utilities take precedence.
   Tailwind v4 uses CSS cascade layers: theme → base → components → utilities.
   Without @layer, these rules would beat ALL Tailwind utilities. */
@layer components {

/* ===== RESET & BASE ===== */
/* NOTE: Do NOT add *{margin:0;padding:0} here — Tailwind v4 uses CSS @layer,
   and unlayered rules override layered ones regardless of specificity.
   Tailwind's preflight already handles the reset. */
html{scroll-behavior:smooth}
body{font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Microsoft YaHei",ui-sans-serif,system-ui,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Noto Color Emoji";color:#171717;line-height:1.5;min-height:100vh;overflow-x:hidden}
::selection{background:rgba(244,63,94,.18);color:var(--pink)}
/* 点点背景 — 由 tailwind-input.css 控制 */
/* Global link color removed — Tailwind text-* classes handle colors now */
/* Only style links inside legacy content areas */
.modal-body a,.settings-card a,.s-card a{color:#f43f5e;text-decoration:none;transition:color .2s}
.modal-body a:hover,.settings-card a:hover,.s-card a:hover{color:#e11d48}

/* ===== CSS VARIABLES ===== */
:root{--radius:.625rem;--background:#ffffff;--background-rgb:255,255,255;--foreground:#171717;--foreground-rgb:23,23,23;--card:#ffffff;--card-rgb:255,255,255;--card-foreground:#171717;--popover:#ffffff;--popover-foreground:#171717;--primary:#262626;--primary-rgb:38,38,38;--primary-foreground:#fafafa;--primary-light:#f5f5f5;--secondary:#f5f5f5;--secondary-foreground:#262626;--muted:#f5f5f5;--muted-foreground:#71717a;--accent:#f5f5f5;--accent-foreground:#262626;--destructive:#e11d48;--destructive-foreground:#fafafa;--border:#e5e7eb;--border-rgb:229,231,235;--input:#e5e7eb;--ring:#a1a1aa;--scrollbar-thumb:#d4d4d8;--scrollbar-thumb-hover:#a1a1aa;--pink:#f43f5e;--pink-light:#fb7185;--pink-bg:#fff1f2;--pink-border:#ffe4e6;--pink-accent:#ec4899;--purple:#8B5CF6;--purple-light:#A78BFA;--green:#10B981;--yellow:#F59E0B;--red:#EF4444;--text:#171717;--text-muted:#737373;--bg:#fafafa;--card-bg:#fff;--shadow-sm:0 1px 2px 0 rgb(0 0 0/.05);--shadow-md:0 4px 6px -1px rgb(0 0 0/.1),0 2px 4px -2px rgb(0 0 0/.1);--shadow-lg:0 10px 15px -3px rgb(0 0 0/.1),0 4px 6px -4px rgb(0 0 0/.1);--shadow-xl:0 20px 25px -5px rgb(0 0 0/.1),0 8px 10px -6px rgb(0 0 0/.1);--radius-sm:calc(var(--radius) - 4px);--radius-md:calc(var(--radius) + 4px);--radius-lg:calc(var(--radius) + 8px);--transition:all .25s cubic-bezier(.4,0,.2,1)}

/* ===== DARK MODE ===== */
[data-theme="dark"]{--text:#fafafa;--text-muted:#a1a1aa;--bg:#171717;--card-bg:#262626;--border:#2e2e2e;--pink-bg:#3d1f2f;--pink-border:#4a2a3a;--shadow-sm:0 1px 2px 0 rgba(0,0,0,.3);--shadow-md:0 4px 6px -1px rgba(0,0,0,.4),0 2px 4px -2px rgba(0,0,0,.4);--shadow-lg:0 10px 15px -3px rgba(0,0,0,.5),0 4px 6px -4px rgba(0,0,0,.5);--shadow-xl:0 20px 25px -5px rgba(0,0,0,.5),0 8px 10px -6px rgba(0,0,0,.5);--background:#171717;--foreground:#fafafa;--card:#262626;--card-foreground:#fafafa;--popover:#262626;--popover-foreground:#fafafa;--primary:#e5e5e5;--primary-foreground:#262626;--secondary:#404040;--secondary-foreground:#fafafa;--muted:#404040;--muted-foreground:#a1a1aa;--accent:#404040;--accent-foreground:#fafafa;--input:#3a3a3a}
[data-theme="dark"] body{background:var(--bg);color:var(--text)}
[data-theme="dark"] body::before{opacity:.08}
[data-theme="dark"] .student-card,[data-theme="dark"] .stat-card,[data-theme="dark"] .shop-card,[data-theme="dark"] .settings-card{background:var(--card-bg);border-color:var(--border);color:var(--text)}
[data-theme="dark"] .modal{background:var(--card-bg);color:var(--text)}
[data-theme="dark"] .detail-info-row{border-color:var(--border)}
[data-theme="dark"] .detail-info-label{color:var(--text-muted)}
[data-theme="dark"] .detail-info-value{color:var(--text)}
[data-theme="dark"] .timeline-text{color:var(--text-muted)}
[data-theme="dark"] .timeline-dot{box-shadow:0 0 0 3px var(--card-bg)}
[data-theme="dark"] .badge-locked{background:var(--border)}
[data-theme="dark"] .growth-row{border-color:var(--border)}
[data-theme="dark"] .growth-text{color:var(--text-muted)}
[data-theme="dark"] .top-nav{background:#1a1a2e;border-color:var(--border)}
[data-theme="dark"] .rank-page-title{color:var(--text)}
[data-theme="dark"] input,[data-theme="dark"] select,[data-theme="dark"] textarea{background:#0f3460;color:var(--text);border-color:var(--border)}
[data-theme="dark"] .filter-tab{background:var(--card-bg);color:var(--text-muted);border-color:var(--border)}
[data-theme="dark"] .filter-tab.active{color:#fff}
[data-theme="dark"] .student-card>div{background:linear-gradient(180deg,rgba(30,20,40,.6) 0%,rgba(22,33,62,.7) 50%);border-color:rgba(244,63,94,.1)}
[data-theme="dark"] .student-card:hover>div{border-color:var(--pink)}
[data-theme="dark"] .card-name{color:var(--text)}
[data-theme="dark"] .card-info-icon{background:rgba(22,33,62,.8);color:#666}
[data-theme="dark"] .card-food-icon{background:none}
[data-theme="dark"] .rank-list-row{border-color:var(--border)}
[data-theme="dark"] .rank-list-name{color:var(--text)}
[data-theme="dark"] .bar-track{background:#0f3460}
[data-theme="dark"] .bar-label{color:var(--text-muted)}
[data-theme="dark"] .mw-board{background:#16213e}
/* dark login-card rule removed — login page uses pure Tailwind now */
[data-theme="dark"] .main-page{color:var(--text)}
/* dark theme tab-bar removed — now pure Tailwind */
[data-theme="dark"] .mobile-menu-panel{background:rgba(22,33,62,.95)}
[data-theme="dark"] .mobile-menu-item{color:#aaa}
[data-theme="dark"] .mobile-menu-item:hover,.mobile-menu-item.active{color:var(--pink)}
[data-theme="dark"] .more-dropdown{background:var(--card-bg);border-color:var(--border)}
[data-theme="dark"] .more-dropdown button{color:var(--text-muted)}
[data-theme="dark"] .more-dropdown button:hover{background:var(--pink-bg);color:var(--pink)}
[data-theme="dark"] .pc-nav-bar{background:rgba(22,33,62,.6);border-color:var(--border)}
[data-theme="dark"] .nav-expand-panel{background:rgba(26,26,46,.97);border-color:var(--border);box-shadow:0 8px 30px rgba(0,0,0,.3)}
[data-theme="dark"] .expand-icon{background:rgba(22,33,62,.8);color:var(--text-muted)}
[data-theme="dark"] .expand-icon:hover,[data-theme="dark"] .expand-icon.active{background:var(--pink-bg);color:var(--pink)}
[data-theme="dark"] .tool-icon-btn{background:var(--card-bg);border-color:var(--border);color:var(--text-muted)}
[data-theme="dark"] .tool-icon-btn:hover,.tool-icon-btn.active{border-color:var(--pink);color:var(--pink)}
[data-theme="dark"] h1,[data-theme="dark"] h2,[data-theme="dark"] h3,[data-theme="dark"] h4{color:var(--text)}
[data-theme="dark"] .section-title{color:var(--pink)}
[data-theme="dark"] .rank-page-title{color:var(--text)}

/* ===== PAGE TRANSITIONS ===== */
@keyframes pageIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}
@keyframes cardIn{from{opacity:0;transform:translateY(16px) scale(.97)}to{opacity:1;transform:translateY(0) scale(1)}}
.main-page,.settings-layout,.mw-board{animation:pageIn .4s ease-out}

/* ===== LOGIN PAGE ===== */
/* Old login rules removed — login page now uses pure Tailwind classes */

/* ===== TOP NAVIGATION ===== */
/* top-nav, nav-btn: Tailwind handles layout. Keep minimal overrides for backwards compat */
.top-nav{position:sticky;top:0;z-index:100}
.nav-class-selector{cursor:pointer}

/* Mobile bottom tab bar — now pure Tailwind in topnav.ejs */

/* Filter toolbar — Tailwind handles layout */
.filter-tab{cursor:pointer;transition:all .2s}
.filter-tab.active{background:var(--primary);color:var(--primary-foreground)}
.filter-tab.green{background:linear-gradient(135deg,#4CAF50,#66BB6A);color:#fff}

/* ===== STUDENT CARDS ===== */
/* student-card: JS hook class, animation only — Tailwind handles all layout */
.student-card{animation:cardIn .4s ease-out both}
.student-card:nth-child(1){animation-delay:.02s}.student-card:nth-child(2){animation-delay:.04s}.student-card:nth-child(3){animation-delay:.06s}.student-card:nth-child(4){animation-delay:.08s}.student-card:nth-child(5){animation-delay:.1s}.student-card:nth-child(6){animation-delay:.12s}.student-card:nth-child(7){animation-delay:.14s}.student-card:nth-child(8){animation-delay:.16s}.student-card:nth-child(9){animation-delay:.18s}.student-card:nth-child(10){animation-delay:.2s}
.rank-up-glow{box-shadow:0 0 20px rgba(255,215,0,.5),0 0 40px rgba(255,215,0,.2) !important;border-color:#FFD700 !important;z-index:1}
.student-card.selected>div{border-color:var(--pink) !important;box-shadow:0 0 0 3px rgba(244,63,94,.2) !important}

/* card-pet-area, card-progress-row, card-progress-diff, card-stats, card-food, card-badges-count: JS hook classes only, no layout */
/* 宠物灰化 */
.pet-greyed .card-pet-area{filter:grayscale(100%);opacity:.6}
.pet-greyed img.h-12{filter:grayscale(100%);opacity:.5}
.pet-grey-hint{font-size:11px;color:#e05050;text-align:center;margin-top:-6px;margin-bottom:4px;font-weight:600}
.card-hatch-btn:hover{text-decoration:underline}

/* 底部积分 */
/* card-stats/card-food/card-badges-count: JS hooks, Tailwind controls layout */

/* Batch toolbar — Tailwind handles layout */

/* ===== MODALS ===== */
.modal-overlay{position:fixed;top:0;left:0;right:0;bottom:0;background:rgba(0,0,0,.35);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);display:flex;align-items:center;justify-content:center;z-index:1000;animation:fadeIn .2s}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
@keyframes popIn{from{opacity:0;transform:scale(.85)}to{opacity:1;transform:scale(1)}}
@keyframes slideUp{from{transform:translateY(30px) scale(.97);opacity:0}to{transform:translateY(0) scale(1);opacity:1}}
@keyframes modalPop{0%{transform:scale(.92);opacity:0}60%{transform:scale(1.01)}100%{transform:scale(1);opacity:1}}
.modal{background:#fff;border-radius:2rem;width:90%;max-width:520px;max-height:85vh;overflow:hidden;animation:popIn .3s cubic-bezier(.4,0,.2,1);display:flex;flex-direction:column;box-shadow:0 22px 70px rgba(236,72,153,.10),0 8px 24px rgba(15,23,42,.08);border:1px solid rgba(244,114,182,.12)}
.modal-sm{max-width:400px}
.modal-pets{max-width:680px}
.modal-pet-detail{max-width:600px;position:fixed;right:0;top:0;bottom:0;width:60%;max-height:100vh;border-radius:2rem 0 0 2rem;animation:slideInRight .3s cubic-bezier(.22,1,.36,1);box-shadow:-10px 0 40px rgba(15,23,42,.08)}
@keyframes slideInRight{from{transform:translateX(100%)}to{transform:translateX(0)}}
#petDetailModal{align-items:stretch;justify-content:flex-end}
.modal-header{padding:18px 24px;display:flex;align-items:center;justify-content:space-between;font-size:16px;font-weight:700;color:#fff;letter-spacing:-.3px;border-bottom:1px solid rgba(255,255,255,.15)}
.pink-header{background:var(--primary, #262626);color:#fff}
.purple-header{background:linear-gradient(135deg,#8B5CF6,#7C3AED)}
.modal-close{background:none;border:none;color:rgba(255,255,255,.8);font-size:20px;cursor:pointer;padding:0;transition:all .2s;width:32px;height:32px;border-radius:12px;display:flex;align-items:center;justify-content:center}
.modal-close:hover{background:rgba(255,255,255,.2);color:#fff;transform:rotate(90deg)}
.modal-body{padding:24px;overflow-y:auto;flex:1}

/* ===== POINTS MODAL ===== */
.points-tabs{display:flex;gap:0;margin-bottom:16px;background:#fff1f2;border-radius:12px;padding:3px}
.points-tab{flex:1;padding:8px;border:none;background:transparent;border-radius:10px;font-size:14px;cursor:pointer;color:#94a3b8;font-weight:600;transition:all .2s}
.points-tab.active{background:linear-gradient(135deg,#f43f5e,#ec4899);color:#fff;box-shadow:0 4px 12px rgba(244,63,94,.2)}
.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 #ffe4e6;border-radius:16px;background:#fff;cursor:pointer;text-align:center;transition:all .2s;font-size:13px}
.rule-btn:hover{border-color:#f43f5e;transform:translateY(-2px);box-shadow:0 8px 20px rgba(244,63,94,.12)}
.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 #ffe4e6}
.custom-points-row input{flex:1;padding:8px 12px;border:1px solid #fecdd3;border-radius:8px;font-size:13px;outline:none}
.custom-points-row input:focus{border-color:#f43f5e}

/* ===== 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:16px;cursor:pointer;transition:all .2s;background:#FAFAFF}
.pet-pick:hover{border-color:#8B5CF6;background:#F3E8FF;transform:scale(1.05);box-shadow:0 8px 20px rgba(139,92,246,.12)}
.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,#f43f5e 0%,#ec4899 30%,#fb7185 60%,#FFDEE5 100%);border-radius:2rem}
.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:#f43f5e;border:none;border-radius:9999px;font-size:16px;font-weight:700;cursor:pointer;box-shadow:0 8px 24px rgba(0,0,0,.12);transition:all .2s}
.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 #e5e7eb;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:var(--primary, #262626);border-bottom-color:var(--primary, #262626)}
.badges-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(80px,1fr));gap:10px}
.badge-item{text-align:center;padding:12px 6px;background:#fff1f2;border-radius:12px;transition:var(--transition);cursor:default}
.badge-item:hover{transform:translateY(-2px);box-shadow:0 4px 12px rgba(244,63,94,.15)}
.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 #fff1f2;font-size:13px;transition:background .15s;border-radius:6px}
.growth-row:hover{background:#FFF8FA}
.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}

/* Detail Info Tab */
.detail-info-top{display:flex;gap:24px;align-items:flex-start;padding:10px 0}
.detail-ring-wrap{flex-shrink:0;width:120px;height:120px}
.detail-ring-svg{width:100%;height:100%}
.detail-info-stats{flex:1;display:flex;flex-direction:column;gap:6px}
.detail-info-row{display:flex;justify-content:space-between;align-items:center;padding:6px 0;border-bottom:1px solid #f8f0f0;font-size:13px}
.detail-info-row:last-child{border-bottom:none}
.detail-info-label{color:#999;font-size:12px}
.detail-info-value{font-weight:500;color:#333}

/* Timeline style growth log */
.growth-timeline{position:relative;padding-left:20px}
.growth-timeline::before{content:'';position:absolute;left:14px;top:8px;bottom:8px;width:2px;background:linear-gradient(180deg,#f43f5e,#A78BFA);border-radius:1px}
.timeline-item{display:flex;gap:12px;padding:8px 0;position:relative}
.timeline-dot{width:28px;height:28px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:14px;flex-shrink:0;z-index:1;box-shadow:0 0 0 3px #fff}
.timeline-content{flex:1;padding:4px 0}
.timeline-text{font-size:13px;color:#555;margin-bottom:2px}
.timeline-meta{display:flex;gap:12px;align-items:center}
.timeline-time{font-size:11px;color:#ccc}
.timeline-pts{font-size:12px;font-weight:600}
.timeline-pts.positive{color:#10b981}
.timeline-pts.negative{color:#ef4444}

/* Locked badge */
.badge-locked{opacity:.5;background:#f5f5f5}
.badge-locked .badge-emoji{filter:grayscale(100%)}
.badge-locked .badge-name{color:#ccc}

/* ===== SHOP PAGE ===== */
.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;touch-action:manipulation;-webkit-tap-highlight-color:rgba(244,63,94,.15)}
.cat-btn.active,.cat-btn:hover{background:linear-gradient(135deg,#f43f5e,#fb7185);color:#fff}
.shop-card{position:relative;animation:cardIn .4s ease-out both;min-width:0}
.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;height:40px;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.shop-card-price{font-size:13px;color:#F59E0B;margin-bottom:10px;font-weight:600}
.btn-exchange{width:100%;padding:10px;background:linear-gradient(135deg,#f43f5e,#fb7185);color:#fff;border:none;border-radius:10px;font-size:14px;font-weight:600;cursor:pointer;transition:var(--transition);position:relative;overflow:hidden;touch-action:manipulation;-webkit-tap-highlight-color:rgba(244,63,94,.15)}
.btn-exchange::after{content:'';position:absolute;top:50%;left:50%;width:0;height:0;background:rgba(255,255,255,.2);border-radius:50%;transform:translate(-50%,-50%);transition:width .4s,height .4s}
.btn-exchange:active::after{width:200%;height:200%}
.btn-exchange:hover{transform:translateY(-1px);box-shadow:0 4px 14px rgba(244,63,94,.25)}
.btn-exchange:disabled{background:#E5E7EB;box-shadow:none;transform:none;cursor:not-allowed}

/* ===== SETTINGS ===== */
/* Rules card grid */
.rules-card-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:14px}
.rule-card{background:#fff;border-radius:16px;padding:18px 14px;text-align:center;border:2px solid #F0F0F0;transition:all .2s;position:relative;cursor:default}
.rule-card:hover{border-color:var(--pink);box-shadow:0 4px 14px rgba(244,63,94,.12)}
.rule-card-add{cursor:pointer;border:2px dashed #ddd;display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:160px}
.rule-card-add:hover{border-color:var(--pink);background:#FFF8FA}
.rule-card-menu{position:absolute;top:8px;right:10px;font-size:16px;color:#ccc;cursor:pointer;font-weight:bold;letter-spacing:2px}
.rule-card-menu:hover{color:#f43f5e}
.rule-card-menu-dropdown{position:absolute;top:28px;right:8px;background:#fff;border:1px solid #eee;border-radius:8px;box-shadow:0 4px 12px rgba(0,0,0,.1);z-index:10;min-width:80px}
.rule-card-menu-dropdown div{padding:8px 14px;font-size:13px;cursor:pointer;color:#333}
.rule-card-menu-dropdown div:hover{background:#fff1f2;color:#f43f5e}
.settings-container{max-width:800px;margin:0 auto}
.section-title{font-size:20px;color:#f43f5e;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(15,23,42,.04)}
.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 #fff1f2;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 #fecdd3;border-radius:8px;font-size:13px;outline:none}
.add-rule-form input:focus{border-color:#f43f5e}

/* ===== BUTTONS ===== */
.btn-pink{padding:8px 20px;background:linear-gradient(135deg,#f43f5e,#ec4899,#f97316);color:#fff;border:none;border-radius:12px;font-size:14px;font-weight:600;cursor:pointer;transition:all .2s;position:relative;overflow:hidden;box-shadow:0 4px 14px rgba(244,63,94,.18)}
.btn-pink::after{content:'';position:absolute;top:50%;left:50%;width:0;height:0;background:rgba(255,255,255,.2);border-radius:50%;transform:translate(-50%,-50%);transition:width .4s,height .4s}
.btn-pink:active::after{width:200%;height:200%}
.btn-pink:hover{transform:translateY(-1px);box-shadow:0 4px 14px rgba(244,63,94,.25)}
.btn-pink:active{transform:scale(.97)}
.btn-pink-sm{padding:6px 14px;background:linear-gradient(135deg,var(--pink),var(--pink-light));color:#fff;border:none;border-radius:8px;font-size:13px;cursor:pointer;transition:var(--transition)}
.btn-pink-sm:hover{transform:translateY(-1px);box-shadow:0 3px 10px rgba(244,63,94,.25)}
.btn-block{width:100%;padding:12px;font-size:15px}
.btn-icon{background:none;border:none;font-size:16px;cursor:pointer;padding:4px;opacity:.6;transition:var(--transition)}
.btn-icon:hover{opacity:1;transform:scale(1.1)}

/* ===== FORMS ===== */
.form-field{margin-bottom:14px}
.form-field label{display:block;font-size:13px;color:#555;margin-bottom:5px;font-weight:600}
.form-field input,.form-field select{width:100%;padding:10px 14px;border:2px solid #e5e7eb;border-radius:var(--radius-sm);font-size:14px;outline:none;transition:var(--transition);background:#FAFAFA}
.form-field input:focus,.form-field select:focus{border-color:var(--pink);background:#fff;box-shadow:0 0 0 3px rgba(244,63,94,.08)}

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

/* Quick Toast (global notification) */
.quick-toast{position:fixed;top:70px;left:50%;transform:translateX(-50%);background:linear-gradient(135deg,#f43f5e,#fb7185);color:#fff;padding:12px 28px;border-radius:24px;font-size:14px;font-weight:500;z-index:9999;animation:toastIn .35s cubic-bezier(.4,0,.2,1);box-shadow:0 6px 24px rgba(244,63,94,.25);backdrop-filter:blur(8px);max-width:90vw;text-align:center;letter-spacing:.2px}
.quick-toast.toast-out{animation:toastOut .4s ease-in forwards}
@keyframes toastIn{0%{opacity:0;transform:translateX(-50%) translateY(-12px) scale(.95)}100%{opacity:1;transform:translateX(-50%) translateY(0) scale(1)}}
@keyframes toastOut{0%{opacity:1;transform:translateX(-50%) translateY(0) scale(1)}100%{opacity:0;transform:translateX(-50%) translateY(-8px) scale(.97)}}

/* ===== PAW FAB ===== */
.paw-fab{position:fixed;bottom:24px;right:24px;width:54px;height:54px;background:linear-gradient(135deg,var(--pink),#ec4899);border-radius:16px;display:flex;align-items:center;justify-content:center;font-size:24px;cursor:pointer;box-shadow:0 4px 20px rgba(244,63,94,.3);transition:var(--transition);z-index:90}
.paw-fab:hover{transform:scale(1.08) rotate(-5deg);box-shadow:0 6px 28px rgba(244,63,94,.4)}
.paw-fab:active{transform:scale(.95)}

/* ===== DASHBOARD STATS ===== */
/* Removed old .dashboard-stats/.stat-card rules — Tailwind handles layout now */

/* ===== 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:#fff1f2;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 #fecdd3;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 #ffe4e6;border-radius:10px;background:#fff;cursor:pointer;font-size:13px;transition:all .15s}
.student-pick-btn:hover{border-color:#f43f5e;background:#fff1f2}
.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:#f43f5e;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:#f43f5e}
.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:1.35rem;padding:20px 24px;box-shadow:0 10px 30px rgba(15,23,42,.05);transition:all .2s;border:1px solid rgba(226,232,240,.8)}
.s-card:hover{box-shadow:0 14px 35px rgba(15,23,42,.07);border-color:rgba(244,114,182,.12)}
.s-card-title{font-size:15px;font-weight:700;margin-bottom:4px;color:#1e293b}
.s-card-desc{font-size:13px;color:#94a3b8;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:1px solid rgba(226,232,240,.8);border-radius:12px;font-size:14px;outline:none;transition:all .2s;background:#fff}
.s-input:focus{border-color:#f472b6;box-shadow:0 0 0 3px rgba(244,114,182,.1)}
.s-btn{padding:8px 18px;border:1px solid rgba(226,232,240,.8);border-radius:12px;background:#fff;font-size:13px;cursor:pointer;color:#475569;font-weight:500;transition:all .2s}
.s-btn:hover{border-color:#f472b6;color:#ec4899;background:rgba(244,114,182,.04)}
.s-btn-primary{padding:8px 20px;background:linear-gradient(135deg,#f43f5e,#ec4899);color:#fff;border:none;border-radius:12px;font-size:13px;font-weight:600;cursor:pointer;transition:all .2s;box-shadow:0 4px 14px rgba(244,63,94,.18)}
.s-btn-primary:hover{box-shadow:0 6px 20px rgba(244,63,94,.25);transform:translateY(-1px)}
.s-indent-card{background:#f8fafc;border-radius:1rem;padding:16px 20px;margin-top:12px;border:1px solid rgba(226,232,240,.8)}
.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:hover{background:#ffe4e6}
.nav-class-arrow{font-size:11px;color:#fb7185}
.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:#fff1f2;color:#f43f5e}
.nav-class-option.active{color:#f43f5e;font-weight:600;background:#fff1f2}
.nav-class-manage{border-top:1px solid #e5e7eb;margin-top:4px;padding-top:10px;color:#999;font-size:12px}
.nav-class-manage:hover{color:#f43f5e}

/* ===== COLLECT BADGE MODAL ===== */
.modal-collect{border-radius:2rem;overflow:hidden}
.collect-header{background:linear-gradient(135deg,#F59E0B,#f43f5e);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,#f43f5e);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:2rem;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 #e5e7eb;background:#fff}
.cmgr-header-left{display:flex;align-items:center;gap:12px}
.cmgr-icon{width:40px;height:40px;background:linear-gradient(135deg,#f43f5e,#fb7185);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 #e5e7eb;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:#ffe4e6}
.cmgr-class-item.active{background:linear-gradient(135deg,#f43f5e,#fb7185);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 #fda4af;border-radius:10px;background:transparent;color:#f43f5e;font-size:13px;font-weight:600;cursor:pointer;transition:all .15s;width:calc(100% - 16px)}
.cmgr-add-btn:hover{background:#fff1f2;border-color:#f43f5e}
.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,#f43f5e,#fb7185);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:#f43f5e;color:#f43f5e}
.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 #e5e7eb;border-radius:12px;padding:10px 8px;text-align:center;cursor:pointer;transition:all .15s;position:relative}
.cmgr-student-card:hover{border-color:#f43f5e;box-shadow:0 3px 10px rgba(244,63,94,.15)}
.cmgr-student-card.selected{border-color:#f43f5e;background:#fff1f2}
.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:2rem;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 #e5e7eb;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:#f43f5e;color:#f43f5e}

.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 #e5e7eb;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 #e5e7eb;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 #e5e7eb;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:#fff1f2;color:#f43f5e}

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

/* ===== RANDOM GROUP ===== */
.rg-group{background:#fff1f2;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:#fff1f2;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:#f43f5e}
.msg-time{font-size:12px;color:#aaa}
.msg-text{font-size:14px;line-height:1.5}

/* ===== 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:#f43f5e;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;position:relative}
.mw-note::before{content:'📌';position:absolute;top:-6px;left:50%;transform:translateX(-50%);font-size:14px;filter:drop-shadow(0 1px 2px rgba(0,0,0,.2))}
.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:#f43f5e;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 #e5e7eb;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:#f43f5e;transform:scale(1.1)}
.mw-color-dot:hover{transform:scale(1.15)}
.mw-input{flex:1;padding:12px 18px;border:2px solid #e5e7eb;border-radius:14px;font-size:15px;outline:none}
.mw-input:focus{border-color:#f43f5e}
.mw-author-input{width:100px;padding:12px 14px;border:2px solid #e5e7eb;border-radius:14px;font-size:14px;outline:none;flex-shrink:0}
.mw-author-input:focus{border-color:#f43f5e}
.mw-send-btn{width:48px;height:48px;border-radius:50%;background:linear-gradient(135deg,#f43f5e,#fb7185);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 #ffe4e6;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:#fff1f2}
.form-select{width:100%;padding:10px 14px;border:2px solid #ffe4e6;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:#f43f5e}

/* Layout modes — compact/large/list controlled by JS, referenced on #studentGrid */

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

/* Hamburger menu button (deprecated, replaced by toggle buttons) */
.nav-hamburger{display:none !important}

@media(max-width:768px){
  /* === Global mobile === */
  html,body{max-width:100vw;overflow-x:hidden}

  /* === Nav: mobile — now pure Tailwind in topnav.ejs === */

  /* === Main page with bottom padding for tab bar === */
  .main-page{padding-bottom:70px;overflow-x:hidden}

  /* === Dashboard stats: Tailwind handles === */

  /* === Toolbar === */
  .filter-tab{flex-shrink:0;padding:5px 10px;font-size:11px;white-space:nowrap;border-radius:16px}

  /* === Student grid: mobile adjustments === */
  /* Old card-* rules removed. Tailwind handles responsive layout. */

  /* === Batch toolbar: handled by Tailwind now === */

  /* === Modals: bottom-sheet style === */
  .modal-overlay{padding:0;align-items:flex-end}
  .modal,.modal-sm,.modal-pets,.modal-pet-detail{width:100% !important;max-width:100% !important;max-height:80vh;border-radius:1.5rem 1.5rem 0 0;margin:0;animation:sheetUp .3s cubic-bezier(.22,1,.36,1);background:rgba(255,255,255,.97);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px)}
  @keyframes sheetUp{from{transform:translateY(100%)}to{transform:translateY(0)}}
  .modal::before{content:'';display:block;width:36px;height:4px;background:#ddd;border-radius:2px;margin:8px auto 0}
  .detail-info-top{flex-direction:column;align-items:center}
  .detail-ring-wrap{width:100px;height:100px}
  .detail-info-stats{width:100%}
  .modal-pet-detail{position:static !important;right:auto !important;top:auto !important;bottom:auto !important;animation:sheetUp .3s cubic-bezier(.22,1,.36,1) !important}
  .modal-body{max-height:calc(80vh - 60px);overflow-y:auto;-webkit-overflow-scrolling:touch}
  .modal-header{padding:14px 18px;font-size:15px;border-radius:1.5rem 1.5rem 0 0}

  /* === Class manager modal === */
  .modal-class-mgr{width:100% !important;max-width:100% !important;max-height:85vh;border-radius:1.5rem 1.5rem 0 0}
  .cmgr-header{padding:12px 14px}
  .cmgr-icon{width:32px;height:32px;font-size:16px;border-radius:8px}
  .cmgr-title{font-size:14px}
  .cmgr-subtitle{font-size:11px}
  .cmgr-body{flex-direction:column;max-height:calc(85vh - 70px);overflow-y:auto}
  .cmgr-left{width:100%;flex-shrink:0;border-right:none;border-bottom:1px solid #e5e7eb;max-height:160px;overflow-y:auto}
  .cmgr-right{flex:1;overflow-y:auto}
  .cmgr-student-grid{grid-template-columns:repeat(3,1fr);gap:8px;padding:10px 12px}
  .cmgr-right-header{flex-wrap:wrap;gap:6px;padding:10px 12px 8px}
  .cmgr-s-actions{opacity:1}
  .cmgr-s-name{font-size:11px}
  .cmgr-s-avatar{font-size:22px;margin-bottom:2px}
  .cmgr-add-btn{font-size:12px;padding:8px}
  .cmgr-btn-pink,.cmgr-btn-ghost{padding:6px 12px;font-size:12px}

  /* === Shop mobile === */
  .cat-btn{display:inline-block;width:auto;white-space:nowrap;flex-shrink:0;padding:8px 14px;border-radius:20px}

  /* === Settings === */
  .settings-layout{flex-direction:column;padding-bottom:64px}
  .settings-sidebar{width:100%}
  .settings-nav{display:flex;flex-wrap:wrap;gap:4px;padding:6px}
  .settings-nav-item{padding:8px 12px;font-size:13px;border-left:none;border-bottom:2px solid transparent;border-radius:8px}
  .settings-nav-item.active{border-left:none;border-bottom-color:#0EA5E9}
  .snav-icon{width:28px;height:28px;font-size:20px;border-radius:8px}
  .snav-desc{display:none}
  .snav-arrow{display:none}
  .settings-content{max-height:calc(100vh - 140px);overflow-y:auto;-webkit-overflow-scrolling:touch}
  .settings-panel{max-height:none;overflow-y:visible}
  .s-card{padding:14px 16px}
  .s-field-row{flex-wrap:wrap}
  .s-input{max-width:100%}
  .level-grid{grid-template-columns:repeat(3,1fr)}
  #petLevelGrid{grid-template-columns:repeat(3,1fr) !important;gap:8px !important}

  /* === Rank (legacy, new rank uses inline styles) === */

  /* === Charts === */
  .rank-charts-header{flex-direction:column;align-items:flex-start}
  .rank-chart-tabs{flex-wrap:wrap}
  .bar-label{width:48px;font-size:12px}
  .bar-value{width:40px;font-size:12px}
  .pie-chart-wrap{flex-direction:column;gap:16px}
  .trend-chart{height:160px;padding-left:30px}
  .trend-y-axis{font-size:10px;width:28px}
  .trend-bars{height:136px}

  /* === Message Wall === */
  .mw-board{padding:14px;gap:12px;border-radius:14px}
  .mw-note{width:100%;min-height:120px;padding:16px 14px 12px}
  .mw-note-content{font-size:15px}
  .mw-bottom-bar{padding:10px 12px;gap:8px;flex-wrap:wrap}
  .mw-colors{gap:6px}
  .mw-color-dot{width:28px;height:28px}
  .mw-input{padding:10px 14px;font-size:14px;min-width:0}
  .mw-author-input{width:70px;padding:10px;font-size:13px}
  .mw-send-btn{width:42px;height:42px;font-size:18px}
  .mw-back-link{font-size:13px}

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

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

  /* === Login: now pure Tailwind, no overrides needed === */

  /* === Toast === */
  .quick-toast{top:56px;font-size:13px;padding:10px 20px}

  /* === Confirm dialog === */
  .confirm-box{padding:22px 18px;border-radius:14px}
  .confirm-actions{flex-direction:column-reverse;gap:8px}
  .confirm-btn-cancel,.confirm-btn-ok{width:100%;padding:12px;font-size:14px}

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

  /* === More dropdown on mobile === */
  .more-dropdown{right:-8px;width:200px}
}

/* Extra small screens (<400px) */
@media(max-width:400px){
  .student-grid{gap:6px}
  .card-name{font-size:12px}
  #petLevelGrid{grid-template-columns:repeat(2,1fr) !important}
  .filter-tab{padding:5px 8px;font-size:11px}
  .cmgr-student-grid{grid-template-columns:repeat(2,1fr)}
}

/* ===== PET CARD ENHANCEMENTS ===== */
/* Pet float animation */
@keyframes petFloat{0%,to{transform:translateZ(0) scale(1)}50%{transform:translate3d(0,-4px,0) scale(1.015)}}
.card-pet-area .pet-emoji-big,.card-pet-area .pet-image-big{animation:petFloat 4.8s ease-in-out infinite}

/* Card gradient background - now applied via Tailwind inline style on inner div */

/* Level-based border glow - targets inner card div */
.student-card[data-level="1"]>div{border-color:rgba(200,200,200,.3)}
.student-card[data-level="2"]>div{border-color:rgba(100,200,100,.25)}
.student-card[data-level="3"]>div{border-color:rgba(80,180,220,.25)}
.student-card[data-level="4"]>div{border-color:rgba(100,130,255,.3)}
.student-card[data-level="5"]>div{border-color:rgba(139,92,246,.3)}
.student-card[data-level="6"]>div{border-color:rgba(200,80,200,.3)}
.student-card[data-level="7"]>div{border-color:rgba(255,140,0,.35);box-shadow:0 0 12px rgba(255,140,0,.1)}
.student-card[data-level="8"]>div{border-color:rgba(255,80,80,.35);box-shadow:0 0 14px rgba(255,80,80,.12)}
.student-card[data-level="9"]>div{border-color:rgba(255,180,0,.4);box-shadow:0 0 18px rgba(255,180,0,.15)}
.student-card[data-level="10"]>div{border-color:rgba(255,215,0,.5);box-shadow:0 0 24px rgba(255,215,0,.2),0 0 48px rgba(255,215,0,.08)}

/* Card hover/active effects */
.student-card:active{transform:scale(.97);transition:transform .1s}

/* Level badge semi-transparent */
.card-level-badge{background:rgba(232,245,233,.7);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}

/* Info icon: white circle, no border */
.card-info-icon{border:none;background:rgba(255,255,255,.8);box-shadow:0 1px 4px rgba(0,0,0,.08);color:#bbb}
.card-info-icon:hover{background:#fff;color:var(--pink);box-shadow:0 2px 8px rgba(244,63,94,.15)}

/* card-food-icon: removed, no longer used */

/* Group tag max 2 chars width */
.card-group-tag{max-width:56px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;display:inline-flex}

/* Button click animations */
.nav-icon-btn:active,.tool-icon-btn:active,.filter-tab:active,.btn-pink:active,.s-btn:active,.s-btn-primary:active,.btn-exchange:active,.cat-btn:active{transform:scale(.93);transition:transform .08s}
.rule-btn:active{transform:scale(.96);transition:transform .08s}

/* ===== 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:#f43f5e;background:#fff1f2}
.pet-level-preview:hover{border-color:#f43f5e !important}

/* ===== Pet Image in Student Card ===== */
/* Pet image sizing — let Tailwind h-12 w-12 control, just add object-fit */
.pet-image-big{object-fit:contain;flex-shrink:0}

/* ===== Loading Spinner ===== */
.loading-spinner{display:flex;align-items:center;justify-content:center;padding:40px;color:#f43f5e;font-size:14px;gap:8px}
.loading-spinner::before{content:'';width:20px;height:20px;border:3px solid #fecdd3;border-top-color:#f43f5e;border-radius:50%;animation:spin .8s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}

/* ===== Disabled Button ===== */
button:disabled,.btn-pink:disabled,.s-btn-primary:disabled,.btn-exchange:disabled{opacity:.5;cursor:not-allowed;pointer-events:none}

/* ===== Confirm Dialog Overlay ===== */
.confirm-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:10000}
.confirm-box{background:#fff;border-radius:16px;padding:28px 24px;max-width:340px;width:90%;text-align:center;box-shadow:0 8px 32px rgba(0,0,0,.15)}
.confirm-title{font-size:16px;font-weight:700;color:#333;margin-bottom:8px}
.confirm-msg{font-size:14px;color:#666;margin-bottom:20px;line-height:1.5}
.confirm-actions{display:flex;gap:10px;justify-content:center}
.confirm-btn-cancel{padding:10px 24px;border:1px solid #E5E7EB;background:#fff;border-radius:10px;color:#666;cursor:pointer;font-size:14px}
.confirm-btn-ok{padding:10px 24px;border:none;background:linear-gradient(135deg,#f43f5e,#fb7185);color:#fff;border-radius:10px;cursor:pointer;font-size:14px;font-weight:600}

/* ===== Rapid Mode Toggle ===== */
.rapid-toggle{width:32px;height:32px;border-radius:50%;border:2px solid rgba(255,255,255,.4);background:transparent;color:#fff;font-size:16px;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .2s}
.rapid-toggle:hover{background:rgba(255,255,255,.15)}
.rapid-toggle.active{background:#FFD700;color:#333;border-color:#FFD700;animation:rapidPulse 1s infinite}
@keyframes rapidPulse{0%,100%{box-shadow:0 0 0 0 rgba(255,215,0,.4)}50%{box-shadow:0 0 0 6px rgba(255,215,0,0)}}

/* ===== Target Site Animations (pixel-perfect from source-ref) ===== */
@keyframes shake{0%,to{transform:translate(0)}10%,30%,50%,70%,90%{transform:translate(-4px)}20%,40%,60%,80%{transform:translate(4px)}}
@keyframes breathing{0%,to{transform:scale(1)}50%{transform:scale(1.05)}}
@keyframes popIn{0%{opacity:0;transform:scale(.8)}50%{transform:scale(1.05)}to{opacity:1;transform:scale(1)}}
@keyframes scoreBurstCore{0%{opacity:0;transform:scale(.45)}20%{opacity:1}to{opacity:0;transform:scale(1.5)}}
@keyframes scoreBurstHalo{0%{opacity:0;transform:scale(.72);filter:blur(8px)}18%{opacity:.9}to{opacity:0;transform:scale(1.18);filter:blur(22px)}}
@keyframes scoreBurstRing{0%{opacity:.95;transform:scale(.82)}to{opacity:0;transform:scale(1.2)}}
@keyframes scoreBurstBorder{0%{opacity:0;transform:scale(.94)}24%{opacity:1}to{opacity:0;transform:scale(1.08)}}
@keyframes scoreBurstEmoji{0%{opacity:0;transform:translate(-50%,-50%) scale(.3) rotate(0)}18%{opacity:1}78%{opacity:1}to{opacity:0;transform:translate(calc(-50% + var(--tx,0px)),calc(-50% + var(--ty,-120px))) scale(1.15) rotate(var(--rotate,18deg))}}
@keyframes goldPulse{0%,to{box-shadow:0 0 20px 4px #fbbf2466}50%{box-shadow:0 0 40px 8px #fbbf2499}}
@keyframes shockwave{0%{transform:scale(1);opacity:1}to{transform:scale(1.5);opacity:0}}
@keyframes shine{to{left:125%}}
@keyframes petIdle{0%,to{transform:translateZ(0) scale(1)}50%{transform:translate3d(0,-4px,0) scale(1.015)}}
@keyframes petLevelUp{0%{transform:scale(.8);filter:brightness(1) drop-shadow(0 0 0 rgba(251,191,36,0))}50%{transform:scale(1.15) translateY(-5px);filter:brightness(1.2) drop-shadow(0 0 25px rgba(251,191,36,.8))}to{transform:scale(1) translateY(0);filter:brightness(1) drop-shadow(0 0 15px rgba(251,191,36,.4))}}
@keyframes floatUp{0%{opacity:0;transform:translateY(20px)}50%{opacity:1}to{opacity:0;transform:translateY(-40px)}}
@keyframes floatUpFade{0%{opacity:0;transform:translateY(10px) scale(.5)}20%{opacity:1;transform:translateY(-10px) scale(1.2)}80%{opacity:1;transform:translateY(-40px) scale(1)}to{opacity:0;transform:translateY(-60px) scale(.8)}}
@keyframes floatHover{0%,to{transform:translateY(0) scale(1)}50%{transform:translateY(-8px) scale(1.05)}}
@keyframes confettiBounce{0%{opacity:1;transform:translateY(0) rotate(0) scale(0)}30%{opacity:1;transform:translateY(-80px) rotate(45deg) scale(1.2)}60%{opacity:1;transform:translateY(-40px) rotate(90deg) scale(1)}to{opacity:0;transform:translateY(20px) rotate(180deg) scale(.8)}}

/* ===== Skeleton Loading ===== */
/* Now using Tailwind animate-pulse, no custom skeleton CSS needed */
.skeleton-hide{opacity:0;animation:fadeInContent .4s ease forwards}
@keyframes fadeInContent{to{opacity:1}}

/* Float out up - score float animation */
@keyframes floatOutUp{0%{opacity:1;transform:translate(-50%,-50%) translateY(0)}to{opacity:0;transform:translate(-50%,-50%) translateY(-80px)}}
/* Spin slow - decorative rotation */
@keyframes spinSlow{0%{transform:rotate(0)}to{transform:rotate(360deg)}}

} /* end @layer components */