/* Access, device confirmation and cloud compositions use the same quiet rhythm. */
#view-account{max-width:1100px;padding-bottom:8px;min-width:0}
#view-account [hidden]{display:none!important}
#view-account .account-connection{border:1px solid var(--line);border-radius:8px;background:var(--panel);padding:18px 20px}
#view-account .account-identity{display:flex;align-items:center;justify-content:space-between;gap:14px;min-width:0}
#view-account .account-identity h2{font-size:18px;line-height:1.4;letter-spacing:-.4px;overflow-wrap:anywhere;min-width:0}
#view-account .account-state{font-size:11px;line-height:1.5;border:1px solid #414149;color:#c3c3cc;border-radius:5px;padding:4px 8px;flex-shrink:0}
#view-account .account-state[data-connected=true]{border-color:#51635c;color:#c7ded3}
#view-account .account-access{font-size:14px;font-weight:650;line-height:1.5;margin:16px 0 4px;color:var(--text)}
#view-account .account-access-detail,#view-account .account-notice,#view-account .account-copy,#view-account .account-expiry{font-size:12px;line-height:1.7;color:var(--copy);margin:0;max-width:72ch;overflow-wrap:anywhere}
#view-account .account-access-detail:empty{display:none}
#view-account .account-notice{margin-top:10px}
#view-account .account-actions{margin-top:15px;gap:6px}
#view-account .account-feedback{font-size:12px;line-height:1.7;color:#d5d5dd;margin:12px 0 0;overflow-wrap:anywhere}
#view-account .account-feedback:empty{display:none}
#view-account .account-feedback[data-error=true]{color:#ffc5be}
#view-account .account-link{padding:18px 20px;margin-top:12px;border:1px solid #46464e;border-radius:8px;background:#101012}
#view-account .account-link h2{font-size:16px;line-height:1.5;margin-bottom:6px}
#view-account .account-code{display:block;width:fit-content;font-size:27px;line-height:1.4;font-weight:750;letter-spacing:.07em;font-variant-numeric:tabular-nums;margin:12px 0 4px;user-select:all}
#view-account .account-url{font-size:11px;color:var(--copy);overflow-wrap:anywhere;line-height:1.7;margin:6px 0 12px}
#view-account .account-cloud{margin-top:24px}
#view-account .account-cloud-heading h2{font-size:18px;line-height:1.4;letter-spacing:-.4px;margin-bottom:5px}
#view-account .account-current-plan{display:flex;justify-content:space-between;align-items:center;gap:16px;margin-top:14px;padding:12px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
#view-account .account-plan-summary{font-size:12px;font-weight:650;line-height:1.6;margin:0;overflow-wrap:anywhere;min-width:0}
#view-account .account-current-plan button{flex-shrink:0}
#view-account .account-save-reason{font-size:11px;line-height:1.7;color:var(--copy);margin:8px 0 0}
#view-account .account-empty{color:var(--copy);font-size:12px;line-height:1.75;margin:16px 0;max-width:70ch}
#view-account .account-loadout{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:13px 0;border-bottom:1px solid var(--line)}
#view-account .account-loadout-copy{min-width:0}
#view-account .account-loadout h3{font-size:13px;line-height:1.5;margin:0 0 3px;overflow-wrap:anywhere}
#view-account .account-loadout p{color:var(--copy);font-size:11px;line-height:1.6;margin:0;font-variant-numeric:tabular-nums}
#view-account .account-loadout .row{flex-shrink:0;gap:5px}
#view-account .account-footnote{color:var(--copy);font-size:11px;line-height:1.75;max-width:74ch;margin:20px 0 0}
#view-account button:disabled{cursor:default;opacity:.5}
#view-account :is(button,a,.account-code):focus-visible{outline:2px solid var(--focus);outline-offset:3px}
#view-account a.secondary{display:inline-block;text-decoration:none}
@media(max-width:1100px){#view-account .account-connection,#view-account .account-link{padding:16px 18px}#view-account .account-identity{flex-wrap:wrap;gap:8px}#view-account .account-identity h2{font-size:17px}#view-account .account-actions .quiet{padding-left:10px;padding-right:10px}}
@media(max-width:760px){#view-account .account-current-plan,#view-account .account-loadout{align-items:flex-start;flex-direction:column;gap:10px}#view-account .account-cloud{margin-top:20px}#view-account .account-code{font-size:25px}}

/* Confirmation reads as one flow, with the cabinet next to its code. */
#view-account .account-connection[data-pending=true]{display:flex;flex-wrap:wrap;align-items:center;gap:5px 14px;padding-top:12px;padding-bottom:10px;border-bottom:0;border-radius:8px 8px 0 0}
#view-account .account-connection[data-pending=true] .account-access{margin:0;font-size:12px}
#view-account .account-connection[data-pending=true] :is(.account-notice,.account-feedback){flex-basis:100%;margin-top:3px}
#view-account .account-connection[data-pending=true]+.account-link{margin-top:0;padding-top:5px;border-top:0;border-color:var(--line);border-radius:0 0 8px 8px}
#view-account .account-code-row{display:flex;flex-wrap:wrap;align-items:center;gap:10px 18px;margin:12px 0 6px}
#view-account .account-code-row .account-code{margin:0}