:root{
  --bg: #eff4fb;
  --bg-deep: #e4edf8;
  --card: rgba(255,255,255,.88);
  --card-strong: rgba(255,255,255,.96);
  --card-tint: rgba(237,243,255,.84);
  --border: #d7e2f0;
  --text: #0f172a;
  --muted: #5c6b80;

  --blue: #315fba;
  --blue-600: #274f9d;
  --blue-soft: #edf3ff;
  --blue-veil: rgba(49,95,186,.08);
  --success: #0f9f6e;
  --danger: #c0392b;
  --shadow: 0 18px 40px rgba(15, 23, 42, 0.08);
  --shadow-soft: 0 8px 22px rgba(49, 95, 186, 0.08);
  --banner-bg: rgba(232, 244, 252, 0.92);
  --banner-border: #c9e3f5;
}

*{ box-sizing: border-box; }
html, body{ height:100%; }
html{ -webkit-text-size-adjust: 100%; }
body{
  margin:0;
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, "Apple Color Emoji", "Segoe UI Emoji";
  background:
    radial-gradient(circle at top left, rgba(49,95,186,.10), transparent 30%),
    radial-gradient(circle at top right, rgba(125,159,217,.12), transparent 26%),
    linear-gradient(180deg, var(--bg) 0%, var(--bg-deep) 100%);
  color: var(--text);
  line-height: 1.5;
  text-rendering: optimizeLegibility;
  position: relative;
}

body::before{
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(135deg, rgba(255,255,255,.34), transparent 42%),
    radial-gradient(circle at 20% 20%, rgba(255,255,255,.30), transparent 18%);
  opacity: .7;
}

a{ color: var(--blue); text-decoration: none; }
a:hover{ text-decoration: underline; }

.container{
  max-width: 1100px;
  margin: 0 auto;
  padding: 24px;
}

/* Top bar */
.topbar{
  position: sticky;
  top: 0;
  z-index: 30;
  background: linear-gradient(180deg, rgba(243,248,255,.94) 0%, rgba(235,243,252,.88) 100%);
  backdrop-filter: blur(8px);
  color: var(--text);
  padding: 10px 24px;
  min-height: 72px;
  border-bottom: 1px solid rgba(177,203,233,.85);
  box-shadow: 0 10px 26px rgba(15,23,42,.06);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}

.topbar::after {
  content: "";
  position: absolute;
  left: 24px;
  right: 24px;
  bottom: -1px;
  height: 2px;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(49,95,186,.14), rgba(49,95,186,.38), rgba(49,95,186,.12));
}

/* Standalone templates (topbar with text-only .brand) */
.topbar > .brand,
.topbar .topbar-container > .brand {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 40px;
  padding-left: 52px;
  padding-top: 0;
  padding-bottom: 0;
  font-weight: 700;
  letter-spacing: 0.2px;
  line-height: 1.2;
}

.topbar > .brand { margin-left: 0; }

