/* Shared control system. Loaded last by marketing, the app, account pages and
   the support desk. Legacy class names are adapters, not separate designs. */
:root {
  --ui-control-ink: #171717;
  --ui-control-muted: #737373;
  --ui-control-surface: #fff;
  --ui-control-hover: #fafafa;
  --ui-control-line: #e5e5e5;
  --ui-control-focus: rgba(23, 23, 23, .3);
  --ui-control-ease: cubic-bezier(.22, 1, .36, 1);
  --ui-primary-top: #323137; --ui-primary-bottom: #201e25;
  --ui-primary-hover-top: #3c3b42; --ui-primary-hover-bottom: #29272f;
  --ui-primary-edge: #4b4951; --ui-primary-edge-mid: #31303a; --ui-primary-edge-bottom: #18171b;
  --ui-primary-text: #fafafa; --ui-primary-ring: #0d0d0d;
}
:is(.dark:not(button, a), [data-theme="dark"], .mk-dark, .marketing-home, .marketing-login, .band-dark, .rail, .side, .b-mast) {
  --ui-control-ink: #ededed;
  --ui-control-muted: #c0c0c6;
  --ui-control-surface: #232326;
  --ui-control-hover: #2a2a2d;
  --ui-control-line: rgba(255,255,255,.2);
  --ui-control-focus: rgba(237,237,237,.5);
  --ui-primary-top: #f4f4f5; --ui-primary-bottom: #e4e4e7;
  --ui-primary-hover-top: #fff; --ui-primary-hover-bottom: #ececef;
  --ui-primary-edge: #fff; --ui-primary-edge-mid: #ececef; --ui-primary-edge-bottom: #d4d4d8;
  --ui-primary-text: #121213; --ui-primary-ring: rgba(0,0,0,.6);
}
/* Light panels inside a dark marketing frame use the same light controls. */
:is(.on-light, .ac-card, .sign-card, .mk-dark .band-dark) {
  --ui-control-ink: #171717;
  --ui-control-muted: #737373;
  --ui-control-surface: #fff;
  --ui-control-hover: #fafafa;
  --ui-control-line: #e5e5e5;
  --ui-control-focus: rgba(23,23,23,.3);
  --ui-primary-top: #323137; --ui-primary-bottom: #201e25;
  --ui-primary-hover-top: #3c3b42; --ui-primary-hover-bottom: #29272f;
  --ui-primary-edge: #4b4951; --ui-primary-edge-mid: #31303a; --ui-primary-edge-bottom: #18171b;
  --ui-primary-text: #fafafa; --ui-primary-ring: #0d0d0d;
}
/* Every native button shares typography, corners and interaction feedback.
   Rows, tabs and switches keep the layout required by their function. */
