@import url("https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap");

/* ============================================
   CSS VARIABLES - ORGANIZED BY CATEGORY
   ============================================ */

:root {
  /* ==================== CORE COLORS ==================== */

  /* Base Colors */
  --bg: rgba(255, 255, 255, 1);
  --white: rgba(255, 255, 255, 1);
  --black: rgba(0, 0, 0, 1);

  /* Text Colors */
  --text-primary: rgba(30, 41, 59, 1);
  --text-secondary: rgba(107, 114, 128, 1);
  --text-tertiary: rgba(156, 163, 175, 1);
  --text-quaternary: rgba(131, 131, 131, 1);
  --text-inverse: rgba(255, 255, 255, 1);

  /* Action Colors */
  --accent-red: rgba(222, 89, 71, 1);
  --accent-red-hover: rgba(199, 73, 55, 1);
  --success-green: rgba(16, 185, 129, 1);
  --success-green-light: rgba(74, 222, 128, 1);
  --warning-yellow: rgba(234, 179, 8, 1);
  --warning-yellow-light: rgba(251, 191, 36, 1);
  --error-red: rgba(239, 68, 68, 1);
  --error-red-light: rgba(248, 113, 113, 1);
  --info-blue: rgba(59, 130, 246, 1);

  /* Background Colors */
  --bg-primary: rgba(255, 255, 255, 1);
  --bg-secondary: rgba(249, 250, 251, 1);
  --bg-tertiary: rgba(243, 244, 246, 1);
  --bg-quaternary: rgba(238, 242, 255, 1);
  --bg-card: rgba(243, 244, 246, 1);
  --bg-hover: rgba(0, 0, 0, 0.02);
  --bg-active: rgba(222, 89, 71, 0.08);
  --bg-input: rgba(255, 255, 255, 1);
  --bg-modal: rgba(255, 255, 255, 1);

  /* Border Colors */
  --border-primary: 1px solid rgba(229, 231, 235, 1);
  --border-secondary: 1px solid rgba(229, 231, 235, 1);
  --border-tertiary: 1px solid rgba(98, 98, 98, 0.2);
  --border-subtle: 1px solid rgba(229, 231, 235, 1);
  --border-divider: 1px solid rgba(0, 0, 0, 0.05);
  --border-dashed: 1px dashed rgba(229, 231, 235, 1);
  --border-focus: 1px solid rgba(222, 89, 71, 0.4);

  /* Shadow Values */
  --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
  --shadow-md: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px -1px rgba(0, 0, 0, 0.1);
  --shadow-lg: 0 4px 6px -1px rgba(0, 0, 0, 0.1),
    0 2px 4px -2px rgba(0, 0, 0, 0.1);
  --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1),
    0 10px 10px -5px rgba(0, 0, 0, 0.04);
  --shadow-2xl: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
  --shadow-focus: 0 0 0 3px rgba(222, 89, 71, 0.1);
  --shadow-accent: 0px 1px 4px 0px rgba(222, 89, 71, 0.2);
  --shadow-card: 0px 1px 4px 0px rgba(0, 0, 0, 0.08);

  /* Overlay Colors */
  --overlay-dark: rgba(0, 0, 0, 0.5);
  --overlay-darker: rgba(0, 0, 0, 0.6);
  --white-overlay-05: rgba(255, 255, 255, 0.05);
  --white-overlay-06: rgba(255, 255, 255, 0.06);
  --white-overlay-10: rgba(255, 255, 255, 0.1);
  --white-overlay-15: rgba(255, 255, 255, 0.15);
  --white-overlay-20: rgba(255, 255, 255, 0.2);
  --white-overlay-30: rgba(255, 255, 255, 0.3);
  --white-overlay-42: rgba(255, 255, 255, 0.42);
  --white-overlay-50: rgba(255, 255, 255, 0.5);
  --black-overlay-20: rgba(0, 0, 0, 0.2);
  --black-overlay-50: rgba(0, 0, 0, 0.5);
  --black-overlay-70: rgba(0, 0, 0, 0.7);
  --black-overlay-80: rgba(0, 0, 0, 0.8);

  /* Accent Overlays */
  --accent-red-08: rgba(222, 89, 71, 0.08);
  --accent-red-10: rgba(222, 89, 71, 0.1);
  --accent-red-20: rgba(222, 89, 71, 0.2);
  --accent-red-30: rgba(222, 89, 71, 0.3);
  --accent-red-40: rgba(222, 89, 71, 0.4);
  --accent-red-50: rgba(222, 89, 71, 0.5);
  --accent-red-70: rgba(222, 89, 71, 0.7);
  --error-red-20: rgba(239, 68, 68, 0.2);
  --error-red-30: rgba(239, 68, 68, 0.3);
  --error-red-90: rgba(216, 79, 79, 0.9);
  --text-secondary-50: rgba(156, 163, 175, 0.5);
  --text-secondary-70: rgba(156, 163, 175, 0.7);

  /* Gradients */
  --gradient-primary: radial-gradient(
    50% 50% at 50% 50%,
    #af2631 0%,
    #de5947 100%
  );
  --gradient-accent: linear-gradient(
    to right,
    rgba(222, 89, 71, 1),
    rgba(222, 89, 71, 0.7)
  );
  --gradient-overlay: linear-gradient(
    to top,
    rgba(0, 0, 0, 0.6),
    transparent,
    transparent
  );

  /* ==================== COMPONENT-SPECIFIC COLORS ==================== */

  /* Header */
  --header-bg: rgba(255, 255, 255, 1);
  --header-text: rgba(30, 41, 59, 1);
  --header-border: 1px solid rgba(229, 231, 235, 1);
  --header-create-bg: rgba(222, 89, 71, 1);
  --header-create-color: rgba(255, 255, 255, 1);
  --header-create-border: 1px solid rgba(222, 89, 71, 0.3);
  --header-create-shadow: 0px 1px 4px 0px rgba(0, 0, 0, 0.08);
  --header-bell-bg: rgba(243, 244, 246, 1);
  --header-bell-hover-bg: rgba(53, 54, 63, 1);
  --header-bell-color: rgba(30, 41, 59, 1);

  /* Search */
  --search-bg: rgba(238, 242, 255, 1);
  --search-icon: rgba(71, 85, 105, 1);
  --search-placeholder: rgba(71, 85, 105, 1);
  --search-color: rgba(17, 24, 39, 1);

  /* Tabs */
  --tab-bg: none;
  --tab-color: rgba(71, 85, 105, 1);
  --tab-border: 1px solid rgba(229, 231, 235, 1);
  --tab-hover-color: rgba(204, 204, 204, 1);
  --tab-counter-bg: rgba(238, 242, 255, 1);
  --tab-counter-color: rgba(71, 85, 105, 1);
  --tab-counter-shadow: 0px 1px 4px 0px rgba(0, 0, 0, 0.08);
  --tab-selector-bg: none;
  --tab-active-bg: rgba(238, 242, 255, 1);
  --tab-active-color: rgba(71, 85, 105, 1);
  --tab-counter-active-bg: rgba(222, 89, 71, 1);
  --tab-counter-active-color: rgba(255, 255, 255, 1);
  --tab-counter-active-shadow: 0px 1px 4px 0px rgba(222, 89, 71, 0.2);
  --tab-selector-active-bg: rgba(238, 242, 255, 1);

  /* Chat Room List */
  --chat-list-bg: none;
  --chat-list-divider: 1px solid rgba(0, 0, 0, 0.05);
  --chat-list-time: rgba(131, 131, 131, 1);
  --chat-list-name: rgba(17, 24, 39, 1);
  --chat-list-type: rgba(107, 114, 128, 1);
  --chat-list-members-bg: rgba(243, 244, 246, 1);
  --chat-list-members-icon: rgba(107, 114, 128, 1);
  --chat-list-members-color: rgba(107, 114, 128, 1);
  --chat-list-members-border: 1px dashed rgba(229, 231, 235, 1);
  --chat-list-unread-bg: rgba(222, 89, 71, 1);
  --chat-list-unread-color: rgba(255, 255, 255, 1);
  --chat-list-checked-bg: rgba(222, 89, 71, 1);
  --chat-list-checked-shadow: 0px 1px 4px 0px rgba(222, 89, 71, 0.2);
  --chat-list-checked-color: rgba(255, 255, 255, 1);
  --chat-list-private-bg: rgba(235, 176, 31, 1);
  --chat-list-private-shadow: 0px 1px 4px 0px rgba(235, 176, 31, 0.2);
  --chat-list-private-color: rgba(255, 255, 255, 1);
  --chat-list-hover-bg: rgba(0, 0, 0, 0.02);
  --chat-list-selected-bg: rgba(222, 89, 71, 0.08);

  /* Profile Bottom Button */
  --profile-bottom-wrapper-bg: rgba(255, 255, 255, 1);
  --profile-bottom-wrapper-border: 1px solid rgba(229, 231, 235, 1);
  --profile-bottom-bg: radial-gradient(
    50% 50% at 50% 50%,
    #af2631 0%,
    #de5947 100%
  );
  --profile-bottom-color: rgba(255, 255, 255, 1);

  /* ChatRoom */
  --chatroom-bg: rgba(249, 250, 251, 1);
  --chatroom-bg-mono: rgba(255, 255, 255, 0.5);
  --chatroom-header-bg: rgba(255, 255, 255, 1);
  --chatroom-header-back-bg: rgba(243, 244, 246, 1);
  --chatroom-header-back-border: 1px solid rgba(229, 231, 235, 1);
  --chatroom-header-back-color: rgba(75, 85, 99, 1);
  --chatroom-header-name: rgba(17, 24, 39, 1);
  --chatroom-header-type: rgba(107, 114, 128, 1);
  --chatroom-header-menu-bg: rgba(243, 244, 246, 1);
  --chatroom-header-menu-border: 1px solid rgba(229, 231, 235, 1);
  --chatroom-header-menu-color: rgba(75, 85, 99, 1);
  --chatroom-message-group-divider: rgba(0, 0, 0, 0.08);
  --chatroom-message-group-color: rgba(107, 114, 128, 1);
  --chatroom-message-name: rgba(17, 24, 39, 1);
  --chatroom-message-time: rgba(107, 114, 128, 1);
  --chatroom-message-menu-icon: rgba(156, 163, 175, 1);
  --chatroom-message-text: rgba(17, 24, 39, 1);
  --chatroom-message-receiver-bg: rgba(243, 244, 246, 1);
  --chatroom-message-sender-bg: rgba(222, 89, 71, 0.08);
  --chatroom-system-bg: rgba(243, 244, 246, 1);
  --chatroom-system-border: 1px solid rgba(229, 231, 235, 1);
  --chatroom-system-color: rgba(107, 114, 128, 1);
  --chatroom-system-time: rgba(156, 163, 175, 1);
  --chatroom-input-bg: rgba(255, 255, 255, 1);
  --chatroom-input-border: 1px solid rgba(229, 231, 235, 1);
  --chatroom-input-focus: 1px solid rgba(222, 89, 71, 0.4);
  --chatroom-input-shadow: 0 0 0 3px rgba(222, 89, 71, 0.1);
  --chatroom-input-action-bg: radial-gradient(
    50% 50% at 50% 50%,
    #af2631 0%,
    #de5947 100%
  );
  --chatroom-input-action-color: rgba(255, 255, 255, 1);
  --chatroom-input-image-icon: rgba(107, 114, 128, 1);
  --chatroom-input-emoji-icon: rgba(107, 114, 128, 1);
  --chatroom-input-placeholder: rgba(156, 163, 175, 1);
  --chatroom-input-color: rgba(17, 24, 39, 1);

  /* ChatRoom Menu */
  --chatroom-menu-bg: rgba(255, 255, 255, 1);
  --chatroom-menu-border: 1px solid rgba(229, 231, 235, 1);
  --chatroom-menu-color: rgba(17, 24, 39, 1);
  --chatroom-menu-hover-bg: rgba(243, 244, 246, 1);

  /* Create Room Modal */
  --create-room-modal-bg: rgba(255, 255, 255, 1);
  --create-room-modal-border: 1px solid rgba(229, 231, 235, 1);
  --create-room-cancel-bg: rgba(243, 244, 246, 1);
  --create-room-cancel-color: rgba(75, 85, 99, 1);
  --create-room-action-bg: rgba(222, 89, 71, 1);
  --create-room-action-color: rgba(255, 255, 255, 1);

  /* Invite Modal */
  --invite-modal-bg: var(--chat-list-members-bg);
  --invite-modal-border: 1px solid rgba(229, 231, 235, 1);
  --invite-modal-header-secondary: var(--chatroom-header-type);
  --invite-modal-header-close-hover: rgba(243, 244, 246, 1);
  --invite-modal-tab-bg: rgba(243, 244, 246, 1);
  --invite-modal-tab-color-active: var(--chat-list-unread-bg);
  --invite-input-bg: rgba(255, 255, 255, 1);
  --invite-input-border: 1px solid rgba(229, 231, 235, 1);
  --invite-input-icon: var(--chatroom-message-time);
  --invite-input-placeholder: var(--chatroom-message-time);
  --invite-input-focus-ring: rgba(222, 89, 71, 0.4);
  --invite-user-item-bg: var(--invite-input-bg);
  --invite-user-item-hover-bg: rgba(243, 244, 246, 1);
  --invite-user-secondary-text: var(--invite-modal-header-secondary);
  --invite-action-gradient: linear-gradient(
    to right,
    var(--chat-list-unread-bg),
    rgba(222, 89, 71, 0.7)
  );
  --invite-action-shadow: 0 10px 15px -3px rgba(222, 89, 71, 0.3),
    0 4px 6px -4px rgba(222, 89, 71, 0.3);
  --invite-button-bg: rgba(222, 89, 71, 0.1);
  --invite-button-border: 1px solid rgba(222, 89, 71, 0.2);
  --invite-button-color: var(--chat-list-unread-bg);
  --invite-button-hover-bg: rgba(222, 89, 71, 0.2);
  --invite-alert-error-bg: rgba(222, 89, 71, 0.1);
  --invite-alert-error-border: 1px solid rgba(222, 89, 71, 0.4);
  --invite-alert-error-color: var(--chat-list-unread-bg);
  --invite-alert-success-bg: rgba(16, 185, 129, 0.1);
  --invite-alert-success-border: 1px solid rgba(16, 185, 129, 0.4);
  --invite-alert-success-color: rgba(16, 185, 129, 1);

  /* View Members Modal */
  --view-members-modal-bg: rgba(255, 255, 255, 1);
  --view-members-modal-border: 1px solid rgba(229, 231, 235, 1);
  --view-members-modal-header-title: rgba(17, 24, 39, 1);
  --view-members-modal-header-description: rgba(107, 114, 128, 1);
  --view-members-modal-header-icon: rgba(17, 24, 39, 1);
  --view-members-modal-search-bg: rgba(255, 255, 255, 1);
  --view-members-modal-search-border: 1px solid rgba(229, 231, 235, 1);
  --view-members-modal-search-placeholder: rgba(156, 163, 175, 1);
  --view-members-modal-search-color: rgba(17, 24, 39, 1);
  --view-members-modal-search-focus-ring: rgba(222, 89, 71, 0.4);
  --view-members-modal-member-item-bg: rgba(255, 255, 255, 1);
  --view-members-modal-member-item-hover-bg: rgba(243, 244, 246, 1);
  --view-members-modal-member-item-name: rgba(17, 24, 39, 1);
  --view-members-modal-member-item-description: rgba(107, 114, 128, 1);
  --view-members-modal-member-item-status: rgba(107, 114, 128, 1);
  --view-members-modal-member-item-crown: rgba(255, 215, 0, 1);

  /* Online Members Sidebar */
  --online-members-bg: rgba(255, 255, 255, 1);
  --online-members-border: 1px solid rgba(229, 231, 235, 1);
  --online-members-header-title: rgba(17, 24, 39, 1);
  --online-members-header-description: rgba(107, 114, 128, 1);
  --online-members-header-status: rgba(16, 185, 129, 1);
  --online-members-header-border: 1px solid rgba(229, 231, 235, 1);
  --online-members-user-item-bg: transparent;
  --online-members-user-item-hover-bg: rgba(243, 244, 246, 1);
  --online-members-user-item-name: rgba(17, 24, 39, 1);
  --online-members-user-item-description: rgba(107, 114, 128, 1);
  --online-members-user-item-status: rgba(16, 185, 129, 1);
  --online-members-user-item-star: rgba(255, 215, 0, 1);
  --online-members-user-item-active-bg: rgba(222, 89, 71, 0.08);
  --online-members-user-item-active-border: 1px solid rgba(222, 89, 71, 0.5);
  --online-members-user-item-you: rgba(222, 89, 71, 1);
  --online-members-top-user-title: rgba(107, 114, 128, 1);
  --online-members-top-user-description: rgba(107, 114, 128, 1);
  --online-members-total-messages: rgba(107, 114, 128, 1);
  --online-members-total-messages-count: rgba(107, 114, 128, 1);

  /* Profile Page */
  --profile-page-header-action-bg: rgba(243, 244, 246, 1);
  --profile-page-header-action-border: 1px solid rgba(229, 231, 235, 1);
  --profile-page-header-action-color: rgba(75, 85, 99, 1);
  --profile-page-camera-bg: linear-gradient(
    88.3deg,
    rgba(255, 255, 255, 0.9) 0%,
    rgba(255, 255, 255, 0.7) 99.66%
  );
  --profile-page-camera-border: 1px solid rgba(222, 89, 71, 0.3);
  --profile-page-camera-color: rgba(222, 89, 71, 1);
  --profile-page-bg: rgba(249, 250, 251, 1);
  --profile-page-name: rgba(17, 24, 39, 1);
  --profile-page-created-at: rgba(107, 114, 128, 1);
  --profile-page-options-bg: rgba(244, 248, 255, 1);
  --profile-page-options-color: rgba(17, 24, 39, 1);
  --profile-page-options-icon-bg: rgb(222, 226, 235);
  --profile-page-options-icon-color: rgba(107, 114, 128, 1);
  --profile-page-options-arrow: rgba(156, 163, 175, 1);
  --profile-page-actions-bg: rgba(243, 244, 246, 1);
  --profile-page-actions-color: rgb(30, 34, 43);
  --profile-page-actions-icon: rgba(222, 89, 71, 1);

  /* Profile Card */
  --profile-card-activity-points-icon: var(--chat-list-unread-bg);
  --profile-card-action-shadow-color: rgba(222, 89, 71, 0.1);
  --sidebar-bg: var(--bg);
  --card-bg: var(--chat-list-members-bg);
  --border-subtle: var(--chatroom-header-back-border);
  --message-other: var(--chatroom-message-receiver-bg);
  --yellow-500: #eab308;
  --profile-message-bg: rgba(222, 89, 71, 0.1);
  --profile-view-bg: rgba(107, 114, 128, 0.1);

  /* Invite Notification */
  --invite-notification-accent-base: var(--chat-list-unread-bg);
  --invite-notification-accent-light: rgba(238, 115, 96, 1);
  --invite-notification-modal-bg: var(--bg);
  --invite-notification-modal-border: var(--chatroom-header-back-border);
  --invite-notification-card-hover-bg: var(--chat-list-hover-bg);
  --invite-notification-footer-bg: var(--chatroom-input-bg);
  --invite-notification-decline-bg: #eef2ff;
  --invite-notification-decline-hover-bg: #e0e7ff;
  --invite-notification-text-white: var(--header-text);
  --invite-notification-text-secondary: var(--tab-color);
  --invite-notification-text-tertiary: var(--chatroom-message-time);
  --invite-notification-decline-text: #475569;
  --invite-notification-dm-badge-bg: rgba(222, 89, 71, 0.1);
  --invite-notification-dm-badge-border: rgba(222, 89, 71, 0.2);
  --invite-notification-dm-badge-color: var(--invite-notification-accent-base);
  --invite-notification-accent-gradient: radial-gradient(
    50% 50% at 50% 50%,
    #af2631 0%,
    #de5947 100%
  );

  /* Room Profile Page */
  --room-profile-tab-color: rgba(107, 114, 128, 1);
  --room-profile-tab-active-color: rgba(17, 24, 39, 1);
  --room-profile-tab-indicator-bg: rgba(222, 89, 71, 1);
  --room-profile-share-bg: rgba(222, 89, 71, 1);
  --room-profile-share-color: rgba(255, 255, 255, 1);
  --room-profile-default-gradient: linear-gradient(
    135deg,
    #667eea 0%,
    #764ba2 100%
  );

  /* Admin Dashboard */
  --admin-header-bg: var(--header-bg);
  --admin-header-border: var(--header-border);
  --admin-back-button-bg: var(--card-bg);
  --admin-back-button-hover: var(--message-other);
  --admin-refresh-button-bg: rgba(222, 89, 71, 0.1);
  --admin-refresh-button-hover: rgba(222, 89, 71, 0.2);
  --admin-refresh-button-border: rgba(222, 89, 71, 0.3);
  --admin-refresh-button-color: rgba(222, 89, 71, 1);
  --admin-tab-active: rgba(222, 89, 71, 1);
  --admin-stat-card-bg: var(--sidebar-bg);
  --admin-stat-card-border: var(--border-subtle);
  --admin-stat-card-hover: rgba(0, 0, 0, 0.02);
  --admin-stat-icon-reports-bg: rgba(251, 146, 60, 0.1);
  --admin-stat-icon-reports-color: rgba(251, 146, 60, 1);
  --admin-stat-icon-users-bg: rgba(222, 89, 71, 0.1);
  --admin-stat-icon-users-color: rgba(222, 89, 71, 1);
  --admin-stat-icon-mutes-bg: rgba(234, 179, 8, 0.1);
  --admin-stat-icon-mutes-color: rgba(234, 179, 8, 1);
  --admin-stat-icon-blocks-bg: rgba(239, 68, 68, 0.1);
  --admin-stat-icon-blocks-color: rgba(239, 68, 68, 1);
  --admin-tab-border: var(--border-subtle);
  --admin-tab-active-color: rgba(222, 89, 71, 1);
  --admin-tab-inactive-color: var(--text-secondary);
  --admin-action-button-bg: rgba(222, 89, 71, 0.1);
  --admin-action-button-hover: rgba(222, 89, 71, 0.2);
  --admin-action-button-border: rgba(222, 89, 71, 0.2);
  --admin-mute-bg: rgba(234, 179, 8, 0.05);
  --admin-mute-border: rgba(234, 179, 8, 0.3);
  --admin-mute-button-bg: rgba(234, 179, 8, 0.1);
  --admin-mute-button-hover: rgba(234, 179, 8, 0.2);
  --admin-mute-button-color: rgba(234, 179, 8, 1);
  --admin-block-bg: rgba(239, 68, 68, 0.05);
  --admin-block-border: rgba(239, 68, 68, 0.3);
  --admin-block-button-bg: rgba(239, 68, 68, 0.1);
  --admin-block-button-hover: rgba(239, 68, 68, 0.2);
  --admin-block-button-color: rgba(239, 68, 68, 1);
  --admin-unmute-button-bg: rgba(34, 197, 94, 0.1);
  --admin-unmute-button-hover: rgba(34, 197, 94, 0.2);
  --admin-unmute-button-color: rgba(34, 197, 94, 1);
  --admin-unblock-button-bg: rgba(34, 197, 94, 0.1);
  --admin-unblock-button-hover: rgba(34, 197, 94, 0.2);
  --admin-unblock-button-color: rgba(34, 197, 94, 1);
  --admin-report-item-bg: var(--card-bg);
  --admin-report-item-border: var(--border-subtle);
  --admin-report-item-hover: rgba(222, 89, 71, 0.15);
  --admin-status-pending-bg: rgba(251, 146, 60, 0.1);
  --admin-status-pending-color: rgba(251, 146, 60, 1);
  --admin-status-resolved-bg: rgba(34, 197, 94, 0.1);
  --admin-status-resolved-color: rgba(34, 197, 94, 1);
  --admin-status-dismissed-bg: var(--card-bg);
  --admin-status-dismissed-color: var(--text-secondary);

  /* Emoji Picker */
  --emoji-picker-bg: rgba(243, 244, 246, 1);
  --emoji-picker-border: rgba(229, 231, 235, 1);
  --emoji-category-bg: rgba(229, 231, 235, 1);
  --emoji-category-hover-bg: rgba(209, 213, 219, 1);
  --emoji-category-text: rgba(107, 114, 128, 1);
  --emoji-button-hover-bg: rgba(229, 231, 235, 1);

  /* Loading/Splash Screen */
  --loading-bg: rgba(249, 250, 251, 1);
  --loading-icon: rgba(156, 163, 175, 1);

  /* Proxy Auth */
  --proxy-auth-bg: rgba(249, 250, 251, 1);
  --proxy-auth-icon-bg: rgba(59, 130, 246, 0.1);
  --proxy-auth-icon-border: rgba(59, 130, 246, 0.2);
  --proxy-auth-icon-color: rgba(59, 130, 246, 1);
  --proxy-auth-progress-bg: rgba(59, 130, 246, 1);
  --proxy-auth-progress-success: rgba(34, 197, 94, 1);
  --proxy-auth-ring-success: rgba(34, 197, 94, 0.5);
  --proxy-auth-border-success: rgba(34, 197, 94, 1);
  --proxy-auth-avatar-bg: rgba(255, 255, 255, 0.7);
  --proxy-auth-success-overlay: rgba(0, 0, 0, 0.1);
  --proxy-auth-text: rgba(17, 24, 39, 1);

  /* Media Library */
  --media-library-accent: rgba(222, 89, 71, 1);
  --media-library-accent-shadow: rgba(222, 89, 71, 0.2);
  --media-library-backdrop: rgba(0, 0, 0, 0.5);
  --media-library-tab-bg: rgba(243, 244, 246, 0.5);
  --media-library-hover-bg: rgba(0, 0, 0, 0.05);
  --media-library-text-primary: rgba(17, 24, 39, 1);
  --media-library-text-secondary: rgba(107, 114, 128, 1);
  --media-library-text-tertiary: rgba(156, 163, 175, 1);
  --media-library-overlay-gradient: linear-gradient(
    to top,
    rgba(0, 0, 0, 0.6),
    transparent,
    transparent
  );

  /* Misc */
  --gray-500: rgba(107, 114, 128, 1);
  --gray-300: rgba(209, 213, 219, 1);
  --content-card-bg: rgba(23, 23, 23, 1);
}

