/* Account settings: compact panels, scoped to this page. */
.settings-workspace { container-type: inline-size; --settings-line:#e5dfd2; --settings-ink:#34394c; }
.settings-workspace *, .settings-workspace *::before, .settings-workspace *::after { box-sizing:border-box; }
.settings-workspace .card { min-width:0; padding:18px; margin:0 0 14px; }
.settings-workspace h2 { margin:0 0 12px; font-size:1rem; line-height:1.5; color:var(--settings-ink); }
.settings-workspace h3 { font-size:.85rem; }
.settings-workspace p { font-size:.78rem; line-height:1.75; }
.settings-workspace .btn { display:inline-flex; align-items:center; justify-content:center; gap:6px; padding:8px 12px; min-height:34px; font-size:.75rem; line-height:1.4; border-radius:9px; white-space:normal; }
.settings-workspace .btn-sm { padding:6px 9px; min-height:30px; font-size:.7rem; }
.settings-workspace .input { min-width:0; width:100%; padding:9px 10px; font-size:.8rem; border-radius:9px; }
.settings-workspace .field-label { font-size:.75rem; margin:12px 0 5px; }
.settings-workspace .ui-icon { flex:none; width:17px; height:17px; }
.settings-heading { margin-bottom:18px; }
.settings-welcome { position:relative; isolation:isolate; overflow:hidden; min-height:230px; border:1px solid #fff8e9; border-radius:21px; background:#fff5de; box-shadow:0 6px 22px #6d704413; }
.settings-welcome-art { position:absolute; inset:0; z-index:-2; width:100%; height:100%; object-fit:cover; object-position:72% 48%; }
.settings-welcome::after { content:''; position:absolute; inset:0; z-index:-1; background:linear-gradient(90deg,#fff9eafa 0%,#fff9eaf0 34%,#fff9ea87 63%,#fff9ea0d 100%); }
.settings-welcome-copy { padding:27px; }
.settings-welcome-sign { display:inline-flex; align-items:center; gap:5px; padding:4px 9px; border:1px solid #d6be8c; border-radius:7px; background:#fffcef; color:#8a692e; font-size:10px; font-weight:600; transform:rotate(-2deg); }
.settings-welcome-sign .ui-icon { width:13px; height:13px; }
.settings-welcome-title { display:flex; align-items:center; gap:10px; margin:13px 0 8px; padding:0; border:0; border-radius:0; background:transparent; color:#67512e; box-shadow:none; font-size:32px; line-height:1.4; letter-spacing:.03em; }
.settings-welcome-title .ui-icon { width:26px; height:26px; color:#8f743e; }
.settings-welcome p { margin:0; color:#74654e; font-size:12px; line-height:1.9; }
.settings-welcome-links { display:flex; flex-wrap:wrap; gap:9px; margin-top:18px; }
.settings-welcome-links .btn { background:#fffaf0; color:#7f6637; border-color:#d8c6a1; font-size:11px; }
.settings-workspace .btn-primary { background:#45765e; border-color:#45765e; color:#fff; }
.settings-workspace .btn-primary:hover { background:#38634e; border-color:#38634e; }
.settings-workspace .card { border-color:#e2dfcf; border-radius:14px; box-shadow:0 4px 16px #51704a0c; }
.settings-workspace .settings-section-heading h2, .settings-workspace .settings-shortcuts h2 { color:#52705c; }
.settings-account { scroll-margin-top:90px; }
.settings-account { display:flex; align-items:center; gap:14px; background:linear-gradient(110deg,#fff9e8,#f1f5ec); }
.settings-account-avatar { display:block; flex:none; width:56px; height:56px; border-radius:14px; image-rendering:pixelated; }
.settings-account-identity { min-width:0; }
.settings-account-identity > strong { display:inline-block; font-size:1rem; margin-right:8px; }
.settings-account-identity .member-level { display:inline-flex; vertical-align:middle; font-size:.65rem; }
.settings-account-identity p { margin:5px 0 0; color:#7d7b70; font-size:.69rem; overflow-wrap:anywhere; }
.settings-account-identity code { font-family:ui-monospace,monospace; }
.settings-account-actions { display:flex; flex-wrap:wrap; gap:7px; margin-left:auto; flex:none; }
.settings-tabs { display:flex; gap:5px; padding:5px; margin-bottom:18px; border:1px solid #dce6d8; border-radius:14px; background:#eef2e8; }
.settings-tabs button { display:flex; flex:1; align-items:center; justify-content:center; gap:7px; min-height:40px; border:0; border-radius:8px; padding:8px; background:transparent; color:#77746c; font:inherit; font-size:.79rem; cursor:pointer; }
.settings-tabs button.is-active { background:#fffdf8; color:#45765e; font-weight:700; box-shadow:0 2px 7px #635b3c12; }
.settings-tabs button:hover { color:#34394c; background:#fff9; }
.settings-tabs button:focus-visible { outline:2px solid #a68642; outline-offset:1px; }
.settings-panel { min-width:0; overflow:hidden; border:1px solid #e2dfcf; border-radius:14px; background:#fffdf9; box-shadow:0 4px 16px #51704a0c; }
.settings-panel .settings-tabs { margin:0; border:0; border-bottom:1px solid #dce6d8; border-radius:0; }
/* Shared desktop card selectors have several :not() conditions; keep this panel flat. */
body[data-view="settings"] #app-shell .settings-panel .card { margin:0 !important; border:0 !important; border-radius:0 !important; background:transparent !important; box-shadow:none !important; }
body[data-view="settings"] #app-shell .settings-data-sections > .card + .card,
body[data-view="settings"] #app-shell .settings-profile-aside > .card + .card { border-top:1px solid var(--settings-line) !important; }
.settings-profile-layout, .settings-two-columns { display:grid; grid-template-columns:minmax(0,1fr); gap:14px; align-items:start; }
.settings-section-heading { display:flex; align-items:center; justify-content:space-between; gap:8px; flex-wrap:wrap; margin-bottom:12px; }
.settings-section-heading h2 { margin:0; }
.settings-label { font-size:.65rem; color:#8d846b; background:#f6f0e2; padding:3px 7px; border-radius:6px; }
.settings-avatar-preview { display:flex; align-items:center; gap:12px; margin:16px 0; }
.settings-avatar-preview img { flex:none; border-radius:14px; image-rendering:pixelated; }
.settings-avatar-preview strong { font-size:.85rem; }
.settings-avatar-preview p { margin:4px 0 0; font-size:.7rem; }
.settings-profile-aside .settings-shortcuts a, .settings-content-links a, .settings-shortcuts > a { display:flex; align-items:center; gap:9px; min-width:0; padding:11px 0; border-bottom:1px solid #e7e2d680; color:#5f655a; font-size:.78rem; text-decoration:none; }
.settings-shortcuts a:hover { color:#476f56; }
.settings-shortcuts a > span:last-child { margin-left:auto; }
.settings-shortcuts a:last-child { border-bottom:0; }
.settings-save-row, .settings-button-row { display:flex; flex-wrap:wrap; align-items:center; gap:8px; margin-top:12px; }
.settings-save-row > span { font-size:.7rem; }
.settings-details { margin-top:18px; padding-top:14px; border-top:1px solid var(--settings-line); }
.settings-details > summary, .settings-advanced > summary { display:flex; align-items:center; gap:8px; color:#5e5a4a; cursor:pointer; font-size:.8rem; font-weight:600; list-style:none; }
.settings-details > summary::before, .settings-advanced > summary::before { content:'+'; display:inline-block; flex:none; font-size:1rem; color:#9c8657; }
.settings-details[open] > summary::before, .settings-advanced[open] > summary::before { content:'−'; }
.settings-details > summary > span, .settings-advanced > summary > span { margin-left:auto; color:#928b7c; font-size:.65rem; font-weight:400; }
.settings-details textarea { font-size:.73rem; line-height:1.8; }
.settings-fields { display:grid; grid-template-columns:minmax(0,1fr); gap:0 12px; }
.settings-workspace .settings-notice { color:#39704f; font-size:.75rem; margin:10px 0; }
.settings-workspace .error-text { overflow-wrap:anywhere; }
.settings-session-list { list-style:none; padding:0; margin:12px 0 0; max-height:300px; overflow:auto; scrollbar-width:thin; }
.settings-session-list li { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:12px 0; border-bottom:1px solid var(--settings-line); }
.settings-session-list li:last-child { border-bottom:0; }
.settings-session-list strong { font-size:.77rem; }
.settings-session-list p { margin:4px 0 0; font-size:.67rem; color:#8a8476; }
.settings-session-list .btn { flex:none; }
.settings-workspace .settings-advanced > .card { padding:18px 0 0; margin:16px 0 0; border:0; border-top:1px solid var(--settings-line); border-radius:0; background:transparent; box-shadow:none; }
.settings-advanced .inline-form { align-items:stretch; gap:8px; }
.settings-advanced .inline-form input[type="number"] { max-width:90px; }
.settings-advanced .session-item { font-size:.73rem; gap:8px; }
.settings-advanced .session-item > span { min-width:0; overflow-wrap:anywhere; }
.settings-data-grid { display:grid; grid-template-columns:minmax(0,1fr); gap:12px; }
.settings-data-item { display:flex; flex-direction:column; align-items:flex-start; min-width:0; padding:16px; border:1px solid #e6dfcf; border-radius:12px; background:#fffcf4; }
.settings-data-item:nth-child(2) { background:#f4f1f9; border-color:#e3ddec; }
.settings-data-item:nth-child(3) { background:#edf6f1; border-color:#dce8e0; }
.settings-data-icon { display:grid; place-items:center; width:34px; height:34px; margin-bottom:12px; border-radius:10px; color:#8d7138; background:#fff9; }
.settings-data-icon .ui-icon { width:20px; height:20px; }
.settings-data-item h3 { margin:0; }
.settings-data-item p { color:#807c71; margin:9px 0 16px; font-size:.74rem; }
.settings-data-item .btn { margin-top:auto; }
.settings-content-links { display:grid; grid-template-columns:minmax(0,1fr); gap:0 24px; }
.settings-signout { display:flex; align-items:center; justify-content:space-between; gap:12px; }
.settings-signout h2 { margin-bottom:3px; }
.settings-signout p { margin:0; }
.settings-workspace .persona-category { padding:12px 0; min-width:0; }
.settings-workspace .persona-category-heading { flex-wrap:wrap; gap:5px; }
.settings-workspace .persona-category-heading .tag-cat { font-size:.8rem; }
.settings-workspace .persona-category-heading > .small { font-size:.63rem; }
.settings-workspace .persona-count { font-size:.61rem; }
.settings-workspace .persona-hint { margin:6px 0 8px; font-size:.7rem; }
.settings-workspace .persona-picker .tag-options { gap:5px; }
.settings-workspace .persona-picker .tag-check { padding:5px 7px; font-size:.72rem; line-height:1.5; }
.settings-workspace .persona-expand { margin-top:4px; padding-top:4px; font-size:.68rem; min-height:28px; }
.settings-workspace .persona-selected { padding:10px; margin-bottom:12px; }
.settings-workspace .persona-choice { padding:4px 8px; font-size:.68rem; }
.settings-workspace .persona-picker .persona-intro p, .settings-workspace .persona-limit { font-size:.73rem; }
@container (min-width:680px) {
  .settings-profile-layout { grid-template-columns:190px minmax(0,1fr); gap:16px; }
  .settings-two-columns { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .settings-profile-aside .card { padding:14px; }
  .settings-profile-aside .settings-section-heading { align-items:flex-start; gap:5px; }
  .settings-profile-aside .settings-label { padding:0; background:transparent; }
  .settings-avatar-preview { display:block; }
  .settings-avatar-preview img { display:block; margin-bottom:12px; }
  .settings-persona-panel .persona-picker { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:0 16px; }
  .settings-persona-panel .persona-picker > :not(.persona-category) { grid-column:1 / -1; }
  .settings-fields { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .settings-data-grid { grid-template-columns:repeat(3,minmax(0,1fr)); }
  .settings-content-links { grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media(max-width:600px) {
  .settings-workspace .card { padding:15px; }
  .settings-welcome { min-height:215px; }
  .settings-welcome-copy { padding:22px 19px; }
  .settings-welcome-title { font-size:26px; gap:8px; }
  .settings-welcome-art { object-position:70% 48%; }
  .settings-welcome::after { background:linear-gradient(90deg,#fff9eafc 0%,#fff9eae0 43%,#fff9ea75 77%,#fff9ea25); }
  .settings-account { flex-wrap:wrap; gap:10px; }
  .settings-account-identity { flex:1; }
  .settings-account-actions { width:100%; margin-left:0; padding-top:10px; border-top:1px solid var(--settings-line); }
  .settings-tabs { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:4px; }
  .settings-tabs button { font-size:.75rem; }
  .settings-signout { align-items:flex-start; }
  .settings-details > summary > span { display:none; }
}
@media(max-width:720px) {
  .settings-welcome { width:calc(100% + 24px); margin:0 -12px 14px; border:0; border-radius:0; box-shadow:none; }
}
@media(prefers-contrast:more) {
  .settings-welcome::after { background:linear-gradient(90deg,#fffaf1 0%,#fffaf1f2 68%,#fffaf160); }
}

/* The full-width profile header is the avatar chooser; the aside only shows the current avatar. */
.settings-workspace .settings-avatar-hint { margin:0; color:#7b8478; }
.settings-workspace .settings-avatar-chooser { min-width:0; margin-bottom:20px; padding:14px 16px 12px; border:1px solid #dce6dc; border-radius:13px; background:#f4f8f3; }
.settings-workspace .settings-avatar-chooser .registration-avatars { min-width:0; margin:0; padding:0; border:0; background:transparent; }
.settings-workspace .settings-avatar-chooser .avatar-picker-heading { align-items:center; gap:12px; margin-bottom:10px; }
.settings-workspace .settings-avatar-chooser .avatar-picker-heading .section-title { margin:0; font-size:.93rem; }
.settings-workspace .settings-avatar-chooser .avatar-picker-heading p { margin:3px 0 0; line-height:1.5; font-size:.7rem; }
.settings-workspace .settings-avatar-chooser .avatar-candidates { grid-template-columns:repeat(4,minmax(0,1fr)); gap:7px; max-height:none; overflow:visible; padding:0; }
.settings-workspace .settings-avatar-chooser .avatar-candidate { min-width:0; padding:4px; border-radius:9px; }
.settings-workspace .settings-avatar-chooser .avatar-candidate img { max-width:76px; }
.settings-workspace .settings-avatar-chooser .avatar-current { flex-wrap:wrap; margin-top:9px; font-size:.68rem; }
.settings-workspace .settings-avatar-chooser-footer { display:flex; align-items:center; gap:12px; flex-wrap:wrap; margin-top:10px; }
.settings-workspace .settings-avatar-chooser-footer .settings-notice { margin:0; }
@container (min-width:480px) {
  .settings-workspace .settings-avatar-chooser .avatar-candidates { grid-template-columns:repeat(6,minmax(0,1fr)); }
}
@container (min-width:680px) {
  .settings-workspace .settings-avatar-chooser .avatar-candidates { grid-template-columns:repeat(8,minmax(0,1fr)); }
}
@container (min-width:980px) {
  .settings-workspace .settings-avatar-chooser .avatar-candidates { grid-template-columns:repeat(12,minmax(0,1fr)); }
}
@media (max-width:600px) {
  .settings-workspace .settings-avatar-chooser { padding:12px; }
  .settings-workspace .settings-avatar-chooser .avatar-picker-heading { align-items:flex-start; flex-wrap:wrap; }
}