/* ==========================================================================
   Flex Bio — styled per DESIGN.md (Flexing Data design system)
   Warm paper world, ink navy type, one blue + one coral accent.
   ========================================================================== */

:root {
  --fd-ink: #18222F;
  --fd-blue: #0A96C7;
  --fd-blue-deep: #0A7BA6;
  --fd-coral: #FF9D83;
  --fd-cream: #FFF4E9;
  --fd-deep: #101820;
  --fd-paper: #FFFAF4;
  --fd-paper-2: #FFF3E9;
  --fd-ink-2: #44515F;
  --fd-muted: #6C7785;
  --fd-line: rgba(24, 34, 47, .09);
  --fd-dark-footer: #12202C;

  --fd-blue-soft: #E4F4FB;   --fd-blue-text: #0A7BA6;
  --fd-coral-soft: #FFEDE6;  --fd-coral-text: #D4502B;
  --fd-amber-soft: #FFF5DF;  --fd-amber-text: #9A6206;
  --fd-teal-soft: #E6F6F0;   --fd-teal-text: #0C7A5A;
  --fd-violet-soft: #EFEAFF; --fd-violet-text: #5A3FD6;

  --grad-primary: linear-gradient(135deg, #0A96C7, #0A7BA6);
  --grad-warm: linear-gradient(135deg, #FF8A63, #FF9D83);
  --grad-dark: linear-gradient(135deg, #11212E, #16344A);

  --shadow-sm: 0 4px 14px -6px rgba(15, 42, 64, .18);
  --shadow: 0 22px 48px -22px rgba(15, 42, 64, .30);
  --shadow-lg: 0 40px 80px -30px rgba(15, 42, 64, .35);
  --shadow-btn-blue: 0 12px 26px -10px rgba(10, 150, 199, .6);
  --shadow-btn-coral: 0 12px 26px -10px rgba(255, 138, 99, .6);

  --ease: cubic-bezier(.22, 1, .36, 1);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }

html, body { overflow-x: hidden; max-width: 100%; }
body {
  margin: 0;
  background: var(--fd-paper);
  color: var(--fd-ink-2);
  font: 400 16px/1.7 'Poppins', system-ui, -apple-system, 'Segoe UI', sans-serif;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 {
  color: var(--fd-ink);
  font-weight: 800;
  letter-spacing: -.02em;
  line-height: 1.14;
  margin: 0 0 14px;
}
h1 { font-size: clamp(32px, 5.2vw, 57px); }
h2 { font-size: clamp(26px, 3.6vw, 40px); }
h3 { font-size: 22px; margin-bottom: 18px; }
h4 { font-size: 17px; font-weight: 700; margin-bottom: 8px; }

p { margin: 0 0 14px; }
b { font-weight: 700; color: var(--fd-ink); }
a { color: var(--fd-blue-deep); text-decoration: none; transition: color .16s var(--ease); }

.container { max-width: 1160px; margin: 0 auto; padding: 0 22px; }
/* Dashboard only — a web-app screen benefits from using more of a wide
   monitor than the narrower reading-width marketing/auth pages do. */
.container-wide { max-width: 1600px; margin: 0 auto; padding: 0 32px; }
.lede { font-size: clamp(16px, 2vw, 19px); line-height: 1.6; max-width: 540px; }
.hl { color: var(--fd-blue-deep); box-shadow: inset 0 -.34em 0 rgba(253, 205, 117, .55); }
.hl-blue { color: var(--fd-blue-deep); }
.hint { font-size: 13px; color: var(--fd-muted); margin: 6px 0 0; }

/* ----- logo ----- */
.logo { font-size: 22px; font-weight: 800; color: var(--fd-ink); letter-spacing: -.02em; }
.logo span { color: var(--fd-blue); }

/* ----- buttons ----- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  background: var(--grad-primary); color: #fff; border: 0; border-radius: 13px;
  font: 700 16px 'Poppins', sans-serif; padding: 15px 26px; min-height: 54px;
  cursor: pointer; box-shadow: var(--shadow-btn-blue);
  transition: transform .16s var(--ease), box-shadow .16s var(--ease), border-color .16s var(--ease), color .16s var(--ease);
}
.btn:hover { transform: translateY(-2px); box-shadow: 0 16px 32px -10px rgba(10, 150, 199, .7); color: #fff; }
.btn:disabled { opacity: .6; cursor: default; transform: none; }
.btn-warm { background: var(--grad-warm); box-shadow: var(--shadow-btn-coral); }
.btn-warm:hover { box-shadow: 0 16px 32px -10px rgba(255, 138, 99, .7); }
.btn-ghost { background: #fff; color: var(--fd-ink); border: 1.5px solid var(--fd-line); box-shadow: none; }
.btn-ghost:hover { border-color: var(--fd-blue); color: var(--fd-blue-deep); box-shadow: none; }
.btn-sm { min-height: 44px; padding: 10px 18px; font-size: 15px; }
.btn-wide { width: 100%; }

.link-btn {
  background: none; border: 0; padding: 0; cursor: pointer;
  color: var(--fd-blue-deep); font: 600 14px 'Poppins', sans-serif;
}
.link-btn:hover { color: var(--fd-ink); }
.logout-link { font-weight: 600; font-size: 14.5px; color: var(--fd-muted); }
.logout-link:hover { color: var(--fd-ink); }

/* ----- eyebrow pills ----- */
.eyebrow {
  display: inline-flex; align-items: center; gap: 6px; border-radius: 999px;
  padding: 7px 15px; font-size: 12.5px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .06em; margin-bottom: 16px;
}
.eyebrow-sky { background: var(--fd-blue-soft); color: var(--fd-blue-text); }
.eyebrow-coral { background: var(--fd-coral-soft); color: var(--fd-coral-text); }
.eyebrow-amber { background: var(--fd-amber-soft); color: var(--fd-amber-text); }
.eyebrow-teal { background: var(--fd-teal-soft); color: var(--fd-teal-text); }
.eyebrow-violet { background: var(--fd-violet-soft); color: var(--fd-violet-text); }

/* ----- chips ----- */
.chip {
  display: inline-flex; align-items: center; gap: 7px;
  background: #fff; border: 1px solid var(--fd-line); border-radius: 14px;
  padding: 12px 18px; font-size: 14.5px; font-weight: 600; color: var(--fd-ink-2);
  box-shadow: var(--shadow-sm);
}
.chip-row { display: flex; gap: 12px; flex-wrap: wrap; }

/* ----- cards ----- */
.card {
  background: #fff; border: 1px solid var(--fd-line); border-radius: 22px;
  box-shadow: var(--shadow-sm); padding: 28px;
}
.card-hover { transition: transform .2s var(--ease), box-shadow .2s var(--ease); }
.card-hover:hover { transform: translateY(-5px); box-shadow: var(--shadow); }
.icon-tile {
  width: 52px; height: 52px; border-radius: 15px; margin-bottom: 16px;
  display: flex; align-items: center; justify-content: center; font-size: 26px;
}
.feature-p { font-size: 15px; }
.card-outcome { color: var(--fd-blue-deep); font-weight: 600; font-size: 14.5px; margin: 10px 0 0; }

/* ----- forms ----- */
label { display: block; font-size: 14px; font-weight: 600; color: var(--fd-ink); margin: 0 0 6px; }
.field { margin-bottom: 18px; }
.input {
  width: 100%; background: #fff; color: var(--fd-ink);
  border: 1.5px solid rgba(24, 34, 47, .12); border-radius: 9px;
  padding: 13px 15px; font: 400 16px 'Poppins', sans-serif;
  transition: border-color .16s var(--ease), box-shadow .16s var(--ease);
}
.input:focus { outline: none; border-color: var(--fd-blue); box-shadow: 0 0 0 3px rgba(10, 150, 199, .14); }
textarea.input { resize: vertical; min-height: 74px; }
.input-emoji { width: 90px; text-align: center; }
.form-error { color: var(--fd-coral-text); font-size: 14px; font-weight: 500; min-height: 20px; margin: 10px 0 0; }
.form-note { color: var(--fd-teal-text); font-size: 13.5px; font-weight: 500; margin: 2px 0 0; }

/* ----- OTP boxes (golden rule) ----- */
.otp-row { display: flex; gap: 10px; margin: 8px 0 6px; }
.otp-box {
  width: 44px; height: 52px; text-align: center;
  font: 700 22px 'Poppins', sans-serif; color: var(--fd-ink);
  border: 1.5px solid rgba(24, 34, 47, .12); border-radius: 9px; background: #fff;
  transition: border-color .16s var(--ease), box-shadow .16s var(--ease), background .16s var(--ease);
}
.otp-box:focus { outline: none; border-color: var(--fd-blue); box-shadow: 0 0 0 3px rgba(10, 150, 199, .14); }
.otp-box.filled { border-color: var(--fd-blue); background: rgba(10, 150, 199, .06); }

/* smaller OTP row used inline in the dashboard's account card */
.otp-row-sm .otp-box { width: 38px; height: 46px; font-size: 18px; }

.acc-email-field { margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--fd-line); }
#acc-email-otp { margin-top: 14px; }

/* ----- header / footer ----- */
.site-header {
  position: sticky; top: 0; z-index: 50;
  background: rgba(255, 250, 244, .82);
  backdrop-filter: blur(14px) saturate(180%);
  -webkit-backdrop-filter: blur(14px) saturate(180%);
  border-bottom: 1px solid var(--fd-line);
}
.header-inner { height: 72px; display: flex; align-items: center; justify-content: space-between; gap: 14px; }
.header-nav { display: flex; align-items: center; gap: 12px; }
/* dashboard header: link box + share + account menu, all one row next to
   the logo, instead of a near-empty first row with a second row below it */
.header-actions { display: flex; align-items: center; gap: 10px; min-width: 0; }

/* profile menu — a plain hamburger icon back in the header (a fixed
   floating corner button read as awkward/unanchored on mobile). The
   dropdown carries the avatar/name itself, opening downward under it. */
.profile-menu { position: relative; }
.hamburger-btn {
  position: relative; width: 40px; height: 40px; border-radius: 10px;
  border: 1.5px solid var(--fd-line); background: #fff; cursor: pointer;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
  transition: border-color .16s var(--ease);
}
.hamburger-btn:hover { border-color: var(--fd-blue); }
.hamburger-btn span { width: 18px; height: 2px; border-radius: 2px; background: var(--fd-ink); }
.profile-avatar {
  width: 32px; height: 32px; border-radius: 50%; flex: none; overflow: hidden;
  background: var(--fd-blue-soft); color: var(--fd-blue-text);
  display: flex; align-items: center; justify-content: center;
  font-size: 15px; font-weight: 800;
}
.profile-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.profile-name { font-weight: 700; color: var(--fd-ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.profile-dropdown {
  position: absolute; top: calc(100% + 8px); right: 0; z-index: 60; min-width: 220px;
  background: #fff; border: 1px solid var(--fd-line); border-radius: 14px;
  box-shadow: var(--shadow); padding: 6px; display: flex; flex-direction: column; gap: 2px;
}
/* setting `display` above overrides the browser's default [hidden]{display:none} —
   restate it explicitly so toggling the hidden attribute actually hides this */
.profile-dropdown[hidden] { display: none; }
.profile-dropdown-identity { display: flex; align-items: center; gap: 10px; padding: 8px 10px; min-width: 0; }
.profile-dropdown-divider { border: 0; border-top: 1px solid var(--fd-line); margin: 4px 0; }
.profile-dropdown-item {
  display: block; width: 100%; text-align: left; background: none; border: 0;
  padding: 10px 12px; border-radius: 9px; font: 600 14.5px 'Poppins', sans-serif;
  color: var(--fd-ink); cursor: pointer; transition: background .16s var(--ease);
}
.profile-dropdown-item:hover { background: var(--fd-paper-2); color: var(--fd-ink); }
/* the desktop sidebar already has its own Link shortener card, so the
   hamburger-menu duplicate only needs to show up once that card is hidden */
.profile-dropdown-item-mobile-only { display: none; }

.link-box {
  display: flex; align-items: center; gap: 4px; min-width: 0; flex: 1 1 auto;
  background: #fff; border: 1.5px solid var(--fd-line); border-radius: 10px;
  padding: 6px 6px 6px 14px;
}
/* Font-size is shrunk by JS (see fitLinkBoxUrl in dashboard.js) so the
   full link is always readable instead of getting cut off with an
   ellipsis — overflow:hidden here is just a safety net, not the plan. */
.link-box-url {
  font-weight: 700; font-size: 14.5px; color: var(--fd-ink);
  white-space: nowrap; overflow: hidden; min-width: 0;
}
.link-box-url:hover { color: var(--fd-blue-deep); }
.icon-btn {
  display: flex; align-items: center; justify-content: center; flex: none;
  width: 32px; height: 32px; border-radius: 8px; padding: 0;
  border: 1.5px solid transparent; background: none; color: var(--fd-muted);
  cursor: pointer; transition: background .16s var(--ease), color .16s var(--ease), border-color .16s var(--ease);
}
.icon-btn:hover { background: var(--fd-paper-2); color: var(--fd-ink); }
.icon-btn-accent {
  background: var(--fd-blue-soft); color: var(--fd-blue-text); border-color: var(--fd-blue-soft);
}
.icon-btn-accent:hover { background: var(--fd-blue); color: #fff; border-color: var(--fd-blue); }

/* modal (account settings) */
.modal-overlay {
  position: fixed; inset: 0; z-index: 80; background: rgba(16, 24, 32, .45);
  display: flex; align-items: center; justify-content: center; padding: 22px;
}
/* same [hidden] override as .profile-dropdown above */
.modal-overlay[hidden] { display: none; }
.modal-card {
  position: relative; width: 100%; max-width: 440px; max-height: 88vh; overflow-y: auto;
  background: #fff; border-radius: 22px; box-shadow: var(--shadow-lg); padding: 30px;
}
.modal-close {
  position: absolute; top: 16px; right: 16px; width: 32px; height: 32px; border-radius: 50%;
  border: 1px solid var(--fd-line); background: #fff; color: var(--fd-muted);
  cursor: pointer; font-size: 14px; transition: color .16s var(--ease), border-color .16s var(--ease);
}
.modal-close:hover { color: var(--fd-ink); border-color: var(--fd-blue); }

.site-footer { background: var(--fd-dark-footer); padding: 40px 0; margin-top: clamp(56px, 7vw, 104px); }
.footer-inner { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.site-footer .logo { color: #fff; }
.footer-note { font-size: 13px; color: #7C8D9A; margin: 6px 0 0; }
.footer-links { display: flex; gap: 22px; }
.site-footer .footer-links a { color: #DCEAF2; font-weight: 600; font-size: 14.5px; }
.site-footer .footer-links a:hover { color: #fff; }

/* ----- decorative glows ----- */
.glow { position: absolute; border-radius: 50%; filter: blur(70px); pointer-events: none; }
.glow-blue { width: 420px; height: 420px; background: rgba(10, 150, 199, .12); top: -80px; right: 8%; }
.glow-coral { width: 380px; height: 380px; background: rgba(255, 157, 131, .14); bottom: -60px; left: -4%; }

/* ----- sections ----- */
.section { padding: clamp(56px, 7vw, 104px) 0; }
.section-peach { background: var(--fd-paper-2); }
.section-head { text-align: center; max-width: 640px; margin: 0 auto 40px; }
.feature-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }

/* ----- hero ----- */
.hero { position: relative; overflow: hidden; padding: clamp(56px, 7vw, 104px) 0 clamp(40px, 5vw, 72px); }
.hero-grid { display: grid; grid-template-columns: 1.05fr .95fr; gap: 40px; align-items: center; position: relative; }
.claim-bar { display: flex; gap: 12px; margin: 26px 0 22px; flex-wrap: wrap; }
.claim-input {
  display: flex; align-items: center; flex: 1; min-width: 250px;
  background: #fff; border: 1.5px solid rgba(24, 34, 47, .12); border-radius: 13px;
  padding-left: 16px;
  transition: border-color .16s var(--ease), box-shadow .16s var(--ease);
}
.claim-input:focus-within { border-color: var(--fd-blue); box-shadow: 0 0 0 3px rgba(10, 150, 199, .14); }
.claim-prefix { font-weight: 600; color: var(--fd-muted); font-size: 15px; white-space: nowrap; }
.claim-input input {
  border: 0; outline: 0; background: none; width: 100%; min-width: 0;
  font: 600 16px 'Poppins', sans-serif; color: var(--fd-ink);
  padding: 15px 14px 15px 2px;
}
.avail { font-size: 13.5px; font-weight: 600; min-height: 20px; margin: 6px 0 0; }
.avail.ok { color: var(--fd-teal-text); }
.avail.no { color: var(--fd-coral-text); }

/* ----- phone mock / preview ----- */
.hero-visual { position: relative; display: flex; justify-content: center; }
.phone {
  background: #fff; border: 1px solid var(--fd-line); border-radius: 34px;
  padding: 14px; box-shadow: var(--shadow-lg); width: min(330px, 100%);
}
.phone-screen {
  position: relative; overflow: hidden auto; background: var(--fd-paper);
  border-radius: 24px; padding: 34px 20px 24px; height: 560px;
  display: flex; flex-direction: column; align-items: center; text-align: center;
}
/* homepage hero mock only — fixed demo content, just tall enough to fit
   without ever triggering the scrollbar .phone-screen shows when content
   overflows (that overflow is wanted in the dashboard's live preview,
   which has to handle a variable, growing list of real links) */
.hero-visual .phone-screen { height: 620px; }

.float-tile {
  position: absolute; z-index: 2; width: 54px; height: 54px; border-radius: 16px;
  display: flex; align-items: center; justify-content: center; font-size: 26px;
  border: 1px solid var(--fd-line); box-shadow: var(--shadow-sm);
}
.tile-a { top: 6%; left: 3%; transform: rotate(-8deg); background: var(--fd-amber-soft); }
.tile-b { top: 40%; right: 1%; transform: rotate(7deg); background: var(--fd-teal-soft); }
.tile-c { bottom: 7%; left: 1%; transform: rotate(6deg); background: var(--fd-violet-soft); }

/* ----- bio page (shared by public page, phone mock, live preview) ----- */
.bio-wrap {
  position: relative; overflow: hidden; min-height: 100vh;
  display: flex; flex-direction: column; align-items: center;
  padding: clamp(40px, 8vw, 72px) 22px 40px;
}
.bio-inner {
  width: 100%; max-width: 560px; position: relative;
  display: flex; flex-direction: column; align-items: center; text-align: center;
}
.bio-avatar {
  width: 86px; height: 86px; border-radius: 50%; flex: none;
  display: flex; align-items: center; justify-content: center;
  font-size: 40px; font-weight: 800; background: #fff;
  border: 1px solid var(--fd-line); box-shadow: var(--shadow-sm); margin-bottom: 16px;
}
.bio-name {
  font-size: 26px; font-weight: 800; color: var(--fd-ink); letter-spacing: -.02em;
  overflow-wrap: anywhere; max-width: 100%;
}
.bio-handle { font-size: 13.5px; font-weight: 600; color: var(--fd-muted); margin-top: 2px; overflow-wrap: anywhere; }
.bio-tagline {
  color: var(--fd-ink-2); font-size: 15px; line-height: 1.6; margin: 10px 0 0;
  max-width: 420px; overflow-wrap: anywhere;
}

/* social icon row — sits just under the name/handle */
.bio-socials { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 14px; }
.social-icon {
  width: 42px; height: 42px; border-radius: 50%; flex: none;
  display: flex; align-items: center; justify-content: center;
  box-shadow: var(--shadow-sm); transition: transform .16s var(--ease), box-shadow .16s var(--ease);
}
.social-icon:hover { transform: translateY(-2px); box-shadow: var(--shadow); }

/* small refresh affordance, top-right of the public page */
.bio-refresh {
  position: absolute; top: 18px; right: 18px; z-index: 3;
  width: 38px; height: 38px; border-radius: 50%; padding: 0;
  display: flex; align-items: center; justify-content: center;
  background: #fff; border: 1px solid var(--fd-line); color: var(--fd-ink-2);
  font-size: 18px; line-height: 1; cursor: pointer; box-shadow: var(--shadow-sm);
  transition: transform .16s var(--ease), box-shadow .16s var(--ease), color .16s var(--ease);
}
.bio-refresh:hover { transform: translateY(-2px) rotate(45deg); box-shadow: var(--shadow); color: var(--fd-blue-deep); }

.bio-links { width: 100%; display: flex; flex-direction: column; gap: 12px; margin-top: 26px; }
.bio-link {
  display: flex; align-items: center; gap: 14px; text-align: left;
  background: #fff; border: 1px solid var(--fd-line); border-radius: 16px;
  padding: 12px 16px; box-shadow: var(--shadow-sm);
  color: var(--fd-ink); font-weight: 600; font-size: 15.5px;
  transition: transform .16s var(--ease), box-shadow .16s var(--ease);
}
.bio-link:hover { transform: translateY(-2px) scale(1.02); box-shadow: var(--shadow); color: var(--fd-ink); }
.bio-link-icon {
  width: 44px; height: 44px; border-radius: 12px; flex: none;
  display: flex; align-items: center; justify-content: center; font-size: 21px;
}
/* Full titles always show — wrap onto extra lines instead of cutting text
   off with an ellipsis, however long the link name is. */
.bio-link-title { flex: 1; min-width: 0; white-space: normal; overflow-wrap: anywhere; line-height: 1.35; }
.bio-link-arrow { flex: none; color: var(--fd-blue-deep); font-weight: 700; transition: transform .16s var(--ease); }
.bio-link:hover .bio-link-arrow { transform: translateX(3px); }

/* image avatars + image link icons */
.bio-avatar { overflow: hidden; }
.bio-avatar-img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; display: block; }
.bio-link-icon { overflow: hidden; }
.bio-link-img { width: 100%; height: 100%; object-fit: cover; border-radius: inherit; display: block; }

/* YouTube video cards — thumbnail + play badge; tapping opens the YouTube app */
.bio-video { flex-direction: column; align-items: stretch; gap: 10px; padding: 10px 10px 8px; }
.bio-video-thumb {
  position: relative; display: block; width: 100%; aspect-ratio: 16 / 9;
  border-radius: 12px; overflow: hidden; background: var(--fd-deep);
}
.bio-video-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.bio-video-play {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  width: 52px; height: 52px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: rgba(255, 255, 255, .92); color: var(--fd-ink);
  font-size: 18px; padding-left: 4px; box-shadow: var(--shadow-sm);
  transition: transform .16s var(--ease);
}
.bio-video:hover .bio-video-play { transform: translate(-50%, -50%) scale(1.1); }
.bio-video-row { display: flex; align-items: center; gap: 10px; padding: 0 6px 2px; }
.bio-empty { font-size: 14px; color: var(--fd-muted); }
.bio-made {
  display: inline-flex; align-items: center; gap: 7px; margin-top: 34px;
  background: #fff; border: 1px solid var(--fd-line); border-radius: 999px;
  padding: 9px 16px; font-size: 13.5px; font-weight: 600; color: var(--fd-ink-2);
  box-shadow: var(--shadow-sm); transition: transform .16s var(--ease), color .16s var(--ease);
}
a.bio-made:hover { transform: translateY(-2px); color: var(--fd-blue-deep); }

/* phone-scoped shrink for mock + preview */
.phone .bio-avatar { width: 68px; height: 68px; font-size: 32px; }
.phone .bio-name { font-size: 20px; }
.phone .bio-tagline { font-size: 13.5px; }
.phone .bio-links { gap: 10px; margin-top: 20px; }
.phone .bio-link { padding: 10px 12px; font-size: 14px; border-radius: 14px; }
.phone .bio-link-icon { width: 36px; height: 36px; font-size: 18px; border-radius: 10px; }
.phone .bio-made { margin-top: 24px; }

/* ----- auth / small centered pages ----- */
.auth-wrap {
  position: relative; overflow: hidden; min-height: 100vh;
  display: flex; align-items: center; justify-content: center; padding: 40px 22px;
}
.auth-card { width: 100%; max-width: 440px; position: relative; }
.auth-card .logo { display: inline-block; margin-bottom: 22px; }
.auth-sub { color: var(--fd-muted); font-size: 14.5px; margin: -6px 0 20px; }
.auth-actions { display: flex; gap: 20px; margin-top: 14px; }

/* ----- dashboard -----
   Three columns: tools sidebar (link shortener, more later) · the actual
   editing form (largest, gets the remaining space) · live preview — each
   with a light divider between them and its own independent scrollbar,
   so scrolling one (say, a long link list) never scrolls the others out
   of view. The whole row is pinned to fill the space under the sticky
   header instead of growing the page itself. */
.dash {
  display: grid; grid-template-columns: 240px 1fr 380px; gap: 0; align-items: stretch;
  height: calc(100vh - 132px); padding: 20px 0;
}
.dash-tools, .dash-forms, .dash-preview {
  min-width: 0; height: 100%; overflow-y: auto; padding: 0 28px;
}
.dash-tools { display: flex; flex-direction: column; gap: 22px; padding-left: 0; border-right: 1px solid var(--fd-line); }
.dash-forms { border-right: 1px solid var(--fd-line); }

/* live profile card — mirrors the actual public page (name, tagline,
   socials, avatar), with a pencil that reveals the real editing fields */
.profile-card { padding: 20px; }
.live-card-preview { display: flex; align-items: flex-start; gap: 16px; position: relative; }
.live-card-text { flex: 1; min-width: 0; }
.live-card-name { font-size: 18px; font-weight: 800; color: var(--fd-ink); overflow-wrap: anywhere; }
.live-card-tagline { font-size: 14px; color: var(--fd-muted); margin-top: 2px; overflow-wrap: anywhere; }
.live-card-socials { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.live-card-social-icon {
  width: 26px; height: 26px; border-radius: 50%; color: #fff;
  display: flex; align-items: center; justify-content: center; flex: none;
}
.live-card-avatar {
  width: 56px; height: 56px; border-radius: 50%; flex: none; overflow: hidden;
  background: var(--fd-blue-soft); color: var(--fd-blue-text);
  display: flex; align-items: center; justify-content: center;
  font-size: 24px; font-weight: 800; border: 1px solid var(--fd-line);
}
.live-card-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pencil-btn {
  position: relative; width: 30px; height: 30px; border-radius: 50%; flex: none;
  border: 1px solid var(--fd-line); background: #fff; color: var(--fd-muted); cursor: pointer;
  display: flex; align-items: center; justify-content: center; font-size: 13px;
  transition: border-color .16s var(--ease), color .16s var(--ease);
}
.pencil-btn::before { content: ''; position: absolute; inset: -8px; }
.pencil-btn:hover { border-color: var(--fd-blue); color: var(--fd-blue-deep); }
.profile-edit-panel { margin-top: 20px; padding-top: 20px; border-top: 1px solid var(--fd-line); }
.profile-edit-panel[hidden] { display: none; }
.dash-forms { display: flex; flex-direction: column; gap: 22px; }
.dash-preview { display: flex; flex-direction: column; align-items: center; gap: 10px; }
.preview-label {
  font-size: 12.5px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .06em; color: var(--fd-muted); margin: 0;
}

/* Dashboard preview only — sized closer to an actual phone viewport
   (roughly iPhone 13/14 proportions) instead of the smaller decorative
   mockup used on the homepage hero, so it reads as a real simulation of
   what visitors will actually see. */
.dash-preview .phone { width: min(372px, 100%); flex: none; }
.dash-preview .phone-screen { height: 720px; }
.dash-preview .phone .bio-avatar { width: 78px; height: 78px; font-size: 36px; }
.dash-preview .phone .bio-name { font-size: 23px; }
.dash-preview .phone .bio-tagline { font-size: 14.5px; }
.dash-preview .phone .bio-link { padding: 12px 14px; font-size: 15px; }
.dash-preview .phone .bio-link-icon { width: 40px; height: 40px; font-size: 20px; }

/* avatar editor */
.avatar-edit { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; margin-bottom: 12px; }
.avatar-current {
  width: 64px; height: 64px; border-radius: 50%; flex: none; overflow: hidden;
  background: var(--fd-blue-soft); color: var(--fd-blue-text);
  display: flex; align-items: center; justify-content: center;
  font-size: 30px; font-weight: 800; border: 1px solid var(--fd-line);
}
.avatar-current img { width: 100%; height: 100%; object-fit: cover; display: block; }
.avatar-actions { display: flex; flex-direction: column; gap: 6px; align-items: flex-start; }
.avatar-actions .hint { margin: 0; }

/* custom color rows */
.custom-colors { display: flex; flex-direction: column; gap: 10px; margin-top: 14px; }
.custom-colors[hidden] { display: none; }
.color-row { display: grid; grid-template-columns: 96px 46px 130px; gap: 10px; align-items: center; }
.color-row label { margin: 0; }
.color-row input[type="color"] {
  width: 46px; height: 40px; padding: 3px; cursor: pointer;
  border: 1.5px solid rgba(24, 34, 47, .12); border-radius: 9px; background: #fff;
}
.color-hex { padding: 9px 12px; font-size: 14.5px; }
.color-hex.invalid { border-color: var(--fd-coral); box-shadow: 0 0 0 3px rgba(255, 157, 131, .18); }

/* link icon column (emoji or image) */
.icon-col { display: flex; flex-direction: column; gap: 6px; align-items: center; }
.img-btn {
  width: 36px; height: 36px; border-radius: 10px; padding: 0; overflow: hidden;
  border: 1.5px solid var(--fd-line); background: #fff; cursor: pointer; font-size: 16px;
  display: flex; align-items: center; justify-content: center;
  transition: border-color .16s var(--ease), transform .16s var(--ease);
}
.img-btn:hover { border-color: var(--fd-blue); transform: translateY(-2px); }
.img-btn img { width: 100%; height: 100%; object-fit: cover; display: block; }

.emoji-row { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 10px; }
.emoji-opt {
  width: 40px; height: 40px; border-radius: 12px; font-size: 20px; cursor: pointer;
  border: 1.5px solid var(--fd-line); background: #fff;
  transition: transform .16s var(--ease), border-color .16s var(--ease);
}
.emoji-opt:hover { border-color: var(--fd-blue); transform: translateY(-2px); }

.swatch-row { display: flex; gap: 10px; margin-top: 8px; }
.swatch {
  width: 38px; height: 38px; border-radius: 50%; cursor: pointer;
  border: 2px solid transparent; box-shadow: var(--shadow-sm);
  transition: transform .16s var(--ease), border-color .16s var(--ease);
}
.swatch:hover { transform: translateY(-2px); }
.swatch.active { border-color: var(--fd-ink); transform: scale(1.08); }
.swatch-custom {
  background: conic-gradient(#FF9D83, #FDCD75, #5AC7A6, #62C1E0, #BFB0FF, #FF9D83);
}

.link-row {
  display: grid; grid-template-columns: auto 62px 1fr auto auto; gap: 10px; align-items: center;
  background: #fff; border: 1px solid var(--fd-line); border-radius: 14px;
  padding: 12px; margin-bottom: 12px;
  transition: opacity .16s var(--ease), box-shadow .16s var(--ease);
}
.link-row .input { padding: 9px 12px; font-size: 14.5px; }
.link-fields { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.emoji-input { width: 62px; text-align: center; padding: 9px 6px; }

/* link cards — title/URL shown like real text with a toolbar of icon
   actions below (image, clicks, auto-hide date), matching the rest of
   the editor's per-link controls */
.link-card {
  background: #fff; border: 1px solid var(--fd-line); border-radius: 14px;
  padding: 14px; margin-bottom: 12px; position: relative;
  transition: opacity .16s var(--ease), box-shadow .16s var(--ease);
}
.link-card-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.link-title-input, .link-url-input {
  display: block; width: 100%; border: 1.5px solid transparent; background: none;
  padding: 4px 6px; border-radius: 8px; transition: border-color .16s var(--ease), background .16s var(--ease);
}
.link-title-input { font-size: 16px; font-weight: 700; color: var(--fd-ink); }
.link-url-input { font-size: 13.5px; color: var(--fd-muted); margin-top: 2px; }
.link-title-input:hover, .link-url-input:hover { border-color: var(--fd-line); }
.link-title-input:focus, .link-url-input:focus {
  outline: none; border-color: var(--fd-blue); background: #fff; box-shadow: 0 0 0 3px rgba(10, 150, 199, .1);
}
.link-card-toolbar { display: flex; align-items: center; gap: 8px; margin-top: 10px; }
.link-card-icon-group { display: flex; align-items: center; gap: 6px; }
.link-card-toolbar .del-btn { margin-left: auto; }

/* Icon vs. thumbnail — only shown once a link has an uploaded image. */
.image-style-toggle { display: flex; align-items: center; gap: 8px; margin-top: 10px; }
.image-style-label { font-size: 12.5px; color: var(--fd-muted); font-weight: 600; }
.image-style-group {
  display: flex; border: 1.5px solid var(--fd-line); border-radius: 10px; overflow: hidden;
}
.image-style-group button {
  border: 0; background: none; padding: 5px 11px; font-size: 12.5px; font-weight: 600;
  color: var(--fd-ink-2); cursor: pointer;
  transition: background .16s var(--ease), color .16s var(--ease);
}
.image-style-group button + button { border-left: 1.5px solid var(--fd-line); }
.image-style-group button.active { background: var(--fd-blue); color: #fff; }

/* disabled rows stay in the list (re-enable anytime) but read as "off" */
.row-disabled { opacity: .5; }

/* drag handle + enable toggle, paired in one grid column */
.row-controls { display: flex; align-items: center; gap: 4px; }
.drag-handle {
  display: grid; grid-template-columns: repeat(2, 5px); grid-template-rows: repeat(3, 5px);
  gap: 3px; padding: 8px; margin: -8px; cursor: grab; flex: none;
  /* without this, touch browsers intercept the drag as a page-scroll
     gesture instead of letting our pointer events run it */
  touch-action: none;
}
.drag-handle span { width: 5px; height: 5px; border-radius: 50%; background: var(--fd-line); }
.link-row:hover .drag-handle span, .link-card:hover .drag-handle span { background: var(--fd-muted); }
.link-row.dragging, .link-card.dragging { opacity: .4; box-shadow: var(--shadow); }
.link-row.dragging .drag-handle, .link-card.dragging .drag-handle { cursor: grabbing; }
.link-row.drop-target, .link-card.drop-target { outline: 2px dashed var(--fd-blue); outline-offset: 2px; }

/* up/down buttons — the reorder control on touch screens. The drag handle's
   touch-action: none above means even a stray touch landing on that small
   target (e.g. a finger mid-scroll brushing past it) hijacks the gesture
   into a drag instead of letting the page scroll. Below the breakpoint we
   swap it out entirely for these buttons, which only ever act on a
   deliberate tap — the drag handle stays mouse-only, where a misfire like
   that can't happen. */
.move-buttons { display: none; flex-direction: column; gap: 3px; flex: none; }
.move-buttons .mini-btn { width: 22px; height: 20px; font-size: 9px; }
@media (max-width: 900px) {
  .move-buttons { display: flex; }
  .drag-handle { display: none; }
}

/* platform picker — brand-colored buttons to add a social link by category */
.platform-grid { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; }
.platform-btn {
  width: 38px; height: 38px; border-radius: 50%; border: 0; color: #fff; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  box-shadow: var(--shadow-sm); transition: transform .16s var(--ease), box-shadow .16s var(--ease);
}
.platform-btn:hover { transform: translateY(-2px) scale(1.06); box-shadow: var(--shadow); }

/* social link rows reuse .link-row but only need a badge + one input */
.social-row { grid-template-columns: auto auto 1fr auto auto; }
.social-badge {
  width: 36px; height: 36px; border-radius: 10px; flex: none; color: #fff;
  display: flex; align-items: center; justify-content: center;
}
.social-row .link-fields { flex-direction: row; }
.row-clicks { font-size: 12.5px; font-weight: 600; color: var(--fd-teal-text); flex: none; white-space: nowrap; }
.mini-btn {
  position: relative; width: 26px; height: 26px; border-radius: 8px; cursor: pointer; line-height: 1;
  border: 1px solid var(--fd-line); background: #fff; color: var(--fd-muted); font-size: 11px;
  transition: border-color .16s var(--ease), color .16s var(--ease);
}
.mini-btn:hover { border-color: var(--fd-blue); color: var(--fd-blue-deep); }
.mini-btn:disabled { opacity: .35; cursor: default; }

/* These controls read small visually by design (dense editor rows, a tidy
   icon row on the bio page) but still need a ~44px tappable area on touch
   screens — an invisible ::before expands the hit area without changing
   how anything looks. */
.mini-btn, .icon-btn, .platform-btn, .img-btn, .social-icon {
  position: relative;
}
.mini-btn::before, .icon-btn::before, .platform-btn::before, .img-btn::before, .social-icon::before {
  content: ''; position: absolute; inset: -9px;
}
.del-btn:hover { border-color: var(--fd-coral); color: var(--fd-coral-text); }
.empty-links {
  background: var(--fd-blue-soft); color: var(--fd-blue-text);
  border-radius: 14px; padding: 18px; text-align: center;
  font-size: 14.5px; font-weight: 600; margin: 0 0 14px;
}

/* link shortener tool */
.shorten-bar { display: flex; gap: 10px; margin-bottom: 4px; }
.shorten-bar .input { flex: 1; min-width: 0; }
.shortlink-row {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  background: #fff; border: 1px solid var(--fd-line); border-radius: 14px;
  padding: 12px 14px; margin-top: 12px;
}
.shortlink-info { flex: 1; min-width: 200px; display: flex; flex-direction: column; gap: 2px; }
.shortlink-top { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.shortlink-url { font-weight: 700; font-size: 14.5px; overflow-wrap: anywhere; }
.shortlink-source {
  font-size: 11px; font-weight: 700; color: var(--fd-muted); background: var(--fd-paper-2);
  border-radius: 999px; padding: 2px 9px; white-space: nowrap;
}
.shortlink-target {
  font-size: 12.5px; color: var(--fd-muted); overflow-wrap: anywhere;
}

/* collapsed row for an untitled, disabled draft link — full-height empty
   rows waste scroll space for content that isn't even live yet */
.link-row-collapsed {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 10px 14px; margin-bottom: 12px; opacity: .6;
  background: #fff; border: 1px dashed var(--fd-line); border-radius: 14px;
}
.collapsed-summary {
  flex: 1; text-align: left; background: none; border: 0; padding: 4px 0;
  font-size: 13.5px; color: var(--fd-muted); cursor: pointer;
}

/* Sticks to the bottom of the (now independently-scrolling) middle
   column, so the autosave status is always visible without scrolling —
   same reasoning the old Save button's sticky treatment had. */
.autosave-footer {
  display: flex; justify-content: center; align-items: center;
  position: sticky; bottom: 0; z-index: 45; margin-top: auto;
  padding: 14px 0; background: #fff;
  box-shadow: 0 -10px 24px -14px rgba(15, 42, 64, .18);
}
.switch { position: relative; display: inline-block; width: 52px; height: 30px; flex: none; margin: 0; }
.switch input { position: absolute; opacity: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.switch-track {
  position: absolute; inset: 0; border-radius: 999px; pointer-events: none;
  background: rgba(24, 34, 47, .15); transition: background .16s var(--ease);
}
.switch-track::after {
  content: ''; position: absolute; top: 3px; left: 3px; width: 24px; height: 24px;
  border-radius: 50%; background: #fff; box-shadow: var(--shadow-sm);
  transition: transform .16s var(--ease);
}
.switch input:checked + .switch-track { background: var(--fd-blue); }
.switch input:checked + .switch-track::after { transform: translateX(22px); }

/* compact switch used on each link/social row to hide without deleting */
.switch-sm { width: 34px; height: 20px; flex: none; }
.switch-sm .switch-track::after { width: 14px; height: 14px; top: 3px; left: 3px; }
.switch-sm input:checked + .switch-track::after { transform: translateX(14px); }

/* the sole save-state feedback now that there's no manual Save button */
.autosave-status { font-size: 13px; font-weight: 600; color: var(--fd-muted); }
.autosave-status.autosave-saved { color: var(--fd-teal-text); }
.autosave-status.autosave-dirty { color: var(--fd-amber-text); }

/* ----- toast ----- */
.toast {
  position: fixed; left: 50%; bottom: 26px; z-index: 99;
  transform: translate(-50%, 80px); opacity: 0;
  background: var(--fd-ink); color: var(--fd-cream);
  font-weight: 600; font-size: 14.5px; border-radius: 999px; padding: 12px 22px;
  box-shadow: var(--shadow); max-width: min(92vw, 480px);
  transition: transform .2s var(--ease), opacity .2s var(--ease);
}
.toast.show { transform: translate(-50%, 0); opacity: 1; }

/* ----- scroll reveals (only when JS is on) ----- */
.js .reveal { opacity: 0; transform: translateY(18px); transition: opacity .6s var(--ease), transform .6s var(--ease); }
.js .reveal.in { opacity: 1; transform: none; }

/* ----- responsive ----- */
@media (max-width: 900px) {
  .hero-grid { grid-template-columns: 1fr; gap: 32px; }
  .feature-grid { grid-template-columns: 1fr; }
  /* The fixed-height, independently-scrolling columns only make sense on
     a wide desktop screen — on mobile, revert to one continuous page
     scroll (the normal, expected mobile pattern) instead of three short
     scrollable boxes stacked on top of each other. */
  .dash { grid-template-columns: 1fr; height: auto; padding: 20px 0; }
  .dash-tools, .dash-forms, .dash-preview { height: auto; overflow-y: visible; padding: 0; border: 0; }
  .dash-forms { order: 1; }
  /* Simulating a phone screen is redundant once you're actually viewing
     this on one — the real page is one tap away via the link bar up top.
     The tools sidebar (currently just the link shortener) moves into the
     hamburger menu instead of taking up its own panel on a small screen. */
  .dash-preview, .dash-tools { display: none; }
  .profile-dropdown-item-mobile-only { display: block; }
  .float-tile { display: none; }
}
@media (max-width: 640px) {
  .container { padding: 0 16px; }
  .card { padding: 20px; }

  /* header: keep the logo readable, let action buttons wrap onto their own row */
  .header-inner { flex-wrap: wrap; height: auto; padding: 12px 0; gap: 10px; }
  .header-nav { flex-wrap: wrap; gap: 8px; width: 100%; justify-content: flex-start; }
  .header-nav .btn-sm { flex: 1 1 auto; }

  /* dashboard link + social rows: stack drag/toggle/icon controls above the
     fields instead of squeezing everything into one cramped row */
  .link-row, .social-row {
    grid-template-columns: 1fr; gap: 8px;
  }
  .link-row .icon-col {
    flex-direction: row; align-items: center; justify-content: flex-start;
  }
  .social-row .link-fields { flex-direction: column; }
  .link-row .del-btn, .social-row .del-btn { justify-self: flex-end; }

  /* header wraps at this width — if the link box + share + menu don't
     fit next to the logo, they drop to their own full-width row together
     as one group, rather than two separate near-empty rows */
  .header-actions { flex: 1 1 100%; justify-content: flex-end; }

  /* custom color rows: stack instead of forcing 3 columns into a narrow screen */
  .color-row { grid-template-columns: 1fr; gap: 6px; }
  .color-row input[type="color"] { width: 100%; height: 44px; }

  /* pinned to the bottom of the viewport — the column no longer scrolls
     independently here (see the .dash reset above), so this sticks to
     the page itself as it scrolls instead */
  .autosave-footer {
    position: sticky; bottom: 0; z-index: 45;
    margin: 16px -16px -20px; border-radius: 16px 16px 0 0;
    box-shadow: 0 -10px 24px -14px rgba(15, 42, 64, .25);
  }
}
@media (max-width: 560px) {
  .otp-row { gap: 7px; }
  .otp-box { width: 40px; height: 48px; }
  .bio-name { font-size: 22px; }
  .bio-link { padding: 11px 13px; gap: 11px; font-size: 15px; }
  .bio-link-icon { width: 40px; height: 40px; }
  .social-icon { width: 38px; height: 38px; }

  .modal-overlay { padding: 14px; }
  .modal-card { padding: 22px 18px; }
  .otp-row-sm { gap: 5px; }
  .otp-row-sm .otp-box { width: 34px; height: 42px; font-size: 16px; }
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
  html { scroll-behavior: auto; }
  .js .reveal { opacity: 1; transform: none; }
}