/* ============================================================
   Afranga · Settings + notifications - five concepts (30.09.2026)
   Exploration page, not linked from the nav. Built on styles.css
   tokens and the .inv-* components from invest-concepts.css.
   New patterns (switch, settings rows, sub-nav, inbox item,
   checklist) are drawn in the same language. rem only, BEM.
   ============================================================ */

.main--set { padding-bottom: 6rem; }
.set { max-width: 68.5rem; margin: 0 auto; display: flex; flex-direction: column; gap: 1.5rem; }
.set > * { min-width: 0; }
/* concept C: 8 of the 12 grid columns (724), centered like Add money */
.set--c { max-width: 45.25rem; }

.set-header { display: flex; align-items: flex-end; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.set-header__title { font: var(--display-s); letter-spacing: -0.019rem; }
.set-header__sub { font: var(--body-m); color: var(--inv-warm); }

/* ---------- card + rows ---------- */

.set-card { display: flex; flex-direction: column; background: var(--white); border-radius: 1rem; box-shadow: var(--shadow-card); padding: 0.5rem 1.5rem; }
.set-card--pad { padding: 1.5rem; gap: 1.25rem; }
.set-card__head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1rem 0 0.5rem; }
.set-card--pad .set-card__head { padding: 0; }
.set-card__title { font: var(--inv-h3); }
.set-card__desc { font: var(--body-s); color: var(--inv-warm); margin-top: 0.25rem; }
.set-card__foot { display: flex; align-items: center; gap: 1rem; padding: 1rem 0; border-top: 0.0625rem solid var(--border); }

.set-row { display: grid; grid-template-columns: 13rem minmax(0, 1fr) auto; align-items: center; gap: 0.5rem 1.5rem; padding: 1rem 0; border-bottom: 0.0625rem solid var(--border); min-height: 3.75rem; }
.set-row:last-child { border-bottom: 0; }
.set-row__label { font: var(--body-m); color: var(--inv-warm); display: flex; flex-direction: column; gap: 0.125rem; }
.set-row__label small { font: var(--body-s); color: var(--text-muted); }
.set-row__value { font: var(--value); color: var(--text-primary); min-width: 0; overflow-wrap: anywhere; display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; }
.set-row__value--muted { font: var(--body-m); color: var(--text-muted); }
.set-row__action { display: flex; align-items: center; gap: 1rem; justify-self: end; }
.set-row__lock { display: inline-flex; align-items: center; gap: 0.375rem; font: var(--body-s); color: var(--text-muted); }
.set-row__lock svg { width: 0.875rem; height: 0.875rem; }
.set-row--edit { align-items: start; }
.set-row__editor { display: flex; flex-direction: column; gap: 0.75rem; max-width: 28rem; }

.set-btn-link { font: var(--label-m); color: var(--text-primary); text-decoration: underline; text-underline-offset: 0.1875rem; white-space: nowrap; }
.set-btn-link:hover { color: var(--coral); }
.set-btn-link--danger { color: var(--coral-dark); }
.set-btn-link:disabled { color: var(--text-muted); text-decoration: none; cursor: default; }

/* list row with icon + title + description + chevron (Wise-style) */
.set-item { display: flex; align-items: center; gap: 1rem; width: 100%; padding: 1rem 0; border-bottom: 0.0625rem solid var(--border); text-align: left; }
.set-item:last-child { border-bottom: 0; }
button.set-item:hover .set-item__title, a.set-item:hover .set-item__title { color: var(--coral); }
.set-item__icon { flex: none; width: 2.5rem; height: 2.5rem; border-radius: 50%; display: grid; place-items: center; background: var(--bg-canvas); color: var(--text-primary); }
.set-item__icon svg { width: 1.25rem; height: 1.25rem; }
.set-item__body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 0.125rem; }
.set-item__title { font: var(--label-m); color: var(--text-primary); transition: color var(--t-fast) var(--ease); }
.set-item__desc { font: var(--body-s); color: var(--inv-warm); }
.set-item__side { flex: none; display: flex; align-items: center; gap: 0.75rem; font: var(--body-s); color: var(--inv-warm); }
.set-item__chev { width: 1.25rem; height: 1.25rem; color: var(--inv-warm); }

/* ---------- status dot + word ---------- */

.set-status { display: inline-flex; align-items: center; gap: 0.375rem; font: var(--label-s); color: var(--text-primary); white-space: nowrap; }
.set-status::before { content: ''; width: 0.5rem; height: 0.5rem; border-radius: 50%; background: var(--text-muted); }
.set-status--on::before { background: var(--inv-success); }
.set-status--off::before { background: var(--coral); }
.set-status--wait::before { background: #f5b25c; }

/* ---------- switch (new pattern, DS language: charcoal on, track off) ---------- */

.set-switch { position: relative; flex: none; width: 2.5rem; height: 1.5rem; border-radius: 62rem; background: var(--track); border: 0.0625rem solid var(--border); transition: background var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease); }
.set-switch::after { content: ''; position: absolute; top: 0.125rem; left: 0.125rem; width: 1.125rem; height: 1.125rem; border-radius: 50%; background: var(--white); box-shadow: 0 0.0625rem 0.1875rem rgba(44, 44, 44, 0.2); transition: transform var(--t-fast) var(--ease); }
.set-switch.is-on { background: var(--charcoal); border-color: var(--charcoal); }
.set-switch.is-on::after { transform: translateX(1rem); }
.set-switch:disabled { opacity: 0.45; cursor: not-allowed; }
.set-switch:focus-visible, .set-check:focus-visible { outline: 0.125rem solid var(--coral); outline-offset: 0.125rem; }

