/* ── TalentSymbia Theme System ─────────────────────────── */
/* Dark theme = default, Light theme = [data-theme="light"] */

:root,
[data-theme="dark"] {
  --bg: #0a0a0f;
  --surface: #12121a;
  --surface2: #1a1a26;
  --border: rgba(255,255,255,0.07);
  --accent: #00e5c4;
  --accent2: #7c6cff;
  --accent3: #ff6b6b;
  --text: #f0f0f8;
  --text-muted: #8888aa;
  --glow: rgba(0,229,196,0.15);

  --nav-bg: rgba(10,10,15,0.85);
  --card-hover-border: rgba(0,229,196,0.25);
  --input-bg: rgba(255,255,255,0.04);
  --input-text: #f0f0f8;
  --input-border: rgba(255,255,255,0.1);
  --badge-bg: rgba(0,229,196,0.15);
  --badge-border: rgba(0,229,196,0.3);
  --overlay-bg: rgba(10,10,15,0.85);
  --shadow: 0 4px 24px rgba(0,0,0,0.4);
  --code-bg: rgba(255,255,255,0.05);
  --scrollbar-thumb: rgba(255,255,255,0.12);
  --scrollbar-track: transparent;
}

/* ═══════════════════════════════════════════════════════════
   LIGHT THEME — Clean neutral palette (Linear / Stripe style)
   ═══════════════════════════════════════════════════════════ */

[data-theme="light"] {
  /* ── Page & surface ── */
  --bg:            #f7f7f8;   /* warm near-white page bg */
  --surface:       #ffffff;   /* cards, panels, modals */
  --surface2:      #f4f4f5;   /* secondary surface, inset areas */
  --bg-elevated:   #ffffff;
  --bg-hover:      #f0f0f2;

  /* ── Accent — identical to dark theme ── */
  --accent:        #00e5c4;
  --accent2:       #7c6cff;
  --accent3:       #ff6b6b;
  --glow:          rgba(0,229,196,0.12);

  /* ── Text ── */
  --text:          #0a0a0a;
  --text-muted:    #52525b;
  --text-subtle:   #71717a;

  /* ── Borders ── */
  --border:        #e4e4e7;
  --border-strong: #d4d4d8;

  /* ── Navigation ── */
  --nav-bg:        rgba(255,255,255,0.85);

  /* ── Card interaction ── */
  --card-hover-border: rgba(0,229,196,0.4);

  /* ── Inputs ── */
  --input-bg:      #ffffff;
  --input-text:    #0a0a0a;
  --input-border:  #d4d4d8;

  /* ── Badges ── */
  --badge-bg:      rgba(0,229,196,0.10);
  --badge-border:  rgba(0,229,196,0.28);

  /* ── Overlays ── */
  --overlay-bg:    rgba(255,255,255,0.95);

  /* ── Shadows ── */
  --shadow:        0 1px 3px rgba(0,0,0,0.06), 0 1px 2px rgba(0,0,0,0.04);
  --shadow-sm:     0 1px 2px rgba(0,0,0,0.04);
  --shadow-md:     0 1px 3px rgba(0,0,0,0.06), 0 1px 2px rgba(0,0,0,0.04);
  --shadow-lg:     0 4px 12px rgba(0,0,0,0.08), 0 2px 4px rgba(0,0,0,0.04);

  /* ── Misc ── */
  --code-bg:       #f4f4f5;
  --scrollbar-thumb: rgba(0,0,0,0.12);
  --scrollbar-track: transparent;
}


/* ═══════════════════════════════════════════════════════════
   LIGHT — Base: body, nav, scrollbar
   ═══════════════════════════════════════════════════════════ */

[data-theme="light"] body {
  background: var(--bg);
  color: var(--text);
}

[data-theme="light"] nav {
  background: var(--nav-bg);
  border-bottom-color: var(--border);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
}


