@import url('https://fonts.googleapis.com/css2?family=DM+Serif+Display:ital@0;1&family=Kumbh+Sans:wght@400;500;600;700&display=swap');

:root {
  --rr-bg: #080808;
  --rr-surface: #0f0f0f;
  --rr-card: #111111;
  --rr-input: #0a0a0a;
  --rr-text: #f5f5f5;
  --rr-muted: #a3a3a3;
  --rr-faint: #737373;
  --rr-border: #1e1e1e;
  --rr-border-strong: #333333;
  --rr-green: #22c55e;
  --rr-green-dark: #16a34a;
  --surface: var(--rr-bg);
  --surface-subtle: var(--rr-surface);
  --surface-line: var(--rr-border);
  --text: var(--rr-text);
  --text-muted: var(--rr-muted);
  --border: var(--rr-border);
  --focus: var(--rr-green);
  --ink: var(--rr-text);
  --sub: var(--rr-muted);
  --muted: var(--rr-faint);
  --bg: var(--rr-bg);
  --soft: var(--rr-surface);
  --soft-2: #171717;
  --purple: var(--rr-green);
  --purple-2: var(--rr-green-dark);
  --grad: linear-gradient(135deg, var(--rr-green), var(--rr-green-dark));
}

html { scroll-padding-top: 58px; }
body { background: var(--rr-bg) !important; color: var(--rr-text) !important; font-family: 'Kumbh Sans', sans-serif !important; }
body::before { position: fixed; inset: 0; z-index: -1; background: radial-gradient(circle at 85% 0, rgba(34,197,94,.06), transparent 28rem); content: ''; pointer-events: none; }
a { color: inherit; }

