/* How to Play Tutorial Button & Modal Styles */
    .tutorial-btn {
      background: linear-gradient(135deg, rgba(255, 255, 255, 0.12), rgba(255, 255, 255, 0.05)) !important;
      border: 1px solid rgba(255, 255, 255, 0.25) !important;
      color: #ffffff !important;
      width: 32px !important;
      height: 32px !important;
      min-width: 32px !important;
      min-height: 32px !important;
      border-radius: 50% !important;
      font-size: 1.15rem !important;
      font-weight: 800 !important;
      cursor: pointer !important;
      display: inline-flex !important;
      align-items: center !important;
      justify-content: center !important;
      transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1) !important;
      backdrop-filter: blur(6px) !important;
      -webkit-backdrop-filter: blur(6px) !important;
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3), inset 0 0 8px rgba(255, 255, 255, 0.1) !important;
      padding: 0 !important;
      outline: none !important;
      line-height: 1 !important;
      user-select: none !important;
      vertical-align: middle !important;
    }
    .tutorial-btn:hover {
      background: linear-gradient(135deg, rgba(0, 240, 255, 0.3), rgba(112, 0, 255, 0.3)) !important;
      border-color: rgba(0, 240, 255, 0.6) !important;
      box-shadow: 0 0 18px rgba(0, 240, 255, 0.4), inset 0 0 10px rgba(0, 240, 255, 0.2) !important;
      transform: scale(1.1) !important;
      color: #00f0ff !important;
    }
    .tutorial-btn:active {
      transform: scale(0.95) !important;
    }
    .tutorial-modal {
      display: none;
      position: fixed !important;
      top: 0 !important;
      left: 0 !important;
      right: 0 !important;
      bottom: 0 !important;
      width: 100vw !important;
      height: 100vh !important;
      background: rgba(10, 8, 20, 0.85) !important;
      backdrop-filter: blur(10px) !important;
      -webkit-backdrop-filter: blur(10px) !important;
      z-index: 10010 !important;
      align-items: center !important;
      justify-content: center !important;
      padding: 20px !important;
      box-sizing: border-box !important;
    }
    .tutorial-modal.active {
      display: flex !important;
    }
    .tutorial-content-box {
      background: linear-gradient(180deg, #1a162d 0%, #100d1c 100%) !important;
      border: 1px solid rgba(255, 255, 255, 0.15) !important;
      border-radius: 20px !important;
      width: 90% !important;
      max-width: 850px !important;
      max-height: 85vh !important;
      overflow-y: auto !important;
      box-shadow: 0 25px 50px rgba(0,0,0,0.7), 0 0 30px rgba(112, 0, 255, 0.15) !important;
      position: relative !important;
      animation: detailEnter 0.3s cubic-bezier(0.16, 1, 0.3, 1) forwards !important;
    }
    .tutorial-header {
      padding: 20px 30px !important;
      border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
      display: flex !important;
      justify-content: space-between !important;
      align-items: center !important;
      position: sticky !important;
      top: 0 !important;
      background: rgba(26, 22, 45, 0.98) !important;
      backdrop-filter: blur(12px) !important;
      z-index: 10 !important;
      border-radius: 20px 20px 0 0 !important;
    }
    .tutorial-header h2 {
      margin: 0 !important;
      font-size: 1.5rem !important;
      background: linear-gradient(135deg, #e0c3fc 0%, #8ec5fc 100%) !important;
      -webkit-background-clip: text !important;
      -webkit-text-fill-color: transparent !important;
    }
    .tutorial-close {
      background: none !important;
      border: none !important;
      color: #6a687d !important;
      font-size: 2rem !important;
      line-height: 1 !important;
      cursor: pointer !important;
      transition: color 0.2s !important;
    }
    .tutorial-close:hover {
      color: #fff !important;
    }
    .tutorial-body {
      padding: 30px !important;
      color: #b5b4c9 !important;
      line-height: 1.6 !important;
    }
    .tutorial-section {
      margin-bottom: 25px !important;
      background: rgba(0, 0, 0, 0.2) !important;
      padding: 20px !important;
      border-radius: 12px !important;
      border: 1px solid rgba(255, 255, 255, 0.02) !important;
    }
    .tutorial-section h3 {
      color: #fff !important;
      margin-top: 0 !important;
      margin-bottom: 12px !important;
      font-size: 1.2rem !important;
      display: flex !important;
      align-items: center !important;
      gap: 10px !important;
    }
    .tutorial-section ul {
      margin: 0 !important;
      padding-left: 20px !important;
    }
    .tutorial-section li {
      margin-bottom: 8px !important;
    }
    .tutorial-section li:last-child {
      margin-bottom: 0 !important;
    }

    @keyframes raidPulse {
      0% { box-shadow: 0 0 0 0 rgba(255, 0, 122, 0.7); }
      70% { box-shadow: 0 0 0 10px rgba(255, 0, 122, 0); }
      100% { box-shadow: 0 0 0 0 rgba(255, 0, 122, 0); }
    }
    .pvp-card-picker-item:hover {
      border-color: #00f0ff !important;
      background: rgba(0, 240, 255, 0.08) !important;
    }

    /* Ultra-smooth 60fps GPU Accelerated Custom Scrollbars */
    .custom-scroll {
      -webkit-overflow-scrolling: touch;
      scrollbar-width: thin;
      scrollbar-color: rgba(255, 0, 122, 0.5) rgba(0, 0, 0, 0.4);
      will-change: transform;
      transform: translateZ(0);
    }
    .custom-scroll::-webkit-scrollbar {
      width: 6px;
      height: 6px;
    }
    .custom-scroll::-webkit-scrollbar-track {
      background: rgba(10, 5, 20, 0.6);
      border-radius: 10px;
    }
    .custom-scroll::-webkit-scrollbar-thumb {
      background: linear-gradient(180deg, #ff007a, #7000ff);
      border-radius: 10px;
    }
    .custom-scroll::-webkit-scrollbar-thumb:hover {
      background: #ff007a;
    }

    /* Load More Button */
    .load-more-btn {
      display: block;
      width: 100% !important;
      max-width: 280px !important;
      margin: 30px auto 10px auto !important;
      padding: 14px 28px !important;
      background: linear-gradient(135deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.05)) !important;
      border: 1px solid rgba(255, 255, 255, 0.2) !important;
      border-radius: 14px !important;
      color: #ffffff !important;
      font-family: 'Outfit', sans-serif !important;
      font-size: 1rem !important;
      font-weight: 800 !important;
      letter-spacing: 0.5px !important;
      cursor: pointer !important;
      transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1) !important;
      box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3) !important;
      backdrop-filter: blur(8px) !important;
      -webkit-backdrop-filter: blur(8px) !important;
      text-align: center !important;
      outline: none !important;
    }
    .load-more-btn:hover {
      background: linear-gradient(135deg, rgba(0, 240, 255, 0.25), rgba(112, 0, 255, 0.25)) !important;
      border-color: rgba(0, 240, 255, 0.6) !important;
      box-shadow: 0 0 25px rgba(0, 240, 255, 0.35) !important;
      transform: translateY(-2px) !important;
      color: #00f0ff !important;
    }
    .load-more-btn:active {
      transform: translateY(1px) !important;
    }

    /* Leaderboard Styles */
    .leaderboard-section {
      background: rgba(18, 14, 30, 0.7) !important;
      border: 1px solid rgba(255, 255, 255, 0.08) !important;
      border-radius: 20px !important;
      padding: 24px !important;
      backdrop-filter: blur(12px) !important;
      -webkit-backdrop-filter: blur(12px) !important;
      box-shadow: 0 15px 35px rgba(0, 0, 0, 0.4) !important;
    }
    .leaderboard-header {
      margin-bottom: 20px !important;
    }
    .leaderboard-header h2 {
      font-size: 1.5rem !important;
      font-weight: 800 !important;
      color: #fff !important;
      margin: 0 !important;
      display: flex !important;
      align-items: center !important;
      gap: 10px !important;
    }
    .leaderboard-badge {
      background: linear-gradient(135deg, rgba(255, 215, 0, 0.2), rgba(255, 140, 0, 0.2)) !important;
      border: 1px solid rgba(255, 215, 0, 0.4) !important;
      color: #ffd700 !important;
      font-size: 0.8rem !important;
      font-weight: 800 !important;
      padding: 4px 10px !important;
      border-radius: 20px !important;
      letter-spacing: 0.5px !important;
    }
    .leaderboard-header p {
      color: #8c8d9e !important;
      font-size: 0.9rem !important;
      margin-top: 6px !important;
      margin-bottom: 0 !important;
    }
    .leaderboard-list, #leaderboardList {
      max-height: 480px !important;
      overflow-y: auto !important;
      padding-right: 6px !important;
      display: flex !important;
      flex-direction: column !important;
      gap: 10px !important;
      -webkit-overflow-scrolling: touch !important;
      scrollbar-width: thin !important;
      scrollbar-color: rgba(255, 0, 122, 0.5) rgba(0, 0, 0, 0.25) !important;
    }
    .leaderboard-list::-webkit-scrollbar, #leaderboardList::-webkit-scrollbar {
      width: 5px !important;
    }
    .leaderboard-list::-webkit-scrollbar-track, #leaderboardList::-webkit-scrollbar-track {
      background: rgba(0, 0, 0, 0.25) !important;
      border-radius: 8px !important;
    }
    .leaderboard-list::-webkit-scrollbar-thumb, #leaderboardList::-webkit-scrollbar-thumb {
      background: linear-gradient(180deg, #ff007a, #7000ff) !important;
      border-radius: 8px !important;
    }
    .leaderboard-list::-webkit-scrollbar-thumb:hover, #leaderboardList::-webkit-scrollbar-thumb:hover {
      background: linear-gradient(180deg, #ff007a, #00f0ff) !important;
    }
    .lb-item {
      display: flex !important;
      align-items: center !important;
      background: linear-gradient(90deg, rgba(255, 255, 255, 0.03) 0%, rgba(255, 255, 255, 0.08) 100%) !important;
      border: 1px solid rgba(255, 255, 255, 0.1) !important;
      border-left: 4px solid #3498db !important;
      border-radius: 12px !important;
      padding: 14px 18px !important;
      margin-bottom: 0 !important;
      transition: all 0.25s cubic-bezier(0.25, 0.8, 0.25, 1) !important;
      box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2) !important;
      user-select: none !important;
      cursor: pointer !important;
    }
    .lb-item:hover {
      background: linear-gradient(90deg, rgba(255, 255, 255, 0.06) 0%, rgba(255, 255, 255, 0.14) 100%) !important;
      border-color: rgba(255, 255, 255, 0.25) !important;
      box-shadow: 0 6px 20px rgba(0, 0, 0, 0.35) !important;
    }
    .lb-item.rank-1-item {
      border-left-color: #ffd700 !important;
      background: linear-gradient(90deg, rgba(255, 215, 0, 0.08) 0%, rgba(255, 215, 0, 0.18) 100%) !important;
      border-color: rgba(255, 215, 0, 0.3) !important;
    }
    .lb-item.rank-2-item {
      border-left-color: #c0c0c0 !important;
      background: linear-gradient(90deg, rgba(192, 192, 192, 0.08) 0%, rgba(192, 192, 192, 0.18) 100%) !important;
      border-color: rgba(192, 192, 192, 0.3) !important;
    }
    .lb-item.rank-3-item {
      border-left-color: #cd7f32 !important;
      background: linear-gradient(90deg, rgba(205, 127, 50, 0.08) 0%, rgba(205, 127, 50, 0.18) 100%) !important;
      border-color: rgba(205, 127, 50, 0.3) !important;
    }
    .lb-rank {
      font-size: 1.25rem !important;
      font-weight: 900 !important;
      color: #798299 !important;
      width: 42px !important;
      min-width: 42px !important;
      text-align: left !important;
      margin-right: 12px !important;
    }
    .lb-rank.rank-1 {
      color: #ffd700 !important;
      text-shadow: 0 0 12px rgba(255, 215, 0, 0.6) !important;
      font-size: 1.45rem !important;
    }
    .lb-rank.rank-2 {
      color: #e0e0e0 !important;
      text-shadow: 0 0 10px rgba(255, 255, 255, 0.5) !important;
      font-size: 1.35rem !important;
    }
    .lb-rank.rank-3 {
      color: #e59866 !important;
      text-shadow: 0 0 10px rgba(229, 152, 102, 0.5) !important;
      font-size: 1.3rem !important;
    }
    .lb-name {
      font-size: 1.05rem !important;
      font-weight: 700 !important;
      color: #fff !important;
      flex: 1 !important;
      overflow: hidden !important;
      text-overflow: ellipsis !important;
      white-space: nowrap !important;
      padding: 0 10px !important;
    }
    .lb-stats {
      display: flex !important;
      flex-direction: column !important;
      align-items: flex-end !important;
      gap: 3px !important;
      text-align: right !important;
    }
    .lb-power {
      font-size: 1rem !important;
      font-weight: 800 !important;
      color: #00f0ff !important;
      text-shadow: 0 0 10px rgba(0, 240, 255, 0.35) !important;
      white-space: nowrap !important;
    }
    .lb-cards {
      font-size: 0.78rem !important;
      font-weight: 700 !important;
      color: #9a98a6 !important;
      background: rgba(0, 0, 0, 0.35) !important;
      padding: 2px 8px !important;
      border-radius: 8px !important;
      white-space: nowrap !important;
    }

    /* =========================================
       HERO INDEX MASTERY & FILTER BAR
       ========================================= */
    #indexTab {
      width: 100%;
      margin-bottom: 25px;
    }
    .index-mastery-card {
      background: linear-gradient(135deg, rgba(22, 17, 40, 0.95) 0%, rgba(35, 24, 65, 0.88) 100%) !important;
      border: 1px solid rgba(255, 215, 0, 0.3) !important;
      border-radius: 20px !important;
      padding: 24px 28px !important;
      box-shadow: 0 12px 40px rgba(0, 0, 0, 0.45), 0 0 30px rgba(255, 215, 0, 0.08) !important;
      margin-bottom: 20px !important;
      position: relative !important;
      overflow: hidden !important;
      backdrop-filter: blur(12px) !important;
      -webkit-backdrop-filter: blur(12px) !important;
    }
    .index-mastery-header {
      display: flex !important;
      justify-content: space-between !important;
      align-items: center !important;
      margin-bottom: 16px !important;
      flex-wrap: wrap !important;
      gap: 14px !important;
    }
    .index-mastery-info {
      display: flex !important;
      flex-direction: column !important;
      gap: 4px !important;
    }
    .index-mastery-title {
      font-size: 1.4rem !important;
      font-weight: 900 !important;
      letter-spacing: 0.5px !important;
      background: linear-gradient(135deg, #ffd700 0%, #ff8800 100%) !important;
      -webkit-background-clip: text !important;
      -webkit-text-fill-color: transparent !important;
      display: flex !important;
      align-items: center !important;
      gap: 8px !important;
    }
    .index-mastery-sub {
      font-size: 0.88rem !important;
      color: #9b9aab !important;
      font-weight: 500 !important;
    }
    .index-progress-pill {
      background: rgba(255, 215, 0, 0.15) !important;
      border: 1px solid rgba(255, 215, 0, 0.4) !important;
      color: #ffd700 !important;
      padding: 6px 18px !important;
      border-radius: 30px !important;
      font-weight: 800 !important;
      font-size: 1rem !important;
      box-shadow: 0 0 15px rgba(255, 215, 0, 0.2) !important;
      letter-spacing: 0.5px !important;
    }
    .index-progress-track {
      width: 100% !important;
      height: 12px !important;
      background: rgba(255, 255, 255, 0.08) !important;
      border-radius: 10px !important;
      overflow: hidden !important;
      margin-bottom: 18px !important;
      border: 1px solid rgba(255, 255, 255, 0.1) !important;
      position: relative !important;
    }
    .index-progress-fill {
      height: 100% !important;
      width: 0%;
      background: linear-gradient(90deg, #ff007a 0%, #7000ff 50%, #00f0ff 100%) !important;
      border-radius: 10px !important;
      transition: width 0.8s cubic-bezier(0.16, 1, 0.3, 1) !important;
      box-shadow: 0 0 12px rgba(0, 240, 255, 0.5) !important;
    }
    .index-tier-breakdown {
      display: flex !important;
      gap: 10px !important;
      flex-wrap: wrap !important;
      align-items: center !important;
    }
    .index-tier-chip {
      padding: 5px 14px !important;
      border-radius: 12px !important;
      font-size: 0.85rem !important;
      font-weight: 800 !important;
      display: inline-flex !important;
      align-items: center !important;
      gap: 6px !important;
      background: rgba(255, 255, 255, 0.05) !important;
      border: 1px solid rgba(255, 255, 255, 0.1) !important;
      color: #fff !important;
    }
    .index-tier-chip.ss {
      background: rgba(255, 215, 0, 0.15) !important;
      border-color: rgba(255, 215, 0, 0.5) !important;
      color: #ffd700 !important;
      box-shadow: 0 0 10px rgba(255, 215, 0, 0.2) !important;
    }
    .index-tier-chip.s {
      background: rgba(255, 69, 0, 0.15) !important;
      border-color: rgba(255, 69, 0, 0.5) !important;
      color: #ff4500 !important;
      box-shadow: 0 0 10px rgba(255, 69, 0, 0.2) !important;
    }
    .index-tier-chip.a {
      background: rgba(218, 112, 214, 0.15) !important;
      border-color: rgba(218, 112, 214, 0.5) !important;
      color: #da70d6 !important;
      box-shadow: 0 0 10px rgba(218, 112, 214, 0.2) !important;
    }
    .index-tier-chip.b {
      background: rgba(30, 144, 255, 0.15) !important;
      border-color: rgba(30, 144, 255, 0.5) !important;
      color: #1e90ff !important;
      box-shadow: 0 0 10px rgba(30, 144, 255, 0.2) !important;
    }
    .index-tier-chip.c {
      background: rgba(46, 204, 113, 0.15) !important;
      border-color: rgba(46, 204, 113, 0.5) !important;
      color: #2ecc71 !important;
      box-shadow: 0 0 10px rgba(46, 204, 113, 0.2) !important;
    }
    .index-filter-bar {
      display: flex !important;
      gap: 10px !important;
      flex-wrap: wrap !important;
      margin-top: 14px !important;
    }
    .index-filter-chip {
      background: rgba(255, 255, 255, 0.05) !important;
      border: 1px solid rgba(255, 255, 255, 0.12) !important;
      color: #a9a8b8 !important;
      padding: 8px 18px !important;
      border-radius: 20px !important;
      font-size: 0.88rem !important;
      font-weight: 700 !important;
      cursor: pointer !important;
      transition: all 0.25s ease !important;
      user-select: none !important;
    }
    .index-filter-chip:hover {
      background: rgba(255, 255, 255, 0.1) !important;
      color: #fff !important;
      border-color: rgba(255, 255, 255, 0.25) !important;
      
    }
    .index-filter-chip.active {
      background: linear-gradient(135deg, rgba(112, 0, 255, 0.35) 0%, rgba(0, 240, 255, 0.35) 100%) !important;
      border-color: #00f0ff !important;
      color: #fff !important;
      box-shadow: 0 0 15px rgba(0, 240, 255, 0.35) !important;
      font-weight: 800 !important;
    }

    /* =========================================
       UNOWNED / LOCKED CARDS (HERO INDEX)
       ========================================= */
    .character-card.unowned-card {
      background: linear-gradient(180deg, rgba(17, 13, 28, 0.85) 0%, rgba(10, 8, 18, 0.95) 100%) !important;
      border: 1.5px dashed rgba(255, 255, 255, 0.18) !important;
      border-radius: 20px !important;
      padding: 24px 18px !important;
      text-align: center !important;
      position: relative !important;
      display: flex !important;
      flex-direction: column !important;
      align-items: center !important;
      justify-content: space-between !important;
      min-height: 290px !important;
      box-sizing: border-box !important;
      opacity: 0.75 !important;
      cursor: default !important;
      transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1) !important;
      box-shadow: 0 8px 25px rgba(0, 0, 0, 0.35) !important;
    }
    .character-card.unowned-card:hover {
      opacity: 0.95 !important;
      transform: translateY(-4px) !important;
      border-color: rgba(255, 215, 0, 0.45) !important;
      box-shadow: 0 15px 35px rgba(0, 0, 0, 0.5), 0 0 20px rgba(255, 215, 0, 0.15) !important;
    }
    .locked-badge {
      position: absolute !important;
      top: 12px !important;
      left: 12px !important;
      background: rgba(0, 0, 0, 0.65) !important;
      border: 1px solid rgba(255, 255, 255, 0.15) !important;
      color: #a9a8b8 !important;
      font-size: 0.75rem !important;
      font-weight: 800 !important;
      padding: 4px 10px !important;
      border-radius: 8px !important;
      display: inline-flex !important;
      align-items: center !important;
      gap: 5px !important;
      letter-spacing: 0.3px !important;
      backdrop-filter: blur(6px) !important;
      -webkit-backdrop-filter: blur(6px) !important;
      z-index: 10 !important;
    }
    .silhouette-breathe {
      font-size: 3.5rem !important;
      margin: 20px 0 !important;
      animation: silhouetteBreathe 2.5s ease-in-out infinite alternate !important;
      filter: drop-shadow(0 0 12px rgba(255, 42, 85, 0.45)) !important;
      user-select: none !important;
    }
    @keyframes silhouetteBreathe {
      0% { transform: scale(0.92); opacity: 0.65; filter: drop-shadow(0 0 8px rgba(255, 42, 85, 0.3)); }
      100% { transform: scale(1.08); opacity: 1; filter: drop-shadow(0 0 22px rgba(255, 42, 85, 0.75)); }
    }
    .character-card.unowned-card .card-name {
      color: rgba(255, 255, 255, 0.3) !important;
      font-weight: 800 !important;
      font-size: 1.2rem !important;
      letter-spacing: 1px !important;
      margin: 0 0 4px 0 !important;
    }
    .character-card.unowned-card .card-level-badge {
      color: #6c6d7e !important;
      background: rgba(255, 255, 255, 0.04) !important;
      border: 1px solid rgba(255, 255, 255, 0.06) !important;
      font-size: 0.78rem !important;
      font-weight: 700 !important;
      padding: 3px 12px !important;
      border-radius: 10px !important;
    }

    /* =========================================
       VISITOR MODE CENTERED SQUAD STYLES
       ========================================= */
    body.visitor-mode .dashboard-grid {
      display: flex !important;
      justify-content: center !important;
      align-items: center !important;
      width: 100% !important;
      margin: 0 auto 35px auto !important;
    }
    body.visitor-mode #activeTeamPanel {
      width: 100% !important;
      max-width: 880px !important;
      margin: 0 auto !important;
      box-shadow: 0 15px 45px rgba(0, 0, 0, 0.45), 0 0 25px rgba(0, 240, 255, 0.08) !important;
      border: 1px solid rgba(0, 240, 255, 0.25) !important;
    }
    body.visitor-mode .team-selection {
      justify-content: center !important;
      gap: 20px !important;
    }
  

    /* Balanced comfortable page width */
    :root {
      --content-width: 1520px !important;
    }

    .page-frame,
    .patreon-ticker-banner {
      width: 100% !important;
      max-width: 1520px !important;
      margin-left: auto !important;
      margin-right: auto !important;
    }

    .topbar-inner,
    .breadcrumbs,
    .section,
    .stats-grid {
      width: 100% !important;
      max-width: 1520px !important;
      margin-left: auto !important;
      margin-right: auto !important;
    }

    /* ==========================================================================
       KWAMI & MIRACULOUS - PREMIUM DASHBOARD HUB REDESIGN
       ========================================================================== */
    .miraculous-dashboard {
      display: grid;
      grid-template-columns: 1.05fr 0.95fr;
      gap: 24px;
      align-items: start;
      margin-top: 24px;
    }

    @media (max-width: 1080px) {
      .miraculous-dashboard {
        grid-template-columns: 1fr;
        gap: 20px;
      }
    }

    /* Premium adopt card and command lists */
    .kwami-card-premium {
      background: radial-gradient(circle at top left, rgba(143, 124, 255, 0.08), transparent 45%), var(--surface-strong);
      border: 1px solid rgba(143, 124, 255, 0.15);
      border-top: 4px solid #8f7cff;
      border-radius: 20px;
      padding: 24px;
      position: relative;
      overflow: hidden;
      box-shadow: 0 12px 36px rgba(0, 0, 0, 0.18);
    }

    /* Steps flow */
    .kwami-flow-premium {
      display: grid;
      grid-template-columns: repeat(4, minmax(0, 1fr));
      gap: 12px;
      margin: 16px 0 0;
    }

    @media (max-width: 960px) {
      .kwami-flow-premium {
        grid-template-columns: repeat(2, minmax(0, 1fr));
      }
    }

    @media (max-width: 520px) {
      .kwami-flow-premium {
        grid-template-columns: 1fr;
      }
    }

    .kwami-step-premium {
      background: rgba(255, 255, 255, 0.02);
      border: 1px solid rgba(255, 255, 255, 0.05);
      border-radius: 12px;
      padding: 12px;
      transition: all 0.2s ease;
      display: flex;
      flex-direction: column;
      align-items: center;
      text-align: center;
      gap: 6px;
      transform: scale(1) translateZ(0);
      will-change: transform;
    }

    .kwami-step-premium:hover {
      background: rgba(255, 255, 255, 0.04);
      border-color: rgba(143, 124, 255, 0.25);
      /* No scale on hover to prevent jitter */
    }

    .kwami-step-num {
      width: 24px;
      height: 24px;
      border-radius: 50%;
      background: rgba(143, 124, 255, 0.15);
      color: #8f7cff;
      display: flex;
      align-items: center;
      justify-content: center;
      font-weight: 800;
      font-size: 0.8rem;
    }

    .kwami-step-premium strong {
      color: #fbf7ef;
      font-size: 0.9rem;
      margin-top: 2px;
    }

    .kwami-step-premium .command-pills {
      margin-top: auto;
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      gap: 4px;
    }

    .kwami-step-premium .command-pills code {
      font-size: 0.72rem;
      padding: 2px 6px;
    }

    /* Transform / Combat cards grid */
    .roleplay-combat-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 16px;
      margin-top: 16px;
    }

    @media (max-width: 640px) {
      .roleplay-combat-grid {
        grid-template-columns: 1fr;
      }
    }

    .roleplay-combat-card {
      border-radius: 20px;
      padding: 20px;
      position: relative;
      overflow: hidden;
      box-shadow: 0 12px 32px rgba(0, 0, 0, 0.15);
      transition: all 0.2s ease;
      transform: scale(1) translateZ(0);
      will-change: transform;
    }

    .roleplay-combat-card:hover {
      /* No scale on hover to prevent jitter */
      box-shadow: 0 16px 40px rgba(0, 0, 0, 0.22);
    }

    /* Right Column: Activities */
    .activities-card-premium {
      background: radial-gradient(circle at top right, rgba(143, 124, 255, 0.05), transparent 40%), var(--surface-strong);
      border: 1px solid rgba(255, 255, 255, 0.05);
      border-radius: 20px;
      padding: 24px;
      box-shadow: 0 12px 36px rgba(0, 0, 0, 0.18);
    }

    .activity-section-premium {
      margin-bottom: 24px;
    }

    .activity-section-premium:last-child {
      margin-bottom: 0;
    }

    .activity-section-premium h4 {
      color: #8f7cff;
      font-size: 0.75rem;
      font-weight: 850;
      letter-spacing: 0.05em;
      text-transform: uppercase;
      margin-bottom: 12px;
      display: flex;
      align-items: center;
      gap: 8px;
    }

    .activity-list-premium {
      display: grid;
      gap: 10px;
      list-style: none;
      padding: 0;
      margin: 0;
    }

    .activity-item-premium {
      display: flex;
      justify-content: space-between;
      align-items: center;
      background: rgba(16, 17, 20, 0.4);
      border: 1px solid rgba(255, 255, 255, 0.03);
      border-radius: 12px;
      padding: 12px 16px;
      transition: all 0.2s ease;
      gap: 12px;
    }

    @media (max-width: 520px) {
      .activity-item-premium {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
      }
    }

    .activity-item-premium:hover {
      background: rgba(16, 17, 20, 0.6);
      border-color: rgba(143, 124, 255, 0.15);
      transform: translateX(3px);
    }

    .activity-item-premium code {
      font-size: 0.8rem;
      font-weight: 700;
      color: #fff3c8;
      background: rgba(143, 124, 255, 0.1);
      border: 1px solid rgba(143, 124, 255, 0.2);
      border-radius: 99px;
      padding: 4px 12px;
    }

    .activity-item-premium span {
      color: var(--text-muted);
      font-size: 0.88rem;
      text-align: right;
    }

    @media (max-width: 520px) {
      .activity-item-premium span {
        text-align: left;
      }
    }

    /* Premium interactive simulator/calculator card */
    .calculator-card-premium {
      background: var(--surface-strong);
      border: 1px solid rgba(255, 255, 255, 0.05);
      border-radius: 20px;
      padding: 24px;
      box-shadow: 0 12px 36px rgba(0, 0, 0, 0.18);
      margin-top: 24px;
    }

    .calculator-card-premium .reward-controls {
      display: grid;
      grid-template-columns: 1.3fr 0.7fr;
      gap: 12px;
      margin: 16px 0;
    }

    @media (max-width: 480px) {
      .calculator-card-premium .reward-controls {
        grid-template-columns: 1fr;
      }
    }

    .calculator-card-premium .reward-control {
      display: flex;
      flex-direction: column;
      gap: 6px;
    }

    .calculator-card-premium .reward-control span {
      font-size: 0.8rem;
      font-weight: 700;
      color: var(--text-muted);
    }

    .calculator-card-premium select,
    .calculator-card-premium input {
      background: rgba(16, 17, 20, 0.6);
      border: 1px solid rgba(255, 255, 255, 0.08);
      color: #fff;
      padding: 10px 14px;
      border-radius: 10px;
      font-size: 0.9rem;
      width: 100%;
      outline: none;
      transition: all 0.2s ease;
    }

    .calculator-card-premium select:focus,
    .calculator-card-premium input:focus {
      border-color: #8f7cff;
      box-shadow: 0 0 0 2px rgba(143, 124, 255, 0.2);
    }

    .calculator-card-premium .reward-output {
      background: rgba(16, 17, 20, 0.5);
      border: 1px solid rgba(255, 255, 255, 0.04);
      border-radius: 14px;
      padding: 16px;
      margin-top: 14px;
    }

    .calculator-card-premium .reward-output-head {
      display: flex;
      justify-content: space-between;
      align-items: center;
      border-bottom: 1px solid rgba(255, 255, 255, 0.06);
      padding-bottom: 12px;
      margin-bottom: 12px;
    }

    .calculator-card-premium .reward-output-kicker {
      font-size: 0.72rem;
      color: #8f7cff;
      text-transform: uppercase;
      font-weight: 850;
      margin: 0 0 4px;
    }

    .calculator-card-premium .reward-output-head strong {
      font-size: 1.1rem;
      color: #fff;
    }

    .calculator-card-premium .reward-output-grid {
      display: grid;
      gap: 10px;
    }

    .calculator-card-premium .reward-output-row {
      display: flex;
      justify-content: space-between;
      font-size: 0.88rem;
    }

    .calculator-card-premium .reward-output-row span {
      color: var(--text-muted);
    }

    .calculator-card-premium .reward-output-row strong {
      color: #fff;
    }

    .calculator-card-premium .reward-note {
      font-size: 0.75rem;
      color: var(--text-muted);
      margin-top: 12px;
      text-align: center;
    }

    /* Premium integrated bakery styling */
    .bakery-card-premium {
      background: radial-gradient(circle at bottom right, rgba(236, 72, 153, 0.08), transparent 45%), var(--surface-strong);
      border: 1px solid rgba(236, 72, 153, 0.15);
      border-radius: 20px;
      padding: 24px;
      box-shadow: 0 12px 36px rgba(0, 0, 0, 0.18);
      margin-top: 24px;
    }

    .bakery-flex {
      display: flex;
      gap: 24px;
      align-items: center;
    }

    @media (max-width: 640px) {
      .bakery-flex {
        flex-direction: column;
        align-items: stretch;
      }
    }

    .bakery-art-premium {
      width: 100px;
      height: 100px;
      flex-shrink: 0;
      background: rgba(236, 72, 153, 0.1);
      border: 1px solid rgba(236, 72, 153, 0.2);
      border-radius: 20px;
      display: flex;
      align-items: center;
      justify-content: center;
      overflow: hidden;
    }

    .bakery-art-premium img {
      width: 80px;
      height: 80px;
      object-fit: contain;
    }

    .bakery-info-premium {
      flex: 1;
      display: flex;
      flex-direction: column;
      gap: 12px;
    }

    .bakery-stocks-premium {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 12px;
      margin: 8px 0;
    }

    .bakery-stock-item {
      background: rgba(16, 17, 20, 0.4);
      border: 1px solid rgba(255, 255, 255, 0.03);
      border-radius: 12px;
      padding: 10px 14px;
      display: flex;
      flex-direction: column;
      gap: 4px;
    }

    .bakery-stock-item span {
      font-size: 0.76rem;
      color: var(--text-muted);
    }

    .bakery-stock-item strong {
      font-size: 1.25rem;
      color: #fff;
      font-weight: 800;
    }

    .bakery-order-form {
      display: flex;
      gap: 12px;
      align-items: center;
    }

    @media (max-width: 480px) {
      .bakery-order-form {
        flex-direction: column;
        align-items: stretch;
      }
    }

    .bakery-order-form label {
      display: flex;
      align-items: center;
      gap: 8px;
      background: rgba(16, 17, 20, 0.6);
      border: 1px solid rgba(255, 255, 255, 0.08);
      border-radius: 10px;
      padding: 6px 12px;
      flex: 1;
    }

    .bakery-order-form label span {
      font-size: 0.8rem;
      color: var(--text-muted);
      font-weight: 700;
    }

    .bakery-order-form label input {
      background: transparent;
      border: none;
      color: #fff;
      font-size: 0.95rem;
      font-weight: 700;
      flex: 1;
      width: 0;
      min-width: 50px;
      outline: none;
    }

    .bakery-order-form label input::-webkit-outer-spin-button,
    .bakery-order-form label input::-webkit-inner-spin-button {
      -webkit-appearance: none;
      margin: 0;
    }

    .bakery-order-form label input[type=number] {
      -moz-appearance: textfield;
    }

    /* STAFF HUB - ABSOLUTE FULL SCREEN REDESIGN */
    html[data-page='admin'],
    html[data-page='admin'] body,
    html[data-page='admin'] .page-frame,
    html[data-page='admin'] .app-shell,
    html[data-page='admin'] main.content,
    html[data-page='admin'] .section,
    html[data-page='admin'] .admin-section,
    html[data-page='admin'] .empire-panel-shell,
    html[data-page='admin'] .empire-panel-root,
    html[data-page='admin'] .admin-shell {
      width: 100% !important;
      max-width: 100% !important;
      min-width: 100% !important;
      margin: 0 !important;
      padding: 0 !important;
      overflow-x: hidden !important;
      min-height: 100vh !important;
    }

    /* Ensure background gradient covers full screen on admin page */
    html, body {
      min-height: 100vh !important;
      background: var(--body-bg) !important;
      background-attachment: fixed !important;
    }

    @media (min-width: 961px) {
      html[data-page='admin'] .empire-panel-layout {
        display: grid !important;
        grid-template-columns: 300px 1fr !important;
        grid-template-areas: "sidebar main" !important;
        width: 100% !important;
        max-width: none !important;
        gap: 0 !important;
      }
    }

    @media (max-width: 960px) {
      html[data-page='admin'] .empire-panel-layout,
      html[data-page='admin'] .staffhub-v2 .empire-panel-layout {
        display: flex !important;
        flex-direction: column !important;
        width: 100% !important;
        gap: 24px !important;
      }
      html[data-page='admin'] .empire-panel-sidebar,
      html[data-page='admin'] .empire-panel-rail,
      html[data-page='admin'] .staffhub-v2 .empire-panel-rail,
      html[data-page='admin'] .empire-panel-main,
      html[data-page='admin'] .staffhub-v2 .empire-panel-main {
        width: 100% !important;
        position: relative !important;
        z-index: 10;
        margin-top: 0 !important;
      }
    }

    html[data-page='admin'] .admin-section {
      padding: 24px !important;
    }

    /* =====================================================
       FIX: Staff Hub - remove double scrollbar & content cutoff
       The rail has overflow:auto + max-height which creates
       a second scrollbar inside the page. We remove it so
       only the page body scrolls naturally.
       ===================================================== */
    html[data-page='admin'] .empire-panel-rail,
    html[data-page='admin'] .empire-panel-sidebar,
    html[data-page='admin'] .staffhub-v2 .empire-panel-rail {
      max-height: none !important;
      overflow: visible !important;
      overflow-y: visible !important;
    }

    /* Remove forced min-height that caused content to be clipped */
    html[data-page='admin'] .page-frame #admin.admin-section {
      min-height: auto !important;
    }

    /* Ensure the main content area has no unwanted height cap */
    html[data-page='admin'] .empire-panel-main,
    html[data-page='admin'] .empire-panel-stage,
    html[data-page='admin'] .empire-panel-layout,
    html[data-page='admin'] .empire-panel-shell,
    html[data-page='admin'] #empirePanelShell,
    html[data-page='admin'] .empire-panel-shell-premium,
    html[data-page='admin'] .empire-preview-column,
    html[data-page='admin'] .empire-preview-shell,
    html[data-page='admin'] .page-frame,
    html[data-page='admin'] .app-shell,
    html[data-page='admin'] main.content,
    html[data-page='admin'] .section,
    html[data-page='admin'] #admin,
    html[data-page='admin'] .admin-section,
    html[data-page='admin'] .admin-shell,
    html[data-page='admin'] .empire-panel-root {
      max-height: none !important;
      height: auto !important;
      overflow: visible !important;
    }

    /* Prevent body from having its own scrollbar, forcing it to the html root */
    html[data-page='admin'] {
      overflow-y: scroll !important;
      overflow-x: hidden !important;
    }
    html[data-page='admin'] body {
      overflow: visible !important;
    }

    /* FIX: Hide the website sidebar nav on admin page (it has its own scroll) */
    html[data-page='admin'] .sidebar {
      display: none !important;
    }

    /* FIX: Make app-shell full width when sidebar is hidden on admin page */
    html[data-page='admin'] .app-shell {
      grid-template-columns: 1fr !important;
      min-height: unset !important;
      height: auto !important;
    }

    /* --- STAFF NOTES MODAL V2 FIX --- */
    .sn-modal-backdrop {
      position: fixed !important;
      top: 0 !important;
      left: 0 !important;
      width: 100% !important;
      height: 100vh !important;
      background: rgba(0, 0, 0, 0.7) !important;
      backdrop-filter: blur(8px) !important;
      z-index: 99999 !important;
      display: flex !important;
      align-items: center !important;
      justify-content: center !important;
      padding: 20px !important;
    }
    .sn-modal {
      background: #181a1f !important;
      border: 1px solid rgba(255, 255, 255, 0.1) !important;
      border-radius: 16px !important;
      width: 100% !important;
      max-width: 500px !important;
      display: flex !important;
      flex-direction: column !important;
      box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5) !important;
      animation: modalFadeIn 0.3s cubic-bezier(0.16, 1, 0.3, 1) !important;
    }
    @keyframes modalFadeIn {
      from { opacity: 0; transform: translateY(20px) scale(0.95); }
      to { opacity: 1; transform: translateY(0) scale(1); }
    }
    .sn-modal-header {
      padding: 24px !important;
      display: flex !important;
      justify-content: space-between !important;
      align-items: center !important;
      border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
    }
    .sn-modal-header-copy h4 {
      margin: 0 0 8px 0 !important;
      font-size: 20px !important;
      font-weight: 700 !important;
      color: #fff !important;
    }
    .sn-modal-header-copy p {
      margin: 0 !important;
      font-size: 13px !important;
      color: #888 !important;
      line-height: 1.4 !important;
    }
    .sn-modal-close-btn {
      background: rgba(255,255,255,0.05) !important;
      border: none !important;
      color: #aaa !important;
      width: 32px !important;
      height: 32px !important;
      border-radius: 50% !important;
      cursor: pointer !important;
      display: flex !important;
      align-items: center !important;
      justify-content: center !important;
      font-size: 18px !important;
      transition: all 0.2s !important;
    }
    .sn-modal-close-btn:hover {
      background: rgba(255,255,255,0.1) !important;
      color: #fff !important;
    }
    .sn-modal-author-bar {
      display: flex !important;
      align-items: center !important;
      gap: 12px !important;
      padding: 16px 24px !important;
      background: rgba(255, 255, 255, 0.02) !important;
      border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
    }
    .sn-modal-avatar {
      width: 36px !important;
      height: 36px !important;
      border-radius: 50% !important;
      background: #333 !important;
      display: flex !important;
      align-items: center !important;
      justify-content: center !important;
      font-size: 13px !important;
      font-weight: 700 !important;
      color: #fff !important;
    }
    .sn-modal-author-info {
      display: flex !important;
      flex-direction: column !important;
    }
    .sn-modal-author-label {
      font-size: 11px !important;
      color: #888 !important;
      text-transform: uppercase !important;
      letter-spacing: 0.5px !important;
    }
    .sn-modal-author-name {
      font-size: 14px !important;
      font-weight: 600 !important;
      color: #fff !important;
    }
    .sn-modal-author-role {
      font-size: 11px !important;
      color: #aaa !important;
    }
    .sn-modal-body {
      padding: 24px !important;
      display: flex !important;
      flex-direction: column !important;
      gap: 20px !important;
    }
    .sn-modal-field {
      display: flex !important;
      flex-direction: column !important;
      gap: 8px !important;
    }
    .sn-modal-field label {
      font-size: 13px !important;
      font-weight: 600 !important;
      color: #ccc !important;
    }
    .sn-modal-field input, .sn-modal-field textarea {
      background: rgba(0, 0, 0, 0.2) !important;
      border: 1px solid rgba(255, 255, 255, 0.1) !important;
      border-radius: 8px !important;
      padding: 12px 16px !important;
      color: #fff !important;
      font-size: 14px !important;
      outline: none !important;
      transition: border-color 0.2s !important;
      font-family: inherit !important;
      width: 100% !important;
      box-sizing: border-box !important;
    }
    .sn-modal-field input:focus, .sn-modal-field textarea:focus {
      border-color: #6366f1 !important;
    }
    .sn-modal-field textarea {
      min-height: 120px !important;
      resize: vertical !important;
    }
    .sn-modal-field small {
      font-size: 12px !important;
      color: #888 !important;
    }
    .sn-modal-cat-grid {
      display: grid !important;
      grid-template-columns: repeat(3, 1fr) !important;
      gap: 10px !important;
    }
    .sn-cat-btn {
      background: rgba(255, 255, 255, 0.05) !important;
      border: 1px solid rgba(255, 255, 255, 0.1) !important;
      border-radius: 8px !important;
      padding: 12px 8px !important;
      color: #aaa !important;
      font-size: 12px !important;
      font-weight: 600 !important;
      cursor: pointer !important;
      display: flex !important;
      flex-direction: column !important;
      align-items: center !important;
      gap: 6px !important;
      transition: all 0.2s !important;
    }
    .sn-cat-btn:hover {
      background: rgba(255, 255, 255, 0.08) !important;
    }
    .sn-cat-btn[data-active="true"] {
      background: rgba(255, 255, 255, 0.1) !important;
      border-color: var(--sn-cat-color) !important;
      color: var(--sn-cat-color) !important;
    }
    .sn-cat-select-hidden {
      display: none !important;
    }
    .sn-modal-footer {
      padding: 20px 24px !important;
      display: flex !important;
      justify-content: space-between !important;
      align-items: center !important;
      border-top: 1px solid rgba(255, 255, 255, 0.08) !important;
      background: rgba(0, 0, 0, 0.1) !important;
      border-bottom-left-radius: 16px !important;
      border-bottom-right-radius: 16px !important;
    }
    .sn-modal-buttons {
      display: flex !important;
      gap: 12px !important;
      margin-left: auto !important;
    }
    .sn-modal-status {
      font-size: 13px !important;
      color: #ef4444 !important;
      margin: 0 !important;
    }

    /* --- STAFF NOTES V2 FIX --- */
    .sn-page {
      display: flex !important;
      flex-direction: column !important;
      gap: 24px !important;
    }
    .sn-filters {
      display: flex !important;
      align-items: center !important;
      flex-wrap: wrap !important;
      gap: 10px !important;
      width: 100% !important;
    }
    .sn-filter-btn {
      background: rgba(255, 255, 255, 0.05) !important;
      border: 1px solid rgba(255, 255, 255, 0.1) !important;
      color: #aaa !important;
      padding: 6px 14px !important;
      border-radius: 8px !important;
      font-size: 13px !important;
      font-weight: 600 !important;
      cursor: pointer !important;
      transition: all 0.2s ease !important;
    }
    .sn-filter-btn:hover {
      background: rgba(255, 255, 255, 0.1) !important;
      color: #fff !important;
    }
    .sn-filter-btn[data-active="true"] {
      background: rgba(255, 255, 255, 0.15) !important;
      border-color: rgba(255, 255, 255, 0.3) !important;
      color: #fff !important;
    }
    .sn-grid {
      display: grid !important;
      grid-template-columns: repeat(auto-fill, minmax(400px, 1fr)) !important;
      gap: 20px !important;
      align-items: stretch !important;
    }
    .sn-card {
      position: relative !important;
      border-radius: 12px !important;
      background: #181a1f !important;
      border: 1px solid rgba(255, 255, 255, 0.08) !important;
      border-left: 4px solid var(--sn-tone, #888) !important;
      overflow: hidden !important;
      display: flex;
      flex-direction: column !important;
      height: 100% !important;
      transform: scale(1) translateZ(0) !important;
      will-change: transform, border-color, box-shadow;
      transition: border-color 0.25s ease, box-shadow 0.25s ease !important;
    }
    .sn-card:hover {
      border-color: rgba(255, 255, 255, 0.18) !important;
      box-shadow: 0 8px 28px rgba(0, 0, 0, 0.35) !important;
    }
    .sn-card-inner {
      padding: 24px !important;
      display: flex !important;
      flex-direction: column !important;
      flex-grow: 1 !important;
    }
    .sn-card-head {
      display: flex !important;
      justify-content: space-between !important;
      align-items: flex-start !important;
      margin-bottom: 16px !important;
      gap: 12px !important;
    }
    .sn-card-pills {
      display: flex !important;
      gap: 8px !important;
      flex-wrap: wrap !important;
      align-items: center !important;
    }
    .sn-pill {
      font-size: 11px !important;
      font-weight: 700 !important;
      padding: 4px 10px !important;
      border-radius: 100px !important;
      background: rgba(255, 255, 255, 0.08) !important;
      color: #ccc !important;
      display: inline-flex !important;
      align-items: center !important;
      gap: 6px !important;
      text-transform: uppercase !important;
      letter-spacing: 0.5px !important;
    }
    .sn-pill--cat {
      color: var(--sn-tone, #fff) !important;
      background: rgba(255, 255, 255, 0.06) !important;
      border: 1px solid color-mix(in srgb, var(--sn-tone) 40%, transparent) !important;
    }
    .sn-pill--target {
      text-transform: none !important;
      letter-spacing: normal !important;
    }
    .sn-card-date {
      font-size: 11px !important;
      color: #666 !important;
      white-space: nowrap !important;
    }
    .sn-card-body {
      font-size: 14px !important;
      line-height: 1.6 !important;
      color: #eee !important;
      margin-bottom: 24px !important;
      flex-grow: 1 !important;
    }
    .sn-card-footer {
      display: flex !important;
      justify-content: space-between !important;
      align-items: center !important;
      padding-top: 16px !important;
      border-top: 1px solid rgba(255, 255, 255, 0.06) !important;
      margin-top: auto !important;
    }
    .sn-card-author {
      display: flex !important;
      align-items: center !important;
      gap: 12px !important;
    }
    .sn-card-avatar {
      width: 36px !important;
      height: 36px !important;
      border-radius: 50% !important;
      background: #333 !important;
      display: flex !important;
      align-items: center !important;
      justify-content: center !important;
      font-size: 12px !important;
      font-weight: bold !important;
      color: #fff !important;
      flex-shrink: 0 !important;
    }
    .sn-card-author-info {
      display: flex !important;
      flex-direction: column !important;
    }
    .sn-card-author-name {
      font-size: 14px !important;
      font-weight: 600 !important;
      color: #fff !important;
    }
    .sn-card-author-role {
      font-size: 11px !important;
      color: #888 !important;
    }
    .sn-card-actions {
      display: flex !important;
      gap: 8px !important;
    }

    /* --- COMPREHENSIVE MOBILE RESPONSIVENESS FIXES --- */
    @media (max-width: 768px) {
      .sn-grid {
        grid-template-columns: 1fr !important;
        gap: 14px !important;
      }
      .sn-card-inner {
        padding: 16px !important;
      }
      .empire-mail-detail {
        padding: 16px !important;
      }
      .empire-mail-sender-row {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 10px !important;
      }
    }

    @media (max-width: 640px) {
      .sn-filters {
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 10px !important;
      }
      .sn-filters > div:last-child {
        margin-left: 0 !important;
        width: 100% !important;
      }
      .sn-filters input#snNameFilterInput {
        width: 100% !important;
      }
      .sn-modal-overlay {
        padding: 12px !important;
      }
      .sn-modal {
        max-width: 100% !important;
        max-height: 90vh !important;
        overflow-y: auto !important;
      }
      .sn-modal-header,
      .sn-modal-body,
      .sn-modal-footer {
        padding: 16px !important;
      }
    }

    @media (max-width: 480px) {
      .sn-modal-cat-grid {
        grid-template-columns: repeat(2, 1fr) !important;
      }
      .sn-modal-footer {
        flex-direction: column !important;
        gap: 12px !important;
        align-items: stretch !important;
      }
      .sn-modal-buttons {
        margin-left: 0 !important;
        width: 100% !important;
      }
      .sn-modal-buttons button {
        flex: 1 !important;
      }
    }

    /* --- STAFF MAIL V2 FIX --- */
    .empire-mail-detail {
      background: #181a1f !important;
      border-radius: 16px !important;
      border: 1px solid rgba(255, 255, 255, 0.08) !important;
      padding: 30px !important;
      margin-bottom: 24px !important;
    }
    .empire-mail-detail-header-new {
      margin-bottom: 24px !important;
    }
    .empire-mail-sender-row {
      display: flex !important;
      align-items: center !important;
      gap: 16px !important;
      margin-bottom: 24px !important;
    }
    .empire-mail-sender-avatar {
      width: 48px !important;
      height: 48px !important;
      border-radius: 50% !important;
      display: flex !important;
      align-items: center !important;
      justify-content: center !important;
      font-size: 18px !important;
      font-weight: bold !important;
      color: #fff !important;
      flex-shrink: 0 !important;
    }
    .empire-mail-sender-info {
      display: flex !important;
      flex-direction: column !important;
      gap: 4px !important;
    }
    .empire-mail-sender-top {
      display: flex !important;
      align-items: center !important;
      gap: 12px !important;
    }
    .empire-mail-sender-name {
      font-size: 16px !important;
      font-weight: bold !important;
      color: #fff !important;
    }
    .empire-mail-sender-date {
      font-size: 13px !important;
      color: #888 !important;
    }
    .empire-mail-recipient-line-compact {
      font-size: 13px !important;
      color: #aaa !important;
    }
    .empire-mail-subject-row {
      margin-bottom: 16px !important;
      padding-bottom: 16px !important;
      border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
    }
    .empire-mail-subject-row h4 {
      font-size: 24px !important;
      font-weight: 800 !important;
      color: #fff !important;
      margin: 0 !important;
      line-height: 1.3 !important;
    }
    .empire-mail-body-new {
      font-size: 15px !important;
      line-height: 1.6 !important;
      color: #eee !important;
      margin-bottom: 32px !important;
      white-space: pre-wrap !important;
    }
    .empire-mail-actions-new {
      display: flex !important;
      gap: 12px !important;
      flex-wrap: wrap !important;
      border-top: 1px solid rgba(255, 255, 255, 0.08) !important;
      padding-top: 24px !important;
    }

    /* --- ANNOUNCEMENT V2 --- */
    .admin-announcement-card-v2 {
      position: relative !important;
      border-radius: 20px !important;
      background: #181a1f !important;
      border: 1px solid rgba(255, 255, 255, 0.1) !important;
      padding: 24px !important;
      margin-bottom: 24px !important;
      display: block !important;
    }

    .admin-announcement-v2-header {
      display: flex !important;
      justify-content: space-between !important;
      margin-bottom: 15px !important;
    }

    .v2-pill {
      font-size: 0.7rem !important;
      padding: 4px 12px !important;
      border-radius: 100px !important;
      background: #111214 !important;
      color: #aaa59a !important;
      border: 1px solid rgba(255, 255, 255, 0.1) !important;
    }

    .admin-announcement-v2-title {
      font-size: 1.6rem !important;
      font-weight: 800 !important;
      color: #fff !important;
      margin-bottom: 10px !important;
    }

    .admin-announcement-v2-copy {
      color: #ccc !important;
      line-height: 1.6 !important;
      margin-bottom: 20px !important;
    }

    .admin-announcement-v2-footer {
      display: flex !important;
      justify-content: space-between !important;
      border-top: 1px solid rgba(255, 255, 255, 0.1) !important;
      padding-top: 15px !important;
    }

    .v2-author-avatar {
      width: 36px !important;
      height: 36px !important;
      border-radius: 8px !important;
      display: flex !important;
      align-items: center !important;
      justify-content: center !important;
      background: #6a9af0 !important;
      color: #fff !important;
      font-weight: 800 !important;
    }

    /* ==========================================================================
       LIGHT THEME POLISH OVERRIDES FOR KWAMI DASHBOARD
       ========================================================================== */
    :root[data-theme='light'] .kwami-card-premium,
    :root[data-theme='light'] .activities-card-premium,
    :root[data-theme='light'] .calculator-card-premium,
    :root[data-theme='light'] .bakery-card-premium {
      background: #ffffff !important;
      border: 1px solid rgba(0, 0, 0, 0.08) !important;
      box-shadow: 0 4px 20px rgba(0, 0, 0, 0.04), 0 1px 3px rgba(0, 0, 0, 0.02) !important;
    }

    :root[data-theme='light'] .kwami-card-premium h3,
    :root[data-theme='light'] .activities-card-premium h3,
    :root[data-theme='light'] .calculator-card-premium h3,
    :root[data-theme='light'] .bakery-card-premium h3 {
      color: #1a1a1a !important;
    }

    /* Left Column: Progression & Step flow light theme */
    :root[data-theme='light'] .kwami-step-premium {
      background: rgba(0, 0, 0, 0.02) !important;
      border-color: rgba(0, 0, 0, 0.06) !important;
    }

    :root[data-theme='light'] .kwami-step-premium:hover {
      background: rgba(0, 0, 0, 0.04) !important;
      border-color: rgba(143, 124, 255, 0.4) !important;
    }

    :root[data-theme='light'] .kwami-step-premium strong {
      color: #1a1a1a !important;
    }

    :root[data-theme='light'] .kwami-step-num {
      background: rgba(143, 124, 255, 0.12) !important;
      color: #583cff !important;
    }

    /* Right Column: Activities section light theme */
    :root[data-theme='light'] .activity-item-premium {
      background: rgba(0, 0, 0, 0.02) !important;
      border-color: rgba(0, 0, 0, 0.05) !important;
    }

    :root[data-theme='light'] .activity-item-premium:hover {
      background: rgba(0, 0, 0, 0.04) !important;
      border-color: rgba(143, 124, 255, 0.3) !important;
    }

    :root[data-theme='light'] .activity-item-premium code {
      background: rgba(143, 124, 255, 0.08) !important;
      color: #3b2a9f !important;
      border-color: rgba(143, 124, 255, 0.2) !important;
    }

    :root[data-theme='light'] .activity-item-premium span {
      color: #374151 !important;
      font-weight: 500;
    }

    /* Command pills general */
    :root[data-theme='light'] .command-pills code {
      background: rgba(0, 0, 0, 0.04) !important;
      color: #374151 !important;
      border-color: rgba(0, 0, 0, 0.08) !important;
    }

    /* Simulator Calculator and Dynamic Output light theme */
    :root[data-theme='light'] .calculator-card-premium select,
    :root[data-theme='light'] .calculator-card-premium input {
      background: #ffffff !important;
      border-color: rgba(0, 0, 0, 0.15) !important;
      color: #1a1a1a !important;
    }

    :root[data-theme='light'] .calculator-card-premium select:focus,
    :root[data-theme='light'] .calculator-card-premium input:focus {
      border-color: #8f7cff !important;
    }

    :root[data-theme='light'] .calculator-card-premium .reward-output {
      background: rgba(0, 0, 0, 0.02) !important;
      border-color: rgba(0, 0, 0, 0.06) !important;
    }

    :root[data-theme='light'] .calculator-card-premium .reward-output-head {
      border-bottom-color: rgba(0, 0, 0, 0.08) !important;
    }

    :root[data-theme='light'] .calculator-card-premium .reward-output-head strong {
      color: #1a1a1a !important;
    }

    :root[data-theme='light'] .calculator-card-premium .reward-output-row strong {
      color: #1a1a1a !important;
    }

    :root[data-theme='light'] .calculator-card-premium .reward-output-row span {
      color: #6b7280 !important;
    }

    /* Roleplay & Combat light theme overrides */
    :root[data-theme='light'] .roleplay-combat-card {
      background: #ffffff !important;
      box-shadow: 0 4px 20px rgba(0, 0, 0, 0.04) !important;
      border-color: rgba(0, 0, 0, 0.08) !important;
    }

    :root[data-theme='light'] .roleplay-combat-card h3 {
      color: #1a1a1a !important;
    }

    /* Integrated Bakery light theme overrides */
    :root[data-theme='light'] .bakery-card-premium {
      background: #ffffff !important;
    }

    :root[data-theme='light'] .bakery-stock-item {
      background: rgba(0, 0, 0, 0.02) !important;
      border-color: rgba(0, 0, 0, 0.06) !important;
    }

    :root[data-theme='light'] .bakery-stock-item span {
      color: #6b7280 !important;
    }

    :root[data-theme='light'] .bakery-stock-item strong {
      color: #1a1a1a !important;
    }

    :root[data-theme='light'] .bakery-order-form label {
      background: rgba(0, 0, 0, 0.02) !important;
      border-color: rgba(0, 0, 0, 0.06) !important;
    }

    :root[data-theme='light'] .bakery-order-form label span {
      color: #6b7280 !important;
    }

    :root[data-theme='light'] .bakery-order-form label input {
      background: #ffffff !important;
      border-color: rgba(0, 0, 0, 0.15) !important;
      color: #1a1a1a !important;
    }

    /* ==========================================================================
       LIGHT THEME NAV DROPDOWN MENU OVERRIDES
       ========================================================================== */
    :root[data-theme='light'] .nav-dropdown-menu {
      background: #ffffff !important;
      border: 1px solid rgba(0, 0, 0, 0.08) !important;
      box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08) !important;
    }

    :root[data-theme='light'] .nav-dropdown-item {
      color: #374151 !important;
    }

    :root[data-theme='light'] .nav-dropdown-item:hover {
      background: rgba(var(--tab-color-rgb), 0.08) !important;
      color: var(--tab-color) !important;
    }

    /* ==========================================================================
       LIGHT THEME FEEDBACK & ROADMAP GLOBAL OVERRIDES
       ========================================================================== */
    :root[data-theme='light'] .feedback-section,
    :root[data-theme='light'] .roadmap-section,
    :root[data-theme='light'] .miraculous-feedback-section {
      background: #fcfbf9 !important;
      border-color: rgba(0, 0, 0, 0.08) !important;
      box-shadow: 0 10px 30px rgba(0, 0, 0, 0.03) !important;
    }

    /* Section headings */
    :root[data-theme='light'] .feedback-section h2,
    :root[data-theme='light'] .roadmap-section h2,
    :root[data-theme='light'] .miraculous-feedback-section h2 {
      color: #1a1a1a !important;
    }

    :root[data-theme='light'] .feedback-section .section-intro,
    :root[data-theme='light'] .roadmap-section .section-intro,
    :root[data-theme='light'] .miraculous-feedback-section .section-intro {
      color: #4b5563 !important;
    }

    /* Intro and process cards */
    :root[data-theme='light'] .feedback-process-card,
    :root[data-theme='light'] .miraculous-feedback-info-card,
    :root[data-theme='light'] .miraculous-feedback-form-card {
      background: #ffffff !important;
      border: 1px solid rgba(0, 0, 0, 0.08) !important;
      box-shadow: 0 4px 20px rgba(0, 0, 0, 0.03) !important;
      color: var(--text) !important;
    }

    /* Step flow inside process/info cards */
    :root[data-theme='light'] .feedback-step,
    :root[data-theme='light'] .miraculous-feedback-step {
      background: rgba(0, 0, 0, 0.02) !important;
      border-color: rgba(0, 0, 0, 0.06) !important;
    }

    :root[data-theme='light'] .feedback-step strong,
    :root[data-theme='light'] .miraculous-feedback-step strong {
      color: #1a1a1a !important;
    }

    :root[data-theme='light'] .feedback-step p,
    :root[data-theme='light'] .miraculous-feedback-step small {
      color: #4b5563 !important;
    }

    :root[data-theme='light'] .feedback-step span,
    :root[data-theme='light'] .miraculous-feedback-step span {
      background: rgba(106, 154, 240, 0.12) !important;
      color: #3b74db !important;
    }

    /* Summary statistic tiles */
    :root[data-theme='light'] .feedback-summary > div,
    :root[data-theme='light'] .roadmap-summary > div,
    :root[data-theme='light'] .website-feedback-stat {
      background: #ffffff !important;
      border-color: rgba(0, 0, 0, 0.08) !important;
      box-shadow: 0 4px 15px rgba(0, 0, 0, 0.02) !important;
    }

    :root[data-theme='light'] .feedback-summary > div small,
    :root[data-theme='light'] .roadmap-summary > div small,
    :root[data-theme='light'] .website-feedback-stat small {
      color: #6b7280 !important;
    }

    :root[data-theme='light'] .feedback-summary > div p,
    :root[data-theme='light'] .roadmap-summary > div p {
      color: #4b5563 !important;
    }

    /* Feedback dynamic board list items / cards */
    :root[data-theme='light'] .feedback-board .feedback-card,
    :root[data-theme='light'] .roadmap-item,
    :root[data-theme='light'] .website-feedback-card {
      background: #ffffff !important;
      border: 1px solid rgba(0, 0, 0, 0.08) !important;
      box-shadow: 0 4px 15px rgba(0, 0, 0, 0.02) !important;
    }

    :root[data-theme='light'] .feedback-board .feedback-card h3,
    :root[data-theme='light'] .roadmap-item h4,
    :root[data-theme='light'] .website-feedback-card h4 {
      color: #1a1a1a !important;
    }

    :root[data-theme='light'] .feedback-board .feedback-card p,
    :root[data-theme='light'] .roadmap-item p,
    :root[data-theme='light'] .website-feedback-card p,
    :root[data-theme='light'] .website-feedback-description {
      color: #4b5563 !important;
    }

    /* Form Fields for Miraculous Feedback */
    :root[data-theme='light'] .site-feedback-field > span {
      color: #374151 !important;
    }

    :root[data-theme='light'] .site-feedback-field input,
    :root[data-theme='light'] .site-feedback-field select,
    :root[data-theme='light'] .site-feedback-field textarea {
      background: #ffffff !important;
      border: 1px solid rgba(0, 0, 0, 0.15) !important;
      color: #1a1a1a !important;
    }

    :root[data-theme='light'] .site-feedback-field input:focus,
    :root[data-theme='light'] .site-feedback-field select:focus,
    :root[data-theme='light'] .site-feedback-field textarea:focus {
      border-color: #6a9af0 !important;
    }

    /* Fix light theme miraculous popover close button hover contrast */
    :root[data-theme='light'] .patreon-popover.patreon-popover--miraculous .patreon-popover-close:hover {
      background: rgba(111, 216, 255, 0.22) !important;
      border-color: rgba(111, 216, 255, 0.6) !important;
      color: #0284c7 !important;
    }

    /* ==========================================================================
       LIGHT THEME LEADERBOARD OVERRIDES
       ========================================================================== */
    :root[data-theme='light'] .lb-hero h1 {
      color: #1a1a1a !important;
      -webkit-text-fill-color: #1a1a1a !important;
      background: none !important;
    }

    :root[data-theme='light'] .lb-hero p {
      color: #1a1a1a !important;
    }

    :root[data-theme='light'] .lb-hero svg {
      color: #d97706 !important;
    }

    :root[data-theme='light'] .lb-tab {
      background: #fcfbf9 !important;
      color: #4b5563 !important;
      border: 1px solid rgba(0, 0, 0, 0.08) !important;
    }

    :root[data-theme='light'] .lb-tab:hover {
      background: #f3f4f6 !important;
    }

    :root[data-theme='light'] .lb-tab.active {
      background: #ffffff !important;
      color: #1a1a1a !important;
      border-color: #6a9af0 !important;
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05) !important;
    }

    :root[data-theme='light'] .chest-login-warning {
      background: #fffbeb !important;
      border-color: #fde68a !important;
      box-shadow: 0 4px 15px rgba(253, 230, 138, 0.2) !important;
    }

    :root[data-theme='light'] .chest-login-warning strong {
      color: #92400e !important;
    }

    :root[data-theme='light'] .chest-login-warning span {
      color: #b45309 !important;
    }

    /* Leaderboard podium overrides */
    :root[data-theme='light'] .podium-item:not(.lb-has-bg) {
      background: #ffffff !important;
      border: 1px solid rgba(0, 0, 0, 0.08) !important;
      box-shadow: 0 10px 30px rgba(0, 0, 0, 0.04) !important;
    }
    
    :root[data-theme='light'] .podium-item:not(.lb-has-bg) .podium-name {
      color: #1a1a1a !important;
      text-shadow: none !important;
    }

    :root[data-theme='light'] .podium-item:not(.lb-has-bg) .stat-pill {
      background: #f3f4f6 !important;
      border-color: rgba(0,0,0,0.08) !important;
      color: #4b5563 !important;
    }

    :root[data-theme='light'] .podium-item:not(.lb-has-bg) .stat-pill span[style*="color:#f8fafc"],
    :root[data-theme='light'] .podium-item:not(.lb-has-bg) .stat-pill span[style*="color:#d1d5db"] {
      color: #4b5563 !important;
    }

    /* Leaderboard list overrides */
    :root[data-theme='light'] .lb-row:not(.lb-has-bg) {
      background: #ffffff !important;
      border: 1px solid rgba(0, 0, 0, 0.08) !important;
      box-shadow: 0 4px 15px rgba(0, 0, 0, 0.02) !important;
    }

    :root[data-theme='light'] .lb-row:not(.lb-has-bg) .lb-row-rank {
      color: #6b7280 !important;
      text-shadow: none !important;
    }

    :root[data-theme='light'] .lb-row:not(.lb-has-bg) .lb-row-name {
      color: #1a1a1a !important;
      text-shadow: none !important;
    }

    /* Keep text white for items with backgrounds */
    :root[data-theme='light'] .podium-item.lb-has-bg .podium-name,
    :root[data-theme='light'] .lb-row.lb-has-bg .lb-row-name,
    :root[data-theme='light'] .lb-row.lb-has-bg .lb-row-rank {
      color: #ffffff !important;
      text-shadow: 0 2px 6px rgba(0,0,0,0.8) !important;
    }

    :root[data-theme='light'] .lb-row:not(.lb-has-bg) .stat-pill span[style*="color:#f8fafc"],
    :root[data-theme='light'] .lb-row:not(.lb-has-bg) .stat-pill span[style*="color:#d1d5db"] {
      color: #6b7280 !important;
    }

    /* ==========================================================================
       LIGHT THEME ADMIN ANNOUNCEMENT OVERRIDES
       ========================================================================== */
    :root[data-theme='light'] .admin-announcement-card-v2 {
      background: #ffffff !important;
      border: 1px solid rgba(0, 0, 0, 0.08) !important;
      box-shadow: 0 4px 15px rgba(0, 0, 0, 0.02) !important;
    }

    :root[data-theme='light'] .admin-announcement-v2-title {
      color: #1a1a1a !important;
    }

    :root[data-theme='light'] .admin-announcement-v2-copy {
      color: #4b5563 !important;
    }

    :root[data-theme='light'] .admin-announcement-v2-footer {
      border-top: 1px solid rgba(0, 0, 0, 0.08) !important;
    }

    :root[data-theme='light'] .v2-pill {
      background: #f3f4f6 !important;
      border: 1px solid rgba(0, 0, 0, 0.08) !important;
      color: #374151 !important;
    }

    /* ==========================================================================
       LIGHT THEME FAQ OVERRIDES
       ========================================================================== */
    :root[data-theme='light'] .support-faq-premium {
      background: #fcfbf9 !important;
      border: 1px solid rgba(0, 0, 0, 0.08) !important;
      border-radius: 12px !important;
      padding: 24px !important;
      box-shadow: 0 4px 20px rgba(0, 0, 0, 0.03) !important;
    }
    
    :root[data-theme='light'] .faq-premium-title {
      color: #1a1a1a !important;
    }

    :root[data-theme='light'] .faq-item {
      background: #ffffff !important;
      border: 1px solid rgba(0, 0, 0, 0.08) !important;
      border-radius: 8px !important;
      margin-bottom: 12px !important;
    }

    :root[data-theme='light'] .faq-toggle {
      color: #1a1a1a !important;
    }
    
    :root[data-theme='light'] .faq-toggle:hover {
      background: #f3f4f6 !important;
    }

    :root[data-theme='light'] .faq-icon {
      color: #6a9af0 !important;
    }
    
    :root[data-theme='light'] .faq-answer {
      color: #4b5563 !important;
      border-top: 1px solid rgba(0, 0, 0, 0.08) !important;
    }
    
    :root[data-theme='light'] .faq-answer p {
      color: #4b5563 !important;
    }

    :root[data-theme='light'] .faq-answer code {
      background: rgba(0, 0, 0, 0.04) !important;
      color: #1a1a1a !important;
      border: 1px solid rgba(0, 0, 0, 0.08) !important;
    }

    /* ==========================================================================
       LIGHT THEME GACHA REWARD CHEST OVERRIDES
       ========================================================================== */
    :root[data-theme='light'] .gacha-modal .gacha-card-value {
      color: #ffffff !important;
      text-shadow: 0 2px 10px rgba(0, 0, 0, 0.6) !important;
    }
    
    :root[data-theme='light'] .gacha-modal .gacha-card-label {
      color: rgba(255, 255, 255, 0.8) !important;
    }

    :root[data-theme='light'] .gacha-modal .gacha-prompt {
      color: #ffffff !important;
      text-shadow: 0 0 10px rgba(255, 255, 255, 0.8), 0 0 25px var(--chest-accent), 0 4px 12px rgba(0, 0, 0, 0.6) !important;
    }

    /* ==========================================================================
       LIGHT THEME RANK PREVIEW OVERRIDES
       ========================================================================== */
    :root[data-theme='light'] .rank-preview-card .rank-preview-kicker {
      color: var(--rank-preview-tone, #8f7cff) !important;
      text-shadow: 0 2px 8px rgba(0,0,0,0.4) !important;
    }
    :root[data-theme='light'] .rank-preview-card strong {
      color: #ffffff !important;
      text-shadow: 0 2px 10px rgba(0,0,0,0.6) !important;
    }
    :root[data-theme='light'] .rank-preview-card span,
    :root[data-theme='light'] .rank-preview-card small {
      color: rgba(255, 255, 255, 0.85) !important;
      text-shadow: 0 2px 8px rgba(0,0,0,0.5) !important;
    }
  

          @keyframes scanline {
            0% { left: -100%; }
            100% { left: 200%; }
          }
          @keyframes spin {
            to { transform: rotate(360deg); }
          }
        

        #worldRaidModal { display: none; position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(5, 3, 12, 0.96); z-index: 10005; overflow-y: auto !important; -webkit-overflow-scrolling: touch; padding: 16px 10px; box-sizing: border-box; justify-content: center; align-items: center !important; }
        .raid-modal-container { margin: 10px auto !important; width: 100%; max-width: 1240px; box-sizing: border-box; display: flex; flex-direction: column; gap: 12px; padding: 18px 22px; background: linear-gradient(165deg, #130d25 0%, #090514 100%); border: 1px solid rgba(255, 0, 122, 0.35); border-radius: 20px; box-shadow: 0 15px 40px rgba(0, 0, 0, 0.95); position: relative; }
        .raid-sticky-header { position: sticky; top: -18px; z-index: 30; background: #130d25; padding: 8px 0 10px 0; margin-top: -6px; border-bottom: 1px solid rgba(255, 255, 255, 0.08); display: flex; justify-content: space-between; align-items: center; }
        .raid-main-layout { display: grid !important; grid-template-columns: 1.6fr 1fr !important; gap: 14px !important; }
        .raid-left-col, .raid-right-col { display: flex !important; flex-direction: column !important; gap: 10px !important; min-width: 0 !important; }
        .raid-stats-grid { display: grid !important; grid-template-columns: 1fr 1fr 1.3fr !important; gap: 10px !important; }
        .raid-milestones-grid { display: grid !important; grid-template-columns: repeat(4, minmax(0, 1fr)) !important; gap: 8px !important; }
        
        @media (max-width: 768px) {
          #worldRaidModal { padding: 8px 6px !important; align-items: flex-start !important; }
          .raid-modal-container { margin: 4px auto !important; padding: 12px 10px !important; border-radius: 16px !important; gap: 10px !important; }
          .raid-sticky-header { top: -12px !important; padding: 6px 0 8px 0 !important; }
          .raid-main-layout { display: flex !important; flex-direction: column !important; gap: 12px !important; }
          .raid-left-col, .raid-right-col { flex: 1 1 100% !important; min-width: 0 !important; }
          .raid-milestones-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 8px !important; }
          .raid-milestone-card { padding: 10px !important; }
          .raid-stats-grid { grid-template-columns: 1fr 1fr !important; gap: 8px !important; }
          .raid-stats-actions { grid-column: 1 / -1 !important; display: flex !important; flex-direction: row !important; gap: 8px !important; }
          .raid-stats-actions button { flex: 1 !important; padding: 12px 8px !important; }
          .raid-boss-target-row { flex-direction: column !important; align-items: flex-start !important; gap: 8px !important; }
          .raid-boss-hp-badge { align-self: flex-start !important; font-size: 0.85rem !important; padding: 6px 12px !important; }
        }
        @media (max-width: 480px) {
          .raid-stats-actions { flex-direction: column !important; }
        }