:root {
  --ink: #172728;
  --ink-soft: #2f4443;
  --paper: #f4f2ec;
  --paper-warm: #ebe7dc;
  --white: #fffefa;
  --jade: #2b7269;
  --jade-light: #dceae5;
  --gold: #b28a47;
  --gold-light: #efe5cc;
  --cinnabar: #a64034;
  --line: #d7d2c7;
  --muted: #6f7774;
  --shadow: 0 18px 45px rgba(25,39,38,.1);
  --display: "STKaiti", "KaiTi", "FangSong", serif;
  --body: "Microsoft YaHei", "PingFang SC", "Noto Sans CJK SC", sans-serif;
  --utility: "DIN Alternate", "Segoe UI", sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; color: var(--ink); background: var(--paper); font-family: var(--body); font-synthesis: none; -webkit-font-smoothing: antialiased; }
button, input, textarea { font: inherit; }
button, a { touch-action: manipulation; -webkit-tap-highlight-color: rgba(43,114,105,.16); }
button { color: inherit; }
a { color: inherit; }
[hidden] { display: none !important; }
h1, h2, h3 { scroll-margin-top: 26px; text-wrap: balance; }
:focus-visible { outline: 3px solid rgba(178,138,71,.8); outline-offset: 3px; }
.skip-link { position: fixed; z-index: 100; left: 16px; top: 10px; padding: 10px 16px; background: var(--ink); color: white; transform: translateY(-80px); transition: transform .2s ease; }
.skip-link:focus { transform: translateY(0); }

