.account-page { background: #0a080a; color: #eee6da; }
.account-page [hidden] { display: none !important; }
.account-shell { max-width: 1120px; margin: 0 auto; padding: 140px 24px 80px; }
.account-heading { margin-bottom: 32px; }
.account-heading span,.account-eyebrow,.account-art span,.account-identity>span { color: #d1a965; font: 11px/1.6 Arial,sans-serif; letter-spacing: 2px; }
.account-heading h1 { font: bold clamp(42px,7vw,76px)/1.1 Georgia,serif; margin: 12px 0; }
.account-heading p,.account-note,.account-art p { color: #b4aaa7; line-height: 1.75; }
.account-layout { display: grid; grid-template-columns: .85fr 1.15fr; gap: 24px; align-items: start; }
.account-card,.account-art { border: 1px solid #493537; border-radius: 18px; padding: 36px; background: linear-gradient(140deg,#22151b,#100e11); }
.account-card h2 { font: bold 28px/1.25 Georgia,serif; margin: 16px 0 24px; }
.account-art { min-height: 510px; display: flex; align-items: end; background: linear-gradient(0deg,#130b10 5%,#130b1099 65%),url('images/black_swordsman.jpg') center/cover; }
.account-art h2 { font: bold 36px/1.2 Georgia,serif; margin: 18px 0; }
.account-page a { color: #e4bc78; }
.account-page button { cursor: pointer; border: 1px solid #654349; border-radius: 9px; background: #25171e; color: #f1e5d6; padding: 12px 18px; font: 600 14px/1.4 Arial,sans-serif; }
.account-page button:disabled { opacity: .5; cursor: wait; }
.account-page :focus-visible { outline: 2px solid #ebc681; outline-offset: 4px; }
.account-tabs { display: flex; gap: 8px; margin-bottom: 28px; }
.account-tabs button { flex: 1; }
.account-tabs [aria-pressed="true"] { background: #661b2d; border-color: #c1485e; }
.account-page label { display: grid; gap: 9px; margin: 18px 0; color: #d4c8bf; font: 14px/1.5 Arial,sans-serif; }
.account-page input:not([type="radio"]) { box-sizing: border-box; width: 100%; min-width: 0; padding: 14px; border: 1px solid #4b393f; border-radius: 8px; color: #fff; background: #0d0b0f; font: 16px Arial,sans-serif; }
.account-page .account-primary { width: 100%; background: linear-gradient(120deg,#811f34,#511927); border-color: #b04658; margin-top: 12px; }
.account-page .account-text-button { background: transparent; border: 0; color: #d9b575; padding: 16px 0 0; }
.account-status { border-left: 3px solid #c19b5b; padding: 12px 16px; background: #191317; line-height: 1.6; margin: 0 0 24px; }
.account-status:empty { display: none; }
.account-status[data-error="true"] { border-color: #ed566e; color: #ffd2d9; }
.account-identity { text-align: center; overflow-wrap: anywhere; }
.account-identity>img { width: 140px; height: 140px; object-fit: cover; border-radius: 50%; border: 2px solid #c19b5b; display: block; margin: 0 auto 24px; }
.account-identity p { color: #b4aaa7; font: 14px Arial,sans-serif; }
.account-identity button { margin-top: 24px; }
.account-page fieldset { border: 0; margin: 22px 0; padding: 0; }
.avatar-options { display: flex; flex-wrap: wrap; gap: 16px; }
.avatar-options label { position: relative; margin: 14px 0 0; cursor: pointer; }
.avatar-options img { width: 64px; height: 64px; object-fit: cover; border: 2px solid transparent; border-radius: 50%; }
.avatar-options input { position: absolute; opacity: 0; }
.avatar-options input:checked+img { border-color: #efc675; box-shadow: 0 0 0 4px #dcb06322; }
.avatar-options input:focus-visible+img { outline: 2px solid #fff; outline-offset: 4px; }
.account-shortcuts { display: flex; flex-wrap: wrap; gap: 18px; border-top: 1px solid #493537; padding-top: 24px; margin-top: 32px; font-size: 14px; }
.account-note { font: 13px/1.7 Arial,sans-serif; margin-top: 20px; }
.account-recovery { max-width: 500px; margin: auto; }
.account-sync { margin-top: 24px; border-top: 1px solid #493537; padding-top: 24px; }
.account-sync h3 { color: #e4bc78; font-size: 24px; }
.account-sync p { line-height: 1.6; }
.account-sync button { margin: 8px 8px 0 0; }
.account-page .account-card .account-google { display: block; width: 100%; min-height: 44px; padding: 12px 20px; border: 1px solid #747775; border-radius: 8px; background: #f2f2f2; color: #1f1f1f; font: 600 15px/1.4 Arial,sans-serif; box-shadow: none; }
.account-page .account-card .account-google:hover { background: #e3e3e3; color: #1f1f1f; }
.account-page .account-google:focus-visible { outline: 3px solid #efc675; outline-offset: 4px; }
.account-page .account-google:disabled { opacity: .6; cursor: wait; }
.account-auth-divider { display: flex; align-items: center; gap: 14px; margin: 22px 0; color: #b4aaa7; font: 13px Arial,sans-serif; }
.account-auth-divider::before,.account-auth-divider::after { content: ''; flex: 1; border-top: 1px solid #493537; }
/* Auth-only composition: one framed spread, engraved gold and deep oxblood. */
#auth-panel { grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 0; align-items: stretch; border: 1px solid #8d704b66; border-radius: 22px; overflow: hidden; background: #100d0f; box-shadow: 0 28px 80px #0009; isolation: isolate; }
#auth-panel .account-art { position: relative; min-height: 610px; padding: clamp(28px,4vw,54px); border: 0; border-radius: 0; background: linear-gradient(0deg,#100b0e 0%,#100b0eee 20%,#100b0e35 70%),url('images/black_swordsman.jpg') 45% 20%/cover; }
#auth-panel .account-art::before { content: ''; position: absolute; inset: 20px; border: 1px solid #d8b77730; pointer-events: none; }
#auth-panel .auth-art-caption { position: relative; max-width: 390px; }
#auth-panel .auth-art-caption>span { color: #d8b777; font: 12px/1.7 Arial,sans-serif; letter-spacing: .15em; }
#auth-panel .account-art h2 { font: 700 clamp(36px,3.7vw,54px)/1.08 Georgia,serif; letter-spacing: -.025em; margin: 22px 0; color: #f4eadc; }
#auth-panel .account-art h2 em { font-weight: 400; color: #d6b887; }
#auth-panel .account-art p { font: 16px/1.75 Georgia,serif; color: #c9bdb2; margin: 0 0 28px; }
#auth-panel .account-art a { display: inline-flex; align-items: center; gap: 24px; min-height: 44px; border-bottom: 1px solid #b9985c77; color: #e8cca0; text-decoration: none; font: 15px/1.5 Arial,sans-serif; }
#auth-panel .account-art a span { font-size: 22px; }
#auth-panel>.account-card { min-width: 0; border: 0; border-left: 1px solid #9c78533b; border-radius: 0; padding: clamp(28px,4vw,54px); background: radial-gradient(ellipse at 100% 0%,#59233028,transparent 65%),#151013; box-shadow: none; }
#auth-panel .account-tabs { padding: 5px; gap: 5px; margin-bottom: 34px; border: 1px solid #9a786c40; border-radius: 12px; background: #09080b99; }
#auth-panel .account-tabs button { border: 1px solid transparent; border-radius: 8px; min-height: 44px; background: transparent; color: #bdb0a7; box-shadow: none; font: 600 14px/1.5 Arial,sans-serif; }
#auth-panel .account-tabs button[aria-pressed="true"] { color: #f6e8d5; background: #58202c; border-color: #b66d6855; box-shadow: 0 2px 9px #0004; }
#auth-panel #auth-title { margin: 0 0 26px; font: 700 clamp(28px,2.6vw,38px)/1.2 Georgia,serif; letter-spacing: -.02em; color: #f2e7d8; }
#auth-panel .account-google { min-height: 50px; border-radius: 10px; font-size: 15px; }
#auth-panel .account-auth-divider { margin: 26px 0; color: #a99b91; font-size: 13px; }
#auth-panel label { margin: 20px 0; gap: 10px; color: #d8cbc0; font: 14px/1.5 Arial,sans-serif; }
#auth-panel input { min-height: 52px; padding: 14px 16px; border-radius: 10px; border-color: #78615b66; background: #09090c; transition: border-color .18s,box-shadow .18s; }
#auth-panel input::placeholder { color: #817872; }
#auth-panel input:focus { border-color: #d2ac71; box-shadow: 0 0 0 3px #d2ac7117; outline: none; }
#auth-panel #auth-submit { margin-top: 10px; min-height: 52px; border-radius: 10px; border: 1px solid #b45863; background: linear-gradient(105deg,#872739,#5c1727); font: 600 15px/1.5 Arial,sans-serif; box-shadow: 0 6px 18px #480d2140; }
#auth-panel #auth-submit:hover { background: linear-gradient(105deg,#a13247,#742236); }
#auth-panel #forgot-password { display: block; margin: 10px auto 0; padding: 12px; min-height: 44px; font-weight: 400; font-size: 14px; color: #d5b787; }
#auth-panel .account-note { font-size: 14px; }
@media(max-width:760px) {
    #auth-panel { grid-template-columns: 1fr; border-radius: 16px; }
    #auth-panel>.account-card { grid-row: 1; border-left: 0; padding: 26px 22px; }
    #auth-panel .account-tabs { margin-bottom: 26px; }
    #auth-panel .account-art { min-height: 0; padding: 34px 28px; border-top: 1px solid #9c78533b; background-position: center 35%; }
    #auth-panel .account-art::before { inset: 12px; }
    #auth-panel .account-art h2 { font-size: 32px; margin: 14px 0; }
    #auth-panel .account-art p { max-width: 380px; }
}
@media(max-width:700px) { .account-shell { padding: 110px 16px 40px; } .account-layout { grid-template-columns: 1fr; } .account-card,.account-art { padding: 24px; } .account-art { min-height: 280px; } }

/* Personal archive: a quiet, ink-black reading desk with aged-gold borders. */
.account-page .account-shell { max-width: 1200px; padding-top: 48px; }
.account-page .account-heading { margin: 0 0 26px; }
.account-page .account-heading h1 { font-size: clamp(36px, 4vw, 54px); letter-spacing: -.02em; margin: 8px 0; }
.account-page .account-heading p { margin: 0; font-size: 18px; }
.account-dashboard { display: grid; grid-template-columns: 238px minmax(0,1fr); gap: 16px; align-items: start; }
.account-dashboard .account-card { border: 1px solid #77644060; border-radius: 7px; background: linear-gradient(140deg,#10100fee,#090a09f5); padding: 22px; box-shadow: 0 10px 28px #0003; }
.account-dashboard .account-identity { text-align: left; padding: 20px 18px; }
.account-dashboard .account-identity>img { width: 100%; height: auto; aspect-ratio: 1; border-radius: 4px; border: 1px solid #79694980; margin: 0 0 16px; object-position: center 28%; }
.account-dashboard .account-identity h2 { font: 700 28px/1.15 Georgia,serif; margin: 0 0 12px; }
.account-dashboard .profile-rank { display: inline-block; padding: 5px 10px; border: 1px solid #8f743c60; border-radius: 4px; background: #af8a3b0d; font: 14px/1.4 Georgia,serif; letter-spacing: .03em; color: #d5b778; }
.account-page #profile-edit { width: 100%; background: transparent; border: 1px solid #b29b63; border-radius: 4px; margin: 18px 0; padding: 9px 8px; font: 15px/1.4 Georgia,serif; }
.profile-navigation { display: grid; gap: 5px; border-top: 1px solid #a8905129; padding-top: 12px; }
.account-page .profile-navigation a { display: flex; align-items: center; gap: 13px; padding: 11px 12px; color: #c4c0b7; text-decoration: none; font-size: 16px; border: 1px solid transparent; border-radius: 4px; }
.profile-navigation a>span { width: 20px; font: 23px/1 Georgia,serif; color: #c4ad80; text-align: center; }
.account-page .profile-navigation a[aria-current],.account-page .profile-navigation a:hover { background: linear-gradient(100deg,#6d1018aa,#340e12aa); border-color: #98313b70; color: #f2e8d4; }
.profile-sidebar-bottom { border-top: 1px solid #a8905129; margin-top: 42px; padding-top: 18px; }
.account-dashboard .profile-sidebar-bottom p { font: 14px/1.8 Georgia,serif; color: #98968b; }
.account-page .profile-sidebar-bottom button { margin: 14px 0 0; background: none; border: 0; padding: 8px 0; color: #b8a88d; font-weight: 400; }
.profile-content { min-width: 0; display: grid; gap: 14px; }
.account-dashboard .profile-reading { display: grid; grid-template-columns: .95fr 1.05fr; gap: 24px; align-items: center; }
.profile-reading>img { display: block; width: 100%; height: 100%; max-height: 290px; min-height: 230px; object-fit: cover; filter: saturate(.25); border-radius: 3px; }
.profile-reading-copy { min-width: 0; }
.account-dashboard .profile-reading h2 { font: 700 clamp(26px,2.7vw,38px)/1.12 Georgia,serif; margin: 12px 0; overflow-wrap: anywhere; }
.profile-reading-copy>p { color: #b4b0a5; font-size: 15px; line-height: 1.5; margin: 0 0 16px; }
.account-page .profile-reading-link { display: inline-flex; align-items: center; gap: 24px; padding: 11px 20px; border: 1px solid #97202d; background: linear-gradient(110deg,#7b0d1a,#4e0d16); border-radius: 4px; color: #f1e5d6; text-decoration: none; font-size: 17px; }
.profile-progress-label { display: flex; justify-content: space-between; gap: 12px; margin: 22px 0 8px; font: 14px/1.4 Georgia,serif; color: #b7b2a7; }
.profile-progress-label strong { font-weight: 400; white-space: nowrap; }
.profile-reading progress { display: block; appearance: none; width: 100%; height: 8px; border: 0; border-radius: 10px; overflow: hidden; background: #2a2a27; accent-color: #d8b56b; }
.profile-reading progress::-webkit-progress-bar { background: #2a2a27; }
.profile-reading progress::-webkit-progress-value { background: linear-gradient(90deg,#88714a,#ebc46e); border-radius: 10px; }
.profile-reading progress::-moz-progress-bar { background: #d8b56b; }
.profile-stats { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 12px; }
.account-page .profile-stats a { display: flex; align-items: center; justify-content: center; gap: 18px; padding: 16px 10px; border: 1px solid #77644060; border-radius: 6px; background: #0c0d0cef; text-decoration: none; color: #e8e0ce; }
.profile-stats a>span { font: 28px Georgia,serif; color: #b49a6d; }
.profile-stats a>div { display: grid; gap: 5px; text-align: center; }
.profile-stats strong { font: 32px/1 Georgia,serif; }
.profile-stats div>span { color: #b8b4a8; font: 14px/1.3 Georgia,serif; }
.profile-section-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 16px; }
.account-dashboard .profile-section-heading h2 { font: 700 26px/1.2 Georgia,serif; margin: 0; }
.account-page #profile-show-favorites { background: none; border: 0; padding: 6px 0; color: #d6b77e; font: 14px Georgia,serif; }
.profile-favorite-list { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 14px; }
.account-page .profile-favorite-card { display: block; min-width: 0; text-decoration: none; color: #e6e0d3; }
.profile-favorite-art { position: relative; }
.profile-favorite-art img { display: block; width: 100%; aspect-ratio: 1.65; object-fit: cover; border-radius: 4px; border: 1px solid #685d4170; filter: saturate(.4); }
.profile-favorite-art span { position: absolute; top: 0; right: 12px; padding: 5px 7px 8px; background: #181815dd; color: #e3bd72; font-size: 20px; }
.profile-favorite-card h3 { font: 20px/1.25 Georgia,serif; margin: 10px 0 5px; overflow-wrap: anywhere; }
.profile-favorite-card p { color: #a5a297; font: 14px/1.5 Georgia,serif; margin: 0; }
.profile-favorite-card:hover h3 { color: #e3bd72; }
.account-dashboard .profile-settings,.account-dashboard .profile-sync-settings { padding: 0; }
.profile-settings summary,.profile-sync-settings summary { display: flex; justify-content: space-between; align-items: center; gap: 14px; cursor: pointer; padding: 20px 22px; font: 20px/1.3 Georgia,serif; list-style: none; }
.profile-settings summary::-webkit-details-marker,.profile-sync-settings summary::-webkit-details-marker { display: none; }
.profile-settings summary span,.profile-sync-settings summary span { color: #c6ab70; }
.profile-settings[open] summary span,.profile-sync-settings[open] summary span { transform: rotate(45deg); }
.profile-settings form,.profile-settings>p { margin: 0 22px 22px; }
.profile-settings>p { color: #b6b0a2; overflow-wrap: anywhere; font: 14px/1.5 Arial,sans-serif; }
.account-dashboard .account-sync { margin: 0; padding: 0 22px 22px; border: 0; }
.account-dashboard .account-note { font-size: 14px; }
.account-page .account-eyebrow { font-size: 12px; letter-spacing: .13em; }
.account-privacy-link { text-align: right; }
#profile-overview,#profile-favorites,#profile-settings,#profile-achievements { scroll-margin-top: 100px; }
.profile-badges { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 18px; }
.profile-badges article { display: flex; align-items: center; gap: 12px; min-width: 0; }
.profile-medallion { display: grid; place-items: center; flex: 0 0 58px; height: 58px; border: 1px solid #67645b; border-radius: 50%; box-shadow: inset 0 0 0 4px #111, inset 0 0 0 5px #49473f; color: #8b877a; font: 30px/1 Georgia,serif; }
.profile-badges h3 { margin: 0 0 6px; color: #beb9ac; font: 16px/1.25 Georgia,serif; }
.profile-badges p { margin: 0 0 6px; color: #aaa69a; font: 14px/1.4 Georgia,serif; }
.profile-badges strong { color: #aaa69a; font: 13px/1.4 Arial,sans-serif; }
.profile-badges .is-earned .profile-medallion { border-color: #d9b66f; color: #e1c181; box-shadow: inset 0 0 0 4px #111, inset 0 0 0 5px #937944, 0 0 18px #c4a04b14; }
.profile-badges .is-earned h3,.profile-badges .is-earned strong { color: #e0c58f; }
.profile-badges-note { margin: 20px 0 0; color: #999487; font: 13px/1.5 Arial,sans-serif; }
@media(max-width:960px) {
    .account-dashboard { grid-template-columns: 205px minmax(0,1fr); }
    .account-dashboard .profile-reading { grid-template-columns: 1fr; gap: 18px; }
    .profile-reading>img { height: 190px; min-height: 0; }
    .profile-stats a { gap: 8px; }
    .profile-stats a>span { display: none; }
    .profile-favorite-list { grid-template-columns: repeat(2,minmax(0,1fr)); }
    .profile-badges { grid-template-columns: 1fr; }
}
@media(max-width:650px) {
    .account-page .account-shell { padding: 40px 16px 40px; }
    .account-dashboard { grid-template-columns: 1fr; }
    .account-dashboard .account-identity { display: grid; grid-template-columns: 86px minmax(0,1fr); gap: 8px 16px; }
    .account-dashboard .account-identity>img { width: 86px; height: 100px; grid-row: 1 / 4; margin: 0; }
    .account-dashboard .account-identity h2 { font-size: 25px; margin: 0; }
    .account-dashboard .profile-rank { justify-self: start; font-size: 13px; }
    .account-page #profile-edit { margin: 0; padding: 7px; width: auto; justify-self: start; font-size: 14px; }
    .profile-navigation { grid-column: 1 / -1; grid-template-columns: repeat(2,minmax(0,1fr)); margin-top: 8px; }
    .account-page .profile-navigation a { padding: 9px 5px; gap: 8px; font-size: 15px; }
    .profile-sidebar-bottom { grid-column: 1 / -1; margin: 0; padding: 0; border: 0; }
    .profile-sidebar-bottom p { display: none; }
    .account-page .profile-sidebar-bottom button { margin: 0; font-size: 13px; }
    .account-dashboard .account-card { padding: 18px; }
    .account-dashboard .profile-settings,.account-dashboard .profile-sync-settings { padding: 0; }
    .profile-stats { gap: 8px; }
    .profile-stats strong { font-size: 28px; }
    .profile-stats div>span { font-size: 13px; }
    .profile-favorite-list { gap: 12px; }
    .account-dashboard .profile-section-heading h2 { font-size: 24px; }
    .profile-favorite-card h3 { font-size: 18px; }
}
@media(max-width:360px) { .profile-favorite-list { grid-template-columns: 1fr; } }

/* More breathing room, a portrait frame and a focused photo editor. */
.account-page .account-shell { max-width: 1280px; }
.account-dashboard { grid-template-columns: 248px minmax(0, 1fr); gap: 22px; }
.account-dashboard .account-card { border-radius: 12px; border-color: #89724755; background: linear-gradient(145deg,#171512f5,#0b0c0df7); }
.account-dashboard .account-identity { padding: 24px 20px; background: linear-gradient(160deg,#292017ef,#111111fa 45%); }
.account-dashboard .account-identity>img { aspect-ratio: 1; border-radius: 12px; box-shadow: 0 8px 24px #0007; }
.account-dashboard .account-identity h2 { font-size: 28px; }
.profile-content { gap: 18px; }
.account-dashboard .profile-reading { padding: 24px; gap: 28px; }
.profile-reading>img { border-radius: 8px; }
.profile-reading-copy>p { font: 16px/1.65 Georgia,serif; }
.account-page .profile-stats a { border-radius: 10px; padding: 20px 12px; }
.profile-stats a:hover { border-color: #cfad6d; background: #201a13; }
.profile-badges article { align-items: flex-start; }
.account-dashboard .profile-settings[open] { border-color: #b290536e; }
.avatar-upload { display: flex; align-items: center; gap: 22px; padding: 22px; margin-top: 16px; border: 1px dashed #8b744b; border-radius: 12px; background: #b28d4010; }
.avatar-upload>img { flex: 0 0 112px; width: 112px; height: 112px; border-radius: 50%; object-fit: cover; border: 2px solid #d5b376; background: #111; }
.avatar-upload>div { min-width: 0; }
.avatar-upload .account-note { margin: 10px 0 0; font-size: 14px; }
.account-page #avatar-upload-button { background: #30271c; border-color: #a88a52; min-height: 44px; }
#avatar-feedback,#profile-save-feedback { color: #e6c98f; font: 14px/1.6 Arial,sans-serif; overflow-wrap: anywhere; }
#avatar-feedback:empty,#profile-save-feedback:empty { display: none; }
.avatar-preset-label { margin: 24px 0 0; color: #c8beae; font: 14px/1.5 Arial,sans-serif; }
.avatar-options img { width: 72px; height: 72px; }
.account-page .account-primary { min-height: 48px; }
.profile-sidebar-bottom { margin-top: 28px; }
@media(max-width:1000px) { .account-dashboard { grid-template-columns: 210px minmax(0,1fr); gap: 16px; } .profile-badges { grid-template-columns: 1fr; } }
@media(max-width:650px) {
    .account-dashboard { grid-template-columns: 1fr; }
    .account-dashboard .account-identity { padding: 20px; }
    .account-dashboard .account-identity>img { height: 86px; border-radius: 12px; }
    .account-dashboard .profile-reading { padding: 20px; gap: 20px; }
    .avatar-upload { flex-direction: column; align-items: flex-start; padding: 18px; }
    .avatar-upload>img { flex-basis: auto; }
    .profile-stats div>span { font-size: 14px; }
    .account-page .profile-navigation a { min-height: 44px; box-sizing: border-box; }
}
@media(prefers-reduced-motion:reduce) { .account-page *, .account-page *::before, .account-page *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; } }

/* Personal archive, matched to the framed sign-in spread. */
.journey-level { display: flex; align-items: center; gap: 24px; padding: 24px; border: 1px solid #c6a06555; border-radius: 14px; background: radial-gradient(ellipse at top left,#9b692f30,transparent 75%),#131012; }
.journey-level-seal { display: grid; place-content: center; text-align: center; width: 100px; height: 100px; flex: 0 0 100px; border: 2px double #c8a56c; border-radius: 50%; box-shadow: inset 0 0 0 7px #131012,inset 0 0 0 8px #806748; }
.journey-level-seal span { font: 12px/1.5 Arial,sans-serif; letter-spacing: .1em; color: #d5b783; }
.journey-level-seal strong { font: 40px/1.1 Georgia,serif; }
.journey-level-copy { flex: 1; min-width: 0; }
.journey-level-copy h3 { margin: 0 0 8px; font: 28px/1.2 Georgia,serif; color: #efd5aa; }
.journey-level-copy p { margin: 8px 0; font: 14px/1.6 Arial,sans-serif; color: #c6b7a4; }
#journey-progress,#journey-badges progress { appearance: none; width: 100%; height: 7px; border: 0; border-radius: 10px; overflow: hidden; background: #34302b; accent-color: #d6ad66; }
#journey-progress::-webkit-progress-bar,#journey-badges progress::-webkit-progress-bar { background: #34302b; }
#journey-progress::-webkit-progress-value,#journey-badges progress::-webkit-progress-value { background: linear-gradient(90deg,#ad793d,#f0d191); }
#journey-status { font: 14px/1.6 Arial,sans-serif; color: #c9b596; }
#journey-count { white-space: nowrap; font: 14px Arial,sans-serif; color: #dbc090; }
.journey-ranks { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 10px; margin: 22px 0; color: #cbbb9f; font: 14px/1.5 Arial,sans-serif; }
.journey-ranks span { border-left: 2px solid #8b683e; padding: 5px 12px; }
.journey-filters { display: flex; flex-wrap: wrap; gap: 8px; margin: 24px 0 18px; }
.account-page .journey-filters button { min-height: 44px; border-radius: 24px; background: transparent; }
.account-page .journey-filters [aria-pressed="true"] { background: #642437; border-color: #b76976; }
#profile-panel #journey-badges { grid-template-columns: repeat(2,minmax(0,1fr)); }
#profile-panel #journey-badges article { flex-direction: row; align-items: flex-start; padding: 18px; }
#journey-badges article>div { min-width: 0; flex: 1; }
#journey-badges progress { margin-top: 14px; height: 4px; }
.journey-rewards-title { margin: 32px 0 0; font: 24px Georgia,serif; }
.journey-frames { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 10px; margin-top: 18px; }
.account-page .journey-frames button { display: grid; justify-items: center; align-content: start; gap: 10px; padding: 18px 10px; border-radius: 12px; background: #ffffff04; min-width: 0; }
.journey-frames button strong { font: 15px/1.4 Georgia,serif; }
.journey-frames button>span:last-child { font: 12px/1.5 Arial,sans-serif; }
.journey-frames [aria-pressed="true"] { border-color: #dbb978; }
.journey-frame-ring { width: 46px; height: 46px; border-radius: 50%; border: 3px solid #c4a471; box-shadow: 0 0 0 4px #c4a47116; }
#profile-panel #profile-avatar[data-frame="mercenary"], [data-frame="mercenary"] .journey-frame-ring { border-color: #c77f53; box-shadow: 0 0 0 5px #c77f5329,0 8px 20px #0006; }
#profile-panel #profile-avatar[data-frame="veteran"], [data-frame="veteran"] .journey-frame-ring { border-color: #ced9e0; box-shadow: 0 0 0 5px #8aa4b84a,0 0 20px #b8d7ea20; }
#profile-panel #profile-avatar[data-frame="swordsman"], [data-frame="swordsman"] .journey-frame-ring { border-color: #dc6574; box-shadow: 0 0 0 5px #621e2d,0 0 0 7px #c49b5e77,0 0 25px #b7284930; }
@media(max-width:960px) { #profile-panel #journey-badges { grid-template-columns: 1fr; } .journey-frames { grid-template-columns: repeat(2,minmax(0,1fr)); } }
@media(max-width:480px) { .journey-level { padding: 18px 14px; gap: 14px; } .journey-level-seal { width: 70px; height: 70px; flex-basis: 70px; } .journey-level-seal strong { font-size: 30px; } .journey-level-copy h3 { font-size: 23px; } .journey-ranks { grid-template-columns: 1fr; } }
#profile-panel { gap: 24px; grid-template-columns: 250px minmax(0,1fr); }
#profile-panel .account-card { border-radius: 18px; border-color: #a4825545; background: linear-gradient(135deg,#211a1beF,#111012f7 70%); box-shadow: 0 12px 32px #0004; }
#profile-panel .account-identity { position: relative; padding: 30px 22px 22px; text-align: center; background: radial-gradient(ellipse at 50% 0%,#77334440,transparent 60%),#141114f5; }
#profile-panel .account-identity>img { width: 148px; height: 148px; margin: 0 auto 22px; border-radius: 50%; border: 3px solid #c4a471; padding: 5px; background: #151013; box-shadow: 0 0 0 7px #bb935516,0 12px 30px #0008; object-position: center; box-sizing: border-box; }
#profile-panel .account-identity h2 { font-size: 30px; margin-bottom: 14px; }
#profile-panel .profile-rank { border: 0; border-radius: 20px; background: #c6a26716; padding: 6px 16px; font: 14px/1.5 Arial,sans-serif; }
#profile-panel #profile-edit { min-height: 44px; border-color: #aa83575c; border-radius: 9px; font: 14px/1.5 Arial,sans-serif; margin: 22px 0; background: #e1be8210; }
#profile-panel #profile-edit:hover { background: #d6ad7724; border-color: #d0a773; }
#profile-panel .profile-navigation { text-align: left; gap: 7px; padding-top: 18px; }
#profile-panel .profile-navigation a { min-height: 46px; box-sizing: border-box; border-radius: 9px; padding: 12px; font: 15px/1.4 Arial,sans-serif; }
#profile-panel .profile-navigation a[aria-current] { background: linear-gradient(100deg,#702636,#381822); border-color: #b254644f; box-shadow: inset 3px 0 #d5ad76; }
#profile-panel .profile-sidebar-bottom { margin-top: 26px; text-align: left; }
#profile-panel .profile-content { gap: 20px; }
#profile-panel .profile-reading { padding: 0; overflow: hidden; gap: 0; grid-template-columns: .95fr 1.05fr; background: radial-gradient(ellipse at 90% 0%,#75283230,transparent 70%),#161215; }
#profile-panel .profile-reading>img { height: 100%; min-height: 340px; max-height: none; border-radius: 0; filter: saturate(.5); mask-image: linear-gradient(90deg,#000 75%,#000b); }
#profile-panel .profile-reading-copy { padding: 32px; }
#profile-panel .profile-reading h2 { font-size: clamp(28px,2.8vw,40px); margin: 14px 0; }
#profile-panel .profile-reading-copy>p { color: #c0b5ac; font-size: 16px; }
#profile-panel .profile-reading-link { border-radius: 9px; min-height: 46px; box-sizing: border-box; background: linear-gradient(110deg,#8b293c,#581a2a); border-color: #bf61705c; font: 15px/1.5 Arial,sans-serif; }
#profile-panel .profile-reading-link:hover { background: #943046; }
#profile-panel .profile-progress-label { margin-top: 26px; font: 14px/1.5 Arial,sans-serif; }
#profile-panel progress { height: 7px; }
#profile-panel .profile-stats { gap: 14px; }
#profile-panel .profile-stats a { justify-content: flex-start; gap: 18px; padding: 22px; border-radius: 14px; background: #191518f2; border-color: #b38f5b38; }
#profile-panel .profile-stats a>span { display: grid; place-items: center; width: 42px; height: 42px; flex-shrink: 0; border-radius: 12px; background: #d7ad6810; font-size: 26px; }
#profile-panel .profile-stats a>div { text-align: left; }
#profile-panel .profile-stats strong { font-size: 34px; }
#profile-panel .profile-stats div>span { font: 14px/1.4 Arial,sans-serif; }
#profile-panel .profile-favorites,#profile-panel .profile-achievements { padding: 26px; }
#profile-panel .profile-section-heading { border-bottom: 1px solid #b0926026; padding-bottom: 18px; margin-bottom: 20px; }
#profile-panel .profile-section-heading h2 { font-size: 26px; }
#profile-panel #profile-favorite-empty { margin: 0; padding: 28px 22px; border: 1px dashed #a18a6245; border-radius: 12px; background: #d4ad6810; color: #c9bfb3; font: 16px/1.7 Georgia,serif; }
#profile-panel .profile-favorite-card { padding: 10px 10px 16px; border: 1px solid #a18a6230; border-radius: 12px; background: #ffffff03; }
#profile-panel .profile-favorite-card:hover { border-color: #d3ac7666; background: #d3ac7609; }
#profile-panel .profile-favorite-art img { border: 0; border-radius: 8px; }
#profile-panel .profile-favorite-card h3,#profile-panel .profile-favorite-card p { margin-left: 4px; margin-right: 4px; }
#profile-panel .profile-badges { gap: 12px; }
#profile-panel .profile-badges article { flex-direction: column; gap: 16px; padding: 20px 16px; border-radius: 12px; border: 1px solid #a38c622b; background: #ffffff03; }
#profile-panel .profile-medallion { width: 58px; flex-basis: 58px; }
#profile-panel .profile-badges .is-earned { background: linear-gradient(135deg,#b88e4423,#b88e4405); border-color: #c9a3665e; }
#profile-panel .profile-badges h3 { font-size: 17px; }
#profile-panel .profile-badges p { line-height: 1.6; }
#profile-panel .profile-badges strong { display: inline-block; margin-top: 4px; font-size: 14px; }
#profile-panel .profile-settings,#profile-panel .profile-sync-settings { padding: 0; }
#profile-panel details summary { padding: 22px 26px; font-size: 19px; }
#profile-panel details summary>span { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: #c8a57414; }
@media(max-width:1100px) {
    #profile-panel { grid-template-columns: 215px minmax(0,1fr); gap: 18px; }
    #profile-panel .profile-reading-copy { padding: 24px; }
    #profile-panel .profile-stats a { padding: 18px 12px; gap: 10px; }
    #profile-panel .profile-stats a>span { display: none; }
    #profile-panel .profile-stats a { justify-content: center; }
    #profile-panel .profile-stats a>div { text-align: center; }
}
@media(max-width:960px) {
    #profile-panel .profile-reading { grid-template-columns: 1fr; }
    #profile-panel .profile-reading>img { height: 210px; min-height: 0; mask-image: none; }
    #profile-panel .profile-badges article { flex-direction: row; align-items: center; }
}
@media(max-width:650px) {
    #profile-panel { grid-template-columns: 1fr; }
    #profile-panel .account-identity { padding: 22px 18px 16px; text-align: left; grid-template-columns: 86px minmax(0,1fr); }
    #profile-panel .account-identity>img { width: 80px; height: 80px; margin: 4px 0 0; padding: 3px; border-width: 2px; }
    #profile-panel .account-identity h2 { font-size: 26px; margin: 0; }
    #profile-panel .profile-rank { padding: 3px 10px; }
    #profile-panel #profile-edit { margin: 2px 0 0; min-height: 44px; padding: 8px 12px; }
    #profile-panel .profile-sidebar-bottom { margin-top: 8px; }
    #profile-panel .profile-favorites,#profile-panel .profile-achievements { padding: 20px 16px; }
    #profile-panel .profile-section-heading h2 { font-size: 24px; }
    #profile-panel .profile-stats { gap: 8px; }
    #profile-panel .profile-stats a { padding: 18px 8px; }
    #profile-panel .profile-stats strong { font-size: 28px; }
    #profile-panel .profile-reading-copy { padding: 24px 20px; }
    #profile-panel details summary { padding: 20px 18px; }
}
/* Personal chronicle: cinematic cover, curated trophies, quiet timeline. */
#profile-panel .profile-cover { grid-column: 1 / -1; position: relative; display: flex; align-items: end; justify-content: space-between; gap: 24px; min-height: 290px; padding: 34px; box-sizing: border-box; border: 1px solid #be995e66; border-radius: 20px; overflow: hidden; background-size: cover; background-position: center 42%; }
[data-cover="eclipse"] { background-image: linear-gradient(90deg,#100b10e8,#100b1030),linear-gradient(0deg,#100b10ed,transparent),url('images/eclipse.jpg'); }
[data-cover="golden"] { background-image: linear-gradient(90deg,#17100be8,#17100b30),linear-gradient(0deg,#17100bed,transparent),url('images/hawk.jpg'); }
[data-cover="swordsman"] { background-image: linear-gradient(90deg,#09090be8,#09090b30),linear-gradient(0deg,#09090bed,transparent),url('images/black_swordsman.jpg'); }
.cover-identity { display: flex; align-items: center; gap: 26px; min-width: 0; }
.cover-identity>div { min-width: 0; }
#profile-panel #profile-avatar { width: 128px; height: 128px; flex: 0 0 128px; border-radius: 50%; object-fit: cover; border: 3px solid #c4a471; padding: 5px; background: #151013; box-shadow: 0 0 0 6px #bb935516; box-sizing: border-box; }
#profile-name { font: bold clamp(28px,3.5vw,44px)/1.2 Georgia,serif; margin: 10px 0 14px; overflow-wrap: anywhere; }
#profile-panel .profile-rank { display: inline-block; }
#profile-bio-display { white-space: pre-wrap; overflow-wrap: anywhere; max-width: 560px; font: 16px/1.65 Georgia,serif; color: #ecdfd0; margin: 16px 0 8px; }
#profile-character-display { font: 14px/1.6 Arial,sans-serif; color: #dec598; margin-bottom: 0; }
.cover-edit { flex-shrink: 0; padding: 12px 16px; background: #100d10cc; border: 1px solid #bd96555e; border-radius: 8px; text-decoration: none; font: 14px/1.5 Arial,sans-serif; }
#profile-panel .account-identity { padding-top: 0; }
#profile-panel .profile-reading>img { min-height: 260px; }
#profile-panel .profile-reading-copy { padding: 26px; }
.trophy-heading { margin-top: 28px; }
.trophy-heading h3 { font: 24px Georgia,serif; margin: 0; }
.trophy-heading a { font: 14px/1.5 Arial,sans-serif; }
.profile-trophies { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 12px; }
.trophy { min-width: 0; text-align: center; padding: 24px 12px 18px; border: 1px dashed #aa8d573b; border-radius: 50px 50px 12px 12px; background: #ffffff02; }
.trophy.earned { border-style: solid; border-color: #c6a06555; background: radial-gradient(ellipse at top,#b2803433,transparent 75%); }
.trophy-seal { display: grid; place-items: center; width: 58px; height: 58px; border: 1px solid #b99a64; outline: 1px solid #b99a6444; outline-offset: 5px; border-radius: 50%; color: #dfb873; font-size: 28px; margin: 6px auto 20px; }
.trophy h4 { font: 18px/1.3 Georgia,serif; color: #e9c88f; margin: 10px 0; overflow-wrap: anywhere; }
.trophy p { color: #bcae9f; font: 12px/1.7 Arial,sans-serif; margin: 0; }
.journey-details { margin-top: 22px; border-top: 1px solid #b4935f33; }
#profile-panel .journey-details summary { padding: 20px 0; cursor: pointer; }
#profile-panel .journey-details summary,#profile-panel .profile-personalization summary { display: flex; align-items: center; justify-content: space-between; gap: 16px; list-style: none; cursor: pointer; }
#profile-panel .journey-details summary::-webkit-details-marker,#profile-panel .profile-personalization summary::-webkit-details-marker { display: none; }
#profile-panel .journey-details[open]>summary>span,#profile-panel .profile-personalization[open]>summary>span { transform: rotate(45deg); }
.profile-history { list-style: none; padding: 0 0 0 12px; margin: 20px 0; }
.profile-history li { display: grid; gap: 6px; border-left: 1px solid #ac89504f; padding: 0 0 24px 24px; position: relative; }
.profile-history li::before { content: ''; width: 7px; height: 7px; border: 1px solid #b69863; background: #21181a; position: absolute; left: -5px; top: 3px; transform: rotate(45deg); }
.profile-history time,.profile-history li>span { font: 13px/1.5 Arial,sans-serif; color: #bfae99; }
.profile-history strong { font: 18px/1.5 Georgia,serif; }
#profile-panel .profile-personalization { padding: 0; }
#personal-form { padding: 0 26px 26px; }
#personal-form legend { font: 18px/1.5 Georgia,serif; color: #e5ceaa; }
#personal-form textarea,#personal-form select { width: 100%; box-sizing: border-box; border: 1px solid #775b5b; border-radius: 8px; background: #0d0b0f; color: #e9dfd2; font: 16px/1.6 Arial,sans-serif; padding: 12px; }
#personal-form textarea { resize: vertical; }
.cover-upload { padding: 20px; border: 1px dashed #b89b6155; border-radius: 12px; background: #c5a66b08; }
.cover-upload-actions { display: flex; flex-wrap: wrap; gap: 10px; }
#cover-preview { display: block; width: 100%; aspect-ratio: 4/1; object-fit: cover; border-radius: 8px; margin-bottom: 16px; }
#cover-feedback { font: 14px/1.6 Arial,sans-serif; color: #dbc69f; margin-bottom: 0; }
.cover-choices { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 10px; }
#personal-form .cover-choices label { background-size: cover; background-position: center; border: 1px solid #806b48; min-height: 108px; padding: 14px; border-radius: 10px; display: flex; align-items: end; gap: 8px; margin: 10px 0; cursor: pointer; color: #f3e8d6; }
.cover-choices label:has(:checked) { outline: 2px solid #e2be7f; outline-offset: 2px; }
#personal-form input[type="radio"],#personal-form input[type="checkbox"] { width: 18px; height: 18px; flex-shrink: 0; margin: 0; padding: 0; accent-color: #ba8751; }
.trophy-options { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 8px; }
#personal-form .trophy-options label { display: flex; gap: 10px; align-items: center; margin: 0; padding: 12px; border: 1px solid #94784940; border-radius: 8px; min-height: 44px; box-sizing: border-box; cursor: pointer; }
.trophy-options label:has(:checked) { background: #b58b4220; border-color: #c8a26888; }
#personal-status { font: 14px/1.6 Arial,sans-serif; color: #d1b787; }
#profile-panel .account-eyebrow { font-size: 12px; }
@media(max-width:960px) { #profile-panel .profile-cover { flex-direction: column; align-items: start; } .profile-trophies { gap: 8px; } .trophy h4 { font-size: 16px; } }
@media(max-width:650px) {
 #profile-panel .profile-cover { padding: 28px 20px; min-height: 300px; }
 .cover-identity { gap: 18px; align-items: start; }
 #profile-panel #profile-avatar { width: 80px; height: 80px; flex-basis: 80px; padding: 3px; }
 #profile-panel .account-identity { display: block; padding: 0 16px 14px; }
 #profile-panel #profile-edit { margin-top: 16px; width: 100%; }
 #profile-panel .profile-sidebar-bottom p { display: none; }
 #personal-form { padding: 0 18px 22px; }
 .cover-choices { grid-template-columns: 1fr; }
 #personal-form .cover-choices label { min-height: 80px; margin: 4px 0; }
 .trophy-options { grid-template-columns: 1fr; }
 .profile-trophies { grid-template-columns: 1fr; }
 .trophy { display: grid; grid-template-columns: 54px 1fr; text-align: left; column-gap: 18px; padding: 18px; border-radius: 12px; }
 .trophy-seal { grid-row: span 2; width: 44px; height: 44px; margin: 4px; }
 .trophy h4 { margin: 0 0 4px; font-size: 18px; }
 .trophy-heading { align-items: start; gap: 16px; }
 .cover-edit { min-height: 44px; box-sizing: border-box; }
}