body { background: #f4f6f8; }
.auth-bg { background: linear-gradient(160deg, #eef2f5 0%, #e3ece7 100%); min-height: 100vh; }

.stat { background: #fff; border: 1px solid #e3e7eb; border-radius: .6rem; padding: 1rem 1.1rem; height: 100%; }
.stat .label { color: #6c757d; font-size: .8rem; text-transform: uppercase; letter-spacing: .04em; }
.stat .value { font-size: 1.6rem; font-weight: 600; line-height: 1.2; }

.table > :not(caption) > * > * { vertical-align: middle; }
.msg-body { max-width: 360px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.qr-box { width: 280px; height: 280px; margin: 0 auto; display: flex; align-items: center; justify-content: center; }
.qr-box img { width: 280px; height: 280px; image-rendering: pixelated; border: 1px solid #dee2e6; border-radius: .5rem; background: #fff; padding: 6px; }

code.key { word-break: break-all; }
pre.snippet { background: #1e2530; color: #e6edf3; border-radius: .5rem; padding: 1rem; font-size: .85rem; overflow-x: auto; }

/* NextITBridge brand */
.brand-mark { display: inline-flex; align-items: center; justify-content: center; width: 1.9rem; height: 1.9rem; border-radius: .45rem;
              background: #fff; color: #128c7e; font-weight: 800; line-height: 1; }
.navbar .brand-text { display: inline-flex; flex-direction: column; line-height: 1.05; }
.brand-name { font-weight: 700; letter-spacing: .01em; }
.brand-product { font-size: .68rem; font-weight: 400; opacity: .8; letter-spacing: .06em; text-transform: uppercase; }
.auth-brand { display: flex; align-items: center; justify-content: center; gap: .7rem; }
.auth-brand .brand-mark { width: 2.8rem; height: 2.8rem; font-size: 1.5rem; background: #128c7e; color: #fff; border-radius: .7rem; }
.auth-brand .brand-text { text-align: left; display: flex; flex-direction: column; line-height: 1.1; }
.auth-brand .brand-name { font-size: 1.5rem; color: #1b2733; }
.auth-brand .brand-product { color: #5b6b79; opacity: 1; }
.progress.quota { height: .6rem; }

/* Pages with a single small form (change password): centred in the window, full width on phones */
.center-screen { min-height: calc(100vh - 15rem); display: flex; align-items: center; justify-content: center; }
.center-card { width: 100%; max-width: 26rem; }