/* Sign-ups: setup step 3, Settings → Sign-ups, Accept and start, the Vault's accounts and 2FA codes (public/signups.js) */
.su-m .su-lead { line-height: 1.55; }
.su-body { margin-top: 20px; }
.su-m .su-body { max-height: min(48vh, 440px); overflow: auto; overscroll-behavior: contain; margin-right: -8px; padding-right: 8px; }
.su-form { display: grid; gap: 20px; }
.su-f { display: grid; gap: 8px; }
.su-l { font-size: 12px; font-weight: 600; color: var(--ink-3); text-transform: none; letter-spacing: 0; }
.su-gm { display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 14px; border-radius: 12px; background: var(--raised); font-weight: 500; width: fit-content; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.su-sel { position: relative; display: flex; align-items: center; width: min(100%, 360px); }
.su-sel select { appearance: none; width: 100%; height: 40px; border-radius: 12px; border: 0; box-shadow: inset 0 0 0 1px var(--line-2); background: var(--panel); padding: 0 36px 0 14px; font: inherit; font-weight: 500; color: var(--ink); }
.su-sel svg { position: absolute; right: 12px; pointer-events: none; color: var(--ink-3); }
.su-warn { display: flex; align-items: center; gap: 8px; padding: 10px 14px; border-radius: 12px; background: var(--red-soft); color: #9b1c33; font-size: 13px; }
.su-opts { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.su-opt { position: relative; display: flex; gap: 12px; align-items: flex-start; text-align: left; padding: 16px; border-radius: 16px; border: 0; background: var(--panel); box-shadow: inset 0 0 0 1px var(--line-2); cursor: pointer; font: inherit; color: var(--ink); transition: box-shadow .15s, background .15s; }
.su-opt:hover { background: var(--hover); }
.su-opt.on { box-shadow: inset 0 0 0 2px var(--ink); background: var(--panel); }
.su-opt:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.su-dot { flex: none; width: 18px; height: 18px; margin-top: 1px; border-radius: 50%; box-shadow: inset 0 0 0 1.5px var(--line-2); transition: box-shadow .15s; }
.su-opt.on .su-dot { box-shadow: inset 0 0 0 5px var(--ink); }
.su-ot { display: grid; gap: 4px; min-width: 0; }
.su-ot b { font-size: 14px; font-weight: 600; line-height: 1.35; }
.su-ot small { color: var(--ink-3); font-size: 12.5px; line-height: 1.45; }
.su-rec { width: fit-content; margin-top: 4px; }
.su-pw { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; padding: 16px; border-radius: 16px; background: var(--raised); }
.su-pw label { display: grid; gap: 6px; font-size: 12px; font-weight: 600; color: var(--ink-3); }
.su-pw .input { height: 40px; font-weight: 400; color: var(--ink); }
.su-meter { grid-column: 1 / -1; display: flex; align-items: center; gap: 10px; min-height: 20px; font-size: 12.5px; color: var(--ink-3); }
.su-bars { display: inline-flex; gap: 4px; }
.su-bars i { width: 28px; height: 4px; border-radius: 4px; background: var(--line-2); transition: background .2s; }
.su-bars i.on.s1 { background: #e5484d; } .su-bars i.on.s2 { background: #f5a524; } .su-bars i.on.s3, .su-bars i.on.s4 { background: #30a46c; }
.su-mt.ok { color: var(--green-ink); }
.su-risk { grid-column: 1 / -1; display: flex; gap: 8px; align-items: flex-start; margin: 0; font-size: 12.5px; color: var(--ink-2); line-height: 1.45; }
.su-risk svg { flex: none; margin-top: 2px; color: var(--accent); }
.su-pick { font-size: 13px; }
.su-in-set { margin-top: 12px; }
.su-save-row { display: flex; justify-content: flex-end; margin-top: 12px; }
.su-acc-list { display: grid; gap: 8px; margin-top: 24px; }
.su-acc-list > b { font-size: 13px; }
.su-acc-row { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 12px; background: var(--raised); }
.su-acc-row .tn { display: grid; flex: 1; min-width: 0; } .su-acc-row small { color: var(--ink-3); }

/* plan card */
.su-accept { display: inline-flex; align-items: center; width: fit-content; height: 28px; margin-top: 6px; padding: 0 12px; border-radius: 99px; border: 0; background: var(--ink); color: var(--panel); font: inherit; font-size: 12px; font-weight: 600; cursor: pointer; transition: transform .15s, opacity .15s; }
.su-accept:hover { opacity: .88; } .su-accept:active { transform: scale(.97); }
.su-accept:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.su-accd { display: inline-flex; align-items: center; gap: 4px; width: fit-content; height: 24px; margin-top: 6px; padding: 0 10px; border-radius: 99px; background: var(--lime); color: var(--lime-ink); font-size: 11.5px; font-weight: 600; }
.su-cm { max-width: 520px; }
.su-cm-h { display: flex; gap: 14px; align-items: center; margin-bottom: 16px; }
.su-cm-h h3 { margin: 0; } .su-cm-h small { color: var(--ink-3); }
.su-cost { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 16px; }
.su-cost > div { display: grid; gap: 2px; padding: 12px 14px; border-radius: 14px; background: var(--raised); }
.su-cost small { font-size: 11.5px; color: var(--ink-3); } .su-cost b { font-family: var(--display); font-size: 20px; font-weight: 600; } .su-cost span { font-size: 12px; color: var(--ink-3); }
.su-what { list-style: none; margin: 0 0 16px; padding: 0; display: grid; gap: 10px; }
.su-what li { display: flex; gap: 10px; align-items: flex-start; font-size: 13.5px; line-height: 1.45; color: var(--ink-2); }
.su-li { flex: none; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 9px; background: var(--raised); color: var(--ink); }

/* Vault */
.su-v { display: grid; gap: 12px; margin-bottom: 24px; }
.su-vh { display: flex; align-items: center; gap: 8px; margin-top: 8px; }
.su-vh h3 { margin: 0; font-size: 15px; font-weight: 600; }
.su-vh > small { min-width: 22px; height: 20px; padding: 0 7px; border-radius: 99px; background: var(--raised); color: var(--ink-3); font-size: 11.5px; display: inline-grid; place-items: center; }
.su-empty { display: flex; align-items: center; gap: 10px; margin: 0; padding: 16px; border-radius: 16px; background: var(--panel); box-shadow: inset 0 0 0 1px var(--line); color: var(--ink-3); font-size: 13px; line-height: 1.45; }
.su-empty svg { flex: none; }
.su-note { display: flex; align-items: center; gap: 8px; margin: 0; font-size: 12px; color: var(--ink-3); }
.su-row .su-acts { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
.su-secret { display: inline-flex; align-items: center; gap: 4px; }
.su-secret .input { width: 220px; height: 32px; font-family: var(--mono); font-size: 12.5px; }
.su-link { border: 0; background: none; padding: 0; font: inherit; color: var(--ink-2); text-decoration: underline; text-underline-offset: 2px; cursor: pointer; }
.su-codebox { position: relative; display: inline-flex; align-items: center; gap: 10px; padding: 4px 12px 4px 4px; border-radius: 99px; background: var(--raised); }
.su-ring { width: 32px; height: 32px; transform: rotate(-90deg); }
.su-ring circle { fill: none; stroke-width: 3.5; }
.su-ring .t { stroke: var(--line-2); }
.su-ring .f { stroke: var(--ink); stroke-linecap: round; stroke-dasharray: 100; stroke-dashoffset: 0; transition: stroke-dashoffset 1s linear, stroke .2s; }
.su-low .su-ring .f { stroke: #e5484d; }
.su-code { font-family: var(--mono); font-size: 20px; font-weight: 600; letter-spacing: .06em; min-width: 92px; color: var(--ink); }
.su-left { font-size: 11.5px; color: var(--ink-3); min-width: 22px; }
.su-2m { max-width: 540px; }
.su-fl { display: grid; gap: 6px; margin-bottom: 12px; font-size: 12px; font-weight: 600; color: var(--ink-3); }
.su-fl small { font-weight: 400; }
.su-fl .input { font-weight: 400; color: var(--ink); }
.su-ta { height: auto; padding: 10px 12px; resize: vertical; font-family: var(--mono); font-size: 12.5px; }
.su-qr { margin: -4px 0 12px; cursor: pointer; width: fit-content; }
.su-chk { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; font-size: 13px; color: var(--ink-2); }
.su-honest { display: flex; gap: 10px; align-items: flex-start; padding: 12px 14px; border-radius: 14px; background: var(--blue-soft); margin-bottom: 16px; }
.su-honest p { margin: 0; font-size: 12.5px; line-height: 1.5; color: var(--ink-2); }
.su-honest svg { flex: none; margin-top: 2px; }
.su-recl { margin: 0 0 16px; padding: 14px; border-radius: 12px; background: var(--raised); font-size: 13px; line-height: 1.7; white-space: pre-wrap; user-select: all; }
@media (max-width: 760px) {
  .su-opts, .su-pw, .su-cost { grid-template-columns: 1fr; }
  .su-row { flex-wrap: wrap; } .su-row .su-acts { width: 100%; justify-content: flex-start; }
  .su-secret { flex: 1 1 100%; min-width: 0; } .su-secret .input { flex: 1; width: auto; min-width: 0; }
  .su-m .onb-f { flex-wrap: wrap; row-gap: 8px; } .su-m .su-pick { order: 3; width: 100%; justify-content: center; }
}
@media (prefers-reduced-motion: reduce) { .su-ring .f, .su-bars i, .su-opt, .su-accept { transition: none; } }
.su-chk input { accent-color: var(--ink); width: 16px; height: 16px; }
/* Plan card: the button stays one small line in the narrow service column (owner 2026-11-12: it wrapped onto two lines) */
.su-accept { white-space: nowrap; font-size: 12.5px; font-weight: 500; line-height: 1; height: 28px; padding: 0 12px; max-width: 100%; }
.su-accept:active { transform: none; }