/* Shared navigation */
.navbar { height: 58px !important; border-bottom: 1px solid rgba(255,255,255,.1) !important; background: rgba(8,8,8,.72) !important; backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); }
.navbar-container { width: min(1164px, calc(100% - 44px)) !important; height: 58px !important; }
#navbar-logo .logo, .logo { background: linear-gradient(90deg, #f5f5f5 0 43%, var(--rr-green) 43% 100%) !important; background-clip: text !important; -webkit-background-clip: text !important; -webkit-text-fill-color: transparent !important; color: transparent !important; font-family: 'DM Serif Display', Georgia, serif !important; font-size: 1.5rem !important; font-weight: 400 !important; letter-spacing: -.06em; }
.navbar-links { color: var(--rr-muted) !important; font-size: .8125rem; text-decoration: none !important; }
.navbar-links:hover { color: var(--rr-text) !important; background: transparent !important; }
.navbar-btn, .connect-btn, .formsubmit-btn, .main-btn, .addlisting-btn, .readMore, .revise-counter-btn, .editlisting-btn, .login-btn, .signup-btn, .submit-btn, .status-modal-button, .message-input button, .demo-controls button, .mini-chat-input button { border: 1px solid var(--rr-green) !important; border-radius: 6px !important; background: var(--rr-green) !important; background-image: none !important; color: #061107 !important; box-shadow: none !important; font-weight: 700 !important; text-decoration: none !important; }
.navbar-btn:hover, .connect-btn:hover, .formsubmit-btn:hover, .main-btn:hover, .addlisting-btn:hover, .readMore:hover, .revise-counter-btn:hover, .editlisting-btn:hover, .login-btn:hover, .signup-btn:hover, .submit-btn:hover, .status-modal-button:hover, .message-input button:hover, .demo-controls button:hover, .mini-chat-input button:hover { border-color: var(--rr-green-dark) !important; background: var(--rr-green-dark) !important; color: #fff !important; }
.navbar-btn a { color: inherit !important; text-decoration: none !important; }
.navbar-toggle .bar, .hamburger-btn .bar { background: var(--rr-text) !important; }
.longbar { background: var(--rr-border) !important; }

/* Forms, profile, dialogs, and utility cards */
.title, .login, .signup, .login-container, .signup-container, .main, .listings, .offers, .user-info, .services, .allServices, .contact, .home { background: transparent !important; color: var(--rr-text) !important; }
.title-container h1, .login-text h2, .signup-text h2, .main h1, .main h2, .hero-info h1, .about-content h2.heading, .listings-header h1, .offers h1, .user-card h2, .contact-text-1 h2 { background: none !important; -webkit-text-fill-color: var(--rr-text) !important; color: var(--rr-text) !important; font-family: 'DM Serif Display', Georgia, serif !important; }
.title-container p, .login-text p, .signup-text p, .lead, .hero-info p, .about-content p, .contact p, .form-txt1 p, .form-txt2, .user-card p { color: var(--rr-muted) !important; }
.login-info, .signup-info, .login-info form, .signup-info form, .card, .profile-container, .modal-content, .modal-box, .popup-form, .popup-body, .user-card, .contact-box, .bid-card, .listings-card, .offers-inner, .profile-popover { border-color: var(--rr-border) !important; background: var(--rr-surface) !important; box-shadow: 0 18px 42px rgba(0,0,0,.28) !important; color: var(--rr-text) !important; }
.status-modal { background: rgba(0,0,0,.72) !important; }.status-modal-card { border-color: var(--rr-border) !important; background: var(--rr-surface) !important; color: var(--rr-text) !important; }.status-modal-card h2 { color: var(--rr-text) !important; }.status-modal-card p { color: var(--rr-muted) !important; }.status-modal-icon, .status-modal-button { background: var(--rr-green) !important; color: #061107 !important; }.otp-email, .otp-resend { color: var(--rr-green) !important; }
input, textarea, select, .formInput, #searchInput, .otp-input { border-color: #292929 !important; background: var(--rr-input) !important; color: var(--rr-text) !important; }.formInput::placeholder, input::placeholder, textarea::placeholder { color: var(--rr-faint) !important; }.formInput:focus, input:focus, textarea:focus, #searchInput:focus { border-color: var(--rr-green) !important; box-shadow: 0 0 0 3px rgba(34,197,94,.12) !important; }.formLabel, .title2, .card .radio-buttons label, .form-group label { color: var(--rr-text) !important; }.input-radio, .checkbox input, .check-box input { accent-color: var(--rr-green) !important; }
.password-field { position: relative; width: 100%; }.password-field .formInput { width: 100% !important; padding-right: 48px !important; }.password-toggle { position: absolute; top: 50%; right: 9px; display: grid; place-items: center; width: 36px; height: 36px; padding: 0; transform: translateY(-50%); border: 0 !important; border-radius: 50%; background: transparent !important; color: var(--rr-muted) !important; cursor: pointer; }.password-toggle:hover, .password-toggle:focus-visible { background: #1a1a1a !important; color: var(--rr-green) !important; outline: 2px solid var(--rr-green); outline-offset: 1px; }.password-toggle i { font-size: 1.25rem; pointer-events: none; }
.login-social-media a, .signup-social-media a, .social a, .bg-icon a { border-color: var(--rr-border-strong) !important; background: var(--rr-card) !important; color: var(--rr-text) !important; }.login-social-media a:hover, .signup-social-media a:hover, .social a:hover, .bg-icon a:hover { border-color: var(--rr-green) !important; color: var(--rr-green) !important; }
.profile-container { border-color: var(--rr-border) !important; }.profile-pic img { border-color: var(--rr-border-strong) !important; background: var(--rr-card) !important; }.profile-pic label, .submit-btn { border: 1px solid var(--rr-green) !important; background: var(--rr-green) !important; color: #061107 !important; }.form-group input, .form-group input[readonly] { background: var(--rr-input) !important; color: var(--rr-text) !important; }
.profile-popover-user { border-color: var(--rr-border) !important; }.profile-popover-user strong, .profile-popover a, .profile-popover button { color: var(--rr-text) !important; }.profile-popover-user span { color: var(--rr-muted) !important; }.profile-popover a:hover, .profile-popover button:hover { background: #1a1a1a !important; color: var(--rr-green) !important; }
body > h2 { color: var(--rr-green) !important; font-family: 'DM Serif Display', Georgia, serif; font-weight: 400; } body > form { border: 1px solid var(--rr-border) !important; border-radius: 12px !important; background: var(--rr-surface) !important; box-shadow: 0 18px 42px rgba(0,0,0,.28) !important; } body > form input { border: 1px solid var(--rr-border-strong) !important; border-radius: 5px !important; background: var(--rr-input) !important; color: var(--rr-text) !important; } body > form button { border: 1px solid var(--rr-green) !important; border-radius: 5px !important; background: var(--rr-green) !important; color: #061107 !important; }

/* Dashboard, listings, offers, and chat */
.dashboard-img, .card-image { border: 1px solid var(--rr-border) !important; box-shadow: none !important; }.servicesItem { border-color: var(--rr-border) !important; background: var(--rr-card) !important; box-shadow: none !important; }.servicesItem h3, .servicesItem p, .card-body p, .listings-card h2, .popup-header h2, .modal-box h3 { color: var(--rr-text) !important; }.servicesItem p.scrollable, .listings-card p, .popup-instruction { color: var(--rr-muted) !important; }.listings-card .img, .img-serv { background: #1a1a1a !important; }.listing-actions { border-color: var(--rr-border) !important; background: var(--rr-surface) !important; }.genre-filters button, #closeSearchBtn { border-color: var(--rr-border-strong) !important; background: var(--rr-card) !important; color: var(--rr-muted) !important; }.genre-filters button:hover { border-color: var(--rr-green) !important; color: var(--rr-green) !important; }.swiper-button-next, .swiper-button-prev, .swiper-pagination-bullet-active { color: var(--rr-green) !important; }
.offers-table, .offers-table th, .offers-table td, table { border-color: var(--rr-border) !important; color: var(--rr-text) !important; }.offers-table th, .offers-table tr:nth-child(even) { background: var(--rr-surface) !important; }.offers-table td, .offers-table tr { background: var(--rr-bg) !important; }.offers-table a { color: var(--rr-green) !important; }.sidebar-menu { border-left: 1px solid var(--rr-border); background: var(--rr-surface) !important; box-shadow: -12px 0 36px rgba(0,0,0,.3) !important; }.sidebar-menu a, .sidebar-menu .close-sidebar { color: var(--rr-text) !important; }.sidebar-menu a:hover { background: #1a1a1a !important; color: var(--rr-green) !important; }
.chat-window, .mini-chatbox { border-color: var(--rr-border) !important; background: var(--rr-surface) !important; color: var(--rr-text) !important; }.mini-chat-header, #chatHeader { background: var(--rr-green) !important; color: #061107 !important; }.mini-chat-messages, #chatMessages { background: var(--rr-bg) !important; color: var(--rr-text) !important; }.mini-chat-message.sent { background: var(--rr-green) !important; color: #061107 !important; }.mini-chat-message.received, .date-label { background: #1a1a1a !important; color: var(--rr-text) !important; }.mini-chat-input { background: var(--rr-surface) !important; }.mini-chat-input textarea { background: var(--rr-input) !important; color: var(--rr-text) !important; border-color: var(--rr-border-strong) !important; }.mini-chat-input button, #restoreChatBtn { background: var(--rr-green) !important; color: #061107 !important; }
.modal-overlay, .modal { background: rgba(0,0,0,.72) !important; }.modal-btn.cancel { background: #222 !important; color: var(--rr-text) !important; }.modal-btn.confirm { background: var(--rr-green) !important; color: #061107 !important; }

/* Chat demo and notifications */
.chat-container { border: 1px solid var(--rr-border) !important; background: var(--rr-surface) !important; box-shadow: 0 18px 42px rgba(0,0,0,.28) !important; }.chat-header { background: var(--rr-green) !important; color: #061107 !important; }.chat-messages, .message-input { border-color: var(--rr-border) !important; background: var(--rr-bg) !important; }.message.received, .status { background: #1a1a1a !important; color: var(--rr-text) !important; }.message.sent, .message-input button, .demo-controls button { background: var(--rr-green) !important; color: #061107 !important; }.message-input input { border-color: var(--rr-border-strong) !important; background: var(--rr-input) !important; color: var(--rr-text) !important; }.chat-notification { border-color: rgba(34,197,94,.3) !important; background: #151515 !important; }.chat-notification-sender { color: var(--rr-green) !important; }.chat-notification.success { background: #12351f !important; }.chat-notification.warning { background: #3b3210 !important; color: var(--rr-text) !important; }

footer { border-color: var(--rr-border) !important; background: var(--rr-bg) !important; color: var(--rr-muted) !important; } footer p { color: var(--rr-muted) !important; }

@media (max-width: 960px) { .navbar-container { width: min(100% - 32px, 1164px) !important; }.navbar-menu-center { top: 58px !important; background: rgba(8,8,8,.98) !important; border-color: var(--rr-border) !important; }.navbar-menu-center.active { top: 58px !important; } }