/* Account states keep their existing IDs, requests and actions inside the shared site frame. */
.account-page {min-height:100vh;background:var(--elevated)}
.account-page .page {width:100%}
.account-page .container {width:100%;max-width:800px;margin:56px auto 0;padding:0 var(--page-gutter)}
.account-page h1 {font-size:40px;font-weight:500;line-height:1.15;letter-spacing:-.045em;margin-bottom:20px}
.account-page .subtitle {font-size:16px;line-height:1.7;color:var(--text-secondary);margin-bottom:32px}
.account-page .card {padding:28px;background:var(--surface);border:0;border-radius:var(--radius-md)}
.nav-user {display:flex;align-items:center;gap:12px;font-size:14px;color:var(--text-primary)}
.nav-user>span {max-width:120px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.nav-avatar {width:28px;height:28px;flex:none;border-radius:50%;object-fit:cover}
.nav-logout {display:inline-flex;align-items:center;min-height:44px;color:var(--text-secondary);font-size:14px}
.nav-logout:hover {color:var(--brand-deep)}
.back-to-directory {display:inline-flex;align-items:center;gap:8px;min-height:44px;margin-bottom:20px;font-size:14px;color:var(--text-secondary)}
.back-to-directory:hover {color:var(--text-primary);text-decoration:underline;text-underline-offset:4px}
.back-to-directory svg {width:16px;height:16px}
.account-page .btn {min-height:44px;padding:12px 20px;font-size:14px;font-weight:600}
.github-icon {width:20px;height:20px;flex:none}
.btn-copy {background:var(--elevated);color:var(--text-primary);border-color:var(--border);padding:8px 16px}
.key-display {padding:24px;margin-bottom:20px;background:var(--surface);border-radius:var(--radius-md)}
.key-label,.status-label {font-size:14px;font-weight:500;color:var(--text-secondary)}
.key-label {margin-bottom:12px}
.key-value {display:flex;align-items:center;gap:12px;min-width:0;padding:12px 16px;background:var(--elevated);border-radius:var(--radius-sm);font-size:14px;line-height:1.5}
.key-value code {flex:1;min-width:0;overflow-wrap:anywhere;word-break:break-all;user-select:all}
.key-warning {display:flex;align-items:flex-start;gap:8px;margin-top:16px;padding:16px;background:var(--yellow-bg);border-radius:var(--radius-sm);font-size:14px;color:var(--text-secondary);line-height:1.6}
.key-warning svg {flex:none;margin-top:2px}
.cli-guide {position:relative;max-width:100%;padding:52px 20px 20px;margin-top:24px;background:var(--text-primary);border-radius:var(--radius-md);font-family:var(--font-mono);font-size:14px;line-height:1.8;color:#fff;overflow-x:auto}
.cli-guide .comment {color:#c4c4c4}.cli-guide .cmd,.cli-guide .arg {color:var(--brand)}
.cli-copy {position:absolute;top:8px;right:8px;min-height:36px;padding:8px 12px;background:#303030;border:0;border-radius:var(--radius-sm);color:#fff;font-family:var(--font-sans);font-size:13px}
.cli-copy:hover {background:#444}
.status-row {display:flex;align-items:center;justify-content:space-between;gap:20px;min-height:56px;padding:12px 0}
.status-value {font-size:14px;font-weight:500;text-align:right}
.status-badge {display:inline-flex;align-items:center;gap:8px;padding:6px 12px;border-radius:var(--radius-sm);font-size:14px;font-weight:500}
.status-active {background:var(--green-bg);color:var(--green)}
.status-dot {width:6px;height:6px;border-radius:50%;background:var(--green)}
.revoke-section {margin-top:28px;padding-top:0}
.revoke-label {font-size:14px;color:var(--text-secondary);margin:0 0 16px}
.features {list-style:none;padding:0;margin:0 0 20px}
.features li {display:flex;align-items:flex-start;gap:12px;padding:10px 0;font-size:14px;color:var(--text-secondary);line-height:1.6}
.features li svg {flex:none;color:var(--green);margin-top:3px}
.loading {display:flex;justify-content:center;padding:48px 0;color:var(--text-secondary);font-size:14px}
.spinner {width:20px;height:20px;flex:none;border:2px solid var(--border);border-top-color:var(--text-primary);border-radius:50%;animation:spin .6s linear infinite;margin-right:10px}
@keyframes spin {to {transform:rotate(360deg)}}
.toast {position:fixed;bottom:24px;left:50%;transform:translateX(-50%) translateY(80px);max-width:calc(100% - 40px);background:var(--text-primary);color:#fff;padding:12px 20px;border-radius:var(--radius-sm);font-size:14px;opacity:0;transition:opacity .2s,transform .2s;pointer-events:none;z-index:100}
.toast.show {opacity:1;transform:translateX(-50%) translateY(0)}
.cf-turnstile {margin-bottom:16px;display:flex;justify-content:center;max-width:100%}
.turnstile-error {color:var(--red);font-size:14px;margin-bottom:12px;display:none}
.account-page .dev-footer {width:100%;max-width:800px;margin:40px auto 0;padding:32px var(--page-gutter);font-size:14px;text-align:left;color:var(--text-secondary)}
.dev-footer-legal {margin-top:16px}.account-page .dev-footer a {font-size:14px}
@media(max-width:700px) {
 .account-page .container {margin-top:40px;padding:0 20px}
 .account-page h1 {font-size:32px}
 .account-page .card,.key-display {padding:20px}
 .key-value {flex-wrap:wrap}.key-value .btn {flex:none}
 .nav-user {gap:8px}.nav-user>span {display:none}
 .account-page .dev-footer {margin-top:40px;padding:32px 20px}
}