/* Original artwork, optically recomposed. Intrinsic dimensions reserve the box. */
.brand img.vexel-brand-logo,
.topbar-brand img.vexel-brand-logo,
.login-brand img.vexel-brand-logo,
.logo img.vexel-brand-logo,
.header-logo img.vexel-brand-logo {
  display: block;
  width: auto;
  height: 36px;
  aspect-ratio: 551 / 108;
  object-fit: contain;
  flex: none;
  border: 0;
  border-radius: 0;
}
@media (max-width: 767px) {
  .header:has(> .header-logo > .vexel-brand-logo) { flex-wrap: wrap; }
  .header:has(> .header-logo > .vexel-brand-logo) > .back-btn { flex: 0 0 40px; }
  .header:has(> .header-logo > .vexel-brand-logo) > .header-os { max-width: 100%; overflow-wrap: anywhere; }
  .brand img.vexel-brand-logo,
  .topbar-brand img.vexel-brand-logo,
  .login-brand img.vexel-brand-logo,
  .logo img.vexel-brand-logo,
  .header-logo img.vexel-brand-logo { height: 32px; }
}

/* Shared top-level header geometry; login-card and document brands stay separate.
   Percentages use the actual content width, with the native gutter reserved once. */
:root {
  --brand-header-inset: 40px;
  --brand-header-max: 1320px;
  --brand-header-height: 76px;
  --brand-header-logo-height: 36px;
  --brand-safe-top: env(safe-area-inset-top, 0px);
  --brand-safe-right: env(safe-area-inset-right, 0px);
  --brand-safe-left: env(safe-area-inset-left, 0px);
}
.site-header .site-header-inner,
.topbar .topbar-inner {
  box-sizing: border-box;
  width: 100%;
  max-width: var(--brand-header-max);
  min-height: var(--brand-header-height);
  margin-inline: auto;
  padding-block: 8px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 24px;
}
.site-header,
.topbar:has(> .topbar-inner) {
  padding: var(--brand-safe-top) max(var(--brand-header-inset), var(--brand-safe-right)) 0 max(var(--brand-header-inset), var(--brand-safe-left));
}
.topbar:has(> .topbar-inner) { height: auto; min-height: 0; display: block; }
.topbar-inner .topbar-right { margin-left: auto; }
.topbar-inner .topbar-brand { transition: none; }
.topbar-inner .topbar-brand:hover { transform: none; }
.site-header .brand img.vexel-brand-logo,
.topbar .topbar-brand img.vexel-brand-logo { height: var(--brand-header-logo-height); }
@media (max-width: 1199px) {
  .site-header .site-header-inner, .topbar .topbar-inner { column-gap: 16px; }
}
@media (max-width: 1023px) { :root { --brand-header-inset: 24px; } }
@media (max-width: 767px) { :root { --brand-header-logo-height: 32px; } }
@media (max-width: 600px) {
  :root { --brand-header-inset: 20px; }
  .site-header .site-header-inner, .topbar .topbar-inner { column-gap: 8px; }
}
@media (max-width: 359px) {
  :root { --brand-header-logo-height: 24px; }
  .site-header .site-header-inner, .topbar .topbar-inner { column-gap: 4px; }
}

/* The two top-level account actions share one desktop control geometry. */
@media (min-width: 1024px) {
  .site-header .header-actions > .btn.btn-secondary.btn-compact,
  .topbar .topbar-right > .account-button {
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: max(158px, 10.533333rem);
    min-height: 44px;
    padding: 10px 12px;
    border: 1px solid #465362;
    border-radius: 14px;
    background: #1C2530;
    color: #F2F6FA;
    font-size: .9375rem;
    font-weight: 600;
    line-height: 1.375;
    text-align: center;
    white-space: nowrap;
  }
}
@media (max-width: 1023px) {
  .topbar .topbar-right > .account-button {
    font-size: .9375rem;
    font-weight: 600;
    line-height: 1.375;
  }
}

/* Shared ordinary text actions; compact icons and QR are excluded.
   Keep their existing dimensions, border width, typography and handlers. */
