/* /profile — design tokens lifted from /pricing & /chat for visual continuity. */

:root {
  --paper: #FAF9F6; --paper-raised: #FFFFFF; --paper-sunk: #F4F2EC;
  --ink: #16161A; --ink-soft: #2E2E33; --ink-body: #4A4A52;
  --ink-muted: #787B81; --ink-faint: #A8AAAE;
  --line: #E8E7E2; --line-soft: #F0EEE8; --line-strong: #D9D8D2;
  --accent: #7B1F1F; --accent-deep: #5C1717; --accent-soft: #9A3535;
  --accent-tint: #FBF0F0; --accent-line: #E2C8C8;
  --good: #1F6B3A; --good-tint: #EFF6F1; --good-line: #C8DDCD;
  --warn: #8B6A12; --warn-tint: #FBF4DC; --warn-line: #E8D8A0;
  --serif: 'Fraunces', Georgia, serif;
  --sans: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  --mono: 'JetBrains Mono', 'SF Mono', Consolas, monospace;
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
[x-cloak] { display: none !important; }
body {
  background: var(--paper); color: var(--ink); font-family: var(--sans);
  font-feature-settings: 'kern', 'liga';
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
  line-height: 1.5; min-height: 100vh; overflow-x: hidden;
}
a { color: inherit; text-decoration: none; }
a:focus-visible, button:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 2px; }
/* Subtle paper texture — matches the rest of the site. */
body::before {
  content: ''; position: fixed; inset: 0; pointer-events: none;
  opacity: 0.04; z-index: 0;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='100' height='100'><filter id='n'><feTurbulence baseFrequency='0.85' /><feColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.6 0' /></filter><rect width='100' height='100' filter='url(%23n)' /></svg>");
}
.skip-link {
  position: absolute; left: -9999px; top: 0;
  padding: 0.5rem 1rem; background: var(--ink); color: var(--paper);
  font-family: var(--sans); font-size: 0.85rem; z-index: 100;
}
.skip-link:focus { left: 1rem; top: 1rem; }