.set-check { flex: none; width: 1.25rem; height: 1.25rem; display: inline-flex; align-items: center; justify-content: center; border: 0.09375rem solid var(--border); border-radius: 0.25rem; background: var(--white); color: var(--white); }
.set-check.is-on { background: var(--charcoal); border-color: var(--charcoal); }
.set-check svg { width: 0.75rem; height: 0.75rem; }
.set-check:disabled { cursor: not-allowed; }
.set-check.is-locked { background: var(--text-muted); border-color: var(--text-muted); }
.set-dash { font: var(--body-m); color: var(--text-muted); }

/* ---------- notification preference matrix ---------- */

.set-matrix { display: flex; flex-direction: column; }
.set-matrix__head, .set-matrix__row { display: grid; grid-template-columns: minmax(0, 1fr) 6.5rem 6.5rem; align-items: center; gap: 1rem; }
.set-matrix__head { padding: 1rem 0 0.75rem; border-bottom: 0.0625rem solid var(--border); }
.set-matrix__ch { font: var(--overline); letter-spacing: 0.0625rem; text-transform: uppercase; color: var(--inv-warm); text-align: center; display: flex; flex-direction: column; align-items: center; gap: 0.25rem; }
.set-matrix__group { padding: 1.25rem 0 0.25rem; font: var(--overline); letter-spacing: 0.0625rem; text-transform: uppercase; color: var(--inv-warm); }
.set-matrix__row { padding: 0.875rem 0; border-bottom: 0.0625rem solid var(--border); }
.set-matrix__cell { display: flex; justify-content: center; }
.set-matrix__event { display: flex; flex-direction: column; gap: 0.125rem; min-width: 0; }
.set-matrix__name { font: var(--label-m); display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; }
.set-matrix__desc { font: var(--body-s); color: var(--inv-warm); }

/* grouped toggles (Wise-style): topic header, channel rows */
.set-topic { display: flex; flex-direction: column; padding: 1rem 0; border-bottom: 0.0625rem solid var(--border); }
.set-topic:last-child { border-bottom: 0; }
.set-topic__title { font: var(--label-m); }
.set-topic__desc { font: var(--body-s); color: var(--inv-warm); margin-bottom: 0.25rem; }
.set-topic__line { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 0.625rem 0; font: var(--body-m); }
.set-topic__line span { display: inline-flex; align-items: center; gap: 0.625rem; }
.set-topic__line svg { width: 1.125rem; height: 1.125rem; color: var(--inv-warm); }
/* 05.10: email only, one switch per topic on the right */
.set-topic--row { flex-direction: row; align-items: center; gap: 1.5rem; }
.set-topic__text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 0.25rem; }
.set-topic--row .set-topic__desc { margin-bottom: 0; }
.set-topic--row > .set-switch, .set-topic--row > .set-row__lock { flex: none; }

/* ---------- inbox ---------- */

.set-chips { display: flex; gap: 0.5rem; flex-wrap: wrap; align-items: center; }
.set-chip { display: inline-flex; align-items: center; gap: 0.375rem; height: 2rem; padding: 0 0.875rem; border-radius: 62rem; border: 0.0625rem solid var(--border); background: var(--white); font: var(--label-s); color: var(--text-primary); transition: background var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease); }
.set-chip:hover { border-color: var(--text-muted); }
.set-chip.is-on { background: var(--charcoal); border-color: var(--charcoal); color: var(--white); }
.set-chip__n { font: var(--caption-s); opacity: 0.75; }

.set-note { display: flex; gap: 1rem; padding: 1.25rem 0; border-bottom: 0.0625rem solid var(--border); position: relative; }
.set-note:last-child { border-bottom: 0; }
.set-note__icon { flex: none; width: 2.5rem; height: 2.5rem; border-radius: 50%; display: grid; place-items: center; background: var(--bg-canvas); position: relative; }
.set-note__icon svg { width: 1.125rem; height: 1.125rem; }
.set-note.is-unread .set-note__icon::after { content: ''; position: absolute; top: 0; right: 0; width: 0.625rem; height: 0.625rem; border-radius: 50%; background: var(--coral); border: 0.125rem solid var(--white); }
.set-note__body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 0.25rem; }
.set-note__top { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; }
.set-note__title { font: var(--body-m); color: var(--text-primary); }
.set-note.is-unread .set-note__title { font: var(--label-m); }
.set-note__time { flex: none; font: var(--body-s); color: var(--inv-warm); white-space: nowrap; }
.set-note__text { font: var(--body-m); color: var(--text-primary); }
.set-note__cat { font: var(--body-s); color: var(--inv-warm); }
.set-note__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 1.25rem; margin-top: 0.375rem; }
.set-note__actions .set-btn-link { font: var(--label-s); }
.set-empty { padding: 2.5rem 1rem; text-align: center; font: var(--body-m); color: var(--inv-warm); display: flex; flex-direction: column; gap: 0.5rem; align-items: center; }

