/*
 * LYNKS Profiles — uses the same design tokens, typography, fields and buttons as the LYNKS theme.
 * Profile pages may switch only their profile surface between light and dark.
 */
.lynks-profile-body {
  --lynks-ink: #171717; --lynks-muted: #686868; --lynks-paper: #fff;
  --lynks-surface: #fff; --lynks-accent: #d9ff45; --lynks-line: #e8e8e8;
  --lynks-input-border: #d8d8d8; --lynks-radius: 7px; --lynks-radius-small: 6px;
  margin: 0 !important; background: var(--lynks-paper) !important; color: var(--lynks-ink) !important;
  font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important; line-height: 1.5;
}
.lynks-profile-page, .lynks-form-wrap { box-sizing: border-box; }
.lynks-profile-page *, .lynks-profile-page *::before, .lynks-profile-page *::after,
.lynks-form-wrap *, .lynks-form-wrap *::before, .lynks-form-wrap *::after { box-sizing: border-box; }
.lynks-profile-page {
  --lp-ink: var(--lynks-ink); --lp-paper: var(--lynks-paper); --lp-card: var(--lynks-surface); --lp-line: var(--lynks-line);
  min-height: 100vh; padding: 32px 20px 36px; background: var(--lp-paper); color: var(--lp-ink);
}
.lynks-profile-page.is-dark {
  color-scheme: dark; --lp-ink: #f6f6f0; --lp-paper: #10100f; --lp-card: #1b1b19; --lp-line: rgba(255,255,255,.16);
  background: var(--lp-paper); color: var(--lp-ink);
}
.lynks-profile-shell { width: min(100%, 520px); margin: 0 auto; }
.lynks-profile-brand, .lynks-form-brand {
  display: inline-block; margin: 0 0 22px; color: var(--lp-ink, var(--lynks-ink));
  font-size: 2rem; font-weight: 850; letter-spacing: -.09em; line-height: 1; text-decoration: none;
}
.lynks-profile-editbar { margin: 0 0 14px; padding: 12px 14px; border: 1px solid var(--lp-line); border-radius: var(--lynks-radius-small); font-size: 13px; }
.lynks-profile-editbar a, .lynks-profile-footer a { font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }
.lynks-profile-card { padding: 28px 22px 22px; border: 1px solid var(--lp-line); border-radius: var(--lynks-radius); background: var(--lp-card); color: var(--lp-ink); text-align: center; }
.lynks-avatar { display: block; width: 94px; height: 94px; object-fit: cover; border-radius: 50%; margin: 0 auto 18px; border: 1px solid var(--lp-line); }
.lynks-avatar-placeholder { display: grid; place-items: center; background: var(--lynks-accent); color: #171717; font-size: 36px; font-weight: 850; }
.lynks-profile-name { margin: 0 0 9px; color: inherit; font-size: clamp(25px, 6vw, 34px); font-weight: 800; line-height: 1.05; letter-spacing: -.055em; overflow-wrap: anywhere; }
.lynks-profile-bio { max-width: 390px; margin: 0 auto 24px; color: inherit; opacity: .72; font-size: 14px; white-space: pre-line; }
.lynks-profile-links { display: grid; gap: 10px; margin-top: 24px; }
.lynks-profile-link {
  display: flex; align-items: center; justify-content: space-between; gap: 15px; min-height: 52px;
  padding: 14px 16px; border: 1px solid var(--lp-line); border-radius: var(--lynks-radius-small);
  background: var(--lp-paper); color: var(--lp-ink); font-size: 14px; font-weight: 650;
  text-align: left; text-decoration: none; overflow-wrap: anywhere; transition: transform .18s ease, border-color .18s ease;
}
.lynks-profile-link:hover { transform: translateY(-1px); border-color: currentColor; color: var(--lp-ink); }
.lynks-profile-link span:last-child { font-size: 18px; flex: 0 0 auto; }
.lynks-profile-footer { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-top: 16px; font-size: 11px; opacity: .72; color: var(--lp-ink); }
.lynks-notice { padding: 13px 15px; margin: 0 0 18px; border: 1px solid var(--lynks-line); border-radius: var(--lynks-radius-small); font-size: 14px; line-height: 1.5; }
.lynks-notice--success { background: #f4ffd1; color: #273400; border-color: #d9ff45; }
.lynks-notice--error { background: #fff0ee; color: #7c1e14; border-color: #e8a59d; }
.lynks-form-wrap {
  width: min(calc(100% - 40px), 680px); margin: 40px auto 64px; padding: clamp(24px, 5vw, 40px);
  border: 1px solid var(--lynks-line, #e8e8e8); border-radius: var(--lynks-radius, 7px);
  background: var(--lynks-surface, #fff); color: var(--lynks-ink, #171717);
}
.lynks-form-wrap h1, .lynks-form-wrap h2 {
  margin: 0 0 16px; color: var(--lynks-ink, #171717); font-size: clamp(28px, 5vw, 40px);
  line-height: 1.08; letter-spacing: -.055em; font-weight: 800;
}
.lynks-form-intro, .lynks-recovery-wrap > p { margin: 0 0 24px; color: var(--lynks-muted, #686868); font-size: 14px; line-height: 1.7; max-width: 620px; }
.lynks-profile-form { display: block; width: 100%; }
.lynks-form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.lynks-field { display: flex; flex-direction: column; gap: 7px; min-width: 0; margin-bottom: 17px; }
.lynks-field--full { grid-column: 1 / -1; }
.lynks-field label, .lynks-field-label { color: var(--lynks-ink, #171717); font-size: 12px; font-weight: 700; letter-spacing: .01em; }
.lynks-field input, .lynks-field textarea, .lynks-field select {
  display: block; width: 100%; min-height: 46px; margin: 0; padding: 11px 13px;
  border: 1px solid var(--lynks-input-border, #d8d8d8); border-radius: var(--lynks-radius-small, 6px);
  background: #fff; color: #171717; font: inherit; font-size: 14px; box-shadow: none;
}
.lynks-field input[readonly] { background: #f7f7f7; }
.lynks-field textarea { min-height: 112px; resize: vertical; }
.lynks-field small { color: var(--lynks-muted, #686868); font-size: 11px; line-height: 1.5; overflow-wrap: anywhere; }
.lynks-profile-theme-choice { display: flex; gap: 10px; }
.lynks-profile-theme-choice label {
  display: flex; align-items: center; gap: 8px; flex: 1; padding: 12px 14px;
  border: 1px solid var(--lynks-line, #e8e8e8); border-radius: var(--lynks-radius-small, 6px);
  background: var(--lynks-paper, #fff); color: var(--lynks-ink, #171717); font-size: 13px; cursor: pointer;
}
.lynks-profile-theme-choice input { width: auto; min-height: 0; margin: 0; accent-color: #8aa900; }
.lynks-link-editor { margin: 22px 0; padding-top: 20px; border-top: 1px solid var(--lynks-line, #e8e8e8); }
.lynks-link-editor h3 { margin: 0 0 7px; color: var(--lynks-ink, #171717); font-size: 18px; letter-spacing: -.03em; }
.lynks-link-editor .lynks-form-intro { margin-bottom: 17px; }
.lynks-link-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr) auto; gap: 10px; align-items: end; padding: 14px 0; border-bottom: 1px solid var(--lynks-line, #e8e8e8); }
.lynks-link-row .lynks-field { margin: 0; }
.lynks-link-row .lynks-field input { min-height: 44px; }
.lynks-form-wrap .lynks-remove-link {
  min-height: 44px; padding: 8px 12px; border: 1px solid var(--lynks-line, #e8e8e8);
  border-radius: var(--lynks-radius-small, 6px); background: #fff; color: var(--lynks-ink, #171717);
  font-size: 12px; font-weight: 650; cursor: pointer;
}
.lynks-submit-row { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; margin-top: 22px; }
.lynks-form-wrap .button {
  min-height: 46px; display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  padding: 0 18px; border: 1px solid var(--lynks-ink, #171717); border-radius: var(--lynks-radius-small, 6px);
  background: var(--lynks-ink, #171717); color: #fff; font-size: 14px; font-weight: 650; text-decoration: none;
}
.lynks-form-wrap .button--lime { background: var(--lynks-accent, #d9ff45); border-color: var(--lynks-accent, #d9ff45); color: #171717; }
.lynks-form-wrap .button--outline { background: #fff; border-color: var(--lynks-line, #e8e8e8); color: var(--lynks-ink, #171717); }
.lynks-create-success { margin-top: 40px; }
.lynks-create-success .lynks-field { margin-top: 18px; }
.lynks-create-success input { font-size: 12px; }
.lynks-create-success p { font-size: 14px; line-height: 1.7; }
.lynks-recovery-wrap { max-width: 680px; }
.lynks-form-wrap input:focus-visible, .lynks-form-wrap textarea:focus-visible, .lynks-form-wrap select:focus-visible,
.lynks-profile-page a:focus-visible { outline: 3px solid #8aa900; outline-offset: 2px; }
@media (max-width: 620px) {
  .lynks-profile-page { padding: 22px 12px 28px; }
  .lynks-profile-card { padding: 24px 15px 18px; }
  .lynks-form-wrap { width: calc(100% - 24px); margin: 24px auto 40px; padding: 22px 16px; }
  .lynks-form-grid { grid-template-columns: 1fr; gap: 0; }
  .lynks-field--full { grid-column: auto; }
  .lynks-link-row { grid-template-columns: 1fr; gap: 8px; }
  .lynks-remove-link { justify-self: start; }
  .lynks-profile-theme-choice { flex-direction: column; }
}
@media (prefers-reduced-motion: reduce) { .lynks-profile-link { transition: none; } .lynks-profile-link:hover { transform: none; } }