/* Topbar — mirrors /pricing exactly so navigation feels stable. */
.topbar {
  position: sticky; top: 0; z-index: 50;
  background: rgba(250, 249, 246, 0.92);
  backdrop-filter: saturate(180%) blur(10px);
  -webkit-backdrop-filter: saturate(180%) blur(10px);
  border-bottom: 1px solid var(--line);
}
.topbar-inner {
  max-width: 1240px; margin: 0 auto; padding: 1rem 2rem;
  display: flex; align-items: center; justify-content: space-between; gap: 1.5rem;
}
.brand-mark {
  display: inline-flex; align-items: center; gap: 0.6rem;
  font-family: var(--serif); font-weight: 600; font-size: 1rem;
  letter-spacing: 0.18em; color: var(--ink);
}
.brand-status {
  font-family: var(--mono); font-size: 0.65rem; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--ink-muted);
  padding: 0.15rem 0.55rem; background: var(--paper-sunk);
  border: 1px solid var(--line); border-radius: 3px;
}
.top-nav { display: flex; align-items: center; gap: 1.4rem; }
.top-link {
  font-family: var(--sans); font-size: 0.85rem; font-weight: 500;
  color: var(--ink-muted); text-decoration: none;
  transition: color 140ms var(--ease);
  display: inline-flex; align-items: center; gap: 0.4rem;
}
.top-link:hover { color: var(--ink); }
.top-link-arrow {
  font-family: var(--serif); font-style: italic; font-size: 1em;
  transition: transform 200ms var(--ease);
}
.top-link:hover .top-link-arrow { transform: translateX(-3px); }
@media (max-width: 880px) { .top-nav { gap: 1rem; } .top-link { font-size: 0.78rem; } }
@media (max-width: 720px) { .brand-status, .top-link.is-secondary { display: none; } }
@media (max-width: 540px) {
  .top-nav { gap: 0.75rem; }
  .top-link span:not(.top-link-arrow) { font-size: 0.78rem; }
}
/* Page intro — eyebrow, h1, subtitle. */
.profile-main {
  position: relative; z-index: 1;
  max-width: 1080px; margin: 0 auto;
  padding: clamp(2.5rem, 4vw, 4.5rem) clamp(1.25rem, 4vw, 2rem) 4rem;
}
.profile-intro { margin-bottom: clamp(2rem, 4vw, 3rem); max-width: 720px; }
.profile-eyebrow {
  display: inline-flex; align-items: center; gap: 0.55rem;
  font-family: var(--mono); font-size: 0.68rem; letter-spacing: 0.28em;
  text-transform: uppercase; color: var(--accent); font-weight: 600;
  padding: 0.35rem 0.75rem; background: var(--accent-tint);
  border: 1px solid var(--accent-line); border-radius: 999px;
  margin-bottom: 1.25rem;
}
.profile-eyebrow-dot {
  width: 6px; height: 6px; border-radius: 50%; background: var(--accent);
  animation: pulse-dot 2.4s var(--ease) infinite;
}
@keyframes pulse-dot {
  0%, 100% { opacity: 0.45; transform: scale(0.85); }
  50%      { opacity: 1; transform: scale(1.15); }
}
@media (prefers-reduced-motion: reduce) { .profile-eyebrow-dot { animation: none; opacity: 1; } }
.profile-title {
  font-family: var(--serif); font-weight: 600;
  font-size: clamp(2rem, 1rem + 3vw, 3.4rem);
  line-height: 1.05; letter-spacing: -0.022em;
  color: var(--ink); margin: 0 0 0.85rem;
}
.profile-title em { font-style: italic; font-weight: 400; color: var(--accent); }
.profile-sub {
  font-family: var(--serif); font-size: clamp(1rem, 0.9rem + 0.4vw, 1.18rem);
  line-height: 1.55; color: var(--ink-soft); margin: 0; max-width: 540px;
}

/* Card grid — mobile single column, desktop 2x2. */
.profile-grid { display: grid; gap: 1.25rem; grid-template-columns: 1fr; }
@media (min-width: 760px) { .profile-grid { grid-template-columns: 1fr 1fr; } }
.profile-card {
  position: relative;
  background: var(--paper-raised);
  border: 1px solid var(--line); border-radius: 8px;
  padding: clamp(1.5rem, 1rem + 1vw, 2rem);
  display: flex; flex-direction: column; gap: 1.25rem;
  transition: border-color 240ms var(--ease), box-shadow 320ms var(--ease);
}
.profile-card:hover { border-color: var(--line-strong); box-shadow: 0 14px 32px -16px rgba(22, 22, 26, 0.10); }
/* Operator: brand-accent top stripe — mirrors /pricing closing card. */
.profile-card-plan.is-operator,
.profile-card-usage.is-at-limit { border-color: var(--accent-line); border-top: 3px solid var(--accent); }
.profile-card-head {
  display: flex; flex-direction: column; gap: 0.4rem;
  border-bottom: 1px solid var(--line-soft); padding-bottom: 1rem;
}
.profile-card-eyebrow {
  font-family: var(--mono); font-size: 0.62rem; letter-spacing: 0.28em;
  text-transform: uppercase; color: var(--ink-muted); font-weight: 600;
}
.profile-card-title {
  font-family: var(--serif); font-weight: 600; font-size: 1.1rem;
  letter-spacing: -0.012em; color: var(--ink); margin: 0;
}

