/* ==========================================================================
   BrowserProfileLock recovery portal — styles
   Same design tokens as the marketing site, so the two read as one product.

   Replaces the Tailwind CDN build and the Google Fonts request that used to be
   loaded here. Both were remote dependencies on a page people reach when they
   are already locked out of their browser; if the CDN is slow or blocked, the
   reset form should still be usable. The system font stack also means no
   text reflow on load.

   NOTE: .hidden and .flex are kept as utility classes because the page's
   JavaScript toggles them by name (step-1 -> step-2 -> step-3, and the login
   modal). Renaming them would break that flow.
   ========================================================================== */

:root {
  --bg-deep: #0b1120;
  --bg-base: #0f172a;
  --panel: #1e293b;
  --panel-2: #16203a;
  --border: #334155;
  --border-soft: #263449;

  --primary: #3b82f6;
  --primary-deep: #1d4ed8;
  --primary-grad: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%);

  --text: #f8fafc;
  --muted: #94a3b8;

  --success: #34d399;
  --warning: #fcd34d;
  --danger: #fca5a5;

  --font: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --mono: ui-monospace, SFMono-Regular, Menlo, Consolas, 'Liberation Mono', monospace;

  --radius: 16px;
  --radius-sm: 10px;
  --radius-pill: 50px;
  --shadow: 0 20px 25px -5px rgba(0, 0, 0, .45), 0 8px 10px -6px rgba(0, 0, 0, .35);
  --inset-hi: inset 0 1px 0 rgba(255, 255, 255, .2);
  --focus: #93c5fd;
}

*, *::before, *::after { box-sizing: border-box; }

body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background: var(--bg-base);
  color: var(--text);
  font-family: var(--font);
  font-size: 1rem;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 { margin: 0; line-height: 1.25; letter-spacing: -.02em; }
p { margin: 0; }
ul { margin: 0; padding: 0; list-style: none; }
img { display: block; max-width: 100%; height: auto; }
a { color: #60a5fa; text-decoration: none; }
a:hover { text-decoration: underline; }

/* Utilities the inline JavaScript depends on. Do not rename. */
.hidden { display: none !important; }
.flex { display: flex; }

.mono { font-family: var(--mono); }
.muted { color: var(--muted); }

:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; border-radius: 4px; }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.skip-link {
  position: absolute; left: 50%; top: 0; transform: translate(-50%, -120%);
  z-index: 2000; background: var(--panel); color: var(--text);
  border: 1px solid var(--border); border-radius: 0 0 var(--radius-sm) var(--radius-sm);
  padding: .7rem 1.2rem; font-weight: 600; transition: transform .15s ease;
}
.skip-link:focus { transform: translate(-50%, 0); }

/* --------------------------------------------------------------- layout --- */
.wrap { width: 100%; max-width: 1200px; margin: 0 auto; padding: 0 clamp(1rem, 4vw, 2rem); }

.portal-main { flex: 1 0 auto; width: 100%; padding: clamp(1.75rem, 5vw, 3rem) 0 clamp(2.5rem, 6vw, 4rem); }

/* ------------------------------------------------------------------ nav --- */
.topbar {
  position: sticky; top: 0; z-index: 100;
  background: rgba(15, 23, 42, .88);
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  border-bottom: 1px solid var(--border-soft);
}
.topbar-inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; min-height: 64px; padding: .6rem 0;
}
.brand { display: inline-flex; align-items: center; gap: .65rem; color: var(--text); }
.brand:hover { text-decoration: none; }
/* The real product artwork, placed as-is: it carries its own rounded tile and
   transparent corners, so no wrapper background and no border-radius. */
.brand-mark { width: 34px; height: 34px; flex: none; filter: drop-shadow(0 2px 6px rgba(0, 0, 0, .5)); }
.brand-text { font-weight: 700; font-size: .9375rem; letter-spacing: -.01em; }
.brand-sub { display: block; font-weight: 500; font-size: .6875rem; color: var(--muted); letter-spacing: .04em; }

