/* /account/ page. Scoped to .ac. Black and white like the rest of the site. */
.ac { --muted: #5f6772; --line: #e4e4e4; --soft: #f6f6f4; --ink: #1d1f23; --blue: #000; --blue-soft: #ededea; --gold: #c8901a; }
.ac [hidden] { display: none !important; } /* .ac-form sets display: grid, which beat the hidden attribute */
.ac-wrap { width: min(560px, 100% - 32px); margin: 0 auto; padding: 56px 0 80px; }
.ac-k { font-size: 14px; color: var(--muted); letter-spacing: .04em; text-transform: uppercase; }
.ac h1 { margin-bottom: 28px; }
.ac-msg { padding: 12px 16px; border-radius: 12px; background: #f6ead0; margin-bottom: 20px; }
.ac-msg.ok { background: var(--blue-soft); }
.ac-tabs { display: flex; gap: 4px; padding: 4px; border-radius: 1000px; background: var(--soft); margin-bottom: 24px; }
.ac-tabs button { flex: 1; font: inherit; font-size: 15px; padding: 10px 12px; border: 0; border-radius: 1000px; background: none; cursor: pointer; color: var(--muted); }
.ac-tabs button:hover { color: var(--ink); }
.ac-tabs button[aria-selected="true"] { background: #000; color: #fff; }
.ac-form { display: grid; gap: 16px; }
.ac-form label { display: grid; gap: 6px; font-size: 14px; color: var(--muted); }
.ac input { font: inherit; font-size: 16px; padding: 12px 14px; border: 1px solid #ccc; border-radius: 10px; color: var(--ink); background: #fff; width: 100%; box-sizing: border-box; }
.ac input:focus { outline: 2px solid var(--blue); outline-offset: 1px; border-color: transparent; }
.ac-btn { font: inherit; font-size: 16px; padding: 12px 24px; border: 0; border-radius: 1000px; background: #000; color: #fff; cursor: pointer; }
.ac-btn:hover { background: #333; }
.ac-btn[disabled] { opacity: .6; cursor: default; }
.ac-btn-ghost { background: #fff; color: #000; border: 1.5px solid #000; }
.ac-btn-ghost:hover { background: var(--soft); }
.ac-link { background: none; border: 0; padding: 0; font: inherit; font-size: 15px; color: var(--muted); text-decoration: underline; cursor: pointer; justify-self: start; }
.ac-note { font-size: 14px; color: var(--muted); }
.ac-trap { position: absolute; left: -9999px; }
.ac-card { padding: 20px 22px; border-radius: 18px; border: 1px solid var(--line); margin-bottom: 20px; }
.ac-me { display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; }
.ac-name { font-size: 22px; }
.ac-dim { color: var(--muted); font-size: 15px; }
.ac-h { font-size: 20px; margin-bottom: 12px; }
.ac-card p + .ac-btn, .ac-card p + .ac-row { margin-top: 14px; }
.ac-row { display: flex; gap: 8px; margin-top: 10px; }
.ac-row input { max-width: 180px; letter-spacing: .15em; }
.ac-steps { padding-left: 20px; display: grid; gap: 18px; margin-top: 16px; }
.ac-steps li > input { margin-top: 8px; max-width: 280px; }
.ac-qr { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; margin-top: 10px; }
.ac-qr #qr { padding: 8px; background: #fff; border: 1px solid var(--line); border-radius: 10px; line-height: 0; }
.ac-qr code { font-size: 13px; word-break: break-all; background: var(--soft); padding: 6px 8px; border-radius: 8px; }
.ac-ok { color: var(--blue); }
.ac-pages { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 10px; }
.ac-pages a { display: grid; gap: 2px; padding: 14px 16px; border-radius: 14px; background: var(--soft); text-decoration: none; border: 1px solid transparent; }
.ac-pages a:hover { border-color: var(--muted); }
.ac-pages a span { font-size: 13px; color: var(--muted); }
.ac-pages .admin { background: var(--ink); color: #fff; }
.ac-pages .admin span { color: #c9ccd2; }
@media (max-width: 920px) { .ac-wrap { padding-top: 32px; } }

.ac-keys { list-style: none; padding: 0; margin: 14px 0; }
.ac-keys li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 10px 0; border-bottom: 1px solid var(--line); }
.ac-keys li:last-child { border-bottom: 0; }
.ac-keys .n { overflow: hidden; text-overflow: ellipsis; }
.ac-keys .d { display: block; font-size: 13px; color: var(--muted); }
.ac-keys .ac-link { font-size: 14px; }
.ac-keys .acts { display: flex; gap: 12px; }
.ac-setup { display: grid; gap: 6px; font-size: 14px; color: var(--muted); margin-bottom: 14px; }
.ac-setup input { max-width: 300px; }
.ac-me { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; }
.ac-who { min-width: 0; }
.ac-who p { overflow: hidden; text-overflow: ellipsis; }
.ac-avatar { width: 52px; height: 52px; border-radius: 50%; background: #000; color: #fff; font: 600 19px/52px var(--font); text-align: center; letter-spacing: .02em; }
.ac-pw summary { cursor: pointer; color: var(--muted); font-size: 15px; }
.ac-pw[open] { display: grid; gap: 16px; }
@media (max-width: 480px) { .ac-me { grid-template-columns: auto minmax(0, 1fr); } .ac-me #logout { grid-column: 1 / -1; } }