#settingsModal { padding:24px; }
#settingsModal .account-settings-modal { width:min(1100px,100%); max-width:1100px; height:min(900px,calc(100dvh - 48px)); max-height:calc(100dvh - 48px); padding:0; display:flex; flex-direction:column; overflow:hidden; border-radius:18px; background:var(--card); }
#settingsModal .portal-settings-header { position:static; margin:0; padding:22px 28px; flex-shrink:0; background:var(--card); }
#settingsModal .portal-settings-header h3 { font-size:25px; letter-spacing:-.5px; }
.account-workspace { display:grid; grid-template-columns:220px minmax(0,1fr); flex:1; min-height:0; }
.account-nav { padding:20px 14px; background:var(--bg); border-right:1px solid var(--border); overflow:auto; }
.account-nav button { display:block; width:100%; text-align:left; padding:14px 12px; margin-bottom:6px; border:1px solid transparent; border-radius:8px; background:transparent; color:var(--ink); cursor:pointer; font:inherit; }
.account-nav strong { display:block; font-size:13px; font-weight:650; }
.account-nav span { display:block; font-size:11px; line-height:1.5; margin-top:5px; color:var(--muted); }
.account-nav button[aria-pressed=true] { background:var(--navy); color:#fff; }
.account-nav button[aria-pressed=true] span { color:#cedcea; }
.account-content { overflow:auto; padding:28px; background:var(--bg); min-width:0; overscroll-behavior:contain; }
.account-heading { margin-bottom:22px; }
#settingsModal .account-heading h4 { font-size:26px; margin:0 0 7px; color:var(--ink); letter-spacing:-.4px; }
.account-heading p { color:var(--muted); font-size:13px; line-height:1.6; }
#settingsModal .settings-section { padding:20px; margin:0 0 18px; border:1px solid var(--border); border-radius:12px; background:var(--card); }
#settingsModal .settings-section > h4 { color:var(--ink); font-size:15px; margin:0 0 14px; }
#settingsModal .settings-section > p { font-size:13px; color:var(--muted); line-height:1.6; margin-bottom:12px; }
#settingsModal .settings-readonly { display:flex; flex-wrap:wrap; gap:8px 20px; font-size:13px; }
#settingsModal .settings-readonly > span { overflow-wrap:anywhere; }
#settingsModal .field { margin-bottom:18px; min-width:0; }
#settingsModal .field label { display:block; margin-bottom:7px; }
#settingsModal .field :is(input:not([type=checkbox]):not([type=radio]):not([type=file]),select,textarea) { width:100%; box-sizing:border-box; background:var(--bg); color:var(--ink); border:1px solid var(--border); }
#settingsModal input[type=file] { width:100%; min-width:0; max-width:100%; }
#settingsModal .modal-actions { margin:0; padding:14px 28px; background:var(--card); flex-shrink:0; justify-content:flex-end; }
#settingsModal [hidden] { display:none!important; }
.theme-options { border:0; padding:0; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; min-width:0; }
.theme-options legend { font-size:14px; font-weight:600; margin-bottom:16px; }
.theme-choice { position:relative; display:flex; flex-direction:column; gap:8px; border:1px solid var(--border); border-radius:10px; padding:12px; cursor:pointer; min-width:0; }
.theme-choice:has(input:checked) { outline:2px solid var(--teal); outline-offset:1px; border-color:var(--teal); }
.theme-choice input { position:absolute; top:18px; right:18px; width:18px; height:18px; accent-color:var(--teal); z-index:1; }
.theme-choice strong { font-size:14px; }
.theme-choice small { font-size:11px; line-height:1.5; color:var(--muted); }
.theme-swatch { --preview-bg:#edf2f7; --preview-card:#fff; --preview-line:#c4d2de; --preview-accent:#2a7d8c; --preview-hero:linear-gradient(125deg,#1a2e4a,#2a6270); position:relative; display:flex; gap:9px; height:142px; padding:28px 10px 10px; border-radius:9px; background:var(--preview-bg); border:1px solid var(--preview-line); overflow:hidden; box-shadow:inset 0 1px 0 #ffffff30; }
.theme-swatch::before { content:''; position:absolute; top:12px; left:11px; width:4px; height:4px; border-radius:50%; background:var(--preview-accent); box-shadow:7px 0 var(--preview-line),14px 0 var(--preview-line); }
.theme-swatch > i { position:relative; display:block; width:18%; border-radius:4px; background:var(--preview-card); }
.theme-swatch > i::before { content:''; position:absolute; inset:10px 22% auto; height:32px; background:repeating-linear-gradient(180deg,var(--preview-line) 0 3px,transparent 3px 10px); }
.theme-swatch > span { flex:1; min-width:0; display:flex; flex-direction:column; gap:7px; }
.theme-swatch .theme-preview-banner { position:relative; flex:1; min-height:35px; background:var(--preview-hero); border-radius:5px; overflow:hidden; }
.theme-preview-banner::before { content:''; position:absolute; top:12px; left:8px; width:35%; height:3px; border-radius:2px; background:#ffffffc0; box-shadow:0 7px 0 #ffffff55; z-index:1; }
.theme-preview-art { position:absolute; inset:0; display:block; background:radial-gradient(ellipse at 85% 0%,#ffffff30,transparent 70%); }
.theme-preview-cards { display:flex; gap:5px; height:22px; }
.theme-preview-cards i { flex:1; background:var(--preview-card); border-radius:3px; position:relative; }
.theme-preview-cards i::after { content:''; position:absolute; top:6px; left:5px; width:40%; height:3px; background:var(--preview-line); box-shadow:0 6px var(--preview-line); }
.theme-swatch em { height:8px; width:48%; background:var(--preview-accent); border-radius:3px; }
.theme-swatch-dark { --preview-bg:#12161d; --preview-card:#252c37; --preview-line:#46515f; --preview-accent:#79badc; --preview-hero:linear-gradient(125deg,#252c37,#3e5063); }
.theme-swatch-navy { --preview-bg:#0b1c34; --preview-card:#193754; --preview-line:#345779; --preview-accent:linear-gradient(105deg,#07dec9,#1c95e6); --preview-hero:linear-gradient(125deg,#102640,#195075); }
.theme-swatch-navy::before { background:#07dec9; }
.theme-options-colourful { grid-template-columns:repeat(2,minmax(0,1fr)); margin-top:24px; }
.theme-swatch-cherry-blossom { --preview-bg:#fff3f7; --preview-line:#e4bfce; --preview-accent:#963451; --preview-hero:linear-gradient(125deg,#492439,#914b6c); }
.theme-swatch-cherry-blossom .theme-preview-art { background:radial-gradient(ellipse at 75% 26%,#f8bfd7 0 3px,transparent 4px),radial-gradient(ellipse at 90% 65%,#f8bfd7 0 2px,transparent 3px),radial-gradient(ellipse at 55% 80%,#f8bfd7aa 0 3px,transparent 4px); }
.theme-swatch-lavender { --preview-bg:#f5f1ff; --preview-line:#cfc0e4; --preview-accent:#674194; --preview-hero:linear-gradient(125deg,#352446,#77559d); }
.theme-swatch-lavender .theme-preview-art { background:radial-gradient(ellipse at 90% 140%,transparent 0 58%,#dfc5ff80 59% 60%,transparent 61% 74%,#dfc5ff60 75% 76%,transparent 77%),radial-gradient(circle at 75% 25%,#e8d8ff 0 1px,transparent 2px); }
.theme-swatch-forest { --preview-bg:#eef7f0; --preview-line:#b9d1c0; --preview-accent:#286247; --preview-hero:linear-gradient(125deg,#1e392b,#50755b); }
.theme-swatch-forest .theme-preview-art { background:radial-gradient(ellipse at 85% 30%,#bad6a980 0 3px,transparent 4px),radial-gradient(ellipse at 65% 80%,#bad6a980 0 3px,transparent 4px),radial-gradient(circle at 63% 30%,#e3f7b9 0 1px,#d8eeae30 2px,transparent 7px); }
.theme-swatch-sunset { --preview-bg:#fff4e9; --preview-line:#e0c0a9; --preview-accent:#a2472d; --preview-hero:linear-gradient(125deg,#4e2c29,#a66243); }
.theme-swatch-sunset .theme-preview-art { background:radial-gradient(circle at 80% 100%,#ffd2a399 0 13px,transparent 14px),repeating-conic-gradient(from 0deg at 80% 100%,#ffd3a325 0deg,transparent 10deg,transparent 28deg); }
#settingsModal .account-theme-note,#accountThemeStatus { font-size:12px; color:var(--muted); line-height:1.6; margin:16px 0 0; }
#accountThemeStatus:empty { display:none; }
.account-theme-effects { margin-top:20px; padding:16px; background:var(--bg); border:1px solid var(--border); border-radius:10px; }
.account-theme-effects label { display:flex; align-items:center; gap:16px; cursor:pointer; min-height:44px; }
.account-theme-effects label > span { flex:1; min-width:0; }
.account-theme-effects strong { display:block; color:var(--ink); font-size:14px; }
.account-theme-effects small { display:block; color:var(--muted); font-size:12px; line-height:1.6; margin-top:4px; }
.account-theme-effects input { width:22px; height:22px; flex-shrink:0; accent-color:var(--teal); }
#settingsModal #portalThemeEffectsHint { color:var(--muted); font-size:12px; line-height:1.6; margin:12px 0 0; }
.account-theme-example { border:1px solid var(--border); border-radius:10px; padding:20px; margin-top:22px; background:var(--bg); display:flex; align-items:center; gap:18px; }
.account-theme-example > div { flex:1; min-width:0; }
.account-eyebrow { color:var(--teal); font-size:10px; font-weight:700; letter-spacing:1.5px; }
.account-theme-example h5 { font-size:18px; color:var(--ink); margin:8px 0; }
.account-theme-example p { font-size:12px; color:var(--muted); line-height:1.6; }
#settingsModal :is(button,input,select):focus-visible { outline:3px solid var(--teal); outline-offset:3px; }
@media(max-width:700px) {
 #settingsModal { padding:0; }
 #settingsModal .account-settings-modal { width:100%; height:100dvh; max-height:100dvh; border-radius:0; }
 #settingsModal .portal-settings-header { padding:16px; }
 #settingsModal .portal-settings-header h3 { font-size:22px; }
 .account-workspace { display:flex; flex-direction:column; }
 .account-nav { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:4px; padding:10px; border:0; border-bottom:1px solid var(--border); flex-shrink:0; }
 .account-nav button { margin:0; padding:12px 3px; text-align:center; min-height:44px; }
 .account-nav strong { font-size:11px; white-space:nowrap; }
 .account-nav span { display:none; }
 .account-content { padding:16px; flex:1; }
 #settingsModal .settings-section { padding:16px; }
 #settingsModal .modal-actions { padding:12px 16px; }
 .theme-options { gap:8px; }
 .theme-choice { padding:8px; }
 .theme-choice small { font-size:10px; }
 .theme-swatch { height:122px; padding:25px 6px 8px; gap:5px; }
 .theme-choice input { top:10px; right:10px; width:16px; height:16px; }
 .account-theme-example { flex-direction:column; align-items:stretch; padding:16px; }
 #settingsProfileForm > div[style*="grid-template-columns"] { grid-template-columns:minmax(0,1fr)!important; }
 #mfaEnrollArea > div { flex-wrap:wrap; }
}
@media(max-width:360px) {
 .account-nav { padding:10px 6px; gap:2px; }
 .account-nav strong { font-size:10px; }
}
@media(max-width:440px) {
 .theme-options { grid-template-columns:repeat(2,minmax(0,1fr)); }
 .theme-swatch { height:124px; }
}
#dashboardGreeting { overflow-wrap:anywhere; }
/* Compact catalogue: keep full labels and generous click targets. */
.theme-options { grid-template-columns:repeat(4,minmax(0,1fr)); gap:9px; }
.theme-choice { padding:9px; gap:6px; }
.theme-choice small { font-size:10px; }
.theme-swatch { height:95px; padding:23px 7px 7px; gap:6px; }
.theme-swatch .theme-preview-banner { min-height:22px; }
.theme-preview-cards { height:15px; }
.theme-choice input { top:13px; right:13px; }
.theme-swatch-system { --preview-bg:linear-gradient(115deg,#edf2f7 50%,#12161d 50%); --preview-hero:linear-gradient(115deg,#1a2e4a 50%,#3e5063 50%); }
@media(max-width:1000px) { .theme-options { grid-template-columns:repeat(2,minmax(0,1fr)); } }

.theme-swatch-ocean { --preview-bg:#eff9fa; --preview-line:#b7d2d7; --preview-accent:#236479; --preview-hero:linear-gradient(125deg,#183848,#2f6275); }
.theme-swatch-ocean .theme-preview-art { background:radial-gradient(ellipse at 90% 150%,transparent 0 57%,#b1e8e688 58% 59%,transparent 60% 72%,#b1e8e666 73% 74%,transparent 75%); }
.theme-swatch-autumn { --preview-bg:#faf5eb; --preview-line:#d6c5a6; --preview-accent:#8a4e2e; --preview-hero:linear-gradient(125deg,#403024,#795438); }
.theme-swatch-autumn .theme-preview-art { background:radial-gradient(ellipse at 75% 25%,#f3cc82aa 0 3px,transparent 4px),radial-gradient(ellipse at 90% 68%,#e6ac7f99 0 3px,transparent 4px),radial-gradient(ellipse at 60% 80%,#f3cc8288 0 2px,transparent 3px); }
.theme-swatch-rose-gold { --preview-bg:#fff5f1; --preview-line:#ddc0b5; --preview-accent:#94513e; --preview-hero:linear-gradient(125deg,#472e30,#805348); }
.theme-swatch-rose-gold .theme-preview-art { background:radial-gradient(ellipse at 100% 150%,transparent 0 61%,#f5d1bd99 62% 63%,transparent 64% 77%,#f5d1bd66 78% 79%,transparent 80%),radial-gradient(circle at 75% 30%,#f8d6bf 0 1px,transparent 2px); }