/* ==================== DARK MODE ==================== */

@media (prefers-color-scheme: dark) {
  :root {
    /* Core Colors */
    --bg: rgba(23, 23, 23, 1);

    /* Text Colors */
    --text-primary: rgba(255, 255, 255, 1);
    --text-secondary: rgba(124, 139, 159, 1);
    --text-tertiary: rgba(153, 160, 174, 1);
    --text-quaternary: rgba(131, 131, 131, 1);
    --text-inverse: rgba(23, 23, 23, 1);

    /* Background Colors */
    --bg-primary: rgba(23, 23, 23, 1);
    --bg-secondary: rgba(23, 23, 23, 1);
    --bg-tertiary: rgba(30, 31, 37, 1);
    --bg-quaternary: rgba(134, 134, 134, 0.19);
    --bg-card: rgba(30, 31, 37, 1);
    --bg-hover: rgba(255, 255, 255, 0.05);
    --bg-active: rgba(255, 255, 255, 0.1);
    --bg-input: rgba(183, 183, 183, 0.04);
    --bg-modal: rgba(23, 23, 23, 1);

    /* Border Colors */
    --border-primary: 1px solid rgba(98, 98, 98, 0.5);
    --border-secondary: 1px solid rgba(47, 48, 57, 1);
    --border-tertiary: 1px solid rgba(98, 98, 98, 0.2);
    --border-subtle: 1px solid rgba(98, 98, 98, 0.2);
    --border-divider: 1px solid rgba(255, 255, 255, 0.05);
    --border-dashed: 1px dashed rgba(23, 23, 23, 1);
    --border-focus: 1px solid rgba(98, 98, 98, 0.8);

    /* Header */
    --header-bg: rgba(23, 23, 23, 1);
    --header-text: rgba(255, 255, 255, 1);
    --header-border: 1px solid rgba(137, 140, 143, 0.5);
    --header-create-bg: rgba(222, 89, 71, 1);
    --header-create-color: rgba(255, 255, 255, 1);
    --header-create-border: 1px solid rgba(255, 96, 96, 1);
    --header-create-shadow: 0px 1px 4px 0px rgba(0, 0, 0, 0.04);
    --header-bell-bg: rgb(55, 56, 58);
    --header-bell-hover-bg: rgba(55, 57, 65, 1);
    --header-bell-color: rgba(255, 255, 255, 1);

    /* Search */
    --search-bg: rgba(134, 134, 134, 0.19);
    --search-icon: rgba(167, 167, 167, 1);
    --search-placeholder: rgba(167, 167, 167, 1);
    --search-color: rgba(255, 255, 255, 1);

    /* Tabs */
    --tab-bg: none;
    --tab-color: rgba(137, 140, 143, 1);
    --tab-border: 1px solid rgba(98, 98, 98, 0.5);
    --tab-hover-color: rgba(204, 204, 204, 1);
    --tab-counter-bg: rgba(197, 201, 203, 1);
    --tab-counter-color: rgba(23, 23, 23, 1);
    --tab-counter-shadow: 0px 1px 4px 0px rgba(0, 0, 0, 0.04);
    --tab-active-bg: rgba(134, 134, 134, 0.25);
    --tab-active-color: rgba(205, 205, 205, 1);
    --tab-counter-active-bg: rgba(222, 89, 71, 1);
    --tab-counter-active-color: rgba(255, 255, 255, 1);
    --tab-counter-active-shadow: 0px 1px 4px 0px rgba(0, 0, 0, 0.04);
    --tab-selector-active-bg: rgba(134, 134, 134, 0.25);

    /* Chat Room List */
    --chat-list-bg: none;
    --chat-list-name: rgba(233, 233, 233, 1);
    --chat-list-divider: 1px solid rgba(255, 255, 255, 0.05);
    --chat-list-time: rgba(131, 131, 131, 1);
    --chat-list-type: rgba(169, 171, 173, 1);
    --chat-list-members-bg: rgba(30, 31, 37, 1);
    --chat-list-members-icon: rgba(255, 255, 255, 0.46);
    --chat-list-members-color: rgba(116, 116, 116, 1);
    --chat-list-members-border: 1px dashed rgba(23, 23, 23, 1);
    --chat-list-unread-bg: rgba(222, 89, 71, 1);
    --chat-list-unread-color: rgba(255, 255, 255, 1);
    --chat-list-checked-bg: rgba(222, 89, 71, 1);
    --chat-list-checked-shadow: 0px 1px 4px 0px rgba(0, 0, 0, 0.04);
    --chat-list-checked-color: rgba(255, 255, 255, 1);
    --chat-list-private-bg: rgba(235, 176, 31, 1);
    --chat-list-private-shadow: 0px 1px 4px 0px rgba(0, 0, 0, 0.04);
    --chat-list-private-color: rgba(23, 23, 23, 1);
    --chat-list-hover-bg: rgba(255, 255, 255, 0.05);
    --chat-list-selected-bg: rgba(255, 255, 255, 0.1);

    /* Profile Bottom Button */
    --profile-bottom-wrapper-bg: rgba(183, 183, 183, 0.04);
    --profile-bottom-wrapper-border: 1px solid rgba(98, 98, 98, 0.5);
    --profile-bottom-bg: radial-gradient(
      50% 50% at 50% 50%,
      #af2631 0%,
      #de5947 100%
    );
    --profile-bottom-color: rgba(255, 255, 255, 1);

    /* ChatRoom */
    --chatroom-bg: rgba(23, 23, 23, 1);
    --chatroom-bg-mono: rgba(0, 0, 0, 0.2);
    --chatroom-header-bg: rgb(10, 10, 10);
    --chatroom-header-back-bg: rgba(228, 228, 228, 0.15);
    --chatroom-header-back-border: 1px solid rgba(98, 98, 98, 0.2);
    --chatroom-header-back-color: rgba(255, 255, 255, 1);
    --chatroom-header-name: rgba(233, 233, 233, 1);
    --chatroom-header-type: rgba(124, 139, 159, 1);
    --chatroom-header-menu-bg: rgba(228, 228, 228, 0.15);
    --chatroom-header-menu-border: 1px solid rgba(98, 98, 98, 0.2);
    --chatroom-header-menu-color: rgba(255, 255, 255, 1);
    --chatroom-message-group-divider: rgba(255, 255, 255, 0.09);
    --chatroom-message-group-color: rgba(107, 124, 147, 1);
    --chatroom-message-name: rgba(233, 233, 233, 1);
    --chatroom-message-time: rgba(124, 139, 159, 1);
    --chatroom-message-menu-icon: rgba(107, 124, 147, 1);
    --chatroom-message-text: rgba(229, 231, 235, 1);
    --chatroom-message-receiver-bg: rgba(0, 0, 0, 1);
    --chatroom-message-sender-bg: rgba(52, 54, 61, 1);
    --chatroom-system-bg: rgba(255, 255, 255, 0.05);
    --chatroom-system-border: 1px solid rgba(124, 139, 159, 0.1);
    --chatroom-system-color: rgba(124, 139, 159, 1);
    --chatroom-system-time: rgba(124, 139, 159, 1);
    --chatroom-input-bg: rgba(43, 43, 43, 0.5);
    --chatroom-input-border: 1px solid rgba(184, 184, 184, 0.1);
    --chatroom-input-focus: 1px solid rgba(98, 98, 98, 0.8);
    --chatroom-input-shadow: 0 0 0 1px #de59473d;
    --chatroom-input-action-bg: radial-gradient(
      50% 50% at 50% 50%,
      #af2631 0%,
      #de5947 100%
    );
    --chatroom-input-action-color: rgba(255, 255, 255, 1);
    --chatroom-input-image-icon: rgba(153, 160, 174, 1);
    --chatroom-input-emoji-icon: rgba(153, 160, 174, 1);
    --chatroom-input-placeholder: rgba(153, 160, 174, 1);
    --chatroom-input-color: rgba(255, 255, 255, 1);

    /* ChatRoom Menu */
    --chatroom-menu-bg: rgba(23, 23, 23, 1);
    --chatroom-menu-border: 1px solid rgba(98, 98, 98, 0.5);
    --chatroom-menu-color: rgba(255, 255, 255, 1);
    --chatroom-menu-hover-bg: rgba(255, 255, 255, 0.05);

    /* Create Room Modal */
    --create-room-modal-bg: rgba(23, 23, 23, 1);
    --create-room-modal-border: 1px solid rgba(48, 48, 48, 0.5);
    --create-room-cancel-bg: rgba(30, 31, 37, 1);
    --create-room-cancel-color: rgba(116, 116, 116, 1);
    --create-room-action-bg: rgba(222, 89, 71, 1);
    --create-room-action-color: rgba(249, 235, 255, 1);

    /* Invite Modal */
    --invite-modal-bg: var(--chat-list-members-bg);
    --invite-modal-border: 1px solid rgba(47, 48, 57, 1);
    --invite-modal-header-secondary: var(--chatroom-header-type);
    --invite-modal-header-close-hover: rgba(47, 48, 57, 1);
    --invite-modal-tab-bg: rgba(40, 41, 50, 0.5);
    --invite-modal-tab-color-active: var(--chat-list-unread-bg);
    --invite-input-bg: rgba(23, 23, 23, 1);
    --invite-input-border: 1px solid rgba(47, 48, 57, 1);
    --invite-input-icon: var(--chatroom-message-time);
    --invite-input-placeholder: var(--chatroom-message-time);
    --invite-input-focus-ring: rgba(222, 89, 71, 0.4);
    --invite-user-item-bg: var(--invite-input-bg);
    --invite-user-item-hover-bg: rgba(47, 48, 57, 1);
    --invite-user-secondary-text: var(--invite-modal-header-secondary);
    --invite-action-gradient: linear-gradient(
      to right,
      var(--chat-list-unread-bg),
      rgba(222, 89, 71, 0.7)
    );
    --invite-action-shadow: 0 10px 15px -3px rgba(222, 89, 71, 0.3),
      0 4px 6px -4px rgba(222, 89, 71, 0.3);
    --invite-button-bg: rgba(222, 89, 71, 0.1);
    --invite-button-border: 1px solid rgba(222, 89, 71, 0.2);
    --invite-button-color: var(--chat-list-unread-bg);
    --invite-button-hover-bg: rgba(222, 89, 71, 0.2);
    --invite-alert-error-bg: rgba(222, 89, 71, 0.1);
    --invite-alert-error-border: 1px solid rgba(222, 89, 71, 0.4);
    --invite-alert-error-color: var(--chat-list-unread-bg);
    --invite-alert-success-bg: rgba(16, 185, 129, 0.1);
    --invite-alert-success-border: 1px solid rgba(16, 185, 129, 0.4);
    --invite-alert-success-color: rgba(16, 185, 129, 1);

    /* View Members Modal */
    --view-members-modal-bg: rgba(23, 23, 23, 1);
    --view-members-modal-border: 1px solid rgba(48, 48, 48, 0.5);
    --view-members-modal-header-title: rgba(233, 233, 233, 1);
    --view-members-modal-header-description: rgba(124, 139, 159, 1);
    --view-members-modal-header-icon: rgba(233, 233, 233, 1);
    --view-members-modal-search-bg: rgba(23, 23, 23, 1);
    --view-members-modal-search-border: 1px solid rgba(47, 48, 57, 1);
    --view-members-modal-search-placeholder: rgba(153, 160, 174, 1);
    --view-members-modal-search-color: rgba(255, 255, 255, 1);
    --view-members-modal-search-focus-ring: rgba(222, 89, 71, 0.4);
    --view-members-modal-member-item-bg: rgba(23, 23, 23, 1);
    --view-members-modal-member-item-hover-bg: rgba(47, 48, 57, 1);
    --view-members-modal-member-item-name: rgba(233, 233, 233, 1);
    --view-members-modal-member-item-description: rgba(124, 139, 159, 1);
    --view-members-modal-member-item-status: rgba(124, 139, 159, 1);
    --view-members-modal-member-item-crown: rgba(255, 215, 0, 1);

    /* Online Members Sidebar */
    --online-members-bg: rgba(23, 23, 23, 1);
    --online-members-border: 1px solid rgba(98, 98, 98, 0.2);
    --online-members-header-title: rgba(233, 233, 233, 1);
    --online-members-header-description: rgba(124, 139, 159, 1);
    --online-members-header-status: rgba(16, 185, 129, 1);
    --online-members-header-border: 1px solid rgba(255, 255, 255, 0.05);
    --online-members-user-item-bg: transparent;
    --online-members-user-item-hover-bg: rgba(255, 255, 255, 0.05);
    --online-members-user-item-name: rgba(233, 233, 233, 1);
    --online-members-user-item-description: rgba(124, 139, 159, 1);
    --online-members-user-item-status: rgba(16, 185, 129, 1);
    --online-members-user-item-star: rgba(255, 215, 0, 1);
    --online-members-user-item-active-bg: rgba(255, 255, 255, 0.08);
    --online-members-user-item-active-border: 1px solid rgba(222, 89, 71, 0.5);
    --online-members-user-item-you: rgba(222, 89, 71, 1);
    --online-members-top-user-title: rgba(124, 139, 159, 1);
    --online-members-top-user-description: rgba(124, 139, 159, 1);
    --online-members-total-messages: rgba(124, 139, 159, 1);
    --online-members-total-messages-count: rgba(124, 139, 159, 1);

    /* Profile Page */
    --profile-page-header-action-bg: rgba(228, 228, 228, 0.15);
    --profile-page-header-action-border: 1px solid rgba(184, 184, 184, 0.1);
    --profile-page-header-action-color: rgba(255, 255, 255, 1);
    --profile-page-camera-bg: linear-gradient(
      88.3deg,
      rgba(255, 255, 255, 0.2407) 0%,
      rgba(255, 255, 255, 0.1276) 99.66%
    );
    --profile-page-camera-border: 1px solid rgba(255, 255, 255, 0.42);
    --profile-page-camera-color: rgba(255, 255, 255, 1);
    --profile-page-bg: rgba(23, 23, 23, 1);
    --profile-page-name: rgba(233, 233, 233, 1);
    --profile-page-created-at: rgba(255, 255, 255, 0.5);
    --profile-page-options-bg: rgba(255, 255, 255, 0.06);
    --profile-page-options-color: rgba(228, 228, 228, 1);
    --profile-page-options-icon-bg: rgba(255, 255, 255, 0.16);
    --profile-page-options-icon-color: rgba(151, 151, 151, 1);
    --profile-page-options-arrow: rgba(255, 255, 255, 0.3);
    --profile-page-actions-bg: rgba(31, 35, 38, 1);
    --profile-page-actions-color: rgba(224, 228, 233, 1);
    --profile-page-actions-icon: rgba(204, 229, 255, 1);

    /* Profile Card */
    --profile-card-activity-points-icon: var(--chat-list-unread-bg);
    --profile-card-action-shadow-color: rgba(222, 89, 71, 0.1);
    --sidebar-bg: var(--bg);
    --card-bg: var(--chat-list-members-bg);
    --border-subtle: var(--chatroom-header-back-border);
    --message-other: var(--chatroom-message-receiver-bg);
    --yellow-500: #eab308;
    --profile-message-bg: rgba(222, 89, 71, 0.5);
    --profile-view-bg: rgba(255, 255, 255, 0.16);

    /* Invite Notification */
    --invite-notification-accent-base: var(--chat-list-unread-bg);
    --invite-notification-accent-light: rgba(238, 115, 96, 1);
    --invite-notification-modal-bg: var(--bg);
    --invite-notification-modal-border: var(--chatroom-header-back-border);
    --invite-notification-card-hover-bg: var(--chat-list-hover-bg);
    --invite-notification-footer-bg: var(--chatroom-input-bg);
    --invite-notification-decline-bg: #1e1f24;
    --invite-notification-decline-hover-bg: #2b2d36;
    --invite-notification-text-white: var(--header-text);
    --invite-notification-text-secondary: var(--tab-color);
    --invite-notification-text-tertiary: var(--chatroom-message-time);
    --invite-notification-decline-text: rgba(250, 250, 250, 1);
    --invite-notification-dm-badge-bg: rgba(222, 89, 71, 0.1);
    --invite-notification-dm-badge-border: rgba(222, 89, 71, 0.2);
    --invite-notification-dm-badge-color: var(
      --invite-notification-accent-base
    );
    --invite-notification-accent-gradient: radial-gradient(
      50% 50% at 50% 50%,
      #af2631 0%,
      #de5947 100%
    );

    /* Room Profile Page */
    --room-profile-member-item-divider: 1px solid rgba(255, 255, 255, 0.05);

    /* Admin Dashboard */
    --admin-header-bg: var(--header-bg);
    --admin-header-border: var(--header-border);
    --admin-back-button-bg: var(--card-bg);
    --admin-back-button-hover: var(--message-other);
    --admin-refresh-button-bg: rgba(222, 89, 71, 0.1);
    --admin-refresh-button-hover: rgba(222, 89, 71, 0.2);
    --admin-refresh-button-border: rgba(222, 89, 71, 0.3);
    --admin-refresh-button-color: rgba(222, 89, 71, 1);
    --admin-tab-active: rgba(222, 89, 71, 1);
    --admin-stat-card-bg: var(--sidebar-bg);
    --admin-stat-card-border: var(--border-subtle);
    --admin-stat-card-hover: rgba(255, 255, 255, 0.02);
    --admin-stat-icon-reports-bg: rgba(251, 146, 60, 0.1);
    --admin-stat-icon-reports-color: rgba(251, 146, 60, 1);
    --admin-stat-icon-users-bg: rgba(222, 89, 71, 0.1);
    --admin-stat-icon-users-color: rgba(222, 89, 71, 1);
    --admin-stat-icon-mutes-bg: rgba(234, 179, 8, 0.1);
    --admin-stat-icon-mutes-color: rgba(234, 179, 8, 1);
    --admin-stat-icon-blocks-bg: rgba(239, 68, 68, 0.1);
    --admin-stat-icon-blocks-color: rgba(239, 68, 68, 1);
    --admin-tab-border: var(--border-subtle);
    --admin-tab-active-color: rgba(222, 89, 71, 1);
    --admin-tab-inactive-color: var(--text-secondary);
    --admin-action-button-bg: rgba(222, 89, 71, 0.1);
    --admin-action-button-hover: rgba(222, 89, 71, 0.2);
    --admin-action-button-border: rgba(222, 89, 71, 0.2);
    --admin-mute-bg: rgba(234, 179, 8, 0.05);
    --admin-mute-border: rgba(234, 179, 8, 0.3);
    --admin-mute-button-bg: rgba(234, 179, 8, 0.1);
    --admin-mute-button-hover: rgba(234, 179, 8, 0.2);
    --admin-mute-button-color: rgba(234, 179, 8, 1);
    --admin-block-bg: rgba(239, 68, 68, 0.05);
    --admin-block-border: rgba(239, 68, 68, 0.3);
    --admin-block-button-bg: rgba(239, 68, 68, 0.1);
    --admin-block-button-hover: rgba(239, 68, 68, 0.2);
    --admin-block-button-color: rgba(239, 68, 68, 1);
    --admin-unmute-button-bg: rgba(34, 197, 94, 0.1);
    --admin-unmute-button-hover: rgba(34, 197, 94, 0.2);
    --admin-unmute-button-color: rgba(34, 197, 94, 1);
    --admin-unblock-button-bg: rgba(34, 197, 94, 0.1);
    --admin-unblock-button-hover: rgba(34, 197, 94, 0.2);
    --admin-unblock-button-color: rgba(34, 197, 94, 1);
    --admin-report-item-bg: var(--card-bg);
    --admin-report-item-border: var(--border-subtle);
    --admin-report-item-hover: rgba(222, 89, 71, 0.3);
    --admin-status-pending-bg: rgba(251, 146, 60, 0.1);
    --admin-status-pending-color: rgba(251, 146, 60, 1);
    --admin-status-resolved-bg: rgba(34, 197, 94, 0.1);
    --admin-status-resolved-color: rgba(34, 197, 94, 1);
    --admin-status-dismissed-bg: var(--card-bg);
    --admin-status-dismissed-color: var(--text-secondary);

    /* Emoji Picker */
    --emoji-picker-bg: rgba(41, 41, 41, 1);
    --emoji-picker-border: rgba(255, 255, 255, 0.05);
    --emoji-category-bg: rgba(45, 45, 45, 1);
    --emoji-category-hover-bg: rgba(79, 91, 104, 1);
    --emoji-category-text: rgba(168, 179, 207, 1);
    --emoji-button-hover-bg: rgba(45, 45, 45, 1);

    /* Loading/Splash Screen */
    --loading-bg: rgba(23, 23, 23, 1);
    --loading-icon: rgba(156, 163, 175, 1);

    /* Proxy Auth */
    --proxy-auth-bg: rgba(23, 23, 23, 1);
    --proxy-auth-icon-bg: rgba(59, 130, 246, 0.1);
    --proxy-auth-icon-border: rgba(59, 130, 246, 0.2);
    --proxy-auth-icon-color: rgba(59, 130, 246, 1);
    --proxy-auth-progress-bg: rgba(59, 130, 246, 1);
    --proxy-auth-progress-success: rgba(34, 197, 94, 1);
    --proxy-auth-ring-success: rgba(34, 197, 94, 0.5);
    --proxy-auth-border-success: rgba(34, 197, 94, 1);
    --proxy-auth-avatar-bg: rgba(255, 255, 255, 0.5);
    --proxy-auth-success-overlay: rgba(0, 0, 0, 0.1);
    --proxy-auth-text: rgba(255, 255, 255, 1);

    /* Media Library */
    --media-library-accent: rgba(222, 89, 71, 1);
    --media-library-accent-shadow: rgba(222, 89, 71, 0.2);
    --media-library-backdrop: rgba(0, 0, 0, 0.6);
    --media-library-tab-bg: rgba(30, 31, 37, 0.5);
    --media-library-hover-bg: rgba(255, 255, 255, 0.05);
    --media-library-text-primary: rgba(255, 255, 255, 1);
    --media-library-text-secondary: rgba(156, 163, 175, 1);
    --media-library-text-tertiary: rgba(107, 114, 128, 1);
    --media-library-overlay-gradient: linear-gradient(
      to top,
      rgba(0, 0, 0, 0.8),
      transparent,
      transparent
    );

    /* Misc */
    --gray-500: rgba(107, 114, 128, 1);
    --gray-300: rgba(209, 213, 219, 1);
    --content-card-bg: rgba(23, 23, 23, 1);
  }
}