/* Loading skeletons */
.profile-card-skel { gap: 1rem; min-height: 200px; }
.skel {
  background: linear-gradient(90deg, var(--paper-sunk) 0%, var(--line-soft) 50%, var(--paper-sunk) 100%);
  background-size: 200% 100%; border-radius: 4px;
  animation: skel-shine 1.6s linear infinite;
}
.skel-line { height: 14px; width: 80%; }
.skel-line.skel-short { width: 45%; }
.skel-block { height: 64px; width: 100%; }
@keyframes skel-shine { to { background-position: -200% 0; } }
@media (prefers-reduced-motion: reduce) { .skel { animation: none; } }
/* Identity card */
.identity-row { display: flex; align-items: flex-start; gap: 1.25rem; }
.identity-avatar {
  position: relative; flex-shrink: 0;
  width: 80px; height: 80px;
  border-radius: 999px; overflow: hidden;
  background: var(--paper-sunk); border: 1px solid var(--line);
}
.identity-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.identity-avatar-fallback {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--serif); font-weight: 600; font-size: 2.2rem;
  color: var(--accent); background: var(--accent-tint); letter-spacing: -0.02em;
}
.identity-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 0.65rem; }
.identity-email {
  font-family: var(--sans); font-size: 1.05rem; font-weight: 600;
  color: var(--ink); word-break: break-all; line-height: 1.3;
}
.identity-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem; }
.identity-since { display: flex; flex-direction: column; gap: 0.15rem; margin-top: 0.25rem; }
.identity-since-label {
  font-family: var(--mono); font-size: 0.6rem; letter-spacing: 0.22em;
  text-transform: uppercase; color: var(--ink-faint);
}
.identity-since-date {
  font-family: var(--mono); font-size: 0.85rem;
  color: var(--ink-soft); font-weight: 500;
}

/* Pills */
.pill {
  display: inline-flex; align-items: center; gap: 0.4rem;
  padding: 0.3rem 0.65rem;
  font-family: var(--mono); font-size: 0.62rem;
  letter-spacing: 0.18em; text-transform: uppercase; font-weight: 600;
  border-radius: 999px; border: 1px solid var(--line);
  background: var(--paper-sunk); color: var(--ink-muted);
}
.pill-dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.pill-verified, .pill-status-active {
  color: var(--good); background: var(--good-tint); border-color: var(--good-line);
}
.pill-unverified, .pill-status-cancelling {
  color: var(--warn); background: var(--warn-tint); border-color: var(--warn-line);
}
.pill-status-past-due {
  color: var(--accent); background: var(--accent-tint); border-color: var(--accent-line);
}
.pill-status-inactive {
  color: var(--ink-muted); background: var(--paper-sunk); border-color: var(--line);
}