/* bell popover (all concepts) */
.set-pop { position: fixed; z-index: 66; left: calc(var(--inv-sidebar) - 1rem); bottom: 5.5rem; width: 24rem; max-height: min(34rem, calc(100vh - 7rem)); display: flex; flex-direction: column; background: var(--white); border: 0.0625rem solid var(--border); border-radius: 1rem; box-shadow: var(--shadow-pop); animation: inv-reveal 0.2s var(--ease); }
.set-pop__head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1rem 1.25rem 0.5rem; }
.set-pop__title { font: var(--label-m); display: inline-flex; align-items: center; gap: 0.5rem; }
.set-pop__list { overflow-y: auto; padding: 0 1.25rem; }
.set-pop__list .set-note { padding: 0.875rem 0; gap: 0.75rem; }
.set-pop__list .set-note__icon { width: 2rem; height: 2rem; }
.set-pop__list .set-note__text { font: var(--body-s); }
.set-pop__foot { display: flex; justify-content: space-between; gap: 1rem; padding: 0.875rem 1.25rem; border-top: 0.0625rem solid var(--border); }
.set-pop__scrim { position: fixed; inset: 0; z-index: 65; }
.sidebar__bell { position: relative; }
.sidebar__bell-count { position: absolute; top: -0.25rem; right: -0.375rem; min-width: 1rem; height: 1rem; padding: 0 0.25rem; border-radius: 62rem; background: var(--coral); color: var(--white); font: 600 0.625rem/1rem 'Montserrat', sans-serif; text-align: center; }

/* ---------- concept A: sub-nav ---------- */

.set-split { display: grid; grid-template-columns: 13.5rem minmax(0, 1fr); gap: 2rem; align-items: start; }
.set-subnav { position: sticky; top: 1.5rem; display: flex; flex-direction: column; gap: 0.125rem; }
.set-subnav__item { display: flex; align-items: center; gap: 0.75rem; padding: 0.625rem 0.75rem; border-radius: 0.5rem; font: var(--nav-item); color: var(--text-primary); text-align: left; transition: background var(--t-fast) var(--ease); }
.set-subnav__item svg { width: 1.125rem; height: 1.125rem; color: var(--inv-warm); }
.set-subnav__item:hover { background: var(--white); }
.set-subnav__item.is-on { background: var(--white); box-shadow: var(--shadow-card); font-weight: 600; }
.set-subnav__item.is-on svg { color: var(--coral); }
.set-subnav__badge { margin-left: auto; }
.set-col { display: flex; flex-direction: column; gap: 1.5rem; min-width: 0; }
.set-section-title { font: var(--inv-h2); letter-spacing: -0.0125rem; }

.set-tabs { display: flex; gap: 1.5rem; border-bottom: 0.0625rem solid var(--border); }
.set-tabs__tab { padding-bottom: 0.75rem; margin-bottom: -0.0625rem; font: var(--label-m); color: var(--inv-warm); border-bottom: 0.125rem solid transparent; display: inline-flex; align-items: center; gap: 0.5rem; }
.set-tabs__tab:hover { color: var(--text-primary); }
.set-tabs__tab.is-on { color: var(--text-primary); border-color: var(--charcoal); }
/* phones: tabs keep scrolling sideways as a fallback; 05.10 four tabs with a 1rem gap fit 375 (Figma mobile) */
@media (max-width: 48rem) {
  .set-tabs { overflow-x: auto; scrollbar-width: none; gap: 1rem; }
  .set-topic--row { gap: 1rem; }
  .set-more { padding-top: 1.25rem; }
  .set-more > button { width: 100%; }
  .set-tabs::-webkit-scrollbar { display: none; }
  .set-tabs__tab { flex: none; white-space: nowrap; }
}

/* ---------- concept B: hub ---------- */

.set-hub { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.25rem; }
.set-tile { display: flex; flex-direction: column; gap: 0.75rem; padding: 1.5rem; background: var(--white); border-radius: 1rem; box-shadow: var(--shadow-card); text-align: left; transition: box-shadow var(--t-base) var(--ease); min-height: 11rem; }
.set-tile:hover { box-shadow: var(--shadow-card-hover); }
.set-tile__icon { width: 2.5rem; height: 2.5rem; border-radius: 50%; display: grid; place-items: center; background: var(--bg-canvas); }
.set-tile__icon svg { width: 1.25rem; height: 1.25rem; }
.set-tile__title { font: var(--title-l); }
.set-tile__desc { font: var(--body-s); color: var(--inv-warm); flex: 1; }
.set-tile__status { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; padding-top: 0.75rem; border-top: 0.0625rem solid var(--border); }