/* ═══════════════════════════════════════════════════════════
   LIGHT — Nav links (all pages share this pattern)
   ═══════════════════════════════════════════════════════════ */

[data-theme="light"] .nav-links a:not(.btn-nav),
[data-theme="light"] .nav-links > a:not(.btn-nav) {
  color: var(--text-muted);
  border-color: var(--border) !important;
}
[data-theme="light"] .nav-links a:not(.btn-nav):hover,
[data-theme="light"] .nav-links > a:not(.btn-nav):hover,
[data-theme="light"] .nav-links > a.active {
  color: var(--text);
  border-color: var(--border-strong) !important;
  background: var(--bg-hover) !important;
}


/* ═══════════════════════════════════════════════════════════
   LIGHT — Dropdowns & user menu (hardcoded #12121a / #16161f)
   ═══════════════════════════════════════════════════════════ */

[data-theme="light"] .nav-mkp-dd,
[data-theme="light"] .nav-user-dropdown,
[data-theme="light"] .user-dropdown,
[data-theme="light"] .nav-mkp-menu,
[data-theme="light"] .profile-menu-dd,
[data-theme="light"] .lang-dd {
  background: var(--surface) !important;
  border-color: var(--border) !important;
  box-shadow: var(--shadow-lg) !important;
}

[data-theme="light"] .nav-mkp-dd a,
[data-theme="light"] .nav-user-dropdown a,
[data-theme="light"] .user-dropdown a,
[data-theme="light"] .profile-menu-dd a,
[data-theme="light"] .lang-dd a,
[data-theme="light"] .dd-link,
[data-theme="light"] .nav-dd-item {
  color: var(--text-muted) !important;
}

[data-theme="light"] .nav-mkp-dd a:hover,
[data-theme="light"] .nav-user-dropdown a:hover,
[data-theme="light"] .user-dropdown a:hover,
[data-theme="light"] .profile-menu-dd a:hover,
[data-theme="light"] .profile-menu-item:hover,
[data-theme="light"] .lang-dd a:hover,
[data-theme="light"] .dd-link:hover,
[data-theme="light"] .nav-dd-item:hover {
  background: var(--bg-hover) !important;
  color: var(--text) !important;
}

[data-theme="light"] .dd-header,
[data-theme="light"] .nav-dd-header {
  border-bottom-color: var(--border) !important;
}

[data-theme="light"] .dd-divider,
[data-theme="light"] .nav-dd-divider,
[data-theme="light"] .nav-mkp-divider,
[data-theme="light"] .profile-menu-divider {
  background: var(--border) !important;
}

[data-theme="light"] .lang-dd a.active {
  color: var(--accent) !important;
}

[data-theme="light"] .lang-btn {
  border-color: var(--border) !important;
  color: var(--text-muted) !important;
}
[data-theme="light"] .lang-btn:hover {
  border-color: var(--border-strong) !important;
  color: var(--text) !important;
}


/* ═══════════════════════════════════════════════════════════
   LIGHT — Inputs, textareas, selects
   ═══════════════════════════════════════════════════════════ */

[data-theme="light"] input,
[data-theme="light"] textarea,
[data-theme="light"] select {
  background: var(--input-bg) !important;
  color: var(--input-text) !important;
  border-color: var(--input-border) !important;
}

[data-theme="light"] input::placeholder,
[data-theme="light"] textarea::placeholder {
  color: var(--text-subtle);
}

[data-theme="light"] input:focus,
[data-theme="light"] textarea:focus,
[data-theme="light"] select:focus {
  border-color: var(--accent) !important;
  outline: none;
}

[data-theme="light"] select option {
  background: var(--surface) !important;
  color: var(--text) !important;
}


/* ═══════════════════════════════════════════════════════════
   LIGHT — Buttons
   ═══════════════════════════════════════════════════════════ */