/* ============================================
   COMPONENT STYLES
   ============================================ */

/* Admin Dashboard Styles */
.admin-header {
  background: var(--admin-header-bg);
  border-bottom: var(--admin-header-border);
}

.admin-back-button {
  background: var(--admin-back-button-bg);
  transition: background 0.2s ease;
}

.admin-back-button:hover {
  background: var(--admin-back-button-hover);
}

.admin-refresh-button {
  background: var(--admin-refresh-button-bg);
  border: 1px solid var(--admin-refresh-button-border);
  color: var(--admin-refresh-button-color);
  transition: all 0.2s ease;
  font-weight: 500;
}

.admin-refresh-button:hover:not(:disabled) {
  background: var(--admin-refresh-button-hover);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(222, 89, 71, 0.25);
}

.admin-refresh-button:active:not(:disabled) {
  transform: translateY(0);
  box-shadow: 0 2px 4px rgba(222, 89, 71, 0.2);
}

.admin-header-icon {
  animation: pulse-glow 3s ease-in-out infinite;
}

@keyframes pulse-glow {
  0%,
  100% {
    box-shadow: 0 0 15px rgba(222, 89, 71, 0.4);
  }
  50% {
    box-shadow: 0 0 25px rgba(222, 89, 71, 0.6);
  }
}