.topbar > .brand::before,
.topbar .topbar-container > .brand::before {
  content: "SC";
  width: 40px;
  height: 40px;
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  display: grid;
  place-items: center;
  border-radius: 12px;
  background: linear-gradient(145deg, #eaf6ff, #dcefff);
  border: 1px solid #c6e2f8;
  color: #1e3a8a;
  font-weight: 700;
  box-shadow: var(--shadow);
}

.topbar > .brand::after,
.topbar .topbar-container > .brand::after {
  content: "Collective scheduling for better teams.";
  display: block;
  font-size: 12px;
  font-weight: 500;
  color: var(--muted);
  white-space: normal;
  margin-top: 2px;
}

.topbar > .topbar-right {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-left: auto;
  margin-right: 0;
}

.topbar .topbar-right {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-left: auto;
  flex-wrap: wrap;
}

.success-text { color: #166534 !important; font-weight: 600; }
.topbar .container{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 16px;
  padding: 0 24px;
  width: 100%;
}
.topbar .topbar-container{
  width: 100%;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 16px;
  flex-wrap: wrap;
}
.topbar-links {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-left: auto;
  flex-wrap: wrap;
}
.brand{
  font-weight: 700;
  letter-spacing: 0.2px;
}
.topbar .muted{
  color: var(--muted);
  font-size: 14px;
}

.topbar .btn,
.topbar select {
  border-radius: 10px;
  border: 1px solid var(--border);
  background: #fff;
  color: var(--text);
}

.badge {
  border: 1px solid rgba(177,203,233,.8);
  background: linear-gradient(180deg, rgba(255,255,255,.94) 0%, rgba(240,246,255,.88) 100%);
  color: var(--text);
  border-radius: 999px;
  padding: 5px 10px;
  font-size: 12px;
  font-weight: 600;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.85), 0 4px 10px rgba(15,23,42,.04);
}

/* Hero layout */
.hero{
  display:grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: 22px;
  padding: 24px 0 8px;
}

.auth-shell {
  max-width: 880px;
  margin-top: 24px;
}

.auth-shell-wide {
  max-width: 980px;
  margin-top: 24px;
}

.auth-hero {
  grid-template-columns: minmax(0, 1.1fr) minmax(280px, .9fr);
}

.auth-hero-wide {
  grid-template-columns: minmax(0, 1.1fr) minmax(300px, .9fr);
  align-items: start;
}

.auth-actions {
  margin-top: 14px;
}

.auth-form {
  margin-top: 14px;
  max-width: 420px;
}

.report-shell {
  max-width: 980px;
  margin-top: 18px;
}

.report-shell-spacious {
  max-width: 980px;
  margin-top: 24px;
}

.report-hero {
  grid-template-columns: minmax(0, 1.15fr) minmax(280px, .85fr);
  align-items: start;
}

.report-form-grid-3 {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  align-items: end;
}

.report-stack {
  display: grid;
  gap: 12px;
}

.report-list {
  display: grid;
  gap: 8px;
}

.report-card-split {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
  align-items: flex-start;
}

.report-inline-row {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

.report-inline-actions {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  flex-wrap: wrap;
}

.report-inline-check {
  display: flex;
  align-items: center;
  gap: 8px;
}

.report-full-span {
  grid-column: 1 / -1;
}

.report-mono {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace;
}

.kicker{
  display:inline-block;
  background: var(--blue-soft);
  border: 1px solid var(--border);
  color: var(--blue);
  padding: 6px 10px;
  border-radius: 999px;
  font-size: 13px;
  margin-bottom: 10px;
}

h1{ font-size: 40px; line-height: 1.15; margin: 8px 0 10px; letter-spacing: -.03em; text-shadow: 0 1px 0 rgba(255,255,255,.65); }
h2{ margin: 0 0 10px; letter-spacing: -.025em; text-shadow: 0 1px 0 rgba(255,255,255,.6); }
h3{ letter-spacing: -.02em; }
.lead{
  font-size: 16px;
  line-height: 1.6;
  color: var(--muted);
  margin: 0 0 14px;
}

.quote{
  background: linear-gradient(180deg, rgba(243,248,255,.92) 0%, rgba(237,243,255,.78) 100%);
  border: 1px solid rgba(184,205,235,.78);
  border-radius: 14px;
  padding: 14px 14px;
  margin: 14px 0;
  box-shadow: var(--shadow-soft);
}
.quote-text{
  font-weight: 600;
  color: var(--text);
}
.quote-subtext{
  margin-top: 4px;
  font-size: 13px;
  color: var(--muted);
}

.bullets{
  display:grid;
  gap: 8px;
  margin: 14px 0 18px;
}
.bullet{
  padding: 10px 12px;
  border: 1px solid rgba(184,205,235,.72);
  border-radius: 12px;
  background: linear-gradient(180deg, rgba(255,255,255,.95) 0%, rgba(243,248,255,.86) 100%);
  color: var(--text);
  box-shadow: 0 6px 16px rgba(15,23,42,.04);
}

/* Cards */
.card{
  background: linear-gradient(180deg, var(--card-strong) 0%, var(--card-tint) 100%);
  border: 1px solid rgba(184,205,235,.72);
  border-radius: 16px;
  padding: 18px;
  box-shadow: var(--shadow), inset 0 1px 0 rgba(255,255,255,.82);
}

.divider{
  height: 1px;
  background: var(--border);
  margin: 14px 0;
}

.muted{ color: var(--muted); }
.small{ font-size: 13px; }

.warn{
  margin-top: 8px;
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid var(--border);
  background: #fff7ed;
  color: #9a3412;
}

/* Forms & buttons */
.form{
  display:grid;
  gap: 10px;
}
label{
  font-size: 13px;
  color: var(--muted);
}
input:not([type="checkbox"]):not([type="radio"]){
  width: 100%;
  border: 1px solid rgba(184,205,235,.82);
  border-radius: 12px;
  padding: 10px 12px;
  font-size: 15px;
  outline: none;
  background: linear-gradient(180deg, rgba(255,255,255,.96) 0%, rgba(247,250,255,.92) 100%);
  color: var(--text);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.9);
}

input[type="checkbox"]:not(.form-check-input),
input[type="radio"]:not(.form-check-input) {
  width: auto;
  padding: 0;
  border-radius: 4px;
}

input[type="checkbox"],
input[type="radio"] {
  accent-color: var(--blue);
}

.form-check {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding-left: 0 !important;
}

.form-check-input {
  margin: 2px 0 0 0 !important;
  float: none !important;
  position: static !important;
  flex: 0 0 auto;
}

.form-check-label {
  margin: 0;
  line-height: 1.3;
}

.form-switch .form-check-input {
  margin-left: 0 !important;
}

.check-row {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  line-height: 1.2;
}

.check-row input[type="checkbox"],
.check-row input[type="radio"] {
  margin: 0;
}

select, textarea {
  width: 100%;
  border: 1px solid rgba(184,205,235,.82);
  border-radius: 12px;
  padding: 10px 12px;
  font-size: 14px;
  outline: none;
  background: linear-gradient(180deg, rgba(255,255,255,.96) 0%, rgba(247,250,255,.92) 100%);
  color: var(--text);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.9);
}

