/* ZFSRecv site styles — built on the Industry set in styles.css */
:root{ --mono:"Space Mono",ui-monospace,SFMono-Regular,Menlo,monospace; --font-heading:"Open Sans",system-ui,sans-serif; --font-heading-weight:700; --font-body:"Open Sans",system-ui,sans-serif; --term-bg:#141517; --term-fg:#d7d8da; --wrap:1120px; }
body{ font-size:16px; }
a{ color:var(--color-accent); text-decoration:none; }
a:hover{ color:var(--color-accent-700); }
.wrap{ max-width:var(--wrap); margin:0 auto; padding:0 var(--space-6); }
.mono{ font-family:var(--mono); }
.kicker{ font-family:var(--mono); font-size:11px; letter-spacing:0.18em; text-transform:uppercase; color:var(--color-accent); }
.eyebrow{ font-family:var(--mono); font-size:11px; letter-spacing:0.14em; text-transform:uppercase; color:color-mix(in srgb,var(--color-text) 55%,transparent); }

/* nav */
.site-nav{ border-bottom:1px solid var(--color-divider); position:sticky; top:0; background:color-mix(in srgb,var(--color-bg) 88%,transparent); backdrop-filter:blur(8px); z-index:20; }
.site-nav .wrap{ display:flex; align-items:center; gap:10px; height:60px; }
.brand{ display:flex; color:var(--color-text); align-items:center; gap:8px; font-family:var(--font-heading); font-weight:600; font-size:24px; letter-spacing:0.01em; margin-right:auto; flex:none; }
.brand .mark{ display:block; height:22px; width:auto; flex:none; }
.brand .rv{ color:var(--color-accent); }
.brand:hover{ color:var(--color-text); }
.site-nav nav a[aria-current]{ color:var(--color-accent); }
.site-nav nav{ display:flex; gap:28px; flex:1 1 auto; min-width:0; margin-left:24px; overflow-x:auto; scrollbar-width:none; -ms-overflow-style:none; }
.site-nav nav::-webkit-scrollbar{ display:none; }
.site-nav nav a{ font-family:var(--mono); font-size:14px; letter-spacing:0.04em; color:color-mix(in srgb,var(--color-text) 78%,transparent); text-transform:lowercase; white-space:nowrap; }
.site-nav nav a:hover{ color:var(--color-accent); }
.nav-cta{ display:flex; align-items:center; gap:8px; flex:none; white-space:nowrap; }
.site-nav .btn{ padding:9px 14px; }
.nav-signin{ font-size:12.5px; }
.site-nav.is-signed-in .nav-cta .btn-primary{ display:none; }
.nav-panel{ display:contents; }
.nav-toggle{ display:none; align-items:center; justify-content:center; width:40px; height:40px; padding:0; background:transparent; border:1px solid var(--color-divider); color:var(--color-text); cursor:pointer; flex:none; }
.nav-toggle:hover{ background:color-mix(in srgb,var(--color-text) 7%,transparent); }
.nav-toggle svg{ width:20px; height:20px; fill:none; stroke:currentColor; stroke-width:1.5; stroke-linecap:round; stroke-linejoin:round; }
.nav-toggle .icon-close, .site-nav.is-open .nav-toggle .icon-menu{ display:none; }
.site-nav.is-open .nav-toggle .icon-close{ display:block; }
@media(max-width:989px){
  .nav-toggle{ display:inline-flex; }
  .nav-panel{ display:none; position:absolute; top:100%; left:0; right:0; flex-direction:column; gap:var(--space-4); padding:var(--space-4) var(--space-6) var(--space-6); background:var(--color-bg); border-bottom:1px solid var(--color-divider); box-shadow:var(--shadow-lg); }
  .site-nav.is-open .nav-panel{ display:flex; }
  .site-nav .nav-panel nav{ display:flex; flex-direction:column; gap:0; margin:0; overflow:visible; }
  .site-nav .nav-panel nav a{ padding:var(--space-3) 0; border-bottom:1px solid color-mix(in srgb,var(--color-text) 8%,transparent); }
  .nav-panel .nav-cta{ flex-direction:column-reverse; align-items:stretch; gap:var(--space-3); }
  .nav-panel .nav-cta .btn{ justify-content:center; padding:11px 18px; }
  .nav-panel .nav-signin{ font-size:14px; text-align:center; padding:var(--space-2) 0; }
}

/* terminal */
.term{ background:var(--term-bg); color:var(--term-fg); font-family:var(--mono); font-size:13.5px; line-height:1.7; border-radius:0; box-shadow:var(--shadow-lg); overflow:hidden; }
.term-bar{ display:flex; align-items:center; gap:8px; padding:9px 13px; border-bottom:1px solid rgba(255,255,255,0.08); }
.term-bar .dot{ width:9px; height:9px; border-radius:50%; background:rgba(255,255,255,0.18); }
.term-bar .title{ margin-left:6px; font-size:11px; letter-spacing:0.08em; color:rgba(255,255,255,0.42); text-transform:uppercase; }
.term-body{ padding:16px 18px; overflow-x:auto; }
.term-body pre{ margin:0; white-space:pre; font:inherit; }
.term .p{ color:var(--color-accent-300); }
.term .c{ color:#fff; font-weight:500; }
.term .f{ color:#9aa0a6; }
.term .s{ color:#8fb98f; }
.term .o{ color:#6f7378; }
.term .k{ color:#c9a26a; }
.term .comment{ color:#63676c; }

/* hero */
.hero{ padding:var(--space-8) 0 calc(var(--space-8) * 1.6); }
.hero-grid{ display:grid; grid-template-columns:1.05fr 1fr; gap:var(--space-8); align-items:center; }
.hero h1{ font-size:clamp(40px,5.2vw,66px); line-height:0.98; letter-spacing:-0.02em; margin:var(--space-3) 0 var(--space-4); }
.hero .lede{ font-size:19px; line-height:1.5; max-width:46ch; color:color-mix(in srgb,var(--color-text) 82%,transparent); }
.hero .lede b{ font-weight:700; color:var(--color-text); }
.cta-row{ display:flex; gap:var(--space-3); margin-top:var(--space-6); flex-wrap:wrap; }
.btn{ font-family:var(--mono); font-size:13px; letter-spacing:0.02em; padding:11px 18px; }
@media(max-width:900px){ .hero-grid{ grid-template-columns:1fr; gap:var(--space-6); } }

/* stat strip */
.stats{ border-top:1px solid var(--color-divider); border-bottom:1px solid var(--color-divider); }
.stats .wrap{ display:grid; grid-template-columns:repeat(4,1fr); }
.stat{ padding:var(--space-4) var(--space-4); border-left:1px solid var(--color-divider); }
.stat:first-child{ border-left:0; }
.stat .n{ font-family:var(--font-heading); font-weight:600; font-size:30px; line-height:1; letter-spacing:-0.01em; }
.stat .l{ font-family:var(--mono); font-size:11px; letter-spacing:0.06em; text-transform:uppercase; color:color-mix(in srgb,var(--color-text) 55%,transparent); margin-top:6px; }
@media(max-width:760px){ .stats .wrap{ grid-template-columns:1fr 1fr; } .stat:nth-child(3){ border-left:0; } }

/* section scaffold */
section.band{ padding:calc(var(--space-8) * 1.7) 0; }
.sec-head{ max-width:100ch; margin-bottom:var(--space-8); }
.sec-head.wide{ max-width:none; }
.sec-head h2{ font-size:clamp(30px,3.4vw,44px); letter-spacing:-0.015em; margin:var(--space-2) 0 var(--space-3); }
.sec-head p{ font-size:17px; color:color-mix(in srgb,var(--color-text) 72%,transparent); max-width:52ch; }
.sec-head.wide p{ max-width:none; }

/* blueprint helper */
.bp{ position:relative; border:1px solid var(--color-divider); }
.bp .corner{ position:absolute; width:11px; height:11px; color:color-mix(in srgb,var(--color-text) 45%,transparent); }
.bp .corner::before,.bp .corner::after{ content:""; position:absolute; background:currentColor; }
.bp .corner::before{ left:5px; top:0; width:1px; height:100%; }
.bp .corner::after{ top:5px; left:0; width:100%; height:1px; }
.bp .corner.tl{ top:-6px; left:-6px; } .bp .corner.tr{ top:-6px; right:-6px; }
.bp .corner.bl{ bottom:-6px; left:-6px; } .bp .corner.br{ bottom:-6px; right:-6px; }

/* how it works */
.steps{ display:grid; grid-template-columns:repeat(3,1fr); gap:var(--space-6); }
.step{ padding:var(--space-6); background:transparent; }
.step .idx{ font-family:var(--mono); font-size:12px; color:var(--color-accent); letter-spacing:0.1em; }
.step h3{ font-size:22px; margin:var(--space-3) 0 var(--space-2); }
.step p{ font-size:14px; color:color-mix(in srgb,var(--color-text) 72%,transparent); margin-bottom:var(--space-3); }
.step .cmd{ font-family:var(--mono); font-size:12.5px; background:var(--term-bg); color:var(--term-fg); padding:11px 13px; overflow-x:auto; white-space:nowrap; }
.step .cmd .p{ color:var(--color-accent-300); } .step .cmd .c{ color:#fff; } .step .cmd .f{ color:#9aa0a6; } .step .cmd .s{ color:#8fb98f; }
@media(max-width:820px){ .steps{ grid-template-columns:1fr; } }

/* features */
.feat-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--color-divider); border:1px solid var(--color-divider); }
.feat{ background:var(--color-bg); padding:var(--space-6); display:flex; flex-direction:column; gap:var(--space-2); min-height:190px; }
.feat .tag{ font-family:var(--mono); font-size:11px; color:var(--color-accent); letter-spacing:0.04em; }
.feat h3{ font-size:20px; margin:2px 0 0; }
.feat p{ font-size:14px; line-height:1.55; color:color-mix(in srgb,var(--color-text) 72%,transparent); margin:0; }
.feat code{ font-family:var(--mono); background:var(--color-surface); padding:1px 5px; font-size:12.5px; }
@media(max-width:820px){ .feat-grid{ grid-template-columns:1fr 1fr; } }
@media(max-width:520px){ .feat-grid{ grid-template-columns:1fr; } }

/* config split */
.split{ display:grid; grid-template-columns:1fr 1.15fr; gap:var(--space-8); align-items:center; }
.split ul{ list-style:none; padding:0; margin:var(--space-4) 0 0; display:grid; gap:var(--space-3); }
.split li{ font-size:15px; padding-left:22px; position:relative; color:color-mix(in srgb,var(--color-text) 82%,transparent); }
.split li::before{ content:"+"; position:absolute; left:0; top:0; font-family:var(--mono); color:var(--color-accent); }
.split code{ font-family:var(--mono); }
.split h2{ font-size:clamp(28px,3.2vw,40px); letter-spacing:-0.015em; margin:var(--space-2) 0 var(--space-3); }
.split .lede{ font-size:16px; color:color-mix(in srgb,var(--color-text) 72%,transparent); max-width:44ch; }
@media(max-width:900px){ .split{ grid-template-columns:1fr; gap:var(--space-6); } }

/* compat table */
.compat{ width:100%; border-collapse:collapse; font-size:14px; }
.compat th{ text-align:left; font-family:var(--mono); font-size:11px; letter-spacing:0.08em; text-transform:uppercase; color:color-mix(in srgb,var(--color-text) 60%,transparent); padding:var(--space-3); border-bottom:1px solid var(--color-divider); }
.compat th .lc{ text-transform:none; }
.compat td{ padding:var(--space-3); border-bottom:1px solid color-mix(in srgb,var(--color-text) 9%,transparent); }
.compat td.mono{ font-family:var(--mono); font-size:13px; }
.compat tbody tr:hover{ background:color-mix(in srgb,var(--color-text) 4%,transparent); }
.ok{ color:var(--color-accent); font-family:var(--mono); }

/* pricing */
.tiers{ display:grid; grid-template-columns:repeat(3,1fr); gap:var(--space-6); }
.tier{ padding:var(--space-6); display:flex; flex-direction:column; gap:var(--space-3); background:transparent; }
.tier.feature{ background:var(--color-neutral-900); color:var(--color-neutral-100); border-color:var(--color-neutral-900); }
.tier .name{ font-family:var(--mono); font-size:12px; letter-spacing:0.1em; text-transform:uppercase; color:var(--color-accent); }
.tier.feature .name{ color:var(--color-accent-300); }
.tier .price{ font-family:var(--font-heading); font-weight:600; font-size:44px; line-height:1; letter-spacing:-0.02em; }
.tier .price small{ font-family:var(--mono); font-size:13px; font-weight:400; letter-spacing:0; opacity:0.6; }
.tier .desc{ font-size:13.5px; color:color-mix(in srgb,var(--color-text) 68%,transparent); }
.tier.feature .desc{ color:rgba(255,255,255,0.72); }
.tier ul{ list-style:none; padding:0; margin:0; display:grid; gap:9px; font-size:13.5px; flex:1; }
.tier li{ padding-left:20px; position:relative; }
.tier li::before{ content:"›"; position:absolute; left:0; color:var(--color-accent); font-family:var(--mono); }
.tier.feature li::before{ color:var(--color-accent-300); }
.tier .btn{ margin-top:var(--space-2); }
.tier.feature .btn-secondary{ border-color:rgba(255,255,255,0.35); color:#fff; }
@media(max-width:820px){ .tiers{ grid-template-columns:1fr; } }

/* footer */
.site-foot{ border-top:1px solid var(--color-divider); padding:var(--space-8) 0; margin-top:var(--space-8); }
.foot-grid{ display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:var(--space-6); }
.foot-grid h4{ font-family:var(--mono); font-size:11px; letter-spacing:0.1em; text-transform:uppercase; color:color-mix(in srgb,var(--color-text) 50%,transparent); margin:0 0 var(--space-3); }
.foot-grid a{ display:block; font-size:14px; color:color-mix(in srgb,var(--color-text) 78%,transparent); margin-bottom:8px; }
.foot-grid a:hover{ color:var(--color-accent); }
.foot-lede{ font-size:13.5px; color:color-mix(in srgb,var(--color-text) 60%,transparent); max-width:34ch; margin-top:var(--space-3); }
.foot-note{ font-family:var(--mono); font-size:12px; color:color-mix(in srgb,var(--color-text) 50%,transparent); margin-top:var(--space-6); display:flex; justify-content:space-between; gap:var(--space-4); flex-wrap:wrap; }
@media(max-width:760px){ .foot-grid{ grid-template-columns:1fr 1fr; } }

/* signup */
.signup-card{ max-width:480px; margin:0 auto; padding:var(--space-8); }
.signup-form .field + .field{ margin-top:var(--space-4); }
.signup-form .seg{ margin-bottom:var(--space-4); }
.signup-form .btn{ margin-top:var(--space-6); }
#payment-element, #address-element{ margin-top:var(--space-2); }
.form-error{ color:var(--color-accent-700); font-size:13.5px; margin-top:var(--space-4); min-height:1em; }

/* account — a dense, filterable pool table; add-pool and the one-time API key are dialogs
   so they stay in view no matter how long the list gets */
.sr-only{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
.account .form-error:empty{ display:none; }
.pools-bar{ display:flex; align-items:center; justify-content:space-between; gap:var(--space-4); flex-wrap:wrap; margin-bottom:var(--space-6); }
.pools-title{ display:flex; align-items:baseline; gap:var(--space-3); }
.pools-title h2{ margin:0; font-size:26px; letter-spacing:-0.012em; }
.pools-count{ font-size:12px; letter-spacing:0.06em; color:color-mix(in srgb,var(--color-text) 55%,transparent); }
.pools-tools{ display:flex; align-items:center; gap:var(--space-3); flex-wrap:wrap; }
.pools-filter{ width:260px; min-height:38px; font-family:var(--mono); font-size:13px; }
.pools-tools .btn{ min-height:38px; }

.pool-table-wrap{ background:transparent; }
.pool-table{ width:100%; border-collapse:collapse; font-size:14px; }
.pool-table th{ position:sticky; top:61px; z-index:2; background:var(--color-bg); text-align:left; font-family:var(--mono); font-weight:400; font-size:11px; letter-spacing:0.08em; text-transform:uppercase; color:color-mix(in srgb,var(--color-text) 58%,transparent); padding:var(--space-3) var(--space-4); box-shadow:inset 0 -1px 0 var(--color-divider); white-space:nowrap; }
.pool-table td{ padding:var(--space-3) var(--space-4); border-bottom:1px solid color-mix(in srgb,var(--color-text) 8%,transparent); vertical-align:middle; }
.pool-table tbody tr:last-child td{ border-bottom:0; }
.pool-table tbody tr[data-id]{ cursor:pointer; }
.pool-table tbody tr[data-id]:hover{ background:color-mix(in srgb,var(--color-text) 4%,transparent); }
.pool-table .num{ text-align:right; }
.pool-table .act{ width:1%; white-space:nowrap; text-align:right; }
.pool-table .p-name{ font-family:var(--mono); font-weight:700; color:var(--color-text); }
.pool-table .p-mono{ font-family:var(--mono); font-size:12.5px; color:color-mix(in srgb,var(--color-text) 68%,transparent); white-space:nowrap; }
.pool-table .p-guid{ max-width:16ch; overflow:hidden; text-overflow:ellipsis; }
.pool-table .p-usage{ font-family:var(--mono); font-size:13px; color:var(--color-accent-700); white-space:nowrap; }
.pool-table .p-usage.na{ color:color-mix(in srgb,var(--color-text) 45%,transparent); }
.pool-table .p-mono.na{ color:color-mix(in srgb,var(--color-text) 40%,transparent); }
.pool-table tr.is-new td{ background:color-mix(in srgb,var(--color-accent) 10%,transparent); }
.pool-table .pool-row-loading td{ color:color-mix(in srgb,var(--color-text) 55%,transparent); font-size:13px; padding:var(--space-6) var(--space-4); }
.row-actions{ display:inline-flex; gap:var(--space-1); }
.row-actions .btn{ font-size:12px; padding:5px 9px; }
.btn-destroy{ color:color-mix(in srgb,var(--color-text) 62%,transparent); }
.btn-destroy:hover{ color:var(--color-text); background:color-mix(in srgb,var(--color-text) 7%,transparent); }
.pools-empty{ display:flex; flex-direction:column; align-items:center; gap:var(--space-3); padding:calc(var(--space-8) * 1.4) var(--space-4); margin:0; text-align:center; font-size:14px; color:color-mix(in srgb,var(--color-text) 62%,transparent); }
.pools-empty p{ margin:0; }
.pools-empty[hidden]{ display:none; }
@media(max-width:760px){
  .pools-tools{ width:100%; }
  .pools-filter{ flex:1 1 100%; width:auto; }
  .pool-table thead{ display:none; }
  .pool-table, .pool-table tbody, .pool-table tr, .pool-table td{ display:block; }
  .pool-table tbody tr[data-id]{ display:grid; grid-template-columns:1fr auto; gap:2px var(--space-3); padding:var(--space-3) var(--space-4); border-bottom:1px solid color-mix(in srgb,var(--color-text) 8%,transparent); }
  .pool-table tbody tr[data-id] td{ padding:0; border:0; }
  .pool-table .td-name{ grid-column:1; }
  .pool-table .td-usage{ grid-column:2; grid-row:1; text-align:right; }
  .pool-table .td-region, .pool-table .td-key{ display:inline; }
  .pool-table .td-guid, .pool-table .td-size{ display:none; }
  .pool-table .act{ grid-column:1 / -1; text-align:left; width:auto; margin-top:var(--space-2); }
}

/* dialogs on this page: body scrolls, frame (and its registration marks) never clips */
.dialog{ max-height:calc(100vh - 2 * var(--space-6)); }
.dialog .dialog-body{ opacity:1; overflow-y:auto; min-height:0; padding:3px; margin:-3px; display:flex; flex-direction:column; gap:var(--space-4); color:color-mix(in srgb,var(--color-text) 86%,transparent); }
.dialog .dialog-body p{ margin:0; }
.dialog .form-error{ margin:0; min-height:0; }
.dialog .form-error:empty{ display:none; }
.dialog .kicker{ margin-bottom:-6px; }
.add-pool-form{ display:flex; flex-direction:column; gap:var(--space-3); min-height:0; }
.field-pair{ display:grid; grid-template-columns:1fr 1fr; gap:var(--space-3); }
@media(max-width:520px){ .field-pair{ grid-template-columns:1fr; } }
.dual-region{ border-top:1px solid var(--color-divider); padding-top:var(--space-4); }
.field > label.check{ display:flex; align-items:center; gap:8px; font-size:14px; color:var(--color-text); margin:0; cursor:pointer; }
.check input{ accent-color:var(--color-accent); width:15px; height:15px; margin:0; }
.field-hint{ font-size:12.5px; color:color-mix(in srgb,var(--color-text) 60%,transparent); margin:var(--space-1) 0 var(--space-3); }
.token-row{ display:flex; gap:var(--space-2); }
.token-row .input{ flex:1; min-width:0; font-size:13px; background:var(--color-bg); }
.token-copied{ font-size:12px; color:var(--color-accent-700); }
#token-box .dialog{ width:min(520px,100%); }

/* .dialog-backdrop has no z-index of its own in styles.css; without one here it paints
   below .site-nav (z-index:20 above) wherever they overlap, so a backdrop click in that
   top strip wouldn't reach the backdrop to dismiss the dialog. Keep above nav's z-index. */
.dialog-backdrop{ z-index:30; }
/* styles.css sets `.dialog-backdrop{ display:grid; }`, which — because it's an author-CSS
   class rule — silently beats the browser's own `[hidden]{ display:none }` UA rule
   (author styles always win over UA styles, regardless of the `hidden` attribute or source
   order): without this, the dialog stays visually on screen at all times, `hidden`
   attribute or not. This selector is more specific than the plain class alone, so it wins. */
.dialog-backdrop[hidden]{ display:none; }
/* The "everything is a transparent line drawing" blueprint rule (styles.css) is right for
   in-flow cards but wrong for a modal: over the dimmed backdrop it lets the real page
   underneath show through and collide with the dialog's own text. Restore an opaque
   surface here, same as .dialog's pre-blueprint-override definition. */
.dialog{ background:var(--color-surface); box-shadow:var(--shadow-lg); }
#destroy-dialog-backdrop .dialog-body p{ margin:0 0 var(--space-3); }
#destroy-dialog-backdrop .field{ margin-top:var(--space-3); }

.dialog-wide{ width:min(640px,100%); }
#detail-dialog-backdrop .pool-meta{ font-size:12.5px; color:color-mix(in srgb,var(--color-text) 60%,transparent); margin:0 0 var(--space-2); }
#detail-dialog-backdrop #detail-destroy{ margin-right:auto; }
#detail-dialog-backdrop .term{ margin-top:var(--space-4); }
#detail-dialog-backdrop .term-body{ padding:12px 14px; }
.usage-graph{ display:block; width:100%; height:120px; }
.usage-bar{ fill:var(--color-accent); }
.usage-bar:hover{ fill:var(--color-accent-700); }

/* account settings, email verification, two-factor — and the sign-in / reset pages */
/* Same trap as .dialog-backdrop[hidden] above: .btn, .add-pool-form and friends set
   `display`, which beats the UA's [hidden] rule. Anything these pages toggle with `hidden`
   sits inside one of these containers. */
.account [hidden], .dialog [hidden], .signup-card [hidden]{ display:none; }
.form-notice{ color:var(--color-accent-700); font-size:13.5px; margin:0 0 var(--space-4); }
.form-notice:empty{ display:none; }
.signup-card .form-notice{ margin:0 0 var(--space-6); }
.form-aside{ font-size:13.5px; margin:var(--space-4) 0 0; }
.signup-form .field-hint{ margin:var(--space-2) 0 0; }

.account-banner{ display:flex; align-items:center; justify-content:space-between; gap:var(--space-4); flex-wrap:wrap; padding:var(--space-4) var(--space-6); margin-bottom:var(--space-6); border-color:var(--color-accent); }
.account-banner p{ margin:0; font-size:14px; }

.settings-bar{ margin-top:calc(var(--space-8) * 1.4); }
.settings{ background:transparent; }
.setting-row{ display:flex; align-items:center; justify-content:space-between; gap:var(--space-4); padding:var(--space-4) var(--space-6); border-bottom:1px solid color-mix(in srgb,var(--color-text) 8%,transparent); }
.setting-row:last-child{ border-bottom:0; }
.setting-row .btn{ min-height:38px; flex:none; }
.setting-text{ min-width:0; }
.setting-label{ font-family:var(--mono); font-size:11px; letter-spacing:0.08em; text-transform:uppercase; color:color-mix(in srgb,var(--color-text) 58%,transparent); margin-bottom:var(--space-1); }
.setting-value{ font-size:14px; overflow-wrap:anywhere; }
.setting-badge{ font-size:11px; letter-spacing:0.06em; color:var(--color-accent-700); margin-left:var(--space-2); }
.setting-badge.is-warn{ color:var(--color-text); border-bottom:1px solid var(--color-accent); }
@media(max-width:520px){
  .setting-row{ flex-direction:column; align-items:flex-start; padding:var(--space-4); }
}

.mfa-qr{ align-self:center; width:184px; height:184px; border:1px solid var(--color-divider); }
.mfa-qr svg{ display:block; width:100%; height:100%; }
.recovery-codes{ margin:0; padding:var(--space-4); border:1px solid var(--color-divider); background:var(--color-bg); font-size:14px; line-height:1.8; columns:2; column-gap:var(--space-6); }
#mfa-codes-copy{ align-self:flex-start; }