/* A standalone account page: no business assets are loaded before authentication. */
:root {
  --jc-font-xs:12px; --jc-font-sm:13px; --jc-font-md:14px; --jc-font-lg:16px; --jc-font-xl:20px; --jc-font-title:28px;
  --jc-space-1:4px; --jc-space-2:8px; --jc-space-3:12px; --jc-space-4:16px; --jc-space-5:20px; --jc-space-6:24px; --jc-space-8:32px; --jc-space-10:40px; --jc-space-12:48px;
  --jc-radius-sm:6px; --jc-bg:#f5f6f3; --jc-surface:#fff; --jc-text:#18212b; --jc-text-muted:#62717d; --jc-text-inverse:#fff;
  --jc-border:#dfe5e7; --jc-border-strong:#b7c6d1; --jc-accent:#1c4e7e; --jc-accent-hover:#153e67; --jc-accent-soft:#eaf0f7; --jc-warning:#947039; --jc-danger:#963e47;
}
* { box-sizing:border-box; }
[hidden] { display:none !important; }
body { margin:0; background:var(--jc-bg); color:var(--jc-text); font:var(--jc-font-md)/1.65 -apple-system,BlinkMacSystemFont,"PingFang SC","Microsoft YaHei",sans-serif; }
.account-shell { max-width:1040px; padding:var(--jc-space-10) var(--jc-space-6) var(--jc-space-6); margin:0 auto; }
.account-heading { border-bottom:1px solid var(--jc-border-strong); padding-bottom:var(--jc-space-5); margin-bottom:var(--jc-space-6); }
.account-path { font-size:var(--jc-font-xs); color:var(--jc-text-muted); margin:0 0 var(--jc-space-2); }
h1 { font-size:var(--jc-font-title); font-weight:650; line-height:1.35; letter-spacing:-.02em; margin:0 0 var(--jc-space-2); }
h2 { font-size:var(--jc-font-lg); line-height:1.5; margin:0 0 var(--jc-space-3); font-weight:650; }
#page-description { margin:0; color:var(--jc-text-muted); }
p { margin:0 0 var(--jc-space-3); }
.status-line { min-height:var(--jc-space-6); margin-bottom:var(--jc-space-5); color:var(--jc-text-muted); overflow-wrap:anywhere; }
.status-line:empty { display:none; }
.status-line[data-kind="error"] { color:var(--jc-danger); }
.status-line[data-kind="success"] { color:var(--jc-accent); }
#login-panel { max-width:440px; }
.account-tabs { display:flex; gap:var(--jc-space-5); margin-bottom:var(--jc-space-6); border-bottom:1px solid var(--jc-border); }
button,input,select,textarea { font:inherit; }
button { cursor:pointer; border:1px solid transparent; border-radius:var(--jc-radius-sm); padding:var(--jc-space-2) var(--jc-space-4); line-height:1.5; }
button:disabled { cursor:wait; opacity:.55; }
.tab-button { border-radius:0; background:transparent; color:var(--jc-text-muted); padding:var(--jc-space-2) 0; border-bottom:2px solid transparent; }
.tab-button[aria-pressed="true"] { color:var(--jc-text); border-bottom-color:var(--jc-text); }
.button-primary { color:var(--jc-text-inverse); background:var(--jc-accent); }
.button-primary:hover { background:var(--jc-accent-hover); }
.button-secondary { color:var(--jc-text); background:var(--jc-surface); border-color:var(--jc-border-strong); }
.button-secondary:hover { background:var(--jc-accent-soft); }
button:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible,a:focus-visible { outline:2px solid var(--jc-accent); outline-offset:3px; }
.account-form { display:grid; gap:var(--jc-space-5); max-width:440px; }
.field { display:grid; gap:var(--jc-space-2); }
label { font-size:var(--jc-font-sm); font-weight:600; }
input,textarea,select { width:100%; min-width:0; border:1px solid var(--jc-border-strong); background:var(--jc-surface); color:var(--jc-text); border-radius:var(--jc-radius-sm); padding:var(--jc-space-2) var(--jc-space-3); }
input { min-height:42px; }
textarea { resize:none; overflow-wrap:anywhere; }
.account-form > button { justify-self:start; min-width:120px; }
.help-text { color:var(--jc-text-muted); font-size:var(--jc-font-sm); margin:0; }
#login-mode > .help-text { margin-top:var(--jc-space-5); }
#activate-mode > .help-text { margin-bottom:var(--jc-space-5); }
.identity-line,.section-heading { display:flex; align-items:flex-start; justify-content:space-between; gap:var(--jc-space-4); margin-bottom:var(--jc-space-6); }
.identity-line h2 { margin-bottom:var(--jc-space-1); }
#identity-summary { color:var(--jc-text-muted); overflow-wrap:anywhere; margin:0; }
.back-link { color:var(--jc-accent); text-underline-offset:3px; white-space:nowrap; }
.account-columns { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:var(--jc-space-12); }
.session-section .help-text { margin-bottom:var(--jc-space-5); }
.admin-section { border-top:1px solid var(--jc-border); margin-top:var(--jc-space-10); padding-top:var(--jc-space-6); }
.admin-section > .help-text { margin-bottom:var(--jc-space-4); }
.section-heading { margin-bottom:var(--jc-space-4); }
.section-heading h2 { margin-bottom:var(--jc-space-1); }
.table-scroll { overflow-x:auto; }
table { min-width:640px; border-collapse:collapse; width:100%; text-align:left; font-size:var(--jc-font-sm); }
th,td { padding:var(--jc-space-3) var(--jc-space-2); border-bottom:1px solid var(--jc-border); vertical-align:middle; }
th { color:var(--jc-text-muted); font-weight:500; }
td:first-child { overflow-wrap:anywhere; min-width:128px; max-width:200px; }
th:nth-child(3),td:nth-child(3) { white-space:nowrap; }
.mobile-table-hint { display:none; }
.role-control { display:flex; align-items:center; gap:var(--jc-space-2); min-width:180px; }
.role-control select { width:auto; min-width:86px; }
.row-actions { display:flex; flex-wrap:wrap; gap:var(--jc-space-2); min-width:144px; }
.small-button { padding:var(--jc-space-1) var(--jc-space-2); font-size:var(--jc-font-xs); }
.account-footer { border-top:1px solid var(--jc-border); padding-top:var(--jc-space-4); margin-top:var(--jc-space-10); color:var(--jc-text-muted); font-size:var(--jc-font-xs); }
.token-dialog { width:min(520px,calc(100% - 32px)); padding:var(--jc-space-6); color:var(--jc-text); background:var(--jc-surface); border:1px solid var(--jc-border-strong); border-radius:var(--jc-radius-sm); }
.token-dialog::backdrop { background:#18212b66; }
.token-dialog label { display:block; margin-bottom:var(--jc-space-2); }
.token-dialog .help-text { margin-top:var(--jc-space-2); }
.dialog-actions { display:flex; gap:var(--jc-space-3); flex-wrap:wrap; margin-top:var(--jc-space-5); }
.visually-hidden { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
@media(max-width:640px) {
  .account-shell { padding:var(--jc-space-6) var(--jc-space-4); }
  h1 { font-size:var(--jc-font-xl); }
  .account-columns { grid-template-columns:minmax(0,1fr); gap:var(--jc-space-8); }
  .identity-line,.section-heading { flex-wrap:wrap; }
  .mobile-table-hint { display:block; margin-bottom:var(--jc-space-2); }
}

.account-footer { text-align:center; line-height:1.8; }
.account-footer a { color:inherit; }