.topbar-actions { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; justify-content: flex-end; }
.whoami {
  display: inline-flex; align-items: center; gap: .45rem;
  font-size: .75rem; color: #cbd5e1;
  background: rgba(148, 163, 184, .1);
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  padding: .35rem .8rem;
  max-width: 46vw; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.whoami svg { width: 14px; height: 14px; flex: none; color: var(--muted); }

/* -------------------------------------------------------------- buttons --- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  font-family: inherit; font-weight: 600; font-size: .9375rem; line-height: 1.2;
  padding: .8rem 1.4rem;
  border: 1px solid transparent; border-radius: var(--radius-pill);
  cursor: pointer; text-decoration: none;
  transition: transform .18s ease, background-color .18s ease, border-color .18s ease, box-shadow .18s ease;
}
.btn:hover { text-decoration: none; }
.btn svg { width: 17px; height: 17px; flex: none; }
.btn-block { width: 100%; }
.btn-sm { font-size: .8125rem; padding: .5rem 1rem; }

/* Gradient buttons carry white text at 1.05rem/700 and up. The gradient's
   lightest stop only clears AA against white at large-text size, so small
   buttons use the solid deep blue instead. */
.btn-primary {
  background: var(--primary-grad); color: #fff;
  font-size: 1.05rem; font-weight: 700;
  box-shadow: var(--inset-hi), 0 10px 24px -8px rgba(29, 78, 216, .6);
  text-shadow: 0 1px 2px rgba(15, 23, 42, .35);
}
.btn-primary:hover { transform: translateY(-1px); box-shadow: var(--inset-hi), 0 14px 28px -8px rgba(29, 78, 216, .75); }

.btn-solid { background: var(--primary-deep); color: #fff; box-shadow: var(--inset-hi); }
.btn-solid:hover { background: #1a45c0; }

.btn-success {
  background: linear-gradient(135deg, #34d399 0%, #059669 100%);
  color: #04231a; font-size: 1.05rem; font-weight: 700;
  box-shadow: var(--inset-hi), 0 10px 24px -8px rgba(5, 150, 105, .55);
}
.btn-success:hover { transform: translateY(-1px); }

.btn-outline { background: rgba(148, 163, 184, .08); border-color: var(--border); color: var(--text); }
.btn-outline:hover { background: rgba(148, 163, 184, .16); border-color: #47597a; }

.btn-danger { background: rgba(239, 68, 68, .14); border-color: rgba(239, 68, 68, .4); color: #fca5a5; }
.btn-danger:hover { background: rgba(239, 68, 68, .24); color: #fecaca; }

/* ---------------------------------------------------------------- cards --- */
.card {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: clamp(1.25rem, 3vw, 1.85rem);
  box-shadow: var(--shadow);
}
.card-head {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 1rem; padding-bottom: 1.1rem; margin-bottom: 1.5rem;
  border-bottom: 1px solid var(--border);
}
.card-head h2 { font-size: 1.1875rem; }
.card-head p { font-size: .875rem; color: var(--muted); margin-top: .25rem; }
.card-title {
  font-size: .75rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
  color: var(--muted); margin-bottom: 1rem;
}

/* Page heading. Each signed-in branch gets exactly one h1 through this. */
.page-head {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 1rem; flex-wrap: wrap;
  padding-bottom: 1.25rem; margin-bottom: clamp(1.25rem, 3vw, 1.85rem);
  border-bottom: 1px solid var(--border-soft);
}
.page-head h1 { font-size: clamp(1.25rem, 3.5vw, 1.5rem); }
.page-head p { font-size: .875rem; color: var(--muted); margin-top: .3rem; }
.page-head a.pill:hover { text-decoration: none; background: rgba(59, 130, 246, .24); }

/* ---------------------------------------------------------------- pills --- */
.pill {
  display: inline-flex; align-items: center; gap: .4rem;
  font-size: .6875rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  padding: .3rem .7rem; border-radius: var(--radius-pill); border: 1px solid;
}
.pill-ok    { background: rgba(52,211,153,.14);  border-color: rgba(52,211,153,.42);  color: #a7f3d0; }
.pill-info  { background: rgba(59,130,246,.14);  border-color: rgba(59,130,246,.42);  color: #bfdbfe; }
.pill-warn  { background: rgba(252,211,77,.14);  border-color: rgba(252,211,77,.44);  color: #fde68a; }
.pill-admin { background: rgba(167,139,250,.14); border-color: rgba(167,139,250,.44); color: #ddd6fe; }
.pill-muted { background: rgba(148,163,184,.12); border-color: rgba(148,163,184,.36); color: #cbd5e1; }

/* Live dot. Purely decorative: the adjacent pill text carries the meaning. */
.dot { position: relative; display: inline-flex; width: 10px; height: 10px; flex: none; }
.dot i { position: absolute; inset: 0; border-radius: 50%; background: var(--success); }
.dot i:first-child { animation: ping 1.8s cubic-bezier(0, 0, .2, 1) infinite; opacity: .75; }
@keyframes ping { 75%, 100% { transform: scale(2); opacity: 0; } }

/* --------------------------------------------------------------- alerts --- */
.alert {
  padding: .9rem 1.1rem; border-radius: var(--radius-sm);
  border: 1px solid; font-size: .875rem;
}
.alert-ok    { background: rgba(52,211,153,.1);  border-color: rgba(52,211,153,.4);  color: #a7f3d0; }
.alert-warn  { background: rgba(252,211,77,.09); border-color: rgba(252,211,77,.4);  color: #fde68a; }
.alert-error { background: rgba(239,68,68,.1);   border-color: rgba(239,68,68,.42);  color: #fecaca; }
.alert strong { color: #fff; }

/* ---------------------------------------------------------------- forms --- */
.field { display: block; margin-bottom: .6rem; font-size: .875rem; font-weight: 600; color: #cbd5e1; }
.field-hint { display: block; margin-top: .35rem; font-size: .75rem; font-weight: 400; color: var(--muted); }

.input {
  width: 100%; font-family: inherit; font-size: 1rem;
  background: var(--bg-deep); color: var(--text);
  border: 1px solid var(--border); border-radius: var(--radius-sm);
  padding: .85rem 1rem;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.input::placeholder { color: #64748b; }
.input:focus { border-color: var(--primary); box-shadow: 0 0 0 3px rgba(59, 130, 246, .18); outline: none; }
.input-code {
  font-family: var(--mono); font-size: clamp(1rem, 3.5vw, 1.25rem);
  font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
  color: #6ee7b7;
}
.input-otp {
  font-family: var(--mono); font-size: 1.35rem; font-weight: 700;
  letter-spacing: .35em; text-align: center; color: var(--warning);
}

/* --------------------------------------------------------- code readouts --- */
.readout {
  background: var(--bg-deep); border: 1px solid var(--border);
  border-radius: var(--radius-sm); padding: 1rem 1.1rem;
}
.readout-label {
  display: block; font-size: .6875rem; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase; color: var(--muted);
  margin-bottom: .5rem;
}
.readout-value {
  font-family: var(--mono); font-weight: 700;
  font-size: clamp(1.4rem, 6vw, 2rem); letter-spacing: .12em;
  word-break: break-all; line-height: 1.3;
}
.readout-value.is-challenge { color: var(--warning); }
.readout-value.is-auth { color: #fff; }

.readout-final {
  text-align: center;
  background: rgba(52, 211, 153, .07);
  border-color: rgba(52, 211, 153, .38);
  padding: 1.5rem 1.1rem;
}
.readout-final .readout-label { color: #a7f3d0; }

/* ---------------------------------------------------------------- steps --- */
.steps { display: grid; gap: 1.1rem; }
.step-flow { display: flex; align-items: center; gap: .5rem; margin-bottom: 1.5rem; flex-wrap: wrap; }
.step-chip {
  display: inline-flex; align-items: center; gap: .45rem;
  font-size: .75rem; font-weight: 600; color: var(--muted);
  background: rgba(148, 163, 184, .07);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-pill);
  padding: .3rem .75rem;
}
.step-chip b {
  display: grid; place-items: center;
  width: 18px; height: 18px; border-radius: 50%;
  background: var(--border); color: #cbd5e1;
  font-size: .6875rem;
}
/* Current step is marked by weight, border and the filled numeral, not colour
   alone. */
.step-chip.is-current {
  color: var(--text); border-color: var(--primary); font-weight: 700;
  background: rgba(59, 130, 246, .12);
}
.step-chip.is-current b { background: var(--primary-grad); color: #fff; }
.step-chip.is-done b { background: rgba(52, 211, 153, .9); color: #04231a; }
.step-arrow { color: #475569; font-size: .75rem; }

/* ----------------------------------------------------------- dashboard --- */
.portal-grid {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: clamp(1.25rem, 3vw, 2rem);
  align-items: start;
}
@media (max-width: 940px) { .portal-grid { grid-template-columns: 1fr; } }

.stack { display: grid; gap: clamp(1.25rem, 3vw, 1.5rem); }

.metric { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.metric-value { font-size: clamp(2.25rem, 8vw, 2.75rem); font-weight: 800; letter-spacing: -.03em; line-height: 1; }

.device-list { display: grid; gap: .65rem; }
.device {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: .6rem .75rem;
  background: var(--bg-deep); border: 1px solid var(--border);
  border-radius: var(--radius-sm); padding: .8rem .9rem;
}
.device-id { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; min-width: 0; }
/* Retired rows are dimmed but stay above readable contrast, and the state is
   also spelled out in the badge and the note, never by colour alone. */
.device.is-retired { border-style: dashed; border-color: #3d4d67; }
.device-note {
  grid-column: 1 / -1;
  font-size: .75rem; line-height: 1.55; color: var(--muted);
}
.device-note strong { color: #fde68a; }
.device-actions { margin: 0; }
@media (max-width: 420px) {
  .device { grid-template-columns: 1fr; }
  .device-actions .btn { width: 100%; }
}

/* Admin table: devices stacked inside one cell. */
.admin-devices { display: grid; gap: .5rem; }
.admin-devices li {
  display: flex; flex-wrap: wrap; align-items: center; gap: .4rem;
  padding: .35rem 0;
}
.admin-devices form { margin: 0; }
.device-prefix {
  font-family: var(--mono); font-weight: 700; font-size: .8125rem;
  letter-spacing: .1em; color: #bfdbfe;
  background: rgba(59, 130, 246, .12);
  border: 1px solid rgba(59, 130, 246, .3);
  border-radius: 6px; padding: .2rem .5rem;
  word-break: break-all;
}
.empty { font-size: .875rem; color: var(--muted); }

/* -------------------------------------------------------------- search --- */
.searchbar {
  display: flex; flex-wrap: wrap; align-items: center; gap: .6rem;
  margin-bottom: .85rem;
}
.searchbar-field { position: relative; flex: 1 1 260px; min-width: 0; }
.searchbar-icon {
  position: absolute; left: .9rem; top: 50%; transform: translateY(-50%);
  width: 17px; height: 17px; color: var(--muted); pointer-events: none;
}
.searchbar-input { padding-left: 2.6rem; font-size: .9375rem; }
/* Hide the browser's own clear cross: there is an explicit Clear button, and the
   native one sits under our icon at some zoom levels. */
.searchbar-input::-webkit-search-cancel-button { -webkit-appearance: none; appearance: none; }
.searchbar-result { font-size: .8125rem; color: var(--muted); margin-bottom: 1.25rem; }

@media (max-width: 480px) {
  .searchbar { flex-direction: column; align-items: stretch; }
  .searchbar .btn { width: 100%; }
}

/* ------------------------------------------------- deleted-by-users panel --- */
/* Amber-edged rather than red: these are recoverable, not gone. */
.deleted-panel {
  margin-top: clamp(1.5rem, 4vw, 2.25rem);
  background: var(--panel);
  border: 1px solid var(--border);
  border-left: 3px solid rgba(252, 211, 77, .55);
  border-radius: var(--radius);
  padding: clamp(1.25rem, 3vw, 1.75rem);
  box-shadow: var(--shadow);
}
.deleted-head {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 1rem; flex-wrap: wrap;
  padding-bottom: 1rem; margin-bottom: 1.25rem;
  border-bottom: 1px solid var(--border);
}
.deleted-head h2 { font-size: 1.0625rem; }
.deleted-head p { font-size: .8125rem; color: var(--muted); margin-top: .3rem; max-width: 60ch; }

.deleted-list { display: grid; gap: .65rem; }
.deleted-item {
  display: flex; align-items: center; justify-content: space-between;
  gap: .75rem 1rem; flex-wrap: wrap;
  background: var(--bg-deep);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: .8rem .95rem;
}
.deleted-info { display: flex; align-items: center; flex-wrap: wrap; gap: .5rem .7rem; min-width: 0; }
.deleted-owner { font-size: .875rem; color: #cbd5e1; word-break: break-all; }
.deleted-when { font-size: .75rem; color: var(--muted); }
.deleted-actions { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }
.deleted-actions form { margin: 0; }

@media (max-width: 560px) {
  .deleted-item { flex-direction: column; align-items: stretch; }
  .deleted-actions { width: 100%; }
  .deleted-actions form { flex: 1; }
  .deleted-actions .btn { width: 100%; }
}

/* --------------------------------------------------------------- table --- */
.table-wrap { overflow-x: auto; border: 1px solid var(--border); border-radius: var(--radius); background: var(--panel); box-shadow: var(--shadow); }
.table { width: 100%; border-collapse: collapse; min-width: 640px; }
.table thead th {
  text-align: left; font-size: .6875rem; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase; color: var(--muted);
  background: var(--panel-2); border-bottom: 1px solid var(--border);
  padding: .9rem 1.1rem; white-space: nowrap;
}
.table td { padding: .9rem 1.1rem; border-bottom: 1px solid rgba(51, 65, 85, .55); font-size: .875rem; vertical-align: middle; }
.table tbody tr:last-child td { border-bottom: 0; }
.table tbody tr:hover { background: rgba(148, 163, 184, .04); }
.cell-email { color: #fff; font-weight: 600; word-break: break-all; }
.user-line { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; margin-bottom: .45rem; }
.user-delete { margin: 0; }

/* Administrator rows are pinned to the top of the list. Marked with a border
   accent, a tinted background AND the "Pinned" label, so the distinction does
   not rest on colour alone. */
.table tbody tr.is-pinned { background: rgba(167, 139, 250, .07); }
.table tbody tr.is-pinned:hover { background: rgba(167, 139, 250, .12); }
.table tbody tr.is-pinned td:first-child { box-shadow: inset 3px 0 0 rgba(167, 139, 250, .7); }
.pinned-note {
  font-size: .625rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  color: #c4b5fd;
}
.pinned-note::before { content: "\2191 "; }
.cell-credits { font-family: var(--mono); font-weight: 700; color: #6ee7b7; white-space: nowrap; }

.credit-form { display: flex; align-items: center; gap: .5rem; }
.credit-input {
  width: 5.5rem; font-family: var(--mono); font-size: .875rem; text-align: center;
  background: var(--bg-deep); color: var(--text);
  border: 1px solid var(--border); border-radius: 8px; padding: .4rem .5rem;
}
.credit-input:focus { border-color: var(--primary); outline: none; }

/* --------------------------------------------------------------- login --- */
.gate { max-width: 460px; margin: clamp(1rem, 6vh, 4rem) auto 0; text-align: center; }
.gate .brand-mark { width: 64px; height: 64px; margin: 0 auto 1.25rem; }
.gate h1 { font-size: 1.5rem; margin-bottom: .75rem; }
.gate p { font-size: .9375rem; color: var(--muted); margin-bottom: 1.5rem; }
.gate-note { margin-top: 1.25rem; font-size: .8125rem; color: var(--muted); }

.modal {
  position: fixed; inset: 0; z-index: 200;
  align-items: center; justify-content: center;
  padding: 1rem;
  background: rgba(3, 7, 18, .8);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}
.modal-card {
  position: relative;
  width: 100%; max-width: 420px;
  background: var(--panel); border: 1px solid var(--border);
  border-radius: var(--radius); padding: clamp(1.5rem, 4vw, 2rem);
  box-shadow: 0 32px 60px -12px rgba(0, 0, 0, .7);
}
.modal-card h2 { font-size: 1.25rem; margin-bottom: 1.25rem; }
.modal-step { display: grid; gap: .9rem; }
.modal-close {
  position: absolute; top: .75rem; right: .75rem;
  display: grid; place-items: center; width: 34px; height: 34px;
  background: rgba(148, 163, 184, .1); border: 1px solid var(--border);
  border-radius: 50%; color: #cbd5e1; cursor: pointer;
}
.modal-close:hover { background: rgba(148, 163, 184, .2); color: #fff; }
.modal-close svg { width: 15px; height: 15px; }
.modal-msg { min-height: 1.2rem; font-size: .8125rem; font-weight: 600; }
.modal-msg.is-error { color: var(--danger); }
.modal-msg.is-ok { color: #6ee7b7; }

/* -------------------------------------------------------------- footer --- */
.portal-footer {
  flex: none;
  background: var(--bg-deep);
  border-top: 1px solid var(--border-soft);
  padding: clamp(1.75rem, 4vw, 2.5rem) 0 clamp(1.5rem, 3vw, 2rem);
  margin-top: auto;
}
.footer-top {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 1.25rem; padding-bottom: 1.25rem; border-bottom: 1px solid var(--border-soft);
}
.footer-brand { display: inline-flex; align-items: center; gap: .6rem; }
.footer-brand img { width: 30px; height: 30px; }
.footer-brand span { font-weight: 700; font-size: .9375rem; }
.footer-links { display: flex; flex-wrap: wrap; gap: .5rem 1.35rem; }
.footer-links a { font-size: .8125rem; color: #cbd5e1; }
.footer-links a:hover { color: #fff; }

.footer-base {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: .35rem .55rem;
  padding-top: 1.25rem; font-size: .8125rem; color: var(--muted);
}
.footer-sep { color: #475569; }
.footer-ip { font-family: var(--mono); color: #cbd5e1; word-break: break-all; }

/* ------------------------------------------------------- reduced motion --- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
  .dot i:first-child { display: none; }
}

/* ------------------------------------------------------------- narrow --- */
@media (max-width: 480px) {
  .btn { width: 100%; white-space: normal; text-align: center; }
  .btn-sm { width: auto; }
  .topbar-inner { min-height: 0; }
  .whoami { max-width: 100%; }
  .card-head { flex-direction: column; }
  .credit-form { flex-wrap: wrap; }
}