/* NEXORA · Screen / Settings — Profile & Account Hub */
.settings-screen{ gap:clamp(1rem,1vw,1.4rem); animation: settings-enter .42s var(--ease-out) both }
@keyframes settings-enter{ from{opacity:0; transform:translateY(6px)} to{opacity:1; transform:none} }
html.nx-reduced-motion .settings-screen{ animation:none }
.settings-screen .screen-head h1{ font-size: clamp(1.6rem, 1.2rem + 1.2vw, 2.1rem) }
.settings-offline{ display:flex; align-items:center; gap:.6rem; padding:.7rem 1rem; border-radius:var(--radius-md); background:var(--warning-soft); color:var(--warning-text); border:1px solid var(--warning-border); font-family:var(--font-mono); font-size:.75rem; font-weight:600 }
[data-theme="dark"] .settings-offline{ background:var(--warning-soft); color:var(--warning-text); border-color:var(--warning-border) }
.settings-offline .icon{ width:16px; height:16px; flex:none }

/* search */
.settings-search-wrap{ display:grid; gap:.5rem }
.settings-search{ display:flex; align-items:center; gap:.7rem; padding:.75rem 1rem; border-radius:var(--radius-md); background:var(--bg-elevated); border:1px solid var(--border) }
.settings-search > .icon{ color:var(--text-3); flex:none }
.settings-search input{ flex:1; min-width:0; background:none; border:0; outline:none; font-size:.95rem; color:var(--text-1) }
.settings-search input::placeholder{ color:var(--text-3) }
.settings-search kbd{ font-family:var(--font-mono); font-size:.68rem; color:var(--text-3); padding:.15rem .45rem; border-radius:5px; background:var(--surface-2); border:1px solid var(--border) }
.settings-search-results{ display:grid; gap:.35rem; padding:.5rem; border-radius:var(--radius-md); background:var(--bg-elevated); border:1px solid var(--border); max-height:320px; overflow:auto }
.settings-search-results .hit{ display:flex; align-items:center; gap:.7rem; padding:.55rem .7rem; border-radius:var(--radius-sm); text-decoration:none }
.settings-search-results .hit:hover{ background:var(--surface-2) }
.settings-search-results .hit b{ font-size:.85rem; color:var(--text-1) }
.settings-search-results .hit span{ font-family:var(--font-mono); font-size:.66rem; color:var(--text-3) }

/* profile hero */
.settings-profile-hero{ padding:clamp(1.1rem, 1rem + .6vw, 1.5rem) }
.profile-hero-main{ display:grid; grid-template-columns: auto 1fr auto; gap:1.2rem; align-items:center }
.profile-hero-main .avatar{ width:68px; height:68px; font-size:1.25rem }
.profile-hero-copy h2{ font-size:1.2rem; color:var(--text-1) }
.profile-hero-copy .mono{ font-size:.72rem; color:var(--text-3) }
.profile-hero-meta{ display:flex; flex-wrap:wrap; gap:.6rem 1rem; margin-top:.6rem }
.profile-hero-meta .w-meta{ display:inline-flex; align-items:center; gap:.4rem; font-family:var(--font-mono); font-size:.7rem; color:var(--text-2) }
.profile-hero-meta .w-meta .icon{ width:14px; height:14px; color:var(--text-3); flex:none }
.profile-completion{ margin-top:.9rem; max-width:420px }
.profile-hero-actions{ display:grid; gap:.5rem; align-content:start }

/* layout 2-col */
.settings-layout{ display:grid; grid-template-columns: 240px 1fr; gap:var(--content-gutter); align-items:start }
@media (max-width: 900px){ .settings-layout{ grid-template-columns:1fr } .profile-hero-main{ grid-template-columns:1fr; justify-items:center; text-align:center } .profile-hero-main .avatar{ justify-self:center } .profile-completion{ max-width:520px; width:100% } }
.settings-nav{ display:grid; gap:.35rem; align-content:start; position:sticky; top:calc(var(--tb-top) + var(--tb-h) + 1rem) }
@media (max-width:900px){ .settings-nav{ display:flex; overflow-x:auto; scrollbar-width:none; position:static } .settings-nav::-webkit-scrollbar{ display:none } }
.settings-nav-item{ display:flex; align-items:center; gap:.6rem; padding:.65rem .85rem; border-radius:var(--radius-md); background:transparent; border:1px solid transparent; font-family:var(--font-mono); font-size:.82rem; color:var(--text-2); cursor:pointer; white-space:nowrap; transition:color .15s var(--ease-out), background .15s var(--ease-out), border-color .15s var(--ease-out) }
.settings-nav-item:hover{ color:var(--text-1); background:var(--hover-fill) }
.settings-nav-item.is-active{ background:var(--accent-soft); color:var(--accent-text); border-color:var(--accent-border); box-shadow:inset 0 0 0 1px var(--accent-border) }
.settings-nav-item .icon{ width:16px; height:16px; flex:none }
.settings-panels{ display:grid; gap:1rem }
.settings-panel{ display:grid; gap:.6rem }