/* short segments that hug the step names, not the full width */
.set-stepper { display: flex; gap: 0.5rem; }
.set-stepper__step { flex: 0 0 6rem; display: flex; flex-direction: column; gap: 0.5rem; font: var(--label-s); color: var(--inv-warm); }
.set-stepper__step::before { content: ''; height: 0.25rem; border-radius: 62rem; background: var(--track); }
.set-stepper__step.is-on { color: var(--text-primary); }
.set-stepper__step.is-on::before, .set-stepper__step.is-done::before { background: var(--charcoal); }

/* ---------- concept D: account health ---------- */

.set-health { display: grid; grid-template-columns: 16rem minmax(0, 1fr); gap: 2rem; padding: 1.75rem; background: var(--white); border-radius: 1rem; box-shadow: var(--shadow-card); }
.set-health__score { display: flex; flex-direction: column; gap: 0.75rem; }
.set-health__big { font: var(--number-l); }
.set-health__bar { height: 0.375rem; border-radius: 62rem; background: var(--track); overflow: hidden; }
.set-health__bar span { display: block; height: 100%; background: var(--inv-success); transition: width var(--t-slow) var(--ease); }
.set-health__text { font: var(--body-s); color: var(--inv-warm); }
.set-health__list { display: flex; flex-direction: column; }
.set-todo { display: grid; grid-template-columns: 1.5rem minmax(0, 1fr) auto; align-items: center; gap: 0.25rem 0.875rem; padding: 0.875rem 0; border-bottom: 0.0625rem solid var(--border); }
.set-todo:last-child { border-bottom: 0; }
.set-todo__mark { width: 1.5rem; height: 1.5rem; border-radius: 50%; display: grid; place-items: center; border: 0.09375rem solid var(--border); color: var(--white); }
.set-todo__mark svg { width: 0.875rem; height: 0.875rem; }
.set-todo.is-done .set-todo__mark { background: var(--inv-success); border-color: var(--inv-success); }
.set-todo__title { font: var(--label-m); }
.set-todo__desc { font: var(--body-s); color: var(--inv-warm); }
.set-todo__open { grid-column: 2 / -1; padding-top: 0.75rem; }

.set-anchors { position: sticky; top: 0; z-index: 5; display: flex; gap: 0.25rem; padding: 0.75rem 0; background: var(--bg-canvas); overflow-x: auto; scrollbar-width: none; }
.set-anchors__a { padding: 0.375rem 0.875rem; border-radius: 62rem; font: var(--label-s); color: var(--inv-warm); white-space: nowrap; }
.set-anchors__a:hover { color: var(--text-primary); background: var(--white); }
.set-anchors__a.is-on { background: var(--white); color: var(--text-primary); box-shadow: var(--shadow-card); }
.set-block { scroll-margin-top: 4rem; display: flex; flex-direction: column; gap: 1rem; }
.set-block__title { font: var(--inv-h3); }

/* ---------- concept E: settings drawer ---------- */

.set-drawer .inv-drawer__panel { width: 32rem; }
.set-drawer__who { display: flex; align-items: center; gap: 0.875rem; padding-bottom: 1rem; border-bottom: 0.0625rem solid var(--border); }
.set-drawer__avatar { width: 3rem; height: 3rem; border-radius: 50%; display: grid; place-items: center; background: var(--peach); font: var(--label-m); }
.set-drawer__name { font: var(--title-l); }
.set-drawer__id { font: var(--body-s); color: var(--inv-warm); }

/* ---------- forms inside modals / drawers ---------- */

.set-form { display: flex; flex-direction: column; gap: 1rem; }
.set-input { display: flex; flex-direction: column; gap: 0.375rem; }
.set-input__label { font: var(--label-m); }
/* DS Input 9:62: 40 high, radius 4, 12 padding, Caption helper */
.set-input__field { display: flex; align-items: center; gap: 0.5rem; height: 2.5rem; padding: 0 0.75rem; background: var(--white); border: 0.0625rem solid var(--border); border-radius: 0.25rem; transition: border-color var(--t-fast) var(--ease); }
.set-input__field:focus-within { border: 0.125rem solid var(--charcoal); padding: 0 0.6875rem; }
.set-input__field.is-error { border: 0.125rem solid var(--coral); padding: 0 0.6875rem; }
/* DS Input, State=Disabled (9:52): bg-disabled, border-disabled, text-disabled */
.set-input.is-disabled .set-input__label { color: var(--text-muted); }
.set-input.is-disabled .set-input__field { background: var(--surface-subtle); border-color: var(--track); }
.set-input.is-disabled .set-input__control { color: var(--text-muted); cursor: not-allowed; }
.set-input__control { flex: 1; min-width: 0; height: 100%; border: 0; outline: 0; background: none; font: var(--body-m); color: var(--text-primary); }
.set-input__control::placeholder { color: var(--text-muted); }
select.set-input__control { cursor: pointer; appearance: none; }
.set-input__icon { width: 1rem; height: 1rem; color: var(--inv-warm); flex: none; }
.set-input__hint { font: var(--body-s); letter-spacing: 0.0125rem; color: var(--text-secondary); }
.set-input__error { font: var(--body-s); color: var(--coral-dark); }
.set-inline-fields { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0.75rem; }