/* Primary buttons — teal bg + near-black text */
[data-theme="light"] .btn-primary,
[data-theme="light"] .btn-nav,
[data-theme="light"] .analyze-btn {
  background: var(--accent);
  color: #0a0a0a;
  box-shadow: 0 1px 3px rgba(0,229,196,0.25);
}
[data-theme="light"] .btn-primary:hover,
[data-theme="light"] .btn-nav:hover,
[data-theme="light"] .analyze-btn:hover {
  background: #00ceb1;
  color: #0a0a0a;
  box-shadow: 0 2px 8px rgba(0,229,196,0.35);
}

/* Secondary buttons — outlined */
[data-theme="light"] .btn-secondary {
  background: var(--surface);
  border-color: var(--border-strong);
  color: var(--text);
}
[data-theme="light"] .btn-secondary:hover {
  background: var(--bg-hover);
  border-color: var(--border-strong);
}

/* Credit / inline-style purchase buttons */
[data-theme="light"] #bannerBtnCredit,
[data-theme="light"] #navBtnCredit,
[data-theme="light"] #btnBuyCredit {
  background: var(--surface) !important;
  border-color: var(--border-strong) !important;
  color: var(--text) !important;
}
[data-theme="light"] #bannerBtnCredit:hover,
[data-theme="light"] #navBtnCredit:hover,
[data-theme="light"] #btnBuyCredit:hover {
  background: var(--bg-hover) !important;
}

/* "All" filter button (dashboard my listings) */
[data-theme="light"] #mlBtnAll {
  background: var(--surface) !important;
  border-color: var(--border-strong) !important;
  color: var(--text) !important;
}


/* ═══════════════════════════════════════════════════════════
   LIGHT — Cards, panels, result cards (white + shadow)
   ═══════════════════════════════════════════════════════════ */

[data-theme="light"] .result-card,
[data-theme="light"] .pricing-card,
[data-theme="light"] .cs-card,
[data-theme="light"] .feature-card,
[data-theme="light"] .mkp-lane,
[data-theme="light"] .token-pack,
[data-theme="light"] .biz-card,
[data-theme="light"] .mode-btn {
  background: var(--surface);
  border-color: var(--border);
  box-shadow: var(--shadow-sm);
}

[data-theme="light"] .result-card:hover,
[data-theme="light"] .cs-card:hover,
[data-theme="light"] .feature-card:hover,
[data-theme="light"] .mkp-lane:hover,
[data-theme="light"] .token-pack:hover {
  box-shadow: var(--shadow-md);
  border-color: var(--border-strong);
}

/* Featured variants */
[data-theme="light"] .pricing-card.featured {
  border-color: rgba(0,229,196,0.45);
  background: linear-gradient(160deg, rgba(0,229,196,0.04) 0%, var(--surface) 50%);
}
[data-theme="light"] .cs-card.cs-featured {
  border-color: rgba(124,108,255,0.35);
  background: linear-gradient(160deg, rgba(124,108,255,0.05) 0%, var(--surface) 60%);
}

/* Section backgrounds — let cards visually pop */
[data-theme="light"] .agents-section,
[data-theme="light"] .collab-section,
[data-theme="light"] .mkp-preview-section,
[data-theme="light"] .pricing-section {
  background: var(--bg);
  border-color: var(--border);
}

[data-theme="light"] .feature-card h3 {
  color: var(--text);
}
[data-theme="light"] .feature-card p {
  color: var(--text-muted);
}

/* cs-badge (Coming soon / Most requested) */
[data-theme="light"] .cs-badge {
  background: var(--bg);
  border-color: var(--border-strong);
  color: var(--text-muted);
}

/* pf-check icons in pricing */
[data-theme="light"] .pf-check.no {
  background: var(--bg);
  border-color: var(--border);
  color: var(--text-muted);
}


/* ═══════════════════════════════════════════════════════════
   LIGHT — Upload box
   ═══════════════════════════════════════════════════════════ */

[data-theme="light"] .upload-box {
  background: var(--surface);
  border-color: var(--border-strong);
}


