:root{--gold:#e6c583;--light:#fff5dc;--muted:#d3e1dc;--line:rgba(230,197,131,.38);--surface:#103e46;--ink:#082e35}
*{box-sizing:border-box}
html,body{margin:0}
body{min-height:100vh;background:radial-gradient(ellipse at 50% -14%,#2a6267 0,#103f48 38%,#062b32 82%);color:var(--light);font-family:'Segoe UI',Tahoma,Arial,sans-serif;line-height:1.8}
button,select{font:inherit}
a{color:inherit}
.profile-shell{max-width:1040px;margin:auto;padding:24px 24px 60px}
.profile-header{display:flex;align-items:center;justify-content:space-between;gap:20px;padding-bottom:24px;border-bottom:1px solid rgba(232,218,180,.23)}
.brand{font-size:1.2rem;font-weight:700;color:var(--light)}
.brand span{color:var(--gold);margin-inline-end:.3em}
.back{font-size:.95rem;text-decoration:none;color:var(--muted)}
.back:hover,.back:focus-visible,footer a:hover{text-decoration:underline;color:var(--light)}
.intro{position:relative;isolation:isolate;overflow:hidden;max-width:580px;margin:clamp(42px,8vh,88px) 0 30px;margin-inline:auto;padding:clamp(28px,5vw,52px);border:1px solid var(--line);border-radius:24px;background:linear-gradient(152deg,rgba(35,91,94,.96),rgba(12,55,64,.98) 60%,rgba(8,46,53,.99));box-shadow:0 28px 70px rgba(0,19,24,.37),inset 0 1px rgba(255,255,255,.12);text-align:center}
.intro::before{content:"";position:absolute;top:0;inset-inline:16%;height:3px;background:linear-gradient(90deg,transparent,var(--gold),transparent)}
.intro::after{content:"";position:absolute;z-index:-1;width:240px;height:240px;border:1px solid rgba(230,197,131,.12);border-radius:50%;inset-inline-end:-110px;bottom:-165px;pointer-events:none}
.eyebrow{margin:0;color:var(--gold);font-size:.88rem;font-weight:700}
.intro h1{font-size:clamp(2rem,5vw,3rem);line-height:1.4;margin:6px 0 16px;color:var(--light)}
.intro p{margin:0 0 22px;color:var(--muted)}
.intro #account-status{display:flex;align-items:center;justify-content:center;min-height:58px;margin:0 0 22px;padding:10px 15px;border:1px solid rgba(211,225,220,.18);border-radius:12px;background:rgba(4,39,46,.42);color:var(--light);font-size:.94rem}
.primary,button{display:inline-flex;align-items:center;justify-content:center;min-height:46px;border:1px solid var(--gold);border-radius:10px;padding:10px 18px;background:var(--gold);color:var(--ink);font-weight:700;text-decoration:none;cursor:pointer;transition:background-color .15s ease,border-color .15s ease}
.intro .primary{width:100%;min-height:54px;font-size:1.06rem}
.primary:hover,button:hover{background:#f6dea9;border-color:#f6dea9}
.primary:focus-visible,button:focus-visible,select:focus-visible,a:focus-visible{outline:3px solid #fff0bd;outline-offset:3px}
[hidden]{display:none!important}
.identity,.panel{border:1px solid var(--line);background:var(--surface);border-radius:16px;padding:22px;box-shadow:0 12px 28px rgba(0,19,24,.16)}
.identity{display:flex;align-items:center;justify-content:space-between;gap:20px;margin-bottom:18px}
.identity-details{display:flex;align-items:center;gap:16px;min-width:0}
.photo-preview{display:grid;place-items:center;flex:none;width:84px;height:84px;border-radius:50%;background:#d6e5ee;overflow:hidden}
.photo-preview svg{width:60%;height:60%;fill:#173950}
.photo-preview img{width:100%;height:100%;object-fit:cover}
#avatar-form{display:grid;gap:5px;max-width:310px}
#avatar-form input{max-width:100%;color:var(--light)}
#avatar-form button{justify-self:start;min-height:38px;padding:5px 14px;background:transparent;color:var(--light)}
#avatar-form button:disabled{opacity:.55;cursor:wait}
#avatar-form small{line-height:1.5;color:var(--muted)}
.identity h2{margin:0;font-size:1.25rem}
.identity p{margin:0;overflow-wrap:anywhere}
#member-email{direction:ltr;unicode-bidi:plaintext;text-align:right;color:var(--muted)}
.identity button{background:transparent;color:var(--light)}
.panels{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.book-progress{margin-top:18px}
.book-progress-list{list-style:none;display:grid;gap:12px;padding:0;margin:0}
.book-progress-list li{display:flex;align-items:center;flex-wrap:wrap;gap:12px;padding:12px;border:1px solid var(--line);border-radius:10px}
.book-progress-list li span{color:var(--muted)}
.honor-progress{margin-top:18px}
.honor-progress-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.honor-progress-grid>div{display:grid;gap:4px;padding:16px;border:1px solid var(--line);border-radius:12px;background:rgba(4,39,46,.42)}
.honor-progress-grid h3{margin:0;font-size:.95rem;color:var(--muted)}
.honor-progress-grid strong{font-size:1.35rem;color:var(--gold)}
.honor-progress-grid span{font-size:.9rem}
.honor-progress>p{margin:12px 0;color:var(--muted)}
.honor-progress>a{color:var(--gold)}
.member-timeline{margin-top:18px}
.member-timeline>label{max-width:260px}
.member-timeline h3{font-size:1rem;color:var(--gold);margin:18px 0 6px}
.timeline-list{list-style:none;display:grid;gap:8px;padding:0;margin:0;overflow-wrap:anywhere}
.timeline-list li{padding:10px 14px;border:1px solid var(--line);border-radius:8px}
.member-timeline #timeline-prior{color:var(--gold)}
.member-timeline #timeline-more{margin-top:12px}
.panel h2{font-size:1.25rem;margin:0 0 12px}
.panel p{margin:0 0 20px;color:var(--muted)}
.panel form{display:grid;grid-template-columns:1fr 100px;gap:12px}
#public-image-mode{grid-column:1/-1;min-width:0}
.panel label{display:grid;gap:5px;font-size:.9rem}
.panel select{width:100%;min-height:44px;padding:6px 10px;border:1px solid #a6bdb7;border-radius:8px;background:#f9f7ef;color:#153943}
.panel form button{grid-column:1/-1;justify-self:start}
.post-marks{display:grid;gap:12px}
.post-mark{padding:12px;border:1px solid rgba(211,225,220,.3);border-radius:10px}
.post-mark strong{display:block;margin-bottom:8px}
.mark-actions{display:flex;gap:10px;flex-wrap:wrap}
.mark-actions button{background:transparent;color:var(--light);padding:7px 12px;font-size:.88rem}
.mark-actions button[aria-pressed=true]{background:var(--gold);color:var(--ink)}
.mark-actions button:disabled,.identity button:disabled{opacity:.55;cursor:wait}
#admin-preview-controls{margin-top:18px;padding:18px;text-align:right;background:rgba(4,39,46,.8)}
#admin-preview-controls p{margin:10px 0;color:var(--light)}
#admin-preview-controls a{color:var(--gold)}
#admin-preview-controls button{margin:8px 0}
#admin-member-activity{margin-top:18px}
#admin-member-activity form{display:flex;flex-wrap:wrap;align-items:end;gap:12px;margin-bottom:20px}
#admin-member-activity form label{min-width:min(100%,220px);flex:1}
#admin-member-activity form input{min-height:44px;padding:6px 10px;border:1px solid #a6bdb7;border-radius:8px;background:#f9f7ef;color:#153943;font:inherit}
#admin-member-activity form button{flex:none}
.admin-activity-list{list-style:none;display:grid;gap:12px;padding:0;overflow-wrap:anywhere}
.admin-activity-list li{border:1px solid var(--line);border-radius:10px;padding:12px}
.admin-activity-list strong{display:block}
.admin-activity-list p{margin:6px 0;white-space:pre-wrap;color:var(--light)}
.admin-activity-list small{display:block;color:var(--muted)}
.admin-activity-list button{min-height:38px;margin-top:8px}
#save-status{min-height:1.9em}
footer{margin-top:32px;color:var(--muted);font-size:.88rem;text-align:center}
@media(max-width:740px){.profile-shell{padding:16px 16px 48px}.profile-header{align-items:flex-start;gap:12px}.brand{font-size:1.05rem}.back{font-size:.88rem}.intro{margin-block:36px 24px;padding:28px 22px}.identity{align-items:flex-start;flex-direction:column}.panels{grid-template-columns:1fr}.panel{padding:18px}}
@media(max-width:390px){.honor-progress-grid{grid-template-columns:1fr}}
@media(max-width:390px){.profile-shell{padding-inline:12px}.intro{padding:26px 18px}.panel form{grid-template-columns:1fr}}
@media(prefers-reduced-motion:reduce){.primary,button{transition:none}}