/* ════════════════════════════════════════════════════════════════════════════════════════════════
   VOLURR — SETTINGS ULTRA 2, THE CONTROL CENTRE (owner brief 2026-09-25)

   Reads the tokens declared in profile-ultra.css (#v-settings shares the Profile's design system:
   the same surfaces, the same measured text inks, the same crimson action colour and focus ring).
   This file owns the Settings LAYOUT only: the header with its search and the owner's three shell
   controls, the rail, the one-section-at-a-time panels, and the controls inside them.

   Every control follows the same four rules: a visible label, a state that is not colour alone,
   at least 44 px on a coarse pointer, and a result the server confirms before the screen says
   «Saved». The switch's on-state is CRIMSON, the brand's action colour — never the green Article 3
   reserves for price direction.
   ════════════════════════════════════════════════════════════════════════════════════════════════ */

.su-wrap {
  max-width: 1320px;
  margin-inline: auto;
  padding: clamp(12px, 2vw, 26px) clamp(12px, 2.4vw, 32px) 64px;
  display: flex;
  flex-direction: column;
  gap: 18px;
  color: var(--pu-txt);
}

/* ── THE HEADER ──────────────────────────────────────────────────────────────────────────────── */
.su-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(260px, 460px) auto;
  align-items: end;
  gap: 16px 20px;
}

.su-head-t { min-width: 0; }

.su-eyebrow {
  display: block;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--pu-red-txt);
  margin-bottom: 6px;
}

html[lang="ar"] .su-eyebrow,
html[lang="ku"] .su-eyebrow { letter-spacing: 0; text-transform: none; font-size: 12.5px; }

.su-head h1 {
  margin: 0;
  font-size: clamp(26px, 2.6vw, 34px);
  font-weight: 900;
  line-height: 1.1;
  letter-spacing: -.015em;
}

html[lang="ar"] .su-head h1,
html[lang="ku"] .su-head h1 { letter-spacing: 0; }

.su-head p { margin: 6px 0 0; color: var(--pu-txt2); font-size: 14px; }

.su-head-c { display: flex; gap: 8px; align-self: center; }

.su-hc {
  appearance: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-width: 40px;
  height: 40px;
  padding: 0 10px;
  border-radius: 11px;
  border: 1px solid var(--pu-line-strong);
  background: var(--pu-surface);
  color: var(--pu-txt);
  font: inherit;
  font-size: 12.5px;
  font-weight: 750;
  cursor: pointer;
}

.su-hc:hover { border-color: color-mix(in srgb, var(--pu-red) 60%, var(--pu-line-strong)); }
.su-hc .su-ic { width: 18px; height: 18px; }

/* ── SEARCH ──────────────────────────────────────────────────────────────────────────────────── */
.su-find { position: relative; min-width: 0; align-self: center; }

.su-find-i {
  position: absolute;
  inset-inline-start: 13px;
  top: 50%;
  transform: translateY(-50%);
  display: inline-grid;
  color: var(--pu-muted);
  pointer-events: none;
}

.su-find-i .su-ic { width: 18px; height: 18px; }

#suFindI {
  width: 100%;
  height: 46px;
  padding-inline: 42px 44px;
  border-radius: 13px;
  border: 1px solid var(--pu-line-strong);
  background: var(--pu-surface);
  color: var(--pu-txt);
  font: inherit;
  font-size: 14px;
  box-shadow: var(--pu-sh-1);
}

#suFindI::placeholder { color: var(--pu-muted); }
#suFindI::-webkit-search-cancel-button { display: none; }
#suFindI:focus { outline: none; border-color: var(--pu-red); box-shadow: 0 0 0 3px var(--pu-red-wash); }

.su-find-k {
  position: absolute;
  inset-inline-end: 12px;
  top: 50%;
  transform: translateY(-50%);
  min-width: 22px;
  height: 22px;
  display: inline-grid;
  place-items: center;
  border-radius: 6px;
  border: 1px solid var(--pu-line-strong);
  color: var(--pu-muted);
  font: 700 12px/1 ui-monospace, Consolas, monospace;
}

.su-find-r {
  position: absolute;
  inset-inline: 0;
  top: calc(100% + 6px);
  z-index: 30;
  margin: 0;
  padding: 6px;
  list-style: none;
  border-radius: 14px;
  border: 1px solid var(--pu-line-strong);
  background: var(--pu-surface);
  box-shadow: var(--pu-sh-2);
  max-height: 360px;
  overflow-y: auto;
}

.su-find-r button {
  appearance: none;
  width: 100%;
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  padding: 10px 10px;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: var(--pu-txt);
  font: inherit;
  text-align: start;
  cursor: pointer;
}

.su-find-r li[aria-selected="true"] button,
.su-find-r button:hover { background: var(--pu-red-wash); }