.link-resend {
  background: none; border: none; padding: 0;
  font-family: var(--sans); font-size: 0.8rem; font-weight: 500;
  color: var(--accent); cursor: pointer;
  text-decoration: underline; text-decoration-color: var(--accent-line);
  text-underline-offset: 3px;
  transition: text-decoration-color 200ms var(--ease);
}
.link-resend:hover:not(:disabled) { text-decoration-color: var(--accent); }
.link-resend:disabled { opacity: 0.55; cursor: default; }
.link-resend-success { font-family: var(--sans); font-size: 0.78rem; color: var(--good); font-weight: 500; }
/* Plan card */
.plan-body { display: flex; flex-direction: column; gap: 1rem; }
.plan-name-row {
  display: flex; align-items: center; justify-content: space-between;
  gap: 0.75rem; flex-wrap: wrap;
}
.plan-name {
  font-family: var(--serif); font-weight: 600; font-size: 2rem;
  letter-spacing: -0.02em; color: var(--ink); line-height: 1;
}
.plan-name.is-operator { color: var(--accent); font-style: italic; font-weight: 500; }
.plan-meta { display: flex; flex-direction: column; gap: 0.6rem; }
.plan-price { display: flex; align-items: baseline; gap: 0.35rem; }
.plan-price-num { font-family: var(--serif); font-weight: 600; font-size: 1.5rem; color: var(--ink); letter-spacing: -0.02em; }
.plan-price-period { font-family: var(--sans); font-size: 0.9rem; color: var(--ink-muted); }
.plan-period-note { font-family: var(--mono); font-size: 0.78rem; color: var(--ink-soft); margin: 0; letter-spacing: 0.02em; }
.plan-period-note-muted { color: var(--ink-muted); }
.plan-free-line { font-family: var(--serif); font-size: 0.95rem; color: var(--ink-soft); font-style: italic; margin: 0; }
.plan-upgrade {
  display: inline-flex; align-items: center; gap: 0.4rem;
  align-self: flex-start;
  font-family: var(--sans); font-size: 0.85rem; font-weight: 600;
  color: var(--accent); letter-spacing: 0.02em;
  padding: 0.55rem 0.85rem;
  background: var(--accent-tint); border: 1px solid var(--accent-line);
  border-radius: 4px;
  transition: background 200ms var(--ease), border-color 200ms var(--ease), color 200ms var(--ease);
}
.plan-upgrade:hover { background: var(--accent); border-color: var(--accent); color: var(--paper); }
.plan-upgrade-arrow { font-family: var(--serif); font-style: italic; transition: transform 200ms var(--ease); }
.plan-upgrade:hover .plan-upgrade-arrow { transform: translateX(3px); }
/* Usage card */
.usage-body { display: flex; flex-direction: column; gap: 0.95rem; }
.usage-numbers { display: flex; align-items: baseline; gap: 0.35rem; font-family: var(--mono); }
.usage-used {
  font-family: var(--serif); font-weight: 600; font-size: 2.4rem;
  color: var(--ink); letter-spacing: -0.025em; line-height: 1;
}
.profile-card-usage.is-at-limit .usage-used { color: var(--accent); }
.usage-divider { font-family: var(--serif); font-size: 1.5rem; color: var(--ink-faint); font-weight: 400; }
.usage-limit { font-family: var(--mono); font-size: 1.05rem; color: var(--ink-muted); font-weight: 500; }

.quota-meter { display: flex; flex-direction: column; gap: 6px; }
.quota-meter-bar {
  height: 5px; background: var(--line);
  border-radius: 3px; overflow: hidden; position: relative;
}
.quota-meter-fill {
  height: 100%;
  background: linear-gradient(to right, var(--accent-soft), var(--accent));
  transition: width 360ms var(--ease), box-shadow 360ms var(--ease);
}
.quota-meter.is-near-limit .quota-meter-fill {
  background: linear-gradient(to right, var(--accent), var(--accent-deep));
  box-shadow: 0 0 0 1px var(--accent-line), 0 0 10px -1px rgba(123, 31, 31, 0.45);
}
.quota-meter.is-at-limit .quota-meter-fill {
  background: var(--accent-deep);
  box-shadow: 0 0 0 1px var(--accent), 0 0 14px -2px rgba(123, 31, 31, 0.55);
  animation: quota-pulse 2s ease-in-out infinite;
}
@keyframes quota-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.6; } }
@media (prefers-reduced-motion: reduce) { .quota-meter.is-at-limit .quota-meter-fill { animation: none; } }
.usage-reset { display: flex; align-items: baseline; gap: 0.5rem; flex-wrap: wrap; }
.usage-reset-label {
  font-family: var(--mono); font-size: 0.68rem;
  letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-muted);
}
.usage-reset-label-warn { color: var(--accent); font-weight: 600; }
.usage-reset-time {
  font-family: var(--mono); font-size: 1rem;
  color: var(--ink); font-weight: 500; font-variant-numeric: tabular-nums;
}
.profile-card-usage.is-at-limit .usage-reset-time { color: var(--accent); }