.admin-stats-grid {
  display: grid;
  gap: 1rem;
}

.admin-stat-card {
  background: var(--admin-stat-card-bg);
  border: 1px solid var(--admin-stat-card-border);
  transition: all 0.3s ease;
}

.admin-stat-card:hover {
  background: var(--admin-stat-card-hover);
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.admin-stat-icon {
  transition: transform 0.3s ease;
}

.admin-stat-card:hover .admin-stat-icon {
  transform: scale(1.1) rotate(5deg);
}

.admin-stat-icon-reports {
  background: var(--admin-stat-icon-reports-bg);
}

.admin-stat-icon-reports svg {
  color: var(--admin-stat-icon-reports-color);
}

.admin-stat-icon-users {
  background: var(--admin-stat-icon-users-bg);
}

.admin-stat-icon-users svg {
  color: var(--admin-stat-icon-users-color);
}

.admin-stat-icon-mutes {
  background: var(--admin-stat-icon-mutes-bg);
}

.admin-stat-icon-mutes svg {
  color: var(--admin-stat-icon-mutes-color);
}

.admin-stat-icon-blocks {
  background: var(--admin-stat-icon-blocks-bg);
}

.admin-stat-icon-blocks svg {
  color: var(--admin-stat-icon-blocks-color);
}

.admin-tab-content {
  min-height: 300px;
}

.admin-reports-list {
  animation: fadeIn 0.3s ease-in;
}

.admin-report-item {
  background: var(--admin-report-item-bg);
  border: 1px solid var(--admin-report-item-border);
  transition: all 0.3s ease;
}

.admin-report-item:hover {
  border-color: rgba(222, 89, 71, 0.4);
  transform: translateX(4px);
  box-shadow: 0 4px 12px rgba(222, 89, 71, 0.15);
}

.admin-status-badge-pending {
  background: var(--admin-status-pending-bg);
  color: var(--admin-status-pending-color);
  animation: pulse-badge 2s ease-in-out infinite;
}

.admin-status-badge-resolved {
  background: var(--admin-status-resolved-bg);
  color: var(--admin-status-resolved-color);
}

.admin-status-badge-dismissed {
  background: var(--admin-status-dismissed-bg);
  color: var(--admin-status-dismissed-color);
}

@keyframes pulse-badge {
  0%,
  100% {
    opacity: 1;
  }
  50% {
    opacity: 0.7;
  }
}

.admin-users-list {
  animation: fadeIn 0.3s ease-in;
}

.admin-user-item {
  transition: all 0.3s ease;
}

.admin-user-item:hover {
  transform: translateX(4px);
  box-shadow: 0 4px 12px rgba(222, 89, 71, 0.1);
}

.admin-mutes-list {
  animation: fadeIn 0.3s ease-in;
}

.admin-mute-item {
  background: var(--admin-mute-bg);
  border: 1px solid var(--admin-mute-border);
  transition: all 0.3s ease;
}

.admin-mute-item:hover {
  transform: translateX(4px);
  box-shadow: 0 4px 12px rgba(234, 179, 8, 0.2);
}

.admin-blocks-list {
  animation: fadeIn 0.3s ease-in;
}

.admin-block-item {
  background: var(--admin-block-bg);
  border: 1px solid var(--admin-block-border);
  transition: all 0.3s ease;
}

.admin-block-item:hover {
  transform: translateX(4px);
  box-shadow: 0 4px 12px rgba(239, 68, 68, 0.2);
}

.admin-action-button {
  transition: all 0.2s ease;
  position: relative;
  overflow: hidden;
  min-height: 36px;
}

.admin-action-button::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0;
  height: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.1);
  transform: translate(-50%, -50%);
  transition: width 0.3s, height 0.3s;
}

