/* Catalog application controls styled to match the root index page.
   Button specimens and customer-preview buttons remain untouched. */
:root{
  --fs-ui-blue:#1697e6;
  --fs-ui-blue-2:#55c3ff;
  --fs-ui-blue-dark:#0c6fbe;
  --fs-ui-navy:#0e2a47;
  --fs-ui-line:#dce7f0;
}

.catalog-account-button,
.builder-top-link,
.full-preview-button,
.catalog-preview-heading > .demo-btn,
.builder-panel > .demo-btn,
.cloud-actions > .demo-btn,
.guided-callout > .demo-btn,
.guided-review-actions > .demo-btn,
.guided-nav > .demo-btn,
.button-target-actions > .demo-btn,
.editor-actions > .demo-btn,
#save-reference,
#cloud-sign-in,
#cloud-save-project,
#attach-contact,
#email-selections,
#theme-save-cloud,
#guided-next,
#fleming-recommended,
#ed-save{
  min-height:46px !important;
  padding:0 19px !important;
  border:1px solid transparent !important;
  border-radius:12px !important;
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  gap:.4em !important;
  color:#fff !important;
  background:linear-gradient(135deg,var(--fs-ui-blue-2),var(--fs-ui-blue) 55%,var(--fs-ui-blue-dark)) !important;
  box-shadow:0 10px 25px rgba(22,151,230,.28),inset 0 1px 0 rgba(255,255,255,.35) !important;
  font:inherit !important;
  font-weight:850 !important;
  line-height:1 !important;
  text-decoration:none !important;
  text-shadow:none !important;
  cursor:pointer !important;
  transition:transform .18s ease,box-shadow .18s ease,filter .18s ease !important;
}

.builder-actions button,
.guided-nav > button:not(.demo-btn),
.button-target-actions > button,
.editor-actions > button:not(.demo-btn),
.editor-devices > button,
#guided-back,
#ed-reset{
  min-height:44px !important;
  padding:0 17px !important;
  border:1px solid var(--fs-ui-line) !important;
  border-radius:12px !important;
  background:#fff !important;
  color:var(--fs-ui-navy) !important;
  box-shadow:0 5px 14px rgba(14,42,71,.06) !important;
  font:inherit !important;
  font-weight:850 !important;
  cursor:pointer !important;
  transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease !important;
}

.catalog-account-button:hover,
.builder-top-link:hover,
.full-preview-button:hover,
.catalog-preview-heading > .demo-btn:hover,
.builder-panel > .demo-btn:hover,
.cloud-actions > .demo-btn:hover,
.guided-callout > .demo-btn:hover,
.guided-review-actions > .demo-btn:hover,
.guided-nav > .demo-btn:hover,
.button-target-actions > .demo-btn:hover,
.editor-actions > .demo-btn:hover,
#save-reference:hover,
#cloud-sign-in:hover,
#cloud-save-project:hover,
#attach-contact:hover,
#email-selections:hover,
#theme-save-cloud:hover,
#guided-next:hover,
#fleming-recommended:hover,
#ed-save:hover,
.builder-actions button:hover,
.guided-nav > button:not(.demo-btn):hover,
.button-target-actions > button:hover,
.editor-actions > button:not(.demo-btn):hover,
.editor-devices > button:hover,
#guided-back:hover,
#ed-reset:hover{
  transform:translateY(-1px) !important;
}

.catalog-account-button:focus-visible,
.builder-top-link:focus-visible,
.full-preview-button:focus-visible,
.catalog-preview-heading > .demo-btn:focus-visible,
.builder-panel > .demo-btn:focus-visible,
button:focus-visible{
  outline:3px solid rgba(22,151,230,.25);
  outline-offset:3px;
}

/* Keep selected device controls readable while using the same geometry. */
.editor-devices > button.active,
.preview-toolbar > button.active{
  color:#fff !important;
  background:linear-gradient(135deg,var(--fs-ui-blue-2),var(--fs-ui-blue) 55%,var(--fs-ui-blue-dark)) !important;
  border-color:transparent !important;
  box-shadow:0 8px 20px rgba(22,151,230,.22) !important;
}

body.dark .builder-actions button,
body.dark .guided-nav > button:not(.demo-btn),
body.dark .button-target-actions > button,
body.dark .editor-actions > button:not(.demo-btn),
body.dark .editor-devices > button,
body.dark #guided-back,
body.dark #ed-reset{
  background:#10283c !important;
  color:#f7fbff !important;
  border-color:#385a73 !important;
}

/* Do not override the intentionally varied button specimens. */
body.button-catalog-page .sample .demo-btn{
  min-height:unset !important;
  padding:13px 22px !important;
}