.su-find-r .su-ic { width: 18px; height: 18px; color: var(--pu-red-txt); }
.su-find-r span { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.su-find-r b { font-size: 13.5px; font-weight: 750; }
.su-find-r i { font-style: normal; font-size: 12px; color: var(--pu-muted); }
.su-find-none { padding: 12px; font-size: 13px; color: var(--pu-muted); }

/* ── THE IDENTITY STRIP ──────────────────────────────────────────────────────────────────────── */
.su-strip {
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) auto minmax(260px, 1fr);
  align-items: center;
  gap: 16px 24px;
  padding: 16px 20px;
  border-radius: 18px;
  border: 1px solid var(--pu-line);
  background:
    radial-gradient(600px 160px at 0% 0%, color-mix(in srgb, var(--pu-red) 12%, transparent), transparent 70%),
    var(--pu-surface);
  box-shadow: var(--pu-sh-1);
}

.su-strip[hidden] { display: none; }
.su-strip-id { display: flex; align-items: center; gap: 14px; min-width: 0; }

.su-strip-av {
  flex: 0 0 auto;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 22px;
  font-weight: 850;
  color: #fff;
  background: linear-gradient(140deg, #2a1418, #1a2133) center / cover no-repeat;
  border: 2px solid var(--pu-surface);
  box-shadow: 0 0 0 1px var(--pu-line-strong);
}

html[data-theme="light"] .su-strip-av { background-color: #fbe4e4; background-image: linear-gradient(140deg, #fbe4e4, #eef0f6); color: #7c1d1d; }
.su-strip-av.has { background-size: cover; }

.su-strip-t { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.su-strip-t b { font-size: 17px; font-weight: 850; overflow-wrap: anywhere; }
.su-strip-m { display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: 13px; color: var(--pu-muted); }
.su-strip-m a { color: var(--pu-red-txt); font-weight: 700; }
.su-strip-c { display: flex; flex-wrap: wrap; gap: 8px; }
.su-strip-r { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.su-strip-rk { font-size: 12px; font-weight: 800; color: var(--pu-muted); }
.su-strip-rk b { color: var(--pu-txt); font-size: 13px; }
.su-strip-rk i { font-style: normal; }

.su-strip-bar {
  display: block;
  height: 6px;
  border-radius: 999px;
  background: var(--pu-well);
  overflow: hidden;
}

.su-strip-bar i { display: block; height: 100%; border-radius: inherit; background: var(--pu-gold); }
.su-strip-miss { font-size: 12.5px; color: var(--pu-muted); }
.su-strip-miss a { color: var(--pu-red-txt); font-weight: 700; }
.su-strip-go { align-self: flex-start; font-size: 13px; font-weight: 750; color: var(--pu-red-txt); text-decoration: none; }
.su-strip-go:hover { text-decoration: underline; }

/* ── BODY: RAIL + PANEL ──────────────────────────────────────────────────────────────────────── */
.su-body {
  display: grid;
  grid-template-columns: 260px minmax(0, 1fr);
  gap: 20px;
  align-items: start;
}

.su-nav {
  position: sticky;
  top: 16px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 12px;
  border-radius: 18px;
  border: 1px solid var(--pu-line);
  background: var(--pu-surface);
  box-shadow: var(--pu-sh-1);
}

.su-nav-g { display: flex; flex-direction: column; gap: 2px; }

.su-nav-gl {
  padding: 4px 10px 6px;
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--pu-muted);
}

html[lang="ar"] .su-nav-gl,
html[lang="ku"] .su-nav-gl { letter-spacing: 0; text-transform: none; font-size: 12px; }

.su-nb {
  appearance: none;
  position: relative;
  display: flex;
  align-items: center;
  gap: 11px;
  min-height: 42px;
  padding: 0 12px;
  border: 0;
  border-radius: 11px;
  background: transparent;
  color: var(--pu-txt2);
  font: inherit;
  font-size: 14px;
  font-weight: 650;
  text-align: start;
  cursor: pointer;
}

.su-nb .su-ic { width: 19px; height: 19px; flex: 0 0 auto; color: var(--pu-muted); }
.su-nb:hover { background: var(--pu-raise); color: var(--pu-txt); }

.su-nb[aria-selected="true"] {
  background: var(--pu-red-wash);
  color: var(--pu-txt);
  font-weight: 800;
}

.su-nb[aria-selected="true"] .su-ic { color: var(--pu-red-txt); }

.su-nb[aria-selected="true"]::before {
  content: "";
  position: absolute;
  inset-inline-start: 0;
  top: 9px;
  bottom: 9px;
  width: 3px;
  border-radius: 3px;
  background: var(--pu-red);
}

.su-main { min-width: 0; }
.su-panel { display: flex; flex-direction: column; gap: 16px; outline: none; }
.su-panel[hidden] { display: none; }

/* the section's own header */
.su-sh { display: flex; align-items: flex-start; gap: 14px; padding: 2px 2px 4px; }

.su-sh-i {
  flex: 0 0 auto;
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border-radius: 13px;
  background: var(--pu-red-wash);
  color: var(--pu-red-txt);
}

.su-sh-i .su-ic { width: 22px; height: 22px; }
.su-sh-t h2 { margin: 0; font-size: 22px; font-weight: 850; line-height: 1.2; }
.su-sh-t p { margin: 4px 0 0; font-size: 13.5px; color: var(--pu-muted); line-height: 1.5; }

/* ── CARDS AND ROWS ──────────────────────────────────────────────────────────────────────────── */
.su-card {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 18px 20px 20px;
  border-radius: 16px;
  border: 1px solid var(--pu-line);
  background: var(--pu-surface);
  box-shadow: var(--pu-sh-1);
  transition: box-shadow .3s var(--pu-ease), border-color .3s var(--pu-ease);
}

.su-card-hd { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.su-card-h { margin: 0; font-size: 16px; font-weight: 800; }
.su-card-d { margin: -4px 0 0; font-size: 13px; line-height: 1.55; color: var(--pu-muted); }
.su-card-b { display: flex; flex-direction: column; gap: 10px; min-width: 0; }

.su-card-scope {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding: 0 10px;
  border-radius: 999px;
  font-size: 11.5px;
  font-weight: 750;
  color: var(--pu-muted);
  border: 1px dashed var(--pu-line-strong);
}

.su-card-scope.is-acct { color: var(--pu-txt2); border-style: solid; }

.su-card--danger { border-color: color-mix(in srgb, var(--pu-red) 35%, var(--pu-line)); }

/* a search landing lights its target once */
.su-found { border-color: var(--pu-red) !important; box-shadow: 0 0 0 4px var(--pu-red-wash), var(--pu-sh-1) !important; }

.su-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 14px;
  min-height: 56px;
  padding: 10px 2px;
  border-top: 1px solid var(--pu-line);
  border-radius: 4px;
}

.su-card-b > .su-row:first-child { border-top: 0; }
.su-row-t { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.su-row-l { font-size: 14px; font-weight: 700; }
.su-row-s, .su-row-s2 { font-size: 12.5px; line-height: 1.5; color: var(--pu-muted); }
.su-row-c { display: flex; align-items: center; gap: 8px; justify-content: flex-end; }
.su-v { font-size: 13.5px; font-weight: 650; overflow-wrap: anywhere; }

.su-saved {
  font-size: 11.5px;
  font-weight: 800;
  color: var(--pu-ok);
  opacity: 0;
  transition: opacity .2s ease;
}

.su-saved.on { opacity: 1; }

/* ── CONTROLS ────────────────────────────────────────────────────────────────────────────────── */
.su-btn {
  appearance: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 40px;
  padding: 0 16px;
  border-radius: 11px;
  border: 1px solid var(--pu-line-strong);
  background: var(--pu-raise);
  color: var(--pu-txt);
  font: inherit;
  font-size: 13.5px;
  font-weight: 700;
  white-space: nowrap;
  cursor: pointer;
  text-decoration: none;
  transition: background-color .15s var(--pu-ease), border-color .15s var(--pu-ease), color .15s var(--pu-ease);
}

.su-btn .su-ic { width: 17px; height: 17px; }
.su-btn:hover { border-color: color-mix(in srgb, var(--pu-red) 60%, var(--pu-line-strong)); background: color-mix(in srgb, var(--pu-red) 7%, var(--pu-raise)); }
.su-btn--ghost { background: transparent; }
.su-btn--pri { background: var(--pu-red-fill); border-color: var(--pu-red-fill); color: #fff; }
.su-btn--pri:hover { background: color-mix(in srgb, var(--pu-red-fill) 88%, #fff 12%); border-color: color-mix(in srgb, var(--pu-red-fill) 88%, #fff 12%); color: #fff; }
.su-btn--danger { color: var(--pu-red-txt); border-color: color-mix(in srgb, var(--pu-red) 50%, var(--pu-line-strong)); }
.su-btn--danger:not(.su-btn--ghost) { background: var(--pu-red-fill); border-color: var(--pu-red-fill); color: #fff; }
.su-btn--sm { min-height: 34px; padding: 0 12px; font-size: 12.5px; }
.su-btn:disabled { opacity: .45; cursor: not-allowed; }
.su-btn[aria-busy="true"] { cursor: progress; }

.su-acts { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }

.su-icbtn {
  appearance: none;
  display: inline-grid;
  place-items: center;
  width: 28px;
  height: 28px;
  margin-inline-start: 6px;
  vertical-align: middle;
  border-radius: 8px;
  border: 1px solid var(--pu-line);
  background: transparent;
  color: var(--pu-muted);
  cursor: pointer;
}

.su-icbtn .su-ic { width: 15px; height: 15px; }
.su-icbtn:hover { color: var(--pu-txt); border-color: var(--pu-line-strong); }

.su-sw {
  --w: 46px;
  position: relative;
  flex: none;
  width: var(--w);
  height: 26px;
  border-radius: 999px;
  border: 1px solid var(--pu-line-strong);
  background: var(--pu-raise);
  cursor: pointer;
  padding: 0;
  transition: background .18s ease, border-color .18s ease;
}

/* the CONTROL is 26 px tall; the TOUCH TARGET is 44 through this */
.su-sw::after { content: ""; position: absolute; inset-block: -9px; inset-inline: -6px; }

.su-sw i {
  position: absolute;
  top: 2px;
  inset-inline-start: 2px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--pu-muted);
  transition: inset-inline-start .18s ease, background .18s ease;
}

.su-sw.on { background: var(--pu-red-fill); border-color: var(--pu-red-fill); }
.su-sw.on i { inset-inline-start: calc(var(--w) - 24px); background: #fff; }
.su-sw:disabled { opacity: .5; cursor: default; }

.su-chip {
  display: inline-flex;
  align-items: center;
  min-height: 26px;
  padding: 0 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 750;
  color: var(--pu-txt2);
  border: 1px solid var(--pu-line-strong);
  white-space: nowrap;
}

.su-chip--ok { color: var(--pu-ok); border-color: color-mix(in srgb, var(--pu-ok) 40%, transparent); background: var(--pu-ok-bg); }
.su-chip--gold { color: var(--pu-gold-ink); border-color: var(--pu-gold-line); background: var(--pu-gold-bg); }

.su-scope { font-size: 11px; font-weight: 700; color: var(--pu-muted); }
.su-scope--acct { color: var(--pu-txt2); }

/* selects and inputs — the rows' own and the privacy rows' shared `.stsel` */
#v-settings .stsel,
.su-inp {
  min-height: 40px;
  padding: 0 12px;
  border-radius: 10px;
  border: 1px solid var(--pu-line-strong);
  background: var(--pu-page);
  color: var(--pu-txt);
  font: inherit;
  font-size: 13.5px;
  max-width: 100%;
}

#v-settings .stsel { padding-inline-end: 28px; }
#v-settings .stsel:focus,
.su-inp:focus { outline: none; border-color: var(--pu-red); box-shadow: 0 0 0 3px var(--pu-red-wash); }
.su-inp[aria-invalid="true"] { border-color: var(--pu-red); }

.su-inp--sm { width: 140px; text-transform: uppercase; }

.su-fld { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.su-lbl { font-size: 12.5px; font-weight: 750; color: var(--pu-txt2); }
.su-req { font-style: normal; color: var(--pu-red-txt); }
.su-cnt { float: inline-end; font-weight: 600; color: var(--pu-muted); font-size: 11.5px; }

.su-inp-w { position: relative; }
.su-inp-pre { position: absolute; inset-inline-start: 12px; top: 50%; transform: translateY(-50%); color: var(--pu-muted); font-weight: 700; pointer-events: none; }
html[dir="rtl"] .su-inp-pre { inset-inline-start: auto; left: 12px; }
.su-inp--pre { width: 100%; padding-inline-start: 28px; }
html[dir="rtl"] .su-inp--pre { padding-inline-start: 12px; padding-left: 28px; }

.su-ta { min-height: 96px; padding: 10px 12px; line-height: 1.6; resize: vertical; }

.su-hint { min-height: 18px; font-size: 12.5px; color: var(--pu-muted); }
.su-hint.ok { color: var(--pu-ok); }
.su-hint.no { color: var(--pu-red-txt); }

.su-note { margin: 0; font-size: 12.5px; line-height: 1.6; color: var(--pu-muted); }
.su-note--warn { color: var(--pu-warn); }
.su-note--live { color: var(--pu-txt2); }

.su-err { color: var(--pu-red-txt); font-size: 13px; font-weight: 700; }

/* ── ACCOUNT: THE ONE EDITOR + THE FACTS ─────────────────────────────────────────────────────── */
.su-id { display: flex; flex-direction: column; gap: 16px; }

.su-id-av { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }

.su-id-avp {
  width: 84px;
  height: 84px;
  flex: 0 0 auto;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 32px;
  font-weight: 850;
  color: #fff;
  background: linear-gradient(140deg, #2a1418, #1a2133) center / cover no-repeat;
  border: 3px solid var(--pu-surface);
  box-shadow: 0 0 0 1px var(--pu-line-strong);
}

html[data-theme="light"] .su-id-avp { background-image: linear-gradient(140deg, #fbe4e4, #eef0f6); color: #7c1d1d; }
.su-id-avp.has { background-size: cover; }
.su-id-avb { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.su-id-avb .su-note { flex-basis: 100%; }

/* the file input is hidden, but its FOCUS is not: the label carries it */
.su-file { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.su-file:focus-visible + label { outline: 2px solid var(--pu-red); outline-offset: 2px; }

.su-id-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }

.su-facts {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin: 0;
}

.su-facts > div {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 12px 14px;
  border-radius: 12px;
  background: var(--pu-well);
  border: 1px solid var(--pu-line);
  min-width: 0;
}

.su-facts dt { font-size: 12px; font-weight: 700; color: var(--pu-muted); }
.su-facts dd { margin: 0; font-size: 13.5px; font-weight: 700; overflow-wrap: anywhere; display: flex; align-items: center; flex-wrap: wrap; gap: 6px; }

/* THE UNSAVED-CHANGES BAR — sticks to the bottom of the viewport while the editor differs from what
   was loaded, and disappears when it does not (typing a letter and deleting it leaves nothing to save) */
.su-dirty {
  position: sticky;
  bottom: 14px;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px 18px;
  flex-wrap: wrap;
  padding: 12px 14px 12px 18px;
  border-radius: 14px;
  border: 1px solid color-mix(in srgb, var(--pu-warn) 45%, var(--pu-line-strong));
  background: color-mix(in srgb, var(--pu-surface) 92%, var(--pu-warn) 8%);
  box-shadow: var(--pu-sh-2);
  animation: su-rise .2s var(--pu-ease);
}

.su-dirty[hidden] { display: none; }
.su-dirty-t { display: inline-flex; align-items: center; gap: 10px; color: var(--pu-warn); font-size: 14px; }
.su-dirty-t .su-ic { width: 18px; height: 18px; }
.su-dirty-t b { color: var(--pu-txt); font-weight: 800; }
.su-dirty-a { display: flex; gap: 8px; }

@keyframes su-rise { from { transform: translateY(8px); opacity: 0; } to { transform: none; opacity: 1; } }

/* ── SECURITY ────────────────────────────────────────────────────────────────────────────────── */
.su-checkup { border-color: color-mix(in srgb, var(--pu-warn) 35%, var(--pu-line)); }
.su-checkup.is-good { border-color: color-mix(in srgb, var(--pu-ok) 35%, var(--pu-line)); }
.su-checkup-h { display: flex; align-items: center; gap: 16px; }

.su-meter {
  --p: 0;
  flex: 0 0 auto;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background:
    radial-gradient(closest-side, var(--pu-surface) 76%, transparent 78% 100%),
    conic-gradient(var(--pu-warn) calc(var(--p) * 1%), var(--pu-well) 0);
}

.su-checkup.is-good .su-meter { background: radial-gradient(closest-side, var(--pu-surface) 76%, transparent 78% 100%), conic-gradient(var(--pu-ok) calc(var(--p) * 1%), var(--pu-well) 0); }
.su-meter b { font-size: 15px; font-weight: 900; }

.su-cks { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }

.su-ck {
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border-radius: 12px;
  background: var(--pu-well);
  border: 1px solid var(--pu-line);
}

.su-ck-i { display: inline-grid; color: var(--pu-warn); }
.su-ck.is-ok .su-ck-i { color: var(--pu-ok); }
/* a state that could not be read is neither a warning nor a pass: it is drawn quiet and left unscored */
.su-ck.is-unknown .su-ck-i { color: var(--pu-muted); }
.su-ck-i .su-ic { width: 20px; height: 20px; }
.su-ck-t { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.su-ck-t b { font-size: 13.5px; font-weight: 750; }
.su-ck-t span { font-size: 12.5px; color: var(--pu-muted); line-height: 1.45; }

.su-pwbox[hidden] { display: none; }
.su-pw { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; padding-top: 6px; }
.su-pw > .setrow-s,
.su-pw > .su-acts,
.su-pw > .su-note { grid-column: 1 / -1; }
.su-pw .setinp { width: 100%; }

.su-mfa { display: flex; align-items: flex-start; gap: 14px; }

.su-mfa-i {
  flex: 0 0 auto;
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border-radius: 12px;
  background: var(--pu-well);
  color: var(--pu-muted);
  border: 1px solid var(--pu-line);
}

.su-mfa-i .su-ic { width: 22px; height: 22px; }
.su-mfa.is-on .su-mfa-i { color: var(--pu-ok); background: var(--pu-ok-bg); border-color: color-mix(in srgb, var(--pu-ok) 35%, transparent); }
.su-mfa-t { display: flex; flex-direction: column; gap: 4px; min-width: 0; font-size: 13px; color: var(--pu-muted); line-height: 1.55; }
.su-mfa-t > b { font-size: 15px; font-weight: 850; color: var(--pu-txt); }
.su-mfa.is-on .su-mfa-t > b { color: var(--pu-ok); }
.su-card.is-on { border-color: color-mix(in srgb, var(--pu-ok) 30%, var(--pu-line)); }

.su-sesss { display: flex; flex-direction: column; gap: 8px; }

.su-sess {
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  padding: 12px;
  border-radius: 12px;
  background: var(--pu-well);
  border: 1px solid var(--pu-line);
}

.su-sess.is-cur { border-color: color-mix(in srgb, var(--pu-ok) 35%, var(--pu-line)); }

.su-sess-i {
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  border-radius: 11px;
  background: var(--pu-surface);
  color: var(--pu-txt2);
  border: 1px solid var(--pu-line);
}

.su-sess-i .su-ic { width: 20px; height: 20px; }
.su-sess-t { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; min-width: 0; }
.su-sess-t > b { font-size: 14px; font-weight: 750; }
.su-sess-m { flex-basis: 100%; display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: 12px; color: var(--pu-muted); }

.su-log { list-style: none; margin: 0; padding: 0; position: relative; display: flex; flex-direction: column; }
.su-log::before { content: ""; position: absolute; inset-block: 10px; inset-inline-start: 5px; width: 2px; background: var(--pu-line); }

.su-log li {
  position: relative;
  display: grid;
  grid-template-columns: 12px minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  padding: 9px 0;
}

.su-log-d { width: 12px; height: 12px; border-radius: 50%; background: var(--pu-surface); border: 2px solid var(--pu-red); }
.su-log-t { font-size: 13.5px; font-weight: 650; overflow-wrap: anywhere; }
.su-log-t i { font-style: normal; font-weight: 500; color: var(--pu-muted); }
.su-log-t .su-log-by { font-weight: 700; color: var(--pu-gold-ink); }
.su-log time { font-size: 12px; color: var(--pu-muted); white-space: nowrap; }

/* ── THE TWO-STEP WIZARD (inside the shared modal) ───────────────────────────────────────────── */
.su-mfaw { display: flex; flex-direction: column; gap: 14px; min-width: min(520px, 86vw); color: var(--pu-txt, var(--txt)); }
.su-mfaw h3 { margin: 0; font-size: 19px; font-weight: 850; line-height: 1.3; }
.su-mfaw .su-inp { width: 100%; }

.su-steps { list-style: none; margin: 0 0 4px; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }

.su-steps li {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  border-radius: 10px;
  background: var(--card2);
  border: 1px solid var(--line);
  font-size: 12px;
  font-weight: 700;
  color: var(--muted);
}

.su-steps b {
  width: 22px;
  height: 22px;
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  border-radius: 50%;
  border: 1px solid var(--line);
  font-size: 11.5px;
}

.su-steps li.is-done { color: var(--txt2); }
.su-steps li.is-done b { background: #1eb37f; border-color: #1eb37f; color: #fff; }
.su-steps li.is-now { border-color: var(--accent); color: var(--txt); }
.su-steps li.is-now b { background: var(--accent); border-color: var(--accent); color: #fff; }

.su-mfa-scan { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 16px; align-items: center; }

.su-qr {
  width: 220px;
  height: 220px;
  padding: 12px;
  border-radius: 16px;
  background: #fff;
  display: grid;
  place-items: center;
  border: 1px solid var(--line);
}

.su-qr canvas { width: 196px; height: 196px; image-rendering: pixelated; }
.su-mfa-key { display: flex; flex-direction: column; gap: 8px; min-width: 0; align-items: flex-start; }

.su-mfa-key code {
  display: block;
  padding: 10px 12px;
  border-radius: 10px;
  background: var(--card2);
  border: 1px dashed var(--line);
  font-size: 14px;
  font-weight: 700;
  word-break: break-all;
  user-select: all;
}

.su-inp--code { font-size: 22px; letter-spacing: .3em; text-align: center; font-variant-numeric: tabular-nums; }

.su-codes {
  list-style: none;
  margin: 0;
  padding: 14px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px 16px;
  border-radius: 14px;
  background: var(--card2);
  border: 1px dashed var(--line);
}

.su-codes li { font-size: 15px; font-weight: 750; letter-spacing: .06em; text-align: center; padding: 4px 0; }

.su-ack { display: flex; align-items: center; gap: 10px; font-size: 13.5px; font-weight: 650; cursor: pointer; min-height: 44px; }
.su-ack input { width: 20px; height: 20px; accent-color: var(--accent); }

/* ── APPEARANCE: THE THEME AS TWO PREVIEWS ───────────────────────────────────────────────────── */
.su-themes { display: grid; grid-template-columns: repeat(2, minmax(0, 220px)); gap: 12px; }

.su-theme {
  appearance: none;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 10px;
  border-radius: 14px;
  border: 2px solid var(--pu-line);
  background: var(--pu-well);
  color: var(--pu-txt);
  font: inherit;
  cursor: pointer;
  text-align: start;
}

.su-theme.on { border-color: var(--pu-red); box-shadow: 0 0 0 3px var(--pu-red-wash); }

.su-theme-p {
  position: relative;
  display: grid;
  grid-template-columns: 26% 1fr;
  grid-template-rows: 14px 1fr 1fr;
  gap: 5px;
  height: 92px;
  padding: 8px;
  border-radius: 10px;
}

.su-theme--dark .su-theme-p { background: #070a12; }
.su-theme--light .su-theme-p { background: #eef0f4; border: 1px solid #e4e7ee; }
.su-theme-p i { border-radius: 4px; }
.su-theme-p i:nth-child(1) { grid-row: 1 / 4; }
.su-theme--dark .su-theme-p i { background: #0f1422; border: 1px solid #1e2536; }
.su-theme--light .su-theme-p i { background: #fff; border: 1px solid #e4e7ee; }
.su-theme-p b { position: absolute; inset-inline-end: 14px; top: 13px; width: 26px; height: 8px; border-radius: 4px; background: #e23b3b; }
.su-theme-l { font-size: 13.5px; font-weight: 800; }

.su-langs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }

.su-lang {
  appearance: none;
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 14px 16px;
  border-radius: 14px;
  border: 2px solid var(--pu-line);
  background: var(--pu-well);
  color: var(--pu-txt);
  font: inherit;
  cursor: pointer;
  text-align: start;
}

.su-lang b { font-size: 18px; font-weight: 850; }
.su-lang-s { font-size: 13px; color: var(--pu-txt2); }
.su-lang span[dir="ltr"]:last-child { font-size: 11.5px; font-weight: 750; color: var(--pu-muted); }
.su-lang.on { border-color: var(--pu-red); box-shadow: 0 0 0 3px var(--pu-red-wash); }

/* ── DATA ────────────────────────────────────────────────────────────────────────────────────── */
.su-del { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }

.su-del-l {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 12px 14px;
  border-radius: 12px;
  background: var(--pu-well);
  border: 1px solid var(--pu-line);
}

.su-del-l b { font-size: 24px; font-weight: 900; }
.su-del-l span { font-size: 12.5px; color: var(--pu-muted); }
.su-del-l.is-del b { color: var(--pu-red-txt); }
.su-del-l.is-anon b { color: var(--pu-warn); }
.su-del-l.is-ret b { color: var(--pu-txt2); }

.su-planwrap, .su-delwrap { display: flex; flex-direction: column; gap: 12px; min-width: min(560px, 86vw); }
.su-planwrap h3, .su-delwrap h3 { margin: 0; font-size: 19px; font-weight: 850; }
.su-delwrap p { margin: 0; color: var(--txt2); }
.su-delwrap .su-inp { width: 100%; }
.su-plan { display: flex; flex-direction: column; gap: 6px; max-height: 56vh; overflow-y: auto; }

.su-plan-r {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 4px 12px;
  padding: 10px 12px;
  border-radius: 10px;
  background: var(--card2);
  border: 1px solid var(--line);
}

.su-plan-n { font-size: 13px; font-weight: 750; overflow-wrap: anywhere; }
.su-plan-n i { font-style: normal; color: var(--muted); margin-inline-start: 6px; }
.su-plan-p { font-size: 11px; font-weight: 800; padding: 2px 8px; border-radius: 999px; border: 1px solid var(--line); align-self: start; }
.su-plan-p.is-delete { color: #ef5350; border-color: rgba(239, 83, 80, .4); }
.su-plan-p.is-anonymize { color: #d38d33; border-color: rgba(211, 141, 51, .4); }
.su-plan-p.is-retain { color: var(--txt2); }
.su-plan-w { grid-column: 1 / -1; font-size: 12px; color: var(--muted); }
html[data-theme="light"] .su-plan-p.is-delete { color: #c62828; }
html[data-theme="light"] .su-plan-p.is-anonymize { color: #8a5210; }

/* ── STATES ──────────────────────────────────────────────────────────────────────────────────── */
.su-state {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 16px;
  border-radius: 12px;
  border: 1px dashed var(--pu-line-strong);
  background: color-mix(in srgb, var(--pu-well) 60%, transparent);
  font-size: 13px;
  color: var(--pu-muted);
}

.su-state b { color: var(--pu-txt); font-size: 14px; }
.su-state--err { border-style: solid; border-color: color-mix(in srgb, var(--pu-warn) 45%, var(--pu-line)); background: var(--pu-warn-bg); }
.su-state--err b { color: var(--pu-warn); }
.su-state .su-btn { align-self: flex-start; }

.su-skel { display: flex; flex-direction: column; gap: 10px; padding: 6px 0; }

.su-skel-l {
  height: 14px;
  border-radius: 7px;
  background: linear-gradient(90deg, var(--pu-well) 0%, color-mix(in srgb, var(--pu-well) 55%, var(--pu-line)) 50%, var(--pu-well) 100%);
  background-size: 200% 100%;
  animation: pu-shimmer 1.3s linear infinite;
}

.su-skel-l:nth-child(odd) { width: 86%; }
.su-skel-l:nth-child(even) { width: 64%; }

/* the Privacy panel's rows come from the shared `_setRow` primitive — styled here for this page */
#v-settings .setrow {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 14px;
  min-height: 60px;
  padding: 10px 2px;
  border-bottom: 1px solid var(--pu-line);
}

#v-settings .setrow:last-child { border-bottom: 0; }
#v-settings .setrow-l { display: flex; align-items: center; gap: 10px; min-width: 0; }
#v-settings .setrow-ic:empty { display: none; }
#v-settings .setrow-tx { min-width: 0; }
#v-settings .setrow-t { font-size: 14px; font-weight: 700; }
#v-settings .setrow-s { font-size: 12.5px; line-height: 1.5; color: var(--pu-muted); margin-top: 3px; }
#v-settings .setrow-c { text-align: end; }

/* ════════════════════════════════════════════════════════════════════════════════════════════════
   ABOUT-THE-PROJECT MODAL — `window.openAboutProject` in settings.js emits these classes; their rules
   live here because the modal belongs to Settings (carried over when settings-intel.css was retired).
   ════════════════════════════════════════════════════════════════════════════════════════════════ */
.apwrap{max-width:100%}
.aphead{text-align:center;padding-bottom:14px;border-bottom:1px solid var(--line);margin-bottom:14px}
.aptitle{font-size:26px;font-weight:900;letter-spacing:.04em;color:var(--gold)}
.apsub{font-size:12.5px;color:var(--muted);margin-top:5px;line-height:1.6}
.apver{display:inline-block;margin-top:9px;font-size:10px;font-weight:800;letter-spacing:.09em;
  color:var(--muted);border:1px solid var(--line);border-radius:999px;padding:3px 10px}
.apchips{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-bottom:16px}
.apchip{background:var(--card2);border:1px solid var(--line);border-radius:11px;padding:10px 8px;text-align:center}
.apchip b{display:block;font-size:19px;font-weight:900;color:var(--txt);font-variant-numeric:tabular-nums}
.apchip span{display:block;font-size:9.5px;color:var(--muted);margin-top:2px;line-height:1.4}
.apsec{margin-bottom:15px}
.apsec-h{display:flex;align-items:center;gap:8px;font-size:12.5px;font-weight:900;letter-spacing:.05em;color:var(--txt);margin-bottom:8px}
.apsec-h .su-ic{width:18px;height:18px;color:var(--accent)}
.apsec-b{font-size:12.5px;line-height:1.75;color:var(--txt2)}
.aplist{margin:0;padding-inline-start:18px}
.aplist li{margin-bottom:9px}
.aplist li b{color:var(--txt)}
.apnote{background:rgba(245,158,11,.08);border:1px solid rgba(245,158,11,.25);border-radius:11px;
  padding:11px 13px;font-size:11.5px;line-height:1.7;color:var(--txt2);margin-bottom:14px}
.apfoot{display:flex;flex-wrap:wrap;gap:8px;justify-content:center}
@media(max-width:560px){
  .apchips{grid-template-columns:repeat(2,1fr)}
  .aptitle{font-size:22px}
}

/* ── RESPONSIVE ──────────────────────────────────────────────────────────────────────────────── */
@media (max-width: 1180px) {
  .su-head { grid-template-columns: minmax(0, 1fr) auto; }
  .su-find { grid-column: 1 / -1; grid-row: 2; }
  .su-strip { grid-template-columns: minmax(0, 1fr) auto; }
  .su-strip-r { grid-column: 1 / -1; }
}

@media (max-width: 900px) {
  .su-body { grid-template-columns: minmax(0, 1fr); }
  /* THE RAIL BECOMES A SCROLLING ROW OF CHIPS — the twelve tabs stay one tablist, in order */
  .su-nav {
    position: static;
    flex-direction: row;
    gap: 6px;
    padding: 8px;
    overflow-x: auto;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }

  .su-nav::-webkit-scrollbar { display: none; }
  .su-nav-g { flex-direction: row; gap: 6px; }
  .su-nav-gl { display: none; }
  .su-nb { white-space: nowrap; min-height: 44px; }
  .su-nb[aria-selected="true"]::before { inset-inline-start: 12px; right: auto; top: auto; bottom: 4px; width: calc(100% - 24px); height: 3px; }
  html[dir="rtl"] .su-nb[aria-selected="true"]::before { left: auto; }
}

@media (max-width: 760px) {
  .su-wrap { gap: 14px; }
  .su-head { grid-template-columns: minmax(0, 1fr); }
  .su-head-c { grid-row: 1; justify-self: end; }
  .su-head-t { grid-row: 2; }
  .su-find { grid-row: 3; }
  .su-strip { grid-template-columns: minmax(0, 1fr); padding: 14px; }
  .su-card { padding: 16px; }
  .su-row { grid-template-columns: minmax(0, 1fr); align-items: start; }
  .su-row-c { justify-content: flex-start; }
  .su-id-grid { grid-template-columns: minmax(0, 1fr); }
  .su-facts { grid-template-columns: minmax(0, 1fr); }
  .su-pw { grid-template-columns: minmax(0, 1fr); }
  .su-del { grid-template-columns: minmax(0, 1fr); }
  .su-langs { grid-template-columns: minmax(0, 1fr); }
  .su-themes { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .su-mfa-scan { grid-template-columns: minmax(0, 1fr); justify-items: center; }
  .su-steps { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .su-steps span { display: none; }
  .su-codes { grid-template-columns: minmax(0, 1fr); }
  .su-dirty { bottom: 8px; }
  .su-dirty-a { width: 100%; }
  .su-dirty-a .su-btn { flex: 1 1 0; }
  .su-sess { grid-template-columns: 40px minmax(0, 1fr); }
  .su-sess > .su-btn { grid-column: 1 / -1; }
}

/* ── TOUCH ───────────────────────────────────────────────────────────────────────────────────── */
@media (pointer: coarse), (max-width: 760px) {
  .su-btn, .su-btn--sm, label.su-btn, .su-hc, #v-settings .stsel, .su-inp { min-height: 44px; }
  .su-hc { min-width: 44px; }
  .su-icbtn { width: 44px; height: 44px; }
}

/* ── MOTION ──────────────────────────────────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .su-sw, .su-sw i, .su-btn, .su-card, .su-saved { transition: none !important; }
  .su-dirty, .su-skel-l { animation: none !important; }
}