@import url("fonts.css");

:root {
  --font-sans: "Satoshi", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  --ink: #ffffff;
  --muted: rgba(255, 255, 255, 0.75);
  --accent: #0095f6;
  --line: rgba(255, 255, 255, 0.14);
  --card: #1a1a22;
  --card-solid: #1a1a22;
  --input-bg: #24242d;
  --brand-gradient: linear-gradient(135deg, #6d5bf5 0%, #b23fd6 50%, #ec4899 100%);
  --danger-bg: rgba(253, 60, 60, 0.16);
  --danger-border: rgba(253, 60, 60, 0.4);
  --danger-ink: #ffd6d6;
  --success-bg: rgba(60, 200, 120, 0.16);
  --success-border: rgba(60, 200, 120, 0.4);
  --success-ink: #c8f7d9;
  --ig-gradient: linear-gradient(135deg, #4f5bd5 0%, #962fbf 30%, #d62976 55%, #fa7e1e 75%, #feda75 100%);
}

/* Premium profile themes (task.txt pricing spec: "Profile themes"). Only
   applied on public_profile.html via a body class; free tier always renders
   the default gradient/accent above. */
body.theme-ocean { --accent: #06b6d4; background: linear-gradient(165deg, #032b3a 0%, #0c4a6e 45%, #06b6d4 100%); }
body.theme-sunset { --accent: #fb923c; background: linear-gradient(165deg, #4a1005 0%, #b3400e 45%, #fb923c 100%); }
body.theme-forest { --accent: #22c55e; background: linear-gradient(165deg, #0a2e1a 0%, #14532d 45%, #22c55e 100%); }
body.theme-rose { --accent: #f43f5e; background: linear-gradient(165deg, #4a0a1a 0%, #9d174d 45%, #f43f5e 100%); }

* { box-sizing: border-box; }

/* Dark, near-black app background (task.txt: "Spotify meets Discord meets
   Apple" -- restrained purple/pink stays reserved for accents, selection
   states, buttons, progress, and the video-glow treatment below, rather
   than washing the whole app in the brand gradient). */
body {
  margin: 0;
  min-height: 100vh;
  font-family: var(--font-sans);
  font-weight: 700;
  background: #0f0f13;
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
}

/* Form controls and buttons don't inherit the page font by default -- pull
   them onto Satoshi Bold too so the whole UI is one typeface. */
input, textarea, select, button, optgroup {
  font-family: inherit;
  font-weight: 700;
}

main.page {
  max-width: 640px;
  margin: 0 auto;
  padding: 2.5rem 1.5rem 4rem;
}

main.page h1 {
  margin: 0 0 1.5rem;
  font-size: 1.7rem;
  font-weight: 800;
  letter-spacing: -0.01em;
}

.verified-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.15em;
  height: 1.15em;
  vertical-align: middle;
  margin-left: 0.35em;
  color: #4da3ff;
}
.verified-badge svg { width: 100%; height: 100%; }
/* Pro's verified badge renders gold instead of the standard Premium blue --
   see app/templates/_verified_badge.html and task.txt's "Gold Verified Badge". */
.verified-badge-gold { color: #f0b429; }

/* Logo icon (waving hand) + "Say Hello" wordmark, used in nav and hero
   contexts. The wordmark is real text (not baked into the image like the
   old lockup) so it stays crisp at any size and screen readers get it for
   free -- the icon's alt is left empty to avoid announcing it twice. */
.logo-mark {
  height: 2rem;
  width: auto;
  display: block;
  flex-shrink: 0;
}

.brand-lockup { display: inline-flex; align-items: center; gap: 0.4em; }
.brand-word { font-weight: 900; white-space: nowrap; color: var(--ink); }
.brand-word-accent {
  background: var(--brand-gradient);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* Cards */
.card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 1.25rem;
  margin-bottom: 1.25rem;
  backdrop-filter: blur(6px);
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.28);
  transition: box-shadow 0.2s ease, transform 0.2s ease;
}

.card:hover { box-shadow: 0 14px 36px rgba(0, 0, 0, 0.36); }

.card h2 {
  margin: 0 0 0.5rem;
  font-size: 1.1rem;
  font-weight: 700;
}

.card p { margin: 0.25rem 0; color: var(--muted); }

.card a.action,
a.btn-action {
  display: inline-block;
  margin-top: 0.75rem;
  padding: 0.45rem 1rem;
  font-size: 0.9rem;
  font-weight: 700;
  text-decoration: none;
  border: 1.5px solid var(--line);
  border-radius: 8px;
  color: var(--ink);
  transition: border-color 0.12s ease;
}

.card a.action:hover,
a.btn-action:hover { border-color: var(--ink); }

/* Buttons */
.btn {
  display: inline-block;
  font: inherit;
  font-size: 0.95rem;
  font-weight: 700;
  padding: 0.7rem 1.4rem;
  border-radius: 8px;
  text-decoration: none;
  border: none;
  cursor: pointer;
  transition: transform 0.12s ease, opacity 0.12s ease;
}

.btn:active { transform: scale(0.97); }
.btn:disabled { cursor: default; opacity: 0.6; }

.btn-primary { background: var(--brand-gradient); color: #ffffff; }
.btn-primary:hover { filter: brightness(1.08); }

.btn-secondary { background: transparent; color: var(--ink); border: 1.5px solid var(--line); }
.btn-secondary:hover { border-color: var(--ink); }

/* Forms */
label {
  display: block;
  font-weight: 700;
  font-size: 0.88rem;
  margin: 1rem 0 0.35rem;
}

label:first-of-type { margin-top: 0; }

input[type="text"],
input[type="email"],
input[type="password"],
input[type="url"],
input[type="file"],
textarea,
select {
  width: 100%;
  box-sizing: border-box;
  padding: 0.6rem 0.7rem;
  font: inherit;
  font-size: 0.95rem;
  background: var(--input-bg);
  border: 1px solid var(--line);
  border-radius: 8px;
  color: var(--ink);
}

input::placeholder, textarea::placeholder { color: var(--muted); }
input:focus, textarea:focus, select:focus { outline: none; border-color: var(--accent); }

/* Privacy toggle cards -- radio inputs styled as a selectable card list,
   used instead of a native <select> so every option is always visible
   (native dropdown popups render as solid white in most browsers, which
   made light-on-dark theme text invisible). */
.privacy-fieldset { border: none; padding: 0; margin: 1rem 0 0; }
.privacy-fieldset legend { font-weight: 700; font-size: 0.88rem; padding: 0; margin: 0 0 0.35rem; }

.privacy-toggle-group { display: flex; flex-direction: column; gap: 0.5rem; }

.privacy-toggle-input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

.privacy-toggle-label {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin: 0;
  padding: 0.65rem 0.85rem;
  border: 1.5px solid var(--line);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.05);
  cursor: pointer;
  opacity: 0.55;
  transition: border-color 0.15s ease, background 0.15s ease, opacity 0.15s ease;
}

.privacy-toggle-label:hover { border-color: rgba(255, 255, 255, 0.5); opacity: 0.8; }

.privacy-toggle-input:checked + .privacy-toggle-label {
  border-color: var(--accent);
  background: rgba(0, 149, 246, 0.16);
  opacity: 1;
}

.privacy-toggle-input:focus-visible + .privacy-toggle-label {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.privacy-toggle-text { display: flex; flex-direction: column; }
.privacy-toggle-title { font-weight: 700; font-size: 0.92rem; }
.privacy-toggle-desc { font-size: 0.8rem; color: var(--muted); margin-top: 0.15rem; }

.privacy-toggle-switch {
  position: relative;
  width: 2.6rem;
  height: 1.5rem;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.2);
  flex-shrink: 0;
  transition: background 0.15s ease;
}

.privacy-toggle-switch::after {
  content: "";
  position: absolute;
  top: 0.15rem;
  left: 0.15rem;
  width: 1.2rem;
  height: 1.2rem;
  border-radius: 50%;
  background: #ffffff;
  transition: transform 0.15s ease;
}

.privacy-toggle-input:checked + .privacy-toggle-label .privacy-toggle-switch {
  background: var(--accent);
}

.privacy-toggle-input:checked + .privacy-toggle-label .privacy-toggle-switch::after {
  transform: translateX(1.1rem);
}

/* Status boxes */
.error {
  background: var(--danger-bg);
  border: 1px solid var(--danger-border);
  color: var(--danger-ink);
  padding: 0.6rem 0.75rem;
  border-radius: 8px;
  font-size: 0.88rem;
  margin-top: 0.85rem;
}

.success {
  background: var(--success-bg);
  border: 1px solid var(--success-border);
  color: var(--success-ink);
  padding: 0.6rem 0.75rem;
  border-radius: 8px;
  font-size: 0.88rem;
  margin-top: 0.85rem;
}

.empty { color: var(--muted); }

[hidden] { display: none !important; }

/* IAM's signature: every video anywhere in the app -- intro videos, prompt
   videos, moments, business pitches -- gets the same glowing gradient
   border. It's meant to read as "there's a real person behind this
   profile, press play and meet them," so it stays consistent site-wide
   rather than being redefined per page. Brighter glow + slight scale-up
   on hover invites the click. */
video.current-video,
video.intro-video,
video.video-recorder-video,
#video-review-preview {
  border: 3px solid transparent;
  border-radius: 16px;
  background: linear-gradient(#0f0f13, #0f0f13) padding-box,
              var(--brand-gradient) border-box;
  box-shadow: 0 0 26px rgba(178, 63, 214, 0.35), 0 0 52px rgba(236, 72, 153, 0.16);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

video.current-video:hover,
video.intro-video:hover,
video.video-recorder-video:hover,
#video-review-preview:hover {
  transform: scale(1.02);
  box-shadow: 0 0 44px rgba(178, 63, 214, 0.55), 0 0 88px rgba(236, 72, 153, 0.3);
}

/* Shared nav */
nav.site-nav {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  padding: 0.85rem 1.5rem;
  border-bottom: 1px solid var(--line);
  font-size: 0.95rem;
  margin: 0 0 1.5rem;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}

nav.site-nav::-webkit-scrollbar { display: none; }

nav.site-nav .brand { display: inline-flex; text-decoration: none; flex-shrink: 0; }
nav.site-nav .brand .brand-word { font-size: 1.1rem; }
nav.site-nav a { color: var(--ink); text-decoration: none; white-space: nowrap; }
nav.site-nav a:hover { text-decoration: underline; }
nav.site-nav .nav-right { margin-left: auto; display: flex; align-items: center; gap: 1.25rem; flex-shrink: 0; }
nav.site-nav #nav-logout-btn { font: inherit; font-size: 0.95rem; background: none; border: none; padding: 0; cursor: pointer; color: var(--ink); white-space: nowrap; }
nav.site-nav #nav-logout-btn:hover { text-decoration: underline; }
nav.site-nav #nav-logout-btn:disabled { cursor: default; opacity: 0.6; text-decoration: none; }

nav.site-nav a.nav-btn {
  background: var(--accent);
  color: #ffffff;
  padding: 0.4rem 0.95rem;
  border-radius: 999px;
  font-weight: 700;
  font-size: 0.9rem;
}

nav.site-nav a.nav-btn:hover { opacity: 0.85; text-decoration: none; }

nav.site-nav a.nav-btn-primary {
  background: linear-gradient(135deg, #0095f6 0%, #7c3aed 100%);
}

.lang-toggle {
  display: inline-flex;
  gap: 0.15rem;
  padding: 0.2rem;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid var(--line);
}

.lang-toggle a {
  padding: 0.2rem 0.55rem;
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--muted);
  text-decoration: none;
  line-height: 1.4;
}

.lang-toggle a:hover { color: var(--ink); text-decoration: none; }
.lang-toggle a.active { background: var(--accent); color: #ffffff; }
nav.site-nav .lang-toggle { margin-right: 0.25rem; }

.site-nav-links { display: flex; align-items: center; gap: 1.1rem; }
.site-nav-links a { font-size: 0.92rem; font-weight: 700; }

/* Shared hamburger button (both the anonymous marketing nav and the
   authenticated top nav collapse their middle links into this at narrow
   widths) */
.top-nav-burger {
  display: none;
  align-items: center;
  justify-content: center;
  width: 2.6rem;
  height: 2.6rem;
  border-radius: 10px;
  background: none;
  border: none;
  color: var(--ink);
  cursor: pointer;
  flex-shrink: 0;
}

.top-nav-burger svg { width: 1.6rem; height: 1.6rem; }
.top-nav-burger:hover { background: rgba(255, 255, 255, 0.1); }

.side-nav-burger {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.6rem;
  height: 2.6rem;
  border-radius: 10px;
  background: none;
  border: none;
  color: var(--ink);
  cursor: pointer;
  flex-shrink: 0;
}

.side-nav-burger svg { width: 1.6rem; height: 1.6rem; }
.side-nav-burger:hover { background: rgba(255, 255, 255, 0.1); }

@media (max-width: 720px) {
  nav.site-nav { gap: 0.9rem; font-size: 0.9rem; padding: 0.75rem 1rem; flex-wrap: wrap; }
  nav.site-nav .nav-right { gap: 0.9rem; }
  nav.site-nav .top-nav-burger { display: flex; margin-left: auto; order: 1; }

  .site-nav-links {
    display: none;
    order: 3;
    width: 100%;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding-top: 0.5rem;
    border-top: 1px solid var(--line);
    margin-top: 0.5rem;
  }

  .site-nav-links.open { display: flex; }
  .site-nav-links a { padding: 0.75rem 0.25rem; }
}

/* Left sidebar (authenticated) — a fixed vertical app nav, Instagram-style.
   Replaces the earlier horizontal top-nav app bar. */
:root { --side-nav-width: 15.5rem; --mobile-top-bar-height: 3.75rem; }

body:has(.side-nav) { padding-left: var(--side-nav-width); }

.mobile-top-bar {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 55;
  height: var(--mobile-top-bar-height);
  align-items: center;
  justify-content: space-between;
  padding: 0 1rem;
  background: rgba(26, 26, 34, 0.92);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--line);
}

.mobile-top-bar-logo { display: inline-flex; }
.mobile-top-bar-logo .logo-mark { height: 2rem; width: auto; }
.mobile-top-bar-logo .brand-word { font-size: 1.05rem; }

.side-nav-backdrop {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.55);
  z-index: 49;
}

nav.side-nav {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  width: var(--side-nav-width);
  z-index: 50;
  display: flex;
  flex-direction: column;
  padding: 1.6rem 1rem;
  background: rgba(26, 26, 34, 0.82);
  backdrop-filter: blur(14px);
  border-right: 1px solid var(--line);
  overflow-y: auto;
}

.side-nav-logo { display: inline-flex; flex-shrink: 0; padding: 0 0.6rem; margin-bottom: 1.75rem; }
.side-nav-logo .logo-mark { height: 2.2rem; width: auto; }
.side-nav-logo .brand-word { font-size: 1.2rem; }

.side-nav-links {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
}

.side-nav-links a {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  padding: 0.65rem 0.85rem;
  border-radius: 12px;
  color: var(--muted);
  text-decoration: none;
  font-size: 0.9rem;
  font-weight: 700;
  white-space: nowrap;
}

.side-nav-links a svg { width: 1.35rem; height: 1.35rem; flex-shrink: 0; }
.side-nav-links a:hover { color: var(--ink); background: rgba(255, 255, 255, 0.08); }
.side-nav-links a.active {
  color: var(--ink);
  background: linear-gradient(135deg, rgba(109, 91, 245, 0.28) 0%, rgba(178, 63, 214, 0.28) 50%, rgba(236, 72, 153, 0.28) 100%);
  box-shadow: inset 0 0 0 1px rgba(178, 63, 214, 0.4);
}

.side-nav-utility {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  margin-top: auto;
  padding-top: 1rem;
  border-top: 1px solid var(--line);
}

.side-nav-utility-btn {
  position: relative;
  display: flex;
  align-items: center;
  gap: 0.9rem;
  padding: 0.6rem 0.85rem;
  border-radius: 12px;
  background: none;
  border: none;
  color: var(--muted);
  cursor: pointer;
  font: inherit;
  font-size: 0.9rem;
  font-weight: 700;
  text-align: left;
}

.side-nav-utility-btn:hover { color: var(--ink); background: rgba(255, 255, 255, 0.08); }
.side-nav-utility-btn svg { width: 1.35rem; height: 1.35rem; flex-shrink: 0; }

.side-nav-lang-toggle { align-self: flex-start; margin: 0.15rem 0 0.15rem 0.85rem; }

.notif-badge {
  min-width: 1.3rem;
  height: 1.3rem;
  padding: 0 0.3rem;
  border-radius: 999px;
  background: #fd3c3c;
  color: #ffffff;
  font-size: 0.7rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  margin-left: auto;
}

.notif-panel {
  position: fixed;
  top: 1rem;
  left: calc(var(--side-nav-width) + 0.75rem);
  width: 22rem;
  max-width: calc(100vw - 2rem);
  max-height: 70vh;
  overflow-y: auto;
  background: var(--card-solid);
  border: 1px solid var(--line);
  border-radius: 14px;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.4);
  z-index: 60;
}

.notif-panel-header {
  padding: 1rem 1.1rem 0.75rem;
  font-weight: 700;
  border-bottom: 1px solid var(--line);
}

.notif-list { padding: 0.5rem; }
.notif-list .empty { padding: 0.75rem; margin: 0; }

.notif-item {
  padding: 0.75rem;
  border-radius: 10px;
}

.notif-item.unread { background: rgba(255, 255, 255, 0.06); }
.notif-item .notif-message { margin: 0 0 0.5rem; color: var(--ink); font-size: 0.9rem; }

.notif-actions { display: flex; flex-wrap: wrap; gap: 0.4rem; }

.notif-action {
  font: inherit;
  font-size: 0.8rem;
  font-weight: 700;
  padding: 0.35rem 0.7rem;
  border-radius: 999px;
  border: 1.5px solid var(--line);
  background: none;
  color: var(--ink);
  text-decoration: none;
  cursor: pointer;
}

.notif-action:hover { border-color: var(--ink); }
.notif-action:disabled { cursor: default; opacity: 0.6; }

@media (max-width: 900px) {
  body:has(.side-nav) { padding-left: 0; padding-top: var(--mobile-top-bar-height); }

  .mobile-top-bar { display: flex; }
  .side-nav-backdrop:not([hidden]) { display: block; }

  nav.side-nav {
    top: 0;
    width: min(80vw, 20rem);
    padding-top: calc(var(--mobile-top-bar-height) + 1rem);
    transform: translateX(-100%);
    transition: transform 0.22s ease;
    box-shadow: 20px 0 50px rgba(0, 0, 0, 0.5);
  }

  nav.side-nav.open { transform: translateX(0); }

  .notif-panel { right: 0.75rem; left: 0.75rem; width: auto; max-width: none; }
}

/* In-browser video recorder (attached next to a video file input via
   video_recorder.js) */
.video-recorder { margin-top: 0.6rem; }

.video-recorder-panel {
  position: relative;
  margin-top: 0.75rem;
  padding: 1rem;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--card);
  backdrop-filter: blur(6px);
  text-align: center;
}

.video-recorder-video {
  width: 100%;
  max-width: 260px;
  border-radius: 12px;
  background: #000;
  display: block;
  margin: 0 auto;
}

.video-recorder-status {
  color: var(--muted);
  font-size: 0.85rem;
  margin: 0.6rem 0;
}

.video-recorder-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  justify-content: center;
}

.video-recorder-close {
  position: absolute;
  top: 0.5rem;
  right: 0.6rem;
  background: none;
  border: none;
  color: var(--muted);
  font-size: 1.3rem;
  line-height: 1;
  cursor: pointer;
  padding: 0.2rem;
}

.video-recorder-close:hover { color: var(--ink); }

/* Secondary button -- used as both <button> and <a>, hence display/
   text-decoration are part of the base rule rather than being patched in
   per-page (a bug: some pages that only ever used this on an <a> tag
   forgot the override, so the link fell back to raw blue/underlined
   browser defaults). */
.secondary-btn {
  display: inline-block;
  margin-top: 0;
  padding: 0.35rem 0.8rem;
  font: inherit;
  font-size: 0.85rem;
  font-weight: 700;
  cursor: pointer;
  background: transparent;
  color: var(--ink);
  border: 1.5px solid var(--line);
  border-radius: 8px;
  text-decoration: none;
}
.secondary-btn:hover { border-color: var(--ink); }
.secondary-btn:disabled { cursor: default; opacity: 0.6; }

/* Share section (_share_section.html), included on the edit page, the
   onboarding wizard's final step, and the dashboard */
.share-section { margin-top: 2rem; padding-top: 1rem; border-top: 1px solid var(--line); }
.share-ready { font-weight: 700; margin: 0 0 0.25rem; font-size: 1.05rem; }
.share-ready-subtext { color: var(--muted); margin: 0 0 0.75rem; font-size: 0.9rem; }
.share-locked { color: var(--muted); margin: 0 0 0.75rem; }
.share-primary-actions { display: flex; flex-wrap: wrap; gap: 0.75rem; }
.btn-large { flex: 1; min-width: 10rem; padding: 1rem 1.5rem; font-size: 1.05rem; }
.share-secondary-actions { margin-top: 0.85rem; }
.share-secondary-actions .secondary-btn { margin: 0.35rem 0.5rem 0 0; }
#share-status { display: block; font-size: 0.85rem; color: var(--muted); margin-top: 0.6rem; }
.share-url { color: var(--muted); font-size: 0.85rem; word-break: break-all; margin-top: 0.75rem; }

.qr-fullscreen-modal {
  position: fixed;
  inset: 0;
  z-index: 80;
  background: #ffffff;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  padding: 2rem;
}

.qr-fullscreen-image { width: min(80vw, 24rem); height: auto; }

.qr-modal-hint { color: #333; font-size: 0.95rem; margin: 0; }

.qr-modal-close {
  position: absolute;
  top: 1.25rem;
  right: 1.25rem;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 50%;
  border: none;
  background: rgba(0, 0, 0, 0.08);
  color: #111;
  font-size: 1.4rem;
  line-height: 1;
  cursor: pointer;
}

.qr-modal-close:hover { background: rgba(0, 0, 0, 0.16); }

/* Social share row (see app/templates/_social_share_row.html) -- a persistent,
   always-visible icon strip rather than a single generic "Share" button
   tucked in a menu. Used on the owner's own share screens and on every
   public profile so a viewer can re-share what they found too. */
.social-share-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.6rem;
  margin: 1rem 0;
  position: relative;
}

.social-share-icon {
  width: 2.5rem;
  height: 2.5rem;
  padding: 0;
  border: none;
  background: none;
  border-radius: 12px;
  cursor: pointer;
  flex-shrink: 0;
  transition: transform 0.12s ease;
}

.social-share-icon svg { width: 100%; height: 100%; display: block; }
.social-share-icon:hover { transform: translateY(-2px); }
.social-share-icon:active { transform: translateY(0) scale(0.96); }

.social-share-status {
  position: absolute;
  bottom: -1.6rem;
  left: 50%;
  transform: translateX(-50%);
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--success-ink);
  white-space: nowrap;
}