/* rows */
.settings-rows{ display:grid; gap:.45rem }
.settings-row{ display:flex; align-items:center; gap:.85rem; padding:.8rem .9rem; border-radius:var(--radius-md); background:var(--surface-inset); border:1px solid var(--border-subtle); box-shadow:var(--inset-well); width:100%; text-align:left; cursor:pointer; color:inherit; text-decoration:none; transition:border-color .16s, background .16s, box-shadow .16s }
.settings-row:hover{ border-color:var(--border-strong); background:var(--bg-elevated); box-shadow:var(--hi-top), var(--elev-1) }
.settings-row-icon{ width:36px; height:36px; display:grid; place-items:center; background:var(--surface-2); border-radius:var(--radius-sm); color:var(--text-2); flex:none }
.settings-row-icon .icon{ width:16px; height:16px }
.settings-row-copy{ flex:1; min-width:0; display:grid; gap:.15rem }
.settings-row-copy b{ font-size:.88rem; color:var(--text-1) }
.settings-row-copy span{ font-family:var(--font-mono); font-size:.68rem; color:var(--text-3); line-height:1.35 }
.settings-row-chevron{ color:var(--text-3); font-size:1.1rem }
.settings-row-toggle{ cursor:pointer }
.settings-row select.input,
.settings-row select.tts-voice-select,
.settings-row select{
  width:auto !important;
  flex:none !important;
  min-width:140px !important;
  max-width:180px !important;
  padding:.45rem .6rem !important;
  font-size:.82rem !important;
}
@media (max-width: 560px){
  .settings-row select.input,
  .settings-row select.tts-voice-select,
  .settings-row select{
    max-width:100% !important;
    min-width:120px !important;
  }
}
.settings-row.is-destructive{ border-color: var(--danger-border) }
.settings-row.is-destructive .settings-row-icon{ background: var(--danger-soft); color: var(--danger-text) }

/* legacy grid compat */
.settings-grid{ display:grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 360px), 1fr)); gap:1.15rem; align-items:start; align-content:start; grid-auto-flow:dense }
.settings-grid .card{ display:grid; gap:.6rem; align-content:start }
.settings-grid .side-seg button.is-active{ color:var(--n-0); background:var(--n-900); border-color:transparent }
[data-theme="dark"] .settings-grid .side-seg button.is-active{ background:var(--n-0); color:var(--n-950) }
.settings-grid .card.tts-card{ grid-column:1 / -1; max-width:760px; width:100%; justify-self:center }
@media (max-width:767px){ .settings-grid .card.tts-card{ max-width:none; justify-self:stretch } }

/* TTS (preserve) */
.tts-settings-grid{ display:grid; gap:1rem }
.tts-setting-row{ display:grid; gap:.4rem }
.tts-setting-label b{ font-size:.82rem; color:var(--text-1) }
.tts-setting-label span{ font-family:var(--font-mono); font-size:.66rem; color:var(--text-3); display:block }
.tts-range{ width:100% }
.tts-status-card{ display:flex; flex-wrap:wrap; gap:.6rem 1rem; padding:.75rem .9rem; border-radius:var(--radius-md); background:var(--surface-inset); border:1px solid var(--border-subtle); box-shadow:var(--inset-well); font-family:var(--font-mono); font-size:.72rem; color:var(--text-3) }
.tts-dot{ width:8px; height:8px; border-radius:50%; display:inline-block; background:var(--text-3) }
.tts-dot.ok{ background:var(--success) } .tts-dot.warn{ background:var(--warning) } .tts-dot.error{ background:var(--danger) }

/* sheet — portal to body, above shell */
.settings-sheet-backdrop{ position:fixed; inset:0; z-index:300; background:color-mix(in srgb, var(--n-1000) 34%, transparent); backdrop-filter:none; -webkit-backdrop-filter:none; opacity:0; visibility:hidden; transition:opacity .18s var(--ease-out), visibility .18s }
.settings-sheet-backdrop:not([hidden]){ opacity:1; visibility:visible }
.settings-sheet-backdrop[hidden]{ display:block !important; pointer-events:none }
[data-theme="dark"] .settings-sheet-backdrop{ background:rgba(0,0,0,.50) }
[data-theme="dark"] .settings-sheet-backdrop:not([hidden]){ background:rgba(0,0,0,.58) }
.settings-sheet{ position:fixed; left:50%; bottom:16px; transform:translateX(-50%) translateY(8px) scale(.98); width:min(560px, calc(100vw - 32px)); max-height:78vh; background:var(--bg-elevated); border:1px solid var(--border-strong); border-radius:20px; box-shadow:var(--hi-top), var(--elev-3); z-index:301; display:flex; flex-direction:column; overflow:hidden; opacity:0; visibility:hidden; transition:transform .24s cubic-bezier(.2,.8,.2,1), opacity .18s var(--ease-out), visibility .24s }
.settings-sheet:not([hidden]){ transform:translateX(-50%) none; opacity:1; visibility:visible }
.settings-sheet[hidden]{ display:flex !important; pointer-events:none }
html.nx-reduced-motion .settings-sheet{ transition:none }
@media (max-width:767px){ .settings-sheet{ left:10px; right:10px; bottom:10px; width:auto; transform:translateY(8px) scale(.98) } .settings-sheet:not([hidden]){ transform:none } }
@media (max-width:420px){ .settings-sheet{ left:6px; right:6px; bottom:6px } }
.settings-sheet-head{ display:flex; align-items:center; justify-content:space-between; padding:1rem 1.1rem; border-bottom:1px solid var(--border) }
.settings-sheet-body{ flex:1; overflow:auto; padding:1rem 1.1rem; display:grid; gap:.9rem }

/* skeleton */
.skeleton{ position:relative; overflow:hidden; background:var(--surface-2); border-radius:var(--radius-sm); min-height:18px }
.skeleton::after{ content:""; position:absolute; inset:0; background: linear-gradient(90deg, transparent, rgba(255,255,255,.42), transparent); transform: translateX(-100%); animation: shimmer 1.15s infinite }
[data-theme="dark"] .skeleton::after{ background: linear-gradient(90deg, transparent, rgba(255,255,255,.06), transparent) }
@keyframes shimmer{ 100%{ transform: translateX(100%) } }
html.nx-reduced-motion .skeleton::after{ animation:none }
:focus-visible{ outline:2px solid var(--focus); outline-offset:2px; border-radius:4px }