/* ═══════════════════════════════════════════════════════════
   LIGHT — Mobile menu
   ═══════════════════════════════════════════════════════════ */

[data-theme="light"] .mobile-menu,
[data-theme="light"] .mobile-nav {
  background: var(--nav-bg);
  backdrop-filter: blur(20px);
}


/* ═══════════════════════════════════════════════════════════
   LIGHT — Lock overlay
   ═══════════════════════════════════════════════════════════ */

[data-theme="light"] .lock-overlay {
  background: rgba(247,247,248,0.88);
  backdrop-filter: blur(6px);
}
[data-theme="light"] .lock-msg {
  color: var(--text);
}


/* ═══════════════════════════════════════════════════════════
   LIGHT — Hero section
   ═══════════════════════════════════════════════════════════ */

[data-theme="light"] .hero-bg,
[data-theme="light"] .hero-grid {
  opacity: 0.25;
}


/* ═══════════════════════════════════════════════════════════
   LIGHT — Tags, pills, skill tags
   ═══════════════════════════════════════════════════════════ */

/* Skill tags — safe / risky / neutral — boost saturation for light bg */
[data-theme="light"] .skill-tag.safe {
  background: rgba(0,229,196,0.10);
  border-color: rgba(0,229,196,0.35);
  color: #007a6a;
}
[data-theme="light"] .skill-tag.risky {
  background: rgba(255,107,107,0.10);
  border-color: rgba(255,107,107,0.35);
  color: #cc3030;
}
[data-theme="light"] .skill-tag.neutral {
  background: rgba(124,108,255,0.10);
  border-color: rgba(124,108,255,0.35);
  color: #5b47e0;
}

/* Attr badges, social pills, type pills — transparent on dark, solid on light */
[data-theme="light"] .attr-badge,
[data-theme="light"] .social-pill,
[data-theme="light"] .btn-post-link,
[data-theme="light"] .back-btn,
[data-theme="light"] .card-skill,
[data-theme="light"] .li-loc {
  background: var(--surface);
  border-color: var(--border);
  color: var(--text-muted);
}
[data-theme="light"] .social-pill:hover,
[data-theme="light"] .btn-post-link:hover {
  background: var(--bg-hover);
  border-color: var(--border-strong);
  color: var(--text);
}
[data-theme="light"] .card-skill.more {
  background: var(--bg);
  border-color: var(--border);
  color: var(--text-muted);
}

/* Open badge */
[data-theme="light"] .open-badge {
  background: rgba(0,229,196,0.10);
  border-color: rgba(0,229,196,0.30);
  color: #007a6a;
}

/* Mkp lane tags */
[data-theme="light"] .mkp-lane-tags span {
  background: var(--bg);
  border-color: var(--border);
  color: var(--text-muted);
}

/* mkp-preview-stats */
[data-theme="light"] .mkp-preview-stats {
  background: var(--surface);
  border-color: var(--border);
}

/* Sub-badge (free/pro) */
[data-theme="light"] .sub-badge.free {
  background: var(--bg);
  border-color: var(--border);
  color: var(--text-muted);
}

/* Risk bar background */
[data-theme="light"] .risk-bar-bg {
  background: var(--border);
}

/* Toggle switch off-state */
[data-theme="light"] .toggle {
  background: var(--border-strong);
}

/* Conversation tags */
[data-theme="light"] .conv-direct-tag {
  background: rgba(124,108,255,0.09);
  border-color: rgba(124,108,255,0.25);
  color: #5b47e0;
}
[data-theme="light"] .conv-request-tag {
  background: rgba(215,175,0,0.10);
  border-color: rgba(215,175,0,0.28);
  color: #8a6e00;
}

/* Listing type / category pills */
[data-theme="light"] .listing-type-badge,
[data-theme="light"] .listing-subtype,
[data-theme="light"] .listing-cat {
  background: var(--bg);
  border-color: var(--border);
  color: var(--text-muted);
}