.usage-upgrade {
  display: inline-flex; align-items: center; gap: 0.4rem;
  align-self: flex-start;
  font-family: var(--sans); font-size: 0.85rem; font-weight: 600;
  color: var(--paper); background: var(--accent); border: 1px solid var(--accent);
  padding: 0.55rem 0.95rem; border-radius: 4px; letter-spacing: 0.02em;
  transition: background 200ms var(--ease), border-color 200ms var(--ease);
  margin-top: 0.25rem;
}
.usage-upgrade:hover { background: var(--accent-deep); border-color: var(--accent-deep); }
.usage-upgrade-arrow { font-family: var(--serif); font-style: italic; transition: transform 200ms var(--ease); }
.usage-upgrade:hover .usage-upgrade-arrow { transform: translateX(3px); }
/* Actions card */
.actions-body { display: flex; flex-direction: column; gap: 0.75rem; }
.action-btn {
  display: inline-flex; align-items: center; justify-content: space-between;
  gap: 0.6rem; padding: 0.85rem 1.1rem;
  font-family: var(--sans); font-size: 0.88rem; font-weight: 500;
  letter-spacing: 0.02em; border-radius: 4px; cursor: pointer;
  transition: background 200ms var(--ease), border-color 200ms var(--ease), color 200ms var(--ease);
  text-align: left;
}
.action-btn-primary { background: var(--ink); color: var(--paper); border: 1px solid var(--ink); }
.action-btn-primary:hover:not(:disabled) { background: var(--accent); border-color: var(--accent); }
.action-btn-secondary { background: var(--paper-raised); color: var(--ink); border: 1px solid var(--line-strong); }
.action-btn-secondary:hover { border-color: var(--ink); }
.action-btn:disabled { opacity: 0.6; cursor: default; }
.action-btn-arrow {
  font-family: var(--serif); font-style: italic; font-size: 1em;
  transition: transform 200ms var(--ease);
}
.action-btn:hover:not(:disabled) .action-btn-arrow { transform: translateX(3px); }
.action-error {
  margin: 0; padding: 0.55rem 0.75rem;
  background: var(--accent-tint); border: 1px solid var(--accent-line); border-radius: 4px;
  font-family: var(--sans); font-size: 0.78rem; color: var(--accent);
}
.action-delete {
  align-self: center;
  font-family: var(--sans); font-size: 0.74rem; color: var(--ink-faint);
  margin-top: 0.5rem;
  text-decoration: underline; text-decoration-color: var(--line); text-underline-offset: 3px;
  transition: color 200ms var(--ease), text-decoration-color 200ms var(--ease);
}
.action-delete:hover { color: var(--ink-muted); text-decoration-color: var(--ink-muted); }
/* Footer (matches site pattern) */
footer.site {
  max-width: 1240px; margin: 0 auto; padding: 2rem;
  display: flex; align-items: center; justify-content: space-between; gap: 1.5rem;
  border-top: 1px solid var(--line);
  font-family: var(--mono); font-size: 0.7rem;
  letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-muted);
}
.footer-mark {
  font-family: var(--serif); font-weight: 600; letter-spacing: 0.2em;
  color: var(--ink); text-transform: none; font-size: 0.85rem;
}
.footer-links { display: flex; gap: 1.5rem; }
.footer-links a { color: var(--ink-muted); transition: color 140ms var(--ease); }
.footer-links a:hover { color: var(--accent); }
@media (max-width: 720px) {
  footer.site { flex-direction: column; align-items: center; text-align: center; }
  .footer-links { flex-wrap: wrap; justify-content: center; gap: 0.85rem; }
}
/* Mobile tightening — 320px guard. */
@media (max-width: 480px) {
  .profile-main { padding: 2rem 1rem 3rem; }
  .identity-row { gap: 1rem; }
  .identity-avatar { width: 64px; height: 64px; }
  .identity-avatar-fallback { font-size: 1.7rem; }
  .identity-email { font-size: 0.95rem; }
  .plan-name { font-size: 1.7rem; }
  .usage-used { font-size: 2rem; }
  .profile-card { padding: 1.25rem; }
  .topbar-inner { padding: 0.85rem 1rem; }
}