.account-mode:not(.account-ready) .app { display: none; }
.account-gate { min-height: 100vh; display: grid; place-items: center; padding: 24px; }
.account-card { width: min(100%, 460px); padding: 32px; background: var(--bg-elev); border: 1px solid var(--border); border-radius: 18px; box-shadow: 0 20px 60px #0003; }
.account-card h1 { font-size: 25px; margin: 12px 0; }
.account-card p { line-height: 1.8; color: var(--text-2); }
.account-card .account-kicker { color: var(--accent); font-size: 12px; letter-spacing: 2px; }
.account-card label, .account-user label { display: grid; gap: 7px; margin: 14px 0; }
.account-login-methods { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 24px 0; }
.account-login-methods button { white-space: normal; min-height: 60px; }
.account-code { display: flex; gap: 8px; }
.account-code input { min-width: 0; width: 100%; }
.account-code button { flex: 0 0 auto; white-space: nowrap; }
.account-sms > button { width: 100%; margin-top: 8px; }
/* K1: existing account form and grants shared by create, reset and login. */
.account-card { box-sizing: border-box; min-width: 0; color: var(--text); }
.account-card label { display: grid; gap: 7px; margin: 14px 0; min-width: 0; }
.account-card .input, .account-card .select { width: 100%; min-width: 0; box-sizing: border-box; }
.account-password-field { display: flex; flex-wrap: wrap; gap: 8px; min-width: 0; }
.account-password-field input { flex: 1 1 160px; }
.account-password-field button { flex: 0 0 auto; min-height: 40px; }
.account-card [role=status] { overflow-wrap: anywhere; }
.account-credential-dialog .account-field-error { color: var(--danger); font-size: 13px; overflow-wrap: anywhere; }
.account-credential-dialog [aria-invalid=true] { border-color: var(--danger); }
.account-credential-dialog { width: min(90vw, 760px); max-height: 88vh; overflow: auto; }
.account-credential-dialog::backdrop { background: #0008; }
.account-credential-dialog fieldset { min-width: 0; border: 1px solid var(--border); border-radius: 8px; margin: 16px 0; }
.account-credential-dialog .account-operation-grants label, .account-credential-dialog .account-shop-grants label { display: flex; align-items: center; gap: 6px; margin: 4px 0; }
.account-card .account-actions button { white-space: normal; }
.topbar #account-password { flex: 0 0 auto; white-space: nowrap; }
.account-note { font-size: 12px; }
.account-card textarea { min-height: 90px; resize: vertical; }
.account-admin { padding: 24px; }
.account-user { border-top: 1px solid var(--border); margin-top: 24px; padding-top: 20px; }
.account-permissions { display: grid; grid-template-columns: repeat(auto-fit,minmax(150px,1fr)); gap: 0 16px; }
.account-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.account-id { font-size: 12px; overflow-wrap: anywhere; color: var(--text-2); }
.account-example { white-space: pre-wrap; overflow-wrap: anywhere; max-height: 600px; overflow: auto; }
.account-mode button:disabled { opacity: .55; cursor: not-allowed; }
.account-readonly { color: var(--accent); }
/* Public account action keeps its full label and moves with the wrapping toolbar. */
.topbar #account-logout { flex: 0 0 auto; white-space: nowrap; }
@media(max-width:600px) { .account-card { padding: 22px; } .account-gate { padding: 16px; } .account-admin { padding: 14px; } .account-mode .topbar-right { flex-wrap: wrap; } .account-mode #clock { display:none; } }
@media(max-width:600px) {
  .account-mode .topbar { height: auto; flex-basis: auto; flex-wrap: wrap; padding: 10px 12px; gap: 8px; }
  .account-mode .topbar-spacer { display: none; }
  .account-mode .topbar-right { width: 100%; justify-content: flex-end; }
  .account-mode #statusSource { margin-right: auto; max-width: 100%; }
  .account-mode .sidebar { transition: none; }
}
.menu-names-panel { padding: 24px; margin-top: 20px; }
.menu-names-panel label { display: grid; gap: 7px; margin: 12px 0; min-width: 0; }
.menu-names-panel input { width: 100%; min-width: 0; }
.menu-names-panel [role="status"] { overflow-wrap: anywhere; }
@media(max-width:600px) { .menu-names-panel { padding: 14px; } }

/* T57: same grid position after the last menu field, natural narrow-screen wrap. */
.menu-add-slot { display:flex; align-items:center; margin:12px 0; }
.menu-create-dialog { max-height:90vh; overflow:auto; color:var(--text); }
.menu-create-dialog input { width:100%; min-width:0; }
.menu-create-dialog [role="status"], [data-blank-menu-title] { overflow-wrap:anywhere; }

/* T62 account administration */
.account-admin-filters { display:flex; flex-wrap:wrap; gap:16px; margin:18px 0; }
.account-admin-filters label { display:grid; gap:6px; flex:1 1 200px; min-width:0; }
.account-admin fieldset { border:1px solid var(--border); border-radius:10px; padding:12px; margin:16px 0; min-width:0; }
.account-admin legend { padding:0 8px; }
.account-permission-row { min-width:0; padding:0 0 12px; }
.account-operation-grants,.account-shop-grants { display:flex; flex-wrap:wrap; gap:8px 16px; }
.account-user .account-operation-grants label,.account-user .account-shop-grants label { display:flex; align-items:center; gap:6px; margin:4px 0; }
.account-admin input[type=checkbox] { width:16px; height:16px; flex:none; }
.account-admin .input,.account-admin .select { max-width:100%; min-width:0; }
.account-admin [aria-pressed=true] { background:var(--accent); color:var(--bg); }
.account-audit-entry { margin-top:16px; border-top:1px solid var(--border); padding-top:12px; }
.account-change-review { width:min(92vw,700px); max-height:85vh; overflow:auto; color:var(--text); }
.account-change-review pre { white-space:pre-wrap; font:inherit; line-height:1.7; }
.account-admin [hidden] { display:none; }

/* Preserve native hidden semantics when shared button/layout rules set display. */
.account-mode [hidden] { display: none !important; }

/* J1: standard-shop metadata and dated ownership, scoped to the existing panel. */
.j1-shops { margin-top:20px; min-width:0; padding:20px; scroll-margin-top:calc(var(--topbar-h) + 16px); }
.j1-shops h2,.j1-shops h3,.j1-shops p { overflow-wrap:anywhere; }
.j1-shops p { color:var(--text-2); line-height:1.65; }
.j1-toolbar { display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap; }
.j1-toolbar>div { flex:1 1 280px; min-width:0; }
.j1-toolbar>button { flex:none; }
.j1-create,.j1-fields { display:flex; gap:12px; flex-wrap:wrap; align-items:flex-end; }
.j1-create { margin:20px 0 12px; }
.j1-shops label { display:grid; gap:6px; flex:1 1 200px; min-width:0; }
.j1-create label { max-width:420px; }
#t73-shops.j1-shops input:not([type=checkbox]),#t73-shops.j1-shops select { width:100%; min-width:0; max-width:100%; box-sizing:border-box; }
#t73-shops.j1-shops .j1-shop-form { display:block; }
.j1-shop { border-top:1px solid var(--border); padding:20px 0; }
.j1-shop h3 { margin:0 0 8px; }
.j1-shop fieldset { min-width:0; border:1px solid var(--border); border-radius:var(--radius,10px); margin:16px 0; padding:12px; }
.j1-shop legend { padding:0 6px; }
.j1-shop .j1-active { display:flex; align-items:center; flex:0 0 auto; min-height:38px; }
.j1-shop input[type=checkbox] { width:16px; height:16px; }
.j1-shops button { min-height:38px; }
.j1-shops details summary { cursor:pointer; padding:8px 0; }
.j1-table-scroll { max-width:100%; overflow:auto; margin-top:8px; }
.j1-table-scroll table { width:100%; border-collapse:collapse; white-space:nowrap; font-variant-numeric:tabular-nums; }
.j1-table-scroll th,.j1-table-scroll td { padding:10px 12px; text-align:left; border-bottom:1px solid var(--border); }
.j1-table-scroll td:nth-child(3) { white-space:normal; overflow-wrap:anywhere; min-width:160px; max-width:360px; }
.j1-shops :focus-visible { outline:2px solid var(--accent); outline-offset:3px; }
@media(max-width:600px) { .j1-fields>label,.j1-create>label { flex-basis:100%; max-width:none; } .j1-shops { padding:14px; } }

/* B1: the account gate also fits a short viewport when the keyboard is open. */
.account-gate { min-height:100dvh; }
@media(max-width:600px) {
  .account-gate { align-items:start;padding:16px 16px calc(16px + env(safe-area-inset-bottom,0px)); }
  .account-card { min-width:0;max-width:100%;overflow-wrap:anywhere; }
  .account-card input,.account-card select,.account-card textarea { min-width:0;max-width:100%;font-size:16px;min-height:44px; }
  .account-card button { min-height:44px; }
}