.profile-header { position: relative; z-index: 10; border-top: 5px solid var(--ink); border-bottom: 1px solid #cec9be; background: rgba(250,249,245,.98); box-shadow: 0 4px 18px rgba(18,35,35,.06); }
.profile-header::before { content: ""; position: absolute; left: 0; top: -5px; width: 88px; height: 5px; background: var(--cinnabar); }
.profile-header-inner { width: min(1440px,calc(100% - 48px)); min-height: 76px; display: flex; align-items: center; gap: 28px; margin: auto; }
.profile-brand { min-width: 0; display: flex; align-items: center; text-decoration: none; }
.profile-brand img { width: 112px; height: 38px; object-fit: contain; }
.profile-brand > span { width: 1px; height: 30px; margin: 0 13px; background: var(--line); }
.profile-brand strong { font: 800 27px var(--display); letter-spacing: .08em; white-space: nowrap; }
.profile-brand small { margin-left: 12px; padding-left: 12px; border-left: 1px solid var(--line); color: var(--muted); font-size: 12px; white-space: nowrap; }
.profile-header nav { margin-left: auto; display: flex; align-items: stretch; align-self: stretch; }
.profile-header nav a { display: flex; align-items: center; padding: 0 16px; border-left: 1px solid transparent; border-right: 1px solid transparent; color: var(--ink-soft); font-size: 13px; font-weight: 700; text-decoration: none; transition: border-color .2s ease, background .2s ease; }
.profile-header nav a:hover { border-color: var(--line); background: white; }
.profile-account-nav { display: flex; align-items: center; gap: 8px; }
.profile-my-page-link { min-height: 42px; display: inline-flex; align-items: center; padding: 0 13px; color: var(--jade); font-size: 12px; font-weight: 800; text-decoration: none; }
.profile-my-page-link:hover { background: var(--jade-light); }
.profile-account-link { min-height: 42px; display: inline-flex; align-items: center; padding: 0 17px; border: 1px solid var(--ink); background: var(--ink); color: white; font-size: 13px; font-weight: 700; text-decoration: none; transition: border-color .2s ease, background .2s ease, transform .2s ease; }
.profile-account-link:hover { border-color: var(--cinnabar); background: var(--cinnabar); transform: translateY(-1px); }

main { min-height: calc(100vh - 150px); }
.profile-loading { width: min(920px,calc(100% - 40px)); margin: 95px auto; padding: 65px 40px; border: 1px solid var(--line); background: var(--white); text-align: center; }
.profile-loading > span { display: grid; place-items: center; width: 62px; height: 62px; margin: auto; border: 1px solid var(--gold); border-radius: 50%; color: var(--gold); font: 800 19px var(--display); animation: profile-pulse 1.6s ease-in-out infinite; }
.profile-loading h1 { margin: 20px 0 8px; font: 800 32px var(--display); }
.profile-loading p { margin: 0; color: var(--muted); font-size: 13px; }

.profile-hero { position: relative; overflow: hidden; color: white; background: var(--ink); }
.profile-hero::before { content: ""; position: absolute; inset: 0; opacity: .13; background: repeating-linear-gradient(90deg,transparent 0 119px,rgba(255,255,255,.12) 120px), linear-gradient(125deg,transparent 0 58%,rgba(178,138,71,.35)); }
.profile-hero::after { content: "名  剑  台  ·  江  湖  名  帖"; position: absolute; right: 4%; bottom: -9px; color: rgba(255,255,255,.035); font: 800 clamp(42px,7vw,102px) var(--display); letter-spacing: .14em; white-space: nowrap; pointer-events: none; }
.profile-hero-grid { position: relative; z-index: 1; width: min(1380px,calc(100% - 48px)); min-height: 318px; display: grid; grid-template-columns: 176px minmax(0,1fr) 190px; align-items: center; gap: 34px; margin: auto; padding: 42px 0 50px; }
.profile-avatar-frame { position: relative; width: 160px; padding: 11px 11px 38px; border: 1px solid rgba(221,199,153,.55); background: rgba(255,255,255,.06); box-shadow: 10px 10px 0 rgba(0,0,0,.12); }
.profile-avatar-frame::before,.profile-avatar-frame::after { content: ""; position: absolute; width: 18px; height: 18px; border-color: var(--gold); }
.profile-avatar-frame::before { left: 4px; top: 4px; border-left: 1px solid; border-top: 1px solid; }
.profile-avatar-frame::after { right: 4px; bottom: 4px; border-right: 1px solid; border-bottom: 1px solid; }
.profile-avatar-frame img { display: block; width: 136px; height: 136px; border: 2px solid rgba(255,255,255,.72); border-radius: 50%; background: #e9e5db; object-fit: cover; }
.profile-avatar-frame span { position: absolute; left: 0; right: 0; bottom: 11px; color: #e6cd9a; font-size: 12px; font-weight: 700; text-align: center; letter-spacing: .08em; }
.profile-hero-copy { min-width: 0; }
.profile-hero-copy > p { margin: 0; color: #dec693; font: 700 12px var(--utility); letter-spacing: .24em; }
.profile-hero-copy h1 { margin: 13px 0 10px; overflow-wrap: anywhere; font: 800 clamp(38px,4.6vw,64px)/1.1 var(--display); letter-spacing: .05em; }
.profile-hero-copy blockquote { max-width: 720px; margin: 0; color: rgba(255,255,255,.78); font-size: 16px; line-height: 1.8; overflow-wrap: anywhere; }
.profile-tags { min-height: 26px; display: flex; flex-wrap: wrap; gap: 7px; margin-top: 19px; }
.profile-tags span { padding: 4px 9px; border: 1px solid rgba(222,198,147,.48); background: rgba(222,198,147,.08); color: #eed7a8; font-size: 12px; }
.profile-actions { display: flex; flex-wrap: wrap; gap: 9px; margin-top: 25px; }
.profile-actions button,.profile-actions a { min-height: 42px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid rgba(255,255,255,.5); background: transparent; color: white; padding: 0 16px; font-size: 12px; text-decoration: none; cursor: pointer; transition: border-color .2s ease, background .2s ease, transform .2s ease; }
.profile-actions button:hover,.profile-actions a:hover { border-color: #e0c995; background: rgba(224,201,149,.12); transform: translateY(-1px); }
.profile-actions #editProfileOpen { border-color: #d9bf8d; background: #d6bb87; color: var(--ink); font-weight: 800; }
.profile-ledger { align-self: stretch; display: flex; flex-direction: column; justify-content: center; padding-left: 27px; border-left: 1px solid rgba(255,255,255,.18); }
.profile-ledger small { color: rgba(255,255,255,.55); font-size: 12px; letter-spacing: .14em; }
.profile-ledger > strong { margin-top: 7px; color: #f0d59e; font: 800 31px var(--utility); font-variant-numeric: tabular-nums; }
.profile-ledger-rule { width: 100%; height: 1px; margin: 22px 0 15px; background: linear-gradient(90deg,rgba(255,255,255,.38),transparent); }
.profile-ledger em { color: rgba(255,255,255,.72); font-size: 12px; font-style: normal; }
.profile-seal { width: 62px; height: 62px; display: grid; place-items: center; margin: 20px 0 0 7px; border: 3px double #c85a4b; border-radius: 50%; color: #d56a5c; font: 800 30px var(--display); transform: rotate(-8deg); opacity: .92; }
.profile-seal.private { border-color: #979f9c; color: #abb2af; }

.owner-state { position: relative; z-index: 3; width: min(1380px,calc(100% - 48px)); display: flex; align-items: center; justify-content: space-between; gap: 20px; margin: -22px auto 0; padding: 16px 18px; border: 1px solid #dfcfab; border-left: 4px solid var(--gold); background: #fffaf0; color: #6e552d; box-shadow: 0 10px 28px rgba(44,39,28,.1); font-size: 13px; line-height: 1.7; }
.owner-state > div:first-child { min-width: 0; }
.owner-state-copy > small { display: block; margin-bottom: 2px; color: #9a7740; font: 700 12px var(--utility); letter-spacing: .12em; }
.owner-state strong,.owner-state span { display: block; }
.owner-state strong { color: var(--ink); font: 800 18px var(--display); }
.owner-state span { margin-top: 2px; }
.owner-state-actions { flex: 0 0 auto; display: flex; gap: 8px; }
.owner-state-actions button,.owner-state-actions a { min-height: 42px; display: inline-flex; align-items: center; justify-content: center; gap: 7px; border: 1px solid #a98e5e; background: transparent; color: #6e552d; padding: 0 15px; font-size: 12px; font-weight: 800; text-decoration: none; cursor: pointer; transition: background .2s ease, border-color .2s ease, color .2s ease, transform .2s ease; }
.owner-state-actions button { border-color: var(--ink); background: var(--ink); color: white; }
.owner-state-actions button > span { display: grid; place-items: center; width: 22px; height: 22px; border: 1px solid rgba(255,255,255,.45); border-radius: 50%; font: 800 12px var(--display); }
.owner-state-actions button:hover,.owner-state-actions a:hover { background: #f2e4c3; }
.owner-state-actions button:hover { border-color: var(--cinnabar); background: var(--cinnabar); }
.owner-state.is-warning { border-color: var(--cinnabar); background: #fff0ec; color: #813a31; }
.owner-state.is-preview { border-color: var(--jade); background: #e9f4ef; color: #2a665e; }
.owner-state.is-preview .owner-state-actions a { border-color: var(--jade); color: var(--jade); }
.owner-hidden { position: relative; }
.owner-hidden::before { content: "仅自己可见"; position: absolute; z-index: 2; right: 12px; top: 10px; padding: 3px 7px; border: 1px solid #b7b0a2; background: #f4f1e8; color: #7b756b; font-size: 12px; font-weight: 700; }
.profile-posts.owner-hidden::before { top: 4px; }

.profile-content { width: min(1380px,calc(100% - 48px)); display: grid; grid-template-columns: minmax(0,1fr) 360px; gap: 26px; margin: 34px auto 38px; }
.profile-story-column { display: grid; gap: 22px; }
.profile-paper { position: relative; min-height: 205px; padding: 31px 35px; border: 1px solid var(--line); border-top: 3px solid var(--ink); background: var(--white); box-shadow: 7px 7px 0 #e4dfd3; }
.profile-paper::after { content: ""; position: absolute; right: 28px; top: 0; width: 54px; height: 3px; background: var(--cinnabar); }
.profile-paper header p,.profile-posts header p,.profile-editor-head p { margin: 0; color: var(--jade); font: 700 12px var(--utility); letter-spacing: .2em; }
.profile-paper h2,.profile-posts h2,.profile-editor h2 { margin: 7px 0 0; font: 800 30px var(--display); letter-spacing: .04em; }
.profile-jx3-card { overflow: hidden; }
.profile-jx3-card > header { display: flex; align-items: end; justify-content: space-between; gap: 18px; }
.profile-jx3-card > header p { margin: 0; color: var(--jade); font: 700 12px var(--utility); letter-spacing: .15em; }
.profile-jx3-card > header h2 { margin: 5px 0 0; font: 800 23px var(--display); letter-spacing: .04em; }
.profile-jx3-card > header > span { flex: 0 0 auto; padding: 4px 8px; border: 1px solid rgba(43,114,105,.36); background: var(--jade-light); color: var(--jade); font: 800 12px var(--utility); letter-spacing: .12em; }
.profile-jx3-card-frame { position: relative; width: min(100%,420px); margin: 16px auto 0; padding: 6px; background: #142725; box-shadow: 0 10px 26px rgba(18,40,37,.18); }
.profile-jx3-card-frame img { width: 100%; aspect-ratio: 3 / 4; display: block; background: #e9e5da; object-fit: contain; }
.profile-jx3-card-frame figcaption { display: grid; gap: 3px; padding: 10px 4px 3px; color: white; }
.profile-jx3-card-frame figcaption strong { margin: 0; font: 800 18px var(--display); }
.profile-jx3-card-frame figcaption span { color: #c6d8d3; font-size: 12px; text-align: right; }
.profile-jx3-card-frame.is-image-error { min-height: 220px; display: grid; place-items: center; }
.profile-jx3-card-frame.is-image-error::before { content: "名片图片暂时无法载入，请稍后刷新"; color: #dbe7e3; font-size: 13px; }
.profile-jx3-card-frame.is-image-error figcaption { position: absolute; inset: auto 10px 10px; width: calc(100% - 20px); }
.profile-jx3-card-empty { display: grid; grid-template-columns: 56px minmax(0,1fr) auto; gap: 16px; align-items: center; margin-top: 23px; padding: 20px; border: 1px dashed #b9afa0; background: #faf8f2; }
.profile-jx3-card-empty > span { display: grid; place-items: center; width: 52px; height: 52px; border: 2px solid var(--jade); border-radius: 50%; color: var(--jade); font: 800 23px var(--display); }
.profile-jx3-card-empty strong { font-size: 15px; }
.profile-jx3-card-empty p { margin: 5px 0 0; color: var(--muted); font-size: 12px; line-height: 1.6; }
.profile-jx3-card-empty button { min-height: 40px; border: 1px solid var(--jade); background: white; color: var(--jade); padding: 0 14px; font-weight: 800; cursor: pointer; }
.profile-jx3-card-empty button:hover,.profile-jx3-card-empty button:focus-visible { background: var(--jade-light); }
.profile-long-copy { margin: 23px 0 0; color: #465654; font-size: 15px; line-height: 2; white-space: pre-wrap; overflow-wrap: anywhere; }
.profile-looking { border-top-color: var(--gold); }
.profile-looking::after { background: var(--gold); }
.profile-facts { display: grid; align-content: start; border: 1px solid var(--line); border-top: 3px solid var(--jade); background: var(--white); }
.profile-facts section { position: relative; min-width: 0; padding: 22px 24px; border-bottom: 1px solid var(--line); }
.profile-facts .profile-jx3-card { padding: 18px 16px 16px; }
.profile-facts .profile-jx3-card-frame figcaption span { text-align: left; }
.profile-facts .profile-jx3-card-empty { grid-template-columns: 48px minmax(0,1fr); gap: 12px; margin-top: 15px; padding: 14px; }
.profile-facts .profile-jx3-card-empty > span { width: 44px; height: 44px; font-size: 20px; }
.profile-facts .profile-jx3-card-empty button { grid-column: 1 / -1; width: 100%; margin-top: 0; }
.profile-facts section:last-child { border-bottom: 0; }
.profile-facts small { display: block; color: var(--muted); font-size: 12px; }
.profile-facts strong { display: block; margin-top: 7px; color: var(--ink); font: 800 20px var(--display); overflow-wrap: anywhere; }
.profile-facts p { margin: 6px 0 0; color: var(--jade); font-size: 12px; line-height: 1.65; overflow-wrap: anywhere; }
.profile-facts button { min-height: 40px; margin-top: 11px; border: 1px solid var(--jade); background: transparent; color: var(--jade); padding: 6px 11px; font-size: 12px; cursor: pointer; }
.profile-facts button:hover { background: var(--jade); color: white; }

.profile-posts { width: min(1380px,calc(100% - 48px)); margin: 0 auto 48px; }
.profile-posts > header { display: flex; align-items: end; justify-content: space-between; gap: 20px; padding: 0 0 15px; border-bottom: 2px solid var(--ink); }
.profile-posts > header > span { color: var(--muted); font-size: 12px; }
.profile-post-list { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 14px; margin-top: 18px; }
.profile-post-card { min-width: 0; display: grid; gap: 12px; padding: 20px; border: 1px solid var(--line); background: var(--white); text-decoration: none; transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease; }
.profile-post-card:hover { border-color: #aebbb6; box-shadow: var(--shadow); transform: translateY(-2px); }
.profile-post-card header { display: flex; align-items: center; justify-content: space-between; gap: 10px; color: var(--jade); font-size: 12px; }
.profile-post-card header time { color: var(--muted); font-variant-numeric: tabular-nums; }
.profile-post-card h3 { margin: 0; overflow-wrap: anywhere; font-size: 17px; line-height: 1.55; }
.profile-post-card p { margin: 0; color: var(--muted); font-size: 12px; line-height: 1.65; overflow-wrap: anywhere; }
.profile-post-card footer { display: flex; gap: 12px; padding-top: 10px; border-top: 1px dashed var(--line); color: #7c6b4b; font-size: 12px; }
.profile-post-empty { grid-column: 1 / -1; padding: 36px; border: 1px dashed #bdb7aa; color: var(--muted); text-align: center; font-size: 13px; }

.profile-private-state { width: min(900px,calc(100% - 48px)); display: grid; grid-template-columns: 74px 1fr; gap: 23px; align-items: center; margin: 65px auto; padding: 34px; border: 1px solid var(--line); background: var(--white); box-shadow: var(--shadow); }
.profile-private-state > span { display: grid; place-items: center; width: 70px; height: 70px; border: 2px solid #909895; border-radius: 50%; color: #747e7a; font: 800 28px var(--display); }
.profile-private-state h2 { margin: 0 0 8px; font: 800 28px var(--display); }
.profile-private-state p { margin: 0; color: var(--muted); font-size: 13px; line-height: 1.8; }

.profile-editor { position: fixed; inset: 0 0 0 auto; width: min(980px,calc(100vw - 72px)); max-width: none; height: 100dvh; max-height: none; margin: 0; padding: 0; overflow: hidden; border: 0; border-left: 1px solid #bfb9ab; background: #f9f7f1; color: var(--ink); box-shadow: -24px 0 60px rgba(8,22,22,.24); }
.profile-editor[open] { display: flex; flex-direction: column; animation: profile-drawer-in .32s cubic-bezier(.2,.78,.2,1) both; }
.profile-editor::backdrop { background: rgba(11,27,27,.55); backdrop-filter: blur(2px); animation: profile-backdrop-in .24s ease-out both; }
.profile-editor-head { position: relative; z-index: 2; flex: 0 0 auto; display: flex; align-items: start; justify-content: space-between; gap: 25px; padding: max(25px,env(safe-area-inset-top)) max(32px,env(safe-area-inset-right)) 22px 32px; border-top: 5px solid var(--cinnabar); border-bottom: 1px solid var(--line); background: var(--white); box-shadow: 0 5px 18px rgba(24,39,38,.06); }
.profile-editor-head span { display: block; margin-top: 7px; color: var(--muted); font-size: 13px; }
.profile-editor-head > button { min-width: 64px; min-height: 42px; border: 1px solid var(--line); background: white; padding: 9px 14px; color: var(--muted); cursor: pointer; }
.profile-editor-head > button:hover { border-color: var(--ink); color: var(--ink); }
.profile-editor form { min-height: 0; flex: 1; display: grid; grid-template-rows: minmax(0,1fr) auto auto; overflow: hidden; }
.profile-editor-grid { min-height: 0; display: grid; grid-template-columns: minmax(0,1.08fr) minmax(360px,.92fr); overflow: auto; overscroll-behavior: contain; scrollbar-gutter: stable; }
.profile-custom-fields { display: grid; gap: 18px; padding: 30px 32px 35px; border-right: 1px solid var(--line); }
.profile-avatar-editor { display: grid; grid-template-columns: 112px minmax(0,1fr); gap: 20px; align-items: center; padding: 18px; border: 1px solid #d4c7a8; background: linear-gradient(115deg,#fffaf0,#fffefa 62%); box-shadow: 5px 5px 0 #e8e0d0; }
.profile-avatar-preview { position: relative; width: 112px; height: 112px; display: grid; place-items: center; border: 1px solid #b89a65; background: #ece8dd; }
.profile-avatar-preview::before,.profile-avatar-preview::after { content: ""; position: absolute; width: 15px; height: 15px; border-color: var(--cinnabar); pointer-events: none; }
.profile-avatar-preview::before { left: 5px; top: 5px; border-left: 1px solid; border-top: 1px solid; }
.profile-avatar-preview::after { right: 5px; bottom: 5px; border-right: 1px solid; border-bottom: 1px solid; }
.profile-avatar-preview img { width: 92px; height: 92px; display: block; border: 2px solid white; border-radius: 50%; background: #e8e5dd; object-fit: cover; }
.profile-avatar-editor-copy { min-width: 0; }
.profile-avatar-editor-copy > div:first-child { display: flex; align-items: baseline; gap: 10px; }
.profile-avatar-editor-copy h3 { margin: 0; font: 800 22px var(--display); }
.profile-avatar-editor-copy > div:first-child p { margin: 0; color: var(--jade); font: 700 12px var(--utility); letter-spacing: .13em; }
.profile-avatar-editor-copy > p { margin: 8px 0 12px; color: var(--muted); font-size: 12px; line-height: 1.65; }
.profile-avatar-actions { display: flex; flex-wrap: wrap; gap: 7px; }
.profile-avatar-picker { position: relative; }
.profile-avatar-picker input { position: absolute; width: 1px; height: 1px; overflow: hidden; opacity: 0; clip-path: inset(50%); }
.profile-avatar-picker span,.profile-avatar-actions button { min-height: 40px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--jade); background: white; color: var(--jade); padding: 0 12px; font-size: 12px; font-weight: 800; cursor: pointer; }
.profile-avatar-picker:hover span,.profile-avatar-picker:focus-within span { background: var(--jade-light); }
.profile-avatar-actions #uploadProfileAvatar { border-color: var(--ink); background: var(--ink); color: white; }
.profile-avatar-actions #uploadProfileAvatar:hover:not(:disabled) { border-color: var(--cinnabar); background: var(--cinnabar); }
.profile-avatar-actions #resetProfileAvatar { border-color: var(--line); color: var(--muted); }
.profile-avatar-actions button:disabled { opacity: .46; cursor: not-allowed; }
.profile-avatar-editor-copy > small { display: block; margin-top: 9px; color: var(--jade); font-size: 12px; line-height: 1.55; }
.profile-avatar-editor-copy > small.is-draft { color: #8a6428; }
.profile-avatar-editor-copy > small.is-error { color: var(--cinnabar); }
.profile-jx3-editor { display: grid; grid-template-columns: 112px minmax(0,1fr); gap: 20px; align-items: center; padding: 18px; border: 1px solid rgba(43,114,105,.38); background: linear-gradient(115deg,#edf7f3,#fffefa 68%); box-shadow: 5px 5px 0 #dce8e2; }
.profile-jx3-editor-preview { width: 112px; height: 132px; display: grid; place-items: center; overflow: hidden; border: 1px solid #7da89f; background: #142725; }
.profile-jx3-editor-preview img { width: 100%; height: 100%; display: block; object-fit: contain; }
.profile-jx3-editor-preview > span { display: grid; place-items: center; width: 54px; height: 54px; border: 2px solid #d3e6df; border-radius: 50%; color: #d3e6df; font: 800 24px var(--display); }
.profile-jx3-editor-copy { min-width: 0; }
.profile-jx3-editor-copy > div:first-child { display: flex; align-items: baseline; gap: 10px; }
.profile-jx3-editor-copy h3 { margin: 0; font: 800 22px var(--display); }
.profile-jx3-editor-copy > div:first-child p { margin: 0; color: var(--jade); font: 700 12px var(--utility); letter-spacing: .13em; }
.profile-jx3-editor-copy > p { margin: 8px 0 12px; color: var(--ink-soft); font-size: 13px; line-height: 1.6; }
.profile-jx3-editor-actions { display: flex; flex-wrap: wrap; gap: 7px; }
.profile-jx3-editor-actions button { min-height: 40px; border: 1px solid var(--jade); background: var(--jade); color: white; padding: 0 13px; font-size: 12px; font-weight: 800; cursor: pointer; }
.profile-jx3-editor-actions #unbindJx3Card { border-color: var(--line); background: white; color: var(--muted); }
.profile-jx3-editor-actions button:disabled { opacity: .5; cursor: not-allowed; }
.profile-jx3-editor-copy > small { display: block; margin-top: 9px; color: var(--muted); font-size: 12px; line-height: 1.55; }
.profile-custom-fields > label { display: grid; gap: 8px; color: var(--ink-soft); font-size: 13px; font-weight: 700; }
.profile-custom-fields > label > span { display: flex; justify-content: space-between; gap: 20px; }
.profile-custom-fields > label small,.profile-custom-fields > label em { color: var(--muted); font-size: 12px; font-style: normal; font-weight: 400; }
.profile-custom-fields > label input,.profile-custom-fields > label textarea { width: 100%; border: 1px solid #c7c2b7; border-radius: 0; background: white; color: var(--ink); padding: 12px 13px; font-size: 14px; line-height: 1.7; }
.profile-custom-fields > label textarea { resize: vertical; }
.profile-custom-fields > label input:focus,.profile-custom-fields > label textarea:focus { border-color: var(--jade); }
.profile-privacy { min-width: 0; margin: 0; padding: 25px 28px 32px; border: 0; }
.profile-privacy legend { padding: 0 4px; color: var(--ink); font: 800 24px var(--display); }
.profile-master-switch,.profile-visibility-list label { position: relative; display: grid; grid-template-columns: minmax(0,1fr) 42px; align-items: center; gap: 14px; cursor: pointer; }
.profile-master-switch { margin-top: 8px; padding: 16px; border: 1px solid rgba(43,114,105,.35); background: var(--jade-light); }
.profile-master-switch span,.profile-visibility-list span { min-width: 0; }
.profile-master-switch strong,.profile-master-switch small,.profile-visibility-list strong,.profile-visibility-list small { display: block; }
.profile-master-switch strong,.profile-visibility-list strong { font-size: 13px; }
.profile-master-switch small,.profile-visibility-list small { margin-top: 4px; color: var(--muted); font-size: 12px; line-height: 1.5; }
.profile-master-switch input,.profile-visibility-list input { position: absolute; width: 1px; height: 1px; overflow: hidden; opacity: 0; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
.profile-master-switch i,.profile-visibility-list i { position: relative; width: 42px; height: 23px; border: 1px solid #9ea6a3; border-radius: 20px; background: #c8cdca; transition: border-color .2s ease, background .2s ease; }
.profile-master-switch i::after,.profile-visibility-list i::after { content: ""; position: absolute; left: 3px; top: 3px; width: 15px; height: 15px; border-radius: 50%; background: white; box-shadow: 0 1px 4px rgba(0,0,0,.2); transition: transform .2s ease; }
.profile-master-switch input:checked + i,.profile-visibility-list input:checked + i { border-color: var(--jade); background: var(--jade); }
.profile-master-switch input:checked + i::after,.profile-visibility-list input:checked + i::after { transform: translateX(19px); }
.profile-master-switch input:focus-visible + i,.profile-visibility-list input:focus-visible + i { outline: 3px solid rgba(178,138,71,.8); outline-offset: 3px; }
.profile-privacy-note { margin: 12px 0 15px; padding: 10px 12px; border-left: 3px solid var(--gold); background: #fff8e9; color: #735b33; font-size: 12px; line-height: 1.65; }
.profile-privacy-note.is-public { border-color: var(--jade); background: #eef8f4; color: var(--jade); }
.profile-visibility-list { border-top: 1px solid var(--line); }
.profile-visibility-list label { min-height: 65px; padding: 10px 3px; border-bottom: 1px solid var(--line); }
.profile-editor-feedback { position: relative; z-index: 1; padding: 10px 32px; border-top: 1px solid var(--line); background: #edf6f2; color: var(--jade); font-size: 12px; line-height: 1.6; }
.profile-editor-feedback.is-dirty { border-left: 4px solid var(--gold); background: #fff7e5; color: #795b26; }
.profile-editor-feedback.is-error { border-left: 4px solid var(--cinnabar); background: #fff0ec; color: #84382f; }
.profile-save-bar { position: relative; z-index: 2; display: flex; align-items: center; justify-content: space-between; gap: 25px; padding: 17px max(32px,env(safe-area-inset-right)) max(17px,env(safe-area-inset-bottom)) 32px; border-top: 1px solid var(--line); background: var(--white); box-shadow: 0 -6px 20px rgba(24,39,38,.07); }
.profile-save-bar p { max-width: 760px; margin: 0; color: var(--muted); font-size: 12px; line-height: 1.7; }
.profile-save-bar p small { display: block; margin-top: 4px; color: var(--jade); font-size: 12px; font-weight: 800; }
.profile-save-bar p small.is-dirty { color: #8a6428; }
.profile-save-bar button { min-height: 46px; flex: 0 0 auto; border: 1px solid var(--ink); background: var(--ink); color: white; padding: 0 22px; font-weight: 800; cursor: pointer; }
.profile-save-bar button:hover { border-color: var(--cinnabar); background: var(--cinnabar); }
.profile-save-bar button:disabled { opacity: .55; cursor: wait; }

.profile-toast { position: fixed; z-index: 50; left: 50%; bottom: 24px; max-width: calc(100vw - 32px); padding: 11px 18px; background: var(--ink); color: white; font-size: 13px; opacity: 0; pointer-events: none; transform: translate(-50%,18px); transition: opacity .2s ease, transform .2s ease; }
.profile-toast.is-visible { opacity: 1; transform: translate(-50%,0); }
.profile-toast.is-error { background: var(--cinnabar); }
footer { min-height: 72px; display: flex; align-items: center; justify-content: center; gap: 18px; padding: 18px 24px; border-top: 1px solid var(--line); color: var(--muted); font-size: 12px; text-align: center; }
footer p { margin: 0; }
footer a { min-height: 40px; display: inline-flex; align-items: center; color: var(--jade); }

@keyframes profile-pulse { 50% { transform: scale(.96); opacity: .65; } }
@keyframes profile-drawer-in { from { opacity: .75; transform: translateX(44px); } to { opacity: 1; transform: none; } }
@keyframes profile-backdrop-in { from { opacity: 0; } to { opacity: 1; } }

@media (max-width: 1050px) {
  .profile-header-inner { width: min(100% - 30px,1440px); }
  .profile-brand small { display: none; }
  .profile-header nav a { padding: 0 10px; }
  .profile-hero-grid { grid-template-columns: 150px minmax(0,1fr) 150px; gap: 24px; }
  .profile-avatar-frame { width: 142px; padding: 8px 8px 35px; }
  .profile-avatar-frame img { width: 124px; height: 124px; }
  .profile-content { grid-template-columns: minmax(0,1fr) 310px; }
  .profile-post-list { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .profile-editor { width: min(760px,calc(100vw - 48px)); }
  .profile-editor-grid { grid-template-columns: 1fr; }
  .profile-custom-fields { border-right: 0; border-bottom: 1px solid var(--line); }
}

@media (max-width: 760px) {
  .profile-header-inner { min-height: 66px; gap: 10px; }
  .profile-brand img { display: none; }
  .profile-brand > span { display: none; }
  .profile-brand strong { font-size: 24px; }
  .profile-header nav { display: none; }
  .profile-account-nav { margin-left: auto; }
  .profile-my-page-link { display: none; }
  .profile-hero-grid { width: min(100% - 32px,1380px); min-height: 0; grid-template-columns: 104px minmax(0,1fr); gap: 18px; padding: 30px 0 45px; }
  .profile-avatar-frame { width: 102px; padding: 6px 6px 32px; }
  .profile-avatar-frame img { width: 88px; height: 88px; }
  .profile-avatar-frame span { bottom: 8px; font-size: 12px; }
  .profile-hero-copy > p { font-size: 12px; letter-spacing: .12em; }
  .profile-hero-copy h1 { margin-top: 8px; font-size: 34px; }
  .profile-hero-copy blockquote { font-size: 13px; }
  .profile-actions { grid-column: 1 / -1; }
  .profile-actions button,.profile-actions a { flex: 1; min-width: 130px; }
  .profile-ledger { grid-column: 1 / -1; min-height: 70px; display: grid; grid-template-columns: auto 1fr auto 48px; align-items: center; gap: 10px; padding: 15px 0 0; border-left: 0; border-top: 1px solid rgba(255,255,255,.18); }
  .profile-ledger > strong { margin: 0; font-size: 22px; }
  .profile-ledger-rule { margin: 0; }
  .profile-seal { width: 44px; height: 44px; margin: 0; font-size: 22px; }
  .owner-state,.profile-content,.profile-posts { width: calc(100% - 28px); }
  .profile-editor { width: 100vw; height: 100dvh; border-left: 0; }
  .owner-state { align-items: stretch; flex-direction: column; gap: 11px; }
  .owner-state-actions { width: 100%; }
  .owner-state-actions button,.owner-state-actions a { flex: 1; }
  .profile-content { grid-template-columns: 1fr; margin-top: 25px; }
  .profile-paper { min-height: 0; padding: 24px 22px; }
  .profile-jx3-card-frame { margin-top: 15px; padding: 7px; }
  .profile-jx3-card-frame figcaption { align-items: start; flex-direction: column; gap: 3px; }
  .profile-jx3-card-frame figcaption span { text-align: left; }
  .profile-jx3-card-empty { grid-template-columns: 48px minmax(0,1fr); padding: 16px; }
  .profile-jx3-card-empty > span { width: 44px; height: 44px; font-size: 20px; }
  .profile-jx3-card-empty button { grid-column: 1 / -1; width: 100%; }
  .profile-paper h2,.profile-posts h2,.profile-editor h2 { font-size: 26px; }
  .profile-long-copy { font-size: 14px; }
  .profile-post-list { grid-template-columns: 1fr; }
  .profile-private-state { width: calc(100% - 28px); grid-template-columns: 1fr; text-align: center; }
  .profile-private-state > span { margin: auto; }
  .profile-editor-head { padding: max(19px,env(safe-area-inset-top)) max(18px,env(safe-area-inset-right)) 16px max(18px,env(safe-area-inset-left)); }
  .profile-editor-head span { max-width: 235px; }
  .profile-editor[open] { animation-name: profile-drawer-up; }
  .profile-custom-fields,.profile-privacy { padding: 24px 20px 28px; }
  .profile-avatar-editor { grid-template-columns: 86px minmax(0,1fr); gap: 14px; padding: 14px; }
  .profile-avatar-preview { width: 86px; height: 86px; }
  .profile-avatar-preview img { width: 70px; height: 70px; }
  .profile-avatar-editor-copy > div:first-child { display: block; }
  .profile-avatar-editor-copy h3 { margin-top: 3px; font-size: 20px; }
  .profile-jx3-editor { grid-template-columns: 86px minmax(0,1fr); gap: 14px; padding: 14px; }
  .profile-jx3-editor-preview { width: 86px; height: 108px; }
  .profile-jx3-editor-copy > div:first-child { display: block; }
  .profile-jx3-editor-copy h3 { margin-top: 3px; font-size: 20px; }
  .profile-avatar-picker span,.profile-avatar-actions button { padding-inline: 10px; }
  .profile-editor-feedback { padding: 11px 20px; }
  .profile-save-bar { align-items: stretch; flex-direction: column; padding: 18px 20px; }
  .profile-save-bar button { width: 100%; }
  footer { flex-direction: column; gap: 7px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *,*::before,*::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}

@keyframes profile-drawer-up { from { opacity: .85; transform: translateY(34px); } to { opacity: 1; transform: none; } }

/* The player dossier uses one restrained signature: a stamped portrait and
   paper panels settling into place. */
html { color-scheme: light; }
body { overflow-x: clip; }
.profile-header-inner { padding-left: max(0px,env(safe-area-inset-left)); padding-right: max(0px,env(safe-area-inset-right)); }
.profile-header { animation: dossier-header-in .36s ease-out both; }
#profileShell:not([hidden]) .profile-avatar-frame { animation: dossier-seal-in .58s cubic-bezier(.2,.78,.2,1) both; }
#profileShell:not([hidden]) .profile-hero-copy { animation: dossier-rise-in .48s .08s ease-out both; }
#profileShell:not([hidden]) .profile-ledger { animation: dossier-rise-in .48s .14s ease-out both; }
.owner-state:not([hidden]),.profile-paper,.profile-facts,.profile-posts,.profile-private-state:not([hidden]) { animation: dossier-rise-in .4s ease-out both; }
.profile-paper:nth-child(2) { animation-delay: .055s; }
.profile-post-card { animation: dossier-rise-in .34s ease-out both; }
.profile-post-card:nth-child(2) { animation-delay: .045s; }
.profile-post-card:nth-child(3) { animation-delay: .09s; }
.profile-tags span { transition: border-color .18s ease, background-color .18s ease, transform .18s ease; }
.profile-tags span:hover { border-color: #e0c995; background: rgba(224,201,149,.12); transform: translateY(-1px); }
.profile-actions button:active,.profile-actions a:active,.owner-state-actions button:active,.owner-state-actions a:active,.profile-save-bar button:active { transform: translateY(1px) scale(.985); }
.profile-custom-fields > label:focus-within { color: var(--jade); }
.profile-custom-fields > label:focus-within input,.profile-custom-fields > label:focus-within textarea { border-color: var(--gold); box-shadow: 0 0 0 3px rgba(178,138,71,.13); }
footer { padding-bottom: max(26px,env(safe-area-inset-bottom)); }

@keyframes dossier-header-in { from { opacity: 0; transform: translateY(-7px); } to { opacity: 1; transform: none; } }
@keyframes dossier-seal-in { from { opacity: 0; transform: translate3d(-15px,9px,0) rotate(-4deg) scale(.9); } to { opacity: 1; transform: none; } }
@keyframes dossier-rise-in { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }

@media (prefers-reduced-motion: reduce) {
  .profile-header,#profileShell:not([hidden]) .profile-avatar-frame,#profileShell:not([hidden]) .profile-hero-copy,
  #profileShell:not([hidden]) .profile-ledger,.owner-state,.profile-paper,.profile-facts,.profile-posts,
.profile-private-state,.profile-editor,.profile-editor::backdrop,.profile-post-card { animation: none !important; }
}