/* Shared tokens preserve contrast in light, dark green and black. */
:root{--trust-surface:#fff}
[data-theme="dark"]{--trust-surface:#19271f}
[data-theme="black"]{--trust-surface:#111}
.save-status{font-size:11px;line-height:1.4;color:var(--ink);margin-left:auto;margin-right:18px;max-width:240px}
.save-status.save-warning{color:var(--red);font-weight:700}
#mobile-nav{display:none}
.trust-settings{margin-bottom:20px}
.welcome-panel{margin-bottom:24px;border-color:var(--green);display:flex;gap:24px;align-items:center;justify-content:space-between}
.welcome-panel h2{margin:8px 0}.welcome-panel p{line-height:1.65;color:var(--muted)}
.welcome-steps{display:flex;gap:18px;flex-wrap:wrap;padding:0;list-style:none;font-size:13px;color:var(--ink)}
.welcome-steps .complete{color:var(--green)}.welcome-actions{display:grid;gap:10px;flex-shrink:0}
.more-menu{display:grid;gap:8px}.more-link{display:flex;align-items:center;gap:14px;text-align:left;padding:16px;background:var(--trust-surface);color:var(--ink);border:1px solid var(--line);border-radius:12px;width:100%;min-height:66px}
.more-link>svg{width:24px;height:24px;flex-shrink:0}.more-link>span:nth-child(2){flex:1;min-width:0}.more-link small{display:block;margin-top:5px;font-size:12px;color:var(--muted);line-height:1.5}
.recovery-list{display:grid;gap:10px;margin:16px 0}.recovery-row{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:16px;border:1px solid var(--line);border-radius:12px;background:var(--trust-surface);color:var(--ink)}
.recovery-row>div{min-width:0}.recovery-row strong{font-size:14px;line-height:1.6;overflow-wrap:anywhere}.recovery-row small{display:block;color:var(--muted);font-size:12px;line-height:1.6}.recovery-row button{flex-shrink:0}.recovery-pagination{display:flex;gap:10px;justify-content:space-between}.empty-copy{color:var(--muted);line-height:1.6;padding:14px 0}.help-sections section{padding:8px 0 20px;margin-bottom:12px;border-bottom:1px solid var(--line)}.help-sections p{line-height:1.7;color:var(--muted)}
.trust-ui button:focus-visible{outline:3px solid var(--green);outline-offset:3px}
@media(max-width:850px){.save-status{margin-left:0;max-width:200px}.trust-ui .breadcrumb{display:none}}
@media(max-width:650px){
 .trust-ui .sidebar{display:none!important}.trust-ui .app{margin-left:0}.trust-ui main{padding-bottom:calc(108px + env(safe-area-inset-bottom,0px))}
 /* The old <=420px header gave its actions the whole row. Reserve only their
    intrinsic width, so the save status cannot push the profile off screen. */
 .trust-ui .app>header{gap:12px;justify-content:space-between;min-width:0}
 .trust-ui .app>header .header-actions{width:auto;max-width:100%;margin-left:0;gap:10px;flex:0 0 auto}
 .trust-ui .app>header .header-actions>button{flex-shrink:0}
 .trust-ui .app>header .profile-button{width:40px;height:40px}
 .trust-ui .app>header .save-status{flex:1 1 0;min-width:0;font-size:11px;max-width:none;margin:0;white-space:normal;overflow-wrap:break-word}
 #mobile-nav{position:fixed;bottom:0;left:0;right:0;z-index:30;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));padding:8px 8px calc(8px + env(safe-area-inset-bottom,0px));background:var(--trust-surface);border-top:1px solid var(--line)}
 #mobile-nav button{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:7px;min-width:0;min-height:58px;padding:7px 2px;border:0;border-radius:12px;background:transparent;color:var(--muted);font-size:11px;font-weight:600}
 #mobile-nav button.active{color:var(--ink);background:var(--soft)}#mobile-nav svg{width:23px;height:23px;flex-shrink:0}
 .welcome-panel{display:block}.welcome-actions{margin-top:20px}.welcome-steps{font-size:12px;gap:10px}.recovery-row{align-items:stretch;flex-direction:column}.recovery-row button{width:100%;min-height:44px}.more-link{min-height:72px}
 .trust-ui #toast{bottom:calc(95px + env(safe-area-inset-bottom,0px))}
}