.admin-action-button:hover::before {
  width: 100%;
  height: 100%;
}

.admin-action-button:hover:not(:disabled) {
  transform: translateY(-2px);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

.admin-action-button:active:not(:disabled) {
  transform: translateY(0);
}

.admin-action-button:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.admin-action-button .scale-50 {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 20px;
}

.admin-mute-button {
  background: var(--admin-mute-button-bg);
  color: var(--admin-mute-button-color);
  border-color: var(--admin-mute-button-color);
}

.admin-mute-button:hover:not(:disabled) {
  background: var(--admin-mute-button-hover);
}

.admin-block-button {
  background: var(--admin-block-button-bg);
  color: var(--admin-block-button-color);
  border-color: var(--admin-block-button-color);
}

.admin-block-button:hover:not(:disabled) {
  background: var(--admin-block-button-hover);
}

.admin-unmute-button,
.admin-unblock-button {
  background: var(--admin-unmute-button-bg);
  color: var(--admin-unmute-button-color);
  border-color: var(--admin-unmute-button-color);
}

.admin-unmute-button:hover:not(:disabled),
.admin-unblock-button:hover:not(:disabled) {
  background: var(--admin-unmute-button-hover);
}

.admin-resolve-button {
  background: rgba(34, 197, 94, 0.1);
  color: rgba(34, 197, 94, 1);
  border-color: rgba(34, 197, 94, 0.2);
}

.admin-resolve-button:hover:not(:disabled) {
  background: rgba(34, 197, 94, 0.2);
}

.admin-dismiss-button {
  background: rgba(156, 163, 175, 0.1);
  color: rgba(156, 163, 175, 1);
  border-color: rgba(156, 163, 175, 0.2);
}

.admin-dismiss-button:hover:not(:disabled) {
  background: rgba(156, 163, 175, 0.2);
}

/* Matrix Login Styles */
.matrix-login {
  background: var(--bg);
}

.matrix-login-container {
  animation: slideUp 0.5s ease-out;
}

.matrix-login-logo {
  animation: float 3s ease-in-out infinite;
}

@keyframes slideUp {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes float {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-10px);
  }
}

