/* Dark Mode Overrides — applied when */
[data-theme="dark"] {
color-scheme: dark;
}
/* ─── Root variable overrides ─── */
[data-theme="dark"] {
--primary: #3b82f6;
--primary-dark: #2563eb;
--dark: #f8fafc;
--text: #f1f5f9;
--muted-text: #94a3b8;
--bg: #0f172a;
--surface: #1e293b;
--muted: #111827;
--border: #334155;
--gray-900: #f1f5f9;
--gray-800: #e2e8f0;
--gray-700: #cbd5e1;
--gray-600: #94a3b8;
--gray-500: #64748b;
--gray-400: #475569;
--gray-300: #334155;
--gray-200: #1e293b;
--gray-100: #0f172a;
--gray-50: #0c1220;
--white: #111827;
--success: #34d399;
--warning: #fbbf24;
--danger: #f87171;
/* dashboard.css vars */
--text-dark: #f1f5f9;
--text-light: #94a3b8;
--bg-light: #0f172a;
--bg-dark: #1e293b;
--border: #334155;
}
/* ─── Body ─── */
[data-theme="dark"] body {
background: #0f172a !important;
color: #e2e8f0;
}
/* ─── Navbar ─── */
[data-theme="dark"] .navbar {
background: rgba(15, 23, 42, 0.92) !important;
backdrop-filter: blur(20px) saturate(180%) !important;
-webkit-backdrop-filter: blur(20px) saturate(180%) !important;
box-shadow: 0 1px 7px rgba(0, 0, 0, 0.3) !important;
border-bottom: none !important;
}
[data-theme="dark"] .nav-container,
[data-theme="dark"] .user-info-nav {
background: transparent !important;
border: none !important;
}
[data-theme="dark"] .tier-badge {
color: #ffffff !important;
border: none !important;
outline: none !important;
box-shadow: none !important;
}
[data-theme="dark"] .logo {
color: #f1f5f9;
}
[data-theme="dark"] .nav-link {
color: #94a3b8;
}
[data-theme="dark"] .nav-link:hover,
[data-theme="dark"] .nav-link.active {
color: #f1f5f9;
}
[data-theme="dark"] .mobile-menu-toggle span {
background: #e2e8f0;
}
/* ─── Cards & Sections ─── */
[data-theme="dark"] section,
[data-theme="dark"] .card,
[data-theme="dark"] .skill-card,
[data-theme="dark"] .topic-card,
[data-theme="dark"] .stat-card,
[data-theme="dark"] .message-card,
[data-theme="dark"] .bookmark-card,
[data-theme="dark"] .conversation-item,
[data-theme="dark"] .auth-container,
[data-theme="dark"] .filter-bar {
background: #1e293b !important;
border-color: #334155 !important;
color: #e2e8f0;
}
/* Skills list wrapper should be transparent — cards inside provide their own background */
[data-theme="dark"] section.skills-list,
[data-theme="dark"] .skills-list {
background: transparent !important;
border: none !important;
box-shadow: none !important;
}
/* Skill cards slightly lighter so they stand out from the page background */
[data-theme="dark"] .skill-card {
background: #253347 !important;
border-color: #334155 !important;
}
[data-theme="dark"] .skill-card:hover,
[data-theme="dark"] .topic-card:hover {
box-shadow: 0 12px 24px rgba(0, 0, 0, 0.4);
}
/* ─── Form Inputs ─── */
[data-theme="dark"] input,
[data-theme="dark"] textarea,
[data-theme="dark"] select {
background: #0f172a !important;
color: #e2e8f0 !important;
border-color: #334155 !important;
}
[data-theme="dark"] input::placeholder,
[data-theme="dark"] textarea::placeholder {
color: #64748b !important;
}
[data-theme="dark"] input:focus,
[data-theme="dark"] textarea:focus,
[data-theme="dark"] select:focus {
border-color: #3b82f6 !important;
box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.2);
}
/* ─── Filter section ─── */
[data-theme="dark"] .filter-section .filter-group label {
color: #94a3b8;
}
[data-theme="dark"] .filter-tag {
background: rgba(59, 130, 246, 0.15);
color: #60a5fa;
}
[data-theme="dark"] .filter-tag button {
color: #60a5fa;
}
[data-theme="dark"] .filter-clear-all {
color: #94a3b8;
}
[data-theme="dark"] .filter-clear-all:hover {
color: #60a5fa;
}
/* ─── Review components ─── */
[data-theme="dark"] .review-card {
background: #0f172a;
border-color: #334155;
}
[data-theme="dark"] .review-text {
color: #cbd5e1;
}
[data-theme="dark"] .review-skill {
color: #94a3b8;
}
[data-theme="dark"] .review-date {
color: #64748b;
}
[data-theme="dark"] .review-author-link {
color: #60a5fa;
}
[data-theme="dark"] .review-modal {
background: #1e293b !important;
}
[data-theme="dark"] .review-modal h2 {
color: #f1f5f9;
}
[data-theme="dark"] .review-modal-skill {
color: #94a3b8;
}
[data-theme="dark"] .star-btn {
color: #475569;
}
[data-theme="dark"] .star-btn.active,
[data-theme="dark"] .star-btn:hover {
color: #f59e0b;
}
[data-theme="dark"] .review-btn {
background: rgba(245, 158, 11, 0.15);
color: #fbbf24;
border-color: rgba(245, 158, 11, 0.3);
}
[data-theme="dark"] .review-btn:hover {
background: rgba(245, 158, 11, 0.25);
}
[data-theme="dark"] .review-error {
background: rgba(239, 68, 68, 0.15);
color: #fca5a5;
}
[data-theme="dark"] input:disabled,
[data-theme="dark"] input[readonly],
[data-theme="dark"] textarea:disabled {
background: #1e293b !important;
color: #64748b !important;
}
/* ─── Buttons ─── */
[data-theme="dark"] .btn-secondary,
[data-theme="dark"] button.outline {
background: #1e293b;
color: #e2e8f0;
border-color: #475569;
}
[data-theme="dark"] .btn-secondary:hover,
[data-theme="dark"] button.outline:hover {
background: #334155;
}
/* ─── Text overrides for hardcoded colors ─── */
[data-theme="dark"] h1,
[data-theme="dark"] h2,
[data-theme="dark"] h3,
[data-theme="dark"] h4,
[data-theme="dark"] h5,
[data-theme="dark"] h6 {
color: #f1f5f9;
}
[data-theme="dark"] p,
[data-theme="dark"] span,
[data-theme="dark"] label,
[data-theme="dark"] li {
color: inherit;
}
[data-theme="dark"] a {
color: #60a5fa;
}
[data-theme="dark"] a:hover {
color: #93bbfc;
}
[data-theme="dark"] .nav-link,
[data-theme="dark"] .nav-link:hover {
color: #94a3b8;
}
[data-theme="dark"] .nav-link:hover,
[data-theme="dark"] .nav-link.active {
color: #f1f5f9;
}
/* ─── Messages page ─── */
/* Container & layout */
[data-theme="dark"] .messages-container {
background: #0f1115 !important;
border: 1px solid #202225;
box-shadow: 0 8px 26px rgba(0, 0, 0, 0.65);
}
[data-theme="dark"] .conversations-list {
background: #2f3136 !important;
border-color: #202225 !important;
}
[data-theme="dark"] .chat-area {
background: #2f3136 !important;
border-color: #202225 !important;
}
[data-theme="dark"] .conversations-panel {
background: #2f3136 !important;
border-color: #16171a !important;
border-top: 3px solid #7289da !important;
}
[data-theme="dark"] .messages-container.tier-free .conversations-panel {
border-top-color: #64748b !important;
}
[data-theme="dark"] .messages-container.tier-basic .conversations-panel {
border-top-color: #10b981 !important;
}
[data-theme="dark"] .messages-container.tier-pro .conversations-panel {
border-top-color: #f59e0b !important;
}
[data-theme="dark"] .messages-container.tier-unlimited .conversations-panel {
border-top-color: #8b5cf6 !important;
}
[data-theme="dark"] .messages-container.tier-free .chat-panel {
border-top-color: #64748b !important;
}
[data-theme="dark"] .messages-container.tier-basic .chat-panel {
border-top-color: #10b981 !important;
}
[data-theme="dark"] .messages-container.tier-pro .chat-panel {
border-top-color: #f59e0b !important;
}
[data-theme="dark"] .messages-container.tier-unlimited .chat-panel {
border-top-color: #8b5cf6 !important;
}
[data-theme="dark"] .chat-panel {
background: #36393f !important;
border-color: #16171a !important;
border-top: 3px solid #43b581 !important;
}
[data-theme="dark"] .panel-header {
border-color: #202225;
background: #2f3136;
}
[data-theme="dark"] .panel-header h2 {
color: #ffffff;
text-shadow: none;
}
[data-theme="dark"] .new-conversation-btn {
box-shadow: 0 0 10px rgba(114, 137, 218, 0.6);
}
[data-theme="dark"] .new-conversation-btn:hover {
box-shadow: 0 0 16px rgba(114, 137, 218, 0.8);
}
[data-theme="dark"] .username {
background: rgba(79, 84, 92, 0.4);
color: #b9bbbe;
border: 1px solid rgba(79, 84, 92, 0.9);
}
/* Conversation items for Discord style */
[data-theme="dark"] .conversation-item:nth-child(5n+1),
[data-theme="dark"] .conversation-item:nth-child(5n+2),
[data-theme="dark"] .conversation-item:nth-child(5n+3),
[data-theme="dark"] .conversation-item:nth-child(5n+4),
[data-theme="dark"] .conversation-item:nth-child(5n+5) {
background: #2f3136 !important;
}
[data-theme="dark"] .conversation-item:nth-child(5n+1) {
background: linear-gradient(90deg, rgba(37, 99, 235, 0.15), rgba(16, 185, 129, 0.05));
}
[data-theme="dark"] .conversation-item:nth-child(5n+2) {
background: linear-gradient(90deg, rgba(124, 58, 237, 0.15), rgba(59, 130, 246, 0.05));
}
[data-theme="dark"] .conversation-item:hover {
background: #393d43 !important;
border-left-color: #60a5fa;
}
[data-theme="dark"] .conversation-item.active {
background: #41454f !important;
border-left-color: #7289da;
box-shadow: inset 2px 0 0 rgba(114, 137, 218, 0.8);
}
[data-theme="dark"] .conversation-item.unread {
background: #3d414a !important;
border-left-color: #faa61a;
}
/* Chat header */
[data-theme="dark"] .chat-header {
border-color: #202225;
background: #2f3136;
}
[data-theme="dark"] .chat-header h3,
[data-theme="dark"] .chat-user-info h3 {
color: #ffffff;
}
[data-theme="dark"] .empty-state h3 {
color: #ffffff;
}
[data-theme="dark"] .empty-state p {
color: #b9bbbe;
}
[data-theme="dark"] .empty-state svg {
stroke: #7289da;
opacity: 0.85;
}
/* Messages */
[data-theme="dark"] .message-content {
color: #dcddde;
}
[data-theme="dark"] .message-text {
color: #e9f2ff;
}
[data-theme="dark"] .message.sent .message-text {
color: #ffffff;
}
[data-theme="dark"] .message-sender {
color: #5eead4;
font-weight: 700;
}
[data-theme="dark"] .message.sent .message-sender {
color: #ffffff;
}
[data-theme="dark"] .message-time {
color: #72767d;
}
[data-theme="dark"] .message-bubble {
background: #40444b;
border: 1px solid #202225;
border-left: 3px solid #3ba55d;
box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08);
color: #dcddde;
}
[data-theme="dark"] .message.sent .message-bubble {
background: #3ba55d;
border: 1px solid #2f8f54;
box-shadow: 0 0 10px rgba(59, 165, 93, 0.45);
color: #ffffff;
}
[data-theme="dark"] .messages-list {
background: #2f3136;
}
[data-theme="dark"] .chat-input-area,
[data-theme="dark"] .message-input-container {
background: #2f3136;
border-color: #202225 !important;
}
[data-theme="dark"] #message-input,
[data-theme="dark"] .message-edit-input {
background: #40444b;
border: 1px solid #202225;
color: #dcddde;
}
[data-theme="dark"] #message-input:focus,
[data-theme="dark"] .message-edit-input:focus {
border-color: #3ba55d;
box-shadow: 0 0 0 3px rgba(59, 165, 93, 0.2);
}
[data-theme="dark"] .message-action-btn {
background: #393d43;
border-color: #202225;
color: #dcddde;
}
[data-theme="dark"] .message-action-btn:hover {
background: #4f545c;
color: #ffffff;
}
[data-theme="dark"] .unread-indicator {
background: #f04747;
box-shadow: 0 0 0 2px rgba(240, 71, 71, 0.5);
}
[data-theme="dark"] .conversation-avatar,
[data-theme="dark"] .message-avatar {
border: 1px solid #2f3136;
}
[data-theme="dark"] .conversation-avatar {
box-shadow: 0 0 12px rgba(114, 137, 218, 0.5);
}
[data-theme="dark"] .conversation-item:nth-child(5n+2) .conversation-avatar {
box-shadow: 0 0 12px rgba(124, 58, 237, 0.5);
}
[data-theme="dark"] .conversation-item:nth-child(5n+3) .conversation-avatar {
box-shadow: 0 0 12px rgba(190, 18, 60, 0.5);
}
[data-theme="dark"] .conversation-item:nth-child(5n+4) .conversation-avatar {
box-shadow: 0 0 12px rgba(14, 116, 144, 0.5);
}
[data-theme="dark"] .conversation-item:nth-child(5n+5) .conversation-avatar {
box-shadow: 0 0 12px rgba(4, 120, 87, 0.5);
}
[data-theme="dark"] .message-avatar {
box-shadow: 0 0 12px rgba(190, 18, 60, 0.4);
}
[data-theme="dark"] .message.sent .message-avatar {
box-shadow: 0 0 12px rgba(59, 165, 93, 0.5);
}
[data-theme="dark"] .send-btn {
background: #3ba55d;
box-shadow: 0 0 12px rgba(59, 165, 93, 0.5);
}
[data-theme="dark"] .messages-container.tier-free .send-btn {
background: #64748b;
box-shadow: 0 0 12px rgba(100, 116, 139, 0.45);
}
[data-theme="dark"] .messages-container.tier-basic .send-btn {
background: #10b981;
box-shadow: 0 0 12px rgba(16, 185, 129, 0.45);
}
[data-theme="dark"] .messages-container.tier-pro .send-btn {
background: #f59e0b;
box-shadow: 0 0 12px rgba(245, 158, 11, 0.45);
}
[data-theme="dark"] .messages-container.tier-unlimited .send-btn {
background: #8b5cf6;
box-shadow: 0 0 12px rgba(139, 92, 246, 0.45);
}
[data-theme="dark"] .send-btn:hover {
background: #2a8e4b;
}
[data-theme="dark"] .nav-menu,
[data-theme="dark"] #nav-menu,
[data-theme="dark"] .nav-menu li,
[data-theme="dark"] .nav-menu a,
[data-theme="dark"] .nav-menu > li {
background: #0f172a !important;
color: #ffffff !important;
}
[data-theme="dark"] .nav-menu {
border-color: #334155 !important;
}
/* ─── Dashboard ─── */
[data-theme="dark"] .dashboard-layout {
background: #0f172a;
}
[data-theme="dark"] .sidebar {
background: #1e293b !important;
border-color: #334155 !important;
}
[data-theme="dark"] .sidebar-link {
color: #94a3b8;
}
[data-theme="dark"] .sidebar-link:hover,
[data-theme="dark"] .sidebar-link.active {
background: #334155;
color: #f1f5f9;
}
/* ─── Community ─── */
[data-theme="dark"] .recently-posted-carousel {
background: #1e293b;
border-color: #334155;
}
[data-theme="dark"] .carousel-item {
background: #0f172a;
border-color: #334155;
color: #e2e8f0;
}
[data-theme="dark"] .carousel-item:hover {
border-color: #3b82f6;
}
[data-theme="dark"] .carousel-btn {
background: #1e293b;
border-color: #334155;
color: #e2e8f0;
}
[data-theme="dark"] .community-controls {
background: #1e293b !important;
border-color: #334155 !important;
}
[data-theme="dark"] .collapse-toggle {
border-color: #475569;
color: #cbd5e1;
}
[data-theme="dark"] .collapse-toggle:hover {
background: #334155;
}
[data-theme="dark"] .topic-card {
background: #1e293b !important;
border-color: #334155 !important;
}
[data-theme="dark"] .topic-card:hover {
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
}
[data-theme="dark"] .priority-unlimited {
background: linear-gradient(135deg, rgba(139, 92, 246, 0.12) 0%, #1e293b 100%) !important;
border-color: #8b5cf6 !important;
}
[data-theme="dark"] .priority-pro {
background: linear-gradient(135deg, rgba(251, 191, 36, 0.1) 0%, #1e293b 100%) !important;
border-color: #fbbf24 !important;
}
[data-theme="dark"] .priority-basic {
background: linear-gradient(135deg, rgba(96, 165, 250, 0.1) 0%, #1e293b 100%) !important;
border-color: #60a5fa !important;
}
[data-theme="dark"] .topic-btn {
background: #0f172a;
border-color: #475569;
color: #cbd5e1;
}
[data-theme="dark"] .topic-btn:hover {
background: #334155;
}
[data-theme="dark"] .topic-btn.liked {
background: rgba(96, 165, 250, 0.15);
border-color: #3b82f6;
color: #60a5fa;
}
[data-theme="dark"] .topic-content {
color: #cbd5e1;
}
[data-theme="dark"] .topic-content-preview {
color: #94a3b8;
}
[data-theme="dark"] .featured-header {
background: linear-gradient(135deg, rgba(59, 130, 246, 0.15) 0%, rgba(59, 130, 246, 0.05) 100%) !important;
border-color: #3b82f6;
color: #f8fafc;
}
[data-theme="dark"] .featured-header h2,
[data-theme="dark"] .featured-subtitle,
[data-theme="dark"] .community-header h1,
[data-theme="dark"] .community-header p,
[data-theme="dark"] .carousel-header h2,
[data-theme="dark"] .carousel-item h3,
[data-theme="dark"] .topic-card h3 {
color: #f8fafc;
}
[data-theme="dark"] .carousel-item-meta,
[data-theme="dark"] .community-controls label,
[data-theme="dark"] .featured-subtitle,
[data-theme="dark"] .topic-content,
[data-theme="dark"] .topic-content-preview {
color: #cbd5e1;
}
[data-theme="dark"] .featured-card {
background: #1e293b !important;
border-color: #3b82f6 !important;
}
[data-theme="dark"] .priority-sidebar {
background: #1e293b !important;
border-color: #3b82f6 !important;
}
[data-theme="dark"] .priority-sidebar-item {
background: linear-gradient(135deg, rgba(59, 130, 246, 0.1) 0%, #1e293b 100%) !important;
border-color: #3b82f6 !important;
}
[data-theme="dark"] .priority-sidebar-item.unlimited {
background: linear-gradient(135deg, rgba(139, 92, 246, 0.1) 0%, #1e293b 100%) !important;
border-color: #8b5cf6 !important;
}
[data-theme="dark"] .priority-sidebar-item.pro {
background: linear-gradient(135deg, rgba(251, 191, 36, 0.1) 0%, #1e293b 100%) !important;
border-color: #fbbf24 !important;
}
[data-theme="dark"] .topic-detail-content {
background: #1e293b !important;
border-color: #334155;
}
[data-theme="dark"] .topic-detail-header {
border-color: #334155;
}
[data-theme="dark"] .topic-full-content {
color: #cbd5e1;
}
[data-theme="dark"] .topic-detail-close {
color: #94a3b8;
}
[data-theme="dark"] .topic-detail-close:hover {
color: #f1f5f9;
}
[data-theme="dark"] .reply-card {
background: #1e293b !important;
border-color: #334155 !important;
}
[data-theme="dark"] .filter-group select {
background: #0f172a !important;
color: #e2e8f0 !important;
border-color: #334155 !important;
}
/* ─── Admin ─── */
[data-theme="dark"] .tier-breakdown,
[data-theme="dark"] .tabs,
[data-theme="dark"] .table-container {
background: #1e293b;
border-color: #334155;
}
[data-theme="dark"] .tab-btn {
color: #94a3b8;
}
[data-theme="dark"] .tab-btn.active {
background: #334155;
color: #f1f5f9;
}
[data-theme="dark"] .tier-select {
background: #0f172a;
border-color: #475569;
color: #e2e8f0;
}
[data-theme="dark"] table {
border-color: #334155;
}
[data-theme="dark"] th {
background: #1e293b !important;
color: #e2e8f0;
border-color: #334155;
}
[data-theme="dark"] td {
border-color: #334155;
color: #cbd5e1;
}
[data-theme="dark"] tr:hover td {
background: #334155;
}
/* ─── Badges (keep readable on dark) ─── */
[data-theme="dark"] .badge {
background: #ef4444;
}
[data-theme="dark"] .tier-badge.tier-free,
[data-theme="dark"] .tier-badge.tier-basic,
[data-theme="dark"] .tier-badge.tier-pro,
[data-theme="dark"] .tier-badge.tier-unlimited {
color: #ffffff !important;
box-shadow: none;
border: none;
outline: none;
}
[data-theme="dark"] #user-name-nav {
color: #f1f5f9;
font-weight: 600;
}
[data-theme="dark"] .category-badge,
[data-theme="dark"] .skill-level-badge {
opacity: 0.9;
}
/* ─── Pricing cards ─── */
[data-theme="dark"] .pricing-card {
background: #1e293b !important;
border-color: #334155 !important;
}
[data-theme="dark"] .pricing-card[data-tier="free"] {
background: linear-gradient(135deg, rgba(51, 65, 85, 0.15) 0%, #1e293b 100%) !important;
border-color: rgba(51, 65, 85, 0.4) !important;
}
[data-theme="dark"] .pricing-card[data-tier="basic"] {
background: linear-gradient(135deg, rgba(16, 185, 129, 0.1) 0%, #1e293b 100%) !important;
border-color: rgba(16, 185, 129, 0.3) !important;
}
[data-theme="dark"] .pricing-card[data-tier="pro"] {
background: linear-gradient(135deg, rgba(245, 158, 11, 0.12) 0%, #1e293b 100%) !important;
border-color: rgba(245, 158, 11, 0.4) !important;
}
[data-theme="dark"] .pricing-card[data-tier="unlimited"] {
background: linear-gradient(135deg, rgba(139, 92, 246, 0.1) 0%, #1e293b 100%) !important;
border-color: rgba(139, 92, 246, 0.3) !important;
}
[data-theme="dark"] .features-list li {
border-bottom-color: #334155;
}
/* ─── Dropdowns & Modals ─── */
[data-theme="dark"] .dropdown,
[data-theme="dark"] .modal-content,
[data-theme="dark"] .popup,
[data-theme="dark"] .tooltip {
background: #1e293b;
border-color: #334155;
color: #e2e8f0;
}
/* ─── Scrollbar ─── */
[data-theme="dark"] ::-webkit-scrollbar {
width: 8px;
}
[data-theme="dark"] ::-webkit-scrollbar-track {
background: #0f172a;
}
[data-theme="dark"] ::-webkit-scrollbar-thumb {
background: #475569;
border-radius: 4px;
}
[data-theme="dark"] ::-webkit-scrollbar-thumb:hover {
background: #64748b;
}
/* ─── Footer (inline styles in HTML need this) ─── */
[data-theme="dark"] footer {
background: linear-gradient(135deg, #0f172a 0%, #020617 100%) !important;
}
/* ─── Landing page benefit cards (inline styles override) ─── */
[data-theme="dark"] .benefit-card {
background: #1e293b !important;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3) !important;
}
[data-theme="dark"] .benefit-card p {
color: #94a3b8;
}
/* ─── Landing page category cards ─── */
[data-theme="dark"] .category-card {
background: #1e293b !important;
border-color: rgba(255, 255, 255, 0.1) !important;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3) !important;
}
[data-theme="dark"] .category-card p {
color: #94a3b8;
}
/* ─── Landing page sections ─── */
[data-theme="dark"] .benefits-section,
[data-theme="dark"] .categories-section,
[data-theme="dark"] .cta-section {
background: #0f172a !important;
}
[data-theme="dark"] .cta-section > .container > div {
background: rgba(59, 130, 246, 0.08) !important;
border-color: rgba(59, 130, 246, 0.25) !important;
}
[data-theme="dark"] .section-title {
color: #f1f5f9;
}
[data-theme="dark"] .section-subtitle {
color: #94a3b8;
}
/* ─── Landing page stats section ─── */
[data-theme="dark"] .stats-section {
background: #0f172a !important;
}
[data-theme="dark"] .stat-item {
background: inherit;
}
/* ─── Landing page features section ─── */
[data-theme="dark"] .features-section {
background: #0f172a !important;
}
[data-theme="dark"] .feature-card {
background: #1e293b !important;
}
[data-theme="dark"] .feature-card p {
color: #94a3b8;
}
/* ─── Auth pages (login/register) ─── */
[data-theme="dark"] .auth-container {
background: #1e293b !important;
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4) !important;
border-color: #334155 !important;
}
[data-theme="dark"] .auth-container h2 {
-webkit-text-fill-color: unset;
background: none !important;
color: #f1f5f9 !important;
}
[data-theme="dark"] .auth-subtitle {
color: #94a3b8 !important;
}
[data-theme="dark"] .auth-container label {
color: #cbd5e1;
}
[data-theme="dark"] .toggle-text,
[data-theme="dark"] .forgot-link {
color: #94a3b8 !important;
}
[data-theme="dark"] .toggle-text a,
[data-theme="dark"] .forgot-link a {
color: #60a5fa !important;
}
/* ─── Login prompt alerts (browse/community) ─── */
[data-theme="dark"] #login-prompt,
[data-theme="dark"] #login-prompt-topic {
background: rgba(251, 191, 36, 0.12) !important;
border-left-color: #f59e0b !important;
}
[data-theme="dark"] #login-prompt p,
[data-theme="dark"] #login-prompt-topic p {
color: #fde68a !important;
}
/* ─── Dashboard upgrade link ─── */
[data-theme="dark"] .upgrade-plan-link {
background: #334155 !important;
color: #60a5fa !important;
}
/* ─── Status / Alert banners ─── */
[data-theme="dark"] .error-message {
background: #450a0a;
color: #fca5a5;
border-left-color: #dc2626;
}
[data-theme="dark"] .success-message {
background: #052e16;
color: #86efac;
border-left-color: #16a34a;
}
/* ─── Misc ─── */
[data-theme="dark"] hr {
border-color: #334155;
}
[data-theme="dark"] code {
background: #334155;
color: #e2e8f0;
}
[data-theme="dark"] ::selection {
background: rgba(59, 130, 246, 0.3);
}
/* ─── Theme toggle button ─── */
.theme-toggle {
background: none;
border: 1.5px solid #94a3b8;
border-radius: 8px;
cursor: pointer;
padding: 0.4rem 0.5rem;
font-size: 1.1rem;
line-height: 1;
transition: all 0.2s;
display: flex;
align-items: center;
justify-content: center;
}
.theme-toggle:hover {
border-color: #3b82f6;
background: rgba(59, 130, 246, 0.08);
}
[data-theme="dark"] .theme-toggle {
border-color: #64748b;
}
[data-theme="dark"] .theme-toggle:hover {
border-color: #60a5fa;
background: rgba(96, 165, 250, 0.1);
}
/* ─── Profile page ─── */
[data-theme="dark"] .profile-container {
color: #e2e8f0;
}
[data-theme="dark"] .profile-header {
background: #1e293b !important;
border-color: #334155;
}
[data-theme="dark"] .profile-avatar {
background: linear-gradient(135deg, #3b82f6, #6366f1) !important;
color: #fff;
}
[data-theme="dark"] .profile-fullname {
color: #f1f5f9;
}
[data-theme="dark"] .profile-username {
color: #94a3b8;
}
[data-theme="dark"] .profile-meta span {
color: #94a3b8;
}
[data-theme="dark"] .profile-bio {
color: #cbd5e1;
}
[data-theme="dark"] .stat-box {
background: #1e293b !important;
border-color: #334155;
}
[data-theme="dark"] .stat-box .stat-number {
color: #60a5fa;
}
[data-theme="dark"] .stat-box .stat-label {
color: #94a3b8;
}
[data-theme="dark"] .profile-section {
background: #1e293b !important;
border-color: #334155;
}
[data-theme="dark"] .profile-section h2 {
color: #f1f5f9;
}
[data-theme="dark"] .profile-skill {
background: #0f172a;
border-color: #334155;
}
[data-theme="dark"] .profile-skill h3 {
color: #e2e8f0;
}
[data-theme="dark"] .profile-skill p {
color: #94a3b8;
}
[data-theme="dark"] .profile-skill-meta span {
background: #334155;
color: #94a3b8;
}
[data-theme="dark"] .edit-modal-overlay {
background: rgba(0, 0, 0, 0.7);
}
[data-theme="dark"] .edit-modal {
background: #1e293b !important;
border-color: #334155;
}
[data-theme="dark"] .edit-modal h2 {
color: #f1f5f9;
}
[data-theme="dark"] .edit-modal label {
color: #cbd5e1;
}
[data-theme="dark"] .edit-modal input,
[data-theme="dark"] .edit-modal textarea {
background: #0f172a;
border-color: #334155;
color: #e2e8f0;
}
[data-theme="dark"] .edit-modal input:focus,
[data-theme="dark"] .edit-modal textarea:focus {
border-color: #3b82f6;
}
[data-theme="dark"] .btn-edit-profile {
background: #3b82f6;
color: #fff;
}
[data-theme="dark"] .btn-cancel {
background: #334155;
color: #e2e8f0;
border-color: #475569;
}
[data-theme="dark"] .btn-dashboard {
background: #334155;
color: #e2e8f0;
border-color: #475569;
}
[data-theme="dark"] .btn-dashboard:hover {
background: #475569;
}
[data-theme="dark"] .empty-state {
color: #94a3b8;
}
/* ─── Notification Bell & Dropdown (dark) ─── */
[data-theme="dark"] .notif-bell {
color: #e2e8f0;
}
[data-theme="dark"] .notif-dropdown {
background: #1e293b;
box-shadow: 0 8px 30px rgba(0,0,0,0.4);
}
[data-theme="dark"] .notif-dropdown-header {
border-color: #334155;
color: #e2e8f0;
}
[data-theme="dark"] .notif-mark-all {
color: #818cf8;
}
[data-theme="dark"] .notif-item {
border-color: #334155;
color: #e2e8f0;
}
[data-theme="dark"] .notif-item:hover {
background: #334155;
}
[data-theme="dark"] .notif-item.notif-unread {
background: rgba(99, 102, 241, 0.15);
}
[data-theme="dark"] .notif-item.notif-unread:hover {
background: rgba(99, 102, 241, 0.25);
}
[data-theme="dark"] .notif-dismiss {
color: #64748b;
}
[data-theme="dark"] .notif-dismiss:hover {
color: #f87171;
background: rgba(239, 68, 68, 0.15);
}
[data-theme="dark"] .notif-title {
color: #f1f5f9;
}
[data-theme="dark"] .notif-body {
color: #94a3b8;
}
[data-theme="dark"] .notif-time {
color: #64748b;
}
[data-theme="dark"] .notif-empty {
color: #64748b;
}
/* ─── Match Cards (dark) ─── */
[data-theme="dark"] .match-card {
background: #1e293b;
border-color: #334155;
}
[data-theme="dark"] .match-card:hover {
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}
[data-theme="dark"] .match-badge {
color: #cbd5e1;
}
[data-theme="dark"] .match-avatar-placeholder {
background: #334155;
}
[data-theme="dark"] .match-username {
color: #f1f5f9;
}
[data-theme="dark"] .match-rating {
color: #94a3b8;
}
/* ─── Skill Card Avatar (dark) ─── */
[data-theme="dark"] .skill-card-avatar-placeholder {
background: #334155;
color: #94a3b8;
}
/* ─── Email Verify Banner (dark) ─── */
[data-theme="dark"] .verify-email-banner {
background: rgba(253, 230, 138, 0.15);
border-color: rgba(253, 230, 138, 0.3);
color: #fde68a;
}
[data-theme="dark"] .verify-email-banner a {
color: #fde68a;
}
/* ─── Avatar Upload (dark) ─── */
[data-theme="dark"] .avatar-preview {
background: #334155;
border-color: #475569;
}
[data-theme="dark"] .upload-hint {
color: #64748b;
}
/* ─── Verify Email Page (dark) ─── */
[data-theme="dark"] .verify-container {
background: #1e293b;
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
}
[data-theme="dark"] .verify-container h2 {
color: #f1f5f9;
}
[data-theme="dark"] .verify-container p {
color: #94a3b8;
}
[data-theme="dark"] .verify-success {
background: rgba(16, 185, 129, 0.15);
color: #6ee7b7;
}
[data-theme="dark"] .verify-error {
background: rgba(239, 68, 68, 0.15);
color: #fca5a5;
}
/* ── Dark mode: form badge labels — each with its own readable color ── */
[data-theme="dark"] .badge-offer { background: #1e3a8a; color: #93c5fd !important; }
[data-theme="dark"] .badge-want { background: #78350f; color: #fde68a !important; }
[data-theme="dark"] .badge-category { background: #374151; color: #e5e7eb !important; }
[data-theme="dark"] .badge-level { background: #831843; color: #fbcfe8 !important; }
[data-theme="dark"] .badge-level-beginner { background: #1e3a8a; color: #93c5fd !important; }
[data-theme="dark"] .badge-level-expert { background: #881337; color: #fda4af !important; }
[data-theme="dark"] .badge-status { background: #064e3b; color: #6ee7b7 !important; }
[data-theme="dark"] .badge-response { background: #164e63; color: #67e8f9 !important; }
[data-theme="dark"] .badge-description { background: #7c2d12; color: #fed7aa !important; }
[data-theme="dark"] .badge-location { background: #581c87; color: #e9d5ff !important; }
[data-theme="dark"] .badge-username { background: #111827; color: #f9fafb !important; }
[data-theme="dark"] .btn-primary {
background: linear-gradient(135deg, #2563eb 0%, #7c3aed 100%) !important;
box-shadow: 0 4px 12px rgba(37, 99, 235, 0.4) !important;
}
[data-theme="dark"] .list-header h2 {
background: linear-gradient(135deg, #60a5fa 0%, #a78bfa 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}