/* สไตล์เดิมทั้งหมด นำมาใส่ย่อๆ หรืออ้างอิงจากของเดิมได้เลย */
    * { box-sizing: border-box; }
    body { margin: 0; font-family: Arial, sans-serif; background: linear-gradient(180deg, #f8fafc 0%, #eef2ff 100%); color: #1f2937; }
    .container { max-width: 1100px; margin: 0 auto; padding: 24px 16px 40px; }
    .main-card { background: #fff; border-radius: 22px; box-shadow: 0 10px 30px rgba(0,0,0,0.08); padding: 22px; margin-bottom: 18px; transition: transform 0.2s ease, box-shadow 0.2s ease; }
    .main-card:hover { transform: translateY(-6px); box-shadow: 0 18px 45px rgba(0,0,0,0.15); }
    .main-header { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 8px; }
    .title { font-size: 30px; font-weight: 800; color: #4338ca; margin: 0; text-align: center; flex: none; padding: 0 12px; }
    .header-spacer { flex: 1; display: flex; align-items: center; justify-content: flex-start; }
    .header-actions { flex: 1; display: flex; align-items: center; justify-content: flex-end; gap: 8px; }
    .icon-btn { display: flex; align-items: center; justify-content: center; gap: 6px; border: none; border-radius: 14px; padding: 10px 12px; cursor: pointer; font-size: 14px; font-weight: 800; transition: transform 0.2s ease, box-shadow 0.2s ease, filter 0.2s ease; }
    .icon-btn:hover { transform: translateY(-2px); box-shadow: 0 4px 12px rgba(0,0,0,0.15); filter: brightness(1.05); }
    .icon-btn:disabled { background: #e5e7eb !important; color: #6b7280 !important; cursor: not-allowed; box-shadow: none !important; transform: none !important; filter: none !important; }
    .top-logout-btn { background: #ef4444; color: #fff; }
    .search-wrap { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; justify-content: center; }
    .search-input, .overlay-input, .overlay-textarea { width: 100%; padding: 13px 14px; border: 1px solid #d1d5db; border-radius: 14px; font-size: 16px; outline: none; }
    .search-input { flex: 1; min-width: 240px; max-width: 420px; font-size: 18px; padding: 14px 16px; }
    .search-btn, .primary-btn, .secondary-btn, .danger-btn, .mode-btn, .refresh-btn, .assignment-btn, .action-btn { border: none; border-radius: 14px; font-weight: 700; cursor: pointer; transition: transform 0.2s ease, box-shadow 0.2s ease, filter 0.2s ease; }
    .search-btn:hover, .primary-btn:hover, .secondary-btn:hover, .danger-btn:hover, .mode-btn:hover, .refresh-btn:hover, .assignment-btn:hover, .action-btn:hover { transform: translateY(-3px); box-shadow: 0 8px 20px rgba(0,0,0,0.15); filter: brightness(1.05); }
    .search-btn { background: #4f46e5; color: #fff; padding: 14px 20px; font-size: 16px; }
    .forgot-wrap { text-align: center; margin-top: 12px; }
    .forgot-link { background: none; border: none; color: #4f46e5; font-size: 15px; font-weight: 700; cursor: pointer; text-decoration: underline; padding: 4px 8px; }
    .loading-text, .assignment-loading { text-align: center; color: #6b7280; display: flex; gap: 10px; align-items: center; justify-content: center; }
    .message { text-align: center; margin-top: 12px; color: #dc2626; font-weight: 700; }
    .hidden { display: none !important; }
    .spinner-inline, .spinner { border-radius: 50%; animation: spin 0.8s linear infinite; display: inline-block; }
    .spinner-inline { width: 18px; height: 18px; border: 3px solid rgba(99,102,241,0.18); border-top-color: #4f46e5; flex: 0 0 auto; }
    .spinner { width: 16px; height: 16px; border: 2.5px solid rgba(255,255,255,0.45); border-top-color: currentColor; position: relative; z-index: 2; }

    /* --- Modified Top Cards & Stats --- */
    .top-cards { margin-bottom: 18px; }

    .student-card { background: linear-gradient(135deg, #4f46e5, #7c3aed); color: #fff; border-radius: 24px; padding: 22px; box-shadow: 0 12px 30px rgba(79,70,229,0.22); min-height: 128px; display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; transition: transform 0.25s ease, box-shadow 0.25s ease; }
    .student-card:hover { transform: translateY(-8px) scale(1.01); box-shadow: 0 22px 50px rgba(79,70,229,0.45); }

    .student-name { font-size: 28px; font-weight: 800; margin-bottom: 8px; line-height: 1.2; }
    .student-meta { font-size: 15px; opacity: 0.95; line-height: 1.7; }
    .student-card-right { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
    .mode-btn { background: #facc15; color: #111827; padding: 12px 18px; font-size: 15px; font-weight: 800; white-space: nowrap; }
    .refresh-btn { background: #facc15; color: #111827; }
    .mode-btn:disabled, .assignment-btn-gray, .btn-gray { background: #e5e7eb; color: #6b7280; cursor: not-allowed; box-shadow: none; }
    .mode-btn:disabled:hover, .assignment-btn-gray:hover, .btn-gray:hover { transform: none; box-shadow: none; filter: none; }
    .stat-card { background: #fff; border-radius: 24px; padding: 22px; box-shadow: 0 10px 24px rgba(0,0,0,0.08); min-height: 128px; display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; transition: transform 0.2s ease, box-shadow 0.2s ease; }
    .stat-card:hover { transform: translateY(-8px) scale(1.02); box-shadow: 0 20px 40px rgba(0,0,0,0.15); }
    .stat-label { font-size: 15px; color: #6b7280; margin-bottom: 8px; font-weight: 700; }
    .stat-value { font-size: 34px; font-weight: 900; line-height: 1.15; word-break: break-word; }
    .stat-green { color: #16a34a; } .stat-red { color: #dc2626; } .stat-blue { color: #2563eb; } .stat-amber { color: #d97706; }

    /* --- New: Coins Stat Card Special Styling --- */
    .stat-card-coin { background: linear-gradient(135deg, #fff, #fefce8); border: 2px solid #fef08a; }
    .stat-coin-label { color: #b45309 !important; }
    .stat-coin-value { color: #d97706; font-size: 38px; font-weight: 900; display: flex; align-items: center; justify-content: center; gap: 6px; }
    .coin-icon-static { font-size: 28px; text-shadow: 0 2px 4px rgba(217, 119, 6, 0.2); }

    .weeks-grid, .assignment-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 16px; }
    .week-card, .assignment-card, .empty-card { background: #fff; border-radius: 20px; box-shadow: 0 8px 22px rgba(0,0,0,0.07); border: 1px solid #eef2f7; transition: transform 0.2s ease, box-shadow 0.2s ease; }
    .week-card:hover, .assignment-card:hover { transform: translateY(-8px); box-shadow: 0 18px 35px rgba(0,0,0,0.15); border-color: #9ca3af; }
    .week-card, .assignment-card { padding: 18px; }
    .assignment-card { position: relative; padding-top: 46px; }
    .empty-card { grid-column: 1 / -1; padding: 24px; text-align: center; color: #6b7280; }
    .week-title, .assignment-title { font-size: 20px; font-weight: 800; color: #111827; margin-bottom: 10px; line-height: 1.35; }
    .assignment-desc { font-size: 14px; color: #6b7280; min-height: 40px; line-height: 1.5; margin-bottom: 12px; }
    .assignment-score-box { display: flex; align-items: center; justify-content: center; padding: 12px; border-radius: 12px; margin-bottom: 16px; transition: transform 0.2s ease; }
    .assignment-score-box:hover { transform: scale(1.02); }
    .has-score { background: linear-gradient(135deg, #dcfce7, #bbf7d0); border: 1px solid #86efac; color: #166534; box-shadow: 0 4px 12px rgba(22, 163, 74, 0.15); }
    .no-score { background: #f3f4f6; border: 1px solid #e5e7eb; color: #6b7280; }
    .has-score .score-value { font-size: 22px; font-weight: 900; color: #15803d; text-shadow: 0 1px 2px rgba(0,0,0,0.05); }
    .no-score .score-value { font-size: 16px; font-weight: 700; color: #9ca3af; }
    .assignment-status-badge { position: absolute; top: 14px; right: 14px; font-size: 12px; font-weight: 800; padding: 6px 10px; border-radius: 999px; }
    .status-red { background: #fee2e2; color: #dc2626; } .status-green { background: #dcfce7; color: #16a34a; } .status-blue { background: #dbeafe; color: #2563eb; }
    .btn-row { display: flex; gap: 10px; align-items: stretch; }
    .btn-group { flex: 1; min-width: 0; }
    .btn-label { font-size: 13px; font-weight: 700; color: #6b7280; margin-bottom: 6px; text-align: center; }
    .action-btn { width: 100%; padding: 13px 12px; font-size: 14px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; position: relative; overflow: hidden; min-height: 48px; }
    .btn-yellow { background: #facc15; color: #111827; animation: blinkYellowGray 1s infinite; }
    .btn-green { background: #22c55e; color: #fff; } .btn-red { background: #ef4444; color: #fff; }
    .btn-loading { pointer-events: none; opacity: 0.92; }
    .lock-overlay { position: absolute; left: 10px; top: 50%; transform: translateY(-50%); font-size: 22px; font-weight: 900; color: rgba(55, 65, 81, 0.9); z-index: 3; pointer-events: none; line-height: 1; }
    .btn-lock-text { opacity: 0.38; } .btn-text, .btn-icon { position: relative; z-index: 1; }
    .assignment-btn { width: 100%; flex: 1; min-width: 0; border: none; border-radius: 14px; padding: 13px 12px; font-size: 15px; font-weight: 800; cursor: pointer; }
    .assignment-btn-yellow { background: #facc15; color: #111827; box-shadow: 0 8px 18px rgba(250, 204, 21, 0.25); }
    .assignment-btn-blue { background: #2563eb; color: #fff; } .assignment-btn-red { background: #ef4444; color: #fff; } .assignment-btn-green { background: #22c55e; color: #fff; }
    .overlay, .progress-overlay { position: fixed; inset: 0; display: flex; align-items: center; justify-content: center; padding: 16px; }
    .overlay { background: rgba(15, 23, 42, 0.55); z-index: 9999; }
    .progress-overlay { background: rgba(15, 23, 42, 0.72); z-index: 20000; }
    .overlay-card, .progress-card { width: 100%; background: #fff; border-radius: 24px; box-shadow: 0 20px 50px rgba(0,0,0,0.25); }
    .overlay-card { max-width: 680px; padding: 22px; max-height: 92vh; overflow: auto; }
    .progress-card { max-width: 520px; padding: 24px; text-align: center; }
    .overlay-title, .progress-title { font-size: 24px; font-weight: 800; color: #4338ca; text-align: center; }
    .overlay-title { margin: 0 0 16px; } .progress-title { margin-bottom: 10px; }
    .overlay-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
    .overlay-grid .full { grid-column: 1 / -1; }
    .overlay-textarea { min-height: 220px; resize: vertical; font-family: inherit; line-height: 1.6; }
    .overlay-actions { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; margin-top: 16px; }
    .secondary-btn { background: #e5e7eb; color: #374151; padding: 12px 18px; font-size: 15px; }
    .primary-btn { background: #4f46e5; color: #fff; padding: 12px 18px; font-size: 15px; }
    .danger-btn { background: #ef4444; color: #fff; padding: 12px 18px; font-size: 15px; }
    .overlay-message { text-align: center; margin-top: 12px; font-weight: 700; color: #dc2626; white-space: pre-line; }
    .overlay-result-box { background: #eef2ff; border: 1px solid #c7d2fe; border-radius: 18px; padding: 16px; margin-top: 14px; color: #1f2937; line-height: 1.8; font-size: 16px; text-align: center; }
    .submission-meta { background: #f8fafc; border-radius: 16px; padding: 14px; margin-bottom: 14px; line-height: 1.7; color: #374151; font-size: 15px; }
    .submission-meta strong { color: #111827; }
    .comment-box { margin-top: 12px; background: #eff6ff; border: 1px solid #bfdbfe; color: #1e3a8a; border-radius: 14px; padding: 14px; display: flex; gap: 12px; align-items: flex-start; }
    .teacher-icon { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; flex-shrink: 0; border: 2px solid #93c5fd; background: #fff; box-shadow: 0 2px 6px rgba(0,0,0,0.05); }
    .comment-content { flex: 1; display: flex; flex-direction: column; }
    .comment-author { font-weight: 800; color: #1d4ed8; margin-bottom: 4px; font-size: 15px; }
    .comment-text { white-space: pre-wrap; line-height: 1.5; font-size: 14px; }
    .submission-content { margin-top: 8px; white-space: pre-wrap; word-break: break-word; }
    .submission-content a { color: #2563eb; text-decoration: underline; word-break: break-all; }
    .progress-text { color: #6b7280; font-size: 15px; margin-bottom: 16px; }
    .progress-track { width: 100%; height: 16px; background: #e5e7eb; border-radius: 999px; overflow: hidden; }
    .progress-bar { height: 100%; width: 0%; background: linear-gradient(90deg, #4f46e5, #7c3aed); transition: width 0.15s linear; }
    .progress-percent { margin-top: 10px; font-size: 18px; font-weight: 800; color: #111827; }
    @keyframes spin { to { transform: rotate(360deg); } }
    @keyframes blinkYellowGray { 0% { background: #facc15; color: #111827; } 50% { background: #e5e7eb; color: #4b5563; } 100% { background: #facc15; color: #111827; } }
    @keyframes cardFadeUp { from { opacity: 0; transform: translateY(18px) scale(0.98); } to { opacity: 1; transform: translateY(0) scale(1); } }
    .card-animate { animation: cardFadeUp 0.45s ease both; }

    /* --- New Section: Mystery Box Gameplay --- */
    .mystery-box-section { margin-bottom: 24px; background: #fff; border-radius: 24px; padding: 20px; box-shadow: 0 10px 30px rgba(0,0,0,0.06); border: 1px solid #f1f5f9; }
    .mystery-title-row { display: flex; align-items: center; gap: 10px; margin-bottom: 16px; }
    .mystery-title { font-size: 18px; font-weight: 800; color: #1e293b; }
    .mystery-desc { font-size: 14px; color: #64748b; font-weight: 500; }
    .box-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
    
    .box-item { background: #f8fafc; border: 2px dashed #cbd5e1; border-radius: 20px; padding: 16px; display: flex; flex-direction: column; align-items: center; text-align: center; cursor: pointer; transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275); position: relative; overflow: hidden; }
    .box-item.available { background: linear-gradient(135deg, #fffbeb, #fef3c7); border: 2px solid #fbbf24; box-shadow: 0 4px 15px rgba(251, 191, 36, 0.15); }
    .box-item.available:hover { transform: translateY(-5px) scale(1.02); box-shadow: 0 12px 25px rgba(251, 191, 36, 0.3); border-color: #f59e0b; }
    .box-item.available:active { transform: scale(0.97); }
    .box-item.locked { opacity: 0.75; cursor: not-allowed; background: #f1f5f9; border-style: solid; border-color: #e2e8f0; }
    
    .box-icon { font-size: 42px; margin-bottom: 8px; transition: transform 0.3s ease; filter: drop-shadow(0 4px 6px rgba(0,0,0,0.1)); }
    .box-item.available:hover .box-icon { transform: rotate(-10deg) scale(1.1); animation: tiltShake 0.5s infinite alternate ease-in-out; }
    
    .box-status { font-size: 14px; font-weight: 800; }
    .box-item.available .box-status { color: #d97706; }
    .box-item.locked .box-status { color: #64748b; }
    
    .box-timer { font-size: 12px; color: #94a3b8; font-weight: 600; margin-top: 4px; display: flex; align-items: center; gap: 4px; }
    
    @keyframes tiltShake {
      0% { transform: rotate(-5deg) scale(1.1); }
      100% { transform: rotate(5deg) scale(1.1); }
    }
    
    /* Overlay Burst Reward Animation */
    .reward-burst { position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%) scale(0.5); background: rgba(255,255,255,0.96); backdrop-filter: blur(10px); padding: 40px; border-radius: 30px; box-shadow: 0 20px 60px rgba(0,0,0,0.35); text-align: center; z-index: 30000; opacity: 0; pointer-events: none; transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1); border: 4px solid #fbbf24; min-width: 300px; }
    .reward-burst.active { opacity: 1; transform: translate(-50%, -50%) scale(1); pointer-events: auto; }
    .reward-title { font-size: 24px; font-weight: 800; color: #1e293b; margin-bottom: 10px; }
    .reward-coins { font-size: 72px; font-weight: 900; color: #d97706; text-shadow: 0 4px 12px rgba(217, 119, 6, 0.25); display: flex; align-items: center; justify-content: center; gap: 12px; margin-bottom: 25px; animation: popZoom 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards; }
    @keyframes popZoom {
      0% { transform: scale(0); }
      70% { transform: scale(1.2); }
      100% { transform: scale(1); }
    }
    .reward-btn { background: #facc15; border: none; border-radius: 14px; padding: 14px 35px; font-weight: 800; font-size: 18px; cursor: pointer; box-shadow: 0 5px 15px rgba(250, 204, 21, 0.4); color: #111827; transition: all 0.2s ease; }
    .reward-btn:hover { transform: scale(1.05); background: #fbbf24; }

    /* --- Media Queries Restored & Extended --- */
    @media (max-width: 600px) {
      .main-header { justify-content: space-between; align-items: flex-start; gap: 8px; }
      .header-spacer { display: none; }
      .title { font-size: 19px; text-align: left; flex: 1; padding: 0; line-height: 1.4; }
      .header-actions { flex: none; justify-content: flex-end; }
      .icon-btn { padding: 8px; }
      .icon-btn svg { width: 18px; height: 18px; }
      .student-card { padding: 18px 14px; gap: 12px; }
      .student-name { font-size: 22px; }
      .student-card-right { width: 100%; display: flex; gap: 8px; }
      .mode-btn { flex: 1; padding: 10px 4px; font-size: 13px; text-align: center; }
      .search-input { min-width: 100%; }
      .main-card { padding: 16px; }
      .stat-value { font-size: 26px; }
      
      /* Small screens box sizing */
      .box-grid { grid-template-columns: 1fr; }
      .mystery-box-section { padding: 16px; }
      .box-icon { font-size: 36px; }
    }

    /* ========================================
       AVATAR & SHOP DESIGN SYSTEM
       ======================================== */
    
    /* Avatar Frame in Student Card */
    .student-profile-wrap { display: flex; align-items: center; gap: 18px; }
    
    .avatar-display {
      width: 76px;
      height: 76px;
      border-radius: 50%;
      background: rgba(255, 255, 255, 0.15);
      border: 3px solid rgba(255, 255, 255, 0.6);
      box-shadow: 0 8px 16px rgba(0,0,0,0.15), 0 0 0 4px rgba(255,255,255,0.1);
      overflow: hidden;
      position: relative;
      cursor: pointer;
      transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
      flex-shrink: 0;
    }
    
    .avatar-display:hover {
      transform: scale(1.1) rotate(3deg);
      box-shadow: 0 12px 24px rgba(0,0,0,0.2), 0 0 0 6px rgba(255,255,255,0.2);
    }
    
    .avatar-display::after {
      content: '✎ เปลี่ยน';
      position: absolute;
      bottom: 0; left: 0; right: 0;
      background: rgba(0,0,0,0.6);
      color: #fff;
      font-size: 10px;
      text-align: center;
      padding: 2px 0;
      opacity: 0;
      transition: opacity 0.2s;
    }
    .avatar-display:hover::after { opacity: 1; }
    
    .avatar-img {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }

    /* Store Sections (Inside mysterySection wrapper) */
    .store-title-row {
      margin-top: 28px;
      padding-top: 18px;
      border-top: 1px dashed #e5e7eb;
      display: flex;
      align-items: center;
      gap: 12px;
      margin-bottom: 16px;
    }
    
    .avatar-shop-grid {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
      gap: 20px;
    }
    
    .shop-item-card {
      background: #ffffff;
      border: 1px solid #f3f4f6;
      border-radius: 20px;
      padding: 16px;
      text-align: center;
      box-shadow: 0 4px 6px rgba(0,0,0,0.03);
      transition: all 0.3s ease;
      position: relative;
      overflow: hidden;
    }
    
    .shop-item-card:hover {
      transform: translateY(-5px);
      box-shadow: 0 12px 20px rgba(0,0,0,0.08);
      border-color: #e5e7eb;
    }
    
    .shop-item-img-wrap {
      width: 100px;
      height: 100px;
      margin: 0 auto 12px auto;
      border-radius: 50%;
      overflow: hidden;
      background: #f9fafb;
      border: 2px solid #f3f4f6;
    }
    
    .shop-item-img {
      width: 100%; height: 100%; object-fit: cover;
    }
    
    .shop-item-name {
      font-weight: 700;
      color: #1f2937;
      font-size: 14px;
      margin-bottom: 6px;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
    
    .shop-item-price {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 4px;
      background: #fffbeb;
      color: #d97706;
      font-weight: 800;
      font-size: 14px;
      padding: 4px 10px;
      border-radius: 20px;
      margin-bottom: 12px;
      border: 1px solid #fef3c7;
    }
    
    .btn-buy {
      width: 100%;
      padding: 8px;
      border: none;
      border-radius: 12px;
      font-weight: 700;
      font-size: 13px;
      cursor: pointer;
      transition: background 0.2s;
    }
    
    .btn-buy.available { background: #4f46e5; color: white; }
    .btn-buy.available:hover { background: #4338ca; }
    .btn-buy.owned { background: #f3f4f6; color: #9ca3af; cursor: default; }
    
    /* Inventory Selection Pop-up (Redesigned for Leveling system) */
    .inv-grid {
      display: flex;
      flex-direction: column;
      gap: 12px;
      max-height: 400px;
      overflow-y: auto;
      padding: 4px 8px 4px 4px;
    }
    
    /* Row Card representing one owned character path */
    .inv-row {
      background: #ffffff;
      border: 1.5px solid #f1f5f9;
      border-radius: 24px;
      padding: 12px;
      display: flex;
      align-items: center;
      gap: 16px;
      transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
      position: relative;
      box-shadow: 0 2px 6px rgba(0,0,0,0.02);
    }
    
    .inv-row.active {
      border-color: #6366f1;
      background: #fcfcff;
      box-shadow: 0 8px 20px rgba(99,102,241,0.08);
    }
    
    .inv-visual {
      position: relative;
      flex-shrink: 0;
      width: 72px; height: 72px;
    }
    
    .inv-thumb {
      width: 100%; height: 100%;
      border-radius: 50%;
      object-fit: cover;
      border: 3px solid #fff;
      box-shadow: 0 4px 12px rgba(0,0,0,0.12);
      transition: transform 0.3s ease;
    }
    
    .inv-row.active .inv-thumb {
      border-color: #6366f1;
    }

    .inv-info {
      flex-grow: 1;
      display: flex;
      flex-direction: column;
      gap: 4px;
      min-width: 0; /* allow truncate */
    }
    
    .inv-name-row {
      font-weight: 800;
      color: #1e293b;
      font-size: 15px;
      display: flex;
      align-items: center;
      gap: 8px;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
    
    .inv-lvl-badge {
      background: #ede9fe;
      color: #7c3aed;
      font-size: 11px;
      padding: 2px 10px;
      border-radius: 20px;
      font-weight: 900;
      letter-spacing: 0.5px;
      box-shadow: inset 0 1px 2px rgba(0,0,0,0.05);
    }
    
    .inv-meta-sub {
      font-size: 12px;
      color: #64748b;
      font-weight: 500;
    }
    
    .inv-action-stack {
      display: flex;
      flex-direction: column;
      gap: 8px;
      flex-shrink: 0;
      align-items: flex-end;
    }
    
    .btn-upgrade {
      background: linear-gradient(135deg, #fcd34d, #f59e0b);
      color: #78350f;
      border: none;
      border-radius: 16px;
      padding: 6px 14px;
      font-size: 12px;
      font-weight: 800;
      cursor: pointer;
      box-shadow: 0 4px 10px rgba(245, 158, 11, 0.25);
      transition: all 0.2s;
      display: flex;
      align-items: center;
      gap: 4px;
      white-space: nowrap;
    }
    
    .btn-upgrade:hover:not(:disabled) {
      transform: translateY(-2px) scale(1.03);
      box-shadow: 0 6px 15px rgba(245, 158, 11, 0.4);
    }
    
    .btn-upgrade:disabled {
      background: #f1f5f9;
      color: #94a3b8;
      box-shadow: none;
      cursor: not-allowed;
    }
    
    .btn-equip {
      background: #f1f5f9;
      color: #475569;
      border: none;
      border-radius: 12px;
      padding: 5px 12px;
      font-size: 11px;
      font-weight: 700;
      cursor: pointer;
      transition: 0.2s;
      min-width: 64px;
      text-align: center;
    }
    .btn-equip:hover:not(.is-active) { background: #e2e8f0; color: #1e293b; }
    .btn-equip.is-active {
      background: #eef2ff;
      color: #4f46e5;
      font-weight: 800;
      cursor: default;
    }
    
    /* Fine Tune overlay for perfect floating centered modals matching Loading state */
    #inventoryOverlay .overlay-card {
      border-radius: 32px;
      padding: 24px;
      background: rgba(255, 255, 255, 0.97);
      backdrop-filter: blur(12px);
      border: 1px solid rgba(255, 255, 255, 0.8);
      box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
      animation: modalPopUp 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
    }
    
    @keyframes modalPopUp {
      0% { opacity: 0; transform: scale(0.9) translateY(20px); }
      100% { opacity: 1; transform: scale(1) translateY(0); }
    }
    @keyframes walletPop {
      0% { opacity: 0; transform: scale(0.8) translateY(10px); }
      100% { opacity: 1; transform: scale(1) translateY(0); }
    }
    
    @media (max-width: 600px) {
      .student-profile-wrap { flex-direction: column; align-items: flex-start; text-align: left; gap: 12px;}
      .avatar-display { width: 64px; height: 64px; }
      .avatar-shop-grid { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 12px; }
      .inv-row { flex-wrap: wrap; }
      .inv-action-stack { width: 100%; flex-direction: row; align-items: center; justify-content: space-between; margin-top: 4px; border-top: 1px solid #f1f5f9; padding-top: 8px; }
    }

    .preview-lg-img {
      width: 260px; height: 260px;
      border-radius: 50%;
      object-fit: cover;
      border: 6px solid #fff;
      box-shadow: 0 12px 32px rgba(0,0,0,0.2);
      margin-bottom: 20px;
    }
    .btn-grid-action {
      width: 100%; margin-top: 6px;
      display: flex; flex-direction: column; gap: 6px;
    }

    /* ======= ARENA BATTLE STYLES ======= */
    .arena-container { animation: modalPopUp 0.4s ease-out forwards; width:100%; max-width:600px; margin:0 auto; }
    .arena-hero-card { background: linear-gradient(135deg, #1e1b4b 0%, #4338ca 100%); border-radius: 24px; padding: 40px 20px; color: white; text-align: center; box-shadow: 0 20px 40px rgba(67, 56, 202, 0.3); position: relative; overflow: hidden; }
    .arena-hero-card::before { content: ''; position: absolute; top: -50%; left: -50%; width: 200%; height: 200%; background: radial-gradient(circle, rgba(255,255,255,0.1) 0%, transparent 60%); pointer-events: none; }
    
    .arena-btn-main { background: #facc15; color: #1e1b4b; border: none; padding: 16px 40px; border-radius: 50px; font-size: 1.3rem; font-weight: 900; cursor: pointer; box-shadow: 0 8px 0 #ca8a04; transition: all 0.1s; margin-top: 20px; }
    .arena-btn-main:active:not(:disabled) { transform: translateY(4px); box-shadow: 0 4px 0 #ca8a04; }
    .arena-btn-main:disabled { background: #6b7280; box-shadow: none; color: #9ca3af; cursor: not-allowed; opacity: 0.8; }

    .matchmaking-grid { display: grid; grid-template-columns: 1fr; gap: 16px; margin-top: 20px; animation: modalPopUp 0.3s ease; }
    .enemy-card { background: white; border: 2px solid #e5e7eb; border-radius: 20px; padding: 16px; display: flex; align-items: center; justify-content: space-between; box-shadow: 0 4px 12px rgba(0,0,0,0.05); transition: all 0.2s; }
    .enemy-card:hover { transform: translateY(-2px); border-color: #ef4444; box-shadow: 0 10px 20px rgba(239, 68, 68, 0.15); }
    .enemy-img { width: 64px; height: 64px; border-radius: 50%; border: 3px solid #f3f4f6; object-fit: cover; }
    .btn-fight { background: linear-gradient(to bottom, #ef4444, #b91c1c); color: white; border: none; border-radius: 12px; padding: 12px 20px; font-weight: 800; cursor: pointer; box-shadow: 0 4px 10px rgba(185, 28, 28, 0.3); }

    .battle-stage { display: flex; flex-direction: column; gap: 12px; animation: modalPopUp 0.3s ease; max-width: 450px; margin: 0 auto;}
    .fighter-zone { background: white; border-radius: 24px; padding: 16px; display: flex; align-items: center; gap: 12px; position: relative; box-shadow: 0 10px 25px rgba(0,0,0,0.05); }
    .fighter-zone.enemy { border-bottom: 5px solid #ef4444; }
    .fighter-zone.player { border-top: 5px solid #10b981; flex-direction: row-reverse; text-align: right; }
    
    .hp-bar-container { flex: 1; height: 18px; background: #e5e7eb; border-radius: 10px; overflow: hidden; position: relative; border: 2px solid #fff; box-shadow: inset 0 2px 4px rgba(0,0,0,0.1); }
    .hp-bar-fill { height: 100%; background: linear-gradient(to right, #10b981, #34d399); width: 100%; transition: width 0.5s cubic-bezier(0.4, 0, 0.2, 1); }
    .fighter-zone.enemy .hp-bar-fill { background: linear-gradient(to right, #f87171, #ef4444); }
    .hp-text { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); font-size: 10px; font-weight: 900; color: #374151; text-shadow: 0 0 2px #fff; }

    .skill-slots-row { display: flex; justify-content: center; gap: 6px; margin: 16px 0; }
    .skill-slot { width: 54px; height: 54px; border: 2px dashed #cbd5e1; border-radius: 16px; display: flex; align-items: center; justify-content: center; font-size: 1.8rem; background: #f8fafc; cursor: pointer; transition: all 0.2s; position: relative; box-shadow: inset 0 2px 5px rgba(0,0,0,0.05);}
    .skill-slot::after { content: attr(data-round); position: absolute; bottom: -6px; right: -6px; background: #64748b; color: white; font-size: 9px; border-radius: 50%; width: 16px; height: 16px; display: flex; align-items: center; justify-content: center; font-weight: bold; border: 2px solid white;}
    .skill-slot.filled { border-style: solid; border-color: #4f46e5; background: white; animation: popIn 0.25s cubic-bezier(0.175, 0.885, 0.32, 1.275); box-shadow: 0 4px 10px rgba(79, 70, 229, 0.2); }
    
    .skill-picker { display: flex; justify-content: center; gap: 12px; background: #f1f5f9; padding: 12px; border-radius: 40px; box-shadow: inset 0 2px 10px rgba(0,0,0,0.05); margin-top: 8px;}
    .skill-bubble { width: 76px; height: 76px; border-radius: 50%; display: flex; flex-direction: column; align-items: center; justify-content: center; font-size: 1.8rem; color: white; cursor: pointer; transition: transform 0.1s; border: 4px solid #fff; box-shadow: 0 6px 15px rgba(0,0,0,0.15); }
    .skill-bubble:active { transform: scale(0.85); }
    .skill-bubble .s-lbl { font-size: 0.6rem; margin-top: 2px; font-weight: 900; text-transform: uppercase; letter-spacing: 0.5px;}
    
    .sb-phys { background: linear-gradient(135deg, #f59e0b, #d97706); }
    .sb-mag { background: linear-gradient(135deg, #8b5cf6, #6d28d9); }
    .sb-def { background: linear-gradient(135deg, #3b82f6, #2563eb); }

    .vs-divider { text-align: center; font-size: 1.5rem; font-weight: 900; font-style: italic; color: #94a3b8; text-transform: uppercase; letter-spacing: 2px; margin: 4px 0; text-shadow: 0 2px 4px rgba(255,255,255,0.8);}

    .damage-popup { position: absolute; color: #ef4444; font-size: 2.2rem; font-weight: 900; z-index: 9999; animation: dmgUp 1.2s ease-out forwards; pointer-events: none; text-shadow: 2px 2px 0 #fff, -2px -2px 0 #fff, 2px -2px 0 #fff, -2px 2px 0 #fff;}
    @keyframes dmgUp { 0% { transform: translateY(0) scale(0.4); opacity: 0;} 10% { transform: scale(1.3); opacity: 1;} 50% { transform: translateY(-30px) scale(1); opacity: 1;} 100% { transform: translateY(-60px) scale(0.8); opacity: 0;} }
    
    .heal-popup { position: absolute; color: #10b981; font-size: 2.2rem; font-weight: 900; z-index: 9999; animation: dmgUp 1.2s ease-out forwards; pointer-events: none; text-shadow: 2px 2px 0 #fff, -2px -2px 0 #fff, 2px -2px 0 #fff, -2px 2px 0 #fff;}

    .shaking { animation: shakeIt 0.4s cubic-bezier(.36,.07,.19,.97) both; }
    @keyframes shakeIt { 10%, 90% { transform: translate3d(-1px, 0, 0); } 20%, 80% { transform: translate3d(2px, 0, 0); } 30%, 50%, 70% { transform: translate3d(-4px, 0, 0); } 40%, 60% { transform: translate3d(4px, 0, 0); } }
    
    .action-flash { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: white; border-radius: 24px; pointer-events: none; animation: flashWhite 0.3s ease-out forwards; opacity: 0; }
    @keyframes flashWhite { 0% { opacity: 0.6; } 100% { opacity: 0; } }
    
    @keyframes popIn { 0% { transform: scale(0.7); } 100% { transform: scale(1); } }