input:not([type="checkbox"]):not([type="radio"]):focus{
  border-color: rgba(49, 95, 186, 0.45);
  box-shadow: 0 0 0 4px rgba(49, 95, 186, 0.12);
}
select:focus, textarea:focus{
  border-color: rgba(49, 95, 186, 0.45);
  box-shadow: 0 0 0 4px rgba(49, 95, 186, 0.12);
}

.cta-row{
  display:flex;
  gap: 10px;
  align-items:center;
  flex-wrap: wrap;
}

.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border-radius: 12px;
  padding: 10px 14px;
  min-height: 40px;
  line-height: 1.2;
  font-size: 14px;
  font-family: inherit;
  font-weight: 600;
  border: 1px solid var(--border);
  background: linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
  color: var(--text);
  cursor: pointer;
  transition: all .16s ease;
  text-decoration: none;
  box-shadow: 0 1px 2px rgba(15,23,42,.04), inset 0 1px 0 rgba(255,255,255,.9);
}

.row .btn,
.cta-row .btn {
  min-width: 124px;
}
.btn-primary,
.btn.primary{
  background: linear-gradient(180deg, #4673ca 0%, var(--blue) 100%);
  border-color: #2d56a7;
  color: #fff;
  box-shadow: 0 6px 16px rgba(49,95,186,.22), inset 0 1px 0 rgba(255,255,255,.2);
}
.btn-primary:hover,
.btn.primary:hover{
  background: linear-gradient(180deg, #3a68c2 0%, var(--blue-600) 100%);
  border-color: #234789;
  text-decoration: none;
  transform: translateY(-1px);
  box-shadow: 0 8px 20px rgba(39,79,157,.28), inset 0 1px 0 rgba(255,255,255,.2);
}
.btn-secondary,
.btn.secondary,
.btn-outline-secondary,
.btn.btn-outline-secondary{
  background: linear-gradient(180deg, rgba(255,255,255,.98) 0%, rgba(243,248,255,.90) 100%);
  color: var(--blue);
  border-color: rgba(49, 95, 186, 0.25);
}
.btn-secondary:hover,
.btn.secondary:hover,
.btn-outline-secondary:hover,
.btn.btn-outline-secondary:hover{
  border-color: rgba(49, 95, 186, 0.45);
  text-decoration: none;
}

.btn-danger,
.btn.danger{
  background: linear-gradient(180deg, #d95345 0%, var(--danger) 100%);
  border-color: #a73025;
  color: #fff;
}

.btn-danger:hover,
.btn.danger:hover{
  background: linear-gradient(180deg, #cb483b 0%, #a93226 100%);
  border-color: #8f2b20;
  text-decoration: none;
  transform: translateY(-1px);
}

.btn:hover {
  border-color: #b5c8e6;
  transform: translateY(-1px);
  box-shadow: 0 6px 14px rgba(15,23,42,.10), inset 0 1px 0 rgba(255,255,255,.85);
}

.btn:active {
  transform: translateY(0);
  box-shadow: 0 2px 6px rgba(15,23,42,.08), inset 0 1px 2px rgba(15,23,42,.08);
}

.btn-lg,
.btn.btn-lg{
  min-height: 40px;
  padding: 10px 14px;
  font-size: 14px;
}

.table {
  width: 100%;
  border-collapse: collapse;
  background: linear-gradient(180deg, rgba(255,255,255,.94) 0%, rgba(243,248,255,.86) 100%);
  border-radius: 12px;
  overflow: hidden;
  box-shadow: var(--shadow-soft);
}

.table th,
.table td {
  border-bottom: 1px solid #e9eef5;
  padding: 9px 10px;
  text-align: left;
  vertical-align: top;
}

.table th {
  color: var(--muted);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: .03em;
}

.tabs .tabbtn,
.subtabs .subtabbtn {
  transition: all .16s ease;
}

/* Shared utility classes (template inline-style cleanup) */
.util-m0, .u-m0 { margin: 0 !important; }
.util-mt0, .u-mt0 { margin-top: 0 !important; }
.util-mt4, .u-mt4 { margin-top: 4px !important; }
.util-mt8, .u-mt8 { margin-top: 8px !important; }
.util-mt10, .u-mt10 { margin-top: 10px !important; }
.util-mb6, .u-mb6 { margin-bottom: 6px !important; }
.util-mb8, .u-mb8 { margin-bottom: 8px !important; }
.util-mb10, .u-mb10 { margin-bottom: 10px !important; }
.util-mb12, .u-mb12 { margin-bottom: 12px !important; }
.util-mb14, .u-mb14 { margin-bottom: 14px !important; }
.util-mtm2, .u-mtm2 { margin-top: -2px !important; }
.util-p10, .u-p10 { padding: 10px !important; }
.util-p12, .u-p12 { padding: 12px !important; }
.util-fw600, .u-fw600 { font-weight: 600 !important; }
.util-gap10, .u-gap10 { gap: 10px !important; }
.util-ai-center, .u-ai-center { align-items: center !important; }
.util-maxw520, .u-maxw520 { max-width: 520px !important; }
.util-ml6, .u-ml6 { margin-left: 6px !important; }
.util-ml8, .u-ml8 { margin-left: 8px !important; }
.util-text-none, .u-text-none { text-decoration: none !important; }
.util-list-tight, .u-list-tight { margin: 0; padding-left: 16px; }

/* Admin dashboard cleanup helpers */
#onboardingBadge { display: none; }
.flash-success-card { margin-bottom: 12px; border: 1px solid #22c55e; background: #f0fdf4; }
.flash-error-card { margin-bottom: 12px; border: 1px solid #ef4444; background: #fef2f2; }
.flash-success-text { color: #166534; font-weight: 600; }
.flash-error-text { color: #7f1d1d; font-weight: 600; }
.badge-left-gap { margin-left: 6px; }

.hm-swatch-assigned { background: rgba(34,197,94,.16); border-color: rgba(34,197,94,.35); }
.hm-title { margin: 0; }
.hm-subtitle { margin-top: 4px; }
.hm-grid-head-spaced { margin-top: 12px; }

/* Engine diagnostics page */
.diag-wrap { max-width: 1100px; margin: 0 auto; }
.diag-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; gap: 12px; flex-wrap: wrap; }
.diag-cycle { color: var(--muted); font-size: 13px; }
.diag-back { font-size: 13px; }

.diag-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
@media (max-width: 980px) {
  .diag-grid { grid-template-columns: 1fr; }
}

.diag-panel {
  border: 1px solid rgba(184,205,235,.74);
  border-radius: 14px;
  padding: 12px;
  background: linear-gradient(180deg, rgba(255,255,255,.95) 0%, rgba(243,248,255,.84) 100%);
  box-shadow: var(--shadow-soft);
}

.diag-help { font-size: 13px; color: var(--muted); margin-bottom: 8px; }
.diag-scroll {
  overflow: auto;
  border: 1px solid rgba(199,218,242,.72);
  padding: 8px;
  border-radius: 8px;
  margin-bottom: 8px;
  background: rgba(255,255,255,.62);
}
.diag-scroll.seed { max-height: 180px; }
.diag-scroll.run { max-height: 140px; }
.diag-check {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin-bottom: 4px;
  line-height: 1.3;
}

.diag-check input[type="checkbox"] {
  margin: 2px 0 0 0;
  flex: 0 0 auto;
}

.diag-btn-pad { padding: 8px 12px; }

.diag-success-box {
  margin-top: 10px;
  font-size: 13px;
  background: linear-gradient(180deg, rgba(244,255,248,.94) 0%, rgba(232,248,239,.88) 100%);
  border: 1px solid #cfe7d6;
  border-radius: 8px;
  padding: 8px;
  box-shadow: 0 6px 14px rgba(15,23,42,.04);
}

.diag-label { display: block; font-size: 13px; margin-bottom: 4px; }
.diag-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 8px; }
.diag-grid-2-last { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 10px; }
.diag-grid-2-last .check-row {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  line-height: 1.3;
}
.diag-grid-2-last .check-row input[type="checkbox"] {
  margin-top: 2px;
  flex: 0 0 auto;
}
.diag-input-mb8 { margin-bottom: 8px; }

.diag-report {
  margin-top: 14px;
  border: 1px solid rgba(184,205,235,.74);
  border-radius: 14px;
  padding: 12px;
  background: linear-gradient(180deg, rgba(255,255,255,.95) 0%, rgba(243,248,255,.84) 100%);
  box-shadow: var(--shadow-soft);
}
.diag-kpis {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  font-size: 13px;
  margin-bottom: 10px;
}
@media (max-width: 900px) {
  .diag-kpis { grid-template-columns: 1fr 1fr; }
}

.diag-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.diag-table th,
.diag-table td {
  text-align: left;
  padding: 6px;
  border-bottom: 1px solid #edf1f7;
}

.diag-email-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
@media (max-width: 900px) {
  .diag-email-grid { grid-template-columns: 1fr; }
}

.diag-email-card {
  border: 1px solid rgba(184,205,235,.72);
  border-radius: 14px;
  padding: 8px;
  font-size: 12px;
  background: linear-gradient(180deg, rgba(255,255,255,.94) 0%, rgba(243,248,255,.84) 100%);
  box-shadow: 0 8px 20px rgba(15,23,42,.05);
}
.diag-email-preview { margin-top: 4px; color: #556273; }

.diag-raw {
  white-space: pre-wrap;
  word-break: break-word;
  background: #0b1020;
  color: #c6f2ff;
  padding: 10px;
  border-radius: 8px;
  max-height: 360px;
  overflow: auto;
  font-size: 12px;
}

/* Responsive */
@media (max-width: 900px){
  .hero{ grid-template-columns: 1fr; }
  .auth-hero { grid-template-columns: 1fr; }
  .auth-hero-wide { grid-template-columns: 1fr; }
  .report-hero { grid-template-columns: 1fr; }
  .report-form-grid-3 { grid-template-columns: 1fr 1fr; }
  h1{ font-size: 34px; }

  .topbar {
    min-height: 64px;
    padding: 10px 14px;
  }

  .topbar .container {
    padding: 0 14px;
  }

  .topbar > .brand,
  .topbar .topbar-container > .brand {
    flex: 1 1 100%;
    min-width: 0;
    max-width: 100%;
  }

  .topbar > .brand::after,
  .topbar .topbar-container > .brand::after {
    font-size: 11px;
  }

  .topbar > .topbar-right,
  .topbar .topbar-right,
  .topbar-links {
    width: 100%;
    justify-content: flex-start;
    margin-left: 0;
  }
}

@media (max-width: 700px){
  .container{
    padding: 12px;
  }

  .auth-shell {
    margin-top: 14px;
  }

  .report-shell,
  .report-shell-spacious {
    margin-top: 14px;
  }

  .report-form-grid-3 {
    grid-template-columns: 1fr;
  }

  .report-inline-actions,
  .report-inline-row,
  .report-card-split {
    gap: 10px;
  }

  .card,
  .progress-card,
  .issue-summary-card,
  .issue-panel,
  .diag-panel,
  .diag-report,
  .diag-email-card {
    padding: 12px;
    border-radius: 14px;
  }

  .row,
  .row.space,
  .cta-row,
  .progress-top,
  .diag-header,
  .topbar-inner,
  .topbar-links,
  .nav {
    flex-direction: column;
    align-items: stretch;
  }

  .row > *,
  .cta-row > * {
    max-width: 100%;
  }

  .row .btn,
  .cta-row .btn,
  .btn,
  .btn.btn-lg,
  .btn-lg {
    width: 100%;
    min-width: 0;
  }

  input:not([type="checkbox"]):not([type="radio"]),
  select,
  textarea {
    font-size: 16px;
  }

  .grid2,
  .grid3,
  .pagegrid,
  .kv,
  .diag-grid,
  .diag-grid-2,
  .diag-grid-2-last,
  .diag-kpis,
  .diag-email-grid,
  .issue-summary-grid {
    grid-template-columns: 1fr !important;
  }

  .subtabs,
  .tabs {
    display: grid;
    grid-template-columns: 1fr;
  }

  .subtabs .subtabbtn,
  .tabs .tabbtn,
  .subtabbtn,
  .tabbtn {
    width: 100%;
    text-align: left;
  }

  .table,
  .diag-table {
    display: block;
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    white-space: nowrap;
  }

  .table th,
  .table td,
  .diag-table th,
  .diag-table td {
    white-space: nowrap;
  }
}

@media (max-width: 520px){
  .topbar {
    padding: 8px 12px;
  }

  .topbar::after {
    left: 12px;
    right: 12px;
  }

  .topbar > .brand,
  .topbar .topbar-container > .brand {
    padding-left: 46px;
    min-height: 36px;
  }

  .topbar > .brand::before,
  .topbar .topbar-container > .brand::before {
    width: 34px;
    height: 34px;
    border-radius: 10px;
  }

  .topbar > .brand::after,
  .topbar .topbar-container > .brand::after {
    display: none;
  }

  .auth-actions {
    gap: 10px;
  }

  .report-inline-actions > *,
  .report-inline-row > * {
    width: 100%;
  }
}