/* ═══════════════════════════════════════════════════════════
   LIGHT — Sidebar / panel rows with rgba(255,255,255) dividers
   ═══════════════════════════════════════════════════════════ */

[data-theme="light"] .sidebar-detail-row {
  border-bottom-color: var(--border) !important;
}

[data-theme="light"] .profile-menu-btn {
  border-color: var(--border) !important;
  color: var(--text-muted) !important;
}
[data-theme="light"] .profile-menu-btn:hover {
  border-color: var(--border-strong) !important;
  background: var(--bg-hover) !important;
  color: var(--text) !important;
}


/* ═══════════════════════════════════════════════════════════
   LIGHT — Dashboard modals (inner divs hardcode #16161f)
   ═══════════════════════════════════════════════════════════ */

[data-theme="light"] #myListingsModal > div,
[data-theme="light"] #myMatchesModal > div,
[data-theme="light"] #buyTokensModal > div {
  background: var(--surface) !important;
  border-color: var(--border) !important;
  box-shadow: var(--shadow-lg) !important;
}

/* Close buttons inside those modals */
[data-theme="light"] #myListingsModal > div > button[onclick*="style.display"],
[data-theme="light"] #myMatchesModal > div > button[onclick*="style.display"],
[data-theme="light"] #buyTokensModal > div > button[onclick*="style.display"] {
  background: var(--bg-hover) !important;
  color: var(--text-muted) !important;
}


/* ═══════════════════════════════════════════════════════════
   LIGHT — Card modal (career path / result modal in navigator)
   ═══════════════════════════════════════════════════════════ */

[data-theme="light"] .card-modal-inner {
  border-color: var(--border) !important;
  background: var(--surface) !important;
}

[data-theme="light"] .card-modal-inner::-webkit-scrollbar-thumb {
  background: rgba(0,0,0,0.12);
}

[data-theme="light"] .card-modal-inner > div:first-child {
  border-bottom-color: var(--border) !important;
}

[data-theme="light"] .card-modal-close {
  background: var(--bg-hover) !important;
  color: var(--text-muted) !important;
}
[data-theme="light"] .card-modal-close:hover {
  background: var(--border) !important;
  color: var(--text) !important;
}


/* ═══════════════════════════════════════════════════════════
   LIGHT — Dashboard listing rows and hover states
   ═══════════════════════════════════════════════════════════ */

[data-theme="light"] .listing-item:hover {
  background: var(--bg-hover) !important;
}

/* Biz step pill */
[data-theme="light"] .biz-step {
  background: var(--surface2);
}


/* ═══════════════════════════════════════════════════════════
   LIGHT — jp-score (low) — dashboard job performance
   ═══════════════════════════════════════════════════════════ */

[data-theme="light"] .jp-score.low {
  background: var(--bg);
  border-color: var(--border);
  color: var(--text-muted);
}


/* ═══════════════════════════════════════════════════════════
   LIGHT — Pricing secondary button hover
   ═══════════════════════════════════════════════════════════ */

[data-theme="light"] .pricing-btn.secondary {
  border-color: var(--border-strong);
  color: var(--text);
  background: var(--surface);
}
[data-theme="light"] .pricing-btn.secondary:hover {
  border-color: var(--border-strong);
  background: var(--bg-hover);
}
[data-theme="light"] .token-pack:hover {
  border-color: var(--border-strong);
}


/* ═══════════════════════════════════════════════════════════
   LIGHT — Read/unread conversation rows (messages.html)
         Replace opacity dimming with text-color dimming
   ═══════════════════════════════════════════════════════════ */

[data-theme="light"] .conv-item {
  opacity: 1 !important;
  background: var(--surface);
  border-color: var(--border);
  box-shadow: var(--shadow-sm);
}
[data-theme="light"] .conv-item:hover {
  background: var(--bg-hover);
  box-shadow: var(--shadow-md);
}
[data-theme="light"] .conv-item .conv-name {
  color: var(--text-muted);
}
[data-theme="light"] .conv-item .conv-preview {
  color: var(--text-subtle);
}
[data-theme="light"] .conv-item.unread .conv-name {
  color: var(--text);
}
[data-theme="light"] .conv-item.unread .conv-preview {
  color: var(--text-muted);
}

/* Sidebar nav items (messages) */
[data-theme="light"] .sidebar-item {
  opacity: 1 !important;
  color: var(--text-muted);
}
[data-theme="light"] .sidebar-item.has-unread {
  color: var(--text);
}
[data-theme="light"] .sidebar-item.active,
[data-theme="light"] .sidebar-item:hover {
  background: var(--bg-hover);
  color: var(--text);
}

/* Conversation page msg bubbles */
[data-theme="light"] .msg-row.other .msg-bubble {
  background: var(--surface2);
  color: var(--text);
  border: 1px solid var(--border);
}
[data-theme="light"] .msg-row.own .msg-bubble {
  background: var(--accent);
  color: #0a0a0a;
}

/* Context card */
[data-theme="light"] .context-card {
  background: var(--surface);
  border-color: var(--border);
  box-shadow: var(--shadow-sm);
}
[data-theme="light"] .context-card-img-placeholder {
  background: var(--bg);
}

/* Approval banner */
[data-theme="light"] .approval-banner.recipient {
  background: rgba(215,175,0,0.07);
  border-color: rgba(215,175,0,0.22);
}
[data-theme="light"] .approval-banner.sender {
  background: rgba(124,108,255,0.05);
  border-color: rgba(124,108,255,0.15);
  color: var(--text-muted);
}


/* ═══════════════════════════════════════════════════════════
   LIGHT — Profile page specific
   ═══════════════════════════════════════════════════════════ */

/* Profile card / sections */
[data-theme="light"] .profile-section,
[data-theme="light"] .profile-card,
[data-theme="light"] .portfolio-card {
  background: var(--surface);
  border-color: var(--border);
  box-shadow: var(--shadow-sm);
}

/* Browse profile card hover */
[data-theme="light"] .browse-card,
[data-theme="light"] .profile-card-item {
  background: var(--surface);
  border-color: var(--border);
  box-shadow: var(--shadow-sm);
}
[data-theme="light"] .browse-card:hover,
[data-theme="light"] .profile-card-item:hover {
  box-shadow: var(--shadow-md);
  border-color: var(--border-strong);
}

/* Listing page sidebar */
[data-theme="light"] .listing-sidebar,
[data-theme="light"] .listing-main {
  background: var(--surface);
  border-color: var(--border);
  box-shadow: var(--shadow-sm);
}

/* Browse page row hover */
[data-theme="light"] .browse-row:hover,
[data-theme="light"] .listing-row:hover {
  background: var(--bg-hover);
}


/* ═══════════════════════════════════════════════════════════
   LIGHT — Filter tabs
   ═══════════════════════════════════════════════════════════ */

[data-theme="light"] .filter-tab {
  border-color: var(--border) !important;
  color: var(--text-muted);
  background: var(--surface);
}
[data-theme="light"] .filter-tab:hover {
  border-color: var(--border-strong) !important;
  color: var(--text);
  background: var(--bg-hover);
}
[data-theme="light"] .filter-tab.active {
  background: rgba(0,229,196,0.10);
  border-color: rgba(0,229,196,0.35) !important;
  color: #007a6a;
}


/* ═══════════════════════════════════════════════════════════
   LIGHT — Accent-bg elements must use #0a0a0a text
   ═══════════════════════════════════════════════════════════ */

[data-theme="light"] .btn-approve-conv {
  color: #0a0a0a;
}

/* nav unread badge — teal bg → keep #000 text (already set inline) */
[data-theme="light"] #navUnreadBadge {
  color: #000;
}


/* ═══════════════════════════════════════════════════════════
   LIGHT — Deal badges & approve/decline buttons
   ═══════════════════════════════════════════════════════════ */

[data-theme="light"] .deal-badge.offer_sent {
  background: rgba(180,140,0,0.10);
  border-color: rgba(180,140,0,0.30);
  color: #8a6800;
}
[data-theme="light"] .deal-badge.accepted,
[data-theme="light"] .deal-badge.completed {
  background: rgba(0,229,196,0.10);
  border-color: rgba(0,229,196,0.30);
  color: #007a6a;
}
[data-theme="light"] .deal-badge.paid,
[data-theme="light"] .deal-badge.in_progress {
  background: rgba(124,108,255,0.10);
  border-color: rgba(124,108,255,0.28);
  color: #5b47e0;
}
[data-theme="light"] .deal-badge.disputed {
  background: rgba(255,107,107,0.10);
  border-color: rgba(255,107,107,0.28);
  color: #cc3030;
}
[data-theme="light"] .deal-badge.refunded {
  background: var(--bg);
  border-color: var(--border-strong);
  color: var(--text-muted);
}

[data-theme="light"] .btn-approve {
  background: rgba(0,229,196,0.10);
  border-color: rgba(0,229,196,0.30);
  color: #007a6a;
}
[data-theme="light"] .btn-approve:hover {
  background: rgba(0,229,196,0.18);
}
[data-theme="light"] .btn-decline {
  background: rgba(255,107,107,0.08);
  border-color: rgba(255,107,107,0.25);
  color: #cc3030;
}
[data-theme="light"] .btn-decline:hover {
  background: rgba(255,107,107,0.14);
}
[data-theme="light"] .btn-approve-conv {
  background: rgba(0,229,196,0.10);
  border-color: rgba(0,229,196,0.30);
  color: #007a6a;
}
[data-theme="light"] .btn-decline-conv {
  background: rgba(255,107,107,0.08);
  border-color: rgba(255,107,107,0.25);
  color: #cc3030;
}


/* ═══════════════════════════════════════════════════════════
   LIGHT — Inline rgba(255,255,255,0.02/03/04/05) backgrounds
         These are near-invisible on dark but look wrong on light.
         Target common structural containers.
   ═══════════════════════════════════════════════════════════ */

/* Hero grid / background overlays */
[data-theme="light"] .hero-bg,
[data-theme="light"] .hero-grid {
  opacity: 0.2;
}


/* ═══════════════════════════════════════════════════════════
   LIGHT — Theme toggle button
   ═══════════════════════════════════════════════════════════ */

.theme-toggle {
  background: none;
  border: 1px solid var(--border);
  border-radius: 50%;
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 0.8rem;
  transition: border-color 0.2s, background 0.2s;
  padding: 0;
  flex-shrink: 0;
  margin-left: 4px;
}
.theme-toggle:hover {
  border-color: var(--accent);
  background: rgba(0,229,196,0.06);
}


/* ═══════════════════════════════════════════════════════════
   Nav Verify Link
   ═══════════════════════════════════════════════════════════ */

.nav-verify-link {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.3rem 0.75rem;
  border-radius: 20px;
  font-size: 0.78rem;
  font-weight: 600;
  text-decoration: none;
  color: var(--accent2);
  border: 1px solid rgba(255, 153, 51, 0.35);
  background: rgba(255, 153, 51, 0.07);
  transition: background 0.2s, border-color 0.2s, color 0.2s;
  white-space: nowrap;
  flex-shrink: 0;
}
.nav-verify-link:hover {
  background: rgba(255, 153, 51, 0.15);
  border-color: rgba(255, 153, 51, 0.6);
}
.nav-verify-link.is-verified {
  color: var(--accent);
  border-color: rgba(0, 229, 196, 0.35);
  background: rgba(0, 229, 196, 0.07);
  pointer-events: none;
}
.nav-verify-link.is-verified:hover {
  background: rgba(0, 229, 196, 0.07);
}