.matrix-login-modes button {
  position: relative;
  overflow: hidden;
}

.matrix-login-modes button::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0;
  height: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.2);
  transform: translate(-50%, -50%);
  transition: width 0.5s, height 0.5s;
}

.matrix-login-modes button:active::before {
  width: 300px;
  height: 300px;
}

.matrix-login-error {
  animation: shake 0.5s ease-in-out;
}

@keyframes shake {
  0%,
  100% {
    transform: translateX(0);
  }
  10%,
  30%,
  50%,
  70%,
  90% {
    transform: translateX(-5px);
  }
  20%,
  40%,
  60%,
  80% {
    transform: translateX(5px);
  }
}

.matrix-login-submit {
  position: relative;
  overflow: hidden;
}

.matrix-login-submit::before {
  content: "";
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255, 255, 255, 0.2),
    transparent
  );
  transition: left 0.5s;
}

.matrix-login-submit:hover::before {
  left: 100%;
}

.matrix-login-submit:active {
  transform: scale(0.98) !important;
}

.matrix-login input:focus,
.matrix-login textarea:focus {
  box-shadow: var(--shadow-focus);
}

/* Animations */
@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

@keyframes successPulse {
  0% {
    box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.7);
  }
  70% {
    box-shadow: 0 0 0 10px rgba(34, 197, 94, 0);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(34, 197, 94, 0);
  }
}

/* Responsive Styles */
@media (max-width: 640px) {
  .admin-stats-grid {
    grid-template-columns: 1fr;
  }

  .admin-action-button span {
    display: none;
  }

  .admin-user-item,
  .admin-report-item,
  .admin-mute-item,
  .admin-block-item {
    flex-direction: column;
    align-items: flex-start;
    gap: 1rem;
  }

  .admin-user-item > div:last-child,
  .admin-report-item > div:last-child,
  .admin-mute-item > button,
  .admin-block-item > button {
    width: 100%;
    justify-content: center;
  }

  .matrix-login-container {
    padding: 1.5rem;
  }

  .matrix-login-logo {
    padding: 0.75rem;
  }

  .matrix-login-logo svg {
    width: 2rem;
    height: 2rem;
  }
}

/* Global input and textarea font-size to prevent mobile zoom on focus */
input,
textarea,
select {
  font-size: 16px !important;
}