:root {
  --display: "Instrument Sans", system-ui, sans-serif;
  --body: "Instrument Sans", system-ui, sans-serif;
  --mono: "JetBrains Mono", monospace;
  --serif: "Instrument Serif", serif;
  --ease: cubic-bezier(.2,.7,.2,1);
  --ease-out: cubic-bezier(.16,1,.3,1);
  /* Tappt brand gradient (teal→coral) — the new pop used on the FAB, Pro badges and border beams */
  --tappt-grad: linear-gradient(120deg, #4D6980 0%, #6B8299 45%, #4D6980 100%);
  --beam-a: #6B8299;   /* teal  */
  --beam-b: #8298AC;   /* light teal */
  --beam-c: #4D6980;   /* coral */
  --beam-glow-rgb: 107,130,153;   /* teal glow */
  --beam-glow2-rgb: 77,105,128;  /* coral glow */
}
[data-theme="dark"] {
  --bg: #000000;
  --bg-2: #111113;
  --bg-3: #18181B;
  --bg-4: #1F1F23;
  --fg: #FAFAFA;
  --fg-2: #B4B4B7;
  --fg-3: #6E6E73;
  --line: rgba(255,255,255,0.09);
  --line-2: rgba(255,255,255,0.18);
  --accent: #FAFAFA;
  --accent-ink: #0B0B0C;
  /* brand pop — Tappt teal→coral, reserved for PRO / premium only */
  --brand: #6B8299;
  --brand-2: #4D6980;
  --brand-deep: #4D6980;
  --brand-3: #8298AC;
  --brand-rgb: 107,130,153;
  --brand2-rgb: 77,105,128;
  --gold: var(--brand); /* “pro” indicator color — brand teal */
  --danger: #FF5C5C;
  --ok: #8AFF6B;
}
[data-theme="light"] {
  --bg: #F4F4F2;
  --bg-2: #FFFFFF;
  --bg-3: #EFEFEC;
  --bg-4: #E7E7E2;
  --fg: #0B0B0C;
  --fg-2: #3F3F45;
  --fg-3: #8A8A90;
  --line: rgba(11,11,12,0.10);
  --line-2: rgba(11,11,12,0.20);
  --accent: #0B0B0C;
  --accent-ink: #FFFFFF;
  /* brand pop — Tappt teal→coral, reserved for PRO / premium only */
  --brand: #6B8299;
  --brand-2: #4D6980;
  --brand-deep: #4D6980;
  --brand-3: #8298AC;
  --brand-rgb: 107,130,153;
  --brand2-rgb: 77,105,128;
  --gold: #4D6980; /* light-mode pro indicator — deep steel blue for contrast on light bg */
  --danger: #E0353B;
  --ok: #1C9C4A;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; }
html { overflow: hidden; overscroll-behavior: none; }
body {
  position: fixed; inset: 0; width: 100%; height: 100%;
  overflow: hidden; overscroll-behavior: none;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--body);
  font-size: 15px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  transition: background 0.4s var(--ease), color 0.4s var(--ease);
}
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
input, textarea, select { font: inherit; color: inherit; font-size: 16px; }
img { max-width: 100%; display: block; }
::selection { background: var(--accent); color: var(--accent-ink); }

#root { min-height: 100vh; }

/* ---- shared bits ---- */
.mono { font-family: var(--mono); letter-spacing: 0.04em; }
.eyebrow {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--fg-3);
}
.display { font-family: var(--display); font-weight: 800; letter-spacing: -0.03em; line-height: 0.98; }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  height: 50px; padding: 0 22px;
  border-radius: 12px;
  font-size: 14px; font-weight: 600; letter-spacing: 0.01em;
  transition: transform 0.25s var(--ease-out), background 0.25s, opacity 0.2s, border-color 0.25s;
  white-space: nowrap;
}
.btn:active { transform: scale(0.98); }
.btn-primary { background: var(--accent); color: var(--accent-ink); }
.btn-primary:hover { opacity: 0.9; }
.btn-dark { background: var(--fg); color: var(--bg); }
.btn-ghost { border: 1px solid var(--line-2); color: var(--fg); }
.btn-ghost:hover { border-color: var(--fg); background: var(--bg-3); }
.btn-block { width: 100%; }
.btn-sm { height: 40px; padding: 0 16px; font-size: 13px; border-radius: 10px; }
.btn[disabled] { opacity: 0.4; pointer-events: none; }

/* onboarding primary action — steel-blue pill (matches the auth Continue button) */
.onb-actions .btn-primary {
  background: linear-gradient(180deg, #6B8299 0%, #4D6980 100%);
  color: #fff; text-shadow: 0 1px 8px rgba(0,0,0,0.30);
  border-radius: 999px; height: 56px; font-size: 16px; font-weight: 700;
  box-shadow: 0 12px 30px -12px rgba(90,120,143,0.55);
}
.onb-actions .btn-primary:hover { opacity: 1; filter: brightness(1.04); }
.onb-actions .btn-primary svg { stroke: currentColor; }

.field { margin-bottom: 16px; }
.field label {
  display: block;
  font-size: 12px; font-weight: 600;
  color: var(--fg-2);
  margin-bottom: 7px;
  letter-spacing: 0.01em;
}
.input, .textarea {
  width: 100%;
  background: var(--bg-3);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 13px 15px;
  font-size: 16px;
  color: var(--fg);
  transition: border-color 0.2s, background 0.2s;
  outline: none;
}
.input:focus, .textarea:focus { border-color: var(--accent); background: var(--bg-2); }
.input::placeholder, .textarea::placeholder { color: var(--fg-3); }
.textarea { resize: none; line-height: 1.5; min-height: 84px; }
.input-prefix {
  display: flex; align-items: center;
  background: var(--bg-3);
  border: 1px solid var(--line);
  border-radius: 12px;
  overflow: hidden;
  transition: border-color 0.2s;
}
.input-prefix:focus-within { border-color: var(--accent); }
.input-prefix .pfx {
  padding: 13px 4px 13px 15px;
  color: var(--fg-3);
  font-size: 16px;
  font-family: var(--mono);
  white-space: nowrap;
}
.input-prefix .input { border: 0; background: transparent; padding-left: 2px; }
.input-prefix .input:focus { background: transparent; }

.spin { animation: spin 0.7s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

/* OAuth return splash — shown while supabase finishes establishing the session after a
   Google/Apple redirect, so the login screen never flashes. */
.oauth-splash {
  position: fixed; inset: 0; z-index: 9999;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 18px;
  background: var(--bg, #0B0B0C);
}
.oauth-splash-mark img { display: block; border-radius: 12px; }
.oauth-splash-spin {
  width: 26px; height: 26px; border-radius: 50%;
  border: 2.5px solid rgba(var(--brand-rgb), 0.22);
  border-top-color: var(--brand);
  animation: spin 0.7s linear infinite;
}
.oauth-splash-txt { font-family: var(--body); font-weight: 600; font-size: 15px; color: var(--fg-3, #9a9a9a); letter-spacing: .01em; }

.fade-up { animation: fadeUp 0.5s var(--ease-out) both; }
@keyframes fadeUp { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }

.toast {
  position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%) translateY(20px);
  background: rgba(40,40,44,0.6); color: #fff;
  padding: 9px 16px; border-radius: 999px;
  font-size: 13.5px; font-weight: 600; letter-spacing: 0.01em;
  backdrop-filter: blur(20px) saturate(170%);
  -webkit-backdrop-filter: blur(20px) saturate(170%);
  border: 1px solid rgba(255,255,255,0.14);
  box-shadow: 0 12px 34px -12px rgba(0,0,0,0.5), inset 0 1px 0 rgba(255,255,255,0.18);
  opacity: 0; pointer-events: none;
  transition: opacity 0.3s, transform 0.3s var(--ease-out);
  z-index: 9999;
  display: flex; align-items: center; gap: 8px;
}
[data-theme="light"] .toast { background: rgba(255,255,255,0.7); color: #0B0B0C; border-color: rgba(0,0,0,0.08); box-shadow: 0 12px 34px -12px rgba(0,0,0,0.22), inset 0 1px 0 rgba(255,255,255,0.6); }
.toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }
.toast .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--ok); }

/* ---- scrollbar ---- */
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-thumb { background: var(--line-2); border-radius: 10px; border: 3px solid var(--bg); }
*::-webkit-scrollbar-track { background: transparent; }

/* =========================================================
   AUTH
   ========================================================= */
/* ===== AUTH 2 (mobile welcome / login / signup flow) ===== */
.auth2 { position: absolute; inset: 0; left: 50%; transform: translateX(-50%); width: 100%; max-width: 460px; display: flex; flex-direction: column; padding: 22px 22px calc(22px + env(safe-area-inset-bottom)); background: var(--bg); color: var(--fg); overflow-y: auto; }
/* LinkMe-exact auth surfaces: pure black in dark, warm cream in light */
[data-theme="dark"] .auth2 { background: #000000; }
[data-theme="light"] .auth2 { background: #FFFFFF; }
.auth2-back { position: absolute; top: 16px; left: 12px; width: 40px; height: 40px; font-size: 30px; line-height: 1; color: var(--fg); display: flex; align-items: center; justify-content: center; z-index: 3; }
.auth-wordmark { display: inline-flex; align-items: center; justify-content: center; }
.auth-wordmark img { height: 40px; width: auto; }
.auth-wordmark .aw-light { display: none; }
[data-theme="light"] .auth-wordmark .aw-dark { display: none; }
[data-theme="light"] .auth-wordmark .aw-light { display: inline-block; }
.auth2-tag { font-size: 15px; line-height: 1.5; color: var(--fg-3); text-align: center; max-width: 30ch; margin: 14px auto 0; }
.auth2-tag b { color: var(--fg-2); }

/* welcome */
.auth2.welcome { justify-content: space-between; text-align: center; }
.auth2-hero { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.auth2-actions { display: flex; flex-direction: column; gap: 12px; }
.auth2-btn { display: flex; align-items: center; justify-content: center; gap: 11px; width: 100%; height: 56px; border-radius: 999px; background: transparent; border: 1px solid rgba(255,255,255,0.12); color: var(--fg); font-size: 15px; font-weight: 700; }
[data-theme="light"] .auth2-btn { border-color: rgba(11,11,12,0.12); }
.auth2-btn:active { background: rgba(255,255,255,0.05); }
[data-theme="light"] .auth2-btn:active { background: rgba(11,11,12,0.04); }
.auth2-btn svg { flex: none; width: 20px; height: 20px; }
.auth2-fields .auth2-btn svg { width: 20px; height: 20px; }
.auth2-legal { font-size: 11.5px; color: var(--fg); line-height: 1.5; text-align: center; margin: 6px auto 0; max-width: 34ch; }
.auth2-legal a { color: var(--fg-2); text-decoration: underline; }
.auth2-bottom { display: flex; align-items: center; justify-content: center; gap: 8px; font-size: 14px; color: var(--fg); margin-top: 18px; }
.auth2-ghost { font-size: 14px; font-weight: 800; background: linear-gradient(100deg, #6B8299, #4D6980); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; }
[data-theme="light"] .auth2-ghost { -webkit-text-fill-color: transparent; }

/* login */
.auth2.login { padding-top: 64px; }
.auth2-loginhead { text-align: center; margin-bottom: 22px; }
.auth2-welcomeback { font-size: 14px; color: var(--fg-3); margin-bottom: 12px; }
.auth2-fields { display: flex; flex-direction: column; gap: 12px; }
.auth2-input { width: 100%; height: 54px; border-radius: 14px; background: transparent; border: 1px solid rgba(255,255,255,0.12); color: var(--fg); font-size: 16px; padding: 0 16px; outline: none; }
[data-theme="light"] .auth2-input { border-color: rgba(11,11,12,0.12); }
.auth2-input:focus { border-color: rgba(255,255,255,0.28); }
[data-theme="light"] .auth2-input:focus { border-color: rgba(11,11,12,0.28); }
.auth2-input.ok { border-color: var(--ok); }
.auth2-input.bad { border-color: #ff5a5a; }
.auth2-pwwrap { position: relative; }
.auth2-pwwrap .auth2-input { padding-right: 50px; }
.auth2-eye { position: absolute; right: 14px; top: 50%; transform: translateY(-50%); color: var(--fg-3); display: flex; }
.auth2-forgot { align-self: flex-start; font-size: 13.5px; font-weight: 700; color: var(--fg); margin-top: 2px; }
.auth2-err { font-size: 13px; color: #ff5a5a; font-weight: 600; }
.auth2-foot-cta { margin-top: auto; padding-top: 22px; }
.auth2-primary { position: relative; display: block; width: 100%; max-width: 300px; margin: 0 auto; height: 54px; border-radius: 999px; border: none; font-size: 16px; font-weight: 700; color: #fff; overflow: hidden;
  background-image: linear-gradient(180deg, #6B8299 0%, #4D6980 100%);
}
.auth2-primary:disabled { opacity: 0.4; }
.auth2-primary:active:not(:disabled) { transform: scale(0.99); }
@keyframes gtDrift { from { background-position: 0% 50%; } to { background-position: 200% 50%; } }
/* demo quick-login — dashed brand pill, clearly a shortcut not a real auth method */
.auth2-demo { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; margin-top: 14px; padding: 12px; border-radius: 14px; font-size: 13.5px; font-weight: 700; color: var(--accent); background: rgba(var(--brand-rgb), 0.08); border: 1px dashed color-mix(in srgb, var(--accent) 45%, transparent); transition: background .15s, transform .12s; }
.auth2-demo svg { stroke: currentColor; }
.auth2-demo:hover { background: rgba(var(--brand-rgb), 0.14); }
.auth2-demo:active { transform: scale(0.98); }
[data-theme="light"] .auth2-demo { color: var(--fg); }

/* signup steps */
.auth2.step { padding-top: 60px; }
.auth2-prog { display: flex; gap: 8px; justify-content: center; margin-bottom: 26px; }
.auth2-prog span { width: 46px; height: 4px; border-radius: 2px; background: var(--bg-4); }
/* ONE continuous teal→coral gradient mapped across the whole 3-bar row (46px bars, 8px gaps =
   154px total). Each lit bar shows its true slice via a pixel-accurate background-position, so
   bar 1 is teal, bar 2 mid, bar 3 coral — the colour visibly progresses as steps complete. */
.auth2-prog span.on { background-image: linear-gradient(90deg, #4D6980, #6B8299 50%, #4D6980); background-size: 154px 4px; background-repeat: no-repeat; }
.auth2-prog span:nth-child(1).on { background-position: 0 50%; }
.auth2-prog span:nth-child(2).on { background-position: -54px 50%; }
.auth2-prog span:nth-child(3).on { background-position: -108px 50%; }
.auth2-h { font-family: var(--body); font-weight: 700; font-size: 27px; line-height: 1.14; letter-spacing: -0.025em; text-align: center; margin-bottom: 24px; }
.auth2-steptitle { text-align: center; font-weight: 700; font-size: 15px; margin-bottom: 18px; }

/* account type */
.acct-list { display: flex; flex-direction: column; gap: 12px; }
.acct-card { display: flex; align-items: center; gap: 14px; text-align: left; padding: 17px 16px; border-radius: 18px; background: var(--bg-2); border: 2px solid var(--line); }
/* selected card: teal→coral GRADIENT outline (padding-box keeps the fill, border-box paints the ring) */
.acct-card.sel { border: 2px solid transparent; background: linear-gradient(var(--bg-3), var(--bg-3)) padding-box, linear-gradient(120deg, #6B8299, #4D6980) border-box; }
.acct-ic { width: 48px; height: 48px; border-radius: 13px; background: var(--bg-4); color: var(--fg); display: flex; align-items: center; justify-content: center; flex: none; }
.acct-card.sel .acct-ic { background: linear-gradient(135deg,#6B8299,#4D6980); color: #fff; }

.acct-meta { display: flex; flex-direction: column; gap: 4px; }
.acct-meta b { font-size: 18px; font-weight: 800; }
.acct-meta span { font-size: 13px; color: var(--fg-3); line-height: 1.4; }

/* details */
.auth2-date { display: flex; align-items: center; justify-content: space-between; height: 54px; border-radius: 14px; background: transparent; border: 1px solid rgba(255,255,255,0.12); padding: 0 16px; color: var(--fg-3); font-size: 16px; }
.auth2-date input { background: none; border: none; color: var(--fg); font-size: 16px; outline: none; text-align: right; }
[data-theme="dark"] .auth2-date input { color-scheme: dark; }
[data-theme="light"] .auth2-date { border-color: rgba(11,11,12,0.12); }
[data-theme="light"] .auth2-date input { color-scheme: light; }
.auth2-hint { font-size: 12.5px; font-weight: 700; margin: 6px 0 0 4px; }
.auth2-hint.ok { color: var(--ok); }
.auth2-hint.bad { color: #ff5a5a; }
.pw-meter { margin-top: 2px; }
.pw-meter-head { display: flex; justify-content: space-between; font-size: 12.5px; margin-bottom: 6px; }
.pw-meter-head b.s1 { color: #ff5a5a; } .pw-meter-head b.s2 { color: #e0a92e; } .pw-meter-head b.s3 { color: #6B8299; } .pw-meter-head b.s4 { color: #6B8299; }
.pw-bar { height: 6px; border-radius: 3px; background: var(--bg-4); overflow: hidden; }
.pw-bar span { display: block; height: 100%; border-radius: 3px; transition: width 0.25s; }
.pw-bar span.s1 { background: #ff5a5a; } .pw-bar span.s2 { background: #e0a92e; } .pw-bar span.s3 { background: linear-gradient(90deg,#6B8299,#8298AC); } .pw-bar span.s4 { background: linear-gradient(90deg,#4D6980,#6B8299 50%,#4D6980); }

/* verify */
.code-row { display: flex; gap: 10px; justify-content: center; margin: 8px 0 18px; }
.code-cell { width: 48px; height: 60px; border-radius: 14px; background: transparent; border: 1.5px solid rgba(255,255,255,0.12); color: var(--fg); font-size: 26px; font-weight: 800; text-align: center; outline: none; }
[data-theme="light"] .code-cell { border-color: rgba(11,11,12,0.12); }
.code-cell:focus { border-color: #6B8299; }
.auth2-resend { text-align: center; font-size: 13px; color: var(--fg-3); }
.auth2-resend button { background: linear-gradient(100deg, #6B8299, #4D6980); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; font-weight: 800; }

/* permissions */
.auth2.perms { padding-top: 60px; }
.auth2-theme { position: absolute; top: 16px; right: 16px; z-index: 4; }
/* admin bypass (top-left, discreet) */
.auth2-admin { position: absolute; top: 16px; left: 16px; z-index: 4; width: 30px; height: 30px; border-radius: 50%; background: transparent; border: none; color: var(--fg-3); opacity: 0.25; font-size: 11px; }
.auth2-admin:active { opacity: 0.6; }
.auth2-admin-bg { position: fixed; inset: 0; z-index: 200; background: rgba(0,0,0,0.6); backdrop-filter: blur(6px); display: flex; align-items: center; justify-content: center; padding: 24px; }
.auth2-admin-card { width: 100%; max-width: 280px; background: var(--bg-1); border: 1px solid var(--line); border-radius: 20px; padding: 24px; text-align: center; }
.auth2-admin-t { font-family: var(--display); font-weight: 800; font-size: 17px; margin-bottom: 16px; }
.auth2-admin-in { width: 100%; height: 56px; border-radius: 14px; background: var(--bg-2); border: 1px solid var(--line); color: var(--fg); font-size: 28px; font-weight: 800; text-align: center; letter-spacing: 12px; }
.auth2-admin-s { font-size: 12.5px; color: var(--fg-3); margin-top: 12px; }
.perm-list { display: flex; flex-direction: column; gap: 14px; margin-top: 30px; }
.perm-card { display: flex; align-items: center; gap: 14px; text-align: left; padding: 18px 16px; border-radius: 18px; background: var(--bg-2); border: 1px solid var(--line); }
.perm-ic { width: 42px; height: 42px; border-radius: 12px; background: var(--bg-4); color: var(--fg); display: flex; align-items: center; justify-content: center; flex: none; }
.perm-meta { flex: 1; display: flex; flex-direction: column; gap: 3px; }
.perm-meta b { font-size: 16px; font-weight: 800; }
.perm-meta span { font-size: 12.5px; color: var(--fg-3); line-height: 1.4; }
.perm-check { width: 28px; height: 28px; border-radius: 9px; flex: none; border: 1.5px solid var(--line-2); display: flex; align-items: center; justify-content: center; color: var(--accent-ink); }
.perm-check.on { background: var(--accent); border-color: var(--accent); }

.auth {
  min-height: 100vh;
  display: grid;
  grid-template-columns: 1.05fr 1fr;
}
.auth-brand {
  position: relative;
  background: #0B0B0C;
  color: #fff;
  padding: 48px 56px;
  display: flex; flex-direction: column; justify-content: space-between;
  overflow: hidden;
}
.auth-brand-bg {
  position: absolute; inset: 0;
  background:
    radial-gradient(60% 50% at 20% 18%, rgba(var(--brand-rgb),0.12), transparent 60%),
    radial-gradient(60% 50% at 85% 80%, rgba(var(--brand-rgb),0.18), transparent 60%);
  pointer-events: none;
}
.auth-logo { height: 26px; position: relative; z-index: 2; }
.auth-brand-mid { position: relative; z-index: 2; }
.auth-brand h1 {
  font-family: var(--display); font-weight: 800;
  font-size: clamp(34px, 4vw, 56px);
  line-height: 0.96; letter-spacing: -0.035em;
  margin-bottom: 20px;
  text-wrap: balance;
}
.auth-brand h1 .it { font-family: var(--serif); font-style: italic; font-weight: 400; color: var(--accent); }
.auth-brand p { color: rgba(255,255,255,0.62); font-size: 16px; max-width: 38ch; }
.auth-cards {
  position: relative; z-index: 2;
  display: flex; gap: 12px; margin-top: 36px;
}
.auth-cards .ac {
  width: 92px; aspect-ratio: 1.586/1;
  border-radius: 9px; overflow: hidden;
  box-shadow: 0 14px 30px -10px rgba(0,0,0,0.6);
  transform: rotate(var(--r));
  transition: transform 0.4s var(--ease-out);
}
.auth-cards .ac:hover { transform: rotate(0) translateY(-6px); }
.auth-cards .ac img { width: 100%; height: 100%; object-fit: cover; }
.auth-foot { position: relative; z-index: 2; font-family: var(--mono); font-size: 11px; color: rgba(255,255,255,0.4); letter-spacing: 0.08em; }

.auth-form-wrap {
  display: flex; align-items: center; justify-content: center;
  padding: 40px;
  background: var(--bg);
}
.auth-form { width: 100%; max-width: 380px; }
.auth-form h2 { font-family: var(--display); font-weight: 800; font-size: 30px; letter-spacing: -0.025em; margin-bottom: 6px; }
.auth-form .sub { color: var(--fg-2); margin-bottom: 30px; font-size: 14.5px; }
.social-btns { display: flex; flex-direction: column; gap: 10px; margin-bottom: 22px; }
.social-btn {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  height: 48px; border-radius: 12px;
  border: 1px solid var(--line-2);
  font-size: 14px; font-weight: 600;
  transition: background 0.2s, border-color 0.2s;
}
.social-btn:hover { background: var(--bg-3); border-color: var(--fg); }
.social-btn svg { width: 18px; height: 18px; }
.divider { display: flex; align-items: center; gap: 14px; margin: 4px 0 22px; color: var(--fg-3); font-size: 12px; }
.divider::before, .divider::after { content: ""; flex: 1; height: 1px; background: var(--line); }
.auth-switch { text-align: center; margin-top: 22px; font-size: 13.5px; color: var(--fg-2); }
.auth-switch button { color: var(--fg); font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }
.err { color: var(--danger); font-size: 12.5px; margin-top: -6px; margin-bottom: 12px; }

/* =========================================================
   ONBOARDING
   ========================================================= */
.onb {
  position: fixed; inset: 0;
  display: flex; flex-direction: column;
  align-items: center;
  padding: 40px 24px calc(40px + env(safe-area-inset-bottom));
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
.onb-top {
  width: 100%; max-width: 620px;
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 32px;
  flex: none;
}
.onb-logo { height: 22px; width: auto; }
.onb-logo.light-logo { display: none; }
[data-theme="light"] .onb-logo.dark-logo { display: none; }
[data-theme="light"] .onb-logo.light-logo { display: inline-block; }
.onb-steps { display: flex; gap: 7px; }
.onb-steps .s { width: 30px; height: 4px; border-radius: 4px; background: var(--line-2); transition: background 0.3s; }
/* continuous teal→coral gradient across the onboarding step bars (30px bars, 7px gaps) */
.onb-steps .s.on { background-image: linear-gradient(90deg, #4D6980, #6B8299 50%, #4D6980); background-size: 174px 4px; background-repeat: no-repeat; }
.onb-steps .s:nth-child(1).on { background-position: 0 50%; }
.onb-steps .s:nth-child(2).on { background-position: -37px 50%; }
.onb-steps .s:nth-child(3).on { background-position: -74px 50%; }
.onb-steps .s:nth-child(4).on { background-position: -111px 50%; }
.onb-steps .s:nth-child(5).on { background-position: -148px 50%; }
.onb-skip { font-size: 13px; color: var(--fg-3); }
.onb-skip:hover { color: var(--fg); }
.onb-body { width: 100%; max-width: 520px; }
.onb-body h2 { font-family: var(--body); font-weight: 700; font-size: 30px; letter-spacing: -0.03em; margin-bottom: 8px; text-wrap: balance; }
.onb-body .sub { color: var(--fg-2); margin-bottom: 30px; font-size: 15px; }
.onb-actions { margin-top: 30px; display: flex; gap: 12px; }

.handle-preview {
  display: flex; align-items: center; gap: 8px;
  margin-top: 16px; padding: 14px 16px;
  background: var(--bg-3); border-radius: 12px;
  font-family: var(--mono); font-size: 13px; color: var(--fg-2);
}
.handle-preview b { color: var(--accent); }
.handle-status { margin-left: auto; font-size: 12px; display: flex; align-items: center; gap: 6px; }
.handle-status.ok { color: var(--ok); }
.handle-status.bad { color: var(--danger); }

.card-pick {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px;
}
.card-pick .cp {
  position: relative; cursor: pointer;
  border-radius: 12px; overflow: hidden;
  border: 2px solid transparent;
  transition: transform 0.3s var(--ease-out), border-color 0.2s;
  aspect-ratio: 1.586/1;
}
.card-pick .cp img { width: 100%; height: 100%; object-fit: cover; }
.card-pick .cp:hover { transform: translateY(-3px); }
.card-pick .cp.sel { border-color: var(--accent); }
.card-pick .cp.sel::after {
  content: "✓"; position: absolute; top: 6px; right: 6px;
  width: 22px; height: 22px; border-radius: 50%;
  background: var(--accent); color: var(--accent-ink);
  display: flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 800;
}
.card-pick .cp .cn {
  position: absolute; bottom: 0; left: 0; right: 0;
  padding: 14px 8px 6px; font-size: 10px; font-weight: 700;
  background: linear-gradient(transparent, rgba(0,0,0,0.7));
  color: #fff; text-align: center;
}

/* =========================================================
   DASHBOARD
   ========================================================= */
.dash { display: grid; grid-template-columns: 248px 1fr; min-height: 100vh; }
.side {
  background: var(--bg-2);
  border-right: 1px solid var(--line);
  padding: 24px 16px;
  display: flex; flex-direction: column;
  position: sticky; top: 0; height: 100vh;
}
.side-logo { height: 22px; margin: 6px 8px 28px; }
.side-nav { display: flex; flex-direction: column; gap: 3px; flex: 1; }
.side-link {
  display: flex; align-items: center; gap: 12px;
  padding: 11px 12px; border-radius: 11px;
  color: var(--fg-2); font-size: 14px; font-weight: 600;
  transition: background 0.2s, color 0.2s;
}
.side-link svg { width: 18px; height: 18px; flex: none; }
.side-link:hover { background: var(--bg-3); color: var(--fg); }
.side-link.on { background: var(--bg-4); color: var(--fg); }
.side-link .badge {
  margin-left: auto; font-family: var(--mono); font-size: 10px;
  background: var(--accent); color: var(--accent-ink);
  padding: 2px 7px; border-radius: 999px; font-weight: 700;
}
.side-foot { border-top: 1px solid var(--line); padding-top: 16px; margin-top: 16px; }
.side-user { display: flex; align-items: center; gap: 11px; padding: 6px 8px; border-radius: 11px; cursor: pointer; transition: background 0.2s; }
.side-user:hover { background: var(--bg-3); }
.side-avatar { width: 34px; height: 34px; border-radius: 50%; flex: none; display: flex; align-items: center; justify-content: center; font-family: var(--display); font-weight: 700; font-size: 14px; color: #fff; }
.side-user .nm { font-size: 13px; font-weight: 700; line-height: 1.2; }
.side-user .hd { font-size: 11px; color: var(--fg-3); font-family: var(--mono); }

.main { display: grid; grid-template-columns: 1fr 380px; min-height: 100vh; }
.work { padding: 32px 36px 60px; overflow-y: auto; }
.work-head { display: flex; align-items: flex-start; justify-content: space-between; margin-bottom: 28px; gap: 20px; }
.work-head h1 { font-family: var(--display); font-weight: 800; font-size: 26px; letter-spacing: -0.025em; }
.work-head .desc { color: var(--fg-2); font-size: 14px; margin-top: 3px; }

.preview-pane {
  border-left: 1px solid var(--line);
  background: var(--bg-2);
  padding: 32px 28px;
  position: sticky; top: 0; height: 100vh;
  display: flex; flex-direction: column; align-items: center;
}
.preview-head { width: 100%; display: flex; align-items: center; justify-content: space-between; margin-bottom: 22px; }
.preview-head .lbl { font-family: var(--mono); font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--fg-3); }
.preview-link { font-size: 12px; color: var(--accent); font-family: var(--mono); display: flex; align-items: center; gap: 5px; }

/* phone */
.phone {
  width: 290px; flex: none;
  aspect-ratio: 9/19.2;
  border-radius: 40px;
  background: linear-gradient(160deg, #2a2a2e, #0a0a0c);
  padding: 7px;
  box-shadow: inset 0 0 0 1.5px rgba(255,255,255,0.08), 0 40px 70px -20px rgba(0,0,0,0.6);
  position: relative;
}
.phone-screen {
  width: 100%; height: 100%;
  border-radius: 33px; overflow: hidden;
  background: #000;
  position: relative;
}
.bio { height: 100%; overflow-y: auto; background: #000; color: #fff; }
.bio::-webkit-scrollbar { display: none; }
.bio-hero {
  position: relative;
  height: 210px;
  display: flex; align-items: flex-end;
  padding: 16px;
}
.bio-hero-bg { position: absolute; inset: 0; }
.bio-hero-bg img { width: 100%; height: 100%; object-fit: cover; }
.bio-hero-bg::after { content:""; position: absolute; inset: 0; background: linear-gradient(transparent 40%, rgba(0,0,0,0.85)); }
.bio-av {
  position: relative; z-index: 2;
  width: 56px; height: 56px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--display); font-weight: 700; font-size: 22px; color: #fff;
  box-shadow: 0 0 0 3px #000;
}
.bio-body { padding: 14px 16px 24px; }
.bio-name { font-family: var(--display); font-weight: 800; font-size: 19px; display: flex; align-items: center; gap: 6px; }
.bio-name .vf { width: 15px; height: 15px; border-radius: 50%; background: #1d9bf0; color: #fff; display: inline-flex; align-items: center; justify-content: center; font-size: 9px; }
.bio-handle { font-size: 12px; color: #8a8a90; font-family: var(--mono); margin-top: 2px; }
.bio-desc { font-size: 13px; color: #d4d4d8; margin-top: 10px; line-height: 1.5; }
.bio-socials { display: flex; gap: 8px; margin-top: 14px; }
.bio-social { width: 30px; height: 30px; border-radius: 50%; background: #1a1a1c; display: flex; align-items: center; justify-content: center; font-size: 13px; }
.bio-links { display: flex; flex-direction: column; gap: 9px; margin-top: 18px; }
.bio-link {
  display: flex; align-items: center; gap: 11px;
  padding: 13px 14px; border-radius: 13px;
  background: #fff; color: #0B0B0C;
  font-size: 13px; font-weight: 700;
  transition: transform 0.2s;
}
.bio-link:active { transform: scale(0.98); }
.bio-link .li { width: 26px; height: 26px; border-radius: 7px; display: flex; align-items: center; justify-content: center; color: #fff; font-size: 13px; flex: none; }
.bio-link .la { margin-left: auto; opacity: 0.4; }
.bio-foot { text-align: center; margin-top: 22px; font-size: 9px; color: #5a5a60; font-family: var(--mono); letter-spacing: 0.1em; }

/* link rows in editor */
.link-list { display: flex; flex-direction: column; gap: 10px; }
.link-thumb { width: 46px; height: 38px; border-radius: 9px; overflow: hidden; flex: none; background: #000; }
.link-thumb img, .link-thumb video { width: 100%; height: 100%; object-fit: cover; }

/* empty placeholder add-tiles (Lovable-style) */
.add-tiles { display: flex; flex-direction: column; gap: 10px; margin-top: 12px; }
.add-tiles-row { display: flex; gap: 10px; }
.add-tile { border: 1.5px dashed var(--line-2); background: var(--bg-3); border-radius: 16px; color: var(--fg-3); display: flex; align-items: center; justify-content: center; gap: 8px; transition: border-color 0.2s, color 0.2s, background 0.2s; cursor: pointer; }
.add-tile:hover { border-color: var(--accent); color: var(--fg); }
.add-tile.big { flex-direction: column; aspect-ratio: 1.5/1; }
.add-tile.small { flex: 1; flex-direction: column; aspect-ratio: 1/1; padding: 10px; text-align: center; }
.add-tile.row { padding: 22px 16px; justify-content: center; }
.add-tile.row .at-lbl { font-size: 15px; }
.add-tile .at-ico { color: var(--fg-3); margin-bottom: 4px; }
.add-tile .at-lbl { font-size: 13.5px; font-weight: 600; }
.add-tile.small .at-lbl { font-size: 12px; }
.add-tile .at-ico-sm { color: var(--fg-3); }
.add-tile .at-ico-box { width: 34px; height: 34px; border-radius: 9px; background: var(--bg-4); display: flex; align-items: center; justify-content: center; color: var(--fg-3); flex: none; }

/* ===== INLINE EDIT MODE ===== */
.edit-scroll { padding-bottom: 0; }
.edit-scroll .pf-cover { min-height: 580px; }
.edit-scroll .pf-cover-foot { padding-top: calc(58px + env(safe-area-inset-top)); padding-bottom: 24px; }
/* edit cover bleeds to the profile's own theme bg (identity panel below handles contrast) */
.edit-scroll .pf-cover::after { --bleed-to: var(--bg); }

/* ===== NEW: slim cover (photo + Change Cover) + identity panel below ===== */
.pf-cover.edit-cover-slim { min-height: 300px; }
.edit-cover-slim .pf-cover-foot { padding: 0; position: static; }
.edit-cover-slim .change-cover-wrap { position: absolute; left: 50%; transform: translateX(-50%); bottom: 96px; margin: 0; z-index: 5; }
.edit-cover-slim .change-cover-pill { margin: 0; height: 38px; padding: 0 16px; font-size: 13px; white-space: nowrap; }

.edit-identity { position: relative; z-index: 3; margin: -34px 14px 0; padding: 16px 16px 18px; border-radius: 22px; background: var(--bg-2); border: 1px solid var(--line); box-shadow: 0 -2px 30px -12px rgba(0,0,0,0.4); display: flex; flex-direction: column; align-items: center; text-align: center; }
.edit-identity.align-left { align-items: flex-start; text-align: left; }
.edit-identity .add-avatar-pill, .edit-identity .edit-avatar-wrap { margin-top: -52px; margin-bottom: 8px; }
.edit-identity .add-avatar-pill { white-space: nowrap; }
.edit-identity .edit-name { color: var(--fg); }
.edit-identity .edit-handle { color: var(--fg-2); }
.edit-identity .edit-handle input { color: var(--fg); }
.edit-identity .edit-name::placeholder, .edit-identity .edit-handle input::placeholder { color: var(--fg-3); }
.edit-identity .ef-pencil { color: var(--fg-3); }
.edit-identity .edit-company { background: var(--bg-3); border-color: var(--line); color: var(--fg); }
.edit-identity .edit-company::placeholder { color: var(--fg-3); }
.edit-identity .ef-company-at { color: var(--fg-3); }
.edit-identity .ea-hint { color: var(--fg-3); }
.edit-identity .ea-add { border-color: var(--line-2); color: var(--fg-2); }
.edit-identity .ea-chip.ea-chip-glass { background: var(--bg-3); border-color: var(--line); color: var(--fg); }
.edit-identity .edit-contact-toggle { color: var(--fg); }
.edit-identity .es-soc-add { border-color: var(--line-2); color: var(--fg-2); }
.edit-row-label { width: 100%; font-size: 11px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: var(--fg-3); margin-bottom: 10px; text-align: left; }
.edit-divider { width: 100%; height: 1px; background: var(--line); margin: 13px 0; }
.edit-identity .edit-align { margin: 0; align-self: flex-start; }
/* slim Layout toggle, pulled up tight under its label, left-aligned */
.edit-identity .edit-align.align-seg { margin: 0; align-self: flex-start; padding: 3px; }
.edit-identity .edit-align.align-seg button { height: 28px; padding: 0 13px; font-size: 12px; flex: 0 0 auto; }
.edit-identity .edit-row-label { margin-bottom: 8px; }
.edit-identity .edit-actions { margin-top: 0; }
.edit-identity .ea-hint { margin-top: 8px; }
/* social + sits the same distance below its label as the action + does (kill pf-socials' top margin here) */
.edit-identity .edit-socials { margin-top: 0; }
/* even rhythm: name → username → role/company all share the same gap */
.edit-identity .edit-field.ef-name { margin-bottom: 6px; }
.edit-identity .ef-company { margin-top: 10px; }
/* slimmer Layout toggle, sitting left under the label */
.edit-identity .edit-align.align-seg { padding: 3px; }
.edit-identity .edit-align.align-seg button { height: 28px; padding: 0 13px; font-size: 12px; }
.edit-identity.align-left .edit-socials, .edit-identity.align-left .edit-actions-row { justify-content: flex-start; }
.edit-identity:not(.align-left) .edit-socials, .edit-identity:not(.align-left) .edit-actions-row { justify-content: center; }
.edit-identity:not(.align-left) .edit-actions { align-items: center; }

/* edit top bar — circular back (cancel) + title + tick (save), floating over the cover */
.edit-topbar { position: absolute; top: 0; left: 0; right: 0; z-index: 60; display: flex; align-items: center; justify-content: space-between; padding: calc(12px + env(safe-area-inset-top)) 14px 12px; pointer-events: none; }
.edit-topbar .et-title { font-family: var(--display); font-weight: 700; font-size: 17px; color: #fff; white-space: nowrap; text-shadow: 0 1px 12px rgba(0,0,0,0.55); pointer-events: none; }
.et-circle { pointer-events: auto; width: 40px; height: 40px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: rgba(20,20,24,0.5); backdrop-filter: blur(16px) saturate(160%); -webkit-backdrop-filter: blur(16px) saturate(160%); border: 1px solid rgba(255,255,255,0.2); color: #fff; transition: transform 0.12s; }
.et-circle:active { transform: scale(0.9); }
.et-save { background: linear-gradient(180deg,#6B8299,#4D6980); border-color: rgba(255,255,255,0.28); }

/* floating "Add content" FAB (steel blue) */
.edit-addfab { position: absolute; right: 18px; bottom: calc(22px + env(safe-area-inset-bottom)); z-index: 62; display: inline-flex; align-items: center; gap: 7px; white-space: nowrap; height: 50px; padding: 0 20px 0 16px; border-radius: 999px; background: linear-gradient(180deg,#6B8299,#4D6980); color: #fff; font-family: var(--body); font-weight: 800; font-size: 14.5px; letter-spacing: 0.01em; border: none; box-shadow: 0 12px 28px -8px rgba(77,105,128,0.65); transition: transform 0.12s; }
.edit-addfab:active { transform: scale(0.95); }
.edit-addfab svg { stroke: currentColor; }
/* hide the FAB while any sheet is open so it doesn't float over the modal */
.appframe:has(.sheet-bg) .edit-addfab { display: none; }

/* add-content picker rows */
.addc-list { display: flex; flex-direction: column; gap: 10px; }
.addc-row { display: flex; align-items: center; gap: 13px; width: 100%; padding: 13px 14px; border-radius: 15px; background: var(--bg-2); border: 1px solid var(--line); text-align: left; transition: transform 0.12s; }
.addc-row:active { transform: scale(0.99); }
.addc-ic { width: 36px; height: 36px; border-radius: 10px; flex: none; display: flex; align-items: center; justify-content: center; background: var(--bg-4); color: var(--fg); }
.addc-ic svg { stroke: currentColor; }
.addc-meta { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.addc-t { font-weight: 800; font-size: 14.5px; color: var(--fg); }
.addc-s { font-size: 12px; color: var(--fg-3); }
.addc-add { width: 26px; height: 26px; border-radius: 50%; flex: none; display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 14px; background: var(--bg-4); color: var(--fg-2); }
.addc-add.on { background: linear-gradient(180deg,#6B8299,#4D6980); color: #fff; }
.addc-row.on { opacity: 0.7; }
/* grouped (LinkMe-style) titled sections */
.addc-group { margin-bottom: 20px; }
.addc-gh { font-size: 12px; font-weight: 800; letter-spacing: 0.04em; text-transform: uppercase; color: var(--fg-3); margin: 0 2px 10px; }
.addc-group .addc-row { margin-bottom: 10px; }
.addc-pro { display: inline-flex; vertical-align: middle; margin-left: 7px; }
.addc-pro .pro-badge { transform: scale(0.82); transform-origin: left center; }
.addc-edit { width: 30px; height: 30px; border-radius: 50%; flex: none; display: flex; align-items: center; justify-content: center; background: var(--bg-4); color: var(--fg-2); }
.addc-row.addc-sub { margin-left: 22px; width: calc(100% - 22px); position: relative; background: var(--bg); }
.addc-row.addc-sub .addc-sub-tick { position: absolute; left: -16px; top: -16px; width: 16px; height: 38px; border-left: 1.5px solid var(--line-2); border-bottom: 1.5px solid var(--line-2); border-bottom-left-radius: 9px; pointer-events: none; }

/* change cover pill — dashed glass, sits above the avatar in the identity cluster */
.change-cover-pill {
  display: inline-flex; align-items: center; gap: 7px; align-self: center;
  height: 38px; padding: 0 16px; border-radius: 999px; margin-bottom: 16px;
  background: rgba(255,255,255,0.13); backdrop-filter: blur(16px) saturate(160%); -webkit-backdrop-filter: blur(16px) saturate(160%);
  border: 1px dashed rgba(255,255,255,0.4); color: #fff; font-size: 13px; font-weight: 700; white-space: nowrap;
}
.pf-cover-foot.align-left .change-cover-pill { align-self: flex-start; }
.edit-cover-slim .change-cover-pill:active { transform: scale(0.96); }
.change-cover-wrap { position: relative; display: inline-flex; align-self: center; margin-bottom: 16px; }
.change-cover-wrap .change-cover-pill { margin-bottom: 0; }
.pf-cover-foot.align-left .change-cover-wrap { align-self: flex-start; }
.edit-cover-slim.pf-cover .change-cover-wrap, .edit-cover-slim ~ * .change-cover-wrap { margin-bottom: 0; }
.cover-badge { position: absolute; top: 16px; right: 16px; z-index: 4; font-size: 12px; font-weight: 700; color: #fff; background: rgba(0,0,0,0.45); backdrop-filter: blur(10px); padding: 6px 12px; border-radius: 999px; }
/* remove-cover X — badge on the Change Cover pill (mirrors the avatar remove button) */
.cover-remove-x { position: absolute; top: -6px; right: -6px; z-index: 7; width: 26px; height: 26px; border-radius: 50%; background: rgba(0,0,0,0.82); backdrop-filter: blur(8px); border: 1.5px solid rgba(255,255,255,0.4); color: #fff; display: flex; align-items: center; justify-content: center; }
.cover-remove-x:active { transform: scale(0.92); }

/* avatar with camera badge */
.edit-avatar { position: relative; width: 86px; height: 86px; padding: 0; margin-bottom: 12px; }
.pf-cover-foot:not(.align-left) .edit-avatar { margin-left: auto; margin-right: auto; display: block; }
.edit-avatar .ea-img { display: flex; align-items: center; justify-content: center; width: 86px; height: 86px; border-radius: 50%; overflow: hidden; border: 2.5px solid rgba(255,255,255,0.7); }
.edit-avatar .ea-img img { width: 100%; height: 100%; object-fit: cover; }
.edit-avatar .ea-initial { color: #fff; font-family: var(--display); font-weight: 800; font-size: 34px; }
.edit-avatar .ea-cam { position: absolute; bottom: 4px; right: 4px; width: 32px; height: 32px; border-radius: 50%; background: rgba(0,0,0,0.78); border: 2px solid rgba(255,255,255,0.35); display: flex; align-items: center; justify-content: center; color: #fff; }
/* optional avatar: wrap + remove + add-photo pill */
.edit-avatar-wrap { position: relative; display: inline-block; }
.pf-cover-foot:not(.align-left) .edit-avatar-wrap { margin-left: auto; margin-right: auto; }
.edit-avatar-wrap .ea-remove { position: absolute; top: -2px; right: -2px; width: 26px; height: 26px; border-radius: 50%; background: rgba(0,0,0,0.82); border: 1.5px solid rgba(255,255,255,0.4); color: #fff; display: flex; align-items: center; justify-content: center; z-index: 3; }
.add-avatar-pill { display: inline-flex; align-items: center; gap: 7px; height: 38px; padding: 0 16px; border-radius: 999px; margin-bottom: 12px; background: rgba(255,255,255,0.13); backdrop-filter: blur(16px) saturate(160%); -webkit-backdrop-filter: blur(16px) saturate(160%); border: 1px dashed rgba(255,255,255,0.4); color: #fff; font-size: 13px; font-weight: 700; }
.add-avatar-pill:active { transform: scale(0.96); }
.add-avatar-pill svg { width: 14px; height: 14px; }

/* editable field wrapper + pencil affordance */
.edit-field { position: relative; width: 100%; }
.edit-field.ef-name { margin-bottom: 2px; }
.edit-field.ef-bio { margin-top: 14px; }
.edit-bio { line-height: 1.25; }
.ef-pencil { position: absolute; top: 50%; right: 0; transform: translateY(-50%); color: rgba(255,255,255,0.5); pointer-events: none; }
.ef-name .ef-pencil { right: -4px; }
.pf-cover-foot.align-left .ef-pencil { right: auto; left: auto; position: static; transform: none; margin-left: 8px; display: inline-flex; vertical-align: middle; }
.pf-cover-foot.align-left .edit-field { display: flex; align-items: center; }

/* inline editable fields */
.edit-name { background: transparent; border: none; outline: none; width: 100%; text-align: inherit; font-family: var(--display); font-weight: 800; font-size: 27px; letter-spacing: -0.03em; color: #ffff; text-shadow: 0 2px 20px rgba(0,0,0,0.5); padding: 2px 0; }
.pf-cover-foot:not(.align-left) .edit-name { text-align: center; }
.edit-handle { display: flex; align-items: baseline; justify-content: inherit; gap: 0; font-size: 14px; color: rgba(255,255,255,0.7); margin-top: 4px; }
.pf-cover-foot:not(.align-left) .edit-handle { justify-content: center; }
.edit-handle input { background: transparent; border: none; outline: none; color: #fff; font-size: 16px; min-width: 6ch; max-width: 20ch; text-align: left; }
.ef-company { display: flex; align-items: center; justify-content: center; gap: 7px; margin-top: 8px; flex-wrap: wrap; }
.pf-cover-foot.align-left .ef-company { justify-content: flex-start; }
.edit-company { background: rgba(255,255,255,0.1); border: 1px solid rgba(255,255,255,0.22); border-radius: 9px; outline: none; color: #fff; font-size: 14px; font-weight: 600; padding: 6px 10px; width: 130px; text-align: center; }
.edit-company::placeholder { color: rgba(255,255,255,0.5); font-weight: 500; }
.ef-company-at { color: rgba(255,255,255,0.55); font-size: 13px; }
.edit-handle-status { font-size: 12px; font-weight: 600; margin-top: 5px; text-align: center; }
.pf-cover-foot.align-left .edit-handle-status { text-align: left; }
.edit-handle-status.ok { color: var(--brand); }
.edit-handle-status.bad { color: #FF6B6B; }
.edit-handle-status.checking { color: var(--fg-3); }
.edit-bio { background: transparent; border: none; outline: none; width: 100%; text-align: inherit; font-size: 16px; color: rgba(255,255,255,0.85); padding: 2px 0; resize: none; overflow: hidden; font-family: inherit; line-height: 1.35; display: block; }
.pf-cover-foot:not(.align-left) .edit-bio { text-align: center; }
.ef-bio .ef-pencil-top { top: 4px; transform: none; }
.ef-bio .bio-hide { position: absolute; top: 0; right: -28px; width: 24px; height: 24px; border-radius: 50%; background: rgba(0,0,0,0.6); border: 1.5px solid rgba(255,255,255,0.35); color: #fff; display: flex; align-items: center; justify-content: center; }
.add-bio-pill { display: inline-flex; align-items: center; gap: 7px; height: 34px; padding: 0 14px; border-radius: 999px; margin-top: 8px; background: rgba(255,255,255,0.1); backdrop-filter: blur(14px) saturate(150%); -webkit-backdrop-filter: blur(14px) saturate(150%); border: 1px dashed rgba(255,255,255,0.4); color: #fff; font-size: 13px; font-weight: 700; }
.add-bio-pill:active { transform: scale(0.96); }
.add-bio-pill svg { width: 14px; height: 14px; }
.edit-name::placeholder, .edit-handle input::placeholder, .edit-bio::placeholder { color: rgba(255,255,255,0.4); }

.edit-align { width: auto; max-width: none; align-self: center; background: var(--bg-3); border: 1px solid var(--line); }
.edit-align.align-seg button { flex: 0 0 auto; height: 30px; padding: 0 14px; font-size: 12.5px; white-space: nowrap; color: var(--fg-2); }
.pf-cover-foot.align-left .edit-align { align-self: flex-start; margin-left: 0; margin-right: auto; }

/* social row editing */
.edit-socials { align-items: center; }
.es-soc { position: relative; display: inline-flex; }
.es-soc-x { position: absolute; top: -4px; right: -4px; width: 20px; height: 20px; border-radius: 50%; background: var(--danger); color: #fff; font-size: 11px; display: flex; align-items: center; justify-content: center; border: 2px solid var(--bg); }
.es-soc-add { width: 52px; height: 52px; border-radius: 50%; border: 1.5px dashed rgba(255,255,255,0.4); color: rgba(255,255,255,0.7); font-size: 24px; font-weight: 300; display: flex; align-items: center; justify-content: center; }

.edit-contact-toggle { display: flex; align-items: center; gap: 10px; margin: 18px auto 0; max-width: 320px; width: 100%; padding: 12px 16px; border-radius: 14px; background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.14); color: #fff; font-size: 13.5px; font-weight: 600; }
.edit-contact-toggle svg { width: 18px; height: 18px; flex: none; }
.pf-cover-foot.align-left .edit-contact-toggle { margin-left: 0; }

/* featured section header */
.edit-sec-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }
.edit-sec-head .pf-section-h { font-size: 15px; font-weight: 800; color: var(--fg); text-transform: none; letter-spacing: -0.01em; font-family: var(--display); }
.edit-sec-block { padding-top: 6px; border-top: 1px solid var(--line); }
.esh-right { display: flex; align-items: center; gap: 10px; }
.esh-count { font-family: var(--mono); font-size: 11px; color: var(--fg-3); }

/* 2-col grid cards */
.pf-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 12px; }
.pf-grid-card { position: relative; aspect-ratio: 1/1; border-radius: 18px; overflow: hidden; display: flex; align-items: flex-end; padding: 14px; background: linear-gradient(150deg,#2a3a52,#141c28); }
.pf-grid-card img, .pf-grid-card video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.pf-grid-card::after { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(180deg, rgba(0,0,0,0.25) 0%, transparent 40%, rgba(0,0,0,0.8) 100%); }
.pf-grid-card .ttl { position: relative; z-index: 2; font-family: var(--display); font-weight: 700; font-size: 15px; text-shadow: 0 1px 10px rgba(0,0,0,0.6); }
.pf-grid-card .corner { position: absolute; top: 10px; right: 10px; z-index: 3; }

/* left thumbnail on a compact link (Linktree-style) */
.pf-link-thumb { width: 46px; height: 46px; border-radius: 10px; object-fit: cover; flex: none; margin: -4px 2px -4px -4px; }

/* remove (×) + edit (pencil) overlays on editable links */
.edit-link-wrap { position: relative; }
.edit-link-wrap .rm-x { position: absolute; top: 12px; right: 12px; z-index: 6; width: 28px; height: 28px; border-radius: 50%; background: rgba(0,0,0,0.6); backdrop-filter: blur(6px); color: #fff; display: flex; align-items: center; justify-content: center; border: 1px solid rgba(255,255,255,0.25); }
.edit-link-wrap .lk-edit { position: absolute; top: 12px; right: 48px; z-index: 6; width: 28px; height: 28px; border-radius: 50%; background: rgba(0,0,0,0.6); backdrop-filter: blur(6px); color: #fff; display: flex; align-items: center; justify-content: center; border: 1px solid rgba(255,255,255,0.25); }
.edit-link-wrap:has(.pf-grid-card) .rm-x { top: 9px; right: 9px; width: 26px; height: 26px; }
.edit-link-wrap:has(.pf-grid-card) .lk-edit { top: 9px; right: 41px; width: 26px; height: 26px; }
.edit-link-wrap:has(.pf-link) .rm-x { top: 50%; transform: translateY(-50%); right: 10px; }
.edit-link-wrap:has(.pf-link) .lk-edit { top: 50%; transform: translateY(-50%); right: 44px; }

/* expanded inline add form */
.add-tile.open { border-style: solid; border-color: var(--line); background: var(--bg-2); cursor: default; padding: 14px; align-items: stretch; }
.add-tile.big.open { aspect-ratio: auto; flex-direction: column; }
.add-tile.small.open { aspect-ratio: auto; flex: 1; }
.inline-form { display: flex; flex-direction: column; gap: 10px; width: 100%; }
.if-social-cta { display: flex; align-items: center; gap: 8px; width: 100%; padding: 11px 14px; border-radius: 12px; background: var(--bg-3); border: 1px dashed var(--line-2); color: var(--fg-2); font-size: 13.5px; font-weight: 600; text-align: left; }
.if-social-cta:active { background: var(--bg-4); }
.if-cta-ic { display: flex; color: var(--accent); }
.if-social-chip { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 12px; background: var(--bg-3); border: 1px solid var(--line); }
.if-social-chip > span { font-size: 14px; font-weight: 700; flex: 1; }
.if-chip-x { width: 26px; height: 26px; border-radius: 50%; background: var(--bg-4); color: var(--fg-2); display: flex; align-items: center; justify-content: center; font-size: 12px; }
.if-thumb { position: relative; width: 100%; aspect-ratio: 1.5/1; border-radius: 12px; background: var(--bg-3); border: 1px dashed var(--line-2); display: flex; align-items: center; justify-content: center; overflow: hidden; cursor: pointer; }
.vf-grid .if-thumb { aspect-ratio: 1/1; }
.if-thumb img, .if-thumb video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.if-thumb-empty { display: flex; flex-direction: column; align-items: center; gap: 6px; color: var(--fg-3); font-size: 12px; }
.if-thumb-spin { width: 22px; height: 22px; border-radius: 50%; border: 2.5px solid rgba(var(--brand-rgb), 0.25); border-top-color: var(--accent); animation: ifThumbSpin 0.7s linear infinite; }
@keyframes ifThumbSpin { to { transform: rotate(360deg); } }
.if-blocked { font-size: 12.5px; color: #ff6b6b; background: rgba(255,107,107,0.1); border: 1px solid rgba(255,107,107,0.25); border-radius: 10px; padding: 9px 12px; margin-top: 4px; text-align: center; font-weight: 600; }
.inline-form .btn-primary:disabled { opacity: 0.4; pointer-events: none; }
.if-cam { position: absolute; top: 8px; right: 8px; width: 30px; height: 30px; border-radius: 50%; background: rgba(0,0,0,0.55); color: #fff; display: flex; align-items: center; justify-content: center; }
.inline-form .input { font-size: 16px; }
.inline-form textarea.if-title { width: 100%; box-sizing: border-box; resize: none; min-height: 56px; line-height: 1.35; text-align: center; font-family: var(--body); overflow-wrap: anywhere; }
.if-titlecount { text-align: right; font-size: 11px; color: var(--fg-3); margin-top: -4px; }
.if-actions { display: flex; gap: 10px; }
.if-actions .btn { flex: 1; }

/* other section toggles */
.edit-sec-toggles { margin-top: 22px; display: flex; flex-direction: column; gap: 10px; }
.edit-sec-row { display: flex; align-items: center; justify-content: space-between; padding: 14px 16px; border-radius: 14px; background: var(--bg-2); border: 1px solid var(--line); font-size: 14px; font-weight: 600; }

/* sticky save bar (legacy — replaced by top bar + Add-content FAB) */
.edit-savebar { position: absolute; bottom: 0; left: 0; right: 0; z-index: 60; display: none; gap: 12px; padding: 14px 16px calc(14px + env(safe-area-inset-bottom)); background: linear-gradient(180deg, transparent, var(--bg) 32%); }
.edit-savebar button { height: 54px; border-radius: 16px; font-size: 15px; font-weight: 700; }
.edit-savebar .esb-cancel { flex: 0 0 38%; background: var(--bg-3); color: var(--danger); border: 1px solid var(--line); }
.edit-savebar .esb-save { flex: 1; background: var(--fg); color: var(--bg); }

/* cover options sheet rows */
.cover-opt { display: flex; align-items: center; gap: 14px; width: 100%; padding: 14px 4px; text-align: left; }
.cover-opt .co-ic { width: 44px; height: 44px; border-radius: 12px; background: var(--bg-3); display: flex; align-items: center; justify-content: center; color: var(--fg); flex: none; }
.cover-opt .co-t { font-weight: 700; font-size: 15px; }
.cover-opt .co-s { font-size: 12.5px; color: var(--fg-3); }

/* ===== action buttons (edit chips + picker + live) ===== */
.edit-actions { margin: 18px auto 0; max-width: 340px; width: 100%; }
.pf-cover-foot.align-left .edit-actions { margin-left: 0; }
.edit-actions-row { display: flex; flex-wrap: wrap; gap: 8px; justify-content: inherit; }
.pf-cover-foot:not(.align-left) .edit-actions-row { justify-content: center; }
.ea-chip { position: relative; display: inline-flex; align-items: center; gap: 8px; height: 38px; padding: 0 30px 0 8px; border-radius: 999px; color: #fff; font-size: 13px; font-weight: 700; border: 1px solid rgba(255,255,255,0.16); }
.ea-chip-ic { width: 26px; height: 26px; border-radius: 50%; background: rgba(0,0,0,0.28); display: flex; align-items: center; justify-content: center; flex: none; }
.ea-chip-ic svg, .ea-chip-ic img { width: 15px; height: 15px; }
.ea-chip.ea-chip-glass { background: rgba(255,255,255,0.13); backdrop-filter: blur(16px) saturate(160%); -webkit-backdrop-filter: blur(16px) saturate(160%); border: 1px solid rgba(255,255,255,0.18); box-shadow: 0 4px 16px -4px rgba(0,0,0,0.4), inset 0 1px 0 rgba(255,255,255,0.25); }
.ea-chip.ea-chip-glass .ea-chip-ic { background: rgba(255,255,255,0.2); }
.ea-chip-x { position: absolute; right: 6px; top: 50%; transform: translateY(-50%); width: 18px; height: 18px; border-radius: 50%; background: rgba(0,0,0,0.4); color: #fff; font-size: 10px; display: flex; align-items: center; justify-content: center; }
.ea-add { display: inline-flex; align-items: center; gap: 6px; height: 38px; padding: 0 16px; border-radius: 999px; border: 1.5px dashed rgba(255,255,255,0.4); color: rgba(255,255,255,0.8); font-size: 13px; font-weight: 700; }
.ea-hint { font-size: 12px; color: rgba(255,255,255,0.55); margin-top: 8px; }
.pf-cover-foot:not(.align-left) .ea-hint { text-align: center; }

/* action picker sheet */
.action-list { display: flex; flex-direction: column; gap: 8px; }
.action-opt { display: flex; align-items: center; gap: 6px; width: 100%; padding: 8px 12px 8px 6px; border-radius: 16px; background: var(--bg-2); border: 1px solid var(--line); text-align: left; transition: border-color .12s, opacity .12s; }
.action-opt.over { border-color: var(--accent); }
.action-opt.dragging { opacity: 0.5; }
.action-opt .ao-grip { flex: none; display: flex; align-items: center; justify-content: center; width: 26px; height: 44px; color: var(--fg-3); cursor: grab; touch-action: none; border-radius: 8px; }
.action-opt .ao-grip:active { cursor: grabbing; color: var(--fg); }
.action-opt .ao-main { display: flex; align-items: center; gap: 14px; flex: 1; min-width: 0; background: none; border: none; text-align: left; padding: 0; }
.action-opt .ao-ic { width: 44px; height: 44px; border-radius: 12px; display: flex; align-items: center; justify-content: center; flex: none; }
.action-opt .ao-ic svg, .action-opt .ao-ic img { width: 20px; height: 20px; }
.action-opt .ao-meta { flex: 1; min-width: 0; }
.action-opt .ao-t { font-weight: 700; font-size: 15px; }
.action-opt .ao-s { font-size: 12px; color: var(--fg-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.action-opt .ao-add { width: 30px; height: 30px; border-radius: 50%; border: 1.5px solid var(--line-2); color: var(--fg-2); display: flex; align-items: center; justify-content: center; font-size: 16px; flex: none; }
.action-opt .ao-add.on { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); }
.ao-foot { font-size: 12px; color: var(--fg-3); text-align: center; padding: 14px 0 4px; }
.ao-capwarn { background: rgba(224,53,59,0.12); color: var(--danger); border: 1px solid rgba(224,53,59,0.25); border-radius: 12px; padding: 10px 14px; font-size: 12.5px; font-weight: 600; text-align: center; margin-bottom: 14px; }
.action-opt .ao-add.disabled { opacity: 0.3; }

/* live profile action buttons — Liquid Glass pills, coloured icon tile keeps the platform accent */
.pf-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; max-width: 340px; width: 100%; }
.pf-cover-foot:not(.align-left) .pf-actions { justify-content: center; }
.pf-action { display: inline-flex; align-items: center; gap: 8px; height: 38px; padding: 0 16px 0 8px; border-radius: 999px; font-size: 13px; font-weight: 700; color: #fff; background: rgba(255,255,255,0.12); backdrop-filter: blur(18px) saturate(160%); -webkit-backdrop-filter: blur(18px) saturate(160%); border: 1px solid rgba(255,255,255,0.22); box-shadow: inset 0 1px 0 rgba(255,255,255,0.25), 0 6px 18px -8px rgba(0,0,0,0.4); transition: background 0.2s; }
.pf-action:hover { background: rgba(255,255,255,0.18); }
.pf-action .pa-ic { width: 26px; height: 26px; border-radius: 50%; background: rgba(0,0,0,0.28); display: flex; align-items: center; justify-content: center; flex: none; }
.pf-action .pa-ic svg, .pf-action .pa-ic img { width: 15px; height: 15px; }
.pf-action.gold { color: #fff; }
.pf-action.gold .pa-ic { background: rgba(0,0,0,0.28); }
/* glass preview tile for the Share row in the action picker */
.action-opt .ao-ic.ao-ic-glass {
  background: rgba(255,255,255,0.1);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255,255,255,0.18); box-shadow: inset 0 1px 0 rgba(255,255,255,0.2);
}

/* ===== product editor ===== */
.pe-media { position: relative; display: flex; align-items: center; justify-content: center; width: 100%; aspect-ratio: 4/3; border-radius: 18px; overflow: hidden; margin-bottom: 12px; cursor: pointer; }
.pe-media img, .pe-media video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.pe-cam { position: relative; z-index: 2; display: inline-flex; align-items: center; gap: 8px; background: rgba(0,0,0,0.55); color: #fff; padding: 10px 16px; border-radius: 999px; font-size: 13px; font-weight: 700; }
.pe-grads { display: flex; gap: 8px; margin-bottom: 16px; }
.pe-grad { width: 38px; height: 38px; border-radius: 10px; border: 2px solid transparent; }
.pe-grad.on { border-color: var(--fg); box-shadow: 0 0 0 2px var(--bg), 0 0 0 4px var(--fg); }

/* merch edit add / badges */
.merch-add { flex: 0 0 auto; width: 130px; border-radius: 20px; border: 1.5px dashed var(--line-2); background: var(--bg-2); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; color: var(--fg-3); font-size: 12px; font-weight: 700; scroll-snap-align: start; }
.merch-edit { text-align: left; cursor: pointer; padding: 0; }
.mc-edit-badge { position: absolute; top: 12px; right: 12px; z-index: 3; width: 28px; height: 28px; border-radius: 50%; background: rgba(0,0,0,0.55); backdrop-filter: blur(6px); color: #fff; display: flex; align-items: center; justify-content: center; border: 1px solid rgba(255,255,255,0.2); }
.mc-desc { font-size: 12px; color: var(--fg-3); margin-top: 4px; line-height: 1.35; }
.esb-veil-soft { text-align: center; font-size: 12.5px; color: var(--fg-3); padding: 10px 0 2px; }

/* ===== live profile: avatar photo, bio line, centering ===== */
.pf-cover-foot { display: flex; flex-direction: column; }
.pf-cover-foot:not(.align-left) { align-items: center; text-align: center; }
.pf-cover-foot.align-left { align-items: flex-start; text-align: left; }
.pf-avatar-photo { width: 86px; height: 86px; border-radius: 50%; overflow: hidden; border: 2.5px solid rgba(255,255,255,0.7); margin-bottom: 8px; box-shadow: 0 8px 24px -8px rgba(0,0,0,0.5); }
.pf-avatar-photo img { width: 100%; height: 100%; object-fit: cover; }
.pf-avatar-photo .pf-av-fallback { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; color: #fff; font-family: var(--display); font-weight: 800; font-size: 34px; }
/* animated avatar ring (Pro) */
.pf-avatar-photo.ring { border-color: transparent; position: relative; padding: 3px; background: var(--bg); box-shadow: 0 8px 24px -8px rgba(0,0,0,0.5); }
.pf-avatar-photo.ring::before { content: ""; position: absolute; inset: -3px; border-radius: 50%; background: conic-gradient(from 0deg, #E8FF59, #8AFF6B, #5CC8FF, #7C5CFF, #FF6BC8, #E8FF59); animation: ringspin 3.5s linear infinite; z-index: -1; }
.pf-avatar-photo.ring img, .pf-avatar-photo.ring .pf-av-fallback { border-radius: 50%; }
@keyframes ringspin { to { transform: rotate(360deg); } }
/* verified tick — Instagram-style scalloped seal */
.verified-tick { display: inline-flex; align-items: center; justify-content: center; width: 19px; height: 19px; border-radius: 50%; background: #3897F0; color: #fff; margin-left: 7px; vertical-align: 3px; box-shadow: 0 0 0 2px rgba(0,0,0,0.15); }
.verified-tick svg { width: 12px; height: 12px; }
.verified-seal { width: 22px; height: 22px; margin-left: 8px; vertical-align: -4px; display: inline-block; }
/* featured drop banner */
.drop-banner { position: relative; z-index: 3; display: inline-flex; align-items: center; gap: 8px; align-self: center; margin-bottom: 16px; padding: 8px 14px; border-radius: 999px; background: rgba(0,0,0,0.45); backdrop-filter: blur(12px); border: 1px solid rgba(255,255,255,0.18); color: #fff; font-size: 12.5px; font-weight: 700; }
.pf-cover-foot.align-left .drop-banner { align-self: flex-start; }
.drop-banner .db-dot { width: 7px; height: 7px; border-radius: 50%; background: #FF3A5C; box-shadow: 0 0 8px #FF3A5C; animation: blink 1.4s infinite; }
.drop-banner .db-time { font-family: var(--mono); font-size: 11px; color: var(--accent); margin-left: 2px; }
/* profile themes (Pro) — tint the cover */
.pf-cover.theme-glass .pf-cover-media { filter: saturate(1.2) brightness(1.05); }
.pf-cover.theme-glass .pf-cover-tint { background: linear-gradient(180deg, rgba(255,255,255,0.12) 0%, transparent 30%, rgba(0,0,0,0.55) 78%, rgba(0,0,0,0.9) 100%); }
.pf-cover.theme-chrome .pf-cover-media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(160deg, rgba(255,255,255,0.25), transparent 40%, rgba(0,0,0,0.2)); mix-blend-mode: overlay; }
.pf-cover.theme-holo .pf-cover-media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(115deg, rgba(255,126,200,0.35), rgba(122,209,255,0.3) 50%, rgba(122,255,200,0.3)); mix-blend-mode: overlay; }
.pf-cover.theme-matte .pf-cover-media { filter: brightness(0.7) contrast(1.05); }
.pf-bio-line { font-size: 13.5px; color: rgba(255,255,255,0.82); margin-top: 6px; max-width: 34ch; }
/* bio as a body section (live profile) */
.pf-bio-section { text-align: center; }
.pf-bio-section.align-left { text-align: left; }
.pf-bio-body { font-size: 15px; line-height: 1.55; color: var(--fg-2); margin: 0 auto; max-width: 92%; white-space: pre-wrap; }
.pf-bio-section.align-left .pf-bio-body { margin: 0; max-width: 100%; }
/* bio section editor (edit mode) */
.bio-section-input { width: 100%; background: var(--bg-3); border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px; color: var(--fg); font-size: 16px; font-family: inherit; line-height: 1.5; resize: vertical; min-height: 88px; outline: none; }
.bio-section-input:focus { border-color: var(--accent); }
.bio-charcount { text-align: right; font-size: 11px; color: var(--fg-3); margin-top: 6px; }
.pf-cover-foot:not(.align-left) .pf-name,
.pf-cover-foot:not(.align-left) .pf-handle,
.pf-cover-foot:not(.align-left) .pf-bio-line { width: 100%; }

/* ===== inline section previews (Moments / Gallery / Merch) ===== */
.edit-sec-previews { display: flex; flex-direction: column; gap: 16px; margin-top: 22px; }
.edit-protools { margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--line); }
.ept-edit { color: var(--fg-2); flex: none; display: flex; padding: 6px; border-radius: 8px; background: var(--bg-3); }
/* ===== EXCHANGE config sheet ===== */
.ex-grouplabel { font-size: 11px; font-weight: 800; letter-spacing: 0.05em; text-transform: uppercase; color: var(--fg-3); margin: 20px 0 10px; }
.ex-field { display: flex; align-items: center; gap: 12px; padding: 13px 14px; border-radius: 13px; background: var(--bg-2); border: 1px solid var(--line); margin-bottom: 9px; }
.ex-field.off { opacity: 0.65; }
.ex-field.locked { background: var(--bg-3); }
.ex-fic { width: 26px; display: flex; align-items: center; justify-content: center; color: var(--fg-2); flex: none; }
.ex-flabel { flex: 1; font-size: 14.5px; font-weight: 600; }
.ex-always { font-size: 12px; color: var(--fg-3); }
.ex-req { background: var(--bg-3); border: 1px solid var(--line); border-radius: 9px; color: var(--fg); font-size: 12.5px; font-weight: 700; padding: 6px 8px; -webkit-appearance: none; appearance: none; }
.ex-field.q .ex-qinput { flex: 1; background: none; border: none; outline: none; color: var(--fg); font-size: 14.5px; }
.ex-field-x { flex: none; color: var(--fg-3); display: flex; padding: 4px; }
.ex-fic-pick { position: relative; }
.ex-fic-pick::after { content: ""; position: absolute; right: -2px; bottom: -2px; width: 7px; height: 7px; border-radius: 50%; background: var(--accent); border: 1.5px solid var(--bg-2); }
.ex-field.q { position: relative; flex-wrap: wrap; }
.ex-iconpop { display: flex; gap: 8px; width: 100%; margin-top: 10px; padding: 10px; border-radius: 12px; background: var(--bg-3); border: 1px solid var(--line); overflow-x: auto; -webkit-overflow-scrolling: touch; scroll-snap-type: x proximity; scrollbar-width: none; }
.ex-iconpop::-webkit-scrollbar { display: none; }
.ex-iconopt { display: flex; align-items: center; justify-content: center; width: 46px; height: 46px; flex: none; scroll-snap-align: start; border-radius: 11px; background: var(--bg-2); color: var(--fg-2); border: 1px solid var(--line); }
.ex-iconopt.on { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); }
.ex-addfield { display: flex; align-items: center; justify-content: center; gap: 7px; width: 100%; padding: 13px; border-radius: 13px; background: var(--bg-2); border: 1px dashed var(--line-2); color: var(--accent); font-size: 13.5px; font-weight: 700; margin-top: 2px; }
.ex-addfield:active { background: var(--bg-3); }
.ex-toggle-row { display: flex; align-items: center; gap: 12px; width: 100%; text-align: left; padding: 13px 14px; border-radius: 13px; background: var(--bg-2); border: 1px solid var(--line); margin-bottom: 9px; }
.ex-tr-meta { flex: 1; display: flex; flex-direction: column; gap: 2px; }
.ex-tr-meta b { font-size: 14px; font-weight: 700; }
.ex-tr-meta span { font-size: 11.5px; color: var(--fg-3); line-height: 1.35; }
.ex-display-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-bottom: 14px; }
.ex-disp { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 14px 8px; border-radius: 14px; background: var(--bg-2); border: 2px solid var(--line); }
.ex-disp.sel { border-color: var(--accent); }
.ex-disp-prev { width: 100%; height: 30px; border-radius: 8px; display: block; }
.ex-disp-prev.dp-button { background: var(--accent); }
.ex-disp-prev.dp-link { background: linear-gradient(var(--bg-4), var(--bg-4)) padding-box; border: 1px solid var(--line-2); height: 30px; }
.ex-disp-prev.dp-card { background: var(--bg-4); border: 1px solid var(--line-2); }
.ex-disp-lb { font-size: 12px; font-weight: 700; }
/* ===== EXCHANGE profile CTAs ===== */
.ex-cta-btn { width: 100%; height: 54px; border-radius: 16px; background: var(--accent); color: var(--accent-ink); font-size: 15.5px; font-weight: 800; display: flex; align-items: center; justify-content: center; gap: 9px; }
.ex-cta-btn:active { transform: scale(0.99); }
.ex-cta-link { width: 100%; display: flex; align-items: center; gap: 12px; padding: 16px; border-radius: 14px; background: var(--bg-2); border: 1px solid var(--line-2); color: var(--fg); }
.ex-cta-link-ic { width: 34px; height: 34px; border-radius: 10px; background: var(--accent); color: var(--accent-ink); display: flex; align-items: center; justify-content: center; flex: none; }
.ex-cta-link-t { flex: 1; text-align: left; font-size: 15px; font-weight: 700; }
.ex-cta-card { width: 100%; display: flex; align-items: center; gap: 13px; padding: 18px; border-radius: 18px; background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 16%, var(--bg-2)), var(--bg-2)); border: 1px solid color-mix(in srgb, var(--accent) 35%, transparent); color: var(--fg); }
.ex-cta-card-ic { width: 46px; height: 46px; border-radius: 13px; background: var(--accent); color: var(--accent-ink); display: flex; align-items: center; justify-content: center; flex: none; }
.ex-cta-card-meta { flex: 1; text-align: left; display: flex; flex-direction: column; gap: 3px; }
.ex-cta-card-meta b { font-size: 16px; font-weight: 800; }
.ex-cta-card-meta span { font-size: 12.5px; color: var(--fg-3); }
.ex-sticky { position: absolute; left: 16px; right: 16px; bottom: calc(16px + env(safe-area-inset-bottom)); z-index: 60; height: 56px; border-radius: 16px; background: var(--accent); color: var(--accent-ink); font-size: 15.5px; font-weight: 800; display: flex; align-items: center; justify-content: center; gap: 9px; box-shadow: 0 12px 30px -8px color-mix(in srgb, var(--accent) 60%, transparent); }
/* ===== EXCHANGE visitor form ===== */
.exchange-bg { z-index: 320; align-items: flex-end; }
.exchange-sheet { width: 100%; max-height: 86%; background: var(--bg); border-radius: 26px 26px 0 0; border-top: 1px solid var(--line-2); display: flex; flex-direction: column; overflow-y: auto; animation: sheetUp 0.4s var(--ease-out); }
.ex-form-head { text-align: center; padding: 26px 24px 18px; background: var(--bg-2); }
.ex-eyebrow { font-size: 11px; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; color: var(--fg-3); margin-bottom: 8px; }
.ex-h { font-family: var(--display); font-weight: 800; font-size: 28px; letter-spacing: -0.02em; }
.ex-sub { font-size: 14px; color: var(--fg-3); margin-top: 6px; }
.ex-form-body { padding: 20px 22px calc(24px + env(safe-area-inset-bottom)); display: flex; flex-direction: column; gap: 14px; }
.ex-photo { align-self: center; width: 84px; height: 84px; border-radius: 20px; overflow: hidden; background: var(--bg-3); border: 1px dashed var(--line-2); display: flex; align-items: center; justify-content: center; margin-bottom: 4px; }
.ex-photo img { width: 100%; height: 100%; object-fit: cover; }
.ex-photo-empty { display: flex; flex-direction: column; align-items: center; gap: 4px; color: var(--fg-3); font-size: 10px; font-weight: 700; }
.ex-field-in { display: flex; flex-direction: column; gap: 6px; }
.ex-field-in label { font-size: 11px; font-weight: 800; letter-spacing: 0.05em; text-transform: uppercase; color: var(--fg-3); }
.ex-input { width: 100%; height: 52px; border-radius: 14px; background: var(--bg-2); border: 1px solid var(--line); color: var(--fg); font-size: 16px; padding: 0 16px; outline: none; }
textarea.ex-input { height: auto; padding: 14px 16px; resize: none; }
.ex-input:focus { border-color: var(--accent); }
.ex-loc { display: flex; align-items: center; gap: 12px; padding: 13px 14px; border-radius: 14px; background: var(--bg-2); border: 1px solid var(--line); }
.ex-loc.on { border-color: var(--accent); }
.ex-submit { width: 100%; height: 56px; border-radius: 16px; background: var(--brand); color: #fff; font-size: 16px; font-weight: 800; display: flex; align-items: center; justify-content: center; gap: 8px; margin-top: 4px; }
.ex-submit.off { opacity: 0.4; }
.ex-legal { text-align: center; font-size: 11.5px; color: var(--fg-3); }
.ex-privacy { display: flex; align-items: center; justify-content: center; gap: 7px; text-align: center; font-size: 11px; line-height: 1.4; color: var(--fg-3); padding: 0 6px; }
.ex-privacy img { height: 13px; width: auto; opacity: 0.7; flex: none; }
.ex-privacy .ex-priv-light { display: none; }
[data-theme="light"] .ex-privacy .ex-priv-dark { display: none; }
[data-theme="light"] .ex-privacy .ex-priv-light { display: inline-block; }
.ex-notnow { align-self: center; font-size: 13.5px; font-weight: 700; color: var(--fg-3); padding: 4px; }
/* close button (top-right) */
.ex-close { position: absolute; top: 14px; right: 14px; z-index: 8; width: 34px; height: 34px; border-radius: 50%; background: var(--bg-3); border: 1px solid var(--line); color: var(--fg-2); display: flex; align-items: center; justify-content: center; }
.ex-close:active { transform: scale(0.92); }
/* phone field: dial-code chip + numeric input */
.ex-phone { display: flex; gap: 9px; }
.ex-dial { flex: none; display: flex; align-items: center; gap: 6px; height: 52px; padding: 0 13px; border-radius: 14px; background: var(--bg-2); border: 1px solid var(--line); color: var(--fg); font-size: 16px; font-weight: 700; }
.ex-dial:active { transform: scale(0.97); }
.ex-dial-f { font-size: 18px; line-height: 1; }
.ex-dial-cv { color: var(--fg-3); font-size: 11px; }
.ex-phone-in { flex: 1; min-width: 0; }
/* dial-code picker overlay */
.dial-bg { position: fixed; inset: 0; z-index: 340; background: rgba(0,0,0,0.6); backdrop-filter: blur(4px); display: flex; align-items: flex-end; }
.dial-sheet { width: 100%; max-height: 78%; background: var(--bg); border-radius: 22px 22px 0 0; border-top: 1px solid var(--line-2); display: flex; flex-direction: column; padding: 16px 16px calc(16px + env(safe-area-inset-bottom)); }
.dial-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.dial-head h3 { font-family: var(--display); font-weight: 800; font-size: 18px; margin: 0; }
.dial-x { width: 32px; height: 32px; border-radius: 50%; background: var(--bg-3); border: 1px solid var(--line); color: var(--fg-2); display: flex; align-items: center; justify-content: center; }
.dial-search { width: 100%; height: 48px; border-radius: 13px; background: var(--bg-2); border: 1px solid var(--line); color: var(--fg); font-size: 16px; padding: 0 14px; margin-bottom: 10px; }
.dial-list { flex: 1; overflow-y: auto; -webkit-overflow-scrolling: touch; }
.dial-row { width: 100%; display: flex; align-items: center; gap: 12px; padding: 13px 8px; border-bottom: 1px solid var(--line); text-align: left; }
.dial-row:active { background: var(--bg-2); }
.dial-flag { font-size: 22px; line-height: 1; flex: none; }
.dial-name { flex: 1; color: var(--fg); font-size: 15px; font-weight: 600; }
.dial-d { color: var(--fg-3); font-size: 15px; font-weight: 700; font-family: var(--mono); }
.dial-empty { text-align: center; color: var(--fg-3); padding: 30px; font-size: 14px; }
.ex-done { text-align: center; padding: 50px 30px calc(40px + env(safe-area-inset-bottom)); }
.ex-done-check { width: 64px; height: 64px; border-radius: 50%; background: var(--brand); color: #fff; display: flex; align-items: center; justify-content: center; margin: 0 auto 18px; }
.ex-done h2 { font-family: var(--display); font-weight: 800; font-size: 24px; margin-bottom: 8px; }
.ex-done p { font-size: 14px; color: var(--fg-3); line-height: 1.5; margin-bottom: 24px; }
/* ===== LEAD CRM detail ===== */
.lead-sheet .sheet-scroll { padding-bottom: 30px; }
.ld-head { display: flex; align-items: center; gap: 14px; padding: 6px 0 18px; }
.ld-av { width: 56px; height: 56px; border-radius: 50%; flex: none; overflow: hidden; display: flex; align-items: center; justify-content: center; background: linear-gradient(135deg,#6B8299,#3a4f63); color: #fff; font-family: var(--display); font-weight: 800; font-size: 22px; }
.ld-av img { width: 100%; height: 100%; object-fit: cover; }
/* view-on-map button + lead map overlay */
.ld-map-btn { display: flex; align-items: center; gap: 8px; width: 100%; margin: 4px 0 2px; padding: 11px 14px; border-radius: 12px; background: var(--bg-2); border: 1px solid var(--line); color: var(--brand-3, #8298AC); font-weight: 700; font-size: 14px; }
.ld-map-btn:active { transform: scale(0.98); }
.leadmap-overlay { position: fixed; inset: 0; z-index: 380; background: #000; }
.leadmap-canvas { position: absolute; inset: 0; }
.leadmap-x { position: absolute; top: calc(14px + env(safe-area-inset-top)); right: 14px; z-index: 4; width: 38px; height: 38px; border-radius: 50%; background: rgba(0,0,0,0.55); backdrop-filter: blur(6px); border: 1px solid rgba(255,255,255,0.15); color: #fff; display: flex; align-items: center; justify-content: center; }
.leadmap-cap { position: absolute; bottom: calc(24px + env(safe-area-inset-bottom)); left: 50%; transform: translateX(-50%); z-index: 4; background: rgba(0,0,0,0.6); backdrop-filter: blur(8px); color: #fff; font-family: var(--display); font-weight: 700; font-size: 14px; padding: 10px 18px; border-radius: 999px; border: 1px solid rgba(255,255,255,0.12); white-space: nowrap; }
.lead-marker { position: relative; width: 44px; height: 54px; }
.lmk-pin { position: absolute; top: 0; left: 50%; transform: translateX(-50%); width: 44px; height: 44px; border-radius: 50%; overflow: hidden; border: 3px solid var(--brand, #6B8299); background: linear-gradient(135deg,#6B8299,#3a4f63); box-shadow: 0 4px 14px rgba(0,0,0,0.5); display: flex; align-items: center; justify-content: center; color: #fff; font-family: var(--display); font-weight: 800; font-size: 17px; }
.lmk-pin img { width: 100%; height: 100%; object-fit: cover; }
.lmk-stem { position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); width: 0; height: 0; border-left: 7px solid transparent; border-right: 7px solid transparent; border-top: 11px solid var(--brand, #6B8299); }
.leadpop { display: flex; flex-direction: column; gap: 3px; padding: 2px; }
.leadpop b { font-family: var(--display); font-size: 15px; }
.leadpop span { font-size: 12px; color: var(--fg-3); }
.leadpop-loc { color: var(--brand-3, #8298AC) !important; }
.ld-name { font-family: var(--display); font-weight: 800; font-size: 20px; letter-spacing: -0.02em; }
.ld-sub { font-size: 13px; color: var(--fg-3); margin-top: 2px; }
.ld-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 9px; margin-bottom: 16px; }
.ld-stat { background: var(--bg-2); border: 1px solid var(--line); border-radius: 13px; padding: 11px 12px; position: relative; }
.ld-stat-l { font-size: 10px; font-weight: 800; letter-spacing: 0.05em; text-transform: uppercase; color: var(--fg-3); margin-bottom: 6px; }
.ld-stat-in { width: 100%; background: none; border: none; outline: none; color: var(--fg); font-size: 14px; font-weight: 700; padding: 0; }
.ld-pot { display: flex; align-items: center; gap: 2px; font-size: 14px; font-weight: 700; }
.ld-stage { display: flex; align-items: center; gap: 6px; font-size: 14px; font-weight: 700; color: var(--fg); }
.ld-dot { width: 9px; height: 9px; border-radius: 50%; flex: none; }
.ld-stage-veil { position: fixed; inset: 0; z-index: 10; }
.ld-stage-menu { position: absolute; top: 100%; left: 0; z-index: 11; margin-top: 4px; background: var(--bg-2); border: 1px solid var(--line-2); border-radius: 13px; padding: 5px; box-shadow: 0 16px 40px -12px rgba(0,0,0,0.7); min-width: 150px; }
.ld-stage-opt { display: flex; align-items: center; gap: 9px; width: 100%; padding: 10px 11px; border-radius: 9px; font-size: 13.5px; font-weight: 600; color: var(--fg); text-align: left; }
.ld-stage-opt:active { background: var(--bg-3); }
.ld-rows { display: flex; flex-direction: column; gap: 2px; margin-bottom: 16px; }
.ld-row { display: flex; align-items: center; gap: 11px; padding: 12px 4px; border-bottom: 1px solid var(--line); color: var(--fg); font-size: 14px; }
.ld-row svg { color: var(--fg-3); flex: none; }
.ld-row span { word-break: break-word; }
/* tappable email/phone rows → action sheet */
.ld-row-btn { width: 100%; background: none; border: none; border-bottom: 1px solid var(--line); text-align: left; cursor: pointer; }
.ld-row-btn:active { background: var(--bg-2); }
.ld-row-btn span:not(.ld-row-chev) { flex: 1; }
.ld-row-chev { color: var(--fg-3); display: flex; flex: none; }
.ld-act-bg { position: fixed; inset: 0; z-index: 390; background: rgba(0,0,0,0.55); backdrop-filter: blur(8px); display: flex; align-items: flex-end; justify-content: center; padding: 14px; }
.ld-act-card { width: 100%; max-width: 460px; background: var(--bg-1); border: 1px solid var(--line); border-radius: 22px; padding: 10px; }
.ld-act-h { display: flex; flex-direction: column; gap: 2px; padding: 12px 14px 10px; font-family: var(--display); font-weight: 800; font-size: 13px; letter-spacing: 0.04em; text-transform: uppercase; color: var(--fg-3); }
.ld-act-h span { font-family: var(--body); font-weight: 600; font-size: 15px; letter-spacing: 0; text-transform: none; color: var(--fg); }
.ld-act-row { display: flex; align-items: center; gap: 14px; width: 100%; padding: 14px; border-radius: 14px; background: none; border: none; text-align: left; color: var(--fg); }
.ld-act-row:active { background: var(--bg-2); }
.ld-act-ic { width: 40px; height: 40px; border-radius: 11px; flex: none; display: flex; align-items: center; justify-content: center; background: var(--bg-3); color: var(--accent); }
.ld-act-meta { display: flex; flex-direction: column; gap: 1px; }
.ld-act-t { font-size: 15.5px; font-weight: 700; }
.ld-act-s { font-size: 12.5px; color: var(--fg-3); }
.ld-act-cancel { width: 100%; margin-top: 6px; padding: 15px; border-radius: 14px; background: var(--bg-3); border: none; color: var(--fg); font-size: 15px; font-weight: 700; }
.ld-row.ld-answer { color: var(--fg-2); font-style: italic; }
.ld-block { margin-bottom: 16px; }
.ld-block-h { font-size: 11px; font-weight: 800; letter-spacing: 0.05em; text-transform: uppercase; color: var(--fg-3); margin-bottom: 9px; }
.ld-action { display: flex; align-items: center; gap: 11px; padding: 13px 14px; border-radius: 13px; background: var(--bg-2); border: 1px solid var(--line); }
.ld-action-check { width: 22px; height: 22px; border-radius: 7px; border: 1.5px solid var(--line-2); flex: none; display: flex; align-items: center; justify-content: center; color: var(--accent-ink); }
.ld-action-check.done { background: var(--accent); border-color: var(--accent); }
.ld-action-txt { flex: 1; font-size: 14px; font-weight: 600; }
.ld-action-txt.done { text-decoration: line-through; color: var(--fg-3); }
.ld-action-x { color: var(--fg-3); flex: none; }
.ld-action-add .ld-stat-in { width: 100%; background: var(--bg-2); border: 1px solid var(--line); border-radius: 13px; padding: 13px 14px; font-weight: 500; font-size: 14px; }
.ld-notes { width: 100%; background: var(--bg-2); border: 1px solid var(--line); border-radius: 13px; padding: 13px 14px; color: var(--fg); font-family: inherit; font-size: 14px; line-height: 1.5; resize: vertical; outline: none; }
.ld-meta-foot { text-align: center; font-size: 11.5px; color: var(--fg-3); margin: 8px 0 14px; }
.ld-save-conn { width: 100%; height: 48px; border-radius: 13px; background: var(--bg-3); border: 1px solid var(--line); color: var(--fg); font-size: 14px; font-weight: 700; display: flex; align-items: center; justify-content: center; gap: 8px; }
/* ===== richer leads list ===== */
.leads-pipeline { display: flex; align-items: center; justify-content: space-between; padding: 13px 16px; border-radius: 14px; background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 14%, var(--bg-2)), var(--bg-2)); border: 1px solid color-mix(in srgb, var(--accent) 30%, transparent); margin-bottom: 12px; }
.leads-pipeline span { font-size: 12px; font-weight: 700; color: var(--fg-3); text-transform: uppercase; letter-spacing: 0.05em; }
.leads-pipeline b { font-family: var(--display); font-size: 20px; font-weight: 800; }
.leads-kpis { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 9px; margin-bottom: 13px; }
.leads-kpis .lk { background: var(--bg-2); border: 1px solid var(--line); border-radius: 14px; padding: 12px 13px; }
.leads-kpis .lk-hero { background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 16%, var(--bg-2)), var(--bg-2)); border-color: color-mix(in srgb, var(--accent) 30%, transparent); }
.leads-kpis .lk-l { font-size: 10px; font-weight: 800; letter-spacing: 0.04em; text-transform: uppercase; color: var(--fg-3); margin-bottom: 6px; }
.leads-kpis .lk-v { font-family: var(--display); font-size: 21px; font-weight: 800; letter-spacing: -0.02em; }
.lf-manage { color: var(--fg-2); border-style: dashed !important; }
.fup-tags { display: flex; flex-wrap: wrap; align-items: center; gap: 7px; margin: -6px 0 16px; }
.fup-tags-l { font-size: 11px; font-weight: 800; letter-spacing: 0.04em; text-transform: uppercase; color: var(--fg-3); }
.fup-tag { font-size: 12px; font-weight: 700; color: var(--accent-ink); background: var(--accent); padding: 5px 11px; border-radius: 999px; }
.fup-delay { display: grid; grid-template-columns: repeat(4, 1fr); gap: 7px; }
.fup-delay-opt { padding: 11px 4px; border-radius: 11px; font-size: 12.5px; font-weight: 700; background: var(--bg-3); color: var(--fg-2); border: 1px solid var(--line); }
.fup-delay-opt.on { background: var(--fg); color: var(--bg); border-color: var(--fg); }
.fup-stages { display: flex; flex-wrap: wrap; gap: 7px; }
.fup-stage { display: inline-flex; align-items: center; gap: 6px; padding: 8px 13px; border-radius: 999px; font-size: 12.5px; font-weight: 700; background: var(--bg-3); color: var(--fg-2); border: 1px solid var(--line); }
.fup-stage.on { background: var(--fg); color: var(--bg); border-color: var(--fg); }
.fup-preview { margin-top: 16px; background: var(--bg-2); border: 1px solid var(--line); border-radius: 14px; padding: 14px; }
.fup-preview-l { font-size: 10px; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; color: var(--fg-3); margin-bottom: 8px; }
.fup-preview-sub { font-size: 14px; font-weight: 700; margin-bottom: 6px; }
.fup-preview-body { font-size: 13px; color: var(--fg-2); line-height: 1.5; white-space: pre-wrap; }
.lf-manage svg { vertical-align: -2px; margin-right: 2px; }
/* stage manager */
.stage-row { background: var(--bg-2); border: 1px solid var(--line); border-radius: 14px; padding: 12px; margin-bottom: 10px; }
.stage-colors { display: flex; gap: 7px; margin-bottom: 10px; }
.stage-sw { width: 26px; height: 26px; border-radius: 50%; flex: none; border: 2px solid transparent; }
.stage-sw.on { border-color: var(--fg); box-shadow: 0 0 0 2px var(--bg-2) inset; }
.stage-edit { display: flex; align-items: center; gap: 10px; }
.stage-in { flex: 1; background: var(--bg-3); border: 1px solid var(--line); border-radius: 10px; padding: 11px 13px; color: var(--fg); font-size: 15px; outline: none; }
.stage-in:focus { border-color: var(--accent); }
.stage-x { width: 34px; height: 34px; border-radius: 9px; flex: none; background: var(--bg-3); color: #ff5a5a; display: flex; align-items: center; justify-content: center; }
.leads-filterbar { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 4px; margin-bottom: 12px; scrollbar-width: none; }
.leads-filterbar::-webkit-scrollbar { display: none; }
.lf-chip { flex: none; display: flex; align-items: center; gap: 6px; padding: 7px 13px; border-radius: 999px; font-size: 12.5px; font-weight: 700; background: var(--bg-3); color: var(--fg-2); border: 1px solid var(--line); }
.lf-chip.on { background: var(--fg); color: var(--bg); border-color: var(--fg); }
.lead-name-row { display: flex; align-items: center; gap: 8px; }
.lead-name2 { font-size: 14.5px; font-weight: 700; }
.lead-stage-pill { font-size: 10px; font-weight: 800; padding: 2px 8px; border-radius: 999px; border: 1px solid; }
.lead-sub2 { font-size: 12.5px; color: var(--fg-2); margin-top: 1px; }
.lead-chev { color: var(--fg-3); flex: none; }
.ept-h { display: flex; align-items: center; gap: 7px; font-size: 12px; font-weight: 800; letter-spacing: 0.04em; text-transform: uppercase; color: var(--gold, #E8C75A); margin-bottom: 12px; }
.ept-row { display: flex; align-items: center; gap: 12px; width: 100%; text-align: left; padding: 14px; border-radius: 16px; background: var(--bg-2); border: 1px solid var(--line); margin-bottom: 10px; }
.ept-row:active { background: var(--bg-3); }
/* nested sub-row (e.g. Auto follow-up email under Contact exchange) */
.ept-row.ept-sub { margin-left: 22px; width: calc(100% - 22px); position: relative; background: var(--bg); }
.ept-row.ept-sub .ept-sub-tick { position: absolute; left: -16px; top: -16px; width: 16px; height: 40px; border-left: 1.5px solid var(--line-2); border-bottom: 1.5px solid var(--line-2); border-bottom-left-radius: 9px; pointer-events: none; }
.ept-ic { width: 40px; height: 40px; border-radius: 11px; flex: none; background: var(--bg-3); color: var(--fg); display: flex; align-items: center; justify-content: center; }
.ept-meta { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.ept-t { font-size: 14px; font-weight: 700; }
.ept-s { font-size: 11.5px; color: var(--fg-3); line-height: 1.4; }
.ept-lock { color: var(--gold, #E8C75A); flex: none; }
.ept-chev { color: var(--fg-3); flex: none; }
.edit-sec-block { }
.esb-preview { position: relative; }
.esb-preview.is-off { opacity: 0.5; pointer-events: none; }
.esb-veil { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 700; color: var(--fg-2); background: rgba(0,0,0,0.25); border-radius: 16px; }

/* section empty state (Moments) */
.sec-empty { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 6px; padding: 32px 20px; border: 1px solid var(--line); border-radius: 18px; background: var(--bg-2); }
.sec-empty .se-ic { width: 54px; height: 54px; border-radius: 16px; background: var(--bg-3); display: flex; align-items: center; justify-content: center; color: var(--fg-2); margin-bottom: 6px; }
.sec-empty .se-t { font-family: var(--display); font-weight: 700; font-size: 17px; }
.sec-empty .se-s { font-size: 13px; color: var(--fg-3); max-width: 30ch; }

/* gallery — swipeable rail with size options */
.gallery-rail { display: flex; align-items: flex-start; gap: 10px; overflow-x: auto; padding: 2px 2px 8px; margin: 0 -2px; scrollbar-width: none; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; }
.gallery-rail::-webkit-scrollbar { display: none; }
.gallery-ph, .gallery-cell { flex: 0 0 auto; scroll-snap-align: start; border-radius: 16px; overflow: hidden; }
.gallery-ph { background: var(--bg-3); border: 1px dashed var(--line-2); display: flex; align-items: center; justify-content: center; color: var(--fg-3); }
.gallery-cell { background: var(--bg-3); }
.gallery-cell img, .gallery-cell video { width: 100%; height: 100%; object-fit: cover; display: block; }
/* size variants — explicit width+height (NOT aspect-ratio in flex: iOS Safari mis-computes
   aspect-ratio when only width is set and stretches the cell to the rail height) */
.gs-small .gallery-ph, .gs-small .gallery-cell, .gs-small .gallery-add { width: 140px; height: 140px; aspect-ratio: auto; }
.gs-medium .gallery-ph, .gs-medium .gallery-cell, .gs-medium .gallery-add { width: 190px; height: 253px; aspect-ratio: auto; }
.gs-large .gallery-ph, .gs-large .gallery-cell, .gs-large .gallery-add { width: 264px; height: 330px; aspect-ratio: auto; }
/* gallery size picker (edit mode) */
.gallery-size-bar { display: flex; gap: 8px; margin: 12px 0 4px; }
.gallery-size-bar button { padding: 7px 14px; border-radius: 10px; font-size: 12.5px; font-weight: 700; background: var(--bg-3); color: var(--fg-2); border: 1px solid var(--line); }
.gallery-size-bar button.on { background: var(--fg); color: var(--bg); border-color: var(--fg); }
.gallery-add { flex: 0 0 auto; scroll-snap-align: start; border-radius: 16px; border: 1.5px dashed var(--line-2); background: var(--bg-3); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; color: var(--fg-3); font-size: 11px; font-weight: 600; cursor: pointer; }
.gallery-cell { position: relative; }
.gallery-cell .gc-x { position: absolute; top: 8px; right: 8px; z-index: 3; width: 24px; height: 24px; border-radius: 50%; background: rgba(0,0,0,0.6); backdrop-filter: blur(6px); color: #fff; border: 1px solid rgba(255,255,255,0.2); display: flex; align-items: center; justify-content: center; font-size: 12px; }

/* ===== EMBEDS (Spotify · YouTube · TikTok) ===== */
.embed-rail { display: flex; flex-direction: column; gap: 14px; }
.embed-card { position: relative; width: 100%; border-radius: 14px; overflow: hidden; background: var(--bg-2); }
.embed-spotify { background: transparent; }
.embed-facade { display: block; width: 100%; border: none; cursor: pointer; background: #0b0b0c; }
.embed-facade .embed-thumb { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.embed-facade .embed-shade { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,0.1), rgba(0,0,0,0.55)); }
.embed-facade .embed-play { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); width: 64px; height: 64px; border-radius: 50%; background: rgba(0,0,0,0.55); backdrop-filter: blur(8px); border: 1.5px solid rgba(255,255,255,0.4); color: #fff; display: flex; align-items: center; justify-content: center; }
.embed-facade .embed-badge { position: absolute; left: 12px; bottom: 12px; display: flex; align-items: center; gap: 8px; color: #fff; font-size: 13px; font-weight: 700; text-shadow: 0 1px 6px rgba(0,0,0,0.6); }
.embed-facade .embed-badge .eb-ic { display: inline-flex; }
.embed-facade.prov-tiktok { background: #000; }
.embed-live { background: #000; }

/* embed editor (edit mode) */
.embed-editor { display: flex; flex-direction: column; gap: 12px; }
.embed-add { display: flex; gap: 8px; align-items: center; }
.embed-add .input { flex: 1; }
.embed-add-btn { width: 46px; height: 46px; flex: none; border-radius: 12px; background: var(--bg-4); color: var(--fg-3); display: flex; align-items: center; justify-content: center; transition: background 0.15s, color 0.15s; }
.embed-add-btn.ready { background: var(--accent); color: var(--accent-ink); }
.embed-provrow { display: flex; gap: 8px; flex-wrap: wrap; }
.embed-prov-chip { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 700; color: var(--fg-3); background: var(--bg-3); border: 1px solid var(--line); padding: 5px 10px 5px 6px; border-radius: 999px; opacity: 0.6; }
.embed-prov-chip.on { opacity: 1; color: var(--fg); border-color: var(--line-2); }
.embed-err { font-size: 12.5px; color: #ff6b6b; font-weight: 600; }
.embed-empty { font-size: 12.5px; color: var(--fg-3); text-align: center; padding: 10px 0; }
.embed-list { display: flex; flex-direction: column; gap: 8px; }
.embed-li { display: flex; align-items: center; gap: 11px; background: var(--bg-3); border: 1px solid var(--line); border-radius: 12px; padding: 8px 10px; }
.embed-li-meta { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.3; }
.embed-li-meta b { font-size: 13px; text-transform: capitalize; }
.embed-li-meta span { font-size: 11px; color: var(--fg-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.embed-li-tools { display: flex; align-items: center; gap: 4px; flex: none; }
.embed-li-tools button { width: 28px; height: 28px; border-radius: 8px; background: var(--bg-4); color: var(--fg-2); font-size: 13px; display: flex; align-items: center; justify-content: center; }
.embed-li-tools button:disabled { opacity: 0.35; }
.embed-li-tools .eli-x { color: #ff6b6b; }

/* ===== merch: layout (carousel/stack/grid) × card shape (card/wide/row) ===== */
.merch-rail { display: flex; gap: 14px; padding: 2px 2px 10px; margin: 0 -2px; scrollbar-width: none; }
.merch-rail::-webkit-scrollbar { display: none; }
.merch-card { border-radius: 20px; overflow: hidden; }

/* shared bits */
.mc-media { position: relative; aspect-ratio: 1/1; overflow: hidden; }
.mc-media img, .mc-media video { width: 100%; height: 100%; object-fit: cover; }
.mc-tag { position: absolute; top: 12px; left: 12px; font-family: var(--mono); font-size: 9.5px; letter-spacing: 0.1em; text-transform: uppercase; color: #fff; background: rgba(0,0,0,0.4); backdrop-filter: blur(8px); padding: 5px 10px; border-radius: 999px; border: 1px solid rgba(255,255,255,0.18); }
.mc-info { padding: 14px 16px 16px; }
.mc-name { font-family: var(--display); font-weight: 700; font-size: 16px; letter-spacing: -0.01em; }
.mc-desc { font-size: 12px; color: var(--fg-3); margin-top: 3px; line-height: 1.4; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.mc-row { display: flex; align-items: center; justify-content: space-between; margin-top: 12px; }
.mc-price { font-family: var(--mono); font-size: 15px; font-weight: 500; }
.mc-buy { height: 36px; padding: 0 18px; border-radius: 999px; background: var(--fg); color: var(--bg); font-size: 13px; font-weight: 700; white-space: nowrap; }
.mc-badge { position: absolute; top: 12px; left: 12px; z-index: 3; font-family: var(--mono); font-size: 10px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: #fff; background: rgba(11,11,12,0.82); backdrop-filter: blur(8px); padding: 6px 11px; border-radius: 999px; border: 1px solid rgba(255,255,255,0.18); }
.mc-badge.sm { font-size: 9px; padding: 5px 9px; }

/* --- card shapes (appearance of each product) --- */
.merch-card.shape-card { background: var(--bg-2); border: 1px solid var(--line); }
.merch-card.shape-row { background: var(--bg-2); border: 1px solid var(--line); display: flex; align-items: stretch; }
.shape-row .mc-row-media { position: relative; flex: 0 0 38%; aspect-ratio: 1/1; overflow: hidden; background: #fff; }
.shape-row .mc-row-media img, .shape-row .mc-row-media video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.shape-row .mc-row-info { flex: 1; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 16px; }
.shape-row .mc-row-info .mc-name { font-size: 16px; }
.shape-row .mc-row-info .mc-desc { font-size: 11.5px; }
.shape-row .mc-row-info .mc-price { font-size: 14px; color: var(--fg-2); margin-top: 3px; }
.shape-row .mc-row-info .mc-buy { flex: none; }
.shape-wide { border: none; background: none; border-radius: 0; }
.shape-wide .mc-media.full { position: relative; aspect-ratio: 16/10; border-radius: 20px; overflow: hidden; display: flex; align-items: flex-end; }
.shape-wide .mc-media.full img, .shape-wide .mc-media.full video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.shape-wide .mc-media.full::after { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(180deg, rgba(0,0,0,0.05) 0%, transparent 35%, rgba(0,0,0,0.82) 100%); }
.mc-wide-foot { position: relative; z-index: 2; display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; padding: 16px; width: 100%; }
.mc-wide-foot .mc-name { color: #fff; font-size: 19px; text-shadow: 0 1px 12px rgba(0,0,0,0.7); }
.mc-wide-foot .mc-price { color: rgba(255,255,255,0.9); font-family: var(--mono); font-size: 14px; margin-top: 2px; text-shadow: 0 1px 10px rgba(0,0,0,0.7); }
.mc-add { flex: none; height: 38px; padding: 0 20px; border-radius: 999px; background: #fff; color: #0B0B0C; font-size: 14px; font-weight: 700; }

/* --- layout: CAROUSEL (horizontal swipe) --- */
.merch-rail.mr-carousel { overflow-x: auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; }
.merch-rail.mr-carousel.rotating { scroll-snap-type: none; }
.mr-carousel .merch-card { flex: 0 0 auto; scroll-snap-align: start; }
.mr-carousel > .merch-card.shape-card { width: 78%; max-width: 290px; }
.mr-carousel > .merch-card.shape-wide { width: 88%; max-width: 360px; }
.mr-carousel > .merch-card.shape-row { width: 90%; max-width: 380px; }
.mr-carousel > .merch-card.shape-poster { width: 66%; max-width: 250px; }

/* --- layout: STACK (full-width vertical) --- */
.merch-rail.mr-stack { flex-direction: column; overflow: visible; margin: 0; }
.mr-stack .merch-card { flex: none; width: 100%; max-width: 100%; }

/* --- layout: GRID (2-col, card shape only) --- */
.merch-rail.mr-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; overflow: visible; margin: 0; }
.mr-grid .merch-card { flex: none; width: 100%; max-width: none; }
.mr-grid .mc-info { padding: 12px 13px 14px; }
.mr-grid .mc-name { font-size: 14px; }
.mr-grid .mc-buy { height: 32px; padding: 0 14px; font-size: 12px; }

/* --- card shape: POSTER (tall 3:4, overlaid foot) --- */
.merch-card.shape-poster { border: none; background: none; border-radius: 0; }
.shape-poster .mc-media.poster { position: relative; aspect-ratio: 3/4; border-radius: 20px; overflow: hidden; display: flex; align-items: flex-end; }
.shape-poster .mc-media.poster img, .shape-poster .mc-media.poster video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.shape-poster .mc-media.poster::after { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(180deg, rgba(0,0,0,0.05) 0%, transparent 30%, rgba(0,0,0,0.85) 100%); }
.mc-poster-foot { position: relative; z-index: 2; padding: 16px; width: 100%; }
.mc-poster-foot .mc-name { color: #fff; font-size: 18px; text-shadow: 0 1px 12px rgba(0,0,0,0.7); }
.mc-poster-row { display: flex; align-items: center; justify-content: space-between; margin-top: 10px; }
.mc-poster-row .mc-price { color: rgba(255,255,255,0.92); font-family: var(--mono); font-size: 14px; text-shadow: 0 1px 10px rgba(0,0,0,0.7); }
.mr-carousel .merch-card.shape-poster .mc-media.poster,
.mr-grid .merch-card.shape-poster .mc-media.poster { aspect-ratio: 3/4; }
/* poster in stack: a touch shorter so it doesn't dominate */
.mr-stack .merch-card.shape-poster .mc-media.poster { aspect-ratio: 4/3; }

/* --- layout: SPOTLIGHT (hero + 2-col grid) --- */
.merch-spotlight { display: flex; flex-direction: column; gap: 12px; }
.merch-spotlight .merch-rail { padding: 0; margin: 0; }

/* product editor: display picker */
.pe-displays { display: grid; grid-template-columns: 1fr 1fr 1fr 1fr; gap: 8px; }
.pe-displays-4 { grid-template-columns: 1fr 1fr 1fr 1fr; }
.pe-disp { display: flex; flex-direction: column; align-items: center; gap: 7px; padding: 9px 6px; border-radius: 13px; background: var(--bg-2); border: 2px solid var(--line); transition: border-color 0.2s; }
.pe-disp.on { border-color: var(--accent); }
.pe-disp-prev { width: 100%; aspect-ratio: 1.15/1; border-radius: 7px; background: var(--bg-4); position: relative; overflow: hidden; display: flex; padding: 5px; gap: 3px; }
.pe-disp-prev .pdp-img { background: var(--fg-3); border-radius: 3px; }
.pe-disp-prev .pdp-bar { position: absolute; }
/* carousel: one portrait card + bar */
.pd-card { align-items: stretch; }
.pd-card .pdp-img { flex: 0 0 52%; }
.pd-card .pdp-bar { right: 5px; top: 7px; bottom: 7px; width: 30%; border-radius: 3px; background: var(--fg-3); opacity: 0.5; }
/* grid: 2x2 */
.pd-grid { flex-wrap: wrap; }
.pd-grid .pdp-img { flex: 0 0 calc(50% - 1.5px); height: calc(50% - 1.5px); }
/* stack: full landscape with bottom bar */
.pd-stack .pdp-img { flex: 1; }
.pd-stack .pdp-bar { left: 8px; bottom: 8px; width: 42%; height: 5px; border-radius: 3px; background: #fff; }
/* list: image left, bar right */
.pd-list .pdp-img { flex: 0 0 38%; }
.pd-list .pdp-bar { right: 7px; top: 50%; transform: translateY(-50%); width: 38%; height: 6px; border-radius: 3px; background: var(--fg-3); opacity: 0.6; }
/* poster: tall portrait with bottom bar */
.pd-poster .pdp-prev, .pe-disp-prev.pd-poster { aspect-ratio: 0.85/1; }
.pd-poster .pdp-img { flex: 1; }
.pd-poster .pdp-bar { left: 8px; bottom: 8px; width: 50%; height: 5px; border-radius: 3px; background: #fff; }
/* row aliases for renamed (strip) + classic/banner reuse card/wide */
.pe-disp-l { font-size: 11.5px; font-weight: 700; }

/* product editor live preview */
.pe-displayhint { display: flex; align-items: flex-start; gap: 10px; padding: 12px 14px; margin-bottom: 16px; border-radius: 14px; background: var(--bg-3); border: 1px solid var(--line); }
.pe-displayhint .pe-dh-ic { flex: none; width: 30px; height: 30px; border-radius: 9px; background: var(--bg-4); color: var(--accent); display: flex; align-items: center; justify-content: center; }
.pe-displayhint .pe-dh-tx { font-size: 12.5px; line-height: 1.45; color: var(--fg-2); }
.pe-displayhint .pe-dh-tx b { color: var(--fg); font-weight: 700; }
.pe-live { padding: 16px; border-radius: 16px; background: var(--bg-3); border: 1px solid var(--line); }
.pe-live .merch-rail { overflow: visible; }
.pe-live .merch-card { max-width: 100%; }

/* merch style switcher (edit mode) */
.merch-pick-label { font-size: 12px; font-weight: 700; color: var(--fg-2); margin: 8px 0 7px; }
.sec-order { margin: 22px 0 8px; padding-top: 18px; border-top: 1px solid var(--line); }
.edit-sec-block { cursor: default; transition: border-color 0.2s, transform 0.15s; }
.edit-sec-block.over { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 12px; }
.edit-sec-block.dragging { opacity: 0.55; }
.edit-sec-head .sec-grip { color: var(--fg-3); display: flex; flex: none; margin-right: 10px; cursor: grab; touch-action: none; -webkit-user-select: none; user-select: none; padding: 4px; margin-left: -4px; }
.edit-sec-head .sec-grip:active { cursor: grabbing; }
.sec-order-row { display: flex; align-items: center; gap: 10px; padding: 12px 14px; margin-bottom: 8px; border-radius: 14px; background: var(--bg-2); border: 1px solid var(--line); cursor: grab; transition: border-color 0.2s, transform 0.15s, opacity 0.2s; }
.sec-order-row:active { cursor: grabbing; }
.sec-order-row.over { border-color: var(--accent); transform: scale(1.01); }
.sec-order-row .so-grip { color: var(--fg-3); display: flex; flex: none; }
.sec-order-row .so-label { flex: 1; font-size: 14px; font-weight: 700; }
.sec-order-row .so-move { display: flex; gap: 4px; }
.sec-order-row .so-move button { width: 30px; height: 30px; border-radius: 9px; background: var(--bg-3); border: 1px solid var(--line); color: var(--fg-2); font-size: 14px; font-weight: 700; }
.sec-order-row .so-move button:active { background: var(--bg-4); }
.merch-pick-label .mpl-note { color: var(--fg-3); font-weight: 500; }
.merch-style-bar { display: flex; gap: 8px; margin: 0 0 12px; }
.merch-style-bar button { padding: 7px 16px; border-radius: 10px; font-size: 12.5px; font-weight: 700; background: var(--bg-3); color: var(--fg-2); border: 1px solid var(--line); }
.merch-style-bar button.on { background: var(--fg); color: var(--bg); border-color: var(--fg); }
.merch-style-bar.is-locked { opacity: 0.4; pointer-events: none; }
.merch-style-bar button:disabled { opacity: 0.5; }
.merch-edit-wrap { position: relative; flex: 0 0 auto; padding: 0; background: none; border: none; text-align: left; cursor: pointer; scroll-snap-align: start; }
.merch-rail.mr-carousel.shape-is-card .merch-edit-wrap { flex: 0 0 78%; max-width: 290px; }
.merch-rail.mr-carousel.shape-is-wide .merch-edit-wrap { flex: 0 0 88%; max-width: 360px; }
.merch-rail.mr-carousel.shape-is-row .merch-edit-wrap { flex: 0 0 90%; max-width: 380px; }
.merch-rail.mr-carousel.shape-is-poster .merch-edit-wrap { flex: 0 0 66%; max-width: 250px; }
.merch-rail.mr-grid .merch-edit-wrap { flex: none; width: 100%; }
.merch-rail.mr-stack .merch-edit-wrap { flex: none; width: 100%; }
.merch-rail.mr-grid { display: grid; grid-template-columns: 1fr 1fr; }
.merch-rail.mr-stack { flex-direction: column; }
.merch-edit-wrap .merch-card { width: 100%; max-width: 100%; }
.merch-edit-wrap .mc-edit-badge { position: absolute; top: 12px; right: 12px; z-index: 5; width: 28px; height: 28px; border-radius: 50%; background: rgba(0,0,0,0.6); backdrop-filter: blur(6px); color: #fff; display: flex; align-items: center; justify-content: center; border: 1px solid rgba(255,255,255,0.2); }
.esb-spotlight-wrap { display: flex; flex-direction: column; gap: 12px; }
.esb-spotlight-wrap .merch-spotlight { pointer-events: none; }
.merch-add-block { width: 100%; height: 54px; border-radius: 16px; flex-direction: row; gap: 8px; }

/* merch rotate toggle */
.merch-rotate { display: flex; align-items: center; gap: 10px; width: 100%; margin-top: 12px; padding: 13px 16px; border-radius: 14px; background: var(--bg-2); border: 1px solid var(--line); font-size: 14px; font-weight: 600; color: var(--fg); }
.merch-rotate svg { width: 18px; height: 18px; flex: none; color: var(--fg-2); }

/* hide/show pill on section headers */
.hide-pill { font-size: 12.5px; font-weight: 700; color: var(--danger); background: rgba(120,120,128,0.16); backdrop-filter: blur(18px) saturate(160%); -webkit-backdrop-filter: blur(18px) saturate(160%); border: 1px solid var(--line-2); padding: 6px 14px; border-radius: 999px; flex: none; transition: background 0.2s; }
.hide-pill:hover { background: rgba(120,120,128,0.26); }

/* alignment segmented control */
.align-seg { display: flex; gap: 4px; background: var(--bg-3); border-radius: 12px; padding: 4px; }
.edit-align.align-seg { padding: 3px; border-radius: 999px; gap: 2px; margin: 14px auto 0; }
.edit-align.align-seg button.on { background: var(--fg); color: var(--bg); border-radius: 999px; }
.align-seg button { flex: 1; height: 38px; border-radius: 9px; font-size: 13px; font-weight: 700; color: var(--fg-2); transition: background 0.25s, color 0.25s; }
.align-seg button.on { background: var(--fg); color: var(--bg); }

.link-row {
  display: flex; align-items: center; gap: 12px;
  background: var(--bg-2); border: 1px solid var(--line);  border-radius: 14px; padding: 12px 14px;
  transition: border-color 0.2s, box-shadow 0.2s, opacity 0.2s;
}
.link-row.dragging { opacity: 0.5; }
.link-row.drag-over { border-color: var(--accent); }
.link-row .grip { color: var(--fg-3); cursor: grab; display: flex; }
.link-row .grip:active { cursor: grabbing; }
.link-ico { width: 38px; height: 38px; border-radius: 10px; display: flex; align-items: center; justify-content: center; color: #fff; font-size: 16px; flex: none; }
.link-meta { flex: 1; min-width: 0; }
.link-meta .ln { font-size: 14px; font-weight: 700; }
.link-meta .lu { font-size: 12px; color: var(--fg-3); font-family: var(--mono); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.link-row .acts { display: flex; gap: 4px; }
.icon-btn { width: 32px; height: 32px; border-radius: 9px; display: flex; align-items: center; justify-content: center; color: var(--fg-3); transition: background 0.2s, color 0.2s; }
.icon-btn:hover { background: var(--bg-3); color: var(--fg); }
.icon-btn.danger:hover { color: var(--danger); }
.icon-btn svg { width: 16px; height: 16px; }
.switch { width: 38px; height: 22px; border-radius: 999px; background: var(--line-2); position: relative; transition: background 0.25s; flex: none; }
.switch::after { content: ""; position: absolute; top: 2px; left: 2px; width: 18px; height: 18px; border-radius: 50%; background: #fff; transition: transform 0.25s var(--ease-out); }
.switch.on { background: var(--ok); }
.switch.on::after { transform: translateX(16px); }

.add-link-bar {
  display: flex; gap: 10px; margin-bottom: 22px; flex-wrap: wrap;
}
.type-chip {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 9px 13px; border-radius: 11px;
  border: 1px solid var(--line); background: var(--bg-2);
  font-size: 13px; font-weight: 600;
  transition: border-color 0.2s, background 0.2s;
}
.type-chip:hover { border-color: var(--line-2); background: var(--bg-3); }
.type-chip .ti { width: 22px; height: 22px; border-radius: 6px; display: flex; align-items: center; justify-content: center; color: #fff; font-size: 12px; }
.type-chip .ti-brand { display: inline-flex; align-items: center; flex: none; }
.onb-link-inputs { display: flex; flex-direction: column; gap: 10px; margin-top: 18px; }
.onb-link-input { display: flex; align-items: center; gap: 11px; }
.onb-link-input .oli-ic { flex: none; }
.onb-link-input .oli-field { flex: 1; display: flex; align-items: center; height: 48px; border-radius: 13px; background: var(--bg-2); border: 1px solid var(--line); padding: 0 14px; }
.onb-link-input .oli-field:focus-within { border-color: var(--line-2); }
.onb-link-input .oli-at { color: var(--fg-3); font-size: 16px; margin-right: 2px; }
.onb-link-input .oli-field input { flex: 1; background: none; border: none; outline: none; color: var(--fg); font-size: 16px; }
.onb-link-input .oli-rm { flex: none; width: 34px; height: 34px; border-radius: 50%; background: var(--bg-3); color: var(--fg-3); display: flex; align-items: center; justify-content: center; }
.onb-link-input .oli-rm:active { background: var(--bg-4); }

/* cards grid in dash */
.dash-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 16px; }
.dash-card {
  border: 1px solid var(--line); border-radius: 16px; overflow: hidden;
  background: var(--bg-2); transition: border-color 0.2s, transform 0.3s var(--ease-out);
}
.dash-card:hover { transform: translateY(-3px); border-color: var(--line-2); }
.dash-card-img { aspect-ratio: 1.586/1; position: relative; background: #000; }
.dash-card-img img { width: 100%; height: 100%; object-fit: cover; }
.dash-card-info { padding: 14px 16px; }
.dash-card-info .dn { font-family: var(--display); font-weight: 700; font-size: 16px; }
.dash-card-info .ds { font-size: 11px; color: var(--fg-3); font-family: var(--mono); margin-top: 2px; text-transform: uppercase; letter-spacing: 0.06em; }
.dash-card .active-tag {
  position: absolute; top: 10px; left: 10px;
  background: var(--accent); color: var(--accent-ink);
  font-family: var(--mono); font-size: 9px; font-weight: 700;
  padding: 4px 9px; border-radius: 999px; letter-spacing: 0.08em;
}
.dash-card-info .card-cta { margin-top: 12px; }

/* stat cards */
.stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-bottom: 26px; }
.stat { border: 1px solid var(--line); border-radius: 16px; padding: 20px; background: var(--bg-2); }
.stat .sv { font-family: var(--display); font-weight: 800; font-size: 30px; letter-spacing: -0.02em; }
.stat .sl { font-size: 12px; color: var(--fg-3); margin-top: 2px; }
.stat .sd { font-size: 11px; margin-top: 8px; color: var(--ok); font-family: var(--mono); }
.bars { display: flex; align-items: flex-end; gap: 6px; height: 120px; margin-top: 18px; }
.bar { flex: 1; background: var(--bg-4); border-radius: 6px 6px 0 0; position: relative; transition: background 0.2s; min-height: 4px; }
.bar:hover { background: var(--accent); }
.panel { border: 1px solid var(--line); border-radius: 16px; padding: 22px; background: var(--bg-2); margin-bottom: 18px; }
.panel h3 { font-size: 15px; font-weight: 700; margin-bottom: 4px; }
.panel .ph { font-size: 12.5px; color: var(--fg-3); margin-bottom: 16px; }
.toprow { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--line); }
.toprow:last-child { border-bottom: 0; }
.toprow .tnum { font-family: var(--mono); font-size: 12px; color: var(--fg-3); width: 20px; }
.toprow .tname { font-size: 13px; font-weight: 600; flex: 1; }
.toprow .tval { font-family: var(--mono); font-size: 13px; }

/* modal */
.modal-bg {
  position: fixed; inset: 0; z-index: 1000;
  background: rgba(0,0,0,0.6); backdrop-filter: blur(6px);
  display: flex; align-items: center; justify-content: center;
  padding: 24px;
  animation: fadeIn 0.25s;
}
@keyframes fadeIn { from { opacity: 0; } }
.modal {
  background: var(--bg-2); border: 1px solid var(--line);
  border-radius: 20px; padding: 26px;
  width: 100%; max-width: 420px;
  animation: fadeUp 0.35s var(--ease-out);
}
.modal h3 { font-family: var(--display); font-weight: 800; font-size: 21px; letter-spacing: -0.02em; margin-bottom: 18px; }
.modal-close { position: absolute; }

.topbar-mobile { display: none; }

/* =========================================================
   MOBILE APP (profile-first, LinkMe-style) + LIQUID GLASS NAV
   ========================================================= */
.appwrap {
  min-height: 100vh;
  display: flex; align-items: center; justify-content: center;
  background:
    radial-gradient(60% 50% at 20% 0%, rgba(var(--brand-rgb),0.12), transparent 60%),
    radial-gradient(50% 40% at 90% 100%, rgba(var(--brand-rgb),0.07), transparent 60%),
    var(--bg);
  padding: 0;
}
/* phone frame on larger screens, full-bleed on mobile */
.appframe {
  position: relative;
  width: 100%;
  max-width: 440px;
  height: 100vh;
  height: 100dvh; /* dvh = visible viewport (excludes iOS Safari toolbar) so bottom-anchored nav/sheets/FAB clear it */
  max-height: 940px;
  background: var(--bg);
  overflow: hidden;
  display: flex; flex-direction: column;
  transition: background 0.4s var(--ease);
}
@media (min-width: 480px) {
  .appframe {
    height: 90vh;
    border-radius: 44px;
    box-shadow: 0 50px 120px -30px rgba(0,0,0,0.7), inset 0 0 0 1.5px rgba(255,255,255,0.06);
    border: 8px solid #050506;
  }
}
/* MOBILE: frame fills the visible viewport exactly — no vertical-centering gap (appwrap was
   100vh = large viewport, frame was 100dvh = smaller, so centering left a strip top+bottom). */
@media (max-width: 479px) {
  .appwrap { min-height: 100dvh; align-items: stretch; padding: 0; }
  .appframe { height: 100dvh; max-height: none; }
}
.appscroll {
  flex: 1; overflow-y: auto; overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.appscroll::-webkit-scrollbar { display: none; }

/* ---- own profile ---- */
.pf-cover {
  position: relative;
  width: 100%;
  min-height: 460px;
  display: flex; flex-direction: column;
  color: #fff;
}
.pf-cover-media { position: absolute; inset: 0; overflow: hidden; }
.pf-cover-media img, .pf-cover-media video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.pf-cover-media::before {
  content: ""; position: absolute; inset: 0;
  background:
    radial-gradient(70% 50% at 50% 10%, rgba(255,255,255,0.22), transparent 60%),
    radial-gradient(60% 40% at 85% 30%, rgba(255,255,255,0.12), transparent 60%);
  mix-blend-mode: screen;
}
.pf-cover-tint {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,0.28) 0%, transparent 26%, transparent 40%, rgba(0,0,0,0.55) 78%, rgba(0,0,0,0.92) 100%);
}
.pf-cover { padding-bottom: 6px; }
.pf-cover-foot { padding: 0 22px 26px; }
/* seamless bleed: cover dissolves into the exact body background colour.
   --bleed-to matches the body colour (overridden per profile theme below) so
   the last band is solid body colour — no hairline, fade doesn't creep higher. */
.pf-cover::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 180px;
  --bleed-to: var(--bg);
  background: linear-gradient(180deg, transparent 0%, color-mix(in srgb, var(--bleed-to) 50%, transparent) 50%, var(--bleed-to) 85%, var(--bleed-to) 100%);
  z-index: 1; pointer-events: none;
}

/* ---- Pro profile animations ---- */
.pf-cover-media.anim-aurora::after {
  content: ""; position: absolute; inset: -20%;
  background: radial-gradient(40% 40% at 30% 30%, rgba(255,255,255,0.5), transparent 70%), radial-gradient(40% 40% at 70% 60%, rgba(0,0,0,0.25), transparent 70%);
  mix-blend-mode: overlay; animation: aurora 8s ease-in-out infinite alternate;
}
@keyframes aurora { from { transform: translate(-8%, -6%) rotate(0deg); } to { transform: translate(8%, 6%) rotate(8deg); } }
.pf-cover-media.anim-shimmer::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(115deg, transparent 35%, rgba(255,255,255,0.35) 50%, transparent 65%);
  animation: shimmer 3.5s linear infinite;
}
@keyframes shimmer { from { transform: translateX(-120%); } to { transform: translateX(120%); } }
.pf-cover-media.anim-pulse { animation: pulse 4s ease-in-out infinite; }
@keyframes pulse { 0%,100% { filter: brightness(1) saturate(1); } 50% { filter: brightness(1.18) saturate(1.3); } }
.pf-cover-media.anim-grain::after {
  content: ""; position: absolute; inset: 0; opacity: 0.5;
  background-image: radial-gradient(rgba(255,255,255,0.12) 1px, transparent 1px); background-size: 3px 3px;
  animation: grain 0.6s steps(2) infinite; mix-blend-mode: overlay;
}
@keyframes grain { 0% { transform: translate(0,0); } 50% { transform: translate(-2px,1px); } 100% { transform: translate(1px,-2px); } }
/* Glow — a soft brand light breathes from the centre */
.pf-cover-media.anim-glow::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(60% 60% at 50% 45%, rgba(var(--brand-rgb), 0.45), transparent 70%);
  mix-blend-mode: screen; animation: coverGlow 4.5s ease-in-out infinite;
}
@keyframes coverGlow { 0%, 100% { opacity: 0.35; transform: scale(1); } 50% { opacity: 0.9; transform: scale(1.08); } }
/* Float — the whole cover drifts gently */
.pf-cover-media.anim-float { animation: coverFloat 6s ease-in-out infinite; }
@keyframes coverFloat { 0%, 100% { transform: translateY(0) scale(1.02); } 50% { transform: translateY(-3%) scale(1.05); } }
/* Sheen — a slow metallic light rakes diagonally across */
.pf-cover-media.anim-sheen::after {
  content: ""; position: absolute; inset: -40%;
  background: linear-gradient(135deg, transparent 42%, rgba(255,255,255,0.5) 50%, transparent 58%);
  animation: coverSheen 5s ease-in-out infinite;
}
@keyframes coverSheen { 0% { transform: translate(-60%, -60%); } 55%, 100% { transform: translate(60%, 60%); } }
.pf-topbar {
  position: relative; z-index: 3;
  display: flex; align-items: center; justify-content: space-between;
  padding: calc(16px + env(safe-area-inset-top)) 16px 0;
}
.tappt-link-pill .tlp-logo { height: 13px; width: auto; transform: translateY(0.5px); }
.glass-pill {
  display: inline-flex; align-items: center; gap: 7px;
  height: 38px; padding: 0 15px;
  border-radius: 999px;
  background: rgba(255,255,255,0.13);
  backdrop-filter: blur(16px) saturate(160%);
  -webkit-backdrop-filter: blur(16px) saturate(160%);
  border: 1px solid rgba(255,255,255,0.18);
  color: #fff; font-size: 13px; font-weight: 700;
  box-shadow: 0 4px 16px -4px rgba(0,0,0,0.4), inset 0 1px 0 rgba(255,255,255,0.25);
  transition: transform 0.2s var(--ease-out), background 0.2s;
}
.glass-pill:active { transform: scale(0.95); }
.glass-pill svg { width: 15px; height: 15px; }
.pf-title { font-size: 14px; font-weight: 700; color: rgba(255,255,255,0.9); text-shadow: 0 1px 8px rgba(0,0,0,0.5); }
.pf-cover-foot {
  position: relative; z-index: 2;
  margin-top: auto;
  padding: 0 22px 22px;
  text-align: center;
}
.pf-name { font-family: var(--display); font-weight: 800; font-size: 27px; letter-spacing: -0.03em; line-height: 1; text-shadow: 0 2px 20px rgba(0,0,0,0.5); }
.pf-cover-foot:not(.align-left) .pf-name.has-seal { padding-left: 30px; }
.pf-handle { font-size: 14px; color: rgba(255,255,255,0.7); margin-top: 3px; }
.pf-company { font-size: 13px; font-weight: 600; color: rgba(255,255,255,0.82); margin-top: 5px; letter-spacing: 0.01em; }
/* left-aligned profile layout */
.pf-cover-foot.align-left { text-align: left; }
.pf-cover-foot.align-left .pf-socials { justify-content: flex-start; }
.pf-cover-foot.align-left .persona-chip { margin-left: 0; }
.pf-socials { display: flex; gap: 10px; justify-content: center; margin-top: 11px; }
.pf-social {
  width: 44px; height: 44px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 19px; color: #fff;
  box-shadow: 0 6px 18px -4px rgba(0,0,0,0.5);
  transition: transform 0.2s var(--ease-out);
}
/* rotating socials marquee (LinkMe-style) */
.pf-socials.rotate { flex-wrap: nowrap; overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 7%, #000 93%, transparent 100%); mask-image: linear-gradient(90deg, transparent 0%, #000 7%, #000 93%, transparent 100%); justify-content: flex-start; width: calc(100% + 44px); margin-left: -22px; margin-right: -22px; margin-top: 14px; }
.pf-socials.rotate .pf-soc-track { display: flex; flex: 0 0 auto; animation: socMarquee 18s linear infinite; will-change: transform; }
.pf-socials.rotate .pf-social { margin-right: 10px; box-shadow: none; }
.pf-socials.rotate:active .pf-soc-track, .pf-socials.rotate:hover .pf-soc-track { animation-play-state: paused; }
@keyframes socMarquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.pf-social:active { transform: scale(0.9); }
.pf-social.add { background: linear-gradient(135deg,#f58529,#dd2a7b 60%,#515bd4); }
.pf-followers {
  display: inline-flex; align-items: center; gap: 8px;
  margin-top: 18px;
  font-size: 16px; font-weight: 600; color: rgba(255,255,255,0.85);
}
.pf-followers b { color: #fff; }
.pf-followers svg { width: 16px; height: 16px; opacity: 0.7; }

.pf-body { background: var(--bg); color: var(--fg); padding: 22px 18px 130px; position: relative; z-index: 2; margin-top: -1px; transition: background 0.4s var(--ease), color 0.4s var(--ease); }
.pf-bio { font-size: 16px; line-height: 1.5; font-weight: 600; text-align: center; max-width: 38ch; margin: 0 auto 22px; }
.pf-bio .more { color: var(--fg-3); }

/* email connect bar */
.pf-connect {
  display: flex; align-items: center; gap: 8px;
  background: #fff; border-radius: 999px; padding: 6px 6px 6px 20px;
  margin-bottom: 26px;
}
.pf-connect input { flex: 1; border: 0; background: transparent; color: #0B0B0C; font-size: 15px; outline: none; }
.pf-connect input::placeholder { color: #3a7bd5; }
.pf-connect button {
  display: inline-flex; align-items: center; gap: 8px;
  background: #6b6b70; color: #fff; height: 46px; padding: 0 16px;
  border-radius: 999px; font-size: 14px; font-weight: 700; white-space: nowrap;
}
.pf-connect button .av { width: 30px; height: 30px; border-radius: 50%; object-fit: cover; }

/* featured links cards */
.pf-section { margin-bottom: 22px; padding-top: 18px; border-top: 1px solid var(--line); }
.pf-section:first-child { border-top: none; padding-top: 4px; }
/* tighten the bio to the cover when it's the top section */
.pf-body > .pf-bio-section:first-child { padding-top: 0; margin-top: -10px; }
.pf-section-h { font-family: var(--display); font-size: 15px; font-weight: 800; color: var(--fg); text-transform: none; letter-spacing: -0.01em; margin-bottom: 14px; }
.pf-feature {
  position: relative;
  border-radius: 18px;
  background: var(--bg-2);
  border: 1px solid var(--line);
  margin-bottom: 12px;
  padding: 11px 11px 3px;
  display: flex; flex-direction: column;
}
/* no-image featured = solid brand card, title centred */
.pf-feature:not(.has-media) { padding: 0; border: none; min-height: 88px; align-items: stretch; }
.pf-feature:not(.has-media) .pf-feat-foot { flex: 1; justify-content: center; padding: 20px; }
.pf-feature:not(.has-media) .ttl { color: #fff; font-size: 17px; }
/* inset media area (Linktree-style — leaves room around the image) */
.pf-feat-media { position: relative; border-radius: 12px; overflow: hidden; aspect-ratio: 1.6/1; background: #141c28; }
.pf-feature.has-media[style*="3.2/1"] .pf-feat-media,
.pf-feat-media[style*="3.2/1"] { aspect-ratio: 3.2/1; }
.pf-feature img, .pf-feature video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.pf-feat-foot { display: flex; align-items: center; justify-content: center; gap: 8px; padding: 11px 14px 8px; text-align: center; }
.pf-feat-foot .pf-feat-ic { display: flex; flex: none; }
.pf-feature .ttl { position: relative; z-index: 2; font-family: var(--display); font-weight: 700; font-size: 15.5px; color: var(--fg); text-align: center; overflow-wrap: anywhere; }
.pf-feature .corner { position: absolute; top: 10px; right: 10px; z-index: 3; display: flex; align-items: center; justify-content: center; }
.pf-feature .corner > span, .pf-grid-card .corner > span { box-shadow: 0 2px 10px rgba(0,0,0,0.35), inset 0 1px 0 rgba(255,255,255,0.18); }

/* media upload drop (add-link sheet) */
.media-drop { display: flex; align-items: center; justify-content: center; width: 100%; aspect-ratio: 1.5/1; border-radius: 14px; border: 1.5px dashed var(--line-2); background: var(--bg-3); cursor: pointer; overflow: hidden; position: relative; }
.media-drop-empty { display: flex; align-items: center; gap: 8px; color: var(--fg-3); font-size: 14px; font-weight: 600; }
.media-drop-prev { width: 100%; height: 100%; object-fit: cover; border-radius: 14px; }

/* link rows (in-bio) on profile */
.pf-link {
  display: flex; align-items: center; gap: 13px;
  background: var(--bg-2); color: var(--fg);
  border: 1px solid var(--line);
  border-radius: 15px; padding: 14px 16px;
  margin-bottom: 11px; font-weight: 700; font-size: 15px;
  box-shadow: 0 6px 18px -12px rgba(0,0,0,0.6);
  transition: transform 0.15s;
}
.pf-link:active { transform: scale(0.98); }
.pf-link .li { width: 30px; height: 30px; border-radius: 8px; display: flex; align-items: center; justify-content: center; color: #fff; font-size: 15px; flex: none; }
.pf-link .la { margin-left: auto; opacity: 0.35; }

/* ===== profile BUTTON STYLE (Solid / Glass / Outline) — free in Design panel =====
   Text colour is derived from the profile theme tokens, so it stays readable automatically. */
.appscroll.btnst-glass .pf-link, .appscroll.btnst-glass .pf-feature.has-media {
  background: color-mix(in srgb, var(--fg) 9%, transparent);
  -webkit-backdrop-filter: blur(14px) saturate(160%); backdrop-filter: blur(14px) saturate(160%);
  border: 1px solid color-mix(in srgb, var(--fg) 18%, transparent); color: var(--fg);
  box-shadow: inset 0 1px 0 color-mix(in srgb, var(--fg) 16%, transparent);
}
.appscroll.btnst-outline .pf-link, .appscroll.btnst-outline .pf-feature.has-media {
  background: transparent; border: 1.5px solid color-mix(in srgb, var(--fg) 42%, transparent);
  color: var(--fg); box-shadow: none;
}
/* Solid (default) keeps the base .pf-link card look — already opaque + readable. */

/* ===== profile BUTTON CORNER ROUNDNESS — free. Drives a --card-r variable so EVERY card on
   the profile (links, featured, grid, products, gallery, moments) + inner images share it. */
.appscroll { --card-r: 17px; --card-r-inner: 11px; }
.appscroll.brad-sharp { --card-r: 6px; --card-r-inner: 3px; }
.appscroll.brad-md { --card-r: 17px; --card-r-inner: 11px; }
.appscroll.brad-round { --card-r: 24px; --card-r-inner: 17px; }
.appscroll.brad-pill { --card-r: 30px; --card-r-inner: 20px; }
.appscroll .pf-link, .appscroll .pf-feature, .appscroll .pf-grid-card,
.appscroll .merch-card, .appscroll .gallery-cell, .appscroll .gallery-ph, .appscroll .mc-card { border-radius: var(--card-r); }
.appscroll.brad-pill .pf-link { border-radius: 999px; }
.appscroll .pf-feat-media, .appscroll .pf-link-thumb { border-radius: var(--card-r-inner); }

/* ---- liquid glass bottom nav ---- */
.glass-nav {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 50;
  height: calc(84px + env(safe-area-inset-bottom));
  padding: 0 14px calc(12px + env(safe-area-inset-bottom));
  display: flex; align-items: center; justify-content: space-around;
  background: none;
  pointer-events: none;
}
/* hide nav whenever a bottom sheet / modal is open */
.appframe:has(.sheet-bg) .glass-nav,
.appframe:has(.radial-scrim) .glass-nav { display: none; }
.glass-nav-inner {
  pointer-events: auto;
  position: relative;
  flex: 1; max-width: 380px; margin: 0 auto;
  height: 62px;
  display: flex; align-items: center; justify-content: space-around;
  background: rgba(28,28,32,0.55);
  backdrop-filter: blur(24px) saturate(180%);
  -webkit-backdrop-filter: blur(24px) saturate(180%);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 26px;
  box-shadow: 0 12px 40px -8px rgba(0,0,0,0.5), inset 0 1px 0 rgba(255,255,255,0.18), inset 0 -1px 0 rgba(0,0,0,0.2);
  overflow: hidden;
}
/* the morphing liquid-glass highlight */
.glass-blob {
  position: absolute; top: 6px; bottom: 6px;
  width: 50px; border-radius: 18px;
  background: rgba(255,255,255,0.16);
  border: 1px solid rgba(255,255,255,0.22);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.3), 0 4px 14px -4px rgba(0,0,0,0.4);
  transition: left 0.45s cubic-bezier(.5,1.4,.4,1), width 0.45s cubic-bezier(.5,1.4,.4,1);
  z-index: 0;
}
.glass-item {
  position: relative; z-index: 1;
  flex: 1;
  display: flex; align-items: center; justify-content: center;
  color: rgba(255,255,255,0.55);
  height: 100%;
  transition: color 0.3s, transform 0.2s var(--ease-out);
}
.glass-item.on { color: #fff; }
.glass-item:active { transform: scale(0.88); }
.glass-item svg { width: 23px; height: 23px; }
.glass-item.create {
  flex: 0 0 auto; width: 54px; height: 44px; margin: 0 2px;
  background: linear-gradient(180deg, #6B8299 0%, #4D6980 100%); color: #fff; border-radius: 16px;
  box-shadow: 0 6px 18px -4px rgba(0,0,0,0.5);
}
.glass-item.create svg { width: 24px; height: 24px; }
.glass-item .nav-av { width: 26px; height: 26px; border-radius: 50%; overflow: hidden; display: flex; align-items: center; justify-content: center; }
.glass-item .nav-av img, .glass-item .nav-av video { width: 100%; height: 100%; object-fit: cover; }

/* ---- radial create menu ---- */
.radial-scrim { position: absolute; inset: 0; z-index: 80; background: rgba(8,8,10,0.55); backdrop-filter: blur(3px); animation: fadeIn 0.2s; }
.radial-anchor { position: absolute; left: 50%; bottom: 46px; transform: translateX(-50%); width: 0; height: 0; }
.radial-item { position: absolute; left: -27px; top: -27px; width: 54px; height: 54px; display: flex; flex-direction: column; align-items: center; gap: 3px; transition: transform 0.42s cubic-bezier(.34,1.56,.5,1), opacity 0.3s; }
.radial-item .ri-ic { width: 52px; height: 52px; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: #fff; background: rgba(40,40,46,0.45); backdrop-filter: blur(18px) saturate(150%); -webkit-backdrop-filter: blur(18px) saturate(150%); border: 1px solid rgba(255,255,255,0.18); box-shadow: 0 10px 26px -8px rgba(0,0,0,0.55), inset 0 1px 0 rgba(255,255,255,0.22); }
.radial-item .ri-ic svg { width: 24px; height: 24px; }
.radial-item .ri-lb { font-size: 10px; font-weight: 700; color: #fff; text-shadow: 0 1px 6px rgba(0,0,0,0.7); position: absolute; bottom: -15px; white-space: nowrap; }
.radial-item:active { filter: brightness(1.1); }
.radial-fab { position: absolute; left: -28px; top: -28px; width: 56px; height: 56px; border-radius: 50%; background: linear-gradient(180deg, #6B8299 0%, #4D6980 100%); color: #fff; display: flex; align-items: center; justify-content: center; box-shadow: 0 10px 28px -6px rgba(0,0,0,0.6); transition: transform 0.35s cubic-bezier(.34,1.56,.5,1); }
.radial-fab.open { transform: rotate(135deg); }
.radial-logo { position: absolute; left: -60px; bottom: 64px; z-index: 6; width: 120px; display: flex; justify-content: center; opacity: 0; transition: opacity 0.3s ease; transition-delay: 0.18s; pointer-events: none; }
.radial-logo.open { opacity: 1; }
.radial-logo img { height: 24px; width: 88px; object-fit: contain; display: block; filter: drop-shadow(0 2px 10px rgba(0,0,0,0.55)); }
.radial-logo .rl-light { display: none; }
[data-theme="light"] .radial-logo .rl-dark { display: none; }
[data-theme="light"] .radial-logo .rl-light { display: block; }

/* ---- generic mobile screen (feed/search/earnings/create) ---- */
.screen { padding: 18px 18px 120px; color: var(--fg); }
.screen-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 22px; padding-top: 8px; }
.screen-top .st-logo { display: flex; align-items: center; gap: 10px; }
.screen-top .st-logo img { height: 22px; }
.screen-top .st-logo .free { font-family: var(--mono); font-size: 9px; background: var(--bg-4); padding: 3px 8px; border-radius: 999px; color: var(--fg-2); }
.screen-h { font-family: var(--display); font-weight: 800; font-size: 30px; letter-spacing: -0.03em; text-align: center; }
.screen-sub { text-align: center; color: var(--fg-3); font-size: 14px; margin-top: 4px; margin-bottom: 26px; }

.feed-card { border: 1px solid var(--line); border-radius: 18px; overflow: hidden; margin-bottom: 16px; background: var(--bg-2); }
/* run-once blur-fade entrance (React owns the .mc-enter class; pure CSS so it
   can never strand content invisible). Hidden start gated on motion-allowed. */
@media (prefers-reduced-motion: no-preference) {
  .feed-card.mc-enter { opacity: 0; animation: mcEnter .6s cubic-bezier(.22,.61,.36,1) var(--bf-delay, 0s) both; }
}
@keyframes mcEnter {
  from { opacity: 0; transform: translateY(9px); filter: blur(6px); }
  to { opacity: 1; transform: none; filter: none; }
}
.feed-head { display: flex; align-items: center; gap: 11px; padding: 14px; }
.feed-av { width: 38px; height: 38px; border-radius: 50%; flex: none; }
.feed-name { font-weight: 800; font-size: 14px; display: flex; align-items: center; gap: 5px; }
.feed-name .vf { width: 14px; height: 14px; border-radius: 50%; background: var(--brand); color: #fff; display: inline-flex; align-items: center; justify-content: center; font-size: 8px; }
.feed-handle { font-size: 12px; color: var(--fg-3); }
.feed-cap { padding: 0 14px 12px; font-size: 14px; }
.feed-media { aspect-ratio: 1/1; background: linear-gradient(135deg,#2a2a30,#0e0e12); position: relative; }
.feed-media img { width: 100%; height: 100%; object-fit: cover; }
img.feed-media, video.feed-media { width: 100%; aspect-ratio: 1/1; object-fit: cover; display: block; }
.feed-actions { display: flex; align-items: center; gap: 18px; padding: 12px 14px; font-size: 13px; color: var(--fg-2); font-weight: 600; }
.feed-actions span { display: flex; align-items: center; gap: 6px; }
.fa-btn { display: flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 600; color: var(--fg-2); transition: color 0.15s var(--ease), transform 0.12s var(--ease); }
.fa-btn:active { transform: scale(0.92); }
.fa-btn.liked { color: #ff4d6d; }
.fa-btn.liked svg { fill: #ff4d6d; }

/* post ⋯ menu (edit / delete) */
.feed-menu-wrap { position: relative; flex: none; }
.feed-menu-veil { position: fixed; inset: 0; z-index: 40; }
.feed-menu { position: absolute; top: 36px; right: 0; z-index: 41; background: var(--bg-2); border: 1px solid var(--line-2); border-radius: 14px; box-shadow: 0 14px 40px -12px rgba(0,0,0,0.6); padding: 6px; min-width: 142px; display: flex; flex-direction: column; }
.feed-menu button { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 9px; font-size: 13.5px; font-weight: 600; color: var(--fg); text-align: left; }
.feed-menu button:active { background: var(--bg-3); }
.feed-menu .fm-del { color: #ff5a5a; }

/* inline edit of a moment */
.feed-edit { padding: 0 14px 12px; }
.feed-edit-input { width: 100%; background: var(--bg-3); border: 1px solid var(--line); border-radius: 12px; padding: 11px 13px; color: var(--fg); font-family: inherit; font-size: 14px; line-height: 1.45; resize: vertical; outline: none; }
.feed-edit-input:focus { border-color: var(--accent); }
.feed-edit-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 9px; }
.feed-edit-actions button { height: 36px; padding: 0 16px; border-radius: 10px; font-size: 13px; font-weight: 700; }
.fe-cancel { background: var(--bg-3); color: var(--fg-2); border: 1px solid var(--line); }
.fe-save { background: var(--accent); color: var(--accent-ink); }

/* comments */
.cm-wrap { border-top: 1px solid var(--line); padding: 12px 14px 14px; display: flex; flex-direction: column; gap: 13px; }
.cm-empty { font-size: 12.5px; color: var(--fg-3); text-align: center; padding: 4px 0; }
.cm-row { display: flex; gap: 10px; }
.cm-av { width: 30px; height: 30px; border-radius: 50%; flex: none; display: flex; align-items: center; justify-content: center; color: #fff; font-size: 12px; font-weight: 800; font-family: var(--display); overflow: hidden; }
.cm-av img, .cm-av video { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }
.cm-av-anon { width: 100%; height: 100%; border-radius: 50%; background: var(--bg-4); color: var(--fg-3); display: flex; align-items: center; justify-content: center; }
.cm-body { flex: 1; min-width: 0; }
.cm-meta { font-size: 13px; display: flex; align-items: baseline; gap: 7px; }
.cm-meta b { font-weight: 700; }
.cm-when { font-size: 11px; color: var(--fg-3); }
.cm-text { font-size: 13.5px; color: var(--fg-2); line-height: 1.4; margin-top: 1px; word-break: break-word; }
.cm-acts { display: flex; align-items: center; gap: 16px; margin-top: 5px; }
.cm-like { display: flex; align-items: center; gap: 4px; font-size: 12px; font-weight: 700; color: var(--fg-3); }
.cm-like.on { color: #ff4d6d; }
.cm-like.on svg { fill: #ff4d6d; }
.cm-replybtn { font-size: 12px; font-weight: 700; color: var(--fg-3); }
.cm-replybtn:active, .cm-like:active { opacity: 0.6; }
.cm-thread { display: flex; flex-direction: column; gap: 11px; }
.cm-replies { display: flex; flex-direction: column; gap: 11px; padding-left: 40px; }
.cm-row-sm .cm-av { width: 26px; height: 26px; font-size: 11px; }
.cm-reply-compose { padding-left: 40px; }
.cm-compose { display: flex; align-items: center; gap: 9px; margin-top: 2px; }
.cm-av-me { width: 30px; height: 30px; }
.cm-input { flex: 1; height: 38px; background: var(--bg-3); border: 1px solid var(--line); border-radius: 999px; padding: 0 14px; color: var(--fg); font-size: 16px; outline: none; }
.cm-input:focus { border-color: var(--line-2); }
.cm-send { width: 38px; height: 38px; border-radius: 50%; flex: none; display: flex; align-items: center; justify-content: center; background: var(--bg-3); color: var(--fg-3); transition: background 0.15s var(--ease), color 0.15s var(--ease); }
.cm-send.ready { background: var(--accent); color: var(--accent-ink); }

/* branded auth gate popup */
.sheet-bg.authgate-bg { position: fixed; inset: 0; z-index: 200; align-items: center; justify-content: center; }
.authgate { position: relative; width: min(360px, 90vw); background: var(--bg-2); border: 1px solid var(--line-2); border-radius: 26px; padding: 34px 26px 26px; text-align: center; box-shadow: 0 30px 80px -20px rgba(0,0,0,0.7); }
.authgate-x { position: absolute; top: 14px; right: 14px; width: 32px; height: 32px; border-radius: 50%; background: var(--bg-3); color: var(--fg-2); display: flex; align-items: center; justify-content: center; }
.authgate-logo { height: 30px; margin-bottom: 20px; display: flex; justify-content: center; }
.authgate-logo .ag-logo { height: 30px; width: auto; }
.authgate-logo .ag-logo.light-logo { display: none; }
[data-theme="light"] .authgate-logo .ag-logo.dark-logo { display: none; }
[data-theme="light"] .authgate-logo .ag-logo.light-logo { display: block; }
.authgate-t { font-family: var(--display); font-weight: 800; font-size: 22px; letter-spacing: -0.02em; margin-bottom: 8px; }
.authgate-s { font-size: 14px; color: var(--fg-2); line-height: 1.5; margin-bottom: 22px; max-width: 30ch; margin-left: auto; margin-right: auto; }
.authgate-cta { display: block; height: 50px; line-height: 50px; border-radius: 14px; background: var(--accent); color: var(--accent-ink); font-size: 15px; font-weight: 800; text-decoration: none; }
.authgate-cta:active { transform: scale(0.98); }
.authgate-alt { display: block; margin-top: 12px; font-size: 13.5px; font-weight: 600; color: var(--fg-3); text-decoration: none; }

/* ---- Moments composer (What's happening?) ---- */
.mc-card { background: var(--bg-2); border: 1px solid var(--line); border-radius: 22px; padding: 16px 16px 12px; margin-bottom: 22px; }
.mc-top { display: flex; align-items: flex-start; gap: 12px; }
.mc-input { flex: 1; background: transparent; border: none; outline: none; resize: none; color: var(--fg); font-family: inherit; font-size: 17px; line-height: 1.4; padding: 9px 0 0; min-height: 42px; max-height: 220px; overflow-y: auto; }
.mc-input::placeholder { color: var(--fg-3); }
.mc-post { width: 52px; height: 52px; border-radius: 50%; flex: none; display: flex; align-items: center; justify-content: center; color: #0B0B0C; background: linear-gradient(135deg, var(--brand), var(--brand-2)); opacity: 0.45; transition: opacity 0.2s var(--ease), transform 0.15s var(--ease); }
.mc-post { width: 60px; height: 60px; border-radius: 50%; flex: none; display: flex; align-items: center; justify-content: center; color: #fff; background: linear-gradient(180deg, #6B8299 0%, #4D6980 100%); opacity: 0.55; box-shadow: none;a(138,255,107,0.5); transition: opacity .2s, transform .15s; }
.mc-post.ready { opacity: 1; }
.mc-post.ready:active { transform: scale(0.92); }
.moments-fab { position: absolute; right: 18px; bottom: calc(96px + env(safe-area-inset-bottom)); z-index: 55; width: 60px; height: 60px; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: #fff; background: linear-gradient(180deg, #6B8299 0%, #4D6980 100%); box-shadow: none; }
.moments-fab:active { transform: scale(0.92); }
.moments-rowwrap { display: flex; flex-direction: column; }
/* new-moment compose sheet */
.new-moment-sheet { background: var(--bg-2); border-top: 1px solid var(--line-2); }
.new-moment-sheet .nm-head { text-align: center; padding: 24px 22px 6px; }
.new-moment-sheet .nm-head .ex-h { font-size: 22px; }
.new-moment-sheet .nm-body { padding: 18px 18px calc(26px + env(safe-area-inset-bottom)); }
.new-moment-sheet .mc-card { background: var(--bg-3); border: 1px solid var(--line); }
.new-moment-sheet .ex-notnow { display: block; margin: 18px auto 0; }
/* card activate + pairing */
.ds-activate { width: 100%; height: 46px; border-radius: 13px; display: flex; align-items: center; justify-content: center; gap: 8px; font-size: 14.5px; font-weight: 800; background: var(--accent); color: var(--accent-ink); }
.ds-activate.done { background: var(--bg-3); color: var(--fg); border: 1px solid var(--line); }
.ds-activate:active { transform: scale(0.99); }
.pair-sheet { text-align: center; padding-bottom: calc(28px + env(safe-area-inset-bottom)); }
.pair-card-vis { position: relative; width: 168px; height: 104px; margin: 8px auto 20px; border-radius: 14px; overflow: visible; background: linear-gradient(145deg, var(--bg-3), var(--bg-4)); border: 1px solid var(--line-2); display: flex; align-items: center; justify-content: center; }
.pair-card-vis.paired { border-color: color-mix(in srgb, var(--ok) 45%, transparent); }
.pair-card-img { width: 100%; height: 100%; object-fit: cover; border-radius: 13px; }
.pair-nfc { position: absolute; top: 10px; left: 12px; color: var(--fg-2); }
.pair-logo { display: inline-flex; align-items: center; gap: 5px; font-family: var(--display); font-weight: 800; font-size: 15px; }
.pair-badge { position: absolute; top: -11px; left: 50%; transform: translateX(-50%); white-space: nowrap; display: inline-flex; align-items: center; gap: 5px; font-size: 10.5px; font-weight: 800; color: var(--ok); background: color-mix(in srgb, var(--ok) 18%, var(--bg)); border: 1px solid color-mix(in srgb, var(--ok) 40%, transparent); padding: 4px 11px; border-radius: 999px; }
.pair-h { font-family: var(--display); font-weight: 800; font-size: 23px; margin-bottom: 8px; }
.pair-sub { font-size: 13.5px; color: var(--fg-3); line-height: 1.5; max-width: 28ch; margin: 0 auto 14px; }
.pair-url { display: inline-block; font-family: var(--mono); font-size: 12.5px; color: var(--fg-3); background: var(--bg-3); border: 1px solid var(--line); padding: 7px 14px; border-radius: 999px; margin-bottom: 18px; }
.pair-url b { color: var(--accent); }
.pair-persona { margin-bottom: 18px; }
.pair-persona-l { font-size: 11px; font-weight: 800; letter-spacing: 0.04em; text-transform: uppercase; color: var(--fg-3); margin-bottom: 9px; }
.pair-persona-row { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }
.pair-persona-chip { padding: 8px 15px; border-radius: 999px; font-size: 13px; font-weight: 700; background: var(--bg-3); color: var(--fg-2); border: 1px solid var(--line); }
.pair-persona-chip.on { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); }
/* My Cards manager */
.mycard-row { display: flex; align-items: center; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--line); position: relative; }
.mycard-art { width: 54px; height: 36px; border-radius: 8px; overflow: hidden; flex: none; display: flex; align-items: center; justify-content: center; color: #fff; }
.mycard-art img { width: 100%; height: 100%; object-fit: cover; }
.mycard-meta { flex: 1; min-width: 0; }
.mycard-name { font-size: 14.5px; font-weight: 700; }
.mycard-code { font-family: var(--mono); font-size: 11px; color: var(--fg-3); margin-top: 2px; }
.mycard-persona-wrap { position: relative; flex: none; display: flex; flex-direction: column; align-items: flex-end; gap: 3px; }
.mycard-opens { font-size: 10px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--fg-3); }
.mycard-persona { display: inline-flex; align-items: center; gap: 5px; padding: 8px 12px; border-radius: 999px; background: var(--bg-3); border: 1px solid var(--line); color: var(--fg); font-size: 12.5px; font-weight: 700; }
.mycard-veil { position: fixed; inset: 0; z-index: 10; }
.mycard-menu { position: absolute; top: 100%; right: 0; z-index: 11; margin-top: 5px; min-width: 168px; background: var(--bg-2); border: 1px solid var(--line-2); border-radius: 13px; padding: 5px; box-shadow: 0 16px 40px -12px rgba(0,0,0,0.7); }
.mycard-opt { display: block; width: 100%; text-align: left; padding: 10px 12px; border-radius: 9px; font-size: 13.5px; font-weight: 600; color: var(--fg); }
.mycard-opt:active { background: var(--bg-3); }
.mycard-opt.on { color: var(--accent); }
.mycard-opt.del { color: #ff5a5a; }
.mycard-sep { height: 1px; background: var(--line); margin: 5px 0; }
.mycard-add { padding: 14px 0; }
.mycard-addbtn { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; height: 48px; border-radius: 13px; background: var(--bg-3); border: 1px dashed var(--line-2); color: var(--fg); font-size: 14px; font-weight: 700; margin-top: 14px; }
/* ===== CEO CONSOLE ===== */
.ceo-overlay { position: absolute; inset: 0; z-index: 300; background: var(--bg); display: flex; flex-direction: column; }
.ceo-top { display: flex; align-items: center; justify-content: space-between; padding: 18px 18px 12px; }
.ceo-brand { display: flex; align-items: center; gap: 7px; font-family: var(--display); font-size: 19px; }
.ceo-brand b { font-weight: 800; }
.ceo-close { width: 38px; height: 38px; border-radius: 50%; background: var(--bg-3); color: var(--fg); display: flex; align-items: center; justify-content: center; }
.ceo-tabs { display: flex; gap: 6px; overflow-x: auto; padding: 0 14px 12px; scrollbar-width: none; border-bottom: 1px solid var(--line); }
.ceo-tabs::-webkit-scrollbar { display: none; }
.ceo-tab { flex: none; display: flex; align-items: center; gap: 6px; padding: 9px 14px; border-radius: 999px; font-size: 13px; font-weight: 700; background: var(--bg-3); color: var(--fg-2); border: 1px solid var(--line); }
.ceo-tab.on { background: var(--fg); color: var(--bg); border-color: var(--fg); }
.ceo-body { flex: 1; overflow-y: auto; padding: 18px; }
.ceo-kpis { display: grid; grid-template-columns: 1fr 1fr; gap: 11px; }
.ceo-kpi { background: var(--bg-2); border: 1px solid var(--line); border-radius: 16px; padding: 15px; }
.ceo-kpi.hero { grid-column: 1 / -1; background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 16%, var(--bg-2)), var(--bg-2)); border-color: color-mix(in srgb, var(--accent) 30%, transparent); }
.ck-l { font-size: 11px; font-weight: 800; letter-spacing: 0.04em; text-transform: uppercase; color: var(--fg-3); margin-bottom: 6px; }
.ck-v { font-family: var(--display); font-weight: 800; font-size: 26px; letter-spacing: -0.02em; }
.ceo-kpi.hero .ck-v { font-size: 34px; }
.ck-s { font-size: 12px; color: var(--fg-3); margin-top: 3px; }
.ceo-note, .ceo-stripe-note { font-size: 12px; color: var(--fg-3); margin-top: 16px; display: flex; align-items: center; gap: 6px; line-height: 1.5; }
.ceo-section-h { font-family: var(--display); font-weight: 800; font-size: 17px; margin-bottom: 12px; }
.ceo-p { font-size: 13.5px; color: var(--fg-2); line-height: 1.55; margin-bottom: 16px; }
.ceo-list { display: flex; flex-direction: column; gap: 2px; }
.ceo-empty { text-align: center; color: var(--fg-3); font-size: 13.5px; line-height: 1.5; padding: 40px 20px; }
.ceo-userrow { display: flex; align-items: center; gap: 12px; padding: 11px 0; border-bottom: 1px solid var(--line); }
.ceo-av { width: 40px; height: 40px; border-radius: 50%; flex: none; overflow: hidden; display: flex; align-items: center; justify-content: center; color: #fff; font-family: var(--display); font-weight: 800; font-size: 16px; }
.ceo-av img { width: 100%; height: 100%; object-fit: cover; }
.ceo-uinfo { flex: 1; min-width: 0; }
.ceo-uname { font-size: 14.5px; font-weight: 700; display: flex; align-items: center; gap: 7px; }
.ceo-protag { font-size: 9px; font-weight: 800; color: var(--gold, #E8C75A); background: color-mix(in srgb, var(--gold, #E8C75A) 16%, transparent); padding: 2px 6px; border-radius: 999px; }
.ceo-uhandle { font-size: 12.5px; color: var(--fg-3); }
.ceo-udate { font-size: 12px; color: var(--fg-3); flex: none; }
.ceo-mint { display: flex; align-items: flex-end; gap: 10px; margin-bottom: 18px; }
.ceo-qty { display: flex; flex-direction: column; gap: 6px; font-size: 12px; font-weight: 700; color: var(--fg-3); }
.ceo-qty input { width: 90px; height: 46px; border-radius: 12px; background: var(--bg-2); border: 1px solid var(--line); color: var(--fg); font-size: 16px; padding: 0 14px; outline: none; }
.ceo-btn { flex: 1; height: 46px; border-radius: 12px; background: var(--accent); color: var(--accent-ink); font-size: 14px; font-weight: 800; display: flex; align-items: center; justify-content: center; gap: 7px; }
.ceo-batch-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; font-size: 13px; font-weight: 700; color: var(--fg-2); }
.ceo-link { display: inline-flex; align-items: center; gap: 5px; color: var(--accent); font-weight: 800; font-size: 13px; }
.ceo-codes { display: flex; flex-wrap: wrap; gap: 7px; }
.ceo-code { font-family: var(--mono); font-size: 11.5px; background: var(--bg-3); border: 1px solid var(--line); padding: 6px 10px; border-radius: 8px; color: var(--fg-2); }
.ceo-infl-list { display: flex; flex-direction: column; gap: 9px; }
.ceo-infl-row { border: 1px solid var(--line); border-radius: 12px; padding: 11px 12px; background: var(--bg-2); }
.ceo-infl-row.is-sent { border-color: rgba(var(--brand-rgb), 0.5); background: rgba(var(--brand-rgb), 0.06); }
.ceo-infl-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 9px; }
.ceo-infl-code { font-family: var(--mono); font-size: 13px; font-weight: 700; letter-spacing: 0.04em; color: var(--accent); background: none; border: none; cursor: pointer; padding: 0; }
.ceo-infl-code:active { opacity: 0.6; }
.ceo-infl-sent { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 600; color: var(--fg-2); cursor: pointer; }
.ceo-infl-sent input { width: 16px; height: 16px; accent-color: var(--accent); }
.ceo-infl-fields { display: flex; gap: 8px; }
.ceo-infl-in { flex: 1; min-width: 0; height: 38px; border-radius: 9px; background: var(--bg-3); border: 1px solid var(--line); color: var(--fg); font-size: 14px; padding: 0 11px; outline: none; }
.ceo-infl-in:focus { border-color: var(--accent); }

/* ===== PROFILE GENERATOR (CEO) ===== */
.pg-launch { width: 100%; display: flex; align-items: center; justify-content: center; gap: 8px; height: 48px; border-radius: 13px; background: var(--brand); color: #fff; font-size: 14.5px; font-weight: 800; margin-bottom: 16px; box-shadow: 0 4px 16px rgba(var(--brand-rgb), 0.35); }
.pg-launch:active { transform: scale(0.98); }
/* full-editor generator (mini-dashboard reusing OwnProfile/EditProfile/DesignPanel) */
.pg-fulledit { background: var(--bg); }
.pg-top { padding: 12px 14px; border-bottom: 1px solid var(--line); gap: 10px; }
.pg-top-mid { flex: 1; text-align: center; font-family: var(--display); font-weight: 800; font-size: 15px; color: var(--fg); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pg-gen-btn { flex: none; height: 36px; padding: 0 18px; border-radius: 999px; background: var(--brand); color: #fff; font-weight: 800; font-size: 13.5px; border: none; box-shadow: 0 3px 12px rgba(var(--brand-rgb), 0.35); }
.pg-gen-btn:disabled { opacity: 0.6; }
.pg-fulledit .pg-appframe { flex: 1; height: auto; max-height: none; width: 100%; border-radius: 0; border: none; box-shadow: none; overflow: hidden; }
.pg-hint { position: absolute; left: 0; right: 0; bottom: 0; padding: 9px 16px calc(9px + env(safe-area-inset-bottom)); background: var(--bg-2); border-top: 1px solid var(--line); font-size: 11.5px; color: var(--fg-3); text-align: center; line-height: 1.4; }
.ceo-pregen-wrap { margin-bottom: 18px; }
.ceo-subh { font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.06em; color: var(--fg-3); margin: 4px 0 9px; }
.ceo-pregen-list { display: flex; flex-direction: column; gap: 8px; }
.ceo-pregen-row { display: flex; align-items: center; gap: 10px; border: 1px solid var(--line); border-radius: 12px; padding: 10px 12px; background: var(--bg-2); }
.ceo-pregen-info { flex: 1; min-width: 0; }
.ceo-pregen-name { display: flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 700; color: var(--fg); }
.ceo-pregen-badge { font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.04em; padding: 2px 7px; border-radius: 999px; background: var(--bg-3); color: var(--fg-3); border: 1px solid var(--line); }
.ceo-pregen-badge.claimed { background: rgba(var(--brand-rgb), 0.16); color: var(--accent); border-color: transparent; }
.ceo-pregen-handle { font-family: var(--mono); font-size: 11.5px; color: var(--fg-3); margin-top: 2px; }
.ceo-pregen-acts { display: flex; gap: 6px; flex: none; }
.ceo-pregen-act { width: 34px; height: 34px; border-radius: 9px; background: var(--bg-3); border: 1px solid var(--line); color: var(--fg-2); display: flex; align-items: center; justify-content: center; }
.ceo-pregen-act:active { transform: scale(0.94); }
.pg-overlay { z-index: 320; }
.pg-form { display: flex; flex-direction: column; gap: 11px; }
.pg-sec-h { font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.07em; color: var(--fg-3); margin: 14px 0 2px; }
.pg-in { width: 100%; min-height: 46px; border-radius: 11px; background: var(--bg-2); border: 1px solid var(--line); color: var(--fg); font-size: 16px; padding: 12px 13px; outline: none; }
.pg-in:focus { border-color: var(--accent); }
.pg-in-sm { min-height: 40px; font-size: 14px; padding: 9px 11px; }
.pg-ta { resize: vertical; line-height: 1.45; }
.pg-handle { display: flex; align-items: center; background: var(--bg-2); border: 1px solid var(--line); border-radius: 11px; padding-left: 13px; }
.pg-handle span { color: var(--fg-3); font-size: 15px; }
.pg-in-handle { border: none; background: none; padding-left: 4px; }
.pg-img { position: relative; width: 100%; border-radius: 12px; overflow: hidden; background: var(--bg-2); border: 1px dashed var(--line-2); display: flex; align-items: center; justify-content: center; min-height: 64px; cursor: pointer; }
.pg-img img { width: 100%; height: 100%; object-fit: cover; }
.pg-img-round { width: 56px; height: 56px; min-height: 56px; border-radius: 12px; flex: none; }
.pg-img-empty { display: flex; flex-direction: column; align-items: center; gap: 5px; color: var(--fg-3); font-size: 12px; padding: 14px; text-align: center; }
.pg-img-x { position: absolute; top: 6px; right: 6px; width: 22px; height: 22px; border-radius: 50%; background: rgba(0,0,0,0.6); color: #fff; font-size: 12px; display: flex; align-items: center; justify-content: center; }
.pg-img-edit { position: absolute; top: 6px; right: 32px; width: 22px; height: 22px; border-radius: 50%; background: rgba(0,0,0,0.6); color: #fff; display: flex; align-items: center; justify-content: center; }
.pg-img-round .pg-img-edit { right: 4px; top: -4px; width: 20px; height: 20px; }
/* cropper */
.pg-crop-bg { position: fixed; inset: 0; z-index: 360; background: rgba(0,0,0,0.72); backdrop-filter: blur(6px); display: flex; align-items: center; justify-content: center; padding: 20px; }
.pg-crop-card { background: var(--bg-1); border: 1px solid var(--line); border-radius: 20px; padding: 20px; width: 100%; max-width: 360px; }
.pg-crop-title { font-family: var(--display); font-size: 18px; font-weight: 700; }
.pg-crop-sub { font-size: 12.5px; color: var(--fg-3); margin: 4px 0 16px; line-height: 1.45; }
.pg-crop-frame { position: relative; margin: 0 auto; overflow: hidden; border-radius: 14px; background: #0a0a0a; cursor: grab; touch-action: none; box-shadow: 0 0 0 1px var(--line), 0 0 0 9999px rgba(0,0,0,0.35); }
.pg-crop-frame:active { cursor: grabbing; }
.pg-crop-frame.is-round { border-radius: 50%; }
.pg-crop-zoom { width: 100%; margin: 18px 0 4px; accent-color: var(--accent); }
.pg-crop-acts { display: flex; gap: 10px; margin-top: 14px; }
.pg-crop-cancel { flex: 1; height: 46px; border-radius: 12px; background: var(--bg-2); border: 1px solid var(--line); color: var(--fg); font-size: 14px; font-weight: 700; }
.pg-crop-save { flex: 1.4; height: 46px; border-radius: 12px; background: var(--brand); border: none; color: #fff; font-size: 14px; font-weight: 800; }
.pg-crop-save:active, .pg-crop-cancel:active { transform: scale(0.97); }
.pg-socials { display: flex; flex-direction: column; gap: 8px; }
.pg-soc-row { display: flex; align-items: center; gap: 10px; }
.pg-soc-ic { flex: none; }
.pg-soc-in { flex: 1; }
.pg-feat-big { display: flex; flex-direction: column; gap: 8px; padding: 11px; border: 1px solid var(--line); border-radius: 13px; background: var(--bg-2); }
.pg-feat-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.pg-feat-cell { display: flex; flex-direction: column; gap: 7px; padding: 10px; border: 1px solid var(--line); border-radius: 13px; background: var(--bg-2); }
.pg-feat-row { display: flex; align-items: center; gap: 10px; padding: 10px; border: 1px solid var(--line); border-radius: 13px; background: var(--bg-2); }
.pg-feat-row-fields { display: flex; flex-direction: column; gap: 7px; flex: 1; min-width: 0; }
.pg-gallery { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 10px; }
.pg-generate { width: 100%; height: 52px; border-radius: 13px; background: var(--brand); color: #fff; font-size: 15px; font-weight: 800; margin: 22px 0 8px; box-shadow: 0 4px 16px rgba(var(--brand-rgb), 0.35); }
.pg-generate:disabled { opacity: 0.55; }
.pg-done { display: flex; flex-direction: column; align-items: center; text-align: center; padding-top: 18px; }
.pg-done-ic { width: 58px; height: 58px; border-radius: 50%; background: rgba(var(--brand-rgb), 0.16); color: var(--accent); display: flex; align-items: center; justify-content: center; margin-bottom: 14px; }
.pg-done h3 { font-family: var(--display); font-size: 21px; margin: 0 0 6px; }
.pg-link-row { width: 100%; text-align: left; margin-top: 14px; }
.pg-link-lbl { font-size: 12px; font-weight: 700; color: var(--fg-3); text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 5px; }
.pg-link-copy { width: 100%; text-align: left; font-family: var(--mono); font-size: 12.5px; color: var(--accent); background: var(--bg-2); border: 1px solid var(--line); border-radius: 10px; padding: 11px 12px; word-break: break-all; }
.pg-done-actions { display: flex; gap: 10px; width: 100%; margin-top: 22px; }
.pg-preview-btn { flex: 1; text-decoration: none; display: flex; align-items: center; justify-content: center; }
.ceo-btn-ghost { flex: 1; height: 46px; border-radius: 12px; background: var(--bg-2); border: 1px solid var(--line); color: var(--fg); font-size: 14px; font-weight: 700; }
.ceo-money-row { display: flex; align-items: center; justify-content: space-between; padding: 14px 0; border-bottom: 1px solid var(--line); font-size: 14px; }
.ceo-order { display: flex; align-items: center; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--line); }
.ceo-order-meta { flex: 1; min-width: 0; }
.ceo-order-t { font-size: 13.5px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ceo-order-s { font-size: 11.5px; color: var(--fg-3); margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ceo-order-amt { font-family: var(--display); font-weight: 800; font-size: 15px; flex: none; }
.ceo-order-badge { font-size: 9.5px; font-weight: 800; letter-spacing: 0.03em; text-transform: uppercase; padding: 4px 8px; border-radius: 999px; flex: none; }
.ceo-order-badge.st-placed { color: #C8821A; background: rgba(200,130,26,0.16); }
.ceo-order-badge.st-shipped { color: #5CC8FF; background: rgba(92,200,255,0.16); }
.ceo-order-badge.st-delivered { color: var(--ok); background: rgba(46,213,115,0.16); }
.ceo-order-badge.st-cancelled { color: #FF6B6B; background: rgba(255,107,107,0.16); }
.ceo-money-row b { font-family: var(--display); font-size: 17px; font-weight: 800; }
.ceo-money-row.total { border-bottom: none; margin-top: 4px; }
.ceo-money-row.total b { color: var(--accent); }
.ceo-refstatus { font-size: 10px; font-weight: 800; padding: 4px 9px; border-radius: 999px; text-transform: capitalize; flex: none; }
.ceo-refstatus.st-pending { color: #C8821A; background: rgba(200,130,26,0.16); }
.ceo-refstatus.st-approved { color: #5CC8FF; background: rgba(92,200,255,0.16); }
.ceo-refstatus.st-paid { color: var(--ok); background: rgba(46,213,115,0.16); }
.pair-steps { display: flex; flex-direction: column; gap: 10px; margin-bottom: 20px; text-align: left; }
.pair-step { display: flex; align-items: center; gap: 13px; padding: 14px 16px; border-radius: 14px; background: var(--bg-2); border: 1px solid var(--line); font-size: 14px; font-weight: 600; }
.pair-step-ic { color: var(--accent); flex: none; }
.pair-write { width: 100%; height: 54px; border-radius: 15px; background: var(--accent); color: var(--accent-ink); font-size: 15.5px; font-weight: 800; display: flex; align-items: center; justify-content: center; gap: 8px; }
.pair-write.writing { opacity: 0.7; }
.pair-actions { display: flex; flex-direction: column; gap: 11px; }
.pair-secondary { width: 100%; height: 54px; border-radius: 15px; background: transparent; border: 1px solid var(--line-2); color: var(--accent); font-size: 15px; font-weight: 800; display: flex; align-items: center; justify-content: center; gap: 8px; }
.pair-primary { width: 100%; height: 54px; border-radius: 15px; background: var(--bg-3); color: var(--fg); font-size: 15px; font-weight: 800; }
.mc-preview { position: relative; margin: 12px 0 4px; border-radius: 14px; overflow: hidden; max-height: 280px; }
.mc-preview img, .mc-preview video { width: 100%; max-height: 280px; object-fit: cover; display: block; }
.mc-preview-x { position: absolute; top: 8px; right: 8px; width: 30px; height: 30px; border-radius: 50%; background: rgba(0,0,0,0.6); color: #fff; display: flex; align-items: center; justify-content: center; backdrop-filter: blur(8px); }
.mc-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--line); }
.mc-keep { display: flex; align-items: center; gap: 7px; font-size: 13px; font-weight: 700; color: var(--brand); }
.mc-tools { display: flex; align-items: center; gap: 6px; }
.mc-tools button { width: 38px; height: 38px; border-radius: 11px; display: flex; align-items: center; justify-content: center; color: var(--fg-2); }
.mc-tools button:active { background: var(--bg-3); }
.mc-sectlabel { font-size: 12px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--fg-3); margin: 6px 2px 12px; }

/* ---- notifications ---- */
.notif-bell { position: relative; }
.notif-badge { position: absolute; top: -3px; right: -3px; min-width: 17px; height: 17px; padding: 0 4px; border-radius: 9px; background: #ff4d6d; color: #fff; font-size: 10px; font-weight: 800; display: flex; align-items: center; justify-content: center; border: 2px solid var(--bg); }
.sheet.notif-sheet { max-height: 70%; } /* doubled selector: must beat the later .sheet{max-height:92%} rule */
.nt-row { display: flex; align-items: center; gap: 13px; width: 100%; padding: 13px 14px; text-align: left; position: relative; border-radius: 16px; margin-bottom: 8px; background: transparent; border: 1px solid transparent; transition: background .2s, border-color .2s; overflow: hidden; }
.nt-row:last-child { margin-bottom: 0; }
.nt-row[disabled] { cursor: default; }
/* unread = subtle glass card: faint fill + a hairline gradient border line (no glow) */
.nt-row.unread {
  background: linear-gradient(180deg, rgba(var(--beam-glow-rgb), 0.05), rgba(var(--beam-glow-rgb), 0.015)) padding-box, var(--bg-2) padding-box;
}
/* the glass border itself — a masked gradient ring, brand at the top-left, fading round */
.nt-row.unread::before {
  content: ""; position: absolute; inset: 0; border-radius: 16px; padding: 1px; pointer-events: none;
  background: linear-gradient(135deg, rgba(var(--beam-glow-rgb), 0.55), rgba(var(--beam-glow2-rgb), 0.2) 40%, rgba(255,255,255,0.05) 72%, transparent);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude;
}
.nt-row.nt-solo { background: linear-gradient(180deg, rgba(var(--beam-glow-rgb), 0.07), rgba(var(--beam-glow-rgb), 0.02)); }
.nt-row:not([disabled]):active { transform: scale(0.99); opacity: 0.85; }
.nt-av-wrap { position: relative; flex: none; }
.nt-av { width: 44px; height: 44px; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: #fff; font-family: var(--display); font-weight: 800; font-size: 17px; overflow: hidden; }
.nt-av img, .nt-av video { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }
.nt-badge { position: absolute; bottom: -2px; right: -3px; width: 20px; height: 20px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: var(--accent); color: var(--accent-ink); border: 2px solid var(--bg); }
.nt-badge svg { stroke: currentColor; width: 12px; height: 12px; }
/* all notif type badges share one accent: lime in dark, black in light */
.nt-badge-tip, .nt-badge-follow, .nt-badge-tap { background: var(--accent); color: var(--accent-ink); }
.nt-badge-tip svg, .nt-badge-follow svg { stroke: currentColor; }
.nt-badge-tap svg { stroke: currentColor; fill: currentColor; }
.nt-heart { display: flex; }
.nt-heart svg { fill: none; stroke: currentColor; }
.nt-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.nt-text { font-size: 13.5px; line-height: 1.4; color: var(--fg-2); }
.nt-text b { color: var(--fg); font-weight: 700; }
.nt-when { font-size: 11.5px; color: var(--fg-3); }
.nt-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--brand); flex: none; }
/* dismiss (✕) button on each notification */
.nt-dismiss { position: absolute; top: 8px; right: 8px; width: 22px; height: 22px; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: var(--fg-3); opacity: 0; background: var(--bg-3); z-index: 3; transition: opacity .15s, color .15s, background .15s; }
.nt-row:hover .nt-dismiss, .nt-dismiss:focus { opacity: 1; }
.nt-dismiss:active { color: var(--fg); background: var(--bg-4); transform: scale(0.9); }
.nt-dismiss svg { width: 13px; height: 13px; }
@media (hover: none) { .nt-dismiss { opacity: 0.55; } }
/* hide the unread dot when the dismiss sits in its place */
.nt-row.unread .nt-dot { margin-right: 22px; }
/* one-time beam on open: same look as the menu-pro BorderBeam (bright brand
   segment + glow). Starts ~3/4 up the left edge, arcs once over the top,
   ends ~3/4 up the right edge, then fades. Shared by the notifications sheet
   and the New Moment pop-up (which remounts fresh each open, so no JS class). */
@property --nb-ang { syntax: '<angle>'; inherits: false; initial-value: 255deg; }
.notif-sheet { position: relative; }
.new-moment-sheet { position: relative; }
.persona-sheet { position: relative; }
.cover-sheet { position: relative; }
.exchange-sheet { position: relative; }
.dpanel { position: relative; }
.notif-sheet.nt-justopened::after,
.persona-sheet::after,
.cover-sheet::after,
.exchange-sheet::after,
.dpanel::after,
.new-moment-sheet::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1.5px;
  pointer-events: none; z-index: 5; opacity: 0;
  background: conic-gradient(from var(--nb-ang), transparent 0deg, var(--beam-a) 22deg, var(--beam-b) 45deg, var(--beam-c) 62deg, transparent 80deg);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude;
  filter: drop-shadow(0 0 4px rgba(var(--beam-glow-rgb), 0.5)) drop-shadow(0 0 11px rgba(var(--beam-glow2-rgb), 0.25));
}
@media (prefers-reduced-motion: no-preference) {
  .notif-sheet.nt-justopened::after,
  .persona-sheet::after,
  .cover-sheet::after,
  .exchange-sheet::after,
  .dpanel::after,
  .new-moment-sheet::after { animation: ntOpenBeam 2s cubic-bezier(0.45, 0, 0.25, 1) 0.1s 1 both; }
}
@keyframes ntOpenBeam {
  0% { --nb-ang: 255deg; opacity: 0; }
  12% { opacity: 1; }
  85% { opacity: 1; }
  100% { --nb-ang: 365deg; opacity: 0; }
}

/* ---- Moments as posts (live profile) ---- */
.moments-posts { display: flex; flex-direction: column; gap: 14px; }
.moment-post { border: 1px solid var(--line); border-radius: 18px; overflow: hidden; background: var(--bg-2); }
.mp-head { display: flex; align-items: center; gap: 10px; padding: 13px 14px 0; }
.mp-meta { display: flex; flex-direction: column; line-height: 1.25; }
.mp-name { font-weight: 800; font-size: 13.5px; }
.mp-when { font-size: 11.5px; color: var(--fg-3); }
.mp-cap { padding: 10px 14px 12px; font-size: 14px; line-height: 1.45; }
.mp-media { width: 100%; max-height: 360px; object-fit: cover; display: block; }
.mp-foot { display: flex; align-items: center; gap: 18px; padding: 12px 14px; font-size: 13px; color: var(--fg-2); font-weight: 600; }
.mp-foot span { display: flex; align-items: center; gap: 6px; }

/* Pro-locked section pill (Moments — always on for free) — steel blue, white text */
.hide-pill-pro { color: #fff !important; background: linear-gradient(180deg,#6B8299,#4D6980) !important; border-color: transparent !important; display: inline-flex; align-items: center; gap: 5px; }
.hide-pill-pro svg { stroke: #fff; }

/* create / post-to-all */
.post-drop {
  margin: 0 auto 18px; width: 200px; aspect-ratio: 9/16;
  border-radius: 20px; background: var(--bg-3);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 10px; color: var(--fg-3); border: 1px dashed var(--line-2);
}
.post-drop svg { width: 40px; height: 40px; }
.post-platforms { display: flex; flex-direction: column; gap: 4px; }
.post-row { display: flex; align-items: center; gap: 12px; padding: 16px 4px; border-bottom: 1px solid var(--line); }
.post-row:last-child { border-bottom: 0; }
.post-row .pico { width: 34px; height: 34px; border-radius: 9px; display: flex; align-items: center; justify-content: center; color: #fff; flex: none; }
.post-row .pmeta { flex: 1; }
.post-row .pn { font-weight: 700; font-size: 14px; }
.post-row .ps { font-size: 11px; color: var(--fg-3); }

/* sheet (edit profile / share) */
.sheet-bg {
  position: absolute; inset: 0; z-index: 200;
  background: rgba(0,0,0,0.55); backdrop-filter: blur(4px);
  display: flex; align-items: flex-end;
  padding-bottom: var(--kb, 0px);
  animation: fadeIn 0.25s;
}
.sheet {
  width: 100%; max-height: calc(92% - var(--kb, 0px));
  padding-bottom: calc(env(safe-area-inset-bottom) + 10px);
  background: var(--bg); color: var(--fg);
  border-radius: 26px 26px 0 0;
  border-top: 1px solid var(--line-2);
  display: flex; flex-direction: column;
  animation: sheetUp 0.4s var(--ease-out);
  overflow: hidden;
}
@keyframes sheetUp { from { transform: translateY(100%); } }
.sheet-grab { width: 38px; height: 5px; border-radius: 5px; background: var(--line-2); margin: 10px auto 0; flex: none; }
/* ---- app icon tile + rating prompt ---- */
.app-icon-tile { display: inline-flex; align-items: center; justify-content: center; background: linear-gradient(150deg,var(--brand) 0%,var(--brand-2) 55%,var(--brand-3) 100%); box-shadow: 0 18px 40px -12px rgba(138,255,107,0.5), inset 0 2px 0 rgba(255,255,255,0.4); position: relative; }
.app-icon-tile::after { content: ""; position: absolute; inset: 14%; border-radius: 26%; background: rgba(11,11,12,0.92); }
.app-icon-tile .ait-glyph { position: relative; z-index: 2; font-family: var(--display); font-weight: 800; color: #fff; letter-spacing: -0.04em; line-height: 1; }
.app-icon-img { filter: invert(1); box-shadow: 0 16px 36px -12px rgba(0,0,0,0.55), 0 3px 10px rgba(0,0,0,0.3); }
[data-theme="light"] .app-icon-img { filter: none; }
.rating-sheet { max-height: none; }
.rating-body { padding: 6px 24px calc(28px + env(safe-area-inset-bottom)); text-align: center; }
.rating-icon-wrap { display: flex; justify-content: center; margin: 18px 0 22px; animation: ratingPop 0.5s var(--ease-out); }
@keyframes ratingPop { from { transform: scale(0.6); opacity: 0; } }
.rating-h { font-family: var(--display); font-weight: 800; font-size: 30px; letter-spacing: -0.03em; line-height: 1.05; margin-bottom: 12px; }
.rating-p { color: var(--fg-2); font-size: 15px; line-height: 1.5; max-width: 30ch; margin: 0 auto 22px; }
.rating-stars { display: flex; gap: 8px; justify-content: center; margin-bottom: 26px; }
.rating-star { color: var(--fg-3); transition: color 0.15s, transform 0.15s var(--ease-out); }
.rating-star.on { color: #E8C75A; transform: scale(1.08); }
.rating-star.on svg { fill: #E8C75A; }
.rating-yes { height: 56px; font-size: 16px; margin-bottom: 12px; }
.rating-no { font-weight: 700; font-size: 15px; color: var(--fg-2); padding: 6px 20px; }
.rating-no:hover { color: var(--fg); }
.sheet-head { display: flex; align-items: center; justify-content: space-between; padding: 12px 18px; flex: none; }
.sheet-head h3 { font-family: var(--display); font-weight: 800; font-size: 18px; }
.sheet-scroll { overflow-y: auto; overflow-x: hidden; padding: 6px 18px 24px; touch-action: pan-y; overscroll-behavior: contain; }
.sheet-scroll::-webkit-scrollbar { display: none; }

/* edit section blocks */
.es-block { background: var(--bg-2); border: 1px solid var(--line); border-radius: 16px; padding: 16px; margin-bottom: 12px; }
.es-head { display: flex; align-items: center; gap: 12px; }
.es-head .grip { color: var(--fg-3); display: flex; cursor: grab; }
.es-head .es-title { font-weight: 700; font-size: 15px; flex: 1; }
.es-body { margin-top: 12px; }
.es-hint { font-size: 12.5px; color: var(--fg-3); margin-top: 8px; }

.share-preview {
  position: relative; height: 230px; margin: 10px 0 18px;
  display: flex; align-items: center; justify-content: center;
}
.share-card-main {
  width: 150px; aspect-ratio: 9/16; border-radius: 18px; overflow: hidden;
  position: relative; z-index: 3; box-shadow: 0 20px 50px -12px rgba(0,0,0,0.6);
}
.share-card-main img { width: 100%; height: 100%; object-fit: cover; }
.share-float {
  position: absolute; width: 84px; aspect-ratio: 3/4; border-radius: 14px; z-index: 1;
  box-shadow: 0 16px 36px -10px rgba(0,0,0,0.5);
}
.share-float.f1 { left: 18px; top: 24px; background: linear-gradient(135deg,#6B8299,#3a4f63); transform: rotate(-10deg); }
.share-float.f2 { right: 14px; top: 14px; background: linear-gradient(135deg,#FF3A5C,#a8123e); transform: rotate(9deg); }
.share-float.f3 { left: 28px; bottom: 12px; background: linear-gradient(135deg,#1DA1F2,#0a6bb0); transform: rotate(7deg); }
.share-link {
  display: flex; align-items: center; gap: 12px;
  background: var(--bg-3); border-radius: 14px; padding: 14px 16px; margin-bottom: 16px;
}
.share-link .lk { flex: 1; font-weight: 700; font-size: 14px; }
.share-link .cp { color: var(--accent); font-weight: 700; font-size: 13px; }

@media (max-width: 1080px) { .preview-pane { display: none; } }

/* =========================================================
   DESKTOP DASHBOARD (>=1080px) — left sidebar · center · live preview
   Mobile/phone layout is untouched; this only applies to .is-desktop.
   ========================================================= */
.appwrap.is-desktop {
  display: grid;
  grid-template-columns: 252px minmax(0, 1fr);
  align-items: stretch;
  justify-items: stretch;
  height: 100vh;
  min-height: 0;
  padding: 0;
}
.appwrap.is-desktop.has-preview {
  grid-template-columns: 252px minmax(0, 1fr) clamp(372px, 30vw, 452px);
}

/* center column drops the phone bezel and becomes the main work panel */
.appwrap.is-desktop .appframe {
  width: 100%;
  max-width: none;
  height: 100vh;
  max-height: none;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  background: var(--bg);
  border-left: 1px solid var(--line);
  border-right: 1px solid var(--line);
}
.appwrap.is-desktop.has-preview .appframe { border-right: 0; }
/* sheets / menus inside the center column shouldn't bleed under the bezel radius */
.appwrap.is-desktop .appframe { isolation: isolate; }

/* readable centred content column */
.appwrap.is-desktop .appframe .screen { max-width: 760px; margin-left: auto; margin-right: auto; }
.appwrap.is-desktop .appframe[data-tab="profile"] .appscroll > .pf-cover,
.appwrap.is-desktop .appframe[data-tab="profile"] .appscroll > .pf-body,
.appwrap.is-desktop .appframe[data-tab="edit"] .appscroll > * {
  max-width: 500px; margin-left: auto; margin-right: auto;
}

/* ---- left sidebar ---- */
.desk-side {
  display: flex; flex-direction: column;
  height: 100vh;
  padding: 22px 14px 18px;
  background: var(--bg);
  overflow-y: auto;
  scrollbar-width: none;
}
.desk-side::-webkit-scrollbar { display: none; }
.desk-brand {
  display: flex; align-items: center; gap: 10px;
  padding: 2px 10px 0; margin-bottom: 22px;
}
.desk-brand .db-logo { height: 24px; width: auto; }
.desk-brand .db-logo.light-logo { display: none; }
[data-theme="light"] .desk-brand .db-logo.dark-logo { display: none; }
[data-theme="light"] .desk-brand .db-logo.light-logo { display: block; }
.desk-brand .db-mark {
  display: flex; width: 32px; height: 32px; border-radius: 9px;
  background: linear-gradient(135deg,var(--brand),var(--brand-deep)); color: #0B0B0C;
  align-items: center; justify-content: center;
}
.desk-create {
  display: flex; align-items: center; justify-content: center; gap: 9px;
  height: 46px; margin: 0 6px 16px; border-radius: 14px;
  background: var(--accent);
  color: var(--accent-ink); font-weight: 800; font-size: 15px;
  box-shadow: none;
  transition: transform .15s var(--ease-out), box-shadow .2s;
}
.desk-create:hover { transform: translateY(-1px); box-shadow: 0 12px 26px -8px rgba(var(--brand-rgb),0.7); }
.desk-create:active { transform: scale(.98); }

.desk-nav { display: flex; flex-direction: column; gap: 2px; }
.desk-nav-item {
  display: flex; align-items: center; gap: 13px;
  height: 46px; padding: 0 14px; border-radius: 12px;
  color: var(--fg-2); font-size: 15px; font-weight: 600;
  transition: background .15s, color .15s;
}
.desk-nav-item:hover { background: var(--bg-2); color: var(--fg); }
.desk-nav-item.on { background: var(--bg-3); color: var(--fg); font-weight: 700; }
.desk-nav-item .dni-ic { display: flex; width: 24px; justify-content: center; align-items: center; color: inherit; flex: none; }
.desk-nav-item.on .dni-ic { color: var(--accent); }
.desk-nav-item .dni-av { width: 24px; height: 24px; border-radius: 50%; overflow: hidden; display: flex; }
.desk-nav-item.on .dni-av { box-shadow: 0 0 0 2px var(--accent); }
.desk-nav-item .dni-l { line-height: 1; }

.desk-side-foot { margin-top: auto; display: flex; flex-direction: column; gap: 5px; padding-top: 16px; }
.desk-foot-btn {
  display: flex; align-items: center; gap: 12px;
  height: 42px; padding: 0 14px; border-radius: 12px;
  color: var(--fg-2); font-size: 14px; font-weight: 600;
  transition: background .15s, color .15s;
}
.desk-foot-btn:hover { background: var(--bg-2); color: var(--fg); }
.desk-foot-btn svg { color: inherit; flex: none; }
.desk-user {
  display: flex; align-items: center; gap: 11px;
  padding: 9px 12px; border-radius: 14px;
  background: var(--bg-2); border: 1px solid var(--line); margin-top: 4px;
  transition: background .15s;
}
.desk-user:hover { background: var(--bg-3); }
.desk-user .du-meta { flex: 1; min-width: 0; display: flex; flex-direction: column; text-align: left; line-height: 1.3; }
.desk-user .du-meta b { font-size: 13.5px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.desk-user .du-meta i { font-size: 12px; color: var(--fg-3); font-style: normal; }
.desk-user > svg { color: var(--fg-3); flex: none; }

/* ---- right live preview ---- */
.desk-preview {
  height: 100vh;
  display: flex; flex-direction: column; align-items: center;
  gap: 16px;
  padding: 26px 26px 30px;
  border-left: 1px solid var(--line);
  background:
    radial-gradient(70% 45% at 50% 0%, rgba(var(--brand-rgb),0.12), transparent 62%),
    radial-gradient(60% 40% at 50% 100%, rgba(var(--brand-rgb),0.06), transparent 60%),
    var(--bg-2);
  overflow: hidden;
}
.dpv-head {
  width: 100%; max-width: 312px;
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
}
.dpv-live { display: inline-flex; align-items: center; gap: 7px; font-size: 12.5px; font-weight: 700; color: var(--fg-2); }
.dpv-live i { width: 8px; height: 8px; border-radius: 50%; background: #2ec27e; box-shadow: 0 0 0 4px rgba(46,194,126,0.18); animation: dpvPulse 2.2s ease-in-out infinite; }
@keyframes dpvPulse { 0%,100% { opacity: 1; } 50% { opacity: .4; } }
.dpv-url { font-family: var(--mono); font-size: 12px; color: var(--fg-3); transition: color .15s; }
.dpv-url b { color: var(--accent); }
.dpv-url:hover { color: var(--fg); }

.dpv-phone {
  flex: 1 1 auto; min-height: 0;
  width: auto; aspect-ratio: 9 / 19; max-width: 332px;
  background: #050506;
  border-radius: 44px; padding: 9px;
  border: 1px solid rgba(255,255,255,0.07);
  box-shadow: 0 44px 100px -34px rgba(0,0,0,0.75), inset 0 0 0 1.5px rgba(255,255,255,0.05);
}
.dpv-screen {
  width: 100%; height: 100%;
  border-radius: 36px; overflow: hidden;
  background: var(--bg);
  display: flex; flex-direction: column;
  position: relative;
}
.dpv-screen .appscroll { flex: 1; min-height: 0; }
/* preview is a non-interactive mirror of the public profile */
.dpv-screen .appscroll { pointer-events: none; }


.theme-tog {
  position: relative; width: 54px; height: 30px; border-radius: 999px;
  background: var(--bg-3); border: 1px solid var(--line);
  display: inline-flex; align-items: center; padding: 3px; flex: none;
  transition: background 0.4s var(--ease);
}
.theme-tog::before {
  content: ""; position: absolute; top: 3px; left: 3px;
  width: 22px; height: 22px; border-radius: 50%; background: var(--fg);
  transition: transform 0.45s var(--ease-out);
}
[data-theme="light"] .theme-tog::before { transform: translateX(24px); }
.theme-tog svg { width: 13px; height: 13px; color: var(--fg-3); z-index: 1; }

/* ===== Animated theme toggle — circular reveal (View Transitions) ===== */
::view-transition-old(root),
::view-transition-new(root) { animation: none; mix-blend-mode: normal; }
::view-transition-old(root) { z-index: 1; }
::view-transition-new(root) { z-index: 2147483646; }
.theme-tog .sun { margin-left: auto; margin-right: 5px; }
.theme-tog .moon { margin-left: 5px; order: -1; }

/* ---- Pro ---- */
.pro-matrix { border: 1px solid var(--line); border-radius: 16px; overflow: hidden; }
.pm-head, .pm-row { display: grid; grid-template-columns: 1.5fr 0.9fr 1.2fr; align-items: center; }
.pm-head { background: var(--bg-3); padding: 9px 12px; }
.pm-head .pm-free, .pm-head .pm-pro { font-family: var(--mono); font-size: 10px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; text-align: center; }
.pm-head .pm-pro { color: var(--accent); }
.pm-row { padding: 10px 12px; border-top: 1px solid var(--line); }
.pm-row .pm-feat { font-size: 12.5px; font-weight: 600; }
.pm-row .pm-free { font-size: 12px; color: var(--fg-2); text-align: center; }
.pm-row .pm-free.off { color: var(--fg-3); }
.pm-row .pm-pro { font-size: 12px; font-weight: 700; text-align: center; color: var(--fg); }
.pro-appicon {
  width: 76px; height: 76px; display: block;
  filter: drop-shadow(0 8px 22px rgba(0,0,0,0.42));
}
[data-theme="light"] .pro-appicon { filter: invert(1) drop-shadow(0 8px 22px rgba(0,0,0,0.18)); }
.pm-tick { color: var(--accent); font-weight: 800; }
.pro-badge { display: inline-flex; align-items: center; gap: 4px; white-space: nowrap;
  font-family: var(--body); font-size: 10px; font-weight: 800;
  letter-spacing: 0.04em; text-transform: uppercase;
  background: linear-gradient(135deg,#6B8299,#4D6980); color: #fff;
  padding: 3px 9px 3px; border-radius: 999px; line-height: 1;
}
.pro-badge::before { content: ""; width: 12px; height: 12px; flex: none; background: currentColor; -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'><path d='M11.562 3.266a.5.5 0 0 1 .876 0L15.39 8.87a1 1 0 0 0 1.516.294L21.183 5.5a.5.5 0 0 1 .798.519l-2.834 10.246a1 1 0 0 1-.956.734H5.81a1 1 0 0 1-.957-.734L2.02 6.02a.5.5 0 0 1 .798-.519l4.276 3.664a1 1 0 0 0 1.516-.294z'/><path d='M5 21h14'/></svg>") center/contain no-repeat; mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'><path d='M11.562 3.266a.5.5 0 0 1 .876 0L15.39 8.87a1 1 0 0 0 1.516.294L21.183 5.5a.5.5 0 0 1 .798.519l-2.834 10.246a1 1 0 0 1-.956.734H5.81a1 1 0 0 1-.957-.734L2.02 6.02a.5.5 0 0 1 .798-.519l4.276 3.664a1 1 0 0 0 1.516-.294z'/><path d='M5 21h14'/></svg>") center/contain no-repeat; }
.pro-lock {
  position: absolute; top: 8px; right: 8px; z-index: 3;
  width: 22px; height: 22px; border-radius: 50%;
  background: rgba(0,0,0,0.6); backdrop-filter: blur(6px);
  display: flex; align-items: center; justify-content: center; font-size: 11px;
  color: var(--accent);
}

/* ===== PRO page premium effects ===== */
/* ambient brand glow bleeding down from behind the PRO badge / headline */
.pro-sheet { position: relative; }
.pro-sheet::before {
  content: ""; position: absolute; top: -40px; left: 50%; transform: translateX(-50%);
  width: 360px; height: 240px; pointer-events: none; z-index: 0;
  background: radial-gradient(ellipse at center, rgba(var(--brand-rgb), 0.16), transparent 65%);
  filter: blur(8px);
}
.pro-sheet > * { position: relative; z-index: 1; }
/* selected plan card — ShineBorder: a soft light gliding the edge (same brand
   colors), over a faint static brand ring so selection stays legible. Replaces
   the old solid 2px border + tight beam that read as doubled lines. */
@property --pp-ang { syntax: '<angle>'; inherits: false; initial-value: 0deg; }
.pm-plan.on { border-color: transparent !important; }
.pm-plan.on::before {
  content: ""; position: absolute; inset: 0; border-radius: 16px; padding: 1.5px; pointer-events: none; z-index: 2;
  background: color-mix(in srgb, var(--brand) 28%, transparent);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude;
}
.pm-plan.on::after {
  content: ""; position: absolute; inset: 0; border-radius: 16px; padding: 1.5px; pointer-events: none; z-index: 2;
  background: conic-gradient(from var(--pp-ang),
    transparent 0deg, var(--beam-a) 70deg, var(--beam-b) 140deg, var(--beam-c) 200deg, transparent 270deg, transparent 360deg);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude;
}
@media (prefers-reduced-motion: no-preference) {
  .pm-plan.on::after { animation: ppShine 7s linear infinite; }
}
@media (prefers-reduced-motion: reduce) { .pm-plan.on::after { display: none; } }
@keyframes ppShine { from { --pp-ang: 0deg; } to { --pp-ang: 360deg; } }
/* primary CTA — a light shine sweeping across, periodically */
.pro-cta { position: relative; overflow: hidden; background: linear-gradient(180deg, #6B8299 0%, #4D6980 100%); color: #fff; }
.pro-cta::after {
  content: ""; position: absolute; top: 0; bottom: 0; left: -60%; width: 45%;
  background: linear-gradient(100deg, transparent, rgba(255,255,255,0.55), transparent);
  transform: skewX(-18deg); pointer-events: none;
}
@media (prefers-reduced-motion: no-preference) {
  .pro-cta::after { animation: ctaShine 3.6s ease-in-out 0.6s infinite; }
}
@keyframes ctaShine {
  0% { left: -60%; } 22% { left: 130%; } 100% { left: 130%; }
}
.style-grid { display: flex; gap: 10px; overflow-x: auto; padding-bottom: 4px; scrollbar-width: none; touch-action: pan-x; overscroll-behavior-x: contain; }
.style-grid::-webkit-scrollbar { display: none; }
.style-grid > * { flex: 0 0 auto; }
.switch-wrap { flex: none; padding: 4px; background: none; border: 0; display: flex; align-items: center; }
.style-card {
  flex: 0 0 auto; width: 78px; padding: 12px 8px; border-radius: 16px;
  background: var(--bg-2); border: 2px solid var(--line);
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  position: relative; transition: border-color 0.2s, transform 0.2s var(--ease-out);
}
.style-card.sel { border-color: var(--accent); }
.style-card:active { transform: scale(0.96); }
.style-card .sc-label { font-size: 11px; font-weight: 700; }
.style-prev { width: 46px; height: 36px; border-radius: 8px; display: flex; align-items: center; justify-content: center; }

/* platform picker */
.cat-block { border: 1px solid var(--line); border-radius: 16px; padding: 14px 16px; margin-bottom: 10px; background: var(--bg-2); }
.cat-head { display: flex; align-items: center; justify-content: space-between; cursor: pointer; }
.cat-head .ct { font-family: var(--mono); font-size: 12px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; }
.cat-head .cn { font-size: 11px; color: var(--fg-3); margin-top: 2px; }
.cat-chev { width: 30px; height: 30px; border-radius: 50%; border: 1px solid var(--line); display: flex; align-items: center; justify-content: center; color: var(--fg-2); transition: transform 0.3s; }
.cat-chev.open { transform: rotate(180deg); }
.plat-row { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 14px; }
.plat-pick { display: flex; flex-direction: column; align-items: center; gap: 5px; width: 56px; }
.plat-pick .pl { font-size: 9px; color: var(--fg-3); text-align: center; line-height: 1.1; }
.plat-pick:active { transform: scale(0.92); }
.search-bar { display: flex; align-items: center; gap: 10px; background: var(--bg-3); border: 1px solid var(--line); border-radius: 14px; padding: 12px 16px; margin-bottom: 16px; }
.search-bar input { flex: 1; border: 0; background: transparent; color: var(--fg); outline: none; font-size: 15px; }
.search-bar svg { width: 17px; height: 17px; color: var(--fg-3); }

/* ---- profile avatar button + dropdown menu ---- */
.pf-avatar-btn { width: 40px; height: 40px; border-radius: 50%; overflow: hidden; border: 2px solid rgba(255,255,255,0.65); flex: none; padding: 0; background: none; box-sizing: border-box; display: flex; align-items: center; justify-content: center; box-shadow: 0 4px 14px -4px rgba(0,0,0,0.5); }
.pf-avatar-btn img { width: 100%; height: 100%; object-fit: cover; }
.pf-avatar-btn .ph { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; color: #fff; font-family: var(--display); font-weight: 700; font-size: 16px; }
.pf-topbar-right { display: flex; align-items: center; gap: 10px; }
.glass-pill.pill-icon { padding: 0; width: 38px; justify-content: center; }
.glass-pill.pill-icon svg { width: 18px; height: 18px; }

/* ===== DESIGN live-preview panel (bottom sheet over profile) ===== */
.dpanel { position: absolute; left: 0; right: 0; bottom: 0; z-index: 120; background: var(--bg-2); border-top: 1px solid var(--line-2); border-radius: 22px 22px 0 0; box-shadow: 0 -18px 50px -20px rgba(0,0,0,0.7); display: flex; flex-direction: column; animation: sheetUp 0.32s var(--ease-out); }
.dpanel-grab { flex: none; display: flex; align-items: center; justify-content: center; height: 22px; cursor: grab; touch-action: none; }
.dpanel-grab span { width: 40px; height: 5px; border-radius: 3px; background: var(--fg-3); opacity: 0.5; }
.dpanel-grab:active { cursor: grabbing; }
.dpanel-head { display: flex; align-items: center; justify-content: space-between; padding: 12px 14px; border-bottom: 1px solid var(--line); flex: none; position: relative; }
.dpanel-x { width: 34px; height: 34px; border-radius: 50%; background: var(--bg-3); color: var(--fg); display: flex; align-items: center; justify-content: center; }
.dpanel-title { font-family: var(--display); font-weight: 800; font-size: 16px; position: absolute; left: 50%; transform: translateX(-50%); }
.dpanel-apply { height: 34px; padding: 0 18px; border-radius: 999px; background: var(--accent); color: var(--accent-ink); font-size: 13.5px; font-weight: 800; }
.dpanel-apply:active { transform: scale(0.96); }
.dpanel-scroll { overflow-y: auto; flex: 1; padding: 16px 0 calc(16px + env(safe-area-inset-bottom)); }
.dpanel-upsell, .dz-upsell.dpanel-upsell { margin: 0 14px 16px; width: calc(100% - 28px); box-sizing: border-box; }
.dpanel-row { margin-bottom: 16px; }
.dpanel-lbl { font-size: 12.5px; font-weight: 700; color: var(--fg-2); padding: 0 14px; margin-bottom: 9px; }
.dpanel-track { display: flex; gap: 10px; overflow-x: auto; padding: 7px 14px 9px; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
/* full-width grid rows (button style, corner roundness) — no horizontal scroll, bigger cards */
.dpanel-track.dpt-grid3 { display: grid; grid-template-columns: 1fr 1fr 1fr; overflow: visible; }
.dpanel-track.dpt-grid4 { display: grid; grid-template-columns: repeat(4, 1fr); overflow: visible; }
.dpanel-track.dpt-grid3 .dpc, .dpanel-track.dpt-grid4 .dpc { width: auto; }
.dpanel-track.dpt-grid3 .btn-style-card .btnprev { height: 96px; }
.dpanel-track::-webkit-scrollbar { display: none; }
.dpanel-track .dpc { flex: 0 0 auto; width: 84px; }
.dpanel-track .theme-card.dpc .theme-prev { height: 78px; }
.dpanel-track .lanim-card.dpc { width: 96px; }
.dpanel-track .dpc-font { flex: 0 0 auto; width: 72px; }
.dz-ringbtn { flex: 0 0 auto; display: inline-flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px; width: 92px; padding: 10px 8px; border-radius: 14px; background: var(--bg-3); border: 2px solid var(--line); color: var(--fg-2); font-size: 11px; font-weight: 700; }
.dz-ringbtn.on { border-color: var(--accent); color: var(--fg); }

.menu-scrim { position: absolute; inset: 0; z-index: 300; background: rgba(0,0,0,0.45); backdrop-filter: blur(2px); animation: fadeIn 0.2s; }
.pf-menu {
  position: absolute; top: 54px; right: 12px; z-index: 301;
  width: min(290px, 88%);
  background: var(--bg-2); color: var(--fg);
  border: 1px solid var(--line); border-radius: 20px;
  box-shadow: 0 30px 70px -20px rgba(0,0,0,0.65);
  overflow: hidden; animation: menuPop 0.24s var(--ease-out);
  transform-origin: top right; padding-bottom: 6px;
}
@keyframes menuPop { from { opacity: 0; transform: scale(0.9) translateY(-10px); } }
.pf-menu-head { display: flex; align-items: center; gap: 9px; padding: 11px 12px 9px; }
.pf-menu-head .av { width: 32px; height: 32px; border-radius: 50%; overflow: hidden; flex: none; display: flex; align-items: center; justify-content: center; color: #fff; font-family: var(--display); font-weight: 800; font-size: 15px; }
.pf-menu-head .av img { width: 100%; height: 100%; object-fit: cover; }
.pf-menu-head .nm { font-family: var(--display); font-weight: 800; font-size: 13.5px; letter-spacing: -0.02em; line-height: 1.1; }
.pf-menu-head .hd { font-size: 11px; color: var(--fg-3); }
.seg { display: flex; gap: 3px; margin: 0 10px 7px; background: var(--bg-3); border-radius: 10px; padding: 3px; }
.seg button { flex: 1; height: 28px; border-radius: 8px; font-size: 11px; font-weight: 700; color: var(--fg-2); display: flex; align-items: center; justify-content: center; gap: 4px; transition: background 0.25s, color 0.25s; }
.seg button.on { background: var(--fg); color: var(--bg); }
.seg button svg { width: 12px; height: 12px; }
.menu-pro { margin: 0 10px 6px; width: calc(100% - 20px); box-sizing: border-box; display: flex; align-items: center; gap: 9px; padding: 7px 10px; border-radius: 11px; background: var(--bg-3); position: relative; text-align: left; }
/* BorderBeam (Magic UI style): faint resting ring + one bright brand beam
   travelling the border in a slow infinite loop */
.menu-pro::before { content: ""; position: absolute; inset: 0; border-radius: 11px; padding: 1.5px; background: color-mix(in srgb, var(--fg) 14%, transparent); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; pointer-events: none; }
@property --mp-ang { syntax: '<angle>'; inherits: false; initial-value: 0deg; }
.menu-pro::after { content: ""; position: absolute; inset: 0; border-radius: 11px; padding: 1.5px;
  background: conic-gradient(from var(--mp-ang), transparent 0deg, var(--beam-a) 28deg, var(--beam-b) 62deg, var(--beam-c) 92deg, transparent 115deg);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude;
  filter: drop-shadow(0 0 4px rgba(var(--beam-glow-rgb), 0.5)) drop-shadow(0 0 11px rgba(var(--beam-glow2-rgb), 0.25));
  pointer-events: none; }
@media (prefers-reduced-motion: no-preference) {
  .menu-pro::after { animation: mpBeam 6s linear infinite; }
}
@media (prefers-reduced-motion: reduce) {
  .menu-pro::after { display: none; }
}
@keyframes mpBeam {
  from { --mp-ang: 0deg; }
  to { --mp-ang: 360deg; }
}
.menu-pro .ic { width: 28px; height: 28px; border-radius: 8px; background: linear-gradient(135deg,#6B8299,#4D6980); display: flex; align-items: center; justify-content: center; font-weight: 800; color: #fff; flex: none; font-size: 13px; }
.menu-pro .t { font-weight: 800; font-size: 12px; line-height: 1.2; }
.menu-pro .s { font-size: 10px; color: var(--fg-3); white-space: nowrap; }
.menu-sep { height: 1px; background: var(--line); margin: 3px 10px; }
.menu-item { display: flex; align-items: center; gap: 11px; padding: 7px 10px; font-size: 12.5px; font-weight: 600; transition: background 0.15s; width: 100%; text-align: left; }
.menu-item:hover { background: var(--bg-3); }
.menu-item .mi { width: 18px; display: flex; justify-content: center; color: var(--fg-2); }
.menu-item .mi svg { width: 16px; height: 16px; stroke: currentColor; }
.menu-item .right { margin-left: auto; color: var(--fg-3); font-size: 11px; display: flex; align-items: center; gap: 5px; }
.menu-item.danger { color: var(--danger); }
.menu-item.danger .mi { color: var(--danger); }
.menu-item.danger .mi svg { stroke: currentColor; }

/* ---- sick analytics ---- */
.an-range { display: flex; gap: 8px; margin-bottom: 18px; }
.an-source { display: flex; gap: 6px; padding: 4px; background: var(--bg-2); border: 1px solid var(--line); border-radius: 14px; margin-bottom: 18px; }
.an-source button { flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: 38px; border-radius: 10px; font-size: 13px; font-weight: 700; color: var(--fg-2); transition: background 0.2s, color 0.2s; }
.an-source button.on { background: linear-gradient(135deg,#6B8299,#4D6980); color: #fff; }
.an-mix { display: flex; gap: 10px; margin: -6px 0 16px; }
.an-mix-seg { flex: 1; display: flex; align-items: center; gap: 10px; padding: 13px 14px; border-radius: 16px; background: var(--bg-2); border: 1px solid var(--line); text-align: left; }
.an-mix-seg:active { background: var(--bg-3); }
.an-mix-seg .amx-ic { width: 34px; height: 34px; border-radius: 10px; display: flex; align-items: center; justify-content: center; flex: none; }
.an-mix-seg.card .amx-ic { background: var(--bg-4); color: var(--fg); }
.an-mix-seg.card .amx-ic svg { stroke: currentColor; }
.an-mix-seg.bio .amx-ic { background: rgba(var(--brand-rgb),0.18); color: var(--brand); }
.an-mix-seg .amx-meta { display: flex; flex-direction: column; line-height: 1.2; min-width: 0; }
.an-mix-seg .amx-meta b { font-family: var(--display); font-weight: 800; font-size: 19px; letter-spacing: -0.02em; }
.an-mix-seg .amx-meta span { font-size: 11px; color: var(--fg-3); white-space: nowrap; }
.an-range button { padding: 8px 15px; border-radius: 11px; font-size: 13px; font-weight: 700; background: var(--bg-3); color: var(--fg-2); transition: background 0.2s, color 0.2s; }
.an-range button.on { background: var(--fg); color: var(--bg); }
.an-range-pro { display: inline-flex; align-items: center; gap: 4px; padding: 8px 12px; border-radius: 11px; font-size: 12px; font-weight: 700; background: transparent; color: var(--gold, #E8C75A); border: 1px dashed color-mix(in srgb, var(--gold, #E8C75A) 45%, transparent); }
/* ===== customise nav ===== */
.menu-pro-tag { font-size: 9.5px; font-weight: 800; letter-spacing: 0.05em; color: var(--gold, #E8C75A); background: color-mix(in srgb, var(--gold, #E8C75A) 16%, transparent); padding: 2px 7px; border-radius: 999px; }
/* owner dash strip (NFC order / upsell) */
.dash-strip { padding: 6px 0 16px; }
.ds-card { border-radius: 16px; background: var(--bg-2); border: 1px solid var(--line); }
.ds-upsell2 { width: 100%; display: flex; align-items: center; gap: 13px; padding: 12px 14px; text-align: left; cursor: pointer; background: linear-gradient(120deg, color-mix(in srgb, var(--accent) 12%, var(--bg-2)), var(--bg-2)); border-color: transparent; position: relative; }
/* ShineBorder (Magic UI) — a soft brand light glides the NFC upsell's edge (replaces the static lime outline) */
@property --ds-ang { syntax: '<angle>'; inherits: false; initial-value: 0deg; }
.ds-upsell2::after {
  content: ""; position: absolute; inset: 0; border-radius: 16px; padding: 1.5px; pointer-events: none; z-index: 2;
  background: conic-gradient(from var(--ds-ang),
    transparent 0deg, var(--beam-a) 70deg, var(--beam-b) 140deg, var(--beam-c) 200deg, transparent 270deg, transparent 360deg);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude;
  opacity: 0.9;
}
@media (prefers-reduced-motion: no-preference) {
  .ds-upsell2::after { animation: dsShine 8s linear infinite; }
}
@media (prefers-reduced-motion: reduce) {
  .ds-upsell2::after { background: color-mix(in srgb, var(--brand) 35%, transparent); }
}
@keyframes dsShine { from { --ds-ang: 0deg; } to { --ds-ang: 360deg; } }
.ds-up2-art { position: relative; width: 64px; height: 40px; flex: none; border-radius: 8px; overflow: hidden; background: var(--bg-4); box-shadow: 0 4px 12px -4px rgba(0,0,0,0.5); }
.ds-up2-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity 0.6s ease; }
.ds-up2-img.on { opacity: 1; }
.ds-up2-meta { flex: 1; min-width: 0; }
.ds-up2-t { font-family: var(--display); font-weight: 800; font-size: 15px; }
.ds-up2-s { font-size: 11.5px; color: var(--fg-3); margin-top: 1px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ds-up2-cta { display: inline-flex; align-items: center; gap: 5px; font-size: 12.5px; font-weight: 800; color: var(--accent); margin-top: 5px; }
.ds-up2-cta svg { stroke: currentColor; }
.ds-up2-info { position: absolute; top: 8px; right: 8px; z-index: 3; width: 26px; height: 26px; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: var(--accent); background: rgba(var(--brand-rgb), 0.14); backdrop-filter: blur(4px); transition: color .15s, background .15s, transform .12s; }
.ds-up2-info:hover { color: var(--accent-ink); background: var(--accent); }
.ds-up2-info:active { transform: scale(0.9); }

/* ===== My Cards: border-beam upsell (shown when user has no card yet) ===== */
@property --cu-ang { syntax: '<angle>'; inherits: false; initial-value: 0deg; }
.cards-upsell { position: relative; display: flex; gap: 14px; align-items: center; width: 100%; text-align: left; padding: 18px; border-radius: 18px; background: var(--bg-2); border: 1px solid var(--line); overflow: hidden; transition: transform 0.12s; }
.cards-upsell:active { transform: scale(0.99); }
.cards-upsell::before { content: ""; position: absolute; inset: 0; border-radius: 18px; padding: 1.5px; background: color-mix(in srgb, var(--fg) 12%, transparent); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; pointer-events: none; }
.cards-upsell::after { content: ""; position: absolute; inset: 0; border-radius: 18px; padding: 1.5px; background: conic-gradient(from var(--cu-ang), transparent 0deg, var(--beam-a) 70deg, var(--beam-b) 140deg, var(--beam-c) 200deg, transparent 270deg, transparent 360deg); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; filter: drop-shadow(0 0 4px rgba(var(--beam-glow-rgb),0.5)) drop-shadow(0 0 11px rgba(var(--beam-glow2-rgb),0.25)); pointer-events: none; }
@media (prefers-reduced-motion: no-preference) { .cards-upsell::after { animation: cuBeam 8s linear infinite; } }
@media (prefers-reduced-motion: reduce) { .cards-upsell::after { background: color-mix(in srgb, var(--brand) 35%, transparent); } }
@keyframes cuBeam { from { --cu-ang: 0deg; } to { --cu-ang: 360deg; } }
.cards-upsell-art { width: 52px; height: 52px; flex: none; border-radius: 13px; display: flex; align-items: center; justify-content: center; background: linear-gradient(135deg,#6B8299,#4D6980); color: #fff; }
.cards-upsell-meta { display: flex; flex-direction: column; min-width: 0; }
.cards-upsell-t { font-family: var(--display); font-weight: 800; font-size: 16px; color: var(--fg); }
.cards-upsell-s { font-size: 12.5px; color: var(--fg-3); margin-top: 2px; line-height: 1.4; }
.cards-upsell-cta { display: inline-flex; align-items: center; gap: 5px; margin-top: 8px; font-size: 12.5px; font-weight: 800; color: var(--accent); }
.cards-upsell-cta svg { stroke: currentColor; }
.cards-have { text-align: center; font-size: 12.5px; color: var(--fg-3); margin-top: 16px; }
.cards-have button { color: var(--fg); font-weight: 700; text-decoration: underline; }

/* ===== NFC explainer sheet ===== */
.nfc-sheet { width: 100%; max-height: 94%; background: var(--bg-2); display: flex; flex-direction: column; padding: 0; overflow: hidden; position: relative; border-radius: 26px 26px 0 0; }
.nfc-close { position: absolute; top: 14px; right: 14px; z-index: 12; width: 34px; height: 34px; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: #fff; background: rgba(0,0,0,0.32); backdrop-filter: blur(6px); transition: background .15s, transform .12s; }
.nfc-close:hover { background: rgba(0,0,0,0.5); }
.nfc-close:active { transform: scale(0.9); }

.nfc-hero { position: relative; flex: none; padding: 20px 20px 12px; overflow: hidden;
  background: radial-gradient(82% 64% at 50% 4%, rgba(var(--brand-rgb),0.16), transparent 60%), linear-gradient(180deg, var(--bg-3), var(--bg-2)); }
.nfc-stage { position: relative; height: 300px; display: flex; align-items: center; justify-content: center; }

/* device mockup */
.nfc-phone { position: relative; width: 152px; height: 314px; flex: none; background: #050506;
  border-radius: 31px; padding: 5px; transform: translateX(-14px) rotate(-3deg);
  box-shadow: 0 36px 64px -28px rgba(0,0,0,0.8), inset 0 0 0 1.5px rgba(255,255,255,0.06); }
.nfc-phone-screen { position: relative; width: 142px; height: 304px; border-radius: 26px; overflow: hidden; background: var(--bg); pointer-events: none; }
.nfc-screen-scale { position: absolute; top: 0; left: 0; width: 320px; height: 685px; transform-origin: top left; transform: scale(0.44375); display: flex; flex-direction: column; }
.nfc-screen-scale > * { flex: 1; min-height: 0; }
/* iOS Dynamic Island */
.nfc-phone-ios .nfc-phone-cam { position: absolute; top: 12px; left: 50%; transform: translateX(-50%); width: 48px; height: 14px; border-radius: 999px; background: #050506; z-index: 4; }
/* Android punch-hole */
.nfc-phone-android { border-radius: 26px; }
.nfc-phone-android .nfc-phone-screen { border-radius: 22px; }
.nfc-phone-android .nfc-phone-cam { position: absolute; top: 12px; left: 50%; transform: translateX(-50%); width: 9px; height: 9px; border-radius: 50%; background: #050506; box-shadow: inset 0 0 0 1.5px rgba(255,255,255,0.12); z-index: 4; }

/* NFC card tucked at the lower-right, tapping the phone */
.nfc-card-vis { position: absolute; right: 6px; bottom: 32px; width: 138px; height: 86px; border-radius: 11px; overflow: hidden; z-index: 5;
  transform: rotate(13deg); box-shadow: 0 22px 38px -16px rgba(0,0,0,0.7), inset 0 0 0 1px rgba(255,255,255,0.08);
  background: linear-gradient(135deg, #1a1a20, #0c0c10); display: flex; align-items: center; justify-content: center; }
.nfc-card-vis img { width: 100%; height: 100%; object-fit: cover; }
.nfc-card-fallback { display: inline-flex; align-items: center; gap: 5px; font-family: var(--display); font-weight: 800; font-size: 14px; color: var(--accent); }
@media (prefers-reduced-motion: no-preference) {
  .nfc-card-vis { animation: nfcTap 3.4s ease-in-out infinite; }
}
@keyframes nfcTap {
  0%, 100% { transform: rotate(13deg) translate(0, 0); }
  46% { transform: rotate(13deg) translate(-9px, -7px); }
  54% { transform: rotate(13deg) translate(-9px, -7px); }
}

/* radiating NFC waves from the contact point */
.nfc-waves { position: absolute; right: 86px; bottom: 92px; width: 0; height: 0; z-index: 4; }
.nfc-waves span { position: absolute; left: 50%; top: 50%; width: 18px; height: 18px; margin: -9px 0 0 -9px; border-radius: 50%; border: 2px solid rgba(var(--brand-rgb), 0.9); opacity: 0; }
@media (prefers-reduced-motion: no-preference) {
  .nfc-waves span { animation: nfcWave 3.4s ease-out infinite; }
  .nfc-waves span:nth-child(2) { animation-delay: 0.28s; }
  .nfc-waves span:nth-child(3) { animation-delay: 0.56s; }
}
@keyframes nfcWave {
  0% { transform: scale(0.4); opacity: 0; }
  /* fire as the card meets the phone */
  40% { opacity: 0; }
  46% { opacity: 0.85; }
  85% { opacity: 0; }
  100% { transform: scale(5.2); opacity: 0; }
}

/* copy + steps */
.nfc-body { flex: 1; min-height: 0; overflow-y: auto; padding: 20px 22px calc(24px + env(safe-area-inset-bottom)); }
.nfc-kicker { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; font-size: 11px; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; color: var(--accent); }
.nfc-kicker svg { stroke: currentColor; }
.nfc-h { font-family: var(--display); font-weight: 800; font-size: 25px; letter-spacing: -0.02em; margin: 8px 0 6px; }
.nfc-sub { font-size: 14px; line-height: 1.5; color: var(--fg-2); margin-bottom: 18px; text-wrap: pretty; }
.nfc-steps { display: flex; flex-direction: column; gap: 14px; margin-bottom: 22px; }
.nfc-step { display: flex; gap: 13px; align-items: flex-start; }
.nfc-step-n { flex: none; width: 34px; height: 34px; border-radius: 11px; display: flex; align-items: center; justify-content: center; background: var(--bg-3); color: var(--accent); border: 1px solid var(--line); }
.nfc-step-n svg { stroke: currentColor; }
.nfc-step-t { font-weight: 700; font-size: 14.5px; }
.nfc-step-d { font-size: 12.5px; line-height: 1.45; color: var(--fg-3); margin-top: 2px; text-wrap: pretty; }
.nfc-step-d b { color: var(--fg-2); font-weight: 700; }
.nfc-cta { width: 100%; padding: 15px; border-radius: 15px; background: var(--accent); color: var(--accent-ink); font-family: var(--display); font-weight: 800; font-size: 15.5px; display: flex; align-items: center; justify-content: center; gap: 8px; transition: transform .12s, filter .15s; }
.nfc-cta svg { stroke: currentColor; }
.nfc-cta:hover { filter: brightness(1.05); }
.nfc-cta:active { transform: scale(0.98); }
.nfc-foot { text-align: center; font-size: 11.5px; color: var(--fg-3); margin-top: 12px; }
.ds-test-next { display: block; margin: 12px auto 0; padding: 6px 14px; border-radius: 999px; font-size: 11px; font-weight: 700; color: var(--fg-3); background: var(--bg-3); border: 1px dashed var(--line-2); }
.ds-test-order { margin: 8px 0 0; }
/* moments compose CTA (owner profile empty-state) */
.moments-compose-cta { display: flex; align-items: center; gap: 12px; width: 100%; padding: 13px 15px; border-radius: 16px; background: var(--bg-2); border: 1px solid var(--line); }
.moments-compose-cta .mcc-text { flex: 1; text-align: left; font-size: 15px; color: var(--fg-3); }
.moments-compose-cta .mcc-plus { width: 40px; height: 40px; border-radius: 50%; flex: none; display: flex; align-items: center; justify-content: center; background: linear-gradient(180deg, #6B8299 0%, #4D6980 100%); color: #fff; box-shadow: none; }
.ds-order { padding: 13px 14px; }
.ds-order-body { display: flex; align-items: center; gap: 12px; margin-bottom: 13px; }
.ds-order-art { width: 56px; height: 36px; border-radius: 8px; overflow: hidden; flex: none; display: flex; align-items: center; justify-content: center; color: #fff; }
.ds-order-art img { width: 100%; height: 100%; object-fit: cover; }
.ds-order-meta { flex: 1; min-width: 0; }
.ds-order-t { font-family: var(--display); font-weight: 800; font-size: 15px; }
.ds-order-s { font-size: 11.5px; color: var(--fg-3); margin-top: 1px; }
.ds-order-badge { font-size: 9.5px; font-weight: 800; padding: 3px 8px; border-radius: 999px; flex: none; }
.ds-order-badge.st-placed { color: #C8821A; background: rgba(200,130,26,0.16); }
.ds-order-badge.st-shipped { color: #5CC8FF; background: rgba(92,200,255,0.16); }
.ds-order-badge.st-delivered { color: var(--ok); background: rgba(46,213,115,0.16); }
.ds-track { display: flex; align-items: flex-start; }
.ds-track-step { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 5px; position: relative; }
.ds-track-step::before { content: ""; position: absolute; top: 14px; left: -50%; width: 100%; height: 2px; background: var(--line); z-index: 0; }
.ds-track-step:first-child::before { display: none; }
.ds-track-step.done::before { background: var(--accent); }
.ds-track-ic { width: 30px; height: 30px; border-radius: 50%; background: var(--bg-4); color: var(--fg-3); display: flex; align-items: center; justify-content: center; position: relative; z-index: 1; }
.ds-track-step.done .ds-track-ic { background: var(--accent); color: var(--accent-ink); }
.ds-track-step.current .ds-track-ic { box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 25%, transparent); }
.ds-track-lb { font-size: 10px; font-weight: 700; color: var(--fg-3); }
.ds-track-step.done .ds-track-lb { color: var(--fg); }
/* stripe onboarding card */
.stripe-card { background: var(--bg-2); border: 1px solid var(--line-2); border-radius: 18px; padding: 16px; margin-bottom: 14px; }
.stripe-head { display: flex; align-items: center; gap: 11px; margin-bottom: 14px; }
.stripe-logo { width: 38px; height: 38px; border-radius: 11px; background: #635BFF; color: #fff; display: flex; align-items: center; justify-content: center; flex: none; }
.stripe-meta { flex: 1; display: flex; flex-direction: column; line-height: 1.3; }
.stripe-meta b { font-size: 14.5px; }
.stripe-meta span { font-size: 12px; color: var(--fg-3); }
.stripe-badge { font-size: 10px; font-weight: 700; color: #C8821A; background: rgba(200,130,26,0.14); padding: 4px 9px; border-radius: 999px; }
.stripe-steps { display: flex; flex-direction: column; gap: 9px; margin-bottom: 14px; }
.stripe-step { display: flex; align-items: center; gap: 10px; font-size: 13px; color: var(--fg-3); }
.stripe-step svg { width: 20px; height: 20px; padding: 3px; border-radius: 50%; background: var(--bg-4); flex: none; }
.stripe-step.done { color: var(--fg-2); }
.stripe-step.done svg { background: var(--ok); color: #fff; }
.stripe-step.active { color: var(--fg); font-weight: 600; }
.stripe-step.active svg { background: var(--accent); color: var(--accent-ink); }
.stripe-cta { width: 100%; height: 48px; border-radius: 13px; background: var(--accent); color: var(--accent-ink); font-size: 14.5px; font-weight: 800; display: flex; align-items: center; justify-content: center; gap: 8px; }
.stripe-legal { display: flex; align-items: center; justify-content: center; gap: 6px; font-size: 11px; color: var(--fg-3); margin-top: 10px; text-align: center; }
/* tips */
.tip-btn-full { width: 100%; display: flex; align-items: center; justify-content: center; gap: 9px; height: 52px; border-radius: 16px; font-size: 15px; font-weight: 800; border: none; }
.tip-btn-full:active { transform: scale(0.99); }
.tip-pill { display: inline-flex; align-items: center; gap: 8px; height: 46px; padding: 0 22px; border-radius: 999px; font-size: 14.5px; font-weight: 800; border: none; }
.tip-pill:active { transform: scale(0.97); }
.tip-link-row { width: 100%; display: flex; align-items: center; gap: 12px; padding: 14px; border-radius: 16px; background: var(--bg-2); border: 1px solid var(--line-2); color: var(--fg); }
.tlr-ic { width: 36px; height: 36px; border-radius: 10px; display: flex; align-items: center; justify-content: center; flex: none; }
.tlr-t { flex: 1; text-align: left; font-size: 15px; font-weight: 700; }
.tip-corner { position: absolute; top: 60px; right: 16px; z-index: 30; width: 44px; height: 44px; border-radius: 50%; display: flex; align-items: center; justify-content: center; border: none; box-shadow: 0 6px 18px -4px rgba(0,0,0,0.4); }
.tip-corner:active { transform: scale(0.92); }
/* config sheet */
.tip-cfg-preview { display: flex; align-items: center; justify-content: center; min-height: 64px; padding: 14px; border-radius: 16px; background: var(--bg-3); border: 1px solid var(--line); margin-bottom: 18px; }
.tip-prev-btn { display: inline-flex; align-items: center; gap: 8px; height: 48px; padding: 0 20px; border-radius: 14px; font-size: 14.5px; font-weight: 800; }
.tip-prev-pill { display: inline-flex; align-items: center; gap: 7px; height: 42px; padding: 0 18px; border-radius: 999px; font-size: 14px; font-weight: 800; }
.tip-prev-link { display: inline-flex; align-items: center; gap: 10px; padding: 10px 14px; border-radius: 12px; background: var(--bg-2); border: 1px solid var(--line-2); font-size: 14px; font-weight: 700; }
.tip-prev-link .tpl-ic { width: 30px; height: 30px; border-radius: 8px; display: flex; align-items: center; justify-content: center; }
.tip-prev-corner { width: 46px; height: 46px; border-radius: 50%; display: flex; align-items: center; justify-content: center; }
.tip-disp-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 9px; margin-bottom: 6px; }
.tip-disp { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 12px 6px; border-radius: 13px; background: var(--bg-2); border: 2px solid var(--line); }
.tip-disp.sel { border-color: var(--accent); }
.tip-disp-prev { width: 100%; height: 26px; border-radius: 7px; background: var(--bg-4); display: flex; align-items: center; justify-content: center; }
.tip-disp-prev .tdp-dot { width: 18px; height: 8px; border-radius: 4px; background: var(--fg-3); }
.tip-disp-prev.tdp-pill .tdp-dot { width: 22px; height: 12px; border-radius: 999px; }
.tip-disp-prev.tdp-corner { justify-content: flex-end; align-items: flex-start; padding: 4px; }
.tip-disp-prev.tdp-corner .tdp-dot { width: 10px; height: 10px; border-radius: 50%; }
.tip-disp-prev.tdp-link { justify-content: flex-start; padding: 0 6px; }
.tip-disp-lb { font-size: 11px; font-weight: 700; }
.tip-icon-row { display: flex; flex-wrap: wrap; gap: 8px; }
.tip-icon { width: 46px; height: 46px; border-radius: 12px; background: var(--bg-3); border: 1px solid var(--line); color: var(--fg-2); display: flex; align-items: center; justify-content: center; }
.tip-icon.on { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 14%, var(--bg-3)); color: var(--fg); }
.tip-color-row { display: flex; flex-wrap: wrap; gap: 10px; }
.tip-color { width: 40px; height: 40px; border-radius: 50%; border: 2px solid transparent; display: flex; align-items: center; justify-content: center; color: #0B0B0C; }
.tip-color.on { border-color: var(--fg); box-shadow: 0 0 0 2px var(--bg) inset; }
.tip-amts { display: flex; flex-wrap: wrap; gap: 9px; }
.tip-amt-edit { position: relative; display: flex; align-items: center; gap: 2px; background: var(--bg-3); border: 1px solid var(--line); border-radius: 12px; padding: 0 10px; height: 50px; }
.tip-amt-cur { color: var(--fg-3); font-weight: 700; }
.tip-amt-in { width: 52px; background: none; border: none; outline: none; color: var(--fg); font-size: 17px; font-weight: 700; }
.tip-amt-x { position: absolute; top: -7px; right: -7px; width: 20px; height: 20px; border-radius: 50%; background: var(--bg-4); border: 1px solid var(--line-2); color: var(--fg-2); display: flex; align-items: center; justify-content: center; }
.tip-amt-add { width: 50px; height: 50px; border-radius: 12px; background: var(--bg-3); border: 1px dashed var(--line-2); color: var(--fg-2); display: flex; align-items: center; justify-content: center; }
.tip-big-ic { width: 64px; height: 64px; border-radius: 20px; display: flex; align-items: center; justify-content: center; margin: 0 auto 12px; }
.tip-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.tip-opt { height: 60px; border-radius: 14px; background: var(--bg-2); border: 2px solid var(--line); font-family: var(--display); font-weight: 800; font-size: 22px; color: var(--fg); }
.tip-custom { display: flex; align-items: center; gap: 6px; height: 52px; border-radius: 14px; background: var(--bg-2); border: 1px solid var(--line); padding: 0 16px; }
.tip-custom span { color: var(--fg-3); font-weight: 700; font-size: 17px; }
.tip-custom-in { flex: 1; background: none; border: none; outline: none; color: var(--fg); font-size: 16px; font-weight: 700; }
/* upload progress overlay */
.upl-overlay { position: absolute; inset: 0; z-index: 400; display: flex; align-items: center; justify-content: center; background: rgba(0,0,0,0.55); backdrop-filter: blur(6px); animation: fadeIn 0.2s; }
.upl-card { display: flex; flex-direction: column; align-items: center; text-align: center; padding: 26px 30px; border-radius: 22px; background: var(--bg-2); border: 1px solid var(--line-2); box-shadow: 0 24px 60px -16px rgba(0,0,0,0.7); position: relative; }
.upl-ring { margin-bottom: -50px; }
.upl-pct { font-family: var(--display); font-weight: 800; font-size: 17px; margin-top: 6px; }
.upl-label { font-size: 15px; font-weight: 700; margin-top: 14px; }
.upl-sub { font-size: 12px; color: var(--fg-3); margin-top: 4px; max-width: 22ch; }
.nc-persona { display: flex; align-items: center; gap: 7px; font-size: 12.5px; color: var(--fg-2); background: var(--bg-2); border: 1px solid var(--line); border-radius: 11px; padding: 10px 13px; margin-bottom: 16px; }
.nc-persona b { color: var(--fg); }
.nc-preview { display: flex; align-items: center; justify-content: space-around; gap: 6px; background: var(--bg-3); border: 1px solid var(--line-2); border-radius: 18px; padding: 12px 14px; margin-bottom: 18px; }
.nc-prev-item { width: 38px; height: 38px; border-radius: 11px; background: var(--bg-2); display: flex; align-items: center; justify-content: center; color: var(--fg-2); }
.nc-prev-fab { width: 44px; height: 44px; border-radius: 50%; background: var(--accent); color: var(--accent-ink); display: flex; align-items: center; justify-content: center; flex: none; }
.nc-row { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 13px; background: var(--bg-2); border: 1px solid var(--line); margin-bottom: 9px; }
.nc-row.active { border-color: color-mix(in srgb, var(--accent) 40%, var(--line)); }
.nc-ic { width: 26px; display: flex; align-items: center; justify-content: center; color: var(--fg-2); flex: none; }
.nc-lb { flex: 1; font-size: 14.5px; font-weight: 600; }
.nc-ord { display: flex; gap: 3px; }
.nc-ord button { width: 30px; height: 30px; border-radius: 8px; background: var(--bg-3); color: var(--fg-2); display: flex; align-items: center; justify-content: center; }
.nc-ord button:first-child svg { transform: rotate(180deg); }
.nc-ord button:disabled { opacity: 0.3; }
.an-locked { position: relative; }
.an-locked-veil { position: absolute; inset: 0; border-radius: 18px; background: color-mix(in srgb, var(--bg) 50%, transparent); backdrop-filter: blur(6px); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 9px; z-index: 3; }
.an-locked-veil .alv-t { font-size: 13.5px; font-weight: 700; }
.an-locked-veil .alv-btn { display: inline-flex; align-items: center; gap: 6px; padding: 8px 16px; border-radius: 999px; background: linear-gradient(135deg,#6B8299,#4D6980); color: #fff; font-size: 12.5px; font-weight: 800; }
.an-locked-veil .alv-btn svg { stroke: #fff; }
.an-hero { border-radius: 20px; padding: 22px; border: 1px solid var(--line); background: linear-gradient(155deg, var(--bg-3), var(--bg-2)); margin-bottom: 14px; position: relative; overflow: hidden; }
.an-hero .lbl { font-size: 13px; color: var(--fg-2); font-weight: 600; }
.an-big { font-family: var(--display); font-weight: 800; font-size: 50px; letter-spacing: -0.035em; line-height: 1; margin-top: 4px; }
.an-delta { font-family: var(--mono); font-size: 12px; color: var(--ok); margin-top: 6px; display: inline-flex; align-items: center; gap: 5px; }
.an-spark { display: flex; align-items: flex-end; gap: 3px; height: 50px; margin-top: 16px; }
.an-spark i { flex: 1; background: var(--accent); border-radius: 3px 3px 0 0; opacity: 0.5; display: block; transition: opacity 0.2s, height 0.4s var(--ease-out); }
.an-spark i.hi { opacity: 1; }
.an-mini { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-bottom: 14px; }
.an-mini .m { border: 1px solid var(--line); border-radius: 15px; padding: 15px; background: var(--bg-2); }
.an-mini .m-ic { color: var(--accent); margin-bottom: 8px; display: flex; }
.an-mini .m-ic svg { stroke: currentColor; }
.an-mini .mv { font-family: var(--display); font-weight: 800; font-size: 23px; letter-spacing: -0.02em; }
.an-mini .ml { font-size: 11px; color: var(--fg-3); margin-top: 3px; }
.an-panel { border: 1px solid var(--line); border-radius: 18px; padding: 20px; background: var(--bg-2); margin-bottom: 14px; }
.an-panel h4 { font-size: 14px; font-weight: 700; margin-bottom: 16px; display: flex; align-items: center; gap: 8px; }
.an-panel h4 .h4-ic { color: var(--accent); display: flex; flex: none; }
.an-panel h4 .h4-ic svg { stroke: currentColor; }
.an-panel h4 .live { font-family: var(--mono); font-size: 10px; color: var(--ok); display: flex; align-items: center; gap: 5px; margin-left: auto; }
.an-panel h4 .live::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--ok); box-shadow: 0 0 8px var(--ok); animation: blink 1.6s infinite; }
@keyframes blink { 50% { opacity: 0.3; } }
.an-row { display: flex; align-items: center; gap: 12px; padding: 11px 0; }
.an-row .ico { flex: none; }
.an-row .rn { font-size: 13.5px; font-weight: 600; flex: none; width: 92px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.an-row .flag { font-size: 18px; width: 26px; text-align: center; flex: none; }
.an-bar-track { flex: 1; height: 8px; border-radius: 8px; background: var(--bg-3); overflow: hidden; }
.an-bar-fill { height: 100%; border-radius: 8px; background: var(--accent); transition: width 0.6s var(--ease-out); }
.egrad-ic svg { stroke: currentColor; }
.an-row .rv { font-family: var(--mono); font-size: 12.5px; color: var(--fg-2); width: 40px; text-align: right; flex: none; }
.an-donut-wrap { display: flex; align-items: center; gap: 22px; }
.an-donut { width: 118px; height: 118px; border-radius: 50%; flex: none; position: relative; }
.an-donut::after { content: ""; position: absolute; inset: 17px; border-radius: 50%; background: var(--bg-2); }
.an-donut .ctr { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; z-index: 2; }
.an-donut .ctr b { font-family: var(--display); font-weight: 800; font-size: 22px; }
.an-donut .ctr span { font-size: 10px; color: var(--fg-3); }
.an-legend { display: flex; flex-direction: column; gap: 10px; flex: 1; }
.an-legend .lg { display: flex; align-items: center; gap: 9px; font-size: 13px; }
.an-legend .lg .dot { width: 10px; height: 10px; border-radius: 3px; flex: none; }
.an-legend .lg .lv { margin-left: auto; font-family: var(--mono); font-size: 12px; color: var(--fg-2); }

/* ===== SALES (Shop command centre) ===== */
.sale-connect { display: flex; align-items: center; gap: 12px; width: 100%; padding: 14px 16px; border-radius: 16px; margin-bottom: 14px; background: linear-gradient(135deg, rgba(var(--brand-rgb),0.14), rgba(var(--brand2-rgb),0.06)); border: 1px solid rgba(var(--brand-rgb),0.3); color: var(--fg); }
.sale-connect .sc-ic { width: 40px; height: 40px; border-radius: 12px; background: var(--accent); color: var(--accent-ink); display: flex; align-items: center; justify-content: center; flex: none; }
.sale-connect .sc-meta { flex: 1; text-align: left; display: flex; flex-direction: column; line-height: 1.3; }
.sale-connect .sc-meta b { font-size: 14px; }
.sale-connect .sc-meta span { font-size: 12px; color: var(--fg-3); }
.payout-panel { background: linear-gradient(150deg, rgba(138,255,107,0.1), var(--bg-2)); border-color: rgba(138,255,107,0.22); }
.payout-chip { margin-left: auto; display: inline-flex; align-items: center; gap: 4px; font-family: var(--mono); font-size: 10.5px; font-weight: 600; color: var(--ok); background: rgba(28,156,74,0.12); padding: 3px 9px; border-radius: 999px; }
.payout-row { display: flex; align-items: center; gap: 14px; }
.payout-big { font-family: var(--display); font-weight: 800; font-size: 30px; letter-spacing: -0.025em; line-height: 1; }
.payout-sub { font-family: var(--mono); font-size: 11px; color: var(--fg-3); margin-top: 5px; }
.payout-row .btn { margin-left: auto; flex: none; }
.payout-fee { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 14px; padding-top: 13px; border-top: 1px solid var(--line); }
.pf-fee-l { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 600; color: var(--fg-3); }
.pf-fee-v { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 800; }
.pf-fee-up { display: inline-flex; align-items: center; gap: 4px; font-size: 11px; font-weight: 800; color: var(--accent-ink); background: var(--accent); padding: 4px 9px; border-radius: 999px; }
.seller-thumb { width: 34px; height: 34px; border-radius: 9px; overflow: hidden; display: block; background: var(--bg-4); }
.seller-thumb img { width: 100%; height: 100%; object-fit: cover; }
.an-row .rn .seller-units { display: block; font-size: 10.5px; font-weight: 600; color: var(--fg-3); margin-top: 1px; }
.an-row .rn { line-height: 1.2; }
.sale-orders { display: flex; flex-direction: column; }
.sale-order { display: flex; align-items: center; gap: 12px; padding: 11px 0; border-top: 1px solid var(--line); }
.sale-order:first-child { border-top: none; }
.so-thumb { width: 42px; height: 42px; border-radius: 11px; overflow: hidden; flex: none; background: var(--bg-4); }
.so-thumb img { width: 100%; height: 100%; object-fit: cover; }
.so-meta { flex: 1; min-width: 0; }
.so-name { font-size: 13.5px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.so-buyer { font-size: 11.5px; color: var(--fg-3); margin-top: 1px; }
.so-right { text-align: right; flex: none; display: flex; flex-direction: column; align-items: flex-end; gap: 4px; }
.so-amt { font-family: var(--mono); font-weight: 700; font-size: 13px; }
.ord-status { font-size: 10px; font-weight: 700; padding: 3px 8px; border-radius: 999px; letter-spacing: 0.02em; }
.ord-status.st-paid { color: #1C9C4A; background: rgba(28,156,74,0.14); }
.ord-status.st-shipped { color: #2A6FDB; background: rgba(42,111,219,0.16); }
.ord-status.st-done { color: var(--fg-2); background: var(--bg-3); }
.ord-status.st-proc { color: #C8821A; background: rgba(200,130,26,0.16); }
.lowstock-tag { margin-left: auto; font-family: var(--mono); font-size: 11px; font-weight: 700; color: #C8821A; background: rgba(200,130,26,0.14); padding: 4px 10px; border-radius: 999px; flex: none; }
.sale-manage { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; height: 48px; border-radius: 14px; background: var(--bg-3); border: 1px solid var(--line); color: var(--fg); font-size: 14px; font-weight: 700; }
.sale-manage:active { background: var(--bg-4); }
.an-earn { border-radius: 20px; padding: 22px; border: 1px solid rgba(138,255,107,0.25); background: linear-gradient(150deg, rgba(138,255,107,0.12), var(--bg-2)); margin-bottom: 14px; }
.an-earn .el { font-size: 13px; color: var(--fg-2); font-weight: 600; }
.an-earn .ev { font-family: var(--display); font-weight: 800; font-size: 40px; letter-spacing: -0.03em; margin: 4px 0 2px; }
.an-earn .es { font-family: var(--mono); font-size: 12px; color: var(--ok); }

/* ---- payouts (Stripe Connect) ---- */
.payout-setup { border: 1px solid var(--line-2); border-radius: 18px; padding: 16px; margin-bottom: 22px; background: var(--bg-2); }
.payout-setup .ps-head { display: flex; align-items: center; gap: 11px; margin-bottom: 14px; }
.payout-setup .ps-ic { width: 38px; height: 38px; border-radius: 11px; background: #635BFF; color: #fff; display: flex; align-items: center; justify-content: center; flex: none; }
.payout-setup .ps-meta { display: flex; flex-direction: column; min-width: 0; }
.payout-setup .ps-meta b { font-size: 14.5px; font-weight: 700; }
.payout-setup .ps-meta span { font-size: 12.5px; color: var(--fg-3); }
.payout-setup .ps-legal { display: flex; align-items: center; gap: 6px; justify-content: center; font-size: 11px; color: var(--fg-3); margin-top: 10px; }
.payout-live { display: flex; align-items: center; gap: 12px; border: 1px solid rgba(138,255,107,0.3); background: linear-gradient(150deg, rgba(138,255,107,0.1), var(--bg-2)); border-radius: 16px; padding: 14px 16px; margin-bottom: 22px; }
.payout-live .pl-badge { width: 32px; height: 32px; border-radius: 50%; background: var(--ok); color: #062b14; display: flex; align-items: center; justify-content: center; flex: none; }
.payout-live .pl-meta { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.payout-live .pl-meta b { font-size: 14.5px; font-weight: 700; }
.payout-live .pl-meta span { font-size: 12px; color: var(--fg-3); }
.payout-live .pl-link { font-size: 13px; font-weight: 700; color: var(--accent); flex: none; }

/* ---- moments ---- */
.moments-rail { display: flex; gap: 14px; overflow-x: auto; padding: 2px 2px 18px; margin: 0 -2px 6px; scrollbar-width: none; }
.moments-rail::-webkit-scrollbar { display: none; }
.moment-bubble { display: flex; flex-direction: column; align-items: center; gap: 7px; flex: none; width: 68px; }
.mb-ring { position: relative; width: 66px; height: 66px; border-radius: 50%; padding: 2.5px; background: conic-gradient(from 210deg, #E8FF59, #8AFF6B, #5CC8FF, #7C5CFF, #E8FF59); display: flex; align-items: center; justify-content: center; }
.mb-inner { width: 100%; height: 100%; border-radius: 50%; overflow: hidden; display: flex; align-items: center; justify-content: center; border: 2.5px solid var(--bg); }
.mb-add { position: absolute; bottom: -2px; right: -2px; width: 22px; height: 22px; border-radius: 50%; background: var(--accent); color: var(--accent-ink); display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 15px; border: 2.5px solid var(--bg); }
.mb-name { font-size: 11px; font-weight: 600; color: var(--fg-2); max-width: 68px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ---- linked NFC card row (in Tappt Link sheet) ---- */
.link-card-row { display: flex; align-items: center; gap: 13px; background: var(--bg-3); border-radius: 15px; padding: 12px 14px; margin-bottom: 10px; text-align: left; }
.lc-thumb { width: 56px; height: 36px; border-radius: 7px; overflow: hidden; flex: none; background: #000; }
.lc-thumb img { width: 100%; height: 100%; object-fit: cover; }
.lc-meta { flex: 1; min-width: 0; }
.lc-t { font-weight: 700; font-size: 13.5px; }
.lc-s { font-size: 11.5px; color: var(--fg-3); }
.save-contact-btn {
  display: inline-flex; align-items: center; gap: 9px; white-space: nowrap;
  margin: 18px auto 0;
  height: 46px; padding: 0 22px;
  border-radius: 999px;
  background: #fff; color: #0B0B0C;
  font-size: 14.5px; font-weight: 700;
  box-shadow: 0 8px 24px -8px rgba(0,0,0,0.5), inset 0 1px 0 rgba(255,255,255,0.4);
  transition: transform 0.2s var(--ease-out);
}
.save-contact-btn:active { transform: scale(0.96); }
.save-contact-btn svg { width: 17px; height: 17px; }

/* ---- persona switcher chip (on profile) ---- */
.persona-chip {
  display: inline-flex; align-items: center; gap: 8px;
  margin: 0 auto 9px;
  height: 34px; padding: 0 6px 0 13px;
  border-radius: 999px;
  background: rgba(255,255,255,0.14);
  backdrop-filter: blur(16px) saturate(160%);
  -webkit-backdrop-filter: blur(16px) saturate(160%);
  border: 1px solid rgba(255,255,255,0.2);
  color: #fff; font-size: 13px; font-weight: 700;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.25);
}
.persona-chip .pc-emoji { display: inline-flex; align-items: center; }
.persona-chip .pc-caret { width: 22px; height: 22px; border-radius: 50%; background: rgba(255,255,255,0.18); display: flex; align-items: center; justify-content: center; }
.persona-chip .pc-caret svg { width: 13px; height: 13px; }

/* ---- persona sheet cards ---- */
.persona-card {
  display: flex; align-items: center; gap: 13px;
  background: var(--bg-2); border: 1.5px solid var(--line);
  border-radius: 16px; padding: 13px 14px; cursor: pointer;
  transition: border-color 0.2s, background 0.2s, transform 0.15s;
}
.persona-card:active { transform: scale(0.99); }
.persona-card.on { border-color: var(--accent); background: var(--bg-3); }
.persona-emoji { width: 46px; height: 46px; border-radius: 13px; display: flex; align-items: center; justify-content: center; color: #fff; flex: none; box-shadow: inset 0 1px 0 rgba(255,255,255,0.2); }2); }
.persona-meta { flex: 1; min-width: 0; }
.persona-name { font-weight: 700; font-size: 15px; display: flex; align-items: center; gap: 8px; }
.live-dot { font-family: var(--mono); font-size: 9px; font-weight: 700; letter-spacing: 0.08em; color: var(--ok); }
.persona-sum { font-size: 12px; color: var(--fg-3); margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.persona-edit { width: 34px; height: 34px; border-radius: 10px; background: var(--bg-3); color: var(--fg-2); display: flex; align-items: center; justify-content: center; flex: none; }
.persona-edit:hover { color: var(--fg); }
.persona-preset-row { display: flex; gap: 10px; flex-wrap: wrap; }
.persona-preset { display: flex; flex-direction: column; align-items: center; gap: 6px; width: 70px; padding: 12px 6px; border-radius: 14px; background: var(--bg-3); border: 1px solid var(--line); transition: border-color 0.2s; }
.persona-preset:hover { border-color: var(--line-2); }
.persona-preset .pp-emoji { display: flex; align-items: center; justify-content: center; color: var(--fg); }
.persona-preset .pp-label { font-size: 11px; font-weight: 600; }

/* ---- connections ---- */
.conn-map { position: relative; height: 168px; border-radius: 18px; overflow: hidden; margin-bottom: 14px; border: 1px solid var(--line); background: radial-gradient(120% 90% at 50% 0%, rgba(107,130,155,0.18), transparent 60%), var(--bg-2); }
.action-map { background: radial-gradient(130% 100% at 50% -10%, rgba(107,130,153,0.22), transparent 55%), linear-gradient(180deg, #0d1320, #0a0e16); }
[data-theme="light"] .action-map { background: radial-gradient(130% 100% at 50% -10%, rgba(107,130,153,0.16), transparent 55%), linear-gradient(180deg, #eef1f6, #e4e8f0); }
.am-world { position: absolute; inset: 0; width: 100%; height: 100%; }
.am-land path { fill: rgba(138,255,107,0.10); stroke: rgba(138,255,107,0.30); stroke-width: 0.5; }
[data-theme="light"] .am-land path { fill: rgba(31,138,91,0.12); stroke: rgba(31,138,91,0.35); }
.am-graticule { position: absolute; inset: 0; background-image: linear-gradient(rgba(255,255,255,0.045) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,0.045) 1px, transparent 1px); background-size: 26px 26px; -webkit-mask: radial-gradient(120% 100% at 50% 40%, #000 60%, transparent); mask: radial-gradient(120% 100% at 50% 40%, #000 60%, transparent); }
[data-theme="light"] .am-graticule { background-image: linear-gradient(rgba(0,0,0,0.05) 1px, transparent 1px), linear-gradient(90deg, rgba(0,0,0,0.05) 1px, transparent 1px); }
.am-arcs { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.am-arc { fill: none; stroke: var(--accent); stroke-width: 1; stroke-dasharray: 3 3; opacity: 0.5; vector-effect: non-scaling-stroke; animation: arcDash 6s linear infinite; }
@keyframes arcDash { to { stroke-dashoffset: -24; } }
.am-head { position: absolute; top: 12px; left: 14px; display: flex; align-items: center; gap: 8px; font-family: var(--mono); font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--fg-2); z-index: 3; }
.am-live { display: inline-flex; align-items: center; gap: 6px; color: var(--ok); font-weight: 700; background: rgba(0,0,0,0.5); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border: 1px solid rgba(255,255,255,0.16); border-radius: 999px; padding: 6px 12px; }
.am-live-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--ok); box-shadow: 0 0 8px var(--ok); animation: blink 1.6s infinite; }
/* real MapLibre map */
.real-map { height: 200px; }
.real-map .am-canvas { position: absolute; inset: 0; }
.real-map .maplibregl-canvas { outline: none; }
.real-map .am-head, .real-map .conn-map-cap { pointer-events: none; text-shadow: 0 1px 4px rgba(0,0,0,0.7); }
.am-marker { width: 12px; height: 12px; position: relative; cursor: pointer; }
.am-marker .amk-dot { position: absolute; top: 50%; left: 50%; width: 9px; height: 9px; margin: -4.5px 0 0 -4.5px; border-radius: 50%; background: var(--brand); box-shadow: 0 0 0 2px rgba(11,11,12,0.55), 0 0 9px rgba(var(--brand-rgb),0.9); animation: amDotPulse 2.4s ease-in-out infinite; }
.am-marker .amk-ring { position: absolute; top: 50%; left: 50%; width: 12px; height: 12px; margin: -6px 0 0 -6px; border-radius: 50%; background: rgba(var(--brand-rgb),0.5); opacity: 0.5; transform: scale(1); transform-origin: center; will-change: transform, opacity; backface-visibility: hidden; animation: amSoftPulse 2.4s ease-out infinite; pointer-events: none; }
.am-marker:hover .amk-dot { transform: scale(1.15); }
@keyframes amDotPulse { 0%, 100% { opacity: 0.85; } 50% { opacity: 1; } }
@keyframes amSoftPulse { 0% { transform: scale(1); opacity: 0.45; } 70% { opacity: 0; } 100% { transform: scale(2.6); opacity: 0; } }
/* rich connection popup */
.conn-pop .maplibregl-popup-content { padding: 0; background: var(--bg-2); border: 1px solid var(--line-2); border-radius: 16px; overflow: hidden; box-shadow: 0 18px 48px -16px rgba(0,0,0,0.7); }
.conn-pop .maplibregl-popup-close-button { color: var(--fg-3); font-size: 18px; padding: 2px 8px; z-index: 2; }
.cp { width: 220px; padding: 14px; font-family: var(--body); color: var(--fg); }
.cp-head { display: flex; align-items: center; gap: 11px; margin-bottom: 11px; }
.cp-av { width: 42px; height: 42px; border-radius: 50%; flex: none; display: flex; align-items: center; justify-content: center; color: #fff; font-family: var(--display); font-weight: 800; font-size: 18px; background-size: cover; background-position: center; }
.cp-id { min-width: 0; }
.cp-name { font-family: var(--display); font-weight: 800; font-size: 15px; letter-spacing: -0.01em; }
.cp-sub { font-size: 11.5px; color: var(--fg-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cp-rows { display: flex; flex-direction: column; gap: 5px; margin-bottom: 10px; }
.cp-row { display: flex; align-items: center; gap: 7px; font-size: 12px; color: var(--fg-2); }
.cp-row span { font-size: 11px; opacity: 0.8; }
.cp-shared { display: flex; flex-wrap: wrap; gap: 5px; margin-bottom: 9px; }
.cp-chip { font-size: 10px; font-weight: 700; text-transform: capitalize; color: var(--fg-2); background: var(--bg-3); border: 1px solid var(--line); padding: 3px 8px; border-radius: 999px; }
.cp-tags { display: flex; flex-wrap: wrap; gap: 5px; margin-bottom: 9px; }
.cp-tag { font-size: 10px; font-weight: 700; color: var(--accent-ink); background: var(--accent); padding: 3px 8px; border-radius: 999px; }
.cp-foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding-top: 10px; border-top: 1px solid var(--line); }
.cp-back { font-size: 11px; font-weight: 700; color: var(--fg-3); }
.cp-back.ok { color: var(--ok); }
.cp-persona { font-size: 10px; font-weight: 700; color: var(--fg-3); text-transform: uppercase; letter-spacing: 0.05em; }
.maplibregl-popup-content { background: var(--bg-2); color: var(--fg); border: 1px solid var(--line); border-radius: 12px; font-family: var(--body); font-size: 12px; padding: 8px 12px; box-shadow: 0 12px 30px -10px rgba(0,0,0,0.6); }
.maplibregl-popup-content b { font-family: var(--display); font-size: 13px; }
.maplibregl-popup-tip { display: none; }
.conn-map-grid { position: absolute; inset: 0; background-image: linear-gradient(var(--line) 1px, transparent 1px), linear-gradient(90deg, var(--line) 1px, transparent 1px); background-size: 28px 28px; opacity: 0.5; -webkit-mask: radial-gradient(80% 80% at 50% 40%, #000, transparent 80%); mask: radial-gradient(80% 80% at 50% 40%, #000, transparent 80%); }
.conn-pin { position: absolute; width: 10px; height: 10px; border-radius: 50%; background: var(--accent); transform: translate(-50%, -50%); box-shadow: 0 0 0 4px color-mix(in oklch, var(--accent) 22%, transparent), 0 0 12px var(--accent); z-index: 2; }
.conn-pin::after { content: ""; position: absolute; inset: -4px; border-radius: 50%; border: 1px solid var(--accent); opacity: 0.6; animation: pinpulse 2.4s ease-out infinite; }
.conn-pin.big { width: 14px; height: 14px; }
@keyframes pinpulse { 0% { transform: scale(1); opacity: 0.6; } 100% { transform: scale(2.6); opacity: 0; } }
.conn-map-cap { position: absolute; bottom: 12px; left: 14px; font-family: var(--mono); font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--fg-2); z-index: 3; }
/* expand button on the inline map */
.am-expand { position: absolute; top: 10px; right: 10px; z-index: 4; width: 34px; height: 34px; border-radius: 10px; background: rgba(0,0,0,0.5); backdrop-filter: blur(10px); border: 1px solid rgba(255,255,255,0.18); color: #fff; display: flex; align-items: center; justify-content: center; }
.am-expand:active { transform: scale(0.92); }
/* expanded map overlay — rounded box within the phone frame */
.map-expand-scrim { position: absolute; inset: 0; z-index: 320; background: rgba(0,0,0,0.62); backdrop-filter: blur(5px); display: flex; align-items: center; justify-content: center; padding: 22px 14px calc(22px + env(safe-area-inset-bottom)); animation: fadeIn 0.2s; }
.map-expand { position: relative; width: 100%; height: 100%; border-radius: 24px; overflow: hidden; border: 1px solid var(--line-2); box-shadow: 0 24px 70px -20px rgba(0,0,0,0.8); animation: sheetUp 0.3s var(--ease-out); }
.map-expand-canvas { position: absolute; inset: 0; }
.map-expand-canvas .maplibregl-canvas { outline: none; }
.map-expand-head { position: absolute; top: 14px; left: 16px; display: flex; align-items: center; gap: 8px; font-family: var(--mono); font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--fg-2); pointer-events: none; text-shadow: 0 1px 4px rgba(0,0,0,0.7); z-index: 3; }
.map-expand-x { position: relative; top: auto; right: auto; z-index: 4; width: 38px; height: 38px; border-radius: 50%; background: rgba(0,0,0,0.55); backdrop-filter: blur(10px); border: 1px solid rgba(255,255,255,0.2); color: #fff; display: flex; align-items: center; justify-content: center; flex: none; }
.map-expand-x:active { transform: scale(0.92); }
/* fullscreen map controls */
.mx-top { position: absolute; top: 12px; left: 12px; right: 12px; z-index: 5; display: flex; align-items: center; gap: 8px; }
.mx-live { font-family: var(--mono); font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; padding: 8px 10px; border-radius: 999px; background: rgba(0,0,0,0.5); backdrop-filter: blur(10px); flex: none; }
.mx-search { margin-left: auto; display: flex; align-items: center; gap: 4px; background: rgba(0,0,0,0.5); backdrop-filter: blur(10px); border: 1px solid rgba(255,255,255,0.16); border-radius: 999px; padding: 2px; }
.mx-search.open { flex: 1; }
.mx-search-input { flex: 1; min-width: 0; background: none; border: none; outline: none; color: #fff; font-size: 16px; padding: 0 6px 0 12px; }
.mx-search-input::placeholder { color: rgba(255,255,255,0.5); }
.mx-icon-btn { width: 34px; height: 34px; border-radius: 50%; flex: none; display: flex; align-items: center; justify-content: center; color: #fff; }
.mx-filters { position: absolute; top: 58px; left: 0; right: 0; z-index: 5; display: flex; gap: 8px; overflow-x: auto; padding: 0 12px; scrollbar-width: none; }
.mx-filters::-webkit-scrollbar { display: none; }
.mx-chip { flex: none; padding: 7px 14px; border-radius: 999px; font-size: 12.5px; font-weight: 700; background: rgba(0,0,0,0.5); backdrop-filter: blur(10px); border: 1px solid rgba(255,255,255,0.16); color: #fff; white-space: nowrap; }
.mx-chip.on { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); }
/* single filter button + dropdown */
.mx-filter-wrap { position: absolute; top: 58px; left: 12px; z-index: 6; }
.mx-filter-btn { display: flex; align-items: center; gap: 7px; padding: 8px 14px; border-radius: 999px; font-size: 13px; font-weight: 700; background: rgba(0,0,0,0.55); backdrop-filter: blur(10px); border: 1px solid rgba(255,255,255,0.18); color: #fff; }
.mx-filter-btn.active { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); }
.mx-filter-clear { display: inline-flex; align-items: center; justify-content: center; margin-left: 2px; opacity: 0.7; }
.mx-filter-veil { position: fixed; inset: 0; z-index: 6; }
.mx-filter-menu { position: absolute; top: 44px; left: 0; z-index: 7; min-width: 180px; background: var(--bg-2); border: 1px solid var(--line-2); border-radius: 16px; padding: 6px; box-shadow: 0 18px 48px -14px rgba(0,0,0,0.7); }
.mx-fm-item { display: flex; align-items: center; justify-content: space-between; width: 100%; padding: 11px 12px; border-radius: 10px; font-size: 14px; font-weight: 600; color: var(--fg); text-align: left; }
.mx-fm-item:active { background: var(--bg-3); }
.mx-fm-item.on { color: var(--accent); }
.mx-fm-sep { font-size: 10px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--fg-3); padding: 8px 12px 4px; }
.mx-locate { position: absolute; bottom: 46px; right: 14px; z-index: 5; width: 46px; height: 46px; border-radius: 50%; background: rgba(0,0,0,0.6); backdrop-filter: blur(10px); border: 1px solid rgba(255,255,255,0.2); color: var(--accent); display: flex; align-items: center; justify-content: center; box-shadow: 0 6px 18px -6px rgba(0,0,0,0.6); }
.mx-locate:active { transform: scale(0.9); }
.map-expand-cap { position: absolute; bottom: 14px; left: 16px; right: 70px; font-family: var(--mono); font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--fg-2); pointer-events: none; text-shadow: 0 1px 4px rgba(0,0,0,0.7); z-index: 3; }ents: none; text-shadow: 0 1px 4px rgba(0,0,0,0.7); z-index: 3; }
.conn-list { display: flex; flex-direction: column; gap: 10px; }
.conn-actions { display: flex; gap: 10px; margin-bottom: 14px; flex-wrap: wrap; }
.conn-leadbadge { display: inline-flex; align-items: center; justify-content: center; min-width: 18px; height: 18px; padding: 0 5px; margin-left: 5px; border-radius: 999px; background: var(--accent); color: var(--accent-ink); font-size: 11px; font-weight: 800; }
.leads-count { display: inline-flex; align-items: center; justify-content: center; min-width: 22px; height: 22px; padding: 0 6px; margin-left: 6px; border-radius: 999px; background: var(--accent); color: var(--accent-ink); font-size: 12px; font-weight: 800; vertical-align: 2px; }
.leads-empty { text-align: center; padding: 40px 28px; }
.leads-empty .le-ic { display: inline-flex; width: 56px; height: 56px; border-radius: 16px; background: var(--bg-3); color: var(--fg-3); align-items: center; justify-content: center; margin-bottom: 14px; }
.leads-empty .le-t { font-family: var(--display); font-weight: 800; font-size: 18px; margin-bottom: 6px; }
.leads-empty .le-s { font-size: 13px; color: var(--fg-3); line-height: 1.5; max-width: 30ch; margin: 0 auto; }
.leads-list { display: flex; flex-direction: column; gap: 10px; padding: 4px 0; }
.lead-row { display: flex; align-items: center; gap: 12px; padding: 12px; border-radius: 14px; background: var(--bg-2); border: 1px solid var(--line); }
.lead-av { width: 40px; height: 40px; border-radius: 50%; flex: none; overflow: hidden; display: flex; align-items: center; justify-content: center; background: linear-gradient(135deg,#6B8299,#3a4f63); color: #fff; font-family: var(--display); font-weight: 800; font-size: 17px; }
.lead-av img { width: 100%; height: 100%; object-fit: cover; }
.lead-info { flex: 1; min-width: 0; text-align: left; }
.lead-email { font-size: 14px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lead-phone { font-size: 12.5px; color: var(--fg-2); }
.lead-meta { font-size: 11px; color: var(--fg-3); margin-top: 2px; }
.lead-convert { width: 36px; height: 36px; border-radius: 10px; flex: none; background: var(--bg-3); border: 1px solid var(--line); color: var(--fg); display: flex; align-items: center; justify-content: center; }
.lead-convert:active { background: var(--accent); color: var(--accent-ink); }
.lc-done { text-align: center; }
.lc-done .lc-check { width: 48px; height: 48px; border-radius: 50%; background: var(--accent); color: var(--accent-ink); display: flex; align-items: center; justify-content: center; margin: 0 auto 12px; }
.conn-photo-wrap { display: flex; justify-content: center; margin: 4px 0 18px; }
.conn-photo { position: relative; width: 96px; height: 96px; border-radius: 50%; background: var(--bg-3); border: 1px solid var(--line); display: flex; align-items: center; justify-content: center; color: var(--fg-3); overflow: hidden; }
.conn-photo img { width: 100%; height: 100%; object-fit: cover; }
.conn-photo-edit { position: absolute; bottom: 2px; right: 2px; width: 30px; height: 30px; border-radius: 50%; background: var(--fg); color: var(--bg); display: flex; align-items: center; justify-content: center; border: 2px solid var(--bg-2); }
.conn-act { flex: 1; height: 44px; border-radius: 13px; background: var(--bg-3); border: 1px solid var(--line); color: var(--fg); font-size: 13px; font-weight: 700; display: flex; align-items: center; justify-content: center; gap: 7px; }
.conn-act.primary { background: var(--fg); color: var(--bg); border-color: var(--fg); }
.conn-act:active { opacity: 0.85; }
.conn-map-locked { position: relative; display: block; width: 100%; padding: 0; border: none; background: none; margin-bottom: 16px; border-radius: 18px; overflow: hidden; }
.conn-map-locked .conn-map { margin-bottom: 0; filter: saturate(0.7) brightness(0.6); pointer-events: none; }
.cml-veil { position: absolute; inset: 0; z-index: 5; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px; text-align: center; padding: 0 24px; background: linear-gradient(180deg, rgba(8,8,10,0.3), rgba(8,8,10,0.55)); backdrop-filter: blur(1.5px); }
.cml-badge { display: inline-flex; align-items: center; gap: 5px; font-family: var(--mono); font-size: 10px; font-weight: 700; letter-spacing: 0.08em; background: linear-gradient(135deg,var(--brand),var(--brand-deep)); color: #0B0B0C; padding: 5px 11px; border-radius: 999px; margin-bottom: 4px; }
.cml-t { font-family: var(--display); font-weight: 800; font-size: 17px; color: #fff; }
.cml-s { font-size: 12.5px; color: rgba(255,255,255,0.75); }
.conn-seg { max-width: 100%; margin: 0 0 16px; }
.conn-tags-row { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 14px; }
.conn-tag { padding: 7px 14px; border-radius: 999px; font-size: 12.5px; font-weight: 700; background: var(--bg-3); color: var(--fg-2); border: 1px solid var(--line); }
.conn-tag.on { background: var(--fg); color: var(--bg); border-color: var(--fg); }
.conn-tag-pill { font-size: 10px; font-weight: 700; color: var(--fg-2); background: var(--bg-3); border: 1px solid var(--line); padding: 3px 9px; border-radius: 999px; margin-left: 2px; }
.conn-export { width: 100%; margin-top: 16px; height: 46px; border-radius: 14px; background: var(--bg-3); border: 1px solid var(--line); color: var(--fg); font-size: 13.5px; font-weight: 700; display: flex; align-items: center; justify-content: center; gap: 8px; }
.conn-export:active { background: var(--bg-4); }
.conn-row { display: flex; align-items: center; gap: 13px; background: var(--bg-2); border: 1px solid var(--line); border-radius: 16px; padding: 13px 14px; }
.conn-av { width: 46px; height: 46px; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: #fff; font-family: var(--display); font-weight: 800; font-size: 18px; flex: none; }
.conn-info { flex: 1; min-width: 0; }
.conn-name { font-weight: 700; font-size: 14.5px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.conn-persona { font-size: 11px; font-weight: 600; color: var(--fg-3); }
.conn-where { font-size: 12px; color: var(--fg-3); margin-top: 1px; }
.conn-got { display: flex; align-items: center; gap: 6px; margin-top: 8px; flex-wrap: wrap; }
.conn-back { font-family: var(--mono); font-size: 10px; letter-spacing: 0.04em; color: var(--fg-3); margin-left: 2px; }
.conn-back.ok { color: var(--ok); }
.conn-chan { display: inline-flex; align-items: center; gap: 5px; font-size: 11.5px; font-weight: 600; color: var(--fg-2); background: var(--bg-3); border: 1px solid var(--line); border-radius: 8px; padding: 4px 9px; }
.conn-chan svg { color: var(--fg-3); flex: none; }
.conn-tile { width: 30px; height: 30px; border-radius: 8px; display: inline-flex; align-items: center; justify-content: center; flex: none; }
.conn-tile svg { color: #fff; }
.conn-tile.email-tile { background: linear-gradient(135deg,#3B82F6,#1d4ed8); }
.conn-tile.phone-tile { background: linear-gradient(135deg,#22C55E,#15803d); }
.conn-tile.link-tile { background: var(--bg-4); }
.conn-tile.link-tile svg { color: var(--fg-2); }
/* connection detail drawer */
.conn-detail { padding-bottom: calc(20px + env(safe-area-inset-bottom)); }
.conn-detail > * { flex: 0 0 auto; }
.conn-detail .cd-actions, .conn-detail .cd-act { flex: 0 0 auto; }
.cd-head { display: flex; align-items: center; gap: 14px; padding: 6px 2px 4px; }
.cd-av { width: 56px; height: 56px; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: #fff; font-weight: 800; font-size: 22px; flex: none; overflow: hidden; }
.cd-av img { width: 100%; height: 100%; object-fit: cover; }
.cd-name { font-family: var(--display); font-weight: 800; font-size: 21px; letter-spacing: -0.02em; }
.cd-meta { font-size: 13px; color: var(--fg-3); margin-top: 2px; }
.cd-where { font-size: 13.5px; color: var(--fg-3); margin: 10px 2px 16px; }
.cd-actions { display: flex; flex-direction: column; gap: 10px; margin-bottom: 16px; }
.cd-act { display: flex; align-items: center; gap: 13px; padding: 14px 16px; border-radius: 14px; background: var(--bg-2); border: 1px solid var(--line); color: var(--fg); font-size: 15px; font-weight: 600; aspect-ratio: auto; }
.cd-act svg { flex: none; color: #fff; }
.cd-act.cda-email svg { color: #3B82F6; }
.cd-act.cda-phone svg { color: #22C55E; }
.cd-act.cda-link svg { color: var(--fg-2); }
.cd-act:active { background: var(--bg-3); }
.cd-empty { font-size: 13.5px; color: var(--fg-3); text-align: center; padding: 14px; }
.cd-fields { background: var(--bg-2); border: 1px solid var(--line); border-radius: 14px; padding: 4px 14px; margin-bottom: 16px; }
.cd-fields-h { font-size: 11px; font-weight: 800; letter-spacing: 0.05em; text-transform: uppercase; color: var(--fg-3); padding: 12px 0 6px; }
.cd-field { display: flex; gap: 12px; padding: 10px 0; border-top: 1px solid var(--line); }
.cd-field:first-of-type { border-top: none; }
.cd-fk { font-size: 13px; color: var(--fg-3); flex: none; width: 92px; }
.cd-fv { font-size: 14px; color: var(--fg); font-weight: 600; word-break: break-word; }
.cd-inlead { display: flex; align-items: center; justify-content: center; gap: 9px; height: 52px; border-radius: 14px; background: rgba(34,197,94,0.12); border: 1px solid rgba(34,197,94,0.3); color: #22C55E; font-size: 14.5px; font-weight: 700; }
.conn-inlead { display: inline-flex; align-items: center; gap: 4px; font-size: 10.5px; font-weight: 800; color: #22C55E; background: rgba(34,197,94,0.13); border-radius: 7px; padding: 2px 7px; margin-left: 7px; vertical-align: 1px; }
.conn-inlead svg { flex: none; }
.conn-row-tap { cursor: pointer; }
.conn-row-tap:active { background: var(--bg-2); }
.cd-tolead { width: 100%; display: flex; align-items: center; justify-content: center; gap: 9px; height: 52px; border-radius: 14px; background: linear-gradient(135deg,#6B8299,#4D6980); color: #fff; font-size: 15px; font-weight: 800; border: none; }
.cd-tolead:active { transform: scale(0.98); }
.cd-close { width: 100%; height: 48px; margin-top: 10px; border-radius: 14px; background: var(--bg-3); border: none; color: var(--fg); font-size: 15px; font-weight: 700; }
.conn-follow { width: 38px; height: 38px; border-radius: 50%; background: var(--bg-3); color: var(--fg); display: flex; align-items: center; justify-content: center; flex: none; transition: background 0.2s; }
.conn-follow:hover { background: var(--bg-4); }

/* ---- refer & earn ---- */
.refer-card { border-radius: 20px; padding: 20px; margin-bottom: 22px; background: linear-gradient(155deg, rgba(var(--brand-rgb),0.12), rgba(var(--brand2-rgb),0.05)); border: 1px solid rgba(var(--brand-rgb),0.28); }
.refer-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }
.refer-badge { display: inline-flex; align-items: center; gap: 5px; font-family: var(--body); font-size: 10px; font-weight: 800; letter-spacing: 0.04em; text-transform: uppercase; background: linear-gradient(135deg,#6B8299,#4D6980); color: #fff; padding: 5px 10px; border-radius: 999px; line-height: 1; }
.refer-badge::before { content: ""; width: 12px; height: 12px; flex: none; background: currentColor; -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'><rect x='3' y='8' width='18' height='4' rx='1'/><path d='M12 8v13'/><path d='M19 12v7a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2v-7'/><path d='M7.5 8a2.5 2.5 0 0 1 0-5A4.8 8 0 0 1 12 8a4.8 8 0 0 1 4.5-5 2.5 2.5 0 0 1 0 5'/></svg>") center/contain no-repeat; mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'><rect x='3' y='8' width='18' height='4' rx='1'/><path d='M12 8v13'/><path d='M19 12v7a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2v-7'/><path d='M7.5 8a2.5 2.5 0 0 1 0-5A4.8 8 0 0 1 12 8a4.8 8 0 0 1 4.5-5 2.5 2.5 0 0 1 0 5'/></svg>") center/contain no-repeat; }
.refer-rate { font-family: var(--display); font-weight: 800; font-size: 26px; letter-spacing: -0.02em; }
.refer-rate span { font-size: 13px; color: var(--fg-3); font-weight: 600; }
.refer-h { font-family: var(--display); font-weight: 800; font-size: 22px; letter-spacing: -0.02em; margin-bottom: 6px; }
.refer-p { font-size: 13.5px; color: var(--fg-2); line-height: 1.5; margin-bottom: 16px; }
.refer-link { display: flex; align-items: center; gap: 11px; background: var(--bg); border: 1px solid var(--line); border-radius: 13px; padding: 8px 8px 8px 14px; }
.refer-link .rl-ico { width: 24px; height: 24px; border-radius: 7px; background: var(--accent); color: var(--accent-ink); display: flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 800; flex: none; }
.refer-link .rl-url { flex: 1; font-family: var(--mono); font-size: 13px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.refer-link .rl-copy { background: var(--fg); color: var(--bg); font-size: 12.5px; font-weight: 700; padding: 8px 14px; border-radius: 9px; flex: none; }
.refer-steps { display: flex; flex-direction: column; gap: 12px; margin-top: 18px; }
.refer-step { display: flex; align-items: center; gap: 12px; }
.refer-step .rs-n { width: 26px; height: 26px; border-radius: 50%; border: 1.5px solid var(--accent); color: var(--accent); display: flex; align-items: center; justify-content: center; font-family: var(--mono); font-size: 12px; font-weight: 700; flex: none; }
.refer-step .rs-t { font-weight: 700; font-size: 13.5px; }
.refer-pro-nudge { display: flex; align-items: center; gap: 10px; width: 100%; margin-top: 14px; padding: 11px 13px; border-radius: 13px; background: rgba(var(--brand-rgb),0.08); border: 1px solid rgba(var(--brand-rgb),0.3); text-align: left; font-size: 12.5px; color: var(--fg-2); line-height: 1.35; }
.refer-pro-nudge b { color: var(--fg); }
.refer-pro-nudge .pro-badge { flex: none; }
.conn-cap-nudge { display: flex; align-items: center; gap: 10px; width: 100%; margin-top: 12px; padding: 12px 14px; border-radius: 14px; background: rgba(var(--brand-rgb),0.08); border: 1px solid rgba(var(--brand-rgb),0.3); text-align: left; font-size: 12.5px; color: var(--fg-2); line-height: 1.35; }
.conn-cap-nudge b { color: var(--fg); }
.conn-cap-nudge .pro-badge { flex: none; }
.conn-cap-nudge svg { flex: none; margin-left: auto; color: var(--fg-3); }
.persona-pro-nudge { display: flex; align-items: center; gap: 10px; width: 100%; padding: 13px 14px; border-radius: 14px; background: rgba(var(--brand-rgb),0.08); border: 1px solid rgba(var(--brand-rgb),0.3); text-align: left; font-size: 12.5px; color: var(--fg-2); line-height: 1.35; }
.persona-pro-nudge b { color: var(--fg); }
.persona-pro-nudge .pro-badge { flex: none; }
.persona-pro-nudge svg { flex: none; margin-left: auto; color: var(--fg-3); }
.pro-tools { display: flex; flex-direction: column; gap: 10px; margin-top: 14px; }
.pro-tool { display: flex; align-items: center; gap: 12px; width: 100%; padding: 13px 14px; border-radius: 14px; background: var(--bg-2); border: 1px solid var(--line); text-align: left; transition: border-color 0.2s; }
.pro-tool.on { border-color: rgba(var(--brand-rgb),0.4); }
.pro-tool .pt-ic { width: 36px; height: 36px; border-radius: 10px; background: var(--bg-3); display: flex; align-items: center; justify-content: center; color: var(--accent); flex: none; }
.pro-tool .pt-meta { flex: 1; display: flex; flex-direction: column; gap: 2px; }
.pro-tool .pt-t { font-size: 14px; font-weight: 700; display: flex; align-items: center; gap: 6px; }
.pro-tool .pt-s { font-size: 12px; color: var(--fg-3); line-height: 1.35; }
.pro-tool > svg { flex: none; color: var(--fg-3); }
.lc-card { background: var(--bg-2); border: 1px solid var(--line); border-radius: 18px; padding: 18px; }
.lc-t { font-family: var(--display); font-weight: 700; font-size: 17px; }
.lc-s { font-size: 13px; color: var(--fg-3); margin: 2px 0 14px; }
.lc-input { width: 100%; height: 46px; border-radius: 12px; background: var(--bg-3); border: 1px solid var(--line); color: var(--fg); padding: 0 14px; font-size: 14px; outline: none; margin-bottom: 10px; }
.lc-btn { width: 100%; height: 46px; border-radius: 12px; background: var(--fg); color: var(--bg); font-size: 14px; font-weight: 700; }

/* ===== Identity (Pro) block ===== */
.ident-pro { margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--line); }

/* ===== DESIGN SCREEN ===== */
.dz-sec { margin-bottom: 26px; }
.dz-h { font-family: var(--display); font-weight: 800; font-size: 16px; letter-spacing: -0.01em; margin-bottom: 3px; }
.dz-sub { font-size: 12.5px; color: var(--fg-3); margin-bottom: 14px; line-height: 1.4; }
.dz-themes { gap: 12px; }
.theme-card .theme-prev.tcard { display: flex; flex-direction: column; justify-content: flex-end; gap: 4px; padding: 8px; position: relative; overflow: hidden; }
.tcard .tc-bar { height: 8px; border-radius: 4px; background: rgba(255,255,255,0.85); position: relative; z-index: 1; }
.tcard .tc-bar.short { width: 60%; }
.theme-lb .tc-lock { margin-left: 4px; color: var(--fg-3); vertical-align: 0; }
/* theme preview swatches */
/* Classic = brand-blue cover up top, dark page body below (mirrors the real profile) */
.tcard.th-default { background: #0b0b0d; }
.tcard.th-default::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 58%; background: linear-gradient(180deg,#6B8299 0%,#46586b 52%,transparent 100%); }
/* Light = same brand-blue cover, light page body below */
.tcard.th-light { background: linear-gradient(160deg,#ffffff,#ececed); border: 1px solid rgba(0,0,0,0.1); }
.tcard.th-light::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 58%; background: linear-gradient(180deg,#6B8299 0%,#46586b 52%,transparent 100%); }
.tcard.th-light .tc-bar { background: rgba(20,20,24,0.55); }
.tcard.th-midnight { background: linear-gradient(160deg,#10131f,#05070d); }
.tcard.th-midnight .tc-bar { background: rgba(120,140,255,0.5); }
.tcard.th-glass { background: linear-gradient(145deg,#3a4a6a,#1a2238); }
.tcard.th-glass .tc-bar { background: rgba(255,255,255,0.35); backdrop-filter: blur(4px); border: 1px solid rgba(255,255,255,0.4); }
.tcard.th-chrome { background: linear-gradient(160deg,#e8e8ee,#9a9aa6 45%,#3a3a44 75%,#c8c8d0); }
.tcard.th-chrome .tc-bar { background: rgba(255,255,255,0.7); }
.tcard.th-holo { background: linear-gradient(125deg,#ff7ec8,#c87aff 35%,#7ad1ff 60%,#7affc8 85%); }
.tcard.th-holo .tc-bar { background: rgba(255,255,255,0.6); }
.tcard.th-paper { background: #efe9dc; }
.tcard.th-paper .tc-bar { background: rgba(30,28,24,0.55); }

/* button-style preview swatches */
.btnprev { display: flex; align-items: center; justify-content: center; background: linear-gradient(160deg,#23232a,#141418); }
.btnprev .bpb { width: 62%; height: 26%; border-radius: 7px; }
.bp-solid .bpb { background: #fff; }
.bp-glass .bpb { background: rgba(255,255,255,0.18); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); border: 1px solid rgba(255,255,255,0.35); }
.bp-outline .bpb { background: transparent; border: 1.5px solid rgba(255,255,255,0.7); }

/* corner-roundness preview cards — a visible box showing the chosen top corners */
.rad-card { padding: 0; display: flex; align-items: stretch; }
.rad-card .rad-prev { width: 100%; height: 54px; border: 2px solid var(--fg-2); border-bottom: none; background: var(--bg-3); }
.rad-card.sel .rad-prev { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 14%, var(--bg-3)); }

/* wallpaper preview swatches */
.wp-card { padding: 0; }
.wp-prev { display: block; width: 100%; aspect-ratio: 1/1.4; border-radius: 12px; border: 1px solid var(--line); }
.wp-card.sel .wp-prev { outline: 2px solid var(--accent); outline-offset: 2px; }
.wp-none-prev { background: repeating-linear-gradient(45deg, var(--bg-2) 0 6px, transparent 6px 12px); }
.wp-prev-indigo { background: linear-gradient(180deg,#3a1c71,#5b2a86 45%,#1f1147); }
.wp-prev-violet { background: linear-gradient(165deg,#c31432,#7b2ff7 55%,#240b36); }
.wp-prev-ember  { background: linear-gradient(180deg,#ff512f,#dd2476 50%,#2b1055); }
.wp-prev-ocean  { background: linear-gradient(180deg,#2193b0,#1c5d99 45%,#0a1f3c); }
.wp-prev-plum   { background: radial-gradient(120% 90% at 50% 0%,#7b4397,#43225f 55%,#1a0f2e); }
.wp-prev-dusk   { background: linear-gradient(180deg,#ff6a88,#7a5cc7 50%,#1e183a); }
.wp-prev-forest { background: linear-gradient(180deg,#11998e,#176b6b 45%,#07241f); }
.wp-prev-aurora { background: linear-gradient(180deg,#43cea2,#4174c9 50%,#2a1a5e); }
.wp-prev-solar  { background: radial-gradient(110% 80% at 50% 12%,#ff8008,#d4145a 55%,#2a0a2e); }
.wp-prev-mono   { background: radial-gradient(120% 90% at 50% 0%,#3a3a44,#1c1c22 60%,#0a0a0c); }
.wp-prev-tappt  { background: linear-gradient(170deg,#6B8299,#4D6980 45%,#243240); }
/* effect preview chips */
.fx-card { padding: 0; }
.fx-prev { display: block; width: 100%; height: 54px; border-radius: 12px; border: 1px solid var(--line); background: var(--bg-3); position: relative; overflow: hidden; }
.fx-card.sel .fx-prev { border-color: var(--accent); }
.fx-prev-none { background: repeating-linear-gradient(45deg, var(--bg-2) 0 6px, transparent 6px 12px); }
.fx-prev-beam::before { content: ""; position: absolute; inset: 0; border-radius: 12px; padding: 2px; background: conic-gradient(from 0deg, transparent, var(--beam-a), var(--beam-b), transparent 60%); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; }
.fx-prev-glow { box-shadow: inset 0 0 22px -4px rgba(var(--beam-glow-rgb),0.7); }
.fx-prev-shine::before { content: ""; position: absolute; inset: 0; background: linear-gradient(115deg, transparent 40%, rgba(255,255,255,0.5) 50%, transparent 60%); }
.fx-prev-pulse { box-shadow: 0 0 0 3px rgba(var(--beam-glow-rgb),0.35); }

/* link animation preview cards */
.lanim-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.lanim-card { display: flex; flex-direction: column; align-items: center; gap: 7px; padding: 12px 8px; border-radius: 14px; background: var(--bg-2); border: 2px solid var(--line); }
.lanim-card.sel { border-color: var(--accent); }
.lanim-prev { width: 100%; display: flex; flex-direction: column; gap: 5px; overflow: hidden; padding: 4px 0; }
.lanim-prev .lap-row { height: 9px; border-radius: 5px; background: var(--fg-3); }
.lanim-lb { font-size: 12px; font-weight: 700; }
.lanim-card .la-rise .lap-row { animation: laRise 1.6s var(--ease-out) infinite; }
.lanim-card .la-rise .lap-row:last-child { animation-delay: 0.2s; }
@keyframes laRise { 0%,60% { transform: translateY(0); opacity: 1; } 80% { transform: translateY(8px); opacity: 0; } 81% { transform: translateY(-8px); } 100% { transform: translateY(0); opacity: 1; } }
.lanim-card .la-fade .lap-row { animation: laFade 1.6s linear infinite; }
.lanim-card .la-fade .lap-row:last-child { animation-delay: 0.25s; }
@keyframes laFade { 0%,60% { opacity: 1; } 80% { opacity: 0.15; } 100% { opacity: 1; } }
.lanim-card .la-pop .lap-row { animation: laPop 1.6s var(--ease-out) infinite; }
.lanim-card .la-pop .lap-row:last-child { animation-delay: 0.15s; }
@keyframes laPop { 0%,55% { transform: scale(1); } 75% { transform: scale(0.7); } 90% { transform: scale(1.08); } 100% { transform: scale(1); } }
.lanim-card .la-shimmer .lap-row { background: linear-gradient(90deg, var(--fg-3) 0 40%, rgba(255,255,255,0.7) 50%, var(--fg-3) 60% 100%); background-size: 280% 100%; animation: laShim 1.6s linear infinite; }
@keyframes laShim { to { background-position: -180% 0; } }
.lanim-card .la-pulse .lap-row { animation: laPulse 1.4s var(--ease) infinite; }
@keyframes laPulse { 0%,100% { opacity: 0.6; } 50% { opacity: 1; } }

/* icon animation preview dots (Design panel) */
.ianim-prev { width: 100%; height: 30px; display: flex; align-items: center; justify-content: center; }
.ianim-dot { width: 18px; height: 18px; border-radius: 6px; background: var(--accent); }
.ianim-dot.ia-bounce { animation: iaBounce 1.4s var(--ease) infinite; }
.ianim-dot.ia-pop { animation: iaPop 1.5s var(--ease) infinite; }
.ianim-dot.ia-wobble { animation: iaWobble 1.4s var(--ease) infinite; }
.ianim-dot.ia-float { animation: iaFloat 2.6s ease-in-out infinite; }
.ianim-dot.ia-spin { animation: iaSpin 2.4s linear infinite; }

.dz-toggle { display: flex; align-items: center; gap: 12px; width: 100%; padding: 15px 16px; border-radius: 16px; background: var(--bg-2); border: 1px solid var(--line); }
.dz-tg-meta { flex: 1; text-align: left; }
.dz-tg-t { font-size: 14px; font-weight: 700; }
.dz-tg-s { font-size: 12px; color: var(--fg-3); margin-top: 2px; }
.dz-upsell { display: flex; align-items: center; gap: 10px; width: 100%; padding: 14px 16px; border-radius: 16px; font-size: 14px; font-weight: 700; color: var(--fg); background: linear-gradient(135deg, rgba(var(--brand-rgb),0.12), rgba(var(--brand2-rgb),0.06)); border: 1px solid rgba(var(--brand-rgb),0.3); }
.dz-upsell span:nth-child(2) { flex: 1; text-align: left; }

/* ===== LIVE PROFILE THEMES (full transform) ===== */
.appscroll.ptheme-midnight { background: linear-gradient(180deg,#0a0d18 0%, #05070d 100%); }
.appscroll.ptheme-midnight .pf-body { background: transparent; }
.appscroll.ptheme-midnight .pf-cover::after { --bleed-to: #0a0d18; }
.appscroll.ptheme-midnight .pf-link, .appscroll.ptheme-midnight .pf-grid-card { background: rgba(30,38,66,0.55); border: 1px solid rgba(120,140,255,0.25); color: #eef; backdrop-filter: blur(8px); }
.appscroll.ptheme-midnight .pf-section-h { color: #aab4e8; }

.appscroll.ptheme-glass .pf-body { background: linear-gradient(180deg, var(--bg) 0%, #141a2a 100%); }
.appscroll.ptheme-glass .pf-link, .appscroll.ptheme-glass .pf-grid-card { background: rgba(255,255,255,0.1); border: 1px solid rgba(255,255,255,0.22); backdrop-filter: blur(14px) saturate(140%); color: #fff; box-shadow: 0 8px 28px -10px rgba(0,0,0,0.5); }

.appscroll.ptheme-chrome .pf-body { background: linear-gradient(180deg,#d6d6de 0%, #b4b4be 100%); }
.appscroll.ptheme-chrome .pf-cover::after { --bleed-to: #d6d6de; }
.appscroll.ptheme-chrome .pf-link, .appscroll.ptheme-chrome .pf-grid-card { background: linear-gradient(160deg,#fbfbfd,#c8c8d2); border: 1px solid rgba(255,255,255,0.8); color: #1a1a22; box-shadow: 0 6px 18px -8px rgba(0,0,0,0.4), inset 0 1px 0 #fff; }
.appscroll.ptheme-chrome .pf-section-h { color: #2a2a34; }
.appscroll.ptheme-chrome .pf-bio-line, .appscroll.ptheme-chrome .pf-handle { color: rgba(20,20,28,0.7) !important; }
.appscroll.ptheme-chrome .pf-name { color: #16161e !important; text-shadow: 0 1px 0 rgba(255,255,255,0.6); }

.appscroll.ptheme-holo .pf-body { background: linear-gradient(180deg,#1a0e2e 0%, #0c0618 100%); }
.appscroll.ptheme-holo .pf-cover::after { --bleed-to: #1a0e2e; }
.appscroll.ptheme-holo .pf-link, .appscroll.ptheme-holo .pf-grid-card { background: linear-gradient(115deg, rgba(255,126,200,0.22), rgba(122,209,255,0.18) 50%, rgba(122,255,200,0.2)); border: 1px solid rgba(255,255,255,0.3); color: #fff; }
.appscroll.ptheme-holo .pf-section-h { background: linear-gradient(90deg,#ff7ec8,#7ad1ff,#7affc8); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }

.appscroll.ptheme-paper .pf-body { background: #efe9dc; }
.appscroll.ptheme-paper .pf-cover::after { --bleed-to: #efe9dc; }
.appscroll.ptheme-paper .pf-link, .appscroll.ptheme-paper .pf-grid-card { background: #fbf8f1; border: 1px solid #d8cfbb; color: #2a2620; box-shadow: 0 2px 0 #d8cfbb; }
.appscroll.ptheme-paper .pf-section-h { color: #6a5f48; font-family: var(--serif); font-style: italic; }
.appscroll.ptheme-paper .pf-bio-line, .appscroll.ptheme-paper .pf-handle { color: rgba(42,38,32,0.7) !important; }
.appscroll.ptheme-paper .pf-name { color: #2a2620 !important; text-shadow: none; }

/* ===== PROFILE WALLPAPERS (free) — full-bleed gradient behind the whole profile.
   All are deep/saturated so LIGHT text stays readable; we force white-ish tokens +
   translucent link cards when any wallpaper is active, regardless of light/dark theme. */
.appscroll[class*="wp-"] {
  --fg: #fff; --fg-2: rgba(255,255,255,0.82); --fg-3: rgba(255,255,255,0.6);
  --bg-2: rgba(255,255,255,0.12); --line: rgba(255,255,255,0.2);
  background-attachment: fixed;
}
.appscroll[class*="wp-"] .pf-body { background: transparent; }
.appscroll[class*="wp-"] .pf-cover::after { --bleed-to: transparent; }
.appscroll[class*="wp-"] .pf-link { background: rgba(255,255,255,0.12); border: 1px solid rgba(255,255,255,0.2); color: #fff; }
.appscroll[class*="wp-"] .pf-feature.has-media { background: rgba(255,255,255,0.12); border: 1px solid rgba(255,255,255,0.2); }
.appscroll[class*="wp-"] .pf-section-h { color: rgba(255,255,255,0.92); }
.appscroll[class*="wp-"] .pf-name { color: #fff !important; }
.appscroll[class*="wp-"] .pf-bio-line, .appscroll[class*="wp-"] .pf-handle { color: rgba(255,255,255,0.78) !important; }
.appscroll.wp-indigo  { background: linear-gradient(180deg,#3a1c71 0%, #5b2a86 45%, #1f1147 100%); }
.appscroll.wp-violet  { background: linear-gradient(165deg,#c31432 0%, #7b2ff7 55%, #240b36 100%); }
.appscroll.wp-ember   { background: linear-gradient(180deg,#ff512f 0%, #dd2476 50%, #2b1055 100%); }
.appscroll.wp-ocean   { background: linear-gradient(180deg,#2193b0 0%, #1c5d99 45%, #0a1f3c 100%); }
.appscroll.wp-plum    { background: radial-gradient(120% 90% at 50% 0%, #7b4397 0%, #43225f 55%, #1a0f2e 100%); }
.appscroll.wp-dusk    { background: linear-gradient(180deg,#ff6a88 0%, #7a5cc7 50%, #1e183a 100%); }
.appscroll.wp-forest  { background: linear-gradient(180deg,#11998e 0%, #176b6b 45%, #07241f 100%); }
.appscroll.wp-aurora  { background: linear-gradient(180deg,#43cea2 0%, #4174c9 50%, #2a1a5e 100%); }
.appscroll.wp-mono    { background: radial-gradient(120% 90% at 50% 0%, #3a3a44 0%, #1c1c22 60%, #0a0a0c 100%); }
.appscroll.wp-solar   { background: radial-gradient(110% 80% at 50% 12%, #ff8008 0%, #d4145a 55%, #2a0a2e 100%); }
.appscroll.wp-tappt   { background: linear-gradient(170deg, #6B8299 0%, #4D6980 45%, #243240 100%); }
@media (prefers-reduced-motion: no-preference) {
  .appscroll[class*="wp-"] { background-size: 100% 130%; }
}

/* ===== PROFILE CARD EFFECTS (Design panel — free) — applied to links/featured/grid cards ===== */
@property --fxang { syntax: '<angle>'; inherits: false; initial-value: 0deg; }
/* Border beam — brand-coloured beam loops each card edge (uses ::before to avoid the grid scrim ::after) */
.appscroll.fx-beam .pf-link, .appscroll.fx-beam .pf-feature, .appscroll.fx-beam .pf-grid-card { position: relative; }
.appscroll.fx-beam .pf-link::before, .appscroll.fx-beam .pf-feature::before, .appscroll.fx-beam .pf-grid-card::before {
  content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1.6px; z-index: 4;
  background: conic-gradient(from var(--fxang), transparent 0deg, var(--beam-a) 70deg, var(--beam-b) 140deg, var(--beam-c) 200deg, transparent 270deg, transparent 360deg);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude;
  filter: drop-shadow(0 0 4px rgba(var(--beam-glow-rgb),0.5)); pointer-events: none;
}
@media (prefers-reduced-motion: no-preference) {
  .appscroll.fx-beam .pf-link::before, .appscroll.fx-beam .pf-feature::before, .appscroll.fx-beam .pf-grid-card::before { animation: fxBeam 6s linear infinite; }
}
@keyframes fxBeam { to { --fxang: 360deg; } }
/* Glow — soft brand backlight behind each card */
.appscroll.fx-glow .pf-link, .appscroll.fx-glow .pf-feature, .appscroll.fx-glow .pf-grid-card { box-shadow: 0 0 26px -6px rgba(var(--beam-glow-rgb), 0.55), 0 0 8px -2px rgba(var(--beam2-rgb, 130,152,172), 0.4); }
/* Shine — periodic light sweep across the cards */
.appscroll.fx-shine .pf-link, .appscroll.fx-shine .pf-feature { position: relative; overflow: hidden; }
.appscroll.fx-shine .pf-link::before, .appscroll.fx-shine .pf-feature::before {
  content: ""; position: absolute; inset: 0; border-radius: inherit; z-index: 4; pointer-events: none;
  background: linear-gradient(115deg, transparent 42%, rgba(255,255,255,0.28) 50%, transparent 58%);
  background-size: 220% 100%; background-position: 180% 0;
}
@media (prefers-reduced-motion: no-preference) {
  .appscroll.fx-shine .pf-link::before, .appscroll.fx-shine .pf-feature::before { animation: fxShine 5s ease-in-out infinite; }
}
@keyframes fxShine { 0%, 100% { background-position: 180% 0; } 55% { background-position: -90% 0; } }
/* Pulse — gentle brand ring breathing on each card */
.appscroll.fx-pulse .pf-link, .appscroll.fx-pulse .pf-feature, .appscroll.fx-pulse .pf-grid-card { animation: fxPulse 2.8s ease-in-out infinite; }
@keyframes fxPulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(var(--beam-glow-rgb), 0.0); } 50% { box-shadow: 0 0 0 3px rgba(var(--beam-glow-rgb), 0.28); } }
@media (prefers-reduced-motion: reduce) { .appscroll.fx-pulse .pf-link, .appscroll.fx-pulse .pf-feature, .appscroll.fx-pulse .pf-grid-card { animation: none; } }
/* wallpaper + COVER PHOTO: dissolve the cover's bottom into the wallpaper (same idea as the
   light/dark bleed, but fades the cover IMAGE to transparent since the wallpaper is a gradient,
   not a solid colour). The name/handle/socials foot sits above and stays fully visible. */
.appscroll[class*="wp-"].has-cover .pf-cover::after { display: none; }
.appscroll[class*="wp-"].has-cover .pf-cover-media {
  -webkit-mask-image: linear-gradient(to bottom, #000 60%, transparent 100%);
  mask-image: linear-gradient(to bottom, #000 60%, transparent 100%);
}
/* wallpaper + NO COVER PHOTO: drop the cover backdrop entirely so the wallpaper shows from the
   very top, perfectly uniform with the body — no tint, no screen-blend overlay, no bleed. */
.appscroll[class*="wp-"].no-cover .pf-cover-media { background: transparent !important; }
.appscroll[class*="wp-"].no-cover .pf-cover-media::before { display: none !important; }
.appscroll[class*="wp-"].no-cover .pf-cover::after { display: none; }
.appscroll[class*="wp-"].no-cover .pf-cover-tint { background: none !important; }
/* EDIT mode + wallpaper: dissolve the cover into the wallpaper and keep the details panel
   transparent so the whole section reads as one solid coloured block on the wallpaper —
   the translucent --bg-2 card was letting the cover image bleed through. */
.edit-scroll[class*="wp-"] .pf-cover::after { display: none; }
.edit-scroll[class*="wp-"] .pf-cover-media { -webkit-mask-image: linear-gradient(to bottom,#000 66%,transparent 100%); mask-image: linear-gradient(to bottom,#000 66%,transparent 100%); }
.edit-scroll[class*="wp-"] .edit-identity { background: transparent; box-shadow: none; }
/* Layout (Left Aligned / Centered) toggle — match the dashed icon/action placeholder pills */
.edit-identity .edit-align.align-seg { background: transparent; border: none; padding: 0; gap: 8px; }
.edit-identity .edit-align.align-seg button { height: 34px; padding: 0 16px; border-radius: 999px; border: 1.5px dashed var(--line-2); background: transparent; color: var(--fg-2); font-weight: 700; }
.edit-identity .edit-align.align-seg button.on { background: var(--accent); border: 1.5px solid var(--accent); color: var(--accent-ink); }

/* ===== LIVE LINK ANIMATIONS ===== */
.appscroll.la-on[data-deck-active], .appscroll.la-on { }
.appscroll.la-rise .pf-link, .appscroll.la-rise .pf-feature, .appscroll.la-rise .pf-grid { animation: liRise 0.6s var(--ease-out) both; }
@keyframes liRise { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: translateY(0); } }
.appscroll.la-fade .pf-link, .appscroll.la-fade .pf-feature, .appscroll.la-fade .pf-grid { animation: liFade 0.7s ease both; }
@keyframes liFade { from { opacity: 0; } to { opacity: 1; } }
.appscroll.la-pop .pf-link, .appscroll.la-pop .pf-feature, .appscroll.la-pop .pf-grid { animation: liPop 0.5s var(--ease-out) both; }
@keyframes liPop { from { opacity: 0; transform: scale(0.85); } 70% { transform: scale(1.03); } to { opacity: 1; transform: scale(1); } }
.appscroll.la-shimmer .pf-link::after { content: ""; position: absolute; inset: 0; border-radius: inherit; background: linear-gradient(115deg, transparent 35%, rgba(255,255,255,0.4) 50%, transparent 65%); background-size: 280% 100%; animation: liShim 2.6s linear infinite; pointer-events: none; }
.appscroll.la-shimmer .pf-link { position: relative; overflow: hidden; }
@keyframes liShim { to { background-position: -180% 0; } }
.appscroll.la-pulse .pf-link { animation: liPulse 2.4s var(--ease) infinite; }
@keyframes liPulse { 0%,100% { box-shadow: 0 6px 18px -12px rgba(0,0,0,0.6); } 50% { box-shadow: 0 8px 26px -8px var(--accent); } }
/* stagger the rise/fade/pop per nth link */
.appscroll.la-rise .pf-link:nth-child(2), .appscroll.la-fade .pf-link:nth-child(2), .appscroll.la-pop .pf-link:nth-child(2) { animation-delay: 0.08s; }
.appscroll.la-rise .pf-link:nth-child(3), .appscroll.la-fade .pf-link:nth-child(3), .appscroll.la-pop .pf-link:nth-child(3) { animation-delay: 0.16s; }
.appscroll.la-rise .pf-link:nth-child(4), .appscroll.la-fade .pf-link:nth-child(4), .appscroll.la-pop .pf-link:nth-child(4) { animation-delay: 0.24s; }
@media (prefers-reduced-motion: reduce) { .appscroll.la-rise .pf-link, .appscroll.la-fade .pf-link, .appscroll.la-pop .pf-link, .appscroll.la-rise .pf-feature, .appscroll.la-fade .pf-feature, .appscroll.la-pop .pf-feature { animation: none; } }

/* ===== LIVE ICON ANIMATIONS (social/app icons on the profile) ===== */
@media (prefers-reduced-motion: no-preference) {
  .appscroll.ia-bounce .pf-social { animation: iaBounce 1.6s var(--ease) infinite; }
  .appscroll.ia-pop .pf-social { animation: iaPop 1.8s var(--ease) infinite; }
  .appscroll.ia-wobble .pf-social { animation: iaWobble 1.6s var(--ease) infinite; }
  .appscroll.ia-float .pf-social { animation: iaFloat 3s ease-in-out infinite; }
  .appscroll.ia-spin .pf-social { animation: iaSpin 3.2s linear infinite; }
  /* stagger each icon so the row ripples rather than moving as a block */
  .appscroll.ia-on .pf-social:nth-child(2) { animation-delay: 0.12s; }
  .appscroll.ia-on .pf-social:nth-child(3) { animation-delay: 0.24s; }
  .appscroll.ia-on .pf-social:nth-child(4) { animation-delay: 0.36s; }
  .appscroll.ia-on .pf-social:nth-child(5) { animation-delay: 0.48s; }
  .appscroll.ia-on .pf-social:nth-child(6) { animation-delay: 0.60s; }
}
@keyframes iaBounce { 0%,55%,100% { transform: translateY(0); } 72% { transform: translateY(-7px); } 86% { transform: translateY(-3px); } }
@keyframes iaPop { 0%,60%,100% { transform: scale(1); } 78% { transform: scale(1.22); } }
@keyframes iaWobble { 0%,60%,100% { transform: rotate(0deg); } 70% { transform: rotate(-12deg); } 80% { transform: rotate(10deg); } 90% { transform: rotate(-5deg); } }
@keyframes iaFloat { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-5px); } }
@keyframes iaSpin { 0%,55% { transform: rotateY(0deg); } 100% { transform: rotateY(360deg); } }
.ident-head { display: flex; align-items: center; gap: 8px; margin-bottom: 14px; }
.ident-title { font-family: var(--display); font-weight: 800; font-size: 17px; letter-spacing: -0.01em; }
.ident-block { background: var(--bg-2); border: 1px solid var(--line); border-radius: 16px; padding: 14px 16px; margin-bottom: 10px; }
.ident-block .ib-row { display: flex; align-items: center; gap: 12px; }
.ident-block .ib-meta { flex: 1; }
.ident-block .ib-t { font-size: 14px; font-weight: 700; display: flex; align-items: center; }
.ident-block .ib-s { font-size: 12px; color: var(--fg-3); line-height: 1.35; margin-top: 2px; }
.theme-grid { display: flex; gap: 10px; overflow-x: auto; padding-bottom: 4px; scrollbar-width: none; }
.theme-grid::-webkit-scrollbar { display: none; }
.theme-card { flex: 0 0 auto; width: 70px; display: flex; flex-direction: column; align-items: center; gap: 7px; padding: 8px; border-radius: 14px; background: var(--bg-3); border: 2px solid var(--line); }
.theme-card.sel { border-color: var(--accent); }
.theme-prev { width: 100%; aspect-ratio: 1/1.3; border-radius: 9px; }
.th-glass { background: linear-gradient(135deg, rgba(255,255,255,0.25), rgba(255,255,255,0.05)); backdrop-filter: blur(4px); border: 1px solid rgba(255,255,255,0.3); }
.th-chrome { background: linear-gradient(160deg,#e8e8ee,#9a9aa6 40%,#3a3a44 70%,#c8c8d0); }
.th-holo { background: linear-gradient(115deg,#ff7ec8,#c87aff 30%,#7ad1ff 55%,#7affc8 80%,#fff37a); }
.th-matte { background: #0e0e10; border: 1px solid #2a2a2e; }
.theme-lb { font-size: 11px; font-weight: 700; }
.font-grid { display: flex; gap: 10px; }
.font-card { flex: 1; aspect-ratio: 1.4/1; border-radius: 12px; background: var(--bg-3); border: 2px solid var(--line); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; font-size: 22px; font-weight: 700; color: var(--fg); }
.font-card.sel { border-color: var(--accent); }
.font-card .font-lb { font-size: 9px; font-family: var(--mono); font-weight: 600; color: var(--fg-3); letter-spacing: 0.04em; }
.refer-pro-nudge svg { flex: none; margin-left: auto; color: var(--fg-3); }
.refer-step .rs-s { font-size: 12px; color: var(--fg-3); }
.refer-actions { display: flex; gap: 10px; margin-top: 10px; }
.refer-qr-btn { flex: 0 0 auto; padding-left: 16px; padding-right: 16px; }

@media (max-width: 1080px) {
  .main { grid-template-columns: 1fr; }
  .preview-pane { display: none; }
}
@media (max-width: 860px) {
  .auth { grid-template-columns: 1fr; }
  .auth-brand { display: none; }
  .dash { grid-template-columns: 1fr; }
  .side {
    position: fixed; bottom: 0; top: auto; left: 0; right: 0;
    height: auto; width: 100%;
    flex-direction: row; align-items: center;
    border-right: 0; border-top: 1px solid var(--line);
    padding: 10px 12px; z-index: 100;
    backdrop-filter: blur(12px); background: var(--glass, rgba(17,17,19,0.9));
  }
  .side-logo, .side-foot { display: none; }
  .side-nav { flex-direction: row; justify-content: space-around; width: 100%; gap: 0; }
  .side-link { flex-direction: column; gap: 4px; font-size: 10px; padding: 6px 10px; }
  .side-link svg { width: 20px; height: 20px; }
  .side-link .badge { display: none; }
  .side-link span.lbltxt { font-size: 10px; }
  .work { padding: 80px 18px 100px; }
  .work-head h1 { font-size: 22px; }
  .stats { grid-template-columns: 1fr 1fr; }
  .card-pick { grid-template-columns: 1fr 1fr; }
  .preview-float-btn { display: flex; }
}