.settings-page { max-width: 1080px; margin: 0 auto 40px; }
.settings-heading { margin: 26px 0 22px; }
.settings-heading .eyebrow { margin: 0 0 9px; color: var(--accent-bright); }
.settings-heading h1 { margin: 0; font-size: clamp(1.7rem, 4vw, 2.5rem); }
.settings-heading p { max-width: 650px; color: var(--muted); line-height: 1.5; }
.settings-notice { padding: 12px 15px; margin-bottom: 14px; border: 1px solid rgba(83,196,137,.45); border-radius: 10px; color: var(--text); background: rgba(39,112,75,.17); }
.settings-notice.is-error { border-color: rgba(255,112,112,.5); background: rgba(130,45,45,.17); }
.settings-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 16px; }
.settings-card { min-width: 0; padding: 23px; border: 1px solid var(--line-soft); border-radius: 16px; background: var(--surface); }
.settings-card h2 { margin: 0 0 7px; font-size: 1.12rem; }
.settings-card p { color: var(--muted); line-height: 1.5; }
.settings-card-wide { grid-column: 1 / -1; }
.settings-kicker { margin: 0 0 10px; color: var(--accent-bright) !important; font-size: .7rem; font-weight: 800; letter-spacing: .11em; text-transform: uppercase; }
.settings-tier { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; align-items: baseline; }
.settings-tier strong { color: var(--gold); font-size: 1.4rem; }
.settings-spend { display: flex; flex-wrap: wrap; gap: 24px; margin: 20px 0; }
.settings-spend span { display: block; color: var(--muted); font-size: .75rem; }
.settings-spend b { display: block; margin-top: 5px; font-size: 1.3rem; }
.settings-progress { height: 8px; overflow: hidden; border-radius: 99px; background: var(--line); }
.settings-progress i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #55d7d2, #ffad58); }
.settings-perks { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 15px; }
.settings-perks span { padding: 7px 10px; border: 1px solid var(--line-soft); border-radius: 8px; color: var(--text); background: var(--surface-raised); font-size: .78rem; }
.settings-current { margin: 10px 0 16px; color: var(--text) !important; font-weight: 700; overflow-wrap: anywhere; }
.settings-field { display: block; margin: 13px 0; }
.settings-field span { display: block; margin-bottom: 6px; color: var(--muted); font-size: .77rem; font-weight: 700; }
.settings-field input { width: 100%; min-width: 0; padding: 11px 12px; border: 1px solid var(--line); border-radius: 9px; color: var(--text); background: var(--ink); font: inherit; }
.settings-field input:focus { outline: 2px solid rgba(255,157,66,.4); border-color: var(--accent); }
.settings-card button { margin-top: 4px; }
.settings-card button:disabled { opacity: .5; cursor: not-allowed; }
.settings-hint { margin: 8px 0 0; font-size: .78rem; }
.settings-email-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 0 15px; }
.settings-email-grid .settings-code { grid-column: 1 / -1; max-width: 220px; }
.settings-voucher-form { display: flex; flex-wrap: wrap; gap: 12px; align-items: end; max-width: 620px; }
.settings-voucher-form .settings-field { flex: 1 1 260px; margin-bottom: 0; }
.settings-voucher-form button { min-height: 44px; }
.settings-voucher-result { margin-top: 16px; padding: 12px 14px; border: 1px solid rgba(83,196,137,.45); border-radius: 9px; background: rgba(39,112,75,.17); }
.settings-voucher-result.is-error { border-color: rgba(255,112,112,.5); background: rgba(130,45,45,.17); }
.settings-voucher-history { margin-top: 24px; border-top: 1px solid var(--line-soft); padding-top: 16px; }
.settings-voucher-history h3 { margin: 0 0 10px; font-size: .9rem; }
.settings-voucher-history ul { padding: 0; margin: 0; list-style: none; }
.settings-voucher-history li { display: flex; justify-content: space-between; gap: 12px; padding: 8px 0; border-bottom: 1px solid var(--line-soft); }
.settings-voucher-history li span { color: var(--muted); }
@media (max-width: 760px) { .settings-grid { grid-template-columns: 1fr; } .settings-card-wide { grid-column: 1; } }
@media (max-width: 480px) { .settings-card { padding: 18px; } .settings-email-grid { grid-template-columns: 1fr; } }