body button, body [role="button"] {
  font-family: "Geist", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  font-weight: 500;
  letter-spacing: -.01em;
  border-radius: 12px !important;
  -webkit-tap-highlight-color: transparent;
  transition: background-color 160ms ease, border-color 160ms ease, color 160ms ease, box-shadow 160ms ease, transform 160ms var(--ui-control-ease), opacity 160ms ease;
}
body :is(button, [role="button"], .pill, .btn, .mk-button, .ac-btn):focus-visible {
  outline: 2px solid var(--ui-control-focus) !important;
  outline-offset: 3px;
}
body :is(button, [role="button"]):disabled { opacity: .4; cursor: default; }
body :is(button, [role="button"]):active:not(:disabled):not([aria-busy="true"]) { transform: scale(.97); }
/* One action-button shape, including links styled as actions. */
body :is(.pill, .btn, .mk-button, .ac-btn, .ui-button, button[type="submit"]) {
  --ui-height: 40px; --ui-pad: 16px; --ui-radius: 12px; --ui-font: 14px;
  box-sizing: border-box;
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  gap: 8px !important;
  height: var(--ui-height) !important;
  min-height: var(--ui-height) !important;
  padding: 0 var(--ui-pad) !important;
  border: 1px solid var(--ui-control-line) !important;
  border-radius: var(--ui-radius) !important;
  background: var(--ui-control-surface) !important;
  color: var(--ui-control-ink) !important;
  box-shadow: 0 1px 2px rgba(0,0,0,.06) !important;
  font-family: "Geist", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: var(--ui-font) !important;
  font-weight: 500 !important;
  line-height: 1 !important;
  letter-spacing: -.01em;
  white-space: nowrap;
  text-decoration: none !important;
  cursor: pointer;
  user-select: none;
  transition: background 160ms ease, color 160ms ease, box-shadow 160ms ease, transform 160ms var(--ui-control-ease), opacity 160ms ease;
}
body :is(.pill, .btn, .mk-button, .ac-btn, .ui-button, button[type="submit"]):hover:not(:disabled):not([aria-disabled="true"]) {
  background: var(--ui-control-hover) !important;
}
body :is(.pill.small, .btn.small, .ac-btn--sm, .ui-button[data-size="sm"]) {
  --ui-height: 32px; --ui-pad: 12px; --ui-radius: 10px; --ui-font: 13px;
}
body :is(.btn.lg, .mk-button, .ac-btn--wide, .ui-button[data-size="lg"]) {
  --ui-height: 48px; --ui-pad: 20px; --ui-radius: 14px; --ui-font: 15px;
}
body :is(.pill.round, .ui-button[data-icon-only]) { width: var(--ui-height) !important; padding: 0 !important; }
body :is(.pill, .btn, .mk-button, .ac-btn, .ui-button) > svg { flex: none; width: 18px; height: 18px; }
body :is(.pill.dark, .pill.accent, .pill.b-make, .pill.c-go, .pill.k-go, .pill.w-go, .btn.dark, .btn.accent, .btn.solid, .mk-button:not(.mk-button-outline), .ac-btn:not(.ac-btn--quiet), .ui-button[data-variant="primary"], button[type="submit"]:not(.pill, .btn, .ac-btn, .ui-button)) {
  background: linear-gradient(var(--ui-primary-top), var(--ui-primary-bottom)) padding-box, linear-gradient(var(--ui-primary-edge), var(--ui-primary-edge-mid), var(--ui-primary-edge-bottom)) border-box !important;
  border-color: transparent !important;
  color: var(--ui-primary-text) !important;
  box-shadow: 0 0 0 1px var(--ui-primary-ring), 0 2px 4px rgba(0,0,0,.1) !important;
}
body :is(.pill.dark, .pill.accent, .pill.b-make, .pill.c-go, .pill.k-go, .pill.w-go, .btn.dark, .btn.accent, .btn.solid, .mk-button:not(.mk-button-outline), .ac-btn:not(.ac-btn--quiet), .ui-button[data-variant="primary"], button[type="submit"]:not(.pill, .btn, .ac-btn, .ui-button)):hover:not(:disabled) {
  background: linear-gradient(var(--ui-primary-hover-top), var(--ui-primary-hover-bottom)) padding-box, linear-gradient(var(--ui-primary-edge), var(--ui-primary-edge-mid), var(--ui-primary-edge-bottom)) border-box !important;
}
body :is(.pill.ghost, .pill.b-ghost, .btn.ghost, .btn.quiet, .ui-button[data-variant="ghost"]) {
  border-color: transparent !important; background: transparent !important; color: var(--ui-control-muted) !important; box-shadow: none !important;
}
body :is(.pill.ghost, .pill.b-ghost, .btn.ghost, .btn.quiet, .ui-button[data-variant="ghost"]):hover:not(:disabled) {
  background: color-mix(in srgb, var(--ui-control-ink) 6%, transparent) !important; color: var(--ui-control-ink) !important;
}
body :is(.pill.danger, .btn.danger, .ui-button[data-variant="destructive"]) {
  border-color: transparent !important; background: #ffe6e9 !important; color: #c52232 !important; box-shadow: none !important;
}
body :is(.pill.danger, .btn.danger, .ui-button[data-variant="destructive"]):hover:not(:disabled) { background: #ffd5dc !important; }
body :is(.pill, .btn, .mk-button, .ac-btn, .ui-button)[hidden] { display: none !important; }
body :is(.ui-button, .pill, .btn):is([aria-pressed="true"], [aria-selected="true"]) {
  outline: 1px solid var(--ui-control-ink); outline-offset: -1px;
}
body :is(.pill, .btn, .mk-button, .ac-btn, .ui-button):is(:disabled, [aria-disabled="true"]) { opacity: .4; cursor: default; transform: none; }
body :is(button, .pill, .btn, .mk-button, .ac-btn)[aria-busy="true"] { opacity: 1; cursor: progress; }
body :is(button, .pill, .btn, .ac-btn)[aria-busy="true"]::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background: linear-gradient(100deg, transparent 30%, rgba(255,255,255,.2) 50%, transparent 70%) 100% 0 / 300% 100%;
  animation: ui-control-sweep 1.04s linear infinite;
}
body .ac-btn[data-done] { opacity: 1; }
@keyframes ui-control-sweep { to { background-position: 0 0; } }
/* Quiet actions such as resend and password visibility use the ghost family. */
body :is(.ac-link, .linkish, .ac-shell > button, .c-show, .ui-password > button) {
  border: 0; border-radius: 10px; background: transparent; color: var(--ui-control-muted);
  font-size: 13px; font-weight: 500; text-decoration: none; cursor: pointer;
}
body :is(.ac-link, .linkish, .ac-shell > button, .c-show, .ui-password > button):hover:not(:disabled) { color: var(--ui-control-ink); background: color-mix(in srgb, var(--ui-control-ink) 6%, transparent); }
/* Password and email fields share the OTP surface and focus treatment. */
body :is(.ac-input, .ui-password > input, .sign-card input[type="email"], [data-ui-password]) {
  box-sizing: border-box; min-width: 0; height: 48px !important; border: 1px solid #e4e4e7 !important; border-radius: 12px !important;
  background: #fafafa !important; color: #171717; font-size: 16px; padding: 0 14px;
  transition: box-shadow 220ms ease, border-color 220ms ease, background-color 220ms ease;
}
body :is(.ac-input, .ui-password > input, .sign-card input[type="email"], [data-ui-password]):focus {
  outline: none; border-color: #171717 !important; background: #fff !important; box-shadow: 0 0 0 4px rgba(23,23,23,.07) !important;
}
body :is(.ac-input, [data-ui-password])[aria-invalid="true"] { border-color: #e5484d !important; box-shadow: 0 0 0 4px rgba(229,72,77,.12) !important; }
body .ac-shell { position: relative; display: flex; min-height: 48px; padding: 0; border: 0; background: transparent; box-shadow: none; border-radius: 12px; }
body .ac-shell:focus-within { border: 0; box-shadow: none; }
body .ac-shell > .ac-input { width: 100%; min-height: 48px; padding: 0 68px 0 14px; }
body .ac-shell > button { position: absolute; right: 6px; top: 8px; min-height: 32px; height: 32px; padding: 0 10px; border: 0; }
.ui-password { position: relative; display: flex; align-items: center; width: 100%; }
.ui-password > input { width: 100%; padding-right: 68px !important; }
.ui-password > button { position: absolute; right: 6px; height: 32px; padding: 0 10px; }
@media (prefers-reduced-motion: reduce) {
  body :is(button, [role="button"], .pill, .btn, .mk-button, .ac-btn, .ui-button), body [aria-busy="true"]::after { animation: none !important; transition: none !important; }
  body :is(button, [role="button"]):active:not(:disabled) { transform: none; }
}