body { background: var(--paper); color: var(--ink); }
.shell, .profile-shell { width: min(1080px, calc(100% - 40px)); margin: auto; }
.profile-nav { height: 76px; display:flex; align-items:center; justify-content:space-between; border-bottom:1px solid var(--line); }
.profile-nav nav { display:flex; gap:24px; color:var(--ink-soft); }
.brand { font: 700 20px var(--font-display); letter-spacing:-.05em; }
.profile-shell { padding:48px 0 80px; }
.panel { background:var(--surface); border:1px solid var(--line); border-radius:var(--radius-lg); padding:28px; }
.profile-head { display:flex; gap:24px; align-items:center; }
.avatar { width:88px; height:88px; border-radius:50%; object-fit:cover; flex:none; }
.avatar-fallback { display:grid; place-items:center; background:var(--violet-soft); color:var(--violet); font:40px var(--font-serif); }
.eyebrow, .role, .card span, .form-status { color:var(--muted); font:var(--text-sm) var(--font-mono); }
h1 { margin:4px 0 8px; font:600 clamp(32px,5vw,52px) var(--font-display); letter-spacing:-.06em; }
.bio { max-width:650px; color:var(--ink-soft); line-height:1.6; }
.profile-grid { display:grid; grid-template-columns:1.5fr 1fr; gap:20px; margin-top:20px; }
.profile-grid > div { display:grid; gap:20px; align-content:start; }
section h2 { margin:0 0 16px; font:600 22px var(--font-display); }
.cards { display:grid; gap:10px; }
.card { display:block; padding:14px 16px; border:1px solid var(--line); border-radius:var(--radius); color:inherit; }
.card-with-action { display:flex; align-items:center; justify-content:space-between; gap:12px; }.card-with-action > a { color:inherit; text-decoration:none; flex:1; }.danger { background:transparent; color:var(--ink); border-color:var(--line); }.post-body { white-space:normal; line-height:1.7; margin:24px 0; }
.card b { display:block; margin-bottom:5px; }
.card p { color:var(--ink-soft); line-height:1.5; margin:8px 0 0; }
form { display:grid; gap:14px; } label { display:grid; gap:6px; color:var(--ink-soft); font-size:14px; } input, textarea { width:100%; box-sizing:border-box; border:1px solid var(--line); border-radius:8px; padding:10px; background:var(--paper); color:var(--ink); font:inherit; } textarea { min-height:90px; resize:vertical; } .check { display:flex; grid-template-columns:none; align-items:center; flex-direction:row; } .check input { width:auto; }
.button { width:max-content; border:1px solid var(--ink); border-radius:999px; background:var(--ink); color:var(--paper); padding:10px 16px; cursor:pointer; }
.state { text-align:center; padding:80px 20px; color:var(--ink-soft); }
.engagements, .feed-tabs { display:flex; gap:8px; margin-top:14px; flex-wrap:wrap; }
.engage-button, .feed-tabs button { border:1px solid var(--line); border-radius:999px; padding:8px 12px; background:transparent; color:var(--ink); cursor:pointer; }
.engagement-note, .engagement-loading { color:var(--muted); font:var(--text-xs) var(--font-mono); }
.discussion-panel { margin-top:20px; padding:28px; background:var(--surface); border:1px solid var(--line); border-radius:var(--radius-lg); }
.discussion-list { display:grid; gap:12px; }.discussion { margin-left:calc(var(--depth) * 24px); padding:14px 16px; border:1px solid var(--line); border-radius:var(--radius); background:var(--paper); }.discussion-meta { display:flex; justify-content:space-between; gap:12px; font:var(--text-xs) var(--font-mono); color:var(--muted); }.discussion p { line-height:1.5; white-space:pre-wrap; }.discussion figure { margin:10px 0 0; }.discussion img { max-width:100%; max-height:260px; border-radius:8px; }.discussion figcaption { color:var(--muted); font-size:12px; }.discussion-reply { border:0; background:none; color:var(--violet); cursor:pointer; padding:0; }.discussion-form { margin-top:16px; }.discussion-form textarea { min-height:100px; }.discussion-empty, .discussion-signin, .discussion-loading, .discussion-status { color:var(--muted); }.discussion-images { display:grid; gap:8px; }
@media (max-width:700px) { .profile-nav, .profile-head { align-items:flex-start; } .profile-nav { height:auto; padding:20px 0; } .profile-nav nav { gap:12px; } .profile-head { flex-direction:column; } .profile-grid { grid-template-columns:1fr; } }