.login { min-block-size: 100vh; display: grid; place-items: center; padding: var(--space-4); }
.login .card { inline-size: min(420px, 100%); display: grid; gap: var(--space-4); }
.toolbar { display: flex; flex-wrap: wrap; gap: var(--space-3); align-items: end; margin-block-end: var(--space-4); }
.toolbar .field { margin: 0; }
.form-grid { display: grid; gap: var(--space-3); grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); align-items: end; margin-block-end: var(--space-4); }
.row-actions { display: flex; gap: var(--space-2); flex-wrap: wrap; }
.msg { min-block-size: 1.4em; font-size: var(--text-sm); }
.msg.is-err { color: var(--danger); } .msg.is-ok { color: var(--success); }
.secret { word-break: break-all; user-select: all; }
.sidebar .nav a { cursor: pointer; }
#toasts { position: fixed; inset-block-end: var(--space-4); inset-inline-end: var(--space-4); z-index: 50; }
/* The off-canvas sidebar (mobile) must not add horizontal scroll, in RTL or LTR. */
html, body { overflow-x: clip; }
@media (max-width: 900px) { .sidebar:not(.is-open) { visibility: hidden; } }
.header { flex-wrap: wrap; }
@media (max-width: 600px) { .hide-sm { display: none; } .header { gap: var(--space-2); padding-inline: var(--space-3); } .header .btn { padding-inline: var(--space-3); } }
.nav .count { margin-inline-start: auto; }
.notice { display: flex; gap: var(--space-3); align-items: center; justify-content: space-between; flex-wrap: wrap; }
.notice.is-unread { border-inline-start: 3px solid var(--accent); }
.dns { display: grid; gap: var(--space-1); font-size: var(--text-sm); }
[hidden] { display: none !important; }

/* 16.5 log box: no inline style (CSP style-src 'self'); long lines wrap, tall output scrolls */
.logbox { max-height: 12rem; overflow: auto; white-space: pre-wrap; overflow-wrap: anywhere; margin: 0; }