.set-code { display: flex; gap: 0.5rem; align-items: center; }
.set-code__box { width: 2.75rem; height: 3.25rem; text-align: center; font: var(--inv-h3); border: 0.0625rem solid var(--border); border-radius: 0.5rem; background: var(--white); outline: 0; }
.set-code__box:focus { border: 0.125rem solid var(--charcoal); }
.set-code__gap { width: 0.5rem; height: 0.125rem; background: var(--border); }

.set-rules { display: grid; grid-template-columns: 1fr 1fr; gap: 0.375rem 1rem; }
.set-rule { display: flex; align-items: center; gap: 0.5rem; font: var(--body-s); color: var(--inv-warm); }
.set-rule::before { content: ''; flex: none; width: 0.875rem; height: 0.875rem; border-radius: 50%; border: 0.09375rem solid var(--border); }
.set-rule.is-ok { color: var(--text-primary); }
.set-rule.is-ok::before { border-color: var(--inv-success); background: var(--inv-success) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M3 6.2l2 2 4-4.4' fill='none' stroke='white' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 0.75rem no-repeat; }

.set-qr { display: flex; gap: 1.25rem; align-items: center; padding: 1.25rem; background: var(--bg-canvas); border-radius: 0.75rem; }
.set-qr svg { width: 8rem; height: 8rem; flex: none; background: var(--white); padding: 0.5rem; border-radius: 0.5rem; }
.set-qr__side { display: flex; flex-direction: column; gap: 0.5rem; min-width: 0; }
.set-key { display: flex; align-items: center; gap: 0.5rem; padding: 0.5rem 0.75rem; background: var(--white); border: 0.0625rem solid var(--border); border-radius: 0.5rem; font: 600 0.8125rem/1.125rem ui-monospace, 'SF Mono', Menlo, monospace; letter-spacing: 0.04em; overflow-wrap: anywhere; }
.set-key button { margin-left: auto; flex: none; }
.set-backup { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.5rem 1rem; padding: 1rem 1.25rem; background: var(--bg-canvas); border-radius: 0.75rem; font: 600 0.875rem/1.25rem ui-monospace, 'SF Mono', Menlo, monospace; }

.set-callout { display: flex; gap: 0.75rem; padding: 1rem; border-radius: 0.75rem; background: var(--bg-light); border: 0.0625rem solid var(--inv-banner-border); font: var(--body-s); color: var(--text-primary); }
.set-callout svg { width: 1.125rem; height: 1.125rem; flex: none; color: var(--text-primary); margin-top: 0.0625rem; }
.set-callout--ok { background: var(--green-bg); border-color: #c1ecd8; }
.set-callout--warn { background: #fff2f1; border-color: #ffd8d7; }
.set-callout b { font-weight: 600; }

/* file drop: icon on top, centred. No DS component yet, built from DS tokens */
.set-upload { display: flex; flex-direction: column; align-items: center; gap: 0.5rem; width: 100%; padding: 1.5rem 1.25rem; background: var(--white); border: 0.0625rem dashed var(--border); border-radius: 0.5rem; text-align: center; transition: border-color var(--t-fast) var(--ease), background var(--t-fast) var(--ease); }
.set-upload:hover { border-color: var(--charcoal); background: var(--bg-light); }
.set-upload.is-error { border: 0.125rem dashed var(--coral); }
.set-upload__icon { width: 2.5rem; height: 2.5rem; border-radius: 50%; display: grid; place-items: center; background: var(--bg-canvas); color: var(--text-primary); }
.set-upload__icon svg { width: 1.5rem; height: 1.5rem; }
.set-upload__text { font: var(--body-m); color: var(--text-primary); }
.set-upload__text b { font-weight: 600; text-decoration: underline; text-underline-offset: 0.1875rem; }
.set-upload__hint { max-width: 26rem; font: var(--body-s); letter-spacing: 0.0125rem; color: var(--text-secondary); }
.set-upload--done { flex-direction: row; justify-content: space-between; padding: 0.75rem 1rem; border-style: solid; background: var(--bg-light); text-align: left; }
.set-upload--done:hover { border-color: var(--border); }
.set-upload__file { display: flex; align-items: center; gap: 0.75rem; min-width: 0; font: var(--label-m); color: var(--text-primary); overflow-wrap: anywhere; }
.set-upload__file svg { width: 1.5rem; height: 1.5rem; flex: none; }
.set-upload__file small { display: block; font: var(--body-s); color: var(--text-secondary); }

/* pencil edit action (concept C rows) */
.set-icon-btn { width: 2rem; height: 2rem; display: grid; place-items: center; border-radius: 0.5rem; color: var(--text-primary); transition: background var(--t-fast) var(--ease); }
.set-icon-btn:hover { background: var(--surface-subtle); }
.set-icon-btn:focus-visible { outline: 0.125rem solid var(--charcoal); outline-offset: 0.125rem; }
.set-icon-btn svg { width: 1.125rem; height: 1.125rem; }

/* DS Select in a settings row */
.set-select { min-width: 12rem; justify-content: space-between; }
.inv-btn-sm--outline:disabled { border-color: var(--track); background: var(--surface-subtle); color: var(--text-muted); cursor: not-allowed; }

.set-bank { display: flex; align-items: center; gap: 1rem; padding: 1rem 0; border-bottom: 0.0625rem solid var(--border); }
.set-bank:last-child { border-bottom: 0; }
.set-bank__logo { flex: none; width: 2.5rem; height: 2.5rem; border-radius: 0.5rem; display: grid; place-items: center; background: var(--bg-canvas); font: var(--label-s); }
.set-bank__body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 0.125rem; }
.set-bank__name { font: var(--label-m); display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; }
.set-bank__iban { font: var(--body-s); color: var(--inv-warm); font-variant-numeric: tabular-nums; }
.set-bank__actions { display: flex; align-items: center; gap: 1.25rem; }

.set-doc { display: flex; align-items: center; gap: 1rem; padding: 1rem 0; border-bottom: 0.0625rem solid var(--border); }
.set-doc:last-child { border-bottom: 0; }
/* tax statements: "Show 10 more" under the list */
.set-more { display: flex; justify-content: center; padding-top: 1.5rem; }
.set-doc__icon { flex: none; width: 2.5rem; height: 2.5rem; border-radius: 0.5rem; display: grid; place-items: center; background: var(--bg-canvas); color: var(--text-primary); }
.set-doc__icon svg { width: 1.25rem; height: 1.25rem; }
.set-doc__body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 0.25rem; }
.set-doc__name { font: var(--label-m); }
.set-doc__meta { font: var(--body-s); color: var(--inv-warm); }

.set-grid-2 { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 1.25rem; align-items: start; }

.set-toast { position: fixed; left: 50%; bottom: 2rem; z-index: 90; transform: translateX(-50%); display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.75rem 1.25rem; background: var(--charcoal); color: var(--white); border-radius: 0.75rem; font: var(--body-m); box-shadow: var(--shadow-pop); max-width: calc(100vw - 2rem); animation: inv-reveal 0.2s var(--ease); }
.set-toast svg { width: 1rem; height: 1rem; color: var(--green-muted); flex: none; }

/* ---------- annotation pins (prototype layer) ---------- */

.set-pin { display: inline-grid; place-items: center; flex: none; width: 1.25rem; height: 1.25rem; border-radius: 50%; background: var(--coral); color: var(--white); font: 600 0.6875rem/1 'Montserrat', sans-serif; vertical-align: middle; margin: 0 0.25rem; box-shadow: 0 0 0 0.1875rem rgba(248, 109, 104, 0.2); }
.set-pin--abs { position: absolute; top: -0.5rem; right: -0.5rem; margin: 0; z-index: 2; }
.no-notes .set-pin { display: none; }
.set-rel { position: relative; }

/* ---------- demo panel (prototype only, not part of the design) ---------- */

.set-demo { position: fixed; right: 1rem; top: 1rem; z-index: 80; width: 19rem; max-height: calc(100vh - 2rem); overflow-y: auto; display: flex; flex-direction: column; gap: 1rem; padding: 1rem; background: var(--charcoal); color: var(--white); border-radius: 1rem; box-shadow: var(--shadow-pop); }
.set-demo--left { right: auto; left: 1rem; }
.set-demo--closed { width: auto; flex-direction: row; align-items: center; gap: 0.5rem; padding: 0.625rem 1rem; font: var(--label-s); }
.set-demo__head { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; }
.set-demo__title { font: var(--label-m); }
.set-demo .inv-icon-btn { color: var(--white); }
.set-demo__label { font: var(--caption-s); color: rgba(255, 255, 255, 0.7); margin-bottom: 0.375rem; }
.set-demo__thesis { font: var(--body-s); color: rgba(255, 255, 255, 0.85); }
.set-seg { display: flex; padding: 0.125rem; background: rgba(255, 255, 255, 0.1); border-radius: 0.5rem; }
.set-seg__opt { flex: 1; padding: 0.375rem 0.25rem; border-radius: 0.375rem; font: var(--label-s); color: rgba(255, 255, 255, 0.8); }
.set-seg__opt.is-on { background: var(--white); color: var(--charcoal); }
.set-demo__screens { display: flex; flex-direction: column; gap: 0.125rem; }
.set-demo__screen { display: flex; gap: 0.5rem; padding: 0.375rem 0.5rem; border-radius: 0.375rem; font: var(--body-s); color: rgba(255, 255, 255, 0.85); text-align: left; }
.set-demo__screen b { font-weight: 600; color: var(--peach); min-width: 1.75rem; }
.set-demo__screen:hover { background: rgba(255, 255, 255, 0.08); }
.set-demo__screen.is-on { background: rgba(255, 255, 255, 0.14); color: var(--white); }
.set-demo__notes { display: flex; flex-direction: column; gap: 0.75rem; }
.set-demo__note { display: grid; grid-template-columns: 1.25rem minmax(0, 1fr); gap: 0.5rem; font: var(--body-s); color: rgba(255, 255, 255, 0.9); }
.set-demo__note .set-pin { margin: 0; box-shadow: none; }
.set-demo__type { display: block; font: var(--overline); letter-spacing: 0.05rem; text-transform: uppercase; color: var(--peach); margin-bottom: 0.125rem; }
.set-demo__type--dev { color: #ffb4b1; }
.set-demo__toggle { display: flex; align-items: center; justify-content: space-between; font: var(--body-s); }
.set-demo .set-switch { background: rgba(255, 255, 255, 0.2); border-color: transparent; }
.set-demo .set-switch.is-on { background: var(--coral); }
.set-demo__rule { height: 0.0625rem; background: rgba(255, 255, 255, 0.12); }

@media (min-width: 75.0625rem) { .has-demo .main--set { padding-right: 22rem; } }

/* ---------- narrow screens ---------- */

@media (max-width: 75rem) {
  .set-demo { top: auto; bottom: 1rem; max-height: 60vh; }
  .set-hub { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 68rem) {
  .set-pop { left: auto; right: 1rem; top: 4.5rem; bottom: auto; }
  .set-split { grid-template-columns: minmax(0, 1fr); gap: 1rem; }
  .set-subnav { position: static; flex-direction: row; overflow-x: auto; scrollbar-width: none; }
  .set-subnav__item { flex: none; }
  .set-health { grid-template-columns: minmax(0, 1fr); gap: 1.25rem; }
}
@media (max-width: 48rem) {
  .set-card { padding: 0.25rem 1rem; }
  .set-card--pad { padding: 1.25rem 1rem; }
  .set-row { grid-template-columns: minmax(0, 1fr) auto; }
  .set-row__label { grid-column: 1 / -1; }
  .set-hub, .set-grid-2 { grid-template-columns: minmax(0, 1fr); }
  .set-matrix__head, .set-matrix__row { grid-template-columns: minmax(0, 1fr) 3.5rem 3.5rem; gap: 0.5rem; }
  .set-rules { grid-template-columns: minmax(0, 1fr); }
  .set-qr { flex-direction: column; align-items: flex-start; }
  .set-pop { left: 1rem; right: 1rem; width: auto; }
  .set-demo { left: 1rem; right: 1rem; width: auto; }
  .set-note__top { flex-direction: column; gap: 0.125rem; }
  .set-bank { flex-wrap: wrap; }
  .set-bank__actions { width: 100%; padding-left: 3.5rem; }
}
@media (prefers-reduced-motion: reduce) {
  .set-switch, .set-switch::after, .set-health__bar span { transition: none; }
  .set-pop, .set-toast { animation: none; }
}

/* ---------- round 2 (01.10): 2FA method choice, stacked documents, tax form ---------- */

/* DS Radio (10:15) as option rows: charcoal ring + dot when selected */
.set-methods { display: flex; flex-direction: column; gap: 0.5rem; }
.set-method { display: flex; align-items: flex-start; gap: 0.75rem; width: 100%; padding: 0.875rem 1rem; background: var(--white); border: 0.0625rem solid var(--border); border-radius: 0.5rem; text-align: left; transition: border-color var(--t-fast) var(--ease); }
.set-method:hover { border-color: var(--text-muted); }
.set-method.is-on { border: 0.125rem solid var(--charcoal); padding: 0.8125rem 0.9375rem; }
.set-method__radio { flex: none; width: 1.25rem; height: 1.25rem; margin-top: 0.0625rem; border-radius: 50%; border: 0.09375rem solid var(--border); background: var(--white); }
.set-method.is-on .set-method__radio { border: 0.375rem solid var(--charcoal); }
.set-method__body { display: flex; flex-direction: column; gap: 0.125rem; min-width: 0; }
.set-method__title { display: flex; align-items: center; gap: 0.5rem; font: var(--label-m); color: var(--text-primary); }
.set-method__desc { font: var(--body-s); color: var(--text-secondary); }

.set-stack { display: flex; flex-direction: column; gap: 1.25rem; }
.set-doc--tax { flex-wrap: wrap; }
.set-doc__form { display: flex; align-items: flex-end; gap: 0.5rem; flex-wrap: wrap; }
.set-doc__form .set-select { min-width: 0; }
/* 04.10: labelled selects in the tax row, badge + download side by side (Figma 6.1/6.2) */
.set-doc__field { display: flex; flex-direction: column; gap: 0.5rem; }
.set-doc__side { display: inline-flex; align-items: center; gap: 0.75rem; flex: none; }
@media (max-width: 48rem) {
  .set-doc__form { width: 100%; padding-left: 3.5rem; }
}
.set-input .inv-select-wrap, .set-input .set-select { width: 100%; }
.set-select__ph { color: var(--text-muted); }

/* ---------- Figma sync 01.10 (section "Settings", in progress) ----------
   Cards like card-review: border-default, no shadow, 32 padding, H2 title.
   Text actions = DS Button Ghost-muted (no underline). Steps = the Add money
   inline stepper. Code boxes 44x48, radius 4. Warning = DS Banner Warning. */
.set-card { border: 0.0625rem solid var(--border); box-shadow: none; padding: 1.25rem 2rem; }
.set-card--pad { padding: 2rem; }
.set-card__head { padding: 0.75rem 0 0.5rem; align-items: flex-start; }
.set-card__title { font: 600 1.5rem/2rem 'Montserrat', sans-serif; }
.set-row { grid-template-columns: 15rem minmax(0, 1fr) auto; padding: 0.75rem 0; min-height: 0; }
.set-btn-link { text-decoration: none; }
.set-btn-link:hover { color: var(--text-secondary); }
.set-btn-link--danger { color: var(--text-primary); }
.set-input__hint .set-btn-link { font: var(--label-s); }
.set-code__box { height: 3rem; border-radius: 0.25rem; }
.set-callout--warn { background: var(--peach); border-color: var(--peach); }
.set-method { padding: 1.25rem; border-radius: 0.75rem; align-items: flex-start; }
.set-method.is-on { border: 0.0625rem solid var(--charcoal); background: var(--bg-light); padding: 1.25rem; }
.set-method__icon { margin-left: auto; flex: none; color: var(--text-primary); }
.set-method__icon svg { width: 1.5rem; height: 1.5rem; }
.set-method__title { font: 600 0.9375rem/1.25rem 'Montserrat', sans-serif; }
.set-method__desc { font: var(--body-m); }
/* DS inline stepper (Add money / SaveSmart) */
.set-steps { display: flex; align-items: center; gap: 0.75rem; flex-wrap: wrap; }
.set-steps__step { display: flex; align-items: center; gap: 0.5rem; }
.set-steps__dot { display: grid; place-items: center; width: 1.75rem; height: 1.75rem; border-radius: 50%; border: 0.09375rem solid var(--border); color: var(--text-muted); font: var(--label-s); }
.set-steps__dot svg { width: 1rem; height: 1rem; }
.set-steps__step.is-on .set-steps__dot { background: var(--charcoal); border-color: var(--charcoal); color: var(--white); }
.set-steps__step.is-done .set-steps__dot { background: var(--green-muted); border-color: var(--green-muted); color: var(--white); }
.set-steps__label { font: var(--label-s); color: var(--text-muted); }
.set-steps__step.is-on .set-steps__label { color: var(--text-primary); }
.set-steps__step.is-done .set-steps__label { color: var(--green); }
.set-steps__bar { width: 3.3125rem; height: 0.125rem; background: var(--border); }
.set-steps__bar.is-done { background: var(--green-muted); }
.set-steps--long .set-steps__bar { width: 1.5rem; }
@media (max-width: 48rem) {
  .set-card { padding: 0.5rem 1rem; }
  .set-card--pad { padding: 1.25rem 1rem; }
}
.set-hint { display: flex; flex-direction: column; align-items: flex-start; gap: 0.25rem; }
.set-btn-link--s { font: var(--label-s); }
/* phone = KYC step 5 field: country code select (110) + number, gap 8 */
.set-phone { display: flex; gap: 0.5rem; align-items: flex-start; }
.set-phone > .inv-select-wrap .set-select { min-width: 6.875rem; }
.set-phone > .set-input { flex: 1; min-width: 0; }
.set-phone > .inv-select-wrap { flex: none; width: auto; }
.set-phone > .inv-select-wrap .set-select { width: 6.875rem; min-width: 0; }
/* 01.10: lock notes = Body M secondary; select widths as in Figma, chevron at the end */
.set-row__lock { font: var(--body-m); color: var(--inv-warm); }
.set-row__lock svg { width: 1.25rem; height: 1.25rem; }
.set-select-wrap--lang .set-select { width: 15rem; }
.set-doc__form .set-select-wrap--taxyear .set-select { width: 7.5rem; }
.set-doc__form .set-select-wrap--taxmonth .set-select { width: 10rem; }
.inv-btn-md--tertiary:disabled { background: var(--surface-subtle); border-color: var(--track); color: var(--text-muted); cursor: not-allowed; }
.set { gap: 1.25rem; }

/* Clickable rows (C): the whole row opens the edit, the pencil lights up with it */
.set-row--click { position: relative; cursor: pointer; isolation: isolate; }
.set-row--click::before { content: ''; position: absolute; inset: 0 -0.75rem; z-index: -1; border-radius: 0.5rem; background: transparent; transition: background var(--t-fast) var(--ease); }
.set-row--click:hover::before { background: var(--bg-canvas); }
.set-row--click:hover .set-icon-btn { background: var(--surface-subtle); }