/* Portal-specific additions on top of Material Dashboard Pro. Keep them few: the template owns the look. */
.portal-boot { min-height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.text-rose { color: #e91e63 !important; }
.mono { font-family: "SFMono-Regular", Menlo, Consolas, monospace; font-size: 0.85em; }
.tabular { font-variant-numeric: tabular-nums; }
.masked { letter-spacing: 0.08em; }
.truncate { max-width: 260px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: inline-block; vertical-align: bottom; }
.diff-changed { background: #fff3cd; }
.diff-old { text-decoration: line-through; color: #999; margin-right: .4rem; }
.skeleton { background: linear-gradient(90deg, #eee 25%, #f5f5f5 50%, #eee 75%); background-size: 200% 100%; animation: shimmer 1.2s infinite; border-radius: 4px; min-height: 1em; }
/* Refresh buttons: icon and label on one line, icon turning while the request is in flight. */
.btn.btn-refresh { display: inline-flex; align-items: center; gap: .3rem; white-space: nowrap; padding: 4px 6px; margin: 0; }
.btn.btn-refresh .material-icons { top: 0; margin: 0; font-size: 18px; }
.card-footer .stats .btn.btn-refresh .material-icons { top: 0; margin: 0; }
.material-icons.spin { animation: spin 1s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes shimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }
.empty-state { text-align: center; padding: 2.5rem 1rem; color: #999; }
.empty-state .material-icons { font-size: 42px; color: #ccc; }
.sidebar .nav li.active > a { font-weight: 500; }
.sidebar .sidebar-wrapper > .nav > li > a.nav-section { font-size: 11px; text-transform: uppercase; letter-spacing: .08em; opacity: .6; cursor: default; }
.card .card-header-icon .card-icon .material-icons { font-size: 28px; }
.secret-box { word-break: break-all; }
.login-page .card-login .card-header { margin-top: -40px; }
.navbar .navbar-nav .nav-item .btn-link { text-transform: none; }
.chooser .card { cursor: pointer; }
.chooser .card:hover { box-shadow: 0 8px 20px rgba(0,0,0,.15); }
#blazor-error-ui { display: none; position: fixed; bottom: 0; left: 0; right: 0; z-index: 3000; margin: 0; border-radius: 0; }
#blazor-error-ui .dismiss { cursor: pointer; }
@media (prefers-reduced-motion: reduce) { .skeleton { animation: none; } }

/* Activity: a card-level overlay while a form submits, and the navbar spinner while any API call is in flight. */
/* Bootstrap's spinner classes are not in the template's bundle, so every spinner in the portal is defined here. */
.spinner-border { display: inline-block; width: 2rem; height: 2rem; vertical-align: text-bottom; border: .25em solid currentColor; border-right-color: transparent; border-radius: 50%; animation: spinner-border .75s linear infinite; }
.spinner-border-sm { width: 1rem; height: 1rem; border-width: .2em; }
@keyframes spinner-border { to { transform: rotate(360deg); } }
.progress-indeterminate { position: absolute; left: 0; right: 0; top: 0; height: 4px; overflow: hidden; background: rgba(233,30,99,.15); border-radius: 6px 6px 0 0; z-index: 6; }
.progress-indeterminate::after { content: ""; position: absolute; top: 0; bottom: 0; width: 40%; background: #e91e63; animation: progress-slide 1.2s ease-in-out infinite; }
@keyframes progress-slide { from { left: -40%; } to { left: 100%; } }
.card-login.is-busy .card-body, .card-login.is-busy .card-footer { opacity: .75; }
.card-login .btn .spinner-border { margin-right: .5rem; }
.card.is-busy { position: relative; }
.card-busy-overlay { position: absolute; inset: 0; z-index: 5; display: flex; flex-direction: column; align-items: center; justify-content: center; background: rgba(255,255,255,.85); border-radius: 6px; }
.busy-indicator { display: inline-flex; align-items: center; gap: .4rem; padding: .5rem .75rem; color: #999; font-size: 12px; }
.busy-indicator .spinner-border { width: 1rem; height: 1rem; border-width: .15em; }
.page-busy { display: flex; align-items: center; justify-content: center; gap: .75rem; padding: 2rem; color: #999; }

/* Stat tiles: one line each, equal heights across a row, footer pinned to the bottom. */
.stat-row > [class*="col-"] { display: flex; }
.stat-row .card-stats { flex: 1 1 auto; display: flex; flex-direction: column; }
.card-stats .card-header .card-category { line-height: 1.25; margin-bottom: .25rem; }
.card-stats .card-header .card-title { white-space: nowrap; }
.card-stats .card-footer { margin-top: auto; min-height: 36px; }

/* Dashboard cards: footers as quiet action rows, compact empty states inside cards. */
.card .card-footer .btn-link { padding-left: 0; }
.card .card-body .empty-state { padding: 1.5rem 1rem; }
.card-stats .card-footer .stats { display: flex; align-items: center; flex-wrap: wrap; gap: .25rem; }
.card-stats .card-footer .btn-link .material-icons { font-size: 16px; vertical-align: text-bottom; }
.card.card-plain.border { box-shadow: none; }

/* Alerts: compact, with the support reference on one line. */
.portal-alert { padding: .75rem 1rem; }
.portal-alert .alert-ref { font-size: 12px; opacity: .9; margin-top: .25rem; white-space: nowrap; display: flex; align-items: center; gap: .35rem; }
.portal-alert .alert-ref .mono { font-size: 12px; }
.portal-alert .btn-just-icon .material-icons { font-size: 16px; }

/* Sidebar logo: an icon in the mini slot. */
.sidebar .logo .logo-mini .material-icons { font-size: 22px; vertical-align: middle; opacity: .85; }

/* Chrome's autofill tint on the Material inputs. */
input:-webkit-autofill, input:-webkit-autofill:hover, input:-webkit-autofill:focus { -webkit-box-shadow: 0 0 0 1000px #fff inset; transition: background-color 9999s ease-in-out 0s; }

/* Forms: selects look like the other fields; action buttons sit on the baseline of their row. */
.bmd-form-group select.form-control { height: 36px; padding-top: 4px; }
.form-row .btn { margin-top: 0; }

/* Chart cards: the template draws white series on the coloured header; give the header a fixed drawing height. */
.card-chart .card-header .ct-chart { height: 170px; }
.card-chart .card-header { padding: 0 8px; }
.sidebar .user .photo img { object-fit: cover; }
.sidebar .user .user-info .collapse .nav { margin-top: 4px; }

/* API documentation (/docs): a public page outside the signed-in layout. */
.docs-page { background: #f7f7f9; min-height: 100vh; }
.docs-navbar { background: #fff !important; box-shadow: 0 1px 0 rgba(0,0,0,.06), 0 2px 12px rgba(0,0,0,.05); }
.docs-navbar .navbar-brand { color: #263238 !important; font-weight: 500; display: flex; align-items: center; gap: .35rem; }
.docs-navbar .navbar-brand .material-icons { color: #e91e63; }
.docs-brand-sep { color: #ccc; }
.docs-brand-sub { color: #777; font-weight: 400; }
.docs-navlinks .nav-link { color: #555 !important; display: inline-flex; align-items: center; gap: .3rem; text-transform: none; font-size: 13px; }
.docs-navlinks .nav-link:hover { color: #e91e63 !important; }
.docs-navlinks .nav-link .material-icons { font-size: 18px; }
.docs-navlinks .docs-portal-link { color: #e91e63 !important; font-weight: 500; }
.docs-body { padding-top: 70px; padding-bottom: 3rem; }
.docs-hero { background: linear-gradient(135deg, #e91e63 0%, #ad1457 55%, #4a148c 100%); color: #fff; padding: 3.5rem 2rem 2.5rem; }
.docs-hero-inner { max-width: 1120px; margin: 0 auto; }
.docs-kicker { text-transform: uppercase; letter-spacing: .12em; font-size: 11px; opacity: .85; margin-bottom: .5rem; }
.docs-hero h1 { color: #fff; font-weight: 500; font-size: 2.6rem; margin: 0 0 .75rem; text-wrap: balance; }
.docs-hero .lead { max-width: 64ch; font-size: 1.1rem; opacity: .95; }
.docs-hero-actions { display: flex; flex-wrap: wrap; gap: .5rem; margin: 1.25rem 0 1.75rem; }
.docs-hero-actions .btn { margin: 0; display: inline-flex; align-items: center; gap: .3rem; }
.docs-hero-actions .btn .material-icons { font-size: 18px; margin: 0; top: 0; }
.docs-hero-actions .btn-outline-white { color: #fff; border: 1px solid rgba(255,255,255,.6); background: transparent; }
.docs-hero-actions .btn-outline-white:hover { background: rgba(255,255,255,.12); color: #fff; }
.docs-hero-facts { display: flex; flex-wrap: wrap; gap: 2rem; }
.docs-hero-facts div { display: flex; flex-direction: column; }
.docs-hero-facts strong { font-size: 1.5rem; font-weight: 500; line-height: 1.1; }
.docs-hero-facts span { font-size: 12px; opacity: .8; text-transform: uppercase; letter-spacing: .06em; }
.docs-main { max-width: 1180px; margin: 0 auto; padding-top: 1.5rem; }
.docs-nav { position: sticky; top: 80px; align-self: flex-start; max-height: calc(100vh - 90px); overflow-y: auto; }
.docs-toc-group { font-size: 11px; text-transform: uppercase; letter-spacing: .08em; color: #999; margin: 1rem 0 .25rem .5rem; }
.docs-toc-group:first-child { margin-top: 0; }
.docs-toc .nav-link { padding: .3rem .6rem; color: #555; font-size: 13px; border-left: 2px solid transparent; border-radius: 0 4px 4px 0; }
.docs-toc .nav-link:hover { color: #e91e63; background: rgba(233,30,99,.06); }
.docs-toc .nav-link.active { color: #e91e63; border-left-color: #e91e63; font-weight: 500; background: rgba(233,30,99,.06); }
.docs-toc-foot { margin: 1.25rem 0 0 .5rem; padding-top: 1rem; border-top: 1px solid #e5e5e5; display: flex; flex-direction: column; gap: .4rem; }
.docs-toc-foot a { color: #555; font-size: 13px; display: inline-flex; align-items: center; gap: .3rem; }
.docs-toc-foot a:hover { color: #e91e63; }
.docs-toc-foot .material-icons { font-size: 16px; }
.docs-content { max-width: 900px; }
.docs-content section { scroll-margin-top: 84px; padding: 2rem 0; border-bottom: 1px solid #e8e8ec; }
.docs-content section:last-of-type { border-bottom: 0; }
.docs-section-no { color: #e91e63; font-size: 11px; text-transform: uppercase; letter-spacing: .12em; margin: 0 0 .25rem; }
.docs-content h2 { font-weight: 500; font-size: 1.7rem; margin: 0 0 1rem; color: #263238; }
.docs-content h3 { font-size: 1.1rem; font-weight: 500; margin: 0 0 .6rem; display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }
.docs-content h4 { font-size: 1.05rem; font-weight: 500; margin-top: 1.5rem; color: #263238; }
.docs-content p, .docs-content li { max-width: 78ch; line-height: 1.65; }
.docs-content code { color: #c2185b; background: #fce4ec; padding: 0 .3em; border-radius: 3px; font-size: .9em; }
.docs-table thead th { color: #e91e63; font-weight: 500; border-top: 0; font-size: 13px; text-transform: uppercase; letter-spacing: .04em; }
.docs-table td { vertical-align: top; }
.docs-table td code, .docs-fields td code { white-space: nowrap; }
.docs-pillars { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 1rem; margin: 1.25rem 0; }
.docs-pillar { background: #fff; border: 1px solid #e8e8ec; border-radius: 8px; padding: 1rem 1.1rem; }
.docs-pillar .material-icons { color: #e91e63; font-size: 26px; margin-bottom: .4rem; }
.docs-pillar strong { display: block; margin-bottom: .25rem; }
.docs-pillar p { margin: 0; font-size: 13px; color: #666; line-height: 1.5; }
.docs-flow { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: .75rem; margin-top: 1rem; }
.docs-flow-step { display: flex; gap: .6rem; align-items: flex-start; font-size: 13px; line-height: 1.5; background: #fff; border: 1px dashed #d8d8de; border-radius: 8px; padding: .75rem; }
.docs-flow-step span { flex: 0 0 26px; width: 26px; height: 26px; border-radius: 50%; background: #e91e63; color: #fff; display: flex; align-items: center; justify-content: center; font-weight: 500; font-size: 13px; }
.docs-callout { display: flex; gap: .75rem; align-items: flex-start; background: #e8f4fd; border-left: 3px solid #00bcd4; border-radius: 0 6px 6px 0; padding: .8rem 1rem; margin: 1rem 0; }
.docs-callout .material-icons { color: #00bcd4; flex: 0 0 auto; }
.docs-callout.warning { background: #fff8e1; border-left-color: #ff9800; }
.docs-callout.warning .material-icons { color: #ff9800; }
.docs-callout div { line-height: 1.6; }
.docs-pills { margin-bottom: .75rem; }
.docs-status .status { display: inline-block; font-family: "SFMono-Regular", Menlo, Consolas, monospace; font-size: 12px; padding: 2px 8px; border-radius: 4px; color: #fff; white-space: nowrap; }
.docs-status .s4 { background: #ff9800; }
.docs-status .s5 { background: #f44336; }
.docs-endpoint-index { display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: .5rem; margin: 1rem 0 1.5rem; }
.docs-endpoint-index a { display: flex; align-items: center; gap: .5rem; padding: .5rem .75rem; background: #fff; border: 1px solid #e8e8ec; border-radius: 6px; color: #333; font-size: 13px; }
.docs-endpoint-index a:hover { border-color: #e91e63; color: #e91e63; }
.method { display: inline-block; font-size: 11px; font-weight: 700; letter-spacing: .06em; padding: 2px 8px; border-radius: 4px; color: #fff; min-width: 48px; text-align: center; }
.method.get { background: #00bcd4; }
.method.post { background: #e91e63; }
.docs-content .endpoint { padding: 1.25rem 1.5rem; margin: 1.25rem 0; background: #fff; border: 1px solid #e8e8ec; border-radius: 8px; scroll-margin-top: 84px; }
.docs-content .endpoint h3 .mono { font-size: 1rem; }
.docs-label { font-size: 11px; text-transform: uppercase; letter-spacing: .08em; color: #999; margin: .75rem 0 .25rem; }
.docs-fields td { padding: .35rem .5rem .35rem 0; font-size: 13px; border-top: 1px solid #f0f0f0; }
.docs-fields td.mono { color: #c2185b; white-space: nowrap; }
.docs-checklist { counter-reset: step; list-style: none; padding: 0; }
.docs-checklist li { counter-increment: step; position: relative; padding: .5rem 0 .5rem 2.4rem; border-bottom: 1px solid #eee; }
.docs-checklist li::before { content: counter(step); position: absolute; left: 0; top: .45rem; width: 26px; height: 26px; border-radius: 50%; background: #fff; border: 2px solid #e91e63; color: #e91e63; font-size: 12px; font-weight: 500; display: flex; align-items: center; justify-content: center; }
.docs-footer { display: flex; flex-wrap: wrap; gap: 1rem; justify-content: space-between; padding: 1.5rem 0 0; color: #777; font-size: 13px; }
.docs-top { position: fixed; right: 1.25rem; bottom: 1.25rem; width: 44px; height: 44px; border-radius: 50%; border: 0; background: #e91e63; color: #fff; box-shadow: 0 4px 12px rgba(233,30,99,.4); opacity: 0; pointer-events: none; transition: opacity .2s; z-index: 1020; display: flex; align-items: center; justify-content: center; }
.docs-top.show { opacity: 1; pointer-events: auto; }
.code-block { background: #263238; color: #eceff1; border-radius: 6px; margin: .5rem 0 1.25rem; overflow: hidden; }
.code-block-bar { display: flex; justify-content: space-between; align-items: center; padding: .25rem .75rem; background: #1e272c; color: #90a4ae; font-size: 11px; text-transform: uppercase; letter-spacing: .08em; }
.code-block-bar .btn { margin: 0; }
.code-block pre { margin: 0; padding: .9rem 1rem; overflow-x: auto; color: inherit; background: transparent; font-size: 13px; line-height: 1.5; }
.code-block code { color: inherit; background: transparent; padding: 0; font-size: inherit; }
@media (max-width: 991px) {
  .docs-nav { position: static; max-height: none; margin-bottom: 1rem; }
  .docs-toc .nav { flex-direction: row !important; flex-wrap: wrap; }
  .docs-toc-group { width: 100%; }
  .docs-hero { padding: 2.5rem 1rem 2rem; }
  .docs-hero h1 { font-size: 2rem; }
  .docs-navlinks .nav-link span, .docs-navlinks .nav-item:not(:last-child) { display: none; }
}

/* Account page: definition list, quick start, allow-list rows and the seat card. */
.kv { display: grid; grid-template-columns: max-content 1fr; column-gap: 1.5rem; row-gap: .9rem; margin: 0; }
.kv dt { color: #999; font-weight: 400; font-size: 13px; padding-top: .15rem; }
.kv dd { margin: 0; min-width: 0; }
.kv .key-value { font-size: 1rem; letter-spacing: .04em; }
.btn.btn-inline { display: inline-flex; align-items: center; gap: .2rem; padding: 2px 6px; margin: 0 0 0 .25rem; vertical-align: middle; }
.btn.btn-inline .material-icons { top: 0; margin: 0; font-size: 16px; }
.card-footer .btn .material-icons, .card-body .btn .material-icons { margin-top: -.15em; margin-bottom: -.15em; }
.card-footer .text-muted .material-icons, .card-footer .text-warning .material-icons { font-size: 16px; vertical-align: text-bottom; }
.quick-steps { padding-left: 1.25rem; margin: 0; }
.quick-steps li { margin-bottom: .75rem; line-height: 1.5; }
.headers-table td { padding: .2rem .4rem .2rem 0; font-size: 13px; }
.headers-table td.mono { color: #c2185b; white-space: nowrap; }
.allow-list-empty { display: flex; gap: .75rem; align-items: flex-start; padding: .75rem; border: 1px dashed #ddd; border-radius: 6px; margin-bottom: 1rem; }
.allow-list-empty .material-icons { color: #bbb; font-size: 28px; }
.allow-list-items { list-style: none; padding: 0; margin: 0 0 1rem; border: 1px solid #eee; border-radius: 6px; }
.allow-list-items li { display: flex; align-items: center; gap: .6rem; padding: .35rem .75rem; border-bottom: 1px solid #eee; }
.allow-list-items li:last-child { border-bottom: 0; }
.allow-list-items .material-icons { font-size: 18px; }
.allow-list-items .btn.btn-just-icon { margin: 0; height: 28px; width: 28px; min-width: 28px; }
.allow-list-add { display: flex; gap: .75rem; align-items: flex-start; }
.allow-list-add-field { flex: 1 1 auto; min-width: 0; }
.allow-list-add .btn { margin-top: 1.1rem; white-space: nowrap; }
.seat { display: flex; align-items: center; gap: .9rem; margin-bottom: 1rem; }
.seat-avatar { width: 44px; height: 44px; border-radius: 50%; background: #4caf50; color: #fff; display: flex; align-items: center; justify-content: center; font-size: 1.2rem; font-weight: 500; flex: 0 0 auto; }
.seat-email { font-weight: 500; word-break: break-all; }
.seat-rights { list-style: none; padding: 0; margin: 0 0 .75rem; }
.seat-rights li { display: flex; align-items: center; gap: .5rem; padding: .2rem 0; font-size: 13px; }
.seat-rights .material-icons { font-size: 18px; }
@media (max-width: 575px) { .kv { grid-template-columns: 1fr; row-gap: .25rem; } .kv dt { margin-top: .6rem; } .allow-list-add { flex-direction: column; } .allow-list-add .btn { margin-top: 0; } }

/* Finance: GL and charge configuration. */
.gl-group { font-size: 12px; text-transform: uppercase; letter-spacing: .08em; color: #999; margin: 0 0 .25rem; display: flex; align-items: center; gap: .5rem; }
.gl-group .mono { text-transform: none; letter-spacing: 0; color: #333; font-size: 13px; }
.gl-group .btn { margin: 0; padding: 0 4px; }
.gl-note { color: #777; font-size: 13px; display: flex; gap: .4rem; align-items: flex-start; padding-top: 1.4rem; line-height: 1.5; }
.gl-note .material-icons { font-size: 18px; color: #00bcd4; flex: 0 0 auto; }
.gl-chip { display: inline-block; padding: 1px 8px; border-radius: 4px; background: #e8f4fd; color: #0277bd; font-size: 12px; }
.gl-chip.missing { background: #fff3e0; color: #e65100; font-style: italic; }
.legs-table td, .legs-table th { font-size: 13px; vertical-align: middle; }
.legs-table .badge { font-size: 10px; }
.preview-table td, .preview-table th { font-size: 13px; }
.preview-table tr.table-active { background: rgba(76,175,80,.08); }
.ledger-summary p { margin-bottom: .25rem; }

/* Merchants list: registered / not registered / all. */
.merchants-toolbar { gap: .75rem; }
.merchants-view { margin: 0 0 .5rem; }
.merchants-view .nav-link { padding: 6px 14px; font-size: 12px; }
.merchants-view .count { display: inline-block; min-width: 18px; padding: 0 5px; margin-left: 4px; border-radius: 9px; background: rgba(0,0,0,.12); font-size: 11px; text-align: center; }
.merchants-view .nav-link.active .count { background: rgba(255,255,255,.3); }

/* Card footers that hold one action and its explanation. */
.card-footer.card-action-row { display: flex; align-items: center; flex-wrap: wrap; gap: .5rem 1rem; }
.card-footer.card-action-row .btn { margin: 0; white-space: nowrap; }
.card-action-note { flex: 1 1 280px; color: #777; font-size: 13px; line-height: 1.5; }
.card-action-note .material-icons { font-size: 16px; vertical-align: text-bottom; }
.quick-steps-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 1rem; }
.quick-step { display: flex; gap: .6rem; align-items: flex-start; }
.quick-step p { margin: .2rem 0 0; font-size: 13px; color: #666; line-height: 1.5; }
.quick-step-no { flex: 0 0 26px; width: 26px; height: 26px; border-radius: 50%; background: #9c27b0; color: #fff; display: flex; align-items: center; justify-content: center; font-weight: 500; font-size: 13px; }
.quick-step .mono { color: #c2185b; }

/* Sign-in card links and the password pages. */
.signin-links { display: flex; flex-direction: column; gap: .25rem; }
.password-rules { list-style: none; padding: 0; margin: .5rem 0 0; font-size: 12px; color: #999; }
.password-rules li { display: flex; align-items: center; gap: .35rem; }
.password-rules li.met { color: #4caf50; }
.password-rules .material-icons { font-size: 16px; }
.reset-steps { display: flex; gap: .5rem; justify-content: center; margin-bottom: 1rem; }
.reset-steps span { width: 26px; height: 26px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 500; background: #eee; color: #999; }
.reset-steps span.active { background: #e91e63; color: #fff; }
.reset-steps span.done { background: #4caf50; color: #fff; }

/* Allow-list requests. */
.alr { border: 1px solid #eee; border-left: 3px solid #999; border-radius: 6px; padding: .6rem .8rem; margin-bottom: .6rem; background: #fff; }
.alr.pending { border-left-color: #ff9800; }
.alr.approved { border-left-color: #4caf50; }
.alr.rejected { border-left-color: #f44336; }
.alr-head { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; margin-bottom: .35rem; }
.alr-cidrs { display: flex; flex-wrap: wrap; gap: .25rem; margin-bottom: .35rem; }
.alr-cidrs .badge { text-transform: none; }
.alr .material-icons { font-size: 16px; vertical-align: text-bottom; }
.alr-review { margin-top: .5rem; }
.alr-actions { display: flex; flex-wrap: wrap; gap: .5rem; }
.alr-actions .btn { margin: 0; }
.alr-history { margin-top: 1rem; }
.alr-history summary { cursor: pointer; color: #777; font-size: 13px; margin-bottom: .5rem; }

/* Sign-in, lock and reset pages: one comfortable card instead of the template's narrow grid column. */
/* The template lifts the card header 40px above the card, so the brand sits well clear of it. */
.auth-brand { display: flex; align-items: center; justify-content: center; gap: .5rem; color: #fff; font-size: 1.5rem; font-weight: 500; letter-spacing: .02em; margin: 0 0 4rem; text-shadow: 0 1px 3px rgba(0,0,0,.4); }
.auth-brand .material-icons { font-size: 30px; }
.auth-card { width: 100%; max-width: 560px; margin: 0 auto; }
.auth-card .card-login { margin-top: 0; }
.auth-card .card-login .card-header { padding: 1.5rem 1rem 1.25rem; }
.auth-card .card-login .card-title { font-size: 1.75rem; }
.auth-card .card-login .card-category { font-size: 1rem; }
.auth-card .card-login .card-body { padding: 1.5rem 2rem .5rem; }
.auth-card .card-login .card-footer { padding: .5rem 2rem 1.5rem; }
.auth-card .form-control { font-size: 1.1rem; padding: .75rem 0; height: auto; }
.auth-card .bmd-label-floating { font-size: 1.05rem; }
.auth-card .bmd-form-group { padding-top: 1.6rem; margin-bottom: .5rem; }
.auth-card .btn.auth-submit { width: 100%; margin: .5rem 0 0; padding: .9rem 1rem; font-size: 1rem; }
.auth-card .signin-links { font-size: .95rem; gap: .5rem; }
.auth-card .signin-links .small { font-size: .95rem; }
.auth-card .password-rules { font-size: 13px; }
@media (max-width: 575px) { .auth-card .card-login .card-body, .auth-card .card-login .card-footer { padding-left: 1.25rem; padding-right: 1.25rem; } }