/* Account-scoped appearance editor. All image URLs come from the API's fixed asset roles. */
.settings-appearance-editor{display:block;scroll-margin-top:100px}
.appearance-heading p{margin:8px 0 20px;max-width:750px}
.appearance-preview{min-width:0;overflow:hidden;border:1px solid var(--line);border-radius:10px;background-color:#12212a;background-position:center;background-size:cover}
.appearance-preview-banner{min-height:190px;display:flex;align-items:end;padding:25px;background-color:#1a2b35;background-position:center;background-size:cover}
.appearance-preview-identity{display:flex;align-items:center;gap:18px;min-width:0}
.appearance-preview-identity>div:last-child{min-width:0}
.appearance-preview-identity strong{display:block;font-size:24px;color:#fff;overflow-wrap:anywhere;text-shadow:0 1px 8px #061018}
.appearance-preview-identity>div>span{display:block;color:#c1d0d8;font-size:12px;margin-top:7px}
.appearance-preview-avatar{display:flex;align-items:center;justify-content:center;flex:none;width:82px;height:82px;border:2px solid #87969e;border-radius:12px;overflow:hidden;background:#233845;color:#e5edf0;font-size:25px;font-weight:700}
.appearance-preview-avatar img{width:100%;height:100%;object-fit:cover}
.appearance-preview-avatar [hidden]{display:none}
.appearance-preview-body{display:flex;flex-wrap:wrap;gap:10px;padding:19px 24px;background:rgba(9,18,25,.78)}
.appearance-preview-body span{padding:7px 11px;border:1px solid #435762;border-radius:5px;font-size:11px;color:#bacbd3;background:rgba(21,34,44,.6)}
.appearance-preview-caption{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-top:9px}
.appearance-preview-caption p{margin:0;font-size:12px}
.appearance-role-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:15px;margin-top:19px}
.appearance-role{min-width:0}
.settings-appearance-editor select{width:100%;min-width:0;padding:11px 12px;border:1px solid var(--line);border-radius:6px;color:var(--text);background:var(--ink);font:inherit}
.settings-appearance-editor select:focus-visible,.settings-appearance-editor button:focus-visible,.appearance-upload-label:focus-within{outline:2px solid var(--accent);outline-offset:3px}
.appearance-upload-row,.appearance-save-row{display:flex;flex-wrap:wrap;align-items:center;gap:12px;margin-top:18px}
.appearance-upload-row p{margin:0}
.appearance-upload-label{position:relative;overflow:hidden;cursor:pointer}
.appearance-upload-label input{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:pointer;margin:0}
.appearance-collection-heading{border-top:1px solid var(--line);margin-top:25px;padding-top:21px}
.appearance-collection-heading h3{margin:0 0 8px;font-size:16px}
.appearance-filters{display:grid;grid-template-columns:minmax(0,1fr) minmax(160px,.35fr);gap:15px;margin-top:8px}
.appearance-collections{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:13px;max-height:620px;overflow-y:auto;overscroll-behavior:contain;padding:4px 4px 7px;scrollbar-width:thin}
.appearance-collection{min-width:0;border:1px solid var(--line);border-radius:8px;overflow:hidden;background:var(--surface-raised)}
.appearance-collection[hidden]{display:none}
.appearance-collection.is-unlocked{border-color:#4d857a}
.appearance-collection-image{display:flex;align-items:center;justify-content:center;aspect-ratio:4/1;background:#17262f;color:#708893}
.appearance-collection-image img{display:block;width:100%;height:100%;object-fit:cover}
.appearance-collection-copy{padding:12px}
.appearance-collection-copy h4{margin:0;font-size:13px;overflow-wrap:anywhere;color:var(--text)}
.appearance-collection-progress{font-size:11px;margin:8px 0 10px}
.appearance-collection-actions{display:flex;flex-wrap:wrap;gap:6px}
.appearance-game-info{border-top:1px solid var(--line);padding-top:15px;margin:22px 0 0;font-size:12px}
@media(max-width:1050px){.appearance-collections{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:760px){.appearance-role-grid{grid-template-columns:1fr}.appearance-collections{grid-template-columns:1fr;max-height:580px}.appearance-filters{grid-template-columns:1fr}.appearance-preview-banner{min-height:160px;padding:18px}.appearance-preview-avatar{width:66px;height:66px}.appearance-preview-identity{gap:12px}.appearance-preview-identity strong{font-size:20px}.appearance-preview-body{padding:14px 18px}.appearance-save-row .button{flex:1 1 180px}.appearance-collection-actions .button{min-height:40px}}