.btn-primary, .auth-btn, .vexel-action--primary {
  --action-fill: var(--primary);
  --action-text: var(--on-primary, var(--bg-primary));
  --action-border: transparent;
}
.btn-outline, .btn-secondary, .login-bot-btn, .vexel-action--outline {
  --action-fill: transparent;
  --action-text: var(--text-primary, var(--text));
  --action-border: var(--muted, var(--text-secondary));
}
:is(.btn:not(.btn-icon):not([data-device-action="show_qr"]), .auth-btn, .login-bot-btn,
    .home-page .header-actions > .btn.btn-secondary.btn-compact,
    .home-page .hero-actions .btn,
    .topbar .topbar-right > .account-button) {
  border-radius: 999px;
  background-image: none;
  background-color: var(--action-fill);
  color: var(--action-text);
  border-color: var(--action-border);
  box-shadow: none;
  transform: none;
  transition: background-color 190ms, color 190ms, border-color 190ms;
}
:is(.btn:not(.btn-icon), .auth-btn, .login-bot-btn) .icon {
  color: inherit;
  transform: none;
  transition: none;
}
@media (hover: hover) and (pointer: fine) {
  :is(.btn-primary, .auth-btn, .vexel-action--primary):not(:disabled):not([aria-disabled="true"]):not([aria-busy="true"]):hover { --action-fill: var(--primary-hover); }
  :is(.btn-outline, .btn-secondary, .login-bot-btn, .vexel-action--outline):not(:disabled):not([aria-disabled="true"]):not([aria-busy="true"]):not([data-device-action="show_qr"]):hover {
    --action-fill: var(--primary);
    --action-text: var(--on-primary, var(--bg-primary));
    --action-border: var(--primary);
  }
}
:is(.btn:not(.btn-icon):not(.btn-danger):not([data-device-action="show_qr"]), .auth-btn, .login-bot-btn, .vexel-action):not(:disabled):not([aria-disabled="true"]):not([aria-busy="true"]):active {
  --action-fill: var(--primary-pressed, var(--primary));
  --action-text: var(--on-primary, var(--bg-primary));
  --action-border: var(--primary-pressed, var(--primary));
}
@media (hover: none), (pointer: coarse) {
  :is(.btn:not(.btn-icon):not([data-device-action="show_qr"]), .auth-btn, .login-bot-btn,
      .home-page .header-actions > .btn.btn-secondary.btn-compact,
      .home-page .hero-actions .btn, .topbar .topbar-right > .account-button) { transition-duration: 120ms; }
  :is(.btn:not(.btn-icon):not([data-device-action="show_qr"]), .auth-btn, .login-bot-btn,
      .home-page .header-actions > .btn.btn-secondary.btn-compact,
      .home-page .hero-actions .btn, .topbar .topbar-right > .account-button):not(:disabled):not([aria-disabled="true"]):not([aria-busy="true"]):active { transition-duration: 0ms; }
}
@media (prefers-reduced-motion: reduce) {
  :is(.btn:not(.btn-icon):not([data-device-action="show_qr"]), .auth-btn, .login-bot-btn,
    .home-page .header-actions > .btn.btn-secondary.btn-compact,
      .home-page .hero-actions .btn,
      .topbar .topbar-right > .account-button) { transition: none; }
}

.btn-danger { --action-fill: var(--danger-soft, #36242C); --action-text: var(--danger, var(--accent-red)); --action-border: var(--danger-border, #AC6773); }
@media (hover: hover) and (pointer: fine) { .btn-danger:not(:disabled):hover { --action-fill: var(--danger-soft-hover, #482B35); } }
.btn-danger:not(:disabled):active { --action-fill: var(--danger-soft-hover, #482B35); }
:is(.btn, .auth-btn, .login-bot-btn):focus-visible { outline: 2px solid var(--primary); outline-offset: 4px; }
:is(.btn, .auth-btn, .login-bot-btn):is(:disabled, [aria-disabled="true"]) { cursor: not-allowed; opacity: .5; }