/* ===== SHARED BASE STYLES =====
   Rules that were byte-identical in two or more page stylesheets.
   Loaded before the page stylesheet, so page-specific rules still win.

   Deliberately NOT here: .btn-primary, .btn-outline, .glass-card, .timeline-dot
   and others that differ slightly per page. Unifying those changes how the
   pages look, which is a design decision rather than a refactor.

   .btn-accent / .btn-glass below ARE that decision, made deliberately: a new,
   standardized primary/secondary button pair meant to be reused across every
   page, not per-page styling. New names on purpose, not a redefinition of
   .btn-primary/.btn-secondary — those stay exactly as each page already has
   them, so nothing existing shifts colour underneath it. Adopt these on a
   button-by-button basis when a page is ready to move to them. Colours are
   hardcoded rather than pulled from each page's own custom properties, since
   this pair needs to look identical everywhere regardless of which page's
   (light or dark) token set happens to be in scope. */
.btn-accent {
  display: inline-flex; align-items: center; gap: 8px;
  background: #C5F578; color: #0D0F12;
  border: none; border-radius: 9999px;
  padding: 12px 24px;
  font-weight: 700; font-size: 15px; line-height: 1.2;
  cursor: pointer; text-decoration: none;
  transition: opacity 0.2s ease, transform 0.2s ease;
}
.btn-accent:hover { opacity: 0.88; transform: scale(1.03); }
.btn-accent:active { transform: scale(0.97); }

.btn-glass {
  display: inline-flex; align-items: center; gap: 8px;
  background: rgba(255,255,255,0.05);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  color: #FFFFFF;
  border: 1px solid rgba(255,255,255,0.2);
  border-radius: 9999px;
  padding: 12px 24px;
  font-weight: 600; font-size: 15px; line-height: 1.2;
  cursor: pointer; text-decoration: none;
  transition: background 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}
.btn-glass:hover { background: rgba(255,255,255,0.1); border-color: rgba(255,255,255,0.32); transform: scale(1.02); }
.btn-glass:active { transform: scale(0.97); }

/* Success/"done" companion to .btn-accent — a completed action, not a brand/
   CTA one, so it's emerald rather than the lime accent (this app's own
   convention: lime = brand/CTA, emerald = done/completed/success — see
   dashboard.css's --emerald token for the fuller reasoning). Swap classes
   (remove .btn-accent, add .btn-done) rather than layering them on the same
   element, so the result never depends on which stylesheet loaded last. */
.btn-done {
  display: inline-flex; align-items: center; gap: 8px;
  background: rgba(16,185,129,0.16); color: #10B981;
  border: 1.5px solid rgba(16,185,129,0.4);
  border-radius: 9999px;
  padding: 12px 24px;
  font-weight: 700; font-size: 15px; line-height: 1.2;
  cursor: pointer;
  transition: background 0.2s ease;
}
.btn-done:hover { background: rgba(16,185,129,0.26); }

.navbar.classic {
      background: transparent;
      padding: 20px 24px;
    }

.navbar.floating {
      padding: 12px 16px;
    }

.nav-inner {
      max-width: 1200px;
      margin: 0 auto;
      display: flex;
      align-items: center;
      justify-content: space-between;
      transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    }

.tech-badge {
      font-family: 'JetBrains Mono', monospace;
      font-size: 11px;
      font-weight: 500;
      letter-spacing: 0.05em;
      text-transform: uppercase;
      color: #08906C;
      background: rgba(8, 144, 108, 0.06);
      padding: 4px 10px;
      border-radius: 6px;
      display: inline-block;
      margin-bottom: 16px;
    }

.text-gradient {
      background: linear-gradient(135deg, #08906C 0%, #0CA678 100%);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
    }

/* Closed = visibility:hidden, not just opacity:0 - a transparent overlay
       with a live backdrop-filter still made the browser re-blur the whole
       page behind it on every scroll frame. Blur only while open. */
.auth-modal-overlay {
      position: fixed; inset: 0; z-index: 400;
      background: rgba(0,0,0,0.5);
      display: flex; align-items: center; justify-content: center;
      opacity: 0; visibility: hidden; pointer-events: none;
      transition: opacity 0.3s ease, visibility 0s linear 0.3s;
    }

.auth-modal-overlay.active { opacity: 1; visibility: visible; pointer-events: all; transition-delay: 0s; backdrop-filter: blur(4px); }

.auth-tab.active { color: #08906C; border-bottom-color: #08906C; }

.loading-spinner {
      border: 3px solid rgba(8,144,108,0.15); border-top: 3px solid #08906C;
      border-radius: 50%; width: 32px; height: 32px; animation: spin 0.8s linear infinite;
    }

.upload-zone:hover { border-color: #08